/**
 * Hero teaser component style.
 *
 * large: first teaser in the hero teaser grid (full width)
 * product: transparent landscape image
 * default: square image on desktop, landscape on mobile
 */
/**
 * Button component styling.
 *
 * 1. Line different size buttons up vertically.
 * 2. Force all buttons to appear clickable.
 * 3. Prevents error when switching from disable state.
 */
.c-button,
a.c-button,
.hero-teaser--bg-dark .hero-teaser__content .c-link {
  display: inline-flex;
  gap: var(--s-md);
  align-items: center;
  justify-content: center;
  padding: var(--button-padding-y, 0.75rem) var(--button-padding-x, 1.66rem);
  font-size: 1rem;
  font-weight: bold;
  line-height: inherit;
  color: #fff;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  background-color: var(--c-link);
  border: solid 1px transparent;
  border-radius: 0.1875rem;
  /**
   * Secondary button variant.
   */
  /**
   * Hollow button variant.
   */
  /**
   * Size variations, default is medium.
   */
  /**
   * Outline button variant.
   */
  /**
   * Primary White button variant.
   */
  /**
   * Back to top button variant.
   * Cannot be reversed due to specific left/right padding
   */
  /**
   * Block button variant.
   */
  /**
   * Reversed button variant.
   */
  /**
   * Tag button variant.
   */
  /**
   * Toggle visibility, like for reset form button.
   */
}
.c-button:hover,
a.c-button:hover,
.hero-teaser--bg-dark .hero-teaser__content .c-link:hover {
  color: #fff;
  text-decoration: none;
  background-color: var(--c-link-hocus);
}
.c-button:focus,
a.c-button:focus,
.hero-teaser--bg-dark .hero-teaser__content .c-link:focus {
  outline: 0;
  outline-offset: 0;
}
.c-button:focus-visible,
a.c-button:focus-visible,
.hero-teaser--bg-dark .hero-teaser__content .c-link:focus-visible {
  outline: 3px solid var(--c-link-focus);
  outline-offset: 3px;
}
.c-button:active,
a.c-button:active,
.hero-teaser--bg-dark .hero-teaser__content .c-link:active {
  color: #fff;
  background-color: var(--c-link-active);
}
.c-button:disabled, .c-button:disabled:hover, .c-button:disabled:active, .c-button:disabled:focus, .c-button:disabled:focus-visible,
a.c-button:disabled,
a.c-button:disabled:hover,
a.c-button:disabled:active,
a.c-button:disabled:focus,
a.c-button:disabled:focus-visible,
.hero-teaser--bg-dark .hero-teaser__content .c-link:disabled {
  color: #fff;
  cursor: not-allowed;
  background-color: var(--c-grayscale-mid);
  border: solid 1px var(--c-grayscale-light);
  outline: 0;
}
.c-button__icon,
a.c-button__icon {
  flex-shrink: 0;
}
.c-button--secondary, .c-button--secondary:hover, .c-button--secondary:active, .c-button--secondary:focus, .c-button--secondary:focus-visible,
a.c-button--secondary,
a.c-button--secondary:hover,
a.c-button--secondary:active,
a.c-button--secondary:focus,
a.c-button--secondary:focus-visible {
  color: #fff;
  background-color: var(--c-grayscale);
}
.c-button--hollow,
a.c-button--hollow {
  color: var(--c-grayscale);
  background-color: #fff;
  border: 1px solid var(--c-grayscale);
}
.c-button--hollow:hover, .c-button--hollow:active,
a.c-button--hollow:hover,
a.c-button--hollow:active {
  color: var(--c-grayscale-black-hover);
  background-color: var(--c-grayscale-off-white);
}
.c-button--hollow:disabled, .c-button--hollow:disabled:hover, .c-button--hollow:disabled:active, .c-button--hollow:disabled:focus, .c-button--hollow:disabled:focus-visible,
a.c-button--hollow:disabled,
a.c-button--hollow:disabled:hover,
a.c-button--hollow:disabled:active,
a.c-button--hollow:disabled:focus,
a.c-button--hollow:disabled:focus-visible {
  color: var(--c-grayscale-black);
  background-color: var(--c-grayscale-off-white);
  border: 1px solid var(--c-grayscale-lighter);
}
.c-button--xsmall,
a.c-button--xsmall {
  padding: var(--s-2xs) var(--s-md);
  font-size: var(--text-size-sm);
  gap: var(--s-xs);
}
.c-button--small,
a.c-button--small {
  padding: var(--s-xs) var(--s-lg);
  font-size: 0.8755rem;
}
.c-button--large,
a.c-button--large {
  padding: var(--s-md) var(--s-3xl);
  font-size: 1.125rem;
}
.c-button--outline,
a.c-button--outline {
  color: var(--c-grayscale-off-dark);
  background-color: #fff;
  border: 1px solid var(--c-grayscale-off-dark);
}
.c-button--outline:hover,
a.c-button--outline:hover {
  color: var(--c-grayscale-off-dark);
  background-color: #fff;
}
.c-button--white,
a.c-button--white,
.hero-teaser--bg-dark .hero-teaser__content .c-link {
  color: var(--c-grayscale-off-dark);
  background-color: #fff;
  border: none;
}
.c-button--white:hover, .c-button--white:active,
a.c-button--white:hover,
a.c-button--white:active,
.hero-teaser--bg-dark .hero-teaser__content .c-link:hover,
.hero-teaser--bg-dark .hero-teaser__content .c-link:active {
  color: var(--c-grayscale-black-hover);
  background-color: var(--c-grayscale-off-white);
}
.c-button--top,
a.c-button--top {
  gap: var(--s-2xs);
  padding: var(--s-xs) var(--s-sm) var(--s-xs) var(--s-lg);
  font-size: 1rem;
  line-height: 1;
  color: #fff;
  background-color: var(--c-grayscale);
  border-radius: 40px;
}
.c-button--top:hover, .c-button--top:active,
a.c-button--top:hover,
a.c-button--top:active {
  background-color: var(--c-grayscale-black-hover);
}
.c-button--top .icon,
a.c-button--top .icon {
  font-size: 1.875rem;
}
.c-button--block,
a.c-button--block {
  width: 100%;
}
.c-button--reversed,
a.c-button--reversed {
  flex-direction: row-reverse;
}
.c-button--tag,
a.c-button--tag {
  flex: 0 0 auto;
  background-color: #fff;
  border: 1px solid #000;
  padding: var(--s-3xs) var(--s-md);
  color: var(--c-grayscale-off-dark);
  font-size: 0.875rem;
  font-weight: 700;
}
.c-button--tag:hover, .c-button--tag:active,
a.c-button--tag:hover,
a.c-button--tag:active {
  background-color: var(--c-grayscale-black-hover);
}
.c-button[hidden],
a.c-button[hidden],
.hero-teaser--bg-dark .hero-teaser__content [hidden].c-link {
  display: none;
}

