/* Services page mobile/tablet footer placement: match About page behavior on 768px and below. */
@media only screen and (max-width: 768px) {
  html,
  body {
    min-height: 100% !important;
    height: auto !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
  }

  /* Disable the earlier flex footer rule only on mobile/tablet so the footer stays
     in the natural document flow, exactly after the Services content. */
  body.page {
    display: block !important;
    flex-direction: initial !important;
    align-items: initial !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* The header is fixed on mobile/tablet. Use real margin instead of top-offset,
     because top-offset moves the content visually but does not move the footer. */
  body.page > #wrapper.walkinto-services-wrapper {
    position: relative !important;
    z-index: 1 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
    margin-top: 92px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
  }

  body.page > #wrapper.walkinto-services-wrapper .walkinto-services-section {
    margin-bottom: 0 !important;
    padding-bottom: 22px !important;
  }

  body.page > footer {
    position: relative !important;
    display: block !important;
    clear: both !important;
    flex: none !important;
    width: 100% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 10px !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    align-self: auto !important;
  }
}