/* 1) Safety net: never allow horizontal scrolling */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 2) Mobile overlay nav should not create page width */
@media (max-width: 900px) {
  .mainNav {
    position: fixed; /* was absolute */
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    width: 100dvw; /* device viewport width, avoids scrollbar math */
    height: 100dvh; /* device viewport height */
    transform: translateX(100%);
  }
}

/* 3) Make sure big media never exceed container width */
img,
iframe,
video {
  max-width: 100%;
}

/* 4) Hide any accidental overflow inside map/card wrappers */
.mapCard {
  overflow: hidden;
}

/* 5) Grids: prevent columns that are wider than phone screens */
.sectionBusiness .businessTypes {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr));
}

/* 6) Tech rows: keep the left column from forcing overflow on tiny phones */
@media (max-width: 420px) {
  .techRow {
    grid-template-columns: 1fr; /* stack */
  }
}

/* lock page scroll when menu is open */
.navLock,
.navLock body {
  overflow: hidden;
} /* no background scroll while overlay is open */