:root {
    --bg: #141414;
    --panel: #181818;
    --text: #f4f4f4;
    --muted: #b5b5b5;
    --red: #ff4d2e;
    --green: #45d083
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    background: var(--bg)
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden
}

button,
a {
    font: inherit
}

button {
    color: inherit
}

a {
    color: inherit;
    text-decoration: none
}

img {
    display: block;
    max-width: 100%
}

[hidden] {
    display: none !important
}

.topbar {
    position: fixed;
    inset: 0 0 auto;
    height: 74px;
    padding: 0 4vw;
    display: flex;
    align-items: center;
    gap: 42px;
    z-index: 50;
    background: linear-gradient(#0b0b0be8, transparent);
    transition: .25s
}

.topbar.compact {
    height: 62px;
    background: #0d0d0df2;
    box-shadow: 0 4px 25px #0006
}

.wordmark {
    display: flex;
    align-items: center;
    white-space: nowrap
}

.wordmark img {
    width: auto;
    height: 40px;
    object-fit: contain
}

.topbar .wordmark img {
    height: 50px
}

.topbar nav {
    display: flex;
    gap: 23px;
    margin-right: auto
}

.topbar nav a {
    font-size: 16px;
    color: #d8d8d8;
    transition: .2s
}

.topbar nav a:hover {
    color: #8c8c8c
}

.topContact {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px
}

.searchGlyph {
    font-size: 26px;
    font-weight: 200;
    line-height: 1;
    transform: rotate(-20deg)
}

.movieHero {
    height: min(860px, 91vh);
    min-height: 690px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 95px 4vw 110px;
    isolation: isolate
}

.heroBackdrop {
    position: absolute;
    inset: 0;
    z-index: -4;
    background: url('/assets/hero-backdrop.png') center center/cover no-repeat
}

.heroVignette {
    position: absolute;
    inset: 0;
    z-index: -3;
    background: linear-gradient(90deg, #090909 2%, rgba(9, 9, 9, .96) 19%, rgba(9, 9, 9, .66) 40%, rgba(9, 9, 9, .08) 70%), linear-gradient(0deg, var(--bg) 0%, transparent 22%, transparent 73%, rgba(0, 0, 0, .34) 100%)
}

.movieInfo {
    width: min(660px, 53vw);
    position: relative;
    z-index: 2
}

.originalTag {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .24em;
    color: #c9c9c9
}

.originalTag img,
.posterCopy small img,
.modalVisual small img {
    font-style: normal;
    color: var(--red);
    font-size: 15px;
    font-weight: 1000;
    letter-spacing: -.12em
}

.titleLockup small {
    font-size: 10px;
    letter-spacing: .38em;
    color: #bfbfbf
}

.titleLockup h1 {
    margin: 7px 0 0;
    font-size: clamp(62px, 7.4vw, 116px);
    line-height: .73;
    letter-spacing: -.09em;
    font-weight: 1000;
    text-shadow: 0 4px 28px #000
}

.titleLockup h1 span {
    color: var(--red);
    font-weight: 500
}

.titleLockup>p {
    margin: 18px 0 27px;
    font-size: 9px;
    letter-spacing: .45em;
    font-weight: 800;
    color: #aaa
}

.movieMeta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #c8c8c8
}

.movieMeta strong,
.modalMeta strong {
    color: var(--green)
}

.ageBadge {
    padding: 2px 6px;
    border: 1px solid #8c8c8c;
    color: #ddd
}

.qualityBadge {
    padding: 1px 5px;
    border: 1px solid #777;
    border-radius: 2px;
    font-size: 9px;
    font-weight: 800
}

.synopsis {
    max-width: 610px;
    margin: 18px 0 12px;
    font-size: 17px;
    line-height: 1.52;
    text-shadow: 0 2px 10px #000
}

.featuredLine {
    margin: 0;
    color: #b6b6b6;
    font-size: 12px;
    line-height: 1.5
}

.featuredLine b {
    color: #777
}

.heroButtons {
    display: flex;
    gap: 11px;
    margin-top: 26px
}

.playButton,
.infoButton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 800;
    transition: .2s
}

.playButton {
    background: #fff;
    color: #111
}

.playButton:hover {
    background: #ffffffbf
}

.infoButton {
    background: #6d6d6eb3
}

.infoButton:hover {
    background: #6d6d6e8c
}

.playButton span {
    font-size: 17px
}

.infoButton span {
    font-size: 22px
}

.maturity {
    position: absolute;
    right: 0;
    bottom: 175px;
    border-left: 3px solid #ddd;
    background: #333b;
    padding: 7px 4vw 7px 12px
}

.maturity span {
    font-size: 12px
}

.streamSection {
    position: relative;
    z-index: 5;
    padding: 0 4vw 58px
}

.firstRail {
    margin-top: -116px
}

.railHeading,
.seasonHeader {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 15px
}

.railHeading h2,
.streamSection>h2,
.seasonHeader h2 {
    margin: 0;
    font-size: 22px;
    letter-spacing: -.02em
}

.railHeading>div {
    display: flex;
    gap: 6px
}

.railHeading button {
    width: 31px;
    height: 31px;
    border: 1px solid #555;
    background: #222b;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer
}

.posterRail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 19vw);
    gap: 9px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 18px 4px 38px;
    margin: -18px -4px 0;
    scrollbar-width: none;
    scroll-snap-type: x proximity
}

.posterRail::-webkit-scrollbar {
    display: none
}

