/* HVAC industry page (/industry/hvac-field-service-management-software).
   The body carries `finances-page` and `nbfc-page` as well as `hvac-page`,
   so finances.css and nbfc-field-force-management.css supply the whole NBFC
   design (layout, spacing, colours, animations). This file only adds the
   pieces the HVAC copy deck needs and the NBFC page does not have, all
   scoped to `.hvac-page`. */

/* Looping word (hero headline): the script deletes and retypes each word
   letter by letter behind a blinking caret, so only one word is ever on
   screen. The caret blinks while a word is held and stays solid while
   typing. Same behaviour as the FMCG page. */
.hvac-page .hvac-loop.is-typing {
  display: inline-block;
  text-align: left;
  white-space: nowrap;
}

.hvac-page .hvac-loop-caret {
  display: inline-block;
  width: 0.06em;
  height: 0.9em;
  margin-left: 0.06em;
  vertical-align: -0.08em;
  background: currentColor;
  border-radius: 2px;
}

.hvac-page .hvac-loop.is-holding .hvac-loop-caret {
  animation: hvac-loop-caret-blink 1s steps(1, end) infinite;
}

@keyframes hvac-loop-caret-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* The looping line sits on its own line that never wraps and keeps one
   line's height even while the word is deleted down to the caret, so the
   text above and the content below hold still at every width (on phones
   finances.css otherwise flows the hero lines inline). */
.hvac-page .fin-hero-center .crm-hero-title-line.hvac-loop-line {
  display: block;
  min-height: 1.15em;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .hvac-page .fin-hero-center .crm-hero-title-line.hvac-loop-line::before {
    content: none;
  }
}

/* Quick answer photo: the HVAC artwork (technician at an outdoor unit,
   "Service Job Completed" card in its lower right) already fades out at
   its own edges, so it is shown whole in the right half instead of being
   cropped to fill it and edge-masked like the NBFC photo, which would cut
   off the card. */
.hvac-page .nbfc-answer-media img {
  object-fit: contain;
  object-position: center;
  -webkit-mask-image: none;
  mask-image: none;
}

@media (max-width: 1100px) {
  .hvac-page .nbfc-answer-media {
    aspect-ratio: 3 / 2;
  }
}

/* Mid-page demo CTA: the NBFC layout (pitch on the left, demo form on
   the right), centred on one line. The heading is a little smaller and
   splits into its two halves, and the decorative arrow, which otherwise
   wrapped onto a line of its own, is dropped. The band is also shorter
   than the shared one: less padding and a tighter form. */
.hvac-page .hvac-cta .fin-cta-form-card {
  align-items: center;
  padding-top: 36px;
  padding-bottom: 36px;
  gap: 48px;
}

.hvac-page .hvac-cta .fin-cta-form-copy h2 {
  font-size: clamp(28px, 2.6vw, 40px);
}

.hvac-page .hvac-cta .fin-cta-form-copy h2 span:not(.fin-cta-form-arrow) {
  display: block;
}

.hvac-page .hvac-cta .fin-cta-form-arrow {
  display: none;
}

.hvac-page .hvac-cta .fin-cta-form-copy > p {
  max-width: 520px;
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.6;
}

.hvac-page .hvac-cta .fin-cta-form-panel {
  padding: 18px 22px 16px;
}

.hvac-page .hvac-cta .fin-cta-form-panel h3 {
  margin-bottom: 8px;
  font-size: 20px;
}

.hvac-page .hvac-cta .fin-cta-form-panel .crm-proof-demo-widget .ant-form-item {
  margin-bottom: 6px !important;
}

.hvac-page .hvac-cta .fin-cta-form-panel .crm-proof-demo-widget .ant-input,
.hvac-page .hvac-cta .fin-cta-form-panel .crm-proof-demo-widget .react-tel-input .form-control {
  min-height: 36px !important;
}

.hvac-page .hvac-cta .fin-cta-form-panel .crm-proof-demo-widget textarea {
  min-height: 52px !important;
  max-height: 64px;
}

@media (max-width: 1024px) {
  .hvac-page .hvac-cta .fin-cta-form-card {
    padding-top: 32px;
    padding-bottom: 32px;
    gap: 28px;
  }
}

/* Industry Types heading: the shared Finance rule justifies the intro
   across the width of a much longer heading, which stretched the word
   spacing of this one-sentence intro and left "each one." alone on the
   last line. Here the heading and intro are centred as one block, the
   intro set in balanced, normally spaced lines under the heading. */
.hvac-page .crm-section-heading.crm-communication-heading {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.hvac-page .crm-communication-heading h2 {
  text-align: center;
  text-wrap: balance;
}

.hvac-page .crm-section-heading.crm-communication-heading > p:last-child {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  text-align-last: center;
  text-wrap: balance;
}