body.kv-redesign {
  overflow-x: clip;
}

body.kv-redesign .kvx-hero {
  min-height: min(680px, calc(100dvh - 72px));
  isolation: isolate;
}

body.kv-redesign .kvx-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

body.kv-redesign .kvx-hero__grid {
  min-height: min(680px, calc(100dvh - 72px));
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}

body.kv-redesign .kvx-hero__content {
  position: relative;
  z-index: 7;
  padding-right: clamp(0rem, 2vw, 2rem);
}

body.kv-redesign .kvx-hero__title {
  max-width: 13ch;
  font-size: clamp(2.35rem, 4.4vw, 4rem);
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

body.kv-redesign .kvx-hero__sub {
  max-width: 42ch;
  text-wrap: pretty;
}

body.kv-redesign .kvx-hero__chips {
  display: none;
}

body.kv-redesign .kvx-hero__media {
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
}

body.kv-redesign .kvx-hero__media::after {
  content: "";
  position: absolute;
  left: var(--spot-x, 70%);
  top: var(--spot-y, 28%);
  z-index: 4;
  width: 16rem;
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: .2;
  background: radial-gradient(circle, rgba(255, 255, 255, .72), transparent 68%);
  transition: left .28s ease, top .28s ease;
}

body.kv-redesign .kvx-hero__media-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--green-dark) 0%, rgba(6, 78, 59, .58) 13%, transparent 44%),
    linear-gradient(180deg, transparent 55%, rgba(4, 46, 35, .34));
}