.posterCard {
    aspect-ratio: 2/3;
    position: relative;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: #222;
    overflow: hidden;
    text-align: left;
    cursor: pointer;
    scroll-snap-align: start;
    transform-origin: center;
    transition: transform .28s, box-shadow .28s;
    box-shadow: 0 4px 15px #0007
}

.posterCard:hover,
.posterCard:focus-visible {
    z-index: 5;
    transform: scale(1.055);
    box-shadow: 0 16px 35px #000
}

.posterCard img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.posterShade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, .25) 56%, #070707 100%)
}

.topTen {
    position: absolute;
    left: 9px;
    top: 10px;
    padding: 4px 6px;
    background: #d72a20;
    color: white;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    box-shadow: 0 3px 10px #0008
}

.topTen b {
    font-size: 16px
}

.posterCopy {
    position: absolute;
    left: 15px;
    right: 14px;
    bottom: 17px
}

.posterCopy small {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    letter-spacing: .14em;
    color: #aaa
}

.posterCopy h3 {
    max-width: 88%;
    margin: 7px 0 8px;
    font-size: clamp(17px, 1.4vw, 23px);
    line-height: .95;
    letter-spacing: -.045em;
    text-transform: uppercase;
    text-shadow: 0 2px 8px #000
}

.posterCopy p {
    margin: 0;
    font-size: 10px;
    color: #a7a7a7
}

.posterCopy small > img {
    position: relative;
}

.posterPlay {
    position: absolute;
    right: 13px;
    bottom: 18px;
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border: 1px solid #ccc;
    border-radius: 50%;
    font-size: 9px;
    background: #111b;
    opacity: 0;
    transition: .2s
}

.posterCard:hover .posterPlay,
.posterCard:focus-visible .posterPlay {
    opacity: 1
}

.detailSynopsis {
    padding: 70px 8vw 105px;
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, .75fr);
    gap: 9vw;
    background: radial-gradient(circle at 80% 50%, #292929, #151515 50%);
    border-top: 1px solid #333
}

.overline {
    margin: 0 0 12px;
    color: var(--red);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .2em
}

.synopsisMain h2 {
    margin: 0 0 28px;
    font-size: clamp(34px, 4vw, 61px);
    line-height: .98;
    letter-spacing: -.055em
}

.synopsisMain>p:not(.overline) {
    max-width: 850px;
    color: #bebebe;
    font-size: 15px;
    line-height: 1.7
}

.credits {
    padding-top: 35px
}

.credits p {
    margin: 0 0 13px;
    color: #ddd;
    font-size: 12px;
    line-height: 1.5
}

.credits b {
    color: #707070;
    font-weight: 500
}

.episodesSection {
    padding-top: 68px
}

.seasonHeader {
    padding-bottom: 14px;
    border-bottom: 1px solid #444
}

.seasonHeader>div {
    display: flex;
    align-items: baseline;
    gap: 19px
}

.seasonHeader p,
.seasonHeader>span {
    margin: 0;
    color: #aaa;
    font-size: 11px
}

.episodeList {
    display: flex;
    flex-direction: column
}

.episode {
    min-height: 126px;
    display: grid;
    grid-template-columns: 45px 190px minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 16px 12px;
    border-bottom: 1px solid #3b3b3b;
    transition: .2s
}

.episode:hover {
    background: #222
}

.episode>b {
    font-size: 22px;
    color: #777;
    text-align: center
}

.episodeStill {
    height: 94px;
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    background: #222
}

.episodeStill img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
    filter: saturate(.8)
}

.episodeStill:after {
    content: "";
    position: absolute;
    inset: 0;
    background: #0004
}

.episodeStill span {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid white;
    border-radius: 50%;
    font-size: 10px;
    background: #0008
}

.episode h3 {
    margin: 0 0 8px;
    font-size: 15px
}

.episode p {
    margin: 0;
    max-width: 650px;
    color: #999;
    font-size: 12px;
    line-height: 1.45
}

.episode>small {
    color: #666;
    font-size: 8px;
    letter-spacing: .12em
}

.recommended {
    padding-top: 45px
}

.recommended>h2 {
    margin-bottom: 17px
}

.landscapeRail {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px
}

.landscapeRail button {
    aspect-ratio: 16/9;
    position: relative;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: #222;
    cursor: pointer;
    text-align: left;
    transition: .25s
}

.landscapeRail button:hover {
    transform: translateY(-5px);
    box-shadow: 0 13px 24px #000
}

.landscapeRail img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%
}

.landscapeShade {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #070707df, transparent 75%)
}

.landscapeRail small {
    position: absolute;
    left: 13px;
    top: 11px;
    padding: 4px 7px;
    background: var(--red);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .1em
}

.landscapeRail h3 {
    position: absolute;
    left: 14px;
    bottom: 12px;
    margin: 0;
    max-width: 76%;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: -.03em
}

.landscapeRail button>b {
    position: absolute;
    right: 13px;
    bottom: 9px;
    color: #ffffff3d;
    font-size: 28px
}

