:root {
    --purple: #a21cff;
    --pink: #ff3df0;
    --ink: #0c0716;
    --glass: rgba(14, 8, 26, .78);
    --line: rgba(255, 255, 255, .28)
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body {
    background: #05030c;
    font-family: 'Montserrat', sans-serif;
    color: #fff
}

a {
    color: inherit;
    text-decoration: none
}

ul {
    list-style: none
}

.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    /* background: linear-gradient(90deg, #120a1c 0%, #150c26 35%, #1b1448 48%, #4a1f6e 68%, #a8326f 85%, #d9603f 100%) */
}



.nav {
    position: absolute;
    z-index: 5;
    top: clamp(10px, 2vw, 22px);
    left: clamp(12px, 3vw, 60px);
    right: clamp(12px, 2vw, 30px);
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.5vw, 24px)
}

.brand {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 26px 10px 14px;
    border-radius: 44px;
    background: var(--glass);
    border: 1px solid var(--line);
    box-shadow: 0 0 22px rgba(140, 60, 255, .3);
    backdrop-filter: blur(10px)
}

.brand-mark {
    width: 84px;
    height: 84px;
    margin: -8px 0;
    object-fit: contain;
    flex-shrink: 0
}

.brand span {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.45rem;
    letter-spacing: .02em;
    background: linear-gradient(90deg, #7b2cff, #b84dff, #ff5df0, #c07bff, #6a3dff, #7b2cff);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: dxb-gradient 6s linear infinite
}

@keyframes dxb-gradient {
    to {
        background-position: -300% 0
    }
}

.links-pill {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    height: 72px;
    border-radius: 40px;
    background: var(--glass);
    border: 1px solid var(--line);
    box-shadow: 0 0 22px rgba(140, 60, 255, .25);
    backdrop-filter: blur(10px)
}

.links {
    display: flex;
    gap: clamp(16px, 2.2vw, 48px)
}

.links a {
    position: relative;
    display: block;
    padding: 24px 0;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: none
}

.links a.active::after {
    content: "";
    position: absolute;
    left: -4%;
    right: -4%;
    bottom: 12px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #c05bff, #8a2bff);
    box-shadow: 0 0 10px #a64bff
}

.links a:hover {
    color: #e6b8ff
}

.icons {
    display: flex;
    align-items: center;
    gap: 20px
}

.ico {
    width: 38px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--pink);
    box-shadow: 0 0 16px rgba(255, 61, 240, .6)
}

.ico.ig {
    width: 34px;
    height: 34px;
    border-radius: 10px
}

.ico svg {
    width: 24px
}

.srch {
    background: none;
    border: 0;
    cursor: pointer
}

.srch svg {
    width: 30px
}

.burger {
    display: none;
    background: none;
    border: 0;
    cursor: pointer;
    flex-direction: column;
    gap: 5px
}

.burger i {
    display: block;
    width: 26px;
    height: 2px;
    background: #fff
}

.hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 15vh;
    min-height: 100vh;
    min-height: 100svh;
    padding-bottom: 8vh;
    justify-content: flex-start
}

.hero-logo {
    width: clamp(200px, 24vw, 330px);
    height: clamp(200px, 24vw, 330px);
    filter: drop-shadow(0 0 24px rgba(255, 255, 255, .2))
}

.hero-content h1 {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: clamp(2.4rem, 4.6vw, 4.2rem);
    letter-spacing: .02em;
    line-height: 1;
    margin-top: -6px
}

.diamond {
    width: 9px;
    height: 9px;
    background: #fff;
    transform: rotate(45deg);
    margin: 12px 0 14px;
    position: relative
}

.tagline {
    font-size: clamp(.8rem, 1.35vw, 1.2rem);
    font-weight: 400;
    letter-spacing: .42em;
    text-transform: uppercase;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .6)
}

.script {
    font-family: 'Pinyon Script', cursive;
    font-size: clamp(2rem, 3.4vw, 3.2rem);
    margin: 18px 0 22px;
    color: #fbe9ff;
    text-shadow: 0 0 6px #d36bff, 0 0 18px #a21cff, 0 0 34px #a21cff
}

.cta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 54px;
    padding: 0 30px;
    border-radius: 30px;
    font-weight: 500;
    font-size: .95rem;
    transition: transform .2s, box-shadow .2s
}

.btn svg {
    width: 20px
}

.btn b {
    font-weight: 400;
    font-size: 1.2rem
}

.btn.primary {
    background: linear-gradient(90deg, #9d3bff, #7d1cf2);
    box-shadow: 0 0 24px rgba(150, 50, 255, .7)
}

.btn.ghost {
    background: rgba(10, 6, 20, .8);
    border: 1px solid rgba(255, 255, 255, .55)
}

.btn:hover {
    transform: translateY(-2px)
}

.btn:focus-visible,
.links a:focus-visible,
.srch:focus-visible,
.ico:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px
}

.wave {
    position: absolute;
    z-index: 2;
    left: -5%;
    right: -5%;
    bottom: -6%;
    height: 20%;
    background: radial-gradient(ellipse at 50% 100%, rgba(150, 40, 255, .5), transparent 65%);
    border-top: 2px solid #b04cff;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    box-shadow: 0 -6px 30px rgba(150, 40, 255, .7)
}

/* ---------- Tablet & below: burger menu (<1180px) ---------- */
@media (max-width: 1179px) {
    .burger {
        display: flex
    }

    .links {
        display: none;
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: rgba(14, 8, 26, .95);
        border: 1px solid var(--line);
        border-radius: 22px;
        backdrop-filter: blur(14px);
        padding: 8px 26px;
        box-shadow: 0 12px 40px rgba(0, 0, 0, .5)
    }

    .links.open {
        display: flex
    }

    .links li+li {
        border-top: 1px solid rgba(255, 255, 255, .08)
    }

    .links a {
        padding: 16px 0;
        font-size: .95rem
    }

    .links a.active {
        color: #e6b8ff
    }

    .links a.active::after {
        left: 0;
        right: auto;
        bottom: 8px;
        width: 40px
    }

    .links-pill {
        padding: 0 22px;
        height: 64px
    }

    .brand-mark {
        width: 68px;
        height: 68px
    }

    .brand span {
        font-size: 1.2rem
    }
}

/* ---------- Mobile (<768px) ---------- */
@media (max-width: 767px) {
    .brand {
        gap: 8px;
        padding: 6px 16px 6px 8px
    }

    .brand-mark {
        width: 48px;
        height: 48px;
        margin: -4px 0
    }

    .brand span {
        font-size: 1rem
    }

    /* hamburger right corner mai */
    .links-pill {
        flex: 0 0 auto;
        margin-left: auto;
        height: 56px;
        padding: 0 16px;
        gap: 14px
    }

    .burger {
        order: 2;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        padding: 0
    }

    .icons {
        order: 1
    }

    .links {
        top: calc(100% + 10px);
        left: auto;
        right: 0;
        width: min(260px, 82vw);
        padding: 6px 20px
    }

    .icons {
        gap: 12px
    }

    .ico {
        width: 32px;
        height: 26px
    }

    .ico.ig {
        width: 30px;
        height: 30px
    }

    .srch svg {
        width: 26px
    }

    .btn {
        height: 48px;
        padding: 0 22px
    }
}

/* ---------- Small phones (<480px) ---------- */
@media (max-width: 479px) {
    .nav {
        gap: 8px
    }

    .brand {
        padding: 6px 12px 6px 6px
    }

    .brand span {
        font-size: .88rem
    }

    .brand-mark {
        width: 42px;
        height: 42px
    }

    /* chhoti screen: sirf gol hamburger button, right corner mai */
    .links-pill {
        width: 56px;
        padding: 0;
        justify-content: center;
        border-radius: 50%
    }

    .ico.yt,
    .ico.ig {
        display: none
    }
}

/* Very small (<360px): logo only */
@media (max-width: 359px) {
    .brand span {
        display: none
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        transition: none !important
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand span {
        animation: none
    }
}

/* ---------- Hero video banner ---------- */
.hero {
    background: #05030c;
    display: flex;
    align-items: center
}

.hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #05030c
}

.hero-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.hero-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5, 3, 12, .65) 0%, rgba(5, 3, 12, 0) 28%),
        radial-gradient(ellipse at center, rgba(5, 3, 12, .55) 0%, rgba(5, 3, 12, .15) 60%, rgba(5, 3, 12, .45) 100%)
}

.banner-copy {
    position: absolute;
    z-index: 3;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 182px clamp(20px, 6vw, 80px) 60px;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
}

.banner-title {
    max-width: 18ch;
    margin: 0 auto;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: clamp(2.2rem, 5.4vw, 5rem);
    line-height: 1.05;
    letter-spacing: .01em;
    background: linear-gradient(90deg, #8a3dff, #ff4fd8, #ffb24a, #3de0ff, #8a3dff);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .55));
    animation: banner-flow 7s linear infinite
}

.banner-sub {
    margin: clamp(14px, 2vw, 22px) 0 clamp(22px, 3vw, 34px);
    max-width: 44ch;
    text-wrap: balance;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(1rem, 1.8vw, 1.35rem);
    font-weight: 500;
    line-height: 1.5;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
    animation: banner-color 7s linear infinite
}

.banner-copy .cta {
    justify-content: center
}

@keyframes banner-flow {
    to {
        background-position: -300% 0
    }
}

@keyframes banner-color {

    0%,
    100% {
        color: #d9b3ff
    }

    25% {
        color: #ff9be9
    }

    50% {
        color: #ffd08a
    }

    75% {
        color: #8defff
    }
}

@media (max-width: 767px) {
    .hero {
        min-height: 100svh
    }

    .banner-copy {
        padding-top: 120px
    }

    .banner-title {
        max-width: 12ch
    }

    .banner-copy .cta {
        flex-direction: column;
        align-items: stretch;
        gap: 12px
    }

    .banner-copy .btn {
        justify-content: center
    }
}

@media (prefers-reduced-motion: reduce) {

    .banner-title,
    .banner-sub {
        animation: none
    }
}

/* ---------- Animated sound-wave lines (canvas) - lives in index.php ---------- */
.hero-wave {
    --wave-h: clamp(150px, 25vw, 288px);
    position: relative;
    z-index: 2;
    height: var(--wave-h);
    margin-top: -153px;
    pointer-events: none;
    overflow: hidden;
    background: none;
}

.hero-wave canvas {
    display: block;
    width: 100%;
    height: 100%
}

/* =========================================================
   DXB RECORDS — LATEST RELEASES
   Add this file after your main stylesheet.
   ========================================================= */
.latest-releases {
    /* --lr-bg: #050509; */
    /* --lr-card: rgba(10, 10, 17, .78); */
    /* --lr-line: rgba(255, 255, 255, .15); */
    /* --lr-purple: #a900ff; */
    /* --lr-pink: #f000ff; */
    /* position: relative; */
    /* overflow: hidden; */
    /* background: radial-gradient(ellipse at 50% -30%, rgba(166, 0, 255, .18), transparent 45%),
        radial-gradient(ellipse at 50% 105%, rgba(128, 0, 255, .13), transparent 46%),
        var(--lr-bg); */
    padding: 60px 0 34px;
    color: #fff;
    isolation: isolate;
}

.latest-releases::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 42px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(130, 0, 255, .28), transparent);
    filter: blur(8px);
}

.latest-releases::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -30px;
    height: 70px;
    pointer-events: none;
    background: radial-gradient(ellipse, rgba(221, 0, 255, .25), transparent 68%);
    filter: blur(16px);
}

