/* =========================================================
   BRAYZ
   ========================================================= */


/* =========================================================
   BASICS
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background: #0d0d0d;
    color: #ffffff;

    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.navbar {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 25px 5%;

    background: rgba(13, 13, 13, 0.82);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.04);

    z-index: 1000;
}

.logo {
    color: #ffffff;

    font-size: 22px;
    font-weight: 700;

    letter-spacing: 4px;

    text-decoration: none;
}

.nav-links {
    display: flex;
    align-items: center;

    gap: 30px;
}

.nav-links a {
    color: #ffffff;

    text-decoration: none;

    font-size: 12px;
    font-weight: 500;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.nav-links a:hover {
    opacity: 0.55;

    transform: translateY(-1px);
}


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

.hero {
    position: relative;

    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 95px 8% 35px;

    overflow: hidden;

    text-align: center;

    background: #0d0d0d;
}

.hero-video {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 0;

    opacity: 0.55;
}

.hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(13, 13, 13, 0.28),
            rgba(13, 13, 13, 0.55)
        );

    z-index: 1;
}

.hero-glow {
    position: absolute;

    width: 850px;
    height: 850px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.16) 0%,
            rgba(255, 255, 255, 0.07) 30%,
            rgba(255, 255, 255, 0.015) 55%,
            transparent 72%
        );

    filter: blur(15px);

    z-index: 2;

    pointer-events: none;

    animation: glowPulse 5s ease-in-out infinite;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.35;

        transform:
            translate(-50%, -50%)
            scale(0.90);
    }

    50% {
        opacity: 0.95;

        transform:
            translate(-50%, -50%)
            scale(1.12);
    }
}

.hero-content {
    position: relative;

    z-index: 3;

    width: 100%;
    max-width: 1050px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-small {
    margin: 0 0 17px;

    color: #9a9a9a;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 5px;

    text-transform: uppercase;
}

.hero h1 {
    max-width: 1000px;

    margin: 0;

    font-size:
        clamp(
            55px,
            7.8vw,
            120px
        );

    font-weight: 800;

    letter-spacing: -5px;

    line-height: 0.82;

    text-transform: uppercase;
}

.hero h1 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.5px
        rgba(255, 255, 255, 0.82);
}

.hero-description {
    max-width: 700px;

    margin: 25px auto 0;

    color: #aaaaaa;

    font-size: 16px;

    line-height: 1.5;
}


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

.buttons,
.mixing-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;
}

.buttons {
    margin-top: 24px;

    justify-content: center;
}

.mixing-actions {
    margin-top: 32px;

    justify-content: flex-start;
}

.button {
    display: inline-block;

    padding: 15px 27px;

    border:
        1px solid
        rgba(255, 255, 255, 0.75);

    color: #ffffff;

    text-decoration: none;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.button:hover {
    background: #ffffff;

    color: #000000;

    border-color: #ffffff;

    transform: translateY(-3px);
}

.button-main {
    background: #ffffff;

    color: #000000;

    border-color: #ffffff;
}

.button-main:hover {
    background: transparent;

    color: #ffffff;
}


/* =========================================================
   HERO ANIMATION
   ========================================================= */

.hero-small,
.hero h1,
.hero-description,
.hero .buttons {
    opacity: 0;

    transform: translateY(22px);

    animation:
        heroFadeIn
        0.8s
        ease
        forwards;
}

.hero-small {
    animation-delay: 0.05s;
}

.hero h1 {
    animation-delay: 0.16s;
}

.hero-description {
    animation-delay: 0.28s;
}

.hero .buttons {
    animation-delay: 0.40s;
}

