/* stylelint-disable-next-line wrap-rem-on-px/wrap-rem-on-px */
/* stylelint-disable wrap-rem-on-px/wrap-rem-on-px */
/* stylelint-enable wrap-rem-on-px/wrap-rem-on-px */
/*
USAGE:
font-size: fluid(12, 62); : from rem(12)@380px to  rem(62)@1440px
gap: fluid(10, 33, 992);  : from rem(10)@991px to  rem(33)@1440px
margin-right: fluid(32, 65, 320, 2560);  : from rem(32)@320px to  rem(65)@2560px
*/
/*
AUTOFILL

USAGE:
@include mixin.autofill(background-color, text-color);
@include mixin.autofill;

Note: Call this mixin in the wrapper or container to where you intend to manipulate the
      default chrome autofill styles for input, textarea and select elements.
*/
/* stylelint-disable */
/* stylelint-enable */
.section.section--hero {
  padding: 1rem 0 1.5rem;
}
@media screen and (min-width:991px) {
  .section.section--hero {
    padding: 5rem 0 2.5rem;
  }
}
.section.section--hero:has(+ .section.section--faq-section) {
  padding-bottom: 0.5rem;
}
@media screen and (min-width:1199px) {
  .section.section--hero:has(+ .section.section--faq-section) {
    padding-bottom: 0.875rem;
  }
}
.section.section--hero .hero-banner__title {
  text-transform: none;
}

.section.section--hero.section--hero-has-background {
  position: relative;
}
.section.section--hero.section--hero-has-background::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-color: #fbc8b4;
  content: "";
  height: 72.5%;
}
@media screen and (min-width:991px) {
  .section.section--hero.section--hero-has-background::before {
    height: 85.5%;
  }
}
.section.section--hero.section--hero-has-background.section--hero-has-background--amber::before {
  background-color: rgba(237, 171, 72, 0.6);
}
.section.section--hero.section--hero-has-background.section--hero-has-background--gray::before {
  background-color: #e4eef3;
}
.section.section--hero.section--hero-has-background.section--hero-has-background--orange::before {
  background-color: #cf4b27;
}
.section.section--hero.section--hero-has-background.section--hero-has-background--navy::before {
  background-color: #1b2a4b;
}
@media screen and (min-width:991px) {
  .section.section--hero.section--hero-has-background {
    padding-top: 5rem;
  }
}
.section.section--hero.section--hero-has-background .ccw {
  position: relative;
  z-index: 1;
}

.header + .site-main > .section.section--hero.section--hero-has-background::before,
.header + .ccw.main > .section.section--hero.section--hero-has-background::before,
.header + .section.section--hero.section--hero-has-background::before {
  margin-top: -5.5rem;
}
@media screen and (min-width:991px) {
  .header + .site-main > .section.section--hero.section--hero-has-background::before,
  .header + .ccw.main > .section.section--hero.section--hero-has-background::before,
  .header + .section.section--hero.section--hero-has-background::before {
    min-height: 18.9375rem;
    max-height: 33.0625rem;
    margin-top: -6.875rem;
  }
}