.finale {
    min-height: 500px;
    padding: 110px 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: radial-gradient(circle at 50% 120%, #5a170e, #131313 56%);
    border-top: 1px solid #333
}

.finale>p {
    margin: 0;
    color: var(--red);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .25em
}

.finale h2 {
    margin: 17px 0 34px;
    font-size: clamp(39px, 5vw, 73px);
    line-height: 1;
    letter-spacing: -.055em
}

.finale a {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 14px 22px;
    background: white;
    color: #111;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 800
}

.finale a:hover {
    background: #ddd
}

footer {
    min-height: 110px;
    padding: 30px 4vw;
    display: flex;
    align-items: center;
    gap: 35px;
    background: #0c0c0c;
    color: #696969
}

footer p {
    margin: auto;
    font-size: 10px
}

footer small {
    font-size: 9px
}

.modalBackdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4vh 18px;
    overflow-y: auto;
    background: #000b;
    backdrop-filter: blur(5px);
    animation: fade .2s
}

.titleModal {
    width: min(850px, 100%);
    position: relative;
    overflow: hidden;
    background: var(--panel);
    border-radius: 7px;
    box-shadow: 0 18px 80px #000;
    animation: rise .3s
}

.modalClose {
    position: absolute;
    right: 16px;
    top: 16px;
    z-index: 4;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #181818;
    color: #fff;
    font-size: 25px;
    cursor: pointer
}

.modalVisual {
    height: 460px;
    position: relative
}

.modalVisual>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 48%
}

.modalVisual>span {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #101010 0%, transparent 67%), linear-gradient(0deg, var(--panel), transparent 55%)
}

.modalVisual>div {
    position: absolute;
    left: 42px;
    bottom: 46px;
    width: 65%
}

.modalVisual small {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 9px;
    letter-spacing: .17em;
    color: #bbb
}

.modalVisual h2 {
    margin: 8px 0 22px;
    font-size: clamp(38px, 5vw, 66px);
    line-height: .9;
    text-transform: uppercase;
    letter-spacing: -.06em;
    text-shadow: 0 3px 15px #000
}

.modalVisual a {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    padding: 10px 18px;
    border-radius: 4px;
    background: white;
    color: #111;
    font-size: 12px;
    font-weight: 800
}

.modalBody {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 45px;
    padding: 5px 42px 45px
}

.modalMeta {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #bbb;
    font-size: 11px
}

.modalStory>p {
    font-size: 14px;
    line-height: 1.55
}

.modalTags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 20px
}

.modalTags span {
    padding: 6px 9px;
    border: 1px solid #555;
    border-radius: 2px;
    color: #bbb;
    font-size: 9px
}

.modalBody aside p {
    margin: 0 0 11px;
    color: #aaa;
    font-size: 10px;
    line-height: 1.45
}

.modalBody aside b {
    color: #666;
    font-weight: 500
}

@keyframes fade {
    from {
        opacity: 0
    }
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(25px)
    }
}

@media(max-width:900px) {
    .topbar nav {
        display: none
    }

    .movieInfo {
        width: 66vw
    }

    .posterRail {
        grid-auto-columns: minmax(210px, 29vw)
    }

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

    .episode {
        grid-template-columns: 35px 165px 1fr
    }

    .episode>small {
        display: none
    }
}

