/* Hero and studio story */
.rd-navbar-classic.rd-navbar-static .rd-navbar-brand img {
    display: block;
    width: min(28vw, 330px);
    height: auto;
    max-width: 100%;
}

.rd-navbar-fixed .rd-navbar-brand img {
    display: block;
    width: min(60vw, 240px);
    height: auto;
    max-width: 100%;
}

.cinematic-hero {
    position: relative;
    height: min(850px, 88dvh);
    min-height: 590px;
    overflow: hidden;
    background: #16100f;
    color: #fff;
}

.cinematic-hero .swiper-wrapper,
.cinematic-hero .cinematic-slide {
    height: 100%;
}

.cinematic-hero .cinematic-slide {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 7rem max(7vw, calc((100vw - 1380px) / 2)) 8rem;
    isolation: isolate;
}

.cinematic-slide .slide-background {
    position: absolute;
    inset: -4%;
    z-index: -3;
    background-size: cover;
    background-position: center;
    transform: scale(1.08);
    will-change: transform;
}

.cinematic-slide-one .slide-background { transform-origin: 65% 45%; }
.cinematic-slide-two .slide-background { transform-origin: 30% 45%; }
.cinematic-slide-three .slide-background { transform-origin: 75% 50%; }

.cinematic-slide.swiper-slide-active .slide-background {
    animation: cinematic-camera 7.4s cubic-bezier(.2,.02,.3,1) both;
}

.cinematic-slide-two.swiper-slide-active .slide-background {
    animation-name: cinematic-camera-reverse;
}

@keyframes cinematic-camera {
    from { transform: scale(1.16) translate3d(-1.8%, 1.3%, 0); }
    to { transform: scale(1.04) translate3d(1.8%, -1.3%, 0); }
}

@keyframes cinematic-camera-reverse {
    from { transform: scale(1.16) translate3d(2%, 1%, 0); }
    to { transform: scale(1.04) translate3d(-2%, -1%, 0); }
}

.cinematic-shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(15,10,11,.76) 0%, rgba(20,11,13,.43) 48%, rgba(13,9,10,.12) 100%),
                linear-gradient(0deg, rgba(12,8,9,.42), transparent 33%);
}

.cinematic-copy {
    position: relative;
    width: min(750px, 100%);
    transform: translateY(25px);
    opacity: 0;
}

.cinematic-slide:first-child .cinematic-copy { opacity: 1; }

.cinematic-slide.swiper-slide-active .cinematic-copy {
    animation: cinematic-copy-in 1.1s .3s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes cinematic-copy-in {
    to { transform: translateY(0); opacity: 1; }
}

.cinematic-kicker,
.about-kicker {
    display: block;
    color: #f1c7bd;
    font: 600 .77rem/1.4 Arial, sans-serif;
    letter-spacing: .23em;
    text-transform: uppercase;
}

.cinematic-kicker span { padding: 0 .5em; color: #f4dbbd; }

.cinematic-title {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: 1.1rem 0 1.25rem;
    color: #fffaf5;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(3.7rem, 7.1vw, 7.9rem);
    font-weight: 400;
    line-height: .99;
    letter-spacing: -.065em;
    text-wrap: balance;
    text-shadow: 0 2px 22px rgba(16, 6, 5, .4), 0 0 45px rgba(252, 220, 206, .22);
}

.cinematic-title em,
.about-title em {
    font-weight: 400;
    color: #f3c7ba;
}

.cinematic-slide.swiper-slide-active .cinematic-title {
    animation: title-bloom 1.35s .4s ease-out both;
}

@keyframes title-bloom {
    0% { filter: blur(9px); opacity: .25; text-shadow: 0 0 60px rgba(255, 243, 223, .95); }
    45% { filter: blur(0); opacity: 1; text-shadow: 0 0 18px rgba(255, 235, 207, .85), 0 0 60px rgba(224, 139, 127, .62); }
    100% { filter: blur(0); opacity: 1; text-shadow: 0 2px 22px rgba(16, 6, 5, .4), 0 0 45px rgba(252, 220, 206, .22); }
}

.cinematic-title::after,
.about-title::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.05) 43%, rgba(255,252,235,.85) 49%, rgba(255,255,255,.06) 55%, transparent 64%);
    background-size: 230% 100%;
    background-position: 120% 0;
    mix-blend-mode: screen;
}

.cinematic-slide.swiper-slide-active .cinematic-title::after,
.cinematic-about.is-visible .about-title::after {
    animation: title-light-sweep 1.4s .7s ease-out both;
}

@keyframes title-light-sweep { to { background-position: -70% 0; } }

.cinematic-copy p {
    max-width: 540px;
    margin: 0 0 2rem;
    color: #fff8f3;
    font: 400 clamp(1rem, 1.4vw, 1.22rem)/1.6 Arial, sans-serif;
    letter-spacing: .015em;
    white-space: normal;
    overflow-wrap: break-word;
}

.cinematic-link {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    padding: .85rem 0;
    border-bottom: 1px solid rgba(255,242,226,.72);
    color: #fffaf5;
    font: 600 .75rem/1.3 Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .17em;
    transition: gap .25s ease, color .25s ease;
}

