/* Home page sections (positions follow the original 980 px layout) */

/* Hero */

.hero {
  --color-focus: var(--color-yellow);
  min-height: 926px;
}

.hero__title {
  padding-top: 77px;
  font-size: 60px;
  line-height: 1.1;
  letter-spacing: 0.05em;
  color: var(--color-yellow);
  text-align: center;
}

.hero__title span {
  display: block;
}

.hero__arrow {
  display: block;
  width: 54px;
  margin: 50px auto 0;
}

.hero__arrow img {
  width: 54px;
  height: 30px;
}

/* What We Do */

.services-section {
  padding-top: 5px;
}

.services {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  column-gap: 20px;
  justify-content: center;
  margin-top: 17px;
}

/* Who We Are */

.about {
  margin-top: 10px;
}

.about__inner {
  position: relative;
  display: grid;
  grid-template-columns: 363px minmax(0, 1fr);
  min-height: 782px;
}

.about__heading {
  position: absolute;
  top: 24px;
  left: 486px;
  z-index: 1;
}

.about__heading .section-title {
  text-align: left;
}

.about__heading-bar {
  margin-left: 83px;
}

.about__text {
  width: 355px;
  padding-top: 62px;
  font: 13px/1.27 var(--font-mono);
  color: var(--color-dark);
}

.about__bar {
  margin-top: -1px;
}

.about__history p {
  margin-top: 16px;
}

.about__history .about__bar + p {
  margin-top: 17px;
}

.about__progress {
  margin-top: 52px;
  text-align: right;
}

.about__bar--right {
  margin-right: 0;
  margin-left: auto;
}

.about__progress p {
  margin-top: 14px;
  line-height: 1.58;
}

.about__image {
  grid-column: 2;
  grid-row: 1;
  width: 802px;
  max-width: none;
  height: 782px;
  object-fit: contain;
}

/* Projects */

.projects {
  margin-top: 1px;
}

.project-grid {
  width: 907px;
  margin: 14px 0 0 50px;
}

/* Sectors */

.sectors {
  margin-top: 80px;
  padding-bottom: 59px;
}

.sectors__image {
  width: auto;
  height: 340px;
  margin: 37px auto 0;
}

/* Clients */

.clients-section {
  padding-top: 47px;
}

.clients {
  height: 373px;
  margin-top: -1px;
}

.clients__item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
}

.clients__item--petrobras { --x: 6px; --y: 58px; --w: 158px; --h: 72px; }
.clients__item--sabesp { --x: 186px; --y: 58px; --w: 75px; --h: 72px; }
.clients__item--idb { --x: 285px; --y: 52px; --w: 158px; --h: 72px; }
.clients__item--abb { --x: 462px; --y: 43px; --w: 97px; --h: 97px; }
.clients__item--vale { --x: 579px; --y: 44px; --w: 127px; --h: 97px; }
.clients__item--rockwell { --x: 732px; --y: 50px; --w: 116px; --h: 82px; }
.clients__item--siemens { --x: 867px; --y: 58px; --w: 97px; --h: 65px; }
.clients__item--concremat { --x: 10px; --y: 145px; --w: 233px; --h: 82px; }
.clients__item--comgas { --x: 259px; --y: 162px; --w: 116px; --h: 47px; }
.clients__item--brk { --x: 394px; --y: 141px; --w: 90px; --h: 90px; }
.clients__item--naturgy { --x: 507px; --y: 123px; --w: 116px; --h: 114px; }
.clients__item--gcds { --x: 633px; --y: 130px; --w: 104px; --h: 104px; }
.clients__item--algas { --x: 762px; --y: 126px; --w: 104px; --h: 104px; }
.clients__item--edp { --x: 888px; --y: 136px; --w: 81px; --h: 82px; }

/* Contact */

.contact {
  padding-top: 104px;
  padding-bottom: 27px;
}

.contact__offices {
  display: grid;
  grid-template-columns: 470px 475px;
  column-gap: 24px;
  margin: 24px 0 0 6px;
}

.contact__map {
  margin-bottom: 1px;
}

.contact__heading {
  padding-left: 3px;
  font-size: 20px;
  line-height: 1.4;
}

.contact__office--us .contact__heading {
  padding-left: 5px;
}

.contact__address {
  max-width: 342px;
  padding-left: 3px;
  font: var(--weight-light) 14px/1.5 var(--font-sans);
  color: var(--color-dark);
}

.contact__office--us .contact__address {
  padding-left: 9px;
}

.contact__heading--center {
  margin-top: 13px;
  padding-left: 0;
  text-align: center;
}

/* Responsive */

@media (max-width: 1199px) {
  .about__inner {
    min-height: 602px;
  }

  .about__image {
    width: 100%;
    height: 602px;
  }
}

@media (max-width: 1023px) {
  .hero {
    min-height: 520px;
  }

  .hero__title {
    font-size: 40px;
  }

  .about__inner {
    display: block;
    min-height: 0;
  }

  .about__heading {
    position: static;
    padding-top: 40px;
  }

  .about__heading .section-title {
    text-align: center;
  }

  .about__heading-bar {
    margin-left: auto;
  }

  .about__text {
    width: auto;
    max-width: 640px;
    margin: 0 auto;
    padding-top: 32px;
  }

  .about__image {
    width: 100%;
    height: auto;
    margin-top: 40px;
  }

  .projects {
    margin-top: 48px;
  }
}

@media (max-width: 1019px) {
  .services {
    grid-template-columns: repeat(2, 300px);
    row-gap: 32px;
  }

  .service-card:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: 300px;
  }

  .service-card__title {
    min-height: 0;
  }

  .project-grid {
    width: 100%;
    margin-left: 0;
  }

  .clients {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 28px 36px;
    height: auto;
    margin-top: 32px;
  }

  .clients__item {
    position: static;
    max-width: 158px;
    height: min(var(--h), 64px);
  }

  .contact {
    padding-top: 72px;
  }

  .contact__offices {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
    margin-left: 0;
  }

  .contact__heading,
  .contact__office--us .contact__heading,
  .contact__address,
  .contact__office--us .contact__address {
    padding-left: 0;
  }

  .contact__heading--center {
    margin-top: 32px;
  }
}

@media (max-width: 899px) {
  .sectors__image {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 700px) {
  .services {
    grid-template-columns: minmax(0, 400px);
  }

  .service-card:last-child {
    width: auto;
    justify-self: stretch;
  }

  .service-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 300 / 230;
  }

  .service-card__title {
    margin-left: 0;
  }

  .sectors {
    margin-top: 56px;
    padding-bottom: 40px;
  }
}

@media (max-width: 599px) {
  .hero {
    min-height: 471px;
  }

  .hero__title {
    padding-top: 56px;
    font-size: clamp(26px, 8vw, 32px);
  }

  .hero__arrow {
    width: 34px;
    margin-top: 24px;
  }

  .hero__arrow img {
    width: 34px;
    height: 19px;
  }

  .contact__map {
    height: 240px;
  }

  .contact-form {
    padding-left: 0;
    padding-right: 0;
  }
}