@media(max-width:650px) {
    .topbar {
        height: 60px;
        padding: 0 18px
    }

    .wordmark span {
        display: none
    }

    .topContact {
        margin-left: auto
    }

    .searchGlyph {
        display: none
    }

    .movieHero {
        height: 735px;
        min-height: 0;
        align-items: flex-end;
        padding: 80px 20px 110px
    }

    .heroBackdrop {
        background-position: 63% center
    }

    .heroVignette {
        background: linear-gradient(90deg, #090909d9 0%, transparent 90%), linear-gradient(0deg, var(--bg) 0%, rgba(20, 20, 20, .55) 45%, rgba(0, 0, 0, .1) 82%)
    }

    .movieInfo {
        width: 100%
    }

    .titleLockup h1 {
        font-size: 66px
    }

    .titleLockup small {
        font-size: 7px
    }

    .synopsis {
        font-size: 14px
    }

    .featuredLine {
        display: none
    }

    .movieMeta {
        gap: 8px;
        font-size: 10px;
        flex-wrap: wrap
    }

    .maturity {
        display: none
    }

    .heroButtons a {
        padding: 11px 15px;
        font-size: 12px
    }

    .streamSection {
        padding-left: 20px;
        padding-right: 20px
    }

    .firstRail {
        margin-top: -62px
    }

    .railHeading h2,
    .streamSection>h2,
    .seasonHeader h2 {
        font-size: 19px
    }

    .railHeading>div {
        display: none
    }

    .posterRail {
        grid-auto-columns: 58vw;
        margin-right: -20px
    }

    .detailSynopsis {
        padding: 70px 20px;
        display: block
    }

    .synopsisMain h2 {
        font-size: 40px
    }

    .credits {
        margin-top: 40px
    }

    .seasonHeader>div {
        display: block
    }

    .seasonHeader p {
        margin-top: 5px
    }

    .episode {
        grid-template-columns: 25px 115px 1fr;
        gap: 10px;
        padding: 12px 0
    }

    .episodeStill {
        height: 72px
    }

    .episode p {
        font-size: 10px
    }

    .landscapeRail {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 78vw;
        grid-template-columns: none;
        overflow-x: auto;
        margin-right: -20px;
        scrollbar-width: none
    }

    .finale {
        padding: 90px 20px;
        text-align: left;
        align-items: flex-start
    }

    .finale h2 {
        font-size: 43px
    }

    footer {
        align-items: flex-start;
        flex-wrap: wrap
    }

    footer p {
        order: 3;
        width: 100%;
        margin: 0
    }

    .modalBackdrop {
        padding: 0
    }

    .titleModal {
        min-height: 100%;
        border-radius: 0
    }

    .modalVisual {
        height: 400px
    }

    .modalVisual>div {
        left: 22px;
        bottom: 30px;
        width: 84%
    }

    .modalVisual h2 {
        font-size: 43px
    }

    .modalBody {
        grid-template-columns: 1fr;
        padding: 5px 22px 40px;
        gap: 25px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    * {
        animation: none !important;
        transition: none !important
    }

    .posterRail {
        scroll-behavior: auto
    }
}

/* Identity, readability and long-form service content */
.movieHero {
    height: min(900px, 94vh);
    min-height: 750px
}

.heroBackdrop {
    z-index: -5;
    filter: saturate(.72)
}

.heroVignette {
    z-index: -2;
    background: linear-gradient(90deg, #090909 1%, rgba(9, 9, 9, .96) 17%, rgba(9, 9, 9, .74) 42%, rgba(9, 9, 9, .13) 69%), linear-gradient(0deg, var(--bg) 0%, transparent 24%, transparent 73%, rgba(0, 0, 0, .34) 100%)
}

.heroPortrait {
    position: absolute;
    z-index: -3;
    right: 5.5vw;
    bottom: 84px;
    width: min(42vw, 610px);
    height: min(76vh, 730px);
    filter: drop-shadow(0 18px 38px #000c)
}

.heroPortrait img {
    object-fit: contain;
    object-position: center bottom
}

.movieInfo {
    width: min(760px, 61vw)
}

.titleLockup h1.roleTitle {
    max-width: 760px;
    margin: 9px 0 0;
    font-size: clamp(48px, 5.6vw, 83px);
    line-height: .82;
    letter-spacing: -.07em;
    font-weight: 1000;
    text-shadow: 0 4px 28px #000
}

.titleLockup h1.roleTitle span {
    color: #fff;
    -webkit-text-stroke: 0
}

.titleLockup h1.roleTitle .titleSlashes {
    display: inline-block;
    margin-left: .07em;
    color: var(--red);
    font-style: italic;
    letter-spacing: -.16em;
    transform: skew(-7deg)
}

.roleSubheading {
    margin: 19px 0 25px !important;
    font-size: 10px !important;
    letter-spacing: .32em !important;
    font-weight: 800;
    color: #bbb !important
}

.synopsis {
    max-width: 670px;
    margin: 20px 0 14px;
    font-size: 20px;
    line-height: 1.55
}

.featuredLine {
    font-size: 14px;
    line-height: 1.55
}

.movieMeta {
    font-size: 13px
}

.playButton,
.infoButton {
    font-size: 15px
}

.seoServices {
    padding: 105px 7vw 115px;
    background: #0f0f0f;
    border-top: 1px solid #2e2e2e
}

.seoIntro {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    column-gap: 8vw;
    align-items: start;
    margin-bottom: 70px
}

.seoIntro .overline {
    grid-column: 1/-1
}

.seoIntro h2 {
    margin: 0;
    font-size: clamp(37px, 4.4vw, 67px);
    line-height: .98;
    letter-spacing: -.055em
}

.seoIntro>p:last-child {
    margin: 4px 0 0;
    color: #bcbcbc;
    font-size: 18px;
    line-height: 1.7
}

.serviceIndex {
    border-top: 1px solid #3b3b3b
}

.serviceIndex article {
    display: grid;
    grid-template-columns: 75px 1fr;
    padding: 34px 0;
    border-bottom: 1px solid #333
}

.serviceNumber {
    color: #666;
    font-size: 20px;
    font-weight: 800
}

.serviceIndex article>div:last-child {
    display: grid;
    grid-template-columns: minmax(260px, .7fr) minmax(300px, 1fr);
    column-gap: 6vw
}

.serviceIndex article p {
    grid-column: 1/-1;
    margin: 0 0 12px;
    color: var(--red);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .18em
}

.serviceIndex h3 {
    margin: 0;
    font-size: clamp(25px, 2.5vw, 39px);
    line-height: 1.02;
    letter-spacing: -.045em
}

.serviceDescription {
    color: #aeb0b3;
    font-size: 17px;
    line-height: 1.7
}

.detailSynopsis {
    padding: 90px 8vw 115px
}

.synopsisMain>p:not(.overline) {
    color: #c4c4c4;
    font-size: 18px;
    line-height: 1.75
}

.credits p {
    margin-bottom: 17px;
    color: #e0e0e0;
    font-size: 14px;
    line-height: 1.55
}

.credits b {
    color: #7f7f7f
}

.seniorPositioning {
    padding: 105px 7vw 115px;
    background: radial-gradient(circle at 82% 18%, #242424 0%, #131313 48%, #0d0d0d 100%);
    color: #f4f4f4;
    border-top: 1px solid #303030;
    border-bottom: 1px solid #303030
}

.seniorIntro {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 8vw;
    align-items: start;
    margin-bottom: 68px
}

.seniorIntro .overline {
    grid-column: 1/-1;
    color: var(--red)
}

.seniorIntro h2 {
    margin: 0;
    font-size: clamp(40px, 4.8vw, 72px);
    line-height: .96;
    letter-spacing: -.06em
}

.seniorIntro>p:last-child {
    margin: 4px 0 0;
    color: #bebebe;
    font-size: 19px;
    line-height: 1.72
}

.seniorPillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #3d3d3d;
    border-bottom: 1px solid #3d3d3d
}

.seniorPillars article {
    min-height: 330px;
    padding: 28px 26px 32px;
    border-right: 1px solid #3d3d3d
}

.seniorPillars article:last-child {
    border-right: 0
}

.seniorPillars span {
    color: var(--red);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em
}

.seniorPillars h3 {
    margin: 42px 0 17px;
    color: #f5f5f5;
    font-size: 24px;
    line-height: 1.02;
    letter-spacing: -.04em
}

.seniorPillars p {
    margin: 0;
    color: #a9a9a9;
    font-size: 15px;
    line-height: 1.68
}

.linkedinProof {
    display: grid;
    grid-template-columns: .65fr 1.45fr auto;
    gap: 5vw;
    align-items: center;
    margin-top: 28px;
    padding: 30px 0 0
}

.linkedinProof div {
    display: flex;
    flex-direction: column;
    gap: 7px
}

.linkedinProof small {
    color: var(--red);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .16em
}

.linkedinProof strong {
    color: #f4f4f4;
    font-size: 24px;
    letter-spacing: -.035em
}

.linkedinProof p {
    margin: 0;
    color: #aaa;
    font-size: 15px;
    line-height: 1.65
}

.linkedinProof a {
    white-space: nowrap;
    padding: 11px 0;
    border-bottom: 1px solid #777;
    color: #f4f4f4;
    font-size: 12px;
    font-weight: 800
}

.linkedinProof a span {
    margin-left: 8px;
    color: var(--red);
    font-size: 16px
}

.skillsCatalogue {
    padding: 100px 7vw 115px;
    background: #e8e6df;
    color: #121212
}

.skillsTitle {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    column-gap: 8vw;
    margin-bottom: 60px
}

.skillsTitle .overline {
    grid-column: 1/-1;
    color: #af2d1b
}

.skillsTitle h2 {
    margin: 0;
    font-size: clamp(39px, 4vw, 62px);
    line-height: 1;
    letter-spacing: -.055em
}

.skillsTitle>p:last-child {
    margin: 5px 0 0;
    color: #555;
    font-size: 17px;
    line-height: 1.65
}

.skillGroups {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px
}

.skillGroups article {
    min-height: 335px;
    display: flex;
    flex-direction: column;
    padding: 28px;
    background: #f5f3ed;
    border: 1px solid #d2d0c8
}

.skillGroups article>span {
    color: #b1321f;
    font-size: 11px;
    font-weight: 900
}

.skillGroups h3 {
    margin: 30px 0 18px;
    font-size: 22px;
    line-height: 1.05;
    letter-spacing: -.035em
}

.skillGroups p {
    margin: 0;
    color: #555;
    font-size: 15px;
    line-height: 1.65
}

.skillGroups article>div {
    margin-top: auto;
    padding-top: 25px;
    color: #9a3425;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .11em
}

.episodesSection {
    padding-top: 78px
}

.seasonHeader p,
.seasonHeader>span {
    font-size: 13px
}

.episode {
    min-height: 144px;
    grid-template-columns: 45px 210px minmax(0, 1fr) auto;
    gap: 24px;
    padding: 18px 12px
}

.episodeStill {
    height: 108px
}

.episode h3 {
    font-size: 18px
}

.episode p {
    max-width: 760px;
    color: #b0b0b0;
    font-size: 15px;
    line-height: 1.55
}

.episode>small {
    font-size: 9px
}

.modalVisual a {
    font-size: 13px
}

.modalMeta {
    font-size: 12px
}

.modalStory>p {
    font-size: 17px;
    line-height: 1.65
}

.modalTags span {
    font-size: 10px
}

.modalBody aside p {
    margin-bottom: 13px;
    color: #b8b8b8;
    font-size: 13px;
    line-height: 1.5
}

@media(max-width:1100px) {
    .skillGroups {
        grid-template-columns: repeat(2, 1fr)
    }

    .heroPortrait {
        right: -2vw;
        width: min(46vw, 560px);
        opacity: .88
    }

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

    .seniorPillars article:nth-child(2) {
        border-right: 0
    }

    .seniorPillars article:nth-child(-n+2) {
        border-bottom: 1px solid #3d3d3d
    }
}

@media(max-width:900px) {
    .movieInfo {
        width: 70vw
    }

    .seoIntro,
    .skillsTitle,
    .seniorIntro {
        grid-template-columns: 1fr
    }

    .seoIntro>p:last-child,
    .skillsTitle>p:last-child,
    .seniorIntro>p:last-child {
        margin-top: 25px
    }

    .serviceIndex article>div:last-child {
        grid-template-columns: 1fr
    }

    .serviceDescription {
        margin-top: 18px
    }

    .linkedinProof {
        grid-template-columns: 1fr 1.5fr
    }

    .linkedinProof a {
        grid-column: 1/-1;
        justify-self: start
    }
}

@media(max-width:650px) {
    .movieHero {
        height: 800px;
        padding-bottom: 105px
    }

    .heroBackdrop {
        background-position: 66% center
    }

    .heroPortrait {
        right: -9vw;
        bottom: 230px;
        width: 92vw;
        height: 500px;
        opacity: .58
    }

    .heroVignette {
        background: linear-gradient(90deg, #090909e8 0%, transparent 100%), linear-gradient(0deg, var(--bg) 0%, rgba(20, 20, 20, .8) 47%, rgba(0, 0, 0, .05) 82%)
    }

    .movieInfo {
        width: 100%
    }

    .titleLockup h1.roleTitle {
        font-size: 39px;
        line-height: .88
    }

    .roleSubheading {
        font-size: 7px !important;
        letter-spacing: .16em !important
    }

    .synopsis {
        font-size: 16px;
        line-height: 1.55
    }

    .firstRail {
        margin-top: -48px
    }

    .seoServices {
        padding: 75px 20px
    }

    .seoIntro {
        margin-bottom: 50px
    }

    .seoIntro h2 {
        font-size: 39px
    }

    .seoIntro>p:last-child {
        font-size: 16px
    }

    .serviceIndex article {
        grid-template-columns: 42px 1fr;
        padding: 28px 0
    }

    .serviceIndex h3 {
        font-size: 26px
    }

    .serviceDescription {
        font-size: 16px
    }

    .detailSynopsis {
        padding: 70px 20px
    }

    .synopsisMain>p:not(.overline) {
        font-size: 17px
    }

    .seniorPositioning {
        padding: 75px 20px 85px
    }

    .seniorIntro {
        margin-bottom: 48px
    }

    .seniorIntro h2 {
        font-size: 41px
    }

    .seniorIntro>p:last-child {
        font-size: 17px
    }

    .seniorPillars {
        grid-template-columns: 1fr
    }

    .seniorPillars article {
        min-height: 0;
        padding: 26px 4px 30px;
        border-right: 0 !important;
        border-bottom: 1px solid #3d3d3d
    }

    .seniorPillars article:last-child {
        border-bottom: 0
    }

    .seniorPillars h3 {
        margin: 24px 0 12px;
        font-size: 23px
    }

    .linkedinProof {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-top: 34px
    }

    .linkedinProof a {
        grid-column: auto
    }

    .skillsCatalogue {
        padding: 75px 20px
    }

    .skillsTitle h2 {
        font-size: 40px
    }

    .skillGroups {
        grid-template-columns: 1fr
    }

    .skillGroups article {
        min-height: 280px
    }

    .episode {
        grid-template-columns: 25px 115px 1fr;
        gap: 10px;
        padding: 14px 0
    }

    .episodeStill {
        height: 72px
    }

    .episode h3 {
        font-size: 14px
    }

    .episode p {
        font-size: 12px;
        line-height: 1.4
    }

    .modalStory>p {
        font-size: 16px
    }
}

/* Netflix-inspired Top skills rail */
.skillsCatalogue {
    padding: 88px 4vw 108px;
    background: #141414;
    color: #f4f4f4;
    overflow: hidden
}

.skillsTopHeading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 18px
}

.skillsTopHeading h2 {
    margin: 0;
    font-size: 24px;
    letter-spacing: -.025em
}

.skillsTopHeading p {
    margin: 0;
    color: #858585;
    font-size: 12px
}

.skillTopRail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px
}

.skillTopRail>button {
    height: 355px;
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    cursor: pointer;
    text-align: left;
    isolation: isolate;
    transition: transform .25s
}

.skillTopRail>button:hover,
.skillTopRail>button:focus-visible {
    z-index: 4;
    transform: translateY(-7px)
}

.skillRank {
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: -24px;
    font-size: clamp(220px, 17vw, 285px);
    line-height: .82;
    font-weight: 1000;
    letter-spacing: -.11em;
    color: #141414;
    -webkit-text-stroke: 3px #5b5b5b;
    text-shadow: 0 5px 22px #000
}

.skillPoster {
    position: absolute;
    right: 0;
    top: 8px;
    width: 56%;
    height: 330px;
    overflow: hidden;
    border-radius: 5px;
    background: #222;
    box-shadow: 0 8px 20px #0009;
    transition: transform .25s, box-shadow .25s
}

.skillTopRail>button:hover .skillPoster,
.skillTopRail>button:focus-visible .skillPoster {
    transform: scale(1.035);
    box-shadow: 0 18px 38px #000
}

.skillPoster>img {
    object-fit: cover
}

.skillPosterShade {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #050505f0 0%, transparent 56%)
}

.skillPoster>div {
    position: absolute;
    left: 13px;
    right: 11px;
    bottom: 14px
}

.skillPoster small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 17px;
    margin-bottom: 7px;
    background: #e33120;
    color: white;
    font-size: 8px;
    font-weight: 1000;
    letter-spacing: -.08em
}

.skillPoster h3 {
    margin: 0;
    font-size: clamp(15px, 1.3vw, 21px);
    line-height: .95;
    letter-spacing: -.045em;
    text-transform: uppercase;
    text-shadow: 0 2px 8px #000
}

.skillModalBackdrop {
    align-items: center
}

.skillModal {
    width: min(760px, 100%);
    position: relative;
    overflow: hidden;
    background: #181818;
    border-radius: 7px;
    box-shadow: 0 22px 80px #000;
    animation: rise .3s
}

.skillModalVisual {
    height: 390px;
    position: relative
}

.skillModalVisual>img {
    object-fit: cover;
    object-position: center 45%
}

.skillModalVisual>span {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #181818 0%, transparent 64%), linear-gradient(90deg, #111c 0%, transparent 70%)
}

.skillModalVisual>div {
    position: absolute;
    left: 38px;
    right: 70px;
    bottom: 35px
}

.skillModalVisual small {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #bbb;
    font-size: 9px;
    letter-spacing: .17em
}

.skillModalVisual small i {
    font-style: normal;
    color: var(--red);
    font-size: 17px;
    font-weight: 1000;
    letter-spacing: -.1em
}

.skillModalVisual h2 {
    max-width: 590px;
    margin: 8px 0 0;
    font-size: clamp(39px, 5.5vw, 68px);
    line-height: .9;
    letter-spacing: -.055em;
    text-transform: uppercase
}

.skillModalBody {
    padding: 2px 38px 42px
}

.skillModalBody>p {
    margin: 0 0 25px;
    color: #d0d0d0;
    font-size: 18px;
    line-height: 1.7
}

.skillModalBody>div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 28px
}

.skillModalBody>div span {
    padding: 6px 9px;
    border: 1px solid #555;
    border-radius: 2px;
    color: #aaa;
    font-size: 9px;
    letter-spacing: .08em
}

.skillModalBody>a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    background: #fff;
    color: #111;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 800
}

