/* =========================================================
   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: 62px 8% 72px;

    background: #151515;
}

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

    margin: 0 auto 26px;
}

.work-heading h2 {
    display: none;
}


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

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

    margin: 0 auto 80px;

    display: grid;

    grid-template-columns:
        minmax(0, 500px)
        minmax(0, 1fr);

    gap: 70px;

    align-items: center;
}

.muso-visual {
    width: 100%;
    max-width: 500px;
    min-height: 0;
}

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

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

    font-size:
        clamp(
            32px,
            3.5vw,
            50px
        );

    line-height: 1;

    letter-spacing: -1.7px;
}

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

    font-size: 16px;

    line-height: 1.65;
}

.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: auto;

    object-fit: contain;

    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: 18px;

    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: 1380px;

    margin: 0 auto;

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

.release-card {
    position: relative;

    height: 155px;

    overflow: hidden;

    border-bottom:
        1px solid
        #3a3a3a;

    background: #151515;

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

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

.release-default {
    position: absolute;

    inset: 0;

    z-index: 2;

    display: grid;

    grid-template-columns:
        55px
        105px
        minmax(300px, 1fr)
        160px;

    gap: 25px;

    align-items: center;

    padding:
        18px
        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: 92px;
    height: 92px;

    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
        7px;

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

    letter-spacing: -1.3px;
}

.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 {
    position: relative;

    overflow: hidden;

    padding:
        115px
        8%
        110px;

    background: #0d0d0d;

    border-top:
        1px solid
        #242424;
}


.about-shell {
    position: relative;

    max-width: 1400px;
    min-height: 520px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(340px, 0.85fr);

    gap: 45px;

    align-items: center;
}


/* COPY */

.about-copy {
    position: relative;

    z-index: 3;

    max-width: 820px;
}


.about-heading h2 {
    max-width: 820px;

    margin:
        0
        0
        48px;

    font-size:
        clamp(
            52px,
            6vw,
            92px
        );

    line-height: 0.88;

    letter-spacing: -4px;

    text-transform: uppercase;
}


.about-story {
    max-width: 690px;

    padding-left: 2px;
}


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

    margin:
        0
        0
        30px;

    color: #8d8d8d;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.75;

    letter-spacing: 0;
}


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

    margin: 0;

    color: #e8e8e8;

    font-size:
        clamp(
            18px,
            1.45vw,
            23px
        );

    font-weight: 400;

    line-height: 1.55;

    letter-spacing: -0.35px;
}


/* PORTRAIT */

.about-portrait-wrap {
    position: relative;

    width: min(100%, 500px);
    height: 520px;

    justify-self: end;
    align-self: center;

    overflow: visible;

    z-index: 1;
}


/*
   IMPORTANT:
   The previous version used dark overlay gradients.
   They only darkened the photo; they did not actually
   dissolve the photo into the page background.

   The mask below fades the IMAGE ITSELF to transparency,
   so the #0d0d0d section background becomes visible.
*/

.about-portrait {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;

    filter:
        grayscale(0%)
        contrast(1.04)
        brightness(0.76);

    -webkit-mask-image:
        radial-gradient(
            ellipse 76% 78% at 58% 43%,
            #000 0%,
            #000 44%,
            rgba(0, 0, 0, 0.92) 57%,
            rgba(0, 0, 0, 0.62) 69%,
            rgba(0, 0, 0, 0.22) 82%,
            transparent 96%
        );

    mask-image:
        radial-gradient(
            ellipse 76% 78% at 58% 43%,
            #000 0%,
            #000 44%,
            rgba(0, 0, 0, 0.92) 57%,
            rgba(0, 0, 0, 0.62) 69%,
            rgba(0, 0, 0, 0.22) 82%,
            transparent 96%
        );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}


/* Extra subtle black wash on the left edge only. */

.about-portrait-wrap::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            #0d0d0d 0%,
            rgba(13, 13, 13, 0.82) 8%,
            rgba(13, 13, 13, 0.28) 24%,
            transparent 44%
        );

    pointer-events: none;
}


/* Remove the old second overlay. */

.about-portrait-wrap::before {
    content: none;
}


/* No broken-image icon while the portrait file is still missing */

.about-portrait:not([src]),
.about-portrait[src=""] {
    visibility: hidden;
}


/* =========================================================
   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: space-between;

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

.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
       Mobile behaves like desktop visually,
       but opens/closes via the .is-open class from script.js.
    */

    .mixing-service {
        cursor: pointer;
        touch-action: manipulation;
    }

    .service-top {
        grid-template-columns:
            38px
            minmax(0, 1fr)
            28px;

        grid-template-rows:
            auto
            auto;

        min-height: 90px;

        padding:
            14px
            5px;
    }

    .service-number {
        grid-column: 1;

        grid-row:
            1
            /
            span 2;
    }

    .service-name {
        grid-column: 2;
        grid-row: 1;

        padding-right: 10px;

        font-size:
            clamp(
                19px,
                5.5vw,
                27px
            );

        line-height: 1.05;
    }

    .service-price {
        grid-column: 2;
        grid-row: 2;

        justify-self: start;

        margin-top: 5px;

        font-size: 10px;
    }

    .service-plus {
        grid-column: 3;

        grid-row:
            1
            /
            span 2;

        align-self: center;
    }


    /* Closed mobile state:
       keep the desktop white panel hidden.
    */

    .mixing-service::before {
        display: block;

        transform:
            translateY(101%);
    }

    /* Prevent Safari/iOS sticky :hover from opening a service. */

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

    /* A real tap adds .is-open via script.js. */

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


    /* Details are closed by default. */

    .service-details {
        max-height: 0;

        opacity: 0;

        overflow: hidden;

        transform:
            translateY(15px);
    }

    /* Desktop :hover must not keep mobile details open. */

    .mixing-service:hover
    .service-details {
        max-height: 0;

        opacity: 0;

        transform:
            translateY(15px);
    }

    /* Only .is-open opens the details on mobile. */

    .mixing-service.is-open
    .service-details,

    .mixing-service.is-open:hover
    .service-details {
        max-height: 900px;

        opacity: 1;

        transform:
            translateY(0);
    }


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

        gap: 25px;

        margin-left: 38px;

        padding:
            0
            10px
            40px
            5px;
    }


    /* Neutralize desktop hover styling on touch devices. */

    .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 state = same white/black language as desktop. */

    .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);
    }

    .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;
    }


    /* WORK */

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

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

    .work-heading h2 {
        display: none;
    }


    /* 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:
            88px
            7%
            82px;

        overflow: hidden;
    }


    .about-shell {
        min-height: 0;

        grid-template-columns: 1fr;

        gap: 42px;

        align-items: start;
    }


    .about-copy {
        max-width: none;
    }


    .about-heading h2 {
        max-width: none;

        margin-bottom: 34px;

        font-size:
            clamp(
                44px,
                12.5vw,
                67px
            );

        line-height: 0.9;

        letter-spacing: -3px;
    }


    .about-story {
        max-width: none;
    }


    .about-lead {
        margin-bottom: 25px;

        font-size: 14px;

        line-height: 1.7;
    }


    .about-text {
        font-size: 18px;

        line-height: 1.55;
    }


    .about-portrait-wrap {
        width: 92%;
        height: 360px;

        justify-self: end;

        margin:
            5px
            -2%
            -35px
            0;

        order: 2;
    }


    .about-portrait-wrap::after {
        background:
            linear-gradient(
                90deg,
                #0d0d0d 0%,
                rgba(13, 13, 13, 0.62) 10%,
                rgba(13, 13, 13, 0.12) 28%,
                transparent 48%
            );
    }


    .about-portrait {
        object-position: center top;

        filter:
            grayscale(0%)
            contrast(1.03)
            brightness(0.75);

        -webkit-mask-image:
            radial-gradient(
                ellipse 82% 80% at 58% 42%,
                #000 0%,
                #000 43%,
                rgba(0, 0, 0, 0.9) 56%,
                rgba(0, 0, 0, 0.58) 69%,
                rgba(0, 0, 0, 0.2) 82%,
                transparent 96%
            );

        mask-image:
            radial-gradient(
                ellipse 82% 80% at 58% 42%,
                #000 0%,
                #000 43%,
                rgba(0, 0, 0, 0.9) 56%,
                rgba(0, 0, 0, 0.58) 69%,
                rgba(0, 0, 0, 0.2) 82%,
                transparent 96%
            );
    }


/* 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;
    }
}


/* =========================================================
   MORE CREDITS — MORPH GALLERY
   ========================================================= */

.release-gallery {
    max-width: 1380px;

    margin:
        58px
        auto
        0;

    padding-top: 34px;

    border-top:
        1px solid
        #343434;
}

.release-gallery-heading {
    display: flex;

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

    gap: 25px;

    margin-bottom: 24px;
}

.release-gallery-heading .section-label {
    margin: 0;
}

.release-gallery-hint {
    color: #666666;

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

    letter-spacing: 2px;
}

.release-gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(
            6,
            minmax(0, 1fr)
        );

    gap: 16px;

    align-items: start;
}


/* ---------------------------------------------------------
   CLOSED TILE
   --------------------------------------------------------- */

.gallery-release-card {
    position: relative;

    min-width: 0;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #181818;

    border:
        1px solid
        #2d2d2d;

    transform-origin: top left;

    will-change:
        transform,
        height;

    transition:
        border-color 0.3s ease,
        background 0.3s ease;
}

.gallery-release-card:hover {
    border-color: #555555;
}

.gallery-release-trigger {
    position: absolute;

    inset: 0;

    z-index: 2;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    appearance: none;

    border: 0;

    background: #111111;

    cursor: pointer;

    overflow: hidden;

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

.gallery-cover-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

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

.gallery-release-trigger:hover
.gallery-cover-image {
    transform: scale(1.035);

    filter: brightness(0.74);
}

.gallery-cover-overlay {
    position: absolute;

    left: 16px;
    right: 16px;
    bottom: 15px;

    display: flex;

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

    gap: 15px;

    color: #ffffff;

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

    letter-spacing: 1.6px;

    opacity: 0;

    transform: translateY(8px);

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

.gallery-release-trigger:hover
.gallery-cover-overlay {
    opacity: 1;

    transform: translateY(0);
}


/* ---------------------------------------------------------
   OPEN / MORPHED CARD
   --------------------------------------------------------- */

.gallery-release-card.is-open {
    grid-column:
        1
        /
        -1;

    aspect-ratio: auto;

    height: 190px;

    background: #181818;

    border-color: #343434;
}

.gallery-release-card.is-open
.gallery-release-trigger {
    opacity: 0;

    transform: scale(1.015);

    pointer-events: none;
}


/* Same visual language as the Top 3 open state */

.gallery-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(10px)
        scale(0.988);

    pointer-events: none;

    transition:
        opacity 0.32s ease 0.12s,
        transform 0.42s cubic-bezier(.4, 0, .2, 1) 0.06s;
}

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

    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    pointer-events: auto;
}

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

.gallery-spotify-player {
    opacity: 1;

    transform: none;
}

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

    width: 100%;
    height: 152px;

    border: 0;

    border-radius: 10px;
}

.gallery-release-close {
    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;
}

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

    transform: translateX(-3px);
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1200px) {

    .release-gallery-grid {
        grid-template-columns:
            repeat(
                5,
                minmax(0, 1fr)
            );
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 800px) {

    .release-gallery {
        margin-top: 48px;

        padding-top: 28px;
    }

    .release-gallery-heading {
        margin-bottom: 20px;
    }

    .release-gallery-hint {
        display: none;
    }

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

        gap: 10px;
    }

    .gallery-cover-overlay {
        display: none;
    }

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

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

        grid-template-rows:
            auto
            1fr;

        gap:
            18px
            15px;

        align-items: start;

        padding:
            24px
            0;
    }

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

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

        padding-left: 18px;
    }

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

        align-self: start;

        padding-top: 0;
    }

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

        grid-row: 2;

        margin-top: 4px;
    }

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

}


/* =========================================================
   MORE CREDITS — ROW MORPH
   Shared player always opens directly BELOW the clicked row.
   ========================================================= */

/* Old per-card player stays in the HTML but is not used in this version. */
.release-gallery-grid .gallery-release-card .gallery-player-view {
    display: none !important;
}

/* The clicked cover remains a normal square tile. */
.gallery-release-card.is-open {
    grid-column: auto;
    aspect-ratio: 1 / 1;
    height: auto;
    background: #181818;
    border-color: #ffffff;
}

.gallery-release-card.is-open .gallery-release-trigger {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.gallery-release-card.is-open .gallery-cover-image {
    filter: brightness(0.58);
}

.gallery-release-card.is-open .gallery-cover-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* Shared player is a full-width GRID ITEM. JS moves it after the last cover in the selected row. */
.gallery-row-player {
    grid-column: 1 / -1;
    min-width: 0;
    height: 0;
    display: grid;
    grid-template-columns: 150px 190px minmax(420px, 760px) 1fr auto;
    gap: 30px;
    align-items: center;
    margin: -16px 0 0;
    padding: 0 20px;
    overflow: hidden;
    background: #181818;
    border: 1px solid transparent;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px) scale(.99);
    transform-origin: top left;
    transition:
        height .48s cubic-bezier(.4,0,.2,1),
        margin .40s ease,
        padding .40s ease,
        border-color .30s ease,
        opacity .28s ease .08s,
        transform .42s cubic-bezier(.4,0,.2,1);
}

.gallery-row-player.is-open {
    height: 190px;
    margin: 2px 0 0;
    padding: 18px 20px;
    border-color: #343434;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.gallery-row-cover-wrap {
    width: 150px;
    height: 150px;
    overflow: hidden;
    background: #111111;
}

.gallery-row-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-row-credit { min-width: 0; }
.gallery-row-spotify { width: 100%; min-width: 0; opacity: 1; transform: none; }
.gallery-row-spotify iframe { display: block; width: 100%; height: 152px; border: 0; border-radius: 10px; }

.gallery-row-close {
    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 .25s ease, transform .25s ease;
}

