/* Gatespark v22: service hero mobile spacing + no phantom scroll gap.
   Desktop/tablet >= 651px is intentionally untouched. */
@media (max-width: 650px) {
  /* Service heroes should occupy exactly the space their visible content uses.
     This removes the old 110svh wrapper / 74svh hero mismatch on web_dev.html
     and the 138svh sticky-tail used by the other service pages. */
  .hero-scroll {
    height: auto !important;
    min-height: 0 !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    align-items: initial !important;
    /* Transparent header logo needs a clean first-view safety zone. */
    padding: clamp(104px, 13svh, 126px) 0 clamp(30px, 5svh, 46px) !important;
  }

  .hero-grid {
    align-items: center !important;
    align-self: auto !important;
    margin-top: 0 !important;
  }

  /* Keep artwork slightly lower with the copy instead of crowding the logo. */
  .hero-visual {
    align-self: center !important;
  }

  /* The first section after the hero must begin immediately after its content. */
  .hero-scroll + section {
    margin-top: 0 !important;
  }
}