.latest-releases__inner {
    position: relative;
    z-index: 2;
    width: min(1300px, calc(100% - 56px));
    margin: 0 auto;
}

.latest-releases__heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin: 0 0 18px;
}

.latest-releases__title-wrap {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
}

.latest-releases__title {
    margin: 0;
    white-space: nowrap;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(30px, 3.1vw, 43px);
    line-height: .95;
    letter-spacing: -.045em;
    font-weight: 800;
}

.latest-releases__title span {
    color: #fff;
}

.latest-releases__title em {
    color: #e000ff;
    font-style: normal;
    text-shadow: 0 0 16px rgba(224, 0, 255, .28);
}

.latest-releases__rule {
    width: 90px;
    height: 3px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .6);
    box-shadow: 0 0 8px rgba(255, 255, 255, .1);
}

.latest-releases__view-all {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 17px;
    color: #fff;
    text-decoration: none;
    font: 600 15px/1 Arial, Helvetica, sans-serif;
    transition: color .25s ease, transform .25s ease;
}

.latest-releases__view-all span {
    font-size: 31px;
    font-weight: 300;
    line-height: .45;
}

.latest-releases__view-all:hover {
    color: #ed5cff;
    transform: translateX(-2px);
}

.release-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.release-card {
    position: relative;
    min-width: 0;
    height: 260px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(19, 19, 27, .9), rgba(4, 4, 9, .92));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025), 0 12px 35px rgba(0, 0, 0, .42);
    overflow: hidden;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s ease, box-shadow .35s ease;
}

.release-card:hover {
    transform: translateY(-4px);
    border-color: rgba(238, 65, 255, .46);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035), 0 18px 42px rgba(0, 0, 0, .55), 0 0 25px rgba(206, 0, 255, .12);
}

.release-card__media {
    position: absolute;
    inset: 3px 3px 3px 3px;
    overflow: hidden;
    border-radius: 9px;
}

.release-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(180deg, rgba(0, 0, 0, .04) 20%, rgba(0, 0, 0, .12) 52%, rgba(0, 0, 0, .68) 100%);
}

.release-card__cover {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: calc(100% - 60px);
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    transform: scale(1.01);
    transition: transform .55s cubic-bezier(.2, .8, .2, 1), filter .35s ease;
}

.release-card:hover .release-card__cover {
    transform: scale(1.045);
    filter: saturate(1.06) contrast(1.03);
}

/* Realistic CSS vinyl: partially hidden behind the artwork. */
.vinyl {
    position: absolute;
    z-index: 1;
    right: -47px;
    top: 50%;
    width: 205px;
    height: 205px;
    transform: translateY(-50%);
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle at center, rgba(255, 255, 255, .075) 0 1px, rgba(0, 0, 0, .04) 1px 4px),
        radial-gradient(circle at 38% 30%, #747474 0, #303030 8%, #151515 20%, #090909 58%, #262626 100%);
    box-shadow: -8px 0 22px rgba(0, 0, 0, .62), inset 0 0 14px rgba(255, 255, 255, .12);
    transition: transform .9s cubic-bezier(.2, .8, .2, 1), filter .35s ease;
}

.vinyl::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 5px, rgba(255, 255, 255, .055) 5.5px 6px);
    opacity: .85;
}

.vinyl::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #090909 0 22%, #777 23% 28%, #171717 29% 100%);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .5);
}

.vinyl__label {
    display: none;
}

.release-card:hover .vinyl {
    transform: translateY(-50%) rotate(22deg);
    filter: brightness(1.08);
}

.release-card__dots {
    position: absolute;
    z-index: 6;
    right: 12px;
    top: 10px;
    color: #fff;
    font: 700 15px/1 Arial, Helvetica, sans-serif;
    letter-spacing: 2px;
    text-shadow: 0 1px 5px #000;
}

.release-card__info {
    position: absolute;
    z-index: 5;
    left: 20px;
    bottom: 14px;
    pointer-events: none;
}

.release-card__info h3 {
    margin: 0 0 9px;
    color: #fff;
    font: 800 clamp(20px, 2vw, 27px)/.95 Arial, Helvetica, sans-serif;
    letter-spacing: -.025em;
    text-shadow: 0 2px 9px rgba(0, 0, 0, .65);
}

.release-card__info p {
    margin: 0;
    color: rgba(255, 255, 255, .88);
    font: 500 12px/1 Arial, Helvetica, sans-serif;
    letter-spacing: .02em;
}

.release-card__play {
    position: absolute;
    z-index: 8;
    right: 8px;
    bottom: 38px;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 2px solid #f16cff;
    border-radius: 50%;
    background: rgba(8, 7, 13, .74);
    box-shadow: 0 0 8px rgba(242, 64, 255, .35), inset 0 0 15px rgba(214, 0, 255, .08);
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.release-card__play span {
    display: block;
    width: 0;
    height: 0;
    margin-left: 19px;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 14px solid #fff;
}

.release-card__play:hover,
.release-card__play:focus-visible {
    transform: scale(1.07);
    background: rgba(221, 0, 255, .17);
    box-shadow: 0 0 17px rgba(242, 64, 255, .75), 0 0 34px rgba(180, 0, 255, .24);
    outline: none;
}

.release-card::after {
    content: "";
    position: absolute;
    left: 9%;
    right: 9%;
    bottom: -3px;
    height: 3px;
    border-radius: 50%;
    background: #e400ff;
    box-shadow: 0 0 10px #e400ff, 0 0 24px rgba(223, 0, 255, .72);
    opacity: .72;
    z-index: 10;
}

@media (max-width: 1050px) {
    .release-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .release-card {
        height: 270px;
    }
}

@media (max-width: 680px) {
    .latest-releases {
        padding: 22px 0 28px;
    }

    .latest-releases__inner {
        width: min(100% - 28px, 520px);
    }

    .latest-releases__heading-row {
        align-items: flex-end;
        gap: 15px;
    }

    .latest-releases__title-wrap {
        gap: 12px;
    }

    .latest-releases__rule {
        width: 48px;
        height: 2px;
    }

    .latest-releases__title {
        font-size: 27px;
    }

    .latest-releases__view-all {
        font-size: 11px;
        gap: 7px;
    }

    .latest-releases__view-all span {
        font-size: 23px;
    }

    .release-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .release-card {
        height: 245px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .release-card,
    .release-card__cover,
    .vinyl,
    .release-card__play,
    .latest-releases__view-all {
        transition: none;
    }
}

/* =========================================================
   DXB RECORDS — ABOUT US
   Full-bleed section: photo melts into the page background,
   warm bokeh lights on the left edge, faint swirl lines bottom-right.
   ========================================================= */
.about {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 28px 0 46px;
    color: #fff;
}

/* warm blurred bokeh lights on the far left */
.about::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: clamp(120px, 16vw, 240px);
    pointer-events: none;
    background:
        radial-gradient(circle at 12px 8%, rgba(255, 170, 70, .95) 0 5px, transparent 14px),
        radial-gradient(circle at 26px 24%, rgba(255, 120, 40, .35) 0 10px, transparent 30px),
        radial-gradient(circle at 18px 52%, rgba(255, 150, 60, .7) 0 6px, transparent 22px),
        radial-gradient(circle at 34px 70%, rgba(255, 110, 40, .45) 0 14px, transparent 40px),
        radial-gradient(circle at 10px 90%, rgba(255, 160, 70, .6) 0 5px, transparent 18px),
        linear-gradient(90deg, rgba(120, 50, 20, .35), transparent 80%);
    filter: blur(5px);
    -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 30%, transparent 100%);
}

/* studio photo: right side, full-bleed, fades into the dark on the left and bottom */
.about__photo {
    position: absolute;
    z-index: 0;
    top: 28px;
    right: 0;
    bottom: 46px;
    width: min(62%, 920px);
    background: url("../images/about-studio.jpg") center / cover no-repeat;
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, #000 38%),
        linear-gradient(180deg, #000 78%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(90deg, transparent 0%, #000 38%),
        linear-gradient(180deg, #000 78%, transparent 100%);
    mask-composite: intersect;
}

/* faint swirl lines in the dark area, bottom-right */
.about__pattern {
    position: absolute;
    z-index: 0;
    right: 0;
    bottom: 0;
    width: 70%;
    height: 70%;
    pointer-events: none;
    opacity: .9;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 300' fill='none' stroke='%23a24bff' stroke-width='1'%3E%3Cpath opacity='.22' d='M0 290C160 250 260 120 430 110S700 170 800 90'/%3E%3Cpath opacity='.16' d='M0 300C190 270 300 150 460 150S720 210 800 140'/%3E%3Cpath opacity='.12' d='M60 300C230 290 340 190 490 190S740 250 800 200'/%3E%3Cpath opacity='.18' d='M200 300C330 240 420 100 560 80S760 110 800 40'/%3E%3C/svg%3E") right bottom / 100% 100% no-repeat;
}

.about__inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

.about__card {
    position: static;
    display: flex;
    align-items: center;
    min-height: 340px;
}

.about__copy {
    position: relative;
    z-index: 3;
    width: min(560px, 100%);
    padding: 0 28px 0 max(28px, calc((100vw - 1300px) / 2));
}

.about__eyebrow {
    display: flex;
    align-items: center;
    gap: 22px;
    font: 700 clamp(22px, 2.3vw, 31px)/1 Arial, Helvetica, sans-serif;
    letter-spacing: .02em;
}

.about__eyebrow i {
    display: block;
    width: 90px;
    height: 2px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .6);
}

.about__title {
    margin: 12px 0 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(30px, 3.4vw, 46px);
    line-height: .95;
    letter-spacing: -.045em;
    font-weight: 800;
}

.about__title em {
    color: #e000ff;
    font-style: normal;
    text-shadow: 0 0 16px rgba(224, 0, 255, .28);
}

.about__rule {
    display: block;
    width: 120px;
    height: 1px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, .45);
}

.about__text {
    max-width: 46ch;
    margin-bottom: 24px;
    font: 400 clamp(.95rem, 1.2vw, 1.05rem)/1.6 'Montserrat', Arial, sans-serif;
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
}

.about__btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    height: 50px;
    padding: 0 30px;
    border: 1.5px solid #c05bff;
    border-radius: 30px;
    background: rgba(10, 6, 20, .6);
    font: 600 14px/1 Arial, Helvetica, sans-serif;
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.about__btn span {
    font-size: 20px;
    font-weight: 300;
}

.about__btn:hover,
.about__btn:focus-visible {
    background: rgba(221, 0, 255, .17);
    box-shadow: 0 0 17px rgba(242, 64, 255, .6);
    transform: translateY(-2px);
    outline: none;
}

@media (max-width: 860px) {
    .about__card {
        align-items: flex-end;
        min-height: 540px;
    }

    .about__photo {
        width: 100%;
        height: 52%;
        bottom: auto;
        -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
        -webkit-mask-composite: source-over;
        mask-composite: add;
    }

    .about__copy {
        padding: 0 22px;
    }

    .about__pattern {
        width: 100%;
        height: 45%;
    }
}

@media (max-width: 680px) {
    .about__eyebrow i {
        width: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about__btn {
        transition: none;
    }
}


/* =========================================================
   DXB RECORDS — STREAM ME ON
   ========================================================= */
.stream {
    padding: 6px 0 40px;
    color: #fff;
}

.stream__inner {
    width: min(1300px, calc(100% - 56px));
    margin: 0 auto;
}

.stream__heading-row {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 20px;
}

.stream__title {
    margin: 0;
    white-space: nowrap;
    font: 800 clamp(24px, 2.6vw, 36px)/1 Arial, Helvetica, sans-serif;
    letter-spacing: -.02em;
}

.stream__rule {
    width: 90px;
    height: 2px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .6);
}

