/*!
 * ============================================================================
 * Copyright (c) 2025 ATH SOLUTIONS (PTY) LTD. All rights reserved.
 * KwaZulu-Natal, Republic of South Africa.
 * ============================================================================
 *
 * @BEGIN Developer Log Header Block
 * @FILENAME: site.css
 * @TITLE: ATH Studios - Site Stylesheet
 * @DESCRIPTION: Styles for the public ATH Studios site (index.php and every
 *               page under pages/). Depends on design-tokens.css being loaded
 *               first for colour/spacing vars.
 * @AUTHOR: Ary van der Pijl
 * @COMPANY: ATH SOLUTIONS (PTY) LTD
 * @WEBSITE: https://www.ath.solutions/
 * @EMAIL: info@ath.solutions
 * @COPYRIGHT: All Rights Reserved
 * @LICENSE: ATH SOLUTIONS - PROPRIETARY SOFTWARE LICENCE AGREEMENT (https://www.ath.solutions/documents/ath_solutions_software_licence_agreement.pdf)
 *
 * BEGIN CHANGELOG
 * @IMPORTANT NOTICE: Developers working on these files MUST update and maintain the Developers Change Log, failure to do is not an option:
 * !==================================================================================================================================================================
 * VERSION 1.0.0.4
  - File Modified | Julia Hyde | 2026-07-17 | Added styling for the redesigned site pages and interactive components, consolidated mobile responsive styles, and cleaned up redundant CSS |
 * - File Modified | Ary van der Pijl | 2026-07-02 | ATH-STUDIOS-001 | band-kittens.png/band-neighbours.png are pre-faded to pale pink on the text side (not full-bleed photos) - removed the dark overlay + white text and switched band-feature-body to dark/magenta text to match |
 * VERSION 1.0.0.3
 * - File Modified | Ary van der Pijl | 2026-07-02 | ATH-STUDIOS-001 | Fixed the site background: studio-bg.png is a pale pink texture, not a dark image - moved it to a body-level fixed backdrop behind every inner-page section (matching the source, where every Divi section repeated it), reworked .page-hero to sit directly on that light backdrop with magenta/dark text instead of an invented dark-navy-overlay + white-text treatment, corrected .hero to use background-position: top center so the actual magenta stage-light art is visible instead of its pale lower half, and dropped the now-unused .section-muted rule |
 * VERSION 1.0.0.2
 * - File Modified | Ary van der Pijl | 2026-07-02 | ATH-STUDIOS-001 | Rebuilt styles for the full ATH Studios multi-page site (hero, page-hero, stats, events, artists, gallery, connect, contact) imported from studio.ath.solutions |
 * VERSION 1.0.0.1
 * - File Created | Ary van der Pijl | 2026-07-02 | EWC-001 | Initial brochure site stylesheet |
 * ==================================================================================================================================================================!
 * END CHANGELOG
 */

/* ─── Local Fonts ─────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto/Roboto-Regular.woff2') format('woff2'),
       url('../fonts/roboto/Roboto-Regular.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto/Roboto-Medium.woff2') format('woff2'),
       url('../fonts/roboto/Roboto-Medium.woff')  format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto/Roboto-Bold.woff2') format('woff2'),
       url('../fonts/roboto/Roboto-Bold.woff')  format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue Local';
  src: url('../fonts/helveticaneueregular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue Local';
  src: url('../fonts/helveticaneuemedium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue Local';
  src: url('../fonts/helveticaneuebold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─── Base ────────────────────────────────────────────────────────────────── */

body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--color-text);
  background-color: var(--color-surface);
  padding-top: 58px; /* clears the fixed-top navbar so it never overlaps in-flow content */
}

/* Every inner page on the real site carries this pale backdrop behind ALL of its
   sections (each Divi section repeated the same background_image) - applied here
   once at the body level rather than duplicated per section. */
body.has-studio-bg {
  background-image: url('../images/site/studio-bg.png');
  background-size: cover;
  background-position: top center;
  background-attachment: fixed;
}

#meet-bands,
#meet-team {
  scroll-margin-top: 92px; /* keeps in-page anchor targets clear of the fixed-top navbar */
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Helvetica Neue Local', 'Roboto', sans-serif;
  font-weight: 700;
  color: var(--color-text);
}

a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }

.section { padding: var(--space-16) 0; }

.section-title {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-4);
  color: black;
  letter-spacing: 1px;
}

.section-lead {
  color: var(--color-text-muted);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ─── Navbar ──────────────────────────────────────────────────────────────── */

.site-navbar {
  background-color: #7e104c;
  box-shadow: var(--shadow-xs);
}

.site-navbar .navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: 'Helvetica Neue Local', sans-serif;
  font-weight: 700;
  color: #fff;
}

.site-navbar .navbar-brand img { height: 40px; width: auto; }

.site-navbar .nav-link {
  font-weight: 500;
  padding: var(--space-2) var(--space-4) !important;
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link.active { 
  color: white; 
}

.artists-nav-item .artists-nav-wrap {
    display: flex;
    align-items: center;
    position: relative;
}

.artists-nav-wrap > .nav-link {
    padding-right: 4px;
}

.artists-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .65);
    cursor: pointer;
}

.artists-dropdown-toggle i {
    font-size: 10px;
    transition: transform .25s ease;
}

.artists-dropdown-toggle.show i {
    transform: rotate(180deg);
}

.site-navbar .btn-primary {
    --bs-btn-color: #8f0b50;
    --bs-btn-bg: #f7e8ef;
    --bs-btn-border-color: #f7e8ef;
    --bs-btn-hover-color: #8f0b50;
    --bs-btn-hover-bg: #ffffff;
    --bs-btn-hover-border-color: #ffffff;
    --bs-btn-active-color: #8f0b50;
    --bs-btn-active-bg: #ffffff;
    --bs-btn-active-border-color: #ffffff;
    --bs-btn-focus-shadow-rgb: none;
    background-color: #f7e8ef;
    border-color: #f7e8ef;
    color: #8f0b50;
}


/* ==========================================================
   HOME HERO
========================================================== */

.home-hero {
    position: relative;
    min-height: calc(100vh - 58px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(18, 10, 20, .76) 0%,
            rgba(48, 15, 35, .66) 48%,
            rgba(125, 30, 78, .52) 100%
        ),
        url("/images/site/new-background.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.home-hero::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 650px;
    height: 650px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgba(180, 50, 110, .16);
    filter: blur(130px);
    pointer-events: none;
    z-index: 1;
}

/* ==========================================================
   SPINNING RECORD
========================================================== */

.home-record-visual {
    position: absolute;
    top: 50%;
    left: -25vw;
    width: min(70vw, 1050px);
    aspect-ratio: 1;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
}

.home-record-visual .hero-record {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: .78;
    filter:
        brightness(.78)
        contrast(1.12)
        drop-shadow(25px 25px 45px rgba(0,0,0,.35));

    animation: homeRecordSpin 18s linear infinite;
}

@keyframes homeRecordSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.record-orbit {
    position: absolute;
    border-radius: 50%;
    border-style: solid;
    border-color: transparent;
    z-index: 3;
}

.record-orbit-one {
    inset: -3%;
    border-width: 2px;
    border-top-color: rgba(220, 48, 128, .8);
    border-right-color: rgba(220, 48, 128, .35);
    transform: rotate(35deg);
}

.record-orbit-two {
    inset: -6%;
    border-width: 1px;
    border-top-color: rgba(255,255,255,.22);
    border-right-color: rgba(220,48,128,.55);
    transform: rotate(65deg);
}

.record-accent-dot {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d82c7c;
    box-shadow:
        0 0 10px rgba(216,44,124,.8),
        0 0 25px rgba(216,44,124,.5);
    z-index: 4;
}

.record-dot-one {
    top: 5%;
    right: 18%;
}

.record-dot-two {
    top: 24%;
    right: -2%;
    width: 6px;
    height: 6px;
}

.record-dot-three {
    bottom: 13%;
    right: 7%;
    width: 12px;
    height: 12px;
}

.record-accent-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        #d82c7c
    );
    z-index: 4;
    box-shadow: 0 0 10px rgba(216,44,124,.4);
}

.record-line-one {
    top: 13%;
    right: -1%;
    width: 75px;
    transform: rotate(-28deg);
}

.record-line-two {
    bottom: 24%;
    right: -5%;
    width: 110px;
    transform: rotate(22deg);
}

/* ==========================================================
   HERO CONTENT
========================================================== */

.home-hero .hero-inner {
    position: relative;
    z-index: 4;
    width: 100%;
}

.home-hero-content {
    position: relative;
    z-index: 5;
    width: 48%;
    max-width: 680px;
    margin-left: auto;
}

.home-hero-label {
    display: block;
    margin-bottom: 28px;
    color: rgba(255, 255, 255, .78);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 4px;
}

.home-hero .hero-logo-lockup {
    display: block;
    width: min(100%, 650px);
    height: auto;
    margin: 0 0 25px;
}

.home-hero .hero-tagline {
    max-width: 580px;
    margin: 0 0 35px;
    color: rgba(255, 255, 255, .9);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 500;
    line-height: 1.7;
}

.home-hero .hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* ==========================================================
   HERO BUTTONS
========================================================== */

.home-primary-button,
.home-secondary-button {
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 15px 26px;
    border-radius: 12px;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.home-primary-button {
    background: #990c4f;
    color: #fff;
    border: 1px solid #990c4f;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .18);
}

.home-primary-button:hover {
    transform: translateY(-4px);
    background: #b00e5b;
    border-color: #b00e5b;
    color: #fff;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .25);
}

.home-primary-button i {
    transition: transform .3s ease;
}

.home-primary-button:hover i {
    transform: translateX(5px);
}

.home-secondary-button {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.home-secondary-button:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .65);
    color: #fff;
}

/* ==========================================================
   HERO SCROLL INDICATOR
========================================================== */

.home-hero-scroll {
    position: absolute;
    right: 55px;
    bottom: 45px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.home-hero-scroll span {
    color: rgba(255, 255, 255, .65);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: 3px;
    writing-mode: vertical-rl;
}

.home-hero-scroll-line {
    width: 1px;
    height: 55px;
    overflow: hidden;
    background: rgba(255, 255, 255, .25);
}

.home-hero-scroll-line::after {
    content: "";
    display: block;
    width: 100%;
    height: 50%;
    background: #fff;
    animation: homeScrollLine 2s ease-in-out infinite;
}

@keyframes homeScrollLine {
    0% {
        transform: translateY(-110%);
    }

    100% {
        transform: translateY(220%);
    }
}

/* ==========================================================
   HERO RESPONSIVE
========================================================== */

@media (max-width: 991px) {

    .home-hero {
        min-height: 800px;
    }

    .home-hero .hero-record {
        left: -30vw;
        width: 85vw;
        opacity: .4;
    }

    .home-hero-content {
        width: 60%;
        margin-left: auto;
    }
}



/* Accessibility */

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

    .home-hero .hero-record {
        animation: none;
    }
}

/* ==========================================================
   HOME INTRO
========================================================== */

.home-intro-section{
    position:relative;
    padding-top:120px;
    padding-bottom:100px;
    overflow:hidden;
}

.home-intro-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
    align-items:start;
}

.home-intro-label{
    margin-bottom:25px;
}

.home-intro-heading h2{
    max-width:650px;
    margin:0;
    color:#101524;
    font-size:clamp(2.8rem,5vw,5rem);
    font-weight:700;
    line-height:1.03;
    letter-spacing:-2px;
}

.home-intro-content{
    max-width:570px;
    padding-top:48px;
}

.home-intro-content p{
    margin:0 0 20px;
    color:#667085;
    font-size:1rem;
    line-height:1.8;
}

.home-intro-content .home-intro-lead{
    color:#344054;
    font-size:1.18rem;
    font-weight:600;
    line-height:1.7;
}

/* ==========================================================
   TEXT LINK
========================================================== */

.home-text-link{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-top:12px;
    padding-bottom:5px;
    color:#990c4f;
    font-size:.85rem;
    font-weight:700;
    text-decoration:none;
}

.home-text-link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:1px;
    background:#990c4f;
    transition:width .35s ease;
}

.home-text-link:hover{
    color:#990c4f;
}

.home-text-link:hover::after{
    width:100%;
}

.home-text-link i{
    transition:transform .3s ease;
}

.home-text-link:hover i{
    transform:translateX(5px);
}

/* ==========================================================
   HOME INTRO STATS
========================================================== */

.home-intro-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:90px;
    border-top:1px solid rgba(153,12,79,.13);
    border-bottom:1px solid rgba(153,12,79,.13);
}

.home-intro-stat{
    position:relative;
    min-height:150px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:30px 35px;
}

.home-intro-stat:not(:last-child){
    border-right:1px solid rgba(153,12,79,.13);
}

.home-intro-stat strong{
    display:block;
    margin-bottom:10px;
    color:#990c4f;
    font-size:clamp(2rem,3vw,3.2rem);
    line-height:1;
}

.home-intro-stat span{
    color:#667085;
    font-size:.65rem;
    font-weight:800;
    letter-spacing:2px;
}

/* ==========================================================
   HOME SERVICES
========================================================== */

.home-services-section{
    position:relative;
    padding-top:110px;
    padding-bottom:130px;
    overflow:hidden;
}

.home-section-heading{
    display:grid;
    grid-template-columns:1fr .65fr;
    gap:80px;
    align-items:end;
    margin-bottom:60px;
}

.home-services-label{
    margin-bottom:22px;
}

.home-section-heading h2{
    margin:0;
    color:#101524;
    font-size:clamp(2.8rem,4.5vw,4.5rem);
    font-weight:700;
    line-height:1.05;
    letter-spacing:-1.5px;
}

.home-section-heading-content{
    padding-bottom:8px;
}

.home-section-heading-content p{
    max-width:500px;
    margin:0 0 10px;
    color:#667085;
    font-size:1rem;
    line-height:1.75;
}

/* ==========================================================
   SERVICES GRID
========================================================== */

.home-services-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.home-service-card{
    position:relative;
    min-height:245px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-rows:auto 1fr;
    gap:20px 25px;
    padding:38px;
    overflow:hidden;
    border-radius:24px;
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.9);
    box-shadow:
        0 15px 40px rgba(40,20,30,.06),
        inset 0 1px 0 rgba(255,255,255,.9);
    color:inherit;
    text-decoration:none;
    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}