.gallery-row-close:hover { color: #fff; transform: translateX(-3px); }

@media (max-width: 800px) {
    .gallery-row-player {
        grid-template-columns: 80px 1fr auto;
        grid-template-rows: auto 1fr;
        gap: 18px 15px;
        padding: 0;
    }

    .gallery-row-player.is-open {
        height: 350px;
        padding: 20px 0;
    }

    .gallery-row-cover-wrap { grid-column: 1; grid-row: 1; width: 80px; height: 80px; }
    .gallery-row-credit { grid-column: 2; grid-row: 1; padding-left: 18px; }
    .gallery-row-close { grid-column: 3; grid-row: 1; align-self: start; padding-top: 0; }
    .gallery-row-spotify { grid-column: 1 / -1; grid-row: 2; }
}

/* =========================================================
   FINAL VISUAL CLEANUP — WORK / CREDIT LABELS
   ========================================================= */

/*
 * The large Work headline is already hidden.
 * Hide the remaining SELECTED WORK label + its reserved spacing.
 * This is purely visual; the work section itself remains unchanged.
 */
.work-heading {
    display: none;
}


/*
 * Keep every individual credit on one clean line.
 * Slightly reduce tracking and reclaim a little space from the
 * left padding so longer labels such as RECORDING ENGINEERING
 * do not break awkwardly.
 */
.player-credit {
    padding-left: 20px;
}

.player-credit-label {
    margin-bottom: 10px;
}

.player-credit-list {
    gap: 8px;
}

.player-credit-list span {
    white-space: nowrap;

    font-size: 10px;
    line-height: 1.35;

    letter-spacing: 1.15px;
}


/*
 * On very narrow phones we still keep the roles intact,
 * but tighten them a touch further.
 */
@media (max-width: 430px) {

    .player-credit {
        padding-left: 14px;
    }

    .player-credit-list span {
        font-size: 9px;

        letter-spacing: 0.9px;
    }

}

/* =========================================================
   MIXING SERVICES — VALUE PANEL
   Table left / description + CTA right
   ========================================================= */

/* The expanded services now contain more useful information. */
.mixing-service:hover .service-details {
    max-height: 760px;
}

/* Left = project details. Right = explanation + CTA. */
.service-details-expanded {
    grid-template-columns:
        minmax(520px, 1.08fr)
        minmax(0, 0.92fr);

    gap: 80px;
    align-items: start;
}

.service-value-panel {
    min-width: 0;
}

.service-summary {
    min-width: 0;
    padding-top: 20px;
}

.service-summary p {
    max-width: 590px;
}

.service-summary-project {
    padding-top: 20px;
}

.service-contact-link {
    display: inline-flex;
    align-items: center;

    margin-top: 12px;
    padding: 13px 18px;

    background: #111111;
    color: #ffffff;

    border: 1px solid #111111;

    text-decoration: none;

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

    letter-spacing: 1.5px;
    text-transform: uppercase;

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

.service-contact-link:hover {
    background: transparent;
    color: #111111;
    transform: translateX(3px);
}

/* Compact 2-column fact table. */
.service-facts {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    margin-bottom: 24px;

    border-top:
        1px solid rgba(0, 0, 0, 0.16);

    border-left:
        1px solid rgba(0, 0, 0, 0.16);
}

.service-fact {
    min-height: 73px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 12px 15px;

    border-right:
        1px solid rgba(0, 0, 0, 0.16);

    border-bottom:
        1px solid rgba(0, 0, 0, 0.16);
}

.service-fact-wide {
    grid-column: 1 / -1;
    min-height: 64px;
}

.service-fact-label {
    display: block;

    margin-bottom: 7px;

    color: #777777;

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

    letter-spacing: 2.2px;
    text-transform: uppercase;
}

.service-fact strong {
    color: #111111;

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

    line-height: 1.3;
    letter-spacing: 0.3px;

    text-transform: uppercase;
}

.service-includes-compact {
    padding-top: 0;
}

.service-includes-compact .service-detail-label {
    margin-bottom: 8px;
}

.service-includes-compact p {
    margin-bottom: 0;

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

/* Strong EP / album positioning line. */
.service-project-statement {
    margin-top: 22px !important;
    margin-bottom: 0 !important;

    color: #111111 !important;

    font-size: 11px !important;
    font-weight: 800;

    line-height: 1.45 !important;
    letter-spacing: 1.25px;

    text-transform: uppercase;
}


@media (max-width: 1180px) and (min-width: 801px) {

    .service-details-expanded {
        grid-template-columns:
            minmax(450px, 1.05fr)
            minmax(0, 0.95fr);

        gap: 48px;
    }

    .service-fact strong {
        font-size: 11px;
    }

}


@media (max-width: 800px) {

    .mixing-service.is-open .service-details,
    .mixing-service.is-open:hover .service-details {
        max-height: 1550px;
    }

    .service-details-expanded {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* On mobile the table naturally comes first, followed by the copy. */
    .service-summary,
    .service-summary-project {
        padding-top: 0;
    }

    .service-contact-link {
        margin-top: 8px;
    }

    .service-facts {
        grid-template-columns: 1fr 1fr;
        margin-bottom: 22px;
    }

    .service-fact {
        min-height: 72px;
        padding: 11px 12px;
    }

    .service-fact strong {
        font-size: 10px;
    }

    .service-fact-wide {
        min-height: 62px;
    }

    .service-project-statement {
        font-size: 10px !important;
    }

}


@media (max-width: 430px) {

    .service-facts {
        grid-template-columns: 1fr;
    }

    .service-fact-wide {
        grid-column: auto;
    }

}

/* =========================================================
   PAGE REFINEMENT — WORK / MIXING / PRODUCTION
   ========================================================= */


/* ---------------------------------------------------------
   WORK — ONE CONSISTENT COVER GALLERY
   --------------------------------------------------------- */

/*
 * The separate Top 3 list has been removed from the HTML.
 * The three former featured references now live at the start
 * of the same cover gallery as every other credit.
 */
.muso-block {
    margin-bottom: 58px;
}

.release-gallery {
    margin-top: 0;
    padding-top: 30px;
}


/*
 * CREDIT LABEL ON EVERY COVER
 * Static cards can use data-credit-label.
 * Dynamically generated cards already receive data-credits from script.js;
 * the exact combinations below turn those values into the same clean label.
 */
.gallery-release-card::after {
    content: attr(data-credit-label);

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 4;

    padding:
        34px
        12px
        12px;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.88) 0%,
            rgba(0, 0, 0, 0.52) 55%,
            transparent 100%
        );

    color: #ffffff;

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

    line-height: 1.45;

    letter-spacing: 1px;

    text-transform: uppercase;

    pointer-events: none;

    transition:
        opacity 0.3s ease;
}

/* Credit combinations used by the gallery cards generated in script.js. */
.gallery-release-card[data-credits="MIXING|MASTERING"]::after {
    content: "MIXING · MASTERING";
}

.gallery-release-card[data-credits="RECORDING|MIXING|MASTERING"]::after {
    content: "RECORDING · MIXING · MASTERING";
}

.gallery-release-card[data-credits="RECORDING ENGINEERING|MIXING|MASTERING"]::after {
    content: "RECORDING ENGINEERING · MIXING · MASTERING";
}

.gallery-release-card[data-credits="RECORDING|MIXING"]::after {
    content: "RECORDING · MIXING";
}

.gallery-release-card[data-credits="RECORDING ENGINEERING|MIXING"]::after {
    content: "RECORDING ENGINEERING · MIXING";
}

.gallery-release-card[data-credits="PRODUCTION"]::after {
    content: "PRODUCTION";
}

/*
 * VIEW CREDIT stays at the top on every cover so it never competes
 * with the permanently visible role line.
 */
.gallery-release-card .gallery-cover-overlay {
    top: 14px;
    bottom: auto;
}

.gallery-release-card:hover::after {
    opacity: 0.72;
}


/* ---------------------------------------------------------
   MIXING — SMALLER, CLEANER CATEGORY INTRO
   --------------------------------------------------------- */

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

.mixing-intro-compact {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 0.52fr);

    gap: 65px;

    align-items: end;

    margin-bottom: 52px;
}

.mixing-intro-compact
.mixing-headline h2 {
    max-width: 820px;

    font-size:
        clamp(
            44px,
            5.2vw,
            78px
        );

    line-height: 0.91;

    letter-spacing: -3.5px;
}

.mixing-copy-compact {
    max-width: 430px;

    padding-bottom: 3px;
}

.mixing-copy-compact > p {
    margin: 0;

    color: #8f8f8f;

    font-size: 15px;

    line-height: 1.7;
}


/* ---------------------------------------------------------
   PRODUCTION — REAL SERVICE VALUE
   --------------------------------------------------------- */

.production-section {
    padding:
        112px
        8%
        118px;

    background: #151515;

    border-top:
        1px solid
        #242424;

    border-bottom:
        1px solid
        #242424;
}

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

    margin: 0 auto;
}

.production-intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, 0.62fr);

    gap: 80px;

    align-items: end;

    margin-bottom: 58px;
}

.production-intro h2 {
    max-width: 850px;

    margin: 0;

    font-size:
        clamp(
            46px,
            5.8vw,
            88px
        );

    font-weight: 700;

    line-height: 0.9;

    letter-spacing: -4px;

    text-transform: uppercase;
}

.production-lead {
    max-width: 520px;

    margin:
        40px
        0
        0;

    color: #9a9a9a;

    font-size: 16px;

    line-height: 1.7;
}

.production-options {
    border-top:
        1px solid
        #3a3a3a;
}

.production-option {
    display: grid;

    grid-template-columns:
        58px
        minmax(0, 1fr)
        minmax(180px, 230px);

    gap: 28px;

    align-items: center;

    min-height: 190px;

    padding:
        30px
        20px;

    border-bottom:
        1px solid
        #3a3a3a;

    background: #151515;

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

.production-option:hover {
    padding-left: 30px;

    background: #ffffff;
}

.production-option-number {
    align-self: start;

    padding-top: 4px;

    color: #626262;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;

    transition:
        color 0.35s ease;
}

.production-option-copy {
    max-width: 760px;
}

.production-option-label {
    display: block;

    margin-bottom: 12px;

    color: #717171;

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

    letter-spacing: 2.6px;

    text-transform: uppercase;

    transition:
        color 0.35s ease;
}

.production-option h3 {
    max-width: 760px;

    margin:
        0
        0
        14px;

    color: #ffffff;

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

    font-weight: 700;

    line-height: 1.04;

    letter-spacing: -1.2px;

    text-transform: uppercase;

    transition:
        color 0.35s ease;
}

.production-option p {
    max-width: 680px;

    margin:
        0
        0
        16px;

    color: #999999;

    font-size: 14px;

    line-height: 1.65;

    transition:
        color 0.35s ease;
}

.production-option-meta {
    display: block;

    color: #666666;

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

    line-height: 1.55;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    transition:
        color 0.35s ease;
}

.production-option-link {
    justify-self: end;

    color: #ffffff;

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

    line-height: 1.45;

    letter-spacing: 1.35px;

    text-align: right;

    text-decoration: none;

    text-transform: uppercase;

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

.production-option-link:hover {
    transform: translateX(4px);
}

.production-option:hover
.production-option-number,
.production-option:hover
.production-option-label,
.production-option:hover
.production-option-meta {
    color: #5a5a5a;
}

.production-option:hover h3 {
    color: #111111;
}

.production-option:hover p {
    color: #555555;
}

.production-option:hover
.production-option-link {
    color: #111111;
}


/* ---------------------------------------------------------
   RESPONSIVE REFINEMENT
   --------------------------------------------------------- */

@media (max-width: 1000px) and (min-width: 801px) {

    .mixing-intro-compact {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(260px, 0.55fr);

        gap: 45px;
    }

    .production-intro {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 0.7fr);

        gap: 50px;
    }

    .production-option {
        grid-template-columns:
            48px
            minmax(0, 1fr)
            170px;

        gap: 22px;
    }

}


@media (max-width: 800px) {

    .muso-block {
        margin-bottom: 52px;
    }

    .release-gallery {
        margin-top: 0;

        padding-top: 26px;
    }

    .gallery-release-card::after {
        padding:
            28px
            9px
            9px;

        font-size: 7px;

        line-height: 1.4;

        letter-spacing: 0.7px;
    }


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

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

        gap: 24px;

        margin-bottom: 42px;
    }

    .mixing-intro-compact
    .mixing-headline h2 {
        font-size:
            clamp(
                42px,
                11.5vw,
                64px
            );

        letter-spacing: -2.8px;
    }

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

        padding-bottom: 0;
    }

    .mixing-copy-compact > p {
        font-size: 14px;
    }


    .production-section {
        padding:
            86px
            7%
            90px;
    }

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

        gap: 0;

        margin-bottom: 45px;
    }

    .production-intro h2 {
        font-size:
            clamp(
                43px,
                12vw,
                66px
            );

        letter-spacing: -3px;
    }

    .production-lead {
        margin-top: 26px;

        font-size: 14px;
    }

    .production-option {
        grid-template-columns:
            32px
            minmax(0, 1fr);

        gap:
            8px
            15px;

        min-height: 0;

        padding:
            28px
            0;
    }

    .production-option:hover {
        padding-left: 0;

        background: #151515;
    }

    .production-option-number {
        grid-column: 1;

        grid-row:
            1
            /
            span 2;
    }

    .production-option-copy {
        grid-column: 2;

        grid-row: 1;
    }

    .production-option-link {
        grid-column: 2;

        grid-row: 2;

        justify-self: start;

        margin-top: 10px;

        text-align: left;
    }

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

    .production-option:hover
    .production-option-number,
    .production-option:hover
    .production-option-label,
    .production-option:hover
    .production-option-meta {
        color: inherit;
    }

    .production-option:hover
    .production-option-number {
        color: #626262;
    }

    .production-option:hover
    .production-option-label,
    .production-option:hover
    .production-option-meta {
        color: #717171;
    }

    .production-option:hover h3 {
        color: #ffffff;
    }

    .production-option:hover p {
        color: #999999;
    }

    .production-option:hover
    .production-option-link {
        color: #ffffff;
    }

}

/* =========================================================
   MIXING SERVICES — CLICK-ONLY ACCORDION
   Final authoritative interaction rules.
   Hover never opens a service; .is-open is controlled by script.js.
   ========================================================= */

.service-top {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

/* CLOSED STATE — also while hovering */
.mixing-service::before,
.mixing-service:hover::before {
    transform: translateY(101%);
}

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

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

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

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

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

.service-details,
.mixing-service:hover .service-details {
    max-height: 0;
    opacity: 0;
    transform: translateY(15px);
}

/* OPEN STATE — only after click */
.mixing-service.is-open::before,
.mixing-service.is-open:hover::before {
    transform: translateY(0);
}

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

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

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

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

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

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

@media (max-width: 800px) {

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

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

    .mixing-service.is-open .service-details,
    .mixing-service.is-open:hover .service-details {
        max-height: 1550px;
    }
}


/* =========================================================
   MIXING SERVICES — DESKTOP HOVER FEEDBACK
   Hover changes the visual state only. Opening still requires a click.
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

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

    .mixing-service:not(.is-open):hover .service-top {
        padding-left: 30px;
    }

    .mixing-service:not(.is-open):hover .service-number {
        color: #666666;
    }

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

    .mixing-service:not(.is-open):hover .service-price {
        color: #555555;
    }

    .mixing-service:not(.is-open):hover .service-plus {
        transform: none;
    }

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

/* =========================================================
   MIXING — HOW IT WORKS
   Light editorial process / no boxes / no numbering.
   ========================================================= */

/* The light process starts directly at the top of the Mixing section. */
.mixing-section {
    padding:
        0
        8%
        120px;
}

/* Full-width light break between Work and the dark service list. */
.mixing-process-intro {
    position: relative;
    left: 50%;

    width: 100vw;
    max-width: none;

    margin-left: -50vw;
    margin-bottom: 72px;

    padding:
        104px
        max(8vw, calc((100vw - 1500px) / 2))
        94px;

    background: #f4f4f2;
    color: #111111;
}

.mixing-process-heading {
    max-width: 1500px;
    margin:
        0
        auto
        58px;
}

.mixing-process-heading .section-label {
    margin-bottom: 18px;
    color: #8a8a86;
}

.mixing-process-heading h2 {
    max-width: 1050px;
    margin: 0;

    color: #111111;

    font-size:
        clamp(
            50px,
            5.8vw,
            88px
        );

    font-weight: 800;
    line-height: 0.88;
    letter-spacing: -4.3px;
    text-transform: uppercase;
}

/* Five clean columns. Spacing, not borders, separates the steps. */
.mixing-process-list {
    max-width: 1500px;
    margin: 0 auto;

    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: clamp(28px, 3.2vw, 56px);
}

.mixing-process-step {
    min-width: 0;
    padding: 0;
}

.mixing-process-step +
.mixing-process-step {
    border: 0;
}

/* Numbering has intentionally been removed. */
.mixing-process-number {
    display: none;
}

.mixing-process-step-top {
    display: block;
    min-height: 0;
    margin-bottom: 25px;
}

.mixing-process-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: 38px;
    height: 38px;
}