.stream-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.stream-card {
    --tint: rgba(255, 255, 255, .1);
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
    min-height: 124px;
    padding: 0 24px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    background:
        radial-gradient(ellipse at 0 0, var(--tint), transparent 60%),
        linear-gradient(135deg, rgba(22, 14, 30, .92), rgba(58, 24, 88, .5));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02), 0 10px 28px rgba(0, 0, 0, .4);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s ease, box-shadow .3s ease;
}

.stream-card--spotify {
    --tint: rgba(30, 215, 96, .26);
}

.stream-card--apple {
    --tint: rgba(250, 45, 72, .24);
}

.stream-card--ytm,
.stream-card--yt {
    --tint: rgba(255, 30, 30, .22);
}

.stream-card__icon {
    flex: 0 0 auto;
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
}

.stream-card__icon--wide {
    width: 80px;
    height: 56px;
    margin: 0 4px;
}

.stream-card__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.stream-card__text {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.stream-card__text strong {
    font: 700 clamp(16px, 1.45vw, 19px)/1.1 Arial, Helvetica, sans-serif;
    white-space: nowrap;
}

.stream-card__text small {
    font: 500 12.5px/1 Arial, Helvetica, sans-serif;
    color: rgba(255, 255, 255, .72);
}

.stream-card__go {
    position: absolute;
    right: 14px;
    bottom: 12px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 2px solid #c05bff;
    border-radius: 50%;
    background: rgba(8, 7, 13, .6);
    transition: background .25s ease, box-shadow .25s ease;
}

.stream-card__go svg {
    width: 18px;
    height: 18px;
}

.stream-card:hover,
.stream-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(238, 65, 255, .46);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035), 0 16px 38px rgba(0, 0, 0, .55), 0 0 25px rgba(206, 0, 255, .14);
    outline: none;
}

.stream-card:hover .stream-card__go,
.stream-card:focus-visible .stream-card__go {
    background: rgba(221, 0, 255, .22);
    box-shadow: 0 0 14px rgba(242, 64, 255, .65);
}

@media (max-width: 1100px) {
    .stream-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .stream__inner {
        width: min(100% - 28px, 520px);
    }

    .stream-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .stream__rule {
        width: 48px;
    }

    .stream-card {
        min-height: 108px;
        gap: 18px;
    }

    .stream-card__icon {
        width: 64px;
        height: 64px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .stream-card,
    .stream-card__go {
        transition: none;
    }
}


/* =========================================================
   DXB RECORDS — SHOWS + BOOK ON SHOW
   ========================================================= */
.shows,
.book {
    position: relative;
    color: #fff;
}

.shows {
    padding: 8px 0 28px;
}

.shows__inner,
.book__inner {
    width: min(1300px, calc(100% - 56px));
    margin: 0 auto;
}

.shows__heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.shows__title-wrap {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
}

.shows__title {
    margin: 0;
    white-space: nowrap;
    font: 800 clamp(24px, 2.6vw, 36px)/1 Arial, Helvetica, sans-serif;
    letter-spacing: -.02em;
}

.shows__title em {
    color: #e000ff;
    font-style: normal;
    text-shadow: 0 0 16px rgba(224, 0, 255, .28);
}

.shows__rule {
    width: 90px;
    height: 2px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .6);
}

.shows__view-all {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font: 600 15px/1 Arial, Helvetica, sans-serif;
    transition: color .25s ease;
}

.shows__view-all svg {
    width: 22px;
    height: 22px;
}

.shows__view-all:hover {
    color: #ed5cff;
}

/* ----- show cards ----- */
.shows-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.show-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: block;
    min-height: 178px;
    padding: 22px 26px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    background: #07050d;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s ease, box-shadow .3s ease;
}

/* concert photo, fades into the dark on the left */
.show-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 0 28%;
    background: var(--show-img) center / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.show-card__date {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: Arial, Helvetica, sans-serif;
}

.show-card__date small {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .06em;
}

.show-card__date b {
    font-size: clamp(36px, 3.4vw, 46px);
    font-weight: 800;
    line-height: .95;
}

.show-card__where {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    font-family: Arial, Helvetica, sans-serif;
}

.show-card__where strong {
    font-size: clamp(17px, 1.6vw, 21px);
    font-weight: 800;
}

.show-card__where em {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-style: normal;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, .9);
}

.show-card__where em svg {
    width: 16px;
    height: 16px;
    color: #f03cf0;
}

.show-card__go {
    position: absolute;
    right: 16px;
    bottom: 14px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 2px solid #e2a54a;
    border-radius: 50%;
    background: rgba(8, 7, 13, .55);
    color: #fff;
    transition: background .25s ease, box-shadow .25s ease;
}

.show-card__go svg {
    width: 22px;
    height: 22px;
}

.show-card:hover,
.show-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(238, 65, 255, .46);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .55), 0 0 25px rgba(206, 0, 255, .14);
    outline: none;
}

.show-card:hover::before,
.show-card:focus-visible::before {
    transform: scale(1.05);
}

.show-card:hover .show-card__go,
.show-card:focus-visible .show-card__go {
    background: rgba(226, 165, 74, .2);
    box-shadow: 0 0 14px rgba(226, 165, 74, .55);
}

/* ----- booking ----- */
.book {
    padding: 8px 0 120px;
    overflow: hidden;
}

.book__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: 32px;
    align-items: stretch;
}

.book__heading {
    margin-bottom: 20px;
}

.book-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 52px;
    gap: 8px 14px;
}

.field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(24, 22, 30, .92), rgba(12, 11, 17, .92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    transition: border-color .25s ease, box-shadow .25s ease;
}

.field svg {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    color: rgba(255, 255, 255, .85);
}

.field input,
.field textarea {
    flex: 1;
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font: 500 15px/1.3 'Montserrat', Arial, sans-serif;
}

.field input::placeholder,
.field textarea::placeholder {
    color: rgba(255, 255, 255, .78);
}

.field input[type="date"] {
    color-scheme: dark;
}

/* Event Date: placeholder overlay (date select hone par hide) */
.field--date input[type="date"] {
    min-height: 100%;
    cursor: pointer;
}

.field--date:not(.has-value) input[type="date"] {
    color: transparent;
}

.field--date input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .85;
}

.field__ph {
    position: absolute;
    left: 58px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: rgba(255, 255, 255, .78);
    font: 500 15px/1.3 'Montserrat', Arial, sans-serif;
}

.field--date.has-value .field__ph {
    display: none;
}

.field:focus-within {
    border-color: rgba(192, 91, 255, .8);
    box-shadow: 0 0 0 3px rgba(162, 28, 255, .18);
}

.field--name {
    grid-column: 1;
    grid-row: 1;
}

.field--phone {
    grid-column: 2;
    grid-row: 1;
}

.field--email {
    grid-column: 1;
    grid-row: 2;
}

.field--location {
    grid-column: 2;
    grid-row: 2;
}

.field--date {
    grid-column: 1;
    grid-row: 3;
}

.field--message {
    grid-column: 2;
    grid-row: 3 / span 2;
    align-items: flex-start;
    padding-top: 14px;
}

.field--message textarea {
    height: 100%;
    resize: none;
}

.book-form__send {
    grid-column: 1;
    grid-row: 4;
    align-self: end;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 56px;
    margin-top: 8px;
    border: 0;
    border-radius: 30px;
    background: linear-gradient(90deg, #9b3bff, #6d2cff);
    box-shadow: 0 0 26px rgba(130, 60, 255, .65);
    color: #fff;
    font: 600 15px/1 Arial, Helvetica, sans-serif;
    letter-spacing: .02em;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
}

.book-form__send svg {
    width: 22px;
    height: 22px;
}

.book-form__send:hover,
.book-form__send:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 0 34px rgba(160, 80, 255, .85);
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.book__photo {
    align-self: stretch;
    min-height: 320px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .22);
    border-radius: 18px;
    box-shadow: 0 0 30px rgba(150, 50, 255, .3), 0 14px 40px rgba(0, 0, 0, .5);
}

