/*******************************
 * Buttons
 ******************************/
/*
 * Applies the complete set of button styles with all desired style variations.
 * This mixin is normally applied to form buttons or links with
 * the desired button classes eg. .button.style-xxx.
 */
/*
 * Contains styles that all of the buttons have in common.
 * Some button styles might opt out or override some of these styles.
 * One benefit of this approach is that all of the buttons will be consistently
 * configurable with the CSS variables defined below.
 */
/*******************************
 * Button Styles
 *
 * Styles should define the way the buttons look. Depending on the project,
 * you may need to optimize each style based on the section / element that
 * a button is used in. For that purpose you can use the predefined CSS
 * variables to easily overwrite the desired colors based on your need.
 ******************************/
/*******************************
 * Inputs
 ******************************/
.hero-base-section {
  --hero-margin: 0px;
  --hero-height: /* grow(256, 460, $to: lg) */ clamp(16rem, 10.3605769231rem + 24.5192307692vw, 28.75rem);
  --hero-element-aspect-ratio: calc(var(--100vw) / var(--hero-height));
  --theme: dark;
  --focus-color: var(--white);
  position: relative;
  display: grid;
  padding: var(--hero-margin, 0px);
  min-height: var(--hero-height, 0);
  color: var(--white);
}
.hero-base-section.hero-size-large {
  --hero-height: min(/* grow(720, 740, $to: 2xl) */ clamp(45rem, 44.6266233766rem + 1.6233766234vw, 46.25rem), 90svh - var(--header-height));
}
.hero-base-section.hero-size-full {
  --hero-height: min(var(--100svh) - var(--admin-bar-height), 916px);
}
.hero-base-section.hero-size-full .hero-media-overlay {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2) 65%);
}
.hero-base-section .hero-media {
  display: grid;
  align-items: var(--content-alignment);
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: "content";
}
.hero-base-section .hero-media > * {
  grid-row: 1/-1;
  grid-column: 1/-1;
}
.hero-base-section .hero-media .hero-preview-wrapper {
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0ms;
}
.hero-base-section .hero-media .hero-preview-wrapper.loading {
  opacity: 1;
}
.hero-base-section .hero-media .hero-preview-wrapper[data-loading-speed=slow] {
  transition-duration: 2000ms;
}
.hero-base-section .hero-media .hero-preview-wrapper[data-loading-speed=medium] {
  transition-duration: 650ms;
}
.hero-base-section .hero-media .hero-preview-wrapper[data-loading-speed=fast] {
  transition-duration: 250ms;
}
.hero-base-section .hero-media .hero-preview-wrapper:is(body.no-js *) {
  display: none;
}
.hero-base-section .hero-media .hero-preview-wrapper .hero-preview {
  --blur: 30px;
  height: calc(100% + 4 * var(--blur));
  background-image: var(--hero-image-preview);
  background-size: cover;
  background-position: var(--hero-image-position);
  filter: blur(var(--blur));
  margin: calc(-2 * var(--blur));
}
.hero-base-section .hero-media-overlay {
  z-index: 1;
  align-self: stretch;
}
.hero-base-section.hero-align-start {
  --content-alignment: flex-start;
}
.hero-base-section.hero-align-center {
  --content-alignment: center;
}
.hero-base-section.hero-align-end {
  --content-alignment: flex-end;
}
.hero-base-section .hero-content-wrapper {
  z-index: 1;
  grid-area: content;
  filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.6));
  margin-left: auto;
  margin-right: auto;
  width: var(--container-width, auto);
  padding: var(--container-padding, 0);
  padding-top: calc(var(--hero-additional-padding-top, 0px) + /* grow(24, 125, $to: sm) */ clamp(1.5rem, -4.3075rem + 25.25vw, 7.8125rem));
  padding-bottom: calc(var(--hero-additional-padding-bottom, 0px) + /* grow(48, 175, $to: sm) */ clamp(3rem, -4.3025rem + 31.75vw, 10.9375rem));
}
.hero-base-section.hero-size-full .hero-content-wrapper {
  padding-top: calc(var(--hero-additional-padding-top, 0px) + /* grow(150, 250, $from: lg, $to: 3xl) */ clamp(9.375rem, -1.3392857143rem + 14.2857142857vw, 15.625rem));
  padding-bottom: calc(var(--hero-additional-padding-bottom, 0px) + /* grow(150, 250, $from: lg, $to: 3xl) */ clamp(9.375rem, -1.3392857143rem + 14.2857142857vw, 15.625rem));
}
.hero-base-section .hero-content {
  max-width: 1300px;
}
.hero-base-section .hero-content > :first-child, .hero-base-section .hero-content > link:first-child + * {
  margin-top: 0;
}
.hero-base-section .hero-content > :last-child {
  margin-bottom: 0;
}
.hero-base-section .hero-content > :is(.lead-text, .lead-text-small):first-child > :first-child {
  margin-top: 0;
}
.hero-base-section .hero-content > :is(.lead-text, .lead-text-small):last-child > :last-child {
  margin-bottom: 0;
}
.hero-base-section .hero-content :is(h1),
.hero-base-section .hero-content :is(.h1) {
  font-size: /* grow(40, 102) */ clamp(2.5rem, 1.1182170543rem + 6.007751938vw, 6.375rem);
}
.hero-base-section .hero-indicator {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: /* grow(80, 165, $from: lg, $to: 3xl) */ clamp(5rem, -4.1071428571rem + 12.1428571429vw, 10.3125rem);
  transform: translateX(-50%);
}

