:root {
    --render-navy: #071326;
    --render-blue: #1d5d99;
    --render-black: #0a0d12;
    --render-white: #f4f7fb;
    --render-mist: #dfe8f0;
    --render-amber: #e5a45e;
}

body.render-case {
    --accent: var(--render-blue);
    --accent-soft: #b9d6ec;
    --project-bg: var(--render-navy);
    --project-fg: var(--render-white);
    --project-alt: var(--render-amber);
    background: var(--render-white);
}

.render-case ::selection {
    color: var(--render-white);
    background: var(--render-blue);
}

.render-case .case-header {
    color: var(--render-white);
}

.render-case .case-header.is-scrolled {
    color: var(--render-navy);
    background: rgba(244, 247, 251, 0.9);
}

.render-case .render-hero {
    display: block;
    color: var(--render-white);
    background: var(--render-navy);
}

.render-case .render-hero::before {
    position: absolute;
    z-index: 3;
    inset: 0;
    background: linear-gradient(90deg, rgba(7, 19, 38, 0.98) 0%, rgba(7, 19, 38, 0.85) 27%, rgba(7, 19, 38, 0.42) 47%, transparent 72%);
    content: "";
    pointer-events: none;
}

.render-case .render-hero .hero-copy {
    z-index: 5;
    width: min(48vw, 760px);
    background:
        radial-gradient(circle at 72% 28%, rgba(29, 93, 153, 0.2), transparent 38%);
    border-right: 0;
}

.render-case .render-hero .hero-title .title-line {
    max-width: 720px;
    font-size: clamp(62px, 7.2vw, 118px);
    white-space: normal;
}

.render-case .render-hero .hero-title .title-line--en {
    font-size: clamp(22px, 2.3vw, 38px);
    letter-spacing: 0.08em;
}

.render-case .render-hero__art {
    position: absolute;
    inset: 0;
    min-width: 0;
    min-height: 100svh;
    background: var(--render-black);
}

.render-hero__art > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: saturate(0.96) contrast(1.03);
}

.render-hero__art::after {
    position: absolute;
    z-index: 2;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(7, 19, 38, 0.22), transparent 34%),
        linear-gradient(0deg, rgba(5, 11, 20, 0.55), transparent 36%);
    content: "";
    pointer-events: none;
}

.render-case .render-hero__art .art-grid {
    z-index: 3;
    color: var(--render-white);
    mix-blend-mode: soft-light;
    opacity: 0.13;
}

.render-case .render-hero__art .art-word {
    z-index: 4;
    right: 4.8%;
    bottom: 5%;
    color: var(--render-white);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.28);
}

.render-hero__spec {
    position: absolute;
    z-index: 4;
    top: 118px;
    right: 5%;
    display: flex;
    gap: 6px;
}

.render-hero__spec span {
    padding: 6px 9px;
    border: 1px solid rgba(244, 247, 251, 0.42);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.14em;
    backdrop-filter: blur(10px);
}

.render-overview {
    background: var(--render-white);
}

.render-section-heading {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
    margin: 82px 0 104px;
}

.render-section-heading h2 {
    grid-column: 1 / span 7;
    margin: 0;
    font-size: clamp(44px, 5.8vw, 90px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.065em;
}

.render-section-heading h2 span {
    color: var(--render-blue);
    font-weight: 300;
}

.render-section-heading > p {
    grid-column: 9 / -1;
    align-self: end;
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
    opacity: 0.62;
}

.render-stills {
    background: #e9eff4;
}

.render-stills__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 88px 2.2vw;
}

.render-still {
    grid-column: 1 / span 5;
    margin: 0;
}

.render-still--two {
    grid-column: 7 / -1;
    margin-top: 124px;
}

.render-still--three {
    grid-column: 1 / span 5;
}

.render-still--four {
    grid-column: 7 / -1;
    margin-top: 124px;
}

.render-still__image {
    position: relative;
    overflow: hidden;
    background: var(--render-black);
}

.render-still__image::after {
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(244, 247, 251, 0.45);
    content: "";
    pointer-events: none;
}

.render-still__image img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.9s cubic-bezier(.16, 1, .3, 1), filter 0.6s ease;
}

.render-still:hover .render-still__image img {
    filter: saturate(1.08);
    transform: scale(1.025);
}

.render-still figcaption,
.render-film__caption {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 18px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid rgba(7, 19, 38, 0.22);
}

.render-still figcaption > span,
.render-film__caption > span {
    font-size: 9px;
    font-weight: 700;
    opacity: 0.44;
}

.render-still h3,
.render-film h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.render-still figcaption p,
.render-film__caption p {
    max-width: 520px;
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.75;
    opacity: 0.58;
}

.render-motion {
    color: var(--render-white);
    background:
        radial-gradient(circle at 88% 8%, rgba(29, 93, 153, 0.32), transparent 30%),
        var(--render-black);
}

.render-section-heading--light h2 span {
    color: #80bde9;
}

.render-motion__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 88px 2.2vw;
}

.render-film:nth-child(2) {
    margin-top: 112px;
}

.render-film__player {
    position: relative;
    overflow: hidden;
    background: #020304;
}

.render-film__player video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #020304;
}