.book__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* glowing wave lines along the bottom edge */
.book__wave {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    height: 110px;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(140, 50, 255, .35), transparent 65%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 110' preserveAspectRatio='none' fill='none' stroke='%23b55cff'%3E%3Cpath stroke-width='2' opacity='.9' d='M0 70C180 40 330 100 520 70S860 20 1060 62 1300 80 1400 50'/%3E%3Cpath stroke-width='1' opacity='.5' d='M0 80C200 60 340 108 540 84S880 40 1080 76 1320 92 1400 66'/%3E%3Cpath stroke-width='1' opacity='.35' d='M0 92C220 78 360 110 560 96S900 62 1100 88 1330 104 1400 84'/%3E%3Cpath stroke-width='1' opacity='.3' d='M0 58C160 30 320 78 500 52S840 6 1040 46 1290 64 1400 34'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}

@media (max-width: 1100px) {
    .shows-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .book__inner {
        grid-template-columns: 1fr;
    }

    .book__photo {
        min-height: 360px;
    }
}

@media (max-width: 700px) {

    .shows__inner,
    .book__inner {
        width: min(100% - 28px, 520px);
    }

    .shows__rule {
        width: 48px;
    }

    .shows__view-all {
        font-size: 12px;
        gap: 8px;
    }

    .shows-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .book-form {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .field {
        height: 52px;
    }

    .field--name,
    .field--phone,
    .field--email,
    .field--location,
    .field--date,
    .field--message,
    .book-form__send {
        grid-column: 1;
        grid-row: auto;
    }

    .field--message {
        grid-row: auto;
        height: 120px;
    }

    .book-form__send {
        height: 56px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .show-card,
    .show-card::before,
    .show-card__go,
    .field,
    .book-form__send,
    .shows__view-all {
        transition: none;
    }
}


/* =========================================================
   DXB RECORDS — ABOUT US PAGE (about.php)
   Four full-bleed bands: intro, founders, vision, what we do
   ========================================================= */

/* inner pages: header holds only the nav and floats over the first band */
.site-header {
    position: relative;
    z-index: 20;
    height: 0;
}

.ab {
    background: #05030c;
    color: #fff;
}

.ab-sec {
    --gold-a: #f0d29a;
    --gold-b: #c99a55;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: clamp(400px, 38vw, 560px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: radial-gradient(ellipse at 20% 0%, rgba(110, 40, 190, .16), transparent 55%), #07040d;
}

/* faint diagonal line texture in the dark area */
.ab-sec::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 8px);
    -webkit-mask-image: radial-gradient(ellipse at 90% 10%, #000, transparent 45%);
    mask-image: radial-gradient(ellipse at 90% 10%, #000, transparent 45%);
}

.ab-sec--text-left::after {
    -webkit-mask-image: radial-gradient(ellipse at 10% 90%, #000, transparent 45%);
    mask-image: radial-gradient(ellipse at 10% 90%, #000, transparent 45%);
}

/* image side: melts into the dark where it meets the text */
.ab-sec__img {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    width: 66%;
    background: var(--img) center / cover no-repeat;
}

.ab-sec--text-left .ab-sec__img {
    right: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
}

.ab-sec--text-right .ab-sec__img {
    left: 0;
    -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 42%);
    mask-image: linear-gradient(270deg, transparent 0%, #000 42%);
}

.ab-sec__copy {
    width: min(560px, 100%);
    padding: 70px 28px;
}

.ab-sec--text-left .ab-sec__copy {
    margin-left: max(0px, calc((100vw - 1300px) / 2));
    padding-left: clamp(28px, 4vw, 56px);
}

.ab-sec--text-right .ab-sec__copy {
    margin-left: auto;
    margin-right: max(0px, calc((100vw - 1300px) / 2));
    padding-right: clamp(28px, 4vw, 56px);
}

/* ----- type ----- */
.ab-eyebrow {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
    padding-left: 4px;
    font: 600 .8rem/1 'Montserrat', Arial, sans-serif;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--gold-b);
}

.ab-eyebrow::before {
    content: "";
    width: 9px;
    height: 9px;
    margin-right: -6px;
    margin-top: -10px;
    border-top: 2px solid var(--gold-a);
    border-left: 2px solid var(--gold-a);
    transform: rotate(-12deg);
}

.ab-eyebrow--line::after {
    content: "";
    width: clamp(48px, 8vw, 90px);
    height: 1px;
    background: linear-gradient(90deg, var(--gold-b), transparent);
}

.ab-title {
    margin: 0 0 20px;
    font: 800 clamp(30px, 3.5vw, 52px)/1.04 'Montserrat', Arial, sans-serif;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.ab-title--xl {
    font-size: clamp(40px, 4.9vw, 70px);
    line-height: .98;
}

.ab-title--xl .gold {
    display: block;
}

.gold {
    background: linear-gradient(180deg, var(--gold-a), var(--gold-b));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.ab-text {
    max-width: 44ch;
    margin-bottom: 28px;
    font: 400 clamp(.95rem, 1.15vw, 1.05rem)/1.65 'Montserrat', Arial, sans-serif;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 12px rgba(0, 0, 0, .7);
}

.ab-sec__copy>.ab-text:last-child {
    margin-bottom: 0;
}

.ab-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    height: 50px;
    padding: 0 30px;
    border: 1.5px solid #c05bff;
    border-radius: 30px;
    background: rgba(10, 6, 20, .72);
    box-shadow: 0 0 16px rgba(192, 91, 255, .4);
    font: 600 14px/1 'Montserrat', Arial, sans-serif;
    text-transform: uppercase;
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.ab-btn svg {
    width: 18px;
    height: 18px;
}

.ab-btn:hover,
.ab-btn:focus-visible {
    background: rgba(221, 0, 255, .17);
    box-shadow: 0 0 24px rgba(242, 64, 255, .65);
    transform: translateY(-2px);
    outline: none;
}

/* ----- 1. intro ----- */
.ab-hero {
    min-height: clamp(560px, 48vw, 740px);
}

.ab-hero .ab-sec__copy {
    padding-top: 150px;
    padding-bottom: 80px;
}

.ab-hero .ab-sec__img {
    width: 72%;
    background-position: center top;
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, #000 40%),
        linear-gradient(180deg, transparent 0%, #000 22%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(90deg, transparent 0%, #000 40%),
        linear-gradient(180deg, transparent 0%, #000 22%);
    mask-composite: intersect;
}

/* ----- 2. founders ----- */
.ab-founders .ab-sec__img {
    width: 64%;
    background-position: center top;
    -webkit-mask-image:
        linear-gradient(270deg, transparent 0%, #000 34%),
        linear-gradient(180deg, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(270deg, transparent 0%, #000 34%),
        linear-gradient(180deg, #000 70%, transparent 100%);
    mask-composite: intersect;
}

.ab-person {
    position: absolute;
    bottom: 34px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font: 500 .8rem/1.2 'Montserrat', Arial, sans-serif;
    letter-spacing: .05em;
}

.ab-person--one {
    left: 12%;
}

.ab-person--two {
    left: 54%;
}

.ab-person strong {
    margin-bottom: 4px;
    font: 700 clamp(1rem, 1.5vw, 1.3rem)/1 'Montserrat', Arial, sans-serif;
    letter-spacing: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}

.ab-person__role {
    color: var(--gold-b);
    font-weight: 600;
}

/* ----- 3. vision ----- */
.ab-vision .ab-sec__img {
    width: 62%;
    background-position: center;
}

/* ----- 4. what we do ----- */
.ab-movement .ab-sec__img {
    width: 64%;
    background-position: center;
}

/* ----- tablet / mobile: image on top, text below ----- */
@media (max-width: 860px) {

    .ab-sec,
    .ab-hero {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
    }

    .ab-sec__img,
    .ab-hero .ab-sec__img,
    .ab-founders .ab-sec__img,
    .ab-vision .ab-sec__img,
    .ab-movement .ab-sec__img {
        position: relative;
        order: -1;
        z-index: 0;
        width: 100%;
        height: 320px;
        left: auto;
        right: auto;
        -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
        -webkit-mask-composite: source-over;
        mask-composite: add;
    }

    .ab-hero .ab-sec__img {
        height: 380px;
    }

    .ab-sec__copy,
    .ab-sec--text-left .ab-sec__copy,
    .ab-sec--text-right .ab-sec__copy,
    .ab-hero .ab-sec__copy {
        width: 100%;
        margin: -40px 0 0;
        padding: 0 24px 48px;
    }

    .ab-hero .ab-sec__copy {
        margin-top: -70px;
    }

    .ab-person {
        bottom: 56px;
    }

    .ab-person--one {
        left: 6%;
    }

    .ab-person--two {
        left: 52%;
    }
}

@media (max-width: 480px) {
    .ab-eyebrow {
        letter-spacing: .3em;
    }

    .ab-person {
        font-size: .7rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ab-btn {
        transition: none;
    }
}


/* =========================================================
   DXB RECORDS — STREAM PAGE (stream.php)
   Reuses the .ab-* hero/type styles from the About page
   ========================================================= */
.ab,
.st {
    --gold-a: #f0d29a;
    --gold-b: #c99a55;
}

.st-wrap {
    width: min(1300px, calc(100% - 56px));
    margin: 0 auto;
}

/* the hero here is shorter than About's and the headphones sit lower */
.st-hero .ab-sec__img {
    background-position: center;
}

/* ----- listen on ----- */
.st-listen {
    padding: 34px 0 30px;
}

.st-listen .ab-eyebrow {
    margin-bottom: 20px;
}

.st-platforms {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.st-platform {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    min-height: 92px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(24, 20, 34, .95), rgba(12, 9, 20, .95));
    box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.st-platform__icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
}

.st-platform__icon--youtube,
.st-platform__icon--amazon,
.st-platform__icon--soundcloud {
    width: 56px;
}

.st-platform__icon svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
}

.st-platform__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.st-platform__text strong {
    font: 700 13px/1.1 Arial, Helvetica, sans-serif;
    white-space: nowrap;
}

.st-platform__text small {
    font: 500 11px/1 Arial, Helvetica, sans-serif;
    color: rgba(255, 255, 255, .65);
}

.st-platform__go {
    position: absolute;
    right: 10px;
    bottom: 8px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 1.5px solid #c05bff;
    border-radius: 50%;
    background: rgba(8, 7, 13, .6);
}

.st-platform__go svg {
    width: 13px;
    height: 13px;
}

.st-platform:hover,
.st-platform:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(238, 65, 255, .46);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .55), 0 0 22px rgba(206, 0, 255, .14);
    outline: none;
}

/* ----- featured release ----- */
.st-featured {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 44px 0 40px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: radial-gradient(ellipse at 15% 50%, rgba(110, 40, 190, .22), transparent 55%), #07040d;
}

.st-featured__portrait {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    width: 36%;
    background: var(--img) center top / cover no-repeat;
    filter: grayscale(1) brightness(.75) contrast(1.05);
    -webkit-mask-image:
        linear-gradient(270deg, #000 20%, transparent 100%),
        linear-gradient(180deg, #000 60%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(270deg, #000 20%, transparent 100%),
        linear-gradient(180deg, #000 60%, transparent 100%);
    mask-composite: intersect;
}

.st-featured__grid {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
}

.st-cover {
    position: relative;
    width: min(100%, 330px);
    margin-left: 20px;
}

.st-cover img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 4px;
    box-shadow: 0 0 30px rgba(190, 70, 255, .35), 0 16px 40px rgba(0, 0, 0, .6);
}

.st-cover__vinyl {
    position: absolute;
    z-index: 1;
    top: 4%;
    right: -26%;
    width: 92%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, #090909 0 5%, #6a6a6a 5.5% 7%, #151515 7.5% 100%),
        repeating-radial-gradient(circle at center, rgba(255, 255, 255, .07) 0 1px, rgba(0, 0, 0, .05) 1px 4px),
        radial-gradient(circle at 38% 30%, #747474 0, #303030 8%, #151515 20%, #090909 58%, #262626 100%);
    box-shadow: -8px 0 24px rgba(0, 0, 0, .6);
}

.st-featured__info {
    max-width: 640px;
}

.st-featured__info .ab-eyebrow {
    margin-bottom: 14px;
}

.st-featured__title {
    margin-bottom: 10px;
    font: 700 clamp(30px, 3vw, 40px)/1 'Montserrat', Arial, sans-serif;
    letter-spacing: -.02em;
}

.st-featured__artist {
    margin-bottom: 22px;
    font: 500 1rem/1 'Montserrat', Arial, sans-serif;
    color: rgba(255, 255, 255, .9);
}

.st-featured__artist span {
    margin: 0 8px;
}

.st-wave {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 44px;
}

.st-wave i {
    flex: 1;
    min-width: 1px;
    max-width: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .35);
}

.st-wave i.on {
    background: #a64bff;
    box-shadow: 0 0 6px rgba(166, 75, 255, .8);
}

.st-times {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font: 500 13px/1 Arial, Helvetica, sans-serif;
    color: rgba(255, 255, 255, .85);
}

.st-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 0 20px;
    padding: 0 6px;
    color: #fff;
}

.st-controls>svg {
    width: 22px;
    height: 22px;
}

.st-controls__play {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 2.5px solid #b84dff;
    border-radius: 50%;
    background: rgba(40, 10, 70, .6);
    box-shadow: 0 0 18px rgba(184, 77, 255, .6);
}

.st-controls__play svg {
    width: 26px;
    height: 26px;
    margin-left: 3px;
}

.st-stream-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    height: 48px;
    padding: 0 28px 0 12px;
    border: 1.5px solid #d7ad63;
    border-radius: 30px;
    background: rgba(10, 6, 20, .7);
    box-shadow: 0 0 14px rgba(215, 173, 99, .25);
    font: 600 14px/1 'Montserrat', Arial, sans-serif;
    text-transform: uppercase;
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.st-stream-btn__logo {
    width: 26px;
    height: 26px;
}

.st-stream-btn__logo svg {
    display: block;
    width: 100%;
    height: 100%;
}

.st-stream-btn>svg {
    width: 18px;
    height: 18px;
}

.st-stream-btn:hover,
.st-stream-btn:focus-visible {
    background: rgba(215, 173, 99, .14);
    box-shadow: 0 0 22px rgba(215, 173, 99, .5);
    transform: translateY(-2px);
    outline: none;
}

/* ----- latest releases on this page ----- */
.st .latest-releases {
    padding: 36px 0 20px;
}

/* ----- popular playlists ----- */
.st-playlists {
    padding: 22px 0 36px;
}

.st-playlists .latest-releases__heading-row {
    margin-bottom: 18px;
}

.st-playlist-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.st-playlist {
    position: relative;
    height: 172px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 8px;
    background: #0a0710;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .42);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s ease, box-shadow .35s ease;
}

.st-playlist img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform .55s cubic-bezier(.2, .8, .2, 1);
}

.st-playlist::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, .78) 100%);
}

.st-playlist__info {
    position: absolute;
    z-index: 2;
    left: 14px;
    bottom: 12px;
}

.st-playlist__info h3 {
    margin-bottom: 7px;
    font: 700 18px/1 Arial, Helvetica, sans-serif;
    text-shadow: 0 2px 9px rgba(0, 0, 0, .7);
}

.st-playlist__info p {
    font: 500 11.5px/1 Arial, Helvetica, sans-serif;
    color: rgba(255, 255, 255, .85);
}

.st-playlist__play {
    position: absolute;
    z-index: 3;
    right: 12px;
    bottom: 12px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    background: rgba(8, 7, 13, .6);
    cursor: pointer;
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.st-playlist__play span {
    width: 0;
    height: 0;
    margin-left: 4px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid #fff;
}

.st-playlist:hover {
    transform: translateY(-4px);
    border-color: rgba(238, 65, 255, .46);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .55), 0 0 22px rgba(206, 0, 255, .14);
}

.st-playlist:hover img {
    transform: scale(1.05);
}

.st-playlist__play:hover,
.st-playlist__play:focus-visible {
    background: rgba(221, 0, 255, .2);
    box-shadow: 0 0 16px rgba(242, 64, 255, .7);
    transform: scale(1.07);
    outline: none;
}

/* ----- follow banner ----- */
.st-follow-wrap {
    padding: 8px 0 70px;
}

.st-follow {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1fr);
    align-items: center;
    min-height: 210px;
    padding: 28px clamp(24px, 4vw, 56px);
    border: 1.5px solid rgba(150, 70, 255, .75);
    border-radius: 22px;
    background: radial-gradient(ellipse at 50% 100%, rgba(140, 50, 255, .3), transparent 60%), #08050f;
    box-shadow: 0 0 26px rgba(130, 60, 255, .35), inset 0 0 30px rgba(110, 40, 190, .15);
}

.st-follow__photo {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 30%;
    width: 44%;
    background: url("../images/shows/book-crowd.jpg") 60% 30% / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

.st-follow__title h2 {
    margin-bottom: 18px;
    font: 800 clamp(28px, 3.4vw, 46px)/1 'Montserrat', Arial, sans-serif;
    letter-spacing: -.035em;
}

.st-follow__title h2 .gold {
    display: block;
}

.st-follow__title .ab-eyebrow {
    margin: 0;
    font-size: .72rem;
}

.st-follow__social {
    grid-column: 3;
}

.st-follow__social h3 {
    margin-bottom: 8px;
    font: 700 .78rem/1 'Montserrat', Arial, sans-serif;
    letter-spacing: .08em;
    color: var(--gold-a);
}

.st-follow__social p {
    max-width: 30ch;
    margin-bottom: 16px;
    font: 500 .78rem/1.5 'Montserrat', Arial, sans-serif;
    letter-spacing: .04em;
}

.st-follow__icons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.st-follow__icons a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1.5px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    background: rgba(8, 7, 13, .6);
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.st-follow__icons svg {
    width: 20px;
    height: 20px;
}

.st-follow__icons a:hover,
.st-follow__icons a:focus-visible {
    background: rgba(221, 0, 255, .2);
    box-shadow: 0 0 14px rgba(242, 64, 255, .65);
    transform: translateY(-2px);
    outline: none;
}

/* ----- responsive ----- */
@media (max-width: 1100px) {
    .st-platforms {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .st-playlist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .st-follow {
        grid-template-columns: 1fr;
        gap: 22px;
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .st-follow__social {
        grid-column: 1;
    }

    .st-follow__photo {
        left: 40%;
        width: 60%;
        opacity: .55;
    }
}

@media (max-width: 860px) {
    .st-featured__grid {
        grid-template-columns: 1fr;
    }

    .st-cover {
        width: min(72%, 300px);
        margin: 0 auto;
    }

    .st-cover__vinyl {
        right: -18%;
    }

    .st-featured__portrait {
        width: 100%;
        opacity: .35;
    }
}

@media (max-width: 560px) {
    .st-wrap {
        width: min(100% - 28px, 520px);
    }

    .st-platforms,
    .st-playlist-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .st-follow-wrap {
        padding-bottom: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .st-platform,
    .st-playlist,
    .st-playlist img,
    .st-playlist__play,
    .st-stream-btn,
    .st-follow__icons a {
        transition: none;
    }
}


/* =========================================================
   DXB RECORDS — LATEST RELEASES PAGE (releases.php)
   ========================================================= */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.rl-wrap {
    width: min(1300px, calc(100% - 56px));
    margin: 0 auto;
}

.rl-hero {
    min-height: clamp(440px, 36vw, 540px);
}

.rl-hero .ab-sec__copy {
    padding-top: 140px;
    padding-bottom: 70px;
}

/* white title that warms to gold at the right edge */
.rl-hero__title {
    background: linear-gradient(90deg, #fff 0%, #fff 58%, #e9cf9f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.rl-body {
    padding: 34px 0 70px;
}

/* ----- toolbar ----- */
.rl-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.rl-tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.rl-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 22px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    background: rgba(14, 10, 22, .85);
    color: #fff;
    font: 500 12.5px/1 'Montserrat', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.rl-tab svg {
    width: 19px;
    height: 19px;
}

.rl-tab:hover {
    border-color: rgba(192, 91, 255, .7);
}

.rl-tab.is-active {
    border-color: #b84dff;
    background: linear-gradient(90deg, #8e2cf2, #6d2cff);
    box-shadow: 0 0 18px rgba(150, 60, 255, .55);
}

.rl-tab:focus-visible,
.rl-search:focus-within {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.rl-search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(100%, 230px);
    height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 24px;
    background: rgba(14, 10, 22, .85);
}

.rl-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font: 400 13px/1 'Montserrat', Arial, sans-serif;
}

.rl-search input::placeholder {
    color: rgba(255, 255, 255, .6);
}

.rl-search svg {
    width: 17px;
    height: 17px;
    color: rgba(255, 255, 255, .85);
}

/* ----- grid + cards ----- */
.rl-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px 20px;
}

.rl-card {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: linear-gradient(160deg, rgba(26, 18, 38, .9), rgba(9, 7, 15, .95));
    box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s ease, box-shadow .3s ease;
}

.rl-card[hidden],
.rl-empty[hidden],
.rl-pager[hidden] {
    display: none;
}

.rl-card:hover {
    transform: translateY(-4px);
    border-color: rgba(238, 65, 255, .45);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .55), 0 0 22px rgba(206, 0, 255, .14);
}

.rl-card__media {
    position: relative;
    aspect-ratio: 1.42 / 1;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.rl-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s cubic-bezier(.2, .8, .2, 1);
}

.rl-card:hover .rl-card__media img {
    transform: scale(1.05);
}

.rl-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 5px 9px;
    border: 1px solid #8e4bff;
    border-radius: 4px;
    background: rgba(26, 8, 54, .92);
    font: 700 11px/1 Arial, Helvetica, sans-serif;
    letter-spacing: .04em;
    color: #c9a2ff;
}

.rl-badge--hot {
    border-color: #ff3a3a;
    background: rgba(40, 6, 10, .92);
    color: #ff5a5a;
}

.rl-card__play {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 2px solid #d66bff;
    border-radius: 50%;
    background: rgba(8, 7, 13, .78);
    box-shadow: 0 0 10px rgba(214, 107, 255, .4);
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.rl-card__play span {
    width: 0;
    height: 0;
    margin-left: 3px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid #fff;
}

.rl-card__play:hover,
.rl-card__play:focus-visible {
    background: rgba(221, 0, 255, .25);
    box-shadow: 0 0 18px rgba(242, 64, 255, .75);
    transform: scale(1.08);
    outline: none;
}

.rl-card__info {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 16px;
}

.rl-card__info h3 {
    margin-bottom: 6px;
    font: 600 15.5px/1.2 'Montserrat', Arial, sans-serif;
}

.rl-card__artist {
    margin-bottom: 9px;
    font: 400 12.5px/1 'Montserrat', Arial, sans-serif;
    color: rgba(255, 255, 255, .72);
}

.rl-card__meta {
    font: 400 11.5px/1 'Montserrat', Arial, sans-serif;
    color: rgba(255, 255, 255, .6);
}

.rl-card__meta span {
    margin: 0 6px;
}

.rl-card__more {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-self: center;
    padding-right: 2px;
}

.rl-card__more i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
}

.rl-empty {
    padding: 60px 0;
    text-align: center;
    font: 500 1rem/1.5 'Montserrat', Arial, sans-serif;
    color: rgba(255, 255, 255, .75);
}

/* ----- pager (appears only when there are more than 12 results) ----- */
.rl-pager {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 34px;
}

.rl-pager button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(14, 10, 22, .85);
    color: #fff;
    font: 600 13px/1 Arial, Helvetica, sans-serif;
    cursor: pointer;
    transition: background .25s ease, box-shadow .25s ease;
}

.rl-pager button svg {
    width: 16px;
    height: 16px;
}

.rl-pager button.is-active {
    border-color: #c05bff;
    background: #9b2cff;
    box-shadow: 0 0 16px rgba(170, 70, 255, .7);
}

.rl-pager button:hover,
.rl-pager button:focus-visible {
    border-color: #c05bff;
    outline: none;
}

/* ----- responsive ----- */
@media (max-width: 1100px) {
    .rl-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .rl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 14px;
    }

    .rl-search {
        width: 100%;
    }

    .rl-tabs {
        gap: 8px;
    }

    .rl-tab {
        padding: 0 14px;
    }
}

@media (max-width: 560px) {
    .rl-wrap {
        width: min(100% - 28px, 520px);
    }

    .rl-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {

    .rl-card,
    .rl-card__media img,
    .rl-card__play,
    .rl-tab,
    .rl-pager button {
        transition: none;
    }
}


/* =========================================================
   DXB RECORDS — FOOTER (shared)
   ========================================================= */
.sf {
    position: relative;
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px solid rgba(150, 70, 255, .5);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(130, 50, 230, .18), transparent 60%),
        #05030c;
    box-shadow: 0 -8px 30px rgba(120, 50, 220, .12);
    color: rgba(255, 255, 255, .88);
}

.sf__inner {
    width: min(1300px, calc(100% - 56px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr .85fr 1.1fr 1.3fr;
    padding: 34px 0 26px;
}

.sf__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding-right: 28px;
}

.sf__brand a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.sf__brand img {
    width: 110px;
    height: 110px;
    object-fit: contain;
}

.sf__brand strong {
    font: 600 1.15rem/1 'Cinzel', serif;
    letter-spacing: .02em;
}

.sf__brand span {
    font: 500 .62rem/1 'Montserrat', Arial, sans-serif;
    letter-spacing: .22em;
}

.sf__col {
    padding: 8px 0 8px clamp(22px, 3.2vw, 48px);
    border-left: 1px solid rgba(255, 255, 255, .12);
}

.sf__col h3 {
    margin-bottom: 14px;
    font: 600 .72rem/1 'Montserrat', Arial, sans-serif;
    letter-spacing: .24em;
    color: rgba(255, 255, 255, .9);
}

.sf__col li+li {
    margin-top: 9px;
}

.sf__col a {
    font: 400 .84rem/1.2 'Montserrat', Arial, sans-serif;
    transition: color .2s ease;
}

.sf__col a:hover,
.sf__col a:focus-visible {
    color: #ed5cff;
    outline: none;
}

.sf__social a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.sf__ico {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 6px;
}

.sf__ico svg {
    display: block;
    width: 18px;
    height: 18px;
}

.sf__ico--yt {
    background: #ff1a1a;
}

.sf__ico--ig {
    border: 1.5px solid #ff3df0;
    color: #ff3df0;
}

.sf__ico--sp {
    background: none;
}

.sf__ico--sp svg {
    width: 24px;
    height: 24px;
}

.sf__ico--am {
    background: linear-gradient(180deg, #ff5c7a, #fa2d48);
}

.sf__sub p {
    max-width: 34ch;
    margin-bottom: 18px;
    font: 400 .84rem/1.6 'Montserrat', Arial, sans-serif;
}

.sf__form {
    display: flex;
    max-width: 420px;
    height: 44px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 6px;
    background: rgba(14, 10, 22, .9);
}

.sf__form input {
    flex: 1;
    min-width: 0;
    padding: 0 16px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font: 400 .8rem/1 'Montserrat', Arial, sans-serif;
}

.sf__form input::placeholder {
    color: rgba(255, 255, 255, .55);
}

.sf__form button {
    width: 50px;
    display: grid;
    place-items: center;
    border: 0;
    background: linear-gradient(90deg, #9d3bff, #7d1cf2);
    color: #fff;
    cursor: pointer;
}

.sf__form button svg {
    width: 20px;
    height: 20px;
}

.sf__form:focus-within {
    border-color: rgba(192, 91, 255, .8);
    box-shadow: 0 0 0 3px rgba(162, 28, 255, .2);
}

.sf__copy {
    width: min(1300px, calc(100% - 56px));
    margin: 0 auto;
    padding: 14px 0 22px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font: 400 .76rem/1 'Montserrat', Arial, sans-serif;
    color: rgba(255, 255, 255, .55);
}

@media (max-width: 1000px) {
    .sf__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 28px;
    }

    .sf__brand {
        grid-column: 1 / -1;
        align-items: flex-start;
        padding-right: 0;
    }

    .sf__brand a {
        flex-direction: row;
        gap: 14px;
    }

    .sf__brand img {
        width: 72px;
        height: 72px;
    }

    .sf__col:nth-of-type(odd) {
        border-left: 0;
        padding-left: 0;
    }
}

@media (max-width: 560px) {

    .sf__inner,
    .sf__copy {
        width: min(100% - 28px, 520px);
    }

    .sf__inner {
        grid-template-columns: 1fr;
    }

    .sf__col,
    .sf__col:nth-of-type(odd) {
        padding-left: 0;
        border-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sf__col a {
        transition: none;
    }
}

/* ===== Shows page ===== */
.sp {
    --gold: #e2a54a;
    --mag: #c21cff;
    background: #05030c;
    color: #fff;
    overflow: hidden
}

.sp [hidden] {
    display: none !important
}

.sp-hero {
    position: relative;
    min-height: min(78vh, 640px);
    padding: clamp(140px, 16vw, 190px) clamp(20px, 5vw, 60px) 56px;
    background: linear-gradient(90deg, #05030c 8%, rgba(5, 3, 12, .55) 48%, rgba(5, 3, 12, .1)), linear-gradient(0deg, #05030c 0, transparent 30%), url('../images/releases-page/hero.jpg') 70% 30%/cover no-repeat
}

.sp-hero__copy {
    max-width: 560px
}

.sp-eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--gold);
    font-weight: 600;
    letter-spacing: .35em;
    text-transform: uppercase;
    font-size: .8rem
}

.sp-eyebrow::after {
    content: "";
    width: 70px;
    height: 1px;
    background: var(--gold)
}

.sp-h1 {
    margin: 14px 0 18px;
    font: 800 clamp(44px, 7vw, 76px)/.92 'Montserrat', sans-serif;
    letter-spacing: -.02em
}

.sp-h1 span {
    background: linear-gradient(180deg, #f3d9a2, #c28f48);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.sp-lead {
    max-width: 440px;
    line-height: 1.55;
    margin-bottom: 26px;
    color: rgba(255, 255, 255, .9)
}

.sp-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 15px 26px;
    border: 1.5px solid var(--gold);
    border-radius: 40px;
    background: rgba(8, 5, 16, .5);
    font-size: .85rem;
    font-weight: 500;
    text-transform: uppercase;
    transition: background .25s, box-shadow .25s
}

.sp-btn svg {
    width: 18px;
    height: 18px
}

.sp-btn:hover,
.sp-btn:focus-visible {
    background: rgba(226, 165, 74, .18);
    box-shadow: 0 0 18px rgba(226, 165, 74, .45);
    outline: none
}

.sp-btn--sm {
    padding: 10px 20px;
    font-size: .72rem;
    gap: 10px;
    white-space: nowrap
}

.sp-filters {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 16px clamp(16px, 3vw, 42px);
    border-block: 1px solid rgba(255, 255, 255, .12);
    background: rgba(10, 6, 20, .9);
    scrollbar-width: none
}

.sp-chip {
    flex: none;
    padding: 12px 22px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font: 500 .72rem 'Montserrat', sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, border-color .2s
}

.sp-chip:hover {
    border-color: #b84dff
}

.sp-chip.is-active {
    background: linear-gradient(135deg, #6d1fff, #a21cff);
    border-color: #b84dff;
    box-shadow: 0 0 18px rgba(162, 28, 255, .5)
}

.sp-chip:focus-visible,
.sp-clip:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px
}

.sp-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    width: min(1360px, 100% - 40px);
    margin: 36px auto 0;
    align-items: start
}

.sp-head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px
}

.sp-head h2 {
    font: 800 clamp(24px, 2.6vw, 34px)/1 'Montserrat', sans-serif;
    white-space: nowrap
}

.sp-head h2 em {
    font-style: normal;
    color: #d51cff;
    text-shadow: 0 0 16px rgba(213, 28, 255, .35)
}

.sp-rule {
    flex: 0 0 70px;
    height: 1px;
    background: rgba(255, 255, 255, .55)
}

.sp-head a {
    margin-left: auto;
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase
}

.sp-head a svg {
    width: 18px
}

.sp-block+.sp-block {
    margin-top: 38px
}

.sp-show {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 30px;
    min-height: 82px;
    margin-bottom: 10px;
    padding: 10px 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 6px;
    background: #08050f
}

.sp-show::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 0 30%;
    background: var(--img) center/cover;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
    mask-image: linear-gradient(90deg, transparent, #000 40%)
}

.sp-show__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 64px;
    line-height: 1.05
}

.sp-show__date small {
    font-size: .85rem;
    font-weight: 500
}

.sp-show__date b {
    font-size: 2rem;
    font-weight: 800
}

.sp-show__date span {
    font-size: .72rem;
    opacity: .85
}

.sp-show__where {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-right: auto;
    text-shadow: 0 1px 8px #000
}

.sp-show__where strong {
    font-size: 1.05rem;
    font-weight: 800
}

.sp-show__where span {
    font-size: .72rem;
    opacity: .85
}

.sp-show__where em {
    display: flex;
    gap: 6px;
    align-items: center;
    font-style: normal;
    font-size: .75rem
}

.sp-show__where em svg {
    width: 14px;
    color: #f03cf0
}

.sp-past {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px
}

.sp-clip {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    aspect-ratio: 1.5;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 6px;
    overflow: hidden;
    isolation: isolate
}

.sp-clip::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    background: url('../images/shows/book-crowd.jpg') var(--pos)/250% auto;
    filter: hue-rotate(var(--hue)) saturate(1.2);
    transition: transform .5s
}

.sp-clip::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent 60%)
}

.sp-clip:hover::before {
    transform: scale(1.08)
}

.sp-clip__txt {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.sp-clip__txt strong {
    font-size: .9rem;
    font-weight: 800
}

.sp-clip__txt small {
    font-size: .62rem;
    opacity: .85
}

.sp-clip__play {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 2px solid #d51cff;
    border-radius: 50%;
    background: rgba(5, 3, 12, .5)
}

.sp-clip__play svg {
    width: 18px
}

.sp-empty {
    padding: 40px 0;
    color: rgba(255, 255, 255, .75)
}

.sp-tour {
    position: relative;
    overflow: hidden;
    min-height: 370px;
    padding: 200px 22px 22px;
    border: 1px solid rgba(180, 70, 255, .55);
    border-radius: 8px;
    background: #0a0615;
    box-shadow: 0 0 24px rgba(150, 40, 255, .2)
}

.sp-tour img {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: 210px;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(#000 70%, transparent);
    mask-image: linear-gradient(#000 70%, transparent)
}

.sp-tour h2 {
    position: relative;
    font: 800 2.3rem/.95 'Montserrat', sans-serif;
    background: linear-gradient(180deg, #f3d9a2, #c28f48);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.sp-tour p {
    position: relative;
    margin: 10px 0 18px;
    font-size: .78rem;
    opacity: .9
}

.sp-tour ul {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px
}

.sp-tour li {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 4px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 6px;
    font-size: .72rem
}

.sp-tour li b {
    font-size: 1.3rem
}

.sp-cta {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 44px;
    padding: 56px clamp(20px, 5vw, 60px);
    border-block: 1px solid rgba(190, 90, 255, .4);
    background: linear-gradient(90deg, #05030c 15%, rgba(5, 3, 12, .5) 60%, rgba(5, 3, 12, .75)), url('../images/shows/book-crowd.jpg') 70% 35%/cover
}

.sp-cta h2 {
    font: 800 clamp(26px, 3.4vw, 40px)/1.05 'Montserrat', sans-serif;
    margin-bottom: 14px
}

.sp-cta h2 span {
    color: var(--gold)
}

.sp-cta p {
    max-width: 460px;
    line-height: 1.5;
    margin-bottom: 22px
}

.sp-perks {
    display: flex;
    gap: 26px;
    flex-wrap: wrap
}

.sp-perks li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    font-size: .75rem;
    line-height: 1.3
}

.sp-perks svg {
    box-sizing: content-box;
    width: 26px;
    height: 26px;
    padding: 16px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    background: rgba(8, 5, 16, .6);
    color: var(--gold)
}

@media (max-width:1100px) {
    .sp-wrap {
        grid-template-columns: 1fr
    }

    .sp-past {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:700px) {
    .sp-show {
        flex-wrap: wrap;
        gap: 14px
    }

    .sp-show .sp-btn {
        margin-left: 84px
    }

    .sp-rule {
        flex-basis: 30px
    }

    .sp-hero {
        background-position: 62% 30%
    }
}

/* ===== Book Now page ===== */
.bk {
    --gold: #e2a54a;
    background: #05030c;
    color: #fff;
    overflow: hidden
}

.bk-hero {
    min-height: min(76vh, 620px);
    padding: clamp(140px, 16vw, 185px) clamp(20px, 5vw, 60px) 60px;
    background: linear-gradient(90deg, #05030c 5%, rgba(5, 3, 12, .6) 45%, transparent 75%), linear-gradient(0deg, #05030c 0, transparent 28%), url('../images/releases-page/hero.jpg') right center/auto 100% no-repeat, #0b0614
}

.bk-eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--gold);
    font-weight: 600;
    letter-spacing: .35em;
    text-transform: uppercase;
    font-size: .8rem
}

.bk-eyebrow::after {
    content: "";
    width: 70px;
    height: 1px;
    background: var(--gold)
}

.bk-hero h1 {
    margin: 14px 0 18px;
    font: 800 clamp(44px, 6.5vw, 72px)/.95 'Montserrat', sans-serif;
    letter-spacing: -.02em;
    background: linear-gradient(180deg, #fff 20%, #e9c98c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.bk-hero__copy {
    max-width: 520px
}

.bk-hero__copy>p:not(.bk-eyebrow) {
    line-height: 1.55;
    margin-bottom: 26px
}

.bk-hero__cta,
.bk-done {
    display: flex;
    flex-wrap: wrap;
    gap: 16px
}

.bk-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 15px 28px;
    border: 1.5px solid #a65bff;
    border-radius: 40px;
    font-size: .85rem;
    font-weight: 500;
    text-transform: uppercase;
    background: rgba(8, 5, 16, .5);
    transition: box-shadow .25s, background .25s
}

.bk-btn--gold {
    background: linear-gradient(180deg, #f6c46c, #e2a54a);
    border-color: transparent;
    color: #1a0f02;
    font-weight: 700
}

.bk-btn svg {
    width: 18px;
    height: 18px
}

.bk-btn:hover,
.bk-btn:focus-visible {
    box-shadow: 0 0 20px rgba(190, 110, 255, .55);
    outline: none
}

.bk-wrap {
    width: min(1360px, 100% - 40px);
    margin: 0 auto 60px
}

.bk-h2 {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 34px 0 18px;
    font: 800 clamp(24px, 2.8vw, 34px)/1 'Montserrat', sans-serif
}

.bk-h2 em {
    font-style: normal;
    color: #d51cff
}

.bk-h2 span {
    width: 70px;
    height: 1px;
    background: rgba(255, 255, 255, .5)
}

.bk-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px
}

.bk-opt {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 200px;
    padding: 20px 76px 18px 18px;
    overflow: hidden;
    border: 1px solid rgba(160, 70, 255, .5);
    border-radius: 8px;
    background: #0a0615;
    transition: transform .25s, box-shadow .25s
}

.bk-opt::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0 0 40%;
    background: var(--img) center/cover
}

.bk-opt::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(0deg, #0a0615 42%, rgba(10, 6, 21, .1))
}

.bk-opt__ico {
    position: absolute;
    top: 16px;
    left: 18px;
    width: 34px;
    color: var(--gold)
}

.bk-opt h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 6px
}

.bk-opt p {
    font-size: .78rem;
    line-height: 1.4;
    opacity: .9
}

.bk-opt__go {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 2px solid var(--gold);
    border-radius: 50%
}

.bk-opt__go svg {
    width: 18px
}

.bk-opt:hover,
.bk-opt:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 0 24px rgba(170, 60, 255, .4);
    outline: none
}

.bk-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    scroll-margin-top: 20px
}

.bk-card {
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    background: rgba(14, 10, 24, .85)
}

.bk-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px
}

.bk-f,
.bk-check {
    display: block;
    font-size: .8rem;
    font-weight: 500
}

.bk-f--wide {
    grid-column: 1/-1
}

.bk-in {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding: 0 12px;
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 4px;
    background: rgba(255, 255, 255, .05);
    transition: border-color .2s, box-shadow .2s
}

.bk-in:focus-within {
    border-color: #b84dff;
    box-shadow: 0 0 0 3px rgba(184, 77, 255, .25)
}

.bk-in svg {
    flex: none;
    width: 18px;
    height: 18px;
    opacity: .75
}

.bk-in input,
.bk-in select,
.bk-in textarea {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 11px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font: 400 .8rem 'Montserrat', sans-serif;
    color-scheme: dark
}

.bk-in select option {
    background: #14091f
}

.bk-in--area {
    align-items: flex-start;
    padding-top: 2px
}

.bk-in textarea {
    resize: vertical;
    min-height: 70px
}

.bk-in ::placeholder {
    color: rgba(255, 255, 255, .55)
}

.has-err .bk-in {
    border-color: #ff5c7a
}

.bk-err {
    margin-top: 5px;
    color: #ff8da1;
    font-size: .72rem
}

.bk-alert {
    grid-column: 1/-1;
    padding: 10px 14px;
    border: 1px solid #ff5c7a;
    border-radius: 4px;
    background: rgba(255, 92, 122, .12);
    font-size: .8rem
}

.bk-check {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-size: .72rem;
    font-weight: 400
}

.bk-check input {
    width: 18px;
    height: 18px;
    accent-color: #a21cff
}

.bk-check .bk-err {
    flex-basis: 100%
}

.bk-send {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 50px;
    border: 0;
    border-radius: 30px;
    background: linear-gradient(90deg, #6d1fff, #b01cff);
    color: #fff;
    font: 600 .85rem 'Montserrat', sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 22px rgba(162, 28, 255, .5)
}

.bk-send svg {
    width: 18px
}

.bk-send:hover,
.bk-send:focus-visible {
    filter: brightness(1.15);
    outline: 2px solid var(--gold);
    outline-offset: 3px
}

.bk-done {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px
}

.bk-done h3 {
    font-size: 1.4rem
}

.bk-why {
    margin-top: calc(34px + 18px + clamp(24px, 2.8vw, 34px));
    border: 1px solid rgba(160, 70, 255, .4);
    border-radius: 8px;
    background: #09050f;
    overflow: hidden
}

.bk-why img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(#000 70%, transparent);
    mask-image: linear-gradient(#000 70%, transparent)
}

.bk-why ul {
    display: grid;
    gap: 14px;
    padding: 0 20px 16px;
    margin-top: -30px;
    position: relative
}

.bk-why li {
    display: flex;
    gap: 14px;
    align-items: center
}

.bk-why li>span {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1.5px solid var(--gold);
    border-radius: 50%;
    background: rgba(10, 6, 21, .8);
    color: var(--gold)
}

.bk-why li svg {
    width: 22px
}

.bk-why h3 {
    font-size: .9rem;
    font-weight: 700
}

.bk-why p {
    font-size: .78rem;
    opacity: .88;
    line-height: 1.35
}

.bk-direct {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 20px 20px;
    padding: 12px 16px;
    border: 1.5px solid var(--gold);
    border-radius: 6px;
    font-size: .78rem
}

.bk-direct>svg:first-child {
    width: 34px;
    color: #e030ff
}

.bk-direct span {
    flex: 1
}

.bk-direct b {
    display: block;
    font-size: 1rem
}

.bk-direct>svg:last-child {
    width: 18px
}

.bk-direct:hover {
    background: rgba(226, 165, 74, .12)
}

.bk-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    list-style: none
}

.bk-steps li {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid rgba(160, 70, 255, .5);
    border-radius: 8px;
    background: linear-gradient(135deg, #1a0c33, #0a0615)
}

.bk-steps li:not(:last-child)::after {
    content: "\2192";
    position: absolute;
    right: -22px;
    top: 50%;
    translate: 0 -50%;
    opacity: .8
}

.bk-steps b {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 2px solid #b84dff;
    border-radius: 50%;
    background: #4b13a8;
    font-size: 1.1rem
}

.bk-steps h3 {
    font-size: .88rem
}

.bk-steps p {
    font-size: .72rem;
    opacity: .85;
    line-height: 1.35
}

.sf__contact li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
    font-size: .8rem;
    line-height: 1.45
}

.sf__contact svg {
    flex: none;
    width: 20px;
    color: #d051ff
}

.sf__contact a:hover {
    color: #e6b8ff
}

@media (max-width:1100px) {
    .bk-options {
        grid-template-columns: repeat(2, 1fr)
    }

    .bk-grid {
        grid-template-columns: 1fr
    }

    .bk-why {
        margin-top: 0
    }

    .bk-steps {
        grid-template-columns: repeat(2, 1fr)
    }

    .bk-steps li::after {
        display: none
    }

    .bk-hero {
        background-position: 80% center
    }
}

@media (max-width:640px) {

    .bk-options,
    .bk-steps,
    .bk-form {
        grid-template-columns: 1fr
    }

    .bk-hero {
        background-size: cover
    }

    .bk-h2 span {
        display: none
    }
}

/* Form status messages (home booking + subscribe) */
.form-note {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
}

.form-note--ok {
    background: rgba(30, 215, 96, .12);
    border: 1px solid rgba(30, 215, 96, .5);
    color: #8df0b0;
}

.form-note--err {
    background: rgba(255, 90, 90, .12);
    border: 1px solid rgba(255, 90, 90, .5);
    color: #ffb0b0;
}

.sf__sub .form-note {
    margin: 10px 0 0;
}

/* ===== Address (footer + contact) ===== */
.sf__brand a.sf__addr {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    margin-top: 6px;
    color: rgba(255, 255, 255, .72);
    transition: color .2s;
}

.sf__addr:hover,
.sf__addr:focus-visible {
    color: #fff;
}

.sf__addr svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #e030ff;
}

.sf__addr address {
    font: 400 .78rem/1.5 'Montserrat', Arial, sans-serif;
    font-style: normal;
    letter-spacing: .01em;
}

.bk-direct--addr b {
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.4;
}

@media (max-width: 1000px) {
    .sf__brand a.sf__addr {
        flex-direction: row;
    }
}



/* ===== Booking form: responsive fixes ===== */
.bk-h2--form {
    font-size: clamp(20px, 5.6vw, 28px);
    flex-wrap: wrap;
    gap: 6px 12px
}

.bk-h2--form b {
    font-weight: inherit
}

.bk-grid>*,
.bk-formcol,
.bk-form>*,
.bk-f,
.bk-in {
    min-width: 0;
    max-width: 100%
}

.bk-form {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.bk-in input[type="date"] {
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    min-height: 40px
}

.bk-in input,
.bk-in select,
.bk-in textarea {
    font-size: 16px
}

/* stops iOS zoom-on-focus */
.bk-in select {
    text-overflow: ellipsis
}

@media (max-width: 1100px) {
    .bk-grid {
        grid-template-columns: minmax(0, 1fr)
    }

    .bk-options {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .bk-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width: 760px) {
    .bk-wrap {
        width: calc(100% - 28px)
    }

    .bk-form {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px
    }

    .bk-card {
        padding: 16px
    }

    .bk-h2--form {
        display: block
    }

    .bk-h2--form b,
    .bk-h2--form em {
        display: block
    }

    .bk-in {
        min-height: 48px
    }

    .bk-send {
        width: 100%;
        min-height: 52px
    }

    .bk-opt {
        padding-right: 70px
    }
}

@media (max-width: 640px) {

    .bk-options,
    .bk-steps {
        grid-template-columns: minmax(0, 1fr)
    }
}
/* ---------- Artist banner (after hero) - desktop & laptop only ---------- */
.artist-banner {
    position: relative;
    z-index: 3;
    width: calc(100% - 2 * clamp(20px, 2.4vw, 60px));
    max-width: 1600px;
    margin: 0 auto;
    aspect-ratio: 2170 / 725;
    background: url("../images/deep\ jandu\ banner.png") center / cover no-repeat;
    border: 1px solid rgba(233, 161, 62, .35);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55)
}

.artist-banner img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    border: 1px solid rgba(233, 161, 62, .35);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55)
}

