/* ==============================
   RESPONSIVE
   ============================== */

@media (max-width: 1100px) {
  :root {
    --content: min(100% - 44px, 1180px);
  }

  .nav__cta {
    display: none;
  }

  .portrait {
    right: 20px;
  }

  .hero__words {
    right: 0;
  }

  .capabilities__grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 30px;
    row-gap: 44px;
  }
}

@media (max-width: 860px) {
  .nav {
    height: auto;
  }

  .nav__inner {
    padding: 18px 0;
    align-items: flex-start;
    flex-direction: column;
  }

  .nav__links {
    width: 100%;
    overflow-x: auto;
    gap: 22px;
    padding-bottom: 3px;
  }

  .nav__links a {
    padding: 8px 0;
  }

  .nav__links a.active::after,
  .nav__links a:hover::after {
    bottom: -4px;
  }

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

  .hero__copy {
    padding-top: 50px;
  }

  .hero__visual {
    min-height: 470px;
  }

  .portrait {
    right: 6%;
    height: 480px;
  }

  .hero__words {
    top: 56px;
    right: 6%;
  }

  .projects__grid,
  .about__inner,
  .contact__inner {
    grid-template-columns: 1fr;
  }

  .capabilities__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }

  .capabilities {
    padding: 52px 0 50px;
  }

  .capabilities__header {
    margin-bottom: 36px;
  }

  .about__inner {
    gap: 34px;
  }

  .stats {
    border-left: 0;
  }

  .contact__inner {
    gap: 28px;
  }
}

@media (max-width: 560px) {
  :root {
    --content: min(100% - 30px, 1180px);
  }

  .brand {
    min-width: auto;
  }

  .hero__title {
    font-size: 39px;
  }

  .hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .hero__visual {
    min-height: 390px;
  }

  .portrait {
    height: 410px;
    right: -8%;
  }

  .visual-block--blue-back,
  .visual-block--blue-front,
  .visual-block--gold {
    transform: scale(0.8);
    transform-origin: bottom left;
  }

  .hero__words {
    display: none;
  }

  .projects {
    padding-top: 50px;
  }

  .capabilities__grid {
    grid-template-columns: 1fr;
    row-gap: 36px;
  }

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

  .stat {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 24px 0;
  }

  .stat:last-child {
    border-bottom: 0;
  }

  .footer__inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer__links {
    gap: 18px;
    flex-wrap: wrap;
  }
}