/* Reference-matched FWS Hero */
.studio-page .studio-hero {
    min-height: 100vh;
    padding: 128px 0 82px;
    display: grid;
    align-items: center;
    background:
        radial-gradient(circle at 50% 34%, rgba(0, 102, 255, .32), transparent 22%),
        radial-gradient(circle at 42% 32%, rgba(139, 0, 255, .24), transparent 20%),
        radial-gradient(circle at 36% 34%, rgba(255, 48, 124, .22), transparent 18%),
        radial-gradient(circle at 31% 34%, rgba(255, 154, 0, .18), transparent 18%),
        radial-gradient(circle at 27% 32%, rgba(104, 255, 0, .22), transparent 20%),
        radial-gradient(circle at 50% 56%, rgba(255, 0, 120, .10), transparent 22%),
        #000;
}

.studio-page .studio-hero::before {
    opacity: .08;
    background:
        radial-gradient(circle at 50% 30%, rgba(255,255,255,.10), transparent 24%),
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: auto, 72px 72px, 72px 72px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.52), transparent 88%);
}

.studio-page .hero-bg-photo,
.studio-page .hero-orbit,
.studio-page .hero-showcase {
    display: none !important;
}

.studio-page .hero-grid {
    display: block;
    max-width: 920px;
    text-align: center;
}

.studio-page .hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 820px;
    margin: 0 auto;
}

.studio-page .hero-logo {
    order: 4;
    width: clamp(143px, 15.5vw, 215px) !important;
    height: clamp(143px, 15.5vw, 215px) !important;
    padding: 0 !important;
    margin: 34px auto 22px !important;
    border-radius: 29.166% !important;
    background: transparent !important;
    object-fit: contain !important;
    box-shadow:
        -150px -10px 210px rgba(112, 255, 0, .34),
        -118px 58px 210px rgba(255, 186, 0, .26),
        -84px 106px 224px rgba(255, 64, 0, .24),
        -22px 116px 224px rgba(255, 0, 92, .28),
        16px -106px 220px rgba(255, 32, 160, .28),
        112px -24px 230px rgba(132, 48, 255, .30),
        178px 28px 260px rgba(0, 138, 255, .42),
        76px 138px 220px rgba(255, 0, 180, .22) !important;
    animation: fwsReferenceGlow 5.8s ease-in-out infinite !important;
}

.studio-page .hero-kicker {
    order: 2;
    margin: 0 0 28px;
    padding: 10px 24px;
    color: rgba(243,244,246,.88);
    border-color: rgba(255,255,255,.22);
    background: rgba(0,0,0,.42);
    box-shadow:
        0 0 22px rgba(255, 170, 0, .12),
        0 0 26px rgba(0, 120, 255, .12);
    backdrop-filter: blur(14px);
}

.studio-page .hero-kicker span {
    display: none;
}

.studio-page .hero-copy h1 {
    order: 3;
    max-width: 790px;
    margin: 0 auto;
    font-size: clamp(2.9rem, 5vw, 5.15rem);
    line-height: 1.08;
    letter-spacing: 0;
    text-align: center;
    text-wrap: balance;
    color: #f4f4f5;
    text-shadow: 0 16px 42px rgba(255,255,255,.08);
}

.studio-page .hero-copy h1 span {
    color: inherit;
    background: none;
    -webkit-text-fill-color: currentColor;
}

.studio-page .hero-text {
    order: 5;
    max-width: 590px;
    margin: 0 auto;
    color: rgba(243,244,246,.56);
    font-size: clamp(1rem, 1.45vw, 1.22rem);
    line-height: 1.55;
    text-align: center;
}

.studio-page .button-row {
    order: 6;
    justify-content: center;
    margin-top: 34px;
}

.studio-page .button-row .btn {
    min-width: 168px;
    border-radius: 999px;
}

.studio-page .button-row .btn.primary {
    color: #f8fafc;
    background: #020202;
    border-color: rgba(255,255,255,.12);
    box-shadow:
        -16px 0 34px rgba(255, 196, 0, .16),
        0 0 38px rgba(255, 0, 120, .14),
        22px 0 38px rgba(0, 90, 255, .18),
        inset 0 1px 0 rgba(255,255,255,.12);
}

.studio-page .button-row .btn.secondary {
    color: rgba(243,244,246,.66);
    background: transparent;
    border-color: transparent;
}

@keyframes fwsReferenceGlow {
    0%, 100% {
        box-shadow:
            -132px -8px 198px rgba(112, 255, 0, .28),
            -104px 52px 196px rgba(255, 186, 0, .22),
            -72px 96px 208px rgba(255, 64, 0, .20),
            -18px 106px 208px rgba(255, 0, 92, .24),
            14px -96px 208px rgba(255, 32, 160, .23),
            102px -22px 216px rgba(132, 48, 255, .25),
            158px 26px 244px rgba(0, 138, 255, .35),
            68px 126px 208px rgba(255, 0, 180, .18);
    }

    50% {
        box-shadow:
            -164px -12px 226px rgba(112, 255, 0, .38),
            -126px 62px 226px rgba(255, 186, 0, .30),
            -92px 116px 238px rgba(255, 64, 0, .28),
            -26px 126px 238px rgba(255, 0, 92, .32),
            18px -116px 236px rgba(255, 32, 160, .32),
            122px -28px 246px rgba(132, 48, 255, .34),
            190px 34px 276px rgba(0, 138, 255, .46),
            84px 150px 236px rgba(255, 0, 180, .26);
    }
}

@media (max-width: 760px) {
    .studio-page .studio-hero {
        min-height: auto;
        padding: 116px 0 62px;
        background:
            radial-gradient(circle at 50% 27%, rgba(0, 102, 255, .30), transparent 30%),
            radial-gradient(circle at 38% 27%, rgba(255, 46, 120, .23), transparent 27%),
            radial-gradient(circle at 25% 28%, rgba(106, 255, 0, .18), transparent 30%),
            #000;
    }

    .studio-page .hero-logo {
        width: 123px !important;
        height: 123px !important;
        margin: 26px auto 18px !important;
        border-radius: 29.166% !important;
    }

    .studio-page .hero-kicker {
        margin-bottom: 22px;
        padding: 9px 18px;
    }

    .studio-page .hero-copy h1 {
        font-size: clamp(2.2rem, 11vw, 3.15rem);
        line-height: 1.12;
    }

    .studio-page .hero-text {
        max-width: 340px;
        font-size: 1rem;
    }

    .studio-page .button-row {
        width: 100%;
    }

    .studio-page .button-row .btn {
        width: min(100%, 280px);
    }
}

@supports (padding-top: env(safe-area-inset-top)) {
    @media (max-width: 760px) {
        .studio-page .studio-hero {
            padding-top: calc(116px + env(safe-area-inset-top)) !important;
        }
    }
}