.render-film__player > span {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 7px 9px;
    color: var(--render-white);
    background: rgba(2, 3, 4, 0.6);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.13em;
    pointer-events: none;
    backdrop-filter: blur(8px);
}

.render-film__caption {
    border-top-color: rgba(244, 247, 251, 0.2);
}

.render-product {
    background: var(--render-white);
}

.render-product__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
    margin-top: 82px;
    align-items: start;
}

.render-product__copy {
    position: sticky;
    top: 116px;
    grid-column: 1 / span 5;
    padding-right: 6vw;
}

.render-product__copy h2 {
    margin: 0;
    font-size: clamp(44px, 5.4vw, 84px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.065em;
}

.render-product__copy h2 span {
    color: var(--render-blue);
    font-weight: 300;
}

.render-product__copy > p {
    max-width: 500px;
    margin: 38px 0 0;
    font-size: 14px;
    line-height: 1.9;
    opacity: 0.62;
}

.render-product__stats {
    display: grid;
    gap: 0;
    margin-top: 68px;
    border-top: 1px solid rgba(7, 19, 38, 0.2);
}

.render-product__stats span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(7, 19, 38, 0.2);
}

.render-product__stats b {
    font-size: 20px;
    font-weight: 600;
}

.render-product__stats small {
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.12em;
    opacity: 0.52;
}

.render-product__image {
    grid-column: 7 / -1;
    margin: 0;
    overflow: hidden;
    background: var(--render-black);
}

.render-product__image img {
    display: block;
    width: 100%;
    height: auto;
}

.render-strategy {
    color: var(--render-white);
    background: var(--render-navy);
}

.render-strategy .strategy-heading h2 span {
    color: #80bde9;
}

.render-process {
    background: #e9eff4;
}

.render-process .process-statement h2 span {
    color: var(--render-blue);
}

.render-deliverables {
    background: #80bde9;
}

.render-deliverables .deliverables-copy h2 span {
    color: var(--render-white);
}

.render-case .next-case {
    color: var(--render-white);
    background: var(--render-navy);
}

@media (max-width: 1050px) {
    .render-case .render-hero .hero-copy {
        min-height: 100svh;
    }

    .render-case .render-hero__art {
        min-height: 100svh;
    }

    .render-section-heading {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 22px;
        margin: 72px 0 88px;
    }

    .render-section-heading h2 {
        grid-column: 1 / span 5;
    }

    .render-section-heading > p {
        grid-column: 6 / -1;
    }

    .render-stills__grid,
    .render-product__grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .render-still {
        grid-column: span 4;
    }

    .render-still--two {
        grid-column: 5 / -1;
    }

    .render-still--three {
        grid-column: span 4;
    }

    .render-still--four {
        grid-column: 5 / -1;
    }

    .render-product__copy {
        grid-column: 1 / span 4;
        padding-right: 3vw;
    }

    .render-product__image {
        grid-column: 5 / -1;
    }
}

@media (max-width: 760px) {
    .render-case .render-hero {
        display: grid;
        grid-template-columns: 1fr;
    }

    .render-case .render-hero::before {
        display: none;
    }

    .render-case .render-hero .hero-copy {
        width: auto;
        min-height: 76svh;
        padding-top: 126px;
        background:
            radial-gradient(circle at 72% 28%, rgba(29, 93, 153, 0.2), transparent 38%),
            var(--render-navy);
    }

    .render-case .render-hero .hero-title .title-line {
        font-size: clamp(54px, 17vw, 84px);
    }

    .render-case .render-hero .hero-title .title-line--en {
        font-size: clamp(18px, 6vw, 28px);
    }

    .render-case .render-hero__art {
        position: relative;
        inset: auto;
        min-height: 56.25vw;
    }

    .render-hero__art > img {
        object-position: center center;
    }

    .render-hero__spec {
        top: 22px;
        right: 22px;
        left: 22px;
        flex-wrap: wrap;
    }

    .render-section-heading {
        display: block;
        margin: 58px 0 66px;
    }

    .render-section-heading > p {
        margin-top: 28px;
    }

    .render-stills__grid,
    .render-motion__grid,
    .render-product__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 62px;
    }

    .render-still,
    .render-still--two,
    .render-still--three,
    .render-still--four,
    .render-product__copy,
    .render-product__image {
        grid-column: 1;
        margin: 0;
        padding-right: 0;
        transform: none;
    }

    .render-film:nth-child(2) {
        margin-top: 0;
    }

    .render-product__copy {
        position: static;
    }

    .render-product__stats {
        margin-top: 42px;
    }

    .render-product__image {
        margin-top: 16px;
    }
}

@media (max-width: 430px) {
    .render-case .render-hero .hero-copy {
        min-height: 78svh;
    }

    .render-case .render-hero__art {
        min-height: 56.25vw;
    }

    .render-case .render-hero__art .art-word {
        right: 3%;
    }

    .render-hero__spec span:nth-child(3) {
        display: none;
    }

    .render-section-heading h2,
    .render-product__copy h2 {
        font-size: clamp(39px, 12.5vw, 58px);
    }

    .render-still figcaption,
    .render-film__caption {
        grid-template-columns: 30px 1fr;
        gap: 12px;
    }

    .render-product__stats span {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .render-still__image img,
    .render-still:hover .render-still__image img {
        filter: none;
        transform: none;
    }
}