@keyframes heroFadeIn {

    from {
        opacity: 0;

        transform: translateY(22px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }
}


/* =========================================================
   GENERAL
   ========================================================= */

.section {
    padding: 120px 8%;
}

.section-dark {
    background: #151515;
}

.section-label {
    margin: 0 0 25px;

    color: #777777;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 4px;

    text-transform: uppercase;
}

.section h2 {
    max-width: 900px;

    margin: 0 0 30px;

    font-size:
        clamp(
            42px,
            6vw,
            80px
        );

    line-height: 0.98;

    letter-spacing: -2px;
}

.section-text {
    max-width: 650px;

    color: #aaaaaa;

    font-size: 18px;

    line-height: 1.7;
}

.section-buttons {
    justify-content: flex-start;
}


/* =========================================================
   MIXING
   ========================================================= */

.mixing-section {
    padding: 135px 8% 120px;

    background: #0d0d0d;
}

.mixing-intro {
    display: grid;

    grid-template-columns:
        1.2fr
        0.8fr;

    gap: 80px;

    align-items: end;

    max-width: 1500px;

    margin: 0 auto 95px;
}

.mixing-headline h2 {
    margin: 0;

    font-size:
        clamp(
            52px,
            7vw,
            105px
        );

    line-height: 0.88;

    letter-spacing: -5px;

    text-transform: uppercase;
}

.mixing-copy {
    max-width: 520px;

    padding-bottom: 5px;
}

.mixing-copy > p {
    margin: 0 0 19px;

    color: #9d9d9d;

    font-size: 17px;

    line-height: 1.7;
}


/* =========================================================
   MIXING SERVICES
   ========================================================= */

.mixing-services {
    max-width: 1500px;

    margin: 0 auto;

    border-top:
        1px solid
        #343434;
}

.mixing-service {
    position: relative;

    overflow: hidden;

    border-bottom:
        1px solid
        #343434;

    background: #0d0d0d;
}

.mixing-service::before {
    content: "";

    position: absolute;

    inset: 0;

    background: #ffffff;

    transform:
        translateY(101%);

    transition:
        transform
        0.4s
        cubic-bezier(
            0.4,
            0,
            0.2,
            1
        );

    z-index: 0;
}

.mixing-service:hover::before {
    transform: translateY(0);
}

.service-top {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        80px
        minmax(300px, 1fr)
        150px
        45px;

    align-items: center;

    min-height: 112px;

    padding: 0 20px;

    transition:
        padding
        0.35s
        ease;
}

.mixing-service:hover .service-top {
    padding-left: 30px;
}

.service-number {
    color: #666666;

    font-size: 11px;

    letter-spacing: 2px;
}

.service-name {
    color: #ffffff;

    font-size:
        clamp(
            23px,
            2.7vw,
            42px
        );

    font-weight: 700;

    letter-spacing: -1px;

    text-transform: uppercase;
}

.service-price {
    justify-self: end;

    color: #888888;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 1.3px;

    white-space: nowrap;
}

.service-plus {
    justify-self: end;

    color: #ffffff;

    font-size: 29px;

    font-weight: 300;

    line-height: 1;

    transition:
        color 0.35s ease,
        transform 0.4s ease;
}

.mixing-service:hover .service-number,
.mixing-service:hover .service-name,
.mixing-service:hover .service-price,
.mixing-service:hover .service-plus {
    color: #000000;
}

.mixing-service:hover .service-plus {
    transform: rotate(45deg);
}

.service-details {
    position: relative;

    z-index: 2;

    max-height: 0;

    opacity: 0;

    overflow: hidden;

    transform: translateY(15px);

    transition:
        max-height 0.5s ease,
        opacity 0.3s ease,
        transform 0.4s ease;
}

.mixing-service:hover .service-details {
    max-height: 420px;

    opacity: 1;

    transform: translateY(0);
}

.service-details-inner {
    display: grid;

    grid-template-columns:
        1fr
        0.8fr;

    gap: 80px;

    margin-left: 80px;

    padding:
        0
        65px
        42px
        20px;
}

.service-summary p {
    max-width: 650px;

    margin: 0 0 16px;

    color: #111111;

    font-size: 16px;

    line-height: 1.65;
}

.service-summary .service-note {
    color: #555555;

    font-size: 14px;
}

.service-includes {
    padding-top: 2px;
}

.service-detail-label {
    display: block;

    margin-bottom: 12px;

    color: #777777;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 3px;
}

.service-includes p {
    max-width: 500px;

    margin: 0 0 17px;

    color: #111111;

    font-size: 14px;

    line-height: 1.7;
}

.service-extra {
    display: inline-block;

    color: #555555;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* =========================================================
   SELECTED WORK
   ========================================================= */

.work-section {
    padding: 135px 8% 130px;

    background: #151515;
}

.work-heading {
    max-width: 1500px;

    margin: 0 auto 75px;
}

.work-heading h2 {
    margin: 0;

    font-size:
        clamp(
            58px,
            8vw,
            120px
        );

    line-height: 0.84;

    letter-spacing: -5px;

    text-transform: uppercase;
}


/* =========================================================
   MUSO
   ========================================================= */

.muso-block {
    max-width: 1500px;

    margin: 0 auto 120px;

    display: grid;

    grid-template-columns:
        1.15fr
        0.85fr;

    gap: 80px;

    align-items: center;
}

.muso-visual {
    min-height: 420px;
}

.muso-copy {
    max-width: 520px;
}

.muso-copy h3 {
    margin:
        0
        0
        25px;

    font-size:
        clamp(
            35px,
            4vw,
            58px
        );

    line-height: 1;

    letter-spacing: -2px;
}

.muso-copy > p {
    color: #9a9a9a;

    font-size: 17px;

    line-height: 1.7;
}

.muso-link {
    display: block;

    overflow: hidden;

    text-decoration: none;

    border:
        1px solid
        #343434;

    background: #111113;

    transition:
        transform 0.4s ease,
        border-color 0.4s ease;
}

.muso-link:hover {
    transform: scale(1.015);

    border-color: #666666;
}

.muso-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.6s ease,
        filter 0.6s ease;
}

.muso-link:hover .muso-image {
    transform: scale(1.025);

    filter: brightness(1.05);
}

.credits-link {
    display: inline-block;

    margin-top: 25px;

    color: #ffffff;

    text-decoration: none;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 1.5px;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.credits-link:hover {
    opacity: 0.6;

    transform: translateX(4px);
}


/* =========================================================
   RELEASE LIST
   ========================================================= */

.release-list {
    max-width: 1500px;

    margin: 0 auto;

    border-top:
        1px solid
        #3a3a3a;
}

.release-card {
    position: relative;

    height: 190px;

    overflow: hidden;

    border-bottom:
        1px solid
        #3a3a3a;

    background: #151515;

    transition:
        background 0.4s ease,
        height 0.45s ease;
}

.release-default {
    position: absolute;

    inset: 0;

    z-index: 2;

    display: grid;

    grid-template-columns:
        65px
        125px
        minmax(300px, 1fr)
        170px;

    gap: 30px;

    align-items: center;

    padding:
        22px
        20px;

    color: #ffffff;

    transition:
        opacity 0.32s ease,
        transform 0.45s cubic-bezier(.4, 0, .2, 1),
        background 0.35s ease,
        color 0.35s ease,
        padding 0.35s ease;
}

.release-default:hover {
    background: #ffffff;

    color: #000000;

    padding-left: 30px;
}

.release-card.is-open .release-default {
    opacity: 0;

    transform:
        translateY(-12px)
        scale(0.985);

    pointer-events: none;
}

.release-number {
    color: #666666;

    font-size: 10px;

    letter-spacing: 2px;

    transition: color 0.35s ease;
}

.release-cover {
    width: 110px;
    height: 110px;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    color: #777777;

    font-size: 9px;

    letter-spacing: 2px;

    transition:
        transform 0.4s ease,
        filter 0.4s ease;
}

.release-cover-image {
    background: #111111;
}

.release-cover-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.45s ease;
}

.release-default:hover
.release-cover-image {
    transform: scale(1.06);
}

.release-default:hover
.release-cover-image img {
    transform: scale(1.04);
}

.release-info {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}

.release-artist {
    margin-bottom: 5px;

    color: #777777;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 2px;

    transition: color 0.35s ease;
}

.release-info h3 {
    margin:
        0
        0
        8px;

    font-size:
        clamp(
            25px,
            3vw,
            43px
        );

    letter-spacing: -1.5px;
}

.release-role {
    color: #777777;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 1.6px;

    transition: color 0.35s ease;
}

.release-default:hover
.release-number,

.release-default:hover
.release-artist,

.release-default:hover
.release-role {
    color: #555555;
}

.release-action {
    display: flex;

    justify-content: flex-end;
    align-items: center;

    gap: 11px;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 1.4px;
}

.release-open-button {
    appearance: none;

    border: 0;

    background: transparent;

    color: inherit;

    font-family: inherit;

    cursor: pointer;

    padding: 12px 0;

    opacity: 0.55;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.release-default:hover
.release-open-button,

.release-open-button:hover {
    opacity: 1;
}

.release-open-button:hover {
    transform: translateX(4px);
}

.spotify-icon {
    width: 23px;
    height: 23px;

    display: flex;

    flex-shrink: 0;
}

.spotify-icon svg {
    width: 100%;
    height: 100%;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.25;

    stroke-linecap: round;
}


/* =========================================================
   MORPH PLAYER
   ========================================================= */

.release-player-view {
    position: absolute;

    inset: 0;

    z-index: 1;

    display: grid;

    grid-template-columns:
        65px
        190px
        minmax(420px, 760px)
        1fr
        auto;

    gap: 30px;

    align-items: center;

    padding:
        19px
        20px;

    background: #181818;

    opacity: 0;

    transform:
        translateY(12px)
        scale(0.985);

    pointer-events: none;

    transition:
        opacity 0.35s ease,
        transform 0.48s cubic-bezier(.4, 0, .2, 1);
}

.release-card.is-open
.release-player-view {
    z-index: 3;

    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    pointer-events: auto;
}

.player-number {
    align-self: center;
}

.player-credit {
    min-width: 0;

    border-left:
        1px solid
        #333333;

    padding-left: 24px;
}

.player-credit-label {
    display: block;

    margin-bottom: 12px;

    color: #666666;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 3px;
}

.player-credit-list {
    display: flex;

    flex-direction: column;

    gap: 7px;
}

.player-credit-list span {
    color: #d2d2d2;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 1.5px;
}

.spotify-morph-player {
    width: 100%;

    min-width: 0;

    overflow: hidden;

    border-radius: 10px;

    opacity: 0;

    transform: scale(0.98);

    transition:
        opacity 0.35s ease 0.08s,
        transform 0.45s ease 0.05s;
}

.release-card.is-open
.spotify-morph-player {
    opacity: 1;

    transform: scale(1);
}

.spotify-morph-player iframe {
    display: block;

    width: 100%;
    height: 152px;

    border: 0;

    border-radius: 10px;
}

.release-close-button {
    grid-column: 5;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    justify-self: end;

    appearance: none;

    border: 0;

    background: transparent;

    color: #bdbdbd;

    font-family: inherit;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 1.6px;

    cursor: pointer;

    padding: 12px 0;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.release-close-button:hover {
    color: #ffffff;

    transform: translateX(-3px);
}

.close-icon {
    position: relative;

    display: block;

    width: 15px;
    height: 15px;

    flex-shrink: 0;
}

.close-icon::before,
.close-icon::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 14px;
    height: 1px;

    background: currentColor;
}

.close-icon::before {
    transform:
        translate(-50%, -50%)
        rotate(45deg);
}

.close-icon::after {
    transform:
        translate(-50%, -50%)
        rotate(-45deg);
}


/* =========================================================
   ABOUT
   ========================================================= */

.about-section {
    padding: 145px 8% 135px;

    background: #151515;

    border-top:
        1px solid
        #242424;
}

.about-shell {
    max-width: 1500px;

    margin: 0 auto 105px;

    display: grid;

    grid-template-columns:
        1.05fr
        0.95fr;

    gap: 100px;

    align-items: end;
}

.about-heading h2 {
    margin: 0;

    font-size:
        clamp(
            54px,
            7.5vw,
            112px
        );

    line-height: 0.86;

    letter-spacing: -5px;

    text-transform: uppercase;
}

.about-content {
    max-width: 600px;

    padding-bottom: 7px;
}

.about-lead {
    max-width: 570px;

    margin:
        0
        0
        28px;

    color: #ffffff;

    font-size:
        clamp(
            24px,
            2.5vw,
            38px
        );

    font-weight: 500;

    line-height: 1.17;

    letter-spacing: -1.2px;
}

.about-text {
    max-width: 560px;

    margin:
        0
        0
        32px;

    color: #929292;

    font-size: 16px;

    line-height: 1.8;
}

.about-work-link {
    display: inline-block;

    color: #ffffff;

    text-decoration: none;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 1.5px;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.about-work-link:hover {
    opacity: 0.55;

    transform: translateY(-3px);
}

.about-pillars {
    max-width: 1500px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid
        #3a3a3a;
}

.about-pillar {
    min-height: 190px;

    padding:
        30px
        35px
        0
        0;
}

.about-pillar + .about-pillar {
    padding-left: 35px;

    border-left:
        1px solid
        #303030;
}

.about-number {
    display: block;

    margin-bottom: 31px;

    color: #5f5f5f;

    font-size: 9px;

    letter-spacing: 2px;
}

.about-pillar h3 {
    margin:
        0
        0
        13px;

    color: #ffffff;

    font-size: 18px;
    font-weight: 600;

    letter-spacing: 1px;
}

.about-pillar p {
    max-width: 240px;

    margin: 0;

    color: #7f7f7f;

    font-size: 14px;

    line-height: 1.6;
}


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

.contact-section {
    padding: 150px 8% 95px;

    background: #0d0d0d;

    border-top:
        1px solid
        #242424;
}

.contact-shell {
    max-width: 1500px;

    margin: 0 auto;
}


/* CONTACT INTRO */

.contact-intro {
    display: grid;

    grid-template-columns:
        1.1fr
        0.9fr;

    gap: 100px;

    align-items: end;

    margin-bottom: 105px;
}

.contact-heading h2 {
    margin: 0;

    max-width: 920px;

    font-size:
        clamp(
            60px,
            8vw,
            124px
        );

    font-weight: 800;

    line-height: 0.82;

    letter-spacing: -5px;

    text-transform: uppercase;
}

.contact-copy {
    max-width: 560px;

    padding-bottom: 5px;
}

.contact-lead {
    margin:
        0
        0
        25px;

    color: #ffffff;

    font-size:
        clamp(
            24px,
            2.4vw,
            36px
        );

    font-weight: 500;

    line-height: 1.2;

    letter-spacing: -1px;
}

.contact-text {
    margin: 0;

    max-width: 520px;

    color: #8e8e8e;

    font-size: 16px;

    line-height: 1.8;
}


/* CONTACT OPTIONS */

.contact-options {
    border-top:
        1px solid
        #343434;
}

.contact-option {
    position: relative;

    display: grid;

    grid-template-columns:
        70px
        minmax(320px, 1fr)
        220px
        40px;

    gap: 28px;

    align-items: center;

    min-height: 145px;

    padding:
        22px
        20px;

    overflow: hidden;

    border-bottom:
        1px solid
        #343434;

    color: #ffffff;

    text-decoration: none;

    transition:
        color 0.35s ease,
        padding 0.35s ease;
}

.contact-option::before {
    content: "";

    position: absolute;

    inset: 0;

    background: #ffffff;

    transform: translateY(101%);

    transition:
        transform
        0.4s
        cubic-bezier(
            0.4,
            0,
            0.2,
            1
        );

    z-index: 0;
}

.contact-option:hover::before {
    transform: translateY(0);
}

.contact-option:hover {
    color: #000000;

    padding-left: 30px;
}

.contact-option > * {
    position: relative;

    z-index: 1;
}

.contact-option-number {
    color: #626262;

    font-size: 10px;

    letter-spacing: 2px;

    transition:
        color 0.35s ease;
}

.contact-option-main {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}

.contact-option-label {
    margin-bottom: 8px;

    color: #6f6f6f;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2.5px;

    transition:
        color 0.35s ease;
}

.contact-option h3 {
    margin: 0;

    font-size:
        clamp(
            25px,
            3vw,
            43px
        );

    font-weight: 700;

    line-height: 1;

    letter-spacing: -1.5px;
}

.contact-option-meta {
    justify-self: end;

    color: #737373;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 1.4px;

    text-align: right;

    transition:
        color 0.35s ease;
}

.contact-option-arrow {
    justify-self: end;

    font-size: 21px;

    font-weight: 300;

    transition:
        transform 0.35s ease;
}

.contact-option:hover
.contact-option-number,

.contact-option:hover
.contact-option-label,

.contact-option:hover
.contact-option-meta {
    color: #555555;
}

.contact-option:hover
.contact-option-arrow {
    transform:
        translate(4px, -4px);
}


/* FINAL CONTACT CTA */

.contact-final {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 50px;

    margin-top: 105px;

    padding-top: 35px;

    border-top:
        1px solid
        #343434;
}

.contact-final p {
    margin: 0;

    color: #656565;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 3px;
}

.contact-final-link {
    display: inline-flex;

    align-items: center;

    gap: 25px;

    color: #ffffff;

    text-decoration: none;

    font-size:
        clamp(
            30px,
            4.5vw,
            68px
        );

    font-weight: 700;

    line-height: 1;

    letter-spacing: -2px;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.contact-final-link span {
    font-size: 0.65em;

    font-weight: 300;

    transition:
        transform 0.3s ease;
}

.contact-final-link:hover {
    opacity: 0.65;

    transform: translateX(4px);
}

.contact-final-link:hover span {
    transform:
        translate(5px, -5px);
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
    padding: 30px 8%;

    border-top:
        1px solid
        #222222;

    background: #0d0d0d;

    color: #666666;

    font-size: 12px;
}


/* =========================================================
   BEATS PAGE
   ========================================================= */

.beats-page {
    background: #1c1c21;
}

.beats-page .beats-navbar {
    justify-content: flex-end;

    background:
        rgba(13, 13, 13, 0.96);
}

.beats-page .beats-nav-links {
    align-items: center;
}

.beats-page .home-link {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    padding: 0;
}

.beats-page .home-link svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.beats-page .nav-custom-beat {
    margin-left: 10px;

    padding: 11px 16px;

    border:
        1px solid
        #ffffff;
}

.beats-page .nav-custom-beat:hover {
    opacity: 1;

    background: #ffffff;

    color: #000000;
}

.beats-page .beatstore-page {
    position: relative;

    margin: 0;

    min-height: 100vh;

    padding: 115px 0 0;

    background: #1c1c21;
}

.beats-page .beatstore-page::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 115px;

    background: #0d0d0d;

    z-index: 0;
}

.beats-page .beatstars-container {
    position: relative;

    z-index: 1;

    width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #1c1c21;

    border: none;

    box-shadow: none;
}

.beats-page .beatstars-container iframe {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    border: 0;

    background: #1c1c21;
}

.beats-page footer {
    margin: 0;

    padding: 40px 8%;

    background: #1c1c21;

    border-top: none;

    color: #666666;
}


/* =========================================================
   MEDIUM
   ========================================================= */

@media (max-width: 1100px) {

    .release-player-view {
        grid-template-columns:
            55px
            150px
            minmax(360px, 1fr)
            auto;

        gap: 22px;
    }

    .release-close-button {
        grid-column: 4;
    }

    .about-shell,
    .contact-intro {
        gap: 65px;
    }

    .contact-option {
        grid-template-columns:
            55px
            minmax(280px, 1fr)
            170px
            35px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

    .navbar {
        padding: 22px 7%;
    }

    body:not(.beats-page) .nav-links {
        display: none;
    }


    /* HERO */

    .hero {
        padding:
            100px
            7%
            40px;
    }

    .hero h1 {
        font-size:
            clamp(
                48px,
                15vw,
                80px
            );

        letter-spacing: -3px;
    }

    .hero-small {
        margin-bottom: 15px;

        letter-spacing: 3px;
    }

    .hero-description {
        margin-top: 22px;

        font-size: 15px;
    }

    .hero .buttons {
        margin-top: 22px;
    }


    /* MIXING */

    .mixing-section {
        padding: 95px 7%;
    }

    .mixing-intro {
        grid-template-columns: 1fr;

        gap: 45px;

        margin-bottom: 70px;
    }

    .mixing-headline h2 {
        font-size:
            clamp(
                48px,
                13vw,
                75px
            );

        letter-spacing: -3px;
    }

    .mixing-actions {
        margin-top: 28px;
    }


    /* SERVICES */

    .service-top {
        grid-template-columns:
            38px
            1fr
            auto;

        min-height: 90px;

        padding: 0 5px;
    }

    .service-name {
        font-size:
            clamp(
                19px,
                5.5vw,
                27px
            );
    }

    .service-price {
        grid-column: 2;

        justify-self: start;

        margin-top: 4px;

        font-size: 10px;
    }

    .service-plus {
        grid-column: 3;

        grid-row:
            1
            /
            span 2;
    }

    .mixing-service::before {
        display: none;
    }

    .service-details {
        max-height: none;

        opacity: 1;

        transform: none;
    }

    .service-details-inner {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-left: 38px;

        padding:
            0
            10px
            40px
            5px;
    }

    .service-summary p,
    .service-includes p {
        color: #aaaaaa;
    }


    /* WORK */

    .work-section {
        padding: 95px 7%;
    }

    .work-heading {
        margin-bottom: 55px;
    }

    .work-heading h2 {
        font-size:
            clamp(
                52px,
                15vw,
                85px
            );

        letter-spacing: -3px;
    }


    /* MUSO */

    .muso-block {
        grid-template-columns: 1fr;

        gap: 45px;

        margin-bottom: 80px;
    }

    .muso-visual {
        min-height: 300px;
    }


    /* RELEASES */

    .release-card {
        height: 145px;
    }

    .release-card.is-open {
        height: 350px;
    }

    .release-default {
        grid-template-columns:
            35px
            75px
            1fr;

        gap: 15px;

        min-height: 125px;

        padding:
            17px
            0;

        height: 145px;
    }

    .release-cover {
        width: 70px;
        height: 70px;
    }

    .release-info h3 {
        font-size: 22px;
    }

    .release-action {
        grid-column: 3;

        justify-content: flex-start;

        margin-top: -5px;
    }


    /* RELEASE PLAYER */

    .release-player-view {
        grid-template-columns:
            35px
            1fr
            auto;

        grid-template-rows:
            auto
            1fr;

        gap:
            18px
            15px;

        align-items: start;

        padding:
            24px
            0;
    }

    .player-number {
        grid-column: 1;
        grid-row: 1;
    }

    .player-credit {
        grid-column: 2;
        grid-row: 1;

        padding-left: 18px;
    }

    .release-close-button {
        grid-column: 3;
        grid-row: 1;

        align-self: start;

        padding-top: 0;
    }

    .spotify-morph-player {
        grid-column:
            1
            /
            -1;

        grid-row: 2;

        margin-top: 4px;
    }

    .spotify-morph-player iframe {
        height: 152px;
    }


    /* ABOUT */

    .about-section {
        padding:
            100px
            7%
            90px;
    }

    .about-shell {
        grid-template-columns: 1fr;

        gap: 50px;

        margin-bottom: 75px;
    }

    .about-heading h2 {
        font-size:
            clamp(
                50px,
                14vw,
                78px
            );

        letter-spacing: -3px;
    }

    .about-content {
        padding-bottom: 0;
    }

    .about-lead {
        font-size: 25px;

        line-height: 1.25;
    }

    .about-pillars {
        grid-template-columns: 1fr;
    }

    .about-pillar {
        min-height: auto;

        padding:
            28px
            0
            30px;

        border-bottom:
            1px solid
            #303030;
    }

    .about-pillar + .about-pillar {
        padding-left: 0;

        border-left: 0;
    }

    .about-number {
        margin-bottom: 20px;
    }


    /* CONTACT */

    .contact-section {
        padding:
            105px
            7%
            70px;
    }

    .contact-intro {
        grid-template-columns: 1fr;

        gap: 48px;

        margin-bottom: 75px;
    }

    .contact-heading h2 {
        font-size:
            clamp(
                52px,
                15vw,
                84px
            );

        letter-spacing: -3px;
    }

    .contact-lead {
        font-size: 25px;
    }

    .contact-option {
        grid-template-columns:
            35px
            1fr
            24px;

        gap: 15px;

        min-height: 125px;

        padding:
            22px
            0;
    }

    .contact-option::before {
        display: none;
    }

    .contact-option:hover {
        color: #ffffff;

        padding-left: 0;
    }

    .contact-option-meta {
        display: none;
    }

    .contact-option-arrow {
        grid-column: 3;

        align-self: center;
    }

    .contact-option h3 {
        font-size:
            clamp(
                23px,
                7vw,
                31px
            );
    }

    .contact-option:hover
    .contact-option-number,

    .contact-option:hover
    .contact-option-label {
        color: #6f6f6f;
    }

    .contact-final {
        flex-direction: column;

        align-items: flex-start;

        margin-top: 70px;
    }

    .contact-final-link {
        font-size:
            clamp(
                34px,
                11vw,
                52px
            );
    }


    /* OTHER */

    .section {
        padding: 90px 7%;
    }

    .section-buttons {
        justify-content: flex-start;
    }


    /* BEATS */

    .beats-page .beats-nav-links {
        gap: 15px;
    }

    .beats-page
    .beats-nav-links
    > a:not(.home-link):not(.nav-custom-beat) {
        display: none;
    }

    .beats-page .beatstore-page {
        padding-top: 105px;
    }

    .beats-page .beatstore-page::before {
        height: 105px;
    }

    .beats-page .nav-custom-beat {
        margin-left: 0;

        padding: 10px 13px;

        font-size: 11px;
    }
}
/* =========================================================
   MOBILE MIXING SERVICES – TAP ACCORDION
   ========================================================= */

@media (max-width: 800px) {

    .mixing-service {
        cursor: pointer;
    }

    /* Weißen Desktop-Layer auf Mobile wieder aktivieren */
    .mixing-service::before {
        display: block;
        transform: translateY(101%);
    }

    /*
       Touch-Geräte können :hover "festhalten".
       Deshalb darf Hover alleine Mobile NICHT öffnen.
    */
    .mixing-service:hover::before {
        transform: translateY(101%);
    }

    /* Erst echter Tap / is-open macht den Bereich weiß */
    .mixing-service.is-open::before {
        transform: translateY(0);
    }


    /* -------------------------
       CLOSED STATE
       ------------------------- */

    .service-details {
        max-height: 0;
        opacity: 0;
        transform: translateY(15px);
        overflow: hidden;
    }


    /* -------------------------
       OPEN STATE
       ------------------------- */

    .mixing-service.is-open .service-details {
        max-height: 900px;
        opacity: 1;
        transform: translateY(0);
    }


    /* Desktop-Hover auf Touch neutralisieren */

    .mixing-service:hover .service-top {
        padding-left: 5px;
    }

    .mixing-service:hover .service-number {
        color: #666666;
    }

    .mixing-service:hover .service-name {
        color: #ffffff;
    }

    .mixing-service:hover .service-price {
        color: #888888;
    }

    .mixing-service:hover .service-plus {
        color: #ffffff;
        transform: none;
    }


    /* -------------------------
       OPEN COLORS
       ------------------------- */

    .mixing-service.is-open .service-number {
        color: #666666;
    }

    .mixing-service.is-open .service-name,
    .mixing-service.is-open .service-plus {
        color: #000000;
    }

    .mixing-service.is-open .service-price {
        color: #555555;
    }

    .mixing-service.is-open .service-plus {
        transform: rotate(45deg);
    }


    /* Text wie auf Desktop */

    .mixing-service.is-open .service-summary p,
    .mixing-service.is-open .service-includes p {
        color: #111111;
    }

    .mixing-service.is-open
    .service-summary
    .service-note {
        color: #555555;
    }
}
/* =========================================================
   MOBILE MIXING – FIX STICKY HOVER
   ========================================================= */

@media (max-width: 800px) {

    /* Safari-Touch-Hover darf den Service nicht offen halten */
    .mixing-service:hover .service-details {
        max-height: 0;
        opacity: 0;
        transform: translateY(15px);
    }

    /* Nur unsere echte is-open-Klasse darf öffnen */
    .mixing-service.is-open .service-details,
    .mixing-service.is-open:hover .service-details {
        max-height: 900px;
        opacity: 1;
        transform: translateY(0);
    }

}
/* =========================================================
   DESKTOP – COMPACT VERSION
   ========================================================= */

@media (min-width: 801px) {


    /* =====================================================
       GENERAL SECTIONS
       ===================================================== */

    .section {
        padding:
            95px
            8%;
    }

    .section h2 {
        font-size:
            clamp(
                40px,
                5vw,
                68px
            );

        margin-bottom: 24px;
    }

    .section-text {
        font-size: 16px;
        line-height: 1.65;
    }


    /* =====================================================
       MIXING SECTION
       ===================================================== */

    .mixing-section {
        padding:
            105px
            8%
            95px;
    }

    .mixing-intro {
        max-width: 1320px;

        gap: 60px;

        margin-bottom: 65px;
    }

    .mixing-headline h2 {
        font-size:
            clamp(
                46px,
                5.6vw,
                86px
            );

        letter-spacing: -4px;
    }

    .mixing-copy > p {
        font-size: 16px;
        line-height: 1.6;
    }


    /* =====================================================
       MIXING SERVICES
       ===================================================== */

    .mixing-services {
        max-width: 1320px;
    }

    .service-top {
        grid-template-columns:
            65px
            minmax(260px, 1fr)
            125px
            36px;

        min-height: 88px;

        padding:
            0
            16px;
    }

    .mixing-service:hover .service-top {
        padding-left: 24px;
    }

    .service-name {
        font-size:
            clamp(
                21px,
                2.1vw,
                34px
            );
    }

    .service-price {
        font-size: 11px;
    }

    .service-plus {
        font-size: 25px;
    }


    /* geöffnetes Fach */

    .mixing-service:hover .service-details {
        max-height: 320px;
    }

    .service-details-inner {
        grid-template-columns:
            1fr
            0.8fr;

        gap: 50px;

        margin-left: 65px;

        padding:
            0
            50px
            30px
            16px;
    }

    .service-summary p {
        max-width: 600px;

        margin-bottom: 12px;

        font-size: 15px;
        line-height: 1.55;
    }

    .service-summary .service-note {
        font-size: 13px;
    }

    .service-detail-label {
        margin-bottom: 9px;
    }

    .service-includes p {
        margin-bottom: 13px;

        font-size: 13px;
        line-height: 1.6;
    }

    .service-extra {
        font-size: 10px;
    }


    /* =====================================================
       SELECTED WORK
       ===================================================== */

    .work-section {
        padding:
            105px
            8%
            100px;
    }

    .work-heading {
        max-width: 1320px;

        margin-bottom: 55px;
    }

    .work-heading h2 {
        font-size:
            clamp(
                50px,
                6.2vw,
                92px
            );

        letter-spacing: -4px;
    }


    /* =====================================================
       MUSO.AI
       ===================================================== */

    .muso-block {
        max-width: 1320px;

        grid-template-columns:
            1.05fr
            0.95fr;

        gap: 55px;

        margin-bottom: 80px;
    }

    .muso-visual,
    .muso-placeholder {
        min-height: 340px;
    }


    /* =====================================================
       RELEASE LIST
       ===================================================== */

    .release-list {
        max-width: 1320px;
    }

    .release-item {
        grid-template-columns:
            55px
            100px
            minmax(260px, 1fr)
            155px;

        gap: 24px;

        min-height: 140px;

        padding:
            18px
            18px;
    }

    .release-item:hover {
        padding-left: 26px;
    }

    .release-cover {
        width: 90px;
        height: 90px;
    }

    .release-info h3 {
        font-size:
            clamp(
                23px,
                2.4vw,
                35px
            );

        margin-bottom: 6px;
    }

}