.hero__wrapper {
  --hero-button-width: calc(100% - 16px);
  --hero-buttons-color: currentcolor;
  --hero-buttons-margin-top: 52px;
  --hero-color: var(--color-primary);
  --hero-description-padding-bottom: 38px;
  --hero-min-height: var(--height-mobile, 515px);
  --hero-overlay-background: linear-gradient(var(--overlay-direction-mobile), var(--background-overlay) 25.94%, var(--background-overlay-00) 100%);
  --hero-overlay-opacity: var(--overlay-opacity);
  --hero-padding-bottom: var(--padding-bottom-mobile);
  --hero-padding-left: 0;
  --hero-padding-right: 0;
  --hero-padding-top: var(--padding-top-mobile);
  --hero-text-align: var(--text-align-mobile);
  --hero-text-justify: var(--text-justify-content-mobile);
  --hero-text-margin-left: var(--margin-left-mobile);
  --hero-text-margin-right: var(--margin-right-mobile);
  --hero-text-max-width: none;
  --hero-text-position: static;
  --hero-title-color: currentcolor;
  --hero-title-font-size: var(--font-size-h3);
  --hero-video-height: auto;
  --hero-video-width: 100%;
  --hero-vision-wrapper-display: grid;
  --hero-wrapper-align: stretch;
  --hero-wrapper-border-radius: 0;
  --hero-wrapper-direction: row;
  --hero-wrapper-height: 100%;
  --hero-wrapper-justify: initial;
  display: flex;
  align-items: var(--hero-wrapper-align);
  justify-content: var(--hero-wrapper-justify);
  flex-direction: var(--hero-wrapper-direction);
  position: relative;
  overflow: hidden;
  width: 100%;
  height: var(--hero-wrapper-height);
  min-height: var(--hero-min-height);
  padding-left: var(--hero-padding-left);
  padding-right: var(--hero-padding-right);
  border-radius: var(--hero-wrapper-border-radius);
}
@media (min-width: 428px) {
  .hero__wrapper {
    --hero-min-height: var(--height-mobile-md, 560px);
  }
}
@media (min-width: 667px) {
  .hero__wrapper {
    --hero-button-width: auto;
  }
}
@media (min-width: 992px) {
  .hero__wrapper {
    --hero-buttons-margin-top: 0;
    --hero-min-height: max(0px, calc(var(--height, 0px) - var(--header-height, 105px)));
    --hero-overlay-background: linear-gradient(var(--overlay-direction), var(--background-overlay) 25.94%, var(--background-overlay-00) 100%);
    --hero-padding-bottom: var(--padding-bottom);
    --hero-padding-top: var(--padding-top);
    --hero-text-align: var(--text-align);
    --hero-text-justify: var(--text-justify-content);
    --hero-text-margin-left: var(--margin-left);
    --hero-text-margin-right: var(--margin-right);
    --hero-title-font-size: var(--font-size-h1);
  }
}
.hero__wrapper--padding-top {
  padding-top: var(--hero-padding-top);
}
.hero__wrapper--padding-bottom {
  padding-bottom: var(--hero-padding-bottom);
}
.hero__container > .hero__wrapper {
  --hero-wrapper-border-radius: var(--border-radius-rounded-blocks);
  --hero-wrapper-direction: column;
  --hero-wrapper-height: auto;
  --hero-wrapper-justify: center;
}
.hero__container:has(.hero__content) > .hero__wrapper {
  --hero-padding-left: var(--horizontal-padding-mobile);
  --hero-padding-right: var(--horizontal-padding-mobile);
}
@media (min-width: 1200px) {
  .hero__container:has(.hero__content) > .hero__wrapper {
    --hero-padding-left: var(--horizontal-padding);
    --hero-padding-right: var(--horizontal-padding);
  }
}
@media (min-width: 992px) {
  .header-transparent ~ main .hero__wrapper {
    --hero-min-height: max(0px, calc(var(--height, 0px) - var(--top-bar-height, 35px)));
  }
}
.hero > .hero__container {
  display: flex;
}
.hero__wrapper > .hero__container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
.hero__content {
  color: var(--hero-color);
}
.hero__text-area--color .hero__content {
  --hero-color: var(--color-overlay);
}
.hero__text-area {
  display: flex;
  align-items: center;
  justify-content: var(--hero-text-justify);
  height: 100%;
  max-width: var(--hero-text-max-width);
  text-align: var(--hero-text-align);
  margin: 0 var(--hero-text-margin-right) 0 var(--hero-text-margin-left);
  position: var(--hero-text-position);
  z-index: 1;
}
.hero__text-area--max-width {
  --hero-text-max-width: 530px;
}
.hero__wrapper > .hero__text-area {
  --hero-text-position: relative;
}
.hero__title {
  font-size: var(--hero-title-font-size);
  color: var(--hero-title-color);
}
@media (min-width: 992px) {
  .hero__title {
    margin-bottom: 34px;
  }
}
.hero__text-area--color .hero__title {
  --hero-title-color: var(--color-overlay);
}
.hero__description {
  padding: 0 0 var(--hero-description-padding-bottom);
}
.hero__description:last-child {
  --hero-description-padding-bottom: 0;
}
.hero__button {
  margin-left: 8px;
  margin-right: 8px;
  width: var(--hero-button-width);
}
.hero__buttons {
  margin: var(--hero-buttons-margin-top) -8px calc(-1 * var(--button-margin-bottom));
  color: var(--hero-buttons-color);
}
.hero__text-area--color .hero__buttons .button--outlined {
  --hero-buttons-color: var(--color-overlay);
}
.hero__wrapper:has(.hero__content) .hero__image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: translate(-50%, -50%);
}
@media (max-width: 991px) {
  .hero__wrapper[style*="--height-mobile:"]:not([style*="--height-mobile: auto"]) .hero__image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transform: translate(-50%, -50%);
  }
}
@media (min-width: 992px) {
  .hero__wrapper[style*="--height:"]:not([style*="--height: auto"]) .hero__image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transform: translate(-50%, -50%);
  }
}
.hero__video {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: var(--hero-video-height);
  width: var(--hero-video-width);
  aspect-ratio: 16/9;
  max-width: none;
  object-fit: cover;
}
@container (aspect-ratio > 16 / 9) {
  .hero__vision--video .hero__video {
    --hero-video-width: 100%;
    --hero-video-height: auto;
  }
}
@container (aspect-ratio <= 16 / 9) {
  .hero__vision--video .hero__video {
    --hero-video-width: auto;
    --hero-video-height: 100%;
  }
}
.hero__vision {
  background: var(--background-primary);
  overflow: hidden;
}
.hero__vision-wrapper {
  display: var(--hero-vision-wrapper-display);
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}
@media (min-width: 992px) {
  .hero__vision-wrapper {
    --hero-vision-wrapper-display: block;
  }
}
.hero__vision-wrapper--overlay:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: var(--hero-overlay-opacity);
  background: var(--hero-overlay-background);
}
@media (max-width: 991px) {
  .hero__wrapper[style*="--height-mobile: auto"]:not(:has(.hero__content)):has(.hero__vision--video) .hero__vision-wrapper {
    position: absolute;
    top: 0;
    left: 0;
  }
}
@media (min-width: 992px) {
  .hero__wrapper[style*="--height: auto"]:not(:has(.hero__content)):has(.hero__vision--video) .hero__vision-wrapper {
    position: absolute;
    top: 0;
    left: 0;
  }
}
.hero__wrapper:has(.hero__content) .hero__vision {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
@media (max-width: 991px) {
  .hero__wrapper[style*="--height-mobile:"]:not([style*="--height-mobile: auto"]) .hero__vision {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
  }
}
@media (min-width: 992px) {
  .hero__wrapper[style*="--height:"]:not([style*="--height: auto"]) .hero__vision {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
  }
}
.hero__vision--video {
  container: hero-vision/size;
  height: 100%;
}
@media (max-width: 991px) {
  .hero__wrapper[style*="--height-mobile: auto"]:not(:has(.hero__content)) .hero__vision--video {
    height: auto;
    padding-top: 56.25%;
  }
}
@media (min-width: 992px) {
  .hero__wrapper[style*="--height: auto"]:not(:has(.hero__content)) .hero__vision--video {
    height: auto;
    padding-top: 56.25%;
  }
}
.hero .transition__sketch--top {
  transform: scale(-1, 1);
}