.cinematic-link:hover,
.cinematic-link:focus-visible { color: #f6c4b6; gap: 1.6rem; }
.cinematic-link:focus-visible,
.cinematic-pagination .swiper-pagination-bullet:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }

.cinematic-hero .cinematic-pagination {
    position: absolute;
    left: 7vw;
    bottom: 2.4rem;
    width: auto;
    z-index: 5;
    display: flex;
    gap: .7rem;
}

.cinematic-pagination .swiper-pagination-bullet {
    width: 30px;
    height: 2px;
    margin: 0 !important;
    border: 0;
    border-radius: 0;
    background: rgba(255,255,255,.56);
    opacity: 1;
    transition: width .4s, background .4s;
}

.cinematic-pagination .swiper-pagination-bullet-active { width: 60px; background: #fff5eb; }

.cinematic-index {
    position: absolute;
    z-index: 5;
    right: 7vw;
    bottom: 2.1rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    color: rgba(255,255,255,.7);
    font: 500 .85rem Arial, sans-serif;
    letter-spacing: .1em;
}

.cinematic-current { color: white; }
.cinematic-rule { width: 32px; height: 1px; background: rgba(255,255,255,.7); }

.cinematic-about {
    position: relative;
    overflow: hidden;
    padding-top: clamp(5rem, 9vw, 9rem);
    padding-bottom: clamp(5rem, 9vw, 9rem);
    background: radial-gradient(circle at 77% 46%, rgba(146,53,58,.15), transparent 39%), #100d0d !important;
}

.cinematic-about .container { max-width: 1320px; }
.cinematic-about .row { gap: 1rem 0; }
.cinematic-about .block-xs { max-width: 610px; }

.about-title {
    position: relative;
    width: fit-content;
    margin: 1rem 0 1.5rem;
    color: #fff9f4;
    font: 400 clamp(3.2rem, 5vw, 6.2rem)/1.04 Georgia, 'Times New Roman', serif;
    letter-spacing: -.06em;
    text-wrap: balance;
    text-shadow: 0 0 28px rgba(234, 150, 133, .12);
}

.cinematic-about.is-visible .about-title { animation: title-bloom 1.4s ease-out both; }
.cinematic-about .divider-lg { width: 72px; margin: 0 0 2rem; background: none; }
.cinematic-about .divider-lg::after { display: block; width: 72px; height: 2px; background: #d2857c; }
.cinematic-about .common-head-border-right { border: 0; padding: 0; }
.cinematic-about p.big { max-width: 57ch; color: #e8dcd7; font: 400 1.02rem/1.9 Arial, sans-serif; }
.cinematic-about p.big + p.big { margin-top: 1.3rem; }
.cinematic-about .brand { color: #f3c5b7; }

.about-image-frame { position: relative; margin: 1rem 0 2rem 2rem; }
.about-image-frame::before {
    content: '';
    position: absolute;
    inset: -1.5rem 1.5rem 1.5rem -1.5rem;
    border: 1px solid rgba(232,174,158,.45);
    pointer-events: none;
}
.about-image-frame .box-images-item { overflow: hidden; background: #271b1b; }
.about-image-frame .box-images-item:first-child {
    display: block;
    width: 100%;
    margin-left: 0;
    border: 0;
    box-shadow: 0 25px 70px rgba(0,0,0,.3);
}
.about-image-frame .box-images-item img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1.08; object-fit: cover; }
.about-image-caption { display: block; padding-top: 1rem; color: #d9b8ad; font: 600 .7rem Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.about-image-caption span { color: #fff; padding: 0 .5rem; }

@media (max-width: 767px) {
    .cinematic-hero { height: 82dvh; min-height: 600px; max-height: 820px; }
    .cinematic-hero .cinematic-slide { align-items: flex-end; padding: 6rem 7vw 8rem; }
    .cinematic-slide .slide-background { background-position: center top; }
    .cinematic-shade { background: linear-gradient(0deg, rgba(12,8,9,.88), rgba(13,8,9,.3) 58%, rgba(13,8,9,.05)); }
    .cinematic-title { font-size: clamp(3.1rem, 12vw, 5.5rem); }
    .cinematic-copy p { font-size: 1rem; line-height: 1.55; }
    .cinematic-kicker { font-size: .65rem; letter-spacing: .18em; }
    .cinematic-about .row { gap: 3rem 0; }
    .about-image-frame { margin-left: 1.2rem; margin-right: .5rem; }
    .about-image-frame::before { inset: -1rem 1rem 1rem -1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cinematic-slide.swiper-slide-active .slide-background,
    .cinematic-slide.swiper-slide-active .cinematic-copy,
    .cinematic-slide.swiper-slide-active .cinematic-title,
    .cinematic-slide.swiper-slide-active .cinematic-title::after,
    .cinematic-about.is-visible .about-title,
    .cinematic-about.is-visible .about-title::after { animation: none !important; }
    .cinematic-copy { opacity: 1; transform: none; }
    .cinematic-link { transition: none; }
}
