@media (max-width: 860px) {
  nav {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .yesphone {
    display: inline-flex;
    margin-left: auto;
  }

  .navLinks {
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding-top: 12px;
  }

  .navLinks.open {
    display: flex;
  }

  .navLinks a {
    width: 100%;
  }

  .splitHero,
  .introGrid,
  .threeCards,
  .portfolioGrid {
    grid-template-columns: 1fr;
  }

  .splitHero {
    padding: 22px;
    min-height: unset;
  }

  .heroText {
    padding: 20px 4px;
  }

  .codeCard {
    min-height: 360px;
  }

  .timelineItem {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  main {
    width: min(100% - 22px, 1120px);
    padding-top: 24px;
  }

  .brandLink img {
    width: 165px;
  }

  .hero,
  .pageHero,
  .contentCard,
  .routeCard,
  .projectCard,
  .timelineItem,
  .legalText,
  .contact-hero {
    border-radius: 22px;
  }

  .contentCard,
  .routeCard,
  .projectCard,
  .timelineItem,
  .legalText {
    padding: 22px;
  }

  .codeLines {
    left: 38px;
    right: 38px;
  }

  .statusChip {
    left: 38px;
  }
}

@media (max-width: 860px) {
  .profileHeroCard,
  .profileHeroCard img {
    min-height: 360px;
  }
}