@media (max-width: 760px) {
  :root {
    --mobile-drawer-width: min(90vw, 410px);
    --mobile-menu-edge: clamp(16px, 5vw, 24px);
    --nav-icon-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 11.2 12 4l9 7.2v8.3a.5.5 0 0 1-.5.5H15v-6H9v6H3.5a.5.5 0 0 1-.5-.5v-8.3Z'/%3E%3C/svg%3E");
    --nav-icon-plane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.7 5.3c-.7-.7-2.4-.3-3.7 1l-3.2 3.2-8.6-3.1-1.6 1.6 6.9 4.8-3.3 3.3-3.2-.6-1.2 1.2 3.8 2 2 3.8 1.2-1.2-.6-3.2 3.3-3.3 4.8 6.9 1.6-1.6-3.1-8.6 3.2-3.2c1.3-1.3 1.7-3 .7-3.7Z'/%3E%3C/svg%3E");
    --nav-icon-safari: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm3.8 5.2-1.6 5.4a1 1 0 0 1-.7.7l-5.3 1.5 1.6-5.3a1 1 0 0 1 .7-.7l5.3-1.6Zm-3.8 4.9a1.1 1.1 0 1 0 0-2.2 1.1 1.1 0 0 0 0 2.2Z'/%3E%3C/svg%3E");
    --nav-icon-day: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5a7 7 0 0 0-7 7h14a7 7 0 0 0-7-7Zm0-4 1.2 2.8h-2.4L12 1ZM4.2 4.2l2.8 1.1-1.7 1.7-1.1-2.8ZM1 12l2.8-1.2v2.4L1 12Zm19.2-1.2L23 12l-2.8 1.2v-2.4Zm-.4-6.6-1.1 2.8L17 5.3l2.8-1.1ZM4 15h16v2H4v-2Zm2 4h12v2H6v-2Z'/%3E%3C/svg%3E");
    --nav-icon-trek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m2 20 7.2-13 3.2 5.2L15 8l7 12H2Zm7.3-8.5L6 17.5h6.9l-3.6-6Zm6-.2-2.6 4.2 1.2 2h4.7l-3.3-6.2Z'/%3E%3C/svg%3E");
    --nav-icon-about: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 4.5a1.4 1.4 0 1 1 0 2.8 1.4 1.4 0 0 1 0-2.8Zm2 11h-4v-1.7h1V12h-1v-1.7h3v5.5h1v1.7Z'/%3E%3C/svg%3E");
    --nav-icon-contact: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H8.2L4 21v-3H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm2 4v2h12V8H6Zm0 4v2h8v-2H6Z'/%3E%3C/svg%3E");
  }

  body.mobile-menu-open {
    overflow: hidden;
  }

  body.mobile-menu-open::before {
    position: fixed;
    inset: 0;
    z-index: 998;
    content: "";
    background:
      radial-gradient(circle at 18% 18%, rgba(213, 165, 49, 0.18), transparent 28%),
      rgba(14, 11, 8, 0.54);
    backdrop-filter: blur(7px);
  }

  .site-header {
    z-index: 1001;
  }

  .site-header .main-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 46px;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 100vw;
    min-height: 76px;
    padding: 10px 14px !important;
    background: rgba(240, 240, 239, 0.96);
  }

  .site-header .brand {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    max-width: 100%;
    min-width: 0;
    justify-self: start;
  }

  .site-header .brand-main {
    font-size: clamp(1.65rem, 7.5vw, 2rem);
  }

  .site-header .brand-script {
    font-size: clamp(1.05rem, 5vw, 1.34rem);
  }

  .site-header .brand-tag {
    max-width: 210px;
    font-size: 0.38rem;
    white-space: normal;
  }

  .site-header .menu-toggle {
    grid-column: 2;
    grid-row: 1;
    display: grid !important;
    place-items: center;
    justify-self: end;
    position: relative;
    z-index: 1004;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(56, 81, 38, 0.16);
    border-radius: 50%;
    background: #fffaf3;
    box-shadow: 0 8px 18px rgba(22, 24, 18, 0.14);
    transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  }

  .site-header .menu-toggle:active {
    transform: scale(0.95);
  }

  .site-header .menu-toggle span:not(.menu-label) {
    display: block;
    width: 16px;
    height: 2px;
    margin: 1.5px auto;
    border-radius: 999px;
    background: var(--clay-dark);
    transition: opacity 180ms ease, transform 180ms ease, width 180ms ease, background 180ms ease;
  }

  .site-header .menu-toggle .menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  body.mobile-menu-open .site-header .menu-toggle,
  .site-header .menu-toggle[aria-expanded="true"] {
    position: fixed;
    top: 18px;
    left: calc(var(--mobile-drawer-width) - 58px);
    z-index: 1004;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 250, 243, 0.12);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
  }

  body.mobile-menu-open .site-header .menu-toggle span:not(.menu-label),
  .site-header .menu-toggle[aria-expanded="true"] span:not(.menu-label) {
    position: absolute;
    width: 20px;
    margin: 0;
    background: #fffaf3;
  }

  body.mobile-menu-open .site-header .menu-toggle span:nth-child(1),
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: rotate(45deg);
  }

  body.mobile-menu-open .site-header .menu-toggle span:nth-child(2),
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  body.mobile-menu-open .site-header .menu-toggle span:nth-child(3),
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: rotate(-45deg);
  }

  .site-header .primary-nav,
  .site-header .nav-actions {
    position: fixed;
    left: 0;
    width: var(--mobile-drawer-width);
    margin: 0;
    border: 0;
    border-radius: 0;
    color: #fffaf3;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-105%);
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, visibility 220ms ease;
    will-change: transform;
  }

  .site-header .primary-nav {
    top: 0;
    bottom: 0;
    z-index: 1002;
    display: grid !important;
    align-content: start;
    gap: 7px;
    min-height: 100dvh;
    padding: 96px var(--mobile-menu-edge) 238px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
      linear-gradient(180deg, rgba(33, 25, 18, 0.86), rgba(25, 20, 15, 0.94) 46%, rgba(54, 32, 19, 0.95)),
      linear-gradient(135deg, rgba(213, 165, 49, 0.2), transparent 34%),
      url("assets/downloaded-images/serengeti-national-park-lion.jpg") center / cover;
    box-shadow: 28px 0 58px rgba(0, 0, 0, 0.34);
    text-transform: none;
    white-space: normal;
    scrollbar-width: thin;
    scrollbar-color: rgba(213, 165, 49, 0.46) rgba(255, 255, 255, 0.08);
  }

  .site-header .primary-nav::before {
    content: "Quest Serengeti Safaris";
    display: block;
    margin: -56px 54px 18px 0;
    color: rgba(255, 250, 243, 0.72);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    line-height: 1.3;
    text-transform: uppercase;
  }

  body.mobile-menu-open .site-header .primary-nav.is-open,
  body.mobile-menu-open .site-header .nav-actions.is-open,
  .site-header .primary-nav.is-open,
  .site-header .nav-actions.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }

  .site-header .primary-nav.is-open a {
    --nav-icon: var(--nav-icon-safari);
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 50px;
    padding: 0 13px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: rgba(255, 250, 243, 0.9);
    background: rgba(255, 250, 243, 0.055);
    font-size: clamp(0.84rem, 3.8vw, 0.96rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.18;
    text-transform: none;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
  }

  .site-header .primary-nav.is-open a::before {
    content: "";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background: currentColor;
    opacity: 0.86;
    -webkit-mask: var(--nav-icon) center / contain no-repeat;
    mask: var(--nav-icon) center / contain no-repeat;
  }

  .site-header .primary-nav.is-open a:nth-child(1) {
    --nav-icon: var(--nav-icon-home);
  }

  .site-header .primary-nav.is-open a:nth-child(2) {
    --nav-icon: var(--nav-icon-plane);
  }

  .site-header .primary-nav.is-open a:nth-child(3) {
    --nav-icon: var(--nav-icon-safari);
  }

  .site-header .primary-nav.is-open a:nth-child(4) {
    --nav-icon: var(--nav-icon-day);
  }

  .site-header .primary-nav.is-open a:nth-child(5) {
    --nav-icon: var(--nav-icon-trek);
  }

  .site-header .primary-nav.is-open a:nth-child(6) {
    --nav-icon: var(--nav-icon-about);
  }

  .site-header .primary-nav.is-open a:nth-child(7) {
    --nav-icon: var(--nav-icon-contact);
  }

  .site-header .primary-nav.is-open a:first-child {
    align-items: flex-start;
    min-height: 84px;
    margin-bottom: 8px;
    padding: 16px 15px;
    color: #fffaf3;
    border-color: rgba(213, 165, 49, 0.38);
    background:
      linear-gradient(135deg, rgba(213, 165, 49, 0.3), rgba(168, 58, 30, 0.12)),
      rgba(255, 250, 243, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 18px 32px rgba(0, 0, 0, 0.18);
  }

  body.mobile-menu-open .site-header .primary-nav.is-open a:first-child {
    min-height: 88px !important;
    margin-bottom: 8px !important;
    padding: 17px 15px 34px !important;
    border-color: rgba(213, 165, 49, 0.48) !important;
    background:
      linear-gradient(135deg, rgba(213, 165, 49, 0.36), rgba(168, 58, 30, 0.13)),
      rgba(255, 250, 243, 0.1) !important;
    font-size: 1rem !important;
  }

  body.mobile-menu-open .site-header .primary-nav.is-open a:first-child::after {
    left: 60px !important;
    bottom: 16px !important;
    content: "Safari homepage" !important;
    color: rgba(255, 250, 243, 0.62) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    -webkit-mask: none !important;
    mask: none !important;
    background: transparent !important;
  }

  .site-header .primary-nav.is-open a:first-child::before {
    margin-top: 2px;
    color: var(--gold);
  }

  .site-header .primary-nav.is-open a:first-child::after {
    position: absolute;
    left: 46px;
    right: 14px;
    bottom: 15px;
    content: "Safari homepage";
    color: rgba(255, 250, 243, 0.58);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
  }

  .site-header .primary-nav.is-open a:hover,
  .site-header .primary-nav.is-open a:focus-visible,
  .site-header .primary-nav.is-open a.is-active,
  .site-header .primary-nav.is-open a[aria-current="page"],
  .site-header .primary-nav.is-open a[aria-current="location"] {
    color: #fff;
    border-color: rgba(213, 165, 49, 0.42);
    background: rgba(213, 165, 49, 0.16);
    transform: translateX(3px);
  }

  .site-header .primary-nav.is-open a:active,
  .site-header .request-button:active,
  .site-header .language-button:active,
  .site-header .phone-link:active {
    transform: scale(0.98);
  }

  .site-header .nav-actions {
    bottom: 0;
    z-index: 1003;
    display: grid !important;
    gap: 10px;
    justify-items: stretch;
    padding: 14px var(--mobile-menu-edge) calc(16px + env(safe-area-inset-bottom));
    background:
      linear-gradient(180deg, rgba(30, 24, 18, 0), rgba(30, 24, 18, 0.92) 18%, rgba(34, 25, 18, 0.98));
    box-shadow: 0 -18px 36px rgba(19, 14, 10, 0.22);
  }

  .site-header .phone-link,
  .site-header .nav-actions.is-open .phone-link {
    justify-self: stretch;
    min-height: 38px;
    padding: 0 12px 0 42px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    color: rgba(255, 250, 243, 0.9);
    background: rgba(255, 250, 243, 0.08);
    font-size: 0.86rem;
    font-weight: 800;
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
  }

  .site-header .phone-link::before {
    left: 12px;
    width: 20px;
    height: 20px;
    border-color: rgba(255, 255, 255, 0.22);
  }

  .site-header .phone-link:hover,
  .site-header .phone-link:focus-visible {
    border-color: rgba(37, 211, 102, 0.36);
    background: rgba(37, 211, 102, 0.12);
  }

  .site-header .nav-action-row,
  .site-header .nav-actions.is-open .nav-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  .site-header .language-picker,
  .site-header .language-button,
  .site-header .request-button,
  .site-header .nav-actions.is-open .language-picker,
  .site-header .nav-actions.is-open .language-button,
  .site-header .nav-actions.is-open .request-button {
    width: 100%;
  }

  .site-header .language-button {
    min-height: 40px;
    border-color: rgba(255, 255, 255, 0.14);
    border-radius: 9px;
    color: rgba(255, 250, 243, 0.86);
    background: rgba(255, 250, 243, 0.09);
    font-size: 0.8rem;
    font-weight: 800;
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
  }

  .site-header .language-picker.is-open .language-button,
  .site-header .language-button:hover,
  .site-header .language-button:focus-visible {
    border-color: rgba(213, 165, 49, 0.36);
    background: rgba(255, 250, 243, 0.14);
  }

  .site-header .language-menu {
    top: auto;
    bottom: calc(100% + 8px);
    width: min(280px, calc(var(--mobile-drawer-width) - var(--mobile-menu-edge) - var(--mobile-menu-edge)));
    max-height: min(46dvh, 320px);
    border-color: rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    background: rgba(33, 25, 18, 0.98);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
  }

  .site-header .language-menu button {
    min-height: 36px;
    border-bottom-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 250, 243, 0.9);
    background: transparent;
    font-size: 0.8rem;
  }

  .site-header .language-menu button:hover,
  .site-header .language-menu button.is-selected {
    color: #fff;
    background: rgba(213, 165, 49, 0.18);
  }

  .site-header .request-button,
  .site-header .nav-actions.is-open .request-button {
    grid-column: 1 / -1;
    order: -1;
    min-height: 48px;
    border-radius: 12px;
    color: #28180e;
    background: linear-gradient(135deg, #f1c35a, #d5a531 55%, #b97425);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    transition: box-shadow 180ms ease, filter 180ms ease, transform 180ms ease;
  }

  .site-header .request-button:hover,
  .site-header .request-button:focus-visible {
    filter: brightness(1.04);
    box-shadow: 0 18px 34px rgba(213, 165, 49, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.38);
  }

  .site-header .client-profile,
  .site-header .nav-actions.is-open .client-profile {
    justify-self: end;
    width: auto;
  }

  .site-header .client-chip,
  .site-header .nav-actions.is-open .client-chip {
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 250, 243, 0.12);
    color: #fffaf3;
    box-shadow: none;
  }

  .site-header .compact-currency {
    display: none;
  }

  .site-header .client-profile-menu,
  .site-header .nav-actions.is-open .client-profile-menu {
    top: auto;
    right: 0;
    bottom: calc(100% + 10px);
    left: auto;
    width: min(310px, calc(var(--mobile-drawer-width) - 32px));
  }

  @media (max-width: 380px) {
    :root {
      --mobile-drawer-width: min(94vw, 360px);
      --mobile-menu-edge: 14px;
    }

    .site-header .primary-nav {
      gap: 6px;
      padding-top: 88px;
      padding-bottom: 226px;
    }

    .site-header .primary-nav::before {
      margin-bottom: 14px;
      font-size: 0.62rem;
    }

    .site-header .primary-nav.is-open a {
      min-height: 46px;
      padding-inline: 11px;
      font-size: 0.82rem;
    }

    .site-header .primary-nav.is-open a:first-child {
      min-height: 76px;
    }

    .site-header .nav-actions {
      gap: 8px;
      padding-top: 12px;
    }

    .site-header .request-button,
    .site-header .nav-actions.is-open .request-button {
      min-height: 44px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .site-header .primary-nav,
    .site-header .nav-actions,
    .site-header .primary-nav.is-open a,
    .site-header .request-button,
    .site-header .menu-toggle,
    .site-header .menu-toggle span:not(.menu-label) {
      transition: none;
    }
  }
}

/* Keep language outside the phone drawer. */
@media (max-width: 760px) {
  body.mobile-menu-open .site-header .nav-actions.is-open .language-picker {
    display: none !important;
  }

  body.mobile-menu-open .site-header .nav-actions.is-open .nav-action-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  body.mobile-menu-open .site-header .nav-actions.is-open .request-button {
    grid-column: 1 !important;
  }

  body.mobile-menu-open .site-header .nav-actions.is-open {
    gap: 10px !important;
  }
}

/* Final responsive language sizing for all phone widths. */
@media (max-width: 760px) {
  body:not(.mobile-menu-open) .site-header .main-nav {
    grid-template-columns: 34px minmax(0, 1fr) clamp(94px, 34vw, 148px) !important;
    overflow: visible !important;
  }

  body:not(.mobile-menu-open) .site-header .nav-actions,
  body:not(.mobile-menu-open) .site-header .nav-action-row,
  body:not(.mobile-menu-open) .site-header .language-picker,
  body:not(.mobile-menu-open) .site-header .language-button {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body:not(.mobile-menu-open) .site-header .language-button {
    grid-template-columns: clamp(18px, 5.5vw, 24px) minmax(0, 1fr) 12px !important;
    gap: clamp(4px, 1.4vw, 6px) !important;
    padding-inline: clamp(6px, 2vw, 9px) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  body:not(.mobile-menu-open) .site-header #languageName {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body:not(.mobile-menu-open) .site-header .language-button .language-flag {
    width: clamp(18px, 5.5vw, 24px) !important;
    height: clamp(13px, 4vw, 17px) !important;
  }

  body:not(.mobile-menu-open) .site-header .language-picker.is-open .language-menu {
    right: max(8px, env(safe-area-inset-right)) !important;
    width: min(260px, calc(100vw - 20px)) !important;
    height: min(360px, calc(100dvh - 92px)) !important;
    max-height: min(360px, calc(100dvh - 92px)) !important;
  }

  body:not(.mobile-menu-open) .site-header .language-menu button {
    grid-template-columns: 24px minmax(0, 1fr) !important;
    overflow: hidden !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  @media (max-width: 390px) {
    body:not(.mobile-menu-open) .site-header .main-nav {
      grid-template-columns: 34px minmax(0, 1fr) clamp(88px, 31vw, 120px) !important;
      gap: 6px !important;
    }

    body:not(.mobile-menu-open) .site-header .language-button {
      min-height: 34px !important;
      font-size: clamp(0.76rem, 3.3vw, 0.88rem) !important;
    }

    body:not(.mobile-menu-open) .site-header .language-picker.is-open .language-menu {
      top: 68px !important;
      width: min(238px, calc(100vw - 16px)) !important;
      height: min(340px, calc(100dvh - 82px)) !important;
      max-height: min(340px, calc(100dvh - 82px)) !important;
    }
  }

  @media (max-width: 330px) {
    body:not(.mobile-menu-open) .site-header .main-nav {
      grid-template-columns: 32px minmax(0, 1fr) 82px !important;
      gap: 5px !important;
      padding-inline: 7px !important;
    }

    body:not(.mobile-menu-open) .site-header .language-button {
      grid-template-columns: 18px minmax(0, 1fr) 10px !important;
      min-height: 32px !important;
      padding-inline: 5px !important;
      font-size: 0.72rem !important;
    }
  }
}

/* Makini-style compact mobile header for Quest. Keep this final. */
@media (max-width: 760px) {
  .site-header {
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(43, 25, 12, 0.14) !important;
  }

  .site-header .main-nav {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) minmax(112px, 148px) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 74px !important;
    padding: 10px 14px !important;
    background: #fff !important;
  }

  body:not(.mobile-menu-open) .site-header .menu-toggle {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transform: none !important;
  }

  body:not(.mobile-menu-open) .site-header .menu-toggle span:not(.menu-label) {
    width: 24px !important;
    height: 2.5px !important;
    margin: 0.11px auto !important;
    border-radius: 999px !important;
    background: #111 !important;
  }

  body:not(.mobile-menu-open) .site-header .brand {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    width: min(100%, 210px) !important;
    min-width: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    transform: none !important;
  }

  body:not(.mobile-menu-open) .site-header .brand-wordmark,
  body:not(.mobile-menu-open) .site-header .brand-line {
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
  }

  body:not(.mobile-menu-open) .site-header .brand-main {
    font-size: clamp(2.05rem, 9.1vw, 2.75rem) !important;
    line-height: 0.82 !important;
    letter-spacing: 0 !important;
  }

  body:not(.mobile-menu-open) .site-header .brand-script {
    margin-left: 2px !important;
    font-size: clamp(1rem, 4.3vw, 1.32rem) !important;
    line-height: 0.9 !important;
  }

  body:not(.mobile-menu-open) .site-header .brand-tag {
    margin-top: 3px !important;
    font-size: 0.47rem !important;
    line-height: 1.05 !important;
    letter-spacing: 0.12em !important;
    white-space: nowrap !important;
  }

  body:not(.mobile-menu-open) .site-header .nav-actions {
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    justify-self: end !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body:not(.mobile-menu-open) .site-header .nav-action-row {
    display: flex !important;
    width: 100% !important;
  }

  body:not(.mobile-menu-open) .site-header .phone-link,
  body:not(.mobile-menu-open) .site-header .request-button,
  body:not(.mobile-menu-open) .site-header .client-profile,
  body:not(.mobile-menu-open) .site-header .compact-currency {
    display: none !important;
  }

  body:not(.mobile-menu-open) .site-header .language-picker {
    display: block !important;
    width: 100% !important;
  }

  body:not(.mobile-menu-open) .site-header .language-button {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) 14px !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 0 9px !important;
    border: 1px solid rgba(43, 25, 12, 0.24) !important;
    border-radius: 0 !important;
    color: #5b4634 !important;
    background: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75) !important;
    font-size: clamp(0.9rem, 3.8vw, 1.08rem) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  body:not(.mobile-menu-open) .site-header .language-button .language-flag {
    width: 24px !important;
    height: 17px !important;
    border-radius: 1px !important;
  }

  body:not(.mobile-menu-open) .site-header .language-button span:last-child {
    font-size: 0 !important;
  }

  body:not(.mobile-menu-open) .site-header .language-button span:last-child::before {
    content: "" !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border-right: 2px solid #6d6258 !important;
    border-bottom: 2px solid #6d6258 !important;
    transform: translateY(-2px) rotate(45deg) !important;
  }

  body:not(.mobile-menu-open) .site-header .language-menu {
    right: 0 !important;
    left: auto !important;
    width: min(72vw, 230px) !important;
  }

  body.mobile-menu-open .site-header .menu-toggle,
  .site-header .menu-toggle[aria-expanded="true"] {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .site-header .menu-toggle .menu-label {
    display: none !important;
  }

  @media (max-width: 390px) {
    .site-header .main-nav {
      grid-template-columns: 36px minmax(0, 1fr) minmax(106px, 132px) !important;
      gap: 7px !important;
      min-height: 68px !important;
      padding: 8px 10px !important;
    }

    body:not(.mobile-menu-open) .site-header .brand {
      width: min(100%, 188px) !important;
    }

    body:not(.mobile-menu-open) .site-header .brand-main {
      font-size: clamp(1.84rem, 8.7vw, 2.25rem) !important;
    }

    body:not(.mobile-menu-open) .site-header .brand-script {
      font-size: clamp(0.88rem, 4vw, 1.05rem) !important;
    }

    body:not(.mobile-menu-open) .site-header .brand-tag {
      font-size: 0.42rem !important;
      letter-spacing: 0.1em !important;
    }

    body:not(.mobile-menu-open) .site-header .language-button {
      min-height: 34px !important;
      padding: 0 7px !important;
      font-size: 0.88rem !important;
    }
  }

  @media (max-width: 340px) {
    .site-header .main-nav {
      grid-template-columns: 34px minmax(0, 1fr) 108px !important;
      gap: 6px !important;
      padding: 8px !important;
    }

    body:not(.mobile-menu-open) .site-header .brand {
      width: min(100%, 150px) !important;
    }

    body:not(.mobile-menu-open) .site-header .language-button {
      grid-template-columns: 21px minmax(0, 1fr) 12px !important;
      gap: 5px !important;
      padding: 0 6px !important;
      font-size: 0.82rem !important;
    }

    body:not(.mobile-menu-open) .site-header .language-button .language-flag {
      width: 21px !important;
      height: 15px !important;
    }
  }
}

/* Final phone header layout: menu left, Quest logo center, language right. */
@media (max-width: 760px) {
  .site-header .main-nav {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) minmax(118px, 148px) !important;
    align-items: center !important;
    column-gap: 10px !important;
    min-height: 72px !important;
    padding: 10px 14px !important;
    background: #f7f7f5 !important;
  }

  .site-header .menu-toggle {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: static !important;
    justify-self: start !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .site-header .menu-toggle span:not(.menu-label) {
    width: 24px !important;
    height: 2px !important;
    margin: 0.11px auto !important;
    background: #141414 !important;
  }

  .site-header .brand {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .site-header .brand-line {
    justify-content: center !important;
  }

  .site-header .brand-main {
    font-size: clamp(1.45rem, 6vw, 1.9rem) !important;
  }

  .site-header .brand-script {
    font-size: clamp(0.95rem, 4.4vw, 1.24rem) !important;
  }

  .site-header .brand-tag {
    max-width: 200px !important;
    margin-inline: auto !important;
    font-size: 0.34rem !important;
    letter-spacing: 0.08em !important;
  }

  body:not(.mobile-menu-open) .site-header .nav-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    position: static !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  body:not(.mobile-menu-open) .site-header .phone-link,
  body:not(.mobile-menu-open) .site-header .request-button,
  body:not(.mobile-menu-open) .site-header .client-profile,
  body:not(.mobile-menu-open) .site-header .compact-currency {
    display: none !important;
  }

  body:not(.mobile-menu-open) .site-header .nav-action-row {
    display: block !important;
    width: 100% !important;
  }

  body:not(.mobile-menu-open) .site-header .language-picker {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body:not(.mobile-menu-open) .site-header .language-button {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) 14px !important;
    gap: 7px !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 4px 8px !important;
    border: 1px solid rgba(31, 36, 27, 0.22) !important;
    border-radius: 0 !important;
    color: #5b5b5b !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: clamp(0.82rem, 3.7vw, 0.98rem) !important;
    font-weight: 600 !important;
  }

  body:not(.mobile-menu-open) .site-header .language-menu {
    right: 0 !important;
    left: auto !important;
    width: min(260px, calc(100vw - 28px)) !important;
  }

  body.mobile-menu-open .site-header .menu-toggle,
  .site-header .menu-toggle[aria-expanded="true"] {
    position: fixed !important;
    left: calc(min(92vw, 420px) - 48px) !important;
  }

  @media (max-width: 380px) {
    .site-header .main-nav {
      grid-template-columns: 34px minmax(0, 1fr) 112px !important;
      column-gap: 8px !important;
      padding-inline: 10px !important;
    }

    .site-header .brand-main {
      font-size: clamp(1.28rem, 5.7vw, 1.6rem) !important;
    }

    .site-header .brand-script {
      font-size: clamp(0.84rem, 4vw, 1.02rem) !important;
    }

    .site-header .brand-tag {
      max-width: 150px !important;
      font-size: 0.28rem !important;
    }

    body:not(.mobile-menu-open) .site-header .language-button {
      grid-template-columns: 22px minmax(0, 1fr) 10px !important;
      gap: 5px !important;
      min-height: 36px !important;
      padding-inline: 6px !important;
      font-size: 0.78rem !important;
    }
  }
}

/* Makini-style mobile header: menu left, Quest logo center, language right. */
@media (max-width: 760px) {
  .site-header .main-nav {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) minmax(118px, 148px) !important;
    align-items: center !important;
    column-gap: 10px !important;
    min-height: 72px !important;
    padding: 10px 14px !important;
    background: #f7f7f5 !important;
  }

  .site-header .menu-toggle {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: static !important;
    justify-self: start !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .site-header .menu-toggle span:not(.menu-label) {
    width: 24px !important;
    height: 2px !important;
    margin: 0.11px auto !important;
    background: #141414 !important;
  }

  .site-header .brand {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .site-header .brand-line {
    justify-content: center !important;
  }

  .site-header .brand-main {
    font-size: clamp(1.45rem, 6vw, 1.9rem) !important;
  }

  .site-header .brand-script {
    font-size: clamp(0.95rem, 4.4vw, 1.24rem) !important;
  }

  .site-header .brand-tag {
    max-width: 200px !important;
    margin-inline: auto !important;
    font-size: 0.34rem !important;
    letter-spacing: 0.08em !important;
  }

  body:not(.mobile-menu-open) .site-header .nav-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    position: static !important;
    display: block !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  body:not(.mobile-menu-open) .site-header .phone-link,
  body:not(.mobile-menu-open) .site-header .request-button,
  body:not(.mobile-menu-open) .site-header .client-profile,
  body:not(.mobile-menu-open) .site-header .compact-currency {
    display: none !important;
  }

  body:not(.mobile-menu-open) .site-header .nav-action-row {
    display: block !important;
    width: 100% !important;
  }

  body:not(.mobile-menu-open) .site-header .language-picker {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body:not(.mobile-menu-open) .site-header .language-button {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) 14px !important;
    gap: 7px !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 4px 8px !important;
    border: 1px solid rgba(31, 36, 27, 0.22) !important;
    border-radius: 0 !important;
    color: #5b5b5b !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: clamp(0.82rem, 3.7vw, 0.98rem) !important;
    font-weight: 600 !important;
  }

  body:not(.mobile-menu-open) .site-header .language-button .language-flag {
    width: 24px !important;
    height: 16px !important;
  }

  body:not(.mobile-menu-open) .site-header .language-menu {
    right: 0 !important;
    left: auto !important;
    width: min(260px, calc(100vw - 28px)) !important;
  }

  body.mobile-menu-open .site-header .menu-toggle,
  .site-header .menu-toggle[aria-expanded="true"] {
    position: fixed !important;
    left: calc(min(92vw, 420px) - 48px) !important;
  }

  @media (max-width: 380px) {
    .site-header .main-nav {
      grid-template-columns: 34px minmax(0, 1fr) 112px !important;
      column-gap: 8px !important;
      padding-inline: 10px !important;
    }

    .site-header .brand-main {
      font-size: clamp(1.28rem, 5.7vw, 1.6rem) !important;
    }

    .site-header .brand-script {
      font-size: clamp(0.84rem, 4vw, 1.02rem) !important;
    }

    .site-header .brand-tag {
      max-width: 150px !important;
      font-size: 0.28rem !important;
    }

    body:not(.mobile-menu-open) .site-header .language-button {
      grid-template-columns: 22px minmax(0, 1fr) 10px !important;
      gap: 5px !important;
      min-height: 36px !important;
      padding-inline: 6px !important;
      font-size: 0.78rem !important;
    }
  }
}

/* Compact phone hamburger button. Keep this last. */
@media (max-width: 760px) {
  .site-header .menu-toggle {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .site-header .menu-toggle span:not(.menu-label) {
    width: 15px !important;
    height: 2px !important;
    margin: 0.11px auto !important;
  }

  body.mobile-menu-open .site-header .menu-toggle,
  .site-header .menu-toggle[aria-expanded="true"] {
    left: calc(min(92vw, 420px) - 48px) !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  body.mobile-menu-open .site-header .menu-toggle span:not(.menu-label),
  .site-header .menu-toggle[aria-expanded="true"] span:not(.menu-label) {
    width: 18px !important;
  }

  .site-header .main-nav {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) minmax(118px, 148px) !important;
    align-items: center !important;
    column-gap: 10px !important;
    min-height: 72px !important;
    padding: 10px 14px !important;
    background: #f7f7f5 !important;
  }

  body:not(.mobile-menu-open) .site-header .menu-toggle {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: static !important;
    justify-self: start !important;
  }

  body:not(.mobile-menu-open) .site-header .menu-toggle span:not(.menu-label) {
    width: 24px !important;
    background: #141414 !important;
  }

  .site-header .brand {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .site-header .brand-line {
    justify-content: center !important;
  }

  .site-header .brand-main {
    font-size: clamp(1.45rem, 6vw, 1.9rem) !important;
  }

  .site-header .brand-script {
    font-size: clamp(0.95rem, 4.4vw, 1.24rem) !important;
  }

  .site-header .brand-tag {
    max-width: 200px !important;
    margin-inline: auto !important;
    font-size: 0.34rem !important;
    letter-spacing: 0.08em !important;
  }

  body:not(.mobile-menu-open) .site-header .nav-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    position: static !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  body:not(.mobile-menu-open) .site-header .phone-link,
  body:not(.mobile-menu-open) .site-header .request-button,
  body:not(.mobile-menu-open) .site-header .client-profile,
  body:not(.mobile-menu-open) .site-header .compact-currency {
    display: none !important;
  }

  body:not(.mobile-menu-open) .site-header .nav-action-row {
    display: block !important;
    width: 100% !important;
  }

  body:not(.mobile-menu-open) .site-header .language-picker {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body:not(.mobile-menu-open) .site-header .language-button {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) 14px !important;
    gap: 7px !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 4px 8px !important;
    border: 1px solid rgba(31, 36, 27, 0.22) !important;
    border-radius: 0 !important;
    color: #5b5b5b !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: clamp(0.82rem, 3.7vw, 0.98rem) !important;
    font-weight: 600 !important;
  }

  body:not(.mobile-menu-open) .site-header .language-menu {
    right: 0 !important;
    left: auto !important;
    width: min(260px, calc(100vw - 28px)) !important;
  }

  @media (max-width: 380px) {
    .site-header .main-nav {
      grid-template-columns: 34px minmax(0, 1fr) 112px !important;
      column-gap: 8px !important;
      padding-inline: 10px !important;
    }

    .site-header .brand-main {
      font-size: clamp(1.28rem, 5.7vw, 1.6rem) !important;
    }

    .site-header .brand-script {
      font-size: clamp(0.84rem, 4vw, 1.02rem) !important;
    }

    .site-header .brand-tag {
      max-width: 150px !important;
      font-size: 0.28rem !important;
    }

    body:not(.mobile-menu-open) .site-header .language-button {
      grid-template-columns: 22px minmax(0, 1fr) 10px !important;
      gap: 5px !important;
      min-height: 36px !important;
      padding-inline: 6px !important;
      font-size: 0.78rem !important;
    }

    body.mobile-menu-open .site-header .menu-toggle,
    .site-header .menu-toggle[aria-expanded="true"] {
      left: calc(min(94vw, 360px) - 48px) !important;
    }
  }
}

/* Phone menu final layer. Keep this at the end because this file loads after quest.css. */
@media (max-width: 760px) {
  body.mobile-menu-open::before {
    background:
      radial-gradient(circle at 18% 14%, rgba(213, 165, 49, 0.24), transparent 28%),
      linear-gradient(90deg, rgba(18, 12, 8, 0.18), rgba(18, 12, 8, 0.68)),
      rgba(13, 10, 7, 0.54) !important;
    backdrop-filter: blur(8px) saturate(1.1) !important;
  }

  body.mobile-menu-open .site-header .menu-toggle,
  .site-header .menu-toggle[aria-expanded="true"] {
    left: calc(min(92vw, 420px) - 62px) !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid rgba(255, 250, 243, 0.18) !important;
    border-radius: 50% !important;
    background: rgba(255, 250, 243, 0.12) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26) !important;
    backdrop-filter: blur(12px) !important;
  }

  body.mobile-menu-open .site-header .primary-nav.is-open,
  .site-header .primary-nav.is-open {
    gap: 9px !important;
    width: min(92vw, 420px) !important;
    padding: 104px 22px 258px !important;
    border-right: 1px solid rgba(213, 165, 49, 0.22) !important;
    background:
      linear-gradient(180deg, rgba(37, 28, 20, 0.78), rgba(24, 18, 13, 0.96) 42%, rgba(63, 35, 18, 0.94)),
      linear-gradient(135deg, rgba(213, 165, 49, 0.24), transparent 34%),
      url("assets/downloaded-images/serengeti-national-park-lion.jpg") center / cover !important;
    box-shadow: 30px 0 70px rgba(0, 0, 0, 0.42) !important;
  }

  .site-header .primary-nav.is-open::before {
    content: "Quest Serengeti Safaris\A Private Tanzania journeys" !important;
    margin: -64px 56px 16px 0 !important;
    padding: 14px 15px !important;
    border: 1px solid rgba(255, 250, 243, 0.12) !important;
    border-radius: 14px !important;
    color: rgba(255, 250, 243, 0.82) !important;
    background:
      linear-gradient(135deg, rgba(255, 250, 243, 0.13), rgba(213, 165, 49, 0.08)),
      rgba(20, 15, 10, 0.26) !important;
    font-size: 0.74rem !important;
    line-height: 1.55 !important;
    white-space: pre-line !important;
  }

  body.mobile-menu-open .site-header .primary-nav.is-open a,
  .site-header .primary-nav.is-open a {
    min-height: 50px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(255, 250, 243, 0.1) !important;
    border-radius: 12px !important;
    background:
      linear-gradient(135deg, rgba(255, 250, 243, 0.1), rgba(255, 250, 243, 0.035)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    font-size: clamp(0.84rem, 3.6vw, 0.95rem) !important;
    font-weight: 750 !important;
  }

  .site-header .primary-nav.is-open a::before {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    border: 1px solid rgba(213, 165, 49, 0.35) !important;
    border-radius: 10px !important;
    background:
      radial-gradient(circle at 50% 50%, rgba(241, 195, 90, 0.95) 0 18%, transparent 20%),
      linear-gradient(135deg, rgba(213, 165, 49, 0.26), rgba(255, 250, 243, 0.07)) !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  .site-header .primary-nav.is-open a:first-child {
    min-height: 88px !important;
    margin-bottom: 8px !important;
    padding: 17px 15px 34px !important;
    border-color: rgba(213, 165, 49, 0.48) !important;
    background:
      linear-gradient(135deg, rgba(213, 165, 49, 0.36), rgba(168, 58, 30, 0.13)),
      rgba(255, 250, 243, 0.1) !important;
    font-size: 1rem !important;
  }

  .site-header .primary-nav.is-open a:first-child::after {
    left: 60px !important;
    bottom: 16px !important;
    content: "Safari homepage" !important;
    color: rgba(255, 250, 243, 0.62) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    -webkit-mask: none !important;
    mask: none !important;
    background: transparent !important;
  }

  body.mobile-menu-open .site-header .nav-actions.is-open,
  .site-header .nav-actions.is-open {
    width: min(92vw, 420px) !important;
    padding: 14px 22px calc(18px + env(safe-area-inset-bottom)) !important;
    background:
      linear-gradient(180deg, rgba(32, 24, 17, 0), rgba(28, 21, 15, 0.94) 18%, rgba(42, 26, 16, 0.98)) !important;
  }

  body.mobile-menu-open .site-header .phone-link,
  .site-header .nav-actions.is-open .phone-link {
    min-height: 40px !important;
    border-color: rgba(37, 211, 102, 0.28) !important;
    background: rgba(37, 211, 102, 0.1) !important;
    font-size: 0.86rem !important;
  }

  body.mobile-menu-open .site-header .request-button,
  .site-header .nav-actions.is-open .request-button {
    min-height: 50px !important;
    border-radius: 13px !important;
    color: #2b190c !important;
    background: linear-gradient(135deg, #f6cf73, #d5a531 56%, #a95516) !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.09em !important;
  }

  body.mobile-menu-open .site-header .primary-nav.is-open a:first-child {
    min-height: 88px !important;
    margin-bottom: 8px !important;
    padding: 17px 15px 34px !important;
    border-color: rgba(213, 165, 49, 0.48) !important;
    background:
      linear-gradient(135deg, rgba(213, 165, 49, 0.36), rgba(168, 58, 30, 0.13)),
      rgba(255, 250, 243, 0.1) !important;
    font-size: 1rem !important;
  }

  body.mobile-menu-open .site-header .primary-nav.is-open a:first-child::after {
    left: 60px !important;
    bottom: 16px !important;
    content: "Safari homepage" !important;
    color: rgba(255, 250, 243, 0.62) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    -webkit-mask: none !important;
    mask: none !important;
    background: transparent !important;
  }
}

/* Compact phone hamburger button. This is intentionally last. */
@media (max-width: 760px) {
  .site-header .menu-toggle {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .site-header .menu-toggle span:not(.menu-label) {
    width: 15px !important;
    height: 2px !important;
    margin: 0.11px auto !important;
  }

  body.mobile-menu-open .site-header .menu-toggle,
  .site-header .menu-toggle[aria-expanded="true"] {
    left: calc(min(92vw, 420px) - 48px) !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  body.mobile-menu-open .site-header .menu-toggle span:not(.menu-label),
  .site-header .menu-toggle[aria-expanded="true"] span:not(.menu-label) {
    width: 18px !important;
  }

  @media (max-width: 380px) {
    body.mobile-menu-open .site-header .menu-toggle,
    .site-header .menu-toggle[aria-expanded="true"] {
      left: calc(min(94vw, 360px) - 48px) !important;
    }
  }
}

/* Final mobile header override: Makini-style layout for Quest. */
@media (max-width: 760px) {
  .site-header {
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(43, 25, 12, 0.14) !important;
  }

  .site-header .main-nav {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) minmax(112px, 148px) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 74px !important;
    padding: 10px 14px !important;
    background: #fff !important;
  }

  body:not(.mobile-menu-open) .site-header .menu-toggle {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transform: none !important;
  }

  body:not(.mobile-menu-open) .site-header .menu-toggle span:not(.menu-label) {
    width: 24px !important;
    height: 2.5px !important;
    margin: 0.11px auto !important;
    border-radius: 999px !important;
    background: #111 !important;
  }

  body:not(.mobile-menu-open) .site-header .brand {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    width: min(100%, 210px) !important;
    min-width: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    transform: none !important;
  }

  body:not(.mobile-menu-open) .site-header .brand-wordmark,
  body:not(.mobile-menu-open) .site-header .brand-line {
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
  }

  body:not(.mobile-menu-open) .site-header .brand-main {
    font-size: clamp(2.05rem, 9.1vw, 2.75rem) !important;
    line-height: 0.82 !important;
    letter-spacing: 0 !important;
  }

  body:not(.mobile-menu-open) .site-header .brand-script {
    margin-left: 2px !important;
    font-size: clamp(1rem, 4.3vw, 1.32rem) !important;
    line-height: 0.9 !important;
  }

  body:not(.mobile-menu-open) .site-header .brand-tag {
    margin-top: 3px !important;
    font-size: 0.47rem !important;
    line-height: 1.05 !important;
    letter-spacing: 0.12em !important;
    white-space: nowrap !important;
  }

  body:not(.mobile-menu-open) .site-header .nav-actions {
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    justify-self: end !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body:not(.mobile-menu-open) .site-header .nav-action-row {
    display: flex !important;
    width: 100% !important;
  }

  body:not(.mobile-menu-open) .site-header .phone-link,
  body:not(.mobile-menu-open) .site-header .request-button,
  body:not(.mobile-menu-open) .site-header .client-profile,
  body:not(.mobile-menu-open) .site-header .compact-currency {
    display: none !important;
  }

  body:not(.mobile-menu-open) .site-header .language-picker {
    display: block !important;
    width: 100% !important;
  }

  body:not(.mobile-menu-open) .site-header .language-button {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) 14px !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 0 9px !important;
    border: 1px solid rgba(43, 25, 12, 0.24) !important;
    border-radius: 0 !important;
    color: #5b4634 !important;
    background: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75) !important;
    font-size: clamp(0.9rem, 3.8vw, 1.08rem) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  body:not(.mobile-menu-open) .site-header .language-button .language-flag {
    width: 24px !important;
    height: 17px !important;
    border-radius: 1px !important;
  }

  body:not(.mobile-menu-open) .site-header .language-button span:last-child {
    font-size: 0 !important;
  }

  body:not(.mobile-menu-open) .site-header .language-button span:last-child::before {
    content: "" !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border-right: 2px solid #6d6258 !important;
    border-bottom: 2px solid #6d6258 !important;
    transform: translateY(-2px) rotate(45deg) !important;
  }

  body:not(.mobile-menu-open) .site-header .language-menu {
    right: 0 !important;
    left: auto !important;
    width: min(72vw, 230px) !important;
  }

  body.mobile-menu-open .site-header .menu-toggle,
  .site-header .menu-toggle[aria-expanded="true"] {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .site-header .menu-toggle .menu-label {
    display: none !important;
  }

  @media (max-width: 390px) {
    .site-header .main-nav {
      grid-template-columns: 36px minmax(0, 1fr) minmax(106px, 132px) !important;
      gap: 7px !important;
      min-height: 68px !important;
      padding: 8px 10px !important;
    }

    body:not(.mobile-menu-open) .site-header .brand {
      width: min(100%, 188px) !important;
    }

    body:not(.mobile-menu-open) .site-header .brand-main {
      font-size: clamp(1.84rem, 8.7vw, 2.25rem) !important;
    }

    body:not(.mobile-menu-open) .site-header .brand-script {
      font-size: clamp(0.88rem, 4vw, 1.05rem) !important;
    }

    body:not(.mobile-menu-open) .site-header .brand-tag {
      font-size: 0.42rem !important;
      letter-spacing: 0.1em !important;
    }

    body:not(.mobile-menu-open) .site-header .language-button {
      min-height: 34px !important;
      padding: 0 7px !important;
      font-size: 0.88rem !important;
    }
  }
}

@media (max-width: 340px) {
  .site-header .main-nav {
    grid-template-columns: 34px minmax(0, 1fr) 108px !important;
    gap: 6px !important;
    padding: 8px !important;
  }

  body:not(.mobile-menu-open) .site-header .brand {
    width: min(100%, 150px) !important;
  }

  body:not(.mobile-menu-open) .site-header .language-button {
    grid-template-columns: 21px minmax(0, 1fr) 12px !important;
    gap: 5px !important;
    padding: 0 6px !important;
    font-size: 0.82rem !important;
  }

  body:not(.mobile-menu-open) .site-header .language-button .language-flag {
    width: 21px !important;
    height: 15px !important;
  }
}

/* Phone polish: tighter hamburger lines and a usable language dropdown. */
@media (max-width: 760px) {
  .site-header .menu-toggle {
    gap: 0 !important;
  }

  .site-header .menu-toggle span:not(.menu-label),
  body:not(.mobile-menu-open) .site-header .menu-toggle span:not(.menu-label),
  body.mobile-menu-open .site-header .menu-toggle span:not(.menu-label),
  .site-header .menu-toggle[aria-expanded="true"] span:not(.menu-label) {
    height: 2.4px !important;
    margin: -0.55px auto !important;
  }

  body:not(.mobile-menu-open) .site-header .menu-toggle span:not(.menu-label) {
    width: 24px !important;
  }

  body:not(.mobile-menu-open) .site-header .language-picker {
    position: relative !important;
  }

  body:not(.mobile-menu-open) .site-header .language-picker.is-open .language-menu {
    position: fixed !important;
    top: 74px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 100000 !important;
    display: grid !important;
    width: min(78vw, 238px) !important;
    height: min(58vh, 360px) !important;
    max-height: min(58vh, 360px) !important;
    margin: 0 !important;
    padding: 7px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border: 1px solid rgba(91, 70, 52, 0.18) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 18px 42px rgba(43, 25, 12, 0.2) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  body:not(.mobile-menu-open) .site-header .language-menu button {
    min-height: 38px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    color: #3b2a1d !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
  }

  @media (max-width: 390px) {
    body:not(.mobile-menu-open) .site-header .language-picker.is-open .language-menu {
      top: 68px !important;
      right: 8px !important;
      bottom: auto !important;
      width: min(82vw, 220px) !important;
      height: min(60vh, 340px) !important;
      max-height: min(60vh, 340px) !important;
    }
  }
}

/* Final mobile language picker behavior: real dropdown, touch scroll, no clipping. */
@media (max-width: 760px) {
  body:not(.mobile-menu-open) .site-header,
  body:not(.mobile-menu-open) .site-header .main-nav,
  body:not(.mobile-menu-open) .site-header .nav-actions,
  body:not(.mobile-menu-open) .site-header .nav-action-row {
    overflow: visible !important;
  }

  body:not(.mobile-menu-open) .site-header .language-picker {
    position: relative !important;
    z-index: 5000 !important;
  }

  body:not(.mobile-menu-open) .site-header .language-button {
    position: relative !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }

  body:not(.mobile-menu-open) .site-header .language-button[aria-expanded="true"] {
    border-color: rgba(177, 116, 24, 0.42) !important;
    box-shadow: 0 10px 24px rgba(52, 32, 17, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.95) !important;
  }

  body:not(.mobile-menu-open) .site-header .language-menu {
    position: fixed !important;
    top: var(--language-menu-top, 86px) !important;
    right: var(--language-menu-right, 10px) !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 100000 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    width: var(--language-menu-width, min(78vw, 248px)) !important;
    max-width: calc(100vw - 20px) !important;
    height: auto !important;
    max-height: var(--language-menu-max-height, min(52dvh, 380px)) !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    border: 1px solid rgba(102, 71, 37, 0.18) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.99) !important;
    box-shadow: 0 20px 48px rgba(43, 25, 12, 0.22) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-6px) scale(0.985) !important;
    transform-origin: top right !important;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease !important;
  }

  body:not(.mobile-menu-open) .site-header .language-picker.is-open .language-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  body:not(.mobile-menu-open) .site-header .language-menu::-webkit-scrollbar {
    width: 5px !important;
  }

  body:not(.mobile-menu-open) .site-header .language-menu::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(126, 79, 30, 0.34) !important;
  }

  body:not(.mobile-menu-open) .site-header .language-menu button {
    display: grid !important;
    grid-template-columns: 25px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #3b2a1d !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  body:not(.mobile-menu-open) .site-header .language-menu button:hover,
  body:not(.mobile-menu-open) .site-header .language-menu button:focus-visible,
  body:not(.mobile-menu-open) .site-header .language-menu button.is-selected {
    background: rgba(185, 125, 38, 0.12) !important;
    color: #7b4a17 !important;
    outline: 0 !important;
  }

  body:not(.mobile-menu-open) .site-header .language-menu .language-flag {
    width: 25px !important;
    height: 17px !important;
    border-radius: 2px !important;
  }
}

/* Final phone hamburger spacing: tight three-line icon like the reference. */
@media (max-width: 760px) {
  .site-header .menu-toggle,
  body:not(.mobile-menu-open) .site-header .menu-toggle {
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .site-header .menu-toggle span:not(.menu-label),
  body:not(.mobile-menu-open) .site-header .menu-toggle span:not(.menu-label) {
    display: block !important;
    width: 27px !important;
    height: 2.5px !important;
    margin: 1.6px 0 !important;
    border-radius: 999px !important;
    background: #151515 !important;
    transform: none !important;
  }
}

/* Final premium polish for the opened phone drawer. */
@media (max-width: 760px) {
  body.mobile-menu-open::before {
    background:
      linear-gradient(90deg, rgba(8, 6, 4, 0.08), rgba(8, 6, 4, 0.62)),
      rgba(10, 8, 6, 0.48) !important;
    backdrop-filter: blur(10px) saturate(1.08) !important;
  }

  body.mobile-menu-open .site-header .primary-nav.is-open,
  .site-header .primary-nav.is-open {
    width: min(88vw, 390px) !important;
    gap: 8px !important;
    padding: 94px 18px 242px !important;
    border-right: 1px solid rgba(219, 166, 68, 0.22) !important;
    background:
      linear-gradient(180deg, rgba(45, 36, 29, 0.92), rgba(25, 18, 13, 0.96) 48%, rgba(48, 28, 16, 0.98)),
      radial-gradient(circle at 28% 12%, rgba(219, 166, 68, 0.22), transparent 28%),
      url("assets/downloaded-images/serengeti-national-park-lion.jpg") center / cover !important;
    box-shadow: 26px 0 58px rgba(0, 0, 0, 0.38) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .site-header .primary-nav.is-open::before {
    content: "Quest Serengeti Safaris\A Private Tanzania Journeys" !important;
    margin: -52px 46px 14px 0 !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(255, 244, 222, 0.14) !important;
    border-radius: 10px !important;
    color: rgba(255, 248, 235, 0.86) !important;
    background: rgba(255, 250, 243, 0.075) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    line-height: 1.55 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    white-space: pre-line !important;
  }

  body.mobile-menu-open .site-header .primary-nav.is-open a,
  .site-header .primary-nav.is-open a {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 12px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(255, 244, 222, 0.105) !important;
    border-radius: 10px !important;
    color: rgba(255, 250, 242, 0.9) !important;
    background: rgba(255, 250, 243, 0.065) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
    font-size: 0.92rem !important;
    font-weight: 760 !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    transform: translateZ(0) !important;
  }

  .site-header .primary-nav.is-open a::before {
    grid-column: 1 !important;
    grid-row: 1 !important;
    content: "" !important;
    display: block !important;
    flex: none !important;
    width: 21px !important;
    height: 21px !important;
    margin: 0 auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, #ffe39b, #d6a33c 58%, #9f5b19) !important;
    box-shadow: none !important;
    -webkit-mask: var(--menu-icon) center / contain no-repeat !important;
    mask: var(--menu-icon) center / contain no-repeat !important;
  }

  .site-header .primary-nav.is-open a:not(:first-child)::after {
    display: none !important;
    content: "" !important;
  }

  .site-header .primary-nav.is-open a:hover,
  .site-header .primary-nav.is-open a:focus-visible,
  .site-header .primary-nav.is-open a.is-active,
  .site-header .primary-nav.is-open a[aria-current="location"] {
    border-color: rgba(232, 178, 74, 0.28) !important;
    color: #fff7e8 !important;
    background: rgba(219, 166, 68, 0.13) !important;
    transform: translateX(2px) !important;
  }

  .site-header .primary-nav.is-open a:first-child {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    min-height: 72px !important;
    margin: 4px 0 8px !important;
    padding: 13px 14px !important;
    border-color: rgba(232, 178, 74, 0.44) !important;
    color: #fff9eb !important;
    background:
      linear-gradient(135deg, rgba(219, 166, 68, 0.24), rgba(111, 56, 24, 0.16)),
      rgba(255, 250, 243, 0.08) !important;
  }

  .site-header .primary-nav.is-open a:first-child::before {
    grid-row: 1 / span 2 !important;
    width: 24px !important;
    height: 24px !important;
  }

  .site-header .primary-nav.is-open a:first-child::after,
  body.mobile-menu-open .site-header .primary-nav.is-open a:first-child::after {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: block !important;
    content: "Safari homepage" !important;
    width: auto !important;
    height: auto !important;
    margin-top: 4px !important;
    color: rgba(255, 244, 222, 0.62) !important;
    background: transparent !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  body.mobile-menu-open .site-header .nav-actions.is-open,
  .site-header .nav-actions.is-open {
    width: min(88vw, 390px) !important;
    padding: 13px 18px calc(18px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(255, 244, 222, 0.08) !important;
    background:
      linear-gradient(180deg, rgba(31, 23, 17, 0), rgba(25, 18, 13, 0.98) 22%, rgba(43, 26, 15, 0.99)) !important;
  }

  body.mobile-menu-open .site-header .phone-link,
  .site-header .nav-actions.is-open .phone-link {
    min-height: 38px !important;
    border-radius: 999px !important;
    border-color: rgba(37, 211, 102, 0.22) !important;
    color: #f6fff8 !important;
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.16), rgba(37, 211, 102, 0.07)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
    font-size: 0.84rem !important;
  }

  body.mobile-menu-open .site-header .request-button,
  .site-header .nav-actions.is-open .request-button {
    min-height: 48px !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: #2d1a0c !important;
    background: linear-gradient(135deg, #ffe08c, #d79b2b 58%, #ae5f17) !important;
    box-shadow: 0 14px 32px rgba(156, 83, 18, 0.26) !important;
    font-size: 0.8rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
  }

  body.mobile-menu-open .site-header .menu-toggle,
  .site-header .menu-toggle[aria-expanded="true"] {
    left: calc(min(88vw, 390px) - 46px) !important;
    top: 82px !important;
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  body.mobile-menu-open .site-header .menu-toggle span:not(.menu-label),
  .site-header .menu-toggle[aria-expanded="true"] span:not(.menu-label) {
    width: 18px !important;
    height: 2.3px !important;
    margin: 0 !important;
    background: #fff8ed !important;
  }

  body.mobile-menu-open .site-header .menu-toggle span:nth-child(1),
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(2.3px) rotate(45deg) !important;
  }

  body.mobile-menu-open .site-header .menu-toggle span:nth-child(2),
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0 !important;
  }

  body.mobile-menu-open .site-header .menu-toggle span:nth-child(3),
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-2.3px) rotate(-45deg) !important;
  }
}

/* Profile chip polish in the mobile drawer. */
@media (max-width: 760px) {
  body.mobile-menu-open .site-header .client-profile,
  .site-header .nav-actions.is-open .client-profile {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    line-height: 0 !important;
  }

  body.mobile-menu-open .site-header .client-chip,
  .site-header .nav-actions.is-open .client-chip {
    box-sizing: border-box !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 4px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #1f241b !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  body.mobile-menu-open .site-header .client-avatar,
  .site-header .nav-actions.is-open .client-avatar {
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
    border: 2px solid #fff !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #f6cf73, #d5a531 56%, #b77a17) !important;
    color: #1f241b !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  body.mobile-menu-open .site-header .client-avatar img,
  .site-header .nav-actions.is-open .client-avatar img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    object-fit: cover !important;
  }
}