html,
body {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
}

main,
section,
header,
footer,
.nav,
.hero,
.band,
.about,
.services,
.process,
.why,
.contact,
.footer {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.hero-inner,
.hero-stats,
.process-inner,
.contact-inner,
.footer-inner,
.about,
.why {
  width: 100%;
  min-width: 0;
}

.nav-logo,
.nav-links,
.hero-btns,
.contact-btns,
.about-img-col,
.about-copy,
.why-copy,
.why-cards,
.contact-copy,
.contact-map {
  min-width: 0;
}

.about,
.why,
.contact-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.why-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.steps {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
}

.contact-map {
  width: 100%;
  max-width: 100%;
}

.contact-map iframe {
  width: 100%;
  max-width: 100%;
}

img,
iframe {
  max-width: 100%;
}

@media (max-width: 960px) {
  .about,
  .why,
  .contact-inner,
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .nav,
  .hero-inner,
  .hero-stats,
  .about,
  .process,
  .why,
  .contact,
  .footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hero-title,
  .light-h2,
  .about-copy h2,
  .why-copy h2 {
    overflow-wrap: anywhere;
  }

  .btn {
    width: 100%;
    white-space: normal;
  }

  .hero-stats {
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: nowrap;
  }

  .stat {
    flex: 1 1 0;
    min-width: 0;
  }

  .stat strong {
    font-size: clamp(1.8rem, 11vw, 2.4rem);
  }

  .stat span {
    font-size: clamp(0.58rem, 2.7vw, 0.72rem);
    letter-spacing: 0.12em;
  }

  .stat-divider {
    flex: 0 0 1px;
  }

  .contact-map {
    min-height: 280px;
  }

  .contact-map iframe {
    min-height: 280px;
  }

  .contact-pill {
    max-width: calc(100% - 2rem);
    right: 1rem;
  }
}