@media (max-width: 1023px) {
    .artist-banner {
        width: calc(100% - 40px);
        max-width: 860px;
        margin: 22px auto 12px;
        aspect-ratio: 4 / 3;
        background-image: url("../images/deep\ jandu\ banner\ tablet-size.png");
        border-radius: 16px
    }
}

/* mobile (up to 767px): square poster */
@media (max-width: 767px) {
    .artist-banner {
        width: calc(100% - 28px);
        max-width: 560px;
        margin: 18px auto 10px;
        aspect-ratio: 1 / 1;
        background-image: url("../images/deep\ jandu\ banner\ mobile-size.png");
        border-radius: 14px
    }
}

/* YouTube API release fallback */
.youtube-release-status { color: rgba(255,255,255,.72); grid-column: 1 / -1; padding: 18px 0; font: 400 13px/1.6 Montserrat, Arial, sans-serif; }
.youtube-release-status code { color: #e4bd72; }


/* =========================================================
   DXB RECORDS — LATEST RELEASES (carousel cards)  .lr-*
   releases-section.php (home + stream page)
   ========================================================= */
.lr.latest-releases {
    padding: 56px 0 40px
}

.lr.latest-releases::before,
.lr.latest-releases::after {
    content: none
}

.lr__inner {
    width: min(1300px, calc(100% - 56px));
    margin: 0 auto
}

/* ----- heading ----- */
.lr-eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 8px;
    font: 500 clamp(12px, 1.2vw, 16px)/1 'Montserrat', Arial, sans-serif;
    letter-spacing: .5em;
    color: rgba(255, 255, 255, .92)
}

