/* Homepage hero rebuilt from the approved text-left reference.
   The team photo, copy, buttons, and navigation remain separate editable elements. */

/* Editable logo lockup based on the approved bold wordmark reference. */
.brandCustom {
  gap: 11px;
  min-width: 355px;
}

/* Match the first-slide Canada flag to the correct flag used on slide two. */
.heroSlide.team .countryBtn.canada .flagPane svg {
  display: none;
}

.heroSlide.team .countryBtn.canada .flagPane {
  background: #fff url("https://upload.wikimedia.org/wikipedia/commons/c/cf/Flag_of_Canada.svg") center / 56px auto no-repeat;
}

.brandWords {
  line-height: 1;
  min-width: 0;
}

.brandWords strong,
.brandWords span {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
  text-transform: uppercase;
}

.brandWords strong {
  color: #090909 !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
}

.brandWords span {
  margin-top: 6px !important;
  color: #8f8b7c !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.29em !important;
}

.brandLeaf,
.brandStar {
  width: 34px !important;
  height: 46px !important;
  flex-basis: 34px !important;
}

.brandLeaf img,
.brandStar img {
  max-width: 34px !important;
  max-height: 46px !important;
}

.heroExperienceSeal {
  position: absolute;
  z-index: 3;
  top: 30px;
  right: 32px;
  width: clamp(118px, 10vw, 150px);
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28));
}

@media (min-width: 981px) {
  .hero {
    height: min(720px, calc(100vh - 120px));
    min-height: 620px;
  }

  .heroSlide.team {
    background-color: #073458 !important;
    background-image: url("assets/ril-current-group-photo-hires.webp") !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
    background-size: auto 100% !important;
  }

  .heroSlide.team::after {
    background: linear-gradient(
      90deg,
      #073458 0%,
      rgba(7, 52, 88, 0.99) 27%,
      rgba(7, 52, 88, 0.94) 34%,
      rgba(7, 52, 88, 0.58) 42%,
      rgba(7, 52, 88, 0.08) 52%,
      rgba(7, 52, 88, 0) 62%
    ) !important;
  }

  .heroSlide.team .wrap {
    height: 100%;
  }

  .heroSlide.team .heroContent {
    max-width: 610px;
    padding-top: clamp(105px, 13vh, 145px);
  }

  .heroSlide.team .heroContent h1 {
    max-width: 600px;
    font-size: clamp(58px, 5.2vw, 82px);
    line-height: 0.98;
  }

  .heroSlide.team .heroContent p {
    max-width: 565px;
  }

  .heroSlide.team .countryPick {
    gap: 16px;
  }

  .heroSlide.team .countryBtn {
    min-width: 214px;
  }
}

@media (max-width: 980px) {
  .brandCustom {
    min-width: 300px;
  }

  .brandWords strong {
    font-size: 22px !important;
  }

  .brandWords span {
    font-size: 9px !important;
  }

  .heroSlide.team {
    background-color: #073458 !important;
    background-image: url("assets/ril-current-group-photo-hires.webp") !important;
    background-position: 68% top !important;
    background-repeat: no-repeat !important;
    background-size: auto 58% !important;
  }

  .heroExperienceSeal {
    top: 20px;
    right: 20px;
    width: 105px;
  }

  .heroSlide.team::after {
    background: linear-gradient(
      180deg,
      rgba(7, 52, 88, 0.02) 0%,
      rgba(7, 52, 88, 0.18) 35%,
      rgba(7, 52, 88, 0.96) 58%,
      #073458 72%
    ) !important;
  }
}

@media (max-width: 650px) {
  .brandCustom {
    min-width: 0;
    gap: 6px;
  }

  .brandWords strong {
    font-size: 17px !important;
  }

  .brandWords span {
    margin-top: 3px !important;
    font-size: 8px !important;
    letter-spacing: 0.18em !important;
  }

  .brandLeaf,
  .brandStar {
    width: 24px !important;
    height: 34px !important;
    flex-basis: 24px !important;
  }

  .brandLeaf img,
  .brandStar img {
    max-width: 24px !important;
    max-height: 34px !important;
  }

  .heroExperienceSeal {
    top: 16px;
    right: 14px;
    width: 88px;
  }

  .heroSlide.team .heroContent {
    padding-top: 350px;
  }

  .heroSlide.team .heroContent h1 {
    font-size: 44px;
  }

  .heroSlide.team .countryBtn {
    min-width: min(190px, 44vw);
  }
}