@import url("./services-drawer-parity.css");

@font-face {
      font-family: "Elegant Typewriter Light";
      src: url("./assets/elegant-typewriter-light.ttf") format("truetype");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

/* Current live Wedding-page parity guards. These page-scoped rules restore
   the intended artwork and overlays when newer shared styles load later. */
body.dj-piano-page .dj-piano-parallax-band {
  background:
    linear-gradient(180deg, rgba(8, 10, 10, 0.2), rgba(8, 10, 10, 0.34)),
    var(--dj-piano-parallax-image, none) center center / cover no-repeat !important;
}

@media (min-width: 721px) {
  body.dj-piano-page .reasons-section {
    background:
      linear-gradient(180deg, rgba(10, 10, 11, 0.58), rgba(10, 10, 11, 0.9)),
      #121212 !important;
  }
}

@media (max-width: 720px) {
  body.dj-piano-page .reasons-section {
    background:
      linear-gradient(180deg, rgba(7, 12, 12, 0.82), rgba(7, 12, 12, 0.82)),
      var(--reasons-bg-image, none) center center / cover no-repeat,
      #0b0b0c !important;
  }
}

body.dj-piano-page .music-duo-grid.music-mashup-grid {
  background:
    linear-gradient(
      180deg,
      rgba(1, 10, 9, 0.98) 0%,
      rgba(2, 14, 13, 0.94) 22%,
      rgba(1, 8, 7, 0.86) 52%,
      rgba(0, 3, 3, 0.96) 100%
    ),
    radial-gradient(circle at 14% 34%, rgba(35, 177, 165, 0.28) 0%, rgba(35, 177, 165, 0.18) 14%, rgba(35, 177, 165, 0.08) 24%, rgba(35, 177, 165, 0) 38%),
    radial-gradient(circle at 78% 72%, rgba(35, 177, 165, 0.26) 0%, rgba(35, 177, 165, 0.16) 15%, rgba(35, 177, 165, 0.06) 24%, rgba(35, 177, 165, 0) 37%),
    radial-gradient(circle at 50% 50%, rgba(16, 86, 80, 0.18) 0%, rgba(16, 86, 80, 0.08) 22%, rgba(16, 86, 80, 0) 44%),
    linear-gradient(135deg, rgba(9, 43, 40, 0.34) 0%, rgba(2, 10, 9, 0) 34%, rgba(12, 52, 48, 0.18) 100%) !important;
}

body.dj-piano-page .lux-event-drawer {
  z-index: 80 !important;
}

body.dj-piano-page .lux-event-drawer .lux-event-drawer__panel {
  z-index: auto !important;
}

@media (max-width: 1023px) {
  html body.dj-piano-page.dj-piano-page
    .lux-event-drawer[data-event-types-drawer].lux-event-drawer
    .lux-event-drawer__trigger {
    border: 0 !important;
    background: center / 100% 100% no-repeat url("./assets/slide-out-mobile-menu.svg") !important;
  }
}

@media (min-width: 1024px) {
  html body.dj-piano-page.dj-piano-page
    .lux-event-drawer[data-event-types-drawer].lux-event-drawer
    .lux-event-drawer__trigger {
    border: 0 !important;
    background: center / 100% 100% no-repeat url("https://charlestonweddingdjs.com/wp-content/uploads/2026/05/drawer-tabe-desktop.png") !important;
  }
}

body.dj-piano-page
  .music-mashup-grid
  .dcpvs--shaped.dcpvs-is-offscreen
  .dcpvs-play
  .stroke-dotted {
  animation-play-state: paused;
}

    body.dj-piano-page {
      background:
        radial-gradient(circle at 20% 0%, rgba(22, 168, 159, 0.1), transparent 22%),
        #090b0b;
    }

    .msx-button.approved-button {
      --approved-button-main-size: clamp(1.06rem, 1.45vw, 1.42rem);
      --approved-button-script-size: clamp(0.96rem, 1.32vw, 1.28rem);
      --approved-button-gap: clamp(6px, 0.62vw, 10px);
      --approved-button-main-y: 1px;
      --approved-button-script-y: 1px;
      --approved-button-row-y: 0px;
      min-height: 56px;
      padding: 10px 18px;
    }

    .msx-button.approved-button .msx-button__block {
      display: inline-flex !important;
      align-items: flex-end !important;
      justify-content: center !important;
      flex-wrap: nowrap !important;
      gap: var(--approved-button-gap) !important;
      line-height: 1 !important;
      transform: translateY(var(--approved-button-row-y)) !important;
    }

    .msx-button.approved-button .msx-button__main,
    .msx-button.approved-button .msx-button__script,
    .msx-button.approved-button .msx-button__script--dj-piano {
      display: inline-flex !important;
      align-items: flex-end !important;
      justify-content: center !important;
      margin: 0 !important;
      padding: 0 !important;
      white-space: nowrap !important;
    }

    .msx-button.approved-button .msx-button__main {
      font-size: var(--approved-button-main-size) !important;
      line-height: 0.78 !important;
      transform: translateY(var(--approved-button-main-y)) !important;
    }

    .msx-button.approved-button .msx-button__script,
    .msx-button.approved-button .msx-button__script--dj-piano {
      font-size: var(--approved-button-script-size) !important;
      line-height: 0.64 !important;
      transform: translateY(var(--approved-button-script-y)) !important;
    }

    .msx-button.approved-button .msx-button__script--dj-piano {
      font-size: calc(var(--approved-button-script-size) * 0.86) !important;
    }

    /* Keep these two Wedding-page callouts on the live-site Heatwood metrics.
       The shared Safari guard loads later and otherwise expands their line boxes. */
    html body.dj-piano-page.dj-piano-page
      .dj-video-grid__cta
      .msx-button.approved-button
      .msx-button__script {
      line-height: 0.64 !important;
      padding: 0 !important;
    }

    html body.dj-piano-page.dj-piano-page
      .dje-intro[data-dje-intro]
      .dje-intro__wordmark[data-wordmark-word] {
      line-height: 0.78 !important;
      margin: -0.14em 0 !important;
      padding: 0.14em 0 !important;
    }

    html body.dj-piano-page.dj-piano-page
      .dje-intro[data-dje-intro]
      .dje-intro__wordmark[data-wordmark-word]
      .dje-intro__wordmark-line--word {
      line-height: 0.78 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }

    html body.dj-piano-page.dj-piano-page
      .dje-intro[data-dje-intro]
      .dje-intro__wordmark[data-wordmark-word]
      .dje-intro__wordmark-line--underline {
      line-height: 0.32 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }

    html body.dj-piano-page.dj-piano-page
      .dje-intro[data-dje-intro]
      .dje-intro__wordmark[data-wordmark-word]
      .dje-intro__wordmark-line--word
      .dje-intro__wordmark-char {
      line-height: 0.78 !important;
      padding: 0 !important;
    }

    html body.dj-piano-page.dj-piano-page
      .dje-intro[data-dje-intro]
      .dje-intro__wordmark[data-wordmark-word]
      .dje-intro__wordmark-line--underline
      .dje-intro__wordmark-char {
      line-height: 0.32 !important;
      padding: 0 !important;
    }

    @media (max-width: 743px) {
      .msx-button.approved-button {
        --msx-button-border: 3px;
        --approved-button-main-size: 0.92rem;
        --approved-button-script-size: 0.76rem;
        --approved-button-gap: 4px;
        --approved-button-main-y: 1px;
        --approved-button-script-y: 1px;
        --approved-button-row-y: 0px;
        min-height: 38px !important;
        padding: 4px 11px 3px !important;
      }
    }

    .dj-piano-hero,
    .service-overview,
    .dj-piano-parallax-band,
    .reasons-section {
      position: relative;
      z-index: 4;
    }

    .dj-piano-hero {
      position: relative;
      min-height: clamp(660px, 88vh, 980px);
      overflow: visible;
      isolation: isolate;
      background: #090b0b;
    }

    .dj-piano-hero::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: 100vw;
      height: clamp(210px, 22vw, 320px);
      transform: translateX(-50%);
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.98) 0%,
        rgba(0, 0, 0, 0.96) 24%,
        rgba(0, 0, 0, 0.88) 46%,
        rgba(0, 0, 0, 0.52) 70%,
        rgba(0, 0, 0, 0) 100%
      );
      z-index: 2;
      pointer-events: none;
    }

    .dj-piano-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 78% 18%, rgba(22, 168, 159, 0.2), transparent 28%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.56) 72%, rgba(0, 0, 0, 0.78) 100%);
      z-index: 1;
      pointer-events: none;
    }

    .dj-piano-hero__media,
    .dj-piano-hero__slide {
      position: absolute;
      inset: 0;
    }

    .dj-piano-hero__media {
      z-index: 0;
    }

    .dj-piano-hero__slide {
      background-position: center calc(22% + 115px);
      background-size: cover;
      background-repeat: no-repeat;
      opacity: 0;
      transform: scale(1.08) translateY(-2%);
      will-change: transform;
      transition: opacity 1s ease;
    }

    .dj-piano-hero__slide--one {
      background-image: url("https://charlestonweddingdjs.com/wp-content/uploads/2019/03/MichaelMoss425-1.jpg");
    }

    .dj-piano-hero__slide--two {
      background-image: none;
    }

    .dj-piano-hero__slide.is-active {
      opacity: 1;
      animation: djPianoHeroKenBurns 12s ease-out forwards;
    }

    .dj-piano-hero__topbar,
    .dj-piano-hero__content {
      position: relative;
      z-index: 3;
    }

    .dj-piano-hero__topbar {
      position: absolute;
      inset: 0 0 auto;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      z-index: 6;
      pointer-events: auto;
    }

    .dj-piano-hero__content {
      min-height: inherit;
      display: flex;
      align-items: flex-end;
      padding-top: clamp(132px, 16vh, 200px);
      padding-bottom: clamp(52px, 8vh, 92px);
    }

    .dj-piano-hero__inner {
      width: min(var(--container-wide), calc(100vw - 2rem));
      margin: 0 auto;
      padding-left: clamp(0px, 1vw, 4px);
    }

    .dj-piano-hero__eyebrow {
      margin: 0 0 1rem;
      color: var(--accent-teal);
      font-family: "Heatwood", "Yellowtail", cursive;
      font-size: clamp(0.725rem, 1.2vw, 1.175rem);
      letter-spacing: 0.01em;
      line-height: 0.9;
      text-transform: none;
      text-shadow:
        0 8px 18px rgba(0, 0, 0, 0.28),
        0 0 16px rgba(46, 194, 188, 0.16);
    }

    .dj-piano-hero__title {
      max-width: none;
      margin: 0;
      font-family: "Uniqueen Bold", "Montserrat", sans-serif;
      font-weight: 700;
      font-size: clamp(2.6rem, 4.8vw, 5.45rem);
      line-height: 0.9;
      letter-spacing: -0.02em;
      text-transform: uppercase;
      color: #f7f3eb;
      text-shadow:
        0 8px 22px rgba(0, 0, 0, 0.42),
        0 2px 8px rgba(0, 0, 0, 0.22);
    }

    .dj-piano-hero__tag {
      max-width: none;
      margin: 0.9rem 0 0;
      font-family: "Oswald SemiBold", "Oswald", "Montserrat", sans-serif;
      font-size: clamp(1.18rem, 2.05vw, 2rem);
      line-height: 1;
      letter-spacing: 0.04em;
      white-space: nowrap;
      color: #2ec2bc;
      text-shadow:
        0 8px 18px rgba(0, 0, 0, 0.28),
        0 0 16px rgba(46, 194, 188, 0.16);
      text-transform: uppercase;
    }

    .dj-piano-hero__mobile-pill {
      display: none;
    }

    .dj-piano-hero__wave-toggle {
      display: inline-flex;
      align-items: center;
      gap: 0.72rem;
      margin-top: 1.05rem;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      color: #f7f3eb;
      cursor: pointer;
      transition:
        transform 280ms cubic-bezier(.22, 1, .36, 1),
        filter 240ms ease;
    }

    .dj-piano-hero__wave-toggle:hover,
    .dj-piano-hero__wave-toggle:focus-visible {
      transform: translateY(-2px);
      filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.22));
      outline: none;
    }

    .dj-piano-hero__wave-toggle-bars {
      display: inline-flex;
      align-items: flex-end;
      gap: 0.22rem;
      width: 1.9rem;
      height: 1.05rem;
    }

    .dj-piano-hero__wave-toggle-bars span {
      width: 0.2rem;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(185, 255, 244, 0.98), rgba(46, 194, 188, 0.48));
      box-shadow: 0 0 14px rgba(46, 194, 188, 0.18);
      transform-origin: center bottom;
      animation: djPianoWaveform 1.55s ease-in-out infinite;
    }

    .dj-piano-hero__wave-toggle-bars span:nth-child(1) {
      height: 38%;
      animation-delay: -0.22s;
    }

    .dj-piano-hero__wave-toggle-bars span:nth-child(2) {
      height: 92%;
      animation-delay: -0.48s;
    }

    .dj-piano-hero__wave-toggle-bars span:nth-child(3) {
      height: 58%;
      animation-delay: -0.14s;
    }

    .dj-piano-hero__wave-toggle-bars span:nth-child(4) {
      height: 100%;
      animation-delay: -0.62s;
    }

    .dj-piano-hero__wave-toggle-bars span:nth-child(5) {
      height: 46%;
      animation-delay: -0.3s;
    }

    .dj-piano-hero__wave-toggle-icon {
      position: relative;
      flex: 0 0 auto;
      width: 2.2rem;
      height: 2.2rem;
      border-radius: 999px;
      border: 1px solid rgba(46, 194, 188, 0.42);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)),
        rgba(7, 10, 10, 0.48);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 18px rgba(46, 194, 188, 0.12);
      transition:
        border-color 240ms ease,
        background 240ms ease,
        box-shadow 280ms ease;
    }

    .dj-piano-hero__wave-toggle-icon::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0.48rem;
      height: 0.48rem;
      border-right: 2px solid #f7f3eb;
      border-bottom: 2px solid #f7f3eb;
      transform: translate(-50%, -62%) rotate(45deg);
      transition: transform 260ms ease;
    }

    .dj-piano-hero__wave-toggle:hover .dj-piano-hero__wave-toggle-icon,
    .dj-piano-hero__wave-toggle:focus-visible .dj-piano-hero__wave-toggle-icon,
    .dj-piano-hero.is-wave-ready.is-wave-open .dj-piano-hero__wave-toggle-icon {
      border-color: rgba(46, 194, 188, 0.72);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
        rgba(7, 10, 10, 0.68);
      box-shadow:
        0 0 0 6px rgba(46, 194, 188, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 22px rgba(46, 194, 188, 0.2);
    }

    .dj-piano-hero__snippet {
      max-width: 56rem;
      margin-top: 1.3rem;
    }

    .dj-piano-hero.is-wave-ready .dj-piano-hero__snippet {
      max-width: min(40rem, calc(100vw - 2rem));
      margin-top: 0.82rem;
      padding: 0 1.1rem 0 1.22rem;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      border: 1px solid transparent;
      border-radius: 1.35rem;
      background: rgba(0, 0, 0, 0);
      box-shadow: none;
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
      clip-path: inset(0 0 100% 0 round 1.35rem);
      transform: translateY(-12px) scale(0.985);
      transform-origin: top left;
      pointer-events: none;
      transition:
        max-height 620ms cubic-bezier(.22, 1, .36, 1),
        padding 420ms ease,
        opacity 300ms ease,
        border-color 260ms ease,
        background 320ms ease,
        box-shadow 320ms ease,
        clip-path 620ms cubic-bezier(.22, 1, .36, 1),
        transform 620ms cubic-bezier(.22, 1, .36, 1),
        backdrop-filter 320ms ease;
    }

    .dj-piano-hero.is-wave-ready.is-wave-open .dj-piano-hero__snippet {
      padding: 1rem 1.1rem 1rem 1.22rem;
      max-height: 15rem;
      opacity: 1;
      border-color: rgba(46, 194, 188, 0.26);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
        rgba(7, 10, 10, 0.66);
      box-shadow:
        0 20px 44px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      clip-path: inset(0 0 0 0 round 1.35rem);
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    .dj-piano-hero.is-wave-ready.is-wave-open .dj-piano-hero__wave-toggle-icon::before {
      transform: translate(-50%, -38%) rotate(225deg);
    }

    .dj-piano-hero__snippet p {
      margin: 0;
      color: rgba(247, 243, 235, 0.94);
      font-size: clamp(1rem, 1.35vw, 1.08rem);
      line-height: 1.7;
    }

    .dj-piano-reveal {
      opacity: 0;
      transform: translateY(18px);
      animation: djPianoReveal 0.8s cubic-bezier(.22, .9, .28, 1) forwards;
    }

    .dj-piano-reveal--1 { animation-delay: 0.16s; }
    .dj-piano-reveal--2 { animation-delay: 0.3s; }
    .dj-piano-reveal--3 { animation-delay: 0.44s; }
    .dj-piano-reveal--4 { animation-delay: 0.58s; }

    :is(
      .menu-link.services-page__active-link,
      .services-flyout a[href="/wedding-dj-piano/"],
      .dj-footer-links a[href="/wedding-dj-piano/"]
    ) :is(.menu-roll-stack, .dj-roll-stack) span:first-child {
      color: #b9fff4;
    }

    :is(
      .menu-link.services-page__active-link,
      .services-flyout a[href="/wedding-dj-piano/"],
      .dj-footer-links a[href="/wedding-dj-piano/"]
    )::after {
      content: "";
      display: block;
      width: 100%;
      height: 2px;
      margin-top: 0.35rem;
      background: linear-gradient(90deg, rgba(46, 194, 188, 0), rgba(46, 194, 188, 0.95), rgba(46, 194, 188, 0));
    }

    .service-overview {
      padding: clamp(4rem, 8vw, 6.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
      background:
        linear-gradient(180deg, rgba(5, 8, 8, 0.88), rgba(6, 8, 8, 0.96)),
        radial-gradient(circle at top left, rgba(46, 194, 188, 0.08), transparent 32%);
    }

    .service-overview__shell {
      width: min(var(--container-wide), calc(100vw - 2rem));
      margin: 0 auto;
    }

    .service-overview__grid {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
      gap: clamp(2rem, 5vw, 4rem);
      align-items: start;
    }

    .service-overview__eyebrow {
      position: relative;
      display: inline-block;
      margin: 0 0 1rem;
      font-family: "Oswald SemiBold", "Oswald", sans-serif;
      font-size: clamp(1rem, 1.38vw, 1.24rem);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #2ec2bc;
      line-height: 1;
      z-index: 1;
    }

    .service-overview__eyebrow-icon {
      position: absolute;
      top: -75px;
      left: -80px;
      width: clamp(108px, 10vw, 156px);
      height: auto;
      display: block;
      transform: rotate(-9deg);
      transform-origin: center center;
      pointer-events: none;
      z-index: -1;
    }

    .service-overview__title {
      margin: 0;
      font-family: "Big Shoulders Display", "Montserrat", sans-serif;
      font-weight: 700;
      font-size: clamp(2.2rem, 4.4vw, 4.4rem);
      line-height: 0.94;
      letter-spacing: -0.04em;
      text-transform: uppercase;
      color: #16b0a4;
    }

    .service-overview__copy p {
      margin: 1.1rem 0 0;
      max-width: 42rem;
      color: rgba(247, 243, 235, 0.88);
      font-size: 1rem;
      line-height: 1.8;
    }

    .service-overview__panel {
      padding: clamp(1.4rem, 2.6vw, 2rem);
      border: 1px solid rgba(46, 194, 188, 0.18);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.24);
    }

    .service-overview__panel-title {
      margin: 0;
      font-family: "Oswald SemiBold", "Oswald", sans-serif;
      font-size: 1.1rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #2ec2bc;
    }

    @media (min-width: 721px) {
      .dj-piano-hero__wave-toggle {
        gap: 0.9rem;
      }

      .dj-piano-hero__wave-toggle-bars {
        width: 2.15rem;
        height: 1.24rem;
        gap: 0.24rem;
      }

      .dj-piano-hero__wave-toggle-bars span {
        width: 0.22rem;
      }

      .dj-piano-hero__wave-toggle-icon {
        width: 1rem;
        height: 1rem;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
      }

      .dj-piano-hero__wave-toggle-icon::before {
        width: 0.82rem;
        height: 0.82rem;
        border-right-width: 3px;
        border-bottom-width: 3px;
        transform: translate(-50%, -58%) rotate(45deg);
      }

      .dj-piano-hero__wave-toggle:hover .dj-piano-hero__wave-toggle-icon,
      .dj-piano-hero__wave-toggle:focus-visible .dj-piano-hero__wave-toggle-icon,
      .dj-piano-hero.is-wave-ready.is-wave-open .dj-piano-hero__wave-toggle-icon {
        border: 0;
        background: none;
        box-shadow: none;
      }

      .service-overview__eyebrow {
        margin-bottom: 1.15rem;
        font-family: "Heatwood", "Oswald SemiBold", "Oswald", sans-serif;
        font-size: clamp(1.35rem, 1.85vw, 1.95rem);
        letter-spacing: 0.02em;
        text-transform: none;
        color: #2ec2bc;
      }

      .service-overview__title {
        font-size: clamp(2.8rem, 5.2vw, 5.4rem);
      }

      .service-overview__copy p {
        max-width: 46rem;
        font-size: 1.3rem;
        line-height: 1.96;
      }

      .service-overview__panel-title {
        font-size: 1.35rem;
        letter-spacing: 0.1em;
      }

      .service-overview__panel {
        margin-top: 3.2rem;
      }
    }

    .service-overview__list {
      margin: 1.1rem 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 0.95rem;
    }

    .service-overview__list li {
      padding-bottom: 0.95rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      color: rgba(247, 243, 235, 0.88);
      line-height: 1.6;
    }

    .service-overview__list li:last-child {
      padding-bottom: 0;
      border-bottom: 0;
    }

    .dj-piano-parallax-band {
      width: 100vw;
      height: clamp(320px, 42vw, 620px);
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      overflow: hidden;
      isolation: isolate;
      background:
        linear-gradient(180deg, rgba(8, 10, 10, 0.2), rgba(8, 10, 10, 0.34)),
        var(--dj-piano-parallax-image, none) center center / cover no-repeat;
      background-attachment: fixed;
    }

    .dj-piano-parallax-band::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(6, 8, 8, 0.3) 0%, rgba(6, 8, 8, 0.08) 38%, rgba(6, 8, 8, 0.24) 100%);
      pointer-events: none;
    }

    .reasons-section {
      --reasons-line: rgba(255, 255, 255, 0.32);
      --reasons-line-soft: rgba(255, 255, 255, 0.12);
      --reasons-card-bg: rgba(53, 53, 53, 0.9);
      --reasons-card-bg-hover: #bfe3de;
      --reasons-copy: #e6e6e6;
      --reasons-muted: rgba(230, 230, 230, 0.78);
      position: relative;
      width: 100vw;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      padding: clamp(4.5rem, 8vw, 6.8rem) 0 clamp(4.5rem, 8vw, 7rem);
      overflow: visible;
      isolation: isolate;
      z-index: 20;
      color: #fff;
      background:
        linear-gradient(180deg, rgba(10, 10, 11, 0.58), rgba(10, 10, 11, 0.9)),
        #121212;
    }

    .reasons-section::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        linear-gradient(180deg, rgba(6, 7, 7, 0.28), rgba(6, 7, 7, 0.84)),
        var(--reasons-bg-image, none) center center / cover no-repeat;
      filter: brightness(0.42) contrast(1.06);
      transform: scale(1.01);
    }

    .reasons-section::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        radial-gradient(circle at 8% 10%, rgba(255, 255, 255, 0.12), transparent 16%),
        radial-gradient(circle at 91% 18%, rgba(255, 255, 255, 0.1), transparent 18%),
        radial-gradient(circle at 7% 88%, rgba(255, 255, 255, 0.08), transparent 18%),
        radial-gradient(circle at 92% 85%, rgba(255, 255, 255, 0.09), transparent 20%);
      pointer-events: none;
      mix-blend-mode: screen;
      opacity: 0.42;
    }

    .reasons-section .msx-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      z-index: 2;
      pointer-events: none;
    }

    .reasons-section .msx-overlay {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
      background-size: 120px 120px;
      mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.82), transparent 92%);
      opacity: 0.24;
    }

    .reasons__wrap {
      position: relative;
      z-index: 4;
      width: min(1200px, calc(100vw - 2rem));
      margin: 0 auto;
    }

    .reasons-section__divider {
      position: absolute;
      left: 50%;
      width: 100vw;
      height: clamp(180px, 14vw, 250px);
      bottom: calc((clamp(180px, 14vw, 250px) * -0.5) - 110px);
      transform: translateX(-50%);
      background:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.94) 50%, rgba(0, 0, 0, 0) 100%),
        var(--reasons-divider-image, none) center center / 100% auto no-repeat;
      pointer-events: none;
      z-index: 120;
    }

    .reasons__head {
      max-width: 52rem;
      margin: 0 auto clamp(1.8rem, 4vw, 2.7rem);
      text-align: center;
    }

    .reasons__h2 {
      margin: 0 0 0.7rem;
      font-family: "Uniqueen Bold", "Montserrat", sans-serif;
      font-weight: 700;
      font-size: clamp(2rem, 4.2vw, 4rem);
      line-height: 0.93;
      letter-spacing: -0.04em;
      text-transform: uppercase;
      color: #fff;
    }

    .reasons__sub {
      margin: 0 auto;
      max-width: 48rem;
      color: var(--reasons-muted);
      font-family: "Open Sans", sans-serif;
      font-size: clamp(0.98rem, 1.2vw, 1.16rem);
      line-height: 1.75;
    }

    .reasons__grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(18px, 2.4vw, 28px);
    }

    .reason-card {
      position: relative;
      padding: clamp(1.55rem, 2.8vw, 2.15rem);
      min-height: 100%;
      border: 1px solid var(--reasons-line);
      background:
        linear-gradient(180deg, rgba(69, 69, 69, 0.94), rgba(49, 49, 49, 0.92)),
        var(--reasons-card-bg);
      box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22);
      backdrop-filter: blur(3px);
      opacity: 0;
      will-change: transform, opacity;
      transition:
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;
    }

    .reason-card:nth-child(odd) {
      transform: translate3d(-88px, 0, 0);
    }

    .reason-card:nth-child(even) {
      transform: translate3d(88px, 0, 0);
    }

    .reasons-section.is-visible .reason-card.is-revealed {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition-duration: 0.9s;
      transition-timing-function: cubic-bezier(.22, 1, .36, 1);
    }

    .reason-card::before {
      content: "";
      position: absolute;
      inset: 12px;
      border: 1px solid rgba(255, 255, 255, 0.03);
      pointer-events: none;
    }

    .reason-card:hover,
    .reason-card:focus-within {
      background: var(--reasons-card-bg-hover);
      border-color: rgba(191, 227, 222, 0.62);
      box-shadow: 0 24px 54px rgba(0, 0, 0, 0.28);
      transform: translate3d(0, -5px, 0);
    }

    .reason-number {
      margin: 0 0 0.85rem;
      font-family: "Cormorant Garamond", "Playfair Display", serif;
      font-size: clamp(2.7rem, 4.5vw, 4.35rem);
      font-weight: 700;
      line-height: 0.9;
      color: #49bbb2;
      letter-spacing: 0.02em;
    }

    .reason-title {
      margin: 0 0 0.75rem;
      font-family: "Montserrat", Arial, sans-serif;
      font-size: clamp(1rem, 1.22vw, 1.12rem);
      font-weight: 800;
      line-height: 1.14;
      letter-spacing: 0.01em;
      text-transform: uppercase;
      color: #fff;
    }

    .reason-text {
      margin: 0;
      color: var(--reasons-copy);
      font-family: "Open Sans", sans-serif;
      font-size: clamp(0.96rem, 1.08vw, 1.02rem);
      line-height: 1.8;
    }

    .reason-card:hover .reason-number,
    .reason-card:focus-within .reason-number {
      color: #333;
    }

    .reason-card:hover .reason-title,
    .reason-card:focus-within .reason-title {
      color: #16a89f;
    }

    .reason-card:hover .reason-text,
    .reason-card:focus-within .reason-text {
      color: #0f172a;
    }

    @media (min-width: 721px) {
      .reasons__wrap {
        width: min(1380px, calc(100vw - 3.5rem));
      }

      .reasons__grid {
        gap: clamp(22px, 2vw, 32px);
      }

      .reason-card {
        padding: clamp(1.8rem, 2.6vw, 2.45rem);
      }

      .reason-title {
        font-size: clamp(1.16rem, 1.36vw, 1.34rem);
        line-height: 1.18;
      }

      .reason-text {
        font-size: clamp(1.08rem, 1.18vw, 1.16rem);
        line-height: 1.92;
      }
    }

    .dr-sticky-results {
      background: transparent;
    }

    .dr-sticky-results__rail {
      gap: clamp(42px, 4vw, 56px);
    }

    .dr-sticky-results__item {
      position: relative;
      grid-template-columns: 1fr;
      min-height: 0;
      padding: clamp(18px, 2vw, 24px);
      border: 1px solid rgba(255, 255, 255, 0.16);
      background:
        linear-gradient(180deg, rgba(37, 37, 37, 0.84), rgba(22, 22, 22, 0.74)),
        rgba(18, 18, 16, 0.82);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.16);
    }

    .dr-sticky-results__icon {
      position: absolute;
      top: clamp(18px, 2vw, 24px);
      right: clamp(18px, 2vw, 24px);
      width: 76px;
      height: 76px;
      filter: none;
      opacity: 0.96;
      margin: 0;
    }

    .dr-sticky-results__item-copy {
      max-width: none;
      margin: 0;
      padding: 10px 106px 0 0;
      border-left: 0;
      border-top: 0;
    }

    .dr-sticky-results__panel {
      min-height: clamp(760px, 62vw, 920px);
    }

    .dr-sticky-results__intro {
      min-height: auto;
      margin-bottom: clamp(0.35rem, 0.8vw, 0.7rem);
      width: min(560px, 100%);
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    .dr-sticky-results__title {
      max-width: 10ch;
      margin-left: auto;
      margin-right: auto;
    }

    .dr-sticky-results__eyebrow-plus {
      display: inline-block;
      margin: 0 0.08em 0 0.04em;
      font-family: "Heatwood", "Yellowtail", cursive;
      font-size: 0.9em;
      font-weight: 400;
      line-height: 1;
      vertical-align: middle;
      transform: translateY(-0.03em);
      color: currentColor;
    }

    .dr-sticky-results__item-head {
      position: relative;
      min-height: 0;
      margin-bottom: 12px;
      padding-bottom: 12px;
    }

    .dr-sticky-results__item-title {
      display: inline-block;
      color: #ffffff;
    }

    .dr-sticky-results__item-head::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: max(64px, 52%);
      max-width: 10rem;
      height: 2px;
      background: var(--accent-teal);
      opacity: 0.95;
    }

    .dr-sticky-results__equalizer {
      position: relative;
      z-index: 1;
      width: min(100%, 61.6rem);
      height: clamp(190px, 18vw, 250px);
      margin: -60px auto clamp(0.8rem, 1.2vw, 1rem);
      padding: 0;
      overflow: hidden;
      transform: translateX(10px);
    }

    .dr-sticky-results__equalizer-lottie {
      width: 100%;
      height: 100%;
      pointer-events: none;
      filter: drop-shadow(0 0 12px rgba(22, 168, 159, 0.16));
    }

    .dr-sticky-results__body {
      width: min(100%, 560px);
      max-width: min(560px, 100%);
      margin-top: 0;
      margin-left: auto;
      margin-right: auto;
      padding-inline: clamp(18px, 2vw, 28px);
      border-left: 1px solid var(--dr-line);
      border-right: 1px solid var(--dr-line);
      text-align: center;
      transform: translateX(15px);
    }

    .dr-sticky-results__quote {
      font-style: normal;
      quotes: none;
    }

    .dr-sticky-results__quote::before,
    .dr-sticky-results__quote::after {
      content: none;
    }

    .dr-sticky-results__stars,
    .dr-sticky-results__credit {
      display: none;
    }

    .dj-piano-page .reviews {
      background: linear-gradient(180deg, rgba(244, 240, 231, 0) 0%, rgba(244, 240, 231, 0.28) 70%, #f4f0e7 100%);
    }

    .dj-piano-page .reviews::after {
      background: linear-gradient(180deg, rgba(244, 240, 231, 0) 0%, rgba(244, 240, 231, 0.64) 58%, #f4f0e7 100%);
    }

    .dj-piano-intro-band .dje-intro__video {
      inset: -30px 0 auto;
      height: calc(100% + 60px);
      object-position: center center;
    }

    .dje-intro__edge--top {
      top: -14px !important;
    }

    .dj-piano-page .music-duo-grid {
      --dvg-accent: #23b1a5;
      --dvg-subtitle: #39c9be;
      --dvg-line: rgba(70, 213, 201, 0.18);
      --dvg-line-strong: rgba(88, 234, 221, 0.3);
      position: relative;
      z-index: 4;
      background-color: #030807;
      background:
        linear-gradient(
          180deg,
          rgba(1, 10, 9, 0.98) 0%,
          rgba(2, 14, 13, 0.94) 22%,
          rgba(1, 8, 7, 0.86) 52%,
          rgba(0, 3, 3, 0.96) 100%
        ),
        radial-gradient(circle at 14% 34%, rgba(35, 177, 165, 0.28) 0%, rgba(35, 177, 165, 0.18) 14%, rgba(35, 177, 165, 0.08) 24%, rgba(35, 177, 165, 0) 38%),
        radial-gradient(circle at 78% 72%, rgba(35, 177, 165, 0.26) 0%, rgba(35, 177, 165, 0.16) 15%, rgba(35, 177, 165, 0.06) 24%, rgba(35, 177, 165, 0) 37%),
        radial-gradient(circle at 50% 50%, rgba(16, 86, 80, 0.18) 0%, rgba(16, 86, 80, 0.08) 22%, rgba(16, 86, 80, 0) 44%),
        linear-gradient(135deg, rgba(9, 43, 40, 0.34) 0%, rgba(2, 10, 9, 0) 34%, rgba(12, 52, 48, 0.18) 100%);
      padding-bottom: calc(clamp(50px, 5vw, 72px) + 160px);
    }

    .dj-piano-page .music-duo-grid::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(62, 197, 186, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(62, 197, 186, 0.05) 1px, transparent 1px);
      opacity: 0.14;
      pointer-events: none;
    }

    .dj-piano-page .music-duo-grid .msx-overlay {
      background:
        radial-gradient(circle at 18% 30%, rgba(79, 218, 206, 0.08), transparent 20%),
        radial-gradient(circle at 76% 70%, rgba(79, 218, 206, 0.07), transparent 19%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0) 18%, rgba(3, 14, 13, 0.12) 100%);
      mix-blend-mode: normal;
    }

    .music-duo-grid .dj-video-grid__wrap {
      width: min(1840px, calc(100vw - 44px));
    }

    .music-duo-grid .dj-video-grid__intro {
      margin-bottom: clamp(2rem, 4vw, 3rem);
      text-align: center;
    }

    .music-duo-grid .dj-video-grid__headline-group {
      margin-inline: auto;
      max-width: 760px;
      text-align: center;
    }

    .music-duo-grid .dj-video-grid__list {
      max-width: 1880px;
      margin: 0 auto;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(2.4rem, 3.6vw, 4.25rem);
      align-items: start;
      justify-content: center;
    }

    .music-duo-grid .dj-video-grid__media {
      position: relative;
      inset: auto;
      aspect-ratio: 16 / 9;
      -webkit-mask-image: none;
      mask-image: none;
      clip-path: inset(0 round 0);
      border-radius: 28px 0 0 28px;
      border: 5px solid rgba(35, 177, 165, 0.9);
      overflow: hidden;
      background: rgba(4, 17, 16, 0.85);
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
    }

    .music-duo-grid .dj-video-grid__media::after {
      border-radius: 28px;
      background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.02) 58%, rgba(0, 0, 0, 0.18) 100%);
    }

    .music-duo-grid .dj-video-grid__meta {
      position: relative;
      inset: auto;
      margin-top: 1.75rem;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      text-shadow: none;
      align-items: flex-start;
    }

    .music-duo-grid .dj-video-grid__name {
      font-size: clamp(1.55rem, 2.1vw, 2.2rem);
      line-height: 1.15;
      color: #ffffff;
    }

    .music-duo-grid .dj-video-grid__subtitle {
      font-size: clamp(1.05rem, 1.28vw, 1.35rem);
      letter-spacing: 0.015em;
      color: #39c9be;
      text-transform: uppercase;
      font-weight: 800;
    }

    .music-duo-grid .dj-video-grid__play {
      width: 160px;
      height: 112px;
      border-radius: 28px;
      background: rgba(35, 177, 165, 0.7);
      box-shadow: none;
      backdrop-filter: blur(3px);
    }

    .music-duo-grid .dj-video-grid__play::before {
      border-top-width: 22px;
      border-bottom-width: 22px;
      border-left-width: 35px;
      margin-left: 8px;
    }

    .music-duo-grid .dj-video-grid__card:hover .dj-video-grid__play,
    .music-duo-grid .dj-video-grid__card:focus-visible .dj-video-grid__play {
      transform: translate(-50%, -50%) scale(1.04);
      background: rgba(35, 177, 165, 0.8);
    }

    .music-duo-grid .dj-video-grid__rest {
      opacity: 1;
      transform: scale(1);
    }

    .music-duo-grid .dj-video-grid__hover {
      opacity: 0;
      transform: scale(1.03);
    }

    .music-duo-grid .dj-video-grid__card:hover .dj-video-grid__rest,
    .music-duo-grid .dj-video-grid__card:focus-visible .dj-video-grid__rest {
      opacity: 0;
      transform: scale(1.015);
    }

    .music-duo-grid .dj-video-grid__card:hover .dj-video-grid__hover,
    .music-duo-grid .dj-video-grid__card:focus-visible .dj-video-grid__hover {
      opacity: 1;
      transform: scale(1);
    }

    .music-duo-grid .dj-video-grid__title {
      max-width: 11ch;
      margin: 0 auto;
    }

    .music-mashup-grid {
      position: relative;
      overflow: visible;
      padding-bottom: calc(clamp(50px, 5vw, 72px) + 72px);
      z-index: 10;
    }

    .music-mashup-grid::after {
      content: "";
      position: absolute;
      left: 50%;
      width: 100vw;
      height: clamp(120px, 10vw, 170px);
      bottom: calc(clamp(120px, 10vw, 170px) * -0.5);
      transform: translateX(-50%);
      background:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.94) 50%, rgba(0, 0, 0, 0) 100%),
        var(--music-mashup-divider-image, none) center center / 100% auto no-repeat;
      pointer-events: none;
      z-index: 60;
    }

    .music-mashup-grid .dj-video-grid__wrap {
      width: min(1560px, calc(100vw - 1.25rem));
      transform: translateY(75px);
    }

    .music-mashup-grid .dj-video-grid__headline-group {
      max-width: 760px;
      margin-inline: auto;
      text-align: center;
    }

    .music-mashup-grid .dj-video-grid__title {
      max-width: none;
      margin: 0 auto;
      font-size: clamp(2rem, 4vw, 3.25rem);
      letter-spacing: 0.015em;
    }

    .music-mashup-grid .dj-video-grid__list {
      max-width: 1680px;
      margin: 0 auto;
    }

    .music-mashup-grid .dj-video-grid__list--slider {
      display: block;
      padding: 0;
      overflow: visible;
    }

    .music-mashup-grid .dcpvs--shaped {
      --dcpvs-card-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 952.45 600.78' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M326.88,556.95l-17.82,25.64c-8.91,10.54-20.37,14.04-32.42,12.62l-259.15-.03c-7.24,0-13.96-6.73-13.96-16.7l-.02-560.84C3.51,7.33,9.85,.01,17.6,.01h919.79c8.85-.01,15.05,7.17,15.05,18.81l-.07,484.33c0,11.22-6.84,17.63-14.96,17.63l-552.12,.02c-23.19,0-43.09,14.06-58.42,36.13Z'/%3E%3C/svg%3E");
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0;
      width: 100%;
      padding: 0.5rem 0 1.35rem;
      color: #fff;
      overflow: visible;
    }

    @media (min-width: 721px) {
      .music-mashup-grid {
        padding-bottom: calc(clamp(28px, 3vw, 42px) + 44px);
      }

      .music-mashup-grid .dj-video-grid__wrap {
        transform: translateY(42px);
      }

      .music-mashup-grid .dcpvs--shaped {
        padding-bottom: 0.75rem;
      }

      .music-mashup-grid .dj-video-grid__cta {
        margin-top: clamp(1.3rem, 2vw, 1.9rem);
      }
    }

    .music-mashup-grid .dcpvs--shaped.is-dragging {
      cursor: grabbing;
    }

    .music-mashup-grid .dcpvs--shaped.is-dragging .dcpvs-slide,
    .music-mashup-grid .dcpvs--shaped.is-dragging .dcpvs-video-wrapper,
    .music-mashup-grid .dcpvs--shaped.is-dragging .dcpvs-video-poster {
      cursor: grabbing;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-track {
      position: relative;
      width: 100%;
      height: min(40vw, 500px);
      perspective: 1800px;
      overflow: hidden;
      touch-action: pan-y;
      user-select: none;
      transform-origin: 50% 50%;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-slide {
      position: absolute;
      top: 0;
      left: 50%;
      width: min(38vw, 700px);
      opacity: 0;
      pointer-events: none;
      transform-style: preserve-3d;
      will-change: transform, opacity;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-slide.is-active,
    .music-mashup-grid .dcpvs--shaped .dcpvs-slide.is-prev,
    .music-mashup-grid .dcpvs--shaped .dcpvs-slide.is-next {
      opacity: 1;
      pointer-events: auto;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-video-wrapper {
      position: relative;
      width: 100%;
      aspect-ratio: 952.45 / 600.78;
      overflow: visible;
      background: transparent;
      transform-origin: 50% 50%;
      will-change: transform;
      filter: drop-shadow(0 24px 54px rgba(0, 0, 0, 0.28));
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-video-surface {
      position: absolute;
      inset: 0;
      overflow: hidden;
      background: #000;
      -webkit-mask-image: var(--dcpvs-card-mask);
      mask-image: var(--dcpvs-card-mask);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      transform: translateZ(0);
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-video-surface::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 32%, rgba(0, 0, 0, 0.18));
      pointer-events: none;
      z-index: 3;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-video-iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      background: transparent;
      pointer-events: none;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-video-poster {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      outline: none;
      cursor: pointer;
      background-position: 50% 50%;
      background-size: cover;
      text-indent: -999em;
      overflow: hidden;
      opacity: 1;
      transition: opacity 800ms, height 0s;
      transition-delay: 0s, 0s;
      z-index: 2;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-video-wrapper.is-active .dcpvs-video-poster {
      opacity: 0;
      height: 0;
      transition-delay: 0s, 800ms;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-video-wrapper.is-active .dcpvs-video-iframe {
      pointer-events: auto;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-card-frame,
    .music-mashup-grid .dcpvs--shaped .dcpvs-card-frame-overlay {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 5;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-card-frame {
      color: rgba(255, 255, 255, 0.35);
      opacity: 0;
      filter:
        drop-shadow(0 0 10px rgba(22, 168, 159, 0.12))
        drop-shadow(0 0 22px rgba(22, 168, 159, 0.08))
        drop-shadow(0 0 34px rgba(22, 168, 159, 0.05));
      transition: opacity 320ms ease, filter 320ms ease;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-card-frame-overlay {
      color: #23b1a5;
      opacity: 0;
      filter:
        drop-shadow(0 0 10px rgba(22, 168, 159, 0.3))
        drop-shadow(0 0 22px rgba(22, 168, 159, 0.22))
        drop-shadow(0 0 42px rgba(22, 168, 159, 0.18));
      transition: opacity 320ms ease, filter 320ms ease;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-card-frame svg,
    .music-mashup-grid .dcpvs--shaped .dcpvs-card-frame-overlay svg {
      display: block;
      width: 100%;
      height: 100%;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-slide.is-active .dcpvs-card-frame {
      opacity: 0.18;
      filter:
        drop-shadow(0 0 4px rgba(22, 168, 159, 0.06))
        drop-shadow(0 0 10px rgba(22, 168, 159, 0.04));
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-slide.is-active .dcpvs-card-frame-overlay {
      opacity: 1;
      filter:
        drop-shadow(0 0 12px rgba(22, 168, 159, 0.52))
        drop-shadow(0 0 28px rgba(22, 168, 159, 0.34))
        drop-shadow(0 0 54px rgba(22, 168, 159, 0.24));
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-play {
      position: absolute;
      left: clamp(1.15rem, 2.2vw, 1.9rem);
      bottom: clamp(1rem, 2vw, 1.75rem);
      width: clamp(4.8rem, 7.6vw, 6.4rem);
      height: clamp(4.8rem, 7.6vw, 6.4rem);
      opacity: 0.92;
      pointer-events: none;
      z-index: 4;
      filter:
        drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28))
        drop-shadow(0 0 12px rgba(83, 217, 206, 0.16));
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-play__fill {
      opacity: 0;
      fill: #23b1a5;
      transition: opacity 220ms ease, fill 220ms ease;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-play .stroke-dotted,
    .music-mashup-grid .dcpvs--shaped .dcpvs-play .stroke-solid,
    .music-mashup-grid .dcpvs--shaped .dcpvs-play .vid-icon {
      transition:
        stroke 220ms ease,
        fill 220ms ease,
        opacity 220ms ease,
        stroke-width 220ms ease,
        stroke-dashoffset 1s ease;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-play .stroke-dotted {
      stroke: #23b1a5;
      stroke-dasharray: 4, 5;
      stroke-width: 1px;
      transform-origin: 50% 50%;
      animation: dcpvs-spin 4s infinite linear;
      transition: opacity 1s ease, stroke-width 1s ease;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-play .stroke-solid {
      stroke: #23b1a5;
      stroke-dashoffset: 0;
      stroke-dasharray: 300;
      stroke-width: 4px;
      opacity: 0;
      transition: stroke-dashoffset 1s ease, opacity 1s ease;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-play:hover .stroke-dotted {
      stroke-width: 4px;
      opacity: 1;
      stroke: #23b1a5;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-play:hover .stroke-solid {
      opacity: 1;
      stroke-dashoffset: 300;
      stroke: #23b1a5;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-video-poster:hover .dcpvs-play__fill,
    .music-mashup-grid .dcpvs--shaped .dcpvs-video-poster:focus-visible .dcpvs-play__fill {
      opacity: 1;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-video-poster:hover .dcpvs-play .vid-icon,
    .music-mashup-grid .dcpvs--shaped .dcpvs-video-poster:focus-visible .dcpvs-play .vid-icon {
      fill: #fff;
      stroke: none;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-video-poster:hover .dcpvs-play .stroke-dotted,
    .music-mashup-grid .dcpvs--shaped .dcpvs-video-poster:focus-visible .dcpvs-play .stroke-dotted,
    .music-mashup-grid .dcpvs--shaped .dcpvs-video-poster:hover .dcpvs-play .stroke-solid,
    .music-mashup-grid .dcpvs--shaped .dcpvs-video-poster:focus-visible .dcpvs-play .stroke-solid {
      stroke: #23b1a5;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-video-poster:hover .dcpvs-play,
    .music-mashup-grid .dcpvs--shaped .dcpvs-video-poster:focus-visible .dcpvs-play {
      filter:
        drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28))
        drop-shadow(0 0 16px rgba(83, 217, 206, 0.3))
        drop-shadow(0 0 26px rgba(83, 217, 206, 0.18));
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-slide-caption {
      display: none;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-nav-row {
      display: contents;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-caption {
      margin: 0;
      padding: 1rem 1rem 0;
      color: #fff;
      font-family: "Elegant Typewriter Light", "Courier New", monospace;
      text-transform: lowercase;
      letter-spacing: 0.12em;
      font-size: calc(0.98rem + 2px);
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-arrow {
      position: absolute;
      top: 50%;
      z-index: 5;
      width: 68px;
      height: 68px;
      border: 0;
      background: transparent;
      cursor: pointer;
      transform: translateY(-50%);
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-arrow::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 22px;
      height: 22px;
      border-top: 4px solid #fff;
      border-right: 4px solid #fff;
      transform-origin: center;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-arrow--prev {
      left: 0.5rem;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-arrow--prev::before {
      transform: translate(-30%, -50%) rotate(-135deg);
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-arrow--next {
      right: 0.5rem;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-arrow--next::before {
      transform: translate(-70%, -50%) rotate(45deg);
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-drag-cue {
      position: absolute;
      left: 50%;
      bottom: calc(4.25rem + 120px);
      z-index: 4;
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.45rem 0.8rem;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.38);
      color: rgba(255, 255, 255, 0.9);
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      transform: translateX(-50%);
      pointer-events: none;
      backdrop-filter: blur(4px);
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-drag-hand,
    .music-mashup-grid .dcpvs--shaped .dcpvs-swipe-hand {
      font-size: 1rem;
      line-height: 1;
    }

    .music-mashup-grid .dcpvs--shaped .dcpvs-swipe-hand {
      display: none;
    }

    @media (min-width: 1025px) {
      .music-mashup-grid {
        padding-bottom: calc(clamp(8px, 1.2vw, 16px) + 14px);
      }

      .music-mashup-grid .dj-video-grid__wrap {
        transform: translateY(18px);
      }

      .music-mashup-grid .dcpvs--shaped {
        padding-bottom: 0.5rem;
      }

      .music-mashup-grid .dcpvs--shaped .dcpvs-drag-cue {
        position: static;
        left: auto;
        bottom: auto;
        z-index: auto;
        margin: 0.45rem auto 0;
        transform: none;
      }

      .music-mashup-grid .dj-video-grid__cta {
        margin-top: 0.55rem;
      }

      .music-mashup-grid .dj-video-grid__cta .msx-button {
        min-width: 248px;
        min-height: 66px;
        padding: 12px 24px;
      }

      .music-mashup-grid .dj-video-grid__cta .msx-button__block {
        gap: 10px;
      }
    }

    @keyframes dcpvs-spin {
      to {
        transform: rotate(360deg);
      }
    }

    @media (hover: hover) and (pointer: fine) {
      .music-mashup-grid .dcpvs--shaped,
      .music-mashup-grid .dcpvs--shaped .dcpvs-slide,
      .music-mashup-grid .dcpvs--shaped .dcpvs-video-wrapper,
      .music-mashup-grid .dcpvs--shaped .dcpvs-video-poster {
        cursor: grab;
      }
    }

    .music-mashup-grid .dj-video-grid__card--native {
      display: block;
      width: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: default;
    }

    .music-mashup-grid .dj-video-grid__media {
      position: relative;
      inset: auto;
      aspect-ratio: 16 / 9;
      -webkit-mask-image: none;
      mask-image: none;
      clip-path: inset(0 round 0);
      border-radius: 22px;
      border: 2px solid rgba(35, 177, 165, 0.88);
      overflow: hidden;
      background: rgba(4, 17, 16, 0.92);
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
    }

    .music-mashup-grid .dj-video-grid__media::after {
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.02) 58%, rgba(0, 0, 0, 0.16) 100%);
    }

    .music-mashup-grid .dj-video-grid__media iframe {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      border: 0;
      border-radius: 18px;
      background: #000;
    }

    .music-mashup-grid .dj-video-grid__meta {
      display: none;
    }

    .music-mashup-grid .dj-video-grid__rest {
      opacity: 1;
      transform: scale(1);
    }

    .music-mashup-grid .dj-video-grid__hover {
      opacity: 0;
      transform: scale(1.03);
    }

    .music-mashup-grid .dj-video-grid__card:hover .dj-video-grid__rest,
    .music-mashup-grid .dj-video-grid__card:focus-visible .dj-video-grid__rest {
      opacity: 0;
      transform: scale(1.015);
    }

    .music-mashup-grid .dj-video-grid__card:hover .dj-video-grid__hover,
    .music-mashup-grid .dj-video-grid__card:focus-visible .dj-video-grid__hover {
      opacity: 1;
      transform: scale(1);
    }

    .music-mashup-grid .dj-video-grid__play {
      width: 102px;
      height: 72px;
      border-radius: 20px;
      background: rgba(35, 177, 165, 0.74);
      box-shadow: none;
      backdrop-filter: blur(4px);
    }

    .music-mashup-grid .dj-video-grid__play::before {
      border-top-width: 16px;
      border-bottom-width: 16px;
      border-left-width: 26px;
      margin-left: 6px;
    }

    .dj-piano-burst-band {
      display: none;
      position: relative;
      width: 100vw;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      min-height: clamp(420px, 54vw, 760px);
      overflow: hidden;
      background-color: #050505;
      isolation: isolate;
    }

    .dj-piano-burst-band__divider {
      position: absolute;
      left: 0;
      width: 100%;
      height: auto;
      display: block;
      z-index: 4;
      pointer-events: none;
    }

    .dj-piano-burst-band__divider--top {
      display: none;
    }

    .dj-piano-burst-band__divider--bottom {
      bottom: 0;
      transform: translateY(50%);
    }

    .dj-piano-burst-band::before,
    .dj-piano-burst-band::after {
      display: none;
    }

    .dj-piano-burst-band__copy {
      position: absolute;
      inset: 50% auto auto 50%;
      z-index: 2;
      display: grid;
      justify-items: center;
      gap: clamp(8px, 1.4vw, 14px);
      width: min(100%, calc(100vw - 2rem));
      transform: translate(-50%, -50%);
      text-align: center;
      pointer-events: none;
    }

    .dj-piano-burst-band__copy::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(900px, 78vw);
      height: min(420px, 48vw);
      transform: translate(-66%, 12%);
      border-radius: 999px;
      background:
        radial-gradient(
          ellipse at center,
          rgba(0, 0, 0, 0.5) 0%,
          rgba(0, 0, 0, 0.3) 42%,
          rgba(0, 0, 0, 0.12) 68%,
          rgba(0, 0, 0, 0) 100%
        );
      filter: blur(10px);
      z-index: -1;
      pointer-events: none;
    }

    .dj-piano-burst-band__eyebrow {
      margin: 0;
      font-family: "Heatwood", "Yellowtail", cursive;
      font-size: clamp(34px, 5.2vw, 120px);
      line-height: 0.82;
      font-weight: 400;
      letter-spacing: 0;
      color: #16a89f;
      transform: translate(-450px, 260px) rotate(-8deg);
      transform-origin: center;
      text-shadow:
        0 8px 22px rgba(0, 0, 0, 0.52),
        0 0 18px rgba(22, 168, 159, 0.3),
        0 0 34px rgba(22, 168, 159, 0.14);
    }

    .dj-piano-burst-band__title {
      margin: 0;
      min-height: 1.1em;
      font-family: "Uniqueen Bold", "Montserrat", sans-serif;
      font-weight: 700;
      font-size: clamp(42px, 6.2vw, 104px);
      line-height: 0.9;
      letter-spacing: -0.05em;
      text-transform: uppercase;
      color: #f7f3eb;
      transform: translate(-120px, 290px);
      text-shadow:
        0 10px 24px rgba(0, 0, 0, 0.64),
        0 0 1px rgba(0, 0, 0, 0.85),
        0 0 16px rgba(22, 168, 159, 0.12);
      -webkit-text-stroke: 1px rgba(0, 0, 0, 0.24);
    }

    .dj-piano-burst-band__rotator {
      display: inline-block;
      min-width: 10ch;
    }

    .dj-piano-burst-band__media {
      position: absolute;
      inset: 0;
      overflow: hidden;
      z-index: 0;
      background:
        #050505
        var(--dj-piano-burst-poster, none)
        center center / cover no-repeat;
      transform: translateZ(0);
    }

    .dj-piano-burst-band__media video {
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: calc(100% + 140px);
      height: calc(100% + 140px);
      min-width: 100%;
      min-height: 100%;
      object-fit: cover;
      object-position: center 48%;
      transform: translate3d(-50%, -50%, 0);
      will-change: transform;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      pointer-events: none;
      opacity: 1;
      transition: opacity 0.24s ease;
    }

    .dj-piano-burst-band.is-video-idle .dj-piano-burst-band__media video {
      opacity: 0;
    }

    .dj-piano-burst-band__vignette {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      box-shadow:
        inset 0 0 180px rgba(8, 10, 12, 0.42),
        inset 0 0 320px rgba(8, 10, 12, 0.22);
      background:
        linear-gradient(90deg, rgba(8, 10, 12, 0.78) 0, rgba(8, 10, 12, 0.34) 120px, rgba(8, 10, 12, 0) 280px),
        linear-gradient(270deg, rgba(8, 10, 12, 0.78) 0, rgba(8, 10, 12, 0.34) 120px, rgba(8, 10, 12, 0) 280px),
        linear-gradient(180deg, rgba(8, 10, 12, 0.72) 0, rgba(8, 10, 12, 0.28) 110px, rgba(8, 10, 12, 0) 240px),
        linear-gradient(0deg, rgba(8, 10, 12, 0.72) 0, rgba(8, 10, 12, 0.28) 110px, rgba(8, 10, 12, 0) 240px),
        radial-gradient(circle at 0% 0%, rgba(8, 10, 12, 0.42) 0, rgba(8, 10, 12, 0) 220px),
        radial-gradient(circle at 100% 0%, rgba(8, 10, 12, 0.42) 0, rgba(8, 10, 12, 0) 220px),
        radial-gradient(circle at 0% 100%, rgba(8, 10, 12, 0.42) 0, rgba(8, 10, 12, 0) 220px),
        radial-gradient(circle at 100% 100%, rgba(8, 10, 12, 0.42) 0, rgba(8, 10, 12, 0) 220px),
        radial-gradient(circle at 20% 20%, rgba(22, 176, 164, 0.04), transparent 38%);
    }

    .dj-piano-burst-band__media::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(
          180deg,
          rgba(0, 0, 0, 0.2) 0%,
          rgba(0, 0, 0, 0.1) 28%,
          rgba(0, 0, 0, 0.08) 52%,
          rgba(0, 0, 0, 0.16) 100%
        );
      pointer-events: none;
    }

    .dj-piano-burst-band__media::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: transparent;
    }

    :is(.music-duo-grid, .music-mashup-grid) .dj-video-grid__item,
    :is(.music-duo-grid, .music-mashup-grid) .dj-video-grid__item:nth-child(1),
    :is(.music-duo-grid, .music-mashup-grid) .dj-video-grid__item:nth-child(2),
    :is(.music-duo-grid, .music-mashup-grid) .dj-video-grid__item:nth-child(3),
    :is(.music-duo-grid, .music-mashup-grid) .dj-video-grid__item:nth-child(4),
    :is(.music-duo-grid, .music-mashup-grid) .dj-video-grid__item:nth-child(5),
    :is(.music-duo-grid, .music-mashup-grid) .dj-video-grid__item:nth-child(6),
    :is(.music-duo-grid, .music-mashup-grid) .dj-video-grid__item:nth-child(7),
    :is(.music-duo-grid, .music-mashup-grid) .dj-video-grid__item:nth-child(8),
    :is(.music-duo-grid, .music-mashup-grid) .dj-video-grid__item:nth-child(9) {
      grid-column: auto;
      transform: none;
    }

    .music-mashup-grid .dj-video-grid__item,
    .music-mashup-grid .dj-video-grid__item:nth-child(1),
    .music-mashup-grid .dj-video-grid__item:nth-child(2),
    .music-mashup-grid .dj-video-grid__item:nth-child(3),
    .music-mashup-grid .dj-video-grid__item:nth-child(4),
    .music-mashup-grid .dj-video-grid__item:nth-child(5),
    .music-mashup-grid .dj-video-grid__item:nth-child(6),
    .music-mashup-grid .dj-video-grid__item:nth-child(7),
    .music-mashup-grid .dj-video-grid__item:nth-child(8),
    .music-mashup-grid .dj-video-grid__item:nth-child(9) {
      margin-top: 0;
    }

    :is(.music-duo-grid, .music-mashup-grid) .dj-video-grid__card {
      max-width: 100%;
      margin: 0 auto;
    }

    :is(.music-duo-grid, .music-mashup-grid) .dj-video-grid__shell {
      aspect-ratio: auto;
      background: transparent;
      overflow: visible;
      transform: none;
      box-shadow: none;
    }

    :is(.music-duo-grid, .music-mashup-grid) .dj-video-grid__card:hover .dj-video-grid__shell,
    :is(.music-duo-grid, .music-mashup-grid) .dj-video-grid__card:focus-visible .dj-video-grid__shell {
      transform: none;
      box-shadow: none;
    }

    :is(.music-duo-grid, .music-mashup-grid) .dj-video-grid__frame,
    :is(.music-duo-grid, .music-mashup-grid) .dj-video-grid__frame-overlay {
      display: none;
    }

    .music-duo-grid .dj-video-grid__frame svg,
    .music-duo-grid .dj-video-grid__frame-overlay svg {
      filter: none;
      width: 100%;
      height: auto;
    }

    :is(.music-duo-grid, .music-mashup-grid) .dj-video-grid__rest,
    :is(.music-duo-grid, .music-mashup-grid) .dj-video-grid__hover {
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    :is(.music-duo-grid, .music-mashup-grid) .dj-video-grid__lightbox {
      z-index: 5;
    }

    .de-faq {
      --faq-bg: #f4f0e7;
      --faq-ink: #101315;
      --faq-muted: #55605f;
      --faq-rule: rgba(19, 27, 28, 0.1);
      --faq-panel: rgba(255, 255, 255, 0.92);
      position: relative;
      width: 100vw;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      margin-top: -2px;
      margin-bottom: -2px;
      padding: clamp(4.2rem, 7vw, 6.6rem) 0;
      color: var(--faq-ink);
      overflow: hidden;
      background: linear-gradient(180deg, #f4f0e7 0%, #f4f0e7 96px, #f6f2ea 200px, #f4f0e7 100%);
      box-shadow: 0 -26px 64px 22px rgba(244, 240, 231, 0.92);
    }

    .de-faq::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: clamp(72px, 8vw, 128px);
      background: linear-gradient(180deg, #f4f0e7 0%, rgba(244, 240, 231, 0.96) 54%, rgba(244, 240, 231, 0) 100%);
      pointer-events: none;
      z-index: 0;
    }

    .de-faq::after {
      content: none;
    }

    body.dj-piano-page .darby-global-footer .dj-footer-section {
      margin-top: -2px;
    }

    body.dj-piano-page .darby-global-footer .dj-footer-section::before {
      inset: -2px 0 0;
    }

    .de-faq__wrap {
      position: relative;
      z-index: 1;
      width: min(1540px, calc(100vw - 2rem));
      margin: 0 auto;
      display: block;
    }

    .de-faq__left {
      min-width: 0;
      max-width: min(1460px, calc(100vw - 2.75rem));
      margin: 0 auto;
    }

    .de-faq__h2 {
      margin: 0;
      text-align: center;
      font-family: "Montserrat", "Poppins", sans-serif;
      font-size: clamp(42px, 4.6vw, 72px);
      line-height: 0.92;
      letter-spacing: -0.06em;
      font-weight: 900;
      text-transform: uppercase;
      color: #10211f;
    }

    .de-faq__intro {
      max-width: 24ch;
      margin: 0 auto 2.6rem;
      text-align: center;
      font-family: "Marcellus", "Cormorant Garamond", serif;
      font-size: clamp(27.3px, 2.99vw, 46.8px);
      line-height: 1.08;
      letter-spacing: -0.04em;
      color: #10211f;
    }

    .de-faq__list {
      display: grid;
      gap: 1rem;
      width: min(960px, 100%);
      max-width: min(960px, calc(100vw - 2rem));
      margin: 0 auto;
    }

    .de-faq__item {
      border: 1px solid rgba(16, 33, 31, 0.12);
      border-radius: 1.5rem;
      background: rgba(255, 255, 255, 0.58);
      box-shadow: 0 18px 38px rgba(16, 33, 31, 0.08);
      backdrop-filter: blur(10px);
      overflow: hidden;
      transition: border-color 0.24s ease, box-shadow 0.24s ease;
    }

    .de-faq__item.is-open {
      border-color: rgba(16, 33, 31, 0.12);
    }

    body.wp-theme-generatepress.dj-piano-page .de-faq__item h3 {
      margin: 1em 0;
      font-size: 1.17em;
      font-weight: 700;
      line-height: normal;
    }

    .de-faq__q {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.4rem;
      margin: 0;
      border: 0;
      background: transparent;
      padding: 1.25rem 4.5rem 1.25rem 1.4rem;
      cursor: pointer;
      text-align: left;
      font-family: "Montserrat", "Poppins", sans-serif;
      font-size: clamp(1.05rem, 1.5vw, 1.3rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.03em;
      color: #10211f;
    }

    body.wp-theme-generatepress.dj-piano-page .de-faq__q,
    body.wp-theme-generatepress.dj-piano-page .de-faq__q:hover,
    body.wp-theme-generatepress.dj-piano-page .de-faq__q:focus,
    body.wp-theme-generatepress.dj-piano-page .de-faq__q:active,
    body.wp-theme-generatepress.dj-piano-page .de-faq__q:focus-visible {
      background: transparent;
      border: 0;
      box-shadow: none;
      color: #10211f;
      outline: none;
    }

    .de-faq__q-text {
      display: block;
      flex: 1 1 auto;
    }

    .de-faq__q-icon {
      position: relative;
      flex: 0 0 16px;
      width: 16px;
      height: 16px;
      color: #16a89f;
    }

    .de-faq__q-icon::before,
    .de-faq__q-icon::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 16px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      transform: translate(-50%, -50%);
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .de-faq__q-icon::after {
      transform: translate(-50%, -50%) rotate(90deg);
    }

    .de-faq__item.is-open .de-faq__q-icon::after {
      opacity: 0;
    }

    .de-faq__a {
      display: grid;
      grid-template-rows: 0fr;
      margin: 0;
      opacity: 0;
      transition: grid-template-rows 0.3s ease, opacity 0.24s ease;
    }

    .de-faq__item.is-open .de-faq__a {
      grid-template-rows: 1fr;
      opacity: 1;
    }

    .de-faq__a-inner {
      overflow: hidden;
    }

    .de-faq__a-copy {
      padding: 0 1.4rem 1.35rem;
      font-family: "Open Sans", sans-serif;
      font-size: clamp(0.98rem, 1.05vw, 1.06rem);
      line-height: 1.72;
      color: rgba(16, 33, 31, 0.8);
    }

    .de-faq__cta {
      display: flex;
      justify-content: center;
      margin-top: clamp(1.5rem, 3vw, 2.4rem);
      transform: translateY(-15px);
    }

    @keyframes djPianoHeroKenBurns {
      0% {
        transform: scale(1.08) translateY(-2%);
      }
      100% {
        transform: scale(1) translateY(0);
      }
    }

    @keyframes djPianoReveal {
      0% {
        opacity: 0;
        transform: translateY(18px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes djPianoWaveform {
      0%, 100% {
        transform: scaleY(0.42);
        opacity: 0.7;
      }
      50% {
        transform: scaleY(1);
        opacity: 1;
      }
    }

    @media (max-width: 1100px) {
      .dj-piano-hero__title {
        white-space: normal;
      }

      .dj-piano-hero__tag {
        white-space: normal;
      }

      .service-overview__grid,
      .reasons__grid {
        grid-template-columns: 1fr;
      }

      .dj-piano-parallax-band {
        background-attachment: scroll;
      }

      .de-faq {
        padding: clamp(3.6rem, 6vw, 5.4rem) 0;
      }

      .de-faq__wrap {
        width: min(1540px, calc(100vw - 1.5rem));
      }

    }

    @media (max-width: 720px) {
      .dj-piano-hero {
        min-height: clamp(382px, 56vh, 485px);
      }

      .dj-piano-hero__content {
        padding-top: 4.85rem;
        padding-bottom: 2.4rem;
      }

      .dj-piano-hero__slide {
        background-position: center center;
      }

      .dj-piano-hero__eyebrow {
        position: relative;
        top: 10px;
      }

      .dj-piano-hero__tag {
        display: none;
      }

      .dj-piano-hero__mobile-pill {
        appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        width: auto;
        max-width: calc(100vw - 2rem);
        margin-top: 0.9rem;
        padding: 0.68rem 1rem 0.62rem;
        border: 1px solid rgba(46, 194, 188, 0.48);
        border-radius: 999px;
        background:
          linear-gradient(135deg, rgba(46, 194, 188, 0.24), rgba(46, 194, 188, 0.08)),
          rgba(7, 10, 10, 0.68);
        box-shadow:
          0 14px 30px rgba(0, 0, 0, 0.28),
          inset 0 1px 0 rgba(255, 255, 255, 0.14);
        color: #f7f3eb;
        cursor: pointer;
        font-family: "Oswald SemiBold", "Oswald", "Montserrat", sans-serif;
        font-size: clamp(0.84rem, 4.3vw, 1.02rem);
        line-height: 1;
        letter-spacing: 0.045em;
        text-transform: uppercase;
        text-shadow:
          0 8px 18px rgba(0, 0, 0, 0.28),
          0 0 16px rgba(46, 194, 188, 0.16);
        transition:
          transform 240ms cubic-bezier(.22, 1, .36, 1),
          border-color 220ms ease,
          background 220ms ease,
          box-shadow 220ms ease;
      }

      .dj-piano-hero__mobile-pill:hover,
      .dj-piano-hero__mobile-pill:focus-visible,
      .dj-piano-hero.is-mobile-pill-open .dj-piano-hero__mobile-pill {
        border-color: rgba(46, 194, 188, 0.78);
        background:
          linear-gradient(135deg, rgba(46, 194, 188, 0.34), rgba(46, 194, 188, 0.12)),
          rgba(7, 10, 10, 0.78);
        box-shadow:
          0 16px 34px rgba(0, 0, 0, 0.32),
          0 0 0 5px rgba(46, 194, 188, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.16);
        transform: translateY(-1px);
        outline: none;
      }

      .dj-piano-hero__mobile-pill-arrow {
        display: inline-block;
        transform: translateY(-1px);
        transition: transform 240ms cubic-bezier(.22, 1, .36, 1);
      }

      .dj-piano-hero.is-mobile-pill-open .dj-piano-hero__mobile-pill-arrow {
        transform: translate(2px, -1px) rotate(90deg);
      }

      .dj-piano-hero__wave-toggle {
        display: none;
      }

      .dj-piano-hero__snippet {
        max-width: 100%;
        margin-top: 1.3rem;
        padding: 0;
        max-height: none;
        overflow: visible;
        opacity: 1;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        clip-path: none;
        transform: none;
        pointer-events: auto;
      }

      .dj-piano-hero.is-mobile-pill-ready .dj-piano-hero__snippet {
        max-width: min(100%, calc(100vw - 2rem));
        margin-top: 0.78rem;
        padding: 0 1rem;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        border: 1px solid transparent;
        border-radius: 1.2rem;
        background: rgba(7, 10, 10, 0);
        box-shadow: none;
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
        clip-path: inset(0 0 100% 0 round 1.2rem);
        transform: translateY(-8px) scale(0.985);
        pointer-events: none;
        transition:
          max-height 520ms cubic-bezier(.22, 1, .36, 1),
          padding 320ms ease,
          opacity 260ms ease,
          border-color 240ms ease,
          background 280ms ease,
          box-shadow 280ms ease,
          clip-path 520ms cubic-bezier(.22, 1, .36, 1),
          transform 520ms cubic-bezier(.22, 1, .36, 1),
          backdrop-filter 280ms ease;
      }

      .dj-piano-hero.is-mobile-pill-ready.is-mobile-pill-open .dj-piano-hero__snippet {
        padding: 0.9rem 1rem;
        max-height: 16rem;
        opacity: 1;
        border-color: rgba(46, 194, 188, 0.24);
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
          rgba(7, 10, 10, 0.72);
        box-shadow:
          0 18px 38px rgba(0, 0, 0, 0.28),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        clip-path: inset(0 0 0 0 round 1.2rem);
        transform: translateY(0) scale(1);
        pointer-events: auto;
      }

      .dj-piano-parallax-band {
        height: clamp(240px, 58vw, 360px);
        background-position: center center;
      }

      .service-overview__eyebrow-icon {
        top: -67px;
        left: -20px;
      }

      .dj-piano-hero__snippet p,
      .service-overview__copy p,
      .service-overview__list li,
      .reason-text {
        font-size: 0.97rem;
      }

      .reasons-section,
      .music-mashup-grid {
        background:
          linear-gradient(180deg, rgba(7, 12, 12, 0.82), rgba(7, 12, 12, 0.82)),
          var(--reasons-bg-image, var(--music-mashup-bg-image, none)) center center / cover no-repeat,
          #0b0b0c;
      }

      .reasons-section {
        padding-top: 4rem;
      }

      .reasons-section::before,
      .reasons-section::after,
      .music-mashup-grid::before {
        content: none;
      }

      .reasons-section__divider {
        display: none;
      }

      .reasons-section .msx-overlay,
      .music-mashup-grid .msx-overlay {
        display: none;
      }

      .reasons__wrap {
        width: 100%;
      }

      .reasons__head {
        width: min(48rem, calc(100vw - 2rem));
        padding-inline: 1rem;
      }

      .reasons__grid {
        display: flex;
        gap: 0.85rem;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        padding: 0 1rem 0.4rem;
        scrollbar-width: thin;
        scrollbar-color: rgba(73, 187, 178, 0.75) rgba(255, 255, 255, 0.08);
      }

      .reasons__grid::-webkit-scrollbar {
        height: 8px;
      }

      .reasons__grid::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.08);
      }

      .reasons__grid::-webkit-scrollbar-thumb {
        background: rgba(73, 187, 178, 0.75);
        border-radius: 999px;
      }

      .reason-card:nth-child(odd),
      .reason-card:nth-child(even) {
        transform: translate3d(0, 44px, 0);
      }

      .reason-card {
        flex: 0 0 72vw;
        min-height: 100%;
        padding: 1.2rem;
        scroll-snap-align: start;
      }

      .reason-number {
        margin-bottom: 0.6rem;
        font-size: clamp(2.1rem, 8vw, 2.8rem);
      }

      .reason-title {
        margin-bottom: 0.55rem;
        font-size: clamp(0.92rem, 3.8vw, 1.02rem);
      }

      .reason-text {
        font-size: 0.92rem;
        line-height: 1.62;
      }

      .music-duo-grid .dj-video-grid__list {
        grid-template-columns: 1fr;
        max-width: 760px;
      }

      .dj-piano-burst-band {
        min-height: clamp(320px, 48vw, 520px);
      }

      .dj-piano-burst-band__copy {
        width: min(100%, calc(100vw - 1.5rem));
      }

      .dj-piano-burst-band__copy::before,
      .dj-piano-burst-band__eyebrow,
      .dj-piano-burst-band__title {
        transform: none;
      }

      .dj-piano-burst-band__copy::before {
        width: min(520px, 90vw);
        height: min(240px, 50vw);
      }

      .music-mashup-grid .dj-video-grid__list {
        max-width: none;
      }

      .music-mashup-grid .dj-video-grid__list--slider {
        overflow: visible;
        padding: 0;
      }

      .music-mashup-grid .dcpvs--shaped {
        justify-content: flex-start;
        padding-bottom: 0;
      }

      .music-mashup-grid .dcpvs--shaped .dcpvs-track {
        height: min(72vw, 360px);
      }

      .music-mashup-grid .dcpvs--shaped .dcpvs-slide {
        width: min(72vw, 360px);
      }

      .music-mashup-grid .dcpvs--shaped .dcpvs-caption {
        font-size: 12px;
      }

      .music-mashup-grid .dcpvs--shaped .dcpvs-nav-row,
      .music-mashup-grid .dcpvs--shaped .dcpvs-drag-cue {
        transform: translateY(-90px);
      }

      .music-mashup-grid .dcpvs--shaped .dcpvs-drag-cue {
        position: relative;
        left: auto;
        bottom: auto;
        margin: 0.65rem auto 0;
        font-size: 0.62rem;
      }

      .music-mashup-grid .dcpvs--shaped .dcpvs-nav-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: calc(100% - 1.5rem);
        margin: 0.7rem auto 0;
        padding: 0;
      }

      .music-mashup-grid .dcpvs--shaped .dcpvs-arrow {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 3.3rem;
        height: 3.3rem;
        transform: none;
      }

      .music-mashup-grid .dcpvs--shaped .dcpvs-caption {
        flex: 1 1 auto;
        width: auto;
        margin: 0;
        padding: 0;
        text-align: center;
        line-height: 1.3;
        font-size: 0.72rem;
        letter-spacing: 0.12em;
      }

      .music-mashup-grid .dcpvs--shaped .dcpvs-drag-hand {
        display: none;
      }

      .music-mashup-grid .dcpvs--shaped .dcpvs-swipe-hand {
        display: inline;
      }

      .dj-piano-burst-band {
        display: none;
      }

      .dr-sticky-results__aside {
        margin-top: -30px;
        margin-bottom: 0;
      }

      .dr-sticky-results {
        padding: 48px 0 0;
      }

      .dr-sticky-results__eyebrow {
        position: relative;
        top: 10px;
        font-size: 24px;
        transform: translate3d(-110px, 28px, 0) rotate(-7.4deg);
      }

      .dr-sticky-results.is-visible .dr-sticky-results__eyebrow {
        transform: translate3d(-110px, 28px, 0) rotate(-7.4deg);
      }

      .dr-sticky-results__title {
        font-size: clamp(2.04rem, 10.2vw, 3.825rem);
      }

      .dr-sticky-results__intro {
        margin-bottom: 0;
      }

      .dr-sticky-results__panel,
      .dr-sticky-results__intro {
        min-height: 0;
      }

      .dr-sticky-results__body {
        padding-top: 0;
        padding-bottom: 0;
      }

      .dr-sticky-results__rail {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem;
        overflow: visible;
        padding: 0 0.9rem;
        padding-top: 0;
        align-items: start;
      }

      .dr-sticky-results__item {
        width: auto;
        min-width: 0;
        padding: 14px 12px 12px;
      }

      .dr-sticky-results__item > div {
        min-width: 0;
      }

      .dr-sticky-results__icon {
        top: 12px;
        right: 12px;
        width: 48px;
        height: 48px;
      }

      .dr-sticky-results__item-head {
        margin-bottom: 8px;
        padding-bottom: 10px;
      }

      .dr-sticky-results__item-title {
        max-width: calc(100% - 54px);
        font-size: calc(0.86rem - 2px);
        line-height: 1.12;
        letter-spacing: 0.08em;
      }

      .dr-sticky-results__item-head::after {
        width: min(56px, 46%);
        max-width: 56px;
        height: 2px;
      }

      .dr-sticky-results__item-copy {
        padding: 4px 58px 0 0;
        font-size: calc(0.76rem - 2px);
        line-height: 1.42;
      }

      .de-faq {
        padding: 2.8rem 0;
      }

      .de-faq__intro {
        max-width: 19ch;
        margin-bottom: 1.8rem;
      }

      .de-faq__list {
        max-width: calc(100vw - 1rem);
      }

      .de-faq__q {
        padding: 1.1rem 1.1rem;
        gap: 0.75rem;
      }

      .de-faq__a-copy {
        padding: 0 1.1rem 1.15rem;
      }

      .de-faq__q-icon {
        margin-left: auto;
        transform: translateX(0);
      }

      .de-faq__cta {
        margin-top: 1.5rem;
        transform: translateY(-10px);
      }

      .dr-sticky-results__equalizer {
        display: none;
      }
    }

    @media (max-width: 375px) {
      .dr-sticky-results__item-title {
        font-size: calc(0.86rem - 3px);
      }

      .dr-sticky-results__item-copy {
        font-size: calc(0.76rem - 3px);
      }
    }

    @media (max-width: 390px) {
      .dj-piano-burst-band__eyebrow {
        transform: translateX(-88px);
      }
    }

    @media (min-width: 1025px) {
      .dj-piano-burst-band {
        display: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .dj-piano-hero__slide.is-active,
      .dj-piano-reveal {
        animation: none !important;
      }

      .dj-piano-parallax-band {
        background-attachment: scroll;
      }

      .dj-piano-reveal {
        opacity: 1 !important;
        transform: none !important;
      }

      .dj-piano-hero__wave-toggle-bars span {
        animation: none;
      }

      .dj-piano-hero.is-wave-ready .dj-piano-hero__snippet,
      .dj-piano-hero__wave-toggle,
      .dj-piano-hero__wave-toggle-icon::before {
        transition: none !important;
      }

      .reason-card,
      .reason-card:nth-child(odd),
      .reason-card:nth-child(even) {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
    }

    :root {
      --event-drawer-accent: #16a89f;
      --event-drawer-accent-soft: rgba(22, 168, 159, 0.12);
      --event-drawer-surface: rgba(247, 241, 232, 0.96);
      --event-drawer-border: rgba(60, 67, 64, 0.12);
      --event-drawer-ink: #2e3431;
    }

    .lux-event-drawer {
      position: fixed;
      bottom: 18px;
      right: 0;
      z-index: 80;
      transform: none;
      pointer-events: none;
      transition: opacity 0.24s ease, visibility 0.24s ease;
    }

    .lux-event-drawer.is-hidden {
      opacity: 0;
      visibility: hidden;
    }

    .lux-event-drawer__panel {
      --drawer-tab-size: 56px;
      width: min(340px, calc(100vw - 20px));
      display: grid;
      grid-template-columns: var(--drawer-tab-size) minmax(0, 1fr);
      align-items: stretch;
      border: 1px solid var(--event-drawer-border);
      border-radius: 28px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.12)),
        var(--event-drawer-surface);
      box-shadow:
        0 24px 60px rgba(31, 35, 33, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.42) inset;
      backdrop-filter: blur(18px) saturate(135%);
      -webkit-backdrop-filter: blur(18px) saturate(135%);
      overflow: hidden;
      transform: translateX(calc(100% - var(--drawer-tab-size)));
      transition:
        transform 0.5s cubic-bezier(.22, 1, .36, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
      pointer-events: auto;
    }

    .lux-event-drawer:hover .lux-event-drawer__panel,
    .lux-event-drawer.is-open .lux-event-drawer__panel,
    .lux-event-drawer__panel:focus-within {
      transform: translateX(0);
      box-shadow:
        0 28px 74px rgba(31, 35, 33, 0.24),
        0 0 0 1px rgba(255, 255, 255, 0.55) inset;
      border-color: rgba(22, 168, 159, 0.22);
    }

    .lux-event-drawer__trigger {
      appearance: none;
      border: 0;
      border-right: 1px solid rgba(12, 92, 86, 0.26);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)),
        linear-gradient(180deg, #1ab6ad 0%, #11988f 100%);
      color: #f8f4ed;
      font: inherit;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 1rem 0.55rem;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      letter-spacing: 0.26em;
      text-transform: uppercase;
      font-family: "Oswald", "Montserrat", sans-serif;
      font-size: 0.9rem;
      line-height: 1;
      position: relative;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .lux-event-drawer__trigger::before,
    .lux-event-drawer__trigger::after {
      content: "";
      position: absolute;
      left: 50%;
      width: 1px;
      transform: translateX(-50%);
      background: linear-gradient(180deg, rgba(248, 244, 237, 0), rgba(248, 244, 237, 0.95), rgba(248, 244, 237, 0));
    }

    .lux-event-drawer__trigger::before {
      top: 16px;
      height: 26px;
    }

    .lux-event-drawer__trigger::after {
      bottom: 16px;
      height: 26px;
    }

    .lux-event-drawer__trigger:hover,
    .lux-event-drawer__trigger:focus-visible {
      color: #fff;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03)),
        linear-gradient(180deg, #20c4bb 0%, #16a89f 100%);
      outline: none;
    }

    .lux-event-drawer__body {
      position: relative;
      padding: 0.75rem;
      background:
        radial-gradient(circle at top right, var(--event-drawer-accent-soft), transparent 38%),
        rgba(247, 241, 232, 0.98);
    }

    .lux-event-drawer__links {
      display: grid;
      gap: 0.34rem;
    }

    .lux-event-drawer__link {
      display: block;
      align-items: center;
      padding: 0.62rem 0.78rem;
      border: 1px solid rgba(54, 63, 59, 0.08);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.44);
      color: var(--event-drawer-ink);
      text-decoration: none;
      transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        background 0.28s ease,
        box-shadow 0.28s ease;
    }

    .lux-event-drawer__link:hover,
    .lux-event-drawer__link:focus-visible {
      transform: translateX(-3px);
      border-color: rgba(22, 168, 159, 0.24);
      background: rgba(255, 255, 255, 0.72);
      box-shadow: 0 14px 20px rgba(31, 35, 33, 0.1);
      outline: none;
    }

    .lux-event-drawer__label {
      display: block;
      font-family: "Montserrat", sans-serif;
      font-size: 0.9rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .lux-event-drawer__link[aria-current="page"] {
      border-color: rgba(22, 168, 159, 0.52);
      background: linear-gradient(90deg, rgba(22, 168, 159, 0.16), rgba(255, 255, 255, 0.54));
      box-shadow:
        0 16px 26px rgba(31, 35, 33, 0.12),
        0 0 0 1px rgba(22, 168, 159, 0.14) inset;
    }

    .lux-event-drawer__link[aria-current="page"] .lux-event-drawer__label {
      color: #0e6e68;
    }

    @media (max-width: 959px) {
      .lux-event-drawer {
        bottom: 14px;
        left: 12px;
      }

      .lux-event-drawer__panel {
        --drawer-tab-size: 54px;
        width: min(100%, 380px);
        margin-left: auto;
        grid-template-columns: 1fr;
        grid-template-rows: var(--drawer-tab-size) minmax(0, 1fr);
        border-radius: 28px 28px 0 0;
        transform: translateY(calc(100% - var(--drawer-tab-size)));
      }

      .lux-event-drawer:hover .lux-event-drawer__panel,
      .lux-event-drawer.is-open .lux-event-drawer__panel,
      .lux-event-drawer__panel:focus-within {
        transform: translateY(0);
      }

      .lux-event-drawer__trigger {
        writing-mode: horizontal-tb;
        transform: none;
        letter-spacing: 0.16em;
        font-size: 0.88rem;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0 1rem;
      }

      .lux-event-drawer__trigger::before,
      .lux-event-drawer__trigger::after {
        top: 50%;
        left: auto;
        width: 24px;
        height: 1px;
        transform: translateY(-50%);
        background: linear-gradient(90deg, rgba(88, 199, 197, 0), rgba(88, 199, 197, 0.95), rgba(88, 199, 197, 0));
      }

      .lux-event-drawer__trigger::before {
        left: 14px;
      }

      .lux-event-drawer__trigger::after {
        right: 14px;
      }
    }
    .lux-event-drawer {
      position: fixed;
      bottom: calc(18px + 125px);
      right: 0;
      z-index: 80;
      transform: none;
      pointer-events: none;
      transition: opacity 0.24s ease, visibility 0.24s ease;
    }

    .lux-event-drawer.is-hidden {
      opacity: 0;
      visibility: hidden;
    }

    .lux-event-drawer__panel {
      --drawer-tab-size: 56px;
      width: min(340px, calc(100vw - 20px));
      display: grid;
      grid-template-columns: var(--drawer-tab-size) minmax(0, 1fr);
      align-items: stretch;
      border: 1px solid var(--event-drawer-border);
      border-radius: 28px 0 0 28px !important;
      border-top-right-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.12)),
        var(--event-drawer-surface);
      box-shadow:
        0 24px 60px rgba(31, 35, 33, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.42) inset;
      backdrop-filter: blur(18px) saturate(135%);
      -webkit-backdrop-filter: blur(18px) saturate(135%);
      overflow: hidden;
      transform: translateX(calc(100% - var(--drawer-tab-size)));
      transition:
        transform 0.5s cubic-bezier(.22, 1, .36, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
      pointer-events: auto;
    }

    .lux-event-drawer:hover .lux-event-drawer__panel,
    .lux-event-drawer.is-open .lux-event-drawer__panel,
    .lux-event-drawer__panel:focus-within {
      transform: translateX(0);
      box-shadow:
        0 28px 74px rgba(31, 35, 33, 0.24),
        0 0 0 1px rgba(255, 255, 255, 0.55) inset;
      border-color: rgba(22, 168, 159, 0.22);
    }

    .lux-event-drawer__trigger {
      appearance: none;
      border: 0;
      border-right: 1px solid rgba(12, 92, 86, 0.26);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)),
        linear-gradient(180deg, #1ab6ad 0%, #11988f 100%);
      color: #f8f4ed;
      font: inherit;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 1rem 0.55rem;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      letter-spacing: 0.34em;
      text-transform: uppercase;
      font-family: "Oswald", "Montserrat", sans-serif;
      font-size: 0.78rem;
      line-height: 1;
      position: relative;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .lux-event-drawer__trigger::before,
    .lux-event-drawer__trigger::after {
      content: "";
      position: absolute;
      left: 50%;
      width: 1px;
      transform: translateX(-50%);
      background: linear-gradient(180deg, rgba(248, 244, 237, 0), rgba(248, 244, 237, 0.95), rgba(248, 244, 237, 0));
    }

    .lux-event-drawer__trigger::before {
      top: 16px;
      height: 42px;
    }

    .lux-event-drawer__trigger::after {
      bottom: 16px;
      height: 42px;
    }

    .lux-event-drawer__trigger:hover,
    .lux-event-drawer__trigger:focus-visible {
      color: #fff;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03)),
        linear-gradient(180deg, #20c4bb 0%, #16a89f 100%);
      outline: none;
    }

    .lux-event-drawer__body {
      position: relative;
      padding: 0.75rem;
      background:
        radial-gradient(circle at top right, var(--event-drawer-accent-soft), transparent 38%),
        rgba(247, 241, 232, 0.98);
    }

    .lux-event-drawer__links {
      display: grid;
      gap: 0.34rem;
    }

    .lux-event-drawer__link {
      display: block;
      align-items: center;
      padding: 0.62rem 0.78rem;
      border: 1px solid rgba(54, 63, 59, 0.08);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.44);
      color: var(--event-drawer-ink);
      text-decoration: none;
      transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        background 0.28s ease,
        box-shadow 0.28s ease;
    }

    .lux-event-drawer__link:hover,
    .lux-event-drawer__link:focus-visible {
      transform: translateX(-3px);
      border-color: rgba(22, 168, 159, 0.24);
      background: rgba(255, 255, 255, 0.72);
      box-shadow: 0 14px 20px rgba(31, 35, 33, 0.1);
      outline: none;
    }

    .lux-event-drawer__label {
      display: block;
      font-family: "Montserrat", sans-serif;
      font-size: 0.9rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .lux-event-drawer__meta {
      display: block;
      margin-top: 0.08rem;
      color: rgba(46, 52, 49, 0.58);
      font-size: 0.66rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .lux-event-drawer__link[aria-current="page"] {
      border-color: rgba(22, 168, 159, 0.52);
      background: linear-gradient(90deg, rgba(22, 168, 159, 0.16), rgba(255, 255, 255, 0.54));
      box-shadow:
        0 16px 26px rgba(31, 35, 33, 0.12),
        0 0 0 1px rgba(22, 168, 159, 0.14) inset;
    }

    .lux-event-drawer__link[aria-current="page"] .lux-event-drawer__label {
      color: #0e6e68;
    }

    @media (max-width: 1024px) {
      .lux-event-drawer {
        right: 0;
        bottom: 20px;
        left: auto;
      }

      .lux-event-drawer .lux-event-drawer__panel {
        --drawer-tab-size: 36px;
        width: min(180px, calc(100vw - 10px));
        grid-template-columns: var(--drawer-tab-size) minmax(0, 1fr);
        grid-template-rows: none;
        align-items: stretch;
        border: 0;
        border-radius: 0 !important;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        overflow: visible;
        transform: translateX(calc(100% - var(--drawer-tab-size)));
      }

      .lux-event-drawer:hover .lux-event-drawer__panel,
      .lux-event-drawer.is-open .lux-event-drawer__panel,
      .lux-event-drawer .lux-event-drawer__panel:focus-within {
        transform: translateX(0);
        box-shadow: none;
        border-color: transparent;
      }

      .lux-event-drawer .lux-event-drawer__trigger {
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        padding: 0;
        background: center / 100% 100% no-repeat url("./assets/slide-out-mobile-menu.svg");
        transform: none;
      }

      .lux-event-drawer .lux-event-drawer__trigger::before,
      .lux-event-drawer .lux-event-drawer__trigger::after {
        content: none;
        display: none !important;
      }

      .lux-event-drawer .lux-event-drawer__trigger-label {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        letter-spacing: 0.06em;
        font-size: 0.94rem;
        line-height: 1;
        color: #f8f4ed;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
      }

      .lux-event-drawer .lux-event-drawer__body {
        padding: 0.46rem 0.46rem 0.4rem 0.4rem;
        max-height: none;
        overflow: visible;
        opacity: 1;
        background: #f7f1e8;
        border: 1px solid rgba(214, 203, 182, 0.92);
        border-left: 0;
        border-radius: 0;
        box-shadow: none;
        transition: none;
      }

      .lux-event-drawer:hover .lux-event-drawer__body,
      .lux-event-drawer.is-open .lux-event-drawer__body,
      .lux-event-drawer .lux-event-drawer__panel:focus-within .lux-event-drawer__body {
        padding: 0.46rem 0.46rem 0.4rem 0.4rem;
      }

      .lux-event-drawer .lux-event-drawer__links {
        display: flex;
        flex-direction: column;
        gap: 0;
        counter-reset: mobile-event-types;
      }

      .lux-event-drawer .lux-event-drawer__link {
        position: relative;
        padding: 0.4rem 0 0.38rem;
        border: 0;
        border-bottom: 1px solid rgba(198, 183, 154, 0.72);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        counter-increment: mobile-event-types;
      }

      .lux-event-drawer .lux-event-drawer__link:last-child {
        border-bottom: 0;
      }

      .lux-event-drawer .lux-event-drawer__link::before {
        content: counter(mobile-event-types, decimal-leading-zero);
        display: block;
        margin-bottom: 0.12rem;
        color: rgba(73, 77, 74, 0.58);
        font-family: "Montserrat", sans-serif;
        font-size: 0.54rem;
        letter-spacing: 0.13em;
      }

      .lux-event-drawer .lux-event-drawer__label {
        font-size: 0.8rem;
        line-height: 1;
        letter-spacing: 0.1em;
      }

      .lux-event-drawer .lux-event-drawer__meta {
        font-size: 0.44rem;
        margin-top: 0.08rem;
        line-height: 1.1;
        letter-spacing: 0.1em;
        max-width: 14ch;
      }

      .lux-event-drawer .lux-event-drawer__link:hover,
      .lux-event-drawer .lux-event-drawer__link:focus-visible {
        transform: none;
        border-color: rgba(164, 151, 124, 0.82);
        background: transparent;
        box-shadow: none;
      }

      .lux-event-drawer .lux-event-drawer__link[aria-current="page"] {
        border-color: rgba(164, 151, 124, 0.82);
        background: transparent;
        box-shadow: none;
      }

      .lux-event-drawer .lux-event-drawer__link[aria-current="page"]::before,
      .lux-event-drawer .lux-event-drawer__link[aria-current="page"] .lux-event-drawer__label {
        color: #178a84;
      }
    }

    @media (max-width: 767px) {
      .lux-event-drawer {
        bottom: 10px;
      }

      .lux-event-drawer .lux-event-drawer__panel {
        width: min(180px, calc(100vw - 8px));
      }

      .lux-event-drawer .lux-event-drawer__body {
        padding: 0.42rem 0.42rem 0.36rem 0.36rem;
      }

      .lux-event-drawer:hover .lux-event-drawer__body,
      .lux-event-drawer.is-open .lux-event-drawer__body,
      .lux-event-drawer .lux-event-drawer__panel:focus-within .lux-event-drawer__body {
        padding: 0.42rem 0.42rem 0.36rem 0.36rem;
      }

      .lux-event-drawer .lux-event-drawer__link {
        padding: 0.36rem 0 0.34rem;
      }

      .lux-event-drawer .lux-event-drawer__link::before {
        margin-bottom: 0.14rem;
        font-size: 0.48rem;
      }

      .lux-event-drawer .lux-event-drawer__label {
        font-size: 0.74rem;
        letter-spacing: 0.09em;
      }

      .lux-event-drawer .lux-event-drawer__meta {
        font-size: 0.42rem;
        margin-top: 0.07rem;
        line-height: 1.08;
        letter-spacing: 0.09em;
      }
    }

    @media (min-width: 1025px) {
      .lux-event-drawer {
        bottom: calc(18px + 125px);
        right: 0;
      }

      .lux-event-drawer .lux-event-drawer__panel {
        --drawer-tab-size: 58px;
        width: min(286px, calc(100vw - 24px));
        grid-template-columns: var(--drawer-tab-size) minmax(0, 1fr);
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        overflow: visible;
        transform: translateX(calc(100% - var(--drawer-tab-size)));
      }

      .lux-event-drawer:hover .lux-event-drawer__panel,
      .lux-event-drawer.is-open .lux-event-drawer__panel,
      .lux-event-drawer .lux-event-drawer__panel:focus-within {
        transform: translateX(0);
        box-shadow: none;
        border-color: transparent;
      }

      .lux-event-drawer .lux-event-drawer__trigger {
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 0;
        padding: 0;
        border: 0;
        background: center / 100% 100% no-repeat url("https://charlestonweddingdjs.com/wp-content/uploads/2026/05/drawer-tabe-desktop.png");
        writing-mode: horizontal-tb;
        transform: none;
        position: relative;
        z-index: 2;
      }

      .lux-event-drawer .lux-event-drawer__trigger::before,
      .lux-event-drawer .lux-event-drawer__trigger::after {
        content: none;
        display: none !important;
      }

      .lux-event-drawer .lux-event-drawer__trigger-label {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        color: #f8f4ed;
        font-family: "Oswald", "Montserrat", sans-serif;
        font-size: 1rem;
        line-height: 1;
        letter-spacing: 0.08em;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.14);
      }

      .lux-event-drawer .lux-event-drawer__body {
        padding: 0.68rem 0.88rem 0.66rem 0.76rem;
        margin-left: 0;
        background: #f7f1e8;
        border: 1px solid rgba(214, 203, 182, 0.92);
        border-right: 0;
        border-radius: 0;
        box-shadow: 0 20px 48px rgba(11, 16, 15, 0.24);
        position: relative;
        z-index: 1;
      }

      .lux-event-drawer .lux-event-drawer__links {
        display: flex;
        flex-direction: column;
        gap: 0;
        counter-reset: desktop-services;
      }

      .lux-event-drawer .lux-event-drawer__link {
        position: relative;
        padding: 0.36rem 0 0.34rem;
        border: 0;
        border-bottom: 1px solid rgba(198, 183, 154, 0.72);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        counter-increment: desktop-services;
      }

      .lux-event-drawer .lux-event-drawer__link:last-child {
        border-bottom: 0;
      }

      .lux-event-drawer .lux-event-drawer__link::before {
        content: counter(desktop-services, decimal-leading-zero);
        display: block;
        margin-bottom: 0.1rem;
        color: rgba(73, 77, 74, 0.58);
        font-family: "Montserrat", sans-serif;
        font-size: 0.54rem;
        letter-spacing: 0.13em;
      }

      .lux-event-drawer .lux-event-drawer__label {
        font-size: 0.86rem;
        line-height: 1.02;
        letter-spacing: 0.1em;
        max-width: 11ch;
      }

      .lux-event-drawer .lux-event-drawer__link:hover,
      .lux-event-drawer .lux-event-drawer__link:focus-visible {
        transform: translateX(-4px);
        border-bottom-color: rgba(198, 183, 154, 0.72);
        background: transparent;
        box-shadow: none;
        color: #178a84;
      }

      .lux-event-drawer .lux-event-drawer__link:hover::before,
      .lux-event-drawer .lux-event-drawer__link:focus-visible::before,
      .lux-event-drawer .lux-event-drawer__link[aria-current="page"]::before,
      .lux-event-drawer .lux-event-drawer__link[aria-current="page"] .lux-event-drawer__label {
        color: #178a84;
      }

      .lux-event-drawer .lux-event-drawer__link[aria-current="page"] {
        border-bottom-color: rgba(198, 183, 154, 0.72);
        background: transparent;
        box-shadow: none;
      }
    }
    @media (min-width: 1024px) {
      .lux-event-drawer {
        bottom: calc(18px + 125px) !important;
        right: 0 !important;
        left: auto !important;
      }

      .lux-event-drawer .lux-event-drawer__panel {
        --drawer-tab-size: 58px;
        display: grid;
        grid-template-columns: var(--drawer-tab-size) minmax(0, 1fr);
        width: min(286px, calc(100vw - 24px));
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
        transform: translateX(calc(100% - var(--drawer-tab-size))) !important;
      }

      .lux-event-drawer:hover .lux-event-drawer__panel,
      .lux-event-drawer.is-open .lux-event-drawer__panel,
      .lux-event-drawer .lux-event-drawer__panel:focus-within {
        transform: translateX(0) !important;
        box-shadow: none;
        border-color: transparent;
      }

      .lux-event-drawer .lux-event-drawer__trigger {
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 0;
        padding: 0 !important;
        border: 0 !important;
        background: center / 100% 100% no-repeat url("https://charlestonweddingdjs.com/wp-content/uploads/2026/05/drawer-tabe-desktop.png") !important;
        writing-mode: horizontal-tb;
        transform: none !important;
        position: relative;
        z-index: 2;
      }

      .lux-event-drawer .lux-event-drawer__trigger::before,
      .lux-event-drawer .lux-event-drawer__trigger::after {
        content: none !important;
        display: none !important;
      }

      .lux-event-drawer .lux-event-drawer__trigger-label {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        color: #f8f4ed;
        font-family: "Oswald", "Montserrat", sans-serif;
        font-size: 1rem;
        line-height: 1;
        letter-spacing: 0.08em;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.14);
      }

      .lux-event-drawer .lux-event-drawer__body {
        display: block;
        max-height: none;
        overflow: visible;
        opacity: 1;
        margin-left: 0;
        padding: 0.68rem 0.88rem 0.66rem 0.76rem !important;
        background: #f7f1e8;
        border: 1px solid rgba(214, 203, 182, 0.92);
        border-right: 0;
        border-radius: 0;
        box-shadow: 0 20px 48px rgba(11, 16, 15, 0.24);
        position: relative;
        z-index: 1;
      }
    }


/* Final Services tab parity: exact live Add-ons silhouette, size and label. */
html body .lux-event-drawer {
  z-index: 250000 !important;
}
html body .lux-event-drawer .lux-event-drawer__trigger {
  background: transparent url("./assets/slide-out-mobile-menu.svg") center / 100% 100% no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
html body .lux-event-drawer .lux-event-drawer__trigger::before,
html body .lux-event-drawer .lux-event-drawer__trigger::after {
  content: none !important;
  display: none !important;
}
html body .lux-event-drawer .lux-event-drawer__trigger-label {
  font-family: "Oswald", "Montserrat", sans-serif !important;
  font-weight: 400 !important;
  writing-mode: vertical-rl !important;
  transform: rotate(180deg) !important;
}
@media (min-width: 1025px) {
  html body .lux-event-drawer .lux-event-drawer__panel,
  html body .lux-event-drawer .lux-event-drawer__trigger {
    height: 305.484375px !important;
    min-height: 305.484375px !important;
    max-height: 305.484375px !important;
  }
}

/* DJ/Piano correction pass: keep the FAQ CTA on the approved single visual
   baseline, with MORE lifted and the Heatwood FAQ'S word lowered. */
html body.dj-piano-page .de-faq__cta .msx-button.approved-button {
  --approved-button-main-y: -3px;
  --approved-button-script-y: 7px;
  --approved-button-row-y: 0px;
}

/* Desktop video-card hover: the poster stays fully visible and every play
   control resolves to the same solid green button with white ring/triangle. */
@media (min-width: 1025px) {
  html body.dj-piano-page .music-mashup-grid .dcpvs-video-poster:is(:hover, :focus-visible) .dcpvs-play {
    opacity: 1 !important;
  }

  html body.dj-piano-page .music-mashup-grid .dcpvs-video-poster:is(:hover, :focus-visible) .dcpvs-play__fill {
    fill: #19b5aa !important;
    opacity: 1 !important;
  }

  html body.dj-piano-page .music-mashup-grid .dcpvs-video-poster:is(:hover, :focus-visible) .dcpvs-play .stroke-dotted {
    stroke: #fff !important;
    stroke-width: 2.4px !important;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    animation: none !important;
  }

  html body.dj-piano-page .music-mashup-grid .dcpvs-video-poster:is(:hover, :focus-visible) .dcpvs-play .stroke-solid {
    opacity: 0 !important;
  }

  html body.dj-piano-page .music-mashup-grid .dcpvs-video-poster:is(:hover, :focus-visible) .dcpvs-play .vid-icon {
    fill: #fff !important;
    stroke: none !important;
    opacity: 1 !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  html body .lux-event-drawer .lux-event-drawer__panel,
  html body .lux-event-drawer .lux-event-drawer__trigger {
    height: 254.578125px !important;
    min-height: 254.578125px !important;
    max-height: 254.578125px !important;
  }
}
@media (max-width: 767px) {
  html body .lux-event-drawer .lux-event-drawer__panel,
  html body .lux-event-drawer .lux-event-drawer__trigger {
    height: 234.90625px !important;
    min-height: 234.90625px !important;
    max-height: 234.90625px !important;
  }
}

@media (min-width: 1025px) {
  html body.dj-piano-page .lux-event-drawer .lux-event-drawer__body {
    padding: 0.68rem 0.88rem 0.66rem 0.76rem !important;
    box-sizing: border-box !important;
  }

  html body.dj-piano-page .lux-event-drawer .lux-event-drawer__links {
    display: grid !important;
    gap: 0.34rem !important;
  }

  html body.dj-piano-page .lux-event-drawer .lux-event-drawer__link {
    display: block !important;
    padding: 0.62rem 0.78rem !important;
    border: 1px solid rgba(54, 63, 59, 0.08) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.44) !important;
  }

  html body.dj-piano-page .lux-event-drawer .lux-event-drawer__link::before {
    content: none !important;
    display: none !important;
  }

  html body.dj-piano-page .lux-event-drawer .lux-event-drawer__label {
    font-size: 0.9rem !important;
    line-height: normal !important;
    letter-spacing: 0.08em !important;
  }

  html body.dj-piano-page .lux-event-drawer .lux-event-drawer__meta {
    margin-top: 0.08rem !important;
    font-size: 0.66rem !important;
    line-height: normal !important;
    letter-spacing: 0.07em !important;
  }
}

/* The prior section's decorative transition was overlapping the full-width
   DJ/Piano video. Remove that transition on this page only. */
body.dj-piano-page .reasons-section__divider {
  display: none !important;
}