.mobile-logo {
  display: none;
  position: fixed;
  /* viewport-fit=cover lets the map render full-bleed under the notch/Dynamic
     Island, but that means top: 0 now sits behind it — push this back down by
     the safe-area inset so the logo stays exactly where it was before. */
  top: calc(2rem + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  width: 13.375rem;
  transition: width 300ms ease;
}

@media (max-width: 50rem) {
  .mobile-logo {
    display: block;
  }
}

.mobile-logo__image {
  display: block;
  width: 100%;
  height: auto;
}

.mobile-logo--minimized {
  width: 6.6875rem;
}