.lr-eyebrow i {
    width: clamp(50px, 7vw, 100px);
    height: 2px;
    background: linear-gradient(90deg, #e000ff, transparent)
}

.lr-head__row {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 30px);
    margin-bottom: 26px
}

.lr-title {
    margin: 0;
    white-space: nowrap;
    font: 800 clamp(32px, 3.5vw, 66px)/1 'Montserrat', Arial, sans-serif;
    letter-spacing: -.045em;
    color: #fff;
    text-shadow: 0 4px 22px rgba(0, 0, 0, .5)
}

.lr-title em {
    font-style: normal;
    color: #e000ff;
    text-shadow: 0 0 22px rgba(224, 0, 255, .3)
}

.lr-wave {
    flex: 0 1 340px;
    width: 340px;
    min-width: 0;
    height: 60px;
    filter: drop-shadow(0 0 7px rgba(224, 0, 255, .75))
}

.lr-viewall {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    padding-bottom: 8px;
    border-bottom: 2px solid #e000ff;
    font: 700 clamp(13px, 1.2vw, 16px)/1 'Montserrat', Arial, sans-serif;
    letter-spacing: .02em;
    white-space: nowrap;
    color: #fff;
    transition: color .25s ease, gap .25s ease
}

.lr-viewall svg {
    width: 28px;
    height: 14px
}