.mixing-process-icon svg {
    width: 31px;
    height: 31px;

    fill: none;
    stroke: #181818;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mixing-process-content h3 {
    min-height: 50px;
    margin:
        0
        0
        14px;

    color: #111111;

    font-size:
        clamp(
            18px,
            1.45vw,
            24px
        );

    font-weight: 750;
    line-height: 1.03;
    letter-spacing: -0.65px;
    text-transform: uppercase;
}

.mixing-process-content p {
    max-width: 280px;
    margin: 0;

    color: #666663;

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

.mixing-process-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 14px;
    margin-top: 17px;
}

.mixing-process-links a {
    color: #111111;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.2px;

    text-decoration: none;
    text-transform: uppercase;

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

.mixing-process-links a:hover {
    opacity: 0.5;
    transform: translateX(3px);
}

/* Tablet: more breathing room than five compressed columns. */
@media (max-width: 1180px) and (min-width: 801px) {

    .mixing-process-intro {
        padding-top: 92px;
        padding-bottom: 82px;
    }

    .mixing-process-list {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        row-gap: 48px;
    }

    .mixing-process-content h3 {
        min-height: 0;
    }

    .mixing-process-content p {
        max-width: 340px;
    }
}

/* Mobile: same visual language, stacked and borderless. */
@media (max-width: 800px) {

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

    .mixing-process-intro {
        margin-bottom: 54px;

        padding:
            78px
            7%
            72px;
    }

    .mixing-process-heading {
        margin-bottom: 42px;
    }

    .mixing-process-heading h2 {
        font-size:
            clamp(
                44px,
                13vw,
                66px
            );

        line-height: 0.88;
        letter-spacing: -3.3px;
    }

    .mixing-process-list {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .mixing-process-step {
        display: grid;
        grid-template-columns:
            42px
            minmax(0, 1fr);

        gap: 17px;
        padding: 0;
        border: 0 !important;
    }

    .mixing-process-step-top {
        margin: 0;
    }

    .mixing-process-icon {
        width: 34px;
        height: 34px;
    }

    .mixing-process-icon svg {
        width: 28px;
        height: 28px;
    }

    .mixing-process-content h3 {
        min-height: 0;
        margin-bottom: 8px;
        font-size: 20px;
    }

    .mixing-process-content p {
        max-width: 520px;
        font-size: 13px;
        line-height: 1.65;
    }

    .mixing-process-links {
        margin-top: 12px;
    }
}

/* =========================================================
   SECTION ATMOSPHERES — FADED BACKGROUND IMAGES
   Add these files to:
   assets/images/backgrounds/work.jpg
   assets/images/backgrounds/mixing.jpg
   assets/images/backgrounds/production.jpg
   ========================================================= */

/* Keep every background visual behind the existing content. */
.work-section,
.production-section,
.mixing-process-intro {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.work-section > *,
.production-section > *,
.mixing-process-intro > * {
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------------
   WORK — dark studio atmosphere, entering from the right
   --------------------------------------------------------- */
.work-section {
    --atmosphere-opacity: 0.22;
}

.work-section::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -8%;
    right: -4%;
    bottom: -8%;
    width: min(68vw, 1080px);
    pointer-events: none;

    background-image:
        url("assets/images/backgrounds/work.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;

    filter:
        grayscale(100%)
        contrast(1.08)
        brightness(0.68);

    opacity: var(--atmosphere-opacity);

    -webkit-mask-image:
        linear-gradient(
            to left,
            #000 0%,
            #000 34%,
            rgba(0, 0, 0, 0.78) 52%,
            rgba(0, 0, 0, 0.24) 76%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 13%,
            #000 87%,
            transparent 100%
        );
    -webkit-mask-composite: source-in;

    mask-image:
        linear-gradient(
            to left,
            #000 0%,
            #000 34%,
            rgba(0, 0, 0, 0.78) 52%,
            rgba(0, 0, 0, 0.24) 76%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 13%,
            #000 87%,
            transparent 100%
        );
    mask-composite: intersect;

    transform: scale(1.025);
}

/* Give the text/gallery a little extra tonal protection. */
.work-section::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            to right,
            rgba(21, 21, 21, 0.96) 0%,
            rgba(21, 21, 21, 0.70) 28%,
            rgba(21, 21, 21, 0.18) 63%,
            transparent 100%
        );
}

/* ---------------------------------------------------------
   MIXING PROCESS — very subtle image in the light section
   --------------------------------------------------------- */
.mixing-process-intro {
    --atmosphere-opacity: 0.115;
}

.mixing-process-intro::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -5%;
    right: -2%;
    bottom: -5%;
    width: min(60vw, 980px);
    pointer-events: none;

    background-image:
        url("assets/images/backgrounds/mixing.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;

    filter:
        grayscale(100%)
        contrast(0.94)
        brightness(1.06);

    opacity: var(--atmosphere-opacity);

    -webkit-mask-image:
        linear-gradient(
            to left,
            #000 0%,
            #000 40%,
            rgba(0, 0, 0, 0.72) 58%,
            rgba(0, 0, 0, 0.20) 80%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 11%,
            #000 89%,
            transparent 100%
        );
    -webkit-mask-composite: source-in;

    mask-image:
        linear-gradient(
            to left,
            #000 0%,
            #000 40%,
            rgba(0, 0, 0, 0.72) 58%,
            rgba(0, 0, 0, 0.20) 80%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 11%,
            #000 89%,
            transparent 100%
        );
    mask-composite: intersect;

    transform: scale(1.025);
}

/* The process content stays crisp on top of the image. */
.mixing-process-heading,
.mixing-process-list {
    position: relative;
    z-index: 2;
}

/* ---------------------------------------------------------
   PRODUCTION — darker, more emotional image from the left
   --------------------------------------------------------- */
.production-section {
    --atmosphere-opacity: 0.24;
}

.production-section::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -8%;
    left: -5%;
    bottom: -8%;
    width: min(64vw, 1040px);
    pointer-events: none;

    background-image:
        url("assets/images/backgrounds/production.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center left;

    filter:
        grayscale(100%)
        contrast(1.10)
        brightness(0.62);

    opacity: var(--atmosphere-opacity);

    -webkit-mask-image:
        linear-gradient(
            to right,
            #000 0%,
            #000 34%,
            rgba(0, 0, 0, 0.76) 52%,
            rgba(0, 0, 0, 0.18) 78%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 12%,
            #000 88%,
            transparent 100%
        );
    -webkit-mask-composite: source-in;

    mask-image:
        linear-gradient(
            to right,
            #000 0%,
            #000 34%,
            rgba(0, 0, 0, 0.76) 52%,
            rgba(0, 0, 0, 0.18) 78%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 12%,
            #000 88%,
            transparent 100%
        );
    mask-composite: intersect;

    transform: scale(1.03);
}

.production-section::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            to left,
            rgba(21, 21, 21, 0.98) 0%,
            rgba(21, 21, 21, 0.72) 32%,
            rgba(21, 21, 21, 0.12) 68%,
            transparent 100%
        );
}

/* ---------------------------------------------------------
   Subtle reveal on browsers that support scroll timelines.
   No JavaScript needed; unsupported browsers simply keep the
   static faded image.
   --------------------------------------------------------- */
@keyframes brayzAtmosphereReveal {
    from {
        opacity: 0;
        transform:
            translateY(24px)
            scale(1.055);
    }

    to {
        opacity: var(--atmosphere-opacity);
        transform:
            translateY(0)
            scale(1.025);
    }
}

@supports (animation-timeline: view()) {
    .work-section::before,
    .mixing-process-intro::before,
    .production-section::before {
        animation-name: brayzAtmosphereReveal;
        animation-duration: 1ms;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: view();
        animation-range:
            entry 0%
            cover 34%;
    }
}

/* ---------------------------------------------------------
   Responsive atmosphere adjustments
   --------------------------------------------------------- */
@media (max-width: 1000px) {
    .work-section::before {
        width: 82vw;
        right: -12%;
        opacity: 0.17;
    }

    .mixing-process-intro::before {
        width: 76vw;
        right: -14%;
        opacity: 0.085;
    }

    .production-section::before {
        width: 78vw;
        left: -18%;
        opacity: 0.19;
    }
}

@media (max-width: 800px) {
    /* Mobile gets a much quieter version so text stays dominant. */
    .work-section::before {
        top: 0;
        right: -34%;
        bottom: auto;
        width: 118vw;
        height: 62%;
        opacity: 0.11;
    }

    .work-section::after {
        background:
            linear-gradient(
                to bottom,
                rgba(21, 21, 21, 0.20) 0%,
                rgba(21, 21, 21, 0.72) 42%,
                #151515 78%,
                #151515 100%
            );
    }

    .mixing-process-intro::before {
        top: 0;
        right: -36%;
        bottom: auto;
        width: 124vw;
        height: 58%;
        opacity: 0.06;
    }

    .production-section::before {
        top: 0;
        left: -42%;
        bottom: auto;
        width: 126vw;
        height: 62%;
        opacity: 0.12;
    }

    .production-section::after {
        background:
            linear-gradient(
                to bottom,
                rgba(21, 21, 21, 0.12) 0%,
                rgba(21, 21, 21, 0.72) 42%,
                #151515 80%,
                #151515 100%
            );
    }
}

/* =========================================================
   MIXING — FULL LIGHT SECTION + ATMOSPHERE THROUGH SERVICES
   Final authoritative styling for the entire Mixing section.
   ========================================================= */

.mixing-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding:
        0
        8%
        120px;
    background: #f4f4f2;
    color: #111111;
}

.mixing-section::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -3%;
    right: -4%;
    bottom: -3%;
    width: min(68vw, 1180px);
    pointer-events: none;
    background-image:
        url("assets/images/backgrounds/mixing.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;
    filter:
        grayscale(100%)
        contrast(0.96)
        brightness(1.04);
    opacity: 0.095;
    -webkit-mask-image:
        linear-gradient(
            to left,
            #000 0%,
            #000 35%,
            rgba(0, 0, 0, 0.70) 56%,
            rgba(0, 0, 0, 0.18) 80%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 7%,
            #000 93%,
            transparent 100%
        );
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(
            to left,
            #000 0%,
            #000 35%,
            rgba(0, 0, 0, 0.70) 56%,
            rgba(0, 0, 0, 0.18) 80%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 7%,
            #000 93%,
            transparent 100%
        );
    mask-composite: intersect;
    transform: scale(1.025);
}

.mixing-section > * {
    position: relative;
    z-index: 1;
}

/* The background image now belongs to the whole section, not only the process intro. */
.mixing-process-intro {
    background: transparent;
    color: #111111;
    isolation: auto;
    overflow: visible;
}

.mixing-process-intro::before {
    content: none !important;
    display: none !important;
}

.mixing-process-heading .section-label {
    color: #858582;
}

.mixing-process-heading h2,
.mixing-process-content h3 {
    color: #111111;
}

.mixing-process-icon svg {
    stroke: #181818;
}

.mixing-process-content p {
    color: #62625f;
}

.mixing-process-links a {
    color: #111111;
}

/* ---------------------------------------------------------
   Services — light at rest, dark grey on hover / open
   --------------------------------------------------------- */

.mixing-services {
    position: relative;
    z-index: 2;
    max-width: 1500px;
    margin: 0 auto;
    border-top:
        1px solid
        rgba(17, 17, 17, 0.17);
}

.mixing-service {
    position: relative;
    overflow: hidden;
    border-bottom:
        1px solid
        rgba(17, 17, 17, 0.17);
    background:
        rgba(244, 244, 242, 0.82);
}

.mixing-service::before,
.mixing-service:hover::before {
    background: #242424;
    transform: translateY(101%);
}

.service-number {
    color: #8a8a86;
}

.service-name,
.service-plus {
    color: #111111;
}

.service-price {
    color: #686865;
}