.home-service-card::before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    right:-140px;
    bottom:-150px;
    border-radius:50%;
    background:rgba(153,12,79,.12);
    filter:blur(45px);
    transition:
        transform .5s ease,
        opacity .5s ease;
}

.home-service-card:hover{
    transform:translateY(-8px);
    border-color:rgba(153,12,79,.18);
    box-shadow:
        0 28px 60px rgba(40,20,30,.11),
        inset 0 1px 0 rgba(255,255,255,1);
}

.home-service-card:hover::before{
    transform:scale(1.5);
}

/* ==========================================================
   SERVICE NUMBER
========================================================== */

.home-service-number{
    grid-column:1 / -1;
    color:rgba(153,12,79,.55);
    font-size:.65rem;
    font-weight:800;
    letter-spacing:2px;
}

/* ==========================================================
   SERVICE ICON
========================================================== */

.home-service-icon{
    position:relative;
    z-index:2;
    width:62px;
    height:62px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    background:rgba(153,12,79,.08);
    border:1px solid rgba(153,12,79,.10);
    color:#990c4f;
    font-size:1.3rem;
    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease;
}

.home-service-card:hover .home-service-icon{
    transform:rotate(-5deg) scale(1.08);
    background:#990c4f;
    color:#fff;
}

/* ==========================================================
   SERVICE CONTENT
========================================================== */

.home-service-content{
    position:relative;
    z-index:2;
}

.home-service-content h3{
    margin:0 0 10px;
    color:#101524;
    font-size:1.35rem;
    font-weight:700;
}

.home-service-content p{
    max-width:390px;
    margin:0;
    color:#667085;
    font-size:.9rem;
    line-height:1.7;
}

/* ==========================================================
   SERVICE ARROW
========================================================== */

.home-service-arrow{
    position:relative;
    z-index:2;
    align-self:start;
    color:rgba(153,12,79,.45);
    font-size:1rem;
    transition:
        transform .35s ease,
        color .35s ease;
}

.home-service-card:hover .home-service-arrow{
    color:#990c4f;
    transform:translate(5px,-5px);
}

/* =========================================================
   HOME - ARTISTS TEASER
========================================================= */

.home-artists-section {
    position: relative;
    padding: var(--space-12) 0;
    overflow: hidden;
}

.home-artists-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 50px;
}

.home-artists-heading {
    flex: 1;
}

.home-artists-label {
    margin-bottom: 18px;
}

.home-artists-heading .section-title {
    margin: 0;
}

.home-artists-intro {
    max-width: 480px;
}

.home-artists-intro p {
    margin: 0 0 20px;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.8;
}

.home-artists-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
    transition:
        gap .3s ease,
        color .3s ease;
}

.home-artists-link:hover {
    gap: 18px;
}

.home-artists-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 24px;
}

.home-artist-card {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    border-radius: 28px;
    text-decoration: none;
    color: #fff;
    isolation: isolate;
    box-shadow: 0 24px 60px rgba(26, 8, 18, .16);
}

.home-artist-card-large {
    min-height: 600px;
}

.home-artist-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -3;
    transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

.home-artist-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(
            180deg,
            rgba(10, 8, 16, .05) 15%,
            rgba(10, 8, 16, .25) 50%,
            rgba(10, 8, 16, .92) 100%
        );
    transition: background .4s ease;
}

.home-artist-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            135deg,
            transparent 45%,
            rgba(153, 12, 79, .28) 100%
        );
    opacity: 0;
    transition: opacity .4s ease;
}

.home-artist-number {
    position: absolute;
    top: 28px;
    right: 30px;
    color: rgba(255, 255, 255, .65);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 3px;
}

.home-artist-content {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 36px;
}

.home-artist-eyebrow {
    display: block;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, .72);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 3px;
}

.home-artist-content h3 {
    max-width: 620px;
    margin: 0 0 24px;
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 3.2rem);
    font-weight: 800;
    line-height: 1.05;
}

.home-artist-card:not(.home-artist-card-large) .home-artist-content h3 {
    font-size: clamp(1.8rem, 2.5vw, 2.6rem);
}

.home-artist-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.home-artist-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.home-artist-genres span {
    padding: 7px 13px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 100px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, .88);
    font-size: .72rem;
    font-weight: 600;
}

.home-artist-arrow {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
    color: #fff;
    transition:
        background .3s ease,
        transform .3s ease;
}

.home-artist-card:hover .home-artist-image {
    transform: scale(1.05);
}

.home-artist-card:hover::after {
    opacity: 1;
}

.home-artist-card:hover .home-artist-arrow {
    background: var(--color-primary);
    transform: translateX(4px);
}

.home-artists-mobile-link {
    display: none;
}

/* =========================================================
   HOME - FINAL CTA
========================================================= */

.home-final-cta {
    position: relative;
    padding: 70px 0 60px;
}

.home-cta-card {
    position: relative;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding: 55px 60px;
    overflow: hidden;
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 85% 40%,
            rgba(216, 44, 124, .28),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #171018 0%,
            #25111d 55%,
            #351225 100%
        );
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow:
        0 25px 65px rgba(30, 10, 20, .16);
}

.home-cta-card::before {
    content: "";
    position: absolute;
    top: -150px;
    right: 10%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(153, 12, 79, .18);
    filter: blur(90px);
    pointer-events: none;
}

/* =========================================================
   CTA CONTENT
========================================================= */

.home-cta-content {
    position: relative;
    z-index: 3;
    max-width: 620px;
}

.home-cta-label {
    display: block;
    margin-bottom: 18px;
    color: #d82c7c;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 3px;
}

.home-cta-content h2 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(2.5rem, 4.5vw, 4.5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1.5px;
}

.home-cta-content p {
    max-width: 560px;
    margin: 0;
    color: rgba(255, 255, 255, .62);
    font-size: .95rem;
    line-height: 1.8;
}

/* =========================================================
   CTA ACTIONS
========================================================= */

.home-cta-actions {
    position: relative;
    z-index: 4;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.home-cta-primary,
.home-cta-secondary {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.home-cta-primary {
    background: #990c4f;
    border: 1px solid #990c4f;
    color: #fff;
    box-shadow:
        0 12px 30px rgba(153, 12, 79, .28);
}

.home-cta-primary:hover {
    transform: translateY(-3px);
    background: #b00e5b;
    border-color: #b00e5b;
    color: #fff;
    box-shadow:
        0 18px 38px rgba(153, 12, 79, .4);
}

.home-cta-primary i {
    transition: transform .3s ease;
}

.home-cta-primary:hover i {
    transform: translateX(5px);
}

.home-cta-secondary {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .85);
}

.home-cta-secondary:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

/* =========================================================
   SOUND BAR DECORATION
========================================================= */

.home-cta-decoration {
    position: absolute;
    right: 285px;
    bottom: 0;
    z-index: 1;
    height: 115px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    opacity: .16;
    pointer-events: none;
}

.home-cta-decoration span {
    width: 6px;
    border-radius: 6px 6px 0 0;
    background: #fff;
    animation: homeCtaSound 1.8s ease-in-out infinite;
}

.home-cta-decoration span:nth-child(1) {
    height: 35px;
    animation-delay: 0s;
}

.home-cta-decoration span:nth-child(2) {
    height: 65px;
    animation-delay: .15s;
}

.home-cta-decoration span:nth-child(3) {
    height: 95px;
    animation-delay: .3s;
}

.home-cta-decoration span:nth-child(4) {
    height: 55px;
    animation-delay: .45s;
}

.home-cta-decoration span:nth-child(5) {
    height: 105px;
    animation-delay: .6s;
}

.home-cta-decoration span:nth-child(6) {
    height: 75px;
    animation-delay: .75s;
}

.home-cta-decoration span:nth-child(7) {
    height: 42px;
    animation-delay: .9s;
}

@keyframes homeCtaSound {
    0%,
    100% {
        transform: scaleY(.65);
        opacity: .5;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .home-cta-card {
        gap: 40px;

        padding: 50px 45px;
    }

    .home-cta-actions {
        min-width: 190px;
    }

    .home-cta-decoration {
        right: 230px;
    }
}

/* Accessibility */

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

    .home-cta-decoration span {
        animation: none;
    }
}

/* ─── Page Hero (inner pages) ─────────────────────────────────────────────── */

.page-hero {
  padding: var(--space-12) 0 var(--space-8);
  text-align: center;
}

.page-hero-title {
  color: var(--color-primary);
  letter-spacing: 6px;
  font-size: var(--text-4xl);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  width: 100%;
  display:inline-block;
  position:relative;
  padding-bottom:18px;
}

.page-hero-lead {
  color: var(--color-text);
  max-width: 640px;
  margin: 0 auto;
}

.services-subtitle {
    display: flex;
    width: fit-content;
    margin: 18px auto 0;
}

/* ==========================================================
   FOUNDER STATS
========================================================== */

.stats-row{
    margin-top:24px;
    position:relative;
    z-index:5;

}

.stat-block{
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:170px;
    padding:24px 16px;
    border-radius:24px;
    background:rgba(255,255,255,.16);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.35);
    box-shadow:
        0 12px 35px rgba(153,12,79,.08),
        inset 0 1px 0 rgba(255,255,255,.6);
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.stat-block::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top left,
        rgba(255,255,255,.4),
        transparent 60%);
    pointer-events:none;
}

/* shine */

.stat-block::after{
    content:"";
    position:absolute;
    top:-120%;
    left:-90%;
    width:60%;
    height:320%;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );
    transform:rotate(25deg);
    transition:left 1s ease;

}

.stat-block:hover::after{
    left:160%;
}

.stat-block:hover{
    transform:
        translateY(-6px);
    box-shadow:
        0 22px 45px rgba(153,12,79,.18);

}

.stat-icon{
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:16px;
    border-radius:50%;
    background:
        rgba(255,255,255,.22);
    backdrop-filter:blur(15px);
    border:
        1px solid rgba(255,255,255,.55);
    color:#990c4f;
    font-size:22px;
    transition:.35s ease;
}

.stat-block:hover .stat-icon{
    transform:
        scale(1.08);
    background:
        rgba(153,12,79,.18);
}

.stat-block strong{
    display:block;
    margin-bottom:8px;
    font-size:2.2rem;
    font-weight:700;
    line-height:1;
    color:#990c4f;
}

.stat-block span{
    display:block;
    font-size:.72rem;
    letter-spacing:2px;
    text-transform:uppercase;
    font-weight:700;
    color:#666;
}

/* ==========================================
   ABOUT PAGE ANIMATIONS
========================================== */

.reveal,
.reveal-left,
.reveal-right {
    opacity: 0;
    transition: all .8s ease;
}

.reveal {
    transform: translateY(40px);
}

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

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

.reveal.active,
.reveal-left.active,
.reveal-right.active {
    opacity: 1;
    transform: translate(0);
}

.about-image-wrapper{
    transition:
        transform .35s ease,
        box-shadow .35s ease;
    transform-style:preserve-3d;
    will-change:transform;
}

.about-image-wrapper:hover{
    transform:translateY(-8px);
}

.about-group-photo{
    position:relative;
    z-index:2;
    width:100%;
    max-height:560px;
    display:block;
    border-radius:22px;
    object-fit:cover;
    transition:
        filter .45s ease;
}

.about-image-wrapper:hover .about-group-photo{
    filter:brightness(1.03);
}

.about-image-wrapper::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:460px;
    height:460px;
    transform:translate(-50%,-50%);
    background:
        radial-gradient(circle,
        rgba(153,12,79,.22),
        transparent 72%);
    filter:blur(90px);
    opacity:.9;
    transition:
        transform .35s ease;
    z-index:1;
}

.about-image-wrapper::after{
    content:"";
    position:absolute;
    top:-120%;
    left:-80%;
    width:60%;
    height:300%;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.30),
            transparent
        );
    transform:rotate(25deg);
    transition:left 1.2s ease;
    z-index:3;
    pointer-events:none;
}

.about-image-wrapper:hover::after{
    left:160%;
}

.intro-text {
    font-size:1.18rem;
    font-weight:500;
    color:#333!important;
}

.page-hero-title::after {
    content:"";
    position:absolute;
    bottom:0;
    left:50%;
    width:90px;
    height:4px;
    transform:translateX(-50%);
    background:
    linear-gradient(
    90deg,
    transparent,
    #990c4f,
    transparent);
    border-radius:999px;
}

/* ===============================
   Section Labels
================================ */

.section-label{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
    color:#990c4f;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;
}

.section-label::before{
    content:"";
    width:42px;
    height:2px;
    background:#990c4f;
    border-radius:999px;
}

.services-grid-label {
    gap: 0;
}

.services-grid-label::before {
    display: none;
}


.services-section{
    position:relative;
    overflow:hidden;
    padding-top:50px;
}

/* ==========================================================
   SERVICES GRID
========================================================== */

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1250px;
    margin: 0 auto;
}


/* ==========================================================
   SERVICE CARD
========================================================== */

.service-card {
    position: relative;
    min-height: 310px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1px;
    clip-path: polygon(
        7% 0,
        93% 0,
        100% 10%,
        100% 90%,
        93% 100%,
        7% 100%,
        0 90%,
        0 10%
    );

    background: linear-gradient(
        135deg,
        rgba(255,255,255,1),
        rgba(255,255,255,.75),
        rgba(153,12,79,.10),
        rgba(255,255,255,.95)
    );
    filter: drop-shadow(
        0 18px 28px rgba(70,20,45,.14)
    );
    transition:
        transform .4s ease,
        filter .4s ease;
}


/* ==========================================================
   INNER GLASS
========================================================== */

.service-card-inner {
    position: relative;
    width: 100%;
    min-height: 308px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 42px 40px;
    text-align: center;
    clip-path: polygon(
        7% 0,
        93% 0,
        100% 10%,
        100% 90%,
        93% 100%,
        7% 100%,
        0 90%,
        0 10%
    );
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    overflow: hidden;
}

.service-card-inner::before {
    content: "";
    position: absolute;
    top: -100px;
    left: -80px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255,255,255,.9),
        transparent 70%
    );
    pointer-events: none;
}

/* ==========================================================
   GLASS SHINE
========================================================== */