@media(max-width:1050px) {
    .skillTopRail {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px 12px
    }

    .skillTopRail>button {
        height: 345px
    }

    .skillRank {
        font-size: 270px
    }

    .skillPoster {
        width: 60%
    }
}

@media(max-width:650px) {
    .skillsCatalogue {
        padding: 72px 20px 90px
    }

    .skillsTopHeading {
        display: block
    }

    .skillsTopHeading h2 {
        font-size: 21px
    }

    .skillsTopHeading p {
        margin-top: 7px;
        font-size: 11px
    }

    .skillTopRail {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 79vw;
        grid-template-columns: none;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        margin: 0 -20px;
        padding: 12px 20px 28px;
        scroll-snap-type: x proximity;
        scrollbar-width: none
    }

    .skillTopRail::-webkit-scrollbar {
        display: none
    }

    .skillTopRail>button {
        height: 320px;
        scroll-snap-align: start
    }

    .skillRank {
        font-size: 248px;
        left: 2px;
        bottom: -19px
    }

    .skillPoster {
        width: 58%;
        height: 300px
    }

    .skillPoster h3 {
        font-size: 18px
    }

    .skillModalBackdrop {
        padding: 0
    }

    .skillModal {
        min-height: 100%;
        border-radius: 0
    }

    .skillModalVisual {
        height: 380px
    }

    .skillModalVisual>div {
        left: 22px;
        right: 55px;
        bottom: 30px
    }

    .skillModalVisual h2 {
        font-size: 43px
    }

    .skillModalBody {
        padding: 4px 22px 38px
    }

    .skillModalBody>p {
        font-size: 16px
    }
}