/* Desktop hover: visual feedback only, still click-to-open. */
@media (hover: hover) and (pointer: fine) {
    .mixing-service:not(.is-open):hover::before {
        transform: translateY(0);
    }

    .mixing-service:not(.is-open):hover .service-top {
        padding-left: 30px;
    }

    .mixing-service:not(.is-open):hover .service-number {
        color: #a7a7a7;
    }

    .mixing-service:not(.is-open):hover .service-name,
    .mixing-service:not(.is-open):hover .service-plus {
        color: #ffffff;
    }

    .mixing-service:not(.is-open):hover .service-price {
        color: #c5c5c5;
    }

    .mixing-service:not(.is-open):hover .service-plus {
        transform: none;
    }

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

/* Open state: slightly deeper grey than hover and stays open after click. */
.mixing-service.is-open::before,
.mixing-service.is-open:hover::before {
    background: #1b1b1b;
    transform: translateY(0);
}

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

.mixing-service.is-open .service-number,
.mixing-service.is-open:hover .service-number {
    color: #9a9a9a;
}

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

.mixing-service.is-open .service-price,
.mixing-service.is-open:hover .service-price {
    color: #c3c3c3;
}

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

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

/* Details switch to a light-on-dark system while a service is open. */
.mixing-service.is-open .service-detail-label,
.mixing-service.is-open:hover .service-detail-label,
.mixing-service.is-open .service-fact-label,
.mixing-service.is-open:hover .service-fact-label {
    color: #9d9d9d;
}

.mixing-service.is-open .service-facts,
.mixing-service.is-open:hover .service-facts {
    border-top-color: rgba(255, 255, 255, 0.16);
    border-left-color: rgba(255, 255, 255, 0.16);
}

.mixing-service.is-open .service-fact,
.mixing-service.is-open:hover .service-fact {
    border-right-color: rgba(255, 255, 255, 0.16);
    border-bottom-color: rgba(255, 255, 255, 0.16);
}

.mixing-service.is-open .service-fact strong,
.mixing-service.is-open:hover .service-fact strong,
.mixing-service.is-open .service-includes p,
.mixing-service.is-open:hover .service-includes p,
.mixing-service.is-open .service-summary p,
.mixing-service.is-open:hover .service-summary p,
.mixing-service.is-open .service-project-statement,
.mixing-service.is-open:hover .service-project-statement {
    color: #f3f3f3 !important;
}

.mixing-service.is-open .service-summary .service-note,
.mixing-service.is-open:hover .service-summary .service-note {
    color: #b8b8b8 !important;
}

.mixing-service.is-open .service-contact-link,
.mixing-service.is-open:hover .service-contact-link {
    background: #ffffff;
    color: #111111;
    border-color: #ffffff;
}

.mixing-service.is-open .service-contact-link:hover {
    background: transparent;
    color: #ffffff;
    border-color: #ffffff;
}

/* ---------------------------------------------------------
   Responsive atmosphere + service states
   --------------------------------------------------------- */

@media (max-width: 1000px) {
    .mixing-section::before {
        width: 82vw;
        right: -16%;
        opacity: 0.075;
    }
}

@media (max-width: 800px) {
    .mixing-section {
        padding:
            0
            7%
            92px;
    }

    .mixing-section::before {
        top: 0;
        right: -38%;
        bottom: auto;
        width: 128vw;
        height: 76%;
        opacity: 0.05;
        background-position: center right;
        -webkit-mask-image:
            linear-gradient(
                to left,
                #000 0%,
                rgba(0, 0, 0, 0.72) 44%,
                rgba(0, 0, 0, 0.16) 78%,
                transparent 100%
            ),
            linear-gradient(
                to bottom,
                #000 0%,
                #000 72%,
                transparent 100%
            );
        mask-image:
            linear-gradient(
                to left,
                #000 0%,
                rgba(0, 0, 0, 0.72) 44%,
                rgba(0, 0, 0, 0.16) 78%,
                transparent 100%
            ),
            linear-gradient(
                to bottom,
                #000 0%,
                #000 72%,
                transparent 100%
            );
    }

    .mixing-service,
    .mixing-service:hover {
        background:
            rgba(244, 244, 242, 0.88);
    }

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

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

    .mixing-service:hover .service-name,
    .mixing-service:hover .service-plus {
        color: #111111;
    }

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

    .mixing-service.is-open::before,
    .mixing-service.is-open:hover::before {
        background: #1b1b1b;
        transform: translateY(0);
    }

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

    .mixing-service.is-open .service-number,
    .mixing-service.is-open:hover .service-number {
        color: #9a9a9a;
    }

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

    .mixing-service.is-open .service-price,
    .mixing-service.is-open:hover .service-price {
        color: #c3c3c3;
    }

    .mixing-service.is-open .service-details,
    .mixing-service.is-open:hover .service-details {
        max-height: 1550px;
    }
}

/* =========================================================
   MIXING — STRONGER BACKGROUND ATMOSPHERE
   Final authoritative visibility override.
   Keeps the existing full-light Mixing section and services.
   ========================================================= */

.mixing-section::before {
    top: -2%;
    right: -2%;
    bottom: -2%;
    width: min(62vw, 1040px);

    background-position: center right;

    filter:
        grayscale(35%)
        contrast(1.04)
        brightness(0.92);

    opacity: 0.19;

    -webkit-mask-image:
        linear-gradient(
            to left,
            #000 0%,
            #000 30%,
            rgba(0, 0, 0, 0.88) 52%,
            rgba(0, 0, 0, 0.42) 74%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 10%,
            #000 92%,
            transparent 100%
        );
    -webkit-mask-composite: source-in;

    mask-image:
        linear-gradient(
            to left,
            #000 0%,
            #000 30%,
            rgba(0, 0, 0, 0.88) 52%,
            rgba(0, 0, 0, 0.42) 74%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 10%,
            #000 92%,
            transparent 100%
        );
    mask-composite: intersect;

    transform: scale(1.01);
}

@media (max-width: 1000px) {
    .mixing-section::before {
        width: 78vw;
        right: -10%;
        opacity: 0.14;
    }
}

@media (max-width: 800px) {
    .mixing-section::before {
        top: 0;
        right: -26%;
        bottom: auto;
        width: 118vw;
        height: 74%;
        opacity: 0.10;
        background-position: center right;

        -webkit-mask-image:
            linear-gradient(
                to left,
                #000 0%,
                rgba(0, 0, 0, 0.86) 42%,
                rgba(0, 0, 0, 0.30) 74%,
                transparent 100%
            ),
            linear-gradient(
                to bottom,
                #000 0%,
                #000 72%,
                transparent 100%
            );
        -webkit-mask-composite: source-in;

        mask-image:
            linear-gradient(
                to left,
                #000 0%,
                rgba(0, 0, 0, 0.86) 42%,
                rgba(0, 0, 0, 0.30) 74%,
                transparent 100%
            ),
            linear-gradient(
                to bottom,
                #000 0%,
                #000 72%,
                transparent 100%
            );
        mask-composite: intersect;
    }
}

/* =========================================================
   FINAL REFINEMENT — MIXING IMAGE + COMPACT BEATS INTRO
   ========================================================= */

/* MIXING:
   Make the atmosphere visibly present on the light background.
   Multiply keeps the bright parts naturally integrated into the
   off-white while the actual image detail comes through clearly.
*/
.mixing-section::before {
    top: -2%;
    right: -1%;
    bottom: -2%;
    width: min(68vw, 1160px);

    background-position: center right;

    filter:
        grayscale(20%)
        contrast(1.14)
        brightness(0.84);

    mix-blend-mode: multiply;
    opacity: 0.31;

    -webkit-mask-image:
        linear-gradient(
            to left,
            #000 0%,
            #000 38%,
            rgba(0, 0, 0, 0.92) 55%,
            rgba(0, 0, 0, 0.55) 76%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 7%,
            #000 95%,
            transparent 100%
        );
    -webkit-mask-composite: source-in;

    mask-image:
        linear-gradient(
            to left,
            #000 0%,
            #000 38%,
            rgba(0, 0, 0, 0.92) 55%,
            rgba(0, 0, 0, 0.55) 76%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 7%,
            #000 95%,
            transparent 100%
        );
    mask-composite: intersect;

    transform: scale(1.01);
}

/* Let the same image remain visible behind the closed service rows. */
.mixing-service {
    background: rgba(244, 244, 242, 0.58);
}

/* BEATS / PRODUCTION:
   Much more compact intro. Label on top, headline left,
   description aligned beside it instead of dropping below.
*/
.production-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(340px, 0.62fr);
    grid-template-areas:
        "label label"
        "title lead";

    column-gap: 80px;
    row-gap: 10px;

    align-items: end;

    margin-bottom: 42px;
}

.production-intro > .section-label {
    grid-area: label;
    margin-bottom: 6px;
}

.production-intro h2 {
    grid-area: title;
}

.production-lead {
    grid-area: lead;

    margin:
        0
        0
        4px;

    align-self: end;
}

@media (max-width: 1000px) and (min-width: 801px) {
    .mixing-section::before {
        width: 82vw;
        right: -10%;
        opacity: 0.24;
    }

    .mixing-service {
        background: rgba(244, 244, 242, 0.64);
    }

    .production-intro {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 0.72fr);

        column-gap: 50px;
        margin-bottom: 38px;
    }
}

@media (max-width: 800px) {
    .mixing-section::before {
        top: 0;
        right: -24%;
        bottom: auto;

        width: 122vw;
        height: 82%;

        background-position: center right;

        opacity: 0.16;

        -webkit-mask-image:
            linear-gradient(
                to left,
                #000 0%,
                rgba(0, 0, 0, 0.90) 44%,
                rgba(0, 0, 0, 0.42) 76%,
                transparent 100%
            ),
            linear-gradient(
                to bottom,
                #000 0%,
                #000 76%,
                transparent 100%
            );
        -webkit-mask-composite: source-in;

        mask-image:
            linear-gradient(
                to left,
                #000 0%,
                rgba(0, 0, 0, 0.90) 44%,
                rgba(0, 0, 0, 0.42) 76%,
                transparent 100%
            ),
            linear-gradient(
                to bottom,
                #000 0%,
                #000 76%,
                transparent 100%
            );
        mask-composite: intersect;
    }

    .mixing-service,
    .mixing-service:hover {
        background: rgba(244, 244, 242, 0.68);
    }

    .production-intro {
        grid-template-columns: 1fr;
        grid-template-areas:
            "label"
            "title"
            "lead";

        gap: 0;
        margin-bottom: 38px;
    }

    .production-intro > .section-label {
        margin-bottom: 18px;
    }

    .production-lead {
        margin-top: 18px;
        margin-bottom: 0;
    }
}



/* =========================================================
   FINAL REFINEMENT — COMPACT BEATS INTRO
   Keeps the accepted visual order:
   PRODUCTION left / NEED BEATS? right / description left.
   Only removes the excessive vertical empty space.
   ========================================================= */

.production-section {
    padding:
        74px
        8%
        88px;
}

.production-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, 0.64fr);

    gap: 72px;
    align-items: center;

    margin-bottom: 46px;
}

.production-intro-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 58px;

    min-width: 0;
}

.production-intro-copy .section-label {
    margin: 0;
}

.production-intro h2 {
    margin: 0;
    align-self: center;
}

.production-lead {
    max-width: 520px;
    margin: 0;
}

@media (max-width: 1000px) and (min-width: 801px) {
    .production-section {
        padding:
            68px
            8%
            82px;
    }

    .production-intro {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 0.68fr);

        gap: 48px;
        margin-bottom: 40px;
    }

    .production-intro-copy {
        gap: 44px;
    }
}

@media (max-width: 800px) {
    .production-section {
        padding:
            70px
            7%
            82px;
    }

    .production-intro {
        grid-template-columns: 1fr;
        gap: 28px;
        align-items: start;
        margin-bottom: 38px;
    }

    .production-intro-copy {
        gap: 24px;
    }

    .production-intro h2 {
        grid-row: 1;
        align-self: start;
        margin-top: 34px;
    }

    .production-intro-copy {
        grid-row: 2;
    }

    .production-intro-copy .section-label {
        display: none;
    }
}


/* =========================================================
   FINAL AUTHORITATIVE FIX — PRODUCTION INTRO
   Preserve the accepted composition:
   PRODUCTION top-left / NEED BEATS? top-right / description below-left.
   Only compress the vertical spacing.
   ========================================================= */

.production-section {
    padding:
        74px
        8%
        88px;
}

.production-intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, 0.64fr);

    grid-template-areas:
        "label title"
        "lead  title";

    column-gap: 72px;
    row-gap: 42px;

    align-items: start;

    margin-bottom: 46px;
}

.production-intro > .section-label {
    grid-area: label;

    margin: 0;
}

.production-intro h2 {
    grid-area: title;

    margin: 0;

    align-self: start;
}

.production-lead {
    grid-area: lead;

    max-width: 520px;

    margin: 0;
}

/* Old temporary wrapper is no longer used. */
.production-intro-copy {
    display: contents;
}

@media (max-width: 1000px) and (min-width: 801px) {

    .production-section {
        padding:
            68px
            8%
            82px;
    }

    .production-intro {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 0.68fr);

        column-gap: 48px;
        row-gap: 34px;

        margin-bottom: 40px;
    }
}

@media (max-width: 800px) {

    .production-section {
        padding:
            70px
            7%
            82px;
    }

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

        grid-template-areas:
            "label"
            "title"
            "lead";

        gap: 0;

        margin-bottom: 38px;
    }

    .production-intro > .section-label {
        display: block;

        margin-bottom: 18px;
    }

    .production-intro h2 {
        margin: 0;
    }

    .production-lead {
        margin-top: 22px;
    }
}


/* =========================================================
   STUDIO — CLEAN 50 / 50 GALLERY + EQUIPMENT
   Full-bleed gallery on the left, black information panel on the right.
   No thumbnails, no dots. Navigation uses only the two arrows + counter.
   ========================================================= */

.studio-section {
    position: relative;

    width: 100%;

    background: #000000;
    color: #ffffff;

    overflow: hidden;
}

.studio-shell {
    width: 100%;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    align-items: stretch;
}


/* ---------------------------------------------------------
   GALLERY
   --------------------------------------------------------- */

.studio-gallery {
    position: relative;

    min-width: 0;

    background: #101010;
}

.studio-gallery-stage {
    position: relative;

    width: 100%;
    min-height: clamp(720px, 76vw, 980px);

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

    overflow: hidden;

    background: #101010;
}

.studio-gallery-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    padding:
        clamp(28px, 3.5vw, 64px)
        clamp(20px, 2.8vw, 50px);

    object-fit: contain;
    object-position: center;

    opacity: 0;

    transform: scale(0.992);

    transition:
        opacity 0.34s ease,
        transform 0.52s cubic-bezier(.4, 0, .2, 1);

    pointer-events: none;
}

.studio-gallery-image.is-active {
    opacity: 1;

    transform: scale(1);
}


/* Navigation intentionally stays extremely minimal. */

.studio-gallery-arrow {
    position: absolute;

    top: 50%;

    z-index: 3;

    width: 52px;
    height: 52px;

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

    padding: 0;

    border: 0;

    background: rgba(0, 0, 0, 0.28);
    color: rgba(255, 255, 255, 0.70);

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

    font-family: inherit;
    font-size: 25px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    transform: translateY(-50%);

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

.studio-gallery-arrow-left {
    left: 22px;
}

.studio-gallery-arrow-right {
    right: 22px;
}

.studio-gallery-arrow:hover {
    background: rgba(0, 0, 0, 0.60);
    color: #ffffff;
}

.studio-gallery-arrow-left:hover {
    transform:
        translateY(-50%)
        translateX(-3px);
}

.studio-gallery-arrow-right:hover {
    transform:
        translateY(-50%)
        translateX(3px);
}

.studio-gallery-counter {
    position: absolute;

    left: 28px;
    bottom: 24px;

    z-index: 3;

    color: rgba(255, 255, 255, 0.62);

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

    letter-spacing: 2px;

    pointer-events: none;
}


/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

.studio-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(82px, 8vw, 140px)
        clamp(52px, 6.2vw, 112px);

    background: #050505;
}

.studio-heading {
    max-width: 660px;
}

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

.studio-heading h2 {
    margin:
        0
        0
        34px;

    color: #ffffff;

    font-size:
        clamp(
            58px,
            6vw,
            104px
        );

    font-weight: 800;

    line-height: 0.86;

    letter-spacing: -4.5px;

    text-transform: uppercase;
}

.studio-intro {
    max-width: 610px;

    margin: 0;

    color: #9b9b9b;

    font-size: 15px;

    line-height: 1.75;
}


/* ---------------------------------------------------------
   EQUIPMENT
   --------------------------------------------------------- */