.service-card-inner::after {
    content: "";
    position: absolute;
    top: -150%;
    left: -120%;
    width: 55%;
    height: 400%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.7),
        transparent
    );
    transform: rotate(25deg);
    transition: left 1s ease;
    pointer-events: none;
}

.service-card:hover .service-card-inner::after {
    left: 170%;
}

/* ==========================================================
   HOVER
========================================================== */

.service-card:hover {
    transform: translateY(-8px);
    filter: drop-shadow(
        0 28px 35px rgba(70,20,45,.20)
    );
}

/* ==========================================================
   ICON
========================================================== */

.service-icon {
    position: relative;
    z-index: 2;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(153,12,79,.12);
    color: #990c4f;
    font-size: 27px;
    box-shadow:
        0 8px 24px rgba(0,0,0,.05),
        inset 0 1px 0 rgba(255,255,255,.9);
    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;
}

.service-card:hover .service-icon {
    transform:
        translateY(-4px)
        scale(1.08);
    background: #990c4f;
    color: #fff;
    box-shadow:
        0 10px 25px rgba(153,12,79,.22);
}

/* ==========================================================
   TEXT
========================================================== */

.service-title {
    position: relative;
    z-index: 2;
    margin-bottom: 14px;
    font-size: 1.35rem;
    color: #111827;
}

.service-text {
    position: relative;
    z-index: 2;
    max-width: 300px;
    margin: 0;
    color: #667085;
    font-size: 1rem;
    line-height: 1.7;
}

/* ==========================================================
   INTERACTIVE STUDIO CTA
========================================================== */

.studio-cta{
    position:relative;
    max-width:1250px;
    min-height:520px;
    margin:110px auto 20px;
    border-radius:32px;
    overflow:hidden;
    background-image:url("/images/site/mixing-image.png");
    background-size:cover;
    background-position:center;
    box-shadow:0 30px 80px rgba(20,10,18,.22);
}

.studio-cta-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(10,12,20,.94) 0%,
        rgba(20,10,20,.88) 45%,
        rgba(75,5,40,.72) 100%
    );
}

.studio-cta-content{
    position:relative;
    z-index:2;
    min-height:520px;
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    align-items:center;
    gap:60px;
    padding:65px;
}

.studio-cta-copy{
    color:#fff;
}

.studio-label{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:22px;
    color:#fff;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:4px;
}

.studio-label::before{
    content:"";
    width:42px;
    height:2px;
    background:#fff;
}

.studio-cta-copy h2{
    margin-bottom:20px;
    color:#fff;
    font-size:clamp(2.5rem,4vw,4rem);
    line-height:1.05;
}

.studio-cta-copy p{
    max-width:480px;
    margin-bottom:32px;
    color:rgba(255,255,255,.72);
    font-size:1.05rem;
    line-height:1.7;
}

.studio-cta-button{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:15px 28px;
    border-radius:12px;
    background:#990c4f;
    color:#fff;
    font-weight:700;
    text-decoration:none;
    transition:.3s ease;
}

.studio-cta-button:hover{
    transform:translateY(-3px);
    color:#fff;
    background:#b10e5c;
    box-shadow:0 15px 35px rgba(153,12,79,.4);
}

.studio-cta-button i{
    transition:transform .3s ease;
}

.studio-cta-button:hover i{
    transform:translateX(5px);
}

/* MIXING BOARD */

.mixing-board{
    padding:32px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:24px;
    background:rgba(8,10,18,.68);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:
        0 25px 50px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.12);
}

.mixing-board-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:25px;
}

.board-eyebrow{
    display:block;
    margin-bottom:4px;
    color:#c84a86;
    font-size:.6rem;
    font-weight:700;
    letter-spacing:3px;
}

.mixing-board h3{
    margin:0;
    color:#fff;
    font-size:1.4rem;
}

.board-status{
    display:flex;
    align-items:center;
    gap:7px;
    color:rgba(255,255,255,.6);
    font-size:.65rem;
    font-weight:700;
    letter-spacing:2px;
}

.status-light{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#4cff8f;
    box-shadow:0 0 10px #4cff8f;
    animation:statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse{
    50%{
        opacity:.4;
    }
}

/* AUDIO METERS */

.channel-meters{
    height:55px;
    display:flex;
    align-items:flex-end;
    gap:6px;
    margin-bottom:28px;
    padding:10px;
    border-radius:10px;
    background:rgba(0,0,0,.3);
}

.channel-meter{
    flex:1;
    height:100%;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    border-radius:3px;
    background:rgba(255,255,255,.05);
}

.channel-meter span{
    width:100%;
    height:var(--level);
    background:linear-gradient(
        to top,
        #990c4f,
        #d94a91
    );
    animation:meterPulse 1.2s ease-in-out infinite alternate;
}

.channel-meter:nth-child(2) span{
    animation-delay:.2s;
}

.channel-meter:nth-child(3) span{
    animation-delay:.4s;
}

.channel-meter:nth-child(4) span{
    animation-delay:.6s;
}

@keyframes meterPulse{
    from{
        transform:scaleY(.55);
        transform-origin:bottom;
    }
    to{
        transform:scaleY(1);
        transform-origin:bottom;
    }
}

/* CHANNELS */

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

.mixer-channel{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.mixer-knob{
    position:relative;
    width:38px;
    height:38px;
    margin-bottom:22px;
    border-radius:50%;
    cursor:pointer;
    background:
        radial-gradient(circle at 35% 30%,#777,#252832 55%,#090b10);
    border:2px solid rgba(255,255,255,.12);
    box-shadow:0 5px 12px rgba(0,0,0,.4);
    transition:transform .3s ease;
}

.mixer-knob::after{
    content:"";
    position:absolute;
    top:5px;
    left:50%;
    width:2px;
    height:10px;
    border-radius:2px;
    background:#d94a91;
    transform:translateX(-50%);
}

.fader-track{
    position: relative;
    width: 8px;
    height: 130px;
    margin-bottom: 18px;
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    cursor: pointer;
}

.fader-fill{
    position:absolute;
    bottom:0;
    width:100%;
    height:50%;
    border-radius:10px;
    background:rgba(153,12,79,.4);
}

.fader-handle{
    position: absolute;
    left: 50%;
    width: 34px;
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(#ddd,#777);
    border: 1px solid rgba(255,255,255,.4);
    box-shadow: 0 4px 8px rgba(0,0,0,.4);
    transform: translate(-50%,50%);
    cursor: grab;
    transition:
        width .2s ease,
        box-shadow .2s ease;
    touch-action: none;
}

.fader-handle:hover{
    width:40px;
    box-shadow:0 0 15px rgba(217,74,145,.5);
}

.mixer-channel > span{
    color:rgba(255,255,255,.55);
    font-size:.6rem;
    font-weight:700;
    letter-spacing:1.5px;
}

/* ==========================================================
   EVENTS SECTION
========================================================== */

.events-section{
    padding-top:20px;
    padding-bottom:100px;
}

.events-content{
    max-width:1250px;
    margin:0 auto;
}

/* ==========================================================
   SECTION LABEL
========================================================== */

.events-section-label{
    display:flex;
    width:fit-content;
    gap:0;
    margin-bottom:28px;
}

.events-section-label::before{
    display:none;
}

/* ==========================================================
   EVENT TABS
========================================================== */

.events-tabs{
    display:flex;
    align-items:center;
    gap:10px;
    width:fit-content;
    margin-bottom:40px;
    padding:6px;
    border-radius:16px;
    background:rgba(255,255,255,.45);
    border:1px solid rgba(255,255,255,.65);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 10px 30px rgba(80,20,50,.06);
}

.events-tab{
    display:flex;
    align-items:center;
    gap:10px;
    padding:13px 20px;
    border:0;
    border-radius:11px;
    background:transparent;
    color:#667085;
    font-size:.9rem;
    font-weight:700;
    cursor:pointer;
    transition:
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

.events-tab span{
    min-width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 7px;
    border-radius:50px;
    background:rgba(153,12,79,.08);
    color:#990c4f;
    font-size:.7rem;
}

.events-tab:hover{
    color:#990c4f;
}

.events-tab.active{
    background:#990c4f;
    color:#fff;
    box-shadow:0 8px 20px rgba(153,12,79,.22);
}

.events-tab.active span{
    background:rgba(255,255,255,.18);
    color:#fff;
}

/* ==========================================================
   EVENT PANELS
========================================================== */

.events-panel{
    display:none;
}

.events-panel.active{
    display:block;
    animation:eventPanelFade .45s ease;
}

@keyframes eventPanelFade{
    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ==========================================================
   EVENT LIST
========================================================== */

.event-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* ==========================================================
   EVENT CARD
========================================================== */

.event-card{
    position:relative;
    display:grid;
    grid-template-columns:130px 1fr;
    align-items:stretch;
    min-height:170px;
    overflow:hidden;
    border-radius:24px;
    background:rgba(255,255,255,.82);
    border:1px solid rgba(255,255,255,.85);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    box-shadow:
        0 12px 35px rgba(55,20,40,.08),
        inset 0 1px 0 rgba(255,255,255,.9);
    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}

.event-card:hover{
    transform:translateY(-6px);
    border-color:rgba(153,12,79,.18);
    box-shadow:
        0 24px 50px rgba(80,20,50,.14),
        inset 0 1px 0 rgba(255,255,255,1);
}

.event-card::after{
    content:"";
    position:absolute;
    top:-150%;
    left:-80%;
    width:40%;
    height:400%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );
    transform:rotate(25deg);
    pointer-events:none;
    transition:left 1s ease;
}

.event-card:hover::after{
    left:150%;
}

/* ==========================================================
   EVENT DATE
========================================================== */

.event-date{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:30px 20px;
    background:linear-gradient(
        145deg,
        rgba(153,12,79,.10),
        rgba(255,255,255,.30)
    );
    border-right:1px solid rgba(153,12,79,.08);
}

.event-day{
    display:block;
    color:#990c4f;
    font-size:3rem;
    font-weight:800;
    line-height:.9;
}

.event-month{
    display:block;
    margin-top:10px;
    color:#667085;
    font-size:.8rem;
    font-weight:800;
    letter-spacing:3px;
}

/* ==========================================================
   EVENT CONTENT
========================================================== */

.event-body{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:30px 35px;
}

.event-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:25px;
    margin-bottom:14px;
}

.event-title{
    margin:0;
    color:#111827;
    font-size:1.3rem;
    font-weight:750;
    line-height:1.3;
}

/* ==========================================================
   EVENT BADGE
========================================================== */

.event-badge{
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 13px;
    border-radius:8px;
    background:rgba(153,12,79,.10);
    color:#990c4f;
    font-size:.65rem;
    font-weight:800;
    letter-spacing:1.5px;
}

/* ==========================================================
   EVENT DETAILS
========================================================== */

.event-details{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px 24px;
    margin-bottom:12px;
}

.event-details span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#667085;
    font-size:.88rem;
    font-weight:500;
}

.event-details i{
    width:16px;
    color:#990c4f;
    text-align:center;
}

.event-text{
    max-width:850px;
    margin:0;
    color:#667085;
    font-size:.95rem;
    line-height:1.65;
}

/* ==========================================================
   PAST EVENTS
========================================================== */

.event-card-past{
    background:rgba(255,255,255,.58);
}

.event-card-past .event-date{
    background:rgba(255,255,255,.22);
}

.event-card-past .event-day{
    color:#8a6678;
}

.event-card-past .event-badge{
    background:rgba(80,80,80,.08);
    color:#777;
}

.event-card-past:hover{
    background:rgba(255,255,255,.78);
}

/* ==========================================================
   EMPTY STATE
========================================================== */

.events-empty{
    padding:80px 30px;
    text-align:center;
    border-radius:26px;
    background:rgba(255,255,255,.55);
    border:1px solid rgba(255,255,255,.7);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}

.events-empty i{
    display:flex;
    align-items:center;
    justify-content:center;
    width:72px;
    height:72px;
    margin:0 auto 22px;
    border-radius:50%;
    background:rgba(153,12,79,.08);
    color:#990c4f;
    font-size:1.8rem;
}

.events-empty h3{
    margin-bottom:10px;
    color:#111827;
    font-size:1.4rem;
}

.events-empty p{
    margin:0;
    color:#667085;
}

/* ==========================================================
   EVENTS FOLLOW CTA
========================================================== */

.events-follow-section {
    padding: 20px 0 100px;
}

.events-follow-card {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 32px;
    background-image: url("/images/site/events-cta.jpg");
    background-size: cover;
    background-position: center;
    box-shadow: 0 30px 80px rgba(20, 10, 18, .20);
}

.events-follow-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(10, 10, 18, .94) 0%,
        rgba(20, 8, 18, .86) 48%,
        rgba(110, 8, 60, .62) 100%
    );
    z-index: 1;
}

/* ==========================================================
   CONTENT
========================================================== */

.events-follow-content {
    position: relative;
    z-index: 3;
    max-width: 600px;
    padding: 70px;
    color: #fff;
}

.events-follow-label {
    margin-bottom: 22px;
    color: rgba(255, 255, 255, .75);
}

.events-follow-label::before {
    background: rgba(255, 255, 255, .75);
}

.events-follow-content h2 {
    margin: 0 0 20px;
    color: #fff;
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    line-height: 1.05;
}

.events-follow-content p {
    max-width: 520px;
    margin: 0 0 32px;
    color: rgba(255, 255, 255, .72);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* ==========================================================
   BUTTON
========================================================== */

.events-follow-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 28px;
    border-radius: 12px;
    background: #990c4f;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(153, 12, 79, .30);
    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.events-follow-button:hover {
    transform: translateY(-3px);
    background: #b10e5c;
    color: #fff;
    box-shadow: 0 18px 38px rgba(153, 12, 79, .45);
}

.events-follow-button i {
    transition: transform .3s ease;
}

.events-follow-button:hover i {
    transform: translateX(5px);
}

/* ==========================================================
   ANIMATED EQUALIZER
========================================================== */

.events-follow-equalizer {
    position: absolute;
    right: 7%;
    bottom: 0;
    z-index: 2;
    height: 75%;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    opacity: .38;
    pointer-events: none;
}

.events-follow-equalizer span {
    width: 10px;
    height: 45%;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(
        to top,
        rgba(153, 12, 79, .9),
        rgba(255, 255, 255, .75)
    );
    transform-origin: bottom;
    animation: eventEqualizer 1.4s ease-in-out infinite alternate;
}

.events-follow-equalizer span:nth-child(1) {
    height: 30%;
    animation-delay: -.2s;
}

.events-follow-equalizer span:nth-child(2) {
    height: 55%;
    animation-delay: -.8s;
}

.events-follow-equalizer span:nth-child(3) {
    height: 75%;
    animation-delay: -.4s;
}

.events-follow-equalizer span:nth-child(4) {
    height: 42%;
    animation-delay: -1s;
}

.events-follow-equalizer span:nth-child(5) {
    height: 88%;
    animation-delay: -.6s;
}

.events-follow-equalizer span:nth-child(6) {
    height: 60%;
    animation-delay: -.1s;
}

.events-follow-equalizer span:nth-child(7) {
    height: 95%;
    animation-delay: -.9s;
}

.events-follow-equalizer span:nth-child(8) {
    height: 48%;
    animation-delay: -.3s;
}

.events-follow-equalizer span:nth-child(9) {
    height: 72%;
    animation-delay: -.7s;
}

.events-follow-equalizer span:nth-child(10) {
    height: 38%;
    animation-delay: -1.1s;
}

.events-follow-equalizer span:nth-child(11) {
    height: 82%;
    animation-delay: -.5s;
}

.events-follow-equalizer span:nth-child(12) {
    height: 52%;
    animation-delay: -.15s;
}

@keyframes eventEqualizer {
    0% {
        transform: scaleY(.3);
        opacity: .45;
    }

    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

/* ==========================================================
   HOVER EFFECT
========================================================== */

.events-follow-card:hover .events-follow-equalizer span {
    animation-duration: .65s;
}

.events-follow-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(
        circle at 75% 50%,
        rgba(153, 12, 79, .18),
        transparent 45%
    );
    pointer-events: none;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991px) {
    .events-follow-content {
        padding: 60px 45px;
    }

    .events-follow-equalizer {
        right: 3%;
        opacity: .22;
    }
}

/* ==========================================================
   ARTISTS SHOWCASE
========================================================== */

.artists-showcase{
    padding-top:30px;
}

.artists-showcase-header{
    max-width:1250px;
    margin:0 auto 60px;
}

.artists-section-label{
    margin-bottom:20px;
}

.artists-showcase-header .section-title{
    margin-bottom:18px;
}

.artists-showcase-header > p{
    max-width:650px;
    margin:0;
    color:#667085;
    font-size:1.05rem;
    line-height:1.7;
}

/* ==========================================================
   FEATURED ARTIST
========================================================== */

.featured-artist{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    align-items:center;
    gap:70px;
    max-width:1250px;
    margin:0 auto 110px;
}

.featured-artist-reverse{
    grid-template-columns:.92fr 1.08fr;
}

.featured-artist-reverse .featured-artist-image{
    order:2;
}

.featured-artist-reverse .featured-artist-content{
    order:1;
}

/* ==========================================================
   ARTIST IMAGE
========================================================== */

.featured-artist-image{
    position:relative;
    overflow:hidden;
    min-height:500px;
    border-radius:30px;
    box-shadow:0 30px 70px rgba(40,20,30,.15);
}

.featured-artist-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(10,10,15,.38),
        transparent 50%
    );
    pointer-events:none;
}