.hero-banner {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 2rem;
  padding: 1rem 1rem 2.5rem;
  border-radius: 1rem;
  overflow: hidden;
}
@media screen and (min-width:991px) {
  .hero-banner {
    flex-direction: row;
    gap: 0;
    padding: 0;
    border-radius: 1.5rem;
  }
}
.hero-banner__content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0;
}
@media screen and (min-width:991px) {
  .hero-banner__content {
    flex: 1 1 59%;
    min-width: 0;
    padding: 3.75rem;
    gap: 2rem;
  }
}
.hero-banner__title {
  margin: 0;
  padding-right: 0.375rem;
  color: #fbc8b4;
  font-family: "Radio Canada", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02rem;
}
@media screen and (min-width:700px) {
  .hero-banner__title {
    padding-right: 0.625rem;
  }
}
@media screen and (min-width:991px) {
  .hero-banner__title {
    font-size: clamp(2.25rem, 1.88679vw + 1.801886875rem, 3.5rem);
  }
}
@media screen and (min-width:1199px) {
  .hero-banner__title {
    letter-spacing: -0.035rem;
  }
}
.hero-banner__description p {
  margin: 0 0 1rem;
  color: #fff;
  font-family: "Figtree", sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: start;
}
@media screen and (min-width:700px) {
  .hero-banner__description p {
    letter-spacing: 0.1px;
  }
}
@media screen and (min-width:991px) {
  .hero-banner__description p {
    font-size: 1.25rem;
    margin: 0 0 1.875rem;
  }
}
.hero-banner__description p:last-child {
  margin-bottom: 0;
}
.hero-banner__description em,
.hero-banner__description i {
  font-size: inherit;
  font-style: italic;
  font-weight: inherit;
}
.hero-banner__description p strong,
.hero-banner__description p b {
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.hero-banner__description p.is-lead {
  font-family: "Figtree", sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.00625rem;
}
@media screen and (min-width:991px) {
  .hero-banner__description p.is-lead {
    letter-spacing: normal;
  }
}
@media screen and (min-width:1199px) {
  .hero-banner__description p.is-lead {
    font-size: 1.5rem;
  }
}
.hero-banner__description p.is-lead strong,
.hero-banner__description p.is-lead b {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.hero-banner__description strong,
.hero-banner__description b {
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
}
.hero-banner__description a {
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}
.hero-banner__description a:hover, .hero-banner__description a:focus-visible {
  color: #fbc8b4;
}
.hero-banner__description ul,
.hero-banner__description ol {
  padding-left: 1.5rem;
  margin: 0 0 1rem;
}
.hero-banner__description ul li,
.hero-banner__description ol li {
  margin-bottom: 0.5rem;
  list-style: disc;
}
.hero-banner__media {
  position: relative;
  order: -1;
  flex: 0 0 auto;
  height: 16rem;
  min-height: 16rem;
  border-radius: 1rem;
  overflow: hidden;
}
@media screen and (min-width:700px) {
  .hero-banner__media {
    height: auto;
    min-height: 0;
  }
}
@media screen and (min-width:991px) {
  .hero-banner__media {
    order: 0;
    flex: 1 1 50%;
    height: auto;
    min-height: 0;
    align-self: stretch;
    border-radius: 0;
  }
}
.hero-banner__media figure {
  position: relative;
  height: 100%;
  min-height: 16rem;
  margin: 0;
  border-radius: 1rem;
  overflow: hidden;
}
@media screen and (min-width:700px) {
  .hero-banner__media figure {
    min-height: 0;
  }
}
@media screen and (min-width:991px) {
  .hero-banner__media figure {
    position: absolute;
    inset: 0;
    border-radius: 0;
  }
}
.hero-banner__media img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  object-fit: cover;
  object-position: center top;
}
@media screen and (min-width:991px) {
  .hero-banner__media img {
    border-radius: 0;
  }
}

.section.section--hero-blue .hero-banner {
  background-color: #3F7EA0;
}
@media screen and (min-width:991px) {
  .section.section--hero-blue .hero-banner {
    background-color: transparent;
  }
}
.section.section--hero-blue .hero-banner__content {
  background-color: transparent;
}
@media screen and (min-width:991px) {
  .section.section--hero-blue .hero-banner__content {
    background-color: #3F7EA0;
  }
}
.section.section--hero-blue .hero-banner__title {
  color: #fbc8b4;
}
.section.section--hero-blue .hero-banner__description p {
  color: #fff;
}
.section.section--hero-blue .hero-banner__description a {
  color: #fff;
}
.section.section--hero-blue .hero-banner__description a:hover, .section.section--hero-blue .hero-banner__description a:focus-visible {
  color: #fbc8b4;
}
.section.section--hero-blue .hero-banner__media::after {
  background-color: rgba(63, 126, 160, 0.5);
  opacity: 1;
}
@media screen and (min-width:991px) {
  .section.section--hero-blue .hero-banner__media::after {
    opacity: 0;
  }
}

.section.section--hero-green .hero-banner {
  background-color: #516b3f;
}
@media screen and (min-width:991px) {
  .section.section--hero-green .hero-banner {
    background-color: transparent;
  }
}
.section.section--hero-green .hero-banner__content {
  background-color: transparent;
}
@media screen and (min-width:991px) {
  .section.section--hero-green .hero-banner__content {
    background-color: #516b3f;
  }
}
.section.section--hero-green .hero-banner__title {
  color: rgb(244, 206, 152);
}
.section.section--hero-green .hero-banner__media::after {
  background-color: #516b3f;
}

.section.section--hero-orange .hero-banner {
  background-color: #cf4b27;
}
@media screen and (min-width:991px) {
  .section.section--hero-orange .hero-banner {
    background-color: transparent;
  }
}
.section.section--hero-orange .hero-banner__content {
  background-color: transparent;
}
@media screen and (min-width:991px) {
  .section.section--hero-orange .hero-banner__content {
    background-color: #cf4b27;
  }
}
.section.section--hero-orange .hero-banner__title,
.section.section--hero-orange .hero-banner__description p,
.section.section--hero-orange .hero-banner__description li,
.section.section--hero-orange .hero-banner__description a {
  color: #fff;
}
.section.section--hero-orange .hero-banner__description a:hover, .section.section--hero-orange .hero-banner__description a:focus-visible {
  color: #fff;
}
.section.section--hero-orange .hero-banner__media::after {
  background-color: #cf4b27;
  opacity: 1;
}
@media screen and (min-width:991px) {
  .section.section--hero-orange .hero-banner__media::after {
    opacity: 0;
  }
}

.section.section--hero-navy .hero-banner {
  background-color: #1b2a4b;
}
@media screen and (min-width:991px) {
  .section.section--hero-navy .hero-banner {
    background-color: transparent;
  }
}
.section.section--hero-navy .hero-banner__content {
  background-color: transparent;
}
@media screen and (min-width:991px) {
  .section.section--hero-navy .hero-banner__content {
    background-color: #1b2a4b;
  }
}
.section.section--hero-navy .hero-banner__title,
.section.section--hero-navy .hero-banner__description p,
.section.section--hero-navy .hero-banner__description li,
.section.section--hero-navy .hero-banner__description a {
  color: #fff;
}
.section.section--hero-navy .hero-banner__description a:hover, .section.section--hero-navy .hero-banner__description a:focus-visible {
  color: #fff;
}
.section.section--hero-navy .hero-banner__media::after {
  background-color: #1b2a4b;
  opacity: 1;
}
@media screen and (min-width:991px) {
  .section.section--hero-navy .hero-banner__media::after {
    opacity: 0;
  }
}

.section.section--hero-yellow .hero-banner {
  background-color: #edab48;
}
@media screen and (min-width:991px) {
  .section.section--hero-yellow .hero-banner {
    background-color: transparent;
  }
}
.section.section--hero-yellow .hero-banner__content {
  background-color: transparent;
}
@media screen and (min-width:991px) {
  .section.section--hero-yellow .hero-banner__content {
    background-color: #edab48;
  }
}
.section.section--hero-yellow .hero-banner__title,
.section.section--hero-yellow .hero-banner__description p,
.section.section--hero-yellow .hero-banner__description li,
.section.section--hero-yellow .hero-banner__description a {
  color: #1b2a4b;
}
.section.section--hero-yellow .hero-banner__description a:hover, .section.section--hero-yellow .hero-banner__description a:focus-visible {
  color: #1b2a4b;
}
.section.section--hero-yellow .hero-banner__media::after {
  background-color: #edab48;
  opacity: 1;
}
@media screen and (min-width:991px) {
  .section.section--hero-yellow .hero-banner__media::after {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner__media img {
    object-position: center;
  }
}