.studio-equipment {
    width: 100%;
    max-width: 720px;

    margin-top: 58px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.15);
}

.studio-equipment-row {
    display: grid;

    grid-template-columns:
        minmax(145px, 0.42fr)
        minmax(0, 1fr);

    gap: 28px;

    align-items: start;

    padding:
        15px
        0;

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

.studio-equipment-row span {
    color: #666666;

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

    line-height: 1.45;

    letter-spacing: 2px;

    text-transform: uppercase;
}

.studio-equipment-row strong {
    color: #e7e7e7;

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

    line-height: 1.55;

    letter-spacing: 0.15px;
}

.studio-equipment-row-software strong {
    color: #b9b9b9;

    font-weight: 500;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1100px) and (min-width: 801px) {

    .studio-content {
        padding:
            76px
            48px;
    }

    .studio-gallery-stage {
        min-height: 760px;
    }

    .studio-equipment-row {
        grid-template-columns:
            128px
            minmax(0, 1fr);

        gap: 22px;
    }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 800px) {

    .studio-shell {
        grid-template-columns: 1fr;
    }

    .studio-gallery {
        order: 1;
    }

    .studio-content {
        order: 2;

        padding:
            76px
            7%
            82px;
    }

    .studio-gallery-stage {
        min-height: min(132vw, 680px);
    }

    .studio-gallery-image {
        padding:
            24px
            16px;
    }

    .studio-gallery-arrow {
        width: 44px;
        height: 44px;

        font-size: 21px;
    }

    .studio-gallery-arrow-left {
        left: 12px;
    }

    .studio-gallery-arrow-right {
        right: 12px;
    }

    .studio-gallery-counter {
        left: 18px;
        bottom: 16px;
    }

    .studio-heading h2 {
        margin-bottom: 26px;

        font-size:
            clamp(
                50px,
                15vw,
                78px
            );

        letter-spacing: -3.5px;
    }

    .studio-intro {
        font-size: 14px;
    }

    .studio-equipment {
        margin-top: 42px;
    }

    .studio-equipment-row {
        grid-template-columns:
            112px
            minmax(0, 1fr);

        gap: 18px;

        padding:
            14px
            0;
    }

    .studio-equipment-row strong {
        font-size: 11px;
    }
}


@media (max-width: 430px) {

    .studio-equipment-row {
        grid-template-columns: 1fr;

        gap: 6px;
    }
}

/* =========================================================
   FINAL AUTHORITATIVE REFINEMENT — STUDIO
   Keeps the existing 50 / 50 concept.
   Tightens spacing, aligns image + copy at the top,
   removes button-like arrow boxes and keeps the gallery clean.
   ========================================================= */

.studio-section {
    background: #050505;
}

.studio-shell {
    align-items: start;
}


/* ---------------------------------------------------------
   GALLERY — top aligned, no large dead space
   --------------------------------------------------------- */

.studio-gallery {
    align-self: start;

    background: #101010;
}

.studio-gallery-stage {
    width: 100%;
    min-height: 0;

    aspect-ratio: 4 / 3;

    align-items: flex-start;

    background: #101010;
}

.studio-gallery-image {
    display: block;

    padding: 0;

    object-fit: contain;
    object-position: center top;

    background: #101010;
}


/* Minimal arrows: no visible button box. */

.studio-gallery-arrow {
    width: 54px;
    height: 74px;

    background: transparent;
    color: rgba(255, 255, 255, 0.56);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    font-size: 31px;

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

.studio-gallery-arrow-left {
    left: 18px;
}

.studio-gallery-arrow-right {
    right: 18px;
}

.studio-gallery-arrow:hover {
    background: transparent;
    color: #ffffff;
}

.studio-gallery-counter {
    left: 24px;
    bottom: 20px;

    color: rgba(255, 255, 255, 0.50);
}


/* ---------------------------------------------------------
   COPY — more editorial, less oversized
   --------------------------------------------------------- */

.studio-content {
    justify-content: flex-start;

    /* Desktop: text column starts on exactly the same top edge as the image. */
    padding:
        0
        clamp(48px, 5.5vw, 96px)
        clamp(52px, 4.8vw, 82px);

    background: #050505;
}

.studio-heading {
    max-width: 650px;
}

.studio-heading .section-label {
    display: block;

    margin:
        0
        0
        20px;

    color: #777777;
}

.studio-heading h2 {
    margin:
        0
        0
        28px;

    font-size:
        clamp(
            52px,
            5.15vw,
            88px
        );

    line-height: 0.88;

    letter-spacing: -4px;
}

.studio-intro {
    max-width: 600px;

    color: #969696;

    font-size: 14px;
    line-height: 1.72;
}


/* ---------------------------------------------------------
   EQUIPMENT — same visual language, slightly tighter
   --------------------------------------------------------- */

.studio-equipment {
    max-width: 720px;

    margin-top: 40px;
}

.studio-equipment-row {
    grid-template-columns:
        minmax(150px, 0.42fr)
        minmax(0, 1fr);

    gap: 26px;

    padding:
        11px
        0;
}

.studio-equipment-row span {
    font-size: 8px;
}

.studio-equipment-row strong {
    font-size: 11px;
    line-height: 1.5;
}

.studio-equipment-row-software strong {
    line-height: 1.55;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1100px) and (min-width: 801px) {

    .studio-content {
        padding:
            0
            42px
            58px;
    }

    .studio-gallery-stage {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .studio-heading h2 {
        font-size:
            clamp(
                48px,
                5.4vw,
                72px
            );
    }

    .studio-equipment {
        margin-top: 34px;
    }

    .studio-equipment-row {
        grid-template-columns:
            126px
            minmax(0, 1fr);

        gap: 20px;

        padding:
            10px
            0;
    }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 800px) {

    .studio-gallery-stage {
        min-height: 0;

        aspect-ratio: 4 / 3;
    }

    .studio-gallery-image {
        padding: 0;
    }

    .studio-gallery-arrow {
        width: 44px;
        height: 64px;

        font-size: 25px;
    }

    .studio-gallery-arrow-left {
        left: 8px;
    }

    .studio-gallery-arrow-right {
        right: 8px;
    }

    .studio-gallery-counter {
        left: 16px;
        bottom: 14px;
    }

    .studio-content {
        padding:
            64px
            7%
            74px;
    }

    .studio-heading .section-label {
        margin-bottom: 16px;
    }

    .studio-heading h2 {
        margin-bottom: 24px;

        font-size:
            clamp(
                48px,
                14vw,
                70px
            );

        letter-spacing: -3.2px;
    }

    .studio-intro {
        font-size: 14px;
    }

    .studio-equipment {
        margin-top: 36px;
    }

    .studio-equipment-row {
        padding:
            12px
            0;
    }

    .studio-equipment-row strong {
        font-size: 11px;
    }
}

/* =========================================================
   FINAL FIX — STUDIO LABEL CLIPPING
   Gives the small STUDIO label enough internal top room
   without materially moving the HOMEBASE headline.
   ========================================================= */

.studio-heading .section-label {
    padding-top: 11px;
    margin-bottom: 9px;
    line-height: 1;
}

@media (max-width: 800px) {
    .studio-heading .section-label {
        padding-top: 0;
        margin-bottom: 16px;
    }
}

/* =========================================================
   FINAL AUTHORITATIVE FIX — STUDIO TOP SPACING
   The right black panel still starts exactly level with the image.
   Only the content inside the panel gets intentional breathing room.
   ========================================================= */

.studio-content {
    padding-top: 28px;
}

.studio-heading .section-label {
    padding-top: 0;
    margin-bottom: 14px;
    line-height: 1.2;
}

@media (max-width: 1100px) and (min-width: 801px) {
    .studio-content {
        padding-top: 24px;
    }
}

@media (max-width: 800px) {
    .studio-content {
        padding-top: 64px;
    }

    .studio-heading .section-label {
        margin-bottom: 16px;
    }
}

/* =========================================================
   FINAL AUTHORITATIVE STUDIO GALLERY
   Fixed 4:3 preview frame + full-size viewer.
   The section no longer changes height when images have
   different aspect ratios.
   ========================================================= */


/* ---------------------------------------------------------
   FIXED PREVIEW FRAME
   --------------------------------------------------------- */

.studio-gallery-stage {
    width: 100%;
    min-height: 0 !important;

    aspect-ratio: 4 / 3 !important;

    position: relative;
    overflow: hidden;

    background: #0b0b0b;
}


/*
 * Every preview occupies the exact same 4:3 frame.
 * The first image is a photographic hero and may crop slightly
 * so the preview feels full-bleed.
 */
.studio-gallery-image {
    inset: 0;

    width: 100%;
    height: 100%;

    padding: 0;

    object-position: center;

    background: #0b0b0b;

    cursor: zoom-in;

    pointer-events: none;
}

.studio-gallery-image.is-active {
    pointer-events: auto;
}


/* Main studio photograph: fill the preview frame. */
.studio-gallery-image:nth-of-type(1) {
    object-fit: cover;
    object-position: center center;
}


/*
 * Measurement screenshots: always show the complete graph.
 * The inset spacing makes the different screenshot ratio
 * look intentional inside the permanent gallery frame.
 */
.studio-gallery-image:nth-of-type(2),
.studio-gallery-image:nth-of-type(3) {
    object-fit: contain;

    padding:
        clamp(22px, 2.2vw, 40px)
        clamp(24px, 2.6vw, 46px);

    background: #0b0b0b;
}


/* ---------------------------------------------------------
   CLEAN PREVIEW NAVIGATION
   --------------------------------------------------------- */

.studio-gallery-arrow {
    z-index: 5;

    background: transparent !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    color: rgba(255, 255, 255, 0.62);
}

.studio-gallery-arrow:hover {
    background: transparent !important;

    color: #ffffff;
}

.studio-gallery-counter {
    z-index: 5;
}


/*
 * Small hover cue only. No thumbnail strip, dots or button.
 */
.studio-gallery-stage::after {
    content: "VIEW FULL SIZE ↗";

    position: absolute;

    right: 24px;
    bottom: 20px;

    z-index: 4;

    color: rgba(255, 255, 255, 0.72);

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

    letter-spacing: 1.7px;

    opacity: 0;

    transform: translateY(5px);

    pointer-events: none;

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

.studio-gallery-stage:hover::after {
    opacity: 1;

    transform: translateY(0);
}


/* ---------------------------------------------------------
   FULL SIZE VIEWER
   --------------------------------------------------------- */

body.studio-lightbox-open {
    overflow: hidden;
}

.studio-lightbox {
    position: fixed;

    inset: 0;

    z-index: 5000;

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

    padding:
        46px
        54px;

    background: rgba(0, 0, 0, 0.94);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.28s ease,
        visibility 0.28s ease;
}

.studio-lightbox.is-open {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}

.studio-lightbox-inner {
    position: relative;

    width: 100%;
    height: 100%;

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

.studio-lightbox-image {
    display: block;

    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;

    box-shadow:
        0
        22px
        70px
        rgba(0, 0, 0, 0.38);

    transform: scale(0.985);

    transition:
        transform 0.32s cubic-bezier(.4, 0, .2, 1);
}

.studio-lightbox.is-open
.studio-lightbox-image {
    transform: scale(1);
}

.studio-lightbox-close {
    position: absolute;

    top: 24px;
    right: 28px;

    z-index: 2;

    width: 46px;
    height: 46px;

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

    padding: 0;

    border: 0;

    background: transparent;
    color: rgba(255, 255, 255, 0.72);

    font-family: inherit;
    font-size: 34px;
    font-weight: 200;
    line-height: 1;

    cursor: pointer;

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

.studio-lightbox-close:hover {
    color: #ffffff;

    transform: rotate(5deg);
}

.studio-lightbox-note {
    position: absolute;

    left: 0;
    bottom: -28px;

    color: rgba(255, 255, 255, 0.42);

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

    letter-spacing: 1.7px;
}


/* ---------------------------------------------------------
   TABLET / MOBILE
   --------------------------------------------------------- */

@media (max-width: 1100px) and (min-width: 801px) {

    .studio-gallery-stage {
        aspect-ratio: 4 / 3 !important;
    }

    .studio-gallery-image:nth-of-type(2),
    .studio-gallery-image:nth-of-type(3) {
        padding:
            22px
            26px;
    }
}


@media (max-width: 800px) {

    .studio-gallery-stage {
        aspect-ratio: 4 / 3 !important;
    }

    .studio-gallery-image:nth-of-type(2),
    .studio-gallery-image:nth-of-type(3) {
        padding:
            16px
            14px;
    }

    .studio-gallery-stage::after {
        right: 16px;
        bottom: 14px;

        font-size: 7px;
    }

    .studio-lightbox {
        padding:
            58px
            14px
            44px;
    }

    .studio-lightbox-close {
        top: 10px;
        right: 10px;
    }

    .studio-lightbox-note {
        bottom: -24px;
    }
}

/* =========================================================
   FINAL AUTHORITATIVE FIX — CENTER STUDIO GALLERY
   The right HOMEBASE panel defines the row height.
   The fixed 4:3 gallery frame is vertically centered inside
   the full-height left column.
   ========================================================= */

@media (min-width: 801px) {

    .studio-shell {
        align-items: stretch;
    }

    .studio-gallery {
        align-self: stretch;

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

        min-height: 100%;

        background: #0b0b0b;
    }

    .studio-gallery-stage {
        flex: 0 0 auto;

        width: 100%;

        margin:
            auto
            0;
    }
}


/* Mobile remains stacked and does not use vertical centering. */
@media (max-width: 800px) {

    .studio-gallery {
        display: block;

        min-height: 0;
    }

    .studio-gallery-stage {
        margin: 0;
    }
}


/* =========================================================
   FINAL POLISH — HERO / SERVICES / ABOUT / STUDIO / CONTACT
   These are narrow visual overrides only.
   ========================================================= */


/* ---------------------------------------------------------
   HERO BUTTONS
   Both CTAs now use the same default state:
   transparent at rest, white only on the hovered button.
   --------------------------------------------------------- */

.hero .button,
.hero .button-main {
    background: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.78);
}

.hero .button:hover,
.hero .button-main:hover {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
}


/* ---------------------------------------------------------
   MIXING SERVICES — REMOVE NUMBERS
   --------------------------------------------------------- */

.mixing-service .service-number {
    display: none !important;
}

.service-top {
    grid-template-columns:
        minmax(300px, 1fr)
        150px
        45px;
}

.service-details-inner {
    margin-left: 0;
}


/* ---------------------------------------------------------
   BEAT SERVICES — REMOVE NUMBERS
   --------------------------------------------------------- */

.production-option-number {
    display: none !important;
}

.production-option {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(180px, 230px);
}


/* ---------------------------------------------------------
   ABOUT — SECOND PARAGRAPH
   Same typography as the paragraph above, only white + bold.
   --------------------------------------------------------- */

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

    color: #ffffff;

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

    line-height: 1.75;

    letter-spacing: 0;
}


/* ---------------------------------------------------------
   STUDIO — SOFTWARE ROW
   Match the same typography as all other equipment values.
   --------------------------------------------------------- */

.studio-equipment-row-software strong {
    color: #e7e7e7;

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

    line-height: 1.5;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1000px) and (min-width: 801px) {

    .production-option {
        grid-template-columns:
            minmax(0, 1fr)
            170px;
    }
}


@media (max-width: 800px) {

    .service-top {
        grid-template-columns:
            minmax(0, 1fr)
            28px;

        grid-template-rows:
            auto
            auto;
    }

    .service-name {
        grid-column: 1;
        grid-row: 1;

        padding-right: 10px;
    }

    .service-price {
        grid-column: 1;
        grid-row: 2;

        justify-self: start;
    }

    .service-plus {
        grid-column: 2;

        grid-row:
            1
            /
            span 2;
    }

    .service-details-inner {
        margin-left: 0;

        padding-left: 5px;
    }


    .production-option {
        grid-template-columns: 1fr;
    }

    .production-option-copy {
        grid-column: 1;
        grid-row: 1;
    }

    .production-option-link {
        grid-column: 1;
        grid-row: 2;
    }


    .about-text {
        font-size: 14px;
        line-height: 1.7;
    }


    .contact-form-visual {
        width: min(100%, 520px);

        margin-top: 28px;
    }
}

/* =========================================================
   FINAL CONTACT — DARK FORM LEFT / IMAGE RIGHT
   Form stays functional. Image gets the headline overlay.
   ========================================================= */

.contact-dark-split-section {
    padding: 0 !important;
    margin: 0 !important;

    border-top: 0 !important;

    background: #080808 !important;
    color: #ffffff;

    overflow: hidden;
}

.contact-dark-split-shell {
    position: relative;

    width: 100%;

    display: grid;
    grid-template-columns:
        minmax(520px, 0.92fr)
        minmax(0, 1.08fr);

    align-items: stretch;

    min-height: 860px;

    background: #080808;
}


/* ---------------------------------------------------------
   LEFT: BLACK CONTACT FORM
   --------------------------------------------------------- */

.contact-dark-form {
    position: relative;

    z-index: 3;

    min-width: 0;

    display: flex;
    align-items: center;

    padding:
        clamp(82px, 7vw, 118px)
        clamp(52px, 5.6vw, 96px);

    background: #080808;
}

.contact-dark-form::after {
    content: "";

    position: absolute;

    top: 0;
    right: -150px;
    bottom: 0;

    width: 150px;

    z-index: 4;

    pointer-events: none;

    background:
        linear-gradient(
            to right,
            #080808 0%,
            rgba(8, 8, 8, 0.96) 18%,
            rgba(8, 8, 8, 0.78) 45%,
            rgba(8, 8, 8, 0.36) 72%,
            transparent 100%
        );
}

.contact-dark-form .brayz-contact-form {
    position: relative;

    z-index: 5;

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

    margin: 0 auto;
}

.contact-dark-form .contact-form-row {
    gap: 36px;
}

.contact-dark-form .contact-field {
    border-bottom-color:
        rgba(255, 255, 255, 0.18);
}

.contact-dark-form .contact-field:focus-within {
    border-bottom-color:
        rgba(255, 255, 255, 0.86);
}

.contact-dark-form .contact-field label {
    color: #858585;
}

.contact-dark-form .contact-field label span {
    color: #666666;
}

.contact-dark-form .contact-field input,
.contact-dark-form .contact-field textarea {
    color: #ffffff;
}

.contact-dark-form .contact-field input::placeholder,
.contact-dark-form .contact-field textarea::placeholder {
    color: #777777;
}

.contact-dark-form .contact-status {
    color: #7f7f7f;
}

.contact-dark-form .contact-status.is-success {
    color: #ffffff;
}

.contact-dark-form .contact-status.is-error {
    color: #a8a8a8;
}

.contact-dark-form .contact-submit {
    border-color: rgba(255, 255, 255, 0.82);

    background: transparent;
    color: #ffffff;
}

.contact-dark-form .contact-submit:hover {
    border-color: #ffffff;

    background: #ffffff;
    color: #000000;
}

.contact-dark-form .contact-security {
    color: #ffffff;
}


/* ---------------------------------------------------------
   RIGHT: PHOTO
   --------------------------------------------------------- */

.contact-dark-visual {
    position: relative;

    min-width: 0;
    min-height: 860px;

    overflow: hidden;

    background: #080808;
}

.contact-dark-image {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
       The standing person is on the right side of the photo.
       This keeps him visible while still leaving room for the headline.
    */
    object-position: 57% center;

    filter:
        saturate(0.94)
        contrast(1.03)
        brightness(0.86);

    transform: scale(1.012);
}

.contact-dark-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            to right,
            rgba(8, 8, 8, 0.94) 0%,
            rgba(8, 8, 8, 0.70) 15%,
            rgba(8, 8, 8, 0.28) 35%,
            rgba(8, 8, 8, 0.04) 57%,
            rgba(8, 8, 8, 0.08) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(8, 8, 8, 0.16) 0%,
            rgba(8, 8, 8, 0.02) 42%,
            rgba(8, 8, 8, 0.12) 100%
        ),
        radial-gradient(
            ellipse 52% 34% at 79% 20%,
            rgba(0, 0, 0, 0.42) 0%,
            rgba(0, 0, 0, 0.16) 52%,
            transparent 100%
        );
}


/* ---------------------------------------------------------
   COPY OVER THE PHOTO
   One-line headline positioned above the standing person.
   --------------------------------------------------------- */

.contact-dark-copy {
    position: absolute;

    z-index: 3;

    top: clamp(86px, 9vw, 146px);
    right: clamp(46px, 5.6vw, 100px);

    width: min(86%, 760px);

    color: #ffffff;

    text-align: right;
}

.contact-dark-copy .section-label {
    margin:
        0
        0
        18px;

    color: rgba(255, 255, 255, 0.62);

    text-align: right;
}

.contact-dark-copy h2 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            58px,
            5.7vw,
            104px
        );

    font-weight: 800;

    line-height: 0.88;

    letter-spacing: -4.2px;

    white-space: nowrap;

    text-transform: uppercase;

    text-shadow:
        0
        2px
        18px
        rgba(0, 0, 0, 0.26);
}