body.kv-redesign .kvx-hero__float-grid {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

body.kv-redesign .kvx-float-card {
  position: absolute;
  width: clamp(154px, 14vw, 188px);
  min-height: 66px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .72rem;
  overflow: hidden;
  padding: .78rem .9rem;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 16px;
  color: var(--green-dark);
  background: rgba(255, 255, 255, .9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 18px 42px rgba(3, 55, 40, .2);
  backdrop-filter: blur(15px) saturate(130%);
  -webkit-backdrop-filter: blur(15px) saturate(130%);
  animation: kvx-float-card calc(5.2s + var(--float-index, 0) * .45s) ease-in-out infinite;
  animation-delay: calc(var(--float-index, 0) * -.9s);
}

body.kv-redesign .kvx-float-card--1 { left: 4%; top: 8%; }
body.kv-redesign .kvx-float-card--2 { right: 5%; top: 17%; }
body.kv-redesign .kvx-float-card--3 { left: 9%; bottom: 9%; }
body.kv-redesign .kvx-float-card--4 { right: 3%; bottom: 21%; }

body.kv-redesign .kvx-float-card__icon {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--green-primary);
  background: var(--green-light);
  font-size: 1.18rem;
}

body.kv-redesign .kvx-float-card__copy {
  min-width: 0;
  line-height: 1.2;
}

body.kv-redesign .kvx-float-card__copy strong,
body.kv-redesign .kvx-float-card__copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.kv-redesign .kvx-float-card__copy strong {
  font-size: .88rem;
  font-weight: 800;
}

body.kv-redesign .kvx-float-card__copy small {
  margin-top: .22rem;
  color: #60776f;
  font-size: .72rem;
  font-weight: 600;
}

body.kv-redesign .kvx-float-card__shine {
  position: absolute;
  inset: -60% auto -60% -55%;
  width: 42%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
  animation: kvx-card-shine 5.4s ease-in-out infinite;
  animation-delay: calc(var(--float-index, 0) * .8s);
}

body.kv-redesign .kvx-motion-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

body.kv-redesign .kvx-motion-letter {
  position: absolute;
  width: 3.25rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 14px;
  color: #fff;
  background: rgba(5, 72, 53, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 1rem;
  font-weight: 800;
  animation: kvx-letter-float 6s ease-in-out infinite;
}

body.kv-redesign .kvx-motion-letter.kv-motion-letter--en { left: 34%; top: 28%; transform: rotate(-7deg); }
body.kv-redesign .kvx-motion-letter.kv-motion-letter--zh { right: 28%; top: 5%; transform: rotate(6deg); animation-delay: -1.4s; }
body.kv-redesign .kvx-motion-letter.kv-motion-letter--jp { left: 43%; bottom: 4%; transform: rotate(-5deg); animation-delay: -2.8s; }
body.kv-redesign .kvx-motion-letter.kv-motion-letter--ko { right: 4%; top: 48%; transform: rotate(8deg); animation-delay: -4.1s; }

body.kv-redesign .kvx-motion-frame {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translate3d(0, 35%, 0) scale(.88);
  transition: opacity .45s cubic-bezier(.16, 1, .3, 1), transform .45s cubic-bezier(.16, 1, .3, 1);
}

body.kv-redesign .kvx-motion-frame.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

body.kv-redesign .kvx-motion-speech {
  position: absolute;
  right: 13%;
  top: 44%;
  width: 8.4rem;
  min-height: 4rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 16px 16px 5px 16px;
  color: var(--green-dark);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 18px 42px rgba(3, 55, 40, .2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: kvx-float-card 5.8s ease-in-out -2s infinite;
}

body.kv-redesign .kvx-motion-speech .kvx-motion-frame {
  align-content: center;
  justify-items: start;
  padding: .72rem .9rem;
}

body.kv-redesign .kvx-motion-speech small,
body.kv-redesign .kvx-motion-speech strong {
  display: block;
}

body.kv-redesign .kvx-motion-speech small {
  color: #60776f;
  font-size: .63rem;
}

body.kv-redesign .kvx-motion-speech strong {
  margin-top: .15rem;
  font-size: .86rem;
}

@keyframes kvx-float-card {
  0%, 100% { transform: translate3d(0, 0, 0); }
  48% { transform: translate3d(0, -10px, 0); }
  72% { transform: translate3d(0, -4px, 0); }
}

@keyframes kvx-letter-float {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -9px; }
}

@keyframes kvx-card-shine {
  0%, 58% { left: -55%; opacity: 0; }
  68% { opacity: .8; }
  84%, 100% { left: 125%; opacity: 0; }
}

@media (max-width: 1024px) {
  body.kv-redesign .kvx-hero,
  body.kv-redesign .kvx-hero__grid {
    min-height: 0;
  }

  body.kv-redesign .kvx-hero__grid {
    grid-template-columns: 1fr;
  }

  body.kv-redesign .kvx-hero__media {
    min-height: 360px;
  }

  body.kv-redesign .kvx-hero__media-shade {
    background: linear-gradient(180deg, transparent 48%, rgba(4, 46, 35, .52));
  }

  body.kv-redesign .kvx-float-card--1 { left: 1rem; top: 1rem; }
  body.kv-redesign .kvx-float-card--2 { right: 1rem; top: 1.6rem; }
  body.kv-redesign .kvx-float-card--3 { left: 1.5rem; bottom: 1.2rem; }
  body.kv-redesign .kvx-float-card--4 { right: 1rem; bottom: 1.6rem; }
}

@media (max-width: 767px) {
  body.kv-redesign .kvx-hero__media {
    min-height: 292px;
  }

  body.kv-redesign .kvx-hero__title {
    max-width: 100%;
    font-size: clamp(1.85rem, 8vw, 2.35rem);
    line-height: 1.14;
  }

  body.kv-redesign .kvx-hero__title br {
    display: none;
  }

  body.kv-redesign .kvx-hero__sub {
    font-size: .98rem;
  }

  body.kv-redesign .kvx-hero__float-grid {
    inset: auto .75rem .75rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
  }

  body.kv-redesign .kvx-float-card {
    position: relative;
    inset: auto;
    width: auto;
    min-height: 52px;
    padding: .58rem .65rem;
    gap: .55rem;
    border-radius: 13px;
  }

  body.kv-redesign .kvx-float-card:nth-child(n+3) {
    display: none;
  }

  body.kv-redesign .kvx-float-card__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    font-size: 1rem;
  }

  body.kv-redesign .kvx-float-card__copy strong {
    font-size: .76rem;
  }

  body.kv-redesign .kvx-float-card__copy small {
    font-size: .65rem;
  }

  body.kv-redesign .kvx-motion-layer {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.kv-redesign .kvx-float-card,
  body.kv-redesign .kvx-float-card__shine,
  body.kv-redesign .kvx-motion-letter,
  body.kv-redesign .kvx-motion-speech {
    animation: none !important;
  }
}

/* Media-only hero banner.
   The banner artwork carries the visible copy, so the page must not overlay
   HTML headline/CTA text on top of it. */
body.kv-redesign .kvx-hero.kvx-hero--media {
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

body.kv-redesign .kvx-hero.kvx-hero--media::after {
  display: none;
}

body.kv-redesign .kvx-hero-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--green-dark);
  background-image: var(--kv-hero-banner-fallback, none);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  line-height: 0;
}

body.kv-redesign .kvx-hero--media .kvx-hero-slider {
  display: grid;
  width: 100%;
  min-height: clamp(220px, 56vw, 340px);
  overflow: hidden;
  background: transparent;
  --hero-slide-ease: ease-in-out;
}

body.kv-redesign .kvx-hero--media a.kvx-hero-slide {
  display: block;
  text-decoration: none;
  color: inherit;
}

body.kv-redesign .kvx-hero--media .kvx-hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--kv-hero-bg);
  background-size: cover;
  background-position: var(--kv-hero-position, center top);
  background-repeat: no-repeat;
  pointer-events: none;
}

body.kv-redesign .kvx-hero--media .kvx-hero-slide img,
body.kv-redesign .kvx-hero--media .kvx-hero-slide video {
  position: absolute;
  z-index: 1;
}

body.kv-redesign .kvx-hero--media .kvx-hero-slide img.kvx-sr-only {
  width: 1px;
  height: 1px;
  min-height: 0;
  max-height: none;
  object-fit: none;
}

body.kv-redesign .kvx-hero--media .kvx-hero-slide {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  min-height: clamp(220px, 56vw, 340px);
  overflow: hidden;
  color: inherit;
  line-height: 0;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  background-color: transparent;
  background-image: var(--kv-hero-bg, none);
  background-size: cover;
  background-position: var(--kv-hero-position, center top);
  background-repeat: no-repeat;
}

body.kv-redesign .kvx-hero--media .kvx-hero-slide.is-active {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
}

body.kv-redesign .kvx-hero--media .kvx-hero-slide.is-leaving {
  z-index: 3;
  opacity: 1;
  pointer-events: none;
  animation: kvx-hero-fade-out var(--hero-slide-transition, 2600ms) var(--hero-slide-ease, ease-in-out) forwards;
}

body.kv-redesign .kvx-hero--media .kvx-hero-slide img,
body.kv-redesign .kvx-hero--media .kvx-hero-slide video,
body.kv-redesign .kvx-hero-banner__media {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  max-width: none;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: center top;
  background: transparent;
  box-shadow: none;
}

body.kv-redesign .kvx-hero--media ~ .kvx-stats,
body.kv-redesign .kvx-hero--banner-only ~ .kvx-stats {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  padding-top: 0;
}

body.kv-redesign .kvx-hero--media .kvx-hero-slider__dots {
  right: clamp(.85rem, 2vw, 1.5rem);
  bottom: clamp(.85rem, 2vw, 1.5rem);
  z-index: 5;
  padding: .38rem .46rem;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
  background: rgba(6, 78, 59, .34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.kv-redesign .kvx-hero--media .kvx-hero-slider__dots button {
  width: 9px;
  height: 9px;
  background: rgba(255, 255, 255, .68);
  box-shadow: none;
}

body.kv-redesign .kvx-hero--media .kvx-hero-slider__dots button.is-active {
  width: 24px;
  background: var(--yellow);
}

@media (min-width: 992px) {
  body.kv-redesign .kvx-hero--parent:not(.kvx-hero--banner-only) .kvx-hero--media .kvx-hero-slider,
  body.kv-redesign .kvx-hero--parent:not(.kvx-hero--banner-only) .kvx-hero-slider {
    min-height: 100%;
    height: 100%;
  }

  body.kv-redesign .kvx-hero--parent:not(.kvx-hero--banner-only) .kvx-hero-slide {
    min-height: 100%;
  }

  body.kv-redesign .kvx-hero--banner-only.kvx-hero--parent .kvx-hero-slider,
  body.kv-redesign .kvx-hero--banner-only.kvx-hero--parent .kvx-hero-slide {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
  }

  body.kv-redesign .kvx-hero--banner-only.kvx-hero--parent .kvx-hero-slide::before {
    content: none !important;
    display: none !important;
  }
}

body.kv-redesign .kvx-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 767px) {
  body.kv-redesign .kvx-hero--media .kvx-hero-slider__dots {
    right: .75rem;
    bottom: .65rem;
    padding: .32rem .4rem;
  }

  body.kv-redesign .kvx-hero--media .kvx-hero-slider__dots button {
    width: 7px;
    height: 7px;
  }

  body.kv-redesign .kvx-hero--media .kvx-hero-slider__dots button.is-active {
    width: 18px;
  }
}