.featured-artist-image img{
    width:100%;
    height:100%;
    min-height:500px;
    position:absolute;
    inset:0;
    object-fit:cover;
    display:block;
    transition:transform .8s cubic-bezier(.2,.7,.2,1);
}

.featured-artist:hover .featured-artist-image img{
    transform:scale(1.045);
}

/* ==========================================================
   ARTIST NUMBER
========================================================== */

.featured-artist-number{
    position:absolute;
    left:28px;
    bottom:22px;
    z-index:2;
    color:rgba(255,255,255,.9);
    font-size:4rem;
    font-weight:800;
    line-height:1;
    letter-spacing:-3px;
}

/* ==========================================================
   ARTIST CONTENT
========================================================== */

.featured-artist-content{
    position:relative;
}

.artist-eyebrow{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:22px;
}

.artist-eyebrow > span{
    color:#990c4f;
    font-size:.7rem;
    font-weight:800;
    letter-spacing:3px;
}

.featured-artist-content h3{
    position:relative;
    display:inline-block;
    margin:0 0 28px;
    color:#111827;
    font-size:clamp(2.2rem,4vw,3.7rem);
    line-height:1.05;
}

.featured-artist-content h3::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-12px;
    width:55px;
    height:3px;
    border-radius:10px;
    background:#990c4f;
    transition:width .5s ease;
}

.featured-artist:hover .featured-artist-content h3::after{
    width:100%;
}

.featured-artist-content p{
    margin:0 0 18px;
    color:#667085;
    font-size:1rem;
    line-height:1.75;
}

/* ==========================================================
   GENRE PILLS
========================================================== */

.artist-genres{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:28px;
}

.artist-genres span{
    padding:8px 14px;
    border-radius:50px;
    background:rgba(255,255,255,.58);
    border:1px solid rgba(153,12,79,.12);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    color:#990c4f;
    font-size:.65rem;
    font-weight:800;
    letter-spacing:1.2px;
    text-transform:uppercase;
    box-shadow:0 5px 15px rgba(40,20,30,.04);
    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.artist-genres span:hover{
    transform:translateY(-3px);
    background:#990c4f;
    color:#fff;
}

/* ==========================================================
   MINI WAVEFORM
========================================================== */

.artist-waveform{
    height:24px;
    display:flex;
    align-items:center;
    gap:3px;
}

.artist-waveform i{
    display:block;
    width:3px;
    height:8px;
    border-radius:5px;
    background:#990c4f;
    opacity:.55;
    transform-origin:center;
}

.artist-waveform i:nth-child(2){
    height:15px;
}

.artist-waveform i:nth-child(3){
    height:21px;
}

.artist-waveform i:nth-child(4){
    height:12px;
}

.artist-waveform i:nth-child(5){
    height:18px;
}

.artist-waveform i:nth-child(6){
    height:9px;
}

.artist-waveform i:nth-child(7){
    height:16px;
}

.artist-waveform i:nth-child(8){
    height:6px;
}

.featured-artist:hover .artist-waveform i{
    animation:artistWave .7s ease-in-out infinite alternate;
}

.featured-artist:hover .artist-waveform i:nth-child(2){
    animation-delay:.1s;
}

.featured-artist:hover .artist-waveform i:nth-child(3){
    animation-delay:.25s;
}

.featured-artist:hover .artist-waveform i:nth-child(4){
    animation-delay:.05s;
}

.featured-artist:hover .artist-waveform i:nth-child(5){
    animation-delay:.2s;
}

.featured-artist:hover .artist-waveform i:nth-child(6){
    animation-delay:.3s;
}

.featured-artist:hover .artist-waveform i:nth-child(7){
    animation-delay:.15s;
}

@keyframes artistWave{
    from{
        transform:scaleY(.45);
    }

    to{
        transform:scaleY(1.35);
    }
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:991px){

    .featured-artist,
    .featured-artist-reverse{
        grid-template-columns:1fr;
        gap:40px;
        margin-bottom:80px;
    }

    .featured-artist-reverse .featured-artist-image,
    .featured-artist-reverse .featured-artist-content{
        order:initial;
    }

    .featured-artist-image{
        min-height:430px;
    }

    .featured-artist-image img{
        min-height:430px;
    }

}

/* ==========================================================
   TEAM SECTION
========================================================== */

.team-section{
    position:relative;
    padding:100px 0 120px;
}

.team-section-header{
    max-width:1250px;
    margin:0 auto 55px;
}

.team-section-header .section-label{
    margin-bottom:20px;
}

.team-section-header .section-title{
    margin-bottom:18px;
}

.team-section-header p{
    max-width:620px;
    margin:0;
    color:#667085;
    font-size:1.05rem;
    line-height:1.7;
}

/* ==========================================================
   TEAM GRID
========================================================== */

.team-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
    max-width:1250px;
    margin:0 auto;
}

/* ==========================================================
   TEAM CARD
========================================================== */

.team-card{
    position:relative;
    min-height:650px;
    overflow:hidden;
    border-radius:30px;
    background:#111;
    box-shadow:0 25px 60px rgba(30,15,25,.14);
    cursor:pointer;
}

.team-card-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s cubic-bezier(.2,.7,.2,1);
}

.team-card:hover .team-card-image{
    transform:scale(1.05);
}

/* ==========================================================
   IMAGE GRADIENT
========================================================== */

.team-card-gradient{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            to top,
            rgba(10,10,15,.95) 0%,
            rgba(10,10,15,.65) 35%,
            rgba(10,10,15,.08) 70%,
            transparent 100%
        );
    transition:background .5s ease;
}

.team-card:hover .team-card-gradient{
    background:
        linear-gradient(
            to top,
            rgba(10,10,15,.98) 0%,
            rgba(10,10,15,.78) 48%,
            rgba(10,10,15,.15) 78%,
            transparent 100%
        );
}

/* ==========================================================
   TEAM CONTENT
========================================================== */

.team-card-content{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
    padding:38px;
    color:#fff;
}

.team-card-main{
    transition:transform .5s ease;
}

.team-number{
    display:block;
    margin-bottom:12px;
    color:rgba(255,255,255,.55);
    font-size:.7rem;
    font-weight:700;
    letter-spacing:3px;
}

.team-card h3{
    margin:0 0 8px;
    color:#fff;
    font-size:2rem;
    font-weight:700;
}

.team-primary-role{
    display:block;
    color:rgba(255,255,255,.72);
    font-size:.9rem;
    font-weight:500;
}

/* ==========================================================
   HIDDEN DETAILS
========================================================== */

.team-card-details{
    max-height:0;
    margin-top:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(25px);

    transition:
        max-height .6s ease,
        opacity .45s ease,
        transform .5s ease,
        margin-top .5s ease;
}

.team-card:hover .team-card-details{
    max-height:250px;
    margin-top:25px;
    opacity:1;
    transform:translateY(0);
}

.team-card-details p{
    max-width:520px;
    margin:20px 0 0;
    color:rgba(255,255,255,.75);
    font-size:.95rem;
    line-height:1.7;
}

/* ==========================================================
   ROLE PILLS
========================================================== */

.team-roles{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.team-roles span{
    padding:7px 12px;
    border-radius:50px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.18);
    color:#fff;
    font-size:.62rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

.team-card::after{
    content:"";
    position:absolute;
    left:38px;
    bottom:0;
    z-index:3;
    width:0;
    height:4px;
    border-radius:10px 10px 0 0;
    background:#990c4f;
    transition:width .6s ease;
}

.team-card:hover::after{
    width:calc(100% - 76px);
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:991px){

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

    .team-card{
        min-height:600px;
    }

}

/* ==========================================================
   ARTISTS CTA
========================================================== */

.artists-cta-section{
    padding:30px 0 0px;
}

.artists-cta{
    width:100%;
    max-width:none;
    min-height:430px;
    margin:0;
    padding:70px max(7vw, 40px);
    border-radius:0;
    position:relative;
    display:grid;
    grid-template-columns:1.15fr .85fr;
    align-items:center;
    overflow:hidden;
    background:
        linear-gradient(
            135deg,
            #11131c 0%,
            #191520 55%,
            #2b1220 100%
        );
    box-shadow:none;
}
.artists-cta-section .container{
    max-width:100%;
    padding:0;
}

.artists-cta::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    right:-180px;
    top:-220px;
    border-radius:50%;
    background:rgba(153,12,79,.28);
    filter:blur(90px);
    pointer-events:none;
}

/* ==========================================================
   CONTENT
========================================================== */

.artists-cta-content{
    width:100%;
    max-width:700px;
    margin-left:auto;
}

.artists-cta-visual{
    width:100%;
    max-width:500px;
    margin-right:auto;
}

.artists-cta-label{
    margin-bottom:25px;
    color:#fff;
}

.artists-cta-label::before{
    background:#fff;
}

.artists-cta-content h2{
    margin:0 0 22px;
    color:#fff;
    font-size:clamp(2.8rem,5vw,4.8rem);
    font-weight:750;
    line-height:1;
    letter-spacing:-2px;
}

.artists-cta-content p{
    max-width:590px;
    margin:0 0 32px;
    color:rgba(255,255,255,.68);
    font-size:1rem;
    line-height:1.75;
}

/* ==========================================================
   BUTTON
========================================================== */