.lr-viewall:hover,
.lr-viewall:focus-visible {
    color: #f06bff;
    gap: 20px;
    outline: none
}

/* ----- track ----- */
.lr-carousel {
    --lr-gap: 20px;
    --lr-per: 4
}

.lr-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--lr-per) - 1) * var(--lr-gap)) / var(--lr-per));
    gap: var(--lr-gap);
    padding: 6px 2px 16px;
    margin: 0 -2px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain
}

.lr-track::-webkit-scrollbar {
    display: none
}

.lr-track:focus-visible {
    outline: 2px solid rgba(224, 0, 255, .6);
    outline-offset: 4px;
    border-radius: 14px
}

/* ----- card ----- */
.lr-card {
    position: relative;
    min-width: 0;
    scroll-snap-align: start;
    padding: 3px 3px 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(22, 19, 32, .95), rgba(8, 7, 14, .97));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02), 0 12px 32px rgba(0, 0, 0, .42);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s ease, box-shadow .3s ease
}

.lr-card:hover,
.lr-card:focus-within {
    transform: translateY(-4px);
    border-color: rgba(238, 65, 255, .5);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 26px rgba(206, 0, 255, .16)
}

.lr-card__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 15px;
    background: #0a0710
}

.lr-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s cubic-bezier(.2, .8, .2, 1)
}