/* Netflix-style professional details */
.seniorPositioning {
    padding: 72px 4vw 105px;
    background: radial-gradient(circle at 70% 5%, #1d2020 0%, #101111 48%, #0a0b0b 100%);
    color: #f4f4f4
}

.seniorFeature {
    padding: 30px 34px 27px;
    border: 1px solid #3a3c3c;
    border-radius: 17px;
    background: linear-gradient(105deg, rgba(55, 55, 55, .82), rgba(37, 39, 39, .88));
    box-shadow: inset 0 1px 0 #ffffff0d
}

.seniorFeature>h2 {
    margin: 0 0 15px;
    font-size: 28px;
    letter-spacing: -.035em
}

.seniorFeatureMeta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 17px;
    color: #e8e8e8;
    font-size: 14px;
    font-weight: 700
}

.seniorFeatureMeta strong {
    color: var(--green)
}

.seniorFeatureMeta i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #8c8c8c
}

.seniorFeatureGrid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    align-items: center
}

.seniorFeatureGrid p {
    margin: 0;
    font-size: 16px;
    line-height: 1.45
}

.seniorFeatureGrid p:first-child {
    padding-right: 34px
}

.seniorFeatureGrid p:last-child {
    padding: 4px 0 4px 34px;
    border-left: 1px solid #464848;
    color: #e7e7e7
}