.artists-cta-button{
    display:inline-flex;
    align-items:center;
    gap:14px;
    padding:15px 24px;
    border-radius:10px;
    background:#990c4f;
    color:#fff;
    font-weight:700;
    text-decoration:none;
    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.artists-cta-button:hover{
    transform:translateY(-3px);
    background:#b00e5b;
    color:#fff;
    box-shadow:0 15px 35px rgba(153,12,79,.35);
}

.artists-cta-button i{
    transition:transform .3s ease;
}

.artists-cta-button:hover i{
    transform:translateX(5px);
}

/* ==========================================================
   INTERACTIVE WAVEFORM
========================================================== */

.artists-cta-visual{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    height:260px;
}

.cta-waveform{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:200px;
}

.cta-waveform span{
    width:6px;
    height:40px;
    border-radius:20px;
    background:rgba(255,255,255,.75);
    transform-origin:center;
    transition:
        height .5s ease,
        background .3s ease;
}

.cta-waveform span:nth-child(2){
    height:75px;
}

.cta-waveform span:nth-child(3){
    height:115px;
}

.cta-waveform span:nth-child(4){
    height:65px;
}

.cta-waveform span:nth-child(5){
    height:145px;
}

.cta-waveform span:nth-child(6){
    height:95px;
}

.cta-waveform span:nth-child(7){
    height:170px;
}

.cta-waveform span:nth-child(8){
    height:120px;
}

.cta-waveform span:nth-child(9){
    height:155px;
}

.cta-waveform span:nth-child(10){
    height:85px;
}

.cta-waveform span:nth-child(11){
    height:130px;
}

.cta-waveform span:nth-child(12){
    height:70px;
}

.cta-waveform span:nth-child(13){
    height:105px;
}

.cta-waveform span:nth-child(14){
    height:60px;
}

.cta-waveform span:nth-child(15){
    height:35px;
}

/* Animate waveform on banner hover */

.artists-cta:hover .cta-waveform span{
    animation:ctaWave 1s ease-in-out infinite alternate;
    background:#fff;
}

.artists-cta:hover .cta-waveform span:nth-child(2){
    animation-delay:.1s;
}

.artists-cta:hover .cta-waveform span:nth-child(3){
    animation-delay:.2s;
}

.artists-cta:hover .cta-waveform span:nth-child(4){
    animation-delay:.3s;
}

.artists-cta:hover .cta-waveform span:nth-child(5){
    animation-delay:.15s;
}

.artists-cta:hover .cta-waveform span:nth-child(6){
    animation-delay:.35s;
}

.artists-cta:hover .cta-waveform span:nth-child(7){
    animation-delay:.05s;
}

.artists-cta:hover .cta-waveform span:nth-child(8){
    animation-delay:.25s;
}

.artists-cta:hover .cta-waveform span:nth-child(9){
    animation-delay:.4s;
}

.artists-cta:hover .cta-waveform span:nth-child(10){
    animation-delay:.2s;
}

.artists-cta:hover .cta-waveform span:nth-child(11){
    animation-delay:.1s;
}

.artists-cta:hover .cta-waveform span:nth-child(12){
    animation-delay:.3s;
}

.artists-cta:hover .cta-waveform span:nth-child(13){
    animation-delay:.15s;
}

.artists-cta:hover .cta-waveform span:nth-child(14){
    animation-delay:.35s;
}

@keyframes ctaWave{
    from{
        transform:scaleY(.65);
    }

    to{
        transform:scaleY(1.15);
    }
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:991px){

    .artists-cta{
        grid-template-columns:1fr;
        padding:55px;
    }

    .artists-cta-visual{
        height:180px;
        margin-top:35px;
    }

    .cta-waveform{
        transform:scale(.8);
    }

}

/* =========================================================
   GALLERY PAGE
========================================================= */

.gallery-section {
    position: relative;
    padding-top: 20px;
    padding-bottom: 120px;
    overflow: hidden;
}

.gallery-section .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   GALLERY INTRO
========================================================= */

.gallery-intro {
    max-width: 680px;
    margin-bottom: 45px;
}

.gallery-section-label {
    margin-bottom: 20px;
}

.gallery-heading {
    margin-bottom: 18px;
    font-size: clamp(2.2rem, 4vw, 3.8rem);
    font-weight: 700;
    line-height: 1.05;
    color: #101524;
}

.gallery-intro-text {
    max-width: 600px;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #667085;
}


/* =========================================================
   FILTER BUTTONS
========================================================= */

.gallery-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    margin-bottom: 45px;
}

.gallery-filter {
    position: relative;
    padding: 11px 24px;
    border: 1px solid rgba(153, 12, 79, 0.14);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #667085;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow:
        0 8px 25px rgba(31, 20, 27, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.gallery-filter:hover {
    transform: translateY(-2px);
    color: #990c4f;
    border-color: rgba(153, 12, 79, 0.3);
    background: rgba(255, 255, 255, 0.8);
    box-shadow:
        0 12px 30px rgba(153, 12, 79, 0.1);
}

.gallery-filter.active {
    background: #990c4f;
    color: #ffffff;
    border-color: #990c4f;
    box-shadow:
        0 10px 30px rgba(153, 12, 79, 0.2);
}


/* =========================================================
   GALLERY GRID
========================================================= */

.gallery-grid {
    display: grid;
    grid-template-columns:
        repeat(12, 1fr);
    grid-auto-flow: dense;
    gap: 22px;
}


/* =========================================================
   GALLERY ITEMS
========================================================= */

.gallery-item {
    position: relative;
    grid-column: span 4;
    margin: 0;
    min-height: 340px;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.7);
    box-shadow:
        0 15px 40px rgba(31, 20, 27, 0.08);
    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease,
        opacity 0.35s ease;
}


.gallery-item:nth-child(7n + 1) {
    grid-column: span 8;
    min-height: 520px;
}

.gallery-item:nth-child(7n + 2) {
    grid-column: span 4;
    min-height: 520px;
}

.gallery-item:nth-child(7n + 3),
.gallery-item:nth-child(7n + 4),
.gallery-item:nth-child(7n + 5) {
    grid-column: span 4;
    min-height: 350px;
}

.gallery-item:nth-child(7n + 6) {
    grid-column: span 5;
    min-height: 430px;
}

.gallery-item:nth-child(7n + 7) {
    grid-column: span 7;
    min-height: 430px;
}


/* =========================================================
   IMAGE
========================================================= */

.gallery-image-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
}

.gallery-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition:
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.5s ease;
}

.gallery-item:hover {
    transform: translateY(-7px);
    box-shadow:
        0 25px 60px rgba(31, 20, 27, 0.14);
}

.gallery-item:hover .gallery-image {
    transform: scale(1.07);
}

/* =========================================================
   IMAGE OVERLAY
========================================================= */

.gallery-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 28px;
    background:
        linear-gradient(
            180deg,
            transparent 40%,
            rgba(12, 13, 24, 0.75) 100%
        );
    opacity: 0;
    transition: opacity 0.4s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    transform: translateY(15px);
    transition: transform 0.4s ease;
}

.gallery-item:hover .gallery-overlay-content {
    transform: translateY(0);
}

.gallery-category {
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.gallery-view {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    font-size: 1rem;
    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.gallery-item:hover .gallery-view {
    transform: scale(1.05);
}

.gallery-view:hover {
    background: #990c4f;
}


/* =========================================================
   FILTER ANIMATION
========================================================= */

.gallery-item.gallery-hidden {
    display: none;
}

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 100px;
    background: rgba(8, 8, 14, 0.94);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}

.gallery-lightbox.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gallery-lightbox-content {
    position: relative;
    max-width: 1100px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: scale(0.94);
    transition: transform 0.4s ease;
}

.gallery-lightbox.active .gallery-lightbox-content {
    transform: scale(1);
}

.gallery-lightbox-image {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 20px;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.45);
}

.gallery-lightbox-title {
    margin: 20px 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.gallery-lightbox-close {
    position: absolute;
    top: 30px;
    right: 35px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 1.3rem;
    cursor: pointer;
    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.gallery-lightbox-close:hover {
    background: #990c4f;
    transform: rotate(90deg);
}

/* =========================================================
   LIGHTBOX ARROWS
========================================================= */

.gallery-lightbox-arrow {
    position: absolute;
    top: 50%;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 1.1rem;
    cursor: pointer;
    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.gallery-lightbox-prev {
    left: 35px;
}

.gallery-lightbox-next {
    right: 35px;
}

.gallery-lightbox-arrow:hover {
    background: #990c4f;

    transform:
        translateY(-50%)
        scale(1.08);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .gallery-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .gallery-item,
    .gallery-item:nth-child(7n + 1),
    .gallery-item:nth-child(7n + 2),
    .gallery-item:nth-child(7n + 3),
    .gallery-item:nth-child(7n + 4),
    .gallery-item:nth-child(7n + 5),
    .gallery-item:nth-child(7n + 6),
    .gallery-item:nth-child(7n + 7) {
        grid-column: span 1;
        min-height: 380px;
    }

    .gallery-item:nth-child(3n + 1) {
        grid-column: span 2;
        min-height: 480px;
    }

    .gallery-lightbox {
        padding:
            80px 70px
            50px;
    }
}

/* ==========================================================
   GALLERY CTA
========================================================== */

.gallery-cta-section {
    padding: 0 0 120px;
}

.gallery-cta {
    position: relative;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 70px;
    padding: 65px;
    overflow: hidden;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
        0 25px 70px rgba(40, 20, 30, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.gallery-cta::before {
    content: "";
    position: absolute;
    left: -180px;
    bottom: -220px;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    background: rgba(153, 12, 79, 0.12);
    filter: blur(80px);
    pointer-events: none;
}

/* ==========================================================
   CTA CONTENT
========================================================== */

.gallery-cta-content {
    position: relative;
    z-index: 2;
}

.gallery-cta-content .section-label {
    margin-bottom: 22px;
}

.gallery-cta-content h2 {
    max-width: 500px;
    margin: 0 0 20px;
    color: #101524;
    font-size: clamp(2.5rem, 4vw, 4rem);
    line-height: 1.05;
}

.gallery-cta-content p {
    max-width: 520px;
    margin: 0 0 30px;
    color: #667085;
    font-size: 1rem;
    line-height: 1.75;
}

/* ==========================================================
   CTA BUTTON
========================================================== */

.gallery-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 25px;
    border-radius: 10px;
    background: #990c4f;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(153, 12, 79, 0.2);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.gallery-cta-button:hover {
    transform: translateY(-3px);
    background: #b00e5b;
    color: #fff;
    box-shadow: 0 18px 38px rgba(153, 12, 79, 0.32);
}

.gallery-cta-button i {
    transition: transform 0.3s ease;
}

.gallery-cta-button:hover i {
    transform: translateX(5px);
}

/* ==========================================================
   IMAGE STRIP
========================================================== */

.gallery-cta-strip {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    height: 390px;
    transform: rotate(2deg);
}

.gallery-cta-image {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(20, 10, 18, 0.15);
    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;
}

.gallery-cta-image:nth-child(1) {
    transform: translateY(25px);
}

.gallery-cta-image:nth-child(2) {
    transform: translateY(-15px);
}

.gallery-cta-image:nth-child(3) {
    transform: translateY(35px);
}

.gallery-cta-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.gallery-cta:hover .gallery-cta-image:nth-child(1) {
    transform: translateY(15px) rotate(-2deg);
}

.gallery-cta:hover .gallery-cta-image:nth-child(2) {
    transform: translateY(-25px) rotate(1deg);
}

.gallery-cta:hover .gallery-cta-image:nth-child(3) {
    transform: translateY(25px) rotate(2deg);
}

.gallery-cta-image:hover img {
    transform: scale(1.07);
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991px) {
    .gallery-cta {
        grid-template-columns: 1fr;
        gap: 55px;
        padding: 55px;
    }

    .gallery-cta-strip {
        height: 350px;
    }
}

/* ==========================================================
   CONNECT PAGE
========================================================== */

.connect-section{
    position:relative;
    padding-top:20px;
    padding-bottom:120px;
    overflow:hidden;
}

/* ==========================================================
   CONNECT INTRO
========================================================== */

.connect-intro{
    max-width:720px;
    margin-bottom:90px;
}

.connect-section-label{
    margin-bottom:20px;
}

.connect-intro .section-title{
    margin-bottom:20px;
}

.connect-intro > p{
    max-width:620px;
    margin:0;
    color:#667085;
    font-size:1.05rem;
    line-height:1.75;
}

/* ==========================================================
   CATEGORY HEADERS
========================================================== */

.connect-category-header{
    display:flex;
    align-items:flex-start;
    gap:25px;
    margin-bottom:35px;
}

.connect-category-number{
    padding-top:7px;
    color:rgba(153,12,79,.45);
    font-size:.72rem;
    font-weight:800;
    letter-spacing:2px;
}

.connect-category-header .section-label{
    margin-bottom:10px;
}

.connect-category-header h2{
    margin:0;
    color:#101524;
    font-size:clamp(2rem,3vw,3rem);
    line-height:1.1;
}

.connect-content-header{
    margin-top:110px;
}

/* ==========================================================
   MUSIC PLATFORM GRID
========================================================== */

.music-platform-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

/* ==========================================================
   MUSIC PLATFORM CARD
========================================================== */

.music-platform-card{
    position:relative;
    min-height:330px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:38px;
    overflow:hidden;
    border-radius:28px;
    background:rgba(255,255,255,.62);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    border:1px solid rgba(255,255,255,.75);
    color:inherit;
    text-decoration:none;
    box-shadow:
        0 18px 50px rgba(40,20,30,.08),
        inset 0 1px 0 rgba(255,255,255,.9);
    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;
}

.music-platform-card:hover{
    transform:translateY(-8px);
    border-color:rgba(153,12,79,.2);
    box-shadow:
        0 30px 70px rgba(40,20,30,.14),
        inset 0 1px 0 rgba(255,255,255,.95);
}

/* Soft decorative glow */

.music-platform-card::before{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    top:-150px;
    right:-100px;
    border-radius:50%;
    background:rgba(153,12,79,.10);
    filter:blur(55px);
    transition:
        transform .7s ease,
        opacity .7s ease;
}

.music-platform-card:hover::before{
    transform:scale(1.3);
    opacity:.8;
}

/* ==========================================================
   MUSIC ICON
========================================================== */

.music-platform-icon{
    position:absolute;
    top:35px;
    left:38px;
    z-index:3;
    width:74px;
    height:74px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:15px;
    border-radius:20px;
    background:rgba(255,255,255,.75);
    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.9);
    box-shadow:0 12px 30px rgba(20,10,18,.08);
    transition:transform .4s ease;
}

.music-platform-card:hover .music-platform-icon{
    transform:translateY(-4px) rotate(-3deg);
}

.music-platform-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
}

/* ==========================================================
   MUSIC CONTENT
========================================================== */

.music-platform-content{
    position:relative;
    z-index:3;
    max-width:390px;
}

.platform-eyebrow{
    display:block;
    margin-bottom:10px;
    color:#990c4f;
    font-size:.65rem;
    font-weight:800;
    letter-spacing:2.2px;
}

.music-platform-content h3{
    margin:0 0 12px;
    color:#101524;
    font-size:2rem;
    font-weight:700;
}

.music-platform-content p{
    margin:0;
    color:#667085;
    font-size:.95rem;
    line-height:1.65;
}

/* ==========================================================
   MUSIC CARD LINK
========================================================== */

.platform-link{
    position:absolute;
    right:35px;
    bottom:38px;
    z-index:3;
    display:flex;
    align-items:center;
    gap:10px;
    color:#990c4f;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
}

.platform-link i{
    transition:transform .3s ease;
}

.music-platform-card:hover .platform-link i{
    transform:translate(3px,-3px);
}

/* ==========================================================
   MUSIC WAVE
========================================================== */

.music-platform-wave{
    position:absolute;
    top:42px;
    right:35px;
    z-index:1;
    height:90px;
    display:flex;
    align-items:center;
    gap:5px;
    opacity:.15;
}

.music-platform-wave span{
    display:block;
    width:4px;
    height:30px;
    border-radius:20px;
    background:#990c4f;
    transform-origin:center;
}

.music-platform-wave span:nth-child(2){
    height:50px;
}

.music-platform-wave span:nth-child(3){
    height:72px;
}

.music-platform-wave span:nth-child(4){
    height:42px;
}

.music-platform-wave span:nth-child(5){
    height:80px;
}

.music-platform-wave span:nth-child(6){
    height:58px;
}

.music-platform-wave span:nth-child(7){
    height:35px;
}

.music-platform-wave span:nth-child(8){
    height:65px;
}

.music-platform-wave span:nth-child(9){
    height:46px;
}

.music-platform-wave span:nth-child(10){
    height:75px;
}

.music-platform-wave span:nth-child(11){
    height:52px;
}

.music-platform-wave span:nth-child(12){
    height:28px;
}

.music-platform-card:hover .music-platform-wave span{
    animation:connectMusicWave .75s ease-in-out infinite alternate;
}

.music-platform-card:hover .music-platform-wave span:nth-child(2){
    animation-delay:.1s;
}

.music-platform-card:hover .music-platform-wave span:nth-child(3){
    animation-delay:.25s;
}

.music-platform-card:hover .music-platform-wave span:nth-child(4){
    animation-delay:.05s;
}

.music-platform-card:hover .music-platform-wave span:nth-child(5){
    animation-delay:.3s;
}

.music-platform-card:hover .music-platform-wave span:nth-child(6){
    animation-delay:.15s;
}

.music-platform-card:hover .music-platform-wave span:nth-child(7){
    animation-delay:.35s;
}

.music-platform-card:hover .music-platform-wave span:nth-child(8){
    animation-delay:.2s;
}

@keyframes connectMusicWave{
    from{
        transform:scaleY(.45);
    }

    to{
        transform:scaleY(1.15);
    }
}

/* ==========================================================
   CONTENT & COMMUNITY GRID
========================================================== */

.content-platform-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

/* ==========================================================
   CONTENT PLATFORM CARD
========================================================== */

.content-platform-card{
    position:relative;
    min-height:330px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:35px;
    overflow:hidden;
    border-radius:26px;
    background:
        linear-gradient(
            145deg,
            #151620,
            #211720
        );
    color:#fff;
    text-decoration:none;
    box-shadow:0 20px 50px rgba(20,10,18,.15);
    transition:
        transform .45s ease,
        box-shadow .45s ease;
}

.content-platform-card:hover{
    transform:translateY(-8px);
    color:#fff;
    box-shadow:0 30px 70px rgba(20,10,18,.25);
}

/* ==========================================================
   CONTENT CARD GLOW
========================================================== */

.content-platform-glow{
    position:absolute;
    width:250px;
    height:250px;
    top:-150px;
    right:-130px;
    border-radius:50%;
    background:rgba(153,12,79,.35);
    filter:blur(70px);
    opacity:.5;
    transition:
        transform .7s ease,
        opacity .7s ease;
}

.content-platform-card:hover .content-platform-glow{
    transform:scale(1.5);
    opacity:.85;
}

/* ==========================================================
   CONTENT ICON
========================================================== */

.content-platform-icon{
    position:relative;
    z-index:2;
    width:70px;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:15px;
    border-radius:20px;
    background:rgba(255,255,255,.1);
    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.14);
    transition:
        transform .4s ease,
        background .4s ease;
}

.content-platform-card:hover .content-platform-icon{
    transform:translateY(-5px) scale(1.05);
    background:rgba(255,255,255,.16);
}

.content-platform-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
}

