/* ==========================================================================
   Serviços — frentes de trabalho
   ========================================================================== */

.services {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 5.4271vw 0 5.625vw;
  display: flex;
  flex-direction: column;
  background-color: var(--color-red);
}

.services__title {
  margin: 0 0 0 2.4306vw;
  width: 94.0278vw;
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 6.5972vw;
  color: var(--color-black);
  line-height: 106%;
}

.services__intro {
  position: relative;
  width: 94.2361vw;
  min-width: 0;
  display: flex;
  margin: -4.5729vw 0 0 2.7778vw;
  gap: 2.2917vw;
  align-items: flex-end;
}

.services__portrait {
  position: relative;
  width: 45.0694vw;
  display: block;
  height: 29.4444vw;
  overflow: hidden;
  border-radius: var(--radius);
  flex: 0 0 auto;
}

.services__portrait-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.services__intro-text {
  position: relative;
  width: 46.875vw;
  min-width: 0;
  display: flex;
  margin: 0 0 -0.625vw;
  gap: 4.5139vw;
  align-items: flex-end;
}

.services__headline {
  position: relative;
  width: 25.6944vw;
  display: block;
  font-size: 4.8611vw;
  line-height: 106%;
  flex: 0 0 auto;
}

.services__headline-title {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.8611vw;
  color: var(--color-black);
  line-height: 106%;
  display: block;
}

.services__headline-line {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  gap: 0.4167vw;
  align-items: center;
}

.services__headline-title-end {
  width: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.8611vw;
  color: var(--color-black);
  line-height: 106%;
  display: block;
}

.services__headline-accent {
  width: auto;
  font-family: var(--font-serif);
  font-weight: 200;
  font-size: 4.1667vw;
  color: var(--color-black);
  line-height: 106%;
  display: block;
}

.services__lead {
  width: 16.6667vw;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.25vw;
  color: var(--color-black);
  line-height: 110%;
  text-align: justify;
  flex: 0 0 auto;
}

.services__statement {
  position: relative;
  width: 93.5417vw;
  min-width: 0;
  display: flex;
  margin: 10.9375vw 0 0 3.4722vw;
  justify-content: space-between;
  align-items: center;
}

.services__statement-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.4722vw;
  color: var(--color-black);
  line-height: 106%;
}

.services__statement-line--first {
  width: 39.7222vw;
}

.services__statement-line--second {
  width: 36.875vw;
  text-align: right;
}

.services__offers {
  position: relative;
  width: 92.8472vw;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin: 1.4931vw auto 0;
}

.services__offer {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 1.3403vw 2.7778vw;
  display: flex;
  min-height: 5.3472vw;
  border: 1px solid var(--color-black);
  background-color: transparent;
  justify-content: space-between;
  align-items: center;
}

.services__offer:hover,
.services__offer:focus-visible {
  width: 102.99%;
  padding: 1.3403vw 4.1667vw;
  background-color: var(--color-pink);
  opacity: 90%;
}

.services__offer--strategy:hover,
.services__offer--strategy:focus-visible {
  margin: 0 -1.495%;
}

.services__offer--systems {
  margin: -1px 0 0;
}

.services__offer--systems:hover,
.services__offer--systems:focus-visible {
  margin: -1px -1.495% 0;
}

.services__offer--projects {
  margin: -1px 0 0;
}

.services__offer--projects:hover,
.services__offer--projects:focus-visible {
  margin: -1px -1.495% 0;
}

.services__offer--operation {
  margin: -1px 0 0;
}

.services__offer--operation:hover,
.services__offer--operation:focus-visible {
  margin: -1px -1.495% 0;
}

.services__offer-title {
  width: 55%;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.25vw;
  color: var(--color-black);
  line-height: 110%;
  flex: 0 0 auto;
}

.services__offer-items {
  position: relative;
  padding: 0;
  list-style: none;
  display: block;
  font-size: 1.1111vw;
  line-height: 110%;
}

.services__offer-items--strategy {
  width: 31.8056vw;
  margin: 0 2.3264vw 0 0;
}

.services__offer-items--systems {
  width: 34.0972vw;
  margin: 0 0.0347vw 0 0;
}

