/* Keeps the full page reachable on mobile browsers and above the fixed contact bar. */
html {
  min-height: 100%;
  overflow-x: clip;
  overflow-y: auto;
  scroll-padding-top: 100px;
}

body {
  min-height: 100%;
  overflow-x: clip;
  overflow-y: visible;
}

section[id] {
  scroll-margin-top: 100px;
}

@media (max-width: 850px) {
  html {
    scroll-padding-top: 84px;
  }

  body {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  section[id] {
    scroll-margin-top: 84px;
  }

  footer {
    padding-bottom: 36px;
  }

  .mobile-contact {
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}