.contact-dark-copy .contact-form-intro {
    max-width: 520px;

    margin:
        24px
        0
        0
        auto;

    color: rgba(255, 255, 255, 0.88);

    font-size: 16px;
    line-height: 1.6;

    text-align: right;

    text-shadow:
        0
        1px
        10px
        rgba(0, 0, 0, 0.24);
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1180px) and (min-width: 801px) {

    .contact-dark-split-shell {
        grid-template-columns:
            minmax(450px, 0.95fr)
            minmax(0, 1.05fr);

        min-height: 760px;
    }

    .contact-dark-form {
        padding:
            68px
            42px;
    }

    .contact-dark-visual {
        min-height: 760px;
    }

    .contact-dark-copy {
        top: 72px;
        right: 42px;

        width: 88%;
    }

    .contact-dark-copy h2 {
        font-size:
            clamp(
                52px,
                5.5vw,
                78px
            );

        letter-spacing: -3px;
    }

    .contact-dark-copy .contact-form-intro {
        max-width: 430px;

        font-size: 14px;
    }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 800px) {

    .contact-dark-split-shell {
        grid-template-columns: 1fr;

        min-height: 0;
    }

    .contact-dark-form {
        order: 2;

        padding:
            68px
            7%
            78px;
    }

    .contact-dark-form::after {
        content: none;
    }

    .contact-dark-visual {
        order: 1;

        min-height: 720px;
    }

    .contact-dark-image {
        /*
           Keep the standing person clearly visible on mobile.
           The crop is intentionally biased to the right.
        */
        object-position: 64% center;
    }

    .contact-dark-overlay {
        background:
            linear-gradient(
                to bottom,
                rgba(8, 8, 8, 0.12) 0%,
                rgba(8, 8, 8, 0.03) 34%,
                rgba(8, 8, 8, 0.18) 72%,
                rgba(8, 8, 8, 0.30) 100%
            ),
            linear-gradient(
                to right,
                rgba(8, 8, 8, 0.18) 0%,
                rgba(8, 8, 8, 0.03) 44%,
                rgba(8, 8, 8, 0.12) 100%
            ),
            radial-gradient(
                ellipse 72% 34% at 76% 21%,
                rgba(0, 0, 0, 0.34) 0%,
                rgba(0, 0, 0, 0.12) 54%,
                transparent 100%
            );
    }

    .contact-dark-copy {
        /*
           Mobile-specific placement:
           the headline sits in the upper-right image area,
           directly above the standing person's head.
        */
        top: 14%;
        right: 6%;
        left: 5%;
        bottom: auto;

        width: auto;

        text-align: right;
    }

    .contact-dark-copy .section-label {
        margin-bottom: 10px;

        text-align: right;
    }

    .contact-dark-copy h2 {
        font-size:
            clamp(
                42px,
                11vw,
                60px
            );

        line-height: 0.92;

        letter-spacing: -2.4px;

        white-space: nowrap;

        text-align: right;
    }

    .contact-dark-copy .contact-form-intro {
        max-width: 330px;

        margin:
            16px
            0
            0
            auto;

        font-size: 13px;
        line-height: 1.5;

        text-align: right;
    }
}

/* =========================================================
   FINAL HOMEBASE — LIGHT EDITORIAL PANEL
   Gallery stays dark. The HOMEBASE information panel switches
   to the same warm off-white language used elsewhere on the site.
   ========================================================= */

.studio-section {
    background: #f4f4f2;
}


/* Keep the gallery intentionally dark. */

.studio-gallery {
    background: #0b0b0b;
}

.studio-gallery-stage {
    background: #0b0b0b;
}


/* ---------------------------------------------------------
   LIGHT HOMEBASE PANEL
   --------------------------------------------------------- */

.studio-content {
    background: #f4f4f2;
    color: #111111;
}

.studio-heading .section-label {
    color: #7c7c78;
}

.studio-heading h2 {
    color: #111111;
}

.studio-intro {
    color: #666663;
}


/* ---------------------------------------------------------
   EQUIPMENT — DARK TYPE ON LIGHT BACKGROUND
   --------------------------------------------------------- */

.studio-equipment {
    border-top:
        1px solid
        rgba(17, 17, 17, 0.16);
}

.studio-equipment-row {
    border-bottom:
        1px solid
        rgba(17, 17, 17, 0.12);
}

.studio-equipment-row span {
    color: #858581;
}

.studio-equipment-row strong,
.studio-equipment-row-software strong {
    color: #171717;

    font-weight: 600;
}


/* ---------------------------------------------------------
   MOBILE
   The gallery remains the dark visual chapter;
   the information panel below it becomes the light chapter.
   --------------------------------------------------------- */

@media (max-width: 800px) {

    .studio-section {
        background: #f4f4f2;
    }

    .studio-gallery {
        background: #0b0b0b;
    }

    .studio-content {
        background: #f4f4f2;
    }
}

/* =========================================================
   FINAL MICRO POLISH — ABOUT / CONTACT
   ========================================================= */


/* ---------------------------------------------------------
   ABOUT
   Keep the same body-copy scale as the paragraph above.
   600 is intentionally used instead of 700:
   still clearly stronger/white, but no longer reads like
   a second headline.
   --------------------------------------------------------- */

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

    color: #f4f4f4;

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

    line-height: 1.75;

    letter-spacing: 0;
}

@media (max-width: 800px) {
    .about-text {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.7;
    }
}


/* ---------------------------------------------------------
   CONTACT — CENTER SEND INQUIRY ON DESKTOP
   Status can remain left while the button is truly centered.
   --------------------------------------------------------- */

@media (min-width: 801px) {

    .contact-dark-form .contact-submit-row {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto
            minmax(0, 1fr);

        align-items: center;

        width: 100%;
    }

    .contact-dark-form .contact-status {
        grid-column: 1;

        justify-self: start;
    }

    .contact-dark-form .contact-submit {
        grid-column: 2;

        justify-self: center;
    }
}


/* ---------------------------------------------------------
   CONTACT — MOBILE HEADLINE OVER THE STANDING PERSON
   The old supporting-text position was visually correct.
   Moving the whole copy group down by roughly that amount
   puts LET'S WORK. where the supporting line previously sat.
   --------------------------------------------------------- */

@media (max-width: 800px) {

    /*
       Keep the overall copy group at the original mobile position.
       Only the headline is pushed down so LET'S WORK. occupies
       the visual area where the supporting text previously sat.
    */
    .contact-dark-copy {
        top: 14%;
    }

    .contact-dark-copy h2 {
        margin-top: 58px;
    }

    .contact-dark-copy .contact-form-intro {
        margin-top: 14px;
    }
}

/* =========================================================
   FINAL NAV BRAND LOCKUP
   Logo + vertical rule + established BRAYZ naming variants.
   ========================================================= */

.brand-lockup {
    display: inline-flex;
    align-items: center;

    gap: 14px;

    color: #ffffff;
    text-decoration: none;

    flex-shrink: 0;
}

.brand-lockup-mark {
    display: block;

    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    object-fit: contain;
    object-position: center;
}

.brand-lockup-divider {
    display: block;

    width: 1px;
    height: 38px;

    flex: 0 0 1px;

    background: rgba(255, 255, 255, 0.30);
}

.brand-lockup-names {
    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 2px;

    min-width: 0;
}

.brand-lockup-names span {
    display: block;

    color: rgba(255, 255, 255, 0.72);

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

    line-height: 1.18;

    letter-spacing: 1.35px;

    text-transform: lowercase;

    white-space: nowrap;
}

.brand-lockup-names span:first-child {
    color: #ffffff;

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

    letter-spacing: 1.65px;
}

.brand-lockup:hover .brand-lockup-mark,
.brand-lockup:hover .brand-lockup-divider,
.brand-lockup:hover .brand-lockup-names {
    opacity: 0.78;
}

.brand-lockup-mark,
.brand-lockup-divider,
.brand-lockup-names {
    transition: opacity 0.25s ease;
}


/* ---------------------------------------------------------
   MOBILE
   Keep the lockup compact enough for the phone header.
   --------------------------------------------------------- */

@media (max-width: 800px) {

    .brand-lockup {
        gap: 10px;
    }

    .brand-lockup-mark {
        width: 36px;
        height: 36px;

        flex-basis: 36px;
    }

    .brand-lockup-divider {
        height: 32px;
    }

    .brand-lockup-names {
        gap: 1px;
    }

    .brand-lockup-names span {
        font-size: 7px;
        line-height: 1.18;
        letter-spacing: 0.9px;
    }

    .brand-lockup-names span:first-child {
        font-size: 9px;
        letter-spacing: 1.15px;
    }
}



/* =========================================================
   FOOTER LEGAL LINKS — restored after Beats header update
   ========================================================= */