.services__offer-items--projects {
  width: 36.6667vw;
  margin: 0 -2.5347vw 0 0;
}

.services__offer-items--operation {
  width: 31.8056vw;
  margin: 0 2.3264vw 0 0;
}

.services__offer-item {
  width: auto;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.1111vw;
  color: var(--color-black);
  line-height: 110%;
  display: inline;
}

/* " · " between items; --new-line also breaks the line after the dot */
.services__offer-item + .services__offer-item::before {
  content: " · ";
}

.services__offer-item.services__offer-item--new-line::before {
  content: "·\A";
  white-space: pre;
}


/* Mobile */
@media (max-width: 767px) {
  .services {
    padding: 18.9091vw 0 14.0909vw;
  }

  .services__title {
    width: 91.3636vw;
    font-size: 12.5vw;
    text-align: justify;
    margin: 0 0 0 4.3182vw;
  }

  .services__intro {
    width: 100%;
    margin: -7.6818vw 0 0;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }

  .services__portrait {
    width: 92.2727vw;
    height: 62.2727vw;
    margin: 0 auto;
  }

  .services__intro-text {
    width: 92.2727vw;
    margin: 5.6818vw 0 0 3.4091vw;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
  }

  .services__headline {
    width: 64.5455vw;
    font-size: 12.5vw;
    margin: 0;
  }

  .services__headline-title {
    font-size: 12.5vw;
  }

  .services__headline-line {
    gap: 1.3636vw;
  }

  .services__headline-title-end {
    font-size: 12.5vw;
  }

  .services__headline-accent {
    font-size: 10.2273vw;
  }

  .services__lead {
    width: 54.5455vw;
    font-size: 4.0909vw;
    margin: 8.1818vw 0 0 37.7273vw;
  }

  .services__statement {
    width: 92.2727vw;
    margin: 28.1591vw auto 0;
    flex-direction: column;
    gap: 8.8182vw;
    align-items: flex-start;
  }

  .services__statement-line {
    font-size: 9.0909vw;
  }

  .services__statement-line--first {
    width: 70.2273vw;
  }

  .services__statement-line--second {
    width: 71.8182vw;
    align-self: flex-end;
  }

  .services__offers {
    width: 94.7727vw;
    margin: 2.9318vw auto 0;
  }

  .services__offer {
    padding: 4.5454vw 3.4091vw;
    flex-direction: column;
    gap: 13.6364vw;
    justify-content: center;
    align-items: flex-start;
  }

  .services__offer:hover,
  .services__offer:focus-visible {
    width: 100%;
    padding: 4.5454vw 3.4091vw;
    opacity: 100%;
  }

  .services__offer--strategy {
    min-height: 71.5909vw;
  }

  .services__offer--strategy:hover,
  .services__offer--strategy:focus-visible {
    margin: 0;
  }

  .services__offer--systems {
    min-height: 68.6364vw;
  }

  .services__offer--systems:hover,
  .services__offer--systems:focus-visible {
    margin: -1px 0 0;
  }

  .services__offer--projects {
    min-height: 75.6818vw;
  }

  .services__offer--projects:hover,
  .services__offer--projects:focus-visible {
    margin: -1px 0 0;
  }

  .services__offer--operation {
    min-height: 64.0909vw;
  }

  .services__offer--operation:hover,
  .services__offer--operation:focus-visible {
    margin: -1px 0 0;
  }

  .services__offer-title {
    width: 100%;
    font-size: 4.0909vw;
  }

  .services__offer-items {
    max-width: 100%;
    font-size: 3.6364vw;
    line-height: 102%;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .services__offer-items--strategy {
    width: 67.9545vw;
    gap: 6.0227vw;
  }

  .services__offer-items--systems {
    width: 85.2273vw;
    gap: 3.7091vw;
  }

  .services__offer-items--projects {
    width: 85.2273vw;
    gap: 3.7091vw;
  }

  .services__offer-items--operation {
    width: 85.2273vw;
    gap: 3.7091vw;
  }

  .services__offer-item {
    width: 100%;
    font-size: 3.6364vw;
    line-height: 102%;
    margin: 0;
    display: block;
  }

  .services__offer-item + .services__offer-item::before {
    content: none;
  }
}