/* Keep the PWA background full-bleed while placing controls inside iOS safe areas. */
@media (width <= 620px) {
  .header {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
  }

  .hero {
    padding-top: calc(env(safe-area-inset-top, 0px) + 88px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  }

  .hero-footer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .contact-panel {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  }

  footer {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 25px);
  }
}