.hero-base-section.hero-is-image {
  --background-image: var(--hero-image-full);
}
@media (width < 1900px /* 3xl */) {
  .hero-base-section.hero-is-image:not(.hero-size-full) {
    --background-image: var(--hero-image-until-3xl, var(--hero-image-full));
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-image:not(.hero-size-full) {
      --background-image: var(
        --hero-image-until-3xl-2x,
        var(--hero-image-full)
      );
    }
  }
}
@media (width < 1600px /* 2xl */) {
  .hero-base-section.hero-is-image:not(.hero-size-full) {
    --background-image: var(--hero-image-until-2xl, var(--hero-image-full));
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-image:not(.hero-size-full) {
      --background-image: var(
        --hero-image-until-2xl-2x,
        var(--hero-image-full)
      );
    }
  }
}
@media (width < 1400px /* xl */) {
  .hero-base-section.hero-is-image:not(.hero-size-full) {
    --background-image: var(--hero-image-until-xl, var(--hero-image-full));
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-image:not(.hero-size-full) {
      --background-image: var(
        --hero-image-until-xl-2x,
        var(--hero-image-full)
      );
    }
  }
}
@media (width < 1200px /* lg */) {
  .hero-base-section.hero-is-image:not(.hero-size-full) {
    --background-image: var(--hero-image-until-lg, var(--hero-image-full));
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-image:not(.hero-size-full) {
      --background-image: var(
        --hero-image-until-lg-2x,
        var(--hero-image-full)
      );
    }
  }
}
@media (width < 992px /* md */) {
  .hero-base-section.hero-is-image:not(.hero-size-full) {
    --background-image: var(--hero-image-until-md, var(--hero-image-full));
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-image:not(.hero-size-full) {
      --background-image: var(
        --hero-image-until-md-2x,
        var(--hero-image-full)
      );
    }
  }
}
@media (width < 768px /* sm */) {
  .hero-base-section.hero-is-image:not(.hero-size-full) {
    --background-image: var(--hero-image-until-sm, var(--hero-image-full));
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-image:not(.hero-size-full) {
      --background-image: var(
        --hero-image-until-sm-2x,
        var(--hero-image-full)
      );
    }
  }
}
@media (width < 540px /* s */) {
  .hero-base-section.hero-is-image:not(.hero-size-full) {
    --background-image: var(--hero-image-until-s, var(--hero-image-full));
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-image:not(.hero-size-full) {
      --background-image: var(
        --hero-image-until-s-2x,
        var(--hero-image-full)
      );
    }
  }
}
@media (max-width: 1899px) and (max-height: 1068px) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(--hero-image-until-3xl, var(--hero-image-full));
  }
}
@media (max-width: 1899px) and (max-height: 1068px) and (min-resolution: 2dppx) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(
      --hero-image-until-3xl-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: 1599px) and (max-height: 899px) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(--hero-image-until-2xl, var(--hero-image-full));
  }
}
@media (max-width: 1599px) and (max-height: 899px) and (min-resolution: 2dppx) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(
      --hero-image-until-2xl-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: 1399px) and (max-height: 786px) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(--hero-image-until-xl, var(--hero-image-full));
  }
}
@media (max-width: 1399px) and (max-height: 786px) and (min-resolution: 2dppx) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(
      --hero-image-until-xl-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: 1199px) and (max-height: 674px) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(--hero-image-until-lg, var(--hero-image-full));
  }
}
@media (max-width: 1199px) and (max-height: 674px) and (min-resolution: 2dppx) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(
      --hero-image-until-lg-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: 991px) and (max-height: 557px) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(--hero-image-until-md, var(--hero-image-full));
  }
}
@media (max-width: 991px) and (max-height: 557px) and (min-resolution: 2dppx) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(
      --hero-image-until-md-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: 767px) and (max-height: 431px) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(--hero-image-until-sm, var(--hero-image-full));
  }
}
@media (max-width: 767px) and (max-height: 431px) and (min-resolution: 2dppx) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(
      --hero-image-until-sm-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: 539px) and (max-height: 303px) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(--hero-image-until-s, var(--hero-image-full));
  }
}
@media (max-width: 539px) and (max-height: 303px) and (min-resolution: 2dppx) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(
      --hero-image-until-s-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: -1px) and (max-height: -1px) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(--hero-image-until-xs, var(--hero-image-full));
  }
}
@media (max-width: -1px) and (max-height: -1px) and (min-resolution: 2dppx) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(
      --hero-image-until-xs-2x,
      var(--hero-image-full)
    );
  }
}
.hero-base-section.hero-is-image .hero-media {
  background-image: var(--background-image);
  background-size: cover;
  background-position: var(--hero-image-position);
}

