/* Shared responsive behaviour for phones, tablets and desktop screens. */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe { max-width: 100%; }

@media (max-width: 1024px) {
  .nav { padding-inline: 5%; }
  .hero { padding-inline: 7%; min-height: 440px; }
  .wrap { padding-inline: 6%; }
}

@media (max-width: 760px) {
  .nav {
    height: auto;
    min-height: 66px;
    padding: 14px 6%;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
  }

  .brand { font-size: 23px; }

  .links {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    font-size: 9px;
  }

  .links a:nth-child(n) { display: inline-block; }
  .hero { min-height: 380px; padding: 72px 7% 48px; }
  .hero h1 { font-size: clamp(45px, 14vw, 70px); }
  .hero p { font-size: 15px; }
  .wrap { padding: 58px 7%; }
  .grid, .form-wrap, .image-split, .footer-grid { grid-template-columns: 1fr; }
  .image-split img { height: 290px; }
  .form { grid-template-columns: 1fr; }
  .footer-name { font-size: 42px; }
  .map { height: 300px; }
  input, select, textarea, button { max-width: 100%; }
}

@media (max-width: 400px) {
  .links { gap: 9px 12px; font-size: 8px; }
  .hero { min-height: 330px; }
}