.homepage-hero-banner {
  position: relative;
  z-index: 1;
}

.homepage-hero-banner .mobile-image {
  display: none;
}

.homepage-hero-banner .section-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 110px 0;
}

/* Section image sits behind the content (img tag, not background-image). */
.homepage-hero-banner .banner-image {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

/* !important overrides the inline size styles added by [sge_srcset]. */
.homepage-hero-banner .banner-image img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center bottom;
}

.homepage-hero-banner .banner-image .banner-image-mobile {
  display: none;
}

.homepage-hero-banner .section-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 0 17.01%; /* 245px of the 1440px design */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.homepage-hero-banner .column {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.homepage-hero-banner .column-header {
  gap: 24px;
}

.homepage-hero-banner .section-title {
  margin: 0;
  max-width: 92.63%; /* 880px of the 950px content width */
  color: #FFF;
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-size: 54px;
  font-style: normal;
  font-weight: 700;
  line-height: 62px;
  text-transform: capitalize;
}

.homepage-hero-banner .section-description,
.homepage-hero-banner .section-description * {
  color: #FFF;
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
}

.homepage-hero-banner .section-description strong,
.homepage-hero-banner .section-description b {
  font-weight: 700;
}

.homepage-hero-banner .section-description p {
  margin: 0 0 12px;
}

.homepage-hero-banner .section-description > *:last-child {
  margin-bottom: 0;
}

.homepage-hero-banner .column-cta {
  gap: 24px;
}

.homepage-hero-banner .column-button {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.homepage-hero-banner .column-button .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  min-height: 74px;
  white-space: nowrap;
  border-radius: 200px;
  border: 1px solid transparent;
  color: #FFF;
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 0.36px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: all ease 200ms;
}

.homepage-hero-banner .column-button .btn-primary {
  flex-basis: 341px; /* Figma 341px; fixed so it doesn't grow on wide screens */
  padding: 23px 32px;
  background: #6BBC9F;
  border-color: #6BBC9F;
}

.homepage-hero-banner .column-button .btn-primary .label-mobile {
  display: none;
}

.homepage-hero-banner .column-button .btn-whatsapp {
  gap: 10px;
  flex-basis: 294px; /* Figma 294px */
  padding: 19px 32px 19px 24px;
  background: linear-gradient(0deg, #25B43C 0%, #25D366 100%);
}

.homepage-hero-banner .column-button .btn-whatsapp .icon {
  display: flex;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.homepage-hero-banner .column-button .btn-call {
  gap: 7px;
  flex-basis: 294px; /* Figma 294px */
  padding: 18px 32px;
  border: 1.2px solid #FFF;
  background: transparent;
}

.homepage-hero-banner .column-button .btn-call .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #FFF;
  color: #2E697F;
  transition: all ease 200ms;
}

.homepage-hero-banner .column-button .btn-call .icon svg {
  width: 18px;
  height: 18px;
}

/* Hover follows the other SGE blocks on dark backgrounds (CTA, contact form). */
.homepage-hero-banner .column-button .btn:hover,
.homepage-hero-banner .column-button .btn:focus-visible {
  color: #041C4C;
  background: #FFF;
  border-color: #FFF;
  text-decoration: none;
}

.homepage-hero-banner .column-button .btn-call:hover .icon,
.homepage-hero-banner .column-button .btn-call:focus-visible .icon {
  background: #317088;
  color: #FFF;
}

.homepage-hero-banner .section-highlights {
  margin: 0;
  color: #FFF;
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 700;
  line-height: 26px;
}

.homepage-hero-banner .section-highlights .separator {
  margin: 0 12px;
  font-style: normal;
}

/* Small desktop: narrower side padding so the three buttons stay on one row. */
@media (min-width: 1280px) and (max-width: 1439px) {
  .homepage-hero-banner .section-inner {
    padding: 0 12%;
  }
}

/* Tablet: buttons size to their text so the row only wraps when it must. */
@media (max-width: 1279px) {
  .homepage-hero-banner .column-button .btn {
    flex-basis: auto;
  }
}

@media (max-width: 1279px) {
  .homepage-hero-banner .section-banner {
    padding: 80px 0 100px;
  }

  .homepage-hero-banner .section-inner {
    padding: 0 40px;
    gap: 32px;
  }

  .homepage-hero-banner .section-title {
    max-width: 100%;
    font-size: 44px;
    line-height: 52px;
  }
}

@media screen and (max-width: 767px) {
  .homepage-hero-banner .mobile-image {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 375 / 240;
    background: #FFF;
  }

  /* Crop matches the mobile design: image right-aligned, slightly offset from the top. */
  .homepage-hero-banner .mobile-image img {
    position: absolute;
    top: -13.75%;
    right: 0;
    width: 171.73% !important;
    max-width: none !important;
    height: auto !important;
  }

  .homepage-hero-banner .section-banner {
    padding: 47px 0 64px;
  }

  .homepage-hero-banner .has-mobile-image .banner-image .banner-image-desktop {
    display: none;
  }

  /* Mobile image stretches to the content height so the curved bottom stays visible. */
  .homepage-hero-banner .has-mobile-image .banner-image .banner-image-mobile {
    display: block;
    object-fit: fill;
  }

  .homepage-hero-banner .section-inner {
    padding: 0 20px;
    gap: 16px;
  }

  .homepage-hero-banner .column-header {
    gap: 16px;
  }

  .homepage-hero-banner .section-title {
    font-size: 34px;
    font-weight: 800;
    line-height: 54px;
  }

  .homepage-hero-banner .section-description,
  .homepage-hero-banner .section-description * {
    font-size: 16px;
    line-height: 24px;
  }

  .homepage-hero-banner .column-cta {
    gap: 10px;
  }

  .homepage-hero-banner .column-button {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .homepage-hero-banner .column-button .btn {
    width: 100%;
    min-width: 0;
    min-height: 66px;
    white-space: normal;
  }

  .homepage-hero-banner .column-button .btn-primary {
    padding: 19px 32px;
  }

  .homepage-hero-banner .column-button .btn-primary .label-desktop {
    display: none;
  }

  .homepage-hero-banner .column-button .btn-primary .label-mobile {
    display: inline;
  }

  .homepage-hero-banner .column-button .btn-whatsapp {
    padding: 15px 32px;
  }

  .homepage-hero-banner .column-button .btn-call {
    padding: 14px 32px;
  }

  .homepage-hero-banner .section-highlights {
    font-size: 16px;
    line-height: 24px;
  }

  .homepage-hero-banner .section-highlights .separator {
    margin: 0 10px;
  }
}

@media (min-width: 1440px) {
  .homepage-hero-banner .section-highlights {
    white-space: nowrap;
  }

  .homepage-hero-banner .section-highlights .separator {
    margin: 0 10px;
  }
}

/* Desktop: keep the three buttons on one row; they shrink slightly (never below their text) instead of wrapping. */
@media (min-width: 1280px) {
  .homepage-hero-banner .column-button {
    flex-wrap: nowrap;
  }
}