.lr-card:hover .lr-card__thumb img {
    transform: scale(1.05)
}

.lr-card__thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 32%, transparent 70%, rgba(0, 0, 0, .35))
}

.lr-card__brand {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 14px;
    display: flex;
    flex-direction: column;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .7)
}

.lr-card__brand b {
    font: 800 clamp(18px, 1.7vw, 24px)/1 'Montserrat', Arial, sans-serif;
    letter-spacing: -.03em
}

.lr-card__brand small {
    margin-top: 2px;
    font: 600 clamp(6px, .55vw, 7.5px)/1 'Montserrat', Arial, sans-serif;
    letter-spacing: .08em
}

.lr-card__time {
    position: absolute;
    z-index: 2;
    right: 10px;
    bottom: 10px;
    padding: 5px 9px;
    border-radius: 7px;
    background: rgba(5, 4, 10, .8);
    font: 600 13px/1 'Montserrat', Arial, sans-serif;
    color: #fff
}

.lr-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "text play" "meta meta";
    column-gap: 14px;
    align-items: center;
    padding: 16px 16px 0
}

.lr-card__text {
    grid-area: text;
    min-width: 0
}

.lr-card__text h3 {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font: 700 clamp(15px, 1.25vw, 17px)/1.3 'Montserrat', Arial, sans-serif;
    color: #fff
}

.lr-card__artist {
    margin: 8px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 500 14px/1.2 'Montserrat', Arial, sans-serif;
    color: rgba(255, 255, 255, .6)
}

.lr-card__play {
    grid-area: play;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 2.5px solid #ec1cf7;
    border-radius: 50%;
    background: rgba(8, 7, 13, .7);
    box-shadow: 0 0 10px rgba(236, 28, 247, .4), inset 0 0 14px rgba(214, 0, 255, .1);
    color: #fff;
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease
}

.lr-card__play svg {
    width: 20px;
    height: 20px;
    margin-left: 2px
}

.lr-card__play:hover,
.lr-card__play:focus-visible {
    transform: scale(1.08);
    background: rgba(221, 0, 255, .22);
    box-shadow: 0 0 20px rgba(242, 64, 255, .75);
    outline: none
}

.lr-card__meta {
    grid-area: meta;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    font: 500 13px/1 'Montserrat', Arial, sans-serif;
    color: rgba(255, 255, 255, .7)
}

.lr-card__meta i {
    font-style: normal;
    margin: 0 3px
}

/* ----- kebab menu ----- */
.lr-menu {
    position: relative
}

.lr-menu__btn {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease
}

.lr-menu__btn svg {
    width: 20px;
    height: 20px
}

.lr-menu__btn:hover,
.lr-menu__btn:focus-visible,
.lr-menu__btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, .1);
    outline: none
}

.lr-menu__list {
    position: absolute;
    z-index: 20;
    right: 0;
    bottom: calc(100% + 6px);
    min-width: 168px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    background: rgba(14, 10, 24, .98);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .6)
}

.lr-menu__list[hidden] {
    display: none
}

.lr-menu__list a,
.lr-menu__list button {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 6px;
    background: none;
    text-align: left;
    color: #fff;
    font: 500 13px/1 'Montserrat', Arial, sans-serif;
    cursor: pointer
}

.lr-menu__list a:hover,
.lr-menu__list button:hover,
.lr-menu__list a:focus-visible,
.lr-menu__list button:focus-visible {
    background: rgba(224, 0, 255, .18);
    outline: none
}

/* ----- pager: arrows + dots ----- */
.lr-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 18px
}

.lr-pager[hidden] {
    display: none
}

.lr-nav {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1.5px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(14, 10, 22, .85);
    color: #fff;
    cursor: pointer;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease
}

.lr-nav svg {
    width: 20px;
    height: 20px
}

.lr-nav:hover,
.lr-nav:focus-visible {
    border-color: #e000ff;
    background: rgba(224, 0, 255, .14);
    box-shadow: 0 0 16px rgba(224, 0, 255, .45);
    outline: none
}

.lr-dots {
    display: flex;
    align-items: center;
    gap: 10px
}

.lr-dot {
    width: 24px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, .28);
    cursor: pointer;
    transition: width .3s ease, background .3s ease, box-shadow .3s ease
}

.lr-dot.is-active {
    width: 38px;
    background: #e000ff;
    box-shadow: 0 0 10px rgba(224, 0, 255, .8)
}

.lr-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px
}

/* ----- responsive ----- */
@media (max-width: 1099px) {
    .lr-carousel {
        --lr-per: 2
    }
}

@media (max-width: 899px) {
    .lr-wave {
        display: none
    }
}

@media (max-width: 679px) {
    .lr.latest-releases {
        padding: 36px 0 28px
    }

    .lr__inner {
        width: min(100% - 28px, 520px)
    }

    .lr-carousel {
        --lr-per: 1;
        --lr-gap: 14px
    }

    .lr-eyebrow {
        letter-spacing: .32em
    }

    .lr-head__row {
        align-items: flex-end;
        margin-bottom: 18px
    }

    .lr-title {
        white-space: normal;
        font-size: clamp(30px, 9vw, 40px);
        line-height: .95
    }

    .lr-title span,
    .lr-title em {
        display: block
    }

    .lr-viewall svg {
        width: 22px
    }

    .lr-nav {
        width: 42px;
        height: 42px
    }
}

@media (prefers-reduced-motion: reduce) {

    .lr-card,
    .lr-card__thumb img,
    .lr-card__play,
    .lr-nav,
    .lr-dot,
    .lr-viewall {
        transition: none
    }
}

/* =========================================================
   STREAM PAGE — featured release player (plays YouTube in place)
   ========================================================= */
.st-wave {
    cursor: pointer
}

.st-controls>.st-ctl {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #fff;
    cursor: pointer;
    transition: color .2s ease, background .2s ease
}

.st-ctl svg {
    display: block;
    width: 22px;
    height: 22px
}

.st-ctl:hover {
    background: rgba(255, 255, 255, .08)
}

.st-ctl.is-on {
    color: #c05bff
}

.st-ctl[data-act="like"].is-on svg {
    fill: currentColor
}

.st-ctl:disabled {
    opacity: .35;
    cursor: default;
    background: none
}

.st-controls__play {
    padding: 0;
    color: #fff;
    cursor: pointer;
    font: inherit;
    transition: box-shadow .25s ease, transform .25s ease
}

.st-controls__play:hover {
    transform: scale(1.06);
    box-shadow: 0 0 26px rgba(184, 77, 255, .85)
}

.st-controls__play .ico-pause {
    display: none;
    margin-left: 0
}

.st-featured.is-playing .st-controls__play .ico-play {
    display: none
}

.st-featured.is-playing .st-controls__play .ico-pause {
    display: block
}

.st-ctl:focus-visible,
.st-controls__play:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px
}

/* the song's video, shown in place of the cover once play is pressed */
.st-cover__video[hidden] {
    display: none
}

.st-cover__video {
    position: relative;
    z-index: 3;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 6px;
    background: #000;
    box-shadow: 0 0 30px rgba(190, 70, 255, .35), 0 16px 40px rgba(0, 0, 0, .6)
}

.st-cover__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0
}

.st-featured.is-video .st-featured__grid {
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr)
}

.st-featured.is-video .st-cover {
    width: 100%;
    margin-left: 0
}

.st-featured.is-video .st-cover img,
.st-featured.is-video .st-cover__vinyl {
    display: none
}

@media (max-width: 860px) {
    .st-featured.is-video .st-featured__grid {
        grid-template-columns: 1fr
    }

    .st-featured.is-video .st-cover {
        max-width: 560px;
        margin: 0 auto
    }
}

@media (prefers-reduced-motion: reduce) {

    .st-controls__play,
    .st-controls>.st-ctl {
        transition: none
    }
}

/* audio-only mode: YouTube player is kept off-screen (still plays sound), cover image stays */
.st-cover__video,
.st-cover__video[hidden] {
    display: block;
    position: fixed;
    left: -9999px;
    top: 0;
    width: 320px;
    height: 180px;
    opacity: 0;
    pointer-events: none;
    border: 0;
    box-shadow: none
}

/* waveform: bars never collapse, colour change is smooth */
.st-wave i {
    min-height: 8%;
    transition: background-color .15s linear, box-shadow .15s linear
}

/* playlist cards are links now */
a.st-playlist {
    display: block;
    color: #fff;
    text-decoration: none
}

.st-playlist__info h3 {
    max-width: calc(100% - 60px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.st-playlist__info {
    right: 62px
}