.hero-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #24102e center/cover no-repeat;
    z-index: 0
}

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

.hero-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(25,6,22,.9),rgba(54,12,42,.52),rgba(18,5,28,.5)),linear-gradient(0deg,rgba(18,5,25,.7),transparent 55%)
}

.festive-particles {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle,rgba(232,185,93,.45) 1px,transparent 1px);
    background-size: 42px 42px;
    animation: particleDrift 18s linear infinite;
    opacity: .25
}

@keyframes particleDrift {
    to {
        background-position: 84px 84px
    }
}

.reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 0;
    transition: opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)
}

.reveal {
    transform: translateY(35px)
}

.reveal-left {
    transform: translateX(-45px)
}

.reveal-right {
    transform: translateX(45px)
}

.reveal-scale {
    transform: scale(.92)
}

.is-visible {
    opacity: 1;
    transform: none
}

.media-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: #3b1737;
    box-shadow: 0 18px 45px rgba(40,12,35,.14);
    height: 100%
}

    .media-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .65s ease,filter .65s ease
    }

    .media-card:hover img {
        transform: scale(1.07);
        filter: saturate(1.08)
    }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-auto-rows: 180px;
    gap: 16px
}

    .gallery-grid .g1 {
        grid-column: span 7;
        grid-row: span 2
    }

    .gallery-grid .g2, .gallery-grid .g3 {
        grid-column: span 5
    }

    .gallery-grid .g4 {
        grid-column: span 4
    }

    .gallery-grid .g5 {
        grid-column: span 8
    }

.gallery-link {
    display: block;
    height: 100%
}

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(8,3,10,.94);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 30px;
    z-index: 1000
}

    .lightbox.open {
        display: flex
    }

.lightbox-image {
    max-width: 94vw;
    max-height: 84vh;
    object-fit: contain;
    border-radius: 14px
}

.lightbox-close {
    position: absolute;
    right: 24px;
    top: 18px;
    background: none;
    border: 0;
    color: #fff;
    font-size: 38px
}

.lightbox-caption {
    position: absolute;
    bottom: 22px;
    color: #fff
}

.video-section {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    min-height: 470px;
    background: #2a1230
}

    .video-section video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(35,7,30,.9),rgba(35,7,30,.2))
}

.video-content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 70px 8%
}

.hover-lift {
    transition: transform .3s ease,box-shadow .3s ease
}

    .hover-lift:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 55px rgba(45,12,38,.16)
    }

@media(max-width:767px) {
    .gallery-grid {
        grid-template-columns: repeat(2,1fr);
        grid-auto-rows: 160px
    }

        .gallery-grid .g1, .gallery-grid .g2, .gallery-grid .g3, .gallery-grid .g4, .gallery-grid .g5 {
            grid-column: span 1;
            grid-row: span 1
        }

        .gallery-grid .g1 {
            grid-column: span 2
        }
}

@media(prefers-reduced-motion:reduce) {
    .festive-particles {
        animation: none
    }

    .reveal, .reveal-left, .reveal-right, .reveal-scale {
        transition: none;
        transform: none;
        opacity: 1
    }
}

.brand-logo-wrap {
    position: relative;
    z-index: 20;
    padding: 12px 0
}

.brand-logo {
    display: block;
    width: min(250px,62vw);
    height: auto;
    max-height: 95px;
    object-fit: contain
}

.brand-logo-wrap a {
    display: inline-block
}

.hero .brand-logo-wrap {
    position: absolute;
    top: 12px;
    left: 5%;
}

@media(max-width:767px) {
    .brand-logo {
        width: 190px;
        max-height: 72px
    }

    .hero .brand-logo-wrap {
        left: 5px;
        top: 8px
    }
}