:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host {
  /**
   * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;
   * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;
   * @prop --theme-color: Text color. Default depends on theme;
   * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #90c6e7;
   * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;
   * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;
   * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;
   * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;
   * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;
  */
  --nano-loader-base: #4a4a4a;
  --nano-loader-tint: #7d7d7d;
  --theme-color: #fff;
  --theme-tint-color: #90c6e7;
  --scrim-color: 0 0 0;
  --scrim-direction: -50deg;
  --scrim-opacity-from: 0.25;
  --scrim-opacity-to: 0.7;
  --padding: 0;
  --quote-size: 1.3rem;
  color: var(--theme-color);
  display: block;
  container-type: inline-size;
}

:host([theme=light]) {
  --nano-loader-base: #fff;
  --nano-loader-tint: white;
  --theme-color: #4a4a4a;
  --scrim-color: 255 255 255;
  --scrim-opacity-from: 0.25;
  --scrim-opacity-to: 1;
  --scrim-direction: 270deg;
  color: var(--theme-color);
}
:host([theme=light]) .hero__primary-content {
  --color: #4a4a4a;
}

.hero {
  position: relative;
}
@container (min-width: 800px) {
  .hero {
    --quote-size: 3rem;
  }
}
.hero--rtl {
  --scrim-direction: 270deg;
}
.hero--secondary:not(.hero--iconbox) {
  --scrim-direction: 0deg;
}
.hero__bg-wrap {
  overflow: hidden;
}
.hero__bg-slot {
  position: absolute;
  inset: 0;
}
.hero__ctas {
  display: flex;
  justify-content: flex-end;
  padding-block: 32px 0;
  padding-inline: 32px;
  margin-block-end: -64px;
  position: relative;
  z-index: 1;
}
@media (width <= 52em) {
  .hero__ctas {
    display: none;
  }
}
@media (width <= 58em) {
  .hero__ctas {
    margin-block-end: -48px;
  }
}
.hero__ctas ::slotted(a.button[slot=secondary-ctas]) {
  padding-inline: 0.5rem !important;
  font-size: 0.875rem !important;
  margin-block: 0 !important;
  margin-inline: 0.25rem !important;
}
.hero__img {
  display: block;
  --padding: inherit;
}
.hero__breadcrumbs {
  display: none;
  margin-block: 20px 0;
  margin-inline: 14px;
  line-height: 14px;
}
.hero--breadcrumb .hero__breadcrumbs {
  display: block;
}
@container (min-width: 800px) {
  .hero__breadcrumbs {
    margin-block: 0;
    margin-inline: 50px;
    max-inline-size: 50%;
  }
}
@container (min-width: 900px) {
  .hero__breadcrumbs {
    margin-block: 0;
    margin-inline: 83px;
  }
}
.hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  font-stretch: 125%;
  display: inline-block;
  margin-block-end: 16px;
  position: relative;
  z-index: 2;
}
.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {
  text-shadow: 1px 1px rgba(0, 0, 0, 0.15);
}
.hero__breadcrumbs ::slotted(a[slot=breadcrumb]) {
  color: var(--theme-tint-color) !important;
  cursor: pointer;
}
.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb]) {
  color: var(--theme-color);
  position: relative;
  margin-block: 0;
  margin-inline: 0.5rem;
  display: inline-block;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(var(--scrim-direction), rgb(var(--scrim-color)/var(--scrim-opacity-from)) 0%, rgb(var(--scrim-color)/var(--scrim-opacity-to)) 100%);
}
.hero--scrim .hero__scrim {
  background: none;
}
.hero__content {
  max-inline-size: 1440px;
  display: block;
  --grid-row-gap: 0;
  margin-block: 0;
  margin-inline: auto;
  position: relative;
}
@container (min-width: 800px) {
  .hero__content {
    margin-block: 50px 0 !important;
    max-inline-size: 1540px !important;
  }
}
@container (min-width: 900px) {
  .hero__content {
    margin-block: 83px 0 !important;
    max-inline-size: 1606px !important;
  }
}
.hero__primary {
  margin: 16px;
}
.hero--breadcrumb .hero__primary {
  margin-block: 0;
  margin-inline: 16px;
}
.hero--backbtn .hero__primary {
  margin-inline-start: 0;
}
.hero__primary ::slotted(.nano-icon-button[slot=back-btn]) {
  font-size: 2rem;
}
@container (min-width: 800px) {
  .hero__primary {
    margin-block: 0 50px !important;
    margin-inline: 50px 0 !important;
  }
  .hero__primary ::slotted(.nano-icon-button[slot=back-btn]) {
    margin-block: 0 !important;
    margin-inline: -3rem 0 !important;
  }
}
@container (min-width: 900px) {
  .hero__primary {
    margin-block: 0 83px !important;
    margin-inline: 83px 0 !important;
  }
}
.hero__primary-content {
  max-inline-size: 45rem;
  --color: #fff;
  display: flex;
}
.hero--backbtn .hero__primary-content > div {
  padding-block: 10px 0;
  padding-inline: 0;
}
.hero__primary-content ::slotted(h1[slot=primary-content]) {
  margin-block: 0 18px !important;
  font-size: 2rem !important;
}
@container (min-width: 800px) {
  .hero__primary-content ::slotted(h1[slot=primary-content]) {
    line-height: 31px !important;
    margin-block-end: 30px !important;
  }
  .hero__primary-content ::slotted(.button[slot=primary-content]) {
    margin-block-start: 20px !important;
  }
}
.hero__secondary {
  display: none;
  block-size: 100%;
  padding-block: 0 20px;
  padding-inline: 14px;
}
.hero--secondary .hero__secondary {
  display: flex;
  align-items: center;
}
@container (min-width: 800px) {
  .hero__secondary {
    padding-block: 0 50px;
    padding-inline: 50px;
    justify-content: flex-end;
  }
}
@container (min-width: 900px) {
  .hero__secondary {
    padding-block: 0 83px;
    padding-inline: 83px;
  }
}
.hero__icon-box {
  background: rgba(0, 0, 0, 0.7);
  padding: 24px;
  inline-size: 100%;
  margin-block-end: auto;
  display: flex;
  flex-direction: column;
  color: white;
}
@container (min-width: 800px) {
  .hero__icon-box {
    max-inline-size: 410px;
    flex: 0 1 410px;
  }
}
.hero__icon-box ::slotted([slot=icon-box-item]) {
  --nano-color-base: var(--theme-tint-color);
  --nano-icon-size: 32px;
  --nano-icon-margin-end: 20px;
  display: flex;
  align-items: center;
  font-size: 0.8125rem;
  margin-block-end: 20px;
}
.hero__icon-box ::slotted(.last[slot=icon-box-item]) {
  margin-block-end: 0;
}
.hero__quote-content {
  margin-block-start: auto;
  text-align: center;
  inline-size: 100%;
}
@container (min-width: 800px) {
  .hero__quote-content {
    max-inline-size: 500px;
    flex: 0 1 500px;
    text-align: initial;
  }
}
.hero__quote::before, .hero__quote::after {
  content: '"';
  font-size: var(--quote-size);
  font-weight: 600;
  font-style: italic;
  line-height: 0;
  color: #abb6b8;
  display: inline;
  position: relative;
}
.hero__quote ::slotted([slot=quote]) {
  font-size: var(--quote-size);
  font-weight: 200;
  display: inline;
}
.hero__quote-author {
  text-align: end;
  font-size: 1rem;
  opacity: 0.8;
}
@container (min-width: 800px) {
  .hero--sub .hero__content {
    margin-block-start: 40px;
  }
  .hero--sub .hero__content .hero__primary {
    margin-block: 0 40px;
    margin-inline: 50px 0;
  }
  .hero--sub .hero__content .hero__secondary {
    padding-block: 0 50px;
    padding-inline: 40px 50px;
  }
  .hero--sub .hero__content ::slotted(.button[slot=primary-content]) {
    margin-block-start: 8px !important;
  }
  .hero--sub .hero__content ::slotted(h1[slot=primary-content]) {
    margin-block-end: 18px !important;
  }
}
@container (min-width: 900px) {
  .hero--sub .hero__content .hero__primary {
    margin-block: 0 40px;
    margin-inline: 83px 0;
  }
  .hero--sub .hero__content .hero__secondary {
    padding-block: 0 83px;
    padding-inline: 40px 83px;
  }
}