.hero-teaser {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: var(--c-grayscale-off-white);
  transition: background-color var(--easing);
  text-decoration: none;
}
.hero-teaser:hover {
  background-color: var(--c-grayscale-off-white-darker);
}
.hero-teaser:hover.hero-teaser--bg-dark {
  background-color: var(--c-brand-secondary-darker);
}
.hero-teaser:hover.hero-teaser--bg-light .c-link {
  text-decoration: underline;
}
.hero-teaser:hover .hero-teaser__media {
  filter: brightness(0.85);
}
.hero-teaser--large {
  align-items: flex-start;
}
@media (min-width: 1080px) {
  .hero-teaser--large {
    flex-direction: row;
    gap: var(--s-4xl);
  }
}
@media (min-width: 768px) {
  .hero-teaser--product, .hero-teaser--default {
    flex: 1 1 20rem;
  }
}
@media (min-width: 1080px) {
  .hero-teaser--product, .hero-teaser--default {
    flex-direction: row;
    gap: var(--s-md);
  }
}
.hero-teaser--bg-dark {
  background-color: var(--c-brand-secondary);
}
.hero-teaser--bg-dark .hero-teaser__content .hero-teaser__head,
.hero-teaser--bg-dark .hero-teaser__content .hero-teaser__subhead,
.hero-teaser--bg-dark .hero-teaser__content .hero-teaser__text {
  color: #fff;
}
.hero-teaser--bg-dark .hero-teaser__content .c-link .icon {
  display: none;
}
.hero-teaser__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.hero-teaser--large .hero-teaser__content {
  flex-basis: 42%;
  justify-content: space-around;
  padding: var(--s-2xl) var(--s-lg);
}
@media (min-width: 768px) {
  .hero-teaser--large .hero-teaser__content {
    padding: var(--s-2xl) var(--s-3xl);
  }
}
@media (min-width: 1080px) {
  .hero-teaser--large .hero-teaser__content {
    padding: var(--s-2xl) 0 var(--s-2xl) var(--s-4xl);
  }
}
.hero-teaser--product .hero-teaser__content, .hero-teaser--default .hero-teaser__content {
  flex-basis: 50%;
  height: 100%;
  padding: var(--s-xl) var(--s-lg) var(--s-md);
}
@media (min-width: 1080px) {
  .hero-teaser--product .hero-teaser__content, .hero-teaser--default .hero-teaser__content {
    padding: var(--s-3xl) var(--s-4xl);
    padding-right: 0;
  }
}
.hero-teaser--product .hero-teaser__content .hero-teaser__text, .hero-teaser--default .hero-teaser__content .hero-teaser__text {
  flex-grow: 1;
}
.hero-teaser__content .hero-teaser__head,
.hero-teaser__content .hero-teaser__subhead {
  margin-bottom: var(--s-xs);
}
.hero-teaser__content .hero-teaser__head {
  color: var(--c-brand-secondary);
}
.hero-teaser__content .hero-teaser__subhead,
.hero-teaser__content .hero-teaser__text {
  color: var(--c-grayscale-dark);
}
.hero-teaser .c-link {
  margin-top: var(--s-xl);
}
@media (min-width: 1080px) {
  .hero-teaser .c-link {
    margin-top: var(--s-2xl);
  }
}
.hero-teaser__media {
  align-self: end;
  transition: filter var(--easing);
}
@media (min-width: 1200px) {
  .hero-teaser__media {
    align-self: center;
  }
}
@media (min-width: 768px) {
  .hero-teaser__media {
    padding: 0;
  }
}
.hero-teaser--large .hero-teaser__media {
  flex-basis: 60%;
  width: 100%;
}
.hero-teaser--large .hero-teaser__media .c-image {
  aspect-ratio: 16/9;
  object-fit: cover;
}
.hero-teaser--product .hero-teaser__media, .hero-teaser--default .hero-teaser__media {
  flex-basis: 50%;
  align-self: flex-end;
  width: 50%;
  height: 100%;
  padding-left: var(--s-lg);
}
@media (min-width: 1080px) {
  .hero-teaser--product .hero-teaser__media, .hero-teaser--default .hero-teaser__media {
    width: 100%;
  }
}
.hero-teaser--product .hero-teaser__media .c-image, .hero-teaser--default .hero-teaser__media .c-image {
  max-height: 11.25rem;
  object-fit: cover;
}
@media (min-width: 1080px) {
  .hero-teaser--product .hero-teaser__media .c-image, .hero-teaser--default .hero-teaser__media .c-image {
    max-height: 18.25rem;
  }
}
.hero-teaser--product .hero-teaser__media .c-image {
  aspect-ratio: 1;
}
.hero-teaser--default .hero-teaser__media .c-image {
  aspect-ratio: 16/9;
}
@media (min-width: 1080px) {
  .hero-teaser--default .hero-teaser__media .c-image {
    aspect-ratio: 1;
  }
}