/* ==========================================================
   CONTENT PLATFORM INFO
========================================================== */

.content-platform-info{
    position:relative;
    z-index:2;
}

.content-platform-info h3{
    margin:0 0 12px;
    color:#fff;
    font-size:1.8rem;
}

.content-platform-info > span{
    display:flex;
    align-items:center;
    gap:10px;
    color:rgba(255,255,255,.6);
    font-size:.75rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

.content-platform-info i{
    transition:transform .3s ease;
}

.content-platform-card:hover .content-platform-info i{
    transform:translateX(6px);
}

/* ==========================================================
   CONTENT CARD WAVE
========================================================== */

.content-platform-wave{
    position:absolute;
    right:28px;
    bottom:30px;
    z-index:1;
    height:70px;
    display:flex;
    align-items:flex-end;
    gap:4px;
    opacity:.15;
}

.content-platform-wave i{
    display:block;
    width:3px;
    height:20px;
    border-radius:10px;
    background:#fff;
}

.content-platform-wave i:nth-child(2){
    height:38px;
}

.content-platform-wave i:nth-child(3){
    height:55px;
}

.content-platform-wave i:nth-child(4){
    height:30px;
}

.content-platform-wave i:nth-child(5){
    height:62px;
}

.content-platform-wave i:nth-child(6){
    height:42px;
}

.content-platform-wave i:nth-child(7){
    height:50px;
}

.content-platform-wave i:nth-child(8){
    height:25px;
}

.content-platform-card:hover .content-platform-wave i{
    animation:contentWave .65s ease-in-out infinite alternate;
}

.content-platform-card:hover .content-platform-wave i:nth-child(2){
    animation-delay:.15s;
}

.content-platform-card:hover .content-platform-wave i:nth-child(3){
    animation-delay:.3s;
}

.content-platform-card:hover .content-platform-wave i:nth-child(4){
    animation-delay:.1s;
}

.content-platform-card:hover .content-platform-wave i:nth-child(5){
    animation-delay:.25s;
}

.content-platform-card:hover .content-platform-wave i:nth-child(6){
    animation-delay:.05s;
}

@keyframes contentWave{
    from{
        transform:scaleY(.45);
    }

    to{
        transform:scaleY(1.15);
    }
}

/* ==========================================================
   SOCIAL SECTION
========================================================== */

.connect-social-section{
    position:relative;
    padding:100px 0 120px;
    overflow:hidden;
    background:
        linear-gradient(
            135deg,
            #11131c 0%,
            #19151e 55%,
            #29131f 100%
        );
}

.connect-social-section::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    left:-250px;
    top:-250px;
    border-radius:50%;
    background:rgba(153,12,79,.25);
    filter:blur(110px);
    pointer-events:none;
}

/* ==========================================================
   SOCIAL WRAPPER
========================================================== */

.connect-social-wrapper{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:100px;
    align-items:start;
}

/* ==========================================================
   SOCIAL INTRO
========================================================== */

.connect-social-intro{
    position:sticky;
    top:130px;
}

.connect-social-label{
    margin-bottom:24px;
    color:rgba(255,255,255,.75);
}

.connect-social-label::before{
    background:rgba(255,255,255,.7);
}

.connect-social-intro h2{
    margin:0 0 22px;
    color:#fff;
    font-size:clamp(2.8rem,5vw,4.8rem);
    line-height:1;
    letter-spacing:-2px;
}

.connect-social-intro p{
    max-width:460px;
    margin:0;
    color:rgba(255,255,255,.6);
    font-size:1rem;
    line-height:1.75;
}

/* ==========================================================
   SOCIAL LINKS
========================================================== */

.connect-social-links{
    border-top:1px solid rgba(255,255,255,.14);
}

.connect-social-link{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:34px 10px;
    border-bottom:1px solid rgba(255,255,255,.14);
    color:#fff;
    text-decoration:none;
    overflow:hidden;
    transition:
        padding .4s ease,
        color .3s ease;
}

.connect-social-link::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.05);
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .45s cubic-bezier(.2,.7,.2,1);
}

.connect-social-link:hover::before{
    transform:scaleX(1);
    transform-origin:left;
}

.connect-social-link:hover{
    padding-left:25px;
    padding-right:25px;
    color:#fff;
}

/* ==========================================================
   SOCIAL NAME
========================================================== */

.connect-social-name{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:22px;
}

.connect-social-icon{
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:13px;
    border-radius:16px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    transition:
        transform .4s ease,
        background .4s ease;
}

.connect-social-link:hover .connect-social-icon{
    transform:rotate(-5deg) scale(1.06);
    background:rgba(153,12,79,.25);
}

.connect-social-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.connect-social-name > span{
    color:#fff;
    font-size:clamp(1.5rem,3vw,2.4rem);
    font-weight:650;
}

/* ==========================================================
   SOCIAL ACTION
========================================================== */

.connect-social-action{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:18px;
    color:rgba(255,255,255,.5);
    font-size:.7rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

.connect-social-action i{
    font-size:1rem;
    transition:transform .35s ease;
}

.connect-social-link:hover .connect-social-action i{
    transform:translate(5px,-5px);
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:991px){

    .music-platform-grid{
        grid-template-columns:1fr;
    }

    .content-platform-grid{
        grid-template-columns:1fr;
    }

    .connect-social-wrapper{
        grid-template-columns:1fr;
        gap:60px;
    }

    .connect-social-intro{
        position:relative;
        top:auto;
    }

}

/* ==========================================================
   CONTACT PAGE
========================================================== */

.contact-section{
    position:relative;
    padding-top:20px;
    padding-bottom:120px;
    overflow:hidden;
}

.contact-layout{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:80px;
    align-items:start;
}

/* ==========================================================
   CONTACT INTRO
========================================================== */

.contact-intro{
    position:relative;
}

.contact-section-label{
    margin-bottom:22px;
}

.contact-heading{
    max-width:560px;
    margin:0 0 25px;
    color:#101524;
    font-size:clamp(2.6rem,4vw,4.3rem);
    font-weight:700;
    line-height:1.05;
    letter-spacing:-1.5px;
}

.contact-lead{
    max-width:550px;
    margin:0 0 45px;
    color:#667085;
    font-size:1.05rem;
    line-height:1.8;
}

/* ==========================================================
   CONTACT DETAIL CARDS
========================================================== */

.contact-details-grid{
    display:grid;
    gap:14px;
}

.contact-detail-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:20px;
    min-height:110px;
    padding:22px 24px;
    overflow:hidden;
    border-radius:20px;
    background:rgba(255,255,255,.52);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.72);
    box-shadow:
        0 10px 30px rgba(40,20,30,.05),
        inset 0 1px 0 rgba(255,255,255,.8);
    color:inherit;
    text-decoration:none;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        background .35s ease;
}

.contact-detail-card:hover{
    transform:translateX(7px);
    background:rgba(255,255,255,.72);
    border-color:rgba(153,12,79,.18);
    box-shadow:
        0 18px 40px rgba(40,20,30,.09),
        inset 0 1px 0 rgba(255,255,255,.9);
}

/* ==========================================================
   DETAIL ICON
========================================================== */

.contact-detail-icon{
    width:58px;
    height:58px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:17px;
    background:rgba(153,12,79,.08);
    border:1px solid rgba(153,12,79,.10);
    color:#990c4f;
    font-size:1.2rem;
    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;
}

.contact-detail-card:hover .contact-detail-icon{
    transform:scale(1.06) rotate(-4deg);
    background:#990c4f;
    color:#fff;
}

/* ==========================================================
   DETAIL CONTENT
========================================================== */

.contact-detail-content{
    position:relative;
    z-index:2;
}

.contact-detail-content > span{
    display:block;
    margin-bottom:5px;
    color:#990c4f;
    font-size:.62rem;
    font-weight:800;
    letter-spacing:1.8px;
}

.contact-detail-content h3{
    margin:0 0 4px;
    color:#101524;
    font-size:1.05rem;
    font-weight:700;
}

.contact-detail-content p{
    margin:0;
    color:#667085;
    font-size:.85rem;
    line-height:1.5;
}

.contact-detail-arrow{
    position:absolute;
    top:50%;
    right:24px;
    color:rgba(153,12,79,.45);
    transform:translateY(-50%);
    transition:
        transform .35s ease,
        color .35s ease;
}

.contact-detail-link:hover .contact-detail-arrow{
    color:#990c4f;
    transform:translate(4px,-7px);
}

/* ==========================================================
   PHONE
========================================================== */

.contact-phone{
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:30px;
    padding-top:28px;
    border-top:1px solid rgba(153,12,79,.12);
}

.contact-phone-icon{
    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#990c4f;
    color:#fff;
    font-size:.9rem;
    box-shadow:0 10px 25px rgba(153,12,79,.22);
}

.contact-phone span{
    display:block;
    margin-bottom:3px;
    color:#667085;
    font-size:.78rem;
}

.contact-phone a{
    color:#101524;
    font-size:1rem;
    font-weight:700;
    text-decoration:none;
    transition:color .3s ease;
}

.contact-phone a:hover{
    color:#990c4f;
}

/* ==========================================================
   FORM WRAPPER
========================================================== */

.contact-form-wrapper{
    position:relative;
    padding:55px;
    overflow:hidden;
    border-radius:32px;
    background:rgba(255,255,255,.68);
    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);
    border:1px solid rgba(255,255,255,.85);
    box-shadow:
        0 30px 80px rgba(40,20,30,.11),
        inset 0 1px 0 rgba(255,255,255,.95);
}

/* Soft glow */

.contact-form-wrapper::before{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    top:-250px;
    right:-180px;
    border-radius:50%;
    background:rgba(153,12,79,.12);
    filter:blur(80px);
    pointer-events:none;
}

/* ==========================================================
   FORM HEADER
========================================================== */

.contact-form-header{
    position:relative;
    z-index:3;
    max-width:570px;
    margin-bottom:38px;
}

.contact-form-eyebrow{
    display:block;
    margin-bottom:14px;
    color:#990c4f;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:2.5px;
}

.contact-form-header h2{
    margin:0 0 14px;
    color:#101524;
    font-size:clamp(2rem,3vw,3rem);
    line-height:1.1;
}

.contact-form-header p{
    max-width:520px;
    margin:0;
    color:#667085;
    font-size:.95rem;
    line-height:1.7;
}

/* ==========================================================
   FORM
========================================================== */

.contact-form{
    position:relative;
    z-index:3;
}

.contact-field{
    position:relative;
}

.contact-field .form-label{
    display:block;
    margin-bottom:9px;
    color:#344054;
    font-size:.78rem;
    font-weight:700;
    transition:color .3s ease;
}

.contact-field .form-label span{
    color:#98a2b3;
    font-size:.7rem;
    font-weight:500;
}

.contact-field:focus-within .form-label{
    color:#990c4f;
}

/* ==========================================================
   INPUTS
========================================================== */