.seniorFeatureGrid b {
    color: #fff
}

.seniorMoreTitle {
    margin: 48px 0 17px;
    font-size: 34px;
    letter-spacing: -.045em
}

.seniorInfoGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px
}

.seniorInfoGrid article {
    min-height: 285px;
    padding: 30px 27px;
    border: 1px solid #484a4a;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(65, 65, 65, .86), rgba(47, 48, 48, .88));
    box-shadow: inset 0 1px 0 #ffffff0b
}

.seniorInfoGrid h3 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 14px
}

.seniorInfoGrid h3:not(:first-child) {
    margin-top: 18px
}

.seniorInfoGrid p {
    margin: 0;
    color: #c4c4c4;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.48
}

.seniorInfoGrid a {
    color: #fff;
    border-bottom: 1px solid #858585
}

.seniorInfoGrid a:hover {
    color: var(--red);
    border-color: var(--red)
}

@media(max-width:900px) {
    .seniorInfoGrid {
        grid-template-columns: 1fr
    }

    .seniorInfoGrid article {
        min-height: 0
    }

    .seniorFeatureGrid {
        grid-template-columns: 1fr
    }

    .seniorFeatureGrid p:first-child {
        padding-right: 0
    }

    .seniorFeatureGrid p:last-child {
        margin-top: 20px;
        padding: 20px 0 0;
        border-top: 1px solid #464848;
        border-left: 0
    }
}