.site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.site-footer p {
    margin: 0;
    color: #777777;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.footer-legal-links {
    display: flex;
    align-items: center;
    gap: 22px;
}

.footer-legal-links a {
    color: #777777;
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.footer-legal-links a:hover {
    color: #ffffff;
}

/* Beats page keeps the same understated footer treatment. */
.beats-page .site-footer {
    padding: 40px 8%;
    background: #1c1c21;
    border-top: none;
    color: #666666;
}

@media (max-width: 800px) {
    .site-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .footer-legal-links {
        gap: 16px;
        flex-wrap: wrap;
    }
}


/* =========================================================
   BRAYZ — BEATS LICENSING INFO
   Three-column license card layout
   ========================================================= */

:root {
    --brayz-accent: #d84a43;
    --brayz-accent-soft: rgba(216, 74, 67, 0.12);
}

.licensing-section {
    padding: 125px 5% 135px;
    background: #111113;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.licensing-shell {
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
}

.licensing-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 500px);
    column-gap: 90px;
    row-gap: 20px;
    align-items: end;
    margin-bottom: 58px;
}

.licensing-heading .section-label {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.licensing-heading h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(52px, 7vw, 105px);
    font-weight: 800;
    line-height: 0.86;
    letter-spacing: -5px;
    text-transform: uppercase;
}

.licensing-intro {
    margin: 0 0 7px;
    color: #929296;
    font-size: 16px;
    line-height: 1.7;
}

.licensing-intro strong {
    color: #d6d6d8;
    font-weight: 600;
}

/* Desktop: licenses next to each other */
.license-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.license-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #171719;
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.license-card-featured {
    border-color: rgba(216, 74, 67, 0.42);
}

.license-card-featured::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--brayz-accent);
}