.contact-form .form-control,
.contact-form .form-select{
    width:100%;
    min-height:54px;
    padding:14px 17px;
    border:1px solid rgba(16,21,36,.10);
    border-radius:13px;
    outline:none;
    background:rgba(248,248,250,.8);
    color:#101524;
    font-size:.92rem;
    box-shadow:none;
    transition:
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

.contact-form textarea.form-control{
    min-height:145px;
    resize:vertical;
}

.contact-form .form-control::placeholder{
    color:#a2a8b3;
}

.contact-form .form-control:hover,
.contact-form .form-select:hover{
    border-color:rgba(153,12,79,.20);
    background:#fff;
}

.contact-form .form-control:focus,
.contact-form .form-select:focus{
    transform:translateY(-2px);
    border-color:rgba(153,12,79,.55);
    background:#fff;
    box-shadow:
        0 0 0 4px rgba(153,12,79,.07),
        0 10px 25px rgba(40,20,30,.05);
}

/* ==========================================================
   INVALID FIELDS
========================================================== */

.contact-form .form-control.is-invalid,
.contact-form .form-select.is-invalid{
    border-color:#dc3545;
}

.contact-form .invalid-feedback{
    margin-top:6px;
    font-size:.75rem;
}

/* ==========================================================
   CONTACT ALERT
========================================================== */

#contact-alert:empty{
    display:none;
}

#contact-alert{
    margin-bottom:25px;
    border-radius:12px;
}

/* ==========================================================
   SUBMIT BUTTON
========================================================== */

.contact-submit-button{
    position:relative;
    width:100%;
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:5px;
    padding:16px 22px;
    overflow:hidden;
    border:0;
    border-radius:13px;
    background:#990c4f;
    color:#fff;
    font-size:.9rem;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 14px 32px rgba(153,12,79,.22);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.contact-submit-button::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.22),
        transparent
    );
    transform:skewX(-20deg);
    transition:left .8s ease;
}

.contact-submit-button:hover{
    transform:translateY(-3px);
    background:#b00e5b;
    box-shadow:0 20px 42px rgba(153,12,79,.32);
}

.contact-submit-button:hover::before{
    left:160%;
}

.contact-submit-button span,
.contact-submit-button i{
    position:relative;
    z-index:2;
}

.contact-submit-button i{
    transition:transform .3s ease;
}

.contact-submit-button:hover i{
    transform:translateX(6px);
}

/* ==========================================================
   AUDIO WAVE
========================================================== */

.contact-form-wave{
    position:absolute;
    top:35px;
    right:35px;
    z-index:1;
    height:80px;
    display:flex;
    align-items:center;
    gap:5px;
    opacity:.08;
    pointer-events:none;
}

.contact-form-wave span{
    width:4px;
    height:25px;
    display:block;
    border-radius:10px;
    background:#990c4f;
    transform-origin:center;
}

.contact-form-wave span:nth-child(2){
    height:45px;
}

.contact-form-wave span:nth-child(3){
    height:65px;
}

.contact-form-wave span:nth-child(4){
    height:38px;
}

.contact-form-wave span:nth-child(5){
    height:72px;
}

.contact-form-wave span:nth-child(6){
    height:50px;
}

.contact-form-wave span:nth-child(7){
    height:30px;
}

.contact-form-wave span:nth-child(8){
    height:58px;
}

.contact-form-wave span:nth-child(9){
    height:42px;
}

.contact-form-wave span:nth-child(10){
    height:68px;
}

.contact-form-wave span:nth-child(11){
    height:46px;
}

.contact-form-wave span:nth-child(12){
    height:25px;
}

.contact-form-wrapper:focus-within .contact-form-wave{
    opacity:.16;
}

.contact-form-wrapper:focus-within .contact-form-wave span{
    animation:contactWave .8s ease-in-out infinite alternate;
}

.contact-form-wrapper:focus-within .contact-form-wave span:nth-child(2){
    animation-delay:.1s;
}

.contact-form-wrapper:focus-within .contact-form-wave span:nth-child(3){
    animation-delay:.25s;
}

.contact-form-wrapper:focus-within .contact-form-wave span:nth-child(4){
    animation-delay:.05s;
}

.contact-form-wrapper:focus-within .contact-form-wave span:nth-child(5){
    animation-delay:.3s;
}

.contact-form-wrapper:focus-within .contact-form-wave span:nth-child(6){
    animation-delay:.15s;
}

.contact-form-wrapper:focus-within .contact-form-wave span:nth-child(7){
    animation-delay:.35s;
}

.contact-form-wrapper:focus-within .contact-form-wave span:nth-child(8){
    animation-delay:.2s;
}

.contact-form-wrapper:focus-within .contact-form-wave span:nth-child(9){
    animation-delay:.1s;
}

.contact-form-wrapper:focus-within .contact-form-wave span:nth-child(10){
    animation-delay:.3s;
}

@keyframes contactWave{
    from{
        transform:scaleY(.45);
    }

    to{
        transform:scaleY(1.15);
    }
}

/* ==========================================================
   HONEYPOT
========================================================== */

.hp-field{
    position:absolute !important;
    left:-9999px !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
}

/* ==========================================================
   RESPONSIVE
========================================================== */


@media(max-width:991px){

    .contact-layout{
        grid-template-columns:1fr;
        gap:70px;
    }

    .contact-intro{
        max-width:700px;
    }

    .contact-details-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .contact-detail-link{
        grid-column:1 / -1;
    }

}

/* ─── Footer ──────────────────────────────────────────────────────────────── */

.site-footer {
  background-color: white;
  color: #990c4f;
  padding: var(--space-12) 0 var(--space-6);
}

.site-footer h5 { color: black; font-size: var(--text-lg); margin-bottom: var(--space-4); }
.site-footer a { color: #990c4f; text-decoration: none; }
.site-footer a:hover { color: var(--color-accent-hover); }
.site-footer .footer-contact-line a { color: #990c4f; }

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.08);
  margin-right: var(--space-2);
}

.footer-social a:hover { background-color: var(--color-primary); color: #fff; }

.footer-bottom {
  border-top: 1px solid black;
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  font-size: var(--text-sm);
  text-align: center;
  color: black;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
/* ==========================================================
   HOME - MOBILE RESPONSIVE
========================================================== */

@media (max-width: 767px) {

    /* HERO */

    .home-hero {
        min-height: calc(100vh - 58px);
        padding: 90px 0 70px;
        align-items: center;
    }

    .home-record-visual {
        top: 48%;
        left: -72vw;
        width: 145vw;
        opacity: .4;
    }

    .home-hero-content {
        width: 100%;
        max-width: 520px;
        margin-left: 0;
    }

    .home-hero-label {
        margin-bottom: 20px;
        font-size: .62rem;
        letter-spacing: 3px;
    }

    .home-hero .hero-logo-lockup {
        width: min(90%, 440px);
    }

    .home-hero .hero-tagline {
        max-width: 460px;
        font-size: 1rem;
    }

    .home-hero-scroll {
        display: none;
    }


    /* INTRODUCTION */

    .home-intro-section {
        padding-top: 75px;
        padding-bottom: 65px;
    }

    .home-intro-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .home-intro-heading h2 {
        font-size: clamp(2.5rem, 11vw, 4rem);
        letter-spacing: -1.5px;
    }

    .home-intro-content {
        max-width: 100%;
        padding-top: 0;
    }

    .home-intro-content .home-intro-lead {
        font-size: 1.05rem;
    }

    .home-intro-stats {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 55px;
    }

    .home-intro-stat {
        min-height: 125px;
        padding: 25px 20px;
    }

    .home-intro-stat:nth-child(2) {
        border-right: 0;
    }

    .home-intro-stat:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(153, 12, 79, .13);
    }

    /* SERVICES */

    .home-services-section {
        padding-top: 70px;
        padding-bottom: 80px;
    }

    .home-section-heading {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 35px;
    }

    .home-section-heading-content {
        max-width: 100%;
        padding-bottom: 0;
    }

    .home-section-heading h2 {
        font-size: clamp(2.5rem, 11vw, 3.8rem);
    }

    .home-services-grid {
        grid-template-columns: 1fr;
    }

    .home-service-card {
        min-height: auto;
        padding: 28px 24px;
        border-radius: 20px;
    }

    /* ARTISTS */

    .home-artists-section {
        padding-top: 70px;
        padding-bottom: 80px;
    }

    .home-artists-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        margin-bottom: 35px;
    }

    .home-artists-intro {
        max-width: 100%;
    }

    .home-artists-link {
        display: none;
    }

    .home-artists-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .home-artist-card,
    .home-artist-card-large {
        min-height: 460px;
        border-radius: 22px;
    }

    .home-artist-content {
        padding: 26px;
    }

    .home-artist-content h3,
    .home-artist-card:not(.home-artist-card-large) .home-artist-content h3 {
        font-size: 2rem;
    }

    .home-artist-number {
        top: 22px;
        right: 22px;
    }

    .home-artist-footer {
        align-items: flex-start;
    }

    .home-artist-arrow {
        width: 46px;
        height: 46px;
    }

    .home-artists-mobile-link {
        display: block;
        margin-top: 28px;
        text-align: center;
    }

    /* FINAL CTA */

    .home-final-cta {
        padding: 50px 0 45px;
    }

    .home-cta-card {
        min-height: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 35px;
        padding: 42px 32px;
        border-radius: 22px;
    }

    .home-cta-content {
        max-width: 100%;
    }

    .home-cta-content h2 {
        font-size: 2.8rem;
    }

    .home-cta-actions {
        width: 100%;
        min-width: 0;
    }

    .home-cta-primary {
        width: 100%;
    }

    .home-cta-decoration {
        right: 25px;
        bottom: 0;
        height: 90px;
        opacity: .08;
    }
}

/* ==========================================================
   HOME - SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

    /* HERO */

    .home-hero {
        padding: 75px 0 60px;
    }

    .home-record-visual {
        left: -90vw;
        width: 175vw;
    }

    .home-hero-label {
        line-height: 1.7;
    }

    .home-hero .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .home-primary-button,
    .home-secondary-button {
        width: 100%;
    }

    /* INTRODUCTION */

    .home-intro-stat {
        padding: 22px 15px;
    }

    .home-intro-stat strong {
        font-size: 2rem;
    }

    .home-intro-stat span {
        font-size: .58rem;
        letter-spacing: 1.5px;
    }

    /* SERVICES */

    .home-service-card {
        padding: 26px 22px;
    }

    /* ARTISTS */

    .home-artist-card,
    .home-artist-card-large {
        min-height: 420px;
    }

    .home-artist-content {
        padding: 22px;
    }

    .home-artist-content h3,
    .home-artist-card:not(.home-artist-card-large) .home-artist-content h3 {
        font-size: 1.8rem;
    }

    .home-artist-genres span:nth-child(n + 4) {
        display: none;
    }

    /* FINAL CTA */

    .home-cta-card {
        padding: 36px 24px;
    }

    .home-cta-content h2 {
        font-size: 2.3rem;
    }
}

/* ==========================================================
   ABOUT - MOBILE RESPONSIVE
========================================================== */

@media (max-width: 480px) {

    /* PAGE HERO */

    .about-section {
        padding-top: 20px;
        padding-bottom: 70px;
    }


    /* ABOUT STORY */

    .about-section .row {
        --bs-gutter-y: 45px;
    }

    .about-section .section-title {
        font-size: clamp(2.3rem, 10vw, 3.4rem);
        line-height: 1.08;
    }

    .about-section .intro-text {
        font-size: 1.05rem;
        line-height: 1.7;
    }

    .about-image-wrapper {
        margin-top: 10px;
    }

    .about-group-photo {
        width: 100%;
        height: auto;
    }


    /* ABOUT STATS */

    .stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }

    .stat-item {
        min-height: 130px;
        padding: 25px 20px;
    }

    .stat-item:nth-child(2) {
        border-right: 0;
    }

    .stat-item:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(153, 12, 79, .13);
    }


    /* GENERAL ABOUT SPACING */

    .about-section .section-label {
        margin-bottom: 18px;
    }
}


/* ==========================================================
   ABOUT - SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

    .about-section {
        padding-bottom: 60px;
    }

    .about-section .section-title {
        font-size: 2.25rem;
    }

    .about-section .intro-text {
        font-size: 1rem;
    }

    .stats-row {
        grid-template-columns: 1fr;
    }

    .stat-item {
        min-height: 110px;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(153, 12, 79, .13);
    }

    .stat-item:last-child {
        border-bottom: 0;
    }
}
/* ==========================================================
   SERVICES - MOBILE RESPONSONSIVE
========================================================== */

@media (max-width: 767px) {

    /* SERVICES SECTION */

    .services-section {
        padding-top: 20px;
        padding-bottom: 70px;
    }

    .services-grid-label {
        margin-bottom: 30px;
    }


    /* SERVICE CARDS */

    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .service-card {
        min-height: 280px;
    }

    .service-card-inner {
        padding: 35px 28px;
    }

    .service-icon {
        width: 62px;
        height: 62px;
        margin-bottom: 20px;
        font-size: 23px;
    }

    .service-title {
        font-size: 1.3rem;
    }

    .service-text {
        max-width: 100%;
        font-size: .95rem;
    }


    /* STUDIO CTA */

    .studio-cta {
        margin-top: 60px;
        border-radius: 24px;
    }

    .studio-cta-content {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 45px;
        padding: 45px 28px;
    }

    .studio-cta-copy {
        max-width: 100%;
    }

    .studio-label {
        margin-bottom: 18px;
        font-size: .65rem;
        letter-spacing: 3px;
    }

    .studio-label::before {
        width: 30px;
    }

    .studio-cta-copy h2 {
        font-size: clamp(2.4rem, 11vw, 3.2rem);
    }

    .studio-cta-copy p {
        max-width: 100%;
        font-size: 1rem;
    }

    .studio-cta-button {
        width: 100%;
        justify-content: center;
    }


    /* MIXING BOARD */

    .mixing-board {
        width: 100%;
        padding: 24px 18px;
        border-radius: 20px;
    }

    .mixing-board-header {
        margin-bottom: 20px;
    }

    .mixing-board h3 {
        font-size: 1.2rem;
    }

    .board-eyebrow {
        font-size: .55rem;
        letter-spacing: 2px;
    }

    .board-status {
        font-size: .55rem;
        letter-spacing: 1.5px;
    }


    /* AUDIO METERS */

    .channel-meters {
        height: 48px;
        gap: 5px;
        margin-bottom: 24px;
        padding: 8px;
    }


    /* MIXER CHANNELS */

    .mixer-channels {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }

    .mixer-channel {
        min-width: 0;
    }

    .mixer-knob {
        transform: scale(.85);
        margin-bottom: 15px;
    }

    .fader-track {
        height: 130px;
    }

    .fader-handle {
        width: 30px;
    }

    .channel-label {
        font-size: .55rem;
        letter-spacing: 1px;
    }
}


