.why-dj-hero {
  --why-dj-hero-accent: #ffffff;
  --why-dj-hero-heading: rgba(255, 255, 255, 0.28);
  --why-dj-hero-copy: rgba(255, 255, 255, 0.75);
  --why-dj-hero-counter-shadow: none;
  --why-dj-hero-tag-divider: rgba(255, 255, 255, 0.3);
  --why-dj-hero-notch-r: 7px;
  --why-dj-hero-notch-color: #a5252a;
  width: 100%;
  clear: both;
  display: block;
  position: relative;
  isolation: isolate;
  color: #ffffff;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1.75rem, 3.5vw, 2.75rem);
  background:
    linear-gradient(180deg, #8b161a 0%, #a91d22 54%, #ff3b3b 100%);
  overflow: hidden;
}

/* Dramatic lighting photo overlay (color-burn) behind the hero content. */
.why-dj-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--why-dj-hero-bg-image, none);
  background-size: cover;
  /* Anchor to the top so the subject's head isn't cropped under the topbar. */
  background-position: center top;
  mix-blend-mode: color-burn;
  opacity: 0.38;
}


.why-dj-hero,
.why-dj-hero * {
  box-sizing: border-box;
}

.why-dj-hero .uk-container {
  width: 100% !important;
  max-width: 1600px !important;
  padding-left: clamp(1rem, 5vw, 80px) !important;
  padding-right: clamp(1rem, 5vw, 80px) !important;
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.why-dj-hero .why-dj-hero__layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 800px) 1fr;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
}

.why-dj-hero .why-dj-hero__content {
  position: relative;
  z-index: 3;
  text-align: center;
}

/* Center every element within the hero content column. */
.why-dj-hero .why-dj-hero__content .why-dj-hero__countdown.uk-grid {
  justify-content: center;
}
.why-dj-hero .why-dj-hero__content .why-dj-hero__actions {
  justify-content: center;
}
.why-dj-hero .why-dj-hero__content .why-dj-hero__tags {
  justify-content: center;
}

.why-dj-hero .why-dj-hero__media {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  overflow: hidden;
}

.why-dj-hero .why-dj-hero__media-image {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  object-fit: contain;
  object-position: top right;
}

.why-dj-hero .why-dj-hero__logo-wrap {
  display: inline-flex;
  justify-content: flex-start;
  margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
}

.why-dj-hero .why-dj-hero__logo {
  display: block;
  width: min(180px, 26vw);
  height: auto;
}

.why-dj-hero .why-dj-hero__heading {
  margin: 0;
  max-width: 100%;
  color: var(--why-dj-hero-heading);
  font-family: "Poppins", sans-serif;
  /* Keep explicit priority to win against theme headline defaults. */
  font-size: clamp(1.6rem, 3.1vw, 2.5rem) !important;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.why-dj-hero .why-dj-hero__heading-accent {
  color: var(--why-dj-hero-accent);
}

.why-dj-hero .why-dj-hero__description {
  margin-top: 0.9rem;
  max-width: none;
  color: var(--why-dj-hero-copy);
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  line-height: 1.45;
  opacity: 0.85;
}

/* uk-padding-small-top isn't a stock UIkit utility — define it (UIkit "small"
   spacing = 15px), scoped to the hero, so the description gets a small top pad. */
.why-dj-hero .uk-padding-small-top {
  padding-top: 15px;
}

.why-dj-hero .why-dj-hero__description p {
  margin: 0;
}

.why-dj-hero .why-dj-hero__description p + p {
  margin-top: 0.68rem;
}

.why-dj-hero .why-dj-hero__countdown-wrap {
  margin-top: clamp(1.1rem, 2.15vw, 1.58rem) !important;
}

/* Tight, left-aligned unit group (matches the design's Frame 38) rather than a
   full-width space-between spread, so the vertical dividers land cleanly between
   adjacent units. */
.why-dj-hero .why-dj-hero__countdown.uk-grid {
  display: inline-flex !important;
  margin: 0 !important;
  width: auto;
  /* Keep all four units on one row — they scale down (below) rather than wrapping. */
  flex-wrap: nowrap !important;
  justify-content: flex-start;
  align-items: flex-start;
}

.why-dj-hero .why-dj-hero__countdown.uk-grid > div {
  position: relative;
  margin-top: 0 !important;
  flex: 0 1 auto !important;
  min-width: 0;
  display: flex;
  justify-content: center;
  /* Gutter shrinks hard on narrow screens so four units always fit one row. */
  padding: 0 clamp(7px, 2.1vw, 34px) !important;
}

.why-dj-hero .why-dj-hero__countdown.uk-grid > div:first-child {
  padding-left: 0 !important;
}

/* Thin vertical separator centered between adjacent units. */
.why-dj-hero .why-dj-hero__countdown.uk-grid > div + div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: clamp(46px, 8vw, 74px);
  background: rgba(255, 255, 255, 0.22);
}

