.mobile-login {
  display: none;
}

@media (max-width: 900px) {
  .header nav.open .mobile-login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 12px 16px;
    box-sizing: border-box;
    background: var(--navy);
    color: #fff;
    border-radius: 8px;
    font-weight: 800;
    text-decoration: none;
  }

  .header nav.open .mobile-login:hover,
  .header nav.open .mobile-login:focus-visible {
    background: var(--orange);
    color: var(--navy);
    outline: 3px solid rgba(240, 168, 74, 0.3);
    outline-offset: 2px;
  }
}