.license-card-head {
    display: block;
    padding: 32px 30px 26px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.license-kicker {
    margin: 0 0 10px;
    color: #6f6f73;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}

.license-card h3 {
    margin: 0;
    color: #f4f4f5;
    font-size: clamp(25px, 2.1vw, 34px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1px;
}

.license-price {
    margin-top: 16px;
    color: var(--brayz-accent);
    font-size: clamp(32px, 2.6vw, 42px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1.2px;
    white-space: nowrap;
}

.license-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 12px 0 8px;
}

.license-feature {
    min-height: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
    padding: 16px 30px;
}

.license-feature svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: #8c8c90;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.license-feature span {
    color: #a5a5a8;
    font-size: 14px;
    line-height: 1.45;
}

.license-credit {
    margin: auto 30px 0;
    padding: 22px 0 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: #8f8f93;
    font-size: 13px;
    line-height: 1.5;
}

.license-credit strong {
    color: #eeeeef;
    font-weight: 600;
}

.license-bulk {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding: 18px 30px 20px;
    background: var(--brayz-accent-soft);
    border-top: 1px solid rgba(216, 74, 67, 0.20);
}

.license-bulk span {
    color: var(--brayz-accent);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2.2px;
}

.license-bulk strong {
    color: #f4f4f5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.9px;
}

@media (max-width: 1100px) {
    .licensing-heading {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .licensing-heading .section-label {
        grid-column: auto;
    }

    .licensing-intro {
        max-width: 620px;
    }

    .license-list {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .license-card {
        max-width: none;
    }

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

@media (max-width: 700px) {
    .licensing-section {
        padding: 90px 7% 95px;
    }

    .licensing-heading {
        margin-bottom: 50px;
    }

    .licensing-heading h2 {
        font-size: clamp(48px, 15vw, 72px);
        letter-spacing: -3.5px;
    }

    .license-card-head {
        padding: 28px 24px 24px;
    }

    .license-features {
        grid-template-columns: 1fr;
        padding: 4px 0;
    }

    .license-feature {
        padding: 17px 24px;
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 14px;
    }

    .license-feature svg {
        width: 25px;
        height: 25px;
    }

    .license-credit {
        margin: auto 24px 0;
    }

    .license-bulk {
        padding: 18px 24px 20px;
    }
}


/* =========================================================
   LICENSING — INCLUDED COPY
   ========================================================= */

.license-included {
    margin: 15px 0 0;
    color: #9b9b9f;
    font-size: 13px;
    line-height: 1.55;
}

.license-included span {
    color: #d9d9db;
    font-weight: 700;
}

.license-bundle-note {
    margin: 12px 0 0;
    color: #a7a7aa;
    font-size: 13px;
    line-height: 1.6;
}

.license-bundle-note a {
    color: #ededee;
    text-decoration-color: rgba(255, 255, 255, 0.28);
    text-underline-offset: 3px;
}

.license-bundle-note a:hover {
    opacity: 0.72;
}

/* =========================================================
   BEATS — PURCHASE FLOW / HOW IT WORKS
   Compact 2-column version
   ========================================================= */

.beat-purchase-section {
    padding: 120px 8% 130px;
    background: #f2f2ef;
    color: #111111;
}

.beat-purchase-shell {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(380px, 0.9fr) minmax(520px, 1.1fr);
    column-gap: clamp(70px, 8vw, 145px);
    row-gap: 78px;
    align-items: start;
}

.beat-purchase-heading {
    display: block;
    margin: 0;
}

.beat-purchase-heading .section-label {
    margin: 0 0 36px;
    color: #8a8a86;
}

.beat-purchase-heading h2 {
    margin: 0;
    max-width: 600px;
    color: #111111;
    font-size: clamp(58px, 7vw, 108px);
    font-weight: 800;
    line-height: 0.84;
    letter-spacing: -5px;
    text-transform: uppercase;
}

.beat-purchase-steps {
    position: relative;
    border-top: 1px solid #cfcfca;
}

.beat-purchase-step {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 18px;
    padding: 19px 0 20px;
    border-bottom: 1px solid #cfcfca;
}

.beat-purchase-step::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: var(--step-progress, 0%);
    background: var(--brayz-accent);
}

.beat-purchase-step:nth-child(1) { --step-progress: 12%; }
.beat-purchase-step:nth-child(2) { --step-progress: 30%; }
.beat-purchase-step:nth-child(3) { --step-progress: 50%; }
.beat-purchase-step:nth-child(4) { --step-progress: 72%; }
.beat-purchase-step:nth-child(5) { --step-progress: 100%; }

.beat-purchase-number {
    padding-top: 2px;
    color: #969691;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.beat-purchase-step h3 {
    margin: 0 0 5px;
    color: #111111;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.2px;
}

.beat-purchase-step p {
    max-width: 660px;
    margin: 0;
    color: #6c6c68;
    font-size: 13px;
    line-height: 1.5;
}

.beat-purchase-step p strong {
    color: #111111;
    font-weight: 750;
}


.mixing-bundle-aftercare {
    grid-column: 1 / -1;
    margin-top: 0;
    padding: 48px 52px;
    background: #111113;
    color: #ffffff;
}

.mixing-bundle-label {
    margin: 0 0 20px;
    color: var(--brayz-accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.8px;
}

.mixing-bundle-aftercare h3 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(30px, 3.2vw, 48px);
    font-weight: 750;
    line-height: 1;
    letter-spacing: -1.6px;
}

.mixing-bundle-aftercare > p:not(.mixing-bundle-label) {
    max-width: 720px;
    margin: 20px 0 0;
    color: #9d9da1;
    font-size: 15px;
    line-height: 1.7;
}

.mixing-bundle-contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin-top: 28px;
}

.mixing-bundle-contact-links a {
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-decoration: none;
    text-transform: uppercase;
}

.mixing-bundle-contact-links a:hover {
    opacity: 0.62;
}

@media (max-width: 1050px) {
    .beat-purchase-shell {
        grid-template-columns: 1fr;
        row-gap: 58px;
    }

    .beat-purchase-heading h2 {
        max-width: 760px;
    }

    .mixing-bundle-aftercare {
        grid-column: auto;
    }
}

@media (max-width: 700px) {
    .beat-purchase-section {
        padding: 90px 7% 95px;
    }

    .beat-purchase-shell {
        row-gap: 46px;
    }

    .beat-purchase-heading .section-label {
        margin-bottom: 24px;
    }

    .beat-purchase-heading h2 {
        font-size: clamp(48px, 15vw, 72px);
        letter-spacing: -3.5px;
    }

    .beat-purchase-step {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 12px;
        padding: 18px 0;
    }

    .beat-purchase-step h3 {
        font-size: 14px;
    }

    .beat-purchase-step p {
        font-size: 13px;
    }

    .beat-purchase-step-highlight::before {
        width: 34px;
    }

    .mixing-bundle-aftercare {
        padding: 34px 28px;
    }

    .mixing-bundle-contact-links {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* =========================================================
   BRAYZ — BEATS INTRO / QUICK LINKS
   Slim SEO intro above BeatStars
   ========================================================= */

.beats-intro {
    padding: 132px 8% 34px;
    background: #1b1b1b;
    border-bottom: 1px solid var(--brayz-accent, #d84a43);
}

.beats-intro-shell {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 60px;
    align-items: end;
}

.beats-intro-copy .section-label {
    margin: 0 0 12px;
    color: #8f8f8b;
}

.beats-intro-copy h1 {
    margin: 0;
    color: #f2f2ef;
    font-size: clamp(34px, 4.3vw, 66px);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -2.7px;
    text-transform: uppercase;
}

.beats-intro-copy > p:last-child {
    max-width: 690px;
    margin: 14px 0 0;
    color: #a9a9a5;
    font-size: 14px;
    line-height: 1.55;
}

.beats-intro-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.beats-intro-actions a {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #f0f0ed;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.beats-intro-actions a:hover {
    border-color: #f2f2ef;
    background: #f2f2ef;
    color: #111111;
}

.beats-intro-actions span {
    color: var(--brayz-accent, #d84a43);
    font-size: 12px;
}

/* The intro now owns the fixed-header spacing. */
.beats-page .beatstore-page {
    min-height: 0;
    padding-top: 0;
}

.beats-page .beatstore-page::before {
    display: none;
}

@media (max-width: 900px) {
    .beats-intro-shell {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .beats-intro-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .beats-intro {
        padding: 112px 7% 28px;
    }

    .beats-intro-copy h1 {
        font-size: clamp(38px, 12vw, 58px);
        letter-spacing: -2.3px;
    }

    .beats-intro-copy > p:last-child {
        font-size: 13px;
    }

    .beats-intro-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .beats-intro-actions a {
        justify-content: space-between;
        width: 100%;
    }
}


/* =========================================================
   BRAYZ — LANGUAGE SWITCH + DIRECT CONTACT
   ========================================================= */

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

.language-switch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    color: #777777;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.25px;
    line-height: 1;
    text-transform: uppercase;
}

.language-switch a,
.language-switch .is-current {
    color: inherit;
    text-decoration: none;
}

.language-switch a {
    transition: color 0.2s ease, opacity 0.2s ease;
}

.language-switch a:hover {
    color: #ffffff;
    opacity: 1;
    transform: none;
}

.language-switch .is-current {
    color: #ffffff;
}

.contact-direct-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    margin-top: 26px;
}

.contact-direct-link {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "label arrow"
        "number arrow";
    align-items: center;
    gap: 7px 14px;
    min-width: 0;
    padding: 16px 17px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.018);
    color: #ffffff;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.contact-direct-link:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.045);
    transform: translateY(-1px);
}

.contact-direct-label {
    grid-area: label;
    color: #777777;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.35px;
    text-transform: uppercase;
}

.contact-direct-link strong {
    grid-area: number;
    overflow: hidden;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-direct-arrow {
    grid-area: arrow;
    color: #777777;
    font-size: 15px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.contact-direct-link:hover .contact-direct-arrow {
    color: #ffffff;
    transform: translate(2px, -2px);
}

@media (max-width: 800px) {
    .nav-right {
        gap: 10px;
    }

    .language-switch {
        gap: 5px;
        padding: 7px 9px;
        font-size: 9px;
        letter-spacing: 1px;
    }

    .contact-direct-links {
        grid-template-columns: 1fr;
        gap: 9px;
        margin-top: 22px;
    }
}

@media (max-width: 430px) {
    .beats-page .nav-custom-beat {
        padding: 9px 10px;
        font-size: 9px;
        letter-spacing: 1px;
    }

    .beats-page .brand-lockup-names {
        display: none;
    }

    .beats-page .brand-lockup-divider {
        display: none;
    }
}


/* =========================================================
   BRAYZ — DIRECT CONTACT / EDITORIAL LINK ROW (FINAL)
   ========================================================= */
.contact-direct-links {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(34px, 4vw, 64px);
    width: 100%;
    margin-top: 30px;
    padding-top: 0;
    border-top: 0;
}

.contact-direct-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.2px;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.2s ease, transform 0.2s ease;
}

.contact-direct-link:hover {
    border-color: transparent;
    background: transparent;
    color: #ffffff;
    transform: none;
}

.contact-direct-phone {
    white-space: nowrap;
}

.contact-direct-dash {
    color: rgba(255, 255, 255, 0.40);
    font-weight: 400;
    letter-spacing: 0;
}

.contact-direct-whatsapp {
    white-space: nowrap;
}

.contact-direct-arrow {
    color: currentColor;
    font-size: 14px;
    transition: transform 0.2s ease;
}

.contact-direct-link:hover .contact-direct-arrow {
    color: currentColor;
    transform: translate(2px, -2px);
}

@media (max-width: 800px) {
    .contact-direct-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 18px 30px;
        margin-top: 26px;
        padding-top: 20px;
    }

    .contact-direct-link {
        font-size: 10px;
        letter-spacing: 1.7px;
    }
}

/* =========================================================
   BRAYZ — DIRECT CONTACT / CLEAN EDITORIAL ROW (V3)
   No divider, no leading dash, three independent links.
   ========================================================= */
.contact-direct-links {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 18px clamp(34px, 4.2vw, 68px);
    width: 100%;
    margin-top: 34px;
    padding-top: 0;
    border-top: 0;
}

.contact-direct-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.68);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.15px;
    line-height: 1.25;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.contact-direct-link:hover {
    border: 0;
    background: transparent;
    color: #ffffff;
    transform: none;
}

.contact-direct-phone {
    letter-spacing: 2.4px;
}

.contact-direct-arrow {
    color: currentColor;
    font-size: 15px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.contact-direct-link:hover .contact-direct-arrow {
    color: currentColor;
    transform: translate(2px, -2px);
}

/* The old decorative dash must never render. */
.contact-direct-dash {
    display: none !important;
}

@media (max-width: 800px) {
    .contact-direct-links {
        gap: 18px 28px;
        margin-top: 28px;
        padding-top: 0;
        border-top: 0;
    }

    .contact-direct-link {
        font-size: 10px;
        letter-spacing: 1.65px;
    }

    .contact-direct-phone {
        letter-spacing: 1.85px;
    }
}

@media (max-width: 520px) {
    .contact-direct-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}


/* =========================================================
   BRAYZ — DIRECT CONTACT / DEFINITIVE CLEAN ROW (V4)
   No divider above the links. No leading dash. Three separate links.
   ========================================================= */
.contact-dark-form .contact-direct-links {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 18px clamp(44px, 5vw, 82px) !important;
    width: 100% !important;
    margin-top: 34px !important;
    padding-top: 0 !important;
    border-top: none !important;
    border-bottom: none !important;
    background: transparent !important;
}

.contact-dark-form .contact-direct-links::before,
.contact-dark-form .contact-direct-links::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
}

.contact-dark-form .contact-direct-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.70) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 2.15px !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transition: color 0.2s ease !important;
}

.contact-dark-form .contact-direct-link::before,
.contact-dark-form .contact-direct-link::after {
    border: 0 !important;
    box-shadow: none !important;
}

.contact-dark-form .contact-direct-link:hover {
    color: #ffffff !important;
    border: 0 !important;
    background: transparent !important;
    transform: none !important;
}

.contact-dark-form .contact-direct-phone {
    letter-spacing: 2.4px !important;
}

.contact-dark-form .contact-direct-arrow {
    color: currentColor !important;
    font-size: 15px !important;
    line-height: 1 !important;
    transition: transform 0.2s ease !important;
}

.contact-dark-form .contact-direct-link:hover .contact-direct-arrow {
    transform: translate(2px, -2px) !important;
}

.contact-direct-dash {
    display: none !important;
}

@media (max-width: 800px) {
    .contact-dark-form .contact-direct-links {
        gap: 18px 30px !important;
        margin-top: 28px !important;
        padding-top: 0 !important;
        border-top: none !important;
    }

    .contact-dark-form .contact-direct-link {
        font-size: 10px !important;
        letter-spacing: 1.65px !important;
    }

    .contact-dark-form .contact-direct-phone {
        letter-spacing: 1.85px !important;
    }
}

@media (max-width: 520px) {
    .contact-dark-form .contact-direct-links {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }
}

/* =========================================================
   BRAYZ — DIRECT CONTACT / V5 POSITIONING
   Keep the submit button visually attached to the form while
   placing the secondary contact links lower toward the footer.
   ========================================================= */
@media (min-width: 801px) {
    .contact-dark-form .contact-direct-links {
        transform: translateY(62px) !important;
    }
}

@media (max-width: 800px) {
    .contact-dark-form .contact-direct-links {
        transform: none !important;
        margin-top: 42px !important;
    }
}

/* =========================================================
   BRAYZ — CONTACT V6 / VERTICAL BALANCE
   Move the submit action and the secondary contact row upward
   by the same visual amount. This keeps their mutual spacing
   unchanged while centering the whole action area between the
   end of the form and the footer.
   ========================================================= */
@media (min-width: 801px) {
    .contact-dark-form .contact-submit-row {
        transform: translateY(-60px) !important;
    }

    .contact-dark-form .contact-direct-links {
        /* V5 used +62px. Moving this row up by the same 60px
           as the submit row preserves the exact visual gap. */
        transform: translateY(2px) !important;
    }
}


/* =========================================================
   BRAYZ — CONTACT V10 / MOBILE FORM → SUBMIT PROXIMITY
   On mobile the Turnstile placeholder, empty status line and
   stacked submit-row spacing created too much visual distance
   between the message field and the submit action.
   Desktop remains completely unchanged.
   ========================================================= */
@media (max-width: 800px) {
    .contact-dark-form .contact-security {
        min-height: 0 !important;
        margin-top: 18px !important;
    }

    .contact-dark-form .contact-submit-row {
        margin-top: 18px !important;
        gap: 12px !important;
        transform: none !important;
    }

    .contact-dark-form .contact-status:empty {
        display: none !important;
        min-height: 0 !important;
        margin: 0 !important;
    }
}

/* =========================================================
   BRAYZ — FINAL POLISH V11
   ========================================================= */

/* German display headlines: safer vertical rhythm. */
html[lang="de"] .about-heading h2 {
    line-height: 0.94 !important;
    letter-spacing: -3.2px !important;
}

html[lang="de"] .beats-intro-copy h1 {
    line-height: 0.98 !important;
    letter-spacing: -2.2px !important;
}

/* Compact direct choices in the first Mixing step. */
.mixing-process-links {
    gap: 10px 14px !important;
}
.mixing-process-links a {
    white-space: nowrap;
}

/* Mixing-service hover: in-place color transition, no bottom-up wipe. */
.mixing-service::before,
.mixing-service:hover::before,
.mixing-service.is-open::before,
.mixing-service.is-open:hover::before {
    content: none !important;
    display: none !important;
}

.mixing-service {
    transition: background 0.32s ease !important;
}

@media (hover: hover) and (pointer: fine) {
    .mixing-service:not(.is-open):hover {
        background: #242424 !important;
    }

    .mixing-service:not(.is-open):hover .service-top {
        padding-left: 30px;
    }

    .mixing-service:not(.is-open):hover .service-name,
    .mixing-service:not(.is-open):hover .service-plus {
        color: #ffffff !important;
    }

    .mixing-service:not(.is-open):hover .service-price {
        color: #c5c5c5 !important;
    }
}

.mixing-service.is-open,
.mixing-service.is-open:hover {
    background: #1b1b1b !important;
}

/* Direct contact: phone should read as strongly as WhatsApp / Instagram. */
.contact-dark-form .contact-direct-phone {
    font-size: 13px !important;
    letter-spacing: 2.15px !important;
}

@media (max-width: 800px) {
    .contact-dark-form .contact-direct-phone {
        font-size: 12px !important;
        letter-spacing: 1.75px !important;
    }
}

/* Production / Need Beats: balance the copy vertically and trim dead space. */
@media (min-width: 801px) {
    .production-section {
        padding: 64px 8% 74px !important;
    }

    .production-intro {
        grid-template-rows: auto 1fr;
        row-gap: 26px !important;
        margin-bottom: 36px !important;
        align-items: stretch !important;
    }

    .production-intro h2,
    .production-lead {
        align-self: center !important;
    }

    .production-option {
        min-height: 164px !important;
        padding: 24px 20px !important;
    }
}

@media (max-width: 800px) {
    .production-section {
        padding: 64px 7% 72px !important;
    }

    .production-intro {
        margin-bottom: 32px !important;
    }

    .production-option {
        padding: 24px 0 !important;
    }
}

/* Contact image copy: one clean right edge. */
.contact-dark-copy,
.contact-dark-copy .section-label,
.contact-dark-copy h2,
.contact-dark-copy .contact-form-intro {
    text-align: right !important;
}

.contact-dark-copy h2,
.contact-dark-copy .section-label {
    width: 100%;
}

/* Contact: modest desktop compression; accepted bottom spacing stays intact. */
@media (min-width: 801px) {
    .contact-dark-split-shell,
    .contact-dark-visual {
        min-height: 760px !important;
    }

    .contact-dark-form {
        padding: 50px clamp(48px, 5vw, 82px) !important;
    }

    .contact-dark-form .contact-field {
        padding-top: 20px !important;
    }

    .contact-dark-form .contact-message-field {
        padding-top: 24px !important;
    }

    .contact-dark-form .contact-field label {
        margin-bottom: 10px !important;
    }

    .contact-dark-form .contact-field input,
    .contact-dark-form .contact-field textarea {
        padding-bottom: 15px !important;
        font-size: 18px !important;
    }

    .contact-dark-form .contact-field textarea {
        min-height: 112px !important;
    }

    .contact-dark-form .contact-security {
        min-height: 24px !important;
        margin-top: 18px !important;
    }

    .contact-dark-copy {
        top: 64px !important;
    }
}

@media (max-width: 800px) {
    .contact-dark-visual {
        min-height: 620px !important;
    }

    .contact-dark-form {
        padding: 58px 7% 68px !important;
    }
}

/* Licensing: denser feature rows without removing information. */
.licensing-section {
    padding: 105px 5% 112px !important;
}

.licensing-heading {
    margin-bottom: 46px !important;
}

.license-card-head {
    padding: 27px 28px 22px !important;
}

.license-price {
    margin-top: 13px !important;
}

.license-features {
    padding: 8px 0 6px !important;
}

.license-feature {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 13px !important;
    padding: 12px 28px !important;
}

.license-feature svg {
    width: 24px !important;
    height: 24px !important;
}

.license-feature span {
    font-size: 13.5px !important;
    line-height: 1.35 !important;
}

.license-credit {
    margin: auto 28px 0 !important;
    padding: 17px 0 16px !important;
}

.license-bulk {
    padding: 15px 28px 17px !important;
}

@media (max-width: 700px) {
    .licensing-section {
        padding: 78px 7% 84px !important;
    }

    .licensing-heading {
        margin-bottom: 38px !important;
    }

    .license-card-head {
        padding: 24px 22px 20px !important;
    }

    .license-feature {
        grid-template-columns: 29px minmax(0, 1fr) !important;
        gap: 12px !important;
        padding: 13px 22px !important;
    }

    .license-credit {
        margin: auto 22px 0 !important;
    }

    .license-bulk {
        padding: 15px 22px 17px !important;
    }
}

/* Legal pages now use the same normal navbar structure. */
.legal-page .navbar .nav-links {
    gap: 30px;
}

/* =========================================================
   BRAYZ — FINAL POLISH V12
   Small corrective pass after V11.
   ========================================================= */

/* ---------------------------------------------------------
   MIXING / HOW IT WORKS
   CONTACT + PHONE + WHATSAPP stay on one line.
   --------------------------------------------------------- */
.mixing-process-links {
    flex-wrap: nowrap !important;
    gap: 10px 14px !important;
}

.mixing-process-links a {
    white-space: nowrap !important;
}

/* ---------------------------------------------------------
   CONTACT — DIRECT LINKS
   Desktop: phone / WhatsApp / Instagram always share one row.
   --------------------------------------------------------- */
@media (min-width: 801px) {
    .contact-dark-form .contact-direct-links {
        display: grid !important;
        grid-template-columns:
            max-content
            max-content
            max-content !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 18px !important;
        flex-wrap: nowrap !important;
    }
}

/* On smaller phones keep WhatsApp + Instagram together rather
   than leaving Instagram alone on a final line. */
@media (max-width: 520px) {
    .contact-dark-form .contact-direct-links {
        display: grid !important;
        grid-template-columns:
            1fr
            1fr !important;
        gap: 15px 22px !important;
        align-items: center !important;
    }

    .contact-dark-form .contact-direct-phone {
        grid-column: 1 / -1;
    }

    .contact-dark-form .contact-direct-whatsapp,
    .contact-dark-form .contact-direct-instagram {
        grid-column: auto;
    }
}

/* ---------------------------------------------------------
   CONTACT — IMAGE COPY
   Restore the pre-V11 vertical placement so LET'S WORK /
   ERZÄHL MIR MEHR overlaps the artificial head area again.
   Also make the actual text boxes share exactly one right edge.
   --------------------------------------------------------- */
@media (min-width: 801px) {
    .contact-dark-copy {
        top: clamp(86px, 9vw, 146px) !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
    }

    .contact-dark-copy .section-label,
    .contact-dark-copy h2,
    .contact-dark-copy .contact-form-intro {
        width: auto !important;
        max-width: 100%;
        margin-left: auto !important;
        margin-right: 0 !important;
        text-align: right !important;
    }
}

/* Mobile keeps the successful V10 concept:
   headline lowered onto the standing person's head area. */
@media (max-width: 800px) {
    .contact-dark-copy {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
    }

    .contact-dark-copy .section-label,
    .contact-dark-copy h2,
    .contact-dark-copy .contact-form-intro {
        width: auto !important;
        max-width: 100%;
        margin-left: auto !important;
        margin-right: 0 !important;
        text-align: right !important;
    }

    .contact-dark-copy h2 {
        margin-top: 58px !important;
    }
}

/* ---------------------------------------------------------
   DE ABOUT
   Natural German headline, compact but not cramped.
   --------------------------------------------------------- */
html[lang="de"] .about-heading h2 {
    line-height: 0.94 !important;
    letter-spacing: -3.2px !important;
}

/* ---------------------------------------------------------
   BEATS NAVBAR
   Normal links now use the exact same order as the main page.
   The Need Custom Beat button intentionally remains the extra item.
   --------------------------------------------------------- */
@media (min-width: 801px) {
    .beats-page .beats-nav-links {
        gap: 30px !important;
    }

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

/* =========================================================
   BRAYZ — FINAL POLISH V13
   Two final contact refinements only.
   ========================================================= */

/* ---------------------------------------------------------
   1) SEND INQUIRY / ANFRAGE SENDEN
   Move the submit action away from the form and toward the
   direct-contact row without moving that lower row on desktop.
   --------------------------------------------------------- */
@media (min-width: 801px) {
    .contact-dark-form .contact-submit-row {
        transform: translateY(-24px) !important;
    }
}

/* On mobile the direct-contact row should stay at essentially
   the same visual position: add space before the button and
   reclaim the same amount after it. */
@media (max-width: 800px) {
    .contact-dark-form .contact-submit-row {
        margin-top: 34px !important;
    }

    .contact-dark-form .contact-direct-links {
        margin-top: 26px !important;
    }
}

/* ---------------------------------------------------------
   2) DE CONTACT HEADLINE
   "ERZÄHL MIR MEHR." was correctly right-aligned as an element,
   but its nowrap text was wider than the 760px copy container.
   The glyphs therefore overflowed past the CONTACT right edge.
   Keep the one-line headline, but size the German version so it
   physically fits inside the same right-aligned container.
   --------------------------------------------------------- */
@media (min-width: 801px) {
    html[lang="de"] .contact-dark-copy h2 {
        max-width: 100% !important;

        font-size:
            clamp(
                56px,
                3.1vw,
                82px
            ) !important;

        line-height: 0.90 !important;
        letter-spacing: -3.2px !important;

        white-space: nowrap !important;
    }
}

/* Keep the German one-line treatment safe on narrow phones too. */
@media (max-width: 800px) {
    html[lang="de"] .contact-dark-copy h2 {
        font-size:
            clamp(
                38px,
                10vw,
                54px
            ) !important;

        letter-spacing: -2.1px !important;
    }
}

/* =========================================================
   BRAYZ — MOBILE CONTACT V15
   Final mobile direct-contact stack.
   ========================================================= */
@media (max-width: 520px) {
    .contact-dark-form .contact-direct-links {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;

        gap: 13px !important;
        margin-top: 26px !important;
    }

    .contact-dark-form .contact-direct-phone,
    .contact-dark-form .contact-direct-whatsapp,
    .contact-dark-form .contact-direct-instagram {
        grid-column: auto !important;

        width: auto !important;
        font-size: 9.5px !important;
        letter-spacing: 1.45px !important;
        line-height: 1.2 !important;
    }

    .contact-dark-form .contact-direct-phone {
        font-size: 10px !important;
        letter-spacing: 1.55px !important;
    }

    .contact-dark-form .contact-direct-arrow {
        font-size: 13px !important;
    }
}