.why-dj-hero .why-dj-hero__countdown-item {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.why-dj-hero .why-dj-hero__countdown-value-shell {
  position: relative;
  display: flex;
  width: clamp(44px, 4.6vw, 66px);
  aspect-ratio: 1 / 1;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 7px;
  border: none;
  /* Two-tone ticket: lighter top (#b32628) over darker bottom (#d02e30) with a
     white hairline split across the middle (inset 4px, matching the design). */
  background:
    linear-gradient(to right, transparent 4px, rgba(255, 255, 255, 0.3) 4px, rgba(255, 255, 255, 0.3) calc(100% - 4px), transparent calc(100% - 4px))
      center / 100% 1px no-repeat,
    linear-gradient(to bottom, #b32628 0, #b32628 50%, #d02e30 50%, #d02e30 100%);
  box-shadow: var(--why-dj-hero-counter-shadow);
  /* True cutout notches: mask two semicircles out of the left/right edges so the
     red hero background shows through (a ticket-stub perforation), instead of
     solid dots painted on top. */
  --why-dj-hero-notch-r: 6px;
  -webkit-mask:
    radial-gradient(circle var(--why-dj-hero-notch-r) at left center, transparent 98%, #000 100%),
    radial-gradient(circle var(--why-dj-hero-notch-r) at right center, transparent 98%, #000 100%);
  mask:
    radial-gradient(circle var(--why-dj-hero-notch-r) at left center, transparent 98%, #000 100%),
    radial-gradient(circle var(--why-dj-hero-notch-r) at right center, transparent 98%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.why-dj-hero .why-dj-hero__countdown-value-shell--custom {
  background:
    var(--why-dj-hero-counter-skin, none) center / cover no-repeat;
  -webkit-mask: none;
  mask: none;
}

.why-dj-hero .why-dj-hero__countdown-value {
  position: relative;
  z-index: 2;
  display: block;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.4rem, 2vw, 1.83rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
}

.why-dj-hero .why-dj-hero__countdown-label {
  display: block;
  margin-top: 0.5rem;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.why-dj-hero .why-dj-hero__actions {
  margin-top: clamp(1rem, 1.85vw, 1.35rem) !important;
  display: flex;
}

.why-dj-hero .why-dj-hero__button.uk-button {
  display: flex;
  width: 100%;
  flex: 1 0 0;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 22px 30px;
  border: 0;
  border-radius: 100px;
  background: #ffffff !important;
  color: #000000 !important;
  text-align: center;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.1;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 170ms ease, box-shadow 170ms ease, filter 170ms ease;
}

.why-dj-hero .why-dj-hero__button.uk-button:hover,
.why-dj-hero .why-dj-hero__button.uk-button:focus-visible {
  color: #000000;
  text-decoration: none;
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(169, 29, 34, 0.34);
}

.why-dj-hero .why-dj-hero__button.uk-button:focus-visible {
  outline: 2px solid rgba(169, 29, 34, 0.4);
  outline-offset: 2px;
}

.why-dj-hero .why-dj-hero__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem;
  margin: clamp(0.92rem, 1.85vw, 1.3rem) 0 0 !important;
  list-style: none;
}

.why-dj-hero .why-dj-hero__tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.44rem;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.why-dj-hero .why-dj-hero__tag + .why-dj-hero__tag {
  padding-left: 0.75rem;
}

.why-dj-hero .why-dj-hero__tag + .why-dj-hero__tag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 0.86rem;
  background: var(--why-dj-hero-tag-divider);
  transform: translateY(-50%);
}

.why-dj-hero .why-dj-hero__tag-icon-wrap {
  display: inline-flex;
  flex: 0 0 auto; /* never let the flex row squish the icon */
  width: 21px;
  min-width: 21px;
  height: 21px;
  align-items: center;
  justify-content: center;
}

/* Inline fallback SVGs (person / clock / ticket) fill the fixed box without distortion. */
.why-dj-hero .why-dj-hero__tag-icon-wrap svg {
  display: block;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

.why-dj-hero .why-dj-hero__tag-icon-image {
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.why-dj-hero .why-dj-hero__tag-text {
  color: #ffffff;
}


/* Below 1200px the 2-column hero is too cramped — the reel clips and the content is boxed into the
   narrow left column. Stack it (content full-width on top, single reel centered below) until 1200px. */
@media (max-width: 1199px) {
  .why-dj-hero {
    --why-dj-hero-notch-r: 5px;
    padding-top: 2rem;
    padding-bottom: 2.7rem;
  }

  .why-dj-hero .why-dj-hero__layout {
    grid-template-columns: 1fr;
  }

  .why-dj-hero .why-dj-hero__media {
    display: none;
  }

  /* Full-width, centered content in the stacked layout (no artificial narrow constraint). */
  .why-dj-hero .why-dj-hero__heading {
    max-width: none;
  }

  .why-dj-hero .why-dj-hero__description {
    font-size: 0.97rem;
    max-width: none;
  }

  .why-dj-hero .why-dj-hero__countdown-value-shell {
    min-height: 50px;
    padding: 0.36rem 0.62rem;
  }

  .why-dj-hero .why-dj-hero__countdown-value {
    font-size: clamp(1.48rem, 3vw, 1.86rem);
  }

  .why-dj-hero .why-dj-hero__countdown-label {
    font-size: 0.78rem;
  }

  .why-dj-hero .why-dj-hero__tag {
    font-size: 0.84rem;
  }
}

@media (max-width: 767px) {
  .why-dj-hero .why-dj-hero__heading {
    max-width: 100%;
  }

  .why-dj-hero .why-dj-hero__description {
    max-width: 100%;
  }
}

@media (max-width: 639px) {
  .why-dj-hero {
    --why-dj-hero-notch-r: 4px;
    padding-top: 1.9rem;
    padding-bottom: 2.3rem;
  }

  .why-dj-hero .uk-container {
    width: min(100% - 1.35rem, 640px);
  }

  .why-dj-hero .why-dj-hero__countdown {
    gap: 0.4rem;
  }

  .why-dj-hero .why-dj-hero__countdown-value-shell {
    min-height: 46px;
  }

  .why-dj-hero .why-dj-hero__countdown-value {
    font-size: 1.32rem;
  }

  .why-dj-hero .why-dj-hero__countdown-label {
    margin-top: 0.32rem;
    font-size: 0.71rem;
  }

  .why-dj-hero .why-dj-hero__button.uk-button {
    width: 100%;
    min-height: 52px;
    font-size: 0.97rem;
  }

  .why-dj-hero .why-dj-hero__tags {
    gap: 0.5rem;
  }

  .why-dj-hero .why-dj-hero__tag + .why-dj-hero__tag {
    padding-left: 0;
  }

  .why-dj-hero .why-dj-hero__tag + .why-dj-hero__tag::before {
    display: none;
  }
}

@media (max-width: 479px) {
  .why-dj-hero {
    --why-dj-hero-notch-r: 3px;
  }

  .why-dj-hero .why-dj-hero__countdown {
    gap: 0.25rem;
  }

  .why-dj-hero .why-dj-hero__countdown-value-shell {
    min-height: 42px;
  }

  .why-dj-hero .why-dj-hero__countdown-value {
    font-size: clamp(1.05rem, 6vw, 1.25rem);
  }

  .why-dj-hero .why-dj-hero__countdown-label {
    font-size: 0.64rem;
  }
}

/* ---- Hero IG-cards carousel (reuses homepage community reels) ------------- */
.why-dj-hero .why-dj-hero__reels {
  position: relative;
  z-index: 2;
  min-width: 0;
  /* Top-align the reels column so the nav arrows pin to the top-right of the hero,
     matching the design (content column stays vertically centered via the layout). */
  align-self: start;
  /* Clip the sliding track horizontally; overflow-y stays visible (computed auto) so the
     cards' drop-shadows aren't cut off top/bottom. */
  overflow-x: hidden;
  overflow-y: visible;
}

.why-dj-hero .why-dj-hero__reels-track {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 10px 0;
  /* Positioned via translateX (see why-dj-hero.js); transition it in lockstep with the
     cards' width transition so the active card glides into place without overshoot. */
  transform: translateX(0);
  transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.why-dj-hero .why-dj-hero__reel {
  flex: 0 0 auto;
  width: 176px;
}

.why-dj-hero .why-dj-hero__reel--featured {
  width: 240px;
}

/* Final "Share Your Story" CTA slide — same card footprint as the reels (inherits the 9/16
   media shape + radius) so it peeks in naturally, but a branded red panel instead of a video. */
.why-dj-hero .why-dj-hero__reel--cta {
  display: block;
  text-decoration: none;
}
.why-dj-hero .why-dj-hero__reel-media.why-dj-hero__reel-cta-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.6vw, 14px);
  padding: clamp(12px, 2vw, 20px);
  text-align: center;
  /* Frosted glass over the hero — translucent, blurred, with a soft light rim. */
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.why-dj-hero .why-dj-hero__reel-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(42px, 4.4vw, 54px);
  height: clamp(42px, 4.4vw, 54px);
  border-radius: 50%;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border: 1.5px solid rgba(255, 255, 255, 0.65);
}
.why-dj-hero .why-dj-hero__reel-cta-title {
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.25vw, 1.12rem);
  line-height: 1.18;
}
.why-dj-hero .why-dj-hero__reel-cta-text {
  max-width: 16ch;
  color: rgba(255, 255, 255, 0.82);
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: clamp(0.74rem, 0.95vw, 0.85rem);
  line-height: 1.32;
}
.why-dj-hero .why-dj-hero__reel-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, 3.4vw, 40px);
  height: clamp(32px, 3.4vw, 40px);
  margin-top: 2px;
  border-radius: 50%;
  background: #ffffff;
  color: #a91d22;
  transition: transform 170ms ease;
}
.why-dj-hero .why-dj-hero__reel--cta:hover .why-dj-hero__reel-cta-arrow,
.why-dj-hero .why-dj-hero__reel--cta:focus-visible .why-dj-hero__reel-cta-arrow {
  transform: translateX(3px);
}

.why-dj-hero .why-dj-hero__reel-media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: #2a0d0e center / cover no-repeat;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.why-dj-hero .why-dj-hero__reel--featured .why-dj-hero__reel-media {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
}

.why-dj-hero .why-dj-hero__reel-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, 0.28) 100%);
}

