.dgrd-main-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
}

.dgrd-main-hero__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.dgrd-main-hero__image-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.dgrd-main-hero__image,
.dgrd-main-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: center right;
  border-radius: 0;
}

.dgrd-main-hero__video {
  background-color: #DDE5EA;
}

.dgrd-main-hero__gradient {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    90.108deg,
    var(--main-hero-gradient-color, #FFFFFF) 0%,
    var(--main-hero-gradient-color, #FFFFFF) 36.465%,
    rgba(255, 255, 255, 0.7) 63.389%,
    rgba(255, 255, 255, 0) 73.791%
  );
}

@supports (background: color-mix(in srgb, red, blue)) {
  .dgrd-main-hero__gradient {
    background-image: linear-gradient(
      90.108deg,
      var(--main-hero-gradient-color, #FFFFFF) 0%,
      var(--main-hero-gradient-color, #FFFFFF) 36.465%,
      color-mix(in srgb, var(--main-hero-gradient-color, #FFFFFF) 70%, transparent) 63.389%,
      color-mix(in srgb, var(--main-hero-gradient-color, #FFFFFF) 0%, transparent) 73.791%
    );
  }
}

.dgrd-main-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}

.dgrd-main-hero__content {
  width: 100%;
  max-width: 567px;

  padding-top: var(--main-hero-pad-top, 88px);
  padding-bottom: var(--main-hero-pad-bottom, 72px);
  display: flex;
  flex-direction: column;
  gap: 32px;
  color: var(--main-hero-text-color, #34373B);
  box-sizing: border-box;
}

.dgrd-main-hero__top {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.dgrd-main-hero__eyebrow {
  color: var(--main-hero-eyebrow-color, #1E5D85);
  margin: 0;
}

.dgrd-main-hero__heading {
  margin: 0;
  max-width: 567px;
  font-weight: 500;
  font-size: 50px;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--main-hero-text-color, #34373B);
}

.dgrd-main-hero__description {
  margin: 0;
  max-width: 544px;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--main-hero-text-color, #34373B);
}

.dgrd-main-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.dgrd-main-hero__button {
  flex-shrink: 0;
}

.dgrd-main-hero__button-label {
  display: block;
}

.dgrd-main-hero__button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.dgrd-main-hero__certs {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@media (min-width: 768px) {
  .dgrd-main-hero__certs {
    width: min(760px, calc(100vw - 80px));
    max-width: min(760px, calc(100vw - 80px));
  }
}

@media (min-width: 768px) and (max-width: 1023px) {

  .dgrd-main-hero__image-frame {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .dgrd-main-hero__image,
  .dgrd-main-hero__video {
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: center right;
  }

  .dgrd-main-hero__gradient {
    background-image: linear-gradient(
      90.108deg,
      var(--main-hero-gradient-color, #FFFFFF) 0%,
      var(--main-hero-gradient-color, #FFFFFF) 36.465%,
      rgba(255, 255, 255, 0.7) 63.389%,
      rgba(255, 255, 255, 0) 73.791%
    );
  }

  @supports (background: color-mix(in srgb, red, blue)) {
    .dgrd-main-hero__gradient {
      background-image: linear-gradient(
        90.108deg,
        var(--main-hero-gradient-color, #FFFFFF) 0%,
        var(--main-hero-gradient-color, #FFFFFF) 36.465%,
        color-mix(in srgb, var(--main-hero-gradient-color, #FFFFFF) 70%, transparent) 63.389%,
        color-mix(in srgb, var(--main-hero-gradient-color, #FFFFFF) 0%, transparent) 73.791%
      );
    }
  }

  .dgrd-main-hero__inner {
    padding: 0 40px;
  }

  .dgrd-main-hero__content {
    max-width: 600px;
    padding-top: var(--main-hero-pad-top, 72px);
    padding-bottom: var(--main-hero-pad-bottom, 64px);
    align-items: flex-start;
    text-align: left;
  }

  .dgrd-main-hero__top {
    align-items: flex-start;
  }

  .dgrd-main-hero__eyebrow {
    justify-content: flex-start;
  }

  .dgrd-main-hero__heading {
    max-width: 600px;
    font-size: 45px;
    text-align: left;
  }

  .dgrd-main-hero__description {
    text-align: left;
  }

  .dgrd-main-hero__ctas {
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {

  .dgrd-main-hero__image-frame {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .dgrd-main-hero__image,
  .dgrd-main-hero__video {
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: center;
  }

  .dgrd-main-hero__gradient {
    background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.58) 28%,
      var(--main-hero-gradient-color, #FFFFFF) 46%,
      var(--main-hero-gradient-color, #FFFFFF) 100%
    );
  }

  @supports (background: color-mix(in srgb, red, blue)) {
    .dgrd-main-hero__gradient {
      background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--main-hero-gradient-color, #FFFFFF) 8%, transparent) 0%,
        color-mix(in srgb, var(--main-hero-gradient-color, #FFFFFF) 58%, transparent) 28%,
        var(--main-hero-gradient-color, #FFFFFF) 46%,
        var(--main-hero-gradient-color, #FFFFFF) 100%
      );
    }
  }

  /* Padding values match Figma node 2874:43157
     (pt-[160px] pb-[64px] px-[16px], gap-[32px] inside the content). */
  .dgrd-main-hero__inner {
    padding: 0 16px;
  }

  .dgrd-main-hero__content {
    max-width: 100%;

    padding-top: calc(var(--main-hero-pad-top, 72px) + 88px);
    padding-bottom: var(--main-hero-pad-bottom, 64px);
    gap: 32px;
    align-items: flex-start;
    text-align: left;
  }

  .dgrd-main-hero__top {
    align-items: flex-start;
    gap: 16px;
  }

  .dgrd-main-hero__eyebrow {
    justify-content: flex-start;
  }

  .dgrd-main-hero__heading {
    max-width: 100%;
    font-size: 35px;
    line-height: 1.1;
    text-align: left;
  }

  .dgrd-main-hero__description {
    max-width: 100%;
    font-size: 18px;
    line-height: 1.4;
    text-align: left;
  }

  .dgrd-main-hero__ctas {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
  }

  .dgrd-main-hero__button {
    width: auto;
    max-width: 100%;
    flex: 0 0 auto;
  }
}