.hero-base-section.hero-is-video {
  --background-image: var(--hero-image-full);
}
@media (width < 1900px /* 3xl */) {
  .hero-base-section.hero-is-video {
    --background-image: var(--hero-image-until-3xl);
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-video {
      --background-image: var(--hero-image-until-3xl-2x);
    }
  }
}
@media (width < 1600px /* 2xl */) {
  .hero-base-section.hero-is-video {
    --background-image: var(--hero-image-until-2xl);
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-video {
      --background-image: var(--hero-image-until-2xl-2x);
    }
  }
}
@media (width < 1400px /* xl */) {
  .hero-base-section.hero-is-video {
    --background-image: var(--hero-image-until-xl);
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-video {
      --background-image: var(--hero-image-until-xl-2x);
    }
  }
}
@media (width < 1200px /* lg */) {
  .hero-base-section.hero-is-video {
    --background-image: var(--hero-image-until-lg);
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-video {
      --background-image: var(--hero-image-until-lg-2x);
    }
  }
}
@media (width < 992px /* md */) {
  .hero-base-section.hero-is-video {
    --background-image: var(--hero-image-until-md);
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-video {
      --background-image: var(--hero-image-until-md-2x);
    }
  }
}
@media (width < 768px /* sm */) {
  .hero-base-section.hero-is-video {
    --background-image: var(--hero-image-until-sm);
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-video {
      --background-image: var(--hero-image-until-sm-2x);
    }
  }
}
@media (width < 540px /* s */) {
  .hero-base-section.hero-is-video {
    --background-image: var(--hero-image-until-s);
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-video {
      --background-image: var(--hero-image-until-s-2x);
    }
  }
}
.hero-base-section.hero-is-video .hero-video {
  width: 100%;
  grid-row: 1/-1;
  grid-column: 1/-1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  object-fit: cover;
}