/* ==========================================================
   SERVICES - SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

    .services-section {
        padding-bottom: 55px;
    }

    .service-card {
        min-height: 260px;
    }

    .service-card-inner {
        padding: 30px 24px;
    }


    /* STUDIO CTA */

    .studio-cta {
        margin-top: 50px;
        border-radius: 20px;
    }

    .studio-cta-content {
        gap: 38px;
        padding: 38px 20px;
    }

    .studio-cta-copy h2 {
        font-size: 2.4rem;
    }


    /* MIXING BOARD */

    .mixing-board {
        padding: 20px 12px;
        border-radius: 16px;
    }

    .mixing-board-header {
        align-items: flex-start;
    }

    .mixing-board h3 {
        font-size: 1.05rem;
    }

    .mixer-channels {
        gap: 6px;
    }

    .mixer-knob {
        transform: scale(.72);
    }

    .fader-track {
        height: 115px;
    }

    .fader-handle {
        width: 25px;
    }

    .channel-label {
        font-size: .48rem;
        letter-spacing: .5px;
    }
}
/* ==========================================================
   EVENTS - MOBILE RESPONSIVE
========================================================== */

@media (max-width: 767px) {

    /* EVENTS SECTION */

    .events-section {
        padding-top: 20px;
        padding-bottom: 70px;
    }

    .events-section-label {
        margin-bottom: 25px;
    }


    /* EVENT TABS */

    .events-tabs {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 35px;
    }

    .events-tab {
        width: 100%;
        min-width: 0;
        justify-content: center;
        padding: 13px 10px;
        font-size: .78rem;
        text-align: center;
    }

    .events-tab span {
        flex-shrink: 0;
    }


    /* EVENT LIST */

    .event-list {
        gap: 18px;
    }


    /* EVENT CARD */

    .event-card {
        grid-template-columns: 75px minmax(0, 1fr);
        gap: 20px;
        padding: 25px 20px;
        border-radius: 20px;
    }


    /* EVENT DATE */

    .event-date {
        width: 75px;
        min-width: 75px;
        padding-right: 18px;
    }

    .event-day {
        font-size: 2.3rem;
        line-height: 1;
    }

    .event-month {
        margin-top: 6px;
        font-size: .65rem;
        letter-spacing: 2px;
    }


    /* EVENT CONTENT */

    .event-body {
        min-width: 0;
    }

    .event-card-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .event-title {
        font-size: 1.35rem;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .event-badge {
        align-self: flex-start;
        font-size: .6rem;
    }


    /* EVENT DETAILS */

    .event-details {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-top: 15px;
    }

    .event-details span {
        width: 100%;
        font-size: .8rem;
        line-height: 1.5;
    }

    .event-details i {
        width: 16px;
        flex-shrink: 0;
    }

    .event-text {
        margin-top: 16px;
        font-size: .9rem;
        line-height: 1.65;
    }


    /* EMPTY STATE */

    .events-empty {
        padding: 55px 25px;
        border-radius: 20px;
    }


    /* FOLLOW / CTA SECTION */

    .events-follow-section {
        padding-bottom: 70px;
    }

    .events-follow-card {
        min-height: 480px;
        border-radius: 24px;
    }

    .events-follow-content {
        padding: 50px 30px;
    }

    .events-follow-content h2 {
        font-size: clamp(2.5rem, 11vw, 3.5rem);
    }

    .events-follow-content p {
        max-width: 100%;
    }

    .events-follow-equalizer {
        right: -30px;
        gap: 7px;
        opacity: .18;
    }
}


/* ==========================================================
   EVENTS - SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

    .events-section {
        padding-bottom: 55px;
    }


    /* TABS */

    .events-tabs {
        gap: 6px;
        margin-bottom: 28px;
    }

    .events-tab {
        padding: 12px 7px;
        font-size: .7rem;
    }


    /* EVENT CARD */

    .event-card {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 15px;
        padding: 22px 16px;
        border-radius: 17px;
    }


    /* DATE */

    .event-date {
        width: 58px;
        min-width: 58px;
        padding-right: 14px;
    }

    .event-day {
        font-size: 2rem;
    }

    .event-month {
        font-size: .58rem;
        letter-spacing: 1.5px;
    }


    /* EVENT CONTENT */

    .event-title {
        font-size: 1.15rem;
    }

    .event-badge {
        padding: 6px 10px;
    }

    .event-details span {
        font-size: .75rem;
    }

    .event-text {
        font-size: .85rem;
    }


    /* FOLLOW CTA */

    .events-follow-card {
        min-height: 430px;
        border-radius: 20px;
    }

    .events-follow-content {
        padding: 42px 22px;
    }

    .events-follow-content h2 {
        font-size: 2.5rem;
    }

    .events-follow-equalizer {
        right: -50px;
        opacity: .12;
    }
}
/* ==========================================================
   ARTISTS - MOBILE RESPONSIVE
========================================================== */

@media (max-width: 767px) {

    /* ARTISTS SHOWCASE */

    .artists-showcase {
        padding-top: 20px;
        padding-bottom: 70px;
    }

    .artists-showcase-header {
        margin-bottom: 40px;
    }

    .artists-showcase-header .section-title {
        font-size: clamp(2.5rem, 11vw, 3.5rem);
    }

    .artists-showcase-header p {
        max-width: 100%;
        font-size: 1rem;
    }


    /* FEATURED ARTISTS */

    .featured-artist,
    .featured-artist-reverse {
        grid-template-columns: 1fr;
        min-height: 0;
        margin-bottom: 28px;
        border-radius: 24px;
        overflow: hidden;
    }

    .featured-artist-reverse .featured-artist-image {
        order: 1;
    }

    .featured-artist-reverse .featured-artist-content {
        order: 2;
    }

    .featured-artist-image {
        min-height: 380px;
    }

    .featured-artist-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .featured-artist-number {
        left: 22px;
        bottom: 18px;
        font-size: 3rem;
    }

    .featured-artist-content {
        padding: 35px 28px 40px;
    }

    .artist-eyebrow {
        margin-bottom: 20px;
    }

    .artist-waveform {
        flex: 1;
        max-width: 100px;
    }

    .featured-artist-content h3 {
        font-size: clamp(2rem, 9vw, 2.8rem);
        line-height: 1.08;
    }

    .featured-artist-content p {
        font-size: .95rem;
        line-height: 1.7;
    }

    .artist-genres {
        gap: 7px;
        margin-top: 25px;
    }

    .artist-genres span {
        padding: 7px 11px;
        font-size: .6rem;
    }


    /* MEET THE TEAM */

    .team-section {
        padding: 70px 0 80px;
    }

    .team-section-header {
        margin-bottom: 40px;
    }

    .team-section-header .section-title {
        font-size: clamp(2.5rem, 11vw, 3.5rem);
    }

    .team-section-header p {
        max-width: 100%;
        font-size: 1rem;
    }

    .team-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .team-card {
        min-height: 560px;
        border-radius: 24px;
    }

    .team-card-content {
        padding: 30px;
    }

    .team-card h3 {
        font-size: 1.8rem;
    }

    .team-card::after {
        left: 30px;
    }

    .team-card:hover::after {
        width: calc(100% - 60px);
    }


    /* IMPORTANT FOR MOBILE - SHOW TEAM DETAILS */

    .team-card-details {
        max-height: 300px;
        margin-top: 22px;
        opacity: 1;
        transform: translateY(0);
    }

    .team-card-details p {
        margin-top: 16px;
        font-size: .88rem;
        line-height: 1.65;
    }

    .team-roles {
        gap: 6px;
    }

    .team-roles span {
        padding: 6px 10px;
        font-size: .55rem;
    }


    /* ARTISTS CTA */

    .artists-cta-section {
        padding-top: 20px;
    }

    .artists-cta {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 55px 30px;
    }

    .artists-cta-content {
        max-width: 100%;
        margin-left: 0;
    }

    .artists-cta-content h2 {
        font-size: clamp(2.5rem, 11vw, 3.5rem);
    }

    .artists-cta-content p {
        max-width: 100%;
    }

    .artists-cta-action {
        justify-content: flex-start;
    }

    .artists-cta-button {
        width: 100%;
        justify-content: center;
    }
}


/* ==========================================================
   ARTISTS - SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

    /* FEATURED ARTISTS */

    .featured-artist-image {
        min-height: 300px;
    }

    .featured-artist-content {
        padding: 30px 22px 35px;
    }

    .featured-artist-content h3 {
        font-size: 2rem;
    }

    .artist-waveform {
        max-width: 75px;
    }


    /* TEAM */

    .team-section {
        padding: 60px 0 70px;
    }

    .team-card {
        min-height: 540px;
        border-radius: 20px;
    }

    .team-card-content {
        padding: 24px;
    }

    .team-card h3 {
        font-size: 1.7rem;
    }

    .team-card::after {
        left: 24px;
    }

    .team-card:hover::after {
        width: calc(100% - 48px);
    }

    .team-card-details p {
        font-size: .82rem;
    }


    /* CTA */

    .artists-cta {
        padding: 48px 22px;
    }

    .artists-cta-content h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 767px) {

    .gallery-section {
        padding-bottom: 80px;
    }

    .gallery-intro {
        margin-bottom: 35px;
    }

    .gallery-filters {
        gap: 8px;
        margin-bottom: 30px;
    }

    .gallery-filter {
        padding: 9px 17px;

        font-size: 0.78rem;
    }

    .gallery-grid {
        display: grid;

        grid-template-columns: 1fr;

        gap: 16px;
    }

    .gallery-item,
    .gallery-item:nth-child(7n + 1),
    .gallery-item:nth-child(7n + 2),
    .gallery-item:nth-child(7n + 3),
    .gallery-item:nth-child(7n + 4),
    .gallery-item:nth-child(7n + 5),
    .gallery-item:nth-child(7n + 6),
    .gallery-item:nth-child(7n + 7),
    .gallery-item:nth-child(3n + 1) {
        grid-column: span 1;

        min-height: 360px;
    }

    .gallery-overlay {
        padding: 20px;

        opacity: 1;

        background:
            linear-gradient(
                180deg,
                transparent 55%,
                rgba(12, 13, 24, 0.7) 100%
            );
    }

    .gallery-overlay-content {
        transform: translateY(0);
    }

    .gallery-lightbox {
        padding:
            80px 20px
            40px;
    }

    .gallery-lightbox-close {
        top: 20px;
        right: 20px;
    }

    .gallery-lightbox-arrow {
        width: 45px;
        height: 45px;

        top: auto;
        bottom: 20px;
    }

    .gallery-lightbox-prev {
        left: calc(50% - 60px);
    }

    .gallery-lightbox-next {
        right: calc(50% - 60px);
    }
}
@media (max-width: 767px) {
    .gallery-cta-section {
        padding-bottom: 80px;
    }

    .gallery-cta {
        padding: 40px 25px;
        border-radius: 24px;
    }

    .gallery-cta-strip {
        height: 280px;
        gap: 7px;
    }

    .gallery-cta-image {
        border-radius: 12px;
    }

    .gallery-cta-content h2 {
        font-size: 2.5rem;
    }
}

@media(max-width:767px){

    .connect-section{
        padding-bottom:80px;
    }

    .connect-intro{
        margin-bottom:65px;
    }

    .connect-content-header{
        margin-top:80px;
    }

    .music-platform-card{
        min-height:380px;
        padding:30px;
    }

    .music-platform-icon{
        top:30px;
        left:30px;
    }

    .platform-link{
        position:relative;
        right:auto;
        bottom:auto;
        margin-top:25px;
    }

    .music-platform-wave{
        right:20px;
        opacity:.1;
    }

    .content-platform-card{
        min-height:290px;
        padding:30px;
    }

    .connect-social-section{
        padding:80px 0;
    }

    .connect-social-link{
        padding:25px 5px;
    }

    .connect-social-action > span{
        display:none;
    }

    .connect-social-icon{
        width:50px;
        height:50px;
    }

}

@media(max-width:575px){

    .connect-category-header{
        gap:15px;
    }

    .music-platform-card{
        border-radius:22px;
    }

    .music-platform-content h3{
        font-size:1.7rem;
    }

    .content-platform-card{
        border-radius:22px;
    }

    .connect-social-intro h2{
        font-size:2.7rem;
    }

    .connect-social-name{
        gap:15px;
    }

    .connect-social-name > span{
        font-size:1.5rem;
    }

}
@media(max-width:767px){

    .contact-section{
        padding-bottom:80px;
    }

    .contact-heading{
        font-size:2.8rem;
    }

    .contact-details-grid{
        grid-template-columns:1fr;
    }

    .contact-detail-link{
        grid-column:auto;
    }

    .contact-form-wrapper{
        padding:38px 28px;
        border-radius:25px;
    }

    .contact-form-wave{
        right:20px;
        opacity:.05;
    }

}

@media(max-width:575px){

    .contact-heading{
        font-size:2.4rem;
    }

    .contact-detail-card{
        padding:20px;
    }

    .contact-detail-arrow{
        display:none;
    }

    .contact-form-wrapper{
        padding:32px 20px;
        border-radius:22px;
    }

    .contact-form-header h2{
        font-size:2rem;
    }

    .contact-form-wave{
        display:none;
    }

}

/* ==========================================================
  NAVIGATION - MOBILE RESPONSIVE
========================================================== */

@media (max-width: 767px) {

    .artists-nav-item {
        width: 100%;
    }

    .artists-nav-wrap {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .artists-nav-wrap > .nav-link {
        flex: 1;
        padding-right: 0;
    }

    .artists-dropdown-toggle {
        padding: 12px 16px;
    }

    .artists-nav-wrap .dropdown-menu {
        position: static !important;
        width: 100%;
        margin: 0;
        padding: 6px 0;
        border: 0;
        transform: none !important;
        box-shadow: none;
    }

    .artists-nav-wrap .dropdown-item {
        padding: 10px 16px;
    }
}