@media(max-width:650px) {
    .seniorPositioning {
        padding: 58px 20px 75px
    }

    .seniorFeature {
        padding: 25px 22px 23px;
        border-radius: 12px
    }

    .seniorFeature>h2 {
        font-size: 25px
    }

    .seniorFeatureMeta {
        flex-wrap: wrap;
        gap: 8px 10px;
        font-size: 12px
    }

    .seniorFeatureGrid p {
        font-size: 15px
    }

    .seniorMoreTitle {
        margin-top: 39px;
        font-size: 29px
    }

    .seniorInfoGrid {
        gap: 10px
    }

    .seniorInfoGrid article {
        padding: 25px 22px;
        border-radius: 12px
    }
}

/* Randomized hero covers */
.movieHero .heroBackdrop {
    background-color: #080808;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: none;
    opacity: 0;
    transition: opacity .55s ease
}

.movieHero .heroBackdrop.ready {
    opacity: 1
}

.movieHero.heroMono .heroBackdrop {
    background-size: auto 100%;
    background-position: 65% bottom
}

.movieHero.heroTech .heroBackdrop {
    filter: brightness(1.4) saturate(1.08)
}

.movieHero .heroVignette {
    background: linear-gradient(90deg, #090909 0%, rgba(9, 9, 9, .97) 15%, rgba(9, 9, 9, .8) 34%, rgba(9, 9, 9, .27) 56%, rgba(9, 9, 9, .03) 76%), linear-gradient(0deg, var(--bg) 0%, transparent 25%, transparent 74%, rgba(0, 0, 0, .34) 100%)
}

.movieHero.heroTech .heroVignette {
    background: linear-gradient(90deg, #090909 0%, rgba(9, 9, 9, .96) 14%, rgba(9, 9, 9, .74) 32%, rgba(9, 9, 9, .12) 53%, transparent 67%), linear-gradient(0deg, var(--bg) 0%, transparent 25%, transparent 74%, rgba(0, 0, 0, .25) 100%)
}

@media(max-width:650px) {
    .movieHero .heroBackdrop {
        background-position: 68% center
    }

    .movieHero.heroMono .heroBackdrop {
        background-size: auto 100%;
        background-position: 62% bottom
    }

    .movieHero .heroVignette {
        background: linear-gradient(90deg, #090909ed 0%, rgba(9, 9, 9, .74) 45%, rgba(9, 9, 9, .13) 100%), linear-gradient(0deg, var(--bg) 0%, rgba(20, 20, 20, .64) 48%, rgba(0, 0, 0, .05) 82%)
    }
}

/* Regole per le immagini HTML statiche (in precedenza gestite dal componente Image). */
.skillPoster>img,
.skillModalVisual>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.skillModalVisual>img {
    object-position: center 45%
}

/* Modale contatto */
.contactModalBackdrop {
    align-items: center
}

.contactModal {
    width: min(760px, 100%);
    position: relative;
    padding: 46px;
    background: radial-gradient(circle at 88% 0, #2a2a2a, #171717 48%);
    border: 1px solid #3b3b3b;
    border-radius: 9px;
    box-shadow: 0 22px 90px #000;
    animation: rise .3s
}

.contactHeading {
    max-width: 610px;
    margin-bottom: 30px
}

.contactHeading h2 {
    margin: 0 0 14px;
    font-size: clamp(38px, 5vw, 62px);
    line-height: .92;
    letter-spacing: -.055em
}

.contactHeading>p:last-child {
    margin: 0;
    color: #aaa;
    font-size: 16px;
    line-height: 1.6
}

.contactModal form {
    display: grid;
    gap: 18px
}

.contactGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.contactModal label {
    display: grid;
    gap: 7px
}

.contactModal label>span {
    color: #bbb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em
}

.contactModal input,
.contactModal textarea {
    width: 100%;
    border: 1px solid #505050;
    border-radius: 4px;
    outline: 0;
    background: #0d0d0d;
    color: #fff;
    padding: 13px 14px;
    font: inherit;
    transition: border-color .2s, box-shadow .2s
}

.contactModal textarea {
    resize: vertical;
    min-height: 145px;
    line-height: 1.5
}

.contactModal input:focus,
.contactModal textarea:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px #ff4d2e22
}

.contactModal [aria-invalid="true"] {
    border-color: #ff674e
}

.contactPrivacy {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 10px !important
}

.contactPrivacy input {
    width: 17px;
    height: 17px;
    margin: 1px 0 0;
    accent-color: var(--red)
}

.contactPrivacy span {
    font-weight: 500 !important;
    line-height: 1.45
}

.contactTrap {
    position: absolute !important;
    left: -10000px !important;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.contactActions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 3px
}

.contactActions button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border: 0;
    border-radius: 4px;
    background: #fff;
    color: #111;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer
}

.contactActions button:hover {
    background: #ddd
}

.contactActions button:disabled {
    cursor: wait;
    opacity: .55
}

.contactActions p {
    margin: 0;
    color: #aaa;
    font-size: 12px;
    line-height: 1.4
}

.contactActions p.success {
    color: var(--green)
}

.contactActions p.error {
    color: #ff7964
}

@media(max-width:650px) {
    .contactModalBackdrop {
        padding: 0
    }

    .contactModal {
        min-height: 100%;
        padding: 76px 22px 38px;
        border: 0;
        border-radius: 0
    }

    .contactGrid {
        grid-template-columns: 1fr
    }

    .contactHeading h2 {
        font-size: 44px
    }

    .contactHeading>p:last-child {
        font-size: 15px
    }

    .contactActions {
        display: block
    }

    .contactActions p {
        margin-top: 13px
    }
}

img.rpico {
    height: 15px;
    width: 15px;
}