/* ✦ NEW — Cinematic Hero (Dark) */

.dx-hero {
  --dx-ov: .55;
  display: flex;
  align-items: center;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background: #0b0b0b;
}

/* min-height, not height: long titles and stacked phone buttons grow the hero instead of being cut off */
.dx-hero--full { min-height: 100vh; min-height: min(100svh, 1080px); }
.dx-hero--large { min-height: 82vh; min-height: max(82svh, 560px); }
.dx-hero--medium { min-height: 64vh; min-height: max(64svh, 460px); }

@media (max-width: 767.98px) {
  .dx-hero { min-height: 520px; }
  .dx-hero--full { min-height: 100svh; }
  .dx-hero--large { min-height: max(82svh, 520px); }
  .dx-hero--medium { min-height: 420px; }
}

/* Media */
.dx-hero__media,
.dx-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.dx-hero__media picture,
.dx-hero__media img,
.dx-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dx-hero__media > picture,
.dx-hero__media > video {
  position: absolute;
  inset: 0;
  display: block;
}

.dx-hero__video {
  opacity: 0;
  transition: opacity .9s ease;
}

.dx-hero__video.is-playing {
  opacity: 1;
}

.dx-hero__img {
  transform: scale(1.08);
  transition: transform 9s var(--dx-ease);
}

.dx-hero.is-in .dx-hero__img {
  transform: scale(1);
}

/* Overlays */
.dx-hero--ov-gradient .dx-hero__overlay {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, calc(var(--dx-ov) * .6)) 0%, rgba(0, 0, 0, 0) 35%),
    linear-gradient(0deg, rgba(0, 0, 0, calc(var(--dx-ov) + .25)) 0%, rgba(0, 0, 0, calc(var(--dx-ov) * .5)) 45%, rgba(0, 0, 0, calc(var(--dx-ov) * .3)) 100%);
}

.dx-hero--ov-dark .dx-hero__overlay {
  background: rgba(0, 0, 0, var(--dx-ov));
}

.dx-hero--ov-none .dx-hero__overlay {
  display: none;
}

/* Content */
.dx-hero__inner {
  position: relative;
  display: flex;
  height: 100%;
  padding-top: 80px;
  padding-bottom: 80px;
}

.dx-hero--center .dx-hero__inner { align-items: center; justify-content: center; text-align: center; }
.dx-hero--start .dx-hero__inner { align-items: center; justify-content: flex-start; text-align: start; }
.dx-hero--bottom .dx-hero__inner { align-items: flex-end; justify-content: flex-start; text-align: start; }

.dx-hero__content {
  max-width: 820px;
}

.dx-hero--center .dx-hero__content {
  margin: 0 auto;
}

.dx .dx-hero__title {
  margin: 18px 0 0;
  font-size: clamp(36px, 6vw, 76px);
  font-weight: 700;
  line-height: 1.12;
  color: var(--dx-text);
  text-wrap: balance;
}

.dx .dx-hero__sub {
  max-width: 560px;
  margin: 22px 0 0;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.85;
  color: rgba(255, 255, 255, .78);
  color: color-mix(in srgb, var(--dx-text) 78%, transparent);
  text-wrap: balance;
}

.dx-hero--center .dx-hero__sub {
  margin-inline: auto;
}

.dx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.dx-hero--center .dx-hero__actions {
  justify-content: center;
}

@media (max-width: 575.98px) {
  .dx-hero__actions .dx-btn {
    flex: 1 1 100%;
  }
}

/* Reveal — content stays visible if JS never runs (no .dx-js) */
.dx-hero.dx-js .dx-hero__reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s var(--dx-ease), transform 1s var(--dx-ease);
  transition-delay: calc(var(--d, 0) * 140ms + 250ms);
}

.dx-hero.dx-js.is-in .dx-hero__reveal {
  opacity: 1;
  transform: none;
}

.dx-hero__word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .08em;
}

.dx-hero__word > span {
  display: inline-block;
}

.dx-hero.dx-js .dx-hero__word > span {
  transform: translateY(105%);
  transition: transform 1.1s var(--dx-ease);
  transition-delay: calc(var(--i, 0) * 70ms + 300ms);
}

.dx-hero.dx-js.is-in .dx-hero__word > span {
  transform: none;
}

/* Scroll cue */
.dx .dx-hero__scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  width: 28px;
  height: 46px;
  margin-left: -14px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-color: color-mix(in srgb, var(--dx-text) 55%, transparent);
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
}

.dx-hero__scroll span {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 3px;
  height: 8px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--dx-text);
  animation: dxHeroScroll 1.8s var(--dx-ease) infinite;
}

@keyframes dxHeroScroll {
  0% { opacity: 0; transform: translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(16px); }
}