.why-dj-hero .why-dj-hero__reel-account {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Silent muted preview clip that fills the card (poster frame until it plays). Sits under
   the vignette + handle + play button; promoted to .why-dj-hero__reel-video on full play. */
.why-dj-hero .why-dj-hero__reel-preview {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #2a0d0e center / cover no-repeat;
}

.why-dj-hero .why-dj-hero__reel-handle {
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.why-dj-hero .why-dj-hero__reel-play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-dj-hero .why-dj-hero__reel-play svg {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

@media (max-width: 1199px) {
  /* Stacked layout: a single centered slide, nav arrows flanking it left and right. Non-active cards
     are hidden and the track's transform is neutralized (no peek/slide), so exactly one card
     shows, centered. The JS still drives is-active + the muted preview. */
  .why-dj-hero .why-dj-hero__reels {
    display: block;
    position: relative;
    width: min(72vw, 288px);
    margin-inline: auto;
    margin-top: clamp(1.25rem, 5vw, 2rem);
    overflow: visible;
  }
  .why-dj-hero .why-dj-hero__reels-track {
    transform: none !important;
    justify-content: center;
    overflow: visible;
    height: auto;
    padding: 0;
    gap: 0;
  }
  .why-dj-hero .why-dj-hero__reel {
    display: none;
    width: 100% !important;
  }
  .why-dj-hero .why-dj-hero__reel.is-active {
    display: block;
  }
  /* Arrows out of the top-right nav flow and onto the sides of the active slide. */
  .why-dj-hero .why-dj-hero__reels-nav {
    position: static;
    display: block;
  }
  /* Sit the arrows fully OUTSIDE the card (in the side margins), flanking it — not overlapping. */
  .why-dj-hero .why-dj-hero__reels-arrow {
    position: absolute;
    top: 50%;
    z-index: 6;
  }
  .why-dj-hero .why-dj-hero__reels-arrow[data-why-dj-reels-prev] {
    left: -6px;
    transform: translate(-100%, -50%);
  }
  .why-dj-hero .why-dj-hero__reels-arrow[data-why-dj-reels-next] {
    right: -6px;
    transform: translate(100%, -50%);
  }
  .why-dj-hero .why-dj-hero__reels-dots {
    margin-top: 14px;
  }
}

/* ---- Hero reels carousel controls (arrows, dots, inline video) ----------- */
.why-dj-hero .why-dj-hero__reels {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.why-dj-hero .why-dj-hero__reels-nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  order: -1;
}

.why-dj-hero .why-dj-hero__reels-arrow {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  cursor: pointer;
  transition: background 160ms ease, opacity 160ms ease;
}

.why-dj-hero .why-dj-hero__reels-arrow:hover {
  background: rgba(255, 255, 255, 0.3);
}

.why-dj-hero .why-dj-hero__reels-arrow[data-why-dj-reels-next] {
  background: #ffffff;
  color: #111111;
}

.why-dj-hero .why-dj-hero__reels-arrow[disabled] {
  opacity: 0.4;
  cursor: default;
}

.why-dj-hero .why-dj-hero__reels-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.why-dj-hero .why-dj-hero__reels-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: width 170ms ease, background 170ms ease;
}

.why-dj-hero .why-dj-hero__reels-dot.is-active {
  width: 26px;
  background: #ffffff;
}

.why-dj-hero .why-dj-hero__reel-play {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.why-dj-hero .why-dj-hero__reel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 3;
  background: #000000;
}

.why-dj-hero .why-dj-hero__reel-media.is-playing .why-dj-hero__reel-play,
.why-dj-hero .why-dj-hero__reel-media.is-playing .why-dj-hero__reel-account,
.why-dj-hero .why-dj-hero__reel-media.is-playing::after {
  display: none;
}

/* Desktop control placement: the arrows sit at the TOP of the carousel, just to the
   right of the tall active card — over the empty space above the shorter peeking
   cards — matching the design (nav at the reels' top edge, ~half-way across, not a
   full-width row pinned to the far-right edge). Absolutely positioned so it overlays
   that gap instead of adding a row above the cards. Dots stay in the flow below.
   Scoped to desktop; below keeps its own flanking-arrow layout (see max-width:1199). */
@media (min-width: 1200px) {
  .why-dj-hero .why-dj-hero__reels-nav {
    position: absolute;
    top: 18px;
    left: 288px;
    right: auto;
    justify-content: flex-start;
    order: 0;
    z-index: 5;
  }
}

/* Centered white campaign logo at the top of the hero. */
.why-dj-hero .why-dj-hero__logo-wrap {
  position: absolute;
  top: clamp(1.4rem, 3vw, 2.4rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  margin: 0;
  justify-content: center;
}
.why-dj-hero .why-dj-hero__logo {
  /* Match the design's DJ campaign logo footprint (~129×56); the prior 150px ran oversized. */
  width: clamp(108px, 9.5vw, 132px);
}
/* Give the hero content room below the centered logo. */
.why-dj-hero .why-dj-hero__layout {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* Logo is a centered flow row at the top of the hero (why-dj-hero__brand). */
.why-dj-hero .why-dj-hero__brand {
  position: relative;
  z-index: 6;
  display: flex;
  justify-content: center;
  margin: 0 0 clamp(0.9rem, 1.8vw, 1.5rem);
}
.why-dj-hero .why-dj-hero__brand .why-dj-hero__logo {
  display: block;
  width: clamp(108px, 9.5vw, 132px);
  height: auto;
}
.why-dj-hero .why-dj-hero__layout {
  margin-top: 0;
}

/* Force the logo to render solid white on the red hero (source asset may be dark). */
.why-dj-hero .why-dj-hero__brand .why-dj-hero__logo {
  filter: brightness(0) invert(1);
}

/* Focus carousel: the ACTIVE slide grows; others shrink. Matches the track's transform
   transition (duration + easing) so the grow and the slide move as one. */
.why-dj-hero .why-dj-hero__reel {
  transition: width 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.why-dj-hero .why-dj-hero__reel.is-active {
  width: 240px;
}
.why-dj-hero .why-dj-hero__reel.is-active .why-dj-hero__reel-media {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

/* Heading: outlined base words ("Something ... Is Coming") + solid white accent. */
.why-dj-hero .why-dj-hero__heading {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.6);
  text-stroke: 1px rgba(255, 255, 255, 0.6);
}
.why-dj-hero .why-dj-hero__heading .why-dj-hero__heading-accent {
  color: #ffffff;
  -webkit-text-stroke: 0;
  text-stroke: 0;
}

/* Pin the track to the active card's full height (240px * 16/9 ≈ 427px) plus 26px of
   shadow padding top+bottom. The card HEIGHT animates with its width (aspect-ratio), and
   mid-transition the tallest card dips then rebounds — a fixed height keeps the row from
   bouncing, so the hero never jumps vertically when the active slide changes. */
.why-dj-hero .why-dj-hero__reels-track {
  padding: 26px 0;
  box-sizing: border-box;
  height: 480px;
}

/* Countdown sits at the top of the content (above the headline), per design. */
.why-dj-hero .why-dj-hero__countdown-wrap--top {
  margin-top: 0 !important;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.why-dj-hero .why-dj-hero__countdown-wrap--top + * .why-dj-hero__heading,
.why-dj-hero .why-dj-hero__content > .why-dj-hero__heading {
  margin-top: 0;
}

/* Hero entrance — the hero is above the fold (no scroll observer), so its parts fade + rise
   in once on load, lightly staggered: logo, then content, then reels. `both` keeps the end
   state. Gated on motion preference. The reels' own translateX carousel is on the inner
   track, so animating the wrapper's transform here does not disturb it. */
@media (prefers-reduced-motion: no-preference) {
  /* Brand now lives inside .why-dj-hero__content, so it animates with the content
     block — no separate entrance needed (avoids a double translate on the logo). */
  .why-dj-hero .why-dj-hero__content,
  .why-dj-hero .why-dj-hero__reels {
    animation: why-dj-hero-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .why-dj-hero .why-dj-hero__content {
    animation-delay: 0.09s;
  }
  .why-dj-hero .why-dj-hero__reels {
    animation-delay: 0.18s;
  }
}

@keyframes why-dj-hero-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}