/* HVAC & Engineering — desktop composition measured against the Zeplin artboard. */
.air-page-hvac {
  --hvac-navy: #202f38;
  --hvac-teal: #0f8080;
  --hvac-mint: #c3d3ce;
  --hvac-container: 1204px;
}

.air-page-hvac .air-designed > section > .air-container,
.air-page-hvac .air-page-head > .air-container {
  width: min(calc(100% - 48px), var(--hvac-container));
}

.air-page-hvac .air-page-head {
  min-height: 348px;
  height: 348px;
  padding: 22px 0 0;
  background: var(--hvac-navy);
}
/* Heroi em shared-zeplin.css. */

.air-page-hvac .air-wide-image {
  width: 100%;
  height: 501px;
  max-height: none;
  object-fit: cover;
}

.air-page-hvac .air-statement {
  position: relative;
  height: 522px;
  padding: 70px 0 0;
  overflow: hidden;
  background: var(--hvac-mint);
}
.air-page-hvac .air-statement p {
  position: relative;
  z-index: 2;
  width: 792px;
  max-width: 100%;
  font-family: 'area-extended', Arial, sans-serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 48px;
  color: var(--hvac-teal);
}
.air-page-hvac .air-statement .air-wave {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 30px;
  left: 0;
  width: 100%;
  height: 219.9px;
  margin: 0;
  color: var(--hvac-teal);
}
.air-page-hvac .air-statement .air-wave::before {
  position: absolute;
  inset: 0;
  content: '';
  background: currentColor;
  -webkit-mask: url('../images/about/wave-orange.png') center bottom / 1442px 222px no-repeat;
  mask: url('../images/about/wave-orange.png') center bottom / 1442px 219.9px no-repeat;
  opacity: .3;
}
.air-page-hvac .air-statement .air-wave i { display: none; }

.air-page-hvac .air-services-list {
  height: 1072px;
  padding: 70px 0 0;
  background: #fff;
}
.air-page-hvac .air-service-layout {
  grid-template-columns: 586px 586px;
  gap: 32px;
}
.air-page-hvac .air-services-list h2 {
  height: 30px;
  margin: 0;
  padding: 0 0 12px;
  border-color: var(--hvac-teal);
  font-family: 'area-normal', Arial, sans-serif;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--hvac-teal);
}
.air-page-hvac .air-services-list dl {
  display: grid;
  grid-template-columns: 309px 277px;
}
.air-page-hvac .air-services-list dt,
.air-page-hvac .air-services-list dd {
  min-height: 147px;
  padding: 35px 0 20px;
  border-color: var(--hvac-teal);
  font-family: 'area-normal', Arial, sans-serif;
  line-height: 1.45;
  color: var(--hvac-navy);
}
.air-page-hvac .air-services-list dt { font-size: 18px; font-weight: 400; }
.air-page-hvac .air-services-list dd { font-size: 16px; font-weight: 500; }
.air-page-hvac .air-services-list dt { padding-right: 32px; }
.air-page-hvac .air-services-list dt b { display: block; font-weight: 900; }
.air-page-hvac .air-services-list dt:nth-of-type(4),
.air-page-hvac .air-services-list dt:nth-of-type(4) + dd { min-height: 171px; }
.air-page-hvac .air-service-layout__photos {
  position: relative;
  z-index: 3;
  margin-top: -197px;
}
.air-page-hvac .air-service-layout__photos img {
  display: block;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
}
/* engenharia.jpg e uma foto limpa (sem folga transparente): raio e sombra vem do
   CSS. object-fit: cover preenche os 550x374 sem distorcer — a foto e 760x600,
   proporcao diferente da caixa. */
.air-page-hvac .air-service-layout__photos img:first-child {
  width: 550px;
  height: 374px;
  margin-left: 36px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 3px 12px rgba(0,0,0,.16);
}
/* team.png ja traz sombra e cantos arredondados embutidos no PNG (15px de folga
   em cima/esquerda, 21px embaixo/direita). O border-radius do CSS recortava essa
   folga e deixava a "sobra branca" nos cantos, alem de somar uma segunda sombra. */
.air-page-hvac .air-service-layout__photos img + img {
  width: 507px;
  height: 584px;
  margin: 49px 0 0 100px;
  border-radius: 0;
  box-shadow: none;
}

.air-page-hvac .air-more {
  height: 583px;
  padding: 70px 0 0;
  background: var(--hvac-teal);
}
/* Bloco "Nossas Solucoes" em shared-zeplin.css. */

@media (max-width: 1023px) {
  .air-page-hvac .air-page-head { height: auto; min-height: 310px; }
  .air-page-hvac .air-wide-image { height: 360px; }
  .air-page-hvac .air-statement { height: auto; min-height: 480px; }
  .air-page-hvac .air-service-layout { grid-template-columns: 1fr 1fr; gap: 32px; }
  .air-page-hvac .air-services-list { height: auto; padding-bottom: 70px; }
  .air-page-hvac .air-services-list dl { grid-template-columns: 1fr 1fr; }
  .air-page-hvac .air-service-layout__photos { margin-top: -150px; }
  .air-page-hvac .air-service-layout__photos img:first-child,
  .air-page-hvac .air-service-layout__photos img + img { width: 100%; height: auto; margin-left: 0; }
  .air-page-hvac .air-more { height: auto; padding-bottom: 70px; }
  .air-page-hvac .air-more-grid { grid-template-columns: 1fr 1fr; }
  .air-page-hvac .air-more-grid a:last-child { grid-column: auto; max-width: none; }
}

@media (max-width: 767px) {
  .air-page-hvac .air-header > .air-container,
  .air-page-hvac .air-page-head > .air-container,
  .air-page-hvac .air-designed > section > .air-container { width: calc(100% - 32px); }

  .air-page-hvac .air-page-head {
    height: 322px;
    min-height: 322px;
    padding: 20px 0 0;
  }
  .air-page-hvac .air-breadcrumb { margin-bottom: 76px; }
  .air-page-hvac .air-page-head h1 { font-size: 29px; line-height: 1.05; }

  .air-page-hvac .air-wide-image { height: 470px; object-position: center; }

  .air-page-hvac .air-statement {
    height: 513px;
    min-height: 513px;
    padding: 62px 0 0;
  }
  .air-page-hvac .air-statement p { font-size: 20px; line-height: 1.45; }
  .air-page-hvac .air-statement .air-wave { height: 111px; }
  .air-page-hvac .air-statement .air-wave::before {
    -webkit-mask-size: 721px 111px;
    mask-size: 721px 111px;
  }

  .air-page-hvac .air-services-list {
    height: 1805px;
    min-height: 1805px;
    padding: 0;
    overflow: visible;
  }
  .air-page-hvac .air-service-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .air-page-hvac .air-service-layout > div:first-child { order: 2; margin-top: 72px; }
  .air-page-hvac .air-service-layout__photos { display: contents; }
  .air-page-hvac .air-service-layout__photos img:first-child {
    order: 1;
    position: relative;
    z-index: 3;
    width: 100%;
    height: auto;
    margin: -121px 0 0;
  }
  .air-page-hvac .air-service-layout__photos img + img {
    order: 3;
    width: 100%;
    height: auto;
    margin: 302px 0 0;
  }
  .air-page-hvac .air-services-list dl { display: block; }
  .air-page-hvac .air-services-list dt,
  .air-page-hvac .air-services-list dd {
    min-height: 0;
    font-size: 14px;
    line-height: 1.45;
  }
  .air-page-hvac .air-services-list dt {
    padding: 34px 0 0;
    border: 0;
  }
  .air-page-hvac .air-services-list dd {
    padding: 12px 0 32px;
    border-bottom: 1px solid var(--hvac-teal);
  }
  .air-page-hvac .air-services-list dt:nth-of-type(4),
  .air-page-hvac .air-services-list dt:nth-of-type(4) + dd { min-height: 0; }

  .air-page-hvac .air-more {
    height: 668px;
    min-height: 668px;
    padding: 42px 0 0;
  }
  .air-page-hvac .air-more h2 { margin-bottom: 35px; font-size: 25px; }
  .air-page-hvac .air-more-grid { grid-template-columns: 1fr; gap: 22px; }
  .air-page-hvac .air-more-grid a { height: 231px; }
  .air-page-hvac .air-more-grid img { height: 231px; aspect-ratio: auto; }
  .air-page-hvac .air-more-grid strong { left: 22px; bottom: 20px; font-size: 20px; }

  body.air-page-hvac .air-footer { height: 1184px; min-height: 1184px; }
  body.air-page-hvac .air-footer > .air-container { height: 1139px; }
}

/* ============================================================
   HVAC e Engenharia — mobile (<= 767px)

   O bloco de "Servicos de Engenharia" empilha foto, texto e foto.
   A segunda foto carregava `margin-top: 302px`, um valor fixo que
   nao tem relacao com o tamanho do texto acima: sobrava um vazio
   enorme entre a lista e a imagem. E a secao tinha altura fixa de
   1805px, que terminava exatamente na base da imagem — por isso a
   foto encostava direto na faixa de "Nossas Solucoes".

   Medido no bloco de referencia: ~80px antes e ~80px depois da
   imagem. A altura passa a acompanhar o conteudo, com esse respiro
   declarado nas duas pontas.
   ============================================================ */
@media (max-width: 767px) {
  .air-page-hvac .air-services-list {
    height: auto;
    min-height: 0;
    padding-bottom: 80px;
  }
  .air-page-hvac .air-service-layout__photos img + img { margin-top: 80px; }
}