/* Final mobile header treatment: crisp, flat wordmark over a solid navy scrim. */
@media (max-width: 760px) {
  body > .nav {
    background:
      linear-gradient(
        180deg,
        rgba(20, 48, 74, 0.96) 0%,
        rgba(20, 48, 74, 0.88) 70%,
        rgba(20, 48, 74, 0.78) 100%
      ) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body > .nav .logo {
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
  }

  body > .nav .logo-text,
  body > .nav .logo-name,
  body > .nav .logo-tag {
    color: #fff !important;
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
  }

  body > .nav .logo-mark,
  body > .nav .logo-mark-img {
    opacity: 1 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    /* Phase 13 logo lock: never recolour the artwork. The header already
       serves logo-mono-white.svg below 760px — filter invert is forbidden. */
    filter: none !important;
  }

  /* This scrim makes the header dark, so the controls sitting on it have to be
     light. The hamburger inherited the light-theme slate colour and was
     effectively invisible against the navy, and the header call to action was
     dark navy on dark navy. */
  body > .nav .nav-hamburger {
    color: #fff;
  }

  body > .nav .nav-cta {
    background: var(--accent);
    color: #fff;
  }
}