:root {
    --green: #283618;
    --green-deep: #1f2b12;

    --rust: #bc6c25;
    --rust-dark: #945018;

    --amber: #dda15e;
    --amber-light: #edbd82;

    --ink: #171714;
    --text: #24231f;
    --muted: #777267;

    --paper: #ffffff;
    --paper-soft: #f7f4ed;

    --line: #e7e1d7;

    --container: 1180px;
    --reading: 760px;

    --ease:
        cubic-bezier(.2,.7,.2,1);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;

    min-height: 100vh;

    background: var(--paper);
    color: var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
}

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

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

.site-container {
    width: min(
        calc(100% - 48px),
        var(--container)
    );

    margin-inline: auto;
}

.skip-link {
    position: fixed;
    z-index: 9999;

    top: 12px;
    left: 12px;

    padding: 10px 14px;

    background: var(--amber);
    color: var(--green);

    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}


/* HEADER */

.site-header {
    position: relative;

    background: var(--green);
    color: #fff;

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

.header-inner {
    min-height: 88px;

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

    gap: 40px;
}

.brand {
    display: flex;
    align-items: center;

    gap: 13px;
}

.brand-symbol {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border:
        1px
        solid
        rgba(221,161,94,.52);

    color: var(--amber);

    transition:
        background .25s var(--ease),
        color .25s var(--ease),
        transform .25s var(--ease);
}

.brand:hover .brand-symbol {
    background: var(--amber);
    color: var(--green);

    transform: rotate(-3deg);
}

.brand-copy {
    display: flex;
    flex-direction: column;
}

.brand-copy strong {
    color: #fff;

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

    font-weight: 700;
}

.brand-copy small {
    margin-top: 5px;

    color: rgba(255,255,255,.50);

    font-size: 11px;
}

.main-nav {
    display: flex;
    align-items: center;

    gap: 32px;
}

.main-nav a {
    position: relative;

    min-height: 44px;

    display: flex;
    align-items: center;

    gap: 8px;

    color: rgba(255,255,255,.64);

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

    transition:
        color .2s var(--ease);
}

.main-nav a i {
    color: var(--amber);

    font-size: 12px;
}

.main-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -22px;

    height: 3px;

    background: var(--amber);

    transform: scaleX(0);

    transition:
        transform .28s var(--ease);
}

.main-nav a:hover,
.main-nav a.active {
    color: #fff;
}

.main-nav a:hover::after,
.main-nav a.active::after {
    transform: scaleX(1);
}


/* GENERIC */

.site-main {
    min-height: 60vh;
}

.hero-eyebrow {
    display: flex;
    align-items: center;

    gap: 10px;

    color: var(--amber);

    font-size: 11px;
    line-height: 1;

    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.hero-eyebrow span {
    width: 28px;
    height: 2px;

    background: var(--amber);
}

.primary-link {
    min-height: 50px;

    padding: 0 21px;

    display: inline-flex;
    align-items: center;

    gap: 14px;

    background: var(--amber);
    color: var(--green);

    font-size: 13px;
    font-weight: 800;

    transition:
        transform .25s var(--ease),
        background .25s var(--ease);
}

.primary-link:hover {
    transform: translateY(-3px);

    background: var(--amber-light);
}

.primary-link i,
.read-link i {
    transition:
        transform .25s var(--ease);
}

.primary-link:hover i,
.read-link:hover i {
    transform: translateX(5px);
}


/* HOME */

.home-hero {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            var(--green) 0%,
            var(--green) 51%,
            var(--rust) 51%,
            var(--rust) 100%
        );
}

.home-hero::after {
    content: "";

    position: absolute;

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

    height: 7px;

    background: var(--amber);
}

.home-hero-grid {
    min-height: 610px;

    display: grid;

    grid-template-columns:
        1.06fr
        .94fr;

    align-items: stretch;
}

.home-hero-copy {
    position: relative;
    z-index: 2;

    padding: 112px 60px 100px 0;

    animation:
        heroCopyIn
        .85s
        var(--ease)
        both;
}

.home-hero-copy h1 {
    margin: 22px 0 27px;

    color: #fff;

    font-size: clamp(62px, 7vw, 96px);
    line-height: .91;

    font-weight: 520;
    letter-spacing: -.065em;
}

.home-hero-copy p {
    max-width: 610px;

    margin: 0;

    color: rgba(255,255,255,.67);

    font-size: 19px;
    line-height: 1.75;
}

.home-hero-copy .primary-link {
    margin-top: 38px;
}

.home-cinema {
    position: relative;

    overflow: hidden;

    min-height: 100%;

    display: grid;
    place-items: center;

    background: var(--rust);
}

.home-cinema::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 32%;
    height: 100%;

    background: var(--amber);

    opacity: .13;
}

.cinema-word {
    position: absolute;

    top: 50%;
    right: -100px;

    transform:
        translateY(-50%)
        rotate(-90deg);

    color: rgba(221,161,94,.15);

    font-size: 92px;
    line-height: 1;

    font-weight: 900;
    letter-spacing: .10em;
}

.cinema-rings {
    position: absolute;

    width: 510px;
    height: 510px;
}

.cinema-rings span {
    position: absolute;

    inset: 0;

    border:
        1px
        solid
        rgba(221,161,94,.16);

    border-radius: 50%;
}

.cinema-rings span:nth-child(2) {
    inset: 70px;
}

.cinema-rings span:nth-child(3) {
    inset: 140px;
}

.cinema-mark {
    position: relative;
    z-index: 2;

    width: 140px;
    height: 140px;

    display: grid;
    place-items: center;

    border:
        2px
        solid
        rgba(221,161,94,.46);

    color: var(--amber);

    font-size: 53px;

    animation:
        cinemaFloat
        4.8s
        ease-in-out
        infinite;
}


/* LIST HERO */

.listing-hero {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            105deg,
            var(--green) 0%,
            var(--green) 57%,
            var(--rust) 57%,
            var(--rust) 100%
        );

    color: #fff;
}

.listing-hero::after {
    content: "";

    position: absolute;

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

    height: 7px;

    background: var(--amber);
}

.listing-hero-inner {
    min-height: 340px;

    display: grid;

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

    align-items: center;
}

.listing-hero.compact
.listing-hero-inner {
    min-height: 285px;
}

.listing-hero h1 {
    margin: 18px 0 15px;

    color: #fff;

    font-size: clamp(52px, 6vw, 78px);
    line-height: .95;

    font-weight: 520;
    letter-spacing: -.055em;

    animation:
        heroCopyIn
        .75s
        var(--ease)
        both;
}

.listing-hero p {
    max-width: 640px;

    margin: 0;

    color: rgba(255,255,255,.63);

    font-size: 16px;
    line-height: 1.7;
}

.listing-hero-art {
    position: relative;

    width: 220px;
    height: 220px;

    justify-self: end;

    display: grid;
    place-items: center;

    border:
        1px
        solid
        rgba(221,161,94,.28);

    color: var(--amber);

    font-size: 62px;

    transform: rotate(4deg);

    animation:
        artIn
        .8s
        var(--ease)
        both;
}

.listing-hero-art::before,
.listing-hero-art::after {
    content: "";

    position: absolute;

    border:
        1px
        solid
        rgba(221,161,94,.14);
}

.listing-hero-art::before {
    inset: -34px;
}

.listing-hero-art::after {
    inset: -68px;
}


/* BREADCRUMBS */

.breadcrumbs {
    min-height: 58px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    color: #979084;

    font-size: 11px;
}

.breadcrumbs a {
    color: var(--rust);

    font-weight: 700;
}

.breadcrumbs i {
    color: #c8c1b7;

    font-size: 8px;
}


/* SECTIONS */

.listing-content {
    padding-top: 68px;
    padding-bottom: 110px;
}

.category-section + .articles-section {
    margin-top: 76px;
}

.section-title {
    margin-bottom: 28px;

    display: grid;

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

    align-items: center;

    gap: 22px;
}

.section-title span {
    color: var(--ink);

    font-size: clamp(29px, 3vw, 38px);
    line-height: 1;

    font-weight: 550;
    letter-spacing: -.04em;
}

.section-title div {
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--rust),
            var(--amber)
        );

    transform-origin: left;

    transition:
        transform .8s var(--ease);
}

.js [data-reveal]:not(.is-visible)
.section-title div {
    transform: scaleX(0);
}


/* CATEGORIES */

.category-links {
    display: grid;

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

    column-gap: 50px;

    border-top: 1px solid var(--line);
}

.category-link {
    min-height: 84px;

    display: grid;

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

    align-items: center;

    gap: 14px;

    border-bottom: 1px solid var(--line);

    transition:
        padding .25s var(--ease),
        color .25s var(--ease);
}

.category-number {
    color: var(--amber);

    font-size: 12px;
    font-weight: 800;
}

.category-link strong {
    color: var(--ink);

    font-size: 16px;
    font-weight: 650;
}

.category-link i {
    color: var(--rust);

    transition:
        transform .25s var(--ease);
}

.category-link:hover {
    padding-left: 10px;
}

.category-link:hover strong {
    color: var(--rust);
}

.category-link:hover i {
    transform: translateX(6px);
}


/* CINEMATIC ARTICLE LIST */

.cinematic-list {
    display: flex;
    flex-direction: column;

    gap: 88px;
}

.cinematic-entry {
    position: relative;

    min-height: 300px;
}

.cinematic-entry.has-image {
    padding-bottom: 48px;
}

.cinematic-media {
    position: relative;

    display: block;

    width: 76%;

    overflow: hidden;

    background: var(--paper-soft);

    box-shadow:
        0
        28px
        65px
        rgba(40,54,24,.10);
}

.cinematic-media::after {
    content: "";

    position: absolute;

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

    height: 6px;

    background:
        linear-gradient(
            90deg,
            var(--rust) 0 68%,
            var(--amber) 68% 100%
        );
}

.cinematic-media img {
    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    transition:
        transform
        .7s
        var(--ease),
        filter
        .5s
        var(--ease);
}

.cinematic-entry:hover
.cinematic-media img {
    transform: scale(1.035);

    filter:
        contrast(1.03)
        saturate(1.02);
}

.cinematic-card {
    position: relative;

    max-width: 760px;

    padding: 30px 0 0;
}

.cinematic-entry.has-image
.cinematic-card {
    position: absolute;

    z-index: 2;

    width: min(46%, 500px);

    right: 0;
    bottom: 0;

    padding:
        34px
        36px
        32px;

    border-left: 6px solid var(--rust);

    background: #fff;

    box-shadow:
        0
        25px
        60px
        rgba(40,54,24,.10);

    transition:
        transform .35s var(--ease),
        box-shadow .35s var(--ease);
}

.cinematic-entry.has-image:hover
.cinematic-card {
    transform: translateY(-7px);

    box-shadow:
        0
        32px
        72px
        rgba(40,54,24,.14);
}

.cinematic-entry:nth-child(even)
.cinematic-media {
    margin-left: auto;
}

.cinematic-entry:nth-child(even)
.cinematic-card {
    right: auto;
    left: 0;

    border-left: 0;
    border-right: 6px solid var(--amber);
}

.entry-meta {
    margin-bottom: 12px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px 16px;

    color: var(--rust);

    font-size: 10px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cinematic-card h2 {
    margin: 0;

    color: var(--ink);

    font-size: clamp(27px, 3vw, 39px);
    line-height: 1.13;

    font-weight: 560;
    letter-spacing: -.04em;
}

.cinematic-card h2 a {
    transition:
        color .22s var(--ease);
}

.cinematic-card h2 a:hover {
    color: var(--rust);
}

.cinematic-card p {
    margin: 15px 0 0;

    color: var(--muted);

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

.read-link {
    margin-top: 22px;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: var(--rust);

    font-size: 12px;
    font-weight: 800;
}


/* STORY */

.story-hero {
    position: relative;

    overflow: visible;

    background:
        linear-gradient(
            90deg,
            var(--green) 0%,
            var(--green) 58%,
            var(--rust) 58%,
            var(--rust) 100%
        );

    color: #fff;
}

.story-hero::after {
    content: "";

    position: absolute;

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

    height: 7px;

    background: var(--amber);
}

.story-hero-grid {
    position: relative;

    min-height: 440px;

    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(400px, 1.1fr);

    align-items: center;

    gap: 60px;
}

.story-heading {
    position: relative;
    z-index: 3;

    padding: 72px 0 84px;

    animation:
        heroCopyIn
        .75s
        var(--ease)
        both;
}

.story-heading h1 {
    margin: 21px 0 0;

    color: #fff;

    font-size: clamp(50px, 6vw, 78px);
    line-height: .98;

    font-weight: 520;
    letter-spacing: -.055em;

    overflow-wrap: anywhere;
}

.story-date {
    margin-top: 22px;

    display: flex;
    align-items: center;

    gap: 9px;

    color: rgba(255,255,255,.53);

    font-size: 12px;
}

.story-date i {
    color: var(--amber);
}

.story-intro {
    max-width: 580px;

    margin: 23px 0 0;

    color: rgba(255,255,255,.64);

    font-size: 16px;
    line-height: 1.75;
}

.story-featured {
    position: relative;
    z-index: 4;

    align-self: end;

    margin: 48px 0 -72px;

    animation:
        mediaReveal
        .95s
        var(--ease)
        both;
}

.story-featured-frame {
    position: relative;

    padding:
        8px
        8px
        8px
        0;

    background:
        linear-gradient(
            180deg,
            var(--amber),
            var(--rust)
        );

    box-shadow:
        0
        32px
        78px
        rgba(20,25,15,.24);
}

.story-featured-frame::before {
    content: "";

    position: absolute;

    z-index: 3;

    top: -16px;
    right: 30px;

    width: 88px;
    height: 32px;

    background: var(--amber);

    opacity: .95;
}

.story-featured img {
    position: relative;
    z-index: 2;

    width: 100%;

    aspect-ratio: 16 / 10;

    object-fit: cover;

    transition:
        transform
        .7s
        var(--ease);
}

.story-featured:hover img {
    transform: scale(1.018);
}

.story-art {
    width: 230px;
    height: 230px;

    justify-self: end;

    display: grid;
    place-items: center;

    border:
        1px
        solid
        rgba(221,161,94,.30);

    color: var(--amber);

    font-size: 70px;
}

.story-content {
    padding:
        126px
        0
        105px;

    background: #fff;
}

.story-prose {
    width: min(
        calc(100% - 48px),
        var(--reading)
    );

    margin-inline: auto;

    padding-top: 38px;

    border-top: 1px solid var(--line);

    color: #302f2b;

    font-size: 16px;
    line-height: 1.92;
}


/* FOOTER */

.site-footer {
    position: relative;

    background: var(--green);
    color: #fff;
}

.site-footer::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--rust),
            var(--amber)
        );
}

.footer-grid {
    min-height: 165px;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 45px;
}

.footer-brand {
    display: flex;
    align-items: center;

    gap: 12px;
}

.footer-symbol {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border:
        1px
        solid
        rgba(221,161,94,.45);

    color: var(--amber);
}

.footer-brand > div {
    display: flex;
    flex-direction: column;
}

.footer-brand strong {
    font-size: 13px;
}

.footer-brand small {
    margin-top: 4px;

    color: rgba(255,255,255,.43);

    font-size: 10px;
}

.footer-nav {
    display: flex;

    gap: 25px;
}

.footer-nav a {
    color: rgba(255,255,255,.56);

    font-size: 11px;

    transition:
        color .2s var(--ease);
}

.footer-nav a:hover {
    color: var(--amber);
}

.footer-copy {
    justify-self: end;

    color: rgba(255,255,255,.42);

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

    text-align: right;
}


/* REVEALS */

.js [data-reveal] {
    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity
        .75s
        var(--ease),
        transform
        .75s
        var(--ease);
}

.js [data-reveal].is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* ANIMATION */

@keyframes heroCopyIn {
    from {
        opacity: 0;

        transform:
            translateX(-30px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}

@keyframes artIn {
    from {
        opacity: 0;

        transform:
            translateX(40px)
            rotate(8deg);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            rotate(4deg);
    }
}

@keyframes mediaReveal {
    from {
        opacity: 0;

        clip-path:
            inset(
                0
                100%
                0
                0
            );

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        clip-path:
            inset(
                0
                0
                0
                0
            );

        transform:
            translateY(0);
    }
}

@keyframes cinemaFloat {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-10px)
            rotate(-2deg);
    }
}


/* TABLET */

@media (max-width: 980px) {

    .home-hero {
        background:
            linear-gradient(
                180deg,
                var(--green) 0%,
                var(--green) 58%,
                var(--rust) 58%,
                var(--rust) 100%
            );
    }

    .home-hero-grid {
        grid-template-columns: 1fr;
    }

    .home-hero-copy {
        padding:
            85px
            0
            70px;
    }

    .home-cinema {
        min-height: 300px;
    }

    .listing-hero-inner {
        grid-template-columns:
            minmax(0, 1fr)
            200px;
    }

    .listing-hero-art {
        width: 160px;
        height: 160px;

        font-size: 48px;
    }

    .story-hero {
        background:
            linear-gradient(
                180deg,
                var(--green) 0%,
                var(--green) 58%,
                var(--rust) 58%,
                var(--rust) 100%
            );
    }

    .story-hero-grid {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .story-heading {
        padding-bottom: 52px;
    }

    .story-featured {
        width: min(100%, 820px);

        margin:
            0
            auto
            -65px;
    }

    .story-art {
        margin:
            0
            auto
            45px;
    }

    .cinematic-entry.has-image
    .cinematic-card {
        width: min(52%, 470px);
    }
}


/* MOBILE */

@media (max-width: 720px) {

    .site-container {
        width: calc(100% - 30px);
    }

    .header-inner {
        min-height: 70px;
    }

    .brand-symbol {
        width: 36px;
        height: 36px;
    }

    .brand-copy strong {
        font-size: 14px;
    }

    .brand-copy small {
        display: none;
    }

    .main-nav {
        gap: 7px;
    }

    .main-nav a {
        width: 38px;

        justify-content: center;
    }

    .main-nav a span {
        display: none;
    }

    .main-nav a::after {
        bottom: -14px;
    }

    .home-hero-copy h1 {
        font-size:
            clamp(
                50px,
                16vw,
                70px
            );
    }

    .home-cinema {
        min-height: 250px;
    }

    .cinema-rings {
        width: 340px;
        height: 340px;
    }

    .cinema-mark {
        width: 105px;
        height: 105px;

        font-size: 40px;
    }

    .listing-hero {
        background: var(--green);
    }

    .listing-hero-inner {
        min-height: 265px;

        grid-template-columns: 1fr;
    }

    .listing-hero-art {
        display: none;
    }

    .listing-hero h1 {
        font-size:
            clamp(
                45px,
                14vw,
                62px
            );
    }

    .listing-content {
        padding-top: 50px;
        padding-bottom: 80px;
    }

    .category-links {
        grid-template-columns: 1fr;
    }

    .category-section +
    .articles-section {
        margin-top: 58px;
    }

    .section-title span {
        font-size: 29px;
    }

    .cinematic-list {
        gap: 58px;
    }

    .cinematic-entry.has-image {
        padding-bottom: 0;
    }

    .cinematic-media {
        width: 100%;
    }

    .cinematic-entry.has-image
    .cinematic-card {
        position: relative;

        width: calc(100% - 18px);

        right: auto;
        left: 18px;
        bottom: auto;

        margin-top: -25px;

        padding:
            25px
            24px;

        border-left: 4px solid var(--rust);
        border-right: 0;

        box-shadow:
            0
            18px
            45px
            rgba(40,54,24,.11);
    }

    .cinematic-entry:nth-child(even)
    .cinematic-card {
        left: 18px;

        border-right: 0;
        border-left: 4px solid var(--amber);
    }

    .cinematic-card h2 {
        font-size: 28px;
    }

    .story-heading {
        padding:
            54px
            0
            43px;
    }

    .story-heading h1 {
        font-size:
            clamp(
                44px,
                13vw,
                60px
            );
    }

    .story-featured {
        width: calc(100% - 10px);

        margin-bottom: -42px;
    }

    .story-featured-frame {
        padding:
            5px
            5px
            5px
            0;
    }

    .story-featured-frame::before {
        top: -10px;
        right: 18px;

        width: 60px;
        height: 20px;
    }

    .story-content {
        padding:
            82px
            0
            70px;
    }

    .story-prose {
        width: calc(100% - 40px);

        font-size: 16px;
        line-height: 1.82;
    }

    .footer-grid {
        padding:
            35px
            0;

        min-height: 0;

        grid-template-columns: 1fr;

        gap: 24px;
    }

    .footer-nav {
        order: 2;
    }

    .footer-copy {
        order: 3;

        justify-self: start;

        text-align: left;
    }
}


@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;

        transition-duration:
            .01ms !important;
    }

    .js [data-reveal] {
        opacity: 1;

        transform: none;
    }
}


/* =========================================================
   MEDIA — SUBTLE SOFT CORNERS
   ========================================================= */

/* Single article featured image */

.story-featured-frame {
    border-radius: 10px;
}

.story-featured img {
    border-radius: 7px;
}


/* Blog / category featured images */

.cinematic-media {
    border-radius: 8px;
}

.cinematic-media img {
    border-radius: 8px;
}

.cinematic-media::after {
    border-radius:
        0
        0
        8px
        8px;
}


/* Keep corners slightly tighter on mobile */

@media (max-width: 720px) {

    .story-featured-frame {
        border-radius: 8px;
    }

    .story-featured img {
        border-radius: 5px;
    }

    .cinematic-media,
    .cinematic-media img {
        border-radius: 6px;
    }

    .cinematic-media::after {
        border-radius:
            0
            0
            6px
            6px;
    }
}



/* =========================================================
   DATABASE PUBLIC MENU
   ========================================================= */

.main-nav {
    position: relative;

    display: flex;
    align-items: center;
}

.main-nav-list,
.nav-submenu {
    margin: 0;
    padding: 0;

    list-style: none;
}

.main-nav-list {
    display: flex;
    align-items: center;

    gap: 27px;
}

.nav-node {
    position: relative;
}

.nav-node-head {
    display: flex;
    align-items: center;
}

.main-nav .nav-link {
    position: relative;

    width: auto;
    min-height: 44px;

    display: flex;
    align-items: center;

    gap: 8px;

    color: rgba(255,255,255,.64);

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

    transition:
        color .2s var(--ease);
}

.main-nav .nav-link > i {
    color: var(--amber);

    font-size: 12px;
}

.main-nav .nav-label {
    cursor: default;
}

.nav-node.active >
.nav-node-head >
.nav-link,
.nav-node:hover >
.nav-node-head >
.nav-link {
    color: #fff;
}

.main-nav-list >
.nav-node >
.nav-node-head >
.nav-link::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -22px;

    height: 3px;

    background: var(--amber);

    transform: scaleX(0);

    transition:
        transform .28s var(--ease);
}

.main-nav-list >
.nav-node.active >
.nav-node-head >
.nav-link::after,
.main-nav-list >
.nav-node:hover >
.nav-node-head >
.nav-link::after {
    transform: scaleX(1);
}

.nav-sub-toggle {
    width: 28px;
    height: 36px;

    margin-left: 2px;
    padding: 0;

    display: grid;
    place-items: center;

    border: 0;

    background: transparent;
    color: var(--amber);

    cursor: pointer;

    font-size: 9px;
}

.nav-sub-toggle i {
    transition:
        transform .25s var(--ease);
}

.nav-node:hover >
.nav-node-head >
.nav-sub-toggle i,
.nav-node:focus-within >
.nav-node-head >
.nav-sub-toggle i,
.nav-node.sub-open >
.nav-node-head >
.nav-sub-toggle i {
    transform: rotate(180deg);
}

.nav-submenu {
    position: absolute;
    z-index: 80;

    top: calc(100% + 21px);
    left: -18px;

    min-width: 230px;

    padding: 8px;

    border-top: 3px solid var(--amber);

    background: #fff;

    box-shadow:
        0 24px 55px
        rgba(24,31,15,.18);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(10px);

    transition:
        opacity .22s var(--ease),
        visibility .22s var(--ease),
        transform .22s var(--ease);
}

.nav-node:hover >
.nav-submenu,
.nav-node:focus-within >
.nav-submenu,
.nav-node.sub-open >
.nav-submenu {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0);
}

.nav-submenu .nav-node {
    width: 100%;
}

.nav-submenu .nav-node-head {
    width: 100%;
}

.main-nav
.nav-submenu
.nav-link {
    width: 100%;
    min-height: 46px;

    padding: 0 12px;

    color: #505341;

    font-size: 12px;
}

.main-nav
.nav-submenu
.nav-link > i {
    width: 18px;

    color: var(--rust);

    text-align: center;
}

.main-nav
.nav-submenu
.nav-node:hover
.nav-link,
.main-nav
.nav-submenu
.nav-node.active
.nav-link {
    background:
        rgba(221,161,94,.10);

    color: var(--green);
}

.nav-submenu
.nav-submenu {
    top: -8px;
    left: calc(100% + 8px);
}

.public-menu-toggle {
    display: none;

    width: 42px;
    height: 42px;

    padding: 0;

    border:
        1px
        solid
        rgba(221,161,94,.35);

    background: transparent;
    color: var(--amber);

    cursor: pointer;

    font-size: 16px;
}


/* MOBILE MENU */

@media (max-width: 1040px) {

    .main-nav {
        margin-left: auto;
    }

    .public-menu-toggle {
        display: grid;
        place-items: center;
    }

    .main-nav-list {
        position: absolute;
        z-index: 90;

        top: calc(100% + 14px);
        right: 0;

        width: min(
            86vw,
            330px
        );

        padding: 9px;

        display: none;

        border-top: 3px solid var(--amber);

        background: var(--green);

        box-shadow:
            0 25px 55px
            rgba(20,27,12,.28);
    }

    .main-nav.menu-open
    .main-nav-list {
        display: block;

        animation:
            publicMenuIn
            .24s
            var(--ease)
            both;
    }

    .main-nav-list >
    .nav-node {
        width: 100%;
    }

    .main-nav-list
    .nav-node-head {
        width: 100%;
    }

    .main-nav
    .nav-link {
        width: 100%;
        min-height: 48px;

        padding: 0 11px;

        justify-content: flex-start;

        color: rgba(255,255,255,.72);
    }

    .main-nav
    .nav-link span {
        display: inline;
    }

    .main-nav-list >
    .nav-node >
    .nav-node-head >
    .nav-link::after {
        display: none;
    }

    .nav-sub-toggle {
        flex: 0 0 42px;

        color: var(--amber);
    }

    .nav-submenu {
        position: static;

        min-width: 0;

        padding:
            0
            0
            4px
            20px;

        display: none;

        border: 0;

        background:
            rgba(255,255,255,.035);

        box-shadow: none;

        opacity: 1;
        visibility: visible;

        transform: none;
    }

    .nav-node.sub-open >
    .nav-submenu {
        display: block;
    }

    .main-nav
    .nav-submenu
    .nav-link {
        min-height: 43px;

        color:
            rgba(255,255,255,.62);
    }

    .main-nav
    .nav-submenu
    .nav-node:hover
    .nav-link,
    .main-nav
    .nav-submenu
    .nav-node.active
    .nav-link {
        background:
            rgba(221,161,94,.08);

        color: #fff;
    }

    .nav-submenu
    .nav-submenu {
        padding-left: 16px;
    }
}

@keyframes publicMenuIn {

    from {
        opacity: 0;

        transform:
            translateY(-8px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}



/* =========================================================
   NAVIGATION FIXES + LANGUAGE SWITCH
   ========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}


/*
 * Header spacing.
 */

.header-inner {
    gap: 20px;
}

.main-nav {
    margin-left: auto;
}

.main-nav-list {
    gap: 20px;
}


/*
 * Old generic .main-nav a::after rule was also hitting
 * submenu links and drawing orange lines inside dropdowns.
 */

.main-nav
.nav-submenu
.nav-link::after,
.main-nav
.nav-submenu
a::after {
    content: none !important;
    display: none !important;
}


/*
 * Third level opens to the LEFT.
 * This prevents Blog -> Analiz -> Film from expanding
 * the document viewport.
 */

.nav-submenu
.nav-submenu {
    left: auto;
    right: calc(100% + 8px);
}


/*
 * Language switch.
 */

.language-switcher {
    position: relative;

    flex: 0 0 auto;
}

.language-current {
    min-width: 66px;
    height: 40px;

    padding: 0 11px;

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

    gap: 7px;

    border:
        1px
        solid
        rgba(221,161,94,.30);

    border-radius: 8px;

    background:
        rgba(255,255,255,.035);

    color: #fff;

    cursor: pointer;

    transition:
        background .2s var(--ease),
        border-color .2s var(--ease);
}

.language-current:hover,
.language-switcher.open
.language-current {
    border-color:
        rgba(221,161,94,.62);

    background:
        rgba(221,161,94,.08);
}

.language-current >
.fa-globe {
    color: var(--amber);

    font-size: 12px;
}

.language-current strong {
    font-size: 11px;
    letter-spacing: .08em;
}

.language-chevron {
    color:
        rgba(255,255,255,.55);

    font-size: 8px;

    transition:
        transform .22s var(--ease);
}

.language-switcher.open
.language-chevron {
    transform: rotate(180deg);
}

.language-dropdown {
    position: absolute;
    z-index: 100;

    top: calc(100% + 13px);
    right: 0;

    width: 190px;

    padding: 7px;

    border-top:
        3px
        solid
        var(--amber);

    background: #fff;

    box-shadow:
        0 24px 55px
        rgba(24,31,15,.18);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(8px);

    transition:
        opacity .2s var(--ease),
        visibility .2s var(--ease),
        transform .2s var(--ease);
}

.language-switcher.open
.language-dropdown {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0);
}

.language-option {
    min-height: 46px;

    padding: 0 10px;

    display: grid;

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

    align-items: center;

    gap: 6px;

    color: #626454;

    font-size: 11px;

    border-radius: 6px;
}

.language-option:hover {
    background:
        rgba(221,161,94,.11);

    color: var(--green);
}

.language-option.active {
    background:
        rgba(40,54,24,.07);

    color: var(--green);
}

.language-option strong {
    color: var(--rust);

    font-size: 10px;
    letter-spacing: .08em;
}

.language-option > i {
    color: var(--rust);

    font-size: 9px;
}

.language-option.unavailable {
    opacity: .38;

    cursor: default;
}

.language-option.unavailable:hover {
    background: transparent;
    color: #626454;
}


/*
 * Slightly denser desktop header before hamburger mode.
 */

@media (
    min-width: 1041px
)
and (
    max-width: 1240px
) {

    .main-nav-list {
        gap: 13px;
    }

    .main-nav .nav-link {
        gap: 6px;

        font-size: 12px;
    }

    .header-inner {
        gap: 14px;
    }
}


/*
 * Hamburger navigation starts earlier because the full
 * multilingual navigation is wider than the original menu.
 */

@media (max-width: 1040px) {

    .main-nav {
        margin-left: auto;
    }

    .language-switcher {
        margin-left: 2px;
    }

    .language-dropdown {
        top: calc(100% + 15px);
    }
}


@media (max-width: 520px) {

    .header-inner {
        gap: 8px;
    }

    .language-current {
        min-width: 52px;

        padding-inline: 8px;
    }

    .language-current >
    .fa-globe {
        display: none;
    }

    .language-dropdown {
        width: 178px;
    }
}



/* =========================================================
   DROPDOWN FINAL POLISH
   ========================================================= */

@media (min-width: 1041px) {

    .nav-submenu {
        border-radius:
            0
            0
            10px
            10px;

        transition:
            opacity .14s var(--ease) .09s,
            visibility 0s linear .23s,
            transform .14s var(--ease) .09s;
    }

    .nav-node:hover > .nav-submenu,
    .nav-node:focus-within > .nav-submenu,
    .nav-node.sub-open > .nav-submenu {
        transition-delay: 0s;
    }

    /*
     * Invisible hover bridge between parent item
     * and dropdown.
     */

    .nav-node.has-children > .nav-submenu::before {
        content: "";

        position: absolute;

        left: 0;
        right: 0;
        top: -24px;

        height: 24px;
    }
}


/* =========================================================
   SYSTEM LISTING CARDS
   ========================================================= */

.system-listing-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 28px;

    padding:
        8px
        0
        76px;
}

.system-listing-card {
    min-width: 0;

    overflow: hidden;

    border:
        1px
        solid
        rgba(40,54,24,.12);

    border-radius: 16px;

    background:
        var(
            --paper-soft,
            #fff
        );

    box-shadow:
        0
        20px
        55px
        rgba(40,54,24,.08);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.system-listing-card:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0
        26px
        65px
        rgba(40,54,24,.12);
}

.system-listing-card-link {
    height: 100%;

    display: flex;
    flex-direction: column;

    color: inherit;

    text-decoration: none;
}

.system-listing-card-media {
    position: relative;

    display: block;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background:
        rgba(40,54,24,.07);
}

.system-listing-card-media::after {
    content: "";

    position: absolute;

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

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--rust, #BC6C25)
                0 68%,
            var(--amber, #DDA15E)
                68% 100%
        );
}

.system-listing-card-media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .35s ease;
}

.system-listing-card:hover
.system-listing-card-media img {
    transform:
        scale(1.025);
}

.system-listing-card-copy {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding:
        28px
        30px
        30px;
}

.system-listing-card-number {
    margin-bottom: 16px;

    color:
        var(--rust, #BC6C25);

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

    letter-spacing: .16em;
}

.system-listing-card h2 {
    margin: 0;

    color:
        var(--green, #283618);

    font-size:
        clamp(
            25px,
            2.2vw,
            34px
        );

    line-height: 1.08;
}

.system-listing-card-intro {
    margin:
        18px
        0
        0;

    line-height: 1.75;

    opacity: .78;
}

.system-listing-card-more {
    margin-top: auto;

    padding-top: 24px;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    color:
        var(--rust, #BC6C25);

    font-weight: 700;
}

.system-listing-empty {
    margin:
        0
        0
        76px;

    padding:
        34px;

    border:
        1px
        solid
        rgba(40,54,24,.12);

    border-radius: 16px;

    background:
        var(
            --paper-soft,
            #fff
        );
}

.system-listing-empty p {
    margin: 0;
}

@media (max-width: 720px) {

    .system-listing-grid {
        grid-template-columns: 1fr;

        gap: 20px;

        padding-bottom: 52px;
    }

    .system-listing-card-copy {
        padding:
            24px
            23px
            26px;
    }

    .system-listing-empty {
        margin-bottom: 52px;

        padding: 26px;
    }
}

/* =========================================================
   RICH CONTENT TYPOGRAPHY
   ========================================================= */

.story-prose > :first-child {
    margin-top: 0;
}

.story-prose > :last-child {
    margin-bottom: 0;
}

.story-prose p {
    margin: 0 0 1.4em;
}

.story-prose h2 {
    margin: 2.3em 0 .72em;

    color: var(--green);

    font-size:
        clamp(
            28px,
            3.2vw,
            42px
        );

    line-height: 1.12;
    letter-spacing: -.025em;
}

.story-prose h3 {
    margin: 1.9em 0 .65em;

    color: var(--green);

    font-size:
        clamp(
            22px,
            2.4vw,
            30px
        );

    line-height: 1.2;
}

.story-prose ul,
.story-prose ol {
    margin: 0 0 1.6em;
    padding-left: 1.5em;
}

.story-prose li {
    margin: .45em 0;
}

.story-prose ul {
    list-style: disc;
}

.story-prose ol {
    list-style: decimal;
}

.story-prose blockquote {
    margin: 2em 0;

    padding: .35em 0 .35em 1.4em;

    border-left: 4px solid var(--rust);

    color: rgba(40,54,24,.78);

    font-size: 1.08em;
    line-height: 1.7;
}

.story-prose a {
    color: var(--rust);

    text-decoration-thickness: 1px;
    text-underline-offset: .16em;
}

.story-prose strong {
    font-weight: 750;
}

.story-prose figure {
    margin: 2.4em 0;
}

.story-prose figure img,
.story-prose > img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 14px;
}

.story-prose figcaption {
    margin-top: 10px;

    color: rgba(40,54,24,.62);

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


/* =========================================================
   STORY CONTENT PRESENTATION V2
   Clean semantic CMS content presentation
   ========================================================= */

.story-prose {
    position: relative;
}


/*
 * Lead paragraph.
 */

.story-prose > p:first-child {
    margin-bottom: 2em;

    color:
        rgba(40,54,24,.82);

    font-size:
        clamp(
            18px,
            2vw,
            21px
        );

    line-height: 1.8;
}


/*
 * Main content sections.
 */

.story-prose > h2 {
    position: relative;

    margin:
        2.75em
        0
        .9em;

    padding-left: 28px;
}

.story-prose > h2::before {
    content: "";

    position: absolute;

    top: .12em;
    bottom: .12em;
    left: 0;

    width: 5px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            var(--rust),
            var(--amber)
        );
}


/*
 * Secondary headings.
 */

.story-prose > h3 {
    position: relative;

    margin:
        2.2em
        0
        .85em;

    padding-bottom: 12px;

    border-bottom:
        1px
        solid
        rgba(40,54,24,.12);
}


/*
 * Paragraph rhythm.
 */

.story-prose > p {
    text-wrap: pretty;
}


/*
 * Semantic lists become readable content blocks.
 */

.story-prose > ul,
.story-prose > ol {
    margin:
        1.8em
        0
        2.2em;

    padding:
        22px
        28px
        22px
        50px;

    border:
        1px
        solid
        rgba(40,54,24,.10);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(96,108,56,.055),
            rgba(221,161,94,.045)
        );

    box-shadow:
        0 18px 46px
        rgba(40,54,24,.045);
}

.story-prose > ul li,
.story-prose > ol li {
    padding-left: 5px;
}

.story-prose > ul li::marker,
.story-prose > ol li::marker {
    color: var(--rust);

    font-weight: 800;
}


/*
 * Quotes / highlighted text.
 */

.story-prose > blockquote {
    position: relative;

    overflow: hidden;

    padding:
        28px
        30px
        28px
        34px;

    border: 0;
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(40,54,24,.96),
            rgba(70,82,43,.96)
        );

    color: #fffef8;

    box-shadow:
        0 24px 58px
        rgba(40,54,24,.13);
}

.story-prose > blockquote::before {
    content: "“";

    position: absolute;

    top: -25px;
    right: 18px;

    color:
        rgba(221,161,94,.18);

    font-family: Georgia, serif;
    font-size: 120px;
    line-height: 1;
}


/*
 * Links.
 */

.story-prose a {
    transition:
        color 180ms ease,
        text-decoration-color 180ms ease;
}

.story-prose a:hover {
    color: var(--green);
}


/*
 * Scroll reveal.
 * Classes are added only at render time;
 * nothing decorative is stored in CMS HTML.
 */

.story-reveal-item {
    opacity: 0;

    transform:
        translateY(22px);

    transition:
        opacity 620ms ease var(--story-delay, 0ms),
        transform 620ms ease var(--story-delay, 0ms);
}

.story-reveal-item.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


@media (max-width: 760px) {

    .story-prose > h2 {
        padding-left: 20px;
    }

    .story-prose > h2::before {
        width: 4px;
    }

    .story-prose > ul,
    .story-prose > ol {
        padding:
            18px
            18px
            18px
            39px;

        border-radius: 14px;
    }

    .story-prose > blockquote {
        padding:
            22px
            20px
            22px
            24px;

        border-radius: 14px;
    }
}


@media (
    prefers-reduced-motion: reduce
) {

    .story-reveal-item {
        opacity: 1;

        transform: none;

        transition: none;
    }
}


/* =========================================================
   EDITORIAL STORY DESIGN V3
   ========================================================= */


/* ---------------------------------------------------------
   Main content canvas
   --------------------------------------------------------- */

.story-content {
    position: relative;

    overflow: hidden;

    padding:
        72px
        0
        94px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfaf5 46%,
            #ffffff 100%
        );
}

.story-content::before {
    content: "";

    position: absolute;

    top: 120px;
    left: -180px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(221,161,94,.09),
            rgba(221,161,94,0)
            68%
        );

    pointer-events: none;
}

.story-content::after {
    content: "";

    position: absolute;

    right: -220px;
    bottom: 260px;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(96,108,56,.075),
            rgba(96,108,56,0)
            68%
        );

    pointer-events: none;
}


.story-prose {
    position: relative;
    z-index: 1;

    width:
        min(
            calc(100% - 48px),
            940px
        );

    padding-top: 0;
}


/* ---------------------------------------------------------
   Intro / lead
   --------------------------------------------------------- */

.story-lead-card {
    position: relative;

    overflow: hidden;

    margin:
        0
        0
        28px;

    padding:
        clamp(
            26px,
            4vw,
            42px
        );

    border:
        1px
        solid
        rgba(40,54,24,.10);

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.96),
            rgba(248,245,233,.96)
        );

    box-shadow:
        0 22px 70px
        rgba(40,54,24,.07);
}

.story-lead-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--rust),
            var(--amber),
            var(--green)
        );
}

.story-lead-card::after {
    content: "";

    position: absolute;

    top: -80px;
    right: -70px;

    width: 220px;
    height: 220px;

    border:
        1px
        solid
        rgba(221,161,94,.15);

    border-radius: 50%;

    box-shadow:
        0 0 0 34px
        rgba(221,161,94,.035);

    pointer-events: none;
}

.story-lead-card > p {
    position: relative;
    z-index: 1;

    max-width: 790px;

    margin: 0;

    color:
        rgba(40,54,24,.84);

    font-size:
        clamp(
            17px,
            2vw,
            20px
        );

    line-height: 1.82;
}


/* ---------------------------------------------------------
   Section navigation
   --------------------------------------------------------- */

.story-section-nav {
    margin:
        0
        0
        30px;

    padding: 8px;

    border:
        1px
        solid
        rgba(40,54,24,.09);

    border-radius: 18px;

    background:
        rgba(255,255,255,.84);

    box-shadow:
        0 12px 38px
        rgba(40,54,24,.055);

    backdrop-filter:
        blur(14px);
}

.story-section-nav-track {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.story-section-nav a {
    min-height: 42px;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding:
        0
        13px;

    border-radius: 12px;

    color:
        rgba(40,54,24,.72);

    text-decoration: none;

    transition:
        color 180ms ease,
        background 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.story-section-nav a:hover {
    transform:
        translateY(-1px);

    background:
        rgba(96,108,56,.08);

    color:
        var(--green);
}

.story-section-nav a.active {
    background:
        var(--green);

    color: #fff;

    box-shadow:
        0 8px 20px
        rgba(40,54,24,.16);
}

.story-section-nav a span {
    color: var(--amber);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
}

.story-section-nav a strong {
    font-size: 11px;
    font-weight: 800;
}


/* ---------------------------------------------------------
   Main editorial sections
   --------------------------------------------------------- */

.story-section-card {
    position: relative;

    overflow: hidden;

    margin:
        0
        0
        28px;

    padding:
        clamp(
            30px,
            5vw,
            52px
        );

    border:
        1px
        solid
        rgba(40,54,24,.095);

    border-radius:
        clamp(
            22px,
            3vw,
            30px
        );

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(250,248,240,.96)
        );

    box-shadow:
        0 28px 80px
        rgba(40,54,24,.07);

    transition:
        transform 280ms ease,
        box-shadow 280ms ease,
        border-color 280ms ease;
}

.story-section-card:nth-of-type(even) {
    background:
        linear-gradient(
            145deg,
            rgba(250,248,239,.98),
            rgba(255,255,255,.98)
        );
}

.story-section-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(96,108,56,.22);

    box-shadow:
        0 34px 95px
        rgba(40,54,24,.105);
}

.story-section-card::before {
    content: "";

    position: absolute;

    top: -130px;
    right: -120px;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(221,161,94,.10),
            rgba(221,161,94,0)
            70%
        );

    pointer-events: none;
}

.story-section-card::after {
    content: "";

    position: absolute;

    right: 32px;
    bottom: 24px;

    width: 70px;
    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--rust),
            var(--amber)
        );

    opacity: .65;
}


/* ---------------------------------------------------------
   Section headings
   --------------------------------------------------------- */

.story-section-heading {
    position: relative;
    z-index: 1;

    display: grid;

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

    align-items: center;

    gap: 18px;

    margin:
        0
        0
        26px;

    padding-bottom: 22px;

    border-bottom:
        1px
        solid
        rgba(40,54,24,.10);
}

.story-section-index {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border:
        1px
        solid
        rgba(221,161,94,.32);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(221,161,94,.16),
            rgba(221,161,94,.055)
        );

    color: var(--rust);

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

    letter-spacing: .08em;
}

.story-section-heading h2 {
    margin: 0;
    padding: 0;

    color: var(--green);

    font-size:
        clamp(
            28px,
            4.1vw,
            44px
        );

    line-height: 1.08;

    letter-spacing: -.035em;
}

.story-section-heading h2::before {
    display: none;
}


/* ---------------------------------------------------------
   Section text
   --------------------------------------------------------- */

.story-section-card > p {
    position: relative;
    z-index: 1;

    max-width: 800px;

    margin:
        0
        0
        1.35em;

    color:
        rgba(40,54,24,.79);

    font-size:
        clamp(
            15.5px,
            1.5vw,
            17px
        );

    line-height: 1.88;

    text-wrap: pretty;
}

.story-section-card > p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   H3
   --------------------------------------------------------- */

.story-section-card
.story-subheading {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;

    gap: 12px;

    margin:
        30px
        0
        16px;

    padding:
        0
        0
        12px;

    border-bottom:
        1px
        solid
        rgba(40,54,24,.10);

    color: var(--green);

    font-size:
        clamp(
            20px,
            2.5vw,
            25px
        );

    line-height: 1.2;
}

.story-section-card
.story-subheading::before {
    content: "";

    flex: 0 0 auto;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--amber);

    box-shadow:
        0 0 0 6px
        rgba(221,161,94,.10);
}


/* ---------------------------------------------------------
   Lists
   --------------------------------------------------------- */

.story-section-card > ul,
.story-section-card > ol {
    position: relative;
    z-index: 1;

    margin:
        16px
        0
        28px;

    padding:
        22px
        26px
        22px
        48px;

    border:
        1px
        solid
        rgba(221,161,94,.20);

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(221,161,94,.075),
            rgba(255,255,255,.72)
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(255,255,255,.7);
}

.story-section-card > ul li,
.story-section-card > ol li {
    margin:
        .62em
        0;

    padding-left: 5px;

    color:
        rgba(40,54,24,.82);

    line-height: 1.65;
}

.story-section-card > ul li::marker,
.story-section-card > ol li::marker {
    color: var(--rust);

    font-weight: 900;
}


/* ---------------------------------------------------------
   Reveal V3
   --------------------------------------------------------- */

.story-reveal-item {
    opacity: 0;

    transform:
        translateY(30px)
        scale(.985);

    transition:
        opacity
        720ms
        cubic-bezier(.2,.75,.25,1)
        var(--story-delay, 0ms),

        transform
        720ms
        cubic-bezier(.2,.75,.25,1)
        var(--story-delay, 0ms);
}

.story-reveal-item.is-visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* ---------------------------------------------------------
   Hero art enhancement
   --------------------------------------------------------- */

.story-art {
    position: relative;

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            circle
            at
            30%
            30%,
            rgba(255,225,176,.18),
            rgba(255,225,176,0)
            36%
        ),
        linear-gradient(
            135deg,
            #be681f,
            #d07a29
        );
}

.story-art::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    border:
        1px
        solid
        rgba(255,230,190,.22);

    border-radius: 50%;

    box-shadow:
        0 0 0 42px
        rgba(255,230,190,.045),
        0 0 0 86px
        rgba(255,230,190,.026);

    animation:
        storyOrbit
        18s
        linear
        infinite;
}

.story-art::after {
    content: "";

    position: absolute;

    inset: 13%;

    border:
        1px
        solid
        rgba(255,240,215,.13);

    border-radius: 4px;

    transform:
        rotate(-4deg);

    pointer-events: none;
}

.story-art > i {
    position: relative;
    z-index: 2;

    font-size:
        clamp(
            58px,
            7vw,
            88px
        );

    filter:
        drop-shadow(
            0
            16px
            22px
            rgba(90,42,8,.18)
        );

    animation:
        storyIconFloat
        5.4s
        ease-in-out
        infinite;
}


@keyframes storyOrbit {

    from {
        transform:
            rotate(0deg)
            scale(1);
    }

    50% {
        transform:
            rotate(180deg)
            scale(1.07);
    }

    to {
        transform:
            rotate(360deg)
            scale(1);
    }
}


@keyframes storyIconFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-2deg);
    }

    50% {
        transform:
            translateY(-10px)
            rotate(2deg);
    }
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 760px) {

    .story-content {
        padding:
            48px
            0
            66px;
    }

    .story-prose {
        width:
            calc(100% - 30px);
    }

    .story-lead-card {
        margin-bottom: 20px;

        padding: 24px 21px;

        border-radius: 19px;
    }

    .story-section-nav {
        margin-bottom: 20px;

        overflow-x: auto;

        border-radius: 15px;
    }

    .story-section-nav-track {
        width: max-content;

        flex-wrap: nowrap;
    }

    .story-section-card {
        margin-bottom: 20px;

        padding:
            26px
            21px;

        border-radius: 20px;
    }

    .story-section-card:hover {
        transform: none;
    }

    .story-section-heading {
        gap: 13px;

        margin-bottom: 21px;

        padding-bottom: 17px;
    }

    .story-section-index {
        width: 42px;
        height: 42px;

        border-radius: 13px;
    }

    .story-section-card > ul,
    .story-section-card > ol {
        padding:
            18px
            16px
            18px
            36px;

        border-radius: 15px;
    }
}


@media (
    prefers-reduced-motion: reduce
) {

    .story-reveal-item {
        opacity: 1;

        transform: none;

        transition: none;
    }

    .story-art::before,
    .story-art > i {
        animation: none;
    }
}

/* =========================================================
   ABOUT FINAL CINEMATIC BIOGRAPHY
   Haqqımda only
   ========================================================= */


/* ---------------------------------------------------------
   CRITICAL FIRST PAINT
   --------------------------------------------------------- */

.story-page[data-story-layout="about"]
.story-content,
.story-page[data-story-layout="about"]
.story-prose,
.story-page[data-story-layout="about"]
.story-prose > *,
.story-page[data-story-layout="about"]
.about-lead,
.story-page[data-story-layout="about"]
.about-timeline,
.story-page[data-story-layout="about"]
.about-chapter,
.story-page[data-story-layout="about"]
.about-chapter-body,
.story-page[data-story-layout="about"]
.about-chapter-body > * {
    opacity: 1 !important;

    visibility: visible !important;

    filter: none !important;
}


.story-page[data-story-layout="about"]
.story-content,
.story-page[data-story-layout="about"]
.story-prose,
.story-page[data-story-layout="about"]
.story-prose > *,
.story-page[data-story-layout="about"]
.about-lead,
.story-page[data-story-layout="about"]
.about-timeline,
.story-page[data-story-layout="about"]
.about-chapter,
.story-page[data-story-layout="about"]
.about-chapter-body,
.story-page[data-story-layout="about"]
.about-chapter-body > * {
    transform: none !important;
}


.story-page[data-story-layout="about"]
.story-content,
.story-page[data-story-layout="about"]
.story-prose {
    min-height: 0 !important;

    height: auto !important;
}


.story-page[data-story-layout="about"]
.story-prose {
    content-visibility:
        visible !important;
}


/* ---------------------------------------------------------
   Canvas
   --------------------------------------------------------- */

.story-page[data-story-layout="about"]
.story-content {
    position: relative;

    overflow: hidden;

    padding:
        30px
        0
        80px !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfaf6 58%,
            #ffffff 100%
        );
}


.story-page[data-story-layout="about"]
.story-content::before,
.story-page[data-story-layout="about"]
.story-content::after {
    display: none !important;
}


.story-page[data-story-layout="about"]
.story-prose {
    position: relative;

    z-index: 3;

    width:
        min(
            calc(100% - 48px),
            1020px
        );

    margin-top:
        0 !important;

    padding-top:
        0 !important;
}


/* ---------------------------------------------------------
   Projector light
   --------------------------------------------------------- */

.story-page[data-story-layout="about"]
.about-ambient {
    position: absolute;

    inset: 0;

    z-index: 1;

    overflow: hidden;

    pointer-events: none;
}


.story-page[data-story-layout="about"]
.about-ambient::before,
.story-page[data-story-layout="about"]
.about-ambient::after {
    display: none !important;
}


.story-page[data-story-layout="about"]
.about-cinema-light {
    position: absolute;

    top: 7%;
    right: -12%;

    width: 54%;
    height: 250px;

    opacity: .66;

    background:
        linear-gradient(
            116deg,
            rgba(221,161,94,0),
            rgba(221,161,94,.075),
            rgba(221,161,94,0)
        );

    transform:
        skewX(-12deg);

    transition:
        top
        850ms
        cubic-bezier(.2,.72,.2,1),

        right
        850ms
        cubic-bezier(.2,.72,.2,1),

        opacity
        500ms
        ease;
}


.story-page[data-story-layout="about"][data-about-active="2"]
.about-cinema-light {
    top: 42%;

    right: 55%;

    opacity: .46;
}


.story-page[data-story-layout="about"][data-about-active="3"]
.about-cinema-light {
    top: 72%;

    right: -5%;

    opacity: .54;
}


/* ---------------------------------------------------------
   Lead
   --------------------------------------------------------- */

.story-page[data-story-layout="about"]
.about-lead {
    position: relative;

    display: block !important;

    max-width: 820px;

    min-height: 0 !important;

    margin:
        0
        0
        58px
        108px !important;

    padding:
        2px
        0
        2px
        26px;

    border-left:
        2px
        solid
        var(--amber);

    animation:
        none !important;

    transition:
        none !important;
}


.story-page[data-story-layout="about"]
.about-lead::before {
    content: "";

    position: absolute;

    top: 2px;
    left: -7px;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background:
        var(--amber);
}


.story-page[data-story-layout="about"]
.about-lead p {
    margin:
        0
        0
        1.35em;

    color:
        rgba(40,54,24,.84);

    font-size:
        clamp(
            17px,
            1.8vw,
            20px
        );

    line-height: 1.82;
}


.story-page[data-story-layout="about"]
.about-lead p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   Timeline
   --------------------------------------------------------- */

.story-page[data-story-layout="about"]
.about-timeline {
    --about-rail-top: 0px;
    --about-rail-height: 1px;
    --about-progress-px: 0px;

    position: relative;

    min-height:
        0 !important;
}


.story-page[data-story-layout="about"]
.about-rail {
    position: absolute;

    z-index: 2;

    top:
        var(
            --about-rail-top
        );

    left: 40px;

    width: 2px;

    height:
        var(
            --about-rail-height
        );

    border-radius: 999px;

    background:
        rgba(40,54,24,.12);

    pointer-events: none;
}


.story-page[data-story-layout="about"]
.about-progress {
    position: absolute;

    top: 0;
    left: 0;

    width: 2px;

    height:
        var(
            --about-progress-px
        );

    max-height: 100%;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #e8a34f,
            #c87027
        );
}


.story-page[data-story-layout="about"]
.about-dot {
    position: absolute;

    top:
        var(
            --about-progress-px
        );

    left: 50%;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        #dfa053;

    transform:
        translate(
            -50%,
            -50%
        ) !important;

    box-shadow:
        0 0 0 5px
        rgba(221,161,94,.10),

        0 0 16px
        rgba(221,161,94,.42);
}


/* ---------------------------------------------------------
   Chapters
   --------------------------------------------------------- */

.story-page[data-story-layout="about"]
.about-chapter {
    position: relative;

    display: grid !important;

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

    column-gap: 26px;

    min-height:
        0 !important;

    padding:
        0
        0
        92px;

    animation:
        none !important;

    transition:
        none !important;
}


.story-page[data-story-layout="about"]
.about-chapter.is-last {
    padding-bottom: 0;
}


.story-page[data-story-layout="about"]
.about-marker {
    position: relative;

    z-index: 5;

    min-height: 54px;
}


.story-page[data-story-layout="about"]
.about-marker span {
    display: block;

    width: 31px;

    color:
        rgba(40,54,24,.34);

    font-size: 13px;
    font-weight: 800;

    line-height: 1;

    text-align: right;

    letter-spacing: .08em;

    transition:
        color 220ms ease;
}


.story-page[data-story-layout="about"]
.about-marker i {
    position: absolute;

    top: 10px;
    left: 35px;

    display: block;

    width: 12px;
    height: 12px;

    border:
        2px
        solid
        #ffffff;

    border-radius: 50%;

    background:
        #b7bbaa;

    box-shadow:
        0 0 0 3px
        rgba(40,54,24,.07);

    transition:
        background 220ms ease,
        box-shadow 220ms ease;
}


.story-page[data-story-layout="about"]
.about-chapter.is-past
.about-marker span {
    color:
        rgba(193,107,39,.66);
}


.story-page[data-story-layout="about"]
.about-chapter.is-past
.about-marker i {
    background:
        var(--amber);

    box-shadow:
        0 0 0 4px
        rgba(221,161,94,.09);
}


.story-page[data-story-layout="about"]
.about-chapter.is-active
.about-marker span {
    color:
        var(--rust);
}


.story-page[data-story-layout="about"]
.about-chapter.is-active
.about-marker i {
    background:
        var(--amber);

    box-shadow:
        0 0 0 6px
        rgba(221,161,94,.12),

        0 0 22px
        rgba(221,161,94,.48);
}


.story-page[data-story-layout="about"]
.about-timeline-end {
    position: relative;

    height: 0;

    margin: 0;

    padding: 0;
}


/* ---------------------------------------------------------
   Biography typography
   --------------------------------------------------------- */

.story-page[data-story-layout="about"]
.about-chapter-body {
    position: relative;

    z-index: 4;

    min-width: 0;

    min-height:
        0 !important;

    max-width: 790px;
}


.story-page[data-story-layout="about"]
.about-chapter-body > h2 {
    position: relative;

    margin:
        0
        0
        30px;

    padding:
        0
        0
        18px;

    color:
        var(--green);

    font-size:
        clamp(
            31px,
            3.7vw,
            46px
        );

    line-height: 1.08;

    letter-spacing:
        -.03em;
}


.story-page[data-story-layout="about"]
.about-chapter-body > h2::before {
    display: none !important;
}


.story-page[data-story-layout="about"]
.about-chapter-body > h2::after {
    content: "";

    position: absolute;

    bottom: 0;
    left: 0;

    width: 46px;
    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--rust),
            var(--amber)
        );

    transition:
        width
        460ms
        cubic-bezier(.2,.75,.25,1);
}


.story-page[data-story-layout="about"]
.about-chapter.is-active
.about-chapter-body > h2::after {
    width: 132px;
}


.story-page[data-story-layout="about"]
.about-chapter-body > p {
    margin:
        0
        0
        1.45em;

    color:
        rgba(40,54,24,.82);

    font-size:
        clamp(
            16px,
            1.55vw,
            18px
        );

    line-height: 1.82;

    text-wrap: pretty;
}


.story-page[data-story-layout="about"]
.about-chapter-body > p:last-child {
    margin-bottom: 0;
}


.story-page[data-story-layout="about"]
.about-subheading {
    position: relative;

    margin:
        44px
        0
        22px;

    padding:
        0
        0
        11px;

    border-bottom:
        1px
        solid
        rgba(40,54,24,.10);

    color:
        var(--green);

    font-size:
        clamp(
            22px,
            2.4vw,
            29px
        );

    line-height: 1.2;
}


.story-page[data-story-layout="about"]
.about-chapter-body > ul,
.story-page[data-story-layout="about"]
.about-chapter-body > ol {
    margin:
        26px
        0
        34px;

    padding:
        6px
        0
        6px
        25px;

    border: 0;

    border-left:
        2px
        solid
        rgba(221,161,94,.38);

    border-radius: 0;

    background: none;

    box-shadow: none;
}


.story-page[data-story-layout="about"]
.about-chapter-body li {
    margin:
        .58em
        0;

    padding-left: 4px;

    color:
        rgba(40,54,24,.82);

    line-height: 1.72;
}


.story-page[data-story-layout="about"]
.about-chapter-body li::marker {
    color:
        var(--rust);

    font-weight: 800;
}


/* ---------------------------------------------------------
   Chapter motion
   --------------------------------------------------------- */

.story-page[data-story-layout="about"]
.about-chapter-motion {
    position: absolute;

    z-index: 1;

    pointer-events: none;

    opacity: .10;

    transition:
        opacity
        460ms
        ease;
}


.story-page[data-story-layout="about"]
.about-chapter.is-active
.about-chapter-motion {
    opacity: .74;
}


/* ---------------------------------------------------------
   01 — 35MM FILM STRIP
   --------------------------------------------------------- */

.story-page[data-story-layout="about"]
.motion-scene-1 {
    top: 18px;
    right: -150px;

    width: 150px;
    height: 330px;
}


.story-page[data-story-layout="about"]
.about-filmstrip {
    position: absolute;

    inset: 0;

    overflow: hidden;

    border:
        1px
        solid
        rgba(193,107,39,.24);

    background:
        rgba(255,250,240,.32);
}


.story-page[data-story-layout="about"]
.about-filmstrip::before,
.story-page[data-story-layout="about"]
.about-filmstrip::after {
    content: "";

    position: absolute;

    z-index: 3;

    top: 0;
    bottom: 0;

    width: 11px;

    background:
        repeating-linear-gradient(
            to bottom,

            rgba(193,107,39,.34)
            0,

            rgba(193,107,39,.34)
            6px,

            transparent
            6px,

            transparent
            14px
        );
}


.story-page[data-story-layout="about"]
.about-filmstrip::before {
    left: 7px;
}


.story-page[data-story-layout="about"]
.about-filmstrip::after {
    right: 7px;
}


.story-page[data-story-layout="about"]
.about-filmstrip-track {
    position: absolute;

    inset:
        12px
        25px;

    display: flex;

    flex-direction: column;

    gap: 12px;

    animation:
        aboutFilmRun
        6.8s
        ease-in-out
        infinite
        alternate;

    animation-play-state:
        paused;
}


.story-page[data-story-layout="about"]
.about-chapter.is-active
.about-filmstrip-track {
    animation-play-state:
        running;
}


.story-page[data-story-layout="about"]
.film-frame {
    position: relative;

    display: block;

    flex:
        0
        0
        82px;

    border:
        1px
        solid
        rgba(40,54,24,.20);

    background:
        linear-gradient(
            145deg,
            rgba(40,54,24,.055),
            rgba(221,161,94,.08)
        );
}


.story-page[data-story-layout="about"]
.film-frame::before {
    content: "";

    position: absolute;

    left: 13px;
    right: 13px;
    bottom: 14px;

    height: 1px;

    background:
        rgba(193,107,39,.30);
}


.story-page[data-story-layout="about"]
.film-frame::after {
    content: "";

    position: absolute;

    top: 14px;
    left: 13px;

    width: 42%;
    height: 20px;

    border-left:
        2px
        solid
        rgba(96,108,56,.24);

    border-top:
        1px
        solid
        rgba(96,108,56,.18);
}


@keyframes aboutFilmRun {
    from {
        transform:
            translateY(
                0
            );
    }

    to {
        transform:
            translateY(
                -34px
            );
    }
}


/* ---------------------------------------------------------
   02 — SCREENPLAY
   --------------------------------------------------------- */

.story-page[data-story-layout="about"]
.motion-scene-2 {
    top: 94px;
    left: -182px;

    width: 172px;
    height: 230px;
}


.story-page[data-story-layout="about"]
.about-screenplay {
    position: absolute;

    inset: 0;

    box-sizing:
        border-box;

    padding:
        40px
        22px
        24px
        29px;

    border:
        1px
        solid
        rgba(40,54,24,.16);

    background:
        rgba(255,255,252,.76);

    transform:
        rotate(-2.5deg);
}


.story-page[data-story-layout="about"]
.about-screenplay::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 17px;

    width: 1px;

    background:
        rgba(193,107,39,.22);
}


.story-page[data-story-layout="about"]
.screenplay-scene-heading,
.story-page[data-story-layout="about"]
.screenplay-line,
.story-page[data-story-layout="about"]
.screenplay-dialogue {
    display: block;

    height: 3px;

    margin-bottom: 13px;

    border-radius: 999px;

    background:
        rgba(40,54,24,.25);

    transform-origin:
        left center;

    animation:
        aboutScriptType
        6.4s
        ease-in-out
        infinite;

    animation-play-state:
        paused;
}


.story-page[data-story-layout="about"]
.about-chapter.is-active
.screenplay-scene-heading,
.story-page[data-story-layout="about"]
.about-chapter.is-active
.screenplay-line,
.story-page[data-story-layout="about"]
.about-chapter.is-active
.screenplay-dialogue {
    animation-play-state:
        running;
}


.story-page[data-story-layout="about"]
.screenplay-scene-heading {
    width: 88%;

    height: 4px;

    margin-bottom: 24px;

    background:
        rgba(193,107,39,.42);
}


.story-page[data-story-layout="about"]
.screenplay-line.line-1 {
    width: 100%;

    animation-delay: 160ms;
}


.story-page[data-story-layout="about"]
.screenplay-line.line-2 {
    width: 86%;

    animation-delay: 320ms;
}


.story-page[data-story-layout="about"]
.screenplay-line.line-3 {
    width: 94%;

    animation-delay: 480ms;
}


.story-page[data-story-layout="about"]
.screenplay-dialogue.line-4 {
    width: 62%;

    margin-left: 20%;

    animation-delay: 640ms;
}


.story-page[data-story-layout="about"]
.screenplay-dialogue.line-5 {
    width: 48%;

    margin-left: 27%;

    animation-delay: 800ms;
}


.story-page[data-story-layout="about"]
.screenplay-caret {
    position: absolute;

    left: 43px;
    bottom: 31px;

    width: 2px;
    height: 12px;

    background:
        rgba(193,107,39,.58);

    animation:
        aboutCaretBlink
        1s
        steps(1)
        infinite;

    animation-play-state:
        paused;
}


.story-page[data-story-layout="about"]
.about-chapter.is-active
.screenplay-caret {
    animation-play-state:
        running;
}


@keyframes aboutScriptType {
    0%,
    10% {
        transform:
            scaleX(.08);

        opacity: .22;
    }

    27%,
    72% {
        transform:
            scaleX(1);

        opacity: 1;
    }

    88%,
    100% {
        transform:
            scaleX(1);

        opacity: .40;
    }
}


@keyframes aboutCaretBlink {
    0%,
    48% {
        opacity: 1;
    }

    49%,
    100% {
        opacity: 0;
    }
}


/* ---------------------------------------------------------
   03 — CLAPPERBOARD
   --------------------------------------------------------- */

.story-page[data-story-layout="about"]
.motion-scene-3 {
    top: 110px;
    right: -170px;

    width: 170px;
    height: 170px;
}


.story-page[data-story-layout="about"]
.about-slate {
    position: absolute;

    top: 34px;
    left: 6px;

    width: 150px;
    height: 110px;

    border:
        1px
        solid
        rgba(40,54,24,.20);

    background:
        rgba(255,252,244,.62);
}


.story-page[data-story-layout="about"]
.slate-top {
    position: absolute;

    z-index: 2;

    top: -21px;
    left: -1px;

    width: 150px;
    height: 22px;

    border:
        1px
        solid
        rgba(40,54,24,.24);

    background:
        repeating-linear-gradient(
            135deg,

            rgba(193,107,39,.44)
            0,

            rgba(193,107,39,.44)
            12px,

            rgba(255,248,229,.34)
            12px,

            rgba(255,248,229,.34)
            24px
        );

    transform-origin:
        left bottom;

    animation:
        aboutSlateClap
        7.4s
        cubic-bezier(.3,.7,.2,1)
        infinite;

    animation-play-state:
        paused;
}


.story-page[data-story-layout="about"]
.about-chapter.is-active
.slate-top {
    animation-play-state:
        running;
}


.story-page[data-story-layout="about"]
.slate-body {
    position: absolute;

    inset:
        23px
        17px;

    display: block;
}


.story-page[data-story-layout="about"]
.slate-line {
    display: block;

    height: 1px;

    margin-bottom: 19px;

    background:
        rgba(40,54,24,.22);
}


.story-page[data-story-layout="about"]
.slate-line.line-1 {
    width: 100%;
}


.story-page[data-story-layout="about"]
.slate-line.line-2 {
    width: 74%;
}


.story-page[data-story-layout="about"]
.slate-line.line-3 {
    width: 88%;

    background:
        rgba(193,107,39,.30);
}


@keyframes aboutSlateClap {
    0%,
    62% {
        transform:
            rotate(
                0deg
            );
    }

    70% {
        transform:
            rotate(
                -15deg
            );
    }

    78% {
        transform:
            rotate(
                0deg
            );
    }

    100% {
        transform:
            rotate(
                0deg
            );
    }
}


/* ---------------------------------------------------------
   HERO — CAMERA FRAME / FILM GATE
   --------------------------------------------------------- */

.story-page[data-story-layout="about"]
.story-art {
    position: relative;

    overflow: hidden;
}


.story-page[data-story-layout="about"]
.story-art::before {
    display: none !important;

    animation: none !important;
}


.story-page[data-story-layout="about"]
.about-hero-cinema {
    position: absolute;

    inset: 0;

    z-index: 1;

    overflow: hidden;

    pointer-events: none;
}


.story-page[data-story-layout="about"]
.story-art-icon {
    position: relative;

    z-index: 3;
}


.story-page[data-story-layout="about"]
.cinema-perf {
    position: absolute;

    top: 10%;
    bottom: 10%;

    width: 10px;

    opacity: .27;

    background:
        repeating-linear-gradient(
            to bottom,

            rgba(255,239,207,.70)
            0,

            rgba(255,239,207,.70)
            6px,

            transparent
            6px,

            transparent
            18px
        );

    animation:
        aboutHeroFilmMove
        8s
        linear
        infinite;
}


.story-page[data-story-layout="about"]
.cinema-perf.perf-left {
    left: 11%;
}


.story-page[data-story-layout="about"]
.cinema-perf.perf-right {
    right: 11%;
}


.story-page[data-story-layout="about"]
.cinema-corner {
    position: absolute;

    width: 42px;
    height: 42px;

    opacity: .46;
}


.story-page[data-story-layout="about"]
.corner-tl {
    top: 23%;
    left: 24%;

    border-top:
        1px
        solid
        rgba(255,239,207,.76);

    border-left:
        1px
        solid
        rgba(255,239,207,.76);
}


.story-page[data-story-layout="about"]
.corner-tr {
    top: 23%;
    right: 24%;

    border-top:
        1px
        solid
        rgba(255,239,207,.76);

    border-right:
        1px
        solid
        rgba(255,239,207,.76);
}


.story-page[data-story-layout="about"]
.corner-bl {
    bottom: 23%;
    left: 24%;

    border-bottom:
        1px
        solid
        rgba(255,239,207,.76);

    border-left:
        1px
        solid
        rgba(255,239,207,.76);
}


.story-page[data-story-layout="about"]
.corner-br {
    right: 24%;
    bottom: 23%;

    border-right:
        1px
        solid
        rgba(255,239,207,.76);

    border-bottom:
        1px
        solid
        rgba(255,239,207,.76);
}


.story-page[data-story-layout="about"]
.cinema-playhead {
    position: absolute;

    top: 25%;
    bottom: 25%;

    left: 22%;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            rgba(255,239,207,0),
            rgba(255,239,207,.52),
            rgba(255,239,207,0)
        );

    animation:
        aboutHeroPlayhead
        6.8s
        ease-in-out
        infinite
        alternate;
}


.story-page[data-story-layout="about"]
.cinema-rec-dot {
    position: absolute;

    top: 20%;
    right: 21%;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        rgba(255,226,181,.86);

    box-shadow:
        0 0 12px
        rgba(255,225,176,.42);

    animation:
        aboutHeroRec
        2.2s
        ease-in-out
        infinite;
}


@keyframes aboutHeroFilmMove {
    from {
        background-position:
            0
            0;
    }

    to {
        background-position:
            0
            72px;
    }
}


@keyframes aboutHeroPlayhead {
    from {
        transform:
            translateX(
                0
            );

        opacity: .15;
    }

    25% {
        opacity: .60;
    }

    to {
        transform:
            translateX(
                240px
            );

        opacity: .18;
    }
}


@keyframes aboutHeroRec {
    0%,
    100% {
        opacity: .35;
    }

    50% {
        opacity: 1;
    }
}


/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (
    max-width: 900px
) {

    .story-page[data-story-layout="about"]
    .story-content {
        padding:
            26px
            0
            70px !important;
    }


    .story-page[data-story-layout="about"]
    .story-prose {
        width:
            min(
                calc(100% - 30px),
                860px
            );
    }


    .story-page[data-story-layout="about"]
    .about-lead {
        margin:
            0
            0
            52px
            72px !important;
    }


    .story-page[data-story-layout="about"]
    .about-chapter {
        grid-template-columns:
            60px
            minmax(0,1fr);

        column-gap: 20px;

        padding-bottom:
            76px;
    }


    .story-page[data-story-layout="about"]
    .about-chapter.is-last {
        padding-bottom: 0;
    }


    .story-page[data-story-layout="about"]
    .about-rail {
        left: 28px;
    }


    .story-page[data-story-layout="about"]
    .about-marker span {
        width: 20px;

        font-size: 12px;
    }


    .story-page[data-story-layout="about"]
    .about-marker i {
        left: 23px;
    }


    .story-page[data-story-layout="about"]
    .motion-scene-1 {
        right: -138px;
    }


    .story-page[data-story-layout="about"]
    .motion-scene-2 {
        left: -176px;
    }


    .story-page[data-story-layout="about"]
    .motion-scene-3 {
        right: -156px;
    }


    .story-page[data-story-layout="about"]
    .cinema-playhead {
        display: none;
    }
}



/* ---------------------------------------------------------
   Mobile
   Timeline aligned with intro line
   --------------------------------------------------------- */

@media (
    max-width: 680px
) {

    /*
     * Stable outer gutters.
     */

    .story-page[data-story-layout="about"]
    .story-content {
        padding:
            20px
            0
            56px !important;
    }


    .story-page[data-story-layout="about"]
    .story-prose {
        width:
            calc(
                100% -
                40px
            );

        max-width: none;
    }


    /*
     * Intro.
     *
     * Its left border defines the master
     * vertical axis for the timeline below.
     */

    .story-page[data-story-layout="about"]
    .about-lead {
        position: relative;

        margin:
            0
            0
            48px
            0 !important;

        padding:
            0
            2px
            0
            18px;

        border-left:
            2px
            solid
            var(--amber);
    }


    .story-page[data-story-layout="about"]
    .about-lead::before {
        left: -7px;
    }


    .story-page[data-story-layout="about"]
    .about-lead p {
        font-size: 16px;

        line-height: 1.72;
    }


    /*
     * Chapter layout.
     *
     * Timeline is overlay only.
     * It never consumes a grid/flex column.
     *
     * Extra top space creates a dedicated
     * row for 01 / 02 / 03.
     */

    .story-page[data-story-layout="about"]
    .about-chapter {
        position: relative;

        display: block !important;

        min-width: 0;

        padding:
            30px
            0
            66px
            28px;
    }


    .story-page[data-story-layout="about"]
    .about-chapter.is-last {
        padding-bottom: 0;
    }


    /*
     * MASTER TIMELINE AXIS.
     *
     * left: 0 aligns the rail exactly
     * with the border-left of .about-lead.
     */

    .story-page[data-story-layout="about"]
    .about-rail {
        left: 0;
    }


    /*
     * Marker container is also anchored
     * to the same zero-axis.
     */

    .story-page[data-story-layout="about"]
    .about-marker {
        position: absolute;

        z-index: 6;

        top: 0;
        left: 0;

        width: 68px;
        height: 44px;

        min-height: 0;

        pointer-events: none;
    }


    /*
     * 01 / 02 / 03:
     *
     * ALWAYS right of the timeline,
     * ALWAYS above the section heading.
     */

    .story-page[data-story-layout="about"]
    .about-marker span {
        position: absolute;

        top: -2px;
        left: 13px;

        width: 40px;

        min-width: 0;

        color:
            rgba(193,107,39,.90);

        font-size: 20px;
        font-weight: 800;

        line-height: 1;

        text-align: left;

        letter-spacing: .06em;

        white-space: nowrap;
    }


    /*
     * Dot is centered directly on the
     * master timeline axis.
     *
     * 10px dot:
     * left -5px = center at x=0.
     */

    .story-page[data-story-layout="about"]
    .about-marker i {
        position: absolute;

        top: 31px;
        left: -5px;

        width: 10px;
        height: 10px;
    }


    /*
     * The chapter body starts below
     * the dedicated number row.
     */

    .story-page[data-story-layout="about"]
    .about-chapter-body {
        width: 100%;

        max-width: none;

        min-width: 0;

        box-sizing: border-box;

        padding-right: 0;
    }


    /*
     * Heading sits below 01 / 02 / 03
     * and safely to the right of the rail.
     */

    .story-page[data-story-layout="about"]
    .about-chapter-body > h2 {
        margin:
            0
            0
            25px;

        padding:
            0
            0
            15px;

        font-size:
            clamp(
                28px,
                8vw,
                36px
            );

        line-height: 1.08;

        overflow-wrap:
            break-word;
    }


    .story-page[data-story-layout="about"]
    .about-chapter-body > h2::after {
        width: 44px;
    }


    .story-page[data-story-layout="about"]
    .about-chapter.is-active
    .about-chapter-body > h2::after {
        width: 92px;
    }


    /*
     * Main body.
     */

    .story-page[data-story-layout="about"]
    .about-chapter-body > p {
        margin:
            0
            0
            1.32em;

        font-size: 16px;

        line-height: 1.72;

        overflow-wrap:
            break-word;
    }


    .story-page[data-story-layout="about"]
    .about-subheading {
        margin:
            35px
            0
            20px;

        padding-bottom: 10px;

        font-size:
            clamp(
                21px,
                6.4vw,
                27px
            );

        line-height: 1.18;
    }


    /*
     * Lists.
     */

    .story-page[data-story-layout="about"]
    .about-chapter-body > ul,
    .story-page[data-story-layout="about"]
    .about-chapter-body > ol {
        margin:
            21px
            0
            30px;

        padding:
            5px
            0
            5px
            20px;

        border-left-width: 1px;
    }


    .story-page[data-story-layout="about"]
    .about-chapter-body li {
        margin:
            .54em
            0;

        padding-left: 2px;

        line-height: 1.65;
    }


    /*
     * Decorative cinematic chapter effects
     * stay out of mobile layout completely.
     */

    .story-page[data-story-layout="about"]
    .about-chapter-motion {
        display: none !important;
    }


    .story-page[data-story-layout="about"]
    .about-cinema-light {
        opacity: .26;
    }


    /*
     * Hero decoration remains overlay-only.
     */

    .story-page[data-story-layout="about"]
    .about-hero-cinema,
    .story-page[data-story-layout="about"]
    .cinema-perf,
    .story-page[data-story-layout="about"]
    .cinema-corner,
    .story-page[data-story-layout="about"]
    .cinema-rec-dot {
        pointer-events: none;
    }


    .story-page[data-story-layout="about"]
    .cinema-perf {
        opacity: .17;
    }


    .story-page[data-story-layout="about"]
    .cinema-corner {
        width: 28px;
        height: 28px;
    }


    .story-page[data-story-layout="about"]
    .corner-tl {
        top: 28%;
        left: 22%;
    }


    .story-page[data-story-layout="about"]
    .corner-tr {
        top: 28%;
        right: 22%;
    }


    .story-page[data-story-layout="about"]
    .corner-bl {
        bottom: 28%;
        left: 22%;
    }


    .story-page[data-story-layout="about"]
    .corner-br {
        right: 22%;
        bottom: 28%;
    }
}

/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */

@media (
    prefers-reduced-motion: reduce
) {

    .story-page[data-story-layout="about"]
    .about-cinema-light,
    .story-page[data-story-layout="about"]
    .about-marker span,
    .story-page[data-story-layout="about"]
    .about-marker i,
    .story-page[data-story-layout="about"]
    .about-chapter-body > h2::after,
    .story-page[data-story-layout="about"]
    .about-chapter-motion {
        transition:
            none !important;
    }


    .story-page[data-story-layout="about"]
    .about-filmstrip-track,
    .story-page[data-story-layout="about"]
    .screenplay-scene-heading,
    .story-page[data-story-layout="about"]
    .screenplay-line,
    .story-page[data-story-layout="about"]
    .screenplay-dialogue,
    .story-page[data-story-layout="about"]
    .screenplay-caret,
    .story-page[data-story-layout="about"]
    .slate-top,
    .story-page[data-story-layout="about"]
    .cinema-perf,
    .story-page[data-story-layout="about"]
    .cinema-playhead,
    .story-page[data-story-layout="about"]
    .cinema-rec-dot {
        animation:
            none !important;
    }
}

/* =========================================================
   ABOUT DESKTOP SOFT BACKGROUND SCALE
   Haqqımda desktop only
   Final background balance
   ========================================================= */

@media (
    min-width: 901px
) {

    /*
     * Large cinematic elements are overlays.
     * They never influence text dimensions.
     */

    .story-page[data-story-layout="about"]
    .about-chapter {
        overflow: visible;

        isolation: isolate;
    }


    .story-page[data-story-layout="about"]
    .about-chapter-body {
        position: relative;

        z-index: 4;
    }


    .story-page[data-story-layout="about"]
    .about-chapter-motion {
        z-index: 2;

        pointer-events: none;

        transform:
            translateZ(0);

        transition:
            opacity 360ms ease,
            filter 360ms ease;
    }


    /* =====================================================
       01 — KARYERA
       Leave accepted version unchanged.
       ===================================================== */

    .story-page[data-story-layout="about"]
    .motion-scene-1 {
        top: 8px;
        right: 12px;

        width:
            clamp(
                210px,
                20vw,
                300px
            );

        height:
            clamp(
                420px,
                42vw,
                620px
            );

        opacity: .09;

        filter:
            blur(.65px);
    }


    .story-page[data-story-layout="about"]
    .about-chapter.is-active
    .motion-scene-1 {
        opacity: .16;

        filter:
            blur(.35px);
    }


    .story-page[data-story-layout="about"]
    .about-filmstrip-track {
        animation-duration:
            3.2s !important;
    }


    /* =====================================================
       02 — SCREENPLAY
       SMALLER + FURTHER LEFT + SLOWER
       ===================================================== */

    .story-page[data-story-layout="about"]
    .motion-scene-2 {
        top: 108px;

        /*
         * Smaller screenplay, still on the left,
         * but kept inside the visible side area.
         */

        left: -170px;
        right: auto;

        width:
            clamp(
                210px,
                18vw,
                260px
            );

        height:
            clamp(
                275px,
                23vw,
                335px
            );

        opacity: .11;

        filter:
            blur(.30px);

        /*
         * Fade the edge closest to biography text.
         */

        -webkit-mask-image:
            linear-gradient(
                90deg,

                #000 0%,
                #000 58%,
                rgba(0,0,0,.72) 76%,
                transparent 100%
            );

        mask-image:
            linear-gradient(
                90deg,

                #000 0%,
                #000 58%,
                rgba(0,0,0,.72) 76%,
                transparent 100%
            );
    }


    .story-page[data-story-layout="about"]
    .about-chapter.is-active
    .motion-scene-2 {
        opacity: .19;

        filter:
            blur(.12px);
    }


    .story-page[data-story-layout="about"]
    .about-screenplay {
        padding:
            38px
            27px
            27px
            34px;

        border-color:
            rgba(40,54,24,.22);

        background:
            rgba(255,255,252,.58);

        transform:
            rotate(
                1.5deg
            );
    }


    .story-page[data-story-layout="about"]
    .about-screenplay::before {
        left: 25px;

        background:
            rgba(193,107,39,.30);
    }


    /*
     * Slower than the previous 1.15s.
     * Motion remains noticeable but calmer.
     */

    .story-page[data-story-layout="about"]
    .screenplay-scene-heading,
    .story-page[data-story-layout="about"]
    .screenplay-line,
    .story-page[data-story-layout="about"]
    .screenplay-dialogue {
        animation-duration:
            2.8s !important;
    }


    .story-page[data-story-layout="about"]
    .screenplay-caret {
        animation-duration:
            .72s !important;
    }


    /* =====================================================
       03 — CLAPPERBOARD BACKGROUND
       No physical gap.
       Floats in right-side empty area between
       Təhsil copy and Kurs və təlimlər.
       ===================================================== */

    .story-page[data-story-layout="about"]
    .motion-scene-3 {
        position: absolute;

        top:
            calc(
                var(
                    --education-bg-top,
                    70%
                )
                +
                90px
            );

        right: -42px;
        left: auto;

        width:
            clamp(
                310px,
                27vw,
                390px
            );

        height:
            clamp(
                190px,
                17vw,
                245px
            );

        opacity: .10;

        filter:
            blur(.34px);
    }


    .story-page[data-story-layout="about"]
    .about-chapter.is-active
    .motion-scene-3 {
        opacity: .18;

        filter:
            blur(.18px);
    }


    .story-page[data-story-layout="about"]
    .about-slate {
        top: 42px;
        left: 22px;

        width:
            clamp(
                250px,
                21vw,
                315px
            );

        height:
            clamp(
                135px,
                12vw,
                175px
            );

        border-color:
            rgba(40,54,24,.24);

        background:
            rgba(255,252,244,.49);
    }


    .story-page[data-story-layout="about"]
    .slate-top {
        top: -32px;
        left: -1px;

        width: 100%;
        height: 33px;

        border-color:
            rgba(40,54,24,.26);

        background:
            repeating-linear-gradient(
                135deg,

                rgba(193,107,39,.48)
                0,

                rgba(193,107,39,.48)
                16px,

                rgba(255,248,229,.42)
                16px,

                rgba(255,248,229,.42)
                32px
            );

        /*
         * Slower than previous 1.75s.
         */

        animation-duration:
            3.6s !important;

        animation-timing-function:
            cubic-bezier(
                .32,
                .74,
                .20,
                1
            ) !important;
    }


    .story-page[data-story-layout="about"]
    .slate-body {
        inset:
            27px
            25px;
    }


    .story-page[data-story-layout="about"]
    .slate-line {
        height: 1px;

        margin-bottom: 20px;

        background:
            rgba(40,54,24,.27);
    }


    .story-page[data-story-layout="about"]
    .slate-line.line-3 {
        background:
            rgba(193,107,39,.38);
    }
}


/* =========================================================
   PORTFOLIO FINAL CINEMATIC COLLECTION
   Portfolio only
   ========================================================= */


/* ---------------------------------------------------------
   Canvas
   --------------------------------------------------------- */

.story-page[data-story-layout="portfolio"]
.story-content {
    position: relative;

    overflow: hidden;

    padding:
        52px
        0
        92px !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfaf5 52%,
            #ffffff 100%
        ) !important;
}


.story-page[data-story-layout="portfolio"]
.story-content::after {
    display: none !important;
}


.story-page[data-story-layout="portfolio"]
.story-prose {
    position: relative;

    z-index: 3;

    width:
        min(
            calc(100% - 48px),
            1160px
        ) !important;

    max-width:
        1160px !important;

    margin:
        0
        auto !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    content-visibility:
        visible !important;
}


.story-page[data-story-layout="portfolio"]
.story-prose::before,
.story-page[data-story-layout="portfolio"]
.story-prose::after {
    display: none !important;
}


.story-page[data-story-layout="portfolio"]
.story-prose,
.story-page[data-story-layout="portfolio"]
.story-prose > *,
.story-page[data-story-layout="portfolio"]
.portfolio-intro,
.story-page[data-story-layout="portfolio"]
.portfolio-controls,
.story-page[data-story-layout="portfolio"]
.portfolio-collection,
.story-page[data-story-layout="portfolio"]
.portfolio-group,
.story-page[data-story-layout="portfolio"]
.portfolio-grid,
.story-page[data-story-layout="portfolio"]
.portfolio-card {
    opacity: 1 !important;

    visibility: visible !important;

    filter: none !important;
}


/* ---------------------------------------------------------
   Intro
   --------------------------------------------------------- */

.story-page[data-story-layout="portfolio"]
.portfolio-intro {
    position: relative;

    display: grid;

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

    column-gap:
        54px;

    align-items:
        end;

    margin:
        0
        0
        34px;

    padding:
        0
        0
        34px;

    border-bottom:
        1px
        solid
        rgba(40,54,24,.11);
}


.story-page[data-story-layout="portfolio"]
.portfolio-intro::before {
    content: "";

    position: absolute;

    top: 3px;
    left: 0;

    width: 2px;
    height: 76px;

    background:
        linear-gradient(
            180deg,
            var(--amber),
            var(--rust)
        );
}


.story-page[data-story-layout="portfolio"]
.portfolio-intro > h2 {
    grid-column: 1;

    margin:
        0
        0
        17px !important;

    padding:
        0
        0
        0
        25px !important;

    border:
        0 !important;

    color:
        var(--green);

    font-size:
        clamp(
            34px,
            4vw,
            50px
        );

    line-height: 1.07;

    letter-spacing:
        -.035em;
}


.story-page[data-story-layout="portfolio"]
.portfolio-intro > h2::before,
.story-page[data-story-layout="portfolio"]
.portfolio-intro > h2::after {
    display: none !important;
}


.story-page[data-story-layout="portfolio"]
.portfolio-intro > p {
    grid-column: 1;

    max-width: 790px;

    margin:
        0 !important;

    padding-left: 25px;

    color:
        rgba(40,54,24,.78);

    font-size: 17px;

    line-height: 1.74;
}


.story-page[data-story-layout="portfolio"]
.portfolio-summary {
    grid-column: 2;

    grid-row:
        1 / span 2;

    display: flex;

    gap: 10px;
}


.story-page[data-story-layout="portfolio"]
.portfolio-summary-item {
    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 105px;

    padding:
        15px
        18px;

    border:
        1px
        solid
        rgba(40,54,24,.11);

    border-radius: 15px;

    background:
        rgba(254,250,224,.44);
}


.story-page[data-story-layout="portfolio"]
.portfolio-summary-item strong {
    color:
        var(--rust);

    font-size: 28px;

    line-height: 1;
}


.story-page[data-story-layout="portfolio"]
.portfolio-summary-item span {
    margin-top: 7px;

    color:
        rgba(40,54,24,.55);

    font-size: 10px;

    font-weight: 800;

    text-transform:
        uppercase;

    letter-spacing:
        .09em;
}


/* ---------------------------------------------------------
   Filters
   --------------------------------------------------------- */

.story-page[data-story-layout="portfolio"]
.portfolio-controls {
    position: relative;

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 24px;

    margin:
        0
        0
        42px;
}


.story-page[data-story-layout="portfolio"]
.portfolio-filters {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.story-page[data-story-layout="portfolio"]
.portfolio-filter {
    min-height: 44px;

    padding:
        0
        18px;

    border:
        1px
        solid
        rgba(40,54,24,.14);

    border-radius:
        999px;

    background:
        rgba(255,255,255,.92);

    color:
        rgba(40,54,24,.73);

    font: inherit;

    font-size: 13px;

    font-weight: 750;

    cursor: pointer;

    transition:
        background 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}


.story-page[data-story-layout="portfolio"]
.portfolio-filter:hover {
    border-color:
        rgba(193,107,39,.40);

    color:
        var(--rust);

    transform:
        translateY(-1px);
}


.story-page[data-story-layout="portfolio"]
.portfolio-filter.is-active {
    border-color:
        var(--green);

    background:
        var(--green);

    color: #fff;
}


.story-page[data-story-layout="portfolio"]
.portfolio-status {
    color:
        rgba(40,54,24,.48);

    font-size: 11px;

    font-weight: 800;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;
}


/* ---------------------------------------------------------
   Group
   --------------------------------------------------------- */

.story-page[data-story-layout="portfolio"]
.portfolio-group {
    position: relative;

    isolation: isolate;

    overflow: hidden;

    margin:
        0
        0
        58px;

    padding:
        38px
        0
        14px;

    border-top:
        1px
        solid
        rgba(40,54,24,.12);
}


.story-page[data-story-layout="portfolio"]
.portfolio-group[hidden] {
    display: none !important;
}


.story-page[data-story-layout="portfolio"]
.portfolio-group-head {
    position: relative;

    z-index: 5;

    display: grid;

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

    gap: 17px;

    align-items: center;

    margin-bottom: 26px;
}


.story-page[data-story-layout="portfolio"]
.portfolio-group-number {
    color:
        var(--rust);

    font-size: 12px;

    font-weight: 850;

    letter-spacing:
        .08em;
}


.story-page[data-story-layout="portfolio"]
.portfolio-group-title {
    position: relative;

    margin: 0 !important;

    padding:
        0
        0
        14px !important;

    border:
        0 !important;

    color:
        var(--green);

    font-size:
        clamp(
            28px,
            3vw,
            39px
        );

    line-height: 1.08;

    letter-spacing:
        -.025em;
}


.story-page[data-story-layout="portfolio"]
.portfolio-group-title::before {
    display: none !important;
}


.story-page[data-story-layout="portfolio"]
.portfolio-group-title::after {
    content: "";

    position: absolute;

    bottom: 0;
    left: 0;

    width: 55px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--rust),
            var(--amber)
        );

    transition:
        width
        500ms
        cubic-bezier(.2,.75,.25,1);
}


.story-page[data-story-layout="portfolio"]
.portfolio-group.is-motion-active
.portfolio-group-title::after {
    width: 130px;
}


.story-page[data-story-layout="portfolio"]
.portfolio-group-count {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;
    height: 42px;

    border:
        1px
        solid
        rgba(193,107,39,.24);

    border-radius: 50%;

    background:
        rgba(254,250,224,.60);

    color:
        var(--rust);

    font-size: 11px;

    font-weight: 850;
}


/* ---------------------------------------------------------
   Cards
   --------------------------------------------------------- */

.story-page[data-story-layout="portfolio"]
.portfolio-grid {
    position: relative;

    z-index: 5;

    display: grid;

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

    gap: 14px;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    list-style:
        none !important;
}


.story-page[data-story-layout="portfolio"]
.portfolio-card {
    position: relative;

    margin: 0 !important;

    padding:
        23px
        22px
        23px
        55px !important;

    border:
        1px
        solid
        rgba(40,54,24,.10);

    border-radius: 16px;

    background:
        rgba(255,255,255,.88);

    box-shadow:
        0
        7px
        24px
        rgba(40,54,24,.025);

    color:
        rgba(40,54,24,.80);

    font-size: 14px;

    line-height: 1.68;

    transition:
        border-color 190ms ease,
        box-shadow 190ms ease,
        translate 190ms ease;
}


.story-page[data-story-layout="portfolio"]
.portfolio-card::before {
    content:
        attr(
            data-portfolio-number
        );

    position: absolute;

    top: 24px;
    left: 17px;

    color:
        rgba(193,107,39,.77);

    font-size: 10px;

    font-weight: 850;

    letter-spacing:
        .06em;
}


.story-page[data-story-layout="portfolio"]
.portfolio-card::after {
    content: "";

    position: absolute;

    top: 21px;
    bottom: 21px;
    left: 41px;

    width: 1px;

    background:
        rgba(221,161,94,.23);
}


.story-page[data-story-layout="portfolio"]
.portfolio-card:hover {
    border-color:
        rgba(193,107,39,.29);

    box-shadow:
        0
        13px
        30px
        rgba(40,54,24,.055);

    translate:
        0
        -2px;
}


.story-page[data-story-layout="portfolio"]
.portfolio-card a {
    color:
        var(--rust);

    font-weight: 700;

    text-decoration: none;

    border-bottom:
        1px
        solid
        rgba(193,107,39,.32);
}


/* ---------------------------------------------------------
   Motion base
   --------------------------------------------------------- */

.story-page[data-story-layout="portfolio"]
.portfolio-scene {
    position: absolute;

    z-index: 1;

    pointer-events: none;

    opacity: .05;

    transition:
        opacity 450ms ease;
}


.story-page[data-story-layout="portfolio"]
.portfolio-group.is-motion-active
.portfolio-scene {
    opacity: .20;
}


/* =========================================================
   01 — FILM / WRITER
   ========================================================= */

.story-page[data-story-layout="portfolio"]
.portfolio-scene-writer {
    top: 24px;
    right: -28px;

    width: 380px;
    height: 260px;
}


.story-page[data-story-layout="portfolio"]
.portfolio-film-scene {
    position: absolute;

    inset: 0;

    overflow: hidden;

    border:
        1px
        solid
        rgba(193,107,39,.28);
}


.story-page[data-story-layout="portfolio"]
.portfolio-film-edge {
    position: absolute;

    z-index: 3;

    top: 0;
    bottom: 0;

    width: 11px;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(193,107,39,.36) 0,
            rgba(193,107,39,.36) 7px,
            transparent 7px,
            transparent 16px
        );
}


.story-page[data-story-layout="portfolio"]
.portfolio-film-edge.edge-left {
    left: 8px;
}


.story-page[data-story-layout="portfolio"]
.portfolio-film-edge.edge-right {
    right: 8px;
}


.story-page[data-story-layout="portfolio"]
.portfolio-film-track {
    position: absolute;

    inset:
        14px
        27px;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            1fr
        );

    gap: 12px;

    animation:
        portfolioFilmTrack
        3.1s
        ease-in-out
        infinite
        alternate;

    animation-play-state:
        paused;
}


.story-page[data-story-layout="portfolio"]
.is-motion-active
.portfolio-film-track {
    animation-play-state:
        running;
}


.story-page[data-story-layout="portfolio"]
.portfolio-film-frame {
    display: block;

    min-height: 102px;

    border:
        1px
        solid
        rgba(40,54,24,.18);

    background:
        linear-gradient(
            145deg,
            rgba(40,54,24,.04),
            rgba(221,161,94,.08)
        );
}


.story-page[data-story-layout="portfolio"]
.portfolio-film-playhead {
    position: absolute;

    z-index: 5;

    top: 0;
    bottom: 0;

    width: 2px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(193,107,39,.72),
            transparent
        );

    animation:
        portfolioFilmPlayhead
        2.7s
        ease-in-out
        infinite
        alternate;

    animation-play-state:
        paused;
}


.story-page[data-story-layout="portfolio"]
.is-motion-active
.portfolio-film-playhead {
    animation-play-state:
        running;
}


@keyframes portfolioFilmTrack {
    from {
        transform:
            translateY(10px);
    }

    to {
        transform:
            translateY(-22px);
    }
}


@keyframes portfolioFilmPlayhead {
    from {
        left: 8%;
    }

    to {
        left: 92%;
    }
}


/* =========================================================
   02 — SCRIPT DOCTOR
   ========================================================= */

.story-page[data-story-layout="portfolio"]
.portfolio-scene-doctor {
    top: 28px;
    left: -42px;

    width: 350px;
    height: 250px;
}


.story-page[data-story-layout="portfolio"]
.portfolio-script-scene {
    position: absolute;

    inset: 0;
}


.story-page[data-story-layout="portfolio"]
.portfolio-script-page {
    position: absolute;

    inset:
        8px
        20px;

    border:
        1px
        solid
        rgba(40,54,24,.19);

    background:
        rgba(255,255,255,.62);

    transform:
        rotate(-2deg);
}


.story-page[data-story-layout="portfolio"]
.portfolio-script-line {
    position: absolute;

    left: 68px;

    height: 2px;

    background:
        rgba(40,54,24,.25);

    transform-origin:
        left center;

    animation:
        portfolioScriptWrite
        2.8s
        ease-in-out
        infinite;

    animation-play-state:
        paused;
}


.story-page[data-story-layout="portfolio"]
.is-motion-active
.portfolio-script-line {
    animation-play-state:
        running;
}


.story-page[data-story-layout="portfolio"]
.portfolio-script-line.line-1 {
    top: 65px;
    width: 205px;
}


.story-page[data-story-layout="portfolio"]
.portfolio-script-line.line-2 {
    top: 98px;
    width: 160px;

    animation-delay: .18s;
}


.story-page[data-story-layout="portfolio"]
.portfolio-script-line.line-3 {
    top: 131px;
    width: 218px;

    animation-delay: .36s;
}


.story-page[data-story-layout="portfolio"]
.portfolio-script-line.line-4 {
    top: 164px;
    width: 145px;

    animation-delay: .54s;
}


.story-page[data-story-layout="portfolio"]
.portfolio-script-mark {
    position: absolute;

    z-index: 4;

    height: 2px;

    background:
        rgba(193,107,39,.75);

    animation:
        portfolioScriptMark
        3.5s
        ease-in-out
        infinite;

    animation-play-state:
        paused;
}


.story-page[data-story-layout="portfolio"]
.is-motion-active
.portfolio-script-mark {
    animation-play-state:
        running;
}


.story-page[data-story-layout="portfolio"]
.portfolio-script-mark.mark-1 {
    top: 96px;
    left: 115px;

    width: 118px;

    rotate: -4deg;
}


.story-page[data-story-layout="portfolio"]
.portfolio-script-mark.mark-2 {
    top: 162px;
    left: 92px;

    width: 86px;

    rotate: 5deg;

    animation-delay: .7s;
}


.story-page[data-story-layout="portfolio"]
.portfolio-script-caret {
    position: absolute;

    top: 191px;
    left: 70px;

    width: 2px;
    height: 18px;

    background:
        rgba(193,107,39,.78);

    animation:
        portfolioScriptCaret
        .74s
        steps(1)
        infinite;

    animation-play-state:
        paused;
}


.story-page[data-story-layout="portfolio"]
.is-motion-active
.portfolio-script-caret {
    animation-play-state:
        running;
}


@keyframes portfolioScriptWrite {
    0%,
    12% {
        transform:
            scaleX(.05);

        opacity: .18;
    }

    38%,
    74% {
        transform:
            scaleX(1);

        opacity: 1;
    }

    100% {
        opacity: .38;
    }
}


@keyframes portfolioScriptMark {
    0%,
    18% {
        scale:
            0
            1;
    }

    44%,
    78% {
        scale:
            1
            1;
    }

    100% {
        opacity: .30;
    }
}


@keyframes portfolioScriptCaret {
    0%,
    48% {
        opacity: 1;
    }

    49%,
    100% {
        opacity: 0;
    }
}


/* =========================================================
   03 — TRAINER / PROJECTOR
   ========================================================= */

.story-page[data-story-layout="portfolio"]
.portfolio-scene-trainer {
    top: 18px;
    right: -20px;

    width: 390px;
    height: 250px;
}


.story-page[data-story-layout="portfolio"]
.portfolio-projector-scene {
    position: absolute;

    inset: 0;
}


.story-page[data-story-layout="portfolio"]
.portfolio-projector-lens {
    position: absolute;

    top: 101px;
    left: 8px;

    width: 40px;
    height: 40px;

    border:
        1px
        solid
        rgba(193,107,39,.48);

    border-radius: 50%;

    background:
        rgba(221,161,94,.15);

    animation:
        portfolioProjectorLens
        2.5s
        ease-in-out
        infinite;

    animation-play-state:
        paused;
}


.story-page[data-story-layout="portfolio"]
.is-motion-active
.portfolio-projector-lens {
    animation-play-state:
        running;
}


.story-page[data-story-layout="portfolio"]
.portfolio-projector-beam {
    position: absolute;

    top: 49px;
    left: 44px;

    width: 270px;
    height: 145px;

    clip-path:
        polygon(
            0 45%,
            100% 0,
            100% 100%,
            0 55%
        );

    background:
        linear-gradient(
            90deg,
            rgba(221,161,94,.18),
            rgba(221,161,94,.025)
        );

    animation:
        portfolioProjectorBeam
        3.4s
        ease-in-out
        infinite
        alternate;

    animation-play-state:
        paused;
}


.story-page[data-story-layout="portfolio"]
.is-motion-active
.portfolio-projector-beam {
    animation-play-state:
        running;
}


.story-page[data-story-layout="portfolio"]
.portfolio-projector-card {
    position: absolute;

    width: 112px;
    height: 70px;

    border:
        1px
        solid
        rgba(40,54,24,.19);

    background:
        rgba(255,255,255,.66);

    animation:
        portfolioProjectorCards
        4.5s
        ease-in-out
        infinite;

    animation-play-state:
        paused;
}


.story-page[data-story-layout="portfolio"]
.is-motion-active
.portfolio-projector-card {
    animation-play-state:
        running;
}


.story-page[data-story-layout="portfolio"]
.portfolio-projector-card.card-1 {
    top: 38px;
    right: 3px;
}


.story-page[data-story-layout="portfolio"]
.portfolio-projector-card.card-2 {
    top: 99px;
    right: 38px;

    animation-delay: .7s;
}


.story-page[data-story-layout="portfolio"]
.portfolio-projector-card.card-3 {
    top: 158px;
    right: 4px;

    animation-delay: 1.4s;
}


@keyframes portfolioProjectorLens {
    0%,
    100% {
        transform:
            scale(.92);

        opacity: .40;
    }

    50% {
        transform:
            scale(1.12);

        opacity: 1;
    }
}


@keyframes portfolioProjectorBeam {
    from {
        opacity: .28;

        transform:
            scaleY(.82);
    }

    to {
        opacity: .88;

        transform:
            scaleY(1.08);
    }
}


@keyframes portfolioProjectorCards {
    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    50% {
        transform:
            translate3d(
                -15px,
                5px,
                0
            );
    }
}


/* =========================================================
   04 — OTHER / STAGE
   ========================================================= */

.story-page[data-story-layout="portfolio"]
.portfolio-scene-other {
    top: 20px;
    left: -26px;

    width: 370px;
    height: 245px;
}


.story-page[data-story-layout="portfolio"]
.portfolio-stage-scene {
    position: absolute;

    inset: 0;
}


.story-page[data-story-layout="portfolio"]
.portfolio-stage-frame {
    position: absolute;

    inset:
        28px
        42px;

    border:
        1px
        solid
        rgba(40,54,24,.21);
}


.story-page[data-story-layout="portfolio"]
.portfolio-stage-curtain {
    position: absolute;

    top: 16px;
    bottom: 16px;

    width: 46px;

    border:
        1px
        solid
        rgba(193,107,39,.30);

    background:
        repeating-linear-gradient(
            90deg,
            rgba(193,107,39,.08) 0,
            rgba(193,107,39,.08) 5px,
            transparent 5px,
            transparent 11px
        );

    animation:
        portfolioStageCurtain
        4s
        ease-in-out
        infinite
        alternate;

    animation-play-state:
        paused;
}


.story-page[data-story-layout="portfolio"]
.is-motion-active
.portfolio-stage-curtain {
    animation-play-state:
        running;
}


.story-page[data-story-layout="portfolio"]
.portfolio-stage-curtain.curtain-1 {
    left: 42px;
}


.story-page[data-story-layout="portfolio"]
.portfolio-stage-curtain.curtain-2 {
    right: 42px;
}


.story-page[data-story-layout="portfolio"]
.portfolio-stage-cue {
    position: absolute;

    top: 57px;
    left: 50%;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        var(--amber);

    box-shadow:
        0
        0
        18px
        rgba(221,161,94,.55);

    animation:
        portfolioStageCue
        1.7s
        ease-in-out
        infinite;

    animation-play-state:
        paused;
}


.story-page[data-story-layout="portfolio"]
.is-motion-active
.portfolio-stage-cue {
    animation-play-state:
        running;
}


.story-page[data-story-layout="portfolio"]
.portfolio-stage-light {
    position: absolute;

    top: 65px;
    left: 50%;

    width: 205px;
    height: 155px;

    transform:
        translateX(-50%);

    clip-path:
        polygon(
            46% 0,
            54% 0,
            100% 100%,
            0 100%
        );

    background:
        linear-gradient(
            180deg,
            rgba(221,161,94,.17),
            transparent
        );

    transform-origin:
        50%
        0;

    animation:
        portfolioStageLight
        4.4s
        ease-in-out
        infinite
        alternate;

    animation-play-state:
        paused;
}


.story-page[data-story-layout="portfolio"]
.is-motion-active
.portfolio-stage-light {
    animation-play-state:
        running;
}


@keyframes portfolioStageCurtain {
    from {
        scale:
            .84
            1;
    }

    to {
        scale:
            1.10
            1;
    }
}


@keyframes portfolioStageCue {
    0%,
    100% {
        opacity: .28;
    }

    50% {
        opacity: 1;
    }
}


@keyframes portfolioStageLight {
    from {
        transform:
            translateX(-50%)
            rotate(-5deg);
    }

    to {
        transform:
            translateX(-50%)
            rotate(5deg);
    }
}


/* =========================================================
   HERO — EDITING TIMELINE
   ========================================================= */

.story-page[data-story-layout="portfolio"]
.story-art {
    position: relative;

    overflow: hidden;
}


.story-page[data-story-layout="portfolio"]
.story-art-icon {
    position: relative;

    z-index: 5;
}


.story-page[data-story-layout="portfolio"]
.portfolio-hero-motion {
    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;
}


.story-page[data-story-layout="portfolio"]
.portfolio-hero-frame {
    position: absolute;

    height: 70px;

    border:
        1px
        solid
        rgba(255,241,213,.35);

    background:
        rgba(255,241,213,.025);

    animation:
        portfolioHeroFrames
        6.6s
        ease-in-out
        infinite;
}


.story-page[data-story-layout="portfolio"]
.portfolio-hero-frame.frame-1 {
    top: 24%;
    left: 13%;

    width: 27%;
}


.story-page[data-story-layout="portfolio"]
.portfolio-hero-frame.frame-2 {
    top: 42%;
    left: 37%;

    width: 31%;

    animation-delay: .65s;
}


.story-page[data-story-layout="portfolio"]
.portfolio-hero-frame.frame-3 {
    top: 60%;
    left: 60%;

    width: 25%;

    animation-delay: 1.3s;
}


.story-page[data-story-layout="portfolio"]
.portfolio-hero-playhead {
    position: absolute;

    top: 16%;
    bottom: 16%;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255,241,213,.78),
            transparent
        );

    animation:
        portfolioHeroPlayhead
        4s
        ease-in-out
        infinite
        alternate;
}


.story-page[data-story-layout="portfolio"]
.portfolio-hero-timecode {
    position: absolute;

    top: 17%;
    left: 12%;

    color:
        rgba(255,241,213,.60);

    font-size: 11px;

    font-weight: 850;

    letter-spacing:
        .12em;
}


.story-page[data-story-layout="portfolio"]
.portfolio-hero-cut {
    position: absolute;

    right: 12%;
    bottom: 17%;

    color:
        rgba(255,241,213,.60);

    font-size: 11px;

    font-weight: 850;

    letter-spacing:
        .17em;

    animation:
        portfolioHeroCut
        2.2s
        ease-in-out
        infinite;
}


@keyframes portfolioHeroFrames {
    0%,
    100% {
        transform:
            translateX(-8px);

        opacity: .27;
    }

    50% {
        transform:
            translateX(8px);

        opacity: .74;
    }
}


@keyframes portfolioHeroPlayhead {
    from {
        left: 12%;

        opacity: .20;
    }

    25% {
        opacity: .92;
    }

    to {
        left: 88%;

        opacity: .24;
    }
}


@keyframes portfolioHeroCut {
    0%,
    100% {
        opacity: .20;
    }

    50% {
        opacity: .94;
    }
}


/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (
    max-width: 900px
) {

    .story-page[data-story-layout="portfolio"]
    .story-prose {
        width:
            calc(
                100% -
                30px
            ) !important;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-intro {
        grid-template-columns:
            1fr;

        row-gap: 23px;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-summary {
        grid-column: 1;

        grid-row: auto;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-controls {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-scene {
        opacity: .035;

        scale: .82;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-group.is-motion-active
    .portfolio-scene {
        opacity: .11;
    }
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (
    max-width: 680px
) {

    .story-page[data-story-layout="portfolio"]
    .story-content {
        padding:
            30px
            0
            58px !important;
    }


    .story-page[data-story-layout="portfolio"]
    .story-prose {
        width:
            calc(
                100% -
                40px
            ) !important;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-intro {
        grid-template-columns:
            1fr;

        row-gap: 22px;

        margin-bottom: 26px;

        padding-bottom: 28px;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-intro > h2 {
        padding-left:
            17px !important;

        font-size:
            clamp(
                29px,
                9vw,
                38px
            );
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-intro > p {
        padding-left: 17px;

        font-size: 16px;

        line-height: 1.70;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-summary {
        grid-column: 1;

        grid-row: auto;

        gap: 8px;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-summary-item {
        flex: 1;

        min-width: 0;

        padding:
            13px
            14px;
    }


    /*
     * Filters scroll inside their own container.
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-filters {
        flex-wrap:
            nowrap;

        width: 100%;

        overflow-x: auto;

        padding-bottom: 7px;

        scrollbar-width:
            none;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-filters::-webkit-scrollbar {
        display: none;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-filter {
        flex:
            0
            0
            auto;

        min-height: 44px;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-group {
        margin-bottom: 43px;

        padding-top: 29px;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-group-head {
        grid-template-columns:
            31px
            minmax(0,1fr)
            38px;

        gap: 9px;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-group-title {
        font-size:
            clamp(
                25px,
                7.3vw,
                32px
            );
    }


    /*
     * Mobile content uses one real column.
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-grid {
        grid-template-columns:
            minmax(0,1fr);
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-card {
        padding:
            20px
            17px
            20px
            48px !important;

        font-size: 14px;

        line-height: 1.64;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-card::before {
        left: 14px;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-card::after {
        left: 37px;
    }


    /*
     * Critical project rule:
     * mobile decorations NEVER own a layout column.
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-scene,
    .story-page[data-story-layout="portfolio"]
    .portfolio-scene-doctor,
    .story-page[data-story-layout="portfolio"]
    .portfolio-scene-other {
        position: absolute;

        top: 12px;
        right: -90px;
        left: auto;

        width: 250px;
        height: 170px;

        opacity: .022;

        scale: .68;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-group.is-motion-active
    .portfolio-scene {
        opacity: .060;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-hero-frame {
        height: 52px;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-hero-timecode {
        left: 8%;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-hero-cut {
        right: 8%;
    }
}


/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */

@media (
    prefers-reduced-motion: reduce
) {

    .story-page[data-story-layout="portfolio"]
    .portfolio-film-track,

    .story-page[data-story-layout="portfolio"]
    .portfolio-film-playhead,

    .story-page[data-story-layout="portfolio"]
    .portfolio-script-line,

    .story-page[data-story-layout="portfolio"]
    .portfolio-script-mark,

    .story-page[data-story-layout="portfolio"]
    .portfolio-script-caret,

    .story-page[data-story-layout="portfolio"]
    .portfolio-projector-lens,

    .story-page[data-story-layout="portfolio"]
    .portfolio-projector-beam,

    .story-page[data-story-layout="portfolio"]
    .portfolio-projector-card,

    .story-page[data-story-layout="portfolio"]
    .portfolio-stage-curtain,

    .story-page[data-story-layout="portfolio"]
    .portfolio-stage-cue,

    .story-page[data-story-layout="portfolio"]
    .portfolio-stage-light,

    .story-page[data-story-layout="portfolio"]
    .portfolio-hero-frame,

    .story-page[data-story-layout="portfolio"]
    .portfolio-hero-playhead,

    .story-page[data-story-layout="portfolio"]
    .portfolio-hero-cut {
        animation:
            none !important;
    }
}


/* =========================================================
   PORTFOLIO NUMBER SCALE V1
   Desktop only
   ========================================================= */

@media (
    min-width: 901px
) {

    /*
     * 26 / 04 summary.
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-summary-item strong {
        font-size: 38px;

        line-height: .95;

        letter-spacing: -.035em;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-summary-item span {
        margin-top: 9px;

        font-size: 11px;
    }


    /*
     * 01 / 02 / 03 / 04
     * section identifiers.
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-group-number {
        font-size: 18px;

        line-height: 1;

        letter-spacing: .06em;
    }


    /*
     * 12 / 05 / 03 / 06
     * section work counters.
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-group-count {
        width: 50px;
        height: 50px;

        font-size: 15px;

        line-height: 1;

        letter-spacing: .03em;
    }


    /*
     * 01–26 inside project cards.
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-card::before {
        top: 23px;
        left: 15px;

        font-size: 13px;

        line-height: 1;

        letter-spacing: .045em;
    }


    /*
     * Give the larger number a little
     * more breathing room from divider.
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-card {
        padding-left:
            59px !important;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-card::after {
        left: 45px;
    }


    /*
     * "26 iş" beside filters.
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-status {
        font-size: 13px;

        letter-spacing: .07em;
    }


    /*
     * Hero timecode.
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-hero-timecode {
        font-size: 13px;

        font-weight: 850;
    }
}



/* =========================================================
   PORTFOLIO COUNTER CIRCLE SAFE SPACE V1
   Desktop only
   ========================================================= */

@media (
    min-width: 901px
) {

    /*
     * Enlarged right circle needs a wider grid column
     * and a little breathing room from the section edge.
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-group {
        padding-right: 14px;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-group-head {
        grid-template-columns:
            48px
            minmax(0,1fr)
            58px;

        gap: 18px;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-group-count {
        justify-self: end;
    }
}



/* =========================================================
   PORTFOLIO IMMEDIATE CONTENT + MOBILE NUMBERS V1
   Fix delayed content reveal and mobile counters
   ========================================================= */


/* ---------------------------------------------------------
   Portfolio content must be visible immediately
   on desktop and mobile.
   This removes the large blank scroll zone.
   --------------------------------------------------------- */

.story-page[data-story-layout="portfolio"]
.story-content,
.story-page[data-story-layout="portfolio"]
.story-prose,
.story-page[data-story-layout="portfolio"]
.story-prose > *,
.story-page[data-story-layout="portfolio"]
.portfolio-intro,
.story-page[data-story-layout="portfolio"]
.portfolio-controls,
.story-page[data-story-layout="portfolio"]
.portfolio-collection,
.story-page[data-story-layout="portfolio"]
.portfolio-group,
.story-page[data-story-layout="portfolio"]
.portfolio-grid,
.story-page[data-story-layout="portfolio"]
.portfolio-card {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    transform: none !important;
    content-visibility: visible !important;
    contain: none !important;
    contain-intrinsic-size: auto !important;
}


.story-page[data-story-layout="portfolio"]
.story-content {
    min-height: auto !important;
}


.story-page[data-story-layout="portfolio"]
.portfolio-intro,
.story-page[data-story-layout="portfolio"]
.portfolio-controls,
.story-page[data-story-layout="portfolio"]
.portfolio-collection,
.story-page[data-story-layout="portfolio"]
.portfolio-group {
    transition-delay: 0s !important;
}


/* ---------------------------------------------------------
   Mobile numbers and circles
   --------------------------------------------------------- */

@media (
    max-width: 680px
) {

    /*
     * Keep the right circle fully visible.
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-group {
        padding-right: 20px;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-group-head {
        grid-template-columns:
            40px
            minmax(0,1fr)
            58px;

        gap: 12px;
    }


    /*
     * 01 / 02 / 03 / 04 near headings.
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-group-number {
        font-size: 18px;
        line-height: 1;
        letter-spacing: .05em;
    }


    /*
     * 12 / 05 / 03 / 06 circles.
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-group-count {
        width: 54px;
        height: 54px;

        font-size: 18px;
        line-height: 1;

        justify-self: end;
    }


    /*
     * 01–26 inside cards.
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-card {
        padding-left: 54px !important;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-card::before {
        top: 22px;
        left: 15px;

        font-size: 15px;
        line-height: 1;
        letter-spacing: .04em;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-card::after {
        left: 40px;
    }


    /*
     * 26 iş label.
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-status {
        font-size: 14px;
        letter-spacing: .06em;
    }
}



/* =========================================================
   PORTFOLIO READABILITY + MOBILE NAV V1
   Larger readable typography + fixed mobile filters
   ========================================================= */


/* ---------------------------------------------------------
   DESKTOP / GENERAL READABILITY
   --------------------------------------------------------- */

.story-page[data-story-layout="portfolio"]
.portfolio-intro > p {
    font-size: 18px;

    line-height: 1.78;
}


.story-page[data-story-layout="portfolio"]
.portfolio-card {
    font-size: 16px;

    line-height: 1.72;

    letter-spacing: .002em;
}


.story-page[data-story-layout="portfolio"]
.portfolio-filter {
    font-size: 14px;
}


.story-page[data-story-layout="portfolio"]
.portfolio-status {
    font-size: 13px;
}


.story-page[data-story-layout="portfolio"]
.portfolio-summary-item span {
    font-size: 11px;
}


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

@media (
    max-width: 680px
) {

    /*
     * Main copy.
     *
     * 17px is intentionally used here because
     * Portfolio contains long descriptive cards.
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-intro > p {
        font-size: 17px;

        line-height: 1.72;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-card {
        font-size: 17px;

        line-height: 1.66;

        letter-spacing: 0;

        padding:
            22px
            18px
            23px
            57px !important;
    }


    /*
     * Project number remains clearly separated
     * from the larger body text.
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-card::before {
        top: 24px;
        left: 15px;

        font-size: 16px;

        line-height: 1;

        font-weight: 850;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-card::after {
        top: 22px;
        bottom: 22px;
        left: 42px;
    }


    /*
     * =====================================================
     * MOBILE FILTER NAVIGATION
     *
     * No horizontal scrolling.
     *
     * Hamısı
     * Ssenarist | Skript doktor
     * Təlimçi    | Digər
     * =====================================================
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-controls {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 13px;

        width: 100%;

        margin:
            0
            0
            22px;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-filters {
        display: grid !important;

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

        gap: 10px;

        width: 100%;

        max-width: 100%;

        overflow: visible !important;

        padding: 0 !important;

        margin: 0;

        scrollbar-width: auto;

        overscroll-behavior-x: auto;
    }


    /*
     * Hamısı occupies first full row.
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-filter:first-child {
        grid-column:
            1 / -1;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-filter {
        display: flex;

        align-items: center;

        justify-content: center;

        width: 100%;

        min-width: 0;

        min-height: 50px;

        padding:
            8px
            12px;

        font-size: 15px;

        line-height: 1.2;

        text-align: center;

        white-space: normal;
    }


    /*
     * Active filter stays visually strong,
     * but does not become wider than its cell.
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-filter.is-active {
        width: 100%;
    }


    /*
     * Result count sits cleanly below filters.
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-status {
        align-self: flex-end;

        margin:
            1px
            2px
            0;

        font-size: 15px;

        line-height: 1;

        letter-spacing: .055em;
    }


    /*
     * Reduce the unnecessary empty vertical area
     * between navigation and first chapter.
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-group {
        padding-top: 24px;
    }


    /*
     * Section typography.
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-group-title {
        font-size:
            clamp(
                29px,
                8vw,
                35px
            );

        line-height: 1.08;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-group-number {
        font-size: 19px;
    }


    /*
     * Right counter circle:
     * larger number, but preserve safe space.
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-group-head {
        grid-template-columns:
            42px
            minmax(0,1fr)
            62px;

        gap: 11px;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-group-count {
        width: 56px;
        height: 56px;

        max-width: 56px;

        font-size: 19px;

        justify-self: end;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-group {
        padding-right: 22px;
    }


    /*
     * Top 26 / 04 summary cards.
     */

    .story-page[data-story-layout="portfolio"]
    .portfolio-summary-item strong {
        font-size: 34px;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-summary-item span {
        font-size: 12px;

        line-height: 1.2;
    }
}



/* =========================================================
   SERVICES INDEX CINEMATIC PROCESS V1
   ========================================================= */

html.services-index-page,
html.services-index-page body {
    overflow-x: clip;
}


/* HERO PROCESS VISUAL */

html.services-index-page .listing-hero {
    isolation: isolate;
}

html.services-index-page .listing-hero-inner {
    position: relative;
    z-index: 2;
}

.services-hero-flow {
    position: absolute;

    z-index: 1;

    top: 50%;
    right: max(
        5vw,
        calc(
            (
                100vw - 1200px
            ) / 2
        )
    );

    width: min(
        35vw,
        430px
    );

    transform:
        translateY(-50%);

    pointer-events: none;

    opacity: .92;
}

.services-hero-flow svg {
    display: block;

    width: 100%;
    height: auto;

    overflow: visible;
}

.services-hero-flow path {
    fill: none;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.services-hero-track {
    stroke:
        rgba(
            254,
            250,
            224,
            .22
        );

    stroke-width: 2;
}

.services-hero-run {
    stroke:
        var(
            --amber,
            #DDA15E
        );

    stroke-width: 4;

    stroke-dasharray: 900;
    stroke-dashoffset: 900;

    animation:
        servicesHeroRoute
        2.8s
        cubic-bezier(
            .22,
            .75,
            .18,
            1
        )
        .18s
        forwards;
}

.services-hero-flow circle {
    fill:
        var(
            --rust,
            #BC6C25
        );

    stroke:
        rgba(
            254,
            250,
            224,
            .72
        );

    stroke-width: 2;

    transform-box: fill-box;
    transform-origin: center;

    animation:
        servicesHeroNode
        .55s
        ease-out
        both;
}

.services-hero-flow circle:nth-of-type(1) {
    animation-delay: .18s;
}

.services-hero-flow circle:nth-of-type(2) {
    animation-delay: .42s;
}

.services-hero-flow circle:nth-of-type(3) {
    animation-delay: .68s;
}

.services-hero-flow circle:nth-of-type(4) {
    animation-delay: .92s;
}

.services-hero-flow circle:nth-of-type(5) {
    animation-delay: 1.16s;
}

.services-hero-flow circle:nth-of-type(6) {
    animation-delay: 1.40s;
}

.services-hero-flow circle:nth-of-type(7) {
    animation-delay: 1.64s;
}

.services-hero-flow-meta {
    display: grid;

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

    align-items: center;

    gap: 14px;

    width: 76%;

    margin:
        -6px
        0
        0
        auto;

    color:
        rgba(
            254,
            250,
            224,
            .78
        );

    font-size: 18px;
    line-height: 1;
    font-weight: 700;

    letter-spacing: .08em;
}

.services-hero-flow-meta i {
    display: block;

    height: 1px;

    background:
        rgba(
            254,
            250,
            224,
            .38
        );
}


/* MAIN SERVICES STAGE */

.services-stage {
    position: relative;

    overflow: hidden;

    padding:
        72px
        0
        86px;

    background:
        linear-gradient(
            180deg,
            #fff 0%,
            rgba(
                254,
                250,
                224,
                .46
            ) 48%,
            #fff 100%
        );
}

.services-stage::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: min(
        1200px,
        calc(
            100% - 64px
        )
    );

    height: 1px;

    transform:
        translateX(-50%);

    background:
        rgba(
            40,
            54,
            24,
            .12
        );
}

.services-stage-inner {
    position: relative;

    min-width: 0;
}


/* 01 → 07 PROCESS RAIL */

.services-process {
    display: grid;

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

    align-items: center;

    gap: 20px;

    max-width: 980px;

    margin:
        0
        auto
        54px;

    padding:
        0
        4px;
}

.services-process-edge {
    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 24px;
    line-height: 1;
    font-weight: 750;

    font-variant-numeric:
        tabular-nums;
}

.services-process-rail {
    position: relative;

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    min-width: 0;
    height: 28px;
}

.services-process-rail::before {
    content: "";

    position: absolute;

    z-index: 0;

    left: 0;
    right: 0;
    top: 50%;

    height: 1px;

    background:
        rgba(
            40,
            54,
            24,
            .18
        );

    transform:
        translateY(-50%);
}

.services-process-fill {
    position: absolute;

    z-index: 1;

    left: 0;
    top: 50%;

    width: 0;
    height: 2px;

    transform:
        translateY(-50%);

    background:
        linear-gradient(
            90deg,
            var(
                --rust,
                #BC6C25
            ),
            var(
                --amber,
                #DDA15E
            )
        );

    transition:
        width
        1.45s
        cubic-bezier(
            .22,
            .75,
            .18,
            1
        );
}

.services-stage.is-entered
.services-process-fill {
    width: 100%;
}

.services-process-node {
    position: relative;

    z-index: 2;

    width: 13px;
    height: 13px;

    flex: 0 0 auto;

    border:
        2px
        solid
        rgba(
            188,
            108,
            37,
            .48
        );

    border-radius: 50%;

    background: #fff;

    transform:
        scale(.72);

    transition:
        border-color .35s ease,
        background-color .35s ease,
        transform .35s ease;
}

.services-stage.is-entered
.services-process-node {
    border-color:
        var(
            --rust,
            #BC6C25
        );

    background:
        var(
            --paper,
            #FEFAE0
        );

    transform:
        scale(1);
}

.services-stage.is-entered
.services-process-node:nth-of-type(2) {
    transition-delay: .10s;
}

.services-stage.is-entered
.services-process-node:nth-of-type(3) {
    transition-delay: .20s;
}

.services-stage.is-entered
.services-process-node:nth-of-type(4) {
    transition-delay: .30s;
}

.services-stage.is-entered
.services-process-node:nth-of-type(5) {
    transition-delay: .40s;
}

.services-stage.is-entered
.services-process-node:nth-of-type(6) {
    transition-delay: .50s;
}

.services-stage.is-entered
.services-process-node:nth-of-type(7) {
    transition-delay: .60s;
}

.services-stage.is-entered
.services-process-node:nth-of-type(8) {
    transition-delay: .70s;
}


/* CARDS */

.services-editorial-grid {
    display: grid;

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

    gap: 24px;

    min-width: 0;
}

.services-editorial-card {
    position: relative;

    display: flex;

    flex-direction: column;

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

    padding:
        30px
        32px
        28px;

    overflow: hidden;

    border:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .15
        );

    border-radius: 16px;

    background:
        rgba(
            254,
            250,
            224,
            .46
        );

    color:
        var(
            --green,
            #283618
        );

    text-decoration: none;

    transition:
        background-color .25s ease,
        border-color .25s ease;
}

.services-editorial-card:hover,
.services-editorial-card:focus-visible {
    background:
        rgba(
            254,
            250,
            224,
            .82
        );

    border-color:
        rgba(
            188,
            108,
            37,
            .55
        );
}

.services-editorial-card:focus-visible {
    outline:
        3px
        solid
        rgba(
            96,
            108,
            56,
            .34
        );

    outline-offset: 4px;
}

.services-card-number {
    display: block;

    width: fit-content;

    margin-bottom: 24px;

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 50px;
    line-height: .9;
    font-weight: 750;

    font-variant-numeric:
        tabular-nums;

    letter-spacing: -.045em;

    transform:
        translateX(0);

    transition:
        transform .32s ease;
}

.services-editorial-card:hover
.services-card-number,
.services-editorial-card:focus-visible
.services-card-number {
    transform:
        translateX(4px);
}

.services-card-title {
    max-width: 95%;

    margin:
        0
        0
        16px;

    color:
        var(
            --green,
            #283618
        );

    font-size:
        clamp(
            25px,
            2.15vw,
            31px
        );

    line-height: 1.13;
    font-weight: 700;

    letter-spacing: -.025em;
}

.services-card-summary {
    max-width: 620px;

    margin:
        0
        0
        26px;

    color:
        var(
            --muted,
            #606C38
        );

    font-size: 17px;
    line-height: 1.65;
    font-weight: 400;
}

.services-card-summary:empty {
    display: none;
}

.services-card-more {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    width: fit-content;

    margin-top: auto;

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}

.services-card-more i {
    font-style: normal;

    font-size: 21px;

    transition:
        transform .25s ease;
}

.services-editorial-card:hover
.services-card-more i,
.services-editorial-card:focus-visible
.services-card-more i {
    transform:
        translateX(4px);
}


/*
 * Directional line is decorative only and therefore
 * never occupies a content/grid column.
 */

.services-card-direction {
    position: absolute;

    right: 24px;
    top: 30px;

    width: 104px;
    height: 30px;

    pointer-events: none;

    opacity: .50;
}

.services-card-direction i {
    position: absolute;

    left: 0;
    right: 0;
    top: 50%;

    height: 1px;

    background:
        rgba(
            188,
            108,
            37,
            .34
        );
}

.services-card-direction b {
    position: absolute;

    right: 0;
    top: 50%;

    width: 8px;
    height: 8px;

    border:
        solid
        var(
            --rust,
            #BC6C25
        );

    border-width:
        1px
        1px
        0
        0;

    transform:
        translateY(-50%)
        rotate(45deg);
}


/*
 * One-shot accent reveal.
 * Card text itself is NEVER opacity-hidden.
 */

.services-editorial-card::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(
                --rust,
                #BC6C25
            ),
            var(
                --amber,
                #DDA15E
            )
        );

    transition:
        width
        .72s
        cubic-bezier(
            .22,
            .75,
            .18,
            1
        );
}

.services-editorial-card.is-active::after {
    width: 100%;
}


/*
 * Seventh service acts as the closing editorial card
 * instead of leaving a dead empty cell.
 */

.services-editorial-card:nth-child(7) {
    grid-column:
        1 / -1;

    min-height: 235px;

    padding-right: 12%;
}

.services-editorial-card:nth-child(7)
.services-card-title {
    max-width: 720px;
}

.services-editorial-card:nth-child(7)
.services-card-summary {
    max-width: 780px;
}


/* TABLET */

@media (
    max-width: 1024px
) {

    .services-hero-flow {
        right: 34px;

        width: 340px;

        opacity: .72;
    }

    .services-editorial-card {
        min-height: 290px;

        padding:
            28px
            28px
            26px;
    }

    .services-card-number {
        font-size: 44px;
    }

    .services-card-title {
        font-size: 26px;
    }

    .services-card-direction {
        right: 22px;

        width: 72px;
    }
}


/* MOBILE */

@media (
    max-width: 760px
) {

    html.services-index-page
    .listing-hero-inner {
        padding-bottom:
            100px;
    }

    .services-hero-flow {
        top: auto;
        right: 20px;
        bottom: 12px;

        width: 190px;

        transform: none;

        opacity: .62;
    }

    .services-hero-flow-meta {
        gap: 9px;

        font-size: 15px;
    }

    .services-stage {
        padding:
            46px
            0
            58px;
    }

    .services-stage::before {
        width:
            calc(
                100% - 40px
            );
    }

    .services-process {
        gap: 12px;

        margin-bottom: 36px;
    }

    .services-process-edge {
        font-size: 20px;
    }

    .services-process-node {
        width: 10px;
        height: 10px;

        border-width: 1.5px;
    }

    .services-editorial-grid {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 18px;
    }

    .services-editorial-card,
    .services-editorial-card:nth-child(7) {
        grid-column: auto;

        min-height: 0;

        padding:
            24px
            22px
            23px;
    }

    .services-card-number {
        margin-bottom: 20px;

        font-size: 42px;
    }

    .services-card-title,
    .services-editorial-card:nth-child(7)
    .services-card-title {
        max-width:
            calc(
                100% - 42px
            );

        margin-bottom: 14px;

        font-size: 26px;
        line-height: 1.16;
    }

    .services-card-summary,
    .services-editorial-card:nth-child(7)
    .services-card-summary {
        max-width: 100%;

        margin-bottom: 24px;

        font-size: 17px;
        line-height: 1.67;
    }

    .services-card-more {
        min-height: 44px;

        font-size: 16px;
    }

    .services-card-direction {
        top: 27px;
        right: 20px;

        width: 48px;
    }
}


@media (
    max-width: 390px
) {

    .services-card-title,
    .services-editorial-card:nth-child(7)
    .services-card-title {
        max-width: 100%;

        font-size: 24px;
    }

    .services-card-direction {
        width: 38px;

        opacity: .34;
    }

    .services-process {
        gap: 9px;
    }
}


/* REDUCED MOTION */

@media (
    prefers-reduced-motion: reduce
) {

    .services-hero-run,
    .services-hero-flow circle {
        animation: none !important;
    }

    .services-hero-run {
        stroke-dashoffset: 0;
    }

    .services-process-fill {
        width: 100%;

        transition: none;
    }

    .services-process-node,
    .services-card-number,
    .services-card-more i,
    .services-editorial-card::after {
        transition: none;
    }

    .services-process-node {
        transform: scale(1);
    }

    .services-editorial-card::after {
        width: 100%;
    }
}


@keyframes servicesHeroRoute {

    from {
        stroke-dashoffset: 900;
    }

    to {
        stroke-dashoffset: 0;
    }
}


@keyframes servicesHeroNode {

    from {
        opacity: .2;

        transform:
            scale(.55);
    }

    to {
        opacity: 1;

        transform:
            scale(1);
    }
}


/* =========================================================
   END SERVICES INDEX CINEMATIC PROCESS V1
   ========================================================= */



/* =========================================================
   SERVICES INDEX CINEMATIC DESIGN V3
   ========================================================= */


/* ---------------------------------------------------------
   OLD LISTING
   --------------------------------------------------------- */

.services-v3-old-hidden {
    display: none !important;
}


/* ---------------------------------------------------------
   SAFETY
   --------------------------------------------------------- */

html[data-services-cinematic="v3"],
html[data-services-cinematic="v3"] body {
    overflow-x: clip;
}


/* ---------------------------------------------------------
   HERO MOTION
   --------------------------------------------------------- */

.services-v3-hero-motion {
    position: absolute;

    z-index: 2;

    top: 50%;
    right: 6%;

    width:
        min(
            38vw,
            470px
        );

    height: 270px;

    transform:
        translateY(-50%);

    pointer-events: none;

    opacity: .82;
}


.services-v3-hero-motion::before {
    content: "";

    position: absolute;

    inset: 12px;

    border:
        1px
        solid
        rgba(
            254,
            250,
            224,
            .16
        );

    transform:
        rotate(-4deg);
}


.services-v3-hero-motion::after {
    content: "";

    position: absolute;

    inset:
        36px
        24px;

    border:
        1px
        solid
        rgba(
            254,
            250,
            224,
            .10
        );

    transform:
        rotate(3deg);
}


.services-v3-hero-motion
.hero-route {
    position: absolute;

    z-index: 3;

    display: block;

    height: 2px;

    transform-origin:
        left center;

    background:
        rgba(
            254,
            250,
            224,
            .38
        );
}


.services-v3-hero-motion
.route-a {
    left: 8%;
    top: 69%;

    width: 35%;

    transform:
        rotate(-17deg);
}


.services-v3-hero-motion
.route-b {
    left: 39%;
    top: 56%;

    width: 28%;

    transform:
        rotate(10deg);
}


.services-v3-hero-motion
.route-c {
    left: 64%;
    top: 54%;

    width: 28%;

    transform:
        rotate(-25deg);
}


.services-v3-hero-motion
.hero-node {
    position: absolute;

    z-index: 5;

    width: 12px;
    height: 12px;

    border:
        2px
        solid
        rgba(
            254,
            250,
            224,
            .72
        );

    border-radius: 50%;

    background:
        var(
            --rust,
            #BC6C25
        );

    animation:
        servicesV3Node
        2.8s
        ease-in-out
        infinite;
}


.services-v3-hero-motion
.node-1 {
    left: 7%;
    top: 72%;
}


.services-v3-hero-motion
.node-2 {
    left: 23%;
    top: 65%;

    animation-delay: .20s;
}


.services-v3-hero-motion
.node-3 {
    left: 40%;
    top: 53%;

    animation-delay: .40s;
}


.services-v3-hero-motion
.node-4 {
    left: 53%;
    top: 59%;

    animation-delay: .60s;
}


.services-v3-hero-motion
.node-5 {
    left: 65%;
    top: 53%;

    animation-delay: .80s;
}


.services-v3-hero-motion
.node-6 {
    left: 79%;
    top: 41%;

    animation-delay: 1s;
}


.services-v3-hero-motion
.node-7 {
    left: 91%;
    top: 31%;

    width: 16px;
    height: 16px;

    animation-delay: 1.2s;
}


.services-v3-hero-motion
.hero-runner {
    position: absolute;

    z-index: 6;

    left: 7%;
    top: 71%;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background:
        var(
            --amber,
            #DDA15E
        );

    box-shadow:
        0
        0
        24px
        rgba(
            221,
            161,
            94,
            .58
        );

    animation:
        servicesV3Runner
        5.2s
        ease-in-out
        infinite;
}


.services-v3-hero-motion
strong {
    position: absolute;

    z-index: 5;

    color:
        rgba(
            254,
            250,
            224,
            .68
        );

    font-size: 24px;
    line-height: 1;
    font-weight: 850;
}


.services-v3-hero-motion
strong:first-of-type {
    left: 7%;
    bottom: 6%;
}


.services-v3-hero-motion
strong:last-of-type {
    right: 5%;
    top: 7%;
}


/* ---------------------------------------------------------
   MAIN STAGE
   --------------------------------------------------------- */

.services-v3-stage {
    position: relative;

    overflow: hidden;

    padding:
        54px
        0
        82px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            rgba(
                254,
                250,
                224,
                .36
            ) 48%,
            #ffffff
        );
}


.services-v3-stage::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width:
        min(
            1160px,
            calc(
                100% - 48px
            )
        );

    height: 1px;

    transform:
        translateX(-50%);

    background:
        rgba(
            40,
            54,
            24,
            .12
        );
}


/* ---------------------------------------------------------
   01–07 PROCESS RAIL
   --------------------------------------------------------- */

.services-v3-rail {
    position: relative;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    width:
        min(
            100%,
            940px
        );

    height: 56px;

    margin:
        0
        auto
        48px;

    padding:
        0
        16px;
}


.services-v3-rail::before {
    content: "01";

    position: absolute;

    left: -44px;
    top: 50%;

    transform:
        translateY(-50%);

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 28px;
    line-height: 1;
    font-weight: 850;
}


.services-v3-rail::after {
    content: "07";

    position: absolute;

    right: -44px;
    top: 50%;

    transform:
        translateY(-50%);

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 28px;
    line-height: 1;
    font-weight: 850;
}


.services-v3-track {
    position: absolute;

    z-index: 0;

    left: 16px;
    right: 16px;
    top: 50%;

    height: 3px;

    transform:
        translateY(-50%)
        scaleX(0);

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            var(
                --rust,
                #BC6C25
            ),
            var(
                --amber,
                #DDA15E
            )
        );

    transition:
        transform
        1.3s
        ease;
}


.services-v3-stage.is-active
.services-v3-track {
    transform:
        translateY(-50%)
        scaleX(1);
}


.services-v3-dot {
    position: relative;

    z-index: 2;

    display: block;

    width: 18px;
    height: 18px;

    border:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    background: #fff;

    transform:
        scale(.65);

    transition:
        transform .35s ease,
        background-color .35s ease;
}


.services-v3-stage.is-active
.services-v3-dot {
    transform:
        scale(1);

    background:
        var(
            --paper,
            #FEFAE0
        );
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.services-v3-grid {
    display: grid;

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

    gap: 22px;
}


/* ---------------------------------------------------------
   CARD
   --------------------------------------------------------- */

.services-v3-card {
    position: relative;

    isolation: isolate;

    display: flex;

    flex-direction: column;

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

    overflow: hidden;

    padding:
        30px
        32px
        29px;

    border:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .13
        );

    border-radius: 18px;

    background:
        rgba(
            255,
            255,
            255,
            .88
        );

    color:
        var(
            --green,
            #283618
        );

    text-decoration: none;

    box-shadow:
        0
        10px
        30px
        rgba(
            40,
            54,
            24,
            .035
        );

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}


.services-v3-card:hover,
.services-v3-card:focus-visible {
    transform:
        translateY(-3px);

    border-color:
        rgba(
            188,
            108,
            37,
            .42
        );

    box-shadow:
        0
        18px
        38px
        rgba(
            40,
            54,
            24,
            .07
        );
}


.services-v3-card::after {
    content: "";

    position: absolute;

    z-index: 5;

    left: 0;
    bottom: 0;

    width: 0;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(
                --rust,
                #BC6C25
            ),
            var(
                --amber,
                #DDA15E
            )
        );

    transition:
        width .65s ease;
}


.services-v3-card.is-active::after {
    width: 100%;
}


/* LARGE NUMBERS */

.services-v3-number {
    position: relative;

    z-index: 4;

    display: block;

    width: fit-content;

    margin:
        0
        0
        24px;

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 64px;
    line-height: .88;
    font-weight: 850;

    letter-spacing:
        -.06em;

    font-variant-numeric:
        tabular-nums;
}


.services-v3-title {
    position: relative;

    z-index: 4;

    max-width: 78%;

    margin:
        0
        0
        15px;

    color:
        var(
            --green,
            #283618
        );

    font-size:
        clamp(
            28px,
            2.2vw,
            34px
        );

    line-height: 1.12;
    font-weight: 750;

    letter-spacing:
        -.025em;
}


.services-v3-summary {
    position: relative;

    z-index: 4;

    max-width: 88%;

    margin:
        0
        0
        26px;

    color:
        rgba(
            40,
            54,
            24,
            .78
        );

    font-size: 17px;
    line-height: 1.68;
}


.services-v3-action {
    position: relative;

    z-index: 4;

    display: inline-flex;

    align-items: center;

    gap: 11px;

    width: fit-content;

    margin-top: auto;

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 16px;
    line-height: 1;
    font-weight: 750;
}


.services-v3-action i {
    font-style: normal;

    font-size: 22px;

    transition:
        transform .20s ease;
}


.services-v3-card:hover
.services-v3-action i {
    transform:
        translateX(5px);
}


/* ---------------------------------------------------------
   MOTION FIELD
   --------------------------------------------------------- */

.services-v3-motion {
    position: absolute;

    z-index: 1;

    top: 22px;
    right: 16px;

    width: 180px;
    height: 150px;

    pointer-events: none;

    opacity: .11;
}


.services-v3-motion i {
    position: absolute;

    display: block;
}


/* 01 — WRITING */

.services-v3-card[
    data-effect="1"
]
.services-v3-motion {
    border:
        1px
        solid
        rgba(
            188,
            108,
            37,
            .40
        );
}


.services-v3-card[
    data-effect="1"
]
.services-v3-motion i {
    left: 24px;

    height: 2px;

    background:
        var(
            --rust,
            #BC6C25
        );

    transform-origin:
        left center;

    animation:
        serviceV3Write
        3.2s
        ease-in-out
        infinite;
}


.services-v3-card[
    data-effect="1"
]
.services-v3-motion i:nth-child(1) {
    top: 34px;
    width: 116px;
}


.services-v3-card[
    data-effect="1"
]
.services-v3-motion i:nth-child(2) {
    top: 62px;
    width: 88px;

    animation-delay: .25s;
}


.services-v3-card[
    data-effect="1"
]
.services-v3-motion i:nth-child(3) {
    top: 90px;
    width: 126px;

    animation-delay: .50s;
}


.services-v3-card[
    data-effect="1"
]
.services-v3-motion i:nth-child(4) {
    top: 118px;
    width: 72px;

    animation-delay: .75s;
}


/* 02 — SCRIPT DOCTOR */

.services-v3-card[
    data-effect="2"
]
.services-v3-motion i {
    left: 20px;

    width: 132px;
    height: 2px;

    background:
        rgba(
            40,
            54,
            24,
            .55
        );
}


.services-v3-card[
    data-effect="2"
]
.services-v3-motion i:nth-child(1) {
    top: 34px;
}


.services-v3-card[
    data-effect="2"
]
.services-v3-motion i:nth-child(2) {
    top: 63px;
    width: 96px;
}


.services-v3-card[
    data-effect="2"
]
.services-v3-motion i:nth-child(3),
.services-v3-card[
    data-effect="2"
]
.services-v3-motion i:nth-child(4) {
    background:
        var(
            --rust,
            #BC6C25
        );

    animation:
        serviceV3Edit
        2.8s
        ease-in-out
        infinite;
}


.services-v3-card[
    data-effect="2"
]
.services-v3-motion i:nth-child(3) {
    top: 91px;

    transform:
        rotate(-6deg);
}


.services-v3-card[
    data-effect="2"
]
.services-v3-motion i:nth-child(4) {
    top: 118px;

    width: 82px;

    transform:
        rotate(5deg);

    animation-delay: .60s;
}


/* 03 — MENTORING */

.services-v3-card[
    data-effect="3"
]
.services-v3-motion::before {
    content: "";

    position: absolute;

    left: 22px;
    top: 95px;

    width: 138px;
    height: 2px;

    transform:
        rotate(-18deg);

    background:
        rgba(
            188,
            108,
            37,
            .58
        );
}


.services-v3-card[
    data-effect="3"
]
.services-v3-motion i {
    width: 17px;
    height: 17px;

    border:
        2px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    background: #fff;

    animation:
        serviceV3Checkpoint
        2.6s
        ease-in-out
        infinite;
}


.services-v3-card[
    data-effect="3"
]
.services-v3-motion i:nth-child(1) {
    left: 15px;
    top: 112px;
}


.services-v3-card[
    data-effect="3"
]
.services-v3-motion i:nth-child(2) {
    left: 61px;
    top: 96px;

    animation-delay: .25s;
}


.services-v3-card[
    data-effect="3"
]
.services-v3-motion i:nth-child(3) {
    left: 108px;
    top: 80px;

    animation-delay: .50s;
}


.services-v3-card[
    data-effect="3"
]
.services-v3-motion i:nth-child(4) {
    left: 153px;
    top: 63px;

    animation-delay: .75s;
}


/* 04 — CONSULTATION */

.services-v3-card[
    data-effect="4"
]
.services-v3-motion::before {
    content: "";

    position: absolute;

    left: 19px;
    top: 75px;

    width: 72px;
    height: 2px;

    background:
        rgba(
            40,
            54,
            24,
            .48
        );
}


.services-v3-card[
    data-effect="4"
]
.services-v3-motion i {
    left: 90px;
    top: 75px;

    width: 76px;
    height: 2px;

    transform-origin:
        left center;

    background:
        var(
            --rust,
            #BC6C25
        );

    animation:
        serviceV3Branch
        3s
        ease-in-out
        infinite;
}


.services-v3-card[
    data-effect="4"
]
.services-v3-motion i:nth-child(1) {
    transform:
        rotate(-38deg);
}


.services-v3-card[
    data-effect="4"
]
.services-v3-motion i:nth-child(2) {
    transform:
        rotate(38deg);

    animation-delay: .35s;
}


.services-v3-card[
    data-effect="4"
]
.services-v3-motion i:nth-child(3) {
    transform:
        rotate(0deg);

    animation-delay: .70s;
}


.services-v3-card[
    data-effect="4"
]
.services-v3-motion i:nth-child(4) {
    display: none;
}


/* 05 — ADVOCACY */

.services-v3-card[
    data-effect="5"
]
.services-v3-motion {
    border:
        2px
        solid
        rgba(
            188,
            108,
            37,
            .38
        );

    transform:
        rotate(-3deg);
}


.services-v3-card[
    data-effect="5"
]
.services-v3-motion i:nth-child(1),
.services-v3-card[
    data-effect="5"
]
.services-v3-motion i:nth-child(2) {
    left: 24px;

    width: 125px;
    height: 2px;

    background:
        rgba(
            40,
            54,
            24,
            .48
        );
}


.services-v3-card[
    data-effect="5"
]
.services-v3-motion i:nth-child(1) {
    top: 43px;
}


.services-v3-card[
    data-effect="5"
]
.services-v3-motion i:nth-child(2) {
    top: 70px;

    width: 91px;
}


.services-v3-card[
    data-effect="5"
]
.services-v3-motion i:nth-child(3) {
    right: 25px;
    bottom: 20px;

    width: 48px;
    height: 48px;

    border:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    animation:
        serviceV3Approval
        3.2s
        ease-in-out
        infinite;
}


.services-v3-card[
    data-effect="5"
]
.services-v3-motion i:nth-child(4) {
    right: 35px;
    bottom: 41px;

    width: 28px;
    height: 14px;

    border-left:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-bottom:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    transform:
        rotate(-45deg);
}


/* 06 — ANALYSIS */

.services-v3-card[
    data-effect="6"
]
.services-v3-motion {
    background:
        linear-gradient(
            rgba(
                40,
                54,
                24,
                .20
            )
            1px,
            transparent
            1px
        ),
        linear-gradient(
            90deg,
            rgba(
                40,
                54,
                24,
                .20
            )
            1px,
            transparent
            1px
        );

    background-size:
        30px
        30px;
}


.services-v3-card[
    data-effect="6"
]
.services-v3-motion i:nth-child(1) {
    left: 0;
    right: 0;
    top: 0;

    height: 3px;

    background:
        var(
            --rust,
            #BC6C25
        );

    animation:
        serviceV3Scan
        3s
        ease-in-out
        infinite
        alternate;
}


.services-v3-card[
    data-effect="6"
]
.services-v3-motion i:nth-child(2),
.services-v3-card[
    data-effect="6"
]
.services-v3-motion i:nth-child(3),
.services-v3-card[
    data-effect="6"
]
.services-v3-motion i:nth-child(4) {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        var(
            --rust,
            #BC6C25
        );
}


.services-v3-card[
    data-effect="6"
]
.services-v3-motion i:nth-child(2) {
    left: 26px;
    top: 42px;
}


.services-v3-card[
    data-effect="6"
]
.services-v3-motion i:nth-child(3) {
    left: 90px;
    top: 80px;
}


.services-v3-card[
    data-effect="6"
]
.services-v3-motion i:nth-child(4) {
    right: 24px;
    bottom: 26px;
}


/* 07 — SCENE ASSEMBLY */

.services-v3-card[
    data-effect="7"
]
.services-v3-motion i {
    width: 74px;
    height: 52px;

    border:
        1px
        solid
        rgba(
            188,
            108,
            37,
            .56
        );

    background:
        rgba(
            254,
            250,
            224,
            .38
        );

    animation:
        serviceV3Scene
        3.8s
        ease-in-out
        infinite
        alternate;
}


.services-v3-card[
    data-effect="7"
]
.services-v3-motion i:nth-child(1) {
    left: 8px;
    top: 10px;
}


.services-v3-card[
    data-effect="7"
]
.services-v3-motion i:nth-child(2) {
    right: 8px;
    top: 18px;

    animation-delay: .25s;
}


.services-v3-card[
    data-effect="7"
]
.services-v3-motion i:nth-child(3) {
    left: 23px;
    bottom: 12px;

    animation-delay: .50s;
}


.services-v3-card[
    data-effect="7"
]
.services-v3-motion i:nth-child(4) {
    right: 25px;
    bottom: 6px;

    animation-delay: .75s;
}


/* ---------------------------------------------------------
   07 CLOSES GRID
   --------------------------------------------------------- */

.services-v3-card:nth-child(7) {
    grid-column:
        1 / -1;

    min-height: 270px;

    padding-right: 25%;
}


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

@media (
    max-width: 1024px
) {

    .services-v3-number {
        font-size: 58px;
    }

    .services-v3-title {
        max-width: 82%;

        font-size: 28px;
    }

    .services-v3-summary {
        font-size: 16px;
    }

    .services-v3-motion {
        transform:
            scale(.82);

        transform-origin:
            top right;
    }
}


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

@media (
    max-width: 760px
) {

    .services-v3-hero-motion {
        top: auto;
        right: 18px;
        bottom: 13px;

        width: 205px;
        height: 125px;

        transform: none;

        opacity: .58;
    }


    html[data-services-cinematic="v3"]
    .listing-hero-inner {
        padding-bottom:
            82px;
    }


    .services-v3-stage {
        padding:
            38px
            0
            58px;
    }


    .services-v3-rail {
        width:
            calc(
                100% - 62px
            );

        height: 42px;

        margin-bottom: 30px;

        padding:
            0
            5px;
    }


    .services-v3-rail::before {
        left: -30px;

        font-size: 20px;
    }


    .services-v3-rail::after {
        right: -30px;

        font-size: 20px;
    }


    .services-v3-track {
        left: 5px;
        right: 5px;
    }


    .services-v3-dot {
        width: 12px;
        height: 12px;

        border-width: 2px;
    }


    .services-v3-grid {
        grid-template-columns:
            minmax(
                0,
                1fr
            );

        gap: 17px;
    }


    .services-v3-card,
    .services-v3-card:nth-child(7) {
        grid-column: auto;

        min-height: 0;

        padding:
            24px
            22px
            24px;
    }


    /*
     * BIG mobile numbers.
     */

    .services-v3-number {
        margin-bottom: 18px;

        font-size: 50px;
    }


    .services-v3-title {
        max-width:
            calc(
                100% - 42px
            );

        margin-bottom: 14px;

        font-size: 27px;
        line-height: 1.15;
    }


    .services-v3-summary {
        max-width: 100%;

        margin-bottom: 22px;

        font-size: 17px;
        line-height: 1.68;
    }


    .services-v3-action {
        min-height: 44px;

        font-size: 16px;
    }


    /*
     * Decoration is absolute and background-only.
     */

    .services-v3-motion {
        top: 14px;
        right: -31px;

        width: 125px;
        height: 105px;

        transform:
            scale(.65);

        transform-origin:
            top right;

        opacity: .055;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (
    prefers-reduced-motion: reduce
) {

    .services-v3-hero-motion *,
    .services-v3-motion *,
    .services-v3-track,
    .services-v3-dot,
    .services-v3-card::after {
        animation:
            none !important;

        transition:
            none !important;
    }


    .services-v3-track {
        transform:
            translateY(-50%)
            scaleX(1);
    }


    .services-v3-dot {
        transform:
            scale(1);
    }


    .services-v3-card::after {
        width: 100%;
    }
}


/* ---------------------------------------------------------
   KEYFRAMES
   --------------------------------------------------------- */

@keyframes servicesV3Node {

    0%,
    100% {
        transform:
            scale(.72);

        opacity: .42;
    }

    50% {
        transform:
            scale(1.20);

        opacity: 1;
    }
}


@keyframes servicesV3Runner {

    0% {
        left: 7%;
        top: 71%;
    }

    18% {
        left: 23%;
        top: 64%;
    }

    35% {
        left: 40%;
        top: 52%;
    }

    52% {
        left: 53%;
        top: 58%;
    }

    68% {
        left: 65%;
        top: 52%;
    }

    84% {
        left: 79%;
        top: 40%;
    }

    100% {
        left: 90%;
        top: 30%;
    }
}


@keyframes serviceV3Write {

    0%,
    12% {
        transform:
            scaleX(.06);

        opacity: .18;
    }

    42%,
    78% {
        transform:
            scaleX(1);

        opacity: 1;
    }

    100% {
        opacity: .34;
    }
}


@keyframes serviceV3Edit {

    0%,
    15% {
        scale:
            0
            1;

        opacity: .20;
    }

    48%,
    82% {
        scale:
            1
            1;

        opacity: 1;
    }

    100% {
        opacity: .30;
    }
}


@keyframes serviceV3Checkpoint {

    0%,
    100% {
        transform:
            scale(.70);

        opacity: .34;
    }

    50% {
        transform:
            scale(1.18);

        opacity: 1;
    }
}


@keyframes serviceV3Branch {

    0%,
    15% {
        scale:
            0
            1;

        opacity: .25;
    }

    50%,
    82% {
        scale:
            1
            1;

        opacity: 1;
    }

    100% {
        opacity: .36;
    }
}


@keyframes serviceV3Approval {

    0%,
    100% {
        transform:
            scale(.82)
            rotate(-5deg);

        opacity: .38;
    }

    50% {
        transform:
            scale(1.08)
            rotate(2deg);

        opacity: 1;
    }
}


@keyframes serviceV3Scan {

    from {
        top: 2px;
    }

    to {
        top:
            calc(
                100% - 5px
            );
    }
}


@keyframes serviceV3Scene {

    from {
        transform:
            translate3d(
                -5px,
                -3px,
                0
            );
    }

    to {
        transform:
            translate3d(
                7px,
                5px,
                0
            );
    }
}


/* =========================================================
   END SERVICES INDEX CINEMATIC DESIGN V3
   ========================================================= */



/* =========================================================
   SCREENWRITING SERVICE CINEMATIC DESIGN V2
   ========================================================= */


/* ---------------------------------------------------------
   SAFETY / CANVAS
   --------------------------------------------------------- */

html[
    data-service-detail="screenwriting-v2"
],
html[
    data-service-detail="screenwriting-v2"
] body {
    overflow-x: clip;
}


.story-page[
    data-service-cinematic="screenwriting-v2"
]
.story-content {
    position: relative;

    overflow: hidden;

    padding:
        46px
        0
        80px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            rgba(
                254,
                250,
                224,
                .27
            ) 52%,
            #ffffff 100%
        ) !important;

    min-height: auto !important;
}


.story-page[
    data-service-cinematic="screenwriting-v2"
]
.story-prose {
    width:
        min(
            calc(
                100% - 48px
            ),
            1120px
        ) !important;

    max-width:
        1120px !important;

    margin:
        0
        auto !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    opacity: 1 !important;
    visibility: visible !important;

    content-visibility:
        visible !important;

    contain:
        none !important;
}


.story-page[
    data-service-cinematic="screenwriting-v2"
]
.story-prose::before,
.story-page[
    data-service-cinematic="screenwriting-v2"
]
.story-prose::after {
    display: none !important;
}


/* ---------------------------------------------------------
   KICKER
   --------------------------------------------------------- */

.service-screen-kicker {
    position: relative;

    margin:
        0
        0
        24px !important;

    padding:
        0
        0
        17px
        28px !important;

    border: 0 !important;

    color:
        var(
            --green,
            #283618
        ) !important;

    font-size:
        28px !important;

    line-height:
        1.18 !important;
}


.service-screen-kicker::before {
    content: "";

    position: absolute;

    left: 0;
    top: 2px;

    width: 3px;
    height: 34px;

    background:
        linear-gradient(
            180deg,
            var(
                --rust,
                #BC6C25
            ),
            var(
                --amber,
                #DDA15E
            )
        );
}


.service-screen-kicker strong {
    color:
        var(
            --green,
            #283618
        ) !important;

    font-weight: 750;
}


/* ---------------------------------------------------------
   PROCESS 01 → 04
   --------------------------------------------------------- */

.service-screen-process {
    display: grid;

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

    align-items: center;

    gap: 20px;

    width:
        min(
            100%,
            920px
        );

    margin:
        0
        auto
        42px;
}


.service-screen-process > strong {
    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 30px;
    line-height: 1;
    font-weight: 850;

    letter-spacing: -.04em;
}


.service-screen-process-track {
    position: relative;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    height: 36px;
}


.service-screen-process-track::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 50%;

    height: 1px;

    transform:
        translateY(-50%);

    background:
        rgba(
            40,
            54,
            24,
            .16
        );
}


.service-screen-process-track > i {
    position: absolute;

    z-index: 1;

    left: 0;
    top: 50%;

    width: 0;
    height: 3px;

    transform:
        translateY(-50%);

    background:
        linear-gradient(
            90deg,
            var(
                --rust,
                #BC6C25
            ),
            var(
                --amber,
                #DDA15E
            )
        );

    transition:
        width
        1.15s
        cubic-bezier(
            .22,
            .75,
            .18,
            1
        );
}


.service-screen-process.is-active
.service-screen-process-track > i {
    width: 100%;
}


.service-screen-process-track > b {
    position: relative;

    z-index: 2;

    display: block;

    width: 16px;
    height: 16px;

    border:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    background: #fff;

    transform:
        scale(.65);

    transition:
        transform .32s ease,
        background-color .32s ease;
}


.service-screen-process.is-active
.service-screen-process-track > b {
    transform:
        scale(1);

    background:
        var(
            --paper,
            #FEFAE0
        );
}


/* ---------------------------------------------------------
   STEP
   --------------------------------------------------------- */

.service-screen-step {
    position: relative;

    isolation: isolate;

    display: grid;

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

    gap: 30px;

    min-height: 240px;

    margin:
        0
        0
        22px;

    padding:
        35px
        34px
        35px
        30px;

    overflow: hidden;

    border:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .11
        );

    border-radius: 18px;

    background:
        rgba(
            255,
            255,
            255,
            .90
        );

    box-shadow:
        0
        10px
        30px
        rgba(
            40,
            54,
            24,
            .03
        );
}


.service-screen-step::after {
    content: "";

    position: absolute;

    z-index: 5;

    left: 0;
    bottom: 0;

    width: 0;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(
                --rust,
                #BC6C25
            ),
            var(
                --amber,
                #DDA15E
            )
        );

    transition:
        width .65s ease;
}


.service-screen-step.is-active::after {
    width: 100%;
}


.service-screen-step-number {
    position: relative;

    z-index: 4;

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 72px;
    line-height: .86;
    font-weight: 850;

    letter-spacing: -.065em;

    font-variant-numeric:
        tabular-nums;
}


.service-screen-step-body {
    position: relative;

    z-index: 4;

    max-width: 770px;
}


.service-screen-step-body p {
    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    color:
        rgba(
            40,
            54,
            24,
            .81
        ) !important;

    font-size:
        18px !important;

    line-height:
        1.76 !important;

    letter-spacing:
        0 !important;

    opacity: 1 !important;

    visibility: visible !important;
}


/* ---------------------------------------------------------
   MOTION BASE
   --------------------------------------------------------- */

.service-screen-step-motion {
    position: absolute;

    z-index: 1;

    top: 27px;
    right: 24px;

    width: 240px;
    height: 170px;

    pointer-events: none;

    opacity: .075;
}


.service-screen-step-motion i {
    position: absolute;

    display: block;
}


/* ---------------------------------------------------------
   01 — SCRIPT WRITING
   --------------------------------------------------------- */

.service-screen-step[
    data-effect="1"
]
.service-screen-step-motion {
    border:
        1px
        solid
        rgba(
            188,
            108,
            37,
            .46
        );

    transform:
        rotate(-2deg);
}


.service-screen-step[
    data-effect="1"
]
.service-screen-step-motion i {
    left: 30px;

    height: 2px;

    background:
        var(
            --rust,
            #BC6C25
        );

    transform-origin:
        left center;

    animation:
        screenV2Write
        3.1s
        ease-in-out
        infinite;
}


.service-screen-step[
    data-effect="1"
]
.service-screen-step-motion i:nth-child(1) {
    top: 39px;
    width: 143px;
}


.service-screen-step[
    data-effect="1"
]
.service-screen-step-motion i:nth-child(2) {
    top: 66px;
    width: 103px;

    animation-delay: .22s;
}


.service-screen-step[
    data-effect="1"
]
.service-screen-step-motion i:nth-child(3) {
    top: 93px;
    width: 159px;

    animation-delay: .44s;
}


.service-screen-step[
    data-effect="1"
]
.service-screen-step-motion i:nth-child(4) {
    top: 120px;
    width: 119px;

    animation-delay: .66s;
}


.service-screen-step[
    data-effect="1"
]
.service-screen-step-motion i:nth-child(5) {
    top: 147px;
    width: 73px;

    animation-delay: .88s;
}


/* ---------------------------------------------------------
   02 — STRUCTURE / BEATS
   --------------------------------------------------------- */

.service-screen-step[
    data-effect="2"
]
.service-screen-step-motion::before {
    content: "";

    position: absolute;

    left: 18px;
    right: 18px;
    top: 50%;

    height: 2px;

    background:
        rgba(
            188,
            108,
            37,
            .58
        );
}


.service-screen-step[
    data-effect="2"
]
.service-screen-step-motion i {
    top:
        calc(
            50% - 8px
        );

    width: 17px;
    height: 17px;

    border:
        2px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    background: #fff;

    animation:
        screenV2Beat
        2.7s
        ease-in-out
        infinite;
}


.service-screen-step[
    data-effect="2"
]
.service-screen-step-motion i:nth-child(1) {
    left: 13px;
}


.service-screen-step[
    data-effect="2"
]
.service-screen-step-motion i:nth-child(2) {
    left: 58px;

    animation-delay: .20s;
}


.service-screen-step[
    data-effect="2"
]
.service-screen-step-motion i:nth-child(3) {
    left: 105px;

    animation-delay: .40s;
}


.service-screen-step[
    data-effect="2"
]
.service-screen-step-motion i:nth-child(4) {
    left: 153px;

    animation-delay: .60s;
}


.service-screen-step[
    data-effect="2"
]
.service-screen-step-motion i:nth-child(5) {
    left: 201px;

    animation-delay: .80s;
}


/* ---------------------------------------------------------
   03 — SCENE ASSEMBLY
   --------------------------------------------------------- */

.service-screen-step[
    data-effect="3"
]
.service-screen-step-motion i {
    width: 94px;
    height: 58px;

    border:
        1px
        solid
        rgba(
            188,
            108,
            37,
            .56
        );

    background:
        rgba(
            254,
            250,
            224,
            .32
        );

    animation:
        screenV2Scene
        3.7s
        ease-in-out
        infinite
        alternate;
}


.service-screen-step[
    data-effect="3"
]
.service-screen-step-motion i:nth-child(1) {
    left: 7px;
    top: 10px;
}


.service-screen-step[
    data-effect="3"
]
.service-screen-step-motion i:nth-child(2) {
    right: 7px;
    top: 20px;

    animation-delay: .25s;
}


.service-screen-step[
    data-effect="3"
]
.service-screen-step-motion i:nth-child(3) {
    left: 23px;
    bottom: 16px;

    animation-delay: .50s;
}


.service-screen-step[
    data-effect="3"
]
.service-screen-step-motion i:nth-child(4) {
    right: 25px;
    bottom: 7px;

    animation-delay: .75s;
}


.service-screen-step[
    data-effect="3"
]
.service-screen-step-motion i:nth-child(5) {
    display: none;
}


/* ---------------------------------------------------------
   04 — FINAL SCRIPT
   --------------------------------------------------------- */

.service-screen-step[
    data-effect="4"
]
.service-screen-step-motion {
    border:
        2px
        solid
        rgba(
            188,
            108,
            37,
            .36
        );

    transform:
        rotate(2deg);
}


.service-screen-step[
    data-effect="4"
]
.service-screen-step-motion i:nth-child(1),
.service-screen-step[
    data-effect="4"
]
.service-screen-step-motion i:nth-child(2),
.service-screen-step[
    data-effect="4"
]
.service-screen-step-motion i:nth-child(3) {
    left: 28px;

    height: 2px;

    background:
        rgba(
            40,
            54,
            24,
            .48
        );
}


.service-screen-step[
    data-effect="4"
]
.service-screen-step-motion i:nth-child(1) {
    top: 43px;
    width: 152px;
}


.service-screen-step[
    data-effect="4"
]
.service-screen-step-motion i:nth-child(2) {
    top: 72px;
    width: 121px;
}


.service-screen-step[
    data-effect="4"
]
.service-screen-step-motion i:nth-child(3) {
    top: 101px;
    width: 142px;
}


.service-screen-step[
    data-effect="4"
]
.service-screen-step-motion i:nth-child(4) {
    right: 27px;
    bottom: 20px;

    width: 48px;
    height: 48px;

    border:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    animation:
        screenV2Approval
        3s
        ease-in-out
        infinite;
}


.service-screen-step[
    data-effect="4"
]
.service-screen-step-motion i:nth-child(5) {
    right: 37px;
    bottom: 42px;

    width: 28px;
    height: 14px;

    border-left:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-bottom:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    transform:
        rotate(-45deg);
}


/* ---------------------------------------------------------
   HERO — SCREENPLAY PAGE
   --------------------------------------------------------- */

.story-page[
    data-service-cinematic="screenwriting-v2"
]
.story-art {
    position: relative;

    overflow: hidden;
}


.story-page[
    data-service-cinematic="screenwriting-v2"
]
.story-art-icon {
    position: relative;

    z-index: 6;
}


.service-screen-hero {
    position: absolute;

    z-index: 2;

    inset: 9%;

    pointer-events: none;

    opacity: .52;
}


.screen-hero-page {
    position: absolute;

    inset:
        2%
        10%;

    border:
        1px
        solid
        rgba(
            254,
            250,
            224,
            .30
        );

    transform:
        rotate(-3deg);
}


.screen-hero-line {
    position: absolute;

    left: 25%;

    height: 2px;

    background:
        rgba(
            254,
            250,
            224,
            .62
        );

    transform-origin:
        left center;

    animation:
        screenV2HeroWrite
        3.1s
        ease-in-out
        infinite;
}


.screen-hero-line.line-1 {
    top: 30%;
    width: 50%;
}


.screen-hero-line.line-2 {
    top: 42%;
    width: 38%;

    animation-delay: .22s;
}


.screen-hero-line.line-3 {
    top: 54%;
    width: 55%;

    animation-delay: .44s;
}


.screen-hero-line.line-4 {
    top: 66%;
    width: 44%;

    animation-delay: .66s;
}


.screen-hero-line.line-5 {
    top: 78%;
    width: 29%;

    animation-delay: .88s;
}


.screen-hero-caret {
    position: absolute;

    left: 25%;
    top: 84%;

    width: 2px;
    height: 19px;

    background:
        rgba(
            254,
            250,
            224,
            .84
        );

    animation:
        screenV2Caret
        .72s
        steps(1)
        infinite;
}


.screen-hero-scene {
    position: absolute;

    top: 8%;
    left: 14%;

    color:
        rgba(
            254,
            250,
            224,
            .65
        );

    font-size: 12px;
    line-height: 1;
    font-weight: 850;

    letter-spacing: .13em;
}


.screen-hero-page-number {
    position: absolute;

    right: 13%;
    bottom: 5%;

    color:
        rgba(
            254,
            250,
            224,
            .70
        );

    font-size: 32px;
    line-height: 1;
    font-weight: 850;
}


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

@media (
    max-width: 1024px
) {

    .service-screen-step {
        grid-template-columns:
            80px
            minmax(
                0,
                1fr
            );
    }


    .service-screen-step-number {
        font-size: 62px;
    }


    .service-screen-step-motion {
        right: 8px;

        transform:
            scale(.80);

        transform-origin:
            top right;

        opacity: .05;
    }
}


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

@media (
    max-width: 760px
) {

    .story-page[
        data-service-cinematic="screenwriting-v2"
    ]
    .story-content {
        padding:
            31px
            0
            56px;
    }


    .story-page[
        data-service-cinematic="screenwriting-v2"
    ]
    .story-prose {
        width:
            calc(
                100% - 40px
            ) !important;
    }


    .service-screen-kicker {
        margin-bottom:
            19px !important;

        padding:
            0
            0
            14px
            17px !important;

        font-size:
            23px !important;
    }


    .service-screen-kicker::before {
        width: 2px;
        height: 28px;
    }


    .service-screen-process {
        gap: 11px;

        margin-bottom: 28px;
    }


    .service-screen-process > strong {
        font-size: 21px;
    }


    .service-screen-process-track {
        height: 28px;
    }


    .service-screen-process-track > b {
        width: 11px;
        height: 11px;

        border-width: 2px;
    }


    .service-screen-step {
        display: block;

        min-height: 0;

        margin-bottom: 17px;

        padding:
            24px
            20px
            25px;

        border-radius: 16px;
    }


    .service-screen-step-number {
        display: block;

        margin-bottom: 20px;

        font-size: 50px;
    }


    .service-screen-step-body {
        max-width: 100%;
    }


    .service-screen-step-body p {
        font-size:
            17px !important;

        line-height:
            1.70 !important;
    }


    /*
     * Mobile decoration cannot own layout width.
     */

    .service-screen-step-motion {
        top: 11px;
        right: -38px;

        width: 145px;
        height: 105px;

        transform:
            scale(.61);

        transform-origin:
            top right;

        opacity: .043;
    }


    .service-screen-hero {
        inset:
            17%
            8%;

        opacity: .40;
    }


    .screen-hero-page-number {
        font-size: 25px;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (
    prefers-reduced-motion: reduce
) {

    .service-screen-process-track > i,
    .service-screen-process-track > b,

    .service-screen-step::after,

    .service-screen-step-motion i,

    .screen-hero-line,
    .screen-hero-caret {
        animation:
            none !important;

        transition:
            none !important;
    }


    .service-screen-process-track > i {
        width: 100%;
    }


    .service-screen-process-track > b {
        transform:
            scale(1);
    }


    .service-screen-step::after {
        width: 100%;
    }


    .screen-hero-line {
        transform:
            scaleX(1);
    }
}


/* ---------------------------------------------------------
   KEYFRAMES
   --------------------------------------------------------- */

@keyframes screenV2Write {

    0%,
    12% {
        transform:
            scaleX(.06);

        opacity: .18;
    }

    42%,
    78% {
        transform:
            scaleX(1);

        opacity: 1;
    }

    100% {
        opacity: .32;
    }
}


@keyframes screenV2Beat {

    0%,
    100% {
        transform:
            scale(.70);

        opacity: .34;
    }

    50% {
        transform:
            scale(1.17);

        opacity: 1;
    }
}


@keyframes screenV2Scene {

    from {
        transform:
            translate3d(
                -5px,
                -3px,
                0
            );
    }

    to {
        transform:
            translate3d(
                7px,
                5px,
                0
            );
    }
}


@keyframes screenV2Approval {

    0%,
    100% {
        transform:
            scale(.82)
            rotate(-5deg);

        opacity: .36;
    }

    50% {
        transform:
            scale(1.08)
            rotate(2deg);

        opacity: 1;
    }
}


@keyframes screenV2HeroWrite {

    0%,
    10% {
        transform:
            scaleX(.04);

        opacity: .18;
    }

    44%,
    78% {
        transform:
            scaleX(1);

        opacity: 1;
    }

    100% {
        opacity: .34;
    }
}


@keyframes screenV2Caret {

    0%,
    48% {
        opacity: 1;
    }

    49%,
    100% {
        opacity: 0;
    }
}


/* =========================================================
   END SCREENWRITING SERVICE CINEMATIC DESIGN V2
   ========================================================= */



/* =========================================================
   SCRIPT DOCTOR SERVICE CINEMATIC DESIGN V1
   ========================================================= */


/* ---------------------------------------------------------
   PAGE
   --------------------------------------------------------- */

html[
    data-service-detail="script-doctor-v1"
],
html[
    data-service-detail="script-doctor-v1"
] body {
    overflow-x: clip;
}


.story-page[
    data-service-cinematic="script-doctor-v1"
]
.story-content {
    position: relative;

    overflow: hidden;

    min-height: auto !important;

    padding:
        46px
        0
        80px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            rgba(
                254,
                250,
                224,
                .25
            ) 51%,
            #ffffff 100%
        ) !important;
}


.story-page[
    data-service-cinematic="script-doctor-v1"
]
.story-prose {
    width:
        min(
            calc(
                100% - 48px
            ),
            1120px
        ) !important;

    max-width:
        1120px !important;

    margin:
        0
        auto !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    opacity: 1 !important;
    visibility: visible !important;

    contain: none !important;

    content-visibility:
        visible !important;
}


.story-page[
    data-service-cinematic="script-doctor-v1"
]
.story-prose::before,
.story-page[
    data-service-cinematic="script-doctor-v1"
]
.story-prose::after {
    display: none !important;
}


/* ---------------------------------------------------------
   KICKER
   --------------------------------------------------------- */

.service-doctor-kicker {
    position: relative;

    margin:
        0
        0
        24px !important;

    padding:
        0
        0
        17px
        28px !important;

    border: 0 !important;

    color:
        var(
            --green,
            #283618
        ) !important;

    font-size:
        28px !important;

    line-height:
        1.18 !important;
}


.service-doctor-kicker::before {
    content: "";

    position: absolute;

    left: 0;
    top: 2px;

    width: 3px;
    height: 34px;

    background:
        var(
            --rust,
            #BC6C25
        );
}


/* ---------------------------------------------------------
   PROCESS
   --------------------------------------------------------- */

.service-doctor-process {
    display: grid;

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

    align-items: center;

    gap: 20px;

    width:
        min(
            100%,
            920px
        );

    margin:
        0
        auto
        42px;
}


.service-doctor-process > strong {
    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 30px;
    line-height: 1;
    font-weight: 850;

    letter-spacing: -.04em;
}


.service-doctor-process-track {
    position: relative;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    height: 36px;
}


.service-doctor-process-track::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 50%;

    height: 1px;

    background:
        rgba(
            40,
            54,
            24,
            .16
        );
}


.service-doctor-process-track > i {
    position: absolute;

    z-index: 1;

    left: 0;
    top: 50%;

    width: 0;
    height: 3px;

    transform:
        translateY(-50%);

    background:
        linear-gradient(
            90deg,
            var(
                --rust,
                #BC6C25
            ),
            var(
                --amber,
                #DDA15E
            )
        );

    transition:
        width
        1.15s
        cubic-bezier(
            .22,
            .75,
            .18,
            1
        );
}


.service-doctor-process.is-active
.service-doctor-process-track > i {
    width: 100%;
}


.service-doctor-process-track > b {
    position: relative;

    z-index: 2;

    display: block;

    width: 16px;
    height: 16px;

    border:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    background: #fff;

    transform:
        scale(.65);

    transition:
        transform .32s ease,
        background-color .32s ease;
}


.service-doctor-process.is-active
.service-doctor-process-track > b {
    transform:
        scale(1);

    background:
        var(
            --paper,
            #FEFAE0
        );
}


/* ---------------------------------------------------------
   STEPS
   --------------------------------------------------------- */

.service-doctor-step {
    position: relative;

    isolation: isolate;

    display: grid;

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

    gap: 30px;

    margin:
        0
        0
        22px;

    padding:
        35px
        34px
        35px
        30px;

    overflow: hidden;

    border:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .11
        );

    border-radius: 18px;

    background:
        rgba(
            255,
            255,
            255,
            .90
        );

    box-shadow:
        0
        10px
        30px
        rgba(
            40,
            54,
            24,
            .03
        );
}


.service-doctor-step::after {
    content: "";

    position: absolute;

    z-index: 5;

    left: 0;
    bottom: 0;

    width: 0;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(
                --rust,
                #BC6C25
            ),
            var(
                --amber,
                #DDA15E
            )
        );

    transition:
        width .65s ease;
}


.service-doctor-step.is-active::after {
    width: 100%;
}


.service-doctor-step-number {
    position: relative;

    z-index: 4;

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 72px;
    line-height: .86;
    font-weight: 850;

    letter-spacing: -.065em;

    font-variant-numeric:
        tabular-nums;
}


.service-doctor-step-body {
    position: relative;

    z-index: 4;

    max-width: 780px;
}


.service-doctor-step-body p {
    margin:
        0
        0
        18px !important;

    padding: 0 !important;

    border: 0 !important;

    color:
        rgba(
            40,
            54,
            24,
            .81
        ) !important;

    font-size:
        18px !important;

    line-height:
        1.76 !important;

    opacity: 1 !important;
    visibility: visible !important;
}


.service-doctor-step-body p:last-child {
    margin-bottom:
        0 !important;
}


/* ---------------------------------------------------------
   ANALYSIS MATRIX
   --------------------------------------------------------- */

.service-doctor-analysis-list {
    counter-reset:
        doctor-analysis;

    display: grid !important;

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

    gap:
        10px
        12px;

    margin:
        24px
        0
        20px !important;

    padding:
        0 !important;

    list-style:
        none !important;
}


.service-doctor-analysis-list li {
    counter-increment:
        doctor-analysis;

    position: relative;

    min-height: 58px;

    margin: 0 !important;

    padding:
        16px
        16px
        15px
        56px !important;

    border:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .10
        );

    border-radius: 10px;

    background:
        rgba(
            254,
            250,
            224,
            .42
        );

    color:
        var(
            --green,
            #283618
        );

    font-size: 16px;
    line-height: 1.45;
}


.service-doctor-analysis-list li::before {
    content:
        counter(
            doctor-analysis,
            decimal-leading-zero
        );

    position: absolute;

    left: 15px;
    top: 17px;

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 16px;
    line-height: 1;
    font-weight: 850;
}


/* ---------------------------------------------------------
   MOTION FIELD
   --------------------------------------------------------- */

.service-doctor-step-motion {
    position: absolute;

    z-index: 1;

    top: 25px;
    right: 22px;

    width: 245px;
    height: 175px;

    pointer-events: none;

    opacity: .075;
}


.service-doctor-step-motion i {
    position: absolute;

    display: block;
}


/* 01 — RAW DRAFT */

.service-doctor-step[
    data-effect="1"
]
.service-doctor-step-motion {
    border:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .35
        );

    transform:
        rotate(-2deg);
}


.service-doctor-step[
    data-effect="1"
]
.service-doctor-step-motion i {
    left: 28px;

    height: 2px;

    background:
        rgba(
            40,
            54,
            24,
            .60
        );
}


.service-doctor-step[
    data-effect="1"
]
.service-doctor-step-motion i:nth-child(1) {
    top: 38px;
    width: 152px;
}


.service-doctor-step[
    data-effect="1"
]
.service-doctor-step-motion i:nth-child(2) {
    top: 68px;
    width: 116px;
}


.service-doctor-step[
    data-effect="1"
]
.service-doctor-step-motion i:nth-child(3) {
    top: 98px;
    width: 164px;
}


.service-doctor-step[
    data-effect="1"
]
.service-doctor-step-motion i:nth-child(4) {
    top: 128px;
    width: 126px;
}


.service-doctor-step[
    data-effect="1"
]
.service-doctor-step-motion i:nth-child(5) {
    top: 82px;
    left: 18px;

    width: 187px;

    background:
        var(
            --rust,
            #BC6C25
        );

    transform:
        rotate(-6deg);

    animation:
        doctorV1Strike
        2.8s
        ease-in-out
        infinite;
}


/* 02 — CORRECTIONS */

.service-doctor-step[
    data-effect="2"
]
.service-doctor-step-motion i:nth-child(1),
.service-doctor-step[
    data-effect="2"
]
.service-doctor-step-motion i:nth-child(2) {
    left: 25px;

    width: 155px;
    height: 2px;

    background:
        rgba(
            40,
            54,
            24,
            .55
        );
}


.service-doctor-step[
    data-effect="2"
]
.service-doctor-step-motion i:nth-child(1) {
    top: 45px;
}


.service-doctor-step[
    data-effect="2"
]
.service-doctor-step-motion i:nth-child(2) {
    top: 83px;

    width: 118px;
}


.service-doctor-step[
    data-effect="2"
]
.service-doctor-step-motion i:nth-child(3),
.service-doctor-step[
    data-effect="2"
]
.service-doctor-step-motion i:nth-child(4) {
    left: 22px;

    width: 190px;
    height: 2px;

    background:
        var(
            --rust,
            #BC6C25
        );

    transform-origin:
        left center;

    animation:
        doctorV1Correction
        3s
        ease-in-out
        infinite;
}


.service-doctor-step[
    data-effect="2"
]
.service-doctor-step-motion i:nth-child(3) {
    top: 64px;

    transform:
        rotate(-8deg);
}


.service-doctor-step[
    data-effect="2"
]
.service-doctor-step-motion i:nth-child(4) {
    top: 112px;

    width: 145px;

    transform:
        rotate(5deg);

    animation-delay: .55s;
}


.service-doctor-step[
    data-effect="2"
]
.service-doctor-step-motion i:nth-child(5) {
    right: 23px;
    bottom: 17px;

    width: 34px;
    height: 34px;

    border:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    animation:
        doctorV1Pulse
        2.8s
        ease-in-out
        infinite;
}


/* 03 — ANALYSIS GRID */

.service-doctor-step[
    data-effect="3"
]
.service-doctor-step-motion {
    background:
        linear-gradient(
            rgba(
                40,
                54,
                24,
                .20
            )
            1px,
            transparent
            1px
        ),
        linear-gradient(
            90deg,
            rgba(
                40,
                54,
                24,
                .20
            )
            1px,
            transparent
            1px
        );

    background-size:
        35px
        35px;
}


.service-doctor-step[
    data-effect="3"
]
.service-doctor-step-motion i:nth-child(1) {
    left: 0;
    right: 0;
    top: 0;

    height: 3px;

    background:
        var(
            --rust,
            #BC6C25
        );

    animation:
        doctorV1Scan
        3s
        ease-in-out
        infinite
        alternate;
}


.service-doctor-step[
    data-effect="3"
]
.service-doctor-step-motion i:nth-child(2),
.service-doctor-step[
    data-effect="3"
]
.service-doctor-step-motion i:nth-child(3),
.service-doctor-step[
    data-effect="3"
]
.service-doctor-step-motion i:nth-child(4),
.service-doctor-step[
    data-effect="3"
]
.service-doctor-step-motion i:nth-child(5) {
    width: 10px;
    height: 10px;

    border-radius:
        50%;

    background:
        var(
            --rust,
            #BC6C25
        );
}


.service-doctor-step[
    data-effect="3"
]
.service-doctor-step-motion i:nth-child(2) {
    left: 25px;
    top: 39px;
}


.service-doctor-step[
    data-effect="3"
]
.service-doctor-step-motion i:nth-child(3) {
    left: 91px;
    top: 92px;
}


.service-doctor-step[
    data-effect="3"
]
.service-doctor-step-motion i:nth-child(4) {
    right: 28px;
    top: 58px;
}


.service-doctor-step[
    data-effect="3"
]
.service-doctor-step-motion i:nth-child(5) {
    right: 65px;
    bottom: 20px;
}


/* 04 — BEFORE → AFTER */

.service-doctor-step[
    data-effect="4"
]
.service-doctor-step-motion::before,
.service-doctor-step[
    data-effect="4"
]
.service-doctor-step-motion::after {
    content: "";

    position: absolute;

    top: 20px;

    width: 92px;
    height: 130px;

    border:
        1px
        solid
        rgba(
            188,
            108,
            37,
            .50
        );

    background:
        repeating-linear-gradient(
            180deg,
            transparent
                0
                18px,
            rgba(
                40,
                54,
                24,
                .18
            )
                18px
                20px
        );
}


.service-doctor-step[
    data-effect="4"
]
.service-doctor-step-motion::before {
    left: 8px;

    transform:
        rotate(-4deg);
}


.service-doctor-step[
    data-effect="4"
]
.service-doctor-step-motion::after {
    right: 8px;

    transform:
        rotate(3deg);
}


.service-doctor-step[
    data-effect="4"
]
.service-doctor-step-motion i:nth-child(1) {
    left: 100px;
    top: 84px;

    width: 48px;
    height: 2px;

    background:
        var(
            --rust,
            #BC6C25
        );
}


.service-doctor-step[
    data-effect="4"
]
.service-doctor-step-motion i:nth-child(2) {
    left: 137px;
    top: 78px;

    width: 12px;
    height: 12px;

    border:
        solid
        var(
            --rust,
            #BC6C25
        );

    border-width:
        2px
        2px
        0
        0;

    transform:
        rotate(45deg);
}


.service-doctor-step[
    data-effect="4"
]
.service-doctor-step-motion i:nth-child(3) {
    display: none;
}


.service-doctor-step[
    data-effect="4"
]
.service-doctor-step-motion i:nth-child(4) {
    right: 31px;
    bottom: 27px;

    width: 42px;
    height: 42px;

    border:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius:
        50%;

    animation:
        doctorV1Pulse
        2.8s
        ease-in-out
        infinite;
}


.service-doctor-step[
    data-effect="4"
]
.service-doctor-step-motion i:nth-child(5) {
    right: 40px;
    bottom: 46px;

    width: 25px;
    height: 12px;

    border-left:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-bottom:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    transform:
        rotate(-45deg);
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.story-page[
    data-service-cinematic="script-doctor-v1"
]
.story-art {
    position: relative;

    overflow: hidden;
}


.story-page[
    data-service-cinematic="script-doctor-v1"
]
.story-art-icon {
    position: relative;

    z-index: 6;
}


.service-doctor-hero {
    position: absolute;

    z-index: 2;

    inset: 9%;

    pointer-events: none;

    opacity: .52;
}


.doctor-page {
    position: absolute;

    inset:
        2%
        10%;

    border:
        1px
        solid
        rgba(
            254,
            250,
            224,
            .28
        );

    transform:
        rotate(-3deg);
}


.doctor-line {
    position: absolute;

    left: 23%;

    height: 2px;

    background:
        rgba(
            254,
            250,
            224,
            .55
        );
}


.doctor-line.line-1 {
    top: 29%;
    width: 52%;
}


.doctor-line.line-2 {
    top: 41%;
    width: 40%;
}


.doctor-line.line-3 {
    top: 53%;
    width: 56%;
}


.doctor-line.line-4 {
    top: 65%;
    width: 43%;
}


.doctor-line.line-5 {
    top: 77%;
    width: 31%;
}


.doctor-cut {
    position: absolute;

    left: 18%;

    width: 65%;
    height: 3px;

    background:
        rgba(
            254,
            250,
            224,
            .83
        );

    transform-origin:
        left center;

    animation:
        doctorV1HeroCut
        3s
        ease-in-out
        infinite;
}


.doctor-cut.cut-1 {
    top: 50%;

    transform:
        rotate(-7deg);
}


.doctor-cut.cut-2 {
    top: 69%;

    width: 49%;

    transform:
        rotate(5deg);

    animation-delay:
        .65s;
}


.doctor-check {
    position: absolute;

    right: 17%;
    bottom: 10%;

    width: 48px;
    height: 25px;

    border-left:
        4px
        solid
        rgba(
            254,
            250,
            224,
            .78
        );

    border-bottom:
        4px
        solid
        rgba(
            254,
            250,
            224,
            .78
        );

    transform:
        rotate(-45deg);

    animation:
        doctorV1HeroCheck
        2.8s
        ease-in-out
        infinite;
}


.doctor-draft,
.doctor-final {
    position: absolute;

    color:
        rgba(
            254,
            250,
            224,
            .68
        );

    font-size: 27px;
    line-height: 1;
    font-weight: 850;
}


.doctor-draft {
    left: 11%;
    top: 7%;
}


.doctor-final {
    right: 11%;
    bottom: 5%;
}


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

@media (
    max-width: 1024px
) {

    .service-doctor-step {
        grid-template-columns:
            80px
            minmax(
                0,
                1fr
            );
    }


    .service-doctor-step-number {
        font-size: 62px;
    }


    .service-doctor-step-motion {
        right: 7px;

        transform:
            scale(.80);

        transform-origin:
            top right;

        opacity: .05;
    }
}


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

@media (
    max-width: 760px
) {

    .story-page[
        data-service-cinematic="script-doctor-v1"
    ]
    .story-content {
        padding:
            31px
            0
            56px;
    }


    .story-page[
        data-service-cinematic="script-doctor-v1"
    ]
    .story-prose {
        width:
            calc(
                100% - 40px
            ) !important;
    }


    .service-doctor-kicker {
        margin-bottom:
            19px !important;

        padding:
            0
            0
            14px
            17px !important;

        font-size:
            23px !important;
    }


    .service-doctor-process {
        gap: 11px;

        margin-bottom:
            28px;
    }


    .service-doctor-process > strong {
        font-size: 21px;
    }


    .service-doctor-process-track {
        height: 28px;
    }


    .service-doctor-process-track > b {
        width: 11px;
        height: 11px;

        border-width: 2px;
    }


    .service-doctor-step {
        display: block;

        margin-bottom:
            17px;

        padding:
            24px
            20px
            25px;

        border-radius:
            16px;
    }


    .service-doctor-step-number {
        display: block;

        margin-bottom:
            20px;

        font-size: 50px;
    }


    .service-doctor-step-body {
        max-width: 100%;
    }


    .service-doctor-step-body p {
        font-size:
            17px !important;

        line-height:
            1.70 !important;
    }


    /*
     * Analysis matrix becomes one column.
     */

    .service-doctor-analysis-list {
        grid-template-columns:
            minmax(
                0,
                1fr
            );

        gap: 9px;

        margin:
            20px
            0
            18px !important;
    }


    .service-doctor-analysis-list li {
        min-height: 55px;

        padding:
            15px
            14px
            14px
            54px !important;

        font-size: 16px;
        line-height: 1.45;
    }


    /*
     * Decoration never owns mobile layout width.
     */

    .service-doctor-step-motion {
        top: 10px;
        right: -40px;

        width: 145px;
        height: 105px;

        transform:
            scale(.60);

        transform-origin:
            top right;

        opacity: .042;
    }


    .service-doctor-hero {
        inset:
            16%
            8%;

        opacity: .40;
    }


    .doctor-draft,
    .doctor-final {
        font-size: 22px;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (
    prefers-reduced-motion: reduce
) {

    .service-doctor-process-track > i,
    .service-doctor-process-track > b,

    .service-doctor-step::after,

    .service-doctor-step-motion i,

    .doctor-cut,
    .doctor-check {
        animation:
            none !important;

        transition:
            none !important;
    }


    .service-doctor-process-track > i {
        width: 100%;
    }


    .service-doctor-process-track > b {
        transform:
            scale(1);
    }


    .service-doctor-step::after {
        width: 100%;
    }
}


/* ---------------------------------------------------------
   KEYFRAMES
   --------------------------------------------------------- */

@keyframes doctorV1Strike {

    0%,
    12% {
        scale:
            0
            1;

        opacity: .15;
    }

    48%,
    80% {
        scale:
            1
            1;

        opacity: 1;
    }

    100% {
        opacity: .30;
    }
}


@keyframes doctorV1Correction {

    0%,
    15% {
        scale:
            0
            1;

        opacity: .18;
    }

    50%,
    82% {
        scale:
            1
            1;

        opacity: 1;
    }

    100% {
        opacity: .32;
    }
}


@keyframes doctorV1Pulse {

    0%,
    100% {
        transform:
            scale(.80);

        opacity: .35;
    }

    50% {
        transform:
            scale(1.08);

        opacity: 1;
    }
}


@keyframes doctorV1Scan {

    from {
        top: 2px;
    }

    to {
        top:
            calc(
                100% - 5px
            );
    }
}


@keyframes doctorV1HeroCut {

    0%,
    15% {
        scale:
            0
            1;

        opacity: .18;
    }

    52%,
    82% {
        scale:
            1
            1;

        opacity: 1;
    }

    100% {
        opacity: .35;
    }
}


@keyframes doctorV1HeroCheck {

    0%,
    100% {
        transform:
            rotate(-45deg)
            scale(.75);

        opacity: .32;
    }

    50% {
        transform:
            rotate(-45deg)
            scale(1.08);

        opacity: 1;
    }
}


/* =========================================================
   END SCRIPT DOCTOR SERVICE CINEMATIC DESIGN V1
   ========================================================= */



/* =========================================================
   MENTORING SERVICE CINEMATIC DESIGN V1
   ========================================================= */


/* ---------------------------------------------------------
   PAGE
   --------------------------------------------------------- */

html[
    data-service-detail="mentoring-v1"
],
html[
    data-service-detail="mentoring-v1"
] body {
    overflow-x: clip;
}


.story-page[
    data-service-cinematic="mentoring-v1"
]
.story-content {
    position: relative;

    overflow: hidden;

    min-height: auto !important;

    padding:
        46px
        0
        80px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            rgba(
                254,
                250,
                224,
                .27
            ) 52%,
            #ffffff 100%
        ) !important;
}


.story-page[
    data-service-cinematic="mentoring-v1"
]
.story-prose {
    width:
        min(
            calc(
                100% - 48px
            ),
            1120px
        ) !important;

    max-width:
        1120px !important;

    margin:
        0
        auto !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    opacity: 1 !important;
    visibility: visible !important;

    contain: none !important;

    content-visibility:
        visible !important;
}


.story-page[
    data-service-cinematic="mentoring-v1"
]
.story-prose::before,
.story-page[
    data-service-cinematic="mentoring-v1"
]
.story-prose::after {
    display: none !important;
}


/* ---------------------------------------------------------
   KICKER
   --------------------------------------------------------- */

.service-mentor-kicker {
    position: relative;

    margin:
        0
        0
        24px !important;

    padding:
        0
        0
        17px
        28px !important;

    border: 0 !important;

    color:
        var(
            --green,
            #283618
        ) !important;

    font-size:
        28px !important;

    line-height:
        1.18 !important;
}


.service-mentor-kicker::before {
    content: "";

    position: absolute;

    left: 0;
    top: 2px;

    width: 3px;
    height: 34px;

    background:
        linear-gradient(
            180deg,
            var(
                --rust,
                #BC6C25
            ),
            var(
                --amber,
                #DDA15E
            )
        );
}


/* ---------------------------------------------------------
   PROCESS ROUTE
   --------------------------------------------------------- */

.service-mentor-process {
    display: grid;

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

    align-items: center;

    gap: 20px;

    width:
        min(
            100%,
            920px
        );

    margin:
        0
        auto
        42px;
}


.service-mentor-process > strong {
    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 30px;
    line-height: 1;
    font-weight: 850;

    letter-spacing: -.04em;
}


.service-mentor-process-track {
    position: relative;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    height: 42px;
}


.service-mentor-process-track::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 50%;

    height: 1px;

    transform:
        translateY(-50%);

    background:
        rgba(
            40,
            54,
            24,
            .16
        );
}


.service-mentor-process-track > i {
    position: absolute;

    z-index: 1;

    left: 0;
    top: 50%;

    width: 0;
    height: 3px;

    transform:
        translateY(-50%);

    background:
        linear-gradient(
            90deg,
            var(
                --rust,
                #BC6C25
            ),
            var(
                --amber,
                #DDA15E
            )
        );

    transition:
        width
        1.25s
        cubic-bezier(
            .22,
            .75,
            .18,
            1
        );
}


.service-mentor-process.is-active
.service-mentor-process-track > i {
    width: 100%;
}


.service-mentor-process-track > b {
    position: relative;

    z-index: 3;

    display: block;

    width: 17px;
    height: 17px;

    border:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    background: #fff;

    transform:
        scale(.65);

    transition:
        transform .35s ease,
        background-color .35s ease;
}


.service-mentor-process.is-active
.service-mentor-process-track > b {
    transform:
        scale(1);

    background:
        var(
            --paper,
            #FEFAE0
        );
}


.service-mentor-process-track > em {
    position: absolute;

    z-index: 4;

    left: 0;
    top: 50%;

    width: 13px;
    height: 13px;

    margin-top: -6px;

    border-radius: 50%;

    background:
        var(
            --amber,
            #DDA15E
        );

    box-shadow:
        0
        0
        17px
        rgba(
            221,
            161,
            94,
            .50
        );

    opacity: 0;
}


.service-mentor-process.is-active
.service-mentor-process-track > em {
    opacity: 1;

    animation:
        mentorProcessRunner
        4.8s
        ease-in-out
        infinite;
}


/* ---------------------------------------------------------
   STEP
   --------------------------------------------------------- */

.service-mentor-step {
    position: relative;

    isolation: isolate;

    display: grid;

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

    gap: 30px;

    margin:
        0
        0
        22px;

    padding:
        35px
        34px
        35px
        30px;

    overflow: hidden;

    border:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .11
        );

    border-radius: 18px;

    background:
        rgba(
            255,
            255,
            255,
            .90
        );

    box-shadow:
        0
        10px
        30px
        rgba(
            40,
            54,
            24,
            .03
        );
}


.service-mentor-step::after {
    content: "";

    position: absolute;

    z-index: 5;

    left: 0;
    bottom: 0;

    width: 0;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(
                --rust,
                #BC6C25
            ),
            var(
                --amber,
                #DDA15E
            )
        );

    transition:
        width .65s ease;
}


.service-mentor-step.is-active::after {
    width: 100%;
}


.service-mentor-step-number {
    position: relative;

    z-index: 4;

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 72px;
    line-height: .86;
    font-weight: 850;

    letter-spacing: -.065em;

    font-variant-numeric:
        tabular-nums;
}


.service-mentor-step-body {
    position: relative;

    z-index: 4;

    max-width: 780px;
}


.service-mentor-step-body p {
    margin:
        0
        0
        18px !important;

    padding: 0 !important;

    border: 0 !important;

    color:
        rgba(
            40,
            54,
            24,
            .81
        ) !important;

    font-size:
        18px !important;

    line-height:
        1.76 !important;

    opacity: 1 !important;
    visibility: visible !important;
}


.service-mentor-step-body p:last-child {
    margin-bottom:
        0 !important;
}


.service-mentor-step-body a {
    color:
        var(
            --rust,
            #BC6C25
        );

    text-decoration-color:
        rgba(
            188,
            108,
            37,
            .42
        );

    text-underline-offset:
        .18em;

    text-decoration-thickness:
        1px;
}


/* ---------------------------------------------------------
   IMPORTANT NOTE
   --------------------------------------------------------- */

.service-mentor-note {
    position: relative;

    margin-top:
        24px !important;

    padding:
        20px
        22px
        20px
        60px !important;

    border:
        1px
        solid
        rgba(
            188,
            108,
            37,
            .24
        ) !important;

    border-radius: 12px;

    background:
        rgba(
            254,
            250,
            224,
            .56
        );
}


.service-mentor-note::before {
    content: "!";

    position: absolute;

    left: 19px;
    top: 20px;

    display: grid;

    place-items: center;

    width: 26px;
    height: 26px;

    border:
        2px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 16px;
    line-height: 1;
    font-weight: 850;
}


/* ---------------------------------------------------------
   MOTION BASE
   --------------------------------------------------------- */

.service-mentor-step-motion {
    position: absolute;

    z-index: 1;

    top: 25px;
    right: 22px;

    width: 245px;
    height: 175px;

    pointer-events: none;

    opacity: .075;
}


.service-mentor-step-motion i {
    position: absolute;

    display: block;
}


/* ---------------------------------------------------------
   01 — START / DIRECTION
   --------------------------------------------------------- */

.service-mentor-step[
    data-effect="1"
]
.service-mentor-step-motion::before {
    content: "";

    position: absolute;

    left: 30px;
    top: 91px;

    width: 165px;
    height: 2px;

    transform:
        rotate(-19deg);

    background:
        rgba(
            188,
            108,
            37,
            .56
        );
}


.service-mentor-step[
    data-effect="1"
]
.service-mentor-step-motion i {
    width: 18px;
    height: 18px;

    border:
        2px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    background: #fff;

    animation:
        mentorCheckpoint
        2.8s
        ease-in-out
        infinite;
}


.service-mentor-step[
    data-effect="1"
]
.service-mentor-step-motion i:nth-child(1) {
    left: 20px;
    top: 119px;
}


.service-mentor-step[
    data-effect="1"
]
.service-mentor-step-motion i:nth-child(2) {
    left: 72px;
    top: 101px;

    animation-delay: .25s;
}


.service-mentor-step[
    data-effect="1"
]
.service-mentor-step-motion i:nth-child(3) {
    left: 125px;
    top: 82px;

    animation-delay: .50s;
}


.service-mentor-step[
    data-effect="1"
]
.service-mentor-step-motion i:nth-child(4) {
    left: 177px;
    top: 63px;

    animation-delay: .75s;
}


.service-mentor-step[
    data-effect="1"
]
.service-mentor-step-motion i:nth-child(5) {
    left: 198px;
    top: 48px;

    width: 30px;
    height: 30px;

    border-width: 3px;

    animation-delay: 1s;
}


/* ---------------------------------------------------------
   02 — PERSON + GOAL
   --------------------------------------------------------- */

.service-mentor-step[
    data-effect="2"
]
.service-mentor-step-motion i:nth-child(1) {
    left: 35px;
    top: 62px;

    width: 38px;
    height: 38px;

    border:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;
}


.service-mentor-step[
    data-effect="2"
]
.service-mentor-step-motion i:nth-child(2) {
    left: 25px;
    top: 108px;

    width: 59px;
    height: 35px;

    border:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-top: 0;

    border-radius:
        0
        0
        32px
        32px;
}


.service-mentor-step[
    data-effect="2"
]
.service-mentor-step-motion i:nth-child(3) {
    left: 95px;
    top: 91px;

    width: 84px;
    height: 2px;

    background:
        var(
            --rust,
            #BC6C25
        );

    transform-origin:
        left center;

    animation:
        mentorDirection
        3s
        ease-in-out
        infinite;
}


.service-mentor-step[
    data-effect="2"
]
.service-mentor-step-motion i:nth-child(4) {
    right: 26px;
    top: 67px;

    width: 50px;
    height: 50px;

    border:
        2px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    animation:
        mentorTarget
        3s
        ease-in-out
        infinite;
}


.service-mentor-step[
    data-effect="2"
]
.service-mentor-step-motion i:nth-child(5) {
    right: 40px;
    top: 81px;

    width: 22px;
    height: 22px;

    border:
        2px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;
}


/* ---------------------------------------------------------
   03 — CHECKPOINT ROADMAP
   --------------------------------------------------------- */

.service-mentor-step[
    data-effect="3"
]
.service-mentor-step-motion::before {
    content: "";

    position: absolute;

    left: 18px;
    right: 18px;
    top: 94px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            rgba(
                188,
                108,
                37,
                .24
            ),
            rgba(
                188,
                108,
                37,
                .74
            )
        );
}


.service-mentor-step[
    data-effect="3"
]
.service-mentor-step-motion i {
    top: 84px;

    width: 20px;
    height: 20px;

    border:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    background: #fff;

    animation:
        mentorCheckpoint
        2.6s
        ease-in-out
        infinite;
}


.service-mentor-step[
    data-effect="3"
]
.service-mentor-step-motion i:nth-child(1) {
    left: 12px;
}


.service-mentor-step[
    data-effect="3"
]
.service-mentor-step-motion i:nth-child(2) {
    left: 63px;

    animation-delay: .20s;
}


.service-mentor-step[
    data-effect="3"
]
.service-mentor-step-motion i:nth-child(3) {
    left: 115px;

    animation-delay: .40s;
}


.service-mentor-step[
    data-effect="3"
]
.service-mentor-step-motion i:nth-child(4) {
    left: 167px;

    animation-delay: .60s;
}


.service-mentor-step[
    data-effect="3"
]
.service-mentor-step-motion i:nth-child(5) {
    right: 6px;

    width: 26px;
    height: 26px;

    margin-top: -3px;

    background:
        rgba(
            254,
            250,
            224,
            .72
        );

    animation-delay: .80s;
}


/* ---------------------------------------------------------
   04 — TOOLKIT / SUPPORT SYSTEM
   --------------------------------------------------------- */

.service-mentor-step[
    data-effect="4"
]
.service-mentor-step-motion i {
    width: 86px;
    height: 58px;

    border:
        1px
        solid
        rgba(
            188,
            108,
            37,
            .56
        );

    background:
        rgba(
            254,
            250,
            224,
            .32
        );

    animation:
        mentorToolkit
        3.8s
        ease-in-out
        infinite
        alternate;
}


.service-mentor-step[
    data-effect="4"
]
.service-mentor-step-motion i:nth-child(1) {
    left: 12px;
    top: 13px;
}


.service-mentor-step[
    data-effect="4"
]
.service-mentor-step-motion i:nth-child(2) {
    right: 13px;
    top: 21px;

    animation-delay: .25s;
}


.service-mentor-step[
    data-effect="4"
]
.service-mentor-step-motion i:nth-child(3) {
    left: 29px;
    bottom: 15px;

    animation-delay: .50s;
}


.service-mentor-step[
    data-effect="4"
]
.service-mentor-step-motion i:nth-child(4) {
    right: 30px;
    bottom: 8px;

    animation-delay: .75s;
}


.service-mentor-step[
    data-effect="4"
]
.service-mentor-step-motion i:nth-child(5) {
    left: 104px;
    top: 69px;

    width: 36px;
    height: 36px;

    border-width: 3px;

    border-radius: 50%;

    animation:
        mentorTarget
        3s
        ease-in-out
        infinite;
}


/* ---------------------------------------------------------
   HERO — ROUTE
   --------------------------------------------------------- */

.story-page[
    data-service-cinematic="mentoring-v1"
]
.story-art {
    position: relative;

    overflow: hidden;
}


.story-page[
    data-service-cinematic="mentoring-v1"
]
.story-art-icon {
    position: relative;

    z-index: 6;
}


.service-mentor-hero {
    position: absolute;

    z-index: 2;

    inset: 9%;

    pointer-events: none;

    opacity: .52;
}


.mentor-hero-frame {
    position: absolute;

    inset:
        4%
        8%;

    border:
        1px
        solid
        rgba(
            254,
            250,
            224,
            .22
        );

    transform:
        rotate(-3deg);
}


.mentor-hero-path {
    position: absolute;

    z-index: 3;

    height: 2px;

    background:
        rgba(
            254,
            250,
            224,
            .54
        );

    transform-origin:
        left center;
}


.mentor-hero-path.path-1 {
    left: 17%;
    top: 68%;

    width: 29%;

    transform:
        rotate(-18deg);
}


.mentor-hero-path.path-2 {
    left: 42%;
    top: 55%;

    width: 25%;

    transform:
        rotate(12deg);
}


.mentor-hero-path.path-3 {
    left: 64%;
    top: 59%;

    width: 23%;

    transform:
        rotate(-28deg);
}


.mentor-hero-node {
    position: absolute;

    z-index: 5;

    width: 15px;
    height: 15px;

    border:
        2px
        solid
        rgba(
            254,
            250,
            224,
            .80
        );

    border-radius: 50%;

    background:
        var(
            --rust,
            #BC6C25
        );

    animation:
        mentorHeroNode
        2.7s
        ease-in-out
        infinite;
}


.mentor-hero-node.node-1 {
    left: 16%;
    top: 71%;
}


.mentor-hero-node.node-2 {
    left: 43%;
    top: 55%;

    animation-delay: .30s;
}


.mentor-hero-node.node-3 {
    left: 65%;
    top: 60%;

    animation-delay: .60s;
}


.mentor-hero-node.node-4 {
    left: 86%;
    top: 37%;

    width: 20px;
    height: 20px;

    animation-delay: .90s;
}


.mentor-hero-runner {
    position: absolute;

    z-index: 7;

    left: 16%;
    top: 71%;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background:
        var(
            --amber,
            #DDA15E
        );

    box-shadow:
        0
        0
        22px
        rgba(
            221,
            161,
            94,
            .62
        );

    animation:
        mentorHeroRunner
        4.8s
        ease-in-out
        infinite;
}


.mentor-hero-start,
.mentor-hero-finish {
    position: absolute;

    z-index: 5;

    color:
        rgba(
            254,
            250,
            224,
            .72
        );

    font-size: 28px;
    line-height: 1;
    font-weight: 850;
}


.mentor-hero-start {
    left: 10%;
    bottom: 5%;
}


.mentor-hero-finish {
    right: 9%;
    top: 8%;
}


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

@media (
    max-width: 1024px
) {

    .service-mentor-step {
        grid-template-columns:
            80px
            minmax(
                0,
                1fr
            );
    }


    .service-mentor-step-number {
        font-size: 62px;
    }


    .service-mentor-step-motion {
        right: 7px;

        transform:
            scale(.80);

        transform-origin:
            top right;

        opacity: .05;
    }
}


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

@media (
    max-width: 760px
) {

    .story-page[
        data-service-cinematic="mentoring-v1"
    ]
    .story-content {
        padding:
            31px
            0
            56px;
    }


    .story-page[
        data-service-cinematic="mentoring-v1"
    ]
    .story-prose {
        width:
            calc(
                100% - 40px
            ) !important;
    }


    .service-mentor-kicker {
        margin-bottom:
            19px !important;

        padding:
            0
            0
            14px
            17px !important;

        font-size:
            23px !important;
    }


    .service-mentor-process {
        gap: 11px;

        margin-bottom:
            28px;
    }


    .service-mentor-process > strong {
        font-size: 21px;
    }


    .service-mentor-process-track {
        height: 30px;
    }


    .service-mentor-process-track > b {
        width: 11px;
        height: 11px;

        border-width: 2px;
    }


    .service-mentor-process-track > em {
        width: 9px;
        height: 9px;

        margin-top: -4px;
    }


    .service-mentor-step {
        display: block;

        margin-bottom:
            17px;

        padding:
            24px
            20px
            25px;

        border-radius: 16px;
    }


    .service-mentor-step-number {
        display: block;

        margin-bottom:
            20px;

        font-size: 50px;
    }


    .service-mentor-step-body {
        max-width: 100%;
    }


    .service-mentor-step-body p {
        font-size:
            17px !important;

        line-height:
            1.70 !important;
    }


    .service-mentor-note {
        margin-top:
            20px !important;

        padding:
            18px
            16px
            18px
            52px !important;
    }


    .service-mentor-note::before {
        left: 15px;
        top: 18px;

        width: 23px;
        height: 23px;

        font-size: 14px;
    }


    /*
     * Decoration cannot move the content column.
     */

    .service-mentor-step-motion {
        top: 10px;
        right: -40px;

        width: 145px;
        height: 105px;

        transform:
            scale(.60);

        transform-origin:
            top right;

        opacity: .042;
    }


    .service-mentor-hero {
        inset:
            16%
            8%;

        opacity: .40;
    }


    .mentor-hero-start,
    .mentor-hero-finish {
        font-size: 22px;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (
    prefers-reduced-motion: reduce
) {

    .service-mentor-process-track > i,
    .service-mentor-process-track > b,
    .service-mentor-process-track > em,

    .service-mentor-step::after,

    .service-mentor-step-motion i,

    .mentor-hero-node,
    .mentor-hero-runner {
        animation:
            none !important;

        transition:
            none !important;
    }


    .service-mentor-process-track > i {
        width: 100%;
    }


    .service-mentor-process-track > b {
        transform:
            scale(1);
    }


    .service-mentor-process-track > em {
        display: none;
    }


    .service-mentor-step::after {
        width: 100%;
    }
}


/* ---------------------------------------------------------
   KEYFRAMES
   --------------------------------------------------------- */

@keyframes mentorProcessRunner {

    0% {
        left: 0;
    }

    33% {
        left: 33%;
    }

    66% {
        left: 66%;
    }

    100% {
        left:
            calc(
                100% - 13px
            );
    }
}


@keyframes mentorCheckpoint {

    0%,
    100% {
        transform:
            scale(.72);

        opacity: .34;
    }

    50% {
        transform:
            scale(1.18);

        opacity: 1;
    }
}


@keyframes mentorDirection {

    0%,
    15% {
        scale:
            0
            1;

        opacity: .18;
    }

    50%,
    82% {
        scale:
            1
            1;

        opacity: 1;
    }

    100% {
        opacity: .34;
    }
}


@keyframes mentorTarget {

    0%,
    100% {
        transform:
            scale(.82);

        opacity: .34;
    }

    50% {
        transform:
            scale(1.08);

        opacity: 1;
    }
}


@keyframes mentorToolkit {

    from {
        transform:
            translate3d(
                -4px,
                -3px,
                0
            );
    }

    to {
        transform:
            translate3d(
                6px,
                5px,
                0
            );
    }
}


@keyframes mentorHeroNode {

    0%,
    100% {
        transform:
            scale(.72);

        opacity: .42;
    }

    50% {
        transform:
            scale(1.18);

        opacity: 1;
    }
}


@keyframes mentorHeroRunner {

    0% {
        left: 16%;
        top: 71%;
    }

    34% {
        left: 43%;
        top: 55%;
    }

    67% {
        left: 65%;
        top: 60%;
    }

    100% {
        left: 86%;
        top: 37%;
    }
}


/* =========================================================
   END MENTORING SERVICE CINEMATIC DESIGN V1
   ========================================================= */



/* =========================================================
   MENTORING NOTE LAYOUT FIX V1
   ========================================================= */

/*
 * The generic rule:
 *
 * .service-mentor-step-body p {
 *     padding: 0 !important;
 * }
 *
 * has greater specificity than the original
 * .service-mentor-note selector.
 *
 * Therefore the note lost its left padding and the
 * exclamation icon collided with "Qeyd:".
 *
 * Use the full paragraph selector so the note wins.
 */

.story-page[
    data-service-cinematic="mentoring-v1"
]
.service-mentor-step-body
p.service-mentor-note {
    position: relative;

    display: block;

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

    box-sizing: border-box;

    margin:
        25px
        0
        0 !important;

    padding:
        20px
        22px
        20px
        62px !important;

    border:
        1px
        solid
        rgba(
            188,
            108,
            37,
            .24
        ) !important;

    border-radius:
        12px !important;

    background:
        rgba(
            254,
            250,
            224,
            .62
        ) !important;

    color:
        rgba(
            40,
            54,
            24,
            .84
        ) !important;

    line-height:
        1.68 !important;
}


/*
 * Dedicated icon lane.
 * It no longer occupies the text area.
 */

.story-page[
    data-service-cinematic="mentoring-v1"
]
.service-mentor-step-body
p.service-mentor-note::before {
    content: "!";

    position: absolute;

    left: 19px;
    top: 21px;

    display: grid;

    place-items: center;

    width: 27px;
    height: 27px;

    box-sizing: border-box;

    border:
        2px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            .72
        );

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 16px;
    line-height: 1;
    font-weight: 850;
}


/*
 * Keep "Qeyd:" attached cleanly to the note copy.
 */

.story-page[
    data-service-cinematic="mentoring-v1"
]
.service-mentor-step-body
p.service-mentor-note strong {
    color:
        var(
            --green,
            #283618
        ) !important;

    font-weight: 800;
}


/*
 * Keep stage 04 decoration behind the note.
 */

.story-page[
    data-service-cinematic="mentoring-v1"
]
.service-mentor-step[
    data-step="04"
]
.service-mentor-step-body {
    position: relative;

    z-index: 4;
}


.story-page[
    data-service-cinematic="mentoring-v1"
]
.service-mentor-step[
    data-step="04"
]
.service-mentor-step-motion {
    z-index: 1;

    opacity: .055;
}


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

@media (
    max-width: 760px
) {

    .story-page[
        data-service-cinematic="mentoring-v1"
    ]
    .service-mentor-step-body
    p.service-mentor-note {
        width: 100%;
        max-width: 100%;

        margin:
            21px
            0
            0 !important;

        padding:
            18px
            16px
            18px
            53px !important;

        border-radius:
            11px !important;

        font-size:
            17px !important;

        line-height:
            1.67 !important;
    }


    .story-page[
        data-service-cinematic="mentoring-v1"
    ]
    .service-mentor-step-body
    p.service-mentor-note::before {
        left: 15px;
        top: 19px;

        width: 24px;
        height: 24px;

        font-size: 14px;
    }


    .story-page[
        data-service-cinematic="mentoring-v1"
    ]
    .service-mentor-step[
        data-step="04"
    ]
    .service-mentor-step-motion {
        right: -42px;

        opacity: .032;
    }
}


/* =========================================================
   END MENTORING NOTE LAYOUT FIX V1
   ========================================================= */



/* =========================================================
   CONSULTATION SERVICE CINEMATIC DESIGN V1
   ========================================================= */


/* ---------------------------------------------------------
   PAGE
   --------------------------------------------------------- */

html[
    data-service-detail="consultation-v1"
],
html[
    data-service-detail="consultation-v1"
] body {
    overflow-x: clip;
}


.story-page[
    data-service-cinematic="consultation-v1"
]
.story-content {
    position: relative;

    overflow: hidden;

    min-height: auto !important;

    padding:
        46px
        0
        80px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            rgba(
                254,
                250,
                224,
                .27
            ) 52%,
            #ffffff 100%
        ) !important;
}


.story-page[
    data-service-cinematic="consultation-v1"
]
.story-prose {
    width:
        min(
            calc(
                100% - 48px
            ),
            1120px
        ) !important;

    max-width:
        1120px !important;

    margin:
        0
        auto !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    opacity: 1 !important;
    visibility: visible !important;

    contain: none !important;

    content-visibility:
        visible !important;
}


.story-page[
    data-service-cinematic="consultation-v1"
]
.story-prose::before,
.story-page[
    data-service-cinematic="consultation-v1"
]
.story-prose::after {
    display: none !important;
}


/* ---------------------------------------------------------
   KICKER
   --------------------------------------------------------- */

.service-consult-kicker {
    position: relative;

    margin:
        0
        0
        24px !important;

    padding:
        0
        0
        17px
        28px !important;

    border: 0 !important;

    color:
        var(
            --green,
            #283618
        ) !important;

    font-size:
        28px !important;

    line-height:
        1.18 !important;
}


.service-consult-kicker::before {
    content: "";

    position: absolute;

    left: 0;
    top: 2px;

    width: 3px;
    height: 34px;

    background:
        linear-gradient(
            180deg,
            var(
                --rust,
                #BC6C25
            ),
            var(
                --amber,
                #DDA15E
            )
        );
}


/* ---------------------------------------------------------
   PROCESS 01 → 03
   --------------------------------------------------------- */

.service-consult-process {
    display: grid;

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

    align-items: center;

    gap: 20px;

    width:
        min(
            100%,
            920px
        );

    margin:
        0
        auto
        42px;
}


.service-consult-process > strong {
    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 30px;
    line-height: 1;
    font-weight: 850;

    letter-spacing: -.04em;
}


.service-consult-process-track {
    position: relative;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    height: 42px;
}


.service-consult-process-track::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 50%;

    height: 1px;

    transform:
        translateY(-50%);

    background:
        rgba(
            40,
            54,
            24,
            .16
        );
}


.service-consult-process-track > i {
    position: absolute;

    z-index: 1;

    left: 0;
    top: 50%;

    width: 0;
    height: 3px;

    transform:
        translateY(-50%);

    background:
        linear-gradient(
            90deg,
            var(
                --rust,
                #BC6C25
            ),
            var(
                --amber,
                #DDA15E
            )
        );

    transition:
        width
        1.2s
        cubic-bezier(
            .22,
            .75,
            .18,
            1
        );
}


.service-consult-process.is-active
.service-consult-process-track > i {
    width: 100%;
}


.service-consult-process-track > b {
    position: relative;

    z-index: 3;

    display: block;

    width: 17px;
    height: 17px;

    border:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    background: #fff;

    transform:
        scale(.65);

    transition:
        transform .35s ease,
        background-color .35s ease;
}


.service-consult-process.is-active
.service-consult-process-track > b {
    transform:
        scale(1);

    background:
        var(
            --paper,
            #FEFAE0
        );
}


.service-consult-process-track > em {
    position: absolute;

    z-index: 4;

    left: 0;
    top: 50%;

    width: 13px;
    height: 13px;

    margin-top: -6px;

    border-radius: 50%;

    background:
        var(
            --amber,
            #DDA15E
        );

    box-shadow:
        0
        0
        18px
        rgba(
            221,
            161,
            94,
            .52
        );

    opacity: 0;
}


.service-consult-process.is-active
.service-consult-process-track > em {
    opacity: 1;

    animation:
        consultProcessRunner
        4.4s
        ease-in-out
        infinite;
}


/* ---------------------------------------------------------
   STEPS
   --------------------------------------------------------- */

.service-consult-step {
    position: relative;

    isolation: isolate;

    display: grid;

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

    gap: 30px;

    margin:
        0
        0
        22px;

    padding:
        35px
        34px
        35px
        30px;

    overflow: hidden;

    border:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .11
        );

    border-radius: 18px;

    background:
        rgba(
            255,
            255,
            255,
            .90
        );

    box-shadow:
        0
        10px
        30px
        rgba(
            40,
            54,
            24,
            .03
        );
}


.service-consult-step::after {
    content: "";

    position: absolute;

    z-index: 5;

    left: 0;
    bottom: 0;

    width: 0;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(
                --rust,
                #BC6C25
            ),
            var(
                --amber,
                #DDA15E
            )
        );

    transition:
        width .65s ease;
}


.service-consult-step.is-active::after {
    width: 100%;
}


.service-consult-step-number {
    position: relative;

    z-index: 4;

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 72px;
    line-height: .86;
    font-weight: 850;

    letter-spacing: -.065em;

    font-variant-numeric:
        tabular-nums;
}


.service-consult-step-body {
    position: relative;

    z-index: 4;

    max-width: 790px;
}


.service-consult-step-body p {
    margin:
        0 !important;

    padding:
        0 !important;

    border: 0 !important;

    color:
        rgba(
            40,
            54,
            24,
            .81
        ) !important;

    font-size:
        18px !important;

    line-height:
        1.76 !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* ---------------------------------------------------------
   MOTION BASE
   --------------------------------------------------------- */

.service-consult-step-motion {
    position: absolute;

    z-index: 1;

    top: 25px;
    right: 22px;

    width: 245px;
    height: 175px;

    pointer-events: none;

    opacity: .075;
}


.service-consult-step-motion i {
    position: absolute;

    display: block;
}


/* ---------------------------------------------------------
   01 — IDEA / FOCUS
   --------------------------------------------------------- */

.service-consult-step[
    data-effect="1"
]
.service-consult-step-motion i:nth-child(1) {
    left: 83px;
    top: 48px;

    width: 74px;
    height: 74px;

    border:
        2px
        solid
        rgba(
            188,
            108,
            37,
            .60
        );

    border-radius: 50%;

    animation:
        consultFocusRing
        3s
        ease-in-out
        infinite;
}


.service-consult-step[
    data-effect="1"
]
.service-consult-step-motion i:nth-child(2) {
    left: 101px;
    top: 66px;

    width: 38px;
    height: 38px;

    border:
        2px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;
}


.service-consult-step[
    data-effect="1"
]
.service-consult-step-motion i:nth-child(3) {
    left: 119px;
    top: 23px;

    width: 2px;
    height: 20px;

    background:
        var(
            --rust,
            #BC6C25
        );
}


.service-consult-step[
    data-effect="1"
]
.service-consult-step-motion i:nth-child(4) {
    left: 119px;
    bottom: 22px;

    width: 2px;
    height: 20px;

    background:
        var(
            --rust,
            #BC6C25
        );
}


.service-consult-step[
    data-effect="1"
]
.service-consult-step-motion i:nth-child(5) {
    left: 57px;
    top: 84px;

    width: 20px;
    height: 2px;

    background:
        var(
            --rust,
            #BC6C25
        );
}


.service-consult-step[
    data-effect="1"
]
.service-consult-step-motion i:nth-child(6) {
    right: 56px;
    top: 84px;

    width: 20px;
    height: 2px;

    background:
        var(
            --rust,
            #BC6C25
        );
}


/* ---------------------------------------------------------
   02 — DECISION BRANCHING
   --------------------------------------------------------- */

.service-consult-step[
    data-effect="2"
]
.service-consult-step-motion::before {
    content: "";

    position: absolute;

    left: 24px;
    top: 86px;

    width: 82px;
    height: 3px;

    background:
        rgba(
            188,
            108,
            37,
            .65
        );
}


.service-consult-step[
    data-effect="2"
]
.service-consult-step-motion i:nth-child(1),
.service-consult-step[
    data-effect="2"
]
.service-consult-step-motion i:nth-child(2),
.service-consult-step[
    data-effect="2"
]
.service-consult-step-motion i:nth-child(3) {
    left: 105px;
    top: 86px;

    width: 100px;
    height: 2px;

    transform-origin:
        left center;

    background:
        var(
            --rust,
            #BC6C25
        );

    animation:
        consultBranch
        3.1s
        ease-in-out
        infinite;
}


.service-consult-step[
    data-effect="2"
]
.service-consult-step-motion i:nth-child(1) {
    transform:
        rotate(-34deg);
}


.service-consult-step[
    data-effect="2"
]
.service-consult-step-motion i:nth-child(2) {
    transform:
        rotate(0deg);

    animation-delay: .35s;
}


.service-consult-step[
    data-effect="2"
]
.service-consult-step-motion i:nth-child(3) {
    transform:
        rotate(34deg);

    animation-delay: .70s;
}


.service-consult-step[
    data-effect="2"
]
.service-consult-step-motion i:nth-child(4),
.service-consult-step[
    data-effect="2"
]
.service-consult-step-motion i:nth-child(5),
.service-consult-step[
    data-effect="2"
]
.service-consult-step-motion i:nth-child(6) {
    width: 18px;
    height: 18px;

    border:
        2px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    background: #fff;

    animation:
        consultDecisionNode
        2.8s
        ease-in-out
        infinite;
}


.service-consult-step[
    data-effect="2"
]
.service-consult-step-motion i:nth-child(4) {
    right: 24px;
    top: 41px;
}


.service-consult-step[
    data-effect="2"
]
.service-consult-step-motion i:nth-child(5) {
    right: 10px;
    top: 78px;

    animation-delay: .35s;
}


.service-consult-step[
    data-effect="2"
]
.service-consult-step-motion i:nth-child(6) {
    right: 24px;
    bottom: 35px;

    animation-delay: .70s;
}


/* ---------------------------------------------------------
   03 — ROADMAP
   --------------------------------------------------------- */

.service-consult-step[
    data-effect="3"
]
.service-consult-step-motion::before {
    content: "";

    position: absolute;

    left: 24px;
    right: 23px;
    top: 90px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            rgba(
                188,
                108,
                37,
                .28
            ),
            rgba(
                188,
                108,
                37,
                .78
            )
        );
}


.service-consult-step[
    data-effect="3"
]
.service-consult-step-motion i:nth-child(1),
.service-consult-step[
    data-effect="3"
]
.service-consult-step-motion i:nth-child(2),
.service-consult-step[
    data-effect="3"
]
.service-consult-step-motion i:nth-child(3),
.service-consult-step[
    data-effect="3"
]
.service-consult-step-motion i:nth-child(4) {
    top: 80px;

    width: 21px;
    height: 21px;

    border:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    background: #fff;

    animation:
        consultRoadNode
        2.8s
        ease-in-out
        infinite;
}


.service-consult-step[
    data-effect="3"
]
.service-consult-step-motion i:nth-child(1) {
    left: 15px;
}


.service-consult-step[
    data-effect="3"
]
.service-consult-step-motion i:nth-child(2) {
    left: 78px;

    animation-delay: .22s;
}


.service-consult-step[
    data-effect="3"
]
.service-consult-step-motion i:nth-child(3) {
    left: 143px;

    animation-delay: .44s;
}


.service-consult-step[
    data-effect="3"
]
.service-consult-step-motion i:nth-child(4) {
    right: 12px;

    width: 29px;
    height: 29px;

    margin-top: -4px;

    background:
        rgba(
            254,
            250,
            224,
            .72
        );

    animation-delay: .66s;
}


.service-consult-step[
    data-effect="3"
]
.service-consult-step-motion i:nth-child(5) {
    left: 22px;
    top: 41px;

    width: 160px;
    height: 1px;

    background:
        rgba(
            40,
            54,
            24,
            .26
        );

    transform:
        rotate(-7deg);
}


.service-consult-step[
    data-effect="3"
]
.service-consult-step-motion i:nth-child(6) {
    right: 22px;
    bottom: 27px;

    width: 112px;
    height: 1px;

    background:
        rgba(
            40,
            54,
            24,
            .26
        );

    transform:
        rotate(7deg);
}


/* ---------------------------------------------------------
   HERO — DECISION MAP
   --------------------------------------------------------- */

.story-page[
    data-service-cinematic="consultation-v1"
]
.story-art {
    position: relative;

    overflow: hidden;
}


.story-page[
    data-service-cinematic="consultation-v1"
]
.story-art-icon {
    position: relative;

    z-index: 6;
}


.service-consult-hero {
    position: absolute;

    z-index: 2;

    inset: 9%;

    pointer-events: none;

    opacity: .54;
}


.consult-hero-frame {
    position: absolute;

    inset:
        3%
        8%;

    border:
        1px
        solid
        rgba(
            254,
            250,
            224,
            .22
        );

    transform:
        rotate(-3deg);
}


.consult-hero-origin {
    position: absolute;

    z-index: 5;

    left: 20%;
    top: 51%;

    width: 18px;
    height: 18px;

    border:
        3px
        solid
        rgba(
            254,
            250,
            224,
            .80
        );

    border-radius: 50%;

    background:
        var(
            --rust,
            #BC6C25
        );

    animation:
        consultHeroOrigin
        2.8s
        ease-in-out
        infinite;
}


.consult-hero-branch {
    position: absolute;

    z-index: 3;

    left: 24%;
    top: 54%;

    width: 48%;

    height: 2px;

    transform-origin:
        left center;

    background:
        rgba(
            254,
            250,
            224,
            .60
        );

    animation:
        consultHeroBranch
        3.2s
        ease-in-out
        infinite;
}


.consult-hero-branch.branch-a {
    transform:
        rotate(-27deg);
}


.consult-hero-branch.branch-b {
    transform:
        rotate(0deg);

    animation-delay: .35s;
}


.consult-hero-branch.branch-c {
    transform:
        rotate(27deg);

    animation-delay: .70s;
}


.consult-hero-node {
    position: absolute;

    z-index: 5;

    width: 16px;
    height: 16px;

    border:
        2px
        solid
        rgba(
            254,
            250,
            224,
            .82
        );

    border-radius: 50%;

    background:
        var(
            --rust,
            #BC6C25
        );

    animation:
        consultHeroNode
        2.8s
        ease-in-out
        infinite;
}


.consult-hero-node.node-a {
    right: 25%;
    top: 27%;
}


.consult-hero-node.node-b {
    right: 18%;
    top: 51%;

    animation-delay: .35s;
}


.consult-hero-node.node-c {
    right: 25%;
    bottom: 24%;

    animation-delay: .70s;
}


.consult-hero-focus {
    position: absolute;

    z-index: 6;

    right: 9%;
    top: 40%;

    width: 76px;
    height: 76px;

    border:
        2px
        solid
        rgba(
            254,
            250,
            224,
            .54
        );

    border-radius: 50%;

    animation:
        consultHeroFocus
        3s
        ease-in-out
        infinite;
}


.consult-hero-start,
.consult-hero-finish {
    position: absolute;

    z-index: 7;

    color:
        rgba(
            254,
            250,
            224,
            .72
        );

    font-size: 28px;
    line-height: 1;
    font-weight: 850;
}


.consult-hero-start {
    left: 10%;
    bottom: 7%;
}


.consult-hero-finish {
    right: 9%;
    top: 7%;
}


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

@media (
    max-width: 1024px
) {

    .service-consult-step {
        grid-template-columns:
            80px
            minmax(
                0,
                1fr
            );
    }


    .service-consult-step-number {
        font-size: 62px;
    }


    .service-consult-step-motion {
        right: 7px;

        transform:
            scale(.80);

        transform-origin:
            top right;

        opacity: .05;
    }
}


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

@media (
    max-width: 760px
) {

    .story-page[
        data-service-cinematic="consultation-v1"
    ]
    .story-content {
        padding:
            31px
            0
            56px;
    }


    .story-page[
        data-service-cinematic="consultation-v1"
    ]
    .story-prose {
        width:
            calc(
                100% - 40px
            ) !important;
    }


    .service-consult-kicker {
        margin-bottom:
            19px !important;

        padding:
            0
            0
            14px
            17px !important;

        font-size:
            23px !important;
    }


    .service-consult-kicker::before {
        width: 2px;
        height: 28px;
    }


    .service-consult-process {
        gap: 11px;

        margin-bottom:
            28px;
    }


    .service-consult-process > strong {
        font-size: 21px;
    }


    .service-consult-process-track {
        height: 30px;
    }


    .service-consult-process-track > b {
        width: 11px;
        height: 11px;

        border-width: 2px;
    }


    .service-consult-process-track > em {
        width: 9px;
        height: 9px;

        margin-top: -4px;
    }


    .service-consult-step {
        display: block;

        margin-bottom:
            17px;

        padding:
            24px
            20px
            25px;

        border-radius:
            16px;
    }


    .service-consult-step-number {
        display: block;

        margin-bottom:
            20px;

        font-size: 50px;
    }


    .service-consult-step-body {
        max-width: 100%;
    }


    .service-consult-step-body p {
        font-size:
            17px !important;

        line-height:
            1.70 !important;
    }


    /*
     * Decoration is background-only.
     * Never owns mobile layout width.
     */

    .service-consult-step-motion {
        top: 10px;
        right: -41px;

        width: 145px;
        height: 105px;

        transform:
            scale(.60);

        transform-origin:
            top right;

        opacity: .042;
    }


    .service-consult-hero {
        inset:
            16%
            8%;

        opacity: .40;
    }


    .consult-hero-start,
    .consult-hero-finish {
        font-size: 22px;
    }


    .consult-hero-focus {
        width: 52px;
        height: 52px;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (
    prefers-reduced-motion: reduce
) {

    .service-consult-process-track > i,
    .service-consult-process-track > b,
    .service-consult-process-track > em,

    .service-consult-step::after,

    .service-consult-step-motion i,

    .consult-hero-origin,
    .consult-hero-branch,
    .consult-hero-node,
    .consult-hero-focus {
        animation:
            none !important;

        transition:
            none !important;
    }


    .service-consult-process-track > i {
        width: 100%;
    }


    .service-consult-process-track > b {
        transform:
            scale(1);
    }


    .service-consult-process-track > em {
        display: none;
    }


    .service-consult-step::after {
        width: 100%;
    }
}


/* ---------------------------------------------------------
   KEYFRAMES
   --------------------------------------------------------- */

@keyframes consultProcessRunner {

    0% {
        left: 0;
    }

    50% {
        left: 50%;
    }

    100% {
        left:
            calc(
                100% - 13px
            );
    }
}


@keyframes consultFocusRing {

    0%,
    100% {
        transform:
            scale(.78);

        opacity: .30;
    }

    50% {
        transform:
            scale(1.12);

        opacity: 1;
    }
}


@keyframes consultBranch {

    0%,
    14% {
        scale:
            0
            1;

        opacity: .16;
    }

    48%,
    82% {
        scale:
            1
            1;

        opacity: 1;
    }

    100% {
        opacity: .34;
    }
}


@keyframes consultDecisionNode {

    0%,
    100% {
        transform:
            scale(.72);

        opacity: .32;
    }

    50% {
        transform:
            scale(1.15);

        opacity: 1;
    }
}


@keyframes consultRoadNode {

    0%,
    100% {
        transform:
            scale(.72);

        opacity: .34;
    }

    50% {
        transform:
            scale(1.16);

        opacity: 1;
    }
}


@keyframes consultHeroOrigin {

    0%,
    100% {
        transform:
            scale(.75);

        opacity: .40;
    }

    50% {
        transform:
            scale(1.16);

        opacity: 1;
    }
}


@keyframes consultHeroBranch {

    0%,
    12% {
        scale:
            0
            1;

        opacity: .16;
    }

    48%,
    82% {
        scale:
            1
            1;

        opacity: 1;
    }

    100% {
        opacity: .36;
    }
}


@keyframes consultHeroNode {

    0%,
    100% {
        transform:
            scale(.72);

        opacity: .38;
    }

    50% {
        transform:
            scale(1.18);

        opacity: 1;
    }
}


@keyframes consultHeroFocus {

    0%,
    100% {
        transform:
            scale(.78);

        opacity: .30;
    }

    50% {
        transform:
            scale(1.10);

        opacity: 1;
    }
}


/* =========================================================
   END CONSULTATION SERVICE CINEMATIC DESIGN V1
   ========================================================= */



/* =========================================================
   SCREENWRITER ADVOCACY CINEMATIC DESIGN V1
   ========================================================= */


/* ---------------------------------------------------------
   PAGE
   --------------------------------------------------------- */

html[
    data-service-detail="screenwriter-advocacy-v1"
],
html[
    data-service-detail="screenwriter-advocacy-v1"
] body {
    overflow-x: clip;
}


.story-page[
    data-service-cinematic="screenwriter-advocacy-v1"
]
.story-content {
    position: relative;

    overflow: hidden;

    min-height: auto !important;

    padding:
        46px
        0
        80px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            rgba(
                254,
                250,
                224,
                .27
            ) 51%,
            #ffffff 100%
        ) !important;
}


.story-page[
    data-service-cinematic="screenwriter-advocacy-v1"
]
.story-prose {
    width:
        min(
            calc(
                100% - 48px
            ),
            1120px
        ) !important;

    max-width:
        1120px !important;

    margin:
        0
        auto !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    opacity: 1 !important;
    visibility: visible !important;

    contain: none !important;

    content-visibility:
        visible !important;
}


.story-page[
    data-service-cinematic="screenwriter-advocacy-v1"
]
.story-prose::before,
.story-page[
    data-service-cinematic="screenwriter-advocacy-v1"
]
.story-prose::after {
    display: none !important;
}


/* ---------------------------------------------------------
   KICKER
   --------------------------------------------------------- */

.service-advocate-kicker {
    position: relative;

    margin:
        0
        0
        24px !important;

    padding:
        0
        0
        17px
        28px !important;

    border: 0 !important;

    color:
        var(
            --green,
            #283618
        ) !important;

    font-size:
        28px !important;

    line-height:
        1.18 !important;
}


.service-advocate-kicker::before {
    content: "";

    position: absolute;

    left: 0;
    top: 2px;

    width: 3px;
    height: 34px;

    background:
        linear-gradient(
            180deg,
            var(
                --rust,
                #BC6C25
            ),
            var(
                --amber,
                #DDA15E
            )
        );
}


/* ---------------------------------------------------------
   01 → 05 PIPELINE
   --------------------------------------------------------- */

.service-advocate-process {
    display: grid;

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

    align-items: center;

    gap: 20px;

    width:
        min(
            100%,
            920px
        );

    margin:
        0
        auto
        42px;
}


.service-advocate-process > strong {
    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 30px;
    line-height: 1;
    font-weight: 850;

    letter-spacing: -.04em;
}


.service-advocate-process-track {
    position: relative;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    height: 42px;
}


.service-advocate-process-track::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 50%;

    height: 1px;

    transform:
        translateY(-50%);

    background:
        rgba(
            40,
            54,
            24,
            .16
        );
}


.service-advocate-process-track > i {
    position: absolute;

    z-index: 1;

    left: 0;
    top: 50%;

    width: 0;
    height: 3px;

    transform:
        translateY(-50%);

    background:
        linear-gradient(
            90deg,
            var(
                --rust,
                #BC6C25
            ),
            var(
                --amber,
                #DDA15E
            )
        );

    transition:
        width
        1.3s
        cubic-bezier(
            .22,
            .75,
            .18,
            1
        );
}


.service-advocate-process.is-active
.service-advocate-process-track > i {
    width: 100%;
}


.service-advocate-process-track > b {
    position: relative;

    z-index: 3;

    display: block;

    width: 17px;
    height: 17px;

    border:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    background: #fff;

    transform:
        scale(.65);

    transition:
        transform .35s ease,
        background-color .35s ease;
}


.service-advocate-process.is-active
.service-advocate-process-track > b {
    transform:
        scale(1);

    background:
        var(
            --paper,
            #FEFAE0
        );
}


.service-advocate-process-track > em {
    position: absolute;

    z-index: 4;

    left: 0;
    top: 50%;

    width: 13px;
    height: 13px;

    margin-top: -6px;

    border-radius: 50%;

    background:
        var(
            --amber,
            #DDA15E
        );

    box-shadow:
        0
        0
        18px
        rgba(
            221,
            161,
            94,
            .55
        );

    opacity: 0;
}


.service-advocate-process.is-active
.service-advocate-process-track > em {
    opacity: 1;

    animation:
        advocateProcessRunner
        5.2s
        ease-in-out
        infinite;
}


/* ---------------------------------------------------------
   STEPS
   --------------------------------------------------------- */

.service-advocate-step {
    position: relative;

    isolation: isolate;

    display: grid;

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

    gap: 30px;

    margin:
        0
        0
        22px;

    padding:
        35px
        34px
        35px
        30px;

    overflow: hidden;

    border:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .11
        );

    border-radius: 18px;

    background:
        rgba(
            255,
            255,
            255,
            .91
        );

    box-shadow:
        0
        10px
        30px
        rgba(
            40,
            54,
            24,
            .03
        );
}


.service-advocate-step::after {
    content: "";

    position: absolute;

    z-index: 5;

    left: 0;
    bottom: 0;

    width: 0;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(
                --rust,
                #BC6C25
            ),
            var(
                --amber,
                #DDA15E
            )
        );

    transition:
        width .65s ease;
}


.service-advocate-step.is-active::after {
    width: 100%;
}


.service-advocate-step-number {
    position: relative;

    z-index: 4;

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 72px;
    line-height: .86;
    font-weight: 850;

    letter-spacing: -.065em;

    font-variant-numeric:
        tabular-nums;
}


.service-advocate-step-body {
    position: relative;

    z-index: 4;

    max-width: 800px;
}


.service-advocate-step-body p {
    margin:
        0 !important;

    padding:
        0 !important;

    border: 0 !important;

    color:
        rgba(
            40,
            54,
            24,
            .81
        ) !important;

    font-size:
        18px !important;

    line-height:
        1.76 !important;

    opacity: 1 !important;
    visibility: visible !important;
}


.service-advocate-step-body a {
    position: relative;

    z-index: 6;

    color:
        var(
            --rust,
            #BC6C25
        );

    text-decoration-color:
        rgba(
            188,
            108,
            37,
            .42
        );

    text-decoration-thickness: 1px;

    text-underline-offset: .18em;
}


/* ---------------------------------------------------------
   MOTION BASE
   --------------------------------------------------------- */

.service-advocate-step-motion {
    position: absolute;

    z-index: 1;

    top: 24px;
    right: 22px;

    width: 250px;
    height: 180px;

    pointer-events: none;

    opacity: .075;
}


.service-advocate-step-motion i {
    position: absolute;

    display: block;
}


/* ---------------------------------------------------------
   01 — DOSSIER / CLIENT BRIEF
   --------------------------------------------------------- */

.service-advocate-step[
    data-effect="1"
]
.service-advocate-step-motion::before {
    content: "";

    position: absolute;

    left: 37px;
    top: 18px;

    width: 160px;
    height: 140px;

    border:
        1px
        solid
        rgba(
            188,
            108,
            37,
            .56
        );

    transform:
        rotate(-3deg);
}


.service-advocate-step[
    data-effect="1"
]
.service-advocate-step-motion i:nth-child(1),
.service-advocate-step[
    data-effect="1"
]
.service-advocate-step-motion i:nth-child(2),
.service-advocate-step[
    data-effect="1"
]
.service-advocate-step-motion i:nth-child(3),
.service-advocate-step[
    data-effect="1"
]
.service-advocate-step-motion i:nth-child(4) {
    left: 61px;

    height: 2px;

    background:
        rgba(
            40,
            54,
            24,
            .52
        );
}


.service-advocate-step[
    data-effect="1"
]
.service-advocate-step-motion i:nth-child(1) {
    top: 53px;
    width: 110px;
}


.service-advocate-step[
    data-effect="1"
]
.service-advocate-step-motion i:nth-child(2) {
    top: 79px;
    width: 129px;
}


.service-advocate-step[
    data-effect="1"
]
.service-advocate-step-motion i:nth-child(3) {
    top: 105px;
    width: 88px;
}


.service-advocate-step[
    data-effect="1"
]
.service-advocate-step-motion i:nth-child(4) {
    top: 131px;
    width: 118px;
}


.service-advocate-step[
    data-effect="1"
]
.service-advocate-step-motion i:nth-child(5) {
    right: 28px;
    top: 15px;

    width: 41px;
    height: 41px;

    border:
        2px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    animation:
        advocatePulse
        3s
        ease-in-out
        infinite;
}


.service-advocate-step[
    data-effect="1"
]
.service-advocate-step-motion i:nth-child(6) {
    display: none;
}


/* ---------------------------------------------------------
   02 — STAKEHOLDER NETWORK
   --------------------------------------------------------- */

.service-advocate-step[
    data-effect="2"
]
.service-advocate-step-motion::before,
.service-advocate-step[
    data-effect="2"
]
.service-advocate-step-motion::after {
    content: "";

    position: absolute;

    height: 2px;

    background:
        rgba(
            188,
            108,
            37,
            .50
        );

    transform-origin: left center;
}


.service-advocate-step[
    data-effect="2"
]
.service-advocate-step-motion::before {
    left: 58px;
    top: 89px;

    width: 130px;

    transform:
        rotate(-23deg);
}


.service-advocate-step[
    data-effect="2"
]
.service-advocate-step-motion::after {
    left: 58px;
    top: 89px;

    width: 130px;

    transform:
        rotate(23deg);
}


.service-advocate-step[
    data-effect="2"
]
.service-advocate-step-motion i {
    width: 23px;
    height: 23px;

    border:
        2px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    background: #fff;

    animation:
        advocateNetworkNode
        2.8s
        ease-in-out
        infinite;
}


.service-advocate-step[
    data-effect="2"
]
.service-advocate-step-motion i:nth-child(1) {
    left: 45px;
    top: 78px;
}


.service-advocate-step[
    data-effect="2"
]
.service-advocate-step-motion i:nth-child(2) {
    right: 38px;
    top: 37px;

    animation-delay: .25s;
}


.service-advocate-step[
    data-effect="2"
]
.service-advocate-step-motion i:nth-child(3) {
    right: 38px;
    bottom: 33px;

    animation-delay: .50s;
}


.service-advocate-step[
    data-effect="2"
]
.service-advocate-step-motion i:nth-child(4) {
    left: 104px;
    top: 20px;

    animation-delay: .75s;
}


.service-advocate-step[
    data-effect="2"
]
.service-advocate-step-motion i:nth-child(5) {
    left: 103px;
    bottom: 17px;

    animation-delay: 1s;
}


.service-advocate-step[
    data-effect="2"
]
.service-advocate-step-motion i:nth-child(6) {
    display: none;
}


/* ---------------------------------------------------------
   03 — REPRESENTATION / HANDOFF
   --------------------------------------------------------- */

.service-advocate-step[
    data-effect="3"
]
.service-advocate-step-motion::before,
.service-advocate-step[
    data-effect="3"
]
.service-advocate-step-motion::after {
    content: "";

    position: absolute;

    top: 29px;

    width: 82px;
    height: 120px;

    border:
        1px
        solid
        rgba(
            188,
            108,
            37,
            .52
        );

    background:
        repeating-linear-gradient(
            180deg,
            transparent
                0
                20px,
            rgba(
                40,
                54,
                24,
                .17
            )
                20px
                22px
        );
}


.service-advocate-step[
    data-effect="3"
]
.service-advocate-step-motion::before {
    left: 13px;

    transform:
        rotate(-4deg);
}


.service-advocate-step[
    data-effect="3"
]
.service-advocate-step-motion::after {
    right: 13px;

    transform:
        rotate(4deg);
}


.service-advocate-step[
    data-effect="3"
]
.service-advocate-step-motion i:nth-child(1) {
    left: 100px;
    top: 87px;

    width: 48px;
    height: 3px;

    background:
        var(
            --rust,
            #BC6C25
        );

    animation:
        advocateHandoff
        3.1s
        ease-in-out
        infinite;
}


.service-advocate-step[
    data-effect="3"
]
.service-advocate-step-motion i:nth-child(2) {
    left: 137px;
    top: 79px;

    width: 15px;
    height: 15px;

    border:
        solid
        var(
            --rust,
            #BC6C25
        );

    border-width:
        3px
        3px
        0
        0;

    transform:
        rotate(45deg);
}


.service-advocate-step[
    data-effect="3"
]
.service-advocate-step-motion i:nth-child(3),
.service-advocate-step[
    data-effect="3"
]
.service-advocate-step-motion i:nth-child(4),
.service-advocate-step[
    data-effect="3"
]
.service-advocate-step-motion i:nth-child(5),
.service-advocate-step[
    data-effect="3"
]
.service-advocate-step-motion i:nth-child(6) {
    display: none;
}


/* ---------------------------------------------------------
   04 — A → Z EXPERT AUDIT
   --------------------------------------------------------- */

.service-advocate-step[
    data-effect="4"
]
.service-advocate-step-motion {
    background:
        linear-gradient(
            rgba(
                40,
                54,
                24,
                .18
            )
            1px,
            transparent
            1px
        ),
        linear-gradient(
            90deg,
            rgba(
                40,
                54,
                24,
                .18
            )
            1px,
            transparent
            1px
        );

    background-size:
        34px
        34px;
}


.service-advocate-step[
    data-effect="4"
]
.service-advocate-step-motion::before {
    content: "A";

    position: absolute;

    left: 12px;
    top: 9px;

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 29px;
    line-height: 1;
    font-weight: 850;
}


.service-advocate-step[
    data-effect="4"
]
.service-advocate-step-motion::after {
    content: "Z";

    position: absolute;

    right: 12px;
    bottom: 8px;

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 29px;
    line-height: 1;
    font-weight: 850;
}


.service-advocate-step[
    data-effect="4"
]
.service-advocate-step-motion i:nth-child(1) {
    left: 0;
    right: 0;
    top: 0;

    height: 3px;

    background:
        var(
            --rust,
            #BC6C25
        );

    animation:
        advocateAuditScan
        3.2s
        ease-in-out
        infinite
        alternate;
}


.service-advocate-step[
    data-effect="4"
]
.service-advocate-step-motion i:nth-child(2),
.service-advocate-step[
    data-effect="4"
]
.service-advocate-step-motion i:nth-child(3),
.service-advocate-step[
    data-effect="4"
]
.service-advocate-step-motion i:nth-child(4),
.service-advocate-step[
    data-effect="4"
]
.service-advocate-step-motion i:nth-child(5) {
    width: 10px;
    height: 10px;

    border-radius: 50%;

    background:
        var(
            --rust,
            #BC6C25
        );
}


.service-advocate-step[
    data-effect="4"
]
.service-advocate-step-motion i:nth-child(2) {
    left: 59px;
    top: 43px;
}


.service-advocate-step[
    data-effect="4"
]
.service-advocate-step-motion i:nth-child(3) {
    left: 126px;
    top: 82px;
}


.service-advocate-step[
    data-effect="4"
]
.service-advocate-step-motion i:nth-child(4) {
    right: 32px;
    top: 51px;
}


.service-advocate-step[
    data-effect="4"
]
.service-advocate-step-motion i:nth-child(5) {
    left: 83px;
    bottom: 23px;
}


.service-advocate-step[
    data-effect="4"
]
.service-advocate-step-motion i:nth-child(6) {
    display: none;
}


/* ---------------------------------------------------------
   05 — PRODUCTION PROTECTION / APPROVAL
   --------------------------------------------------------- */

.service-advocate-step[
    data-effect="5"
]
.service-advocate-step-motion::before {
    content: "";

    position: absolute;

    left: 63px;
    top: 27px;

    width: 120px;
    height: 132px;

    border:
        2px
        solid
        rgba(
            188,
            108,
            37,
            .48
        );

    border-radius:
        52%
        52%
        48%
        48%
        /
        20%
        20%
        70%
        70%;

    animation:
        advocateShield
        3.2s
        ease-in-out
        infinite;
}


.service-advocate-step[
    data-effect="5"
]
.service-advocate-step-motion i:nth-child(1) {
    left: 93px;
    top: 78px;

    width: 58px;
    height: 31px;

    border-left:
        5px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-bottom:
        5px
        solid
        var(
            --rust,
            #BC6C25
        );

    transform:
        rotate(-45deg);
}


.service-advocate-step[
    data-effect="5"
]
.service-advocate-step-motion i:nth-child(2) {
    left: 38px;
    top: 22px;

    width: 40px;
    height: 3px;

    background:
        var(
            --rust,
            #BC6C25
        );
}


.service-advocate-step[
    data-effect="5"
]
.service-advocate-step-motion i:nth-child(3) {
    right: 33px;
    top: 22px;

    width: 40px;
    height: 3px;

    background:
        var(
            --rust,
            #BC6C25
        );
}


.service-advocate-step[
    data-effect="5"
]
.service-advocate-step-motion i:nth-child(4),
.service-advocate-step[
    data-effect="5"
]
.service-advocate-step-motion i:nth-child(5),
.service-advocate-step[
    data-effect="5"
]
.service-advocate-step-motion i:nth-child(6) {
    display: none;
}


/* ---------------------------------------------------------
   HERO — DOSSIER / AUDIT / APPROVAL
   --------------------------------------------------------- */

.story-page[
    data-service-cinematic="screenwriter-advocacy-v1"
]
.story-art {
    position: relative;

    overflow: hidden;
}


.story-page[
    data-service-cinematic="screenwriter-advocacy-v1"
]
.story-art-icon {
    position: relative;

    z-index: 6;
}


.service-advocate-hero {
    position: absolute;

    z-index: 2;

    inset: 8%;

    pointer-events: none;

    opacity: .54;
}


.advocate-hero-file {
    position: absolute;

    width: 54%;
    height: 69%;

    border:
        1px
        solid
        rgba(
            254,
            250,
            224,
            .30
        );
}


.advocate-hero-file.file-back {
    left: 18%;
    top: 13%;

    transform:
        rotate(-6deg);
}


.advocate-hero-file.file-front {
    left: 28%;
    top: 17%;

    transform:
        rotate(3deg);
}


.advocate-hero-line {
    position: absolute;

    z-index: 4;

    left: 38%;

    height: 2px;

    background:
        rgba(
            254,
            250,
            224,
            .58
        );
}


.advocate-hero-line.line-1 {
    top: 36%;
    width: 35%;
}


.advocate-hero-line.line-2 {
    top: 48%;
    width: 29%;
}


.advocate-hero-line.line-3 {
    top: 60%;
    width: 38%;
}


.advocate-hero-scan {
    position: absolute;

    z-index: 5;

    left: 29%;
    right: 17%;
    top: 20%;

    height: 3px;

    background:
        rgba(
            254,
            250,
            224,
            .82
        );

    animation:
        advocateHeroScan
        3.2s
        ease-in-out
        infinite
        alternate;
}


.advocate-hero-seal {
    position: absolute;

    z-index: 6;

    right: 15%;
    bottom: 12%;

    width: 62px;
    height: 62px;

    border:
        3px
        solid
        rgba(
            254,
            250,
            224,
            .68
        );

    border-radius: 50%;

    animation:
        advocateHeroSeal
        3s
        ease-in-out
        infinite;
}


.advocate-hero-check {
    position: absolute;

    z-index: 7;

    right: 23%;
    bottom: 23%;

    width: 35px;
    height: 18px;

    border-left:
        4px
        solid
        rgba(
            254,
            250,
            224,
            .80
        );

    border-bottom:
        4px
        solid
        rgba(
            254,
            250,
            224,
            .80
        );

    transform:
        rotate(-45deg);
}


.advocate-hero-start,
.advocate-hero-finish {
    position: absolute;

    z-index: 8;

    color:
        rgba(
            254,
            250,
            224,
            .74
        );

    font-size: 31px;
    line-height: 1;
    font-weight: 850;
}


.advocate-hero-start {
    left: 8%;
    bottom: 6%;
}


.advocate-hero-finish {
    right: 7%;
    top: 5%;
}


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

@media (
    max-width: 1024px
) {

    .service-advocate-step {
        grid-template-columns:
            80px
            minmax(
                0,
                1fr
            );
    }


    .service-advocate-step-number {
        font-size: 62px;
    }


    .service-advocate-step-motion {
        right: 7px;

        transform:
            scale(.80);

        transform-origin:
            top right;

        opacity: .05;
    }
}


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

@media (
    max-width: 760px
) {

    .story-page[
        data-service-cinematic="screenwriter-advocacy-v1"
    ]
    .story-content {
        padding:
            31px
            0
            56px;
    }


    .story-page[
        data-service-cinematic="screenwriter-advocacy-v1"
    ]
    .story-prose {
        width:
            calc(
                100% - 40px
            ) !important;
    }


    .service-advocate-kicker {
        margin-bottom:
            19px !important;

        padding:
            0
            0
            14px
            17px !important;

        font-size:
            23px !important;
    }


    .service-advocate-kicker::before {
        width: 2px;
        height: 28px;
    }


    .service-advocate-process {
        gap: 11px;

        margin-bottom:
            28px;
    }


    .service-advocate-process > strong {
        font-size: 21px;
    }


    .service-advocate-process-track {
        height: 30px;
    }


    .service-advocate-process-track > b {
        width: 11px;
        height: 11px;

        border-width: 2px;
    }


    .service-advocate-process-track > em {
        width: 9px;
        height: 9px;

        margin-top: -4px;
    }


    .service-advocate-step {
        display: block;

        margin-bottom:
            17px;

        padding:
            24px
            20px
            25px;

        border-radius:
            16px;
    }


    .service-advocate-step-number {
        display: block;

        margin-bottom:
            20px;

        font-size: 50px;
    }


    .service-advocate-step-body {
        max-width: 100%;
    }


    .service-advocate-step-body p {
        font-size:
            17px !important;

        line-height:
            1.70 !important;
    }


    /*
     * Motion remains background-only.
     * It does not create a left/right layout column.
     */

    .service-advocate-step-motion {
        top: 10px;
        right: -42px;

        width: 145px;
        height: 108px;

        transform:
            scale(.59);

        transform-origin:
            top right;

        opacity: .040;
    }


    .service-advocate-hero {
        inset:
            15%
            8%;

        opacity: .40;
    }


    .advocate-hero-start,
    .advocate-hero-finish {
        font-size: 24px;
    }


    .advocate-hero-seal {
        width: 47px;
        height: 47px;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (
    prefers-reduced-motion: reduce
) {

    .service-advocate-process-track > i,
    .service-advocate-process-track > b,
    .service-advocate-process-track > em,

    .service-advocate-step::after,

    .service-advocate-step-motion i,

    .advocate-hero-scan,
    .advocate-hero-seal {
        animation:
            none !important;

        transition:
            none !important;
    }


    .service-advocate-process-track > i {
        width: 100%;
    }


    .service-advocate-process-track > b {
        transform:
            scale(1);
    }


    .service-advocate-process-track > em {
        display: none;
    }


    .service-advocate-step::after {
        width: 100%;
    }
}


/* ---------------------------------------------------------
   KEYFRAMES
   --------------------------------------------------------- */

@keyframes advocateProcessRunner {

    0% {
        left: 0;
    }

    25% {
        left: 25%;
    }

    50% {
        left: 50%;
    }

    75% {
        left: 75%;
    }

    100% {
        left:
            calc(
                100% - 13px
            );
    }
}


@keyframes advocatePulse {

    0%,
    100% {
        transform:
            scale(.80);

        opacity: .32;
    }

    50% {
        transform:
            scale(1.10);

        opacity: 1;
    }
}


@keyframes advocateNetworkNode {

    0%,
    100% {
        transform:
            scale(.72);

        opacity: .34;
    }

    50% {
        transform:
            scale(1.18);

        opacity: 1;
    }
}


@keyframes advocateHandoff {

    0%,
    15% {
        scale:
            0
            1;

        opacity: .16;
    }

    48%,
    82% {
        scale:
            1
            1;

        opacity: 1;
    }

    100% {
        opacity: .34;
    }
}


@keyframes advocateAuditScan {

    from {
        top: 3px;
    }

    to {
        top:
            calc(
                100% - 6px
            );
    }
}


@keyframes advocateShield {

    0%,
    100% {
        transform:
            scale(.82);

        opacity: .36;
    }

    50% {
        transform:
            scale(1.06);

        opacity: 1;
    }
}


@keyframes advocateHeroScan {

    from {
        top: 20%;
    }

    to {
        top: 75%;
    }
}


@keyframes advocateHeroSeal {

    0%,
    100% {
        transform:
            scale(.78)
            rotate(-5deg);

        opacity: .34;
    }

    50% {
        transform:
            scale(1.08)
            rotate(3deg);

        opacity: 1;
    }
}


/* =========================================================
   END SCREENWRITER ADVOCACY CINEMATIC DESIGN V1
   ========================================================= */



/* =========================================================
   FILM ANALYSIS SERVICE CINEMATIC DESIGN V1
   ========================================================= */


/* ---------------------------------------------------------
   PAGE
   --------------------------------------------------------- */

html[
    data-service-detail="film-analysis-v1"
],
html[
    data-service-detail="film-analysis-v1"
] body {
    overflow-x: clip;
}


.story-page[
    data-service-cinematic="film-analysis-v1"
]
.story-content {
    position: relative;

    overflow: hidden;

    min-height: auto !important;

    padding:
        46px
        0
        80px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            rgba(
                254,
                250,
                224,
                .27
            ) 50%,
            #ffffff 100%
        ) !important;
}


.story-page[
    data-service-cinematic="film-analysis-v1"
]
.story-prose {
    width:
        min(
            calc(
                100% - 48px
            ),
            1120px
        ) !important;

    max-width:
        1120px !important;

    margin:
        0
        auto !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    opacity: 1 !important;
    visibility: visible !important;

    contain: none !important;

    content-visibility:
        visible !important;
}


.story-page[
    data-service-cinematic="film-analysis-v1"
]
.story-prose::before,
.story-page[
    data-service-cinematic="film-analysis-v1"
]
.story-prose::after {
    display: none !important;
}


/* ---------------------------------------------------------
   KICKER
   --------------------------------------------------------- */

.service-analysis-kicker {
    position: relative;

    margin:
        0
        0
        24px !important;

    padding:
        0
        0
        17px
        28px !important;

    border: 0 !important;

    color:
        var(
            --green,
            #283618
        ) !important;

    font-size:
        28px !important;

    line-height:
        1.18 !important;
}


.service-analysis-kicker::before {
    content: "";

    position: absolute;

    left: 0;
    top: 2px;

    width: 3px;
    height: 34px;

    background:
        linear-gradient(
            180deg,
            var(
                --rust,
                #BC6C25
            ),
            var(
                --amber,
                #DDA15E
            )
        );
}


/* ---------------------------------------------------------
   PROCESS 01 → 04
   --------------------------------------------------------- */

.service-analysis-process {
    display: grid;

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

    align-items: center;

    gap: 20px;

    width:
        min(
            100%,
            920px
        );

    margin:
        0
        auto
        42px;
}


.service-analysis-process > strong {
    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 30px;
    line-height: 1;
    font-weight: 850;

    letter-spacing: -.04em;
}


.service-analysis-process-track {
    position: relative;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    height: 42px;
}


.service-analysis-process-track::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 50%;

    height: 1px;

    transform:
        translateY(-50%);

    background:
        rgba(
            40,
            54,
            24,
            .16
        );
}


.service-analysis-process-track > i {
    position: absolute;

    z-index: 1;

    left: 0;
    top: 50%;

    width: 0;
    height: 3px;

    transform:
        translateY(-50%);

    background:
        linear-gradient(
            90deg,
            var(
                --rust,
                #BC6C25
            ),
            var(
                --amber,
                #DDA15E
            )
        );

    transition:
        width
        1.25s
        cubic-bezier(
            .22,
            .75,
            .18,
            1
        );
}


.service-analysis-process.is-active
.service-analysis-process-track > i {
    width: 100%;
}


.service-analysis-process-track > b {
    position: relative;

    z-index: 3;

    display: block;

    width: 17px;
    height: 17px;

    border:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    background: #fff;

    transform:
        scale(.65);

    transition:
        transform .35s ease,
        background-color .35s ease;
}


.service-analysis-process.is-active
.service-analysis-process-track > b {
    transform:
        scale(1);

    background:
        var(
            --paper,
            #FEFAE0
        );
}


.service-analysis-process-track > em {
    position: absolute;

    z-index: 4;

    left: 0;
    top: 50%;

    width: 13px;
    height: 13px;

    margin-top: -6px;

    border-radius: 50%;

    background:
        var(
            --amber,
            #DDA15E
        );

    box-shadow:
        0
        0
        18px
        rgba(
            221,
            161,
            94,
            .54
        );

    opacity: 0;
}


.service-analysis-process.is-active
.service-analysis-process-track > em {
    opacity: 1;

    animation:
        filmAnalysisProcessRunner
        4.8s
        ease-in-out
        infinite;
}


/* ---------------------------------------------------------
   STEP
   --------------------------------------------------------- */

.service-analysis-step {
    position: relative;

    isolation: isolate;

    display: grid;

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

    gap: 30px;

    margin:
        0
        0
        22px;

    padding:
        35px
        34px
        35px
        30px;

    overflow: hidden;

    border:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .11
        );

    border-radius: 18px;

    background:
        rgba(
            255,
            255,
            255,
            .91
        );

    box-shadow:
        0
        10px
        30px
        rgba(
            40,
            54,
            24,
            .03
        );
}


.service-analysis-step::after {
    content: "";

    position: absolute;

    z-index: 5;

    left: 0;
    bottom: 0;

    width: 0;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(
                --rust,
                #BC6C25
            ),
            var(
                --amber,
                #DDA15E
            )
        );

    transition:
        width .65s ease;
}


.service-analysis-step.is-active::after {
    width: 100%;
}


.service-analysis-step-number {
    position: relative;

    z-index: 4;

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 72px;
    line-height: .86;
    font-weight: 850;

    letter-spacing: -.065em;

    font-variant-numeric:
        tabular-nums;
}


.service-analysis-step-body {
    position: relative;

    z-index: 4;

    max-width: 800px;
}


.service-analysis-step-body p {
    margin:
        0
        0
        18px !important;

    padding:
        0 !important;

    border: 0 !important;

    color:
        rgba(
            40,
            54,
            24,
            .81
        ) !important;

    font-size:
        18px !important;

    line-height:
        1.76 !important;

    opacity: 1 !important;
    visibility: visible !important;
}


.service-analysis-step-body p:last-child {
    margin-bottom:
        0 !important;
}


/* ---------------------------------------------------------
   10-POINT ANALYSIS MATRIX
   --------------------------------------------------------- */

.service-analysis-matrix {
    counter-reset:
        film-analysis;

    display: grid !important;

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

    gap:
        10px
        12px;

    margin:
        4px
        0
        20px !important;

    padding:
        0 !important;

    list-style:
        none !important;
}


.service-analysis-matrix li {
    counter-increment:
        film-analysis;

    position: relative;

    min-height: 61px;

    margin: 0 !important;

    padding:
        17px
        16px
        16px
        58px !important;

    overflow: hidden;

    border:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .10
        );

    border-radius:
        10px;

    background:
        rgba(
            254,
            250,
            224,
            .44
        );

    color:
        var(
            --green,
            #283618
        );

    font-size:
        16px;

    line-height:
        1.45;

    opacity: 1 !important;
    visibility: visible !important;
}


.service-analysis-matrix li::before {
    content:
        counter(
            film-analysis,
            decimal-leading-zero
        );

    position: absolute;

    left: 15px;
    top: 18px;

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size:
        17px;

    line-height: 1;

    font-weight: 850;
}


.service-analysis-matrix li::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background:
        var(
            --amber,
            #DDA15E
        );

    transition:
        width .55s ease;
}


.service-analysis-step.is-active
.service-analysis-matrix li::after {
    width: 100%;
}


.service-analysis-matrix li:nth-child(2)::after {
    transition-delay: .05s;
}


.service-analysis-matrix li:nth-child(3)::after {
    transition-delay: .10s;
}


.service-analysis-matrix li:nth-child(4)::after {
    transition-delay: .15s;
}


.service-analysis-matrix li:nth-child(5)::after {
    transition-delay: .20s;
}


.service-analysis-matrix li:nth-child(6)::after {
    transition-delay: .25s;
}


.service-analysis-matrix li:nth-child(7)::after {
    transition-delay: .30s;
}


.service-analysis-matrix li:nth-child(8)::after {
    transition-delay: .35s;
}


.service-analysis-matrix li:nth-child(9)::after {
    transition-delay: .40s;
}


.service-analysis-matrix li:nth-child(10)::after {
    transition-delay: .45s;
}


.service-analysis-more {
    color:
        rgba(
            40,
            54,
            24,
            .63
        ) !important;

    font-style: italic;
}


/* ---------------------------------------------------------
   MOTION BASE
   --------------------------------------------------------- */

.service-analysis-step-motion {
    position: absolute;

    z-index: 1;

    top: 24px;
    right: 22px;

    width: 250px;
    height: 180px;

    pointer-events: none;

    opacity: .075;
}


.service-analysis-step-motion i {
    position: absolute;

    display: block;
}


/* ---------------------------------------------------------
   01 — FILM FRAMES
   --------------------------------------------------------- */

.service-analysis-step[
    data-effect="1"
]
.service-analysis-step-motion {
    border-top:
        8px
        solid
        rgba(
            188,
            108,
            37,
            .34
        );

    border-bottom:
        8px
        solid
        rgba(
            188,
            108,
            37,
            .34
        );

    background:
        repeating-linear-gradient(
            90deg,
            transparent
                0
                48px,
            rgba(
                188,
                108,
                37,
                .35
            )
                48px
                50px
        );
}


.service-analysis-step[
    data-effect="1"
]
.service-analysis-step-motion::before,
.service-analysis-step[
    data-effect="1"
]
.service-analysis-step-motion::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    height: 8px;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(
                188,
                108,
                37,
                .58
            )
                0
                12px,
            transparent
                12px
                24px
        );
}


.service-analysis-step[
    data-effect="1"
]
.service-analysis-step-motion::before {
    top: -8px;
}


.service-analysis-step[
    data-effect="1"
]
.service-analysis-step-motion::after {
    bottom: -8px;
}


.service-analysis-step[
    data-effect="1"
]
.service-analysis-step-motion i:nth-child(1),
.service-analysis-step[
    data-effect="1"
]
.service-analysis-step-motion i:nth-child(2),
.service-analysis-step[
    data-effect="1"
]
.service-analysis-step-motion i:nth-child(3) {
    top: 34px;

    width: 55px;
    height: 105px;

    border:
        1px
        solid
        var(
            --rust,
            #BC6C25
        );

    animation:
        filmAnalysisFramePulse
        3.1s
        ease-in-out
        infinite;
}


.service-analysis-step[
    data-effect="1"
]
.service-analysis-step-motion i:nth-child(1) {
    left: 17px;
}


.service-analysis-step[
    data-effect="1"
]
.service-analysis-step-motion i:nth-child(2) {
    left: 97px;

    animation-delay: .30s;
}


.service-analysis-step[
    data-effect="1"
]
.service-analysis-step-motion i:nth-child(3) {
    right: 17px;

    animation-delay: .60s;
}


.service-analysis-step[
    data-effect="1"
]
.service-analysis-step-motion i:nth-child(4),
.service-analysis-step[
    data-effect="1"
]
.service-analysis-step-motion i:nth-child(5),
.service-analysis-step[
    data-effect="1"
]
.service-analysis-step-motion i:nth-child(6) {
    display: none;
}


/* ---------------------------------------------------------
   02 — SCENE BREAKDOWN / LENS
   --------------------------------------------------------- */

.service-analysis-step[
    data-effect="2"
]
.service-analysis-step-motion i:nth-child(1) {
    left: 68px;
    top: 34px;

    width: 112px;
    height: 112px;

    border:
        2px
        solid
        rgba(
            188,
            108,
            37,
            .58
        );

    border-radius: 50%;

    animation:
        filmAnalysisLens
        3.2s
        ease-in-out
        infinite;
}


.service-analysis-step[
    data-effect="2"
]
.service-analysis-step-motion i:nth-child(2) {
    left: 90px;
    top: 56px;

    width: 68px;
    height: 68px;

    border:
        2px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;
}


.service-analysis-step[
    data-effect="2"
]
.service-analysis-step-motion i:nth-child(3) {
    left: 123px;
    top: 21px;

    width: 2px;
    height: 137px;

    background:
        rgba(
            188,
            108,
            37,
            .54
        );
}


.service-analysis-step[
    data-effect="2"
]
.service-analysis-step-motion i:nth-child(4) {
    left: 55px;
    top: 89px;

    width: 139px;
    height: 2px;

    background:
        rgba(
            188,
            108,
            37,
            .54
        );
}


.service-analysis-step[
    data-effect="2"
]
.service-analysis-step-motion i:nth-child(5) {
    right: 15px;
    bottom: 20px;

    width: 68px;
    height: 3px;

    transform:
        rotate(44deg);

    transform-origin:
        left center;

    background:
        var(
            --rust,
            #BC6C25
        );
}


.service-analysis-step[
    data-effect="2"
]
.service-analysis-step-motion i:nth-child(6) {
    display: none;
}


/* ---------------------------------------------------------
   03 — STRUCTURE MATRIX / ANALYSIS SCANNER
   --------------------------------------------------------- */

.service-analysis-step[
    data-effect="3"
]
.service-analysis-step-motion {
    background:
        linear-gradient(
            rgba(
                40,
                54,
                24,
                .18
            )
            1px,
            transparent
            1px
        ),
        linear-gradient(
            90deg,
            rgba(
                40,
                54,
                24,
                .18
            )
            1px,
            transparent
            1px
        );

    background-size:
        36px
        36px;
}


.service-analysis-step[
    data-effect="3"
]
.service-analysis-step-motion i:nth-child(1) {
    left: 0;
    right: 0;
    top: 2px;

    height: 3px;

    background:
        var(
            --rust,
            #BC6C25
        );

    box-shadow:
        0
        0
        14px
        rgba(
            221,
            161,
            94,
            .48
        );

    animation:
        filmAnalysisScan
        2.9s
        ease-in-out
        infinite
        alternate;
}


.service-analysis-step[
    data-effect="3"
]
.service-analysis-step-motion i:nth-child(2),
.service-analysis-step[
    data-effect="3"
]
.service-analysis-step-motion i:nth-child(3),
.service-analysis-step[
    data-effect="3"
]
.service-analysis-step-motion i:nth-child(4),
.service-analysis-step[
    data-effect="3"
]
.service-analysis-step-motion i:nth-child(5),
.service-analysis-step[
    data-effect="3"
]
.service-analysis-step-motion i:nth-child(6) {
    width: 11px;
    height: 11px;

    border-radius: 50%;

    background:
        var(
            --rust,
            #BC6C25
        );

    animation:
        filmAnalysisDataPoint
        2.6s
        ease-in-out
        infinite;
}


.service-analysis-step[
    data-effect="3"
]
.service-analysis-step-motion i:nth-child(2) {
    left: 29px;
    top: 39px;
}


.service-analysis-step[
    data-effect="3"
]
.service-analysis-step-motion i:nth-child(3) {
    left: 102px;
    top: 111px;

    animation-delay: .22s;
}


.service-analysis-step[
    data-effect="3"
]
.service-analysis-step-motion i:nth-child(4) {
    left: 143px;
    top: 63px;

    animation-delay: .44s;
}


.service-analysis-step[
    data-effect="3"
]
.service-analysis-step-motion i:nth-child(5) {
    right: 27px;
    top: 91px;

    animation-delay: .66s;
}


.service-analysis-step[
    data-effect="3"
]
.service-analysis-step-motion i:nth-child(6) {
    right: 58px;
    bottom: 20px;

    animation-delay: .88s;
}


/* ---------------------------------------------------------
   04 — DIAGNOSTIC REPORT
   --------------------------------------------------------- */

.service-analysis-step[
    data-effect="4"
]
.service-analysis-step-motion::before {
    content: "";

    position: absolute;

    left: 43px;
    top: 14px;

    width: 159px;
    height: 151px;

    border:
        1px
        solid
        rgba(
            188,
            108,
            37,
            .48
        );

    transform:
        rotate(2deg);

    background:
        repeating-linear-gradient(
            180deg,
            transparent
                0
                24px,
            rgba(
                40,
                54,
                24,
                .16
            )
                24px
                26px
        );
}


.service-analysis-step[
    data-effect="4"
]
.service-analysis-step-motion i:nth-child(1) {
    left: 62px;
    top: 42px;

    width: 81px;
    height: 3px;

    background:
        var(
            --rust,
            #BC6C25
        );
}


.service-analysis-step[
    data-effect="4"
]
.service-analysis-step-motion i:nth-child(2) {
    left: 62px;
    top: 69px;

    width: 117px;
    height: 3px;

    background:
        rgba(
            40,
            54,
            24,
            .40
        );
}


.service-analysis-step[
    data-effect="4"
]
.service-analysis-step-motion i:nth-child(3) {
    left: 62px;
    top: 96px;

    width: 96px;
    height: 3px;

    background:
        rgba(
            40,
            54,
            24,
            .40
        );
}


.service-analysis-step[
    data-effect="4"
]
.service-analysis-step-motion i:nth-child(4) {
    right: 27px;
    bottom: 13px;

    width: 56px;
    height: 56px;

    border:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    animation:
        filmAnalysisApproval
        3s
        ease-in-out
        infinite;
}


.service-analysis-step[
    data-effect="4"
]
.service-analysis-step-motion i:nth-child(5) {
    right: 39px;
    bottom: 38px;

    width: 31px;
    height: 16px;

    border-left:
        4px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-bottom:
        4px
        solid
        var(
            --rust,
            #BC6C25
        );

    transform:
        rotate(-45deg);
}


.service-analysis-step[
    data-effect="4"
]
.service-analysis-step-motion i:nth-child(6) {
    display: none;
}


/* ---------------------------------------------------------
   HERO — FILM FRAME ANALYSIS
   --------------------------------------------------------- */

.story-page[
    data-service-cinematic="film-analysis-v1"
]
.story-art {
    position: relative;

    overflow: hidden;
}


.story-page[
    data-service-cinematic="film-analysis-v1"
]
.story-art-icon {
    position: relative;

    z-index: 7;
}


.service-analysis-hero {
    position: absolute;

    z-index: 2;

    inset: 8%;

    pointer-events: none;

    opacity: .55;
}


.analysis-hero-frame {
    position: absolute;

    top: 25%;

    width: 29%;
    height: 50%;

    border:
        1px
        solid
        rgba(
            254,
            250,
            224,
            .40
        );

    animation:
        filmAnalysisHeroFrame
        3.2s
        ease-in-out
        infinite;
}


.analysis-hero-frame.frame-1 {
    left: 5%;
}


.analysis-hero-frame.frame-2 {
    left: 35%;

    animation-delay: .25s;
}


.analysis-hero-frame.frame-3 {
    right: 5%;

    animation-delay: .50s;
}


.analysis-hero-film-top,
.analysis-hero-film-bottom {
    position: absolute;

    left: 3%;
    right: 3%;

    height: 11px;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(
                254,
                250,
                224,
                .60
            )
                0
                13px,
            transparent
                13px
                25px
        );
}


.analysis-hero-film-top {
    top: 17%;
}


.analysis-hero-film-bottom {
    bottom: 17%;
}


.analysis-hero-cross {
    position: absolute;

    z-index: 5;

    background:
        rgba(
            254,
            250,
            224,
            .55
        );
}


.analysis-hero-cross.cross-x {
    left: 12%;
    right: 12%;
    top: 50%;

    height: 1px;
}


.analysis-hero-cross.cross-y {
    top: 14%;
    bottom: 14%;
    left: 50%;

    width: 1px;
}


.analysis-hero-scan {
    position: absolute;

    z-index: 6;

    left: 7%;
    right: 7%;
    top: 23%;

    height: 3px;

    background:
        rgba(
            254,
            250,
            224,
            .82
        );

    box-shadow:
        0
        0
        16px
        rgba(
            254,
            250,
            224,
            .30
        );

    animation:
        filmAnalysisHeroScan
        2.8s
        ease-in-out
        infinite
        alternate;
}


.analysis-hero-focus {
    position: absolute;

    z-index: 7;

    left: 39%;
    top: 34%;

    width: 22%;
    aspect-ratio: 1;

    border:
        2px
        solid
        rgba(
            254,
            250,
            224,
            .70
        );

    border-radius: 50%;

    animation:
        filmAnalysisHeroFocus
        3s
        ease-in-out
        infinite;
}


.analysis-hero-start,
.analysis-hero-finish {
    position: absolute;

    z-index: 8;

    color:
        rgba(
            254,
            250,
            224,
            .75
        );

    font-size: 29px;
    line-height: 1;
    font-weight: 850;
}


.analysis-hero-start {
    left: 6%;
    bottom: 3%;
}


.analysis-hero-finish {
    right: 5%;
    top: 4%;
}


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

@media (
    max-width: 1024px
) {

    .service-analysis-step {
        grid-template-columns:
            80px
            minmax(
                0,
                1fr
            );
    }


    .service-analysis-step-number {
        font-size: 62px;
    }


    .service-analysis-step-motion {
        right: 7px;

        transform:
            scale(.80);

        transform-origin:
            top right;

        opacity: .05;
    }
}


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

@media (
    max-width: 760px
) {

    .story-page[
        data-service-cinematic="film-analysis-v1"
    ]
    .story-content {
        padding:
            31px
            0
            56px;
    }


    .story-page[
        data-service-cinematic="film-analysis-v1"
    ]
    .story-prose {
        width:
            calc(
                100% - 40px
            ) !important;
    }


    .service-analysis-kicker {
        margin-bottom:
            19px !important;

        padding:
            0
            0
            14px
            17px !important;

        font-size:
            23px !important;
    }


    .service-analysis-kicker::before {
        width: 2px;
        height: 28px;
    }


    .service-analysis-process {
        gap: 11px;

        margin-bottom:
            28px;
    }


    .service-analysis-process > strong {
        font-size: 21px;
    }


    .service-analysis-process-track {
        height: 30px;
    }


    .service-analysis-process-track > b {
        width: 11px;
        height: 11px;

        border-width: 2px;
    }


    .service-analysis-process-track > em {
        width: 9px;
        height: 9px;

        margin-top: -4px;
    }


    .service-analysis-step {
        display: block;

        margin-bottom:
            17px;

        padding:
            24px
            20px
            25px;

        border-radius:
            16px;
    }


    .service-analysis-step-number {
        display: block;

        margin-bottom:
            20px;

        font-size: 50px;
    }


    .service-analysis-step-body {
        max-width: 100%;
    }


    .service-analysis-step-body p {
        font-size:
            17px !important;

        line-height:
            1.70 !important;
    }


    /*
     * 10 analysis criteria:
     * one real mobile column.
     */

    .service-analysis-matrix {
        grid-template-columns:
            minmax(
                0,
                1fr
            );

        gap: 9px;

        margin:
            3px
            0
            18px !important;
    }


    .service-analysis-matrix li {
        min-height: 57px;

        padding:
            16px
            14px
            15px
            55px !important;

        font-size: 16px;

        line-height: 1.45;
    }


    .service-analysis-matrix li::before {
        left: 14px;
        top: 18px;

        font-size: 17px;
    }


    /*
     * Background-only motion.
     * Never creates or reserves horizontal space.
     */

    .service-analysis-step-motion {
        top: 10px;
        right: -42px;

        width: 145px;
        height: 108px;

        transform:
            scale(.59);

        transform-origin:
            top right;

        opacity: .039;
    }


    .service-analysis-hero {
        inset:
            15%
            7%;

        opacity: .41;
    }


    .analysis-hero-start,
    .analysis-hero-finish {
        font-size: 23px;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (
    prefers-reduced-motion: reduce
) {

    .service-analysis-process-track > i,
    .service-analysis-process-track > b,
    .service-analysis-process-track > em,

    .service-analysis-step::after,

    .service-analysis-matrix li::after,

    .service-analysis-step-motion i,

    .analysis-hero-frame,
    .analysis-hero-scan,
    .analysis-hero-focus {
        animation:
            none !important;

        transition:
            none !important;
    }


    .service-analysis-process-track > i {
        width: 100%;
    }


    .service-analysis-process-track > b {
        transform:
            scale(1);
    }


    .service-analysis-process-track > em {
        display: none;
    }


    .service-analysis-step::after,
    .service-analysis-matrix li::after {
        width: 100%;
    }
}


/* ---------------------------------------------------------
   KEYFRAMES
   --------------------------------------------------------- */

@keyframes filmAnalysisProcessRunner {

    0% {
        left: 0;
    }

    33% {
        left: 33%;
    }

    66% {
        left: 66%;
    }

    100% {
        left:
            calc(
                100% - 13px
            );
    }
}


@keyframes filmAnalysisFramePulse {

    0%,
    100% {
        transform:
            translateY(0)
            scale(.96);

        opacity: .38;
    }

    50% {
        transform:
            translateY(-4px)
            scale(1.04);

        opacity: 1;
    }
}


@keyframes filmAnalysisLens {

    0%,
    100% {
        transform:
            scale(.80);

        opacity: .34;
    }

    50% {
        transform:
            scale(1.08);

        opacity: 1;
    }
}


@keyframes filmAnalysisScan {

    from {
        top: 2px;
    }

    to {
        top:
            calc(
                100% - 5px
            );
    }
}


@keyframes filmAnalysisDataPoint {

    0%,
    100% {
        transform:
            scale(.68);

        opacity: .30;
    }

    50% {
        transform:
            scale(1.20);

        opacity: 1;
    }
}


@keyframes filmAnalysisApproval {

    0%,
    100% {
        transform:
            scale(.78)
            rotate(-4deg);

        opacity: .34;
    }

    50% {
        transform:
            scale(1.08)
            rotate(3deg);

        opacity: 1;
    }
}


@keyframes filmAnalysisHeroFrame {

    0%,
    100% {
        transform:
            translateY(2px);

        opacity: .42;
    }

    50% {
        transform:
            translateY(-4px);

        opacity: 1;
    }
}


@keyframes filmAnalysisHeroScan {

    from {
        top: 23%;
    }

    to {
        top: 75%;
    }
}


@keyframes filmAnalysisHeroFocus {

    0%,
    100% {
        transform:
            scale(.78);

        opacity: .34;
    }

    50% {
        transform:
            scale(1.10);

        opacity: 1;
    }
}


/* =========================================================
   END FILM ANALYSIS SERVICE CINEMATIC DESIGN V1
   ========================================================= */



/* =========================================================
   SCENE FROM A FRIEND CINEMATIC DESIGN V1
   ========================================================= */


/* ---------------------------------------------------------
   PAGE
   --------------------------------------------------------- */

html[
    data-service-detail="scene-friend-v1"
],
html[
    data-service-detail="scene-friend-v1"
] body {
    overflow-x: clip;
}


.story-page[
    data-service-cinematic="scene-friend-v1"
]
.story-content {
    position: relative;

    overflow: hidden;

    min-height: auto !important;

    padding:
        46px
        0
        80px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            rgba(
                254,
                250,
                224,
                .27
            ) 51%,
            #ffffff 100%
        ) !important;
}


.story-page[
    data-service-cinematic="scene-friend-v1"
]
.story-prose {
    width:
        min(
            calc(
                100% - 48px
            ),
            1120px
        ) !important;

    max-width:
        1120px !important;

    margin:
        0
        auto !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    opacity: 1 !important;
    visibility: visible !important;

    contain: none !important;

    content-visibility:
        visible !important;
}


.story-page[
    data-service-cinematic="scene-friend-v1"
]
.story-prose::before,
.story-page[
    data-service-cinematic="scene-friend-v1"
]
.story-prose::after {
    display: none !important;
}


/* ---------------------------------------------------------
   KICKER
   --------------------------------------------------------- */

.service-scene-kicker {
    position: relative;

    margin:
        0
        0
        24px !important;

    padding:
        0
        0
        17px
        28px !important;

    border: 0 !important;

    color:
        var(
            --green,
            #283618
        ) !important;

    font-size:
        28px !important;

    line-height:
        1.18 !important;
}


.service-scene-kicker::before {
    content: "";

    position: absolute;

    left: 0;
    top: 2px;

    width: 3px;
    height: 34px;

    background:
        linear-gradient(
            180deg,
            var(
                --rust,
                #BC6C25
            ),
            var(
                --amber,
                #DDA15E
            )
        );
}


/* ---------------------------------------------------------
   PROCESS 01 → 04
   --------------------------------------------------------- */

.service-scene-process {
    display: grid;

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

    align-items: center;

    gap: 20px;

    width:
        min(
            100%,
            920px
        );

    margin:
        0
        auto
        42px;
}


.service-scene-process > strong {
    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 30px;
    line-height: 1;
    font-weight: 850;

    letter-spacing: -.04em;
}


.service-scene-process-track {
    position: relative;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    height: 42px;
}


.service-scene-process-track::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 50%;

    height: 1px;

    transform:
        translateY(-50%);

    background:
        rgba(
            40,
            54,
            24,
            .16
        );
}


.service-scene-process-track > i {
    position: absolute;

    z-index: 1;

    left: 0;
    top: 50%;

    width: 0;
    height: 3px;

    transform:
        translateY(-50%);

    background:
        linear-gradient(
            90deg,
            var(
                --rust,
                #BC6C25
            ),
            var(
                --amber,
                #DDA15E
            )
        );

    transition:
        width
        1.25s
        cubic-bezier(
            .22,
            .75,
            .18,
            1
        );
}


.service-scene-process.is-active
.service-scene-process-track > i {
    width: 100%;
}


.service-scene-process-track > b {
    position: relative;

    z-index: 3;

    display: block;

    width: 17px;
    height: 17px;

    border:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    background: #fff;

    transform:
        scale(.65);

    transition:
        transform .35s ease,
        background-color .35s ease;
}


.service-scene-process.is-active
.service-scene-process-track > b {
    transform:
        scale(1);

    background:
        var(
            --paper,
            #FEFAE0
        );
}


.service-scene-process-track > em {
    position: absolute;

    z-index: 4;

    left: 0;
    top: 50%;

    width: 13px;
    height: 13px;

    margin-top: -6px;

    border-radius: 50%;

    background:
        var(
            --amber,
            #DDA15E
        );

    box-shadow:
        0
        0
        18px
        rgba(
            221,
            161,
            94,
            .55
        );

    opacity: 0;
}


.service-scene-process.is-active
.service-scene-process-track > em {
    opacity: 1;

    animation:
        sceneFriendProcessRunner
        4.8s
        ease-in-out
        infinite;
}


/* ---------------------------------------------------------
   STEPS
   --------------------------------------------------------- */

.service-scene-step {
    position: relative;

    isolation: isolate;

    display: grid;

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

    gap: 30px;

    margin:
        0
        0
        22px;

    padding:
        35px
        34px
        35px
        30px;

    overflow: hidden;

    border:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .11
        );

    border-radius: 18px;

    background:
        rgba(
            255,
            255,
            255,
            .91
        );

    box-shadow:
        0
        10px
        30px
        rgba(
            40,
            54,
            24,
            .03
        );
}


.service-scene-step::after {
    content: "";

    position: absolute;

    z-index: 5;

    left: 0;
    bottom: 0;

    width: 0;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(
                --rust,
                #BC6C25
            ),
            var(
                --amber,
                #DDA15E
            )
        );

    transition:
        width .65s ease;
}


.service-scene-step.is-active::after {
    width: 100%;
}


.service-scene-step-number {
    position: relative;

    z-index: 4;

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 72px;
    line-height: .86;
    font-weight: 850;

    letter-spacing: -.065em;

    font-variant-numeric:
        tabular-nums;
}


.service-scene-step-body {
    position: relative;

    z-index: 4;

    max-width: 800px;
}


.service-scene-step-body p {
    margin:
        0 !important;

    padding:
        0 !important;

    border: 0 !important;

    color:
        rgba(
            40,
            54,
            24,
            .81
        ) !important;

    font-size:
        18px !important;

    line-height:
        1.76 !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* ---------------------------------------------------------
   DELIVERY BADGE
   --------------------------------------------------------- */

.service-scene-delivery-badge {
    position: absolute;

    z-index: 6;

    right: 38px;
    bottom: 26px;

    display: grid;

    place-items: center;

    width: 82px;
    height: 82px;

    box-sizing: border-box;

    border:
        2px
        solid
        rgba(
            188,
            108,
            37,
            .28
        );

    border-radius: 50%;

    background:
        rgba(
            254,
            250,
            224,
            .80
        );

    color:
        var(
            --rust,
            #BC6C25
        );

    text-align: center;

    pointer-events: none;

    animation:
        sceneFriendDelivery
        3.2s
        ease-in-out
        infinite;
}


.service-scene-delivery-badge strong {
    display: block;

    margin-top: 9px;

    font-size: 27px;
    line-height: 1;

    font-weight: 850;
}


.service-scene-delivery-badge small {
    display: block;

    margin-top: -9px;

    color:
        rgba(
            40,
            54,
            24,
            .58
        );

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

    font-weight: 800;

    letter-spacing: .12em;
}


/* ---------------------------------------------------------
   MOTION BASE
   --------------------------------------------------------- */

.service-scene-step-motion {
    position: absolute;

    z-index: 1;

    top: 24px;
    right: 22px;

    width: 250px;
    height: 180px;

    pointer-events: none;

    opacity: .075;
}


.service-scene-step-motion i {
    position: absolute;

    display: block;
}


/* ---------------------------------------------------------
   01 — BROKEN / PROBLEM SCENE
   --------------------------------------------------------- */

.service-scene-step[
    data-effect="1"
]
.service-scene-step-motion::before {
    content: "";

    position: absolute;

    left: 27px;
    top: 19px;

    width: 191px;
    height: 139px;

    border:
        2px
        solid
        rgba(
            188,
            108,
            37,
            .46
        );
}


.service-scene-step[
    data-effect="1"
]
.service-scene-step-motion i:nth-child(1) {
    left: 52px;
    top: 47px;

    width: 65px;
    height: 64px;

    border:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .42
        );
}


.service-scene-step[
    data-effect="1"
]
.service-scene-step-motion i:nth-child(2) {
    right: 49px;
    bottom: 36px;

    width: 68px;
    height: 61px;

    border:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .42
        );
}


.service-scene-step[
    data-effect="1"
]
.service-scene-step-motion i:nth-child(3) {
    left: 31px;
    top: 92px;

    width: 187px;
    height: 3px;

    background:
        var(
            --rust,
            #BC6C25
        );

    transform:
        rotate(-17deg);

    transform-origin:
        center;

    animation:
        sceneFriendProblemCut
        2.9s
        ease-in-out
        infinite;
}


.service-scene-step[
    data-effect="1"
]
.service-scene-step-motion i:nth-child(4) {
    left: 118px;
    top: 24px;

    width: 3px;
    height: 130px;

    background:
        rgba(
            188,
            108,
            37,
            .45
        );

    transform:
        rotate(13deg);
}


.service-scene-step[
    data-effect="1"
]
.service-scene-step-motion i:nth-child(5),
.service-scene-step[
    data-effect="1"
]
.service-scene-step-motion i:nth-child(6) {
    display: none;
}


/* ---------------------------------------------------------
   02 — MATERIAL PACK
   screenplay / synopsis / character bio
   --------------------------------------------------------- */

.service-scene-step[
    data-effect="2"
]
.service-scene-step-motion i:nth-child(1),
.service-scene-step[
    data-effect="2"
]
.service-scene-step-motion i:nth-child(2),
.service-scene-step[
    data-effect="2"
]
.service-scene-step-motion i:nth-child(3) {
    width: 92px;
    height: 124px;

    border:
        1px
        solid
        rgba(
            188,
            108,
            37,
            .49
        );

    background:
        repeating-linear-gradient(
            180deg,
            transparent
                0
                19px,
            rgba(
                40,
                54,
                24,
                .16
            )
                19px
                21px
        );

    animation:
        sceneFriendMaterial
        3.5s
        ease-in-out
        infinite
        alternate;
}


.service-scene-step[
    data-effect="2"
]
.service-scene-step-motion i:nth-child(1) {
    left: 17px;
    top: 35px;

    transform:
        rotate(-7deg);
}


.service-scene-step[
    data-effect="2"
]
.service-scene-step-motion i:nth-child(2) {
    left: 78px;
    top: 22px;

    transform:
        rotate(1deg);

    animation-delay: .28s;
}


.service-scene-step[
    data-effect="2"
]
.service-scene-step-motion i:nth-child(3) {
    right: 17px;
    top: 36px;

    transform:
        rotate(7deg);

    animation-delay: .56s;
}


.service-scene-step[
    data-effect="2"
]
.service-scene-step-motion i:nth-child(4) {
    left: 102px;
    top: 45px;

    width: 42px;
    height: 42px;

    border:
        2px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;
}


.service-scene-step[
    data-effect="2"
]
.service-scene-step-motion i:nth-child(5) {
    left: 91px;
    top: 93px;

    width: 64px;
    height: 33px;

    border:
        2px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-top: 0;

    border-radius:
        0
        0
        35px
        35px;
}


.service-scene-step[
    data-effect="2"
]
.service-scene-step-motion i:nth-child(6) {
    display: none;
}


/* ---------------------------------------------------------
   03 — BLOCKING / SCENE BEATS / CONSTRUCTION
   --------------------------------------------------------- */

.service-scene-step[
    data-effect="3"
]
.service-scene-step-motion::before {
    content: "";

    position: absolute;

    left: 23px;
    right: 23px;
    top: 27px;
    bottom: 25px;

    border:
        1px
        solid
        rgba(
            188,
            108,
            37,
            .42
        );

    background:
        linear-gradient(
            rgba(
                40,
                54,
                24,
                .14
            )
            1px,
            transparent
            1px
        ),
        linear-gradient(
            90deg,
            rgba(
                40,
                54,
                24,
                .14
            )
            1px,
            transparent
            1px
        );

    background-size:
        37px
        37px;
}


.service-scene-step[
    data-effect="3"
]
.service-scene-step-motion i:nth-child(1),
.service-scene-step[
    data-effect="3"
]
.service-scene-step-motion i:nth-child(2) {
    width: 23px;
    height: 23px;

    border:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    background: #fff;

    animation:
        sceneFriendActor
        2.8s
        ease-in-out
        infinite;
}


.service-scene-step[
    data-effect="3"
]
.service-scene-step-motion i:nth-child(1) {
    left: 61px;
    top: 69px;
}


.service-scene-step[
    data-effect="3"
]
.service-scene-step-motion i:nth-child(2) {
    right: 57px;
    bottom: 51px;

    animation-delay: .55s;
}


.service-scene-step[
    data-effect="3"
]
.service-scene-step-motion i:nth-child(3) {
    left: 77px;
    top: 81px;

    width: 99px;
    height: 2px;

    background:
        var(
            --rust,
            #BC6C25
        );

    transform:
        rotate(17deg);

    transform-origin:
        left center;

    animation:
        sceneFriendBlocking
        3.1s
        ease-in-out
        infinite;
}


.service-scene-step[
    data-effect="3"
]
.service-scene-step-motion i:nth-child(4),
.service-scene-step[
    data-effect="3"
]
.service-scene-step-motion i:nth-child(5),
.service-scene-step[
    data-effect="3"
]
.service-scene-step-motion i:nth-child(6) {
    height: 3px;

    background:
        rgba(
            188,
            108,
            37,
            .60
        );

    animation:
        sceneFriendBeat
        2.7s
        ease-in-out
        infinite;
}


.service-scene-step[
    data-effect="3"
]
.service-scene-step-motion i:nth-child(4) {
    left: 40px;
    bottom: 32px;

    width: 52px;
}


.service-scene-step[
    data-effect="3"
]
.service-scene-step-motion i:nth-child(5) {
    left: 103px;
    bottom: 32px;

    width: 31px;

    animation-delay: .22s;
}


.service-scene-step[
    data-effect="3"
]
.service-scene-step-motion i:nth-child(6) {
    left: 145px;
    bottom: 32px;

    width: 65px;

    animation-delay: .44s;
}


/* ---------------------------------------------------------
   04 — FINAL TAKE / DELIVERY
   --------------------------------------------------------- */

.service-scene-step[
    data-effect="4"
]
.service-scene-step-motion::before {
    content: "";

    position: absolute;

    left: 43px;
    top: 45px;

    width: 155px;
    height: 100px;

    border:
        2px
        solid
        rgba(
            188,
            108,
            37,
            .48
        );
}


.service-scene-step[
    data-effect="4"
]
.service-scene-step-motion::after {
    content: "";

    position: absolute;

    left: 43px;
    top: 23px;

    width: 155px;
    height: 24px;

    border:
        2px
        solid
        rgba(
            188,
            108,
            37,
            .56
        );

    background:
        repeating-linear-gradient(
            135deg,
            rgba(
                188,
                108,
                37,
                .46
            )
                0
                13px,
            transparent
                13px
                26px
        );

    transform-origin:
        left bottom;

    animation:
        sceneFriendClapper
        3.2s
        ease-in-out
        infinite;
}


.service-scene-step[
    data-effect="4"
]
.service-scene-step-motion i:nth-child(1),
.service-scene-step[
    data-effect="4"
]
.service-scene-step-motion i:nth-child(2),
.service-scene-step[
    data-effect="4"
]
.service-scene-step-motion i:nth-child(3) {
    left: 67px;

    height: 2px;

    background:
        rgba(
            40,
            54,
            24,
            .46
        );
}


.service-scene-step[
    data-effect="4"
]
.service-scene-step-motion i:nth-child(1) {
    top: 73px;
    width: 105px;
}


.service-scene-step[
    data-effect="4"
]
.service-scene-step-motion i:nth-child(2) {
    top: 98px;
    width: 81px;
}


.service-scene-step[
    data-effect="4"
]
.service-scene-step-motion i:nth-child(3) {
    top: 123px;
    width: 111px;
}


.service-scene-step[
    data-effect="4"
]
.service-scene-step-motion i:nth-child(4) {
    right: 22px;
    bottom: 12px;

    width: 50px;
    height: 50px;

    border:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    animation:
        sceneFriendApproval
        3s
        ease-in-out
        infinite;
}


.service-scene-step[
    data-effect="4"
]
.service-scene-step-motion i:nth-child(5) {
    right: 33px;
    bottom: 34px;

    width: 28px;
    height: 14px;

    border-left:
        4px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-bottom:
        4px
        solid
        var(
            --rust,
            #BC6C25
        );

    transform:
        rotate(-45deg);
}


.service-scene-step[
    data-effect="4"
]
.service-scene-step-motion i:nth-child(6) {
    display: none;
}


/* ---------------------------------------------------------
   HERO — SCENE LAB
   --------------------------------------------------------- */

.story-page[
    data-service-cinematic="scene-friend-v1"
]
.story-art {
    position: relative;

    overflow: hidden;
}


.story-page[
    data-service-cinematic="scene-friend-v1"
]
.story-art-icon {
    position: relative;

    z-index: 8;
}


.service-scene-hero {
    position: absolute;

    z-index: 2;

    inset: 8%;

    pointer-events: none;

    opacity: .55;
}


.scene-hero-frame {
    position: absolute;

    inset:
        10%
        9%;

    border:
        1px
        solid
        rgba(
            254,
            250,
            224,
            .30
        );

    transform:
        rotate(-2deg);
}


.scene-hero-safe {
    position: absolute;

    border:
        1px
        solid
        rgba(
            254,
            250,
            224,
            .24
        );
}


.scene-hero-safe.safe-a {
    inset:
        20%
        18%;
}


.scene-hero-safe.safe-b {
    inset:
        28%
        26%;
}


.scene-hero-actor {
    position: absolute;

    z-index: 5;

    width: 17px;
    height: 17px;

    border:
        2px
        solid
        rgba(
            254,
            250,
            224,
            .82
        );

    border-radius: 50%;

    background:
        var(
            --rust,
            #BC6C25
        );

    animation:
        sceneHeroActor
        3s
        ease-in-out
        infinite;
}


.scene-hero-actor.actor-a {
    left: 29%;
    top: 56%;
}


.scene-hero-actor.actor-b {
    right: 27%;
    top: 36%;

    animation-delay: .55s;
}


.scene-hero-block {
    position: absolute;

    z-index: 4;

    height: 2px;

    background:
        rgba(
            254,
            250,
            224,
            .62
        );

    transform-origin:
        left center;

    animation:
        sceneHeroBlocking
        3.2s
        ease-in-out
        infinite;
}


.scene-hero-block.block-a {
    left: 32%;
    top: 58%;

    width: 35%;

    transform:
        rotate(-24deg);
}


.scene-hero-block.block-b {
    left: 48%;
    top: 46%;

    width: 26%;

    transform:
        rotate(16deg);

    animation-delay: .45s;
}


.scene-hero-beat {
    position: absolute;

    z-index: 6;

    bottom: 20%;

    height: 3px;

    background:
        rgba(
            254,
            250,
            224,
            .70
        );

    animation:
        sceneHeroBeat
        2.7s
        ease-in-out
        infinite;
}


.scene-hero-beat.beat-1 {
    left: 24%;

    width: 17%;
}


.scene-hero-beat.beat-2 {
    left: 45%;

    width: 9%;

    animation-delay: .22s;
}


.scene-hero-beat.beat-3 {
    left: 59%;

    width: 21%;

    animation-delay: .44s;
}


.scene-hero-focus {
    position: absolute;

    z-index: 7;

    left: 38%;
    top: 29%;

    width: 26%;
    aspect-ratio: 1;

    border:
        2px
        solid
        rgba(
            254,
            250,
            224,
            .66
        );

    border-radius: 50%;

    animation:
        sceneHeroFocus
        3.1s
        ease-in-out
        infinite;
}


.scene-hero-start,
.scene-hero-finish {
    position: absolute;

    z-index: 8;

    color:
        rgba(
            254,
            250,
            224,
            .76
        );

    font-size: 29px;
    line-height: 1;
    font-weight: 850;
}


.scene-hero-start {
    left: 6%;
    bottom: 4%;
}


.scene-hero-finish {
    right: 5%;
    top: 4%;
}


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

@media (
    max-width: 1024px
) {

    .service-scene-step {
        grid-template-columns:
            80px
            minmax(
                0,
                1fr
            );
    }


    .service-scene-step-number {
        font-size: 62px;
    }


    .service-scene-step-motion {
        right: 7px;

        transform:
            scale(.80);

        transform-origin:
            top right;

        opacity: .05;
    }


    .service-scene-delivery-badge {
        right: 22px;

        width: 72px;
        height: 72px;
    }


    .service-scene-delivery-badge strong {
        font-size: 24px;
    }
}


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

@media (
    max-width: 760px
) {

    .story-page[
        data-service-cinematic="scene-friend-v1"
    ]
    .story-content {
        padding:
            31px
            0
            56px;
    }


    .story-page[
        data-service-cinematic="scene-friend-v1"
    ]
    .story-prose {
        width:
            calc(
                100% - 40px
            ) !important;
    }


    .service-scene-kicker {
        margin-bottom:
            19px !important;

        padding:
            0
            0
            14px
            17px !important;

        font-size:
            23px !important;
    }


    .service-scene-kicker::before {
        width: 2px;
        height: 28px;
    }


    .service-scene-process {
        gap: 11px;

        margin-bottom:
            28px;
    }


    .service-scene-process > strong {
        font-size: 21px;
    }


    .service-scene-process-track {
        height: 30px;
    }


    .service-scene-process-track > b {
        width: 11px;
        height: 11px;

        border-width: 2px;
    }


    .service-scene-process-track > em {
        width: 9px;
        height: 9px;

        margin-top: -4px;
    }


    .service-scene-step {
        display: block;

        margin-bottom:
            17px;

        padding:
            24px
            20px
            25px;

        border-radius:
            16px;
    }


    .service-scene-step-number {
        display: block;

        margin-bottom:
            20px;

        font-size: 50px;
    }


    .service-scene-step-body {
        max-width: 100%;
    }


    .service-scene-step-body p {
        font-size:
            17px !important;

        line-height:
            1.70 !important;
    }


    /*
     * Decorative effects stay behind content and cannot
     * reserve any horizontal layout space.
     */

    .service-scene-step-motion {
        top: 10px;
        right: -42px;

        width: 145px;
        height: 108px;

        transform:
            scale(.59);

        transform-origin:
            top right;

        opacity: .039;
    }


    /*
     * Delivery badge must not reduce text width.
     * On mobile it becomes a small background badge.
     */

    .service-scene-delivery-badge {
        z-index: 2;

        right: -8px;
        bottom: 8px;

        width: 60px;
        height: 60px;

        opacity: .28;

        pointer-events: none;
    }


    .service-scene-delivery-badge strong {
        margin-top: 8px;

        font-size: 21px;
    }


    .service-scene-delivery-badge small {
        margin-top: -7px;

        font-size: 8px;
    }


    .service-scene-step[
        data-step="04"
    ]
    .service-scene-step-body {
        position: relative;

        z-index: 5;
    }


    .service-scene-hero {
        inset:
            15%
            7%;

        opacity: .41;
    }


    .scene-hero-start,
    .scene-hero-finish {
        font-size: 23px;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (
    prefers-reduced-motion: reduce
) {

    .service-scene-process-track > i,
    .service-scene-process-track > b,
    .service-scene-process-track > em,

    .service-scene-step::after,

    .service-scene-delivery-badge,

    .service-scene-step-motion i,

    .scene-hero-actor,
    .scene-hero-block,
    .scene-hero-beat,
    .scene-hero-focus {
        animation:
            none !important;

        transition:
            none !important;
    }


    .service-scene-process-track > i {
        width: 100%;
    }


    .service-scene-process-track > b {
        transform:
            scale(1);
    }


    .service-scene-process-track > em {
        display: none;
    }


    .service-scene-step::after {
        width: 100%;
    }
}


/* ---------------------------------------------------------
   KEYFRAMES
   --------------------------------------------------------- */

@keyframes sceneFriendProcessRunner {

    0% {
        left: 0;
    }

    33% {
        left: 33%;
    }

    66% {
        left: 66%;
    }

    100% {
        left:
            calc(
                100% - 13px
            );
    }
}


@keyframes sceneFriendProblemCut {

    0%,
    14% {
        transform:
            rotate(-17deg)
            scaleX(.06);

        opacity: .18;
    }

    48%,
    82% {
        transform:
            rotate(-17deg)
            scaleX(1);

        opacity: 1;
    }

    100% {
        transform:
            rotate(-17deg)
            scaleX(1);

        opacity: .34;
    }
}


@keyframes sceneFriendMaterial {

    from {
        translate:
            -3px
            -2px;
    }

    to {
        translate:
            5px
            4px;
    }
}


@keyframes sceneFriendActor {

    0%,
    100% {
        transform:
            scale(.72);

        opacity: .34;
    }

    50% {
        transform:
            scale(1.18);

        opacity: 1;
    }
}


@keyframes sceneFriendBlocking {

    0%,
    14% {
        transform:
            rotate(17deg)
            scaleX(.05);

        opacity: .18;
    }

    48%,
    82% {
        transform:
            rotate(17deg)
            scaleX(1);

        opacity: 1;
    }

    100% {
        transform:
            rotate(17deg)
            scaleX(1);

        opacity: .34;
    }
}


@keyframes sceneFriendBeat {

    0%,
    100% {
        transform:
            scaleX(.45);

        opacity: .28;
    }

    50% {
        transform:
            scaleX(1);

        opacity: 1;
    }
}


@keyframes sceneFriendClapper {

    0%,
    100% {
        transform:
            rotate(-12deg);

        opacity: .42;
    }

    50% {
        transform:
            rotate(0deg);

        opacity: 1;
    }
}


@keyframes sceneFriendApproval {

    0%,
    100% {
        transform:
            scale(.78)
            rotate(-4deg);

        opacity: .34;
    }

    50% {
        transform:
            scale(1.08)
            rotate(3deg);

        opacity: 1;
    }
}


@keyframes sceneFriendDelivery {

    0%,
    100% {
        transform:
            scale(.92);

        opacity: .74;
    }

    50% {
        transform:
            scale(1.04);

        opacity: 1;
    }
}


@keyframes sceneHeroActor {

    0%,
    100% {
        transform:
            scale(.72);

        opacity: .38;
    }

    50% {
        transform:
            scale(1.18);

        opacity: 1;
    }
}


@keyframes sceneHeroBlocking {

    0%,
    14% {
        scale:
            0
            1;

        opacity: .18;
    }

    48%,
    82% {
        scale:
            1
            1;

        opacity: 1;
    }

    100% {
        opacity: .34;
    }
}


@keyframes sceneHeroBeat {

    0%,
    100% {
        transform:
            scaleX(.42);

        opacity: .28;
    }

    50% {
        transform:
            scaleX(1);

        opacity: 1;
    }
}


@keyframes sceneHeroFocus {

    0%,
    100% {
        transform:
            scale(.78);

        opacity: .34;
    }

    50% {
        transform:
            scale(1.10);

        opacity: 1;
    }
}


/* =========================================================
   END SCENE FROM A FRIEND CINEMATIC DESIGN V1
   ========================================================= */



/* =========================================================
   SCENE FRIEND MOBILE DELIVERY FIX V1
   ========================================================= */

@media (
    max-width: 760px
) {

    /*
     * Stage 04 needs its own lower visual zone.
     *
     * The previous badge used:
     * right: -8px;
     * opacity: .28;
     *
     * Because the card has overflow:hidden,
     * part of the circle was clipped.
     *
     * It also occupied the same visual area as the text.
     */


    .story-page[
        data-service-cinematic="scene-friend-v1"
    ]
    .service-scene-step[
        data-step="04"
    ] {
        position: relative;

        padding-bottom:
            112px !important;
    }


    /*
     * Text remains completely above the delivery badge.
     */

    .story-page[
        data-service-cinematic="scene-friend-v1"
    ]
    .service-scene-step[
        data-step="04"
    ]
    .service-scene-step-body {
        position: relative;

        z-index: 6;

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

        padding-right:
            0 !important;
    }


    /*
     * Full visible delivery badge.
     * No clipping and no overlap with copy.
     */

    .story-page[
        data-service-cinematic="scene-friend-v1"
    ]
    .service-scene-step[
        data-step="04"
    ]
    .service-scene-delivery-badge {
        position: absolute;

        z-index: 7;

        right: 20px;
        bottom: 20px;

        width: 76px;
        height: 76px;

        box-sizing: border-box;

        margin: 0;

        border:
            2px
            solid
            rgba(
                188,
                108,
                37,
                .34
            );

        border-radius: 50%;

        background:
            rgba(
                254,
                250,
                224,
                .96
            );

        opacity: 1;

        transform: none;

        pointer-events: none;
    }


    .story-page[
        data-service-cinematic="scene-friend-v1"
    ]
    .service-scene-step[
        data-step="04"
    ]
    .service-scene-delivery-badge strong {
        display: block;

        margin:
            14px
            0
            0;

        color:
            var(
                --rust,
                #BC6C25
            );

        font-size: 27px;
        line-height: 1;

        font-weight: 850;

        letter-spacing: -.04em;
    }


    .story-page[
        data-service-cinematic="scene-friend-v1"
    ]
    .service-scene-step[
        data-step="04"
    ]
    .service-scene-delivery-badge small {
        display: block;

        margin:
            6px
            0
            0;

        color:
            rgba(
                40,
                54,
                24,
                .62
            );

        font-size: 9px;
        line-height: 1;

        font-weight: 800;

        letter-spacing: .12em;
    }


    /*
     * Stage animation remains background-only.
     */

    .story-page[
        data-service-cinematic="scene-friend-v1"
    ]
    .service-scene-step[
        data-step="04"
    ]
    .service-scene-step-motion {
        z-index: 1;

        right: -42px;

        opacity: .030;
    }
}


/*
 * Reduced-motion keeps the exact same layout.
 */

@media (
    max-width: 760px
)
and (
    prefers-reduced-motion: reduce
) {

    .story-page[
        data-service-cinematic="scene-friend-v1"
    ]
    .service-scene-step[
        data-step="04"
    ]
    .service-scene-delivery-badge {
        animation:
            none !important;

        transform:
            none !important;
    }
}


/* =========================================================
   END SCENE FRIEND MOBILE DELIVERY FIX V1
   ========================================================= */



/* =========================================================
   COURSES INDEX WRITERS ROOM DESIGN V1

   Courses have their own visual system.

   SERVICES ARCHITECTURE IS NOT REUSED.
   ========================================================= */


/* ---------------------------------------------------------
   SOURCE GENERIC LISTING
   --------------------------------------------------------- */

.courses-index-source-hidden,
.courses-index-source-group-hidden {
    display: none !important;
}


html[
    data-courses-index="writers-room-v1"
],
html[
    data-courses-index="writers-room-v1"
] body {
    overflow-x: clip;
}


/* ---------------------------------------------------------
   HERO — WRITER'S DESK
   --------------------------------------------------------- */

.courses-index-hero-root {
    position: relative !important;

    isolation: isolate;

    overflow: hidden !important;
}


.courses-index-hero-desk {
    position: absolute;

    z-index: 5;

    top: 10%;
    right: 5%;

    width: 37%;
    height: 78%;

    pointer-events: none;

    opacity: .68;
}


.hero-desk-page {
    position: absolute;

    width: 66%;
    height: 72%;

    box-sizing: border-box;

    border:
        1px
        solid
        rgba(
            254,
            250,
            224,
            .27
        );

    background:
        rgba(
            254,
            250,
            224,
            .025
        );
}


.hero-desk-page.page-a {
    left: 15%;
    top: 16%;

    transform:
        rotate(-8deg);
}


.hero-desk-page.page-b {
    left: 24%;
    top: 11%;

    transform:
        rotate(5deg);
}


.hero-desk-page.page-c {
    left: 18%;
    top: 17%;

    border-color:
        rgba(
            254,
            250,
            224,
            .46
        );

    animation:
        courseHeroPage
        5.4s
        ease-in-out
        infinite;
}


.hero-desk-type-line {
    position: absolute;

    z-index: 6;

    left: 29%;

    height: 2px;

    background:
        rgba(
            254,
            250,
            224,
            .55
        );

    transform-origin:
        left center;
}


.hero-desk-type-line.line-a {
    top: 39%;

    width: 38%;

    animation:
        courseHeroType
        3.4s
        steps(8)
        infinite;
}


.hero-desk-type-line.line-b {
    top: 48%;

    width: 30%;

    animation:
        courseHeroType
        3.4s
        .45s
        steps(8)
        infinite;
}


.hero-desk-type-line.line-c {
    top: 57%;

    width: 44%;

    animation:
        courseHeroType
        3.4s
        .9s
        steps(8)
        infinite;
}


.hero-desk-cursor {
    position: absolute;

    z-index: 7;

    left: 29%;
    top: 65%;

    width: 2px;
    height: 25px;

    background:
        rgba(
            254,
            250,
            224,
            .85
        );

    animation:
        courseHeroCursor
        1s
        steps(2)
        infinite;
}


.hero-desk-fade {
    position: absolute;

    z-index: 7;

    left: 28%;
    top: 24%;

    color:
        rgba(
            254,
            250,
            224,
            .68
        );

    font-size: 19px;

    line-height: 1;

    font-weight: 850;

    letter-spacing: .09em;
}


.hero-desk-draft {
    position: absolute;

    z-index: 7;

    right: 6%;
    bottom: 6%;

    color:
        rgba(
            254,
            250,
            224,
            .50
        );

    font-size: 13px;

    font-style: normal;

    font-weight: 850;

    letter-spacing: .14em;
}


/* ---------------------------------------------------------
   COURSE STUDIO
   --------------------------------------------------------- */

.courses-studio {
    position: relative;

    isolation: isolate;

    width: 100%;

    padding:
        62px
        24px
        100px;

    overflow: hidden;

    background:
        #fdfcf8;
}


.courses-studio::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: .40;

    background:
        repeating-linear-gradient(
            180deg,
            transparent
                0
                43px,
            rgba(
                40,
                54,
                24,
                .04
            )
                43px
                44px
        );
}


.courses-studio::after {
    content: "WRITER'S ROOM";

    position: absolute;

    z-index: 0;

    right: -21px;
    top: 44%;

    color:
        rgba(
            40,
            54,
            24,
            .025
        );

    font-size:
        clamp(
            90px,
            11vw,
            180px
        );

    line-height: .8;

    font-weight: 900;

    letter-spacing: -.07em;

    transform:
        rotate(-90deg)
        translateX(50%);

    transform-origin:
        right top;

    pointer-events: none;
}


/* ---------------------------------------------------------
   STUDIO INTRO
   --------------------------------------------------------- */

.courses-studio-intro {
    position: relative;

    z-index: 2;

    width:
        min(
            1120px,
            100%
        );

    margin:
        0
        auto
        38px;

    padding:
        0
        0
        28px;

    border-bottom:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .12
        );
}


.courses-studio-label {
    display: block;

    margin-bottom: 13px;

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 11px;

    line-height: 1;

    font-weight: 850;

    letter-spacing: .17em;
}


.courses-studio-intro strong {
    display: block;

    margin-bottom: 9px;

    color:
        var(
            --green,
            #283618
        );

    font-size: 27px;

    line-height: 1.13;

    font-weight: 850;
}


.courses-studio-intro p {
    max-width: 680px;

    margin: 0 !important;

    color:
        rgba(
            40,
            54,
            24,
            .66
        ) !important;

    font-size: 16px !important;

    line-height: 1.65 !important;
}


.courses-studio-grid {
    position: relative;

    z-index: 2;

    width:
        min(
            1120px,
            100%
        );

    margin:
        0
        auto;
}


/* ---------------------------------------------------------
   PROGRAM BASE
   --------------------------------------------------------- */

.course-program {
    position: relative;

    display: grid;

    min-height: 520px;

    overflow: hidden;

    border:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .12
        );

    background:
        #fff;

    box-shadow:
        0
        24px
        65px
        rgba(
            40,
            54,
            24,
            .07
        );
}


.course-program + .course-program {
    margin-top: 70px;
}


.course-program-copy {
    position: relative;

    z-index: 6;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    min-width: 0;

    padding:
        60px
        64px;
}


.course-program-number {
    position: absolute;

    z-index: 1;

    right: 38px;
    top: 31px;

    color:
        rgba(
            188,
            108,
            37,
            .13
        );

    font-size:
        112px;

    line-height: .82;

    font-weight: 900;

    letter-spacing: -.08em;

    pointer-events: none;
}


.course-program-eyebrow {
    position: relative;

    z-index: 3;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 13px;

    line-height: 1;

    font-weight: 850;

    letter-spacing: .18em;
}


.course-program-eyebrow::before {
    content: "";

    width: 30px;
    height: 2px;

    background:
        var(
            --amber,
            #DDA15E
        );
}


.course-program h2 {
    position: relative;

    z-index: 3;

    max-width: 565px;

    margin:
        0
        0
        22px !important;

    color:
        var(
            --green,
            #283618
        ) !important;

    font-size:
        clamp(
            36px,
            4vw,
            56px
        ) !important;

    line-height:
        1.04 !important;

    font-weight:
        850 !important;

    letter-spacing:
        -.045em !important;
}


.course-program-copy > p {
    position: relative;

    z-index: 3;

    max-width: 570px;

    margin:
        0
        0
        30px !important;

    color:
        rgba(
            40,
            54,
            24,
            .73
        ) !important;

    font-size:
        18px !important;

    line-height:
        1.7 !important;
}


/* ---------------------------------------------------------
   COURSE FACTS
   --------------------------------------------------------- */

.course-program-facts {
    position: relative;

    z-index: 3;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 31px;
}


.course-program-facts > span {
    display: flex;

    align-items: baseline;

    gap: 7px;

    min-height: 48px;

    padding:
        11px
        15px;

    box-sizing: border-box;

    border:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .10
        );

    background:
        rgba(
            254,
            250,
            224,
            .45
        );
}


.course-program-facts strong {
    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 25px;

    line-height: 1;

    font-weight: 880;
}


.course-program-facts small {
    color:
        rgba(
            40,
            54,
            24,
            .56
        );

    font-size: 10px;

    line-height: 1;

    font-weight: 850;

    letter-spacing: .12em;
}


/* ---------------------------------------------------------
   LINK
   --------------------------------------------------------- */

.course-program-link {
    position: relative;

    z-index: 5;

    display: inline-flex;

    align-items: center;

    gap: 14px;

    min-height: 49px;

    padding:
        0
        2px
        10px;

    border-bottom:
        2px
        solid
        var(
            --rust,
            #BC6C25
        );

    color:
        var(
            --green,
            #283618
        ) !important;

    text-decoration:
        none !important;

    font-size: 17px;

    line-height: 1;

    font-weight: 820;

    transition:
        gap .25s ease,
        color .25s ease;
}


.course-program-link i {
    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 22px;

    line-height: 1;

    font-style: normal;
}


.course-program-link:hover {
    gap: 20px;

    color:
        var(
            --rust,
            #BC6C25
        ) !important;
}


/* =========================================================
   01 — WRITER'S ROOM / SCRIPT LAB
   ========================================================= */

.course-program-lab {
    grid-template-columns:
        minmax(
            0,
            1.07fr
        )
        minmax(
            375px,
            .93fr
        );

    border-radius:
        3px
        46px
        3px
        3px;
}


.course-program-lab::before {
    content: "";

    position: absolute;

    z-index: 4;

    left: 0;
    top: 0;
    bottom: 0;

    width: 7px;

    background:
        linear-gradient(
            180deg,
            var(
                --rust,
                #BC6C25
            ),
            var(
                --amber,
                #DDA15E
            )
        );
}


.course-lab-visual {
    position: relative;

    isolation: isolate;

    min-height: 520px;

    overflow: hidden;

    border-left:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .09
        );

    background:
        #f5f0e3;
}


.course-lab-visual::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        repeating-linear-gradient(
            180deg,
            transparent
                0
                35px,
            rgba(
                40,
                54,
                24,
                .055
            )
                35px
                36px
        );
}


.course-lab-visual::after {
    content: "";

    position: absolute;

    left: 66px;
    top: 0;
    bottom: 0;

    width: 1px;

    background:
        rgba(
            188,
            108,
            37,
            .21
        );
}


.lab-script-stack {
    position: absolute;

    z-index: 2;

    inset:
        52px
        38px
        52px
        86px;
}


.lab-page {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 76%;
    height: 84%;

    border:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .14
        );

    background:
        rgba(
            255,
            255,
            255,
            .82
        );

    transform-origin:
        center;
}


.lab-page.page-back {
    transform:
        translate(
            -56%,
            -48%
        )
        rotate(-7deg);
}


.lab-page.page-mid {
    transform:
        translate(
            -48%,
            -52%
        )
        rotate(5deg);
}


.lab-page.page-front {
    background:
        rgba(
            255,
            255,
            255,
            .97
        );

    animation:
        labFrontPage
        5.8s
        ease-in-out
        infinite;
}


.lab-binding {
    position: absolute;

    z-index: 8;

    left: 54px;
    top: 90px;

    display: grid;

    gap: 35px;
}


.lab-binding i {
    display: block;

    width: 24px;
    height: 10px;

    border:
        2px
        solid
        rgba(
            188,
            108,
            37,
            .49
        );

    border-right: 0;

    border-radius:
        12px
        0
        0
        12px;
}


.lab-scene-lines {
    position: absolute;

    z-index: 9;

    left: 30%;
    right: 15%;
    top: 34%;

    display: grid;

    gap: 22px;
}


.lab-scene-lines span {
    display: block;

    height: 3px;

    background:
        rgba(
            40,
            54,
            24,
            .28
        );

    transform-origin:
        left center;

    animation:
        labTypeLine
        4.4s
        steps(9)
        infinite;
}


.lab-scene-lines span:nth-child(1) {
    width: 81%;
}


.lab-scene-lines span:nth-child(2) {
    width: 65%;

    animation-delay: .3s;
}


.lab-scene-lines span:nth-child(3) {
    width: 89%;

    animation-delay: .6s;
}


.lab-scene-lines span:nth-child(4) {
    width: 53%;

    animation-delay: .9s;
}


.lab-scene-lines span:nth-child(5) {
    width: 74%;

    animation-delay: 1.2s;
}


.lab-cursor {
    position: absolute;

    z-index: 10;

    left: 30%;
    top: 66%;

    width: 3px;
    height: 27px;

    background:
        var(
            --rust,
            #BC6C25
        );

    animation:
        labCursor
        1s
        steps(2)
        infinite;
}


.lab-draft {
    position: absolute;

    z-index: 10;

    right: 27px;
    top: 24px;

    color:
        rgba(
            188,
            108,
            37,
            .65
        );

    font-size: 16px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: .08em;
}


.lab-fade {
    position: absolute;

    z-index: 10;

    left: 105px;
    bottom: 44px;

    color:
        rgba(
            40,
            54,
            24,
            .43
        );

    font-size: 14px;

    line-height: 1;

    font-style: normal;

    font-weight: 850;

    letter-spacing: .13em;
}


/* =========================================================
   02 — REWRITE ROOM
   ========================================================= */

.course-program-rewrite {
    grid-template-columns:
        minmax(
            385px,
            .94fr
        )
        minmax(
            0,
            1.06fr
        );

    border-radius:
        46px
        3px
        3px
        3px;
}


.course-program-rewrite::before {
    content: "";

    position: absolute;

    z-index: 4;

    right: 0;
    top: 0;
    bottom: 0;

    width: 7px;

    background:
        linear-gradient(
            180deg,
            var(
                --amber,
                #DDA15E
            ),
            var(
                --rust,
                #BC6C25
            )
        );
}


.course-rewrite-visual {
    position: relative;

    isolation: isolate;

    min-height: 520px;

    overflow: hidden;

    border-right:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .09
        );

    background:
        #263519;
}


.course-rewrite-visual::before {
    content: "REWRITE";

    position: absolute;

    z-index: 0;

    left: -15px;
    bottom: 25px;

    color:
        rgba(
            254,
            250,
            224,
            .035
        );

    font-size: 94px;

    line-height: .8;

    font-weight: 900;

    letter-spacing: -.06em;
}


.rewrite-before,
.rewrite-after {
    position: absolute;

    z-index: 3;

    top: 64px;
    bottom: 64px;

    width: 39%;

    padding:
        34px
        23px;

    box-sizing: border-box;

    border:
        1px
        solid
        rgba(
            254,
            250,
            224,
            .19
        );
}


.rewrite-before {
    left: 8%;

    transform:
        rotate(-3deg);
}


.rewrite-after {
    right: 8%;

    transform:
        rotate(3deg);
}


.rewrite-before strong,
.rewrite-after strong {
    display: block;

    margin-bottom: 33px;

    color:
        rgba(
            254,
            250,
            224,
            .47
        );

    font-size: 12px;

    line-height: 1;

    font-weight: 850;

    letter-spacing: .16em;
}


.rewrite-before span,
.rewrite-after span {
    display: block;

    height: 2px;

    margin-bottom: 24px;

    background:
        rgba(
            254,
            250,
            224,
            .25
        );
}


.rewrite-before span:nth-of-type(1) {
    width: 87%;
}


.rewrite-before span:nth-of-type(2) {
    width: 71%;
}


.rewrite-before span:nth-of-type(3) {
    width: 94%;
}


.rewrite-before span:nth-of-type(4) {
    width: 61%;
}


.rewrite-after span:nth-of-type(1) {
    width: 72%;
}


.rewrite-after span:nth-of-type(2) {
    width: 90%;
}


.rewrite-after span:nth-of-type(3) {
    width: 64%;
}


.rewrite-after span:nth-of-type(4) {
    width: 82%;
}


.rewrite-cut {
    position: absolute;

    z-index: 5;

    height: 3px;

    background:
        rgba(
            221,
            161,
            94,
            .82
        );

    transform-origin:
        left center;
}


.rewrite-cut.cut-a {
    left: 12%;
    top: 43%;

    width: 31%;

    animation:
        rewriteStrikeA
        3.7s
        ease-in-out
        infinite;
}


.rewrite-cut.cut-b {
    left: 14%;
    top: 60%;

    width: 26%;

    animation:
        rewriteStrikeB
        3.7s
        .65s
        ease-in-out
        infinite;
}


.rewrite-note {
    position: absolute;

    z-index: 7;

    display: grid;

    place-items: center;

    width: 43px;
    height: 43px;

    border:
        2px
        solid
        rgba(
            221,
            161,
            94,
            .68
        );

    border-radius: 50%;

    color:
        var(
            --amber,
            #DDA15E
        );

    font-size: 22px;

    line-height: 1;

    font-weight: 900;

    animation:
        rewriteNote
        3s
        ease-in-out
        infinite;
}


.rewrite-note.note-a {
    left: 35%;
    bottom: 74px;
}


.rewrite-note.note-b {
    right: 7%;
    top: 34px;

    animation-delay: .65s;
}


.rewrite-playhead {
    position: absolute;

    z-index: 8;

    top: 30px;
    bottom: 30px;

    left: 49%;

    width: 2px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(
                221,
                161,
                94,
                .92
            ),
            transparent
        );

    animation:
        rewritePlayhead
        4.2s
        ease-in-out
        infinite;
}


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

@media (
    max-width: 1050px
) {

    .course-program-copy {
        padding:
            50px
            44px;
    }


    .course-program-lab {
        grid-template-columns:
            minmax(
                0,
                1.08fr
            )
            minmax(
                320px,
                .92fr
            );
    }


    .course-program-rewrite {
        grid-template-columns:
            minmax(
                320px,
                .92fr
            )
            minmax(
                0,
                1.08fr
            );
    }


    .course-program-number {
        right: 28px;

        font-size: 92px;
    }


    .course-program h2 {
        font-size:
            40px !important;
    }

}


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

@media (
    max-width: 760px
) {

    .courses-index-hero-desk {
        top: 18%;
        right: -5%;

        width: 45%;
        height: 64%;

        opacity: .27;
    }


    .hero-desk-fade,
    .hero-desk-draft {
        display: none;
    }


    .courses-studio {
        padding:
            31px
            20px
            58px;
    }


    .courses-studio::after {
        display: none;
    }


    .courses-studio-intro {
        margin-bottom: 25px;

        padding-bottom: 22px;
    }


    .courses-studio-intro strong {
        font-size: 23px;
    }


    .courses-studio-intro p {
        font-size:
            15px !important;
    }


    .course-program {
        display: flex;

        flex-direction: column;

        min-height: 0;

        overflow: hidden;

        border-radius:
            18px !important;

        box-shadow:
            0
            14px
            34px
            rgba(
                40,
                54,
                24,
                .06
            );
    }


    .course-program + .course-program {
        margin-top: 34px;
    }


    .course-program-copy {
        order: 1;

        min-height: 0;

        padding:
            32px
            24px
            30px;
    }


    .course-program-visual {
        order: 2;

        width: 100%;

        min-height: 295px;

        border:
            0 !important;
    }


    /*
     * Rewrite intentionally starts with its visual.
     */

    .course-program-rewrite
    .course-program-visual {
        order: 1;
    }


    .course-program-rewrite
    .course-program-copy {
        order: 2;
    }


    .course-program-lab::before,
    .course-program-rewrite::before {
        left: 0;
        right: 0;

        top: 0;
        bottom: auto;

        width: auto;
        height: 5px;
    }


    .course-program-number {
        position: relative;

        right: auto;
        top: auto;

        display: block;

        margin-bottom: 18px;

        color:
            var(
                --rust,
                #BC6C25
            );

        font-size:
            58px;

        line-height: .8;

        opacity: 1;
    }


    .course-program-eyebrow {
        margin-bottom: 14px;

        font-size: 11px;
    }


    .course-program h2 {
        max-width: 100%;

        margin-bottom:
            17px !important;

        font-size:
            33px !important;

        line-height:
            1.07 !important;
    }


    .course-program-copy > p {
        max-width: 100%;

        margin-bottom:
            24px !important;

        font-size:
            17px !important;

        line-height:
            1.66 !important;
    }


    .course-program-facts {
        display: grid;

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

        width: 100%;

        gap: 6px;

        margin-bottom: 25px;
    }


    .course-program-facts > span {
        display: block;

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

        padding:
            12px
            7px;

        text-align: center;
    }


    .course-program-facts strong {
        display: block;

        margin-bottom: 7px;

        font-size: 22px;
    }


    .course-program-facts small {
        display: block;

        font-size: 8px;

        line-height: 1.2;
    }


    .course-program-link {
        min-height: 43px;

        font-size: 16px;
    }


    /*
     * Lab visual.
     */

    .course-lab-visual {
        min-height: 295px;
    }


    .course-lab-visual::after {
        left: 43px;
    }


    .lab-script-stack {
        inset:
            34px
            25px
            35px
            55px;
    }


    .lab-binding {
        left: 30px;
        top: 58px;

        gap: 23px;
    }


    .lab-binding i {
        width: 18px;
        height: 8px;
    }


    .lab-scene-lines {
        left: 28%;
        right: 14%;
        top: 31%;

        gap: 16px;
    }


    .lab-cursor {
        left: 28%;
        top: 69%;

        height: 20px;
    }


    .lab-draft {
        right: 18px;
        top: 15px;

        font-size: 12px;
    }


    .lab-fade {
        left: 71px;
        bottom: 25px;

        font-size: 10px;
    }


    /*
     * Rewrite visual.
     */

    .course-rewrite-visual {
        min-height: 305px;
    }


    .course-rewrite-visual::before {
        font-size: 62px;
    }


    .rewrite-before,
    .rewrite-after {
        top: 45px;
        bottom: 44px;

        width: 38%;

        padding:
            23px
            14px;
    }


    .rewrite-before {
        left: 8%;
    }


    .rewrite-after {
        right: 8%;
    }


    .rewrite-before strong,
    .rewrite-after strong {
        margin-bottom: 22px;

        font-size: 9px;
    }


    .rewrite-before span,
    .rewrite-after span {
        margin-bottom: 16px;
    }


    .rewrite-note {
        width: 34px;
        height: 34px;

        font-size: 17px;
    }


    .rewrite-note.note-a {
        left: 34%;
        bottom: 38px;
    }


    .rewrite-note.note-b {
        top: 20px;
    }

}


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

@media (
    max-width: 390px
) {

    .courses-studio {
        padding-left: 16px;
        padding-right: 16px;
    }


    .course-program-copy {
        padding-left: 20px;
        padding-right: 20px;
    }


    .course-program h2 {
        font-size:
            30px !important;
    }


    .course-program-facts strong {
        font-size: 20px;
    }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (
    prefers-reduced-motion: reduce
) {

    .hero-desk-page.page-c,
    .hero-desk-type-line,
    .hero-desk-cursor,

    .lab-page.page-front,
    .lab-scene-lines span,
    .lab-cursor,

    .rewrite-cut,
    .rewrite-note,
    .rewrite-playhead {
        animation:
            none !important;

        transition:
            none !important;
    }

}


/* ---------------------------------------------------------
   HERO ANIMATIONS
   --------------------------------------------------------- */

@keyframes courseHeroPage {

    0%,
    100% {
        transform:
            translate(
                -1px,
                1px
            )
            rotate(-1deg);
    }

    50% {
        transform:
            translate(
                7px,
                -6px
            )
            rotate(2deg);
    }

}


@keyframes courseHeroType {

    0%,
    15% {
        transform:
            scaleX(.05);

        opacity: .20;
    }

    58%,
    82% {
        transform:
            scaleX(1);

        opacity: 1;
    }

    100% {
        opacity: .34;
    }

}


@keyframes courseHeroCursor {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: .18;
    }

}


/* ---------------------------------------------------------
   WRITER'S ROOM ANIMATIONS
   --------------------------------------------------------- */

@keyframes labFrontPage {

    0%,
    100% {
        transform:
            translate(
                -52%,
                -50%
            )
            rotate(0deg);
    }

    50% {
        transform:
            translate(
                -49%,
                -53%
            )
            rotate(1.4deg);
    }

}


@keyframes labTypeLine {

    0%,
    13% {
        transform:
            scaleX(.05);

        opacity: .18;
    }

    55%,
    82% {
        transform:
            scaleX(1);

        opacity: 1;
    }

    100% {
        opacity: .40;
    }

}


@keyframes labCursor {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: .18;
    }

}


/* ---------------------------------------------------------
   REWRITE ANIMATIONS
   --------------------------------------------------------- */

@keyframes rewriteStrikeA {

    0%,
    15% {
        transform:
            rotate(-11deg)
            scaleX(.03);

        opacity: .20;
    }

    52%,
    82% {
        transform:
            rotate(-11deg)
            scaleX(1);

        opacity: 1;
    }

    100% {
        opacity: .36;
    }

}


@keyframes rewriteStrikeB {

    0%,
    15% {
        transform:
            rotate(8deg)
            scaleX(.03);

        opacity: .20;
    }

    52%,
    82% {
        transform:
            rotate(8deg)
            scaleX(1);

        opacity: 1;
    }

    100% {
        opacity: .36;
    }

}


@keyframes rewriteNote {

    0%,
    100% {
        transform:
            scale(.78)
            rotate(-7deg);

        opacity: .36;
    }

    50% {
        transform:
            scale(1.08)
            rotate(3deg);

        opacity: 1;
    }

}


@keyframes rewritePlayhead {

    0%,
    100% {
        left: 47%;

        opacity: .28;
    }

    50% {
        left: 53%;

        opacity: 1;
    }

}


/* =========================================================
   END COURSES INDEX WRITERS ROOM DESIGN V1
   ========================================================= */



/* =========================================================
   COURSES MOBILE VISUAL FIRST ORDER V1

   Mobile narrative:

   COURSE 01
   visual → copy

   COURSE 02
   visual → copy

   Desktop is untouched.
   ========================================================= */

@media (
    max-width: 760px
) {

    /*
     * The base mobile Courses layout previously used:
     *
     * copy   = order: 1
     * visual = order: 2
     *
     * Rewrite Room already reversed this.
     *
     * Writer's Room now follows the same visual-first
     * reading sequence.
     */


    .course-program-lab
    .course-program-visual {
        order: 1;
    }


    .course-program-lab
    .course-program-copy {
        order: 2;
    }


    /*
     * Explicitly preserve Rewrite Room order.
     */

    .course-program-rewrite
    .course-program-visual {
        order: 1;
    }


    .course-program-rewrite
    .course-program-copy {
        order: 2;
    }


    /*
     * The orange course edge remains at the top of
     * each complete program block.
     */

    .course-program-lab::before,
    .course-program-rewrite::before {
        z-index: 20;
    }

}


/* =========================================================
   END COURSES MOBILE VISUAL FIRST ORDER V1
   ========================================================= */



/* =========================================================
   SCREENWRITING COURSE LAB DESIGN V1

   Individual course visual language:
   LAB NOTEBOOK / SYLLABUS / CLASSROOM.

   NOT Services.
   NOT service cards.
   NOT service process stages.
   NOT Courses Index composition.
   ========================================================= */


/* ---------------------------------------------------------
   PAGE
   --------------------------------------------------------- */

html[
    data-course-detail="screenwriting-lab-v1"
],
html[
    data-course-detail="screenwriting-lab-v1"
] body {
    overflow-x: clip;
}


.story-page[
    data-course-lab="screenwriting-v1"
]
.story-content {
    position: relative;

    overflow: hidden;

    min-height: auto !important;

    padding:
        52px
        0
        88px;

    background:
        #fcfbf6 !important;
}


.story-page[
    data-course-lab="screenwriting-v1"
]
.story-content::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            180deg,
            transparent
                0
                43px,
            rgba(
                40,
                54,
                24,
                .025
            )
                43px
                44px
        );
}


.course-lab-prose {
    position: relative;

    z-index: 2;

    width:
        min(
            calc(
                100% - 48px
            ),
            1180px
        ) !important;

    max-width:
        1180px !important;

    margin:
        0
        auto !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    opacity: 1 !important;
    visibility: visible !important;

    content-visibility:
        visible !important;

    contain: none !important;
}


.course-lab-prose::before,
.course-lab-prose::after {
    display: none !important;
}


/* ---------------------------------------------------------
   OPENING — LAB NOTE
   --------------------------------------------------------- */

.course-lab-opening {
    position: relative;

    margin:
        0
        0
        34px;

    padding:
        0
        0
        28px
        40px;

    border-left:
        3px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-bottom:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .12
        );
}


.course-lab-opening > p {
    margin:
        0
        0
        12px !important;

    color:
        rgba(
            40,
            54,
            24,
            .78
        ) !important;

    font-size:
        19px !important;

    line-height:
        1.68 !important;
}


.course-lab-opening > p:first-child {
    color:
        var(
            --rust,
            #BC6C25
        ) !important;

    font-size:
        15px !important;

    line-height:
        1.2 !important;

    font-weight:
        850 !important;

    letter-spacing:
        .12em;
}


.course-lab-opening > p:nth-child(2) {
    max-width: 760px;

    margin-top:
        7px !important;

    color:
        var(
            --green,
            #283618
        ) !important;

    font-size:
        34px !important;

    line-height:
        1.14 !important;

    font-weight:
        760 !important;

    letter-spacing:
        -.03em;
}


/* ---------------------------------------------------------
   LAB DASHBOARD
   --------------------------------------------------------- */

.course-lab-dashboard {
    position: relative;

    isolation: isolate;

    margin:
        0
        0
        62px;

    padding:
        34px
        38px
        31px;

    overflow: hidden;

    background:
        var(
            --green,
            #283618
        );

    color: #fff;
}


.course-lab-dashboard::before {
    content: "LAB";

    position: absolute;

    z-index: 0;

    right: -8px;
    bottom: -26px;

    color:
        rgba(
            254,
            250,
            224,
            .035
        );

    font-size: 170px;

    line-height: .8;

    font-weight: 900;

    letter-spacing: -.08em;
}


.course-lab-dashboard-head {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: baseline;

    justify-content:
        space-between;

    gap: 25px;

    margin-bottom: 30px;
}


.course-lab-dashboard-head span {
    color:
        var(
            --amber,
            #DDA15E
        );

    font-size: 11px;

    font-weight: 850;

    letter-spacing: .18em;
}


.course-lab-dashboard-head strong {
    color:
        rgba(
            254,
            250,
            224,
            .78
        );

    font-size: 18px;

    line-height: 1.2;

    font-weight: 650;
}


.course-lab-dashboard-facts {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    border-top:
        1px
        solid
        rgba(
            254,
            250,
            224,
            .18
        );

    border-bottom:
        1px
        solid
        rgba(
            254,
            250,
            224,
            .18
        );
}


.course-lab-dashboard-facts > div {
    padding:
        23px
        20px;

    border-right:
        1px
        solid
        rgba(
            254,
            250,
            224,
            .15
        );
}


.course-lab-dashboard-facts > div:last-child {
    border-right: 0;
}


.course-lab-dashboard-facts strong {
    display: block;

    margin-bottom: 8px;

    color:
        var(
            --amber,
            #DDA15E
        );

    font-size: 43px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: -.05em;
}


.course-lab-dashboard-facts span {
    display: block;

    color:
        rgba(
            254,
            250,
            224,
            .65
        );

    font-size: 10px;

    font-weight: 850;

    letter-spacing: .16em;
}


.course-lab-semester {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap: 0;

    margin-top: 24px;

    height: 18px;
}


.course-lab-semester::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 50%;

    height: 1px;

    background:
        rgba(
            254,
            250,
            224,
            .22
        );
}


.course-lab-semester span {
    position: relative;
}


.course-lab-semester span::before {
    content: "";

    position: absolute;

    z-index: 3;

    left: 0;
    top: 50%;

    width: 10px;
    height: 10px;

    transform:
        translateY(-50%);

    border:
        2px
        solid
        var(
            --amber,
            #DDA15E
        );

    border-radius: 50%;

    background:
        var(
            --green,
            #283618
        );
}


.course-lab-semester i {
    position: absolute;

    z-index: 4;

    left: 0;
    top: 50%;

    width: 11px;
    height: 11px;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        var(
            --amber,
            #DDA15E
        );

    box-shadow:
        0
        0
        16px
        rgba(
            221,
            161,
            94,
            .70
        );
}


.course-lab-dashboard.is-active
.course-lab-semester i {
    animation:
        courseSemesterRunner
        6s
        ease-in-out
        infinite;
}


/* ---------------------------------------------------------
   MODULE LAYOUT
   --------------------------------------------------------- */

.course-lab-section {
    position: relative;

    display: grid;

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

    gap: 38px;

    margin:
        0
        0
        68px;

    padding:
        0
        0
        62px;

    border-bottom:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .13
        );
}


.course-lab-section:last-child {
    margin-bottom: 0;
}


.course-lab-module-label {
    position: relative;

    align-self: start;

    padding-top: 5px;
}


.course-lab-module-label span {
    display: block;

    margin-bottom: 8px;

    color:
        rgba(
            40,
            54,
            24,
            .42
        );

    font-size: 10px;

    font-weight: 850;

    letter-spacing: .16em;
}


.course-lab-module-label strong {
    display: block;

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 64px;

    line-height: .8;

    font-weight: 900;

    letter-spacing: -.07em;
}


.course-lab-module-label::after {
    content: "";

    display: block;

    width: 0;
    height: 3px;

    margin-top: 17px;

    background:
        var(
            --amber,
            #DDA15E
        );

    transition:
        width
        .65s
        ease;
}


.course-lab-section.is-active
.course-lab-module-label::after {
    width: 64px;
}


.course-lab-section-content {
    min-width: 0;
}


.course-lab-section-content > * {
    opacity: 1 !important;
    visibility: visible !important;
}


.course-lab-section-heading {
    margin:
        0
        0
        27px !important;

    color:
        var(
            --green,
            #283618
        ) !important;

    font-size:
        34px !important;

    line-height:
        1.12 !important;

    font-weight:
        850 !important;

    letter-spacing:
        -.035em !important;
}


.course-lab-section-heading strong {
    font-weight: inherit;
}


.course-lab-section-content > p:not(
    .course-lab-section-heading
) {
    max-width: 850px;

    margin:
        0
        0
        22px !important;

    color:
        rgba(
            40,
            54,
            24,
            .76
        ) !important;

    font-size:
        18px !important;

    line-height:
        1.78 !important;
}


.course-lab-section-content > ul {
    margin:
        0
        0
        24px !important;

    padding:
        0 !important;

    list-style: none !important;
}


.course-lab-section-content > ul:not(
    .course-lab-curriculum
):not(
    .course-lab-homework
):not(
    .course-lab-outcomes
) > li {
    position: relative;

    margin:
        0
        0
        12px;

    padding:
        0
        0
        0
        24px;

    color:
        rgba(
            40,
            54,
            24,
            .76
        );

    font-size: 17px;

    line-height: 1.65;
}


.course-lab-section-content > ul:not(
    .course-lab-curriculum
):not(
    .course-lab-homework
):not(
    .course-lab-outcomes
) > li::before {
    content: "";

    position: absolute;

    left: 3px;
    top: .72em;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(
            --rust,
            #BC6C25
        );
}


/* ---------------------------------------------------------
   METHODOLOGY
   --------------------------------------------------------- */

.course-lab-triad {
    display: grid;

    grid-template-columns:
        1fr
        62px
        1fr
        62px
        1fr;

    align-items: center;

    margin:
        0
        0
        31px;

    padding:
        24px
        28px;

    background:
        rgba(
            254,
            250,
            224,
            .65
        );

    border-top:
        2px
        solid
        var(
            --amber,
            #DDA15E
        );
}


.course-lab-triad > span {
    color:
        var(
            --green,
            #283618
        );

    font-size: 14px;

    line-height: 1.3;

    font-weight: 850;

    letter-spacing: .08em;

    text-align: center;
}


.course-lab-triad b {
    display: block;

    margin-bottom: 8px;

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 26px;

    line-height: 1;

    font-weight: 900;
}


.course-lab-triad > i {
    height: 1px;

    background:
        rgba(
            188,
            108,
            37,
            .38
        );

    transform-origin: left center;
}


.course-lab-section.is-active
.course-lab-triad > i {
    animation:
        courseLabConnector
        2.6s
        ease-in-out
        infinite;
}


/* ---------------------------------------------------------
   CURRICULUM
   --------------------------------------------------------- */

.course-lab-curriculum {
    counter-reset:
        curriculum;
}


.course-lab-curriculum li {
    position: relative;

    display: grid;

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

    gap: 18px;

    min-height: 74px;

    margin: 0 !important;

    padding:
        17px
        0 !important;

    border-top:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .10
        );

    color:
        rgba(
            40,
            54,
            24,
            .79
        ) !important;

    font-size:
        17px !important;

    line-height:
        1.62 !important;

    counter-increment:
        curriculum;
}


.course-lab-curriculum li:last-child {
    border-bottom:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .10
        );
}


.course-lab-curriculum li::before {
    content:
        attr(
            data-lesson
        );

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 24px;

    line-height: 1.25;

    font-weight: 900;

    letter-spacing: -.04em;
}


.course-lab-curriculum li::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 2px;

    background:
        var(
            --amber,
            #DDA15E
        );

    opacity: .52;
}


.course-lab-section.is-active
.course-lab-curriculum li::after {
    animation:
        courseCurriculumScan
        5.2s
        ease-in-out
        infinite;
}


.course-lab-curriculum li:nth-child(3n + 2)::after {
    animation-delay: .45s !important;
}


.course-lab-curriculum li:nth-child(3n + 3)::after {
    animation-delay: .90s !important;
}


/* ---------------------------------------------------------
   HOMEWORK
   --------------------------------------------------------- */

.course-lab-homework {
    display: grid;

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

    gap: 0 30px;
}


.course-lab-homework li {
    position: relative;

    min-height: 70px;

    margin: 0 !important;

    padding:
        17px
        8px
        17px
        44px !important;

    border-top:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .11
        );

    color:
        rgba(
            40,
            54,
            24,
            .77
        ) !important;

    font-size:
        17px !important;

    line-height:
        1.60 !important;
}


.course-lab-homework li::before {
    content: "✎";

    position: absolute;

    left: 5px;
    top: 16px;

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 22px;
}


/* ---------------------------------------------------------
   PRACTICE ROOMS
   --------------------------------------------------------- */

.course-lab-practice-room {
    position: relative;

    overflow: hidden;
}


.course-lab-practice-room
.course-lab-section-content {
    position: relative;

    z-index: 4;

    max-width:
        calc(
            100% - 170px
        );
}


.course-lab-room-visual {
    position: absolute;

    z-index: 1;

    right: 8px;
    top: 36px;

    width: 145px;
    height: 145px;

    pointer-events: none;

    opacity: .11;
}


.course-lab-room-visual i {
    position: absolute;

    display: block;
}


/*
 * Reading room — stacked pages.
 */

.course-lab-reading-room
.course-lab-room-visual i {
    width: 85px;
    height: 105px;

    border:
        2px
        solid
        var(
            --rust,
            #BC6C25
        );
}


.course-lab-reading-room
.course-lab-room-visual i:nth-child(1) {
    left: 17px;
    top: 25px;

    transform:
        rotate(-10deg);
}


.course-lab-reading-room
.course-lab-room-visual i:nth-child(2) {
    left: 37px;
    top: 17px;

    transform:
        rotate(5deg);
}


.course-lab-reading-room
.course-lab-room-visual i:nth-child(3) {
    left: 47px;
    top: 34px;

    height: 2px;
    width: 56px;

    border: 0;

    background:
        var(
            --rust,
            #BC6C25
        );
}


.course-lab-reading-room
.course-lab-room-visual i:nth-child(4) {
    left: 47px;
    top: 52px;

    height: 2px;
    width: 42px;

    border: 0;

    background:
        var(
            --rust,
            #BC6C25
        );
}


/*
 * Screening room — frame / playhead.
 */

.course-lab-screening-room
.course-lab-room-visual {
    border:
        2px
        solid
        var(
            --rust,
            #BC6C25
        );
}


.course-lab-screening-room
.course-lab-room-visual i:nth-child(1) {
    left: 25%;
    top: 28%;

    width: 50%;
    height: 44%;

    border:
        2px
        solid
        var(
            --rust,
            #BC6C25
        );
}


.course-lab-screening-room
.course-lab-room-visual i:nth-child(2) {
    left: 50%;
    top: 49%;

    width: 30px;
    height: 30px;

    border-right:
        4px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-bottom:
        4px
        solid
        var(
            --rust,
            #BC6C25
        );

    transform:
        translate(
            -65%,
            -50%
        )
        rotate(-45deg);
}


.course-lab-screening-room
.course-lab-room-visual i:nth-child(3) {
    left: 0;
    right: 0;
    bottom: 14px;

    height: 2px;

    background:
        var(
            --rust,
            #BC6C25
        );
}


.course-lab-screening-room
.course-lab-room-visual i:nth-child(4) {
    left: 10px;
    bottom: 8px;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background:
        var(
            --rust,
            #BC6C25
        );

    animation:
        courseScreeningRunner
        3.6s
        ease-in-out
        infinite;
}


/*
 * Writing room — cursor and type lines.
 */

.course-lab-writing-room
.course-lab-room-visual {
    border-left:
        2px
        solid
        var(
            --rust,
            #BC6C25
        );
}


.course-lab-writing-room
.course-lab-room-visual i:nth-child(1),
.course-lab-writing-room
.course-lab-room-visual i:nth-child(2),
.course-lab-writing-room
.course-lab-room-visual i:nth-child(3) {
    left: 22px;

    height: 3px;

    background:
        var(
            --rust,
            #BC6C25
        );

    transform-origin:
        left center;

    animation:
        courseWritingLine
        3.4s
        steps(8)
        infinite;
}


.course-lab-writing-room
.course-lab-room-visual i:nth-child(1) {
    top: 35px;

    width: 94px;
}


.course-lab-writing-room
.course-lab-room-visual i:nth-child(2) {
    top: 68px;

    width: 72px;

    animation-delay: .4s;
}


.course-lab-writing-room
.course-lab-room-visual i:nth-child(3) {
    top: 101px;

    width: 104px;

    animation-delay: .8s;
}


.course-lab-writing-room
.course-lab-room-visual i:nth-child(4) {
    left: 22px;
    top: 121px;

    width: 3px;
    height: 22px;

    background:
        var(
            --rust,
            #BC6C25
        );

    animation:
        courseLabCursor
        1s
        steps(2)
        infinite;
}


/* ---------------------------------------------------------
   OUTCOMES
   --------------------------------------------------------- */

.course-lab-outcomes li {
    position: relative;

    margin:
        0
        0
        0 !important;

    padding:
        19px
        10px
        19px
        54px !important;

    border-top:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .11
        );

    color:
        rgba(
            40,
            54,
            24,
            .78
        ) !important;

    font-size:
        17px !important;

    line-height:
        1.65 !important;
}


.course-lab-outcomes li:last-child {
    border-bottom:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .11
        );
}


.course-lab-outcomes li::before {
    content: "✓";

    position: absolute;

    left: 8px;
    top: 17px;

    display: grid;

    place-items: center;

    width: 27px;
    height: 27px;

    border:
        2px
        solid
        var(
            --rust,
            #BC6C25
        );

    border-radius: 50%;

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size: 13px;

    font-weight: 900;
}


/* ---------------------------------------------------------
   PARTICIPATION / SEATS
   --------------------------------------------------------- */

.course-lab-seats {
    display: grid;

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

    align-items: center;

    gap: 20px;

    margin:
        0
        0
        35px;

    padding:
        25px
        28px;

    background:
        var(
            --green,
            #283618
        );
}


.course-seat-group {
    text-align: center;
}


.course-seat-group > strong {
    display: block;

    margin-bottom: 6px;

    color:
        var(
            --amber,
            #DDA15E
        );

    font-size: 42px;

    line-height: 1;

    font-weight: 900;
}


.course-seat-group > span {
    display: block;

    margin-bottom: 17px;

    color:
        rgba(
            254,
            250,
            224,
            .60
        );

    font-size: 9px;

    font-weight: 850;

    letter-spacing: .16em;
}


.course-seat-group > div {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 6px;
}


.course-seat-group i {
    display: block;

    width: 13px;
    height: 13px;

    border:
        1px
        solid
        rgba(
            221,
            161,
            94,
            .65
        );

    border-radius: 50%;
}


.course-seat-group.active i {
    background:
        var(
            --amber,
            #DDA15E
        );
}


.course-seat-group.listener i {
    background:
        transparent;
}


.course-seat-divider {
    color:
        rgba(
            254,
            250,
            224,
            .30
        );

    font-size: 30px;

    text-align: center;
}


/* ---------------------------------------------------------
   IMPORTANT NOTES
   --------------------------------------------------------- */

.course-lab-section-content > p:has(
    > strong:first-child
) {
    position: relative;
}


.course-lab-section-content > p strong:first-child {
    color:
        var(
            --green,
            #283618
        );
}


/* ---------------------------------------------------------
   HERO — SCREENPLAY CLASSROOM
   --------------------------------------------------------- */

.story-page[
    data-course-lab="screenwriting-v1"
]
.story-art {
    position: relative;

    overflow: hidden;
}


.story-page[
    data-course-lab="screenwriting-v1"
]
.story-art-icon {
    position: relative;

    z-index: 8;
}


.course-screenwriting-hero {
    position: absolute;

    z-index: 2;

    inset: 8%;

    pointer-events: none;

    opacity: .50;
}


.course-hero-page {
    position: absolute;

    width: 57%;
    height: 73%;

    border:
        1px
        solid
        rgba(
            254,
            250,
            224,
            .32
        );
}


.course-hero-page.page-back {
    left: 18%;
    top: 15%;

    transform:
        rotate(-7deg);
}


.course-hero-page.page-front {
    left: 27%;
    top: 11%;

    transform:
        rotate(4deg);

    animation:
        courseHeroNotebook
        5.4s
        ease-in-out
        infinite;
}


.course-hero-scene {
    position: absolute;

    z-index: 5;

    left: 33%;
    top: 23%;

    color:
        rgba(
            254,
            250,
            224,
            .72
        );

    font-size: 13px;

    font-weight: 900;

    letter-spacing: .13em;
}


.course-hero-line {
    position: absolute;

    z-index: 5;

    left: 33%;

    height: 2px;

    background:
        rgba(
            254,
            250,
            224,
            .54
        );

    transform-origin:
        left center;

    animation:
        courseHeroTyping
        3.6s
        steps(8)
        infinite;
}


.course-hero-line.line-1 {
    top: 36%;

    width: 35%;
}


.course-hero-line.line-2 {
    top: 45%;

    width: 27%;

    animation-delay: .35s;
}


.course-hero-line.line-3 {
    top: 54%;

    width: 41%;

    animation-delay: .70s;
}


.course-hero-line.line-4 {
    top: 63%;

    width: 22%;

    animation-delay: 1.05s;
}


.course-hero-cursor {
    position: absolute;

    z-index: 6;

    left: 33%;
    top: 70%;

    width: 2px;
    height: 23px;

    background:
        rgba(
            254,
            250,
            224,
            .80
        );

    animation:
        courseLabCursor
        1s
        steps(2)
        infinite;
}


.course-hero-months {
    position: absolute;

    z-index: 7;

    left: 12%;
    right: 8%;
    bottom: 2%;

    display: flex;

    justify-content: space-between;
}


.course-hero-months span {
    display: grid;

    place-items: center;

    width: 31px;
    height: 31px;

    border:
        1px
        solid
        rgba(
            254,
            250,
            224,
            .42
        );

    border-radius: 50%;

    color:
        rgba(
            254,
            250,
            224,
            .66
        );

    font-size: 10px;

    font-weight: 850;
}


.course-screenwriting-hero > em {
    position: absolute;

    z-index: 7;

    right: 4%;
    top: 3%;

    color:
        rgba(
            254,
            250,
            224,
            .48
        );

    font-size: 12px;

    font-style: normal;

    font-weight: 850;

    letter-spacing: .14em;
}


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

@media (
    max-width: 1020px
) {

    .course-lab-section {
        grid-template-columns:
            115px
            minmax(
                0,
                1fr
            );

        gap: 28px;
    }


    .course-lab-module-label strong {
        font-size: 54px;
    }

}


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

@media (
    max-width: 760px
) {

    .story-page[
        data-course-lab="screenwriting-v1"
    ]
    .story-content {
        padding:
            32px
            0
            58px;
    }


    .course-lab-prose {
        width:
            calc(
                100% - 40px
            ) !important;
    }


    .course-lab-opening {
        margin-bottom: 25px;

        padding:
            0
            0
            22px
            17px;
    }


    .course-lab-opening > p {
        font-size:
            17px !important;

        line-height:
            1.66 !important;
    }


    .course-lab-opening > p:first-child {
        font-size:
            12px !important;
    }


    .course-lab-opening > p:nth-child(2) {
        font-size:
            27px !important;

        line-height:
            1.13 !important;
    }


    /*
     * Dashboard.
     */

    .course-lab-dashboard {
        margin-bottom: 42px;

        padding:
            25px
            20px
            24px;
    }


    .course-lab-dashboard::before {
        font-size: 106px;
    }


    .course-lab-dashboard-head {
        display: block;

        margin-bottom: 22px;
    }


    .course-lab-dashboard-head span {
        display: block;

        margin-bottom: 10px;
    }


    .course-lab-dashboard-head strong {
        font-size: 16px;
    }


    .course-lab-dashboard-facts {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }


    .course-lab-dashboard-facts > div {
        padding:
            18px
            12px;

        border-bottom:
            1px
            solid
            rgba(
                254,
                250,
                224,
                .15
            );
    }


    .course-lab-dashboard-facts > div:nth-child(2) {
        border-right: 0;
    }


    .course-lab-dashboard-facts > div:nth-child(3),
    .course-lab-dashboard-facts > div:nth-child(4) {
        border-bottom: 0;
    }


    .course-lab-dashboard-facts strong {
        font-size: 34px;
    }


    /*
     * Important:
     * no left module layout column on mobile.
     */

    .course-lab-section {
        display: block;

        margin-bottom: 43px;

        padding-bottom: 40px;
    }


    .course-lab-module-label {
        display: flex;

        align-items: baseline;

        gap: 13px;

        margin-bottom: 20px;

        padding-top: 0;
    }


    .course-lab-module-label span {
        margin: 0;

        font-size: 9px;
    }


    .course-lab-module-label strong {
        font-size: 48px;

        line-height: .8;
    }


    .course-lab-module-label::after {
        flex:
            0
            0
            0;

        margin:
            0
            0
            0
            2px;
    }


    .course-lab-section.is-active
    .course-lab-module-label::after {
        flex-basis: 46px;

        width: 46px;
    }


    .course-lab-section-heading {
        margin-bottom:
            22px !important;

        font-size:
            29px !important;

        line-height:
            1.12 !important;
    }


    .course-lab-section-content > p:not(
        .course-lab-section-heading
    ) {
        max-width: 100%;

        font-size:
            17px !important;

        line-height:
            1.70 !important;
    }


    .course-lab-section-content > ul:not(
        .course-lab-curriculum
    ):not(
        .course-lab-homework
    ):not(
        .course-lab-outcomes
    ) > li {
        font-size: 16px;

        line-height: 1.63;
    }


    /*
     * Methodology.
     */

    .course-lab-triad {
        grid-template-columns:
            1fr;

        gap: 10px;

        padding:
            20px
            17px;
    }


    .course-lab-triad > i {
        width: 1px;
        height: 24px;

        margin: 0 auto;

        background:
            rgba(
                188,
                108,
                37,
                .30
            );
    }


    /*
     * Curriculum.
     */

    .course-lab-curriculum li {
        grid-template-columns:
            45px
            minmax(
                0,
                1fr
            );

        gap: 12px;

        padding:
            15px
            0 !important;

        font-size:
            16px !important;

        line-height:
            1.58 !important;
    }


    .course-lab-curriculum li::before {
        font-size: 21px;
    }


    /*
     * Homework.
     */

    .course-lab-homework {
        display: block;
    }


    .course-lab-homework li {
        min-height: 0;

        padding:
            15px
            4px
            15px
            39px !important;

        font-size:
            16px !important;
    }


    /*
     * Reading / screening / writing visuals:
     * background only, never a layout column.
     */

    .course-lab-practice-room
    .course-lab-section-content {
        max-width: 100%;
    }


    .course-lab-room-visual {
        top: 4px;
        right: -35px;

        width: 110px;
        height: 110px;

        opacity: .035;

        transform:
            scale(.72);

        transform-origin:
            top right;
    }


    /*
     * Outcomes.
     */

    .course-lab-outcomes li {
        padding:
            17px
            3px
            17px
            45px !important;

        font-size:
            16px !important;

        line-height:
            1.60 !important;
    }


    /*
     * Seats.
     */

    .course-lab-seats {
        grid-template-columns:
            1fr;

        gap: 21px;

        padding:
            23px
            18px;
    }


    .course-seat-divider {
        font-size: 18px;
    }


    .course-seat-group > strong {
        font-size: 37px;
    }


    /*
     * Hero decorations remain inside existing hero art.
     */

    .course-screenwriting-hero {
        inset:
            14%
            6%;

        opacity: .35;
    }


    .course-hero-scene {
        font-size: 9px;
    }


    .course-hero-months span {
        width: 24px;
        height: 24px;

        font-size: 8px;
    }


    .course-screenwriting-hero > em {
        display: none;
    }

}


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

@media (
    max-width: 390px
) {

    .course-lab-prose {
        width:
            calc(
                100% - 32px
            ) !important;
    }


    .course-lab-dashboard {
        padding-left: 16px;
        padding-right: 16px;
    }


    .course-lab-module-label strong {
        font-size: 44px;
    }


    .course-lab-section-heading {
        font-size:
            27px !important;
    }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (
    prefers-reduced-motion: reduce
) {

    .course-lab-semester i,

    .course-lab-triad > i,

    .course-lab-curriculum li::after,

    .course-lab-room-visual i,

    .course-hero-page.page-front,
    .course-hero-line,
    .course-hero-cursor {
        animation:
            none !important;

        transition:
            none !important;
    }

}


/* ---------------------------------------------------------
   ANIMATIONS
   --------------------------------------------------------- */

@keyframes courseSemesterRunner {

    0% {
        left: 0;
    }

    33% {
        left: 33%;
    }

    66% {
        left: 66%;
    }

    100% {
        left:
            calc(
                100% - 11px
            );
    }

}


@keyframes courseLabConnector {

    0%,
    100% {
        transform:
            scaleX(.15);

        opacity: .20;
    }

    50% {
        transform:
            scaleX(1);

        opacity: .80;
    }

}


@keyframes courseCurriculumScan {

    0%,
    100% {
        width: 0;

        opacity: .10;
    }

    50% {
        width: 100%;

        opacity: .70;
    }

}


@keyframes courseScreeningRunner {

    0% {
        left: 10px;
    }

    100% {
        left:
            calc(
                100% - 24px
            );
    }

}


@keyframes courseWritingLine {

    0%,
    15% {
        transform:
            scaleX(.05);

        opacity: .18;
    }

    58%,
    82% {
        transform:
            scaleX(1);

        opacity: 1;
    }

    100% {
        opacity: .30;
    }

}


@keyframes courseLabCursor {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: .15;
    }

}


@keyframes courseHeroNotebook {

    0%,
    100% {
        transform:
            translate(
                0,
                0
            )
            rotate(4deg);
    }

    50% {
        transform:
            translate(
                7px,
                -5px
            )
            rotate(1deg);
    }

}


@keyframes courseHeroTyping {

    0%,
    14% {
        transform:
            scaleX(.04);

        opacity: .18;
    }

    55%,
    82% {
        transform:
            scaleX(1);

        opacity: 1;
    }

    100% {
        opacity: .32;
    }

}


/* =========================================================
   END SCREENWRITING COURSE LAB DESIGN V1
   ========================================================= */



/* =========================================================
   SCREENWRITING COURSE VISIBILITY CSS V2
   ========================================================= */


/*
 * Generic reveal systems are forbidden from hiding
 * the structural course wrappers on this route.
 */

html[
    data-screenwriting-course-visibility="v2"
]
.story-page,

html[
    data-screenwriting-course-visibility="v2"
]
.story-content,

html[
    data-screenwriting-course-visibility="v2"
]
.story-content-inner,

html[
    data-screenwriting-course-visibility="v2"
]
.story-content-wrap,

html[
    data-screenwriting-course-visibility="v2"
]
.story-body,

html[
    data-screenwriting-course-visibility="v2"
]
.story-main,

html[
    data-screenwriting-course-visibility="v2"
]
.story-prose {
    opacity:
        1 !important;

    visibility:
        visible !important;

    filter:
        none !important;

    clip-path:
        none !important;

    -webkit-clip-path:
        none !important;

    mask:
        none !important;

    -webkit-mask:
        none !important;

    content-visibility:
        visible !important;

    max-height:
        none !important;

    animation-delay:
        0s !important;

    transition-delay:
        0s !important;
}


/*
 * Neutralize movement only on large layout wrappers.
 * Internal cinematic Lab decoration is NOT targeted.
 */

html[
    data-screenwriting-course-visibility="v2"
]
.story-content,

html[
    data-screenwriting-course-visibility="v2"
]
.story-content-inner,

html[
    data-screenwriting-course-visibility="v2"
]
.story-content-wrap,

html[
    data-screenwriting-course-visibility="v2"
]
.story-body,

html[
    data-screenwriting-course-visibility="v2"
]
.story-main,

html[
    data-screenwriting-course-visibility="v2"
]
.story-prose {
    transform:
        none !important;
}


/*
 * Source fallback.
 *
 * Even if the Lab JS parser exits,
 * original server-rendered course content stays visible.
 */

html[
    data-screenwriting-course-visibility="v2"
]
.story-prose {
    display:
        block !important;

    position:
        relative !important;

    height:
        auto !important;

    min-height:
        0 !important;

    overflow:
        visible !important;
}


html[
    data-screenwriting-course-visibility="v2"
]
.story-prose > * {
    opacity:
        1 !important;

    visibility:
        visible !important;

    filter:
        none !important;

    content-visibility:
        visible !important;
}


/*
 * Successful Lab state.
 */

html[
    data-screenwriting-course-visibility="v2"
][
    data-course-detail="screenwriting-lab-v1"
]
.course-lab-prose,

html[
    data-screenwriting-course-visibility="v2"
]
.course-lab-opening,

html[
    data-screenwriting-course-visibility="v2"
]
.course-lab-dashboard,

html[
    data-screenwriting-course-visibility="v2"
]
.course-lab-section,

html[
    data-screenwriting-course-visibility="v2"
]
.course-lab-section-content {
    opacity:
        1 !important;

    visibility:
        visible !important;

    filter:
        none !important;

    content-visibility:
        visible !important;
}


/*
 * Lab structural modules stay in normal document flow.
 */

html[
    data-screenwriting-course-visibility="v2"
]
.course-lab-opening,

html[
    data-screenwriting-course-visibility="v2"
]
.course-lab-dashboard,

html[
    data-screenwriting-course-visibility="v2"
]
.course-lab-section {
    position:
        relative !important;
}


/* =========================================================
   END SCREENWRITING COURSE VISIBILITY CSS V2
   ========================================================= */


/* =========================================================
   COURSE MODULE 01 DESKTOP BALANCE V1

   Methodology module:
   heading / triad / body copy use one visual measure.

   Mobile is intentionally untouched.
   ========================================================= */

@media (
    min-width: 761px
) {

    /*
     * The original module content column is wider than
     * its reading text. Restrict MODULE 01 itself to one
     * coherent editorial measure.
     */

    .course-lab-section[
        data-lab-section="method"
    ]
    .course-lab-section-content {
        width:
            100%;

        max-width:
            880px;

        justify-self:
            start;
    }


    /*
     * Heading follows the same measure.
     */

    .course-lab-section[
        data-lab-section="method"
    ]
    .course-lab-section-heading {
        width:
            100%;

        max-width:
            880px;
    }


    /*
     * 01 BİLMƏK / 02 GÖRMƏK / 03 TƏTBİQ ETMƏK
     * no longer stretches beyond the paragraphs below.
     */

    .course-lab-section[
        data-lab-section="method"
    ]
    .course-lab-triad {
        width:
            100%;

        max-width:
            880px;

        box-sizing:
            border-box;

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

        margin:
            0
            0
            26px;

        padding:
            22px
            24px;
    }


    /*
     * Paragraphs now terminate on the same right axis
     * as the methodology panel.
     */

    .course-lab-section[
        data-lab-section="method"
    ]
    .course-lab-section-content
    > p:not(
        .course-lab-section-heading
    ) {
        width:
            100%;

        max-width:
            880px;
    }


    /*
     * Slightly tighten the vertical rhythm of MODULE 01.
     */

    .course-lab-section[
        data-lab-section="method"
    ]
    .course-lab-triad
    + p {
        margin-top:
            0 !important;
    }

}


/* =========================================================
   END COURSE MODULE 01 DESKTOP BALANCE V1
   ========================================================= */


/* =========================================================
   REWRITE ROOM COURSE DESIGN V1

   EDIT BAY / REDLINE / BEFORE-AFTER / REVISION PASSES.

   NOT SERVICES.
   NOT SCREENWRITING LAB.
   NOT COURSES INDEX.
   ========================================================= */


/* ---------------------------------------------------------
   VISIBILITY FAILSAFE
   --------------------------------------------------------- */

html[
    data-rewrite-room-visibility="v1"
]
.story-page,

html[
    data-rewrite-room-visibility="v1"
]
.story-content,

html[
    data-rewrite-room-visibility="v1"
]
.story-content-inner,

html[
    data-rewrite-room-visibility="v1"
]
.story-content-wrap,

html[
    data-rewrite-room-visibility="v1"
]
.story-body,

html[
    data-rewrite-room-visibility="v1"
]
.story-main,

html[
    data-rewrite-room-visibility="v1"
]
.story-prose {
    opacity:
        1 !important;

    visibility:
        visible !important;

    filter:
        none !important;

    content-visibility:
        visible !important;

    max-height:
        none !important;
}


html[
    data-rewrite-room-visibility="v1"
]
.story-prose {
    display:
        block !important;
}


/* ---------------------------------------------------------
   PAGE
   --------------------------------------------------------- */

html[
    data-course-rewrite-detail="v1"
],
html[
    data-course-rewrite-detail="v1"
]
body {
    overflow-x:
        clip;
}


.story-page[
    data-rewrite-room="v1"
]
.story-content {
    position:
        relative;

    min-height:
        auto !important;

    overflow:
        hidden;

    padding:
        54px
        0
        90px;

    background:
        #fbfaf5 !important;
}


.story-page[
    data-rewrite-room="v1"
]
.story-content::before {
    content: "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            transparent
                0
                49.95%,
            rgba(
                188,
                108,
                37,
                .035
            )
                49.95%
                50.05%,
            transparent
                50.05%
        ),
        repeating-linear-gradient(
            180deg,
            transparent
                0
                45px,
            rgba(
                40,
                54,
                24,
                .021
            )
                45px
                46px
        );
}


.rewrite-room-prose {
    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(
                100% - 48px
            ),
            1180px
        ) !important;

    max-width:
        1180px !important;

    margin:
        0
        auto !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    content-visibility:
        visible !important;
}


.rewrite-room-prose::before,
.rewrite-room-prose::after {
    display:
        none !important;
}


/* ---------------------------------------------------------
   OPENING — REWRITE BRIEF
   --------------------------------------------------------- */

.rewrite-room-opening {
    position:
        relative;

    margin:
        0
        0
        30px;

    padding:
        34px
        42px
        34px
        180px;

    overflow:
        hidden;

    border-top:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .14
        );

    border-bottom:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .14
        );

    background:
        rgba(
            255,
            255,
            255,
            .70
        );
}


.rewrite-room-opening::before {
    content:
        "REWRITE\A BRIEF";

    white-space:
        pre;

    position:
        absolute;

    left:
        31px;
    top:
        34px;

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size:
        13px;

    line-height:
        1.35;

    font-weight:
        900;

    letter-spacing:
        .17em;
}


.rewrite-room-opening::after {
    content: "";

    position:
        absolute;

    left:
        136px;
    top:
        26px;
    bottom:
        26px;

    width:
        1px;

    background:
        rgba(
            188,
            108,
            37,
            .28
        );
}


.rewrite-room-opening > p {
    max-width:
        870px;

    margin:
        0
        0
        14px !important;

    color:
        rgba(
            40,
            54,
            24,
            .76
        ) !important;

    font-size:
        18px !important;

    line-height:
        1.74 !important;
}


.rewrite-room-opening > p:first-child {
    margin-bottom:
        13px !important;

    color:
        var(
            --green,
            #283618
        ) !important;

    font-size:
        29px !important;

    line-height:
        1.12 !important;

    font-weight:
        850 !important;

    letter-spacing:
        -.025em;
}


/* ---------------------------------------------------------
   REVISION CONSOLE
   --------------------------------------------------------- */

.rewrite-room-console {
    position:
        relative;

    isolation:
        isolate;

    margin:
        0
        0
        62px;

    padding:
        28px
        34px
        30px;

    overflow:
        hidden;

    background:
        var(
            --green,
            #283618
        );
}


.rewrite-room-console::before {
    content:
        "BEFORE / AFTER";

    position:
        absolute;

    z-index:
        0;

    right:
        -10px;
    bottom:
        -22px;

    color:
        rgba(
            254,
            250,
            224,
            .035
        );

    font-size:
        98px;

    line-height:
        .8;

    font-weight:
        900;

    letter-spacing:
        -.065em;
}


.rewrite-console-head {
    position:
        relative;

    z-index:
        3;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        baseline;

    gap:
        24px;

    margin-bottom:
        24px;
}


.rewrite-console-head span {
    color:
        var(
            --amber,
            #DDA15E
        );

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .17em;
}


.rewrite-console-head strong {
    color:
        rgba(
            254,
            250,
            224,
            .66
        );

    font-size:
        15px;

    font-weight:
        700;

    letter-spacing:
        .08em;
}


.rewrite-console-facts {
    position:
        relative;

    z-index:
        3;

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    border-top:
        1px
        solid
        rgba(
            254,
            250,
            224,
            .16
        );

    border-bottom:
        1px
        solid
        rgba(
            254,
            250,
            224,
            .16
        );
}


.rewrite-console-facts > div {
    padding:
        22px
        18px;

    border-right:
        1px
        solid
        rgba(
            254,
            250,
            224,
            .14
        );
}


.rewrite-console-facts > div:last-child {
    border-right:
        0;
}


.rewrite-console-facts strong {
    display:
        block;

    margin-bottom:
        7px;

    color:
        var(
            --amber,
            #DDA15E
        );

    font-size:
        39px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        -.045em;
}


.rewrite-console-facts span {
    color:
        rgba(
            254,
            250,
            224,
            .60
        );

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .16em;
}


.rewrite-console-track {
    position:
        relative;

    z-index:
        3;

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    height:
        17px;

    margin-top:
        21px;
}


.rewrite-console-track::before {
    content: "";

    position:
        absolute;

    left:
        0;
    right:
        0;
    top:
        50%;

    height:
        1px;

    background:
        rgba(
            254,
            250,
            224,
            .22
        );
}


.rewrite-console-track span {
    position:
        relative;
}


.rewrite-console-track span::before {
    content: "";

    position:
        absolute;

    left:
        0;
    top:
        50%;

    width:
        10px;
    height:
        10px;

    border:
        2px
        solid
        var(
            --amber,
            #DDA15E
        );

    border-radius:
        50%;

    background:
        var(
            --green,
            #283618
        );

    transform:
        translateY(
            -50%
        );
}


.rewrite-console-track i {
    position:
        absolute;

    z-index:
        5;

    left:
        0;
    top:
        50%;

    width:
        11px;
    height:
        11px;

    border-radius:
        50%;

    background:
        var(
            --amber,
            #DDA15E
        );

    transform:
        translateY(
            -50%
        );

    box-shadow:
        0
        0
        14px
        rgba(
            221,
            161,
            94,
            .75
        );
}


.rewrite-room-console.is-active
.rewrite-console-track i {
    animation:
        rewriteConsoleRunner
        4.8s
        ease-in-out
        infinite;
}


/* ---------------------------------------------------------
   REVISION PASSES
   --------------------------------------------------------- */

.rewrite-pass {
    position:
        relative;

    isolation:
        isolate;

    margin:
        0
        0
        64px;

    overflow:
        hidden;
}


.rewrite-pass-header {
    position:
        relative;

    z-index:
        5;

    display:
        flex;

    align-items:
        flex-end;

    gap:
        19px;

    margin-bottom:
        21px;
}


.rewrite-pass-header span {
    order:
        2;

    padding-bottom:
        8px;

    color:
        rgba(
            40,
            54,
            24,
            .46
        );

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .16em;
}


.rewrite-pass-header strong {
    order:
        1;

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size:
        88px;

    line-height:
        .76;

    font-weight:
        900;

    letter-spacing:
        -.075em;
}


.rewrite-pass-content {
    position:
        relative;

    z-index:
        4;
}


.rewrite-pass-heading {
    max-width:
        880px;

    margin:
        0
        0
        24px !important;

    color:
        var(
            --green,
            #283618
        ) !important;

    font-size:
        34px !important;

    line-height:
        1.12 !important;

    font-weight:
        850 !important;

    letter-spacing:
        -.035em !important;
}


.rewrite-pass-content > p:not(
    .rewrite-pass-heading
) {
    max-width:
        880px;

    margin:
        0
        0
        22px !important;

    color:
        rgba(
            40,
            54,
            24,
            .76
        ) !important;

    font-size:
        18px !important;

    line-height:
        1.78 !important;
}


/* ---------------------------------------------------------
   PASS 01 — STRUCTURE SCAN
   --------------------------------------------------------- */

.rewrite-pass[
    data-rewrite-pass="structure"
] {
    min-height:
        420px;

    padding:
        42px
        320px
        42px
        44px;

    border:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .12
        );

    border-top:
        4px
        solid
        var(
            --rust,
            #BC6C25
        );

    background:
        #fff;
}


.rewrite-pass[
    data-rewrite-pass="structure"
]
.rewrite-pass-header {
    margin-bottom:
        24px;
}


.rewrite-structure-scan {
    position:
        absolute;

    z-index:
        1;

    right:
        30px;
    top:
        55px;

    width:
        250px;
    height:
        300px;

    opacity:
        .15;

    pointer-events:
        none;
}


.rewrite-structure-before,
.rewrite-structure-after {
    position:
        absolute;

    top:
        30px;

    width:
        86px;
    height:
        210px;

    border:
        2px
        solid
        var(
            --rust,
            #BC6C25
        );
}


.rewrite-structure-before {
    left:
        5px;

    transform:
        rotate(
            -4deg
        );
}


.rewrite-structure-after {
    right:
        5px;

    transform:
        rotate(
            4deg
        );
}


.rewrite-structure-before span,
.rewrite-structure-after span {
    display:
        block;

    height:
        3px;

    margin:
        25px
        13px
        0;

    background:
        var(
            --green,
            #283618
        );
}


.rewrite-structure-before span:nth-child(2) {
    width:
        42%;
}


.rewrite-structure-before span:nth-child(3) {
    width:
        68%;
}


.rewrite-structure-after span:nth-child(1) {
    width:
        67%;
}


.rewrite-structure-after span:nth-child(2) {
    width:
        48%;
}


.rewrite-structure-after span:nth-child(3) {
    width:
        72%;
}


.rewrite-structure-axis {
    position:
        absolute;

    left:
        99px;
    right:
        99px;
    top:
        47%;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;
}


.rewrite-structure-axis::before {
    content: "";

    position:
        absolute;

    left:
        0;
    right:
        0;
    top:
        50%;

    height:
        2px;

    background:
        var(
            --rust,
            #BC6C25
        );
}


.rewrite-structure-axis i {
    position:
        relative;

    z-index:
        2;

    width:
        8px;
    height:
        8px;

    border-radius:
        50%;

    background:
        var(
            --rust,
            #BC6C25
        );
}


.rewrite-structure-scan > b {
    position:
        absolute;

    z-index:
        5;

    left:
        0;
    right:
        0;
    top:
        42%;

    height:
        2px;

    background:
        var(
            --amber,
            #DDA15E
        );

    box-shadow:
        0
        0
        9px
        rgba(
            221,
            161,
            94,
            .70
        );
}


.rewrite-pass[
    data-rewrite-pass="structure"
].is-active
.rewrite-structure-scan > b {
    animation:
        rewriteStructureScan
        2.8s
        ease-in-out
        infinite;
}


/* ---------------------------------------------------------
   PASS 02 — LEARNING / REWRITE LOOP
   --------------------------------------------------------- */

.rewrite-pass[
    data-rewrite-pass="learning"
] {
    padding:
        48px
        46px
        52px;

    background:
        var(
            --green,
            #283618
        );
}


.rewrite-pass[
    data-rewrite-pass="learning"
]
.rewrite-pass-header span {
    color:
        rgba(
            254,
            250,
            224,
            .43
        );
}


.rewrite-pass[
    data-rewrite-pass="learning"
]
.rewrite-pass-header strong {
    color:
        var(
            --amber,
            #DDA15E
        );
}


.rewrite-pass[
    data-rewrite-pass="learning"
]
.rewrite-pass-heading {
    color:
        #fdf9e8 !important;
}


.rewrite-pass[
    data-rewrite-pass="learning"
]
.rewrite-pass-content > p:not(
    .rewrite-pass-heading
) {
    color:
        rgba(
            254,
            250,
            224,
            .72
        ) !important;
}


.rewrite-learning-loop {
    display:
        grid;

    grid-template-columns:
        1fr
        45px
        1fr
        45px
        1fr
        45px
        1fr;

    align-items:
        center;

    max-width:
        900px;

    margin:
        0
        0
        32px;

    padding:
        22px
        24px;

    border-top:
        1px
        solid
        rgba(
            221,
            161,
            94,
            .38
        );

    border-bottom:
        1px
        solid
        rgba(
            221,
            161,
            94,
            .38
        );
}


.rewrite-learning-loop span {
    color:
        rgba(
            254,
            250,
            224,
            .72
        );

    font-size:
        11px;

    line-height:
        1.2;

    font-weight:
        850;

    letter-spacing:
        .12em;

    text-align:
        center;
}


.rewrite-learning-loop b {
    display:
        block;

    margin-bottom:
        8px;

    color:
        var(
            --amber,
            #DDA15E
        );

    font-size:
        23px;

    line-height:
        1;

    font-weight:
        900;
}


.rewrite-learning-loop i {
    height:
        1px;

    background:
        rgba(
            221,
            161,
            94,
            .42
        );

    transform-origin:
        left center;
}


.rewrite-pass[
    data-rewrite-pass="learning"
].is-active
.rewrite-learning-loop i {
    animation:
        rewriteLoopConnector
        2.5s
        ease-in-out
        infinite;
}


.rewrite-case-study {
    position:
        relative;

    margin-top:
        34px !important;

    padding:
        25px
        28px
        25px
        72px !important;

    max-width:
        940px !important;

    border:
        1px
        solid
        rgba(
            221,
            161,
            94,
            .30
        );

    background:
        rgba(
            254,
            250,
            224,
            .045
        );

    color:
        rgba(
            254,
            250,
            224,
            .83
        ) !important;
}


.rewrite-case-study::before {
    content:
        "CASE";

    position:
        absolute;

    left:
        20px;
    top:
        30px;

    color:
        var(
            --amber,
            #DDA15E
        );

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .15em;

    writing-mode:
        vertical-rl;

    transform:
        rotate(
            180deg
        );
}


.rewrite-case-study-follow {
    max-width:
        940px !important;

    padding-left:
        72px !important;
}


/* ---------------------------------------------------------
   PASS 03 — DETAILS / FINAL DRAFT
   --------------------------------------------------------- */

.rewrite-pass[
    data-rewrite-pass="details"
] {
    padding:
        44px
        46px
        54px;

    border:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .12
        );

    background:
        #fff;
}


.rewrite-details-grid {
    display:
        grid;

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

    gap:
        12px;

    margin:
        0
        0
        30px !important;

    padding:
        0 !important;

    list-style:
        none !important;
}


.rewrite-details-grid li {
    position:
        relative;

    min-height:
        90px;

    margin:
        0 !important;

    padding:
        22px
        22px
        22px
        72px !important;

    border:
        1px
        solid
        rgba(
            40,
            54,
            24,
            .11
        );

    background:
        rgba(
            254,
            250,
            224,
            .38
        );

    color:
        rgba(
            40,
            54,
            24,
            .77
        ) !important;

    font-size:
        17px !important;

    line-height:
        1.58 !important;
}


.rewrite-details-grid li::before {
    content:
        attr(
            data-detail
        );

    position:
        absolute;

    left:
        20px;
    top:
        21px;

    color:
        var(
            --rust,
            #BC6C25
        );

    font-size:
        23px;

    line-height:
        1;

    font-weight:
        900;
}


.rewrite-pass[
    data-rewrite-pass="details"
]
.rewrite-pass-content > p:not(
    .rewrite-pass-heading
) {
    max-width:
        900px;
}


.rewrite-final-stamp {
    position:
        absolute;

    z-index:
        2;

    right:
        42px;
    bottom:
        35px;

    display:
        grid;

    place-items:
        center;

    width:
        128px;
    height:
        128px;

    border:
        3px
        solid
        rgba(
            188,
            108,
            37,
            .18
        );

    border-radius:
        50%;

    transform:
        rotate(
            -9deg
        );

    opacity:
        .52;

    pointer-events:
        none;
}


.rewrite-final-stamp span {
    color:
        rgba(
            188,
            108,
            37,
            .70
        );

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .18em;
}


.rewrite-final-stamp strong {
    color:
        var(
            --rust,
            #BC6C25
        );

    font-size:
        21px;

    line-height:
        1;

    font-weight:
        900;
}


.rewrite-final-stamp i {
    color:
        var(
            --rust,
            #BC6C25
        );

    font-size:
        24px;

    line-height:
        1;

    font-style:
        normal;
}


/* ---------------------------------------------------------
   HERO — EDIT BAY
   --------------------------------------------------------- */

.story-page[
    data-rewrite-room="v1"
]
.story-art {
    position:
        relative;

    overflow:
        hidden;
}


.rewrite-course-hero {
    position:
        absolute;

    z-index:
        3;

    inset:
        9%;

    pointer-events:
        none;

    opacity:
        .56;
}


.rewrite-hero-sheet {
    position:
        absolute;

    top:
        16%;

    width:
        34%;
    height:
        66%;

    padding:
        19px
        15px;

    box-sizing:
        border-box;

    border:
        1px
        solid
        rgba(
            254,
            250,
            224,
            .34
        );
}


.rewrite-hero-sheet.before {
    left:
        11%;

    transform:
        rotate(
            -5deg
        );
}


.rewrite-hero-sheet.after {
    right:
        11%;

    transform:
        rotate(
            4deg
        );
}


.rewrite-hero-sheet b {
    display:
        block;

    margin-bottom:
        20px;

    color:
        rgba(
            254,
            250,
            224,
            .55
        );

    font-size:
        8px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        .16em;
}


.rewrite-hero-sheet span {
    display:
        block;

    height:
        2px;

    margin-bottom:
        16px;

    background:
        rgba(
            254,
            250,
            224,
            .32
        );
}


.rewrite-hero-sheet span:nth-of-type(1) {
    width:
        86%;
}


.rewrite-hero-sheet span:nth-of-type(2) {
    width:
        62%;
}


.rewrite-hero-sheet span:nth-of-type(3) {
    width:
        91%;
}


.rewrite-hero-sheet span:nth-of-type(4) {
    width:
        70%;
}


.rewrite-hero-sheet.before i {
    position:
        absolute;

    left:
        14px;

    height:
        3px;

    background:
        rgba(
            221,
            161,
            94,
            .88
        );

    transform-origin:
        left center;

    animation:
        rewriteHeroStrike
        3.4s
        ease-in-out
        infinite;
}


.rewrite-hero-sheet.before i:nth-of-type(1) {
    top:
        42%;

    width:
        67%;
}


.rewrite-hero-sheet.before i:nth-of-type(2) {
    top:
        66%;

    width:
        57%;

    animation-delay:
        .55s;
}


.rewrite-hero-playhead {
    position:
        absolute;

    z-index:
        8;

    top:
        10%;
    bottom:
        10%;

    left:
        49%;

    width:
        2px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(
                254,
                250,
                224,
                .78
            ),
            transparent
        );

    animation:
        rewriteHeroPlayhead
        3.8s
        ease-in-out
        infinite;
}


.rewrite-hero-mark {
    position:
        absolute;

    z-index:
        9;

    right:
        3%;
    top:
        5%;

    display:
        grid;

    place-items:
        center;

    width:
        45px;
    height:
        45px;

    border:
       
        solid
        rgba(
            254,
            250,
            224
            .58
        );

    border-radius:
        50%;

    color:
        rgba(
            254,
      
          

        );

    font-size:
        22px;

    font-weight:
   


        rewriteHeroMark
        2.6s
        ease-in-out
        infinite;
}


.rewrite-course-hero > strong {
    pos
        ab

    left:
    
    bottom:
        2%;

    color:
        
            254,
  
            22
 


    font-size:
        11px;

    line-h
        1;


        900;

    letter-spacing:
        .16em;
}


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

@media (
    max-width: 1020px
) {

    .rewrite-pass[
        data-rewrite-pass="structure"
    ] {
        padding-right:
            255px;
    }


    .rewrite-structure-scan {
        right:
            18px;

        width:
            210px;
    }


    .rewrite-pass-header strong {
        font-size:
            76px;
    }

}


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

@media (
    max-width: 760px
) {

    .story-page[
        data-rewrite-room="v1"
    ]
    .story-content {
        padding:
            32px
            0
            58px;
    }


    .rewrite-room-prose {
        width:
            calc(
                100% - 40px
            ) !important;
    }


    .rewrite-room-opening {
        margin-bottom:
            24px;

        padding:
            57px
            20px
            24px;
    }


    .rewrite-room-opening::before {
        left:
            20px;
        top:
            20px;

        white-space:
            normal;

        font-size:
            10px;
    }


    .rewrite-room-opening::after {
        display:
            none;
    }


    .rewrite-room-opening > p {
        font-size:
            17px !important;

        line-height:
            1.67 !important;
    }


    .rewrite-room-opening > p:first-child {
        font-size:
            25px !important;

        line-height:
            1.13 !important;
    }


    .rewrite-room-console {
        margin-bottom:
            38px;

        padding:
            24px
            17px;
    }


    .rewrite-room-console::before {
        font-size:
            55px;
    }


    .rewrite-console-head {
        display:
            block;
    }


    .rewrite-console-head span {
        display:
            block;

        margin-bottom:
            9px;
    }


    .rewrite-console-head strong {
        font-size:
            13px;
    }


    .rewrite-console-facts {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }


    .rewrite-console-facts > div {
        padding:
            17px
            10px;

        border-bottom:
            1px
            solid
            rgba(
                254,
                250,
                224,
                .14
            );
    }


    .rewrite-console-facts > div:nth-child(2) {
        border-right:
            0;
    }


    .rewrite-console-facts > div:nth-child(3),
    .rewrite-console-facts > div:nth-child(4) {
        border-bottom:
            0;
    }


    .rewrite-console-facts strong {
        font-size:
            31px;
    }


    .rewrite-pass {
        margin-bottom:
            38px;
    }


    .rewrite-pass-header {
        gap:
            13px;

        margin-bottom:
            19px;
    }


    .rewrite-pass-header strong {
        font-size:
            54px;
    }


    .rewrite-pass-header span {
        padding-bottom:
            5px;

        font-size:
            9px;
    }


    .rewrite-pass-heading {
        max-width:
            100%;

        margin-bottom:
            20px !important;

        font-size:
            28px !important;

        line-height:
            1.12 !important;
    }


    .rewrite-pass-content > p:not(
        .rewrite-pass-heading
    ) {
        max-width:
            100%;

        font-size:
            17px !important;

        line-height:
            1.69 !important;
    }


    /*
     * PASS 01:
     * decoration owns no layout column on mobile.
     */

    .rewrite-pass[
        data-rewrite-pass="structure"
    ] 
eight:
            0;

        padding:
            28px
            20px
            30px;
    }


    .rewrite-structure
        right:
          -42px;
        top:
            17px;

        width:
            130px;
        height:
          

       
            .035

 orm:
            scale(
                .82
            );

        trans
            



    .rewrite-pass
        data-rpass="learning"
    ] {
        padding:
            30px
            20px
            34px;
    }


    .rewrite-learning-loop {
        grid-template-columns:
            repeat(
                2,
                1fr
            );

        gap:
            10px;

        margin-bottom:
            26px;

        padding:
            17px;
    }


    .rewrite-learning-loop i {
        display:
            none;
    }


    .rewrite-learning-loop span {
        padding:
            13px
            6px;

        border:
            1px
            solid
            rgba(
                221,
                161,
                94,
                .24
            );
    }


    .rewrite-case-study {
        margin-top:
            26px !important;

        padding:
            22px
            18px
            22px
            48px !important;
    }


    .rewrite-case-study::before {
        left:
            14px;
        top:
            25px;

        font-size:
            8px;
    }


    .rewrite-case-study-follow {
        padding-left:
            0 !important;
    }


    .rewrite-pass[
        data-rewrite-pass="details"
    ] {
        padding:
            28px
            20px
            32px;
    }


    .rewrite-details-grid {
        grid-template-columns:
            1fr;

        gap:
            9px;
    }


    .rewrite-details-grid li {
        min-height:
            0;

        padding:
            17px
            14px
            17px
            56px !important;

        font-size:
            16px !important;

        line-height:
            1.58 !important;
    }


    .rewrite-details-grid li::before {
        left:
            16px;
        top:
            18px;

        font-size:
            20px;
    }


    .rewrite-final-stamp {
        right:
            -24px;
        bottom:
            7px;

        width:
            90px;
        height:
            90px;

        opacity:
            .10;
    }


    .rewrite-final-stamp strong {
        font-size:
            15px;
    }


    .rewrite-course-hero {
        inset:
            14%
            4%;

        opacity:
            .32;
    }


    .rewrite-hero-sheet {
        width:
            38%;
    }


    .rewrite-hero-mark {
        width:
            32px;
        height:
            32px;

        font-size:
            16px;
    }


    .rewrite-course-hero > strong {
        font-size:
            8px;
    }

}


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

@media (
    max-width: 390px
) {

    .rewrite-room-prose {
        width:
            calc(
                100% - 32px
            ) !important;
    }


    .rewrite-pass-header strong {
        font-size:
            50px;
    }


    .rewrite-pass-heading {
        font-size:
            26px !important;
    }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (
    prefers-reduced-motion: reduce
) {

    .rewrite-console-track i,

    .rewrite-structure-scan > b,

    .rewrite-learning-loop i,

    .rewrite-hero-sheet.before i,

    .rewrite-hero-playhead,

    .rewrite-hero-mark {
        animation:
            none !important;

        transition:
            none !important;
    }

}


/* ---------------------------------------------------------
   ANIMATIONS
   --------------------------------------------------------- */

@keyframes rewriteConsoleRunner {

    0% {
        left:
            0;
    }

    50% {
        left:
            50%;
    }

    100% {
        left:
            calc(
                100% - 11px
            );
    }

}


@keyframes rewriteStructureScan {

    0%,
    100% {
        top:
            19%;

        opacity:
            .25;
    }

    50% {
        top:
            74%;

        opacity:
            1;
    }

}


@keyframes rewriteLoopConnector {

    0%,
    100% {
        transform:
            scaleX(
                .12
            );

        opacity:
            .18;
    }

    50% {
        transform:
            scaleX(
                1
            );

        opacity:
            .90;
    }

}


@keyframes rewriteHeroStrike {

    0%,
    15% {
        transform:
            scaleX(
                .05
            );

        opacity:
            .15;
    }

    55%,
    84% {
        transform:
            scaleX(
                1
            );

        opacity:
            1;
    }

    100% {
        opacity:
            .25;
    }

}


@keyframes rewriteHeroPlayhead {

    0%,
    100% {
        left:
            46%;

        opacity:
            .25;
    }

    50% {
        left:
            54%;

        opacity:
            1;
    }

}


@keyframes rewriteHeroMark {

    0%,
    100% {
        transform:
            scale(
                .82
            )
            rotate(
                -7deg
            );

        opacity:
            .36;
    }

    50% {
        transform:
            scale(
                1.08
            )
            rotate(
                2deg
            );

        opacity:
            1;
    }

}


/* =========================================================
   END REWRITE ROOM COURSE DESIGN V1
   ========================================================= */


/* =========================================================
   REWRITE ROOM CINEMATIC DESIGN V2

   Desktop refinement:
   - stronger hierarchy
   - larger editorial numerals
   - NLE / edit-bay timeline
   - large before/after plate
   - revision waveform
   - final export strip
   - asymmetrical cinematic composition

   Existing mobile V1 remains primary mobile layout.
   ========================================================= */


/* ---------------------------------------------------------
   DESKTOP CINEMATIC SYSTEM
   --------------------------------------------------------- */

@media (
    min-width: 901px
) {

    html[
        data-rewrite-room-cinematic="v2"
    ]
    .story-page[
        data-rewrite-room="v1"
    ]
    .story-content {
        padding-top:
            68px;

        background:
            linear-gradient(
                180deg,
                #fbfaf5
                    0%,
                #f8f5eb
                    47%,
                #fbfaf5
                    100%
            ) !important;
    }


    /*
     * Stronger content measure.
     */

    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-room-prose {
        max-width:
            1240px !important;
    }


    /*
     * =====================================================
     * OPENING — editorial rewrite memo
     * =====================================================
     */

    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-room-opening {
        min-height:
            190px;

        margin:
            0
            42px
            -20px
            0;

        padding:
            40px
            80px
            42px
            250px;

        border:
            1px
            solid
            rgba(
                40,
                54,
                24,
                .13
            );

        background:
            linear-gradient(
                90deg,
                var(
                    --green,
                    #283618
                )
                    0
                    184px,
                rgba(
                    255,
                    255,
                    255,
                    .92
                )
                    184px
                    100%
            );

        box-shadow:
            0
            18px
            42px
            rgba(
                40,
                54,
                24,
                .055
            );
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-room-opening::before {
        content:
            "00";

        left:
            34px;
        top:
            34px;

        color:
            var(
                --amber,
                #DDA15E
            );

        font-size:
            88px;

        line-height:
            .82;

        font-weight:
            900;

        letter-spacing:
            -.075em;
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-room-opening::after {
        left:
            183px;
        top:
            0;
        bottom:
            0;

        background:
            rgba(
                221,
                161,
                94,
                .40
            );
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-room-opening > p:first-child {
        max-width:
            800px;

        font-size:
            34px !important;

        line-height:
            1.08 !important;
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-room-opening > p:not(
        :first-child
    ) {
        max-width:
            850px;

        font-size:
            18px !important;

        line-height:
            1.72 !important;
    }


    .rewrite-brief-meta-v2 {
        position:
            absolute;

        left:
            34px;
        bottom:
            26px;

        display:
            grid;

        gap:
            5px;

        color:
            rgba(
                254,
                250,
                224,
                .62
            );

        font-size:
            8px;

        line-height:
            1;

        font-weight:
            850;

        letter-spacing:
            .16em;
    }


    .rewrite-brief-meta-v2 b {
        color:
            var(
                --amber,
                #DDA15E
            );

        font-size:
            11px;
    }


    .rewrite-brief-meta-v2 i {
        display:
            block;

        width:
            68px;
        height:
            2px;

        margin-top:
            7px;

        background:
            var(
                --amber,
                #DDA15E
            );
    }


    /*
     * =====================================================
     * REVISION CONSOLE — real edit-bay feeling
     * =====================================================
     */

    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-room-console {
        z-index:
            5;

        width:
            calc(
                100% - 76px
            );

        margin:
            0
            0
            86px
            76px;

        padding:
            34px
            40px
            38px;

        clip-path:
            polygon(
                0
                0,
                96%
                0,
                100%
                18%,
                100%
                100%,
                4%
                100%,
                0
                82%
            );

        box-shadow:
            0
            30px
            60px
            rgba(
                40,
                54,
                24,
                .14
            );
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-room-console::before {
        content:
            "REWRITE";

        right:
            -15px;
        bottom:
            -31px;

        font-size:
            142px;

        opacity:
            .75;
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-console-facts strong {
        font-size:
            50px;
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-console-facts span {
        font-size:
            10px;
    }


    /*
     * Hide old thin process rail.
     * V2 edit timeline replaces it.
     */

    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-console-track {
        display:
            none;
    }


    .rewrite-edit-timeline-v2 {
        position:
            relative;

        z-index:
            5;

        margin-top:
            27px;

        padding:
            20px
            0
            3px;

        border-top:
            1px
            solid
            rgba(
                254,
                250,
                224,
                .16
            );
    }


    .rewrite-edit-timecode-v2 {
        display:
            flex;

        justify-content:
            space-between;

        margin-bottom:
            13px;

        color:
            rgba(
                254,
                250,
                224,
                .32
            );

        font-size:
            8px;

        font-weight:
            800;

        letter-spacing:
            .12em;
    }


    .rewrite-edit-track-v2 {
        position:
            relative;

        display:
            flex;

        align-items:
            center;

        gap:
            5px;

        height:
            15px;

        margin-bottom:
            5px;
    }


    .rewrite-edit-track-v2::before {
        content:
            "";

        position:
            absolute;

        left:
            0;
        right:
            0;
        top:
            50%;

        height:
            1px;

        background:
            rgba(
                254,
                250,
                224,
                .08
            );
    }


    .rewrite-edit-track-v2 b {
        position:
            relative;

        z-index:
            2;

        display:
            block;

        height:
            8px;

        background:
            rgba(
                221,
                161,
                94,
                .58
            );
    }


    .rewrite-edit-track-v2.track-a b:nth-child(1) {
        width:
            15%;
    }


    .rewrite-edit-track-v2.track-a b:nth-child(2) {
        width:
            24%;
    }


    .rewrite-edit-track-v2.track-a b:nth-child(3) {
        width:
            18%;
    }


    .rewrite-edit-track-v2.track-a b:nth-child(4) {
        width:
            32%;
    }


    .rewrite-edit-track-v2.track-b b:nth-child(1) {
        width:
            31%;
    }


    .rewrite-edit-track-v2.track-b b:nth-child(2) {
        width:
            19%;
    }


    .rewrite-edit-track-v2.track-b b:nth-child(3) {
        width:
            43%;
    }


    .rewrite-edit-track-v2.track-c b:nth-child(1) {
        width:
            12%;
    }


    .rewrite-edit-track-v2.track-c b:nth-child(2) {
        width:
            17%;
    }


    .rewrite-edit-track-v2.track-c b:nth-child(3) {
        width:
            22%;
    }


    .rewrite-edit-track-v2.track-c b:nth-child(4) {
        width:
            15%;
    }


    .rewrite-edit-track-v2.track-c b:nth-child(5) {
        width:
            25%;
    }


    .rewrite-edit-playhead-v2 {
        position:
            absolute;

        z-index:
            9;

        left:
            4%;
        top:
            12px;
        bottom:
            0;

        width:
            2px;

        background:
            var(
                --amber,
                #DDA15E
            );

        box-shadow:
            0
            0
            10px
            rgba(
                221,
                161,
                94,
                .70
            );

        animation:
            rewriteV2EditPlayhead
            4.1s
            cubic-bezier(
                .45,
                0,
                .55,
                1
            )
            infinite;
    }


    .rewrite-edit-playhead-v2::before {
        content:
            "";

        position:
            absolute;

        left:
            -4px;
        top:
            -5px;

        width:
            10px;
        height:
            10px;

        background:
            var(
                --amber,
                #DDA15E
            );

        transform:
            rotate(
                45deg
            );
    }


    /*
     * =====================================================
     * REVISION PASSES — more monumental
     * =====================================================
     */

    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-pass {
        overflow:
            visible;

        margin-bottom:
            94px;
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-pass-header {
        margin-bottom:
            28px;
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-pass-header strong {
        font-size:
            118px;

        line-height:
            .72;
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-pass-header span {
        font-size:
            11px;

        letter-spacing:
            .20em;
    }


    /*
     * =====================================================
     * PASS 01 — BEFORE / AFTER editorial plate
     * =====================================================
     */

    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-pass[
        data-rewrite-pass="structure"
    ] {
        min-height:
            560px;

        padding:
            58px
            520px
            58px
            58px;

        overflow:
            hidden;

        border:
            0;

        border-top:
            5px
            solid
            var(
                --rust,
                #BC6C25
            );

        background:
            linear-gradient(
                135deg,
                #ffffff
                    0%,
                #ffffff
                    70%,
                #f4efe2
                    70%,
                #f8f5eb
                    100%
            );

        box-shadow:
            0
            24px
            55px
            rgba(
                40,
                54,
                24,
                .07
            );
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-pass[
        data-rewrite-pass="structure"
    ]::before {
        content:
            "01";

        position:
            absolute;

        right:
            34px;
        bottom:
            -30px;

        color:
            rgba(
                188,
                108,
                37,
                .045
            );

        font-size:
            250px;

        line-height:
            .7;

        font-weight:
            900;

        letter-spacing:
            -.10em;
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-pass[
        data-rewrite-pass="structure"
    ]
    .rewrite-pass-heading {
        max-width:
            620px;

        font-size:
            40px !important;
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-pass[
        data-rewrite-pass="structure"
    ]
    .rewrite-pass-content > p:not(
        .rewrite-pass-heading
    ) {
        max-width:
            620px;

        font-size:
            18px !important;
    }


    /*
     * Old small V1 scan disappears.
     */

    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-structure-scan {
        display:
            none;
    }


    .rewrite-structure-plate-v2 {
        position:
            absolute;

        z-index:
            2;

        right:
            48px;
        top:
            92px;

        display:
            grid;

        grid-template-columns:
            150px
            80px
            150px;

        align-items:
            center;

        width:
            395px;

        min-height:
            340px;

        pointer-events:
            none;
    }


    .rewrite-v2-script {
        position:
            relative;

        height:
            270px;

        padding:
            25px
            20px;

        box-sizing:
            border-box;

        border:
            1px
            solid
            rgba(
                40,
                54,
                24,
                .20
            );

        background:
            rgba(
                255,
                255,
                255,
                .86
            );

        box-shadow:
            0
            16px
            30px
            rgba(
                40,
                54,
                24,
                .06
            );
    }


    .rewrite-v2-script.before {
        transform:
            rotate(
                -4deg
            );
    }


    .rewrite-v2-script.after {
        transform:
            rotate(
                3deg
            );
    }


    .rewrite-v2-script strong {
        display:
            block;

        margin-bottom:
            28px;

        color:
            rgba(
                40,
                54,
                24,
                .45
            );

        font-size:
            9px;

        font-weight:
            900;

        letter-spacing:
            .17em;
    }


    .rewrite-v2-script span {
        display:
            block;

        height:
            3px;

        margin-bottom:
            19px;

        background:
            rgba(
                40,
                54,
                24,
                .22
            );
    }


    .rewrite-v2-script span:nth-of-type(1) {
        width:
            86%;
    }


    .rewrite-v2-script span:nth-of-type(2) {
        width:
            59%;
    }


    .rewrite-v2-script span:nth-of-type(3) {
        width:
            78%;
    }


    .rewrite-v2-script span:nth-of-type(4) {
        width:
            45%;
    }


    .rewrite-v2-script span:nth-of-type(5) {
        width:
            72%;
    }


    .rewrite-v2-script.before i {
        position:
            absolute;

        left:
            19px;

        height:
            3px;

        background:
            var(
                --rust,
                #BC6C25
            );

        opacity:
            .72;

        transform-origin:
            left center;
    }


    .rewrite-v2-script.before .strike-one {
        top:
            112px;

        width:
            82px;

        transform:
            rotate(
                -7deg
            );
    }


    .rewrite-v2-script.before .strike-two {
        top:
            186px;

        width:
            98px;

        transform:
            rotate(
                6deg
            );
    }


    .rewrite-v2-transfer {
        position:
            relative;

        height:
            120px;
    }


    .rewrite-v2-transfer::before {
        content:
            "";

        position:
            absolute;

        left:
            5px;
        right:
            5px;
        top:
            50%;

        height:
            2px;

        background:
            rgba(
                188,
                108,
                37,
                .42
            );
    }


    .rewrite-v2-transfer b {
        position:
            absolute;

        top:
            calc(
                50% - 5px
            );

        width:
            10px;
        height:
            10px;

        border:
            2px
            solid
            var(
                --rust,
                #BC6C25
            );

        border-radius:
            50%;

        background:
            #f8f5eb;
    }


    .rewrite-v2-transfer b:nth-child(1) {
        left:
            5px;
    }


    .rewrite-v2-transfer b:nth-child(2) {
        left:
            34px;
    }


    .rewrite-v2-transfer b:nth-child(3) {
        right:
            5px;
    }


    .rewrite-v2-transfer i {
        position:
            absolute;

        z-index:
            4;

        left:
            4px;
        top:
            calc(
                50% - 6px
            );

        width:
            12px;
        height:
            12px;

        border-radius:
            50%;

        background:
            var(
                --amber,
                #DDA15E
            );

        box-shadow:
            0
            0
            13px
            rgba(
                221,
                161,
                94,
                .65
            );
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-pass[
        data-rewrite-pass="structure"
    ].is-cinematic-v2
    .rewrite-v2-transfer i {
        animation:
            rewriteV2Transfer
            3.2s
            ease-in-out
            infinite;
    }


    /*
     * =====================================================
     * PASS 02 — make it the visual center of the page
     * =====================================================
     */

    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-pass[
        data-rewrite-pass="learning"
    ] {
        width:
            calc(
                100% + 70px
            );

        margin-left:
            -34px;
        margin-right:
            -36px;

        padding:
            62px
            78px
            82px;

        overflow:
            hidden;

        clip-path:
            polygon(
                0
                6%,
                97%
                0,
                100%
                94%,
                3%
                100%
            );

        box-shadow:
            0
            32px
            68px
            rgba(
                40,
                54,
                24,
                .17
            );
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-pass[
        data-rewrite-pass="learning"
    ]::before {
        content:
            "REWRITE ROOM";

        position:
            absolute;

        right:
            -20px;
        top:
            38px;

        color:
            rgba(
                254,
                250,
                224,
                .035
            );

        font-size:
            100px;

        line-height:
            .8;

        font-weight:
            900;

        letter-spacing:
            -.06em;
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-pass[
        data-rewrite-pass="learning"
    ]
    .rewrite-pass-heading {
        max-width:
            760px;

        font-size:
            41px !important;
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-pass[
        data-rewrite-pass="learning"
    ]
    .rewrite-pass-content > p:not(
        .rewrite-pass-heading
    ) {
        max-width:
            930px;
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-learning-loop {
        max-width:
            100%;

        margin-top:
            30px;

        padding:
            28px
            30px;

        background:
            rgba(
                254,
                250,
                224,
                .035
            );
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-learning-loop b {
        font-size:
            31px;
    }


    .rewrite-waveform-v2 {
        position:
            absolute;

        right:
            55px;
        bottom:
            32px;

        display:
            flex;

        align-items:
            center;

        gap:
            4px;

        height:
            58px;

        opacity:
            .20;

        pointer-events:
            none;
    }


    .rewrite-waveform-v2 i {
        display:
            block;

        width:
            3px;

        height:
            calc(
                10px +
                (
                    var(
                        --wave
                    )
                    % 7
                )
                *
                6px
            );

        max-height:
            54px;

        background:
            var(
                --amber,
                #DDA15E
            );

        transform-origin:
            center;
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-pass[
        data-rewrite-pass="learning"
    ].is-cinematic-v2
    .rewrite-waveform-v2 i {
        animation:
            rewriteV2Wave
            1.35s
            ease-in-out
            infinite;

        animation-delay:
            calc(
                var(
                    --wave
                )
                *
                -45ms
            );
    }


    /*
     * =====================================================
     * PASS 03 — delivery board, not another plain card
     * =====================================================
     */

    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-pass[
        data-rewrite-pass="details"
    ] {
        padding:
            60px
            60px
            74px;

        border:
            0;

        border-left:
            5px
            solid
            var(
                --rust,
                #BC6C25
            );

        background:
            linear-gradient(
                135deg,
                #ffffff
                    0%,
                #ffffff
                    77%,
                #f5efe1
                    77%,
                #f5efe1
                    100%
            );

        box-shadow:
            0
            26px
            58px
            rgba(
                40,
                54,
                24,
                .07
            );
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-pass[
        data-rewrite-pass="details"
    ]::before {
        content:
            "EXPORT";

        position:
            absolute;

        right:
            34px;
        top:
            31px;

        color:
            rgba(
                40,
                54,
                24,
                .055
            );

        font-size:
            67px;

        line-height:
            1;

        font-weight:
            900;

        letter-spacing:
            -.05em;
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-pass[
        data-rewrite-pass="details"
    ]
    .rewrite-pass-heading {
        font-size:
            40px !important;
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-details-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            14px;

        margin-top:
            30px !important;
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-details-grid li {
        min-height:
            150px;

        padding:
            64px
            24px
            25px !important;

        background:
            rgba(
                254,
                250,
                224,
                .50
            );

        font-size:
            17px !important;
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-details-grid li::before {
        left:
            22px;
        top:
            19px;

        font-size:
            33px;
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-final-stamp {
        right:
            42px;
        bottom:
            93px;

        width:
            150px;
        height:
            150px;

        opacity:
            .16;
    }


    .rewrite-export-strip-v2 {
        display:
            flex;

        align-items:
            center;

        gap:
            16px;

        width:
            calc(
                100% - 190px
            );

        margin-top:
            38px;

        padding-top:
            22px;

        border-top:
            1px
            solid
            rgba(
                40,
                54,
                24,
                .15
            );

        color:
            rgba(
                40,
                54,
                24,
                .46
            );

        font-size:
            9px;

        font-weight:
            900;

        letter-spacing:
            .16em;
    }


    .rewrite-export-strip-v2 i {
        flex:
            1;

        height:
            1px;

        background:
            rgba(
                188,
                108,
                37,
                .28
            );
    }


    .rewrite-export-strip-v2 strong {
        color:
            var(
                --rust,
                #BC6C25
            );

        font-size:
            12px;

        letter-spacing:
            .12em;
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-pass[
        data-rewrite-pass="details"
    ].is-cinematic-v2
    .rewrite-final-stamp {
        animation:
            rewriteV2FinalStamp
            3.4s
            ease-in-out
            infinite;
    }


    /*
     * =====================================================
     * HERO — bigger, clearer
     * =====================================================
     */

    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-course-hero {
        inset:
            2%
            6%;

        opacity:
            .72;

        transform:
            scale(
                1.12
            );
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-hero-sheet {
        width:
            38%;
        height:
            70%;
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-hero-playhead {
        animation-duration:
            2.8s;
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-hero-sheet.before i {
        animation-duration:
            2.4s;
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-hero-mark {
        width:
            55px;
        height:
            55px;

        font-size:
            27px;
    }

}


/* ---------------------------------------------------------
   MOBILE / SMALL TABLET
   Keep the already approved V1 mobile composition.
   V2 decorative layers must not consume layout width.
   --------------------------------------------------------- */

@media (
    max-width: 900px
) {

    .rewrite-brief-meta-v2,

    .rewrite-edit-timeline-v2,

    .rewrite-structure-plate-v2,

    .rewrite-waveform-v2,

    .rewrite-export-strip-v2 {
        display:
            none !important;
    }


    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-pass {
        width:
            auto;

        margin-left:
            0;

        margin-right:
            0;

        clip-path:
            none;
    }

}


/* ---------------------------------------------------------
   MOTION
   --------------------------------------------------------- */

@keyframes rewriteV2EditPlayhead {

    0%,
    100% {
        left:
            4%;

        opacity:
            .48;
    }

    48% {
        left:
            63%;

        opacity:
            1;
    }

    72% {
        left:
            87%;

        opacity:
            .88;
    }

}


@keyframes rewriteV2Transfer {

    0%,
    100% {
        left:
            4px;

        opacity:
            .35;
    }

    50% {
        left:
            calc(
                100% - 16px
            );

        opacity:
            1;
    }

}


@keyframes rewriteV2Wave {

    0%,
    100% {
        transform:
            scaleY(
                .45
            );

        opacity:
            .35;
    }

    50% {
        transform:
            scaleY(
                1.15
            );

        opacity:
            1;
    }

}


@keyframes rewriteV2FinalStamp {

    0%,
    100% {
        transform:
            rotate(
                -9deg
            )
            scale(
                .94
            );

        opacity:
            .12;
    }

    50% {
        transform:
            rotate(
                -7deg
            )
            scale(
                1.03
            );

        opacity:
            .22;
    }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (
    prefers-reduced-motion: reduce
) {

    .rewrite-edit-playhead-v2,

    .rewrite-v2-transfer i,

    .rewrite-waveform-v2 i,

    html[
        data-rewrite-room-cinematic="v2"
    ]
    .rewrite-final-stamp {
        animation:
            none !important;
    }

}


/* =========================================================
   END REWRITE ROOM CINEMATIC DESIGN V2
   ========================================================= */


/* =========================================================
   REWRITE ROOM RESPONSIVE BALANCE V2.1

   FIXES:
   1. remove meaningless 00 presentation
   2. remove oversized repeated title treatment
   3. improve desktop text measure
   4. stop decoration from narrowing content
   5. completely rebalance mobile composition
   6. preserve readable 17px mobile body text
   ========================================================= */


/* ---------------------------------------------------------
   COURSE HERO — NEVER BREAK INSIDE AZ WORDS
   --------------------------------------------------------- */

.story-page[
    data-rewrite-room="v1"
]
.story-title,

.story-page[
    data-rewrite-room="v1"
]
.story-hero-title,

.story-page[
    data-rewrite-room="v1"
]
.story-hero h1,

.story-page[
    data-rewrite-room="v1"
]
.story-copy h1 {
    overflow-wrap:
        normal !important;

    word-break:
        normal !important;

    hyphens:
        none !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (
    min-width: 901px
) {

    /*
     * -----------------------------------------------------
     * REWRITE BRIEF
     *
     * 00 removed.
     * This is an introduction, not REVISION PASS 00.
     * -----------------------------------------------------
     */

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-room-opening {
        min-height:
            176px;

        padding:
            38px
            68px
            38px
            220px;

        background:
            linear-gradient(
                90deg,
                var(
                    --green,
                    #283618
                )
                    0
                    170px,
                rgba(
                    255,
                    255,
                    255,
                    .94
                )
                    170px
                    100%
            );
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-room-opening::before {
        content:
            "REWRITE\A BRIEF";

        white-space:
            pre;

        left:
            28px;
        top:
            31px;

        color:
            var(
                --amber,
                #DDA15E
            );

        font-size:
            12px;

        line-height:
            1.42;

        font-weight:
            900;

        letter-spacing:
            .18em;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-room-opening::after {
        left:
            169px;
    }


    /*
     * Once duplicate title is removed,
     * first paragraph is real introductory copy.
     */

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-room-opening > p:first-child,

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-room-opening > p {
        max-width:
            900px;

        margin:
            0
            0
            14px !important;

        color:
            rgba(
                40,
                54,
                24,
                .77
            ) !important;

        font-size:
            18px !important;

        line-height:
            1.72 !important;

        font-weight:
            400 !important;

        letter-spacing:
            0 !important;

        overflow-wrap:
            normal;

        word-break:
            normal;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-brief-meta-v2 {
        left:
            28px;
        bottom:
            27px;

        max-width:
            115px;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-brief-meta-v2 b {
        font-size:
            9px;

        line-height:
            1.25;
    }


    /*
     * -----------------------------------------------------
     * PASS 01
     *
     * V2 reserved too much horizontal space for decoration.
     * Give text substantially more width.
     * -----------------------------------------------------
     */

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass[
        data-rewrite-pass="structure"
    ] {
        min-height:
            535px;

        padding:
            54px
            430px
            54px
            54px;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass[
        data-rewrite-pass="structure"
    ]
    .rewrite-pass-heading {
        max-width:
            700px;

        font-size:
            39px !important;

        line-height:
            1.10 !important;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass[
        data-rewrite-pass="structure"
    ]
    .rewrite-pass-content > p:not(
        .rewrite-pass-heading
    ) {
        max-width:
            700px;

        font-size:
            18px !important;

        line-height:
            1.72 !important;

        overflow-wrap:
            normal;

        word-break:
            normal;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-structure-plate-v2 {
        right:
            32px;
        top:
            100px;

        grid-template-columns:
            128px
            66px
            128px;

        width:
            325px;

        min-height:
            320px;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-v2-script {
        height:
            245px;
    }


    /*
     * -----------------------------------------------------
     * PASS 02
     *
     * Keep cinematic asymmetry but remove excessive width
     * and increase reading measure.
     * -----------------------------------------------------
     */

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass[
        data-rewrite-pass="learning"
    ] {
        width:
            calc(
                100% + 30px
            );

        margin-left:
            -15px;

        margin-right:
            -15px;

        padding:
            60px
            64px
            76px;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass[
        data-rewrite-pass="learning"
    ]
    .rewrite-pass-content {
        width:
            100%;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass[
        data-rewrite-pass="learning"
    ]
    .rewrite-pass-heading {
        max-width:
            850px;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass[
        data-rewrite-pass="learning"
    ]
    .rewrite-pass-content > p:not(
        .rewrite-pass-heading
    ) {
        max-width:
            980px;

        font-size:
            18px !important;

        line-height:
            1.72 !important;

        overflow-wrap:
            normal;

        word-break:
            normal;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-case-study {
        max-width:
            980px !important;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-case-study-follow {
        max-width:
            980px !important;
    }


    /*
     * -----------------------------------------------------
     * PASS 03
     *
     * Middle card contains long URL: allocate more width.
     * -----------------------------------------------------
     */

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass[
        data-rewrite-pass="details"
    ] {
        padding-left:
            54px;

        padding-right:
            54px;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-details-grid {
        grid-template-columns:
            1.05fr
            1.30fr
            .80fr;

        gap:
            13px;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-details-grid li {
        min-width:
            0;

        padding:
            60px
            20px
            24px !important;

        overflow:
            hidden;

        overflow-wrap:
            normal;

        word-break:
            normal;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-details-grid a {
        overflow-wrap:
            anywhere !important;

        word-break:
            break-word !important;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass[
        data-rewrite-pass="details"
    ]
    .rewrite-pass-content > p:not(
        .rewrite-pass-heading
    ) {
        max-width:
            900px;

        overflow-wrap:
            normal;

        word-break:
            normal;
    }

}


/* =========================================================
   MOBILE / PHONE
   ========================================================= */

@media (
    max-width: 900px
) {

    /*
     * -----------------------------------------------------
     * PAGE WIDTH
     *
     * Almost full viewport width.
     * No decorative left/right layout columns.
     * -----------------------------------------------------
     */

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .story-page[
        data-rewrite-room="v1"
    ]
    .story-content {
        padding:
            24px
            0
            48px !important;

        overflow:
            hidden;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-room-prose {
        width:
            calc(
                100% - 24px
            ) !important;

        max-width:
            none !important;

        margin:
            0
            auto !important;

        overflow:
            visible;
    }


    /*
     * -----------------------------------------------------
     * OPENING
     *
     * No duplicate course title.
     * No 00.
     * No dark side column.
     * -----------------------------------------------------
     */

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-room-opening {
        min-height:
            0;

        margin:
            0
            0
            20px;

        padding:
            54px
            14px
            22px;

        overflow:
            hidden;

        border:
            1px
            solid
            rgba(
                40,
                54,
                24,
                .11
            );

        background:
            rgba(
                255,
                255,
                255,
                .86
            );
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-room-opening::before {
        content:
            "REWRITE BRIEF";

        left:
            14px;
        top:
            18px;

        color:
            var(
                --rust,
                #BC6C25
            );

        font-size:
            10px;

        line-height:
            1;

        font-weight:
            900;

        letter-spacing:
            .16em;

        white-space:
            normal;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-room-opening::after {
        display:
            none;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-brief-meta-v2 {
        display:
            none !important;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-room-opening > p:first-child,

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-room-opening > p {
        width:
            100%;

        max-width:
            none;

        margin:
            0 !important;

        padding:
            0;

        color:
            rgba(
                40,
                54,
                24,
                .78
            ) !important;

        font-size:
            17px !important;

        line-height:
            1.64 !important;

        font-weight:
            400 !important;

        letter-spacing:
            0 !important;

        text-align:
            left;

        overflow-wrap:
            normal;

        word-break:
            normal;

        hyphens:
            none;
    }


    /*
     * -----------------------------------------------------
     * CONSOLE
     * -----------------------------------------------------
     */

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-room-console {
        width:
            100%;

        margin:
            0
            0
            28px;

        padding:
            22px
            14px
            24px;

        clip-path:
            none;

        border-radius:
            0;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-room-console::before {
        font-size:
            42px;

        opacity:
            .32;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-console-facts {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-console-facts > div {
        min-width:
            0;

        padding:
            16px
            10px;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-console-facts strong {
        font-size:
            30px;
    }


    /*
     * V2 desktop timeline is not required on phone.
     */

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-edit-timeline-v2 {
        display:
            none !important;
    }


    /*
     * -----------------------------------------------------
     * COMMON PASSES
     * -----------------------------------------------------
     */

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass {
        width:
            100% !important;

        max-width:
            none !important;

        min-width:
            0 !important;

        margin:
            0
            0
            30px !important;

        clip-path:
            none !important;

        overflow:
            hidden !important;

        box-sizing:
            border-box;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass-header {
        gap:
            12px;

        margin:
            0
            0
            20px;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass-header strong {
        flex:
            0
            0
            auto;

        font-size:
            62px;

        line-height:
            .78;

        letter-spacing:
            -.06em;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass-header span {
        flex:
            0
            1
            auto;

        padding-bottom:
            4px;

        font-size:
            9px;

        line-height:
            1.3;

        letter-spacing:
            .13em;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass-content {
        width:
            100% !important;

        max-width:
            none !important;

        min-width:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass-heading {
        width:
            100%;

        max-width:
            none;

        margin:
            0
            0
            20px !important;

        font-size:
            29px !important;

        line-height:
            1.13 !important;

        letter-spacing:
            -.025em !important;

        overflow-wrap:
            normal;

        word-break:
            normal;

        hyphens:
            none;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass-content > p:not(
        .rewrite-pass-heading
    ) {
        width:
            100% !important;

        max-width:
            none !important;

        margin:
            0
            0
            20px !important;

        padding:
            0 !important;

        font-size:
            17px !important;

        line-height:
            1.64 !important;

        text-align:
            left !important;

        overflow-wrap:
            normal;

        word-break:
            normal;

        hyphens:
            none;
    }


    /*
     * -----------------------------------------------------
     * PASS 01
     *
     * All script illustrations removed from mobile.
     * Content owns 100% of usable width.
     * -----------------------------------------------------
     */

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass[
        data-rewrite-pass="structure"
    ] {
        min-height:
            0 !important;

        padding:
            24px
            14px
            26px !important;

        border:
            1px
            solid
            rgba(
                40,
                54,
                24,
                .11
            ) !important;

        border-top:
            5px
            solid
            var(
                --rust,
                #BC6C25
            ) !important;

        background:
            #ffffff !important;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass[
        data-rewrite-pass="structure"
    ]::before {
        display:
            none !important;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-structure-scan,

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-structure-plate-v2 {
        display:
            none !important;
    }


    /*
     * -----------------------------------------------------
     * PASS 02
     *
     * Full width Rewrite Room.
     * No decorative side geometry.
     * -----------------------------------------------------
     */

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass[
        data-rewrite-pass="learning"
    ] {
        padding:
            28px
            14px
            32px !important;

        background:
            var(
                --green,
                #283618
            ) !important;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass[
        data-rewrite-pass="learning"
    ]::before {
        display:
            none !important;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass[
        data-rewrite-pass="learning"
    ]
    .rewrite-pass-heading {
        color:
            #fdf9e8 !important;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass[
        data-rewrite-pass="learning"
    ]
    .rewrite-pass-content > p:not(
        .rewrite-pass-heading
    ) {
        color:
            rgba(
                254,
                250,
                224,
                .74
            ) !important;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-learning-loop {
        width:
            100%;

        max-width:
            none;

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

        gap:
            8px;

        margin:
            0
            0
            24px;

        padding:
            11px;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-learning-loop span {
        min-width:
            0;

        padding:
            12px
            5px;

        font-size:
            10px;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-learning-loop b {
        font-size:
            25px;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-learning-loop i {
        display:
            none;
    }


    /*
     * The CASE treatment was creating a narrow inner column.
     * Make it a simple editorial callout.
     */

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-case-study {
        width:
            100% !important;

        max-width:
            none !important;

        margin:
            24px
            0
            20px !important;

        padding:
            17px
            14px !important;

        border:
            1px
            solid
            rgba(
                221,
                161,
                94,
                .30
            );

        border-left:
            4px
            solid
            var(
                --amber,
                #DDA15E
            );

        text-align:
            left !important;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-case-study::before {
        display:
            none !important;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-case-study-follow {
        width:
            100% !important;

        max-width:
            none !important;

        padding-left:
            0 !important;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-waveform-v2 {
        display:
            none !important;
    }


    /*
     * -----------------------------------------------------
     * PASS 03
     * -----------------------------------------------------
     */

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass[
        data-rewrite-pass="details"
    ] {
        padding:
            26px
            14px
            30px !important;

        border:
            1px
            solid
            rgba(
                40,
                54,
                24,
                .11
            ) !important;

        border-left:
            4px
            solid
            var(
                --rust,
                #BC6C25
            ) !important;

        background:
            #ffffff !important;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass[
        data-rewrite-pass="details"
    ]::before {
        display:
            none !important;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-details-grid {
        display:
            grid;

        grid-template-columns:
            1fr !important;

        gap:
            9px;

        width:
            100%;

        margin:
            0
            0
            24px !important;

        padding:
            0 !important;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-details-grid li {
        width:
            100%;

        min-width:
            0;

        min-height:
            0;

        margin:
            0 !important;

        padding:
            17px
            12px
            17px
            54px !important;

        box-sizing:
            border-box;

        font-size:
            16px !important;

        line-height:
            1.58 !important;

        overflow:
            hidden;

        overflow-wrap:
            normal;

        word-break:
            normal;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-details-grid li::before {
        left:
            14px;
        top:
            18px;

        font-size:
            21px;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-details-grid a {
        display:
            inline;

        max-width:
            100%;

        overflow-wrap:
            anywhere !important;

        word-break:
            break-word !important;
    }


    /*
     * Final stamp was touching mobile text.
     */

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-final-stamp,

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-export-strip-v2 {
        display:
            none !important;
    }


    /*
     * -----------------------------------------------------
     * ALL DECORATION MUST BE LAYOUT-NEUTRAL ON PHONE
     * -----------------------------------------------------
     */

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-structure-scan,

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-structure-plate-v2,

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-waveform-v2,

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-export-strip-v2 {
        position:
            absolute !important;

        pointer-events:
            none !important;
    }

}


/* =========================================================
   VERY SMALL PHONE
   ========================================================= */

@media (
    max-width: 390px
) {

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-room-prose {
        width:
            calc(
                100% - 18px
            ) !important;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass[
        data-rewrite-pass="structure"
    ],

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass[
        data-rewrite-pass="learning"
    ],

    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass[
        data-rewrite-pass="details"
    ] {
        padding-left:
            12px !important;

        padding-right:
            12px !important;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass-header strong {
        font-size:
            58px;
    }


    html[
        data-rewrite-room-balance="v2-1"
    ]
    .rewrite-pass-heading {
        font-size:
            27px !important;
    }

}


/* =========================================================
   END REWRITE ROOM RESPONSIVE BALANCE V2.1
   ========================================================= */


/* =========================================================
   REWRITE ROOM MOBILE CASE INSET V2.2

   Mobile only:
   increase clearance between orange editorial line
   and CASE text.

   Desktop untouched.
   ========================================================= */

@media (max-width: 900px) {

    html[data-rewrite-room-balance="v2-1"]
    .rewrite-case-study {
        padding:
            17px
            16px
            17px
            26px !important;

        border-left-width:
            4px !important;
    }

}


/* =========================================================
   END REWRITE ROOM MOBILE CASE INSET V2.2
   ========================================================= */



/* =========================================================
   REWRITE ROOM MOBILE CASE SPECIFICITY FIX V2.3

   ROOT CAUSE:
   The generic mobile paragraph rule uses:

   .rewrite-pass-content > p:not(.rewrite-pass-heading) {
       padding: 0 !important;
   }

   That selector is more specific than the previous
   .rewrite-case-study override.

   This rule deliberately uses a stronger selector and
   therefore owns the final CASE padding on mobile.

   Desktop untouched.
   ========================================================= */

@media (max-width: 900px) {

    html[data-rewrite-room-balance="v2-1"]
    .rewrite-pass[data-rewrite-pass="learning"]
    .rewrite-pass-content
    > p.rewrite-case-study:not(.rewrite-pass-heading) {
        width:
            100% !important;

        max-width:
            none !important;

        box-sizing:
            border-box !important;

        margin:
            24px
            0
            20px !important;

        padding:
            17px
            16px
            17px
            30px !important;

        border-left:
            4px
            solid
            var(
                --amber,
                #DDA15E
            ) !important;

        text-align:
            left !important;
    }

}


/* =========================================================
   END REWRITE ROOM MOBILE CASE SPECIFICITY FIX V2.3
   ========================================================= */



/* =========================================================
   RELATED SERVICES CTA — NEXT SCENES V1
   ========================================================= */

.related-services-cta[data-related-content="services"] {
    position: relative;
    overflow: clip;

    padding: 76px 0 72px;

    border-top:
        1px solid
        rgba(255, 255, 255, .09);

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(214, 126, 44, .16),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #1d2917 0%,
            var(--green, #283618) 56%,
            #202b19 100%
        );

    color: #fff;
}

.related-services-cta[data-related-content="services"]::before {
    content: "";

    position: absolute;

    top: 12px;
    right: 0;
    left: 0;

    height: 8px;

    background-image:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .28) 0 2.5px,
            transparent 2.8px
        );

    background-size: 28px 8px;

    animation:
        related-services-perforation
        9s
        linear
        infinite;

    pointer-events: none;
}

.related-services-inner {
    position: relative;
    z-index: 2;
}

.related-services-filmline {
    position: absolute;
    z-index: 1;

    top: 42px;
    right: 0;
    left: 0;

    height: 1px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, .13);

    pointer-events: none;
}

.related-services-filmline > span {
    position: absolute;

    top: 0;
    left: 0;

    width: 12%;
    min-width: 86px;
    height: 1px;

    background:
        var(--amber, #dda15e);

    box-shadow:
        0 0 16px
        rgba(221, 161, 94, .5);

    animation:
        related-services-playhead
        4.8s
        ease-in-out
        infinite
        alternate;
}

.related-services-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 32px;

    margin-bottom: 34px;
}

.related-services-eyebrow {
    display: block;

    margin-bottom: 10px;

    color:
        var(--amber, #dda15e);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: .19em;
}

.related-services-header h2 {
    max-width: 760px;

    margin: 0;

    color: #fff;

    font-size:
        clamp(
            32px,
            4vw,
            54px
        );

    line-height: 1.03;

    letter-spacing: -.035em;
}

.related-services-cutmark {
    flex: 0 0 auto;

    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(221, 161, 94, .48);

    border-radius: 50%;

    color:
        var(--amber, #dda15e);

    font-size: 19px;

    transform:
        rotate(-8deg);
}

.related-services-links {
    border-top:
        1px solid
        rgba(255, 255, 255, .18);

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

.related-services-link {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 20px;

    min-height: 88px;

    padding:
        17px
        8px
        17px
        0;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .11);

    color: #fff;

    text-decoration: none;

    transition:
        background-color .24s ease,
        padding-left .24s ease,
        color .24s ease;
}

.related-services-link:last-child {
    border-bottom: 0;
}

.related-services-link::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 3px;

    background:
        var(--amber, #dda15e);

    transform:
        scaleY(0);

    transform-origin: center;

    transition:
        transform .24s ease;
}

.related-services-link:hover,
.related-services-link:focus-visible {
    padding-left: 14px;

    background:
        rgba(255, 255, 255, .055);

    color: #fff;
}

.related-services-link:hover::before,
.related-services-link:focus-visible::before {
    transform:
        scaleY(1);
}

.related-services-number {
    color:
        rgba(221, 161, 94, .78);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

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

    letter-spacing: .08em;
}

.related-services-title {
    min-width: 0;

    font-size:
        clamp(
            20px,
            2.4vw,
            30px
        );

    font-weight: 650;
    line-height: 1.16;

    letter-spacing: -.02em;
}

.related-services-cue {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    color:
        rgba(255, 255, 255, .46);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

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

    letter-spacing: .16em;

    transition:
        color .24s ease,
        transform .24s ease;
}

.related-services-link:hover
.related-services-cue,
.related-services-link:focus-visible
.related-services-cue {
    color:
        var(--amber, #dda15e);

    transform:
        translateX(5px);
}

.related-services-all {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 28px;

    padding: 13px 0;

    color:
        var(--amber, #dda15e);

    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;

    text-decoration: none;

    transition:
        gap .22s ease,
        color .22s ease;
}

.related-services-all:hover,
.related-services-all:focus-visible {
    gap: 18px;

    color: #fff;
}

.related-services-all i {
    font-size: 13px;
}

@keyframes related-services-perforation {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 56px 0;
    }
}

@keyframes related-services-playhead {
    from {
        left: 0;
    }

    to {
        left: 88%;
    }
}

@media (max-width: 760px) {
    .related-services-cta[data-related-content="services"] {
        padding: 58px 0 52px;
    }

    .related-services-filmline {
        top: 35px;
    }

    .related-services-header {
        align-items: flex-start;

        gap: 18px;

        margin-bottom: 26px;
    }

    .related-services-header h2 {
        max-width: 100%;

        font-size:
            clamp(
                28px,
                9vw,
                38px
            );
    }

    .related-services-cutmark {
        width: 44px;
        height: 44px;

        margin-top: 3px;

        font-size: 16px;
    }

    .related-services-link {
        grid-template-columns:
            42px
            minmax(0, 1fr)
            24px;

        gap: 10px;

        min-height: 78px;

        padding: 15px 0;
    }

    .related-services-link:hover,
    .related-services-link:focus-visible {
        padding-left: 7px;
    }

    .related-services-number {
        font-size: 12px;
    }

    .related-services-title {
        font-size: 18px;
        line-height: 1.24;
    }

    .related-services-cue {
        justify-self: end;
    }

    .related-services-cue > span {
        display: none;
    }

    .related-services-cue i {
        font-size: 12px;
    }

    .related-services-all {
        margin-top: 22px;

        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .related-services-cta[data-related-content="services"]::before,
    .related-services-filmline > span {
        animation: none;
    }

    .related-services-filmline > span {
        left: 44%;
    }

    .related-services-link,
    .related-services-link::before,
    .related-services-cue,
    .related-services-all {
        transition: none;
    }
}

/* =========================================================
   END RELATED SERVICES CTA — NEXT SCENES V1
   ========================================================= */


/* =========================================================
   RELATED COURSES CTA — NEXT DRAFT V1
   ========================================================= */

.related-courses-cta[data-related-content="courses"] {
    position: relative;

    overflow: clip;

    padding: 78px 0;

    background:
        linear-gradient(
            180deg,
            #e9e2d2 0%,
            #f1eadb 100%
        );

    color:
        #1f291b;
}

.related-courses-cta[data-related-content="courses"]::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 1px;

    background:
        rgba(40, 54, 24, .18);
}

.related-courses-inner {
    position: relative;

    z-index: 2;
}

.related-courses-sheet {
    position: relative;

    display: grid;

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

    gap: 42px;

    overflow: hidden;

    min-height: 300px;

    padding:
        54px
        58px
        50px
        92px;

    border:
        1px solid
        rgba(40, 54, 24, .18);

    background:
        linear-gradient(
            90deg,
            rgba(40, 54, 24, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            #fffdf7,
            #faf5e9
        );

    background-size:
        38px 100%,
        auto;

    box-shadow:
        0 24px 70px
        rgba(31, 41, 27, .12);
}

.related-courses-sheet::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 36px;
    left: 0;

    height: 1px;

    background:
        rgba(40, 54, 24, .11);

    pointer-events: none;
}

.related-courses-spine {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 34px;

    width: 18px;

    display: flex;

    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    padding: 24px 0;

    border-right:
        1px solid
        rgba(180, 83, 39, .25);
}

.related-courses-spine::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 7px;

    width: 1px;

    background:
        rgba(180, 83, 39, .3);
}

.related-courses-spine > span {
    position: relative;
    z-index: 2;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        #b45327;

    box-shadow:
        0 0 0 4px
        #fffdf7;
}

.related-courses-copy {
    align-self: center;

    min-width: 0;
}

.related-courses-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 13px;

    color:
        #b45327;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 11px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: .2em;
}

.related-courses-eyebrow::before {
    content: "";

    width: 28px;
    height: 2px;

    background:
        #b45327;
}

.related-courses-copy h2 {
    margin: 0 0 28px;

    color:
        #283618;

    font-size:
        clamp(
            30px,
            4vw,
            50px
        );

    line-height: 1.02;

    letter-spacing: -.035em;
}

.related-courses-next {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 24px;

    max-width: 900px;

    padding:
        25px
        0
        24px;

    border-top:
        2px solid
        #283618;

    border-bottom:
        1px solid
        rgba(40, 54, 24, .23);

    color:
        #283618;

    text-decoration: none;
}

.related-courses-next::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: -1px;
    left: 0;

    height: 2px;

    background:
        #b45327;

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform .35s ease;
}

.related-courses-next:hover::after,
.related-courses-next:focus-visible::after {
    transform:
        scaleX(1);
}

.related-courses-next-title {
    min-width: 0;

    font-size:
        clamp(
            22px,
            3vw,
            34px
        );

    font-weight: 700;
    line-height: 1.15;

    letter-spacing: -.025em;
}

.related-courses-next-arrow {
    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(40, 54, 24, .3);

    border-radius: 50%;

    color:
        #b45327;

    transition:
        transform .28s ease,
        background-color .28s ease,
        color .28s ease;
}

.related-courses-next:hover
.related-courses-next-arrow,
.related-courses-next:focus-visible
.related-courses-next-arrow {
    transform:
        translateX(6px)
        rotate(-4deg);

    background:
        #283618;

    color:
        #f6ead7;
}

.related-courses-all {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 24px;

    color:
        #b45327;

    font-size: 14px;
    font-weight: 750;

    text-decoration: none;

    transition:
        gap .22s ease,
        color .22s ease;
}

.related-courses-all:hover,
.related-courses-all:focus-visible {
    gap: 16px;

    color:
        #283618;
}

.related-courses-draft-mark {
    align-self: start;

    width: 112px;
    height: 112px;

    display: flex;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    border:
        2px solid
        rgba(180, 83, 39, .62);

    border-radius: 50%;

    color:
        #b45327;

    transform:
        rotate(8deg);

    animation:
        related-courses-stamp
        5.8s
        ease-in-out
        infinite
        alternate;
}

.related-courses-draft-mark span {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

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

    letter-spacing: .18em;
}

.related-courses-draft-mark strong {
    margin-top: 2px;

    font-size: 34px;
    line-height: 1;
}

.related-courses-fold {
    position: absolute;

    top: 0;
    right: 0;

    width: 58px;
    height: 58px;

    background:
        linear-gradient(
            225deg,
            #e4dbc7 0 49%,
            transparent 50%
        );

    pointer-events: none;
}

.related-courses-fold::after {
    content: "";

    position: absolute;

    top: 57px;
    right: 0;

    width: 72px;
    height: 1px;

    background:
        rgba(40, 54, 24, .16);

    transform:
        rotate(-45deg);

    transform-origin:
        right center;
}

@keyframes related-courses-stamp {
    from {
        transform:
            rotate(8deg)
            translateY(0);
    }

    to {
        transform:
            rotate(4deg)
            translateY(7px);
    }
}

@media (max-width: 760px) {
    .related-courses-cta[data-related-content="courses"] {
        padding:
            52px
            0;
    }

    .related-courses-sheet {
        display: block;

        min-height: 0;

        padding:
            42px
            20px
            42px
            38px;

        background-size:
            28px 100%,
            auto;
    }

    .related-courses-spine {
        left: 12px;

        width: 12px;
    }

    .related-courses-spine::before {
        left: 5px;
    }

    .related-courses-spine > span {
        width: 6px;
        height: 6px;

        box-shadow:
            0 0 0 3px
            #fffdf7;
    }

    .related-courses-copy h2 {
        margin-bottom: 22px;

        font-size:
            clamp(
                27px,
                9vw,
                38px
            );
    }

    .related-courses-next {
        grid-template-columns:
            minmax(0, 1fr)
            42px;

        gap: 12px;

        padding:
            20px
            0;
    }

    .related-courses-next-title {
        font-size: 19px;
        line-height: 1.24;
    }

    .related-courses-next-arrow {
        width: 40px;
        height: 40px;

        font-size: 13px;
    }

    .related-courses-draft-mark {
        position: absolute;

        top: 18px;
        right: 18px;

        width: 58px;
        height: 58px;

        opacity: .38;

        pointer-events: none;
    }

    .related-courses-draft-mark span {
        font-size: 7px;
    }

    .related-courses-draft-mark strong {
        font-size: 20px;
    }

    .related-courses-fold {
        width: 40px;
        height: 40px;
    }

    .related-courses-fold::after {
        display: none;
    }

    .related-courses-all {
        max-width: calc(100% - 10px);

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

@media (prefers-reduced-motion: reduce) {
    .related-courses-draft-mark {
        animation: none;
    }

    .related-courses-next::after,
    .related-courses-next-arrow,
    .related-courses-all {
        transition: none;
    }
}

/* =========================================================
   END RELATED COURSES CTA — NEXT DRAFT V1
   ========================================================= */


/* =========================================================
   RELATED ARTICLES CTA — NEXT READ V1
   Editorial continuation after Blog articles
   ========================================================= */

.related-reading {
    position: relative;

    overflow: hidden;

    padding:
        clamp(56px, 7vw, 96px)
        0
        clamp(62px, 8vw, 108px);

    border-top:
        3px solid
        var(--rust);

    background:
        linear-gradient(
            180deg,
            #f7f3eb 0%,
            #efe9de 100%
        );
}

.related-reading::before {
    content: "";

    position: absolute;
    top: 26px;
    right: -70px;

    width: 250px;
    height: 250px;

    border:
        1px solid
        rgba(190,103,36,.16);

    transform:
        rotate(9deg);

    pointer-events: none;
}

.related-reading::after {
    content: "READ";

    position: absolute;
    right: 1.5vw;
    bottom: -42px;

    color:
        rgba(40,54,24,.035);

    font-size:
        clamp(120px, 17vw, 260px);
    font-weight: 800;
    line-height: 1;

    pointer-events: none;
}

.related-reading-inner {
    position: relative;
    z-index: 1;
}

.related-reading-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;

    margin-bottom:
        clamp(28px, 4vw, 48px);
}

.related-reading-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 10px;

    color: var(--rust);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
}

.related-reading-kicker::before {
    content: "";

    width: 30px;
    height: 2px;

    background: var(--rust);
}

.related-reading-header h2 {
    margin: 0;

    color: var(--green);

    font-size:
        clamp(30px, 4.1vw, 54px);
    line-height: 1.03;
    letter-spacing: -.035em;
}

.related-reading-grid {
    display: grid;

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

    gap:
        clamp(16px, 2vw, 26px);
}

.related-reading-card {
    min-width: 0;

    border:
        1px solid
        rgba(40,54,24,.12);

    background:
        rgba(255,255,255,.92);

    box-shadow:
        0 20px 42px
        rgba(40,54,24,.07);
}

.related-reading-card-link {
    display: flex;
    flex-direction: column;

    min-height: 100%;

    color: inherit;
    text-decoration: none;
}

.related-reading-media {
    position: relative;

    overflow: hidden;

    aspect-ratio: 16 / 9;

    background: var(--green);
}

.related-reading-media::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 42%;
    height: 4px;

    background: var(--rust);

    transition:
        width .35s ease;
}

.related-reading-media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .45s ease;
}

.related-reading-media-placeholder {
    display: grid;
    place-items: center;

    color:
        rgba(255,255,255,.5);

    font-size: 34px;
}

.related-reading-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding:
        22px
        22px
        24px;
}

.related-reading-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;

    min-height: 18px;

    margin-bottom: 12px;

    color: var(--rust);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.related-reading-card h3 {
    margin: 0;

    color: var(--green);

    font-size:
        clamp(20px, 2vw, 27px);
    line-height: 1.12;
    letter-spacing: -.025em;
}

.related-reading-open {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-top: auto;
    padding-top: 24px;

    color: var(--rust);

    font-size: 13px;
    font-weight: 800;
}

.related-reading-open i,
.related-reading-all i {
    transition:
        transform .25s ease;
}

.related-reading-card-link:hover
.related-reading-media img {
    transform: scale(1.035);
}

.related-reading-card-link:hover
.related-reading-media::after {
    width: 100%;
}

.related-reading-card-link:hover
.related-reading-open i,
.related-reading-all:hover i {
    transform: translateX(5px);
}

.related-reading-all {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: var(--green);

    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.related-reading-all-mobile {
    display: none;
}

@media (max-width: 900px) {

    .related-reading-grid {
        grid-template-columns:
            1fr;
    }

    .related-reading-card-link {
        display: grid;

        grid-template-columns:
            minmax(150px, .82fr)
            minmax(0, 1.18fr);
    }

    .related-reading-media {
        aspect-ratio: auto;

        min-height: 180px;
    }
}

@media (max-width: 640px) {

    .related-reading {
        padding:
            44px
            0
            52px;
    }

    .related-reading::before {
        width: 150px;
        height: 150px;

        right: -76px;
    }

    .related-reading-header {
        align-items: flex-start;

        margin-bottom: 26px;
    }

    .related-reading-header h2 {
        max-width: 290px;

        font-size: 34px;
    }

    .related-reading-all-desktop {
        display: none;
    }

    .related-reading-grid {
        gap: 18px;
    }

    .related-reading-card-link {
        display: block;
    }

    .related-reading-media {
        aspect-ratio: 16 / 9;

        min-height: 0;
    }

    .related-reading-card-body {
        padding:
            19px
            18px
            21px;
    }

    .related-reading-card h3 {
        font-size: 22px;
    }

    .related-reading-open {
        padding-top: 18px;
    }

    .related-reading-all-mobile {
        display: inline-flex;

        margin-top: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .related-reading-media img,
    .related-reading-media::after,
    .related-reading-open i,
    .related-reading-all i {
        transition: none;
    }

    .related-reading-card-link:hover
    .related-reading-media img {
        transform: none;
    }
}

/* END RELATED ARTICLES CTA — NEXT READ V1 */


/* =========================================================
   MOBILE MENU VIEWPORT ANCHOR V1
   Mobile navigation panel belongs to the viewport,
   not to the hamburger button's local positioning context.
   ========================================================= */

@media (max-width: 1040px) {

    .main-nav .main-nav-list {
        position: fixed;

        top:
            var(
                --public-menu-viewport-top,
                84px
            );

        right:
            max(
                12px,
                env(safe-area-inset-right)
            );

        left: auto;

        width:
            min(
                330px,
                calc(
                    100vw -
                    24px -
                    env(safe-area-inset-left) -
                    env(safe-area-inset-right)
                )
            );

        max-width:
            calc(
                100vw -
                24px -
                env(safe-area-inset-left) -
                env(safe-area-inset-right)
            );

        max-height:
            calc(
                100dvh -
                var(
                    --public-menu-viewport-top,
                    84px
                ) -
                12px
            );

        overflow-x: hidden;
        overflow-y: auto;

        overscroll-behavior: contain;

        box-sizing: border-box;
    }

    .main-nav.menu-open
    .main-nav-list {
        visibility: visible;
    }
}

@media (max-width: 380px) {

    .main-nav .main-nav-list {
        right:
            max(
                8px,
                env(safe-area-inset-right)
            );

        width:
            calc(
                100vw -
                16px -
                env(safe-area-inset-left) -
                env(safe-area-inset-right)
            );

        max-width:
            calc(
                100vw -
                16px -
                env(safe-area-inset-left) -
                env(safe-area-inset-right)
            );
    }
}

/* END MOBILE MENU VIEWPORT ANCHOR V1 */


/* =========================================================
   SERVICES EDITORIAL MEDIA V1
   Cinematic visual beat before related service navigation.
   Existing custom service hero remains untouched.
   ========================================================= */

.content-visual-break {
    position: relative;

    padding:
        clamp(22px, 4vw, 54px)
        0
        clamp(52px, 7vw, 90px);

    background:
        linear-gradient(
            180deg,
            #f7f3eb 0%,
            #f1ecdf 100%
        );
}

.content-visual-break-inner {
    position: relative;
}

.content-visual-frame {
    position: relative;

    width:
        min(
            100%,
            1120px
        );

    margin:
        0
        auto;

    padding:
        clamp(7px, .8vw, 11px);

    border:
        1px solid
        rgba(40,54,24,.16);

    background:
        var(--green);

    box-shadow:
        0 28px 70px
        rgba(28,38,17,.14);

    transform:
        rotate(-.35deg);

    transform-origin:
        center;
}

.content-visual-frame::before {
    content: "";

    position: absolute;
    z-index: 2;

    top: -9px;
    left:
        clamp(
            18px,
            6vw,
            74px
        );

    width:
        clamp(
            70px,
            11vw,
            128px
        );

    height: 5px;

    background:
        var(--rust);
}

.content-visual-frame::after {
    content: "";

    position: absolute;

    right: -12px;
    bottom: -12px;

    width:
        clamp(
            54px,
            8vw,
            92px
        );

    height:
        clamp(
            54px,
            8vw,
            92px
        );

    border-right:
        2px solid
        rgba(190,103,36,.42);

    border-bottom:
        2px solid
        rgba(190,103,36,.42);

    pointer-events: none;
}

.content-visual-image {
    position: relative;

    overflow: hidden;

    background:
        #17200e;
}

.content-visual-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(221,161,94,.08),
            transparent 38%,
            rgba(20,27,12,.11)
        );

    pointer-events: none;
}

.content-visual-image img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 720px;

    object-fit: cover;
}

.content-visual-corner {
    position: absolute;
    z-index: 3;

    right:
        clamp(
            13px,
            2vw,
            25px
        );

    bottom:
        clamp(
            13px,
            2vw,
            25px
        );

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background:
        var(--amber);

    box-shadow:
        0 0 0 7px
        rgba(221,161,94,.13);
}

@media (max-width: 700px) {

    .content-visual-break {
        padding:
            14px
            0
            46px;
    }

    .content-visual-frame {
        width:
            calc(
                100% -
                8px
            );

        padding: 6px;

        transform:
            rotate(-.2deg);

        box-shadow:
            0 20px 46px
            rgba(28,38,17,.13);
    }

    .content-visual-frame::before {
        top: -6px;
        left: 18px;

        width: 64px;
        height: 4px;
    }

    .content-visual-frame::after {
        right: -6px;
        bottom: -6px;

        width: 42px;
        height: 42px;
    }

    .content-visual-image img {
        max-height: none;
    }

    .content-visual-corner {
        right: 13px;
        bottom: 13px;

        width: 9px;
        height: 9px;

        box-shadow:
            0 0 0 5px
            rgba(221,161,94,.13);
    }
}

@media (prefers-reduced-motion: reduce) {

    .content-visual-frame {
        transform: none;
    }
}

/* END SERVICES EDITORIAL MEDIA V1 */


/* =========================================================
   SERVICES EDITORIAL MEDIA POSITION V2
   Photo belongs directly after the service hero.
   ========================================================= */

.story-page >
.content-visual-break {
    padding:
        clamp(34px, 5vw, 62px)
        0
        clamp(36px, 5vw, 62px);

    background:
        linear-gradient(
            180deg,
            #f4efe5 0%,
            #faf8f3 100%
        );

    border-bottom:
        1px solid
        rgba(40,54,24,.08);
}

.story-page >
.content-visual-break
.content-visual-frame {
    width:
        min(
            calc(100% - 36px),
            1080px
        );
}

.story-page >
.content-visual-break
.content-visual-image {
    aspect-ratio:
        16 / 8.6;
}

.story-page >
.content-visual-break
.content-visual-image img {
    width: 100%;
    height: 100%;

    max-height: none;

    object-fit: cover;
}

@media (max-width: 700px) {

    .story-page >
    .content-visual-break {
        padding:
            20px
            0
            34px;
    }

    .story-page >
    .content-visual-break
    .content-visual-frame {
        width:
            calc(
                100% -
                24px
            );
    }

    .story-page >
    .content-visual-break
    .content-visual-image {
        aspect-ratio:
            4 / 3;
    }
}

/* END SERVICES EDITORIAL MEDIA POSITION V2 */


/* =========================================================
   SERVICES CINEMATIC FRAME V3
   Moving editorial film frame.
   Semantic image remains immediately visible.
   ========================================================= */

.content-visual-break.is-cinematic-v3 {
    --visual-pointer-x: 0px;
    --visual-pointer-y: 0px;
    --visual-scroll-y: 0px;

    position: relative;

    margin-top: -1px;

    padding:
        0
        0
        clamp(48px, 6vw, 76px);

    background:
        linear-gradient(
            180deg,
            var(--green) 0 38px,
            #f4efe5 38px,
            #faf8f3 100%
        );

    overflow: hidden;
}

.content-visual-break.is-cinematic-v3
.content-visual-stage {
    position: relative;

    width:
        min(
            100%,
            1180px
        );

    margin:
        0
        auto;

    padding-top: 20px;
}

.content-visual-break.is-cinematic-v3
.content-visual-meta {
    position: relative;
    z-index: 4;

    display: grid;

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

    align-items: center;

    gap:
        clamp(10px, 2vw, 22px);

    width:
        min(
            calc(100% - 54px),
            1050px
        );

    margin:
        0
        auto
        12px;

    color:
        rgba(255,255,255,.78);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
}

.content-visual-scene {
    color: var(--amber);
}

.content-visual-label {
    text-align: right;
}

.content-visual-meta-line {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(221,161,94,.82),
            rgba(221,161,94,.08)
        );

    transform-origin: left center;

    transform: scaleX(.22);
}

.content-visual-break.is-visual-active
.content-visual-meta-line {
    animation:
        contentVisualLineIn
        .8s
        var(--ease)
        forwards;
}

.content-visual-break.is-cinematic-v3
.content-visual-frame {
    position: relative;
    z-index: 2;

    width:
        min(
            calc(100% - 46px),
            1100px
        );

    margin:
        0
        auto;

    padding: 8px;

    border:
        1px solid
        rgba(221,161,94,.28);

    background:
        #17200f;

    box-shadow:
        0 34px 80px
        rgba(25,33,15,.22);

    transform-origin:
        center center;

    transition:
        transform .45s var(--ease),
        box-shadow .45s var(--ease);
}

.content-visual-break.is-cinematic-v3.lean-left
.content-visual-frame {
    transform:
        rotate(-.65deg);
}

.content-visual-break.is-cinematic-v3.lean-right
.content-visual-frame {
    transform:
        rotate(.65deg);
}

.content-visual-break.is-cinematic-v3
.content-visual-frame:hover {
    transform:
        rotate(0deg)
        translateY(-3px);

    box-shadow:
        0 42px 90px
        rgba(25,33,15,.27);
}

.content-visual-break.is-cinematic-v3
.content-visual-image {
    position: relative;

    overflow: hidden;

    aspect-ratio:
        16 / 8.7;

    background:
        #11180a;
}

.content-visual-break.is-cinematic-v3
.content-visual-image img {
    display: block;

    width: 100%;
    height: 100%;

    max-height: none;

    object-fit: cover;

    transform:
        translate3d(
            var(--visual-pointer-x),
            calc(
                var(--visual-pointer-y) +
                var(--visual-scroll-y)
            ),
            0
        )
        scale(1.055);

    transition:
        transform
        .24s
        ease-out;

    will-change:
        transform;
}

.content-visual-break.is-cinematic-v3
.content-visual-frame:hover
.content-visual-image img {
    transform:
        translate3d(
            var(--visual-pointer-x),
            calc(
                var(--visual-pointer-y) +
                var(--visual-scroll-y)
            ),
            0
        )
        scale(1.075);
}

.content-visual-vignette {
    position: absolute;
    z-index: 2;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(18,25,11,.18),
            transparent 24%,
            transparent 76%,
            rgba(18,25,11,.18)
        ),
        linear-gradient(
            180deg,
            rgba(18,25,11,.09),
            transparent 25%,
            transparent 72%,
            rgba(18,25,11,.2)
        );

    pointer-events: none;
}

.content-film-rail {
    position: absolute;
    z-index: 4;

    left: 0;
    right: 0;

    height: 12px;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(21,28,13,.8)
            0 14px,
            transparent
            14px 25px
        );

    opacity: .62;

    pointer-events: none;
}

.content-film-rail.rail-top {
    top: 0;
}

.content-film-rail.rail-bottom {
    bottom: 0;
}

.content-visual-timecode {
    position: absolute;
    z-index: 5;

    right: 18px;
    top: 22px;

    padding:
        6px
        8px;

    border:
        1px solid
        rgba(255,255,255,.22);

    background:
        rgba(20,27,12,.38);

    color:
        rgba(255,255,255,.82);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;

    backdrop-filter:
        blur(5px);

    pointer-events: none;
}

.content-visual-scan {
    position: absolute;
    z-index: 3;

    top: 12px;
    bottom: 12px;
    left: -18%;

    width: 12%;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,228,179,.16),
            transparent
        );

    transform:
        skewX(-11deg);

    pointer-events: none;
}

.content-visual-break.is-visual-active
.content-visual-scan {
    animation:
        contentVisualScan
        4.8s
        1.05s
        ease-in-out
        infinite;
}

.content-visual-crosshair {
    position: absolute;
    z-index: 5;

    left: 24px;
    bottom: 24px;

    width: 26px;
    height: 26px;

    border:
        1px solid
        rgba(221,161,94,.58);

    border-radius: 50%;

    opacity: .72;

    pointer-events: none;
}

.content-visual-crosshair::before,
.content-visual-crosshair::after {
    content: "";

    position: absolute;

    background:
        rgba(221,161,94,.62);
}

.content-visual-crosshair::before {
    top: 50%;
    left: -7px;
    right: -7px;

    height: 1px;
}

.content-visual-crosshair::after {
    top: -7px;
    bottom: -7px;
    left: 50%;

    width: 1px;
}

.content-crop {
    position: absolute;
    z-index: 6;

    width: 22px;
    height: 22px;

    pointer-events: none;
}

.content-crop.crop-tl {
    top: -9px;
    left: -9px;

    border-top:
        2px solid
        var(--rust);

    border-left:
        2px solid
        var(--rust);
}

.content-crop.crop-tr {
    top: -9px;
    right: -9px;

    border-top:
        2px solid
        var(--rust);

    border-right:
        2px solid
        var(--rust);
}

.content-crop.crop-bl {
    bottom: -9px;
    left: -9px;

    border-bottom:
        2px solid
        var(--rust);

    border-left:
        2px solid
        var(--rust);
}

.content-crop.crop-br {
    right: -9px;
    bottom: -9px;

    border-right:
        2px solid
        var(--rust);

    border-bottom:
        2px solid
        var(--rust);
}

.content-visual-break.is-cinematic-v3
.content-visual-corner {
    right: 19px;
    bottom: 19px;

    width: 9px;
    height: 9px;

    background:
        var(--amber);

    box-shadow:
        0 0 0 6px
        rgba(221,161,94,.13);
}

@keyframes contentVisualLineIn {

    to {
        transform:
            scaleX(1);
    }
}

@keyframes contentVisualScan {

    0% {
        left: -18%;
        opacity: 0;
    }

    14% {
        opacity: 1;
    }

    62% {
        opacity: .8;
    }

    78%,
    100% {
        left: 112%;
        opacity: 0;
    }
}

@media (max-width: 700px) {

    .content-visual-break.is-cinematic-v3 {
        padding-bottom: 40px;

        background:
            linear-gradient(
                180deg,
                var(--green) 0 24px,
                #f4efe5 24px,
                #faf8f3 100%
            );
    }

    .content-visual-break.is-cinematic-v3
    .content-visual-stage {
        padding-top: 10px;
    }

    .content-visual-break.is-cinematic-v3
    .content-visual-meta {
        width:
            calc(
                100% -
                34px
            );

        grid-template-columns:
            auto
            1fr;

        gap: 9px 12px;

        margin-bottom: 9px;

        font-size: 9px;
    }

    .content-visual-break.is-cinematic-v3
    .content-visual-meta-line {
        grid-column:
            2;
    }

    .content-visual-break.is-cinematic-v3
    .content-visual-label {
        display: none;
    }

    .content-visual-break.is-cinematic-v3
    .content-visual-frame {
        width:
            calc(
                100% -
                28px
            );

        padding: 5px;

        transform:
            rotate(0deg);

        box-shadow:
            0 24px 54px
            rgba(25,33,15,.19);
    }

    .content-visual-break.is-cinematic-v3
    .content-visual-frame:hover {
        transform:
            none;
    }

    .content-visual-break.is-cinematic-v3
    .content-visual-image {
        aspect-ratio:
            4 / 3;
    }

    .content-visual-break.is-cinematic-v3
    .content-visual-image img,
    .content-visual-break.is-cinematic-v3
    .content-visual-frame:hover
    .content-visual-image img {
        transform:
            translate3d(
                0,
                calc(
                    var(--visual-scroll-y) *
                    .45
                ),
                0
            )
            scale(1.05);

        transition:
            none;
    }

    .content-film-rail {
        height: 8px;
    }

    .content-visual-timecode {
        top: 15px;
        right: 13px;

        font-size: 9px;
    }

    .content-visual-crosshair {
        left: 17px;
        bottom: 17px;

        width: 21px;
        height: 21px;
    }

    .content-crop {
        width: 15px;
        height: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .content-visual-break.is-cinematic-v3
    .content-visual-frame,
    .content-visual-break.is-cinematic-v3
    .content-visual-frame:hover {
        transform: none;

        transition: none;
    }

    .content-visual-break.is-cinematic-v3
    .content-visual-image img,
    .content-visual-break.is-cinematic-v3
    .content-visual-frame:hover
    .content-visual-image img {
        transform:
            scale(1.035);

        transition: none;
    }

    .content-visual-break.is-cinematic-v3
    .content-visual-meta-line {
        transform: scaleX(1);

        animation: none;
    }

    .content-visual-break.is-cinematic-v3
    .content-visual-scan {
        display: none;

        animation: none;
    }
}

/* END SERVICES CINEMATIC FRAME V3 */


/* =========================================================
   SERVICES HERO PHOTO SAFE OVERLAY V4

   SAFE STRATEGY:
   - no historical CSS removal
   - existing service hero animation stays intact
   - existing V3 files stay intact
   - separate V3 photo block is only visually suppressed
   - photograph becomes the background of .story-art
   ========================================================= */


/* ---------------------------------------------------------
   1. Hide ONLY the separate V3 service image section.
   --------------------------------------------------------- */

.story-page[data-service-visual]:not(
    [data-service-visual=""]
)
.content-visual-break[
    data-content-visual="service"
] {
    display: none !important;
}


/* ---------------------------------------------------------
   2. Exact photo mapping.
   --------------------------------------------------------- */

.story-page[
    data-service-visual="screenwriting"
]
.story-art {
    --pm-service-photo:
        url("/uploads/media/2026/08/site/services/screenwriting.jpg");

    --pm-photo-x: 50%;
    --pm-photo-y: 50%;
}

.story-page[
    data-service-visual="script-doctor"
]
.story-art {
    --pm-service-photo:
        url("/uploads/media/2026/08/site/services/script-doctor.jpg");

    --pm-photo-x: 50%;
    --pm-photo-y: 48%;
}

.story-page[
    data-service-visual="mentoring"
]
.story-art {
    --pm-service-photo:
        url("/uploads/media/2026/08/site/services/mentoring.jpg");

    --pm-photo-x: 50%;
    --pm-photo-y: 48%;
}

.story-page[
    data-service-visual="consultation"
]
.story-art {
    --pm-service-photo:
        url("/uploads/media/2026/08/site/services/consultation.jpg");

    --pm-photo-x: 50%;
    --pm-photo-y: 46%;
}

.story-page[
    data-service-visual="screenwriter-advocacy"
]
.story-art {
    --pm-service-photo:
        url("/uploads/media/2026/08/site/services/screenwriter-advocacy.jpg");

    --pm-photo-x: 50%;
    --pm-photo-y: 48%;
}

.story-page[
    data-service-visual="film-analysis"
]
.story-art {
    --pm-service-photo:
        url("/uploads/media/2026/08/site/services/film-analysis.jpg");

    --pm-photo-x: 50%;
    --pm-photo-y: 50%;
}

.story-page[
    data-service-visual="scene-friend"
]
.story-art {
    --pm-service-photo:
        url("/uploads/media/2026/08/site/services/scene-friend.jpg");

    --pm-photo-x: 50%;
    --pm-photo-y: 48%;
}


/* ---------------------------------------------------------
   3. Integrate photograph INTO the original orange hero.
   Existing animated artwork stays above the background.
   --------------------------------------------------------- */

.story-page[data-service-visual]:not(
    [data-service-visual=""]
)
.story-art {
    background-color:
        #bf6c27 !important;

    background-image:
        linear-gradient(
            135deg,
            rgba(190,103,36,.82) 0%,
            rgba(190,103,36,.65) 40%,
            rgba(71,75,36,.38) 100%
        ),
        linear-gradient(
            180deg,
            rgba(25,34,14,.04),
            rgba(25,34,14,.22)
        ),
        var(--pm-service-photo) !important;

    background-repeat:
        no-repeat !important;

    background-size:
        cover,
        cover,
        cover !important;

    background-position:
        center,
        center,
        var(--pm-photo-x)
        var(--pm-photo-y) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.04),
        inset 0 0 100px
        rgba(26,34,15,.15);

    isolation: isolate;
}


/* ---------------------------------------------------------
   4. Slight cinematic treatment without touching the
      service-specific JS animation property.
   --------------------------------------------------------- */

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

    .story-page[data-service-visual]:not(
        [data-service-visual=""]
    )
    .story-art {
        transition:
            filter .35s ease,
            box-shadow .35s ease;
    }

    .story-page[data-service-visual]:not(
        [data-service-visual=""]
    )
    .story-art:hover {
        filter:
            saturate(1.06)
            contrast(1.025);

        box-shadow:
            inset 0 0 0 1px
            rgba(255,255,255,.075),
            inset 0 0 110px
            rgba(26,34,15,.08);
    }
}


/* ---------------------------------------------------------
   5. Mobile: keep it completely stable.
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .story-page[data-service-visual]:not(
        [data-service-visual=""]
    )
    .story-art {
        background-size:
            cover,
            cover,
            cover !important;
    }
}


@media (
    prefers-reduced-motion: reduce
) {

    .story-page[data-service-visual]:not(
        [data-service-visual=""]
    )
    .story-art {
        transition: none;
    }
}

/* END SERVICES HERO PHOTO SAFE OVERLAY V4 */


/* =========================================================
   SERVICES FULL HERO PHOTO V5

   Correct architecture:
   - photograph belongs to the WHOLE .story-hero;
   - desktop: visible through the complete right 42%;
   - tablet/mobile: visible through the complete lower 42%;
   - .story-art stays only as the animated overlay;
   - historical CSS is untouched.
   ========================================================= */


/* ---------------------------------------------------------
   Service photo map for the complete hero.
   --------------------------------------------------------- */

.story-page[
    data-service-visual="screenwriting"
] .story-hero {
    --pm-full-hero-photo:
        url("/uploads/media/2026/08/site/services/screenwriting.jpg");

    --pm-full-photo-position:
        52% 50%;
}

.story-page[
    data-service-visual="script-doctor"
] .story-hero {
    --pm-full-hero-photo:
        url("/uploads/media/2026/08/site/services/script-doctor.jpg");

    --pm-full-photo-position:
        50% 47%;
}

.story-page[
    data-service-visual="mentoring"
] .story-hero {
    --pm-full-hero-photo:
        url("/uploads/media/2026/08/site/services/mentoring.jpg");

    --pm-full-photo-position:
        51% 48%;
}

.story-page[
    data-service-visual="consultation"
] .story-hero {
    --pm-full-hero-photo:
        url("/uploads/media/2026/08/site/services/consultation.jpg");

    --pm-full-photo-position:
        50% 45%;
}

.story-page[
    data-service-visual="screenwriter-advocacy"
] .story-hero {
    --pm-full-hero-photo:
        url("/uploads/media/2026/08/site/services/screenwriter-advocacy.jpg");

    --pm-full-photo-position:
        50% 48%;
}

.story-page[
    data-service-visual="film-analysis"
] .story-hero {
    --pm-full-hero-photo:
        url("/uploads/media/2026/08/site/services/film-analysis.jpg");

    --pm-full-photo-position:
        53% 50%;
}

.story-page[
    data-service-visual="scene-friend"
] .story-hero {
    --pm-full-hero-photo:
        url("/uploads/media/2026/08/site/services/scene-friend.jpg");

    --pm-full-photo-position:
        50% 48%;
}


/* ---------------------------------------------------------
   DESKTOP

   Layer 1:
   solid green masks the left 58%.

   Layer 2:
   rust cinematic grading exists only on the right 42%.

   Layer 3:
   full-size photograph behind both layers.

   Therefore the photograph fills the entire right panel
   without stretching or creating a small inner rectangle.
   --------------------------------------------------------- */

.story-page[data-service-visual]:not(
    [data-service-visual=""]
) .story-hero {
    background-color:
        var(--rust) !important;

    background-image:
        linear-gradient(
            90deg,
            var(--green) 0%,
            var(--green) 58%,
            transparent 58%,
            transparent 100%
        ),
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 58%,
            rgba(188,108,37,.58) 58%,
            rgba(188,108,37,.58) 100%
        ),
        var(--pm-full-hero-photo) !important;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat !important;

    background-size:
        100% 100%,
        100% 100%,
        cover !important;

    background-position:
        center,
        center,
        var(--pm-full-photo-position) !important;
}


/* ---------------------------------------------------------
   The 230x230 story-art is NO LONGER the photo container.
   It becomes a translucent animation layer over the large
   photograph.
   --------------------------------------------------------- */

.story-page[data-service-visual]:not(
    [data-service-visual=""]
) .story-art {
    background:
        rgba(188,108,37,.13) !important;

    border-color:
        rgba(255,235,202,.27) !important;

    box-shadow:
        0 20px 55px
        rgba(45,30,13,.10),
        inset 0 0 45px
        rgba(255,226,178,.055) !important;

    backdrop-filter:
        blur(1px)
        saturate(1.05);

    -webkit-backdrop-filter:
        blur(1px)
        saturate(1.05);
}


/*
 * Reassert that the dormant V3 picture section below hero
 * remains invisible. Files are retained for safe rollback.
 */

.story-page[data-service-visual]:not(
    [data-service-visual=""]
)
.content-visual-break[
    data-content-visual="service"
] {
    display: none !important;
}


/* ---------------------------------------------------------
   Small desktop interaction:
   only grading changes, layout does not move.
   --------------------------------------------------------- */

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

    .story-page[data-service-visual]:not(
        [data-service-visual=""]
    ) .story-hero {
        transition:
            filter
            .45s
            ease;
    }

    .story-page[data-service-visual]:not(
        [data-service-visual=""]
    ) .story-hero:hover {
        filter:
            saturate(1.035)
            contrast(1.018);
    }
}


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

   Existing site architecture switches hero from 58/42
   horizontal split to 58/42 vertical split.

   We mirror exactly the same structure:
   text stays in green upper 58%;
   photograph fills the complete lower 42%.
   --------------------------------------------------------- */

@media (max-width: 1040px) {

    .story-page[data-service-visual]:not(
        [data-service-visual=""]
    ) .story-hero {
        background-image:
            linear-gradient(
                180deg,
                var(--green) 0%,
                var(--green) 58%,
                transparent 58%,
                transparent 100%
            ),
            linear-gradient(
                180deg,
                transparent 0%,
                transparent 58%,
                rgba(188,108,37,.60) 58%,
                rgba(188,108,37,.60) 100%
            ),
            var(--pm-full-hero-photo) !important;

        background-size:
            100% 100%,
            100% 100%,
            cover !important;

        background-position:
            center,
            center,
            var(--pm-full-photo-position) !important;
    }

    .story-page[data-service-visual]:not(
        [data-service-visual=""]
    ) .story-art {
        background:
            rgba(188,108,37,.10) !important;

        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;
    }
}


@media (
    prefers-reduced-motion: reduce
) {

    .story-page[data-service-visual]:not(
        [data-service-visual=""]
    ) .story-hero {
        transition: none;
    }
}

/* END SERVICES FULL HERO PHOTO V5 */


/* =========================================================
   SERVICES BLENDED FULL HERO V6

   One photograph across the complete hero.
   Green is now a translucent cinematic readability mask,
   not an opaque 58/42 wall.
   ========================================================= */


/* ---------------------------------------------------------
   Per-photo framing.
   Desktop mostly needs vertical composition.
   Mobile gets its own crop anchor.
   --------------------------------------------------------- */

.story-page[
    data-service-visual="screenwriting"
] .story-hero {
    --pm-v6-photo-position:
        50% 50%;

    --pm-v6-mobile-position:
        50% 50%;
}

.story-page[
    data-service-visual="script-doctor"
] .story-hero {
    --pm-v6-photo-position:
        50% 43%;

    --pm-v6-mobile-position:
        38% 46%;
}

.story-page[
    data-service-visual="mentoring"
] .story-hero {
    --pm-v6-photo-position:
        50% 43%;

    --pm-v6-mobile-position:
        38% 47%;
}

.story-page[
    data-service-visual="consultation"
] .story-hero {
    --pm-v6-photo-position:
        50% 44%;

    --pm-v6-mobile-position:
        48% 46%;
}

.story-page[
    data-service-visual="screenwriter-advocacy"
] .story-hero {
    --pm-v6-photo-position:
        50% 47%;

    --pm-v6-mobile-position:
        46% 48%;
}

.story-page[
    data-service-visual="film-analysis"
] .story-hero {
    --pm-v6-photo-position:
        50% 49%;

    --pm-v6-mobile-position:
        52% 49%;
}

.story-page[
    data-service-visual="scene-friend"
] .story-hero {
    --pm-v6-photo-position:
        50% 47%;

    --pm-v6-mobile-position:
        48% 48%;
}


/* ---------------------------------------------------------
   DESKTOP — continuous photographic hero.

   Layer order:
   1. green readability mask
   2. subtle rust grading
   3. depth shading
   4. actual photograph from V5 variable

   There is intentionally NO hard split.
   --------------------------------------------------------- */

@media (min-width: 1041px) {

    .story-page[data-service-visual]:not(
        [data-service-visual=""]
    ) .story-hero {
        background-color:
            #283618 !important;

        background-image:
            linear-gradient(
                90deg,

                rgba(40,54,24,.995)
                0%,

                rgba(40,54,24,.985)
                23%,

                rgba(40,54,24,.955)
                36%,

                rgba(40,54,24,.86)
                45%,

                rgba(40,54,24,.68)
                53%,

                rgba(40,54,24,.43)
                60%,

                rgba(40,54,24,.19)
                68%,

                rgba(40,54,24,.055)
                76%,

                rgba(40,54,24,0)
                84%
            ),

            linear-gradient(
                90deg,

                rgba(188,108,37,.025)
                0%,

                rgba(188,108,37,.06)
                40%,

                rgba(188,108,37,.15)
                58%,

                rgba(188,108,37,.27)
                76%,

                rgba(188,108,37,.36)
                100%
            ),

            linear-gradient(
                180deg,

                rgba(20,27,12,.025)
                0%,

                rgba(20,27,12,.03)
                55%,

                rgba(20,27,12,.16)
                100%
            ),

            var(--pm-full-hero-photo)
            !important;

        background-repeat:
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat
            !important;

        background-size:
            100% 100%,
            100% 100%,
            100% 100%,
            cover
            !important;

        background-position:
            center,
            center,
            center,
            var(--pm-v6-photo-position)
            !important;
    }


    /*
     * Give photographic compositions slightly more air.
     */

    .story-page[data-service-visual]:not(
        [data-service-visual=""]
    ) .story-hero-grid {
        min-height:
            clamp(
                470px,
                36vw,
                510px
            );
    }


    /*
     * The original animated 230x230 art now reads as a
     * graphic HUD floating above the large photograph.
     */

    .story-page[data-service-visual]:not(
        [data-service-visual=""]
    ) .story-art {
        background:
            linear-gradient(
                135deg,
                rgba(188,108,37,.13),
                rgba(40,54,24,.08)
            )
            !important;

        border-color:
            rgba(255,235,204,.31)
            !important;

        box-shadow:
            0 24px 60px
            rgba(25,27,13,.12),
            inset 0 0 0 1px
            rgba(255,255,255,.025),
            inset 0 0 48px
            rgba(255,229,188,.045)
            !important;

        backdrop-filter:
            blur(1.5px)
            saturate(1.04);

        -webkit-backdrop-filter:
            blur(1.5px)
            saturate(1.04);
    }
}


/* ---------------------------------------------------------
   Improve left copy readability without making the photo
   disappear completely underneath it.
   --------------------------------------------------------- */

.story-page[data-service-visual]:not(
    [data-service-visual=""]
) .story-heading {
    text-shadow:
        0 2px 20px
        rgba(20,27,12,.08);
}

.story-page[data-service-visual]:not(
    [data-service-visual=""]
) .story-intro {
    color:
        rgba(255,255,255,.70);
}


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

   Full photograph remains behind the whole hero,
   but the upper copy area receives a stronger green mask.
   The fade is vertical rather than horizontal.
   --------------------------------------------------------- */

@media (max-width: 1040px) {

    .story-page[data-service-visual]:not(
        [data-service-visual=""]
    ) .story-hero {
        background-color:
            #283618 !important;

        background-image:
            linear-gradient(
                180deg,

                rgba(40,54,24,.995)
                0%,

                rgba(40,54,24,.99)
                34%,

                rgba(40,54,24,.96)
                49%,

                rgba(40,54,24,.82)
                58%,

                rgba(40,54,24,.57)
                67%,

                rgba(40,54,24,.27)
                76%,

                rgba(40,54,24,.07)
                86%,

                rgba(40,54,24,0)
                94%
            ),

            linear-gradient(
                180deg,

                rgba(188,108,37,.015)
                0%,

                rgba(188,108,37,.06)
                52%,

                rgba(188,108,37,.22)
                72%,

                rgba(188,108,37,.38)
                100%
            ),

            linear-gradient(
                180deg,
                rgba(20,27,12,.02),
                rgba(20,27,12,.13)
            ),

            var(--pm-full-hero-photo)
            !important;

        background-repeat:
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat
            !important;

        background-size:
            100% 100%,
            100% 100%,
            100% 100%,
            cover
            !important;

        background-position:
            center,
            center,
            center,
            var(--pm-v6-mobile-position)
            !important;
    }

    .story-page[data-service-visual]:not(
        [data-service-visual=""]
    ) .story-art {
        background:
            rgba(188,108,37,.08)
            !important;

        border-color:
            rgba(255,235,204,.26)
            !important;

        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;
    }
}


/* ---------------------------------------------------------
   Very narrow mobile screens need maximum text contrast.
   --------------------------------------------------------- */

@media (max-width: 520px) {

    .story-page[data-service-visual]:not(
        [data-service-visual=""]
    ) .story-hero {
        background-image:
            linear-gradient(
                180deg,

                rgba(40,54,24,1)
                0%,

                rgba(40,54,24,.995)
                40%,

                rgba(40,54,24,.95)
                55%,

                rgba(40,54,24,.74)
                65%,

                rgba(40,54,24,.40)
                75%,

                rgba(40,54,24,.12)
                85%,

                rgba(40,54,24,0)
                94%
            ),

            linear-gradient(
                180deg,
                rgba(188,108,37,.02),
                rgba(188,108,37,.35)
            ),

            linear-gradient(
                180deg,
                rgba(20,27,12,.01),
                rgba(20,27,12,.14)
            ),

            var(--pm-full-hero-photo)
            !important;
    }
}


/*
 * Dormant V3 image remains hidden.
 */

.story-page[data-service-visual]:not(
    [data-service-visual=""]
)
.content-visual-break[
    data-content-visual="service"
] {
    display:
        none
        !important;
}


@media (
    prefers-reduced-motion: reduce
) {

    .story-page[data-service-visual]:not(
        [data-service-visual=""]
    ) .story-hero,
    .story-page[data-service-visual]:not(
        [data-service-visual=""]
    ) .story-art {
        transition:
            none
            !important;
    }
}

/* END SERVICES BLENDED FULL HERO V6 */


/* =========================================================
   COURSES WORKBENCH HERO V1

   Course metaphor:
   screenplay desk / editor workbench.

   Different visual language from Services:
   - structured paper-grid texture;
   - diagonal green work surface;
   - warm photographic classroom layer;
   - existing course-specific animated hero stays intact.
   ========================================================= */


/* ---------------------------------------------------------
   Course-specific photographs.
   --------------------------------------------------------- */

.story-page[
    data-course-visual="screenwriting-course"
] .story-hero {
    --pm-course-photo:
        url("/uploads/media/2026/08/site/courses/screenwriting-course.jpg");

    --pm-course-photo-position:
        52% 46%;

    --pm-course-mobile-position:
        50% 52%;
}

.story-page[
    data-course-visual="rewrite-course"
] .story-hero {
    --pm-course-photo:
        url("/uploads/media/2026/08/site/courses/rewrite-course.jpg");

    --pm-course-photo-position:
        50% 47%;

    --pm-course-mobile-position:
        50% 52%;
}


/* ---------------------------------------------------------
   DESKTOP WORKBENCH

   Image spans the full hero, but unlike Services the left
   mask has a diagonal "page/workbench" transition and a
   subtle screenplay grid.
   --------------------------------------------------------- */

@media (min-width: 1041px) {

    .story-page[data-course-visual]:not(
        [data-course-visual=""]
    ) .story-hero {
        overflow: hidden;

        background-color:
            #283618 !important;

        background-image:

            repeating-linear-gradient(
                0deg,
                transparent 0,
                transparent 31px,
                rgba(254,250,224,.025) 31px,
                rgba(254,250,224,.025) 32px
            ),

            repeating-linear-gradient(
                90deg,
                transparent 0,
                transparent 47px,
                rgba(221,161,94,.022) 47px,
                rgba(221,161,94,.022) 48px
            ),

            linear-gradient(
                102deg,

                rgba(40,54,24,1)
                0%,

                rgba(40,54,24,.995)
                29%,

                rgba(40,54,24,.97)
                40%,

                rgba(40,54,24,.88)
                49%,

                rgba(40,54,24,.66)
                56%,

                rgba(40,54,24,.35)
                64%,

                rgba(40,54,24,.10)
                72%,

                rgba(40,54,24,0)
                79%
            ),

            linear-gradient(
                90deg,

                rgba(188,108,37,.02)
                0%,

                rgba(188,108,37,.06)
                45%,

                rgba(188,108,37,.19)
                66%,

                rgba(188,108,37,.34)
                100%
            ),

            linear-gradient(
                180deg,
                rgba(20,27,12,.025),
                rgba(20,27,12,.18)
            ),

            var(--pm-course-photo)
            !important;

        background-repeat:
            repeat,
            repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat
            !important;

        background-size:
            auto,
            auto,
            100% 100%,
            100% 100%,
            100% 100%,
            cover
            !important;

        background-position:
            center,
            center,
            center,
            center,
            center,
            var(--pm-course-photo-position)
            !important;
    }


    .story-page[data-course-visual]:not(
        [data-course-visual=""]
    ) .story-hero-grid {
        min-height:
            clamp(
                475px,
                36vw,
                515px
            );
    }


    /*
     * Existing course animation becomes a translucent
     * screenplay/editing instrument over the photo.
     */

    .story-page[data-course-visual]:not(
        [data-course-visual=""]
    ) .story-art {
        background:
            linear-gradient(
                145deg,
                rgba(40,54,24,.24),
                rgba(188,108,37,.15)
            )
            !important;

        border:
            1px solid
            rgba(254,250,224,.28)
            !important;

        box-shadow:
            0 25px 65px
            rgba(20,27,12,.16),
            inset 0 0 0 1px
            rgba(221,161,94,.055),
            inset 0 0 54px
            rgba(254,250,224,.04)
            !important;

        backdrop-filter:
            blur(2px)
            saturate(1.03);

        -webkit-backdrop-filter:
            blur(2px)
            saturate(1.03);
    }


    /*
     * Workbench edge / screenplay margin.
     */

    .story-page[data-course-visual]:not(
        [data-course-visual=""]
    ) .story-hero-grid::after {
        content: "";

        position: absolute;
        z-index: 1;

        top: 12%;
        bottom: 12%;

        left: 57%;

        width: 1px;

        background:
            linear-gradient(
                180deg,
                transparent,
                rgba(221,161,94,.42) 18%,
                rgba(221,161,94,.20) 82%,
                transparent
            );

        transform:
            rotate(6deg);

        transform-origin:
            center;

        pointer-events: none;
    }

}


/* ---------------------------------------------------------
   Ensure actual hero content is above background decoration.
   --------------------------------------------------------- */

.story-page[data-course-visual]:not(
    [data-course-visual=""]
) .story-heading,
.story-page[data-course-visual]:not(
    [data-course-visual=""]
) .story-art {
    position: relative;
    z-index: 3;
}


.story-page[data-course-visual]:not(
    [data-course-visual=""]
) .story-intro {
    color:
        rgba(255,255,255,.72);
}


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

   Photograph occupies the complete lower part of the hero.
   A diagonal page-edge separates text from the visual zone.
   --------------------------------------------------------- */

@media (max-width: 1040px) {

    .story-page[data-course-visual]:not(
        [data-course-visual=""]
    ) .story-hero {
        overflow: hidden;

        background-color:
            #283618 !important;

        background-image:

            repeating-linear-gradient(
                0deg,
                transparent 0,
                transparent 29px,
                rgba(254,250,224,.022) 29px,
                rgba(254,250,224,.022) 30px
            ),

            linear-gradient(
                176deg,

                rgba(40,54,24,1)
                0%,

                rgba(40,54,24,.995)
                42%,

                rgba(40,54,24,.96)
                54%,

                rgba(40,54,24,.78)
                63%,

                rgba(40,54,24,.49)
                70%,

                rgba(40,54,24,.20)
                78%,

                rgba(40,54,24,.04)
                87%,

                rgba(40,54,24,0)
                94%
            ),

            linear-gradient(
                180deg,
                rgba(188,108,37,.02),
                rgba(188,108,37,.36)
            ),

            linear-gradient(
                180deg,
                transparent,
                rgba(20,27,12,.16)
            ),

            var(--pm-course-photo)
            !important;

        background-repeat:
            repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat
            !important;

        background-size:
            auto,
            100% 100%,
            100% 100%,
            100% 100%,
            cover
            !important;

        background-position:
            center,
            center,
            center,
            center,
            var(--pm-course-mobile-position)
            !important;
    }


    .story-page[data-course-visual]:not(
        [data-course-visual=""]
    ) .story-art {
        background:
            rgba(188,108,37,.09)
            !important;

        border-color:
            rgba(254,250,224,.25)
            !important;

        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;
    }
}


/* ---------------------------------------------------------
   Narrow-screen readability.
   --------------------------------------------------------- */

@media (max-width: 520px) {

    .story-page[data-course-visual]:not(
        [data-course-visual=""]
    ) .story-hero {
        background-image:

            repeating-linear-gradient(
                0deg,
                transparent 0,
                transparent 29px,
                rgba(254,250,224,.018) 29px,
                rgba(254,250,224,.018) 30px
            ),

            linear-gradient(
                176deg,

                rgba(40,54,24,1)
                0%,

                rgba(40,54,24,1)
                46%,

                rgba(40,54,24,.95)
                57%,

                rgba(40,54,24,.74)
                66%,

                rgba(40,54,24,.39)
                76%,

                rgba(40,54,24,.10)
                87%,

                rgba(40,54,24,0)
                95%
            ),

            linear-gradient(
                180deg,
                rgba(188,108,37,.015),
                rgba(188,108,37,.38)
            ),

            linear-gradient(
                180deg,
                transparent,
                rgba(20,27,12,.16)
            ),

            var(--pm-course-photo)
            !important;
    }
}


@media (
    prefers-reduced-motion: reduce
) {

    .story-page[data-course-visual]:not(
        [data-course-visual=""]
    ) .story-art {
        transition:
            none
            !important;
    }
}

/* END COURSES WORKBENCH HERO V1 */


/* =========================================================
   UNIVERSAL HERO PHOTO FRAMING V1

   PROJECT STANDARD FOR PHOTOGRAPHIC HEROES

   No distinction between portrait/object photography.

   Desktop:
   - every photo receives the same crop architecture;
   - photograph is enlarged;
   - composition is biased toward the visual/right zone;
   - left side remains the protected copy area.

   Mobile:
   - every photo follows the same rule;
   - stronger crop;
   - bottom/right visual bias;
   - upper hero stays protected for readable copy.

   Future photo replacement inherits this framing.
   ========================================================= */


/* ---------------------------------------------------------
   Shared framing variables.
   --------------------------------------------------------- */

.story-page[data-service-visual]:not(
    [data-service-visual=""]
) .story-hero,

.story-page[data-course-visual]:not(
    [data-course-visual=""]
) .story-hero {
    --pm-standard-photo-x:
        28%;

    --pm-standard-photo-y:
        50%;

    --pm-standard-mobile-x:
        18%;

    --pm-standard-mobile-y:
        100%;
}


/* =========================================================
   DESKTOP — SERVICES
   ========================================================= */

@media (min-width: 1041px) {

    .story-page[data-service-visual]:not(
        [data-service-visual=""]
    ) .story-hero {
        background-size:
            100% 100%,
            100% 100%,
            100% 100%,
            122% auto
            !important;

        background-position:
            center,
            center,
            center,
            var(--pm-standard-photo-x)
            var(--pm-standard-photo-y)
            !important;
    }

}


/* =========================================================
   DESKTOP — COURSES
   ========================================================= */

@media (min-width: 1041px) {

    .story-page[data-course-visual]:not(
        [data-course-visual=""]
    ) .story-hero {
        background-size:
            auto,
            auto,
            100% 100%,
            100% 100%,
            100% 100%,
            122% auto
            !important;

        background-position:
            center,
            center,
            center,
            center,
            center,
            var(--pm-standard-photo-x)
            var(--pm-standard-photo-y)
            !important;
    }

}


/* =========================================================
   MOBILE / TABLET — SERVICES
   ========================================================= */

@media (max-width: 1040px) {

    .story-page[data-service-visual]:not(
        [data-service-visual=""]
    ) .story-hero {
        background-color:
            var(--green)
            !important;

        background-image:

            linear-gradient(
                180deg,

                rgba(40,54,24,1)
                0%,

                rgba(40,54,24,1)
                42%,

                rgba(40,54,24,.98)
                50%,

                rgba(40,54,24,.87)
                58%,

                rgba(40,54,24,.67)
                66%,

                rgba(40,54,24,.42)
                74%,

                rgba(40,54,24,.18)
                82%,

                rgba(40,54,24,.04)
                90%,

                rgba(40,54,24,0)
                96%
            ),

            linear-gradient(
                180deg,

                transparent
                0%,

                transparent
                46%,

                rgba(188,108,37,.06)
                55%,

                rgba(188,108,37,.20)
                72%,

                rgba(188,108,37,.38)
                100%
            ),

            linear-gradient(
                180deg,
                transparent 48%,
                rgba(20,27,12,.15) 100%
            ),

            var(--pm-full-hero-photo)
            !important;

        background-repeat:
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat
            !important;

        background-size:
            100% 100%,
            100% 100%,
            100% 100%,
            132% auto
            !important;

        background-position:
            center,
            center,
            center,
            var(--pm-standard-mobile-x)
            var(--pm-standard-mobile-y)
            !important;
    }

}


/* =========================================================
   MOBILE / TABLET — COURSES
   ========================================================= */

@media (max-width: 1040px) {

    .story-page[data-course-visual]:not(
        [data-course-visual=""]
    ) .story-hero {
        background-color:
            var(--green)
            !important;

        background-image:

            repeating-linear-gradient(
                0deg,
                transparent 0,
                transparent 29px,
                rgba(254,250,224,.018) 29px,
                rgba(254,250,224,.018) 30px
            ),

            linear-gradient(
                180deg,

                rgba(40,54,24,1)
                0%,

                rgba(40,54,24,1)
                42%,

                rgba(40,54,24,.98)
                50%,

                rgba(40,54,24,.87)
                58%,

                rgba(40,54,24,.67)
                66%,

                rgba(40,54,24,.42)
                74%,

                rgba(40,54,24,.18)
                82%,

                rgba(40,54,24,.04)
                90%,

                rgba(40,54,24,0)
                96%
            ),

            linear-gradient(
                180deg,

                transparent
                0%,

                transparent
                46%,

                rgba(188,108,37,.06)
                55%,

                rgba(188,108,37,.20)
                72%,

                rgba(188,108,37,.38)
                100%
            ),

            linear-gradient(
                180deg,
                transparent 48%,
                rgba(20,27,12,.15) 100%
            ),

            var(--pm-course-photo)
            !important;

        background-repeat:
            repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat
            !important;

        background-size:
            auto,
            100% 100%,
            100% 100%,
            100% 100%,
            132% auto
            !important;

        background-position:
            center,
            center,
            center,
            center,
            var(--pm-standard-mobile-x)
            var(--pm-standard-mobile-y)
            !important;
    }

}


/* =========================================================
   NARROW MOBILE
   ========================================================= */

@media (max-width: 520px) {

    .story-page[data-service-visual]:not(
        [data-service-visual=""]
    ) .story-hero {
        background-size:
            100% 100%,
            100% 100%,
            100% 100%,
            138% auto
            !important;
    }


    .story-page[data-course-visual]:not(
        [data-course-visual=""]
    ) .story-hero {
        background-size:
            auto,
            100% 100%,
            100% 100%,
            100% 100%,
            138% auto
            !important;
    }

}


/* =========================================================
   Existing custom hero graphics stay above photography.
   ========================================================= */

.story-page[data-service-visual]:not(
    [data-service-visual=""]
) .story-art,

.story-page[data-course-visual]:not(
    [data-course-visual=""]
) .story-art {
    position:
        relative;

    z-index:
        4;
}


/* =========================================================
   Reduced motion.
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .story-page[data-service-visual]:not(
        [data-service-visual=""]
    ) .story-hero,

    .story-page[data-course-visual]:not(
        [data-course-visual=""]
    ) .story-hero {
        transition:
            none
            !important;
    }

}

/* END UNIVERSAL HERO PHOTO FRAMING V1 */


/* =========================================================
   ABOUT + PORTFOLIO EDITORIAL MEDIA V1

   ABOUT:
   archive/contact-sheet composition.

   PORTFOLIO:
   split-screen editorial stills / edit-board composition.

   Semantic images are always visible.
   Motion is decorative only.
   ========================================================= */


/* =========================================================
   SHARED
   ========================================================= */

.page-editorial-media {
    position: relative;

    overflow: hidden;
}

.page-editorial-media-shell {
    position: relative;
}

.page-editorial-media figure {
    margin: 0;
}

.page-editorial-media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   ABOUT — CONTACT SHEET
   ========================================================= */

.page-editorial-media-about {
    padding:
        clamp(42px, 6vw, 78px)
        0;

    border-top:
        3px solid
        var(--amber);

    border-bottom:
        1px solid
        rgba(221,161,94,.22);

    background:
        radial-gradient(
            circle at 76% 24%,
            rgba(188,108,37,.17),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #1d2a12,
            var(--green)
        );
}

.about-contact-grid {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(230px, .72fr);

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

    gap:
        clamp(12px, 1.8vw, 22px);

    min-height:
        clamp(
            520px,
            49vw,
            675px
        );

    padding:
        clamp(14px, 2vw, 24px);

    border:
        1px solid
        rgba(221,161,94,.22);

    background:
        rgba(255,255,255,.025);

    box-shadow:
        0 36px 90px
        rgba(12,18,7,.20);
}

.about-contact-grid::before {
    content: "";

    position: absolute;
    z-index: 0;

    inset:
        10px;

    border:
        1px dashed
        rgba(221,161,94,.12);

    pointer-events: none;
}

.about-contact-grid::after {
    content: "";

    position: absolute;
    z-index: 4;

    top: 50%;
    left: 0;

    width:
        clamp(
            36px,
            5vw,
            74px
        );

    height: 2px;

    background:
        var(--rust);

    pointer-events: none;
}

.about-media-shot {
    position: relative;
    z-index: 2;

    overflow: hidden;

    min-width: 0;
    min-height: 0;

    padding: 6px;

    border:
        1px solid
        rgba(254,250,224,.26);

    background:
        #efe7d8;

    box-shadow:
        0 22px 50px
        rgba(10,15,6,.25);

    transition:
        transform .35s var(--ease),
        box-shadow .35s var(--ease);
}

.about-media-shot::before {
    content:
        attr(data-frame);

    position: absolute;
    z-index: 4;

    top: 13px;
    left: 13px;

    display: grid;
    place-items: center;

    min-width: 31px;
    height: 25px;

    padding:
        0
        7px;

    border:
        1px solid
        rgba(254,250,224,.34);

    background:
        rgba(20,27,12,.52);

    color:
        var(--amber);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;

    backdrop-filter:
        blur(5px);
}

.about-media-shot::after {
    content: "";

    position: absolute;
    z-index: 3;

    inset: 6px;

    background:
        linear-gradient(
            145deg,
            rgba(221,161,94,.07),
            transparent 40%,
            rgba(20,27,12,.13)
        );

    pointer-events: none;
}

.about-media-shot img {
    position: relative;
    z-index: 1;
}

.about-media-shot-01 {
    grid-column: 1;
    grid-row: 1;

    transform:
        rotate(-.35deg);
}

.about-media-shot-02 {
    grid-column: 2;
    grid-row:
        1 / 3;

    transform:
        rotate(.45deg);
}

.about-media-shot-02 img {
    object-position:
        center
        top;
}

.about-media-shot-03 {
    grid-column: 1;
    grid-row: 2;

    transform:
        rotate(.25deg);
}

.about-contact-mark {
    position: absolute;
    z-index: 5;

    width: 25px;
    height: 25px;

    pointer-events: none;
}

.about-contact-mark.mark-a {
    top: 5px;
    right: 5px;

    border-top:
        2px solid
        var(--amber);

    border-right:
        2px solid
        var(--amber);
}

.about-contact-mark.mark-b {
    bottom: 5px;
    left: 5px;

    border-bottom:
        2px solid
        var(--rust);

    border-left:
        2px solid
        var(--rust);
}

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

    .about-media-shot:hover {
        z-index: 6;

        transform:
            rotate(0deg)
            translateY(-4px);

        box-shadow:
            0 32px 70px
            rgba(10,15,6,.31);
    }
}


/* =========================================================
   PORTFOLIO — EDIT BOARD / SPLIT STILLS
   ========================================================= */

.page-editorial-media-portfolio {
    padding:
        clamp(50px, 7vw, 88px)
        0
        clamp(58px, 7vw, 96px);

    border-top:
        3px solid
        var(--amber);

    background:
        linear-gradient(
            180deg,
            #f5f0e6,
            #fbf9f4
        );
}

.portfolio-stills-board {
    position: relative;

    display: grid;

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

    align-items: center;

    min-height:
        clamp(
            420px,
            42vw,
            590px
        );

    padding:
        clamp(18px, 2.3vw, 30px);

    border:
        1px solid
        rgba(40,54,24,.15);

    background:
        linear-gradient(
            90deg,
            rgba(40,54,24,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            180deg,
            rgba(40,54,24,.025) 1px,
            transparent 1px
        ),
        rgba(255,255,255,.50);

    background-size:
        42px 42px;

    box-shadow:
        0 30px 75px
        rgba(37,44,23,.10);
}

.portfolio-media-still {
    position: relative;
    z-index: 2;

    overflow: hidden;

    padding: 7px;

    border:
        1px solid
        rgba(40,54,24,.22);

    background:
        var(--green);

    box-shadow:
        0 24px 55px
        rgba(31,40,18,.17);

    transition:
        transform .4s var(--ease),
        box-shadow .4s var(--ease);
}

.portfolio-media-still::before {
    content:
        attr(data-frame);

    position: absolute;
    z-index: 5;

    right: 15px;
    top: 15px;

    display: grid;
    place-items: center;

    width: 34px;
    height: 27px;

    background:
        rgba(40,54,24,.72);

    color:
        var(--amber);

    font-size: 10px;
    font-weight: 850;
    letter-spacing: .13em;

    backdrop-filter:
        blur(4px);
}

.portfolio-media-still::after {
    content: "";

    position: absolute;
    z-index: 4;

    inset: 7px;

    background:
        linear-gradient(
            135deg,
            rgba(221,161,94,.06),
            transparent 48%,
            rgba(40,54,24,.13)
        );

    pointer-events: none;
}

.portfolio-media-still img {
    aspect-ratio:
        3 / 2;
}

.portfolio-media-still-a {
    grid-column:
        1 / 8;

    grid-row: 1;

    transform:
        rotate(-.7deg)
        translateY(-18px);
}

.portfolio-media-still-b {
    grid-column:
        6 / 13;

    grid-row: 1;

    z-index: 3;

    transform:
        rotate(.65deg)
        translateY(26px);
}

.portfolio-media-playhead {
    position: absolute;
    z-index: 6;

    top: 7%;
    bottom: 7%;

    left: 51%;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--rust) 18%,
            var(--amber) 50%,
            var(--rust) 82%,
            transparent
        );

    opacity: .72;

    pointer-events: none;

    animation:
        portfolioMediaPlayhead
        7s
        ease-in-out
        infinite
        alternate;
}

.portfolio-media-playhead::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        var(--amber);

    box-shadow:
        0 0 0 6px
        rgba(221,161,94,.14);

    transform:
        translate(
            -50%,
            -50%
        );
}

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

    .portfolio-media-still:hover {
        z-index: 7;

        transform:
            rotate(0deg)
            translateY(-5px)
            scale(1.012);

        box-shadow:
            0 34px 76px
            rgba(31,40,18,.22);
    }
}

@keyframes portfolioMediaPlayhead {

    from {
        left: 47%;
    }

    to {
        left: 54%;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .portfolio-stills-board {
        min-height:
            470px;
    }

    .portfolio-media-still-a {
        grid-column:
            1 / 9;
    }

    .portfolio-media-still-b {
        grid-column:
            5 / 13;
    }
}


/* =========================================================
   MOBILE — ABOUT
   Swipeable contact strip.
   ========================================================= */

@media (max-width: 700px) {

    .page-editorial-media-about {
        padding:
            32px
            0
            38px;
    }

    .page-editorial-media-about
    .page-editorial-media-shell {
        padding-right: 0;
    }

    .about-contact-grid {
        display: flex;

        gap: 13px;

        min-height: 0;

        padding:
            12px
            14px
            17px
            2px;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type:
            x mandatory;

        scrollbar-width:
            none;

        -webkit-overflow-scrolling:
            touch;
    }

    .about-contact-grid::-webkit-scrollbar {
        display: none;
    }

    .about-contact-grid::before,
    .about-contact-grid::after,
    .about-contact-mark {
        display: none;
    }

    .about-media-shot {
        flex:
            0 0
            min(
                82vw,
                470px
            );

        grid-column: auto;
        grid-row: auto;

        min-height: 0;

        scroll-snap-align:
            start;

        transform:
            none;
    }

    .about-media-shot-01,
    .about-media-shot-03 {
        aspect-ratio:
            16 / 10;
    }

    .about-media-shot-02 {
        flex-basis:
            min(
                70vw,
                390px
            );

        aspect-ratio:
            4 / 5;
    }

}


/* =========================================================
   MOBILE — PORTFOLIO
   ========================================================= */

@media (max-width: 700px) {

    .page-editorial-media-portfolio {
        padding:
            34px
            0
            46px;
    }

    .portfolio-stills-board {
        display: grid;

        grid-template-columns:
            1fr;

        gap: 15px;

        min-height: 0;

        padding: 13px;

        background-size:
            28px 28px;
    }

    .portfolio-media-still-a,
    .portfolio-media-still-b {
        grid-column: 1;
        grid-row: auto;

        transform: none;
    }

    .portfolio-media-still img {
        aspect-ratio:
            16 / 10;
    }

    .portfolio-media-playhead {
        display: none;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .about-media-shot,
    .about-media-shot:hover,
    .portfolio-media-still,
    .portfolio-media-still:hover {
        transform: none;

        transition: none;
    }

    .portfolio-media-playhead {
        animation: none;
    }

}

/* END ABOUT + PORTFOLIO EDITORIAL MEDIA V1 */


/* =========================================================
   ABOUT + PORTFOLIO HERO MEDIA V2.1

   Media becomes part of the existing cinematic hero.
   V1 gallery CSS remains in history but is overridden.
   ========================================================= */


/* =========================================================
   SHARED
   ========================================================= */

.story-page[data-story-layout="about"]
.story-hero,

.story-page[data-story-layout="portfolio"]
.story-hero {
    position: relative;

    overflow: hidden;

    isolation: isolate;
}


.story-page[data-story-layout="about"]
.story-hero-grid,

.story-page[data-story-layout="portfolio"]
.story-hero-grid {
    position: relative;

    z-index: 10;
}


.story-hero >
.page-editorial-media {
    position: absolute;

    z-index: 2;

    inset: 0;

    width: 100%;
    height: 100%;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;

    background: none !important;

    overflow: hidden;

    pointer-events: none;
}


.story-hero >
.page-editorial-media
.page-editorial-media-shell {
    position: absolute;

    inset: 0;

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

    padding: 0;
    margin: 0;
}


/* =========================================================
   ABOUT — ARCHIVE HERO
   ========================================================= */

.story-page[data-story-layout="about"]
.story-hero {
    min-height:
        clamp(
            500px,
            38vw,
            555px
        );

    background:
        var(--green);
}


.story-page[data-story-layout="about"]
.page-editorial-media-about::before {
    content: "";

    position: absolute;

    z-index: 7;

    inset: 0;

    background:
        linear-gradient(
            90deg,

            rgba(40,54,24,1)
            0%,

            rgba(40,54,24,.995)
            30%,

            rgba(40,54,24,.96)
            40%,

            rgba(40,54,24,.79)
            48%,

            rgba(40,54,24,.49)
            56%,

            rgba(40,54,24,.19)
            65%,

            rgba(40,54,24,.035)
            74%,

            rgba(40,54,24,0)
            82%
        ),

        linear-gradient(
            90deg,
            transparent 53%,
            rgba(188,108,37,.08) 72%,
            rgba(188,108,37,.22) 100%
        );

    pointer-events: none;
}


.story-page[data-story-layout="about"]
.about-contact-grid {
    position: absolute;

    inset: 0;

    display: block;

    min-height: 0;

    padding: 0;

    border: 0;

    background: none;

    box-shadow: none;

    overflow: hidden;
}


.story-page[data-story-layout="about"]
.about-contact-grid::before,

.story-page[data-story-layout="about"]
.about-contact-grid::after,

.story-page[data-story-layout="about"]
.about-contact-mark {
    display: none;
}


/*
 * Main photographic plate.
 */

.story-page[data-story-layout="about"]
.about-media-shot-01 {
    position: absolute;

    z-index: 2;

    top: -4%;
    right: 4%;

    width: 60%;
    height: 108%;

    padding: 0;

    border: 0;

    background: none;

    box-shadow: none;

    opacity: .96;

    transform: none;
}


.story-page[data-story-layout="about"]
.about-media-shot-01 img {
    object-fit: cover;

    object-position:
        center
        40%;
}


/*
 * Vertical memory / portrait frame.
 */

.story-page[data-story-layout="about"]
.about-media-shot-02 {
    position: absolute;

    z-index: 5;

    top: 8%;
    right: 3%;

    width: 18%;
    height: 76%;

    padding: 5px;

    border:
        1px solid
        rgba(254,250,224,.28);

    background:
        rgba(40,54,24,.29);

    box-shadow:
        0 24px 60px
        rgba(12,18,7,.30);

    opacity: .88;

    transform:
        rotate(.7deg);
}


.story-page[data-story-layout="about"]
.about-media-shot-02 img {
    object-position:
        center
        top;
}


/*
 * Third shot = faint memory underneath text/photo boundary.
 */

.story-page[data-story-layout="about"]
.about-media-shot-03 {
    position: absolute;

    z-index: 3;

    right: 32%;
    bottom: -14%;

    width: 35%;
    height: 50%;

    padding: 0;

    border: 0;

    background: none;

    box-shadow: none;

    opacity: .23;

    transform:
        rotate(-1deg);
}


.story-page[data-story-layout="about"]
.about-media-shot::before {
    opacity: .68;
}


.story-page[data-story-layout="about"]
.about-media-shot::after {
    inset: 0;

    background:
        linear-gradient(
            140deg,
            rgba(221,161,94,.04),
            transparent 48%,
            rgba(20,27,12,.19)
        );
}


/*
 * Existing About graphic animation remains the foreground HUD.
 */

.story-page[data-story-layout="about"]
.story-art {
    position: relative;

    z-index: 12;

    background:
        rgba(188,108,37,.09);

    border-color:
        rgba(254,250,224,.20);

    backdrop-filter:
        blur(1px);

    -webkit-backdrop-filter:
        blur(1px);
}


/* =========================================================
   PORTFOLIO — CINEMATIC CUT HERO
   ========================================================= */

.story-page[data-story-layout="portfolio"]
.story-hero {
    min-height:
        clamp(
            500px,
            38vw,
            555px
        );

    background:
        var(--green);
}


.story-page[data-story-layout="portfolio"]
.page-editorial-media-portfolio::before {
    content: "";

    position: absolute;

    z-index: 7;

    inset: 0;

    background:
        linear-gradient(
            90deg,

            rgba(40,54,24,1)
            0%,

            rgba(40,54,24,.995)
            31%,

            rgba(40,54,24,.95)
            41%,

            rgba(40,54,24,.78)
            49%,

            rgba(40,54,24,.44)
            58%,

            rgba(40,54,24,.13)
            67%,

            rgba(40,54,24,.02)
            75%,

            rgba(40,54,24,0)
            82%
        ),

        linear-gradient(
            90deg,
            transparent 54%,
            rgba(188,108,37,.07) 72%,
            rgba(188,108,37,.24) 100%
        );

    pointer-events: none;
}


.story-page[data-story-layout="portfolio"]
.portfolio-stills-board {
    position: absolute;

    inset: 0;

    display: block;

    min-height: 0;

    padding: 0;

    border: 0;

    background: none;

    box-shadow: none;
}


/*
 * portfolio-02 = main hero image.
 */

.story-page[data-story-layout="portfolio"]
.portfolio-media-still-b {
    position: absolute;

    z-index: 2;

    top: -5%;
    right: -1%;

    width: 61%;
    height: 110%;

    padding: 0;

    border: 0;

    background: none;

    box-shadow: none;

    transform: none;
}


.story-page[data-story-layout="portfolio"]
.portfolio-media-still-b img {
    width: 100%;
    height: 100%;

    aspect-ratio: auto;

    object-fit: cover;

    object-position:
        center
        center;
}


/*
 * portfolio-01 = editorial cutaway.
 */

.story-page[data-story-layout="portfolio"]
.portfolio-media-still-a {
    position: absolute;

    z-index: 6;

    right: 36%;
    bottom: 7%;

    width: 27%;
    height: 39%;

    padding: 5px;

    border:
        1px solid
        rgba(254,250,224,.29);

    background:
        var(--green);

    box-shadow:
        0 24px 62px
        rgba(15,21,9,.34);

    transform:
        rotate(-1deg);
}


.story-page[data-story-layout="portfolio"]
.portfolio-media-still-a img {
    width: 100%;
    height: 100%;

    aspect-ratio: auto;

    object-fit: cover;

    object-position:
        center
        42%;
}


.story-page[data-story-layout="portfolio"]
.portfolio-media-still::after {
    inset: 0;
}


.story-page[data-story-layout="portfolio"]
.portfolio-media-playhead {
    z-index: 6;

    top: 8%;
    bottom: 8%;

    left: 67%;

    opacity: .42;
}


/*
 * Existing Portfolio graphic animation stays foreground.
 */

.story-page[data-story-layout="portfolio"]
.story-art {
    position: relative;

    z-index: 12;

    background:
        rgba(188,108,37,.09);

    border-color:
        rgba(254,250,224,.20);

    backdrop-filter:
        blur(1px);

    -webkit-backdrop-filter:
        blur(1px);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .story-page[data-story-layout="about"]
    .story-hero,

    .story-page[data-story-layout="portfolio"]
    .story-hero {
        min-height:
            clamp(
                760px,
                148vw,
                900px
            );
    }


    .story-page[data-story-layout="about"]
    .story-hero-grid,

    .story-page[data-story-layout="portfolio"]
    .story-hero-grid {
        min-height: inherit;
    }


    /* ABOUT */

    .story-page[data-story-layout="about"]
    .page-editorial-media-about::before {
        background:
            linear-gradient(
                180deg,

                rgba(40,54,24,1)
                0%,

                rgba(40,54,24,1)
                43%,

                rgba(40,54,24,.97)
                51%,

                rgba(40,54,24,.78)
                60%,

                rgba(40,54,24,.46)
                69%,

                rgba(40,54,24,.16)
                79%,

                rgba(40,54,24,.025)
                89%,

                rgba(40,54,24,0)
                96%
            ),

            linear-gradient(
                180deg,
                transparent,
                rgba(188,108,37,.18)
            );
    }


    .story-page[data-story-layout="about"]
    .about-contact-grid {
        display: block;

        overflow: hidden;

        padding: 0;
    }


    .story-page[data-story-layout="about"]
    .about-media-shot-01 {
        top: auto;
        left: 0;
        right: auto;
        bottom: -1%;

        width: 100%;
        height: 52%;

        transform: none;
    }


    .story-page[data-story-layout="about"]
    .about-media-shot-02 {
        top: auto;
        right: 4%;
        bottom: 5%;

        width: 31%;
        height: 39%;

        transform:
            rotate(1deg);
    }


    .story-page[data-story-layout="about"]
    .about-media-shot-03 {
        top: auto;
        left: 7%;
        right: auto;
        bottom: 35%;

        width: 52%;
        height: 22%;

        opacity: .17;

        transform: none;
    }


    /* PORTFOLIO */

    .story-page[data-story-layout="portfolio"]
    .page-editorial-media-portfolio::before {
        background:
            linear-gradient(
                180deg,

                rgba(40,54,24,1)
                0%,

                rgba(40,54,24,1)
                43%,

                rgba(40,54,24,.97)
                51%,

                rgba(40,54,24,.78)
                60%,

                rgba(40,54,24,.45)
                69%,

                rgba(40,54,24,.14)
                79%,

                rgba(40,54,24,.02)
                89%,

                rgba(40,54,24,0)
                96%
            ),

            linear-gradient(
                180deg,
                transparent,
                rgba(188,108,37,.20)
            );
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-stills-board {
        display: block;

        padding: 0;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-media-still-b {
        top: auto;
        left: 0;
        right: auto;
        bottom: -1%;

        width: 100%;
        height: 53%;

        transform: none;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-media-still-a {
        top: auto;
        right: 4%;
        bottom: 34%;

        width: 44%;
        height: 22%;

        transform:
            rotate(-1deg);
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-media-playhead {
        top: 54%;
        bottom: 3%;

        left: 65%;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .story-page[data-story-layout="about"]
    .about-media-shot,

    .story-page[data-story-layout="portfolio"]
    .portfolio-media-still {
        transform: none;

        transition: none;
    }


    .story-page[data-story-layout="portfolio"]
    .portfolio-media-playhead {
        animation: none;
    }

}

/* END ABOUT + PORTFOLIO HERO MEDIA V2.1 */


/* =========================================================
   HOME CINEMATIC STAGE V1

   A standalone cinematic homepage system.
   Semantic content is immediately visible.
   Motion is decorative only.
   ========================================================= */

.home-wow {
    --home-px: 0;
    --home-py: 0;
    --home-scroll-progress: 0;
    --home-hero-shift: 0;

    overflow: hidden;

    background:
        #f8f4eb;
}


/* =========================================================
   HERO
   ========================================================= */

.home-wow-hero {
    position: relative;

    min-height:
        clamp(
            690px,
            calc(100svh - 86px),
            960px
        );

    overflow: hidden;

    isolation: isolate;

    background:
        var(--green);

    border-bottom:
        4px solid
        var(--amber);
}


.home-wow-hero-media {
    position: absolute;

    z-index: 0;

    inset: 0;

    transform:
        translate3d(
            calc(
                var(--home-px) *
                -8px
            ),
            calc(
                var(--home-py) *
                -5px +
                var(--home-hero-shift) *
                20px
            ),
            0
        );

    transition:
        transform
        .12s
        linear;
}


.home-wow-hero-photo {
    position: absolute;

    inset:
        -5%;

    width: 110%;
    height: 110%;

    object-fit: cover;

    object-position:
        62% 43%;

    filter:
        saturate(.86)
        contrast(1.04);

    animation:
        homeWowHeroDrift
        19s
        cubic-bezier(.45,0,.55,1)
        infinite
        alternate;
}


.home-wow-hero-grade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,

            rgba(40,54,24,1)
            0%,

            rgba(40,54,24,.995)
            28%,

            rgba(40,54,24,.94)
            42%,

            rgba(40,54,24,.70)
            53%,

            rgba(40,54,24,.29)
            67%,

            rgba(40,54,24,.06)
            80%,

            rgba(40,54,24,.02)
            100%
        ),

        linear-gradient(
            135deg,
            transparent 40%,
            rgba(188,108,37,.14) 71%,
            rgba(188,108,37,.40) 100%
        ),

        linear-gradient(
            180deg,
            rgba(13,19,8,.05),
            rgba(13,19,8,.26)
        );
}


.home-wow-hero-scan {
    position: absolute;

    z-index: 2;

    top: 0;
    bottom: 0;

    left: 64%;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(221,161,94,.70) 22%,
            rgba(254,250,224,.25) 50%,
            rgba(221,161,94,.70) 78%,
            transparent
        );

    opacity: .52;

    box-shadow:
        0 0 22px
        rgba(221,161,94,.22);

    animation:
        homeWowScan
        8.5s
        ease-in-out
        infinite
        alternate;
}


.home-wow-hero-grain {
    position: absolute;

    inset: 0;

    opacity: .17;

    background-image:
        radial-gradient(
            circle,
            rgba(254,250,224,.14) 0 1px,
            transparent 1px
        );

    background-size:
        8px 8px;

    mix-blend-mode:
        soft-light;

    pointer-events: none;

    animation:
        homeWowGrain
        .6s
        steps(2)
        infinite;
}


.home-wow-hero-inner {
    position: relative;

    z-index: 5;

    min-height:
        inherit;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(360px, .95fr);

    align-items: center;

    gap:
        clamp(
            40px,
            7vw,
            110px
        );

    padding-top:
        clamp(65px, 8vw, 120px);

    padding-bottom:
        clamp(70px, 8vw, 110px);
}


.home-wow-hero-copy {
    position: relative;

    z-index: 5;

    max-width: 760px;
}


.home-wow-kicker,
.home-wow-section-code {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    color:
        var(--amber);

    font-size:
        11px;

    font-weight:
        850;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;
}


.home-wow-kicker span {
    width: 36px;
    height: 2px;

    background:
        var(--amber);

    transform-origin:
        left center;

    animation:
        homeWowLinePulse
        3.4s
        ease-in-out
        infinite;
}


.home-wow-hero-copy h1 {
    margin:
        27px
        0
        27px;

    color:
        #fff;

    font-size:
        clamp(
            72px,
            9.2vw,
            142px
        );

    font-weight:
        800;

    line-height:
        .81;

    letter-spacing:
        -.065em;
}


.home-wow-name-line {
    display: block;

    transform:
        translate3d(
            calc(
                var(--home-px) *
                4px
            ),
            0,
            0
        );
}


.home-wow-name-line:last-child {
    margin-left:
        clamp(
            17px,
            4vw,
            58px
        );

    color:
        var(--amber);
}


.home-wow-lead {
    max-width: 600px;

    margin: 0;

    color:
        rgba(255,255,255,.72);

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

    line-height:
        1.65;
}


.home-wow-hero-actions,
.home-wow-final-actions {
    margin-top:
        clamp(
            30px,
            4vw,
            48px
        );

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 13px;
}


.home-wow-primary,
.home-wow-secondary {
    --magnet-x: 0px;
    --magnet-y: 0px;

    min-height: 56px;

    display: inline-flex;

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

    gap: 22px;

    padding:
        0
        23px;

    text-decoration: none;

    font-weight: 760;

    transform:
        translate3d(
            var(--magnet-x),
            var(--magnet-y),
            0
        );

    transition:
        transform .2s ease,
        border-color .25s ease,
        background .25s ease,
        color .25s ease;
}


.home-wow-primary {
    background:
        var(--amber);

    color:
        var(--green);

    border:
        1px solid
        var(--amber);
}


.home-wow-secondary {
    color:
        rgba(255,255,255,.82);

    border:
        1px solid
        rgba(221,161,94,.40);

    background:
        rgba(40,54,24,.35);

    backdrop-filter:
        blur(6px);
}


.home-wow-primary:hover {
    background:
        #f0b66f;
}


.home-wow-secondary:hover {
    color:
        #fff;

    border-color:
        var(--amber);

    background:
        rgba(188,108,37,.18);
}


/* HERO HUD */

.home-wow-hud {
    position: relative;

    justify-self: end;

    width:
        min(
            37vw,
            470px
        );

    aspect-ratio:
        1 / 1;

    display: grid;

    place-items: center;

    transform:
        translate3d(
            calc(
                var(--home-px) *
                14px
            ),
            calc(
                var(--home-py) *
                10px
            ),
            0
        );
}


.home-wow-aperture {
    position: absolute;

    inset: 2%;

    display: grid;
    place-items: center;
}


.home-wow-aperture span {
    position: absolute;

    width: 100%;
    height: 100%;

    border:
        1px solid
        rgba(221,161,94,.20);

    border-radius: 50%;

    animation:
        homeWowOrbit
        18s
        linear
        infinite;
}


.home-wow-aperture span:nth-child(2) {
    width: 76%;
    height: 76%;

    border-style:
        dashed;

    animation-duration:
        13s;

    animation-direction:
        reverse;
}


.home-wow-aperture span:nth-child(3) {
    width: 52%;
    height: 52%;

    animation-duration:
        9s;
}


.home-wow-hud-frame {
    position: relative;

    width: 62%;
    height: 62%;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(254,250,224,.22);

    background:
        rgba(40,54,24,.13);

    box-shadow:
        0 30px 80px
        rgba(15,20,9,.22),
        inset 0 0 70px
        rgba(221,161,94,.04);

    backdrop-filter:
        blur(3px);

    transform:
        rotate(-2deg);

    animation:
        homeWowHudFloat
        5.8s
        ease-in-out
        infinite;
}


.hud-corner {
    position: absolute;

    width: 23px;
    height: 23px;
}


.hud-tl {
    top: -7px;
    left: -7px;

    border-top:
        2px solid
        var(--amber);

    border-left:
        2px solid
        var(--amber);
}


.hud-tr {
    top: -7px;
    right: -7px;

    border-top:
        2px solid
        var(--amber);

    border-right:
        2px solid
        var(--amber);
}


.hud-bl {
    bottom: -7px;
    left: -7px;

    border-bottom:
        2px solid
        var(--amber);

    border-left:
        2px solid
        var(--amber);
}


.hud-br {
    right: -7px;
    bottom: -7px;

    border-right:
        2px solid
        var(--amber);

    border-bottom:
        2px solid
        var(--amber);
}


.home-wow-hud-code,
.home-wow-hud-time {
    position: absolute;

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

    letter-spacing:
        .16em;

    color:
        rgba(254,250,224,.67);
}


.home-wow-hud-code {
    top: 17px;
    left: 18px;
}


.home-wow-hud-time {
    right: 17px;
    bottom: 15px;
}


.home-wow-hud-mark {
    display: grid;
    place-items: center;

    width: 94px;
    height: 94px;

    border-radius: 50%;

    background:
        rgba(221,161,94,.93);

    color:
        var(--green);

    font-size: 35px;

    box-shadow:
        0 0 0 13px
        rgba(221,161,94,.08);
}


.home-wow-rec {
    position: absolute;

    right: 2%;
    top: 14%;

    display: flex;
    align-items: center;

    gap: 8px;

    color:
        rgba(255,255,255,.60);

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

    letter-spacing:
        .16em;
}


.home-wow-rec span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--rust);

    box-shadow:
        0 0 0 5px
        rgba(188,108,37,.12);

    animation:
        homeWowRec
        1.15s
        ease-in-out
        infinite;
}


.home-wow-scroll-indicator {
    position: absolute;

    z-index: 7;

    left:
        clamp(
            20px,
            3vw,
            48px
        );

    bottom: 22px;

    display: flex;
    align-items: center;

    gap: 12px;

    color:
        rgba(255,255,255,.42);

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

    letter-spacing:
        .20em;
}


.home-wow-scroll-indicator i {
    display: block;

    width: 54px;
    height: 1px;

    background:
        rgba(255,255,255,.25);

    overflow: hidden;
}


.home-wow-scroll-indicator i::after {
    content: "";

    display: block;

    width: 50%;
    height: 100%;

    background:
        var(--amber);

    animation:
        homeWowScrollCue
        2s
        ease-in-out
        infinite;
}


.home-wow-scroll-progress {
    position: absolute;

    z-index: 9;

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

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--amber),
            var(--rust)
        );

    transform:
        scaleX(
            var(--home-scroll-progress)
        );

    transform-origin:
        left center;
}


/* =========================================================
   SHARED SECTION HEADS
   ========================================================= */

.home-wow-section-head {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, .55fr);

    align-items: end;

    gap:
        clamp(
            30px,
            7vw,
            100px
        );
}


.home-wow-section-head h2,
.home-wow-map-head h2,
.home-wow-workbench h2,
.home-wow-learning h2,
.home-wow-credits h2,
.home-wow-final h2 {
    margin:
        13px
        0
        0;

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

    line-height:
        .95;

    letter-spacing:
        -.05em;
}


.home-wow-section-head p {
    margin: 0;

    color:
        rgba(254,250,224,.60);

    font-size:
        17px;

    line-height:
        1.7;
}


/* =========================================================
   MOVING REEL
   ========================================================= */

.home-wow-reel {
    padding:
        clamp(
            75px,
            9vw,
            125px
        )
        0;

    overflow: hidden;

    color:
        #fff;

    background:
        linear-gradient(
            145deg,
            #16210d,
            #263719
        );

    border-bottom:
        1px solid
        rgba(221,161,94,.17);
}


.home-wow-reel-viewport {
    margin-top:
        clamp(
            45px,
            6vw,
            76px
        );

    overflow: hidden;

    perspective:
        1200px;
}


.home-wow-reel-track {
    width: max-content;

    display: flex;

    gap:
        clamp(
            15px,
            2vw,
            27px
        );

    padding:
        0
        5vw;

    animation:
        homeWowReelFloat
        22s
        ease-in-out
        infinite
        alternate;
}


.home-wow-reel-viewport:hover
.home-wow-reel-track {
    animation-play-state:
        paused;
}


.home-wow-reel-frame {
    --tilt-x: 0deg;
    --tilt-y: 0deg;

    position: relative;

    flex:
        0 0
        clamp(
            330px,
            35vw,
            530px
        );

    aspect-ratio:
        16 / 10;

    display: block;

    overflow: hidden;

    border:
        1px solid
        rgba(221,161,94,.25);

    background:
        #11180b;

    text-decoration: none;

    color:
        #fff;

    box-shadow:
        0 30px 80px
        rgba(5,8,3,.26);

    transform:
        perspective(1000px)
        rotateX(
            var(--tilt-x)
        )
        rotateY(
            var(--tilt-y)
        );

    transform-style:
        preserve-3d;

    transition:
        transform .2s ease,
        border-color .25s ease;
}


.home-wow-reel-frame:nth-child(even) {
    margin-top:
        44px;
}


.home-wow-reel-frame:hover {
    border-color:
        var(--amber);
}


.home-wow-reel-frame figure {
    position: absolute;

    inset: 0;

    margin: 0;
}


.home-wow-reel-frame img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(.85)
        contrast(1.02);

    transition:
        transform .7s var(--ease),
        filter .4s ease;
}


.home-wow-reel-frame:hover img {
    transform:
        scale(1.045);

    filter:
        saturate(1)
        contrast(1.04);
}


.home-wow-reel-frame::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 35%,
            rgba(17,24,11,.88) 100%
        );
}


.home-wow-frame-no {
    position: absolute;

    z-index: 3;

    top: 15px;
    right: 15px;

    min-width: 34px;
    height: 27px;

    display: grid;
    place-items: center;

    background:
        rgba(40,54,24,.72);

    color:
        var(--amber);

    font-size: 10px;
    font-weight: 850;
}


.home-wow-frame-copy {
    position: absolute;

    z-index: 3;

    right: 22px;
    bottom: 20px;
    left: 22px;

    display: flex;

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

    gap: 20px;
}


.home-wow-frame-copy small {
    color:
        var(--amber);

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

    letter-spacing:
        .16em;
}


.home-wow-frame-copy strong {
    max-width: 68%;

    text-align: right;

    font-size:
        clamp(
            18px,
            1.8vw,
            25px
        );
}


/* =========================================================
   STORY MAP
   ========================================================= */

.home-wow-map {
    padding:
        clamp(
            80px,
            10vw,
            135px
        )
        0;

    background:
        #f7f3e9;

    color:
        var(--green);
}


.home-wow-map-head {
    max-width: 900px;
}


.home-wow-map-head h2 {
    max-width: 800px;
}


.home-wow-route-grid {
    margin-top:
        clamp(
            45px,
            7vw,
            85px
        );

    display: grid;

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

    grid-auto-rows:
        minmax(
            250px,
            auto
        );

    gap: 14px;

    perspective:
        1200px;
}


.home-wow-route {
    --tilt-x: 0deg;
    --tilt-y: 0deg;

    position: relative;

    overflow: hidden;

    border:
        1px solid
        rgba(40,54,24,.15);

    background:
        rgba(255,255,255,.52);

    transform:
        perspective(1000px)
        rotateX(
            var(--tilt-x)
        )
        rotateY(
            var(--tilt-y)
        );

    transform-style:
        preserve-3d;

    transition:
        transform .2s ease,
        box-shadow .35s ease,
        background .35s ease;
}


.home-wow-route::before {
    content: "";

    position: absolute;

    top: -50%;
    left: -25%;

    width: 48%;
    height: 200%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(221,161,94,.09),
            transparent
        );

    transform:
        rotate(15deg)
        translateX(-120%);

    transition:
        transform .8s var(--ease);

    pointer-events: none;
}


.home-wow-route:hover::before {
    transform:
        rotate(15deg)
        translateX(350%);
}


.home-wow-route:hover {
    z-index: 3;

    box-shadow:
        0 32px 75px
        rgba(40,54,24,.12);
}


.home-wow-route > a {
    position: relative;

    z-index: 2;

    min-height: 100%;

    padding:
        clamp(
            25px,
            3vw,
            40px
        );

    display: flex;

    flex-direction: column;

    text-decoration: none;

    color:
        inherit;
}


.home-wow-route > a >
.fa-solid {
    margin-top:
        auto;

    margin-bottom:
        22px;

    color:
        var(--rust);

    font-size:
        clamp(
            32px,
            4vw,
            54px
        );
}


.home-wow-route-no {
    position: absolute;

    top: 20px;
    right: 22px;

    color:
        rgba(40,54,24,.34);

    font-size:
        11px;

    font-weight:
        850;

    letter-spacing:
        .15em;
}


.home-wow-route small {
    color:
        var(--rust);

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .16em;
}


.home-wow-route h3 {
    margin:
        9px
        0
        9px;

    font-size:
        clamp(
            29px,
            3.2vw,
            47px
        );

    line-height:
        1;
}


.home-wow-route p {
    max-width: 420px;

    margin: 0;

    color:
        rgba(40,54,24,.66);

    line-height:
        1.6;
}


.home-wow-route-arrow {
    position: absolute;

    right: 24px;
    bottom: 24px;

    display: grid;
    place-items: center;

    width: 43px;
    height: 43px;

    border-radius: 50%;

    border:
        1px solid
        rgba(40,54,24,.16);

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}


.home-wow-route:hover
.home-wow-route-arrow {
    transform:
        rotate(-35deg);

    background:
        var(--green);

    color:
        var(--amber);
}


.home-wow-route-services {
    grid-column:
        1 / 8;

    grid-row:
        span 2;

    background:
        linear-gradient(
            145deg,
            #fff,
            #f1eadc
        );
}


.home-wow-route-courses {
    grid-column:
        8 / 13;
}


.home-wow-route-portfolio {
    grid-column:
        8 / 13;

    background:
        var(--green);

    color:
        #fff;
}


.home-wow-route-portfolio p {
    color:
        rgba(255,255,255,.62);
}


.home-wow-route-portfolio
.home-wow-route-no {
    color:
        rgba(255,255,255,.30);
}


.home-wow-route-blog {
    grid-column:
        1 / 7;
}


.home-wow-route-about {
    grid-column:
        7 / 13;

    background:
        linear-gradient(
            145deg,
            rgba(188,108,37,.95),
            #b56122
        );

    color:
        #fff;
}


.home-wow-route-about p {
    color:
        rgba(255,255,255,.70);
}


.home-wow-route-about
.home-wow-route-no {
    color:
        rgba(255,255,255,.35);
}


/* =========================================================
   WORKBENCH
   ========================================================= */

.home-wow-workbench {
    position: relative;

    padding:
        clamp(
            85px,
            11vw,
            150px
        )
        0;

    overflow: hidden;

    background:
        linear-gradient(
            150deg,
            #18240f,
            #2b3c1d
        );

    color:
        #fff;
}


.home-wow-workbench::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 31px,
            rgba(254,250,224,.018) 31px,
            rgba(254,250,224,.018) 32px
        );

    pointer-events: none;
}


.home-wow-workbench-grid {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(320px, .82fr)
        minmax(0, 1.18fr);

    align-items: center;

    gap:
        clamp(
            45px,
            8vw,
            120px
        );
}


.home-wow-portrait-stage {
    --tilt-x: 0deg;
    --tilt-y: 0deg;

    position: relative;

    aspect-ratio:
        .92 / 1;

    padding: 8px;

    border:
        1px solid
        rgba(221,161,94,.32);

    background:
        rgba(255,255,255,.035);

    box-shadow:
        0 35px 100px
        rgba(7,10,4,.33);

    transform:
        perspective(1200px)
        rotateX(
            var(--tilt-x)
        )
        rotateY(
            var(--tilt-y)
        )
        rotate(-1.2deg);

    transform-style:
        preserve-3d;

    transition:
        transform .2s ease;
}


.home-wow-portrait-stage img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        center
        35%;

    filter:
        saturate(.80)
        contrast(1.04);
}


.home-wow-portrait-stage::after {
    content: "";

    position: absolute;

    inset: 8px;

    background:
        linear-gradient(
            145deg,
            transparent 35%,
            rgba(188,108,37,.16)
        );

    pointer-events: none;
}


.portrait-cross {
    position: absolute;

    z-index: 4;

    width: 30px;
    height: 30px;

    pointer-events: none;
}


.cross-a {
    top: -10px;
    left: -10px;

    border-top:
        2px solid
        var(--amber);

    border-left:
        2px solid
        var(--amber);
}


.cross-b {
    right: -10px;
    bottom: -10px;

    border-right:
        2px solid
        var(--amber);

    border-bottom:
        2px solid
        var(--amber);
}


.portrait-label {
    position: absolute;

    z-index: 4;

    right: 16px;
    bottom: 15px;

    padding:
        7px
        10px;

    background:
        rgba(40,54,24,.72);

    color:
        var(--amber);

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .14em;
}


.home-wow-workbench-copy h2 {
    max-width: 700px;
}


.home-wow-workbench-copy >
p {
    max-width: 600px;

    color:
        rgba(255,255,255,.62);

    font-size:
        18px;

    line-height:
        1.7;
}


.home-wow-script-lines {
    margin-top:
        clamp(
            35px,
            5vw,
            57px
        );

    border-top:
        1px solid
        rgba(221,161,94,.18);
}


.home-wow-script-lines a {
    min-height: 72px;

    display: grid;

    grid-template-columns:
        42px
        1fr
        auto;

    align-items: center;

    gap: 15px;

    border-bottom:
        1px solid
        rgba(221,161,94,.16);

    color:
        #fff;

    text-decoration: none;

    transition:
        padding .3s ease,
        background .3s ease;
}


.home-wow-script-lines a:hover {
    padding:
        0
        14px;

    background:
        rgba(221,161,94,.055);
}


.home-wow-script-lines span {
    color:
        var(--amber);

    font-size:
        10px;

    font-weight:
        850;
}


.home-wow-script-lines strong {
    font-size:
        clamp(
            17px,
            1.6vw,
            22px
        );
}


.home-wow-script-lines i {
    color:
        var(--amber);
}


/* =========================================================
   LEARNING / REVISION
   ========================================================= */

.home-wow-learning {
    padding:
        clamp(
            85px,
            11vw,
            145px
        )
        0;

    background:
        #f4efe5;
}


.home-wow-learning-stage {
    position: relative;

    padding:
        clamp(
            28px,
            5vw,
            70px
        );

    border:
        1px solid
        rgba(40,54,24,.15);

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 31px,
            rgba(40,54,24,.035) 31px,
            rgba(40,54,24,.035) 32px
        ),
        rgba(255,255,255,.62);

    box-shadow:
        0 30px 80px
        rgba(40,54,24,.09);
}


.home-wow-learning-head {
    max-width: 850px;
}


.home-wow-learning-head p {
    max-width: 600px;

    color:
        rgba(40,54,24,.67);

    font-size:
        17px;

    line-height:
        1.7;
}


.home-wow-learning-path {
    margin-top:
        clamp(
            45px,
            6vw,
            75px
        );

    display: grid;

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

    align-items: center;

    gap: 20px;
}


.home-wow-learning-card {
    --tilt-x: 0deg;
    --tilt-y: 0deg;

    position: relative;

    min-height: 240px;

    padding:
        clamp(
            25px,
            3vw,
            39px
        );

    display: flex;

    flex-direction: column;

    border:
        1px solid
        rgba(40,54,24,.17);

    background:
        var(--green);

    color:
        #fff;

    text-decoration: none;

    box-shadow:
        0 24px 65px
        rgba(40,54,24,.13);

    transform:
        perspective(1000px)
        rotateX(
            var(--tilt-x)
        )
        rotateY(
            var(--tilt-y)
        );

    transition:
        transform .2s ease,
        background .3s ease;
}


.home-wow-learning-card:last-child {
    background:
        var(--rust);
}


.learning-step {
    color:
        var(--amber);

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        .16em;
}


.home-wow-learning-card strong {
    margin:
        auto
        0;

    max-width: 420px;

    font-size:
        clamp(
            27px,
            3vw,
            41px
        );

    line-height:
        1.08;
}


.home-wow-learning-card em {
    display: block;

    margin-top: 5px;

    color:
        rgba(255,255,255,.62);

    font-size: .52em;

    font-style: normal;
}


.home-wow-learning-card >
i {
    align-self:
        flex-end;

    color:
        var(--amber);
}


.home-wow-learning-playhead {
    position: relative;

    height: 80px;

    display: flex;

    justify-content:
        space-between;

    align-items: center;
}


.home-wow-learning-playhead::before {
    content: "";

    position: absolute;

    z-index: 0;

    right: 0;
    left: 0;

    height: 1px;

    background:
        rgba(40,54,24,.24);
}


.home-wow-learning-playhead::after {
    content: "";

    position: absolute;

    z-index: 1;

    left: 0;

    width: 36%;
    height: 2px;

    background:
        var(--rust);

    animation:
        homeWowPlayhead
        3.6s
        ease-in-out
        infinite
        alternate;
}


.home-wow-learning-playhead span {
    position: relative;

    z-index: 2;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    border:
        2px solid
        var(--rust);

    background:
        #f4efe5;
}


/* =========================================================
   CREDITS
   ========================================================= */

.home-wow-credits {
    padding:
        clamp(
            80px,
            10vw,
            135px
        )
        0;

    overflow: hidden;

    background:
        var(--green);

    color:
        #fff;
}


.home-wow-credits-head {
    display: flex;

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

    gap: 30px;
}


.home-wow-credits-head h2 {
    max-width: 780px;
}


.home-wow-text-link {
    display: inline-flex;

    align-items: center;

    gap: 15px;

    color:
        var(--amber);

    text-decoration: none;

    font-weight: 760;
}


.home-wow-credit-strip {
    margin-top:
        clamp(
            45px,
            6vw,
            76px
        );

    display: grid;

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

    gap: 12px;
}


.home-wow-credit-strip figure {
    --tilt-x: 0deg;
    --tilt-y: 0deg;

    position: relative;

    margin: 0;

    aspect-ratio:
        265 / 235;

    overflow: hidden;

    border:
        1px solid
        rgba(221,161,94,.20);

    transform:
        perspective(900px)
        rotateX(
            var(--tilt-x)
        )
        rotateY(
            var(--tilt-y)
        );

    transition:
        transform .2s ease,
        border-color .3s ease;
}


.home-wow-credit-strip figure:nth-child(even) {
    margin-top: 33px;
}


.home-wow-credit-strip figure:hover {
    border-color:
        var(--amber);
}


.home-wow-credit-strip img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(.75)
        contrast(1.04);

    transition:
        transform .6s var(--ease),
        filter .4s ease;
}


.home-wow-credit-strip figure:hover img {
    transform:
        scale(1.06);

    filter:
        saturate(1);
}


.home-wow-credit-strip span {
    position: absolute;

    right: 10px;
    bottom: 10px;

    min-width: 28px;
    height: 23px;

    display: grid;
    place-items: center;

    background:
        rgba(40,54,24,.74);

    color:
        var(--amber);

    font-size: 9px;

    font-weight: 850;
}


/* =========================================================
   FINAL
   ========================================================= */

.home-wow-final {
    position: relative;

    min-height:
        clamp(
            520px,
            52vw,
            690px
        );

    display: grid;
    place-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #bd6925,
            #9e501c
        );

    color:
        #fff;

    border-top:
        4px solid
        var(--amber);
}


.home-wow-final::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 70% 50%,
            rgba(254,250,224,.12),
            transparent 35%
        );

    pointer-events: none;
}


.home-wow-final-orbit {
    position: absolute;

    right:
        clamp(
            -120px,
            -5vw,
            -30px
        );

    width:
        min(
            56vw,
            720px
        );

    aspect-ratio:
        1 / 1;

    display: grid;
    place-items: center;
}


.home-wow-final-orbit span {
    position: absolute;

    width: 100%;
    height: 100%;

    border:
        1px solid
        rgba(254,250,224,.13);

    border-radius: 50%;

    animation:
        homeWowOrbit
        20s
        linear
        infinite;
}


.home-wow-final-orbit span:nth-child(2) {
    width: 70%;
    height: 70%;

    border-style:
        dashed;

    animation-direction:
        reverse;

    animation-duration:
        14s;
}


.home-wow-final-orbit span:nth-child(3) {
    width: 38%;
    height: 38%;

    animation-duration:
        9s;
}


.home-wow-final-inner {
    position: relative;

    z-index: 2;
}


.home-wow-final h2 {
    max-width: 950px;

    color:
        #fff;

    font-size:
        clamp(
            68px,
            9vw,
            130px
        );
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes homeWowHeroDrift {

    from {
        transform:
            scale(1.015)
            translate3d(
                -1.2%,
                -.6%,
                0
            );
    }

    to {
        transform:
            scale(1.075)
            translate3d(
                1.2%,
                .8%,
                0
            );
    }
}


@keyframes homeWowScan {

    from {
        transform:
            translateX(-15vw);
    }

    to {
        transform:
            translateX(16vw);
    }
}


@keyframes homeWowGrain {

    0% {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    50% {
        transform:
            translate3d(
                3px,
                -2px,
                0
            );
    }

    100% {
        transform:
            translate3d(
                -2px,
                2px,
                0
            );
    }
}


@keyframes homeWowLinePulse {

    0%,
    100% {
        transform:
            scaleX(.65);
    }

    50% {
        transform:
            scaleX(1);
    }
}


@keyframes homeWowOrbit {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }
}


@keyframes homeWowHudFloat {

    0%,
    100% {
        transform:
            rotate(-2deg)
            translateY(-4px);
    }

    50% {
        transform:
            rotate(1deg)
            translateY(7px);
    }
}


@keyframes homeWowRec {

    0%,
    100% {
        opacity: .35;
    }

    50% {
        opacity: 1;
    }
}


@keyframes homeWowScrollCue {

    0% {
        transform:
            translateX(-110%);
    }

    100% {
        transform:
            translateX(220%);
    }
}


@keyframes homeWowReelFloat {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(-8vw);
    }
}


@keyframes homeWowPlayhead {

    from {
        width: 9%;
    }

    to {
        width: 90%;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1040px) {

    .home-wow-hero {
        min-height:
            800px;
    }


    .home-wow-hero-inner {
        grid-template-columns:
            1fr;

        align-content:
            center;

        padding-top:
            72px;

        padding-bottom:
            80px;
    }


    .home-wow-hero-copy {
        max-width:
            700px;
    }


    .home-wow-hud {
        position: absolute;

        right: 4%;
        bottom: 5%;

        width:
            min(
                44vw,
                390px
            );

        opacity: .72;
    }


    .home-wow-hero-grade {
        background:
            linear-gradient(
                180deg,

                rgba(40,54,24,1)
                0%,

                rgba(40,54,24,.98)
                40%,

                rgba(40,54,24,.80)
                58%,

                rgba(40,54,24,.38)
                74%,

                rgba(40,54,24,.06)
                100%
            ),

            linear-gradient(
                135deg,
                transparent,
                rgba(188,108,37,.24)
            );
    }


    .home-wow-hero-photo {
        object-position:
            58%
            55%;
    }


    .home-wow-route-services {
        grid-column:
            1 / 13;
    }


    .home-wow-route-courses,
    .home-wow-route-portfolio,
    .home-wow-route-blog,
    .home-wow-route-about {
        grid-column:
            span 6;
    }


    .home-wow-workbench-grid {
        grid-template-columns:
            .86fr
            1.14fr;

        gap: 38px;
    }


    .home-wow-learning-path {
        grid-template-columns:
            1fr
            100px
            1fr;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .home-wow-hero {
        min-height:
            860px;
    }


    .home-wow-hero-inner {
        display: block;

        min-height:
            inherit;

        padding-top:
            68px;

        padding-bottom:
            340px;
    }


    .home-wow-hero-photo {
        inset:
            auto
            -24%
            -2%
            -24%;

        width: 148%;
        height: 58%;

        object-position:
            50%
            48%;

        animation-duration:
            22s;
    }


    .home-wow-hero-grade {
        background:
            linear-gradient(
                180deg,

                rgba(40,54,24,1)
                0%,

                rgba(40,54,24,1)
                47%,

                rgba(40,54,24,.95)
                57%,

                rgba(40,54,24,.68)
                67%,

                rgba(40,54,24,.26)
                79%,

                rgba(40,54,24,.03)
                91%,

                rgba(40,54,24,0)
                100%
            ),

            linear-gradient(
                180deg,
                transparent,
                rgba(188,108,37,.27)
            );
    }


    .home-wow-hero-copy h1 {
        font-size:
            clamp(
                64px,
                18vw,
                96px
            );
    }


    .home-wow-name-line:last-child {
        margin-left: 0;
    }


    .home-wow-lead {
        font-size: 18px;
    }


    .home-wow-hero-actions {
        align-items:
            stretch;
    }


    .home-wow-primary,
    .home-wow-secondary {
        flex:
            1 1
            100%;
    }


    .home-wow-hud {
        right: 7%;
        bottom: 5%;

        width:
            min(
                65vw,
                340px
            );

        opacity: .67;
    }


    .home-wow-scroll-indicator {
        display: none;
    }


    .home-wow-section-head {
        grid-template-columns:
            1fr;

        gap: 20px;
    }


    .home-wow-reel {
        padding:
            67px
            0;
    }


    .home-wow-reel-track {
        gap: 12px;

        padding:
            0
            18px;

        animation:
            none;
    }


    .home-wow-reel-frame {
        flex-basis:
            82vw;
    }


    .home-wow-reel-frame:nth-child(even) {
        margin-top: 25px;
    }


    .home-wow-map {
        padding:
            70px
            0;
    }


    .home-wow-route-grid {
        display: grid;

        grid-template-columns:
            1fr;

        grid-auto-rows:
            auto;
    }


    .home-wow-route-services,
    .home-wow-route-courses,
    .home-wow-route-portfolio,
    .home-wow-route-blog,
    .home-wow-route-about {
        grid-column: 1;

        grid-row: auto;
    }


    .home-wow-route {
        min-height: 250px;
    }


    .home-wow-workbench {
        padding:
            72px
            0;
    }


    .home-wow-workbench-grid {
        grid-template-columns:
            1fr;

        gap: 50px;
    }


    .home-wow-portrait-stage {
        max-width:
            520px;

        margin:
            0
            auto;
    }


    .home-wow-learning {
        padding:
            70px
            0;
    }


    .home-wow-learning-stage {
        padding:
            25px
            16px;
    }


    .home-wow-learning-path {
        grid-template-columns:
            1fr;

        gap: 17px;
    }


    .home-wow-learning-playhead {
        height: 55px;

        transform:
            rotate(90deg)
            scale(.72);
    }


    .home-wow-credit-strip {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .home-wow-credit-strip figure:nth-child(even) {
        margin-top: 22px;
    }


    .home-wow-credits-head {
        display: block;
    }


    .home-wow-text-link {
        margin-top: 25px;
    }


    .home-wow-final {
        min-height: 560px;
    }


    .home-wow-final-orbit {
        right: -52%;

        width: 125vw;
    }


    .home-wow-final h2 {
        font-size:
            clamp(
                65px,
                18vw,
                92px
            );
    }

}


/* =========================================================
   NARROW MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .home-wow-hero {
        min-height:
            820px;
    }


    .home-wow-hero-inner {
        padding-bottom:
            310px;
    }


    .home-wow-kicker {
        font-size:
            9px;

        letter-spacing:
            .12em;
    }


    .home-wow-hero-copy h1 {
        font-size:
            clamp(
                58px,
                17vw,
                76px
            );
    }


    .home-wow-hud {
        width: 67vw;
    }


    .home-wow-reel-frame {
        flex-basis:
            88vw;
    }


    .home-wow-credit-strip {
        gap: 8px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .home-wow *,
    .home-wow *::before,
    .home-wow *::after {
        animation-duration:
            .001ms
            !important;

        animation-iteration-count:
            1
            !important;

        scroll-behavior:
            auto
            !important;
    }


    .home-wow-hero-media,
    .home-wow-hud,
    .home-wow-name-line,
    .home-wow-reel-track,
    .home-wow-reel-frame,
    .home-wow-route,
    .home-wow-portrait-stage,
    .home-wow-learning-card,
    .home-wow-credit-strip figure,
    .home-wow-primary,
    .home-wow-secondary {
        transform:
            none
            !important;

        transition:
            none
            !important;
    }

}

/* END HOME CINEMATIC STAGE V1 */


/* =========================================================
   HOME REEL INTERACTION V2

   The film reel is now a real interactive carousel on
   desktop, tablet and mobile.
   ========================================================= */


/* ---------------------------------------------------------
   CONTROLS
   --------------------------------------------------------- */

.home-wow-reel-controls {
    width:
        min(
            calc(100% - 40px),
            var(--container)
        );

    margin:
        28px
        auto
        -20px;

    display: flex;

    justify-content:
        flex-end;

    gap: 9px;
}


.home-wow-reel-control {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
        1px solid
        rgba(221,161,94,.32);

    border-radius: 50%;

    background:
        rgba(255,255,255,.035);

    color:
        var(--amber);

    cursor: pointer;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        opacity .25s ease,
        transform .25s ease;
}


.home-wow-reel-control:hover:not(
    :disabled
) {
    border-color:
        var(--amber);

    background:
        var(--amber);

    color:
        var(--green);

    transform:
        scale(1.05);
}


.home-wow-reel-control:disabled {
    opacity: .26;

    cursor: default;
}


/* ---------------------------------------------------------
   ALL-DEVICE REAL SCROLLER

   Overrides Home Cinematic Stage V1 overflow:hidden and
   autonomous track animation.
   --------------------------------------------------------- */

.home-wow-reel-viewport {
    position: relative;

    overflow-x: auto;
    overflow-y: hidden;

    width: 100%;

    scroll-snap-type:
        x proximity;

    scroll-padding-inline:
        5vw;

    overscroll-behavior-inline:
        contain;

    scrollbar-width:
        none;

    -webkit-overflow-scrolling:
        touch;

    touch-action:
        pan-x pan-y;

    cursor:
        grab;
}


.home-wow-reel-viewport::-webkit-scrollbar {
    display: none;
}


.home-wow-reel-viewport.is-dragging {
    cursor:
        grabbing;

    scroll-snap-type:
        none;

    user-select:
        none;
}


.home-wow-reel-track {
    animation:
        none
        !important;

    transform:
        none
        !important;

    will-change:
        auto;
}


.home-wow-reel-frame {
    scroll-snap-align:
        start;

    scroll-snap-stop:
        normal;
}


.home-wow-reel-frame,
.home-wow-reel-frame img {
    -webkit-user-drag:
        none;
}


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

@media (max-width: 700px) {

    .home-wow-reel-controls {
        width:
            auto;

        margin:
            22px
            18px
            -15px;

        justify-content:
            flex-end;
    }


    .home-wow-reel-control {
        width: 44px;
        height: 44px;
    }


    .home-wow-reel-viewport {
        scroll-snap-type:
            x mandatory;

        scroll-padding-inline:
            18px;

        cursor:
            auto;
    }


    .home-wow-reel-track {
        width: max-content;

        min-width: 100%;

        padding:
            0
            18px
            16px;

        gap:
            13px;
    }


    .home-wow-reel-frame {
        flex:
            0 0
            min(
                82vw,
                520px
            );

        scroll-snap-align:
            start;

        scroll-snap-stop:
            always;

        transform:
            none
            !important;
    }


    .home-wow-reel-frame:nth-child(even) {
        margin-top:
            20px;
    }


    .home-wow-reel-frame:last-child {
        margin-right:
            18px;
    }

}


/* =========================================================
   MOBILE STORY MAP — ARROW IN FLOW
   ========================================================= */

@media (max-width: 700px) {

    .home-wow-route >
    a {
        padding:
            30px
            28px
            25px;
    }


    .home-wow-route p {
        max-width:
            none;

        padding-right: 0;
    }


    .home-wow-route-arrow {
        position:
            static;

        right:
            auto;

        bottom:
            auto;

        width: 48px;
        height: 48px;

        flex:
            0 0
            48px;

        align-self:
            flex-end;

        margin-top:
            25px;

        margin-left:
            auto;
    }


    .home-wow-route:hover
    .home-wow-route-arrow {
        transform:
            none;
    }

}


@media (max-width: 420px) {

    .home-wow-reel-frame {
        flex-basis:
            86vw;
    }


    .home-wow-route >
    a {
        padding:
            27px
            24px
            23px;
    }

}


@media (
    prefers-reduced-motion: reduce
) {

    .home-wow-reel-viewport {
        scroll-behavior:
            auto;
    }


    .home-wow-reel-control {
        transition:
            none;
    }

}

/* END HOME REEL INTERACTION V2 */


/* =========================================================
   HOME REEL CONTINUOUS V5
   ========================================================= */


/*
 * Continuous movement must never be captured by the old
 * card-oriented scroll snapping.
 */

.home-wow-reel-viewport {
    overflow-x:
        auto;

    overflow-y:
        hidden;

    scroll-snap-type:
        none
        !important;

    scroll-behavior:
        auto;

    overscroll-behavior-inline:
        contain;

    scrollbar-width:
        none;

    -webkit-overflow-scrolling:
        touch;

    touch-action:
        pan-x pan-y;

    cursor:
        grab;
}


.home-wow-reel-viewport::-webkit-scrollbar {
    display:
        none;
}


.home-wow-reel-viewport.is-dragging {
    cursor:
        grabbing;

    user-select:
        none;

    -webkit-user-select:
        none;
}


.home-wow-reel-track {
    animation:
        none
        !important;

    transform:
        none
        !important;

    will-change:
        auto;
}


.home-wow-reel-frame {
    scroll-snap-align:
        none
        !important;

    scroll-snap-stop:
        normal
        !important;
}


.home-wow-reel-frame,
.home-wow-reel-frame img {
    -webkit-user-drag:
        none;
}


/*
 * V2 could disable boundary buttons.
 * V5 keeps both controls interactive.
 */

.home-wow-reel-control:disabled {
    opacity:
        1;

    cursor:
        pointer;

    pointer-events:
        auto;
}


@media (max-width: 700px) {

    .home-wow-reel-viewport {
        scroll-snap-type:
            none
            !important;

        cursor:
            auto;
    }


    .home-wow-reel-frame {
        scroll-snap-align:
            none
            !important;

        scroll-snap-stop:
            normal
            !important;
    }

}


@media (
    prefers-reduced-motion: reduce
) {

    .home-wow-reel-viewport {
        scroll-behavior:
            auto;
    }

}

/* END HOME REEL CONTINUOUS V5 */


/* =========================================================
   BRAND LOGO + FAVICON V1
   Official logo artwork is used unchanged.
   ========================================================= */

.brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}


.site-brand-logo {
    display: block;

    width:
        clamp(
            92px,
            8.5vw,
            122px
        );

    height: auto;

    flex:
        0 0 auto;

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


.site-brand-sr {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip:
        rect(
            0,
            0,
            0,
            0
        );

    white-space: nowrap;

    border: 0;
}


@media (max-width: 700px) {

    .site-brand-logo {
        width:
            clamp(
                76px,
                22vw,
                96px
            );
    }

}

/* END BRAND LOGO + FAVICON V1 */


/* =========================================================
   BRAND LOGO FRAME V2

   The official 500x240 artwork is unchanged.

   Its visible artwork occupies approximately:
   X: 158..342
   Y: 23..218

   This frame removes only the transparent presentation
   margins through CSS.
   ========================================================= */

.site-brand-frame {
    position: relative;

    display: block;

    width: 76px;
    height: 80px;

    flex:
        0 0
        76px;

    overflow: hidden;

    pointer-events: none;
}


.site-brand-frame .site-brand-logo {
    position: absolute;

    /*
     * 500px source scaled to approximately 207px.
     * Visible artwork becomes about 76px wide.
     */

    width: 207px;
    max-width: none;

    height: auto;

    left: -65px;
    top: -10px;

    margin: 0;

    object-fit: initial;

    transform: none;
}


.brand {
    gap: 0;
}


@media (max-width: 700px) {

    .site-brand-frame {
        width: 64px;
        height: 68px;

        flex-basis: 64px;
    }


    .site-brand-frame .site-brand-logo {
        width: 174px;

        left: -55px;
        top: -8px;
    }

}

/* END BRAND LOGO FRAME V2 */


/* =========================================================
   BRAND LOGO V2.1 PRESENCE

   Working V2 architecture preserved.
   Only visual size / position are tuned.
   Official logo artwork is unchanged.
   ========================================================= */


/* ---------------------------------------------------------
   DESKTOP
   --------------------------------------------------------- */

.brand {
    position: relative;

    overflow:
        visible;
}


.site-brand-frame {
    width:
        88px;

    height:
        88px;

    flex:
        0 0
        88px;

    overflow:
        hidden;

    transform:
        translateY(
            4px
        );

    transform-origin:
        center;
}


.site-brand-frame .site-brand-logo {
    width:
        234px;

    max-width:
        none;

    height:
        auto;

    left:
        -74px;

    top:
        -10px;

    margin:
        0;

    transform:
        none;

    object-fit:
        initial;
}


/*
 * Very subtle motion only.
 * No glow, box or redesign.
 */

.brand:hover
.site-brand-frame {
    transform:
        translateY(
            4px
        )
        scale(
            1.025
        );
}


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

@media (
    min-width: 701px
) and (
    max-width: 980px
) {

    .site-brand-frame {
        width:
            82px;

        height:
            84px;

        flex-basis:
            82px;

        transform:
            translateY(
                3px
            );
    }


    .site-brand-frame .site-brand-logo {
        width:
            220px;

        left:
            -69px;

        top:
            -10px;
    }

}


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

@media (max-width: 700px) {

    .site-brand-frame {
        width:
            72px;

        height:
            74px;

        flex:
            0 0
            72px;

        transform:
            translateY(
                2px
            );
    }


    .site-brand-frame .site-brand-logo {
        width:
            190px;

        max-width:
            none;

        left:
            -60px;

        top:
            -9px;
    }


    .brand:hover
    .site-brand-frame {
        transform:
            translateY(
                2px
            );
    }

}


/* ---------------------------------------------------------
   VERY SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 390px) {

    .site-brand-frame {
        width:
            66px;

        height:
            69px;

        flex-basis:
            66px;

        transform:
            translateY(
                1px
            );
    }


    .site-brand-frame .site-brand-logo {
        width:
            177px;

        left:
            -56px;

        top:
            -8px;
    }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (
    prefers-reduced-motion: reduce
) {

    .brand:hover
    .site-brand-frame {
        transform:
            translateY(
                4px
            );
    }

}

/* END BRAND LOGO V2.1 PRESENCE */


/* =========================================================
   BRAND LOGO HYBRID V4

   Hybrid:
   1. transparent canvas trimmed in display-only copy;
   2. larger visible brand mark;
   3. stronger dedicated left brand zone;
   4. intentional overlap into hero.

   Official logo source remains untouched.
   ========================================================= */


/* ---------------------------------------------------------
   DESKTOP
   --------------------------------------------------------- */

.brand {
    position:
        relative;

    z-index:
        30;

    min-width:
        104px;

    overflow:
        visible;
}


.brand .site-brand-frame {
    position:
        relative;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        center;

    width:
        104px;

    height:
        88px;

    flex:
        0 0
        104px;

    overflow:
        visible;

    transform:
        none;
}


.brand
.site-brand-frame
.site-brand-logo {
    position:
        absolute;

    display:
        block;

    width:
        auto;

    height:
        92px;

    max-width:
        none;

    left:
        50%;

    top:
        8px;

    margin:
        0;

    object-fit:
        contain;

    object-position:
        center;

    transform:
        translateX(
            -50%
        );

    transform-origin:
        center top;

    filter:
        none;

    pointer-events:
        none;
}


/*
 * This creates the intentional editorial overlap.
 * Header itself does not become taller.
 */

.brand:hover
.site-brand-frame {
    transform:
        none;
}


.brand:hover
.site-brand-frame
.site-brand-logo {
    transform:
        translateX(
            -50%
        )
        scale(
            1.035
        );
}


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

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

    .brand {
        min-width:
            94px;
    }


    .brand
    .site-brand-frame {
        width:
            94px;

        height:
            88px;

        flex-basis:
            94px;
    }


    .brand
    .site-brand-frame
    .site-brand-logo {
        height:
            86px;

        top:
            10px;
    }

}


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

@media (max-width: 700px) {

    .brand {
        min-width:
            78px;

        overflow:
            visible;
    }


    .brand
    .site-brand-frame {
        width:
            78px;

        height:
            68px;

        flex:
            0 0
            78px;

        overflow:
            visible;

        transform:
            none;
    }


    .brand
    .site-brand-frame
    .site-brand-logo {
        width:
            auto;

        height:
            68px;

        left:
            50%;

        top:
            5px;

        transform:
            translateX(
                -50%
            );
    }


    .brand:hover
    .site-brand-frame
    .site-brand-logo {
        transform:
            translateX(
                -50%
            );
    }

}


/* ---------------------------------------------------------
   VERY SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 390px) {

    .brand {
        min-width:
            70px;
    }


    .brand
    .site-brand-frame {
        width:
            70px;

        flex-basis:
            70px;
    }


    .brand
    .site-brand-frame
    .site-brand-logo {
        height:
            62px;

        top:
            6px;
    }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (
    prefers-reduced-motion: reduce
) {

    .brand:hover
    .site-brand-frame
    .site-brand-logo {
        transform:
            translateX(
                -50%
            );
    }

}

/* END BRAND LOGO HYBRID V4 */


/* =========================================================
   HOME BRAND CINEMATIC REVEAL V1

   Home-only cinematic treatment activated by home-wow.js.

   Sequence:
   - signature develops into view;
   - brand descends from header toward hero;
   - amber projection sweep;
   - subtle orbital motion;
   - soft light spill;
   - pointer parallax;
   - compact retraction after scroll.

   Logo artwork itself is not modified.
   ========================================================= */


/* ---------------------------------------------------------
   HOME BRAND — STAGE
   --------------------------------------------------------- */

.brand.home-brand-cinematic {
    --brand-parallax-x: 0px;
    --brand-parallax-y: 0px;

    position: relative;

    z-index: 60;

    min-width: 120px;

    overflow: visible;

    isolation: isolate;
}


/*
 * Short projection glow behind the mark.
 */

.brand.home-brand-cinematic::before {
    content: "";

    position: absolute;

    z-index: -1;

    left: 50%;
    top: 51px;

    width: 152px;
    height: 110px;

    pointer-events: none;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(226, 164, 91, .28) 0%,
            rgba(226, 164, 91, .12) 27%,
            rgba(226, 164, 91, .035) 48%,
            transparent 72%
        );

    filter:
        blur(13px);

    opacity: 0;

    transform:
        translate(
            -50%,
            -50%
        )
        scale(.65);
}


.brand.home-brand-cinematic.is-brand-live::before {
    animation:
        home-brand-light-spill
        1.75s
        cubic-bezier(.19, 1, .22, 1)
        .12s
        both;
}


/*
 * A small line escaping toward the hero:
 * visually connects header and frame.
 */

.brand.home-brand-cinematic::after {
    content: "";

    position: absolute;

    z-index: 1;

    left: calc(50% + 44px);
    top: 87px;

    width: 0;
    height: 1px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(227, 164, 90, .85),
            rgba(227, 164, 90, .16),
            transparent
        );

    opacity: 0;
}


.brand.home-brand-cinematic.is-brand-live::after {
    animation:
        home-brand-projector-line
        1.1s
        cubic-bezier(.19, 1, .22, 1)
        .72s
        both;
}


/* ---------------------------------------------------------
   FRAME
   --------------------------------------------------------- */

.brand.home-brand-cinematic
.site-brand-frame {
    position: relative;

    display: flex;

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

    width: 120px;
    height: 88px;

    flex:
        0 0
        120px;

    overflow: visible;

    /*
     * Tiny cursor response.
     * Scroll response is applied on this same layer.
     */

    transform:
        translate3d(
            var(--brand-parallax-x),
            var(--brand-parallax-y),
            0
        );

    transition:
        transform
        .34s
        cubic-bezier(.19, 1, .22, 1);

    will-change:
        transform;
}


/* ---------------------------------------------------------
   ORBIT
   --------------------------------------------------------- */

.brand.home-brand-cinematic
.site-brand-frame::before {
    content: "";

    position: absolute;

    z-index: 0;

    left: 50%;
    top: 53px;

    width: 128px;
    height: 96px;

    pointer-events: none;

    border-radius: 50%;

    border:
        1px solid
        rgba(229, 169, 98, .10);

    border-top-color:
        rgba(229, 169, 98, .56);

    border-left-color:
        rgba(229, 169, 98, .22);

    border-right-color:
        transparent;

    opacity: 0;

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(
            -28deg
        )
        scale(.68);
}


.brand.home-brand-cinematic.is-brand-live
.site-brand-frame::before {
    animation:
        home-brand-orbit-enter
            1.4s
            cubic-bezier(.19, 1, .22, 1)
            .34s
            both,

        home-brand-orbit-spin
            12s
            linear
            1.7s
            infinite;
}


/* ---------------------------------------------------------
   AMBER LIGHT SWEEP
   --------------------------------------------------------- */

.brand.home-brand-cinematic
.site-brand-frame::after {
    content: "";

    position: absolute;

    z-index: 4;

    left: 50%;
    top: -14px;

    width: 24px;
    height: 138px;

    pointer-events: none;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 215, 157, .08) 18%,
            rgba(255, 215, 157, .72) 48%,
            rgba(255, 215, 157, .16) 72%,
            transparent 100%
        );

    filter:
        blur(5px);

    mix-blend-mode:
        screen;

    transform:
        translateX(
            -112px
        )
        skewX(
            -14deg
        );
}


.brand.home-brand-cinematic.is-brand-live
.site-brand-frame::after {
    animation:
        home-brand-light-sweep
        1.25s
        cubic-bezier(.19, 1, .22, 1)
        .58s
        both;
}


/* ---------------------------------------------------------
   LOGO — FINAL HERO POSITION
   --------------------------------------------------------- */

.brand.home-brand-cinematic
.site-brand-frame
.site-brand-logo {
    position: absolute;

    z-index: 2;

    display: block;

    width: auto !important;
    height: 108px !important;

    max-width: none;

    left: 50%;
    top: 2px;

    margin: 0;

    opacity: 1;

    clip-path:
        inset(
            0 0 0 0
        );

    filter:
        drop-shadow(
            0 8px 15px
            rgba(0, 0, 0, .18)
        )
        drop-shadow(
            0 0 9px
            rgba(224, 163, 91, .08)
        );

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

    transform:
        translateX(
            -50%
        );

    transform-origin:
        50% 42%;

    transition:
        height
            .42s
            cubic-bezier(.19, 1, .22, 1),

        top
            .42s
            cubic-bezier(.19, 1, .22, 1),

        filter
            .35s
            ease,

        scale
            .28s
            cubic-bezier(.19, 1, .22, 1);

    will-change:
        height,
        top,
        clip-path,
        filter;
}


/*
 * Development/reveal begins only once JS confirms
 * this is an actual Home route.
 */

.brand.home-brand-cinematic.is-brand-live
.site-brand-frame
.site-brand-logo {
    animation:
        home-brand-signature-develop
        1.16s
        cubic-bezier(.16, 1, .3, 1)
        .08s
        backwards;
}


/*
 * A small physical response — not a generic button zoom.
 */

.brand.home-brand-cinematic:hover
.site-brand-frame
.site-brand-logo {
    scale: 1.035;

    filter:
        drop-shadow(
            0 10px 17px
            rgba(0, 0, 0, .22)
        )
        drop-shadow(
            0 0 12px
            rgba(226, 164, 91, .15)
        );
}


/* ---------------------------------------------------------
   STICKY / SCROLLED STATE

   At the top it belongs partly to the Hero.
   After scroll it pulls itself back toward the header.
   --------------------------------------------------------- */

.brand.home-brand-cinematic.is-brand-scrolled
.site-brand-frame {
    transform:
        translate3d(
            var(--brand-parallax-x),
            calc(
                var(--brand-parallax-y)
                - 7px
            ),
            0
        );
}


.brand.home-brand-cinematic.is-brand-scrolled
.site-brand-frame
.site-brand-logo {
    height:
        91px
        !important;

    top:
        0;

    filter:
        drop-shadow(
            0 5px 10px
            rgba(0, 0, 0, .13)
        );
}


.brand.home-brand-cinematic.is-brand-scrolled
.site-brand-frame::before {
    opacity:
        .16;
}


.brand.home-brand-cinematic.is-brand-scrolled::before,
.brand.home-brand-cinematic.is-brand-scrolled::after {
    opacity:
        0;
}


/* ---------------------------------------------------------
   ANIMATIONS
   --------------------------------------------------------- */

@keyframes home-brand-signature-develop {

    0% {
        top:
            -19px;

        height:
            76px;

        opacity:
            0;

        clip-path:
            inset(
                0 100% 0 0
            );

        filter:
            blur(
                7px
            )
            brightness(
                1.8
            )
            drop-shadow(
                0 0 18px
                rgba(226, 164, 91, .30)
            );
    }


    32% {
        opacity:
            .72;

        clip-path:
            inset(
                0 47% 0 0
            );
    }


    68% {
        top:
            5px;

        height:
            112px;

        opacity:
            1;

        clip-path:
            inset(
                0 0 0 0
            );

        filter:
            blur(
                0
            )
            brightness(
                1.15
            )
            drop-shadow(
                0 9px 16px
                rgba(0, 0, 0, .16)
            )
            drop-shadow(
                0 0 14px
                rgba(226, 164, 91, .18)
            );
    }


    100% {
        top:
            2px;

        height:
            108px;

        opacity:
            1;

        clip-path:
            inset(
                0 0 0 0
            );

        filter:
            drop-shadow(
                0 8px 15px
                rgba(0, 0, 0, .18)
            )
            drop-shadow(
                0 0 9px
                rgba(224, 163, 91, .08)
            );
    }

}


@keyframes home-brand-light-spill {

    0% {
        opacity:
            0;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(
                .58
            );
    }


    37% {
        opacity:
            .70;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(
                1.04
            );
    }


    100% {
        opacity:
            .12;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(
                1
            );
    }

}


@keyframes home-brand-light-sweep {

    0% {
        opacity:
            0;

        transform:
            translateX(
                -112px
            )
            skewX(
                -14deg
            );
    }


    22% {
        opacity:
            .72;
    }


    74% {
        opacity:
            .42;
    }


    100% {
        opacity:
            0;

        transform:
            translateX(
                95px
            )
            skewX(
                -14deg
            );
    }

}


@keyframes home-brand-projector-line {

    0% {
        width:
            0;

        opacity:
            0;
    }


    42% {
        width:
            42px;

        opacity:
            .74;
    }


    100% {
        width:
            29px;

        opacity:
            .28;
    }

}


@keyframes home-brand-orbit-enter {

    0% {
        opacity:
            0;

        transform:
            translate(
                -50%,
                -50%
            )
            rotate(
                -58deg
            )
            scale(
                .68
            );
    }


    100% {
        opacity:
            .48;

        transform:
            translate(
                -50%,
                -50%
            )
            rotate(
                -28deg
            )
            scale(
                1
            );
    }

}


@keyframes home-brand-orbit-spin {

    from {
        transform:
            translate(
                -50%,
                -50%
            )
            rotate(
                -28deg
            );
    }


    to {
        transform:
            translate(
                -50%,
                -50%
            )
            rotate(
                332deg
            );
    }

}


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

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

    .brand.home-brand-cinematic {
        min-width:
            108px;
    }


    .brand.home-brand-cinematic
    .site-brand-frame {
        width:
            108px;

        flex-basis:
            108px;
    }


    .brand.home-brand-cinematic
    .site-brand-frame
    .site-brand-logo {
        height:
            98px
            !important;

        top:
            4px;
    }


    .brand.home-brand-cinematic
    .site-brand-frame::before {
        width:
            116px;

        height:
            88px;
    }

}


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

@media (max-width: 700px) {

    .brand.home-brand-cinematic {
        min-width:
            80px;
    }


    .brand.home-brand-cinematic::after {
        display:
            none;
    }


    .brand.home-brand-cinematic
    .site-brand-frame {
        width:
            80px;

        height:
            68px;

        flex:
            0 0
            80px;
    }


    .brand.home-brand-cinematic
    .site-brand-frame
    .site-brand-logo {
        height:
            76px
            !important;

        top:
            3px;
    }


    .brand.home-brand-cinematic
    .site-brand-frame::before {
        top:
            39px;

        width:
            90px;

        height:
            68px;
    }


    .brand.home-brand-cinematic
    .site-brand-frame::after {
        height:
            94px;

        top:
            -9px;
    }


    .brand.home-brand-cinematic::before {
        top:
            39px;

        width:
            106px;

        height:
            78px;
    }


    .brand.home-brand-cinematic.is-brand-scrolled
    .site-brand-frame
    .site-brand-logo {
        height:
            65px
            !important;

        top:
            0;
    }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (
    prefers-reduced-motion: reduce
) {

    .brand.home-brand-cinematic::before,
    .brand.home-brand-cinematic::after,
    .brand.home-brand-cinematic
    .site-brand-frame::before,
    .brand.home-brand-cinematic
    .site-brand-frame::after {
        animation:
            none
            !important;
    }


    .brand.home-brand-cinematic
    .site-brand-frame
    .site-brand-logo {
        animation:
            none
            !important;

        clip-path:
            none;

        filter:
            none;
    }


    .brand.home-brand-cinematic
    .site-brand-frame {
        transition:
            none;
    }

}

/* END HOME BRAND CINEMATIC REVEAL V1 */


/* =========================================================
   HOME BRAND SIGNALS V2.1

   Brand-only enhancement.
   No Hero image/layout/motion rules in this block.

   - Logo lowered.
   - Existing orbital treatment preserved.
   - Periodic cinematic symbols.
   - Longer readable signal duration.

   ========================================================= */


/* ---------------------------------------------------------
   LOGO POSITION
   --------------------------------------------------------- */

.brand.home-brand-cinematic
.site-brand-frame
.site-brand-logo {
    top:
        10px;

    height:
        108px
        !important;
}


.brand.home-brand-cinematic::before {
    top:
        61px;
}


.brand.home-brand-cinematic::after {
    top:
        98px;
}


.brand.home-brand-cinematic
.site-brand-frame::before {
    top:
        61px;
}


/* ---------------------------------------------------------
   REVISED MAIN SIGNATURE ENTRY
   --------------------------------------------------------- */

.brand.home-brand-cinematic.is-brand-live
.site-brand-frame
.site-brand-logo {
    animation:
        home-brand-signature-develop-v2-1
        1.25s
        cubic-bezier(.16, 1, .3, 1)
        .08s
        both
        !important;
}


@keyframes home-brand-signature-develop-v2-1 {

    0% {
        top:
            -10px;

        height:
            78px;

        opacity:
            0;

        clip-path:
            inset(
                0 100% 0 0
            );

        filter:
            blur(7px)
            brightness(1.7);
    }


    34% {
        opacity:
            .8;

        clip-path:
            inset(
                0 42% 0 0
            );
    }


    72% {
        top:
            13px;

        height:
            112px;

        opacity:
            1;

        clip-path:
            inset(
                0
            );

        filter:
            blur(0)
            brightness(1.1)
            drop-shadow(
                0 9px 16px
                rgba(0, 0, 0, .17)
            )
            drop-shadow(
                0 0 13px
                rgba(226, 164, 91, .16)
            );
    }


    100% {
        top:
            10px;

        height:
            108px;

        opacity:
            1;

        clip-path:
            inset(
                0
            );

        filter:
            drop-shadow(
                0 8px 15px
                rgba(0, 0, 0, .18)
            )
            drop-shadow(
                0 0 9px
                rgba(224, 163, 91, .08)
            );
    }

}


/* ---------------------------------------------------------
   PERIODIC CINEMA SYMBOL
   --------------------------------------------------------- */

.home-brand-cinema-signal {
    --signal-x:
        0px;

    --signal-y:
        0px;

    --signal-rotate:
        0deg;

    position:
        absolute;

    z-index:
        12;

    left:
        50%;

    top:
        50%;

    display:
        grid;

    place-items:
        center;

    width:
        31px;

    height:
        31px;

    pointer-events:
        none;

    color:
        rgba(
            236,
            181,
            112,
            .98
        );

    font-size:
        17px;

    opacity:
        0;

    text-shadow:
        0 0 11px
        rgba(
            226,
            164,
            91,
            .48
        );

    transform:
        translate(
            calc(
                -50% +
                var(--signal-x)
            ),
            calc(
                -50% +
                var(--signal-y)
            )
        )
        rotate(
            var(--signal-rotate)
        );

    animation:
        home-brand-cinema-signal-v2-1
        2.25s
        cubic-bezier(.16, 1, .3, 1)
        both;
}


.home-brand-cinema-signal::before,
.home-brand-cinema-signal::after {
    content: "";

    position:
        absolute;

    left:
        -9px;

    right:
        -9px;

    height:
        1px;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                238,
                181,
                112,
                .72
            ),
            transparent
        );

    opacity:
        0;
}


.home-brand-cinema-signal::before {
    top:
        6px;

    animation:
        home-brand-signal-scan-v2-1
        .82s
        steps(4, end)
        .12s
        both;
}


.home-brand-cinema-signal::after {
    bottom:
        5px;

    animation:
        home-brand-signal-scan-v2-1
        .76s
        steps(4, end)
        1.28s
        reverse
        both;
}


.home-brand-cinema-signal i {
    display:
        block;
}


/*
 * Important difference from V2:
 *
 * Glitch entrance is short.
 * Middle phase stays readable for roughly one second.
 * Exit distortion is again short.
 */

@keyframes home-brand-cinema-signal-v2-1 {

    0% {
        opacity:
            0;

        clip-path:
            inset(
                44% 0 40% 0
            );

        filter:
            blur(5px);

        transform:
            translate(
                calc(
                    -50% +
                    var(--signal-x) -
                    10px
                ),
                calc(
                    -50% +
                    var(--signal-y)
                )
            )
            rotate(
                calc(
                    var(--signal-rotate)
                    - 9deg
                )
            )
            scale(.48)
            skewX(-22deg);
    }


    8% {
        opacity:
            .92;

        clip-path:
            inset(
                7% 0 53% 0
            );

        filter:
            blur(0);
    }


    14% {
        opacity:
            .36;

        clip-path:
            inset(
                51% 0 9% 0
            );

        transform:
            translate(
                calc(
                    -50% +
                    var(--signal-x) +
                    6px
                ),
                calc(
                    -50% +
                    var(--signal-y) -
                    1px
                )
            )
            rotate(
                calc(
                    var(--signal-rotate)
                    + 5deg
                )
            )
            scale(1.11)
            skewX(11deg);
    }


    20% {
        opacity:
            .98;

        clip-path:
            inset(
                0
            );

        filter:
            blur(0);

        transform:
            translate(
                calc(
                    -50% +
                    var(--signal-x)
                ),
                calc(
                    -50% +
                    var(--signal-y)
                )
            )
            rotate(
                var(--signal-rotate)
            )
            scale(1)
            skewX(0);
    }


    /*
     * Readable hold.
     */

    28%,
    66% {
        opacity:
            .94;

        clip-path:
            inset(
                0
            );

        filter:
            blur(0);

        transform:
            translate(
                calc(
                    -50% +
                    var(--signal-x)
                ),
                calc(
                    -50% +
                    var(--signal-y)
                )
            )
            rotate(
                var(--signal-rotate)
            )
            scale(1);
    }


    74% {
        opacity:
            .8;

        transform:
            translate(
                calc(
                    -50% +
                    var(--signal-x) +
                    2px
                ),
                calc(
                    -50% +
                    var(--signal-y)
                )
            )
            rotate(
                calc(
                    var(--signal-rotate)
                    + 2deg
                )
            )
            scale(1.02);
    }


    84% {
        opacity:
            .38;

        clip-path:
            inset(
                49% 0 10% 0
            );

        filter:
            blur(1px);
    }


    92% {
        opacity:
            .8;

        clip-path:
            inset(
                9% 0 52% 0
            );

        transform:
            translate(
                calc(
                    -50% +
                    var(--signal-x) +
                    8px
                ),
                calc(
                    -50% +
                    var(--signal-y) -
                    3px
                )
            )
            rotate(
                calc(
                    var(--signal-rotate)
                    + 8deg
                )
            )
            skewX(15deg);
    }


    100% {
        opacity:
            0;

        clip-path:
            inset(
                48% 0 48% 0
            );

        filter:
            blur(4px);

        transform:
            translate(
                calc(
                    -50% +
                    var(--signal-x) +
                    13px
                ),
                calc(
                    -50% +
                    var(--signal-y) -
                    4px
                )
            )
            rotate(
                calc(
                    var(--signal-rotate)
                    + 11deg
                )
            )
            scale(.72)
            skewX(18deg);
    }

}


@keyframes home-brand-signal-scan-v2-1 {

    0% {
        opacity:
            0;

        transform:
            translateX(-12px);
    }


    34% {
        opacity:
            .78;
    }


    100% {
        opacity:
            0;

        transform:
            translateX(13px);
    }

}


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

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

    .brand.home-brand-cinematic
    .site-brand-frame
    .site-brand-logo {
        top:
            9px;

        height:
            100px
            !important;
    }


    .home-brand-cinema-signal {
        width:
            29px;

        height:
            29px;

        font-size:
            15px;
    }

}


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

@media (max-width: 700px) {

    .brand.home-brand-cinematic
    .site-brand-frame
    .site-brand-logo {
        top:
            7px;

        height:
            76px
            !important;
    }


    .brand.home-brand-cinematic
    .site-brand-frame::before,
    .brand.home-brand-cinematic::before {
        top:
            42px;
    }


    .home-brand-cinema-signal {
        width:
            25px;

        height:
            25px;

        font-size:
            13px;

        animation-duration:
            2.05s;
    }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (
    prefers-reduced-motion: reduce
) {

    .home-brand-cinema-signal {
        display:
            none
            !important;
    }


    .brand.home-brand-cinematic.is-brand-live
    .site-brand-frame
    .site-brand-logo {
        animation:
            none
            !important;
    }

}

/* END HOME BRAND SIGNALS V2.1 */


/* =========================================================
   HOME HERO SAFE PARALLAX V1

   Architecture:
   - Hero media viewport never moves.
   - Grade / grain / scan stay locked to Hero.
   - Only oversized hero photograph moves.
   - Pointer amplitude is intentionally limited.
   - Scroll shift is intentionally limited.
   - Old transform-based photo drift is replaced by safe
     object-position drift.
   - No green edge can be exposed by container translation.

   ========================================================= */


/* =========================================================
   FIXED HERO MEDIA VIEWPORT
   ========================================================= */

.home-wow-hero-media {
    /*
     * Critical fix:
     * never translate the viewport itself.
     */

    transform:
        none;

    transition:
        none;
}


/* =========================================================
   DESKTOP PHOTO OVERSCAN + SAFE PARALLAX
   ========================================================= */

.home-wow-hero-photo {
    /*
     * Previous:
     * -5% / 110%
     *
     * New:
     * 7% physical overscan on every side.
     */

    inset:
        -7%;

    width:
        114%;

    height:
        114%;

    object-fit:
        cover;

    object-position:
        62%
        43%;

    /*
     * Pointer:
     * X maximum ≈ 5px.
     * Y maximum ≈ 3px.
     *
     * Scroll:
     * maximum additional Y ≈ 8px.
     *
     * All well inside the 7% overscan.
     */

    transform:
        translate3d(
            calc(
                var(--home-px) *
                -5px
            ),
            calc(
                var(--home-py) *
                -3px +
                var(--home-hero-shift) *
                8px
            ),
            0
        );

    transform-origin:
        50%
        50%;

    transition:
        transform
        .16s
        linear;

    /*
     * Replace old homeWowHeroDrift.
     *
     * This animation does NOT transform the DOM element.
     * It only shifts the crop inside the oversized image.
     */

    animation:
        homeWowHeroDriftSafeDesktop
        19s
        cubic-bezier(.45, 0, .55, 1)
        1s
        infinite
        alternate;

    will-change:
        transform,
        object-position;
}


/* =========================================================
   SAFE DESKTOP DRIFT
   ========================================================= */

@keyframes homeWowHeroDriftSafeDesktop {

    from {
        object-position:
            62%
            43%;
    }


    to {
        object-position:
            64%
            44%;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (
    min-width: 701px
) and (
    max-width: 1040px
) {

    .home-wow-hero-photo {
        /*
         * Slightly more reserve because the aspect ratio
         * changes substantially on tablet.
         */

        inset:
            -8%;

        width:
            116%;

        height:
            116%;

        object-position:
            58%
            55%;

        transform:
            translate3d(
                calc(
                    var(--home-px) *
                    -4px
                ),
                calc(
                    var(--home-py) *
                    -2.5px +
                    var(--home-hero-shift) *
                    6px
                ),
                0
            );

        animation:
            homeWowHeroDriftSafeTablet
            20s
            cubic-bezier(.45, 0, .55, 1)
            1s
            infinite
            alternate;
    }


    @keyframes homeWowHeroDriftSafeTablet {

        from {
            object-position:
                58%
                55%;
        }


        to {
            object-position:
                60%
                54%;
        }

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .home-wow-hero-photo {
        /*
         * Preserve the original mobile composition:
         * photograph remains in lower part of Hero.
         *
         * Add a little extra reserve around it.
         */

        inset:
            auto
            -26%
            -3%
            -26%;

        width:
            152%;

        height:
            60%;

        object-position:
            50%
            48%;

        /*
         * Touch/pointer movement remains almost optical.
         */

        transform:
            translate3d(
                calc(
                    var(--home-px) *
                    -2px
                ),
                calc(
                    var(--home-py) *
                    -1px +
                    var(--home-hero-shift) *
                    3px
                ),
                0
            );

        transition:
            transform
            .18s
            linear;

        animation:
            homeWowHeroDriftSafeMobile
            22s
            cubic-bezier(.45, 0, .55, 1)
            1s
            infinite
            alternate;
    }


    @keyframes homeWowHeroDriftSafeMobile {

        from {
            object-position:
                50%
                48%;
        }


        to {
            object-position:
                52%
                49%;
        }

    }

}


/* =========================================================
   NARROW MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .home-wow-hero-photo {
        /*
         * Extra safety for very narrow portrait screens.
         */

        left:
            -28%;

        right:
            -28%;

        width:
            156%;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .home-wow-hero-media {
        transform:
            none
            !important;

        transition:
            none
            !important;
    }


    .home-wow-hero-photo {
        transform:
            none
            !important;

        transition:
            none
            !important;

        animation:
            none
            !important;
    }

}

/* END HOME HERO SAFE PARALLAX V1 */


/* =========================================================
   HOME HERO EDGE FILL V2

   Exact Hero architecture only.

   .home-wow-hero-media:
   - always fills the complete Hero from first paint;
   - cannot be clipped / masked / translated away;
   - desktop/tablet receives the same Hero photo as a
     stationary safety layer.

   .home-wow-hero-photo:
   - remains the animated/parallax foreground photograph.

   Result:
   foreground motion can never expose the green background
   on the right edge.

   ========================================================= */


/* ---------------------------------------------------------
   MEDIA VIEWPORT — ALWAYS COMPLETE
   --------------------------------------------------------- */

.home-wow-hero
.home-wow-hero-media {
    position:
        absolute;

    inset:
        0
        !important;

    width:
        auto
        !important;

    height:
        auto
        !important;

    opacity:
        1
        !important;

    visibility:
        visible
        !important;

    transform:
        none
        !important;

    transition:
        none
        !important;

    animation:
        none
        !important;

    clip-path:
        none
        !important;

    -webkit-clip-path:
        none
        !important;

    mask:
        none
        !important;

    -webkit-mask:
        none
        !important;

    overflow:
        hidden;

    background-color:
        var(--green);
}


/* ---------------------------------------------------------
   DESKTOP / TABLET SAFETY FRAME

   Same photograph under the moving <img>.
   It is intentionally static.
   --------------------------------------------------------- */

@media (min-width: 701px) {

    .home-wow-hero
    .home-wow-hero-media {
        background-image:
            url(
                "/uploads/media/2026/08/site/home/hero.jpg"
            );

        background-repeat:
            no-repeat;

        background-size:
            cover;

        background-position:
            62%
            43%;
    }

}


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

@media (
    min-width: 701px
) and (
    max-width: 1040px
) {

    .home-wow-hero
    .home-wow-hero-media {
        background-position:
            58%
            55%;
    }

}


/* ---------------------------------------------------------
   FOREGROUND PHOTO

   Explicitly keep it above the static safety image.
   --------------------------------------------------------- */

.home-wow-hero
.home-wow-hero-photo {
    z-index:
        0;
}


/*
 * Existing visual filters stay above both background and
 * moving photograph.
 */

.home-wow-hero
.home-wow-hero-grade {
    z-index:
        1;
}


.home-wow-hero
.home-wow-hero-scan {
    z-index:
        2;
}


.home-wow-hero
.home-wow-hero-grain {
    z-index:
        3;
}


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

   Do NOT install a full-height photo background here.
   Mobile intentionally uses green upper space and places
   the photograph in the lower portion of Hero.
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .home-wow-hero
    .home-wow-hero-media {
        background-image:
            none;

        background-color:
            var(--green);
    }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (
    prefers-reduced-motion: reduce
) {

    .home-wow-hero
    .home-wow-hero-media {
        transform:
            none
            !important;

        animation:
            none
            !important;

        transition:
            none
            !important;

        clip-path:
            none
            !important;
    }

}

/* END HOME HERO EDGE FILL V2 */


/* =========================================================
   HOME HERO + BRAND SIGNATURE V3
   ========================================================= */


/* =========================================================
   HERO — SINGLE IMAGE ONLY
   ========================================================= */

/*
 * Disable the duplicate-photo safety background introduced
 * by EDGE FILL V2.
 *
 * We now use one oversized foreground image only.
 */

@media (min-width: 701px) {

    .home-wow-hero
    .home-wow-hero-media {
        inset:
            0
            !important;

        overflow:
            hidden
            !important;

        background-image:
            none
            !important;

        background-color:
            var(--green);

        transform:
            none
            !important;

        clip-path:
            none
            !important;
    }


    /*
     * One photograph.
     *
     * Physical overscan:
     * +240px horizontally
     * +180px vertically
     *
     * It begins shifted 24px toward the right.
     * Pointer/scroll movement happens inside that reserve.
     */

    .home-wow-hero
    .home-wow-hero-photo {
        position:
            absolute;

        inset:
            auto
            !important;

        left:
            50%
            !important;

        right:
            auto
            !important;

        top:
            50%
            !important;

        bottom:
            auto
            !important;

        width:
            calc(
                100% + 240px
            )
            !important;

        height:
            calc(
                100% + 180px
            )
            !important;

        max-width:
            none
            !important;

        object-fit:
            cover;

        object-position:
            62%
            43%;

        opacity:
            1
            !important;

        clip-path:
            none
            !important;

        transform:
            translate3d(
                calc(
                    -50% +
                    24px +
                    (
                        var(--home-px) *
                        -6px
                    )
                ),
                calc(
                    -50% +
                    (
                        var(--home-py) *
                        -3px
                    ) +
                    (
                        var(--home-hero-shift) *
                        6px
                    )
                ),
                0
            )
            !important;

        transform-origin:
            center center
            !important;

        transition:
            transform
            .16s
            linear;

        /*
         * No horizontal arrival animation.
         * Slow motion happens only inside the crop.
         */

        animation:
            homeWowHeroSingleImageDriftV3
            18s
            cubic-bezier(.45, 0, .55, 1)
            1.2s
            infinite
            alternate
            !important;

        will-change:
            transform,
            object-position;
    }


    @keyframes homeWowHeroSingleImageDriftV3 {

        from {
            object-position:
                62%
                43%;
        }


        to {
            object-position:
                64%
                44%;
        }

    }

}


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

@media (
    min-width: 701px
) and (
    max-width: 1040px
) {

    .home-wow-hero
    .home-wow-hero-photo {
        width:
            calc(
                100% + 210px
            )
            !important;

        height:
            calc(
                100% + 190px
            )
            !important;

        object-position:
            58%
            55%;

        transform:
            translate3d(
                calc(
                    -50% +
                    18px +
                    (
                        var(--home-px) *
                        -4px
                    )
                ),
                calc(
                    -50% +
                    (
                        var(--home-py) *
                        -2px
                    ) +
                    (
                        var(--home-hero-shift) *
                        5px
                    )
                ),
                0
            )
            !important;
    }


    @keyframes homeWowHeroSingleImageDriftV3 {

        from {
            object-position:
                58%
                55%;
        }


        to {
            object-position:
                60%
                54%;
        }

    }

}


/* =========================================================
   BRAND — SYMBOL + REAL TEXT
   ========================================================= */

.brand.home-brand-cinematic {
    min-width:
        126px;
}


.brand.home-brand-cinematic
.site-brand-frame {
    width:
        126px;

    height:
        116px;

    flex:
        0 0
        126px;

    overflow:
        visible;
}


/*
 * Handwritten PM only.
 */

.brand.home-brand-cinematic
.site-brand-frame
.site-brand-logo {
    top:
        10px;

    height:
        84px
        !important;

    width:
        auto
        !important;

    left:
        50%;

    transform:
        translateX(
            -50%
        );

    filter:
        drop-shadow(
            0 8px 15px
            rgba(0, 0, 0, .18)
        )
        drop-shadow(
            0 0 9px
            rgba(224, 163, 91, .08)
        );
}


/*
 * Re-centre the existing orbit around the PM symbol.
 */

.brand.home-brand-cinematic
.site-brand-frame::before {
    top:
        53px;

    width:
        118px;

    height:
        88px;
}


.brand.home-brand-cinematic::before {
    top:
        53px;
}


.brand.home-brand-cinematic::after {
    top:
        91px;
}


/* =========================================================
   PARVIZ MAMMADOV — LIVE TYPOGRAPHY
   ========================================================= */

.site-brand-name {
    position:
        absolute;

    z-index:
        8;

    left:
        50%;

    top:
        96px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        4px;

    white-space:
        nowrap;

    pointer-events:
        none;

    color:
        rgba(
            255,
            255,
            255,
            .76
        );

    font-size:
        6.5px;

    line-height:
        1;

    font-weight:
        500;

    letter-spacing:
        .23em;

    text-transform:
        uppercase;

    transform:
        translateX(
            -50%
        );
}


.site-brand-name-word {
    display:
        inline-block;

    opacity:
        0;

    filter:
        blur(4px);

    transform:
        translateY(
            4px
        )
        skewX(
            -12deg
        );

    letter-spacing:
        .52em;
}


/*
 * First entrance.
 * Words assemble separately.
 */

.brand.home-brand-cinematic.is-brand-live
.site-brand-name-word:first-child {
    animation:
        homeBrandNameWordRevealV3
        .96s
        cubic-bezier(.16, 1, .3, 1)
        .98s
        both;
}


.brand.home-brand-cinematic.is-brand-live
.site-brand-name-word:last-child {
    animation:
        homeBrandNameWordRevealV3
        1.02s
        cubic-bezier(.16, 1, .3, 1)
        1.13s
        both;
}


@keyframes homeBrandNameWordRevealV3 {

    0% {
        opacity:
            0;

        filter:
            blur(5px);

        letter-spacing:
            .58em;

        clip-path:
            inset(
                0 100% 0 0
            );

        transform:
            translateY(
                5px
            )
            skewX(
                -14deg
            );
    }


    42% {
        opacity:
            .88;

        clip-path:
            inset(
                0 38% 0 0
            );
    }


    74% {
        opacity:
            1;

        filter:
            blur(0);

        letter-spacing:
            .20em;

        clip-path:
            inset(
                0
            );

        transform:
            translateY(
                0
            )
            skewX(
                2deg
            );
    }


    100% {
        opacity:
            1;

        filter:
            blur(0);

        letter-spacing:
            .23em;

        clip-path:
            inset(
                0
            );

        transform:
            none;
    }

}


/*
 * Thin scan line used only during occasional name pulse.
 */

.site-brand-name::after {
    content: "";

    position:
        absolute;

    left:
        -8px;

    top:
        50%;

    width:
        0;

    height:
        1px;

    pointer-events:
        none;

    opacity:
        0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                230,
                169,
                97,
                .94
            ),
            rgba(
                255,
                231,
                194,
                .74
            ),
            transparent
        );

    transform:
        translateY(
            -50%
        );
}


/* =========================================================
   OCCASIONAL NAME EFFECT
   ========================================================= */

.brand.home-brand-cinematic.is-brand-name-pulse
.site-brand-name-word:first-child {
    animation:
        homeBrandNamePulseLeftV3
        .86s
        cubic-bezier(.16, 1, .3, 1)
        both
        !important;
}


.brand.home-brand-cinematic.is-brand-name-pulse
.site-brand-name-word:last-child {
    animation:
        homeBrandNamePulseRightV3
        .86s
        cubic-bezier(.16, 1, .3, 1)
        both
        !important;
}


.brand.home-brand-cinematic.is-brand-name-pulse
.site-brand-name::after {
    animation:
        homeBrandNameScanV3
        .78s
        cubic-bezier(.16, 1, .3, 1)
        .04s
        both;
}


@keyframes homeBrandNamePulseLeftV3 {

    0%,
    100% {
        opacity:
            1;

        filter:
            none;

        transform:
            none;
    }


    18% {
        opacity:
            .42;

        filter:
            blur(.7px);

        transform:
            translateX(
                -2px
            )
            skewX(
                -7deg
            );
    }


    31% {
        opacity:
            1;

        transform:
            translateX(
                1px
            );
    }


    45% {
        transform:
            none;
    }

}


@keyframes homeBrandNamePulseRightV3 {

    0%,
    100% {
        opacity:
            1;

        filter:
            none;

        transform:
            none;
    }


    22% {
        opacity:
            .48;

        filter:
            blur(.7px);

        transform:
            translateX(
                2px
            )
            skewX(
                6deg
            );
    }


    34% {
        opacity:
            1;

        transform:
            translateX(
                -1px
            );
    }


    48% {
        transform:
            none;
    }

}


@keyframes homeBrandNameScanV3 {

    0% {
        left:
            -10px;

        width:
            0;

        opacity:
            0;
    }


    24% {
        width:
            34%;

        opacity:
            .9;
    }


    70% {
        left:
            74%;

        width:
            35%;

        opacity:
            .65;
    }


    100% {
        left:
            105%;

        width:
            0;

        opacity:
            0;
    }

}


/* =========================================================
   MOBILE BRAND
   ========================================================= */

@media (max-width: 700px) {

    .brand.home-brand-cinematic {
        min-width:
            78px;
    }


    .brand.home-brand-cinematic
    .site-brand-frame {
        width:
            78px;

        height:
            77px;

        flex-basis:
            78px;
    }


    .brand.home-brand-cinematic
    .site-brand-frame
    .site-brand-logo {
        top:
            6px;

        height:
            57px
            !important;
    }


    .site-brand-name {
        top:
            66px;

        gap:
            3px;

        font-size:
            4.4px;

        letter-spacing:
            .17em;
    }


    .brand.home-brand-cinematic
    .site-brand-frame::before {
        top:
            35px;

        width:
            82px;

        height:
            61px;
    }


    .brand.home-brand-cinematic::before {
        top:
            35px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .site-brand-name-word {
        opacity:
            1
            !important;

        filter:
            none
            !important;

        letter-spacing:
            .23em
            !important;

        transform:
            none
            !important;

        animation:
            none
            !important;
    }


    .site-brand-name::after {
        display:
            none;
    }

}

/* END HOME HERO + BRAND SIGNATURE V3 */


/* =========================================================
   FOOTER FINAL FRAME V1
   ========================================================= */


.site-footer[data-footer-final-frame] {
    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    color:
        #fff;

    background:
        radial-gradient(
            circle
            at 13% 22%,
            rgba(
                224,
                163,
                91,
                .075
            ),
            transparent
            30%
        ),
        radial-gradient(
            circle
            at 91% 115%,
            rgba(
                164,
                78,
                47,
                .14
            ),
            transparent
            38%
        ),
        linear-gradient(
            145deg,
            #09140f
            0%,
            #10241b
            48%,
            #08110d
            100%
        );
}


/*
 * Existing historical footer top-line is overridden
 * only for the new Footer Final Frame.
 */

.site-footer[data-footer-final-frame]::before {
    content:
        "";

    position:
        absolute;

    z-index:
        2;

    top:
        0;

    left:
        0;

    right:
        0;

    width:
        auto;

    height:
        1px;

    pointer-events:
        none;

    opacity:
        .72;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                224,
                163,
                91,
                .34
            )
            18%,
            rgba(
                224,
                163,
                91,
                .92
            )
            50%,
            rgba(
                224,
                163,
                91,
                .34
            )
            82%,
            transparent
        );
}


/*
 * Slow cinematic light pass.
 * It is deliberately rare and low contrast.
 */

.site-footer[data-footer-final-frame]::after {
    content:
        "";

    position:
        absolute;

    z-index:
        0;

    top:
        -35%;

    bottom:
        -35%;

    left:
        -24%;

    width:
        18%;

    pointer-events:
        none;

    opacity:
        0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                224,
                163,
                91,
                .018
            ),
            rgba(
                224,
                163,
                91,
                .08
            ),
            rgba(
                224,
                163,
                91,
                .018
            ),
            transparent
        );

    transform:
        skewX(
            -13deg
        );

    animation:
        footerFinalFrameSweepV1
        16s
        linear
        infinite;
}


/* =========================================================
   FILM STRIP
   ========================================================= */

.footer-film-strip {
    position:
        absolute;

    z-index:
        1;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        30px;

    pointer-events:
        none;

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


.footer-film-strip::before,
.footer-film-strip::after {
    content:
        "";

    position:
        absolute;

    top:
        8px;

    width:
        calc(
            50% - 28px
        );

    height:
        7px;

    opacity:
        .52;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(
                224,
                163,
                91,
                .42
            )
            0,
            rgba(
                224,
                163,
                91,
                .42
            )
            14px,
            transparent
            14px,
            transparent
            26px
        );
}


.footer-film-strip::before {
    left:
        0;
}


.footer-film-strip::after {
    right:
        0;

    transform:
        scaleX(
            -1
        );
}


.footer-film-strip > span {
    position:
        absolute;

    left:
        50%;

    top:
        7px;

    width:
        9px;

    height:
        9px;

    border:
        1px
        solid
        rgba(
            224,
            163,
            91,
            .48
        );

    transform:
        translateX(
            -50%
        )
        rotate(
            45deg
        );
}


/* =========================================================
   FRAME
   ========================================================= */

.footer-final-frame {
    position:
        relative;

    z-index:
        2;

    padding-top:
        55px;

    padding-bottom:
        28px;
}


.footer-frame-head {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    padding-bottom:
        18px;

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


.footer-frame-kicker {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        rgba(
            255,
            255,
            255,
            .46
        );

    font-size:
        9px;

    line-height:
        1;

    font-weight:
        700;

    letter-spacing:
        .22em;

    text-transform:
        uppercase;
}


.footer-rec-dot {
    width:
        6px;

    height:
        6px;

    flex:
        0 0
        auto;

    border-radius:
        50%;

    background:
        var(--amber);

    box-shadow:
        0
        0
        0
        4px
        rgba(
            224,
            163,
            91,
            .07
        ),
        0
        0
        16px
        rgba(
            224,
            163,
            91,
            .18
        );
}


.footer-timecode {
    color:
        rgba(
            255,
            255,
            255,
            .22
        );

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size:
        9px;

    line-height:
        1;

    letter-spacing:
        .09em;
}


/* =========================================================
   MAIN GRID
   ========================================================= */

.footer-frame-main {
    display:
        grid;

    grid-template-columns:
        minmax(
            280px,
            .8fr
        )
        minmax(
            470px,
            1.35fr
        );

    align-items:
        center;

    gap:
        clamp(
            48px,
            7vw,
            110px
        );

    min-height:
        205px;

    padding:
        27px
        0
        29px;
}


/* =========================================================
   BRAND
   ========================================================= */

.site-footer[data-footer-final-frame]
.footer-brand {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    width:
        fit-content;

    gap:
        18px;

    color:
        #fff;

    text-decoration:
        none;
}


.site-footer[data-footer-final-frame]
.footer-symbol {
    position:
        relative;

    width:
        78px;

    height:
        78px;

    flex:
        0 0
        78px;

    display:
        grid;

    place-items:
        center;

    color:
        inherit;
}


.footer-symbol-frame {
    position:
        relative;

    width:
        76px;

    height:
        76px;

    display:
        grid;

    place-items:
        center;

    border:
        1px
        solid
        rgba(
            224,
            163,
            91,
            .22
        );

    background:
        radial-gradient(
            circle,
            rgba(
                224,
                163,
                91,
                .08
            ),
            rgba(
                255,
                255,
                255,
                .012
            )
            58%,
            transparent
            72%
        );

    transition:
        border-color
        .35s
        var(--ease),
        transform
        .35s
        var(--ease),
        background
        .35s
        var(--ease);
}


.footer-symbol-frame::before,
.footer-symbol-frame::after {
    content:
        "";

    position:
        absolute;

    width:
        11px;

    height:
        11px;

    pointer-events:
        none;
}


.footer-symbol-frame::before {
    top:
        -1px;

    left:
        -1px;

    border-top:
        1px
        solid
        var(--amber);

    border-left:
        1px
        solid
        var(--amber);
}


.footer-symbol-frame::after {
    right:
        -1px;

    bottom:
        -1px;

    border-right:
        1px
        solid
        var(--amber);

    border-bottom:
        1px
        solid
        var(--amber);
}


.footer-symbol-frame img {
    display:
        block;

    width:
        62px;

    height:
        62px;

    object-fit:
        contain;

    opacity:
        .92;

    filter:
        drop-shadow(
            0
            8px
            14px
            rgba(
                0,
                0,
                0,
                .18
            )
        );

    transition:
        opacity
        .35s
        var(--ease),
        transform
        .5s
        var(--ease),
        filter
        .5s
        var(--ease);
}


.site-footer[data-footer-final-frame]
.footer-brand:hover
.footer-symbol-frame,
.site-footer[data-footer-final-frame]
.footer-brand:focus-visible
.footer-symbol-frame {
    border-color:
        rgba(
            224,
            163,
            91,
            .52
        );

    background:
        radial-gradient(
            circle,
            rgba(
                224,
                163,
                91,
                .14
            ),
            rgba(
                255,
                255,
                255,
                .02
            )
            58%,
            transparent
            72%
        );

    transform:
        translateY(
            -2px
        );
}


.site-footer[data-footer-final-frame]
.footer-brand:hover
.footer-symbol-frame img,
.site-footer[data-footer-final-frame]
.footer-brand:focus-visible
.footer-symbol-frame img {
    opacity:
        1;

    transform:
        scale(
            1.035
        );

    filter:
        drop-shadow(
            0
            8px
            14px
            rgba(
                0,
                0,
                0,
                .18
            )
        )
        drop-shadow(
            0
            0
            11px
            rgba(
                224,
                163,
                91,
                .14
            )
        );
}


.site-footer[data-footer-final-frame]
.footer-brand-copy {
    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;
}


.site-footer[data-footer-final-frame]
.footer-brand-copy strong {
    display:
        flex;

    flex-direction:
        column;

    color:
        #fff;

    font-size:
        clamp(
            17px,
            1.5vw,
            22px
        );

    line-height:
        .94;

    font-weight:
        700;

    letter-spacing:
        .12em;
}


.site-footer[data-footer-final-frame]
.footer-brand-copy strong span {
    margin-top:
        7px;

    color:
        rgba(
            255,
            255,
            255,
            .72
        );
}


.site-footer[data-footer-final-frame]
.footer-brand-copy small {
    margin-top:
        12px;

    color:
        var(--amber);

    font-size:
        9px;

    line-height:
        1;

    font-weight:
        600;

    letter-spacing:
        .2em;

    text-transform:
        uppercase;

    opacity:
        .72;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.footer-navigation {
    min-width:
        0;
}


.footer-navigation-label {
    margin-bottom:
        13px;

    color:
        rgba(
            255,
            255,
            255,
            .27
        );

    font-size:
        9px;

    line-height:
        1;

    font-weight:
        700;

    letter-spacing:
        .21em;

    text-transform:
        uppercase;
}


.site-footer[data-footer-final-frame]
.footer-nav {
    display:
        grid;

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

    gap:
        5px
        14px;
}


.site-footer[data-footer-final-frame]
.footer-nav-link {
    position:
        relative;

    display:
        grid;

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

    align-items:
        center;

    gap:
        8px;

    min-height:
        43px;

    padding:
        4px
        3px
        4px
        0;

    color:
        rgba(
            255,
            255,
            255,
            .62
        );

    font-size:
        11px;

    line-height:
        1.2;

    font-weight:
        500;

    text-decoration:
        none;

    border-bottom:
        1px
        solid
        rgba(
            255,
            255,
            255,
            .075
        );

    transition:
        color
        .25s
        var(--ease),
        border-color
        .25s
        var(--ease),
        transform
        .25s
        var(--ease);
}


.site-footer[data-footer-final-frame]
.footer-nav-link::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        -1px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            var(--amber),
            rgba(
                224,
                163,
                91,
                .18
            )
        );

    transform:
        scaleX(
            0
        );

    transform-origin:
        left
        center;

    transition:
        transform
        .35s
        var(--ease);
}


.footer-nav-index {
    color:
        rgba(
            224,
            163,
            91,
            .48
        );

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size:
        8px;

    letter-spacing:
        .05em;
}


.footer-nav-label {
    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.footer-nav-arrow {
    opacity:
        0;

    color:
        rgba(
            224,
            163,
            91,
            .5
        );

    font-size:
        10px;

    transform:
        translate(
            -3px,
            2px
        );

    transition:
        opacity
        .25s
        var(--ease),
        transform
        .25s
        var(--ease);
}


.site-footer[data-footer-final-frame]
.footer-nav-link:hover,
.site-footer[data-footer-final-frame]
.footer-nav-link:focus-visible {
    color:
        #fff;

    border-color:
        rgba(
            224,
            163,
            91,
            .16
        );

    transform:
        translateX(
            3px
        );
}


.site-footer[data-footer-final-frame]
.footer-nav-link:hover::after,
.site-footer[data-footer-final-frame]
.footer-nav-link:focus-visible::after {
    transform:
        scaleX(
            1
        );
}


.site-footer[data-footer-final-frame]
.footer-nav-link:hover
.footer-nav-arrow,
.site-footer[data-footer-final-frame]
.footer-nav-link:focus-visible
.footer-nav-arrow {
    opacity:
        1;

    transform:
        none;
}


/* =========================================================
   BOTTOM
   ========================================================= */

.footer-frame-bottom {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    padding-top:
        20px;

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


.site-footer[data-footer-final-frame]
.footer-copy {
    justify-self:
        auto;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;

    color:
        rgba(
            255,
            255,
            255,
            .32
        );

    font-size:
        9px;

    line-height:
        1.45;

    letter-spacing:
        .055em;
}


.footer-copy-divider {
    color:
        rgba(
            224,
            163,
            91,
            .44
        );
}


.footer-end-cue {
    width:
        84px;

    flex:
        0 0
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        6px;
}


.footer-end-cue span {
    flex:
        1
        1
        auto;

    height:
        1px;

    background:
        rgba(
            255,
            255,
            255,
            .13
        );
}


.footer-end-cue i {
    width:
        7px;

    height:
        7px;

    flex:
        0 0
        7px;

    border:
        1px
        solid
        var(--amber);

    opacity:
        .62;

    transform:
        rotate(
            45deg
        );
}


/* =========================================================
   KEYBOARD
   ========================================================= */

.site-footer[data-footer-final-frame]
a:focus-visible {
    outline:
        2px
        solid
        var(--amber);

    outline-offset:
        5px;
}


/* =========================================================
   AMBIENT SWEEP
   ========================================================= */

@keyframes footerFinalFrameSweepV1 {

    0%,
    72% {
        left:
            -24%;

        opacity:
            0;
    }


    77% {
        opacity:
            .72;
    }


    92% {
        opacity:
            .58;
    }


    100% {
        left:
            116%;

        opacity:
            0;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (
    max-width: 980px
) {

    .footer-frame-main {
        grid-template-columns:
            minmax(
                230px,
                .72fr
            )
            minmax(
                390px,
                1.28fr
            );

        gap:
            38px;
    }


    .site-footer[data-footer-final-frame]
    .footer-nav {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (
    max-width: 700px
) {

    .footer-film-strip {
        height:
            24px;
    }


    .footer-film-strip::before,
    .footer-film-strip::after {
        top:
            7px;

        width:
            calc(
                50% - 22px
            );

        height:
            6px;
    }


    .footer-film-strip > span {
        top:
            6px;

        width:
            8px;

        height:
            8px;
    }


    .footer-final-frame {
        padding-top:
            46px;

        padding-bottom:
            22px;
    }


    .footer-frame-head {
        padding-bottom:
            15px;
    }


    .footer-frame-kicker {
        font-size:
            8px;

        letter-spacing:
            .18em;
    }


    .footer-timecode {
        font-size:
            8px;
    }


    .footer-frame-main {
        grid-template-columns:
            1fr;

        gap:
            31px;

        min-height:
            0;

        padding:
            26px
            0
            27px;
    }


    .site-footer[data-footer-final-frame]
    .footer-symbol {
        width:
            66px;

        height:
            66px;

        flex-basis:
            66px;
    }


    .footer-symbol-frame {
        width:
            64px;

        height:
            64px;
    }


    .footer-symbol-frame img {
        width:
            53px;

        height:
            53px;
    }


    .site-footer[data-footer-final-frame]
    .footer-brand-copy strong {
        font-size:
            17px;
    }


    .site-footer[data-footer-final-frame]
    .footer-nav {
        gap:
            4px
            12px;
    }


    .footer-frame-bottom {
        align-items:
            flex-start;
    }


    .site-footer[data-footer-final-frame]
    .footer-copy {
        max-width:
            calc(
                100% - 90px
            );

        font-size:
            8px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (
    max-width: 460px
) {

    .footer-timecode {
        display:
            none;
    }


    .site-footer[data-footer-final-frame]
    .footer-nav {
        grid-template-columns:
            1fr;
    }


    .site-footer[data-footer-final-frame]
    .footer-nav-link {
        min-height:
            39px;
    }


    .footer-end-cue {
        width:
            54px;
    }


    .site-footer[data-footer-final-frame]
    .footer-copy {
        max-width:
            calc(
                100% - 66px
            );
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .site-footer[data-footer-final-frame]::after {
        display:
            none;

        animation:
            none;
    }


    .site-footer[data-footer-final-frame]
    .footer-symbol-frame,

    .site-footer[data-footer-final-frame]
    .footer-symbol-frame img,

    .site-footer[data-footer-final-frame]
    .footer-nav-link,

    .site-footer[data-footer-final-frame]
    .footer-nav-link::after,

    .footer-nav-arrow {
        transition:
            none;
    }


    .site-footer[data-footer-final-frame]
    .footer-brand:hover
    .footer-symbol-frame,

    .site-footer[data-footer-final-frame]
    .footer-brand:focus-visible
    .footer-symbol-frame,

    .site-footer[data-footer-final-frame]
    .footer-brand:hover
    .footer-symbol-frame img,

    .site-footer[data-footer-final-frame]
    .footer-brand:focus-visible
    .footer-symbol-frame img,

    .site-footer[data-footer-final-frame]
    .footer-nav-link:hover,

    .site-footer[data-footer-final-frame]
    .footer-nav-link:focus-visible {
        transform:
            none;
    }

}

/* END FOOTER FINAL FRAME V1 */


/* =========================================================
   HOME PARTNERS + PORTFOLIO V2
   ========================================================= */


/* =========================================================
   PARTNERS / FRIENDS
   ========================================================= */

.home-wow-credits.home-wow-partners {
    position:
        relative;

    min-height:
        0
        !important;

    padding:
        clamp(54px, 5vw, 80px)
        0
        clamp(58px, 5.5vw, 88px)
        !important;

    overflow:
        hidden;

    background:
        var(--green);
}


.home-wow-partners
.home-wow-credits-head {
    display:
        block;

    margin-bottom:
        0;
}


.home-wow-partners
.home-wow-credits-head > div {
    width:
        100%;
}


.home-wow-partners
.home-wow-credits-head h2 {
    max-width:
        820px;

    margin:
        0;

    font-size:
        clamp(
            44px,
            5vw,
            70px
        );

    line-height:
        .96;

    letter-spacing:
        -.045em;
}


.home-wow-partners
.home-wow-credit-strip {
    margin-top:
        clamp(
            28px,
            3vw,
            44px
        );

    gap:
        clamp(
            10px,
            1.35vw,
            18px
        );
}


.home-wow-partners
.home-wow-credit-strip
figure {
    position:
        relative;

    min-height:
        0
        !important;

    height:
        clamp(
            126px,
            12vw,
            172px
        )
        !important;

    margin:
        0;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    background:
        rgba(
            248,
            244,
            235,
            .985
        );

    box-shadow:
        0 12px 34px
        rgba(
            0,
            0,
            0,
            .08
        );

    transition:
        translate
            .4s
            cubic-bezier(.19,1,.22,1),

        box-shadow
            .4s
            ease;
}


.home-wow-partners
.home-wow-credit-strip
figure:nth-child(even) {
    translate:
        0 7px;
}


.home-wow-partners
.home-wow-credit-strip
figure:hover {
    translate:
        0 -5px;

    box-shadow:
        0 20px 50px
        rgba(
            0,
            0,
            0,
            .14
        );
}


.home-wow-partners
.home-wow-credit-strip
figure:nth-child(even):hover {
    translate:
        0 2px;
}


.home-wow-partners
.home-wow-credit-strip
figure img {
    display:
        block;

    width:
        78%;

    height:
        67%;

    object-fit:
        contain;

    filter:
        saturate(.86)
        contrast(.98);

    transition:
        transform
            .52s
            cubic-bezier(.19,1,.22,1),

        filter
            .4s
            ease;
}


.home-wow-partners
.home-wow-credit-strip
figure:hover img {
    transform:
        scale(
            1.04
        );

    filter:
        saturate(1)
        contrast(1);
}


/* =========================================================
   PORTFOLIO CINEMATIC STAGE
   ========================================================= */

.home-wow-portfolio-v2 {
    --portfolio-v2-x:
        0;

    --portfolio-v2-y:
        0;

    position:
        relative;

    min-height:
        clamp(
            560px,
            63vw,
            760px
        );

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    isolation:
        isolate;

    color:
        #fff;

    background:
        #172711;
}


.home-wow-portfolio-v2::before {
    content: "";

    position:
        absolute;

    z-index:
        -3;

    inset:
        0;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at 72% 46%,
            rgba(184, 94, 31, .30),
            transparent 30%
        ),

        radial-gradient(
            circle at 58% 68%,
            rgba(220, 156, 82, .08),
            transparent 27%
        ),

        linear-gradient(
            112deg,
            #293719 0%,
            #203117 40%,
            #13250f 100%
        );
}


.home-wow-portfolio-v2::after {
    content:
        "PORTFOLIO";

    position:
        absolute;

    z-index:
        -2;

    left:
        2.5%;

    bottom:
        -.13em;

    pointer-events:
        none;

    color:
        rgba(
            255,
            255,
            255,
            .026
        );

    font-size:
        clamp(
            120px,
            19vw,
            300px
        );

    line-height:
        .8;

    font-weight:
        800;

    letter-spacing:
        -.07em;

    white-space:
        nowrap;
}


/* =========================================================
   PORTFOLIO AMBIENT
   ========================================================= */

.home-wow-portfolio-v2-ambient {
    position:
        absolute;

    z-index:
        0;

    inset:
        0;

    pointer-events:
        none;
}


.portfolio-v2-orbit {
    position:
        absolute;

    border:
        1px solid
        rgba(
            224,
            159,
            83,
            .14
        );

    border-radius:
        50%;
}


.portfolio-v2-orbit.orbit-a {
    right:
        7%;

    top:
        5%;

    width:
        min(
            46vw,
            620px
        );

    aspect-ratio:
        1;

    border-top-color:
        rgba(
            224,
            159,
            83,
            .52
        );

    animation:
        portfolioV2OrbitA
        25s
        linear
        infinite;
}


.portfolio-v2-orbit.orbit-b {
    right:
        17%;

    top:
        20%;

    width:
        min(
            29vw,
            390px
        );

    aspect-ratio:
        1;

    border-left-color:
        rgba(
            255,
            255,
            255,
            .16
        );

    animation:
        portfolioV2OrbitB
        18s
        linear
        infinite
        reverse;
}


@keyframes portfolioV2OrbitA {

    from {
        rotate:
            0deg;
    }

    to {
        rotate:
            360deg;
    }

}


@keyframes portfolioV2OrbitB {

    from {
        rotate:
            0deg;
    }

    to {
        rotate:
            360deg;
    }

}


.portfolio-v2-scan {
    position:
        absolute;

    z-index:
        5;

    left:
        47%;

    right:
        3%;

    top:
        7%;

    height:
        1px;

    opacity:
        0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(230, 166, 91, .85),
            transparent
        );
}


.home-wow-portfolio-v2.is-portfolio-v2-live
.portfolio-v2-scan {
    animation:
        portfolioV2Scan
        5.6s
        cubic-bezier(.45,0,.55,1)
        infinite;
}


@keyframes portfolioV2Scan {

    0% {
        top:
            7%;

        opacity:
            0;
    }

    15% {
        opacity:
            .24;
    }

    76% {
        opacity:
            .10;
    }

    100% {
        top:
            91%;

        opacity:
            0;
    }

}


.portfolio-v2-mark {
    position:
        absolute;

    width:
        18px;

    height:
        18px;
}


.portfolio-v2-mark.mark-a {
    right:
        5%;

    top:
        10%;

    border-top:
        2px solid
        var(--amber);

    border-right:
        2px solid
        var(--amber);
}


.portfolio-v2-mark.mark-b {
    left:
        48%;

    bottom:
        9%;

    border-left:
        2px solid
        var(--amber);

    border-bottom:
        2px solid
        var(--amber);
}


/* =========================================================
   PORTFOLIO LAYOUT
   ========================================================= */

.home-wow-portfolio-v2-inner {
    position:
        relative;

    z-index:
        4;

    width:
        100%;

    display:
        grid;

    grid-template-columns:
        minmax(
            280px,
            .72fr
        )
        minmax(
            480px,
            1.28fr
        );

    align-items:
        center;

    gap:
        clamp(
            44px,
            6vw,
            100px
        );

    padding-top:
        clamp(
            78px,
            7vw,
            112px
        );

    padding-bottom:
        clamp(
            78px,
            7vw,
            112px
        );
}


.home-wow-portfolio-v2-copy {
    position:
        relative;

    z-index:
        7;
}


.home-wow-portfolio-v2-copy
.home-wow-section-code {
    display:
        block;

    margin-bottom:
        22px;
}


.home-wow-portfolio-v2 h2 {
    margin:
        0;

    color:
        #fff;

    font-size:
        clamp(
            72px,
            9vw,
            138px
        );

    line-height:
        .82;

    font-weight:
        800;

    letter-spacing:
        -.065em;
}


.home-wow-portfolio-v2-copy p {
    max-width:
        390px;

    margin:
        30px 0 0;

    color:
        rgba(
            255,
            255,
            255,
            .63
        );

    font-size:
        17px;

    line-height:
        1.6;
}


.home-wow-portfolio-v2-link {
    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        15px;

    margin-top:
        36px;

    padding-bottom:
        10px;

    color:
        var(--amber);

    font-weight:
        800;

    text-decoration:
        none;
}


.home-wow-portfolio-v2-link::after {
    content: "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            var(--amber),
            transparent
        );

    transform-origin:
        left center;

    transition:
        transform
        .35s
        cubic-bezier(.19,1,.22,1);
}


.home-wow-portfolio-v2-link:hover::after {
    transform:
        scaleX(.62);
}


.home-wow-portfolio-v2-link i {
    transition:
        transform
        .35s
        cubic-bezier(.19,1,.22,1);
}


.home-wow-portfolio-v2-link:hover i {
    transform:
        translateX(
            7px
        );
}


/* =========================================================
   PORTFOLIO FRAMES
   ========================================================= */

.home-wow-portfolio-v2-stage {
    position:
        relative;

    min-height:
        clamp(
            380px,
            40vw,
            525px
        );

    perspective:
        1200px;
}


.portfolio-v2-frame {
    position:
        absolute;

    margin:
        0;

    overflow:
        hidden;

    background:
        #0b150a;

    border:
        1px solid
        rgba(
            224,
            159,
            83,
            .30
        );

    box-shadow:
        0 32px 76px
        rgba(
            0,
            0,
            0,
            .29
        );

    will-change:
        transform;
}


.portfolio-v2-frame::before {
    content: "";

    position:
        absolute;

    z-index:
        3;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            128deg,
            rgba(223, 154, 74, .14),
            transparent 35%,
            rgba(255, 255, 255, .035)
        );

    mix-blend-mode:
        screen;
}


.portfolio-v2-frame::after {
    content: "";

    position:
        absolute;

    z-index:
        4;

    left:
        0;

    right:
        0;

    top:
        50%;

    height:
        1px;

    opacity:
        .14;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.72),
            transparent
        );
}


.portfolio-v2-frame img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    filter:
        saturate(.76)
        contrast(1.05);

    transform:
        scale(
            1.045
        );

    transition:
        transform
            .8s
            cubic-bezier(.19,1,.22,1),

        filter
            .45s
            ease;
}


.portfolio-v2-frame:hover img {
    transform:
        scale(
            1.085
        );

    filter:
        saturate(.98)
        contrast(1.04);
}


.portfolio-v2-frame-a {
    z-index:
        2;

    left:
        0;

    top:
        4%;

    width:
        61%;

    height:
        76%;

    transform:
        translate3d(
            calc(
                var(--portfolio-v2-x) *
                -7px
            ),
            calc(
                var(--portfolio-v2-y) *
                -4px
            ),
            0
        )
        rotate(
            -2.6deg
        );
}


.portfolio-v2-frame-b {
    z-index:
        5;

    right:
        0;

    bottom:
        1%;

    width:
        56%;

    height:
        70%;

    transform:
        translate3d(
            calc(
                var(--portfolio-v2-x) *
                9px
            ),
            calc(
                var(--portfolio-v2-y) *
                6px
            ),
            0
        )
        rotate(
            2.9deg
        );
}


.portfolio-v2-frame-label {
    position:
        absolute;

    z-index:
        6;

    left:
        12px;

    bottom:
        11px;

    padding:
        7px 9px;

    color:
        var(--amber);

    background:
        rgba(
            16,
            31,
            13,
            .82
        );

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .12em;

    backdrop-filter:
        blur(
            6px
        );
}


/* =========================================================
   ENTRY
   ========================================================= */

.home-wow-portfolio-v2.is-portfolio-v2-live
.portfolio-v2-frame-a {
    animation:
        portfolioV2FrameAEnter
        1s
        cubic-bezier(.16,1,.3,1)
        both;
}


.home-wow-portfolio-v2.is-portfolio-v2-live
.portfolio-v2-frame-b {
    animation:
        portfolioV2FrameBEnter
        1.1s
        cubic-bezier(.16,1,.3,1)
        .12s
        both;
}


@keyframes portfolioV2FrameAEnter {

    from {
        opacity:
            .35;

        filter:
            blur(3px);

        translate:
            -18px 12px;
    }

    to {
        opacity:
            1;

        filter:
            none;

        translate:
            0 0;
    }

}


@keyframes portfolioV2FrameBEnter {

    from {
        opacity:
            .28;

        filter:
            blur(4px);

        translate:
            22px -9px;
    }

    to {
        opacity:
            1;

        filter:
            none;

        translate:
            0 0;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .home-wow-credits.home-wow-partners {
        padding:
            48px 0 58px
            !important;
    }


    .home-wow-partners
    .home-wow-credits-head h2 {
        font-size:
            clamp(
                40px,
                12.5vw,
                60px
            );
    }


    .home-wow-partners
    .home-wow-credit-strip {
        margin-top:
            26px;

        gap:
            9px;
    }


    .home-wow-partners
    .home-wow-credit-strip
    figure {
        height:
            118px
            !important;

        translate:
            0 0
            !important;
    }


    .home-wow-portfolio-v2 {
        min-height:
            auto;
    }


    .home-wow-portfolio-v2-inner {
        display:
            block;

        padding-top:
            70px;

        padding-bottom:
            78px;
    }


    .home-wow-portfolio-v2 h2 {
        font-size:
            clamp(
                68px,
                20vw,
                102px
            );
    }


    .home-wow-portfolio-v2-copy p {
        margin-top:
            23px;

        font-size:
            16px;
    }


    .home-wow-portfolio-v2-link {
        margin-top:
            28px;
    }


    .home-wow-portfolio-v2-stage {
        min-height:
            390px;

        margin-top:
            48px;
    }


    .portfolio-v2-frame-a {
        left:
            0;

        top:
            1%;

        width:
            73%;

        height:
            62%;
    }


    .portfolio-v2-frame-b {
        right:
            -2%;

        bottom:
            2%;

        width:
            70%;

        height:
            58%;
    }


    .portfolio-v2-orbit.orbit-a {
        right:
            -27%;

        top:
            29%;

        width:
            115vw;
    }


    .portfolio-v2-orbit.orbit-b {
        display:
            none;
    }


    .portfolio-v2-scan {
        left:
            2%;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .portfolio-v2-orbit,

    .home-wow-portfolio-v2.is-portfolio-v2-live
    .portfolio-v2-scan,

    .home-wow-portfolio-v2.is-portfolio-v2-live
    .portfolio-v2-frame-a,

    .home-wow-portfolio-v2.is-portfolio-v2-live
    .portfolio-v2-frame-b {
        animation:
            none
            !important;
    }


    .portfolio-v2-frame-a,
    .portfolio-v2-frame-b {
        translate:
            0 0
            !important;
    }

}

/* END HOME PARTNERS + PORTFOLIO V2 */


/* =========================================================
   HOME SHOWCASE SPLIT V3
   Portfolio left / Partners right
   ========================================================= */

.home-wow-showcase-v3 {
    --showcase-v3-x: 0;
    --showcase-v3-y: 0;

    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;

    border-top:
        1px solid
        rgba(224, 159, 83, .28);

    border-bottom:
        1px solid
        rgba(224, 159, 83, .22);

    background:
        #172511;
}


.home-wow-showcase-v3-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(0, .88fr);

    min-height:
        clamp(680px, 65vw, 850px);
}


/* =========================================================
   SHARED PANE
   ========================================================= */

.showcase-v3-portfolio,
.showcase-v3-partners {
    position: relative;
    min-width: 0;
    overflow: hidden;
}


/* =========================================================
   LEFT / PORTFOLIO
   ========================================================= */

.showcase-v3-portfolio {
    z-index: 2;

    padding:
        clamp(70px, 7vw, 112px)
        clamp(36px, 5vw, 82px)
        clamp(64px, 6vw, 96px)
        max(
            20px,
            calc(
                (
                    100vw - 1240px
                ) / 2
            )
        );

    background:
        radial-gradient(
            circle at 77% 43%,
            rgba(188, 92, 29, .35),
            transparent 31%
        ),
        linear-gradient(
            128deg,
            #263717 0%,
            #1d2f16 44%,
            #111f0e 100%
        );
}


.showcase-v3-portfolio::after {
    content: "PORTFOLIO";

    position: absolute;
    z-index: 0;

    left: -0.04em;
    bottom: -.11em;

    pointer-events: none;

    color:
        rgba(255,255,255,.027);

    font-size:
        clamp(110px, 16vw, 240px);

    font-weight: 800;
    line-height: .8;
    letter-spacing: -.075em;
}


/* ---------------------------------------------------------
   COPY
   --------------------------------------------------------- */

.showcase-v3-portfolio-copy {
    position: relative;
    z-index: 10;

    max-width: 500px;
}


.showcase-v3-portfolio-copy
.home-wow-section-code {
    display: block;

    margin-bottom: 22px;
}


.showcase-v3-portfolio h2 {
    margin: 0;

    color: #fff;

    font-size:
        clamp(76px, 8vw, 128px);

    line-height: .82;

    letter-spacing: -.065em;
}


.showcase-v3-portfolio-copy p {
    max-width: 390px;

    margin:
        28px 0 0;

    color:
        rgba(255,255,255,.65);

    font-size: 17px;
    line-height: 1.58;
}


.showcase-v3-portfolio-link {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 16px;

    margin-top: 34px;
    padding-bottom: 10px;

    color: var(--amber);

    font-weight: 800;
    text-decoration: none;
}


.showcase-v3-portfolio-link::after {
    content: "";

    position: absolute;

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

    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--amber),
            transparent
        );

    transform-origin: left center;

    transition:
        transform
        .36s
        cubic-bezier(.19,1,.22,1);
}


.showcase-v3-portfolio-link i {
    transition:
        transform
        .36s
        cubic-bezier(.19,1,.22,1);
}


.showcase-v3-portfolio-link:hover::after {
    transform:
        scaleX(.60);
}


.showcase-v3-portfolio-link:hover i {
    transform:
        translateX(7px);
}


/* ---------------------------------------------------------
   PORTFOLIO STAGE
   --------------------------------------------------------- */

.showcase-v3-portfolio-stage {
    position: absolute;

    z-index: 4;

    left: 31%;
    right: 4%;

    top: 36%;
    bottom: 6%;

    perspective: 1200px;

    pointer-events: none;
}


.showcase-v3-frame {
    position: absolute;

    margin: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(226,164,91,.30);

    background:
        #0d170b;

    box-shadow:
        0 30px 70px
        rgba(0,0,0,.31);

    will-change: transform;
}


.showcase-v3-frame::before {
    content: "";

    position: absolute;
    z-index: 3;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            130deg,
            rgba(226,164,91,.15),
            transparent 35%,
            rgba(255,255,255,.035)
        );

    mix-blend-mode: screen;
}


.showcase-v3-frame img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(.80)
        contrast(1.04);

    transform:
        scale(1.045);

    transition:
        transform
        .75s
        cubic-bezier(.19,1,.22,1),
        filter
        .4s
        ease;
}


.showcase-v3-frame-main {
    z-index: 3;

    left: 0;
    top: 2%;

    width: 67%;
    height: 76%;

    transform:
        translate3d(
            calc(
                var(--showcase-v3-x)
                * -7px
            ),
            calc(
                var(--showcase-v3-y)
                * -4px
            ),
            0
        )
        rotate(-2.8deg);
}


.showcase-v3-frame-secondary {
    z-index: 5;

    right: 0;
    bottom: 0;

    width: 59%;
    height: 65%;

    transform:
        translate3d(
            calc(
                var(--showcase-v3-x)
                * 9px
            ),
            calc(
                var(--showcase-v3-y)
                * 6px
            ),
            0
        )
        rotate(3.2deg);
}


.showcase-v3-frame-tag {
    position: absolute;

    z-index: 7;

    left: 11px;
    bottom: 10px;

    padding:
        7px 9px;

    color:
        var(--amber);

    background:
        rgba(19,31,14,.82);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: .13em;

    backdrop-filter:
        blur(5px);
}


/* ---------------------------------------------------------
   PORTFOLIO DECORATION
   --------------------------------------------------------- */

.showcase-v3-portfolio-ambient {
    position: absolute;

    z-index: 1;
    inset: 0;

    pointer-events: none;
}


.showcase-v3-focus-ring {
    position: absolute;

    right: 5%;
    top: 26%;

    width:
        min(42vw, 520px);

    aspect-ratio: 1;

    border:
        1px solid
        rgba(224,159,83,.16);

    border-top-color:
        rgba(224,159,83,.55);

    border-radius: 50%;

    animation:
        showcaseV3FocusOrbit
        24s
        linear
        infinite;
}


@keyframes showcaseV3FocusOrbit {
    to {
        rotate: 360deg;
    }
}


.showcase-v3-film-line {
    position: absolute;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(224,159,83,.28),
            transparent
        );
}


.showcase-v3-film-line.line-a {
    left: 5%;
    right: 4%;
    top: 22%;
}


.showcase-v3-film-line.line-b {
    left: 19%;
    right: 8%;
    top: 27%;
}


.showcase-v3-scan {
    position: absolute;

    z-index: 8;

    left: 28%;
    right: 3%;

    top: 36%;

    height: 1px;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(232,170,99,.9),
            transparent
        );
}


.home-wow-showcase-v3.is-showcase-v3-live
.showcase-v3-scan {
    animation:
        showcaseV3PortfolioScan
        5.4s
        cubic-bezier(.45,0,.55,1)
        infinite;
}


@keyframes showcaseV3PortfolioScan {

    0% {
        top: 36%;
        opacity: 0;
    }

    17% {
        opacity: .28;
    }

    78% {
        opacity: .10;
    }

    100% {
        top: 91%;
        opacity: 0;
    }

}


/* =========================================================
   RIGHT / FRIENDS & PARTNERS
   ========================================================= */

.showcase-v3-partners {
    z-index: 4;

    padding:
        clamp(70px, 7vw, 112px)
        max(
            20px,
            calc(
                (
                    100vw - 1240px
                ) / 2
            )
        )
        clamp(64px, 6vw, 96px)
        clamp(34px, 4vw, 66px);

    border-left:
        1px solid
        rgba(224,159,83,.22);

    background:
        radial-gradient(
            circle at 25% 20%,
            rgba(224,159,83,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 84% 82%,
            rgba(186,88,29,.15),
            transparent 31%
        ),
        #1c3016;
}


.showcase-v3-partners::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .24;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025)
            1px,
            transparent
            1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025)
            1px,
            transparent
            1px
        );

    background-size:
        36px 36px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 18%,
            #000 84%,
            transparent
        );
}


/* ---------------------------------------------------------
   PARTNERS HEAD
   --------------------------------------------------------- */

.showcase-v3-partners-head {
    position: relative;

    z-index: 8;
}


.showcase-v3-partners-head
.home-wow-section-code {
    display: block;

    margin-bottom: 20px;
}


.showcase-v3-partners h2 {
    max-width: 520px;

    margin: 0;

    color: #fff;

    font-size:
        clamp(49px, 5vw, 76px);

    line-height: .91;

    letter-spacing: -.052em;
}


/* ---------------------------------------------------------
   PARTNER GRID
   --------------------------------------------------------- */

.showcase-v3-partner-grid {
    position: relative;

    z-index: 7;

    display: grid;

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

    gap:
        clamp(12px, 1.4vw, 20px);

    margin-top:
        clamp(38px, 4vw, 58px);
}


.showcase-v3-partner-card {
    position: relative;

    min-height:
        clamp(145px, 14vw, 196px);

    margin: 0;

    display: grid;
    place-items: center;

    overflow: hidden;

    background:
        rgba(248,244,235,.985);

    border:
        1px solid
        rgba(255,255,255,.07);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.13);

    transform:
        translate3d(
            calc(
                var(--showcase-v3-x)
                * 2px
            ),
            calc(
                var(--showcase-v3-y)
                * 2px
            ),
            0
        );

    transition:
        transform
        .42s
        cubic-bezier(.19,1,.22,1),
        box-shadow
        .42s
        ease,
        border-color
        .42s
        ease;

    will-change: transform;
}


.showcase-v3-partner-card:nth-child(2),
.showcase-v3-partner-card:nth-child(4) {
    translate:
        0 12px;
}


.showcase-v3-partner-card::before {
    content: "";

    position: absolute;

    z-index: 3;

    left: -70%;
    top: 0;

    width: 54%;
    height: 100%;

    pointer-events: none;

    opacity: 0;

    transform:
        skewX(-18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(224,159,83,.24),
            rgba(255,255,255,.30),
            transparent
        );
}


.showcase-v3-partner-card:hover {
    transform:
        translate3d(
            0,
            -6px,
            0
        )
        scale(1.015);

    border-color:
        rgba(224,159,83,.52);

    box-shadow:
        0 26px 58px
        rgba(0,0,0,.20);
}


.showcase-v3-partner-card:nth-child(2):hover,
.showcase-v3-partner-card:nth-child(4):hover {
    translate:
        0 5px;
}


.showcase-v3-partner-card img {
    display: block;

    width: 76%;
    height: 66%;

    object-fit: contain;

    filter:
        saturate(.86)
        contrast(.98);

    transition:
        transform
        .52s
        cubic-bezier(.19,1,.22,1),
        filter
        .4s
        ease;
}


.showcase-v3-partner-card:hover img {
    transform:
        scale(1.045);

    filter:
        saturate(1)
        contrast(1);
}


.showcase-v3-partner-corner {
    position: absolute;

    z-index: 6;

    right: 8px;
    top: 8px;

    width: 14px;
    height: 14px;

    border-top:
        1px solid
        rgba(180,98,35,.45);

    border-right:
        1px solid
        rgba(180,98,35,.45);
}


/* ---------------------------------------------------------
   PERIODIC PARTNER SIGNAL
   --------------------------------------------------------- */

.showcase-v3-partner-card.is-partner-signal {
    border-color:
        rgba(224,159,83,.74);

    box-shadow:
        0 0 0 1px
        rgba(224,159,83,.13),
        0 25px 55px
        rgba(0,0,0,.20),
        0 0 34px
        rgba(224,159,83,.12);
}


.showcase-v3-partner-card.is-partner-signal::before {
    animation:
        showcaseV3PartnerSweep
        .92s
        cubic-bezier(.19,1,.22,1)
        both;
}


.showcase-v3-partner-card.is-partner-signal img {
    animation:
        showcaseV3PartnerImagePulse
        .92s
        cubic-bezier(.19,1,.22,1)
        both;
}


@keyframes showcaseV3PartnerSweep {

    0% {
        left: -70%;
        opacity: 0;
    }

    22% {
        opacity: .9;
    }

    100% {
        left: 125%;
        opacity: 0;
    }

}


@keyframes showcaseV3PartnerImagePulse {

    0%,
    100% {
        transform: scale(1);
    }

    48% {
        transform: scale(1.035);
    }

}


/* ---------------------------------------------------------
   PARTNERS NETWORK
   --------------------------------------------------------- */

.showcase-v3-partners-ambient {
    position: absolute;

    z-index: 1;
    inset: 0;

    pointer-events: none;
}


.showcase-v3-partner-orbit {
    position: absolute;

    border:
        1px solid
        rgba(224,159,83,.15);

    border-radius: 50%;
}


.showcase-v3-partner-orbit.orbit-a {
    right: -16%;
    top: 6%;

    width: 64%;
    aspect-ratio: 1;

    border-top-color:
        rgba(224,159,83,.48);

    animation:
        showcaseV3PartnerOrbitA
        26s
        linear
        infinite;
}


.showcase-v3-partner-orbit.orbit-b {
    left: -25%;
    bottom: -20%;

    width: 58%;
    aspect-ratio: 1;

    border-left-color:
        rgba(255,255,255,.11);

    animation:
        showcaseV3PartnerOrbitB
        20s
        linear
        infinite
        reverse;
}


@keyframes showcaseV3PartnerOrbitA {
    to {
        rotate: 360deg;
    }
}


@keyframes showcaseV3PartnerOrbitB {
    to {
        rotate: 360deg;
    }
}


.showcase-v3-network-line {
    position: absolute;

    height: 1px;

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            rgba(224,159,83,.05),
            rgba(224,159,83,.25),
            transparent
        );
}


.showcase-v3-network-line.network-a {
    left: 15%;
    top: 45%;

    width: 56%;

    rotate: 19deg;
}


.showcase-v3-network-line.network-b {
    left: 42%;
    top: 35%;

    width: 43%;

    rotate: 71deg;
}


.showcase-v3-network-line.network-c {
    left: 10%;
    bottom: 27%;

    width: 64%;

    rotate: -14deg;
}


.showcase-v3-network-dot {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--amber);

    box-shadow:
        0 0 16px
        rgba(224,159,83,.65);
}


.showcase-v3-network-dot.dot-a {
    left: 19%;
    top: 44%;
}


.showcase-v3-network-dot.dot-b {
    right: 18%;
    top: 33%;
}


.showcase-v3-network-dot.dot-c {
    left: 42%;
    bottom: 19%;
}


.home-wow-showcase-v3.is-showcase-v3-live
.showcase-v3-network-dot {
    animation:
        showcaseV3NetworkPulse
        2.8s
        ease-in-out
        infinite;
}


.home-wow-showcase-v3.is-showcase-v3-live
.showcase-v3-network-dot.dot-b {
    animation-delay: .7s;
}


.home-wow-showcase-v3.is-showcase-v3-live
.showcase-v3-network-dot.dot-c {
    animation-delay: 1.35s;
}


@keyframes showcaseV3NetworkPulse {

    0%,
    100% {
        opacity: .32;
        scale: .8;
    }

    50% {
        opacity: 1;
        scale: 1.35;
    }

}


/* =========================================================
   INITIAL CINEMATIC REVEAL
   ========================================================= */

.home-wow-showcase-v3.is-showcase-v3-live
.showcase-v3-frame-main {
    animation:
        showcaseV3FrameMainEnter
        1.05s
        cubic-bezier(.16,1,.3,1)
        both;
}


.home-wow-showcase-v3.is-showcase-v3-live
.showcase-v3-frame-secondary {
    animation:
        showcaseV3FrameSecondEnter
        1.12s
        cubic-bezier(.16,1,.3,1)
        .12s
        both;
}


.home-wow-showcase-v3.is-showcase-v3-live
.showcase-v3-partner-card {
    animation:
        showcaseV3PartnerEnter
        .78s
        cubic-bezier(.16,1,.3,1)
        both;
}


.home-wow-showcase-v3.is-showcase-v3-live
.showcase-v3-partner-card:nth-child(2) {
    animation-delay: .08s;
}


.home-wow-showcase-v3.is-showcase-v3-live
.showcase-v3-partner-card:nth-child(3) {
    animation-delay: .16s;
}


.home-wow-showcase-v3.is-showcase-v3-live
.showcase-v3-partner-card:nth-child(4) {
    animation-delay: .24s;
}


@keyframes showcaseV3FrameMainEnter {

    from {
        opacity: .45;
        filter: blur(3px);
        translate: -22px 14px;
    }

    to {
        opacity: 1;
        filter: none;
        translate: 0 0;
    }

}


@keyframes showcaseV3FrameSecondEnter {

    from {
        opacity: .36;
        filter: blur(4px);
        translate: 24px -9px;
    }

    to {
        opacity: 1;
        filter: none;
        translate: 0 0;
    }

}


@keyframes showcaseV3PartnerEnter {

    from {
        filter:
            blur(2px)
            saturate(.55);

        scale: .975;
    }

    to {
        filter: none;
        scale: 1;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1040px) {

    .home-wow-showcase-v3-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .showcase-v3-portfolio {
        padding-left:
            28px;

        padding-right:
            28px;
    }


    .showcase-v3-partners {
        padding-left:
            28px;

        padding-right:
            28px;
    }


    .showcase-v3-portfolio-stage {
        left: 18%;
    }


    .showcase-v3-partners h2 {
        font-size:
            clamp(
                46px,
                5.8vw,
                64px
            );
    }

}


/* =========================================================
   MOBILE — STACKED, BUT SAME DESIGN LANGUAGE
   ========================================================= */

@media (max-width: 700px) {

    .home-wow-showcase-v3-grid {
        display: block;
        min-height: 0;
    }


    .showcase-v3-portfolio,
    .showcase-v3-partners {
        min-height: auto;
    }


    .showcase-v3-portfolio {
        padding:
            68px
            18px
            64px;
    }


    .showcase-v3-portfolio h2 {
        font-size:
            clamp(
                66px,
                20vw,
                100px
            );
    }


    .showcase-v3-portfolio-copy p {
        margin-top: 22px;
        font-size: 16px;
    }


    .showcase-v3-portfolio-link {
        margin-top: 28px;
    }


    .showcase-v3-portfolio-stage {
        position: relative;

        left: auto;
        right: auto;
        top: auto;
        bottom: auto;

        min-height: 370px;

        margin-top: 48px;
    }


    .showcase-v3-frame-main {
        left: 0;
        top: 1%;

        width: 74%;
        height: 62%;
    }


    .showcase-v3-frame-secondary {
        right: -1%;
        bottom: 1%;

        width: 70%;
        height: 58%;
    }


    .showcase-v3-partners {
        padding:
            64px
            18px
            72px;

        border-left: 0;

        border-top:
            1px solid
            rgba(224,159,83,.23);
    }


    .showcase-v3-partners h2 {
        font-size:
            clamp(
                44px,
                13vw,
                62px
            );
    }


    .showcase-v3-partner-grid {
        gap: 9px;

        margin-top: 34px;
    }


    .showcase-v3-partner-card {
        min-height: 125px;
    }


    .showcase-v3-partner-card:nth-child(2),
    .showcase-v3-partner-card:nth-child(4) {
        translate: 0 6px;
    }


    .showcase-v3-partner-orbit.orbit-a {
        right: -42%;
        width: 105%;
    }


    .showcase-v3-partner-orbit.orbit-b {
        display: none;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .showcase-v3-focus-ring,

    .home-wow-showcase-v3.is-showcase-v3-live
    .showcase-v3-scan,

    .showcase-v3-partner-orbit,

    .home-wow-showcase-v3.is-showcase-v3-live
    .showcase-v3-network-dot,

    .home-wow-showcase-v3.is-showcase-v3-live
    .showcase-v3-frame-main,

    .home-wow-showcase-v3.is-showcase-v3-live
    .showcase-v3-frame-secondary,

    .home-wow-showcase-v3.is-showcase-v3-live
    .showcase-v3-partner-card,

    .showcase-v3-partner-card.is-partner-signal::before,

    .showcase-v3-partner-card.is-partner-signal img {
        animation:
            none
            !important;
    }


    .showcase-v3-frame-main,
    .showcase-v3-frame-secondary {
        translate:
            0 0
            !important;
    }

}

/* END HOME SHOWCASE SPLIT V3 */


/* =========================================================
   CINEMATIC BACK TO TOP V1
   ========================================================= */

.site-backtop {
    --site-backtop-progress:
        0;

    --site-backtop-x:
        0;

    --site-backtop-y:
        0;

    position:
        fixed;

    z-index:
        120;

    right:
        clamp(
            14px,
            1.8vw,
            26px
        );

    bottom:
        clamp(
            14px,
            2vw,
            28px
        );

    width:
        54px;

    height:
        76px;

    padding:
        0;

    border:
        1px solid
        rgba(
            224,
            159,
            83,
            .42
        );

    appearance:
        none;

    color:
        #fff;

    background:
        linear-gradient(
            155deg,
            rgba(
                31,
                52,
                24,
                .96
            ),
            rgba(
                18,
                34,
                15,
                .96
            )
        );

    box-shadow:
        0 16px 38px
        rgba(
            0,
            0,
            0,
            .22
        ),

        inset
        0 0 0 1px
        rgba(
            255,
            255,
            255,
            .025
        );

    clip-path:
        polygon(
            9px 0,
            100% 0,
            100% calc(100% - 9px),
            calc(100% - 9px) 100%,
            0 100%,
            0 9px
        );

    cursor:
        pointer;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translate3d(
            calc(
                16px +
                (
                    var(--site-backtop-x) *
                    2px
                )
            ),
            calc(
                16px +
                (
                    var(--site-backtop-y) *
                    2px
                )
            ),
            0
        )
        scale(
            .94
        );

    transition:
        opacity
            .35s
            ease,

        visibility
            .35s
            ease,

        transform
            .5s
            cubic-bezier(.16, 1, .3, 1),

        border-color
            .35s
            ease,

        box-shadow
            .35s
            ease;

    will-change:
        transform,
        opacity;
}


/* ---------------------------------------------------------
   VISIBLE STATE
   --------------------------------------------------------- */

.site-backtop.is-visible {
    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translate3d(
            calc(
                var(--site-backtop-x) *
                2px
            ),
            calc(
                var(--site-backtop-y) *
                2px
            ),
            0
        )
        scale(
            1
        );
}


/* ---------------------------------------------------------
   INNER TRACK / PAGE PROGRESS
   --------------------------------------------------------- */

.site-backtop-track {
    position:
        absolute;

    left:
        7px;

    top:
        9px;

    bottom:
        9px;

    width:
        2px;

    overflow:
        hidden;

    background:
        rgba(
            255,
            255,
            255,
            .10
        );
}


.site-backtop-progress {
    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        100%;

    height:
        100%;

    background:
        linear-gradient(
            to top,
            rgba(
                190,
                94,
                30,
                .94
            ),
            var(--amber)
        );

    transform:
        scaleY(
            var(--site-backtop-progress)
        );

    transform-origin:
        bottom center;

    transition:
        transform
        .12s
        linear;
}


/* ---------------------------------------------------------
   CONTROL
   --------------------------------------------------------- */

.site-backtop-control {
    position:
        absolute;

    inset:
        0 0 0 10px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    pointer-events:
        none;
}


.site-backtop-label {
    color:
        rgba(
            255,
            255,
            255,
            .60
        );

    font-size:
        7px;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        .20em;
}


.site-backtop i {
    color:
        var(--amber);

    font-size:
        14px;

    transform:
        translateY(
            0
        );

    transition:
        transform
            .38s
            cubic-bezier(.16, 1, .3, 1),

        color
            .35s
            ease;
}


/* ---------------------------------------------------------
   CINEMATIC SCAN
   --------------------------------------------------------- */

.site-backtop-signal {
    position:
        absolute;

    z-index:
        4;

    left:
        10px;

    right:
        4px;

    top:
        7px;

    height:
        1px;

    pointer-events:
        none;

    opacity:
        0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                235,
                177,
                105,
                .92
            ),
            transparent
        );
}


.site-backtop.is-visible
.site-backtop-signal {
    animation:
        siteBacktopScanV1
        4.6s
        cubic-bezier(.45, 0, .55, 1)
        1s
        infinite;
}


@keyframes siteBacktopScanV1 {

    0%,
    68% {
        top:
            7px;

        opacity:
            0;
    }


    73% {
        opacity:
            .55;
    }


    91% {
        opacity:
            .15;
    }


    100% {
        top:
            calc(
                100% - 7px
            );

        opacity:
            0;
    }

}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

@media (hover: hover) {

    .site-backtop:hover {
        border-color:
            rgba(
                224,
                159,
                83,
                .78
            );

        box-shadow:
            0 20px 48px
            rgba(
                0,
                0,
                0,
                .28
            ),

            0 0 28px
            rgba(
                224,
                159,
                83,
                .10
            );
    }


    .site-backtop:hover i {
        color:
            #fff;

        transform:
            translateY(
                -5px
            );
    }


    .site-backtop:hover
    .site-backtop-label {
        color:
            var(--amber);
    }

}


/* ---------------------------------------------------------
   FOCUS
   --------------------------------------------------------- */

.site-backtop:focus-visible {
    outline:
        2px solid
        var(--amber);

    outline-offset:
        4px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .site-backtop {
        right:
            11px;

        bottom:
            11px;

        width:
            47px;

        height:
            63px;
    }


    .site-backtop-track {
        left:
            6px;

        top:
            8px;

        bottom:
            8px;
    }


    .site-backtop-control {
        inset:
            0 0 0 8px;

        gap:
            7px;
    }


    .site-backtop-label {
        font-size:
            6px;

        letter-spacing:
            .16em;
    }


    .site-backtop i {
        font-size:
            13px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .site-backtop,
    .site-backtop.is-visible {
        transition:
            opacity
            .15s
            linear;

        transform:
            none
            !important;
    }


    .site-backtop-progress {
        transition:
            none;
    }


    .site-backtop.is-visible
    .site-backtop-signal {
        animation:
            none;
    }


    .site-backtop:hover i {
        transform:
            none;
    }

}

/* END CINEMATIC BACK TO TOP V1 */


/* =========================================================
   BACK TO FRAME 01 V2
   ========================================================= */


/* =========================================================
   OUTER DEVICE
   ========================================================= */

.site-backtop[
    data-site-backtop-theme="frame01-v2"
] {
    width:
        58px;

    height:
        88px;

    border-color:
        rgba(
            224,
            159,
            83,
            .48
        );

    background:
        linear-gradient(
            160deg,
            rgba(
                33,
                55,
                24,
                .975
            ),
            rgba(
                17,
                32,
                14,
                .985
            )
        );

    box-shadow:
        0 18px 42px
        rgba(
            0,
            0,
            0,
            .26
        ),

        inset
        0 0 0 1px
        rgba(
            255,
            255,
            255,
            .026
        );
}


/*
 * Tiny frame registration marks.
 */

.site-backtop[
    data-site-backtop-theme="frame01-v2"
]::before {
    content: "";

    position:
        absolute;

    z-index:
        8;

    right:
        5px;

    top:
        5px;

    width:
        8px;

    height:
        8px;

    pointer-events:
        none;

    border-top:
        1px solid
        rgba(
            224,
            159,
            83,
            .72
        );

    border-right:
        1px solid
        rgba(
            224,
            159,
            83,
            .72
        );
}


.site-backtop[
    data-site-backtop-theme="frame01-v2"
]::after {
    content: "";

    position:
        absolute;

    z-index:
        8;

    right:
        5px;

    bottom:
        5px;

    width:
        8px;

    height:
        8px;

    pointer-events:
        none;

    border-right:
        1px solid
        rgba(
            224,
            159,
            83,
            .35
        );

    border-bottom:
        1px solid
        rgba(
            224,
            159,
            83,
            .35
        );
}


/* =========================================================
   FILM STRIP / PROGRESS
   ========================================================= */

.site-backtop[
    data-site-backtop-theme="frame01-v2"
]
.site-backtop-track {
    left:
        6px;

    top:
        8px;

    bottom:
        8px;

    width:
        8px;

    overflow:
        hidden;

    border-left:
        1px solid
        rgba(
            224,
            159,
            83,
            .28
        );

    border-right:
        1px solid
        rgba(
            224,
            159,
            83,
            .28
        );

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(
                224,
                159,
                83,
                .28
            )
            0 3px,

            transparent
            3px 8px
        );
}


/*
 * Actual scroll-progress becomes a thin
 * exposed-film light running through
 * the centre of the strip.
 */

.site-backtop[
    data-site-backtop-theme="frame01-v2"
]
.site-backtop-progress {
    left:
        50%;

    bottom:
        0;

    width:
        2px;

    height:
        100%;

    transform:
        translateX(
            -50%
        )
        scaleY(
            var(--site-backtop-progress)
        );

    transform-origin:
        bottom center;

    background:
        linear-gradient(
            to top,
            #b85d26,
            var(--amber),
            #f0c37f
        );

    box-shadow:
        0 0 8px
        rgba(
            224,
            159,
            83,
            .45
        );
}


/* =========================================================
   FRAME 01 TYPOGRAPHY
   ========================================================= */

.site-backtop[
    data-site-backtop-theme="frame01-v2"
]
.site-backtop-frame-control {
    inset:
        0 0 0 11px;

    gap:
        0;

    justify-content:
        center;
}


.site-backtop-frame-word {
    display:
        block;

    margin-bottom:
        3px;

    color:
        rgba(
            255,
            255,
            255,
            .48
        );

    font-size:
        6px;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        .18em;
}


.site-backtop-frame-number {
    display:
        block;

    margin-bottom:
        7px;

    color:
        #fff;

    font-size:
        17px;

    line-height:
        .9;

    font-weight:
        800;

    letter-spacing:
        -.04em;

    text-shadow:
        0 0 14px
        rgba(
            255,
            255,
            255,
            .08
        );
}


/* =========================================================
   CLAPPERBOARD
   ========================================================= */

.site-backtop-clapper {
    position:
        relative;

    display:
        grid;

    place-items:
        center;

    width:
        25px;

    height:
        21px;

    color:
        var(--amber);

    transform-origin:
        35% 85%;

    will-change:
        transform;
}


.site-backtop-clapper i {
    display:
        block;

    color:
        inherit;

    font-size:
        17px;

    transform:
        none;

    transition:
        color
        .3s
        ease;
}


/*
 * Periodically the clapper gives a tiny
 * "take one" signal while the control is visible.
 */

.site-backtop.is-visible[
    data-site-backtop-theme="frame01-v2"
]
.site-backtop-clapper {
    animation:
        siteBacktopClapperIdleV2
        6.2s
        cubic-bezier(.16,1,.3,1)
        1.4s
        infinite;
}


@keyframes siteBacktopClapperIdleV2 {

    0%,
    72%,
    100% {
        transform:
            rotate(0deg)
            translateY(0);
    }


    76% {
        transform:
            rotate(-10deg)
            translateY(-1px);
    }


    79% {
        transform:
            rotate(2deg)
            translateY(0);
    }


    82% {
        transform:
            rotate(0deg)
            translateY(0);
    }

}


/* =========================================================
   CINEMATIC SIGNAL
   ========================================================= */

.site-backtop[
    data-site-backtop-theme="frame01-v2"
]
.site-backtop-signal {
    left:
        15px;

    right:
        4px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                244,
                190,
                122,
                .95
            ),
            transparent
        );
}


/* =========================================================
   HOVER — "TAKE 01"
   ========================================================= */

@media (hover: hover) {

    .site-backtop[
        data-site-backtop-theme="frame01-v2"
    ]:hover {
        border-color:
            rgba(
                224,
                159,
                83,
                .88
            );

        box-shadow:
            0 22px 52px
            rgba(
                0,
                0,
                0,
                .31
            ),

            0 0 30px
            rgba(
                224,
                159,
                83,
                .12
            );
    }


    .site-backtop[
        data-site-backtop-theme="frame01-v2"
    ]:hover
    .site-backtop-frame-word {
        color:
            var(--amber);
    }


    .site-backtop[
        data-site-backtop-theme="frame01-v2"
    ]:hover
    .site-backtop-frame-number {
        color:
            var(--amber);
    }


    /*
     * A more visible single clap on hover.
     */

    .site-backtop[
        data-site-backtop-theme="frame01-v2"
    ]:hover
    .site-backtop-clapper {
        animation:
            siteBacktopClapperHoverV2
            .62s
            cubic-bezier(.16,1,.3,1)
            both;
    }


    @keyframes siteBacktopClapperHoverV2 {

        0% {
            transform:
                rotate(0deg)
                translateY(0);
        }


        35% {
            transform:
                rotate(-15deg)
                translateY(-2px);
        }


        58% {
            transform:
                rotate(3deg)
                translateY(0);
        }


        100% {
            transform:
                rotate(0deg)
                translateY(0);
        }

    }


    .site-backtop[
        data-site-backtop-theme="frame01-v2"
    ]:hover
    .site-backtop-clapper i {
        color:
            #fff;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .site-backtop[
        data-site-backtop-theme="frame01-v2"
    ] {
        width:
            52px;

        height:
            78px;
    }


    .site-backtop[
        data-site-backtop-theme="frame01-v2"
    ]
    .site-backtop-track {
        left:
            5px;

        top:
            7px;

        bottom:
            7px;

        width:
            7px;
    }


    .site-backtop[
        data-site-backtop-theme="frame01-v2"
    ]
    .site-backtop-frame-control {
        inset:
            0 0 0 9px;
    }


    .site-backtop-frame-word {
        font-size:
            5.5px;

        margin-bottom:
            3px;
    }


    .site-backtop-frame-number {
        font-size:
            15px;

        margin-bottom:
            6px;
    }


    .site-backtop-clapper {
        width:
            22px;

        height:
            18px;
    }


    .site-backtop-clapper i {
        font-size:
            15px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .site-backtop.is-visible[
        data-site-backtop-theme="frame01-v2"
    ]
    .site-backtop-clapper,

    .site-backtop[
        data-site-backtop-theme="frame01-v2"
    ]:hover
    .site-backtop-clapper {
        animation:
            none
            !important;

        transform:
            none
            !important;
    }

}

/* END BACK TO FRAME 01 V2 */


/* =========================================================
   BACK TO TOP FILM LEADER V3

   No UI box.
   No constant decorative animation.
   A floating cinematic production mark.
   ========================================================= */


/* =========================================================
   ROOT — REMOVE THE WIDGET LOOK
   ========================================================= */

.site-backtop[
    data-site-backtop-theme="filmleader-v3"
] {
    width:
        48px
        !important;

    height:
        98px
        !important;

    padding:
        0
        !important;

    border:
        0
        !important;

    outline:
        0;

    clip-path:
        none
        !important;

    background:
        transparent
        !important;

    box-shadow:
        none
        !important;

    overflow:
        visible;

    backdrop-filter:
        none;

    -webkit-backdrop-filter:
        none;
}


/*
 * Remove pseudo geometry inherited from V2.
 */

.site-backtop[
    data-site-backtop-theme="filmleader-v3"
]::before,

.site-backtop[
    data-site-backtop-theme="filmleader-v3"
]::after {
    content:
        none
        !important;

    display:
        none
        !important;
}


/*
 * Existing V1/V2 internals are no longer present,
 * but these defensive rules prevent inherited effects.
 */

.site-backtop[
    data-site-backtop-theme="filmleader-v3"
]
.site-backtop-signal,

.site-backtop[
    data-site-backtop-theme="filmleader-v3"
]
.site-backtop-track,

.site-backtop[
    data-site-backtop-theme="filmleader-v3"
]
.site-backtop-control {
    display:
        none
        !important;
}


/* =========================================================
   FILM LEADER
   ========================================================= */

.site-backtop-leader {
    position:
        absolute;

    left:
        3px;

    top:
        5px;

    bottom:
        5px;

    width:
        10px;

    pointer-events:
        none;
}


/*
 * Main neutral rail.
 */

.site-backtop-leader-rail {
    position:
        absolute;

    left:
        5px;

    top:
        0;

    bottom:
        0;

    width:
        1px;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(
                255,
                255,
                255,
                .24
            ) 10%,
            rgba(
                255,
                255,
                255,
                .24
            ) 90%,
            transparent 100%
        );
}


/*
 * Scroll depth.
 */

.site-backtop-leader-progress {
    position:
        absolute;

    left:
        5px;

    bottom:
        0;

    width:
        1px;

    height:
        100%;

    transform:
        scaleY(
            var(--site-backtop-progress)
        );

    transform-origin:
        bottom center;

    background:
        linear-gradient(
            to top,
            #bd6428 0%,
            var(--amber) 58%,
            #f0c988 100%
        );

    box-shadow:
        0 0 9px
        rgba(
            224,
            159,
            83,
            .34
        );

    transition:
        transform
        .12s
        linear;
}


/* =========================================================
   FILM PERFORATION HINTS
   ========================================================= */

.site-backtop-perf {
    position:
        absolute;

    left:
        0;

    width:
        3px;

    height:
        7px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .22
        );

    border-radius:
        1px;

    transition:
        border-color
        .35s
        ease,

        background
        .35s
        ease;
}


.site-backtop-perf.perf-1 {
    top:
        7%;
}


.site-backtop-perf.perf-2 {
    top:
        32%;
}


.site-backtop-perf.perf-3 {
    top:
        58%;
}


.site-backtop-perf.perf-4 {
    top:
        83%;
}


/* =========================================================
   01 + CLAPPERBOARD
   ========================================================= */

.site-backtop-film-cue {
    position:
        absolute;

    right:
        0;

    top:
        50%;

    width:
        30px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    transform:
        translateY(
            -50%
        );

    pointer-events:
        none;
}


.site-backtop-film-number {
    display:
        block;

    color:
        rgba(
            255,
            255,
            255,
            .84
        );

    font-size:
        13px;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        .02em;

    transition:
        color
        .35s
        ease,

        transform
        .45s
        cubic-bezier(.16,1,.3,1);
}


.site-backtop-film-divider {
    display:
        block;

    width:
        17px;

    height:
        1px;

    margin:
        7px 0 7px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                224,
                159,
                83,
                .78
            ),
            transparent
        );

    transform-origin:
        center;

    transition:
        width
        .45s
        cubic-bezier(.16,1,.3,1),

        opacity
        .35s
        ease;
}


.site-backtop-film-icon {
    display:
        grid;

    place-items:
        center;

    width:
        22px;

    height:
        18px;

    color:
        var(--amber);

    transform:
        translateY(
            0
        )
        rotate(
            0deg
        );

    transform-origin:
        40% 75%;

    transition:
        transform
            .5s
            cubic-bezier(.16,1,.3,1),

        color
            .35s
            ease,

        filter
            .35s
            ease;
}


.site-backtop-film-icon i {
    display:
        block;

    color:
        inherit;

    font-size:
        16px;

    line-height:
        1;

    transform:
        none
        !important;
}


/* =========================================================
   REGISTRATION MARKS
   ========================================================= */

.site-backtop-film-mark {
    position:
        absolute;

    right:
        1px;

    width:
        8px;

    height:
        8px;

    pointer-events:
        none;

    opacity:
        .44;

    transition:
        opacity
        .35s
        ease,

        border-color
        .35s
        ease;
}


.site-backtop-film-mark.mark-top {
    top:
        5px;

    border-top:
        1px solid
        rgba(
            224,
            159,
            83,
            .72
        );

    border-right:
        1px solid
        rgba(
            224,
            159,
            83,
            .72
        );
}


.site-backtop-film-mark.mark-bottom {
    bottom:
        5px;

    border-right:
        1px solid
        rgba(
            224,
            159,
            83,
            .42
        );

    border-bottom:
        1px solid
        rgba(
            224,
            159,
            83,
            .42
        );
}


/* =========================================================
   REVEAL

   Only the normal appearance of the global control.
   No looping visual noise.
   ========================================================= */

.site-backtop[
    data-site-backtop-theme="filmleader-v3"
] {
    transform:
        translate3d(
            calc(
                10px +
                (
                    var(--site-backtop-x) *
                    1.5px
                )
            ),
            calc(
                10px +
                (
                    var(--site-backtop-y) *
                    1.5px
                )
            ),
            0
        );

    filter:
        blur(
            1px
        );
}


.site-backtop.is-visible[
    data-site-backtop-theme="filmleader-v3"
] {
    transform:
        translate3d(
            calc(
                var(--site-backtop-x) *
                1.5px
            ),
            calc(
                var(--site-backtop-y) *
                1.5px
            ),
            0
        );

    filter:
        blur(
            0
        );
}


/* =========================================================
   HOVER — CONTROLLED, NOT PLAYFUL
   ========================================================= */

@media (hover: hover) {

    .site-backtop[
        data-site-backtop-theme="filmleader-v3"
    ]:hover {
        background:
            transparent
            !important;

        border:
            0
            !important;

        box-shadow:
            none
            !important;
    }


    .site-backtop[
        data-site-backtop-theme="filmleader-v3"
    ]:hover
    .site-backtop-film-number {
        color:
            var(--amber);

        transform:
            translateY(
                -2px
            );
    }


    .site-backtop[
        data-site-backtop-theme="filmleader-v3"
    ]:hover
    .site-backtop-film-divider {
        width:
            23px;
    }


    /*
     * Not a clap animation.
     * Just a subtle director-cue movement.
     */

    .site-backtop[
        data-site-backtop-theme="filmleader-v3"
    ]:hover
    .site-backtop-film-icon {
        color:
            #fff;

        transform:
            translateY(
                -3px
            )
            rotate(
                -3deg
            );

        filter:
            drop-shadow(
                0 0 8px
                rgba(
                    224,
                    159,
                    83,
                    .24
                )
            );
    }


    .site-backtop[
        data-site-backtop-theme="filmleader-v3"
    ]:hover
    .site-backtop-perf {
        border-color:
            rgba(
                224,
                159,
                83,
                .60
            );

        background:
            rgba(
                224,
                159,
                83,
                .07
            );
    }


    .site-backtop[
        data-site-backtop-theme="filmleader-v3"
    ]:hover
    .site-backtop-film-mark {
        opacity:
            .9;
    }

}


/* =========================================================
   FOCUS
   ========================================================= */

.site-backtop[
    data-site-backtop-theme="filmleader-v3"
]:focus-visible {
    outline:
        1px solid
        rgba(
            224,
            159,
            83,
            .72
        );

    outline-offset:
        5px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .site-backtop[
        data-site-backtop-theme="filmleader-v3"
    ] {
        right:
            10px;

        bottom:
            12px;

        width:
            43px
            !important;

        height:
            82px
            !important;
    }


    .site-backtop-leader {
        top:
            4px;

        bottom:
            4px;
    }


    .site-backtop-film-cue {
        width:
            26px;
    }


    .site-backtop-film-number {
        font-size:
            12px;
    }


    .site-backtop-film-divider {
        width:
            15px;

        margin:
            6px 0;
    }


    .site-backtop-film-icon i {
        font-size:
            14px;
    }


    .site-backtop-film-mark {
        width:
            7px;

        height:
            7px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .site-backtop[
        data-site-backtop-theme="filmleader-v3"
    ],

    .site-backtop.is-visible[
        data-site-backtop-theme="filmleader-v3"
    ] {
        filter:
            none;

        transform:
            none
            !important;
    }


    .site-backtop[
        data-site-backtop-theme="filmleader-v3"
    ]
    .site-backtop-film-number,

    .site-backtop[
        data-site-backtop-theme="filmleader-v3"
    ]
    .site-backtop-film-icon,

    .site-backtop[
        data-site-backtop-theme="filmleader-v3"
    ]
    .site-backtop-film-divider {
        transition:
            none;
    }


    .site-backtop-leader-progress {
        transition:
            none;
    }

}

/* END BACK TO TOP FILM LEADER V3 */

/* =========================================================
   BACKTOP CONTRAST HALO V1
   Adds premium contrast support on light backgrounds
   without bringing back the cheap box look.
   ========================================================= */

.site-backtop[data-site-backtop-theme="filmleader-v3"] {
    isolation: isolate;
}

.site-backtop[data-site-backtop-theme="filmleader-v3"]::before {
    content: "";
    position: absolute;
    inset: 8px 0 8px 0;
    border-radius: 999px;
    background:
        radial-gradient(
            circle at 55% 50%,
            rgba(8, 16, 8, 0.34) 0%,
            rgba(8, 16, 8, 0.20) 32%,
            rgba(8, 16, 8, 0.10) 56%,
            rgba(8, 16, 8, 0.00) 78%
        );
    filter: blur(10px);
    opacity: .95;
    z-index: -2;
    pointer-events: none;
}

.site-backtop[data-site-backtop-theme="filmleader-v3"]::after {
    content: "";
    position: absolute;
    inset: 12px 3px 12px 3px;
    border-radius: 999px;
    background:
        radial-gradient(
            circle at 58% 50%,
            rgba(224,159,83,.20) 0%,
            rgba(224,159,83,.10) 38%,
            rgba(224,159,83,.00) 72%
        );
    opacity: .85;
    z-index: -1;
    pointer-events: none;
}

.site-backtop[data-site-backtop-theme="filmleader-v3"] .site-backtop-film-number {
    text-shadow:
        0 1px 2px rgba(0,0,0,.28),
        0 0 10px rgba(0,0,0,.14);
}

.site-backtop[data-site-backtop-theme="filmleader-v3"] .site-backtop-film-icon {
    filter:
        drop-shadow(0 1px 2px rgba(0,0,0,.26))
        drop-shadow(0 0 8px rgba(0,0,0,.12));
}

.site-backtop[data-site-backtop-theme="filmleader-v3"] .site-backtop-film-divider,
.site-backtop[data-site-backtop-theme="filmleader-v3"] .site-backtop-leader-rail,
.site-backtop[data-site-backtop-theme="filmleader-v3"] .site-backtop-film-mark,
.site-backtop[data-site-backtop-theme="filmleader-v3"] .site-backtop-perf {
    filter: drop-shadow(0 0 4px rgba(0,0,0,.12));
}

@media (hover: hover) {
    .site-backtop[data-site-backtop-theme="filmleader-v3"]:hover::before {
        opacity: 1;
        filter: blur(12px);
    }

    .site-backtop[data-site-backtop-theme="filmleader-v3"]:hover::after {
        opacity: 1;
    }
}

@media (max-width: 700px) {
    .site-backtop[data-site-backtop-theme="filmleader-v3"]::before {
        inset: 7px 0 7px 0;
        filter: blur(9px);
    }

    .site-backtop[data-site-backtop-theme="filmleader-v3"]::after {
        inset: 11px 2px 11px 2px;
    }
}

/* END BACKTOP CONTRAST HALO V1 */


/* =========================================================
   BACKTOP VISIBLE HALO FIX V2
   Overrides V3 pseudo-element suppression.
   ========================================================= */

.site-backtop[data-site-backtop-theme="filmleader-v3"]::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    z-index: -2 !important;

    inset: 4px -7px 4px -7px !important;

    border-radius: 999px !important;

    pointer-events: none !important;

    opacity: .94 !important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(12, 24, 10, .48) 0%,
            rgba(12, 24, 10, .32) 31%,
            rgba(12, 24, 10, .15) 55%,
            rgba(12, 24, 10, 0) 78%
        ) !important;

    filter: blur(9px) !important;
}


.site-backtop[data-site-backtop-theme="filmleader-v3"]::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    z-index: -1 !important;

    inset: 15px 0 !important;

    border-radius: 999px !important;

    pointer-events: none !important;

    opacity: .78 !important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(224, 159, 83, .28) 0%,
            rgba(224, 159, 83, .12) 42%,
            rgba(224, 159, 83, 0) 74%
        ) !important;

    filter: blur(5px) !important;
}


/*
 * Strong contrast without creating a box.
 */

.site-backtop[data-site-backtop-theme="filmleader-v3"]
.site-backtop-film-number {
    color: #fff !important;

    text-shadow:
        0 1px 2px rgba(0,0,0,.72),
        0 0 5px rgba(0,0,0,.62),
        0 0 12px rgba(0,0,0,.32) !important;
}


.site-backtop[data-site-backtop-theme="filmleader-v3"]
.site-backtop-film-icon {
    color: #e0a05b !important;

    filter:
        drop-shadow(0 1px 1px rgba(0,0,0,.80))
        drop-shadow(0 0 5px rgba(0,0,0,.55))
        drop-shadow(0 0 9px rgba(224,159,83,.25))
        !important;
}


.site-backtop[data-site-backtop-theme="filmleader-v3"]
.site-backtop-film-divider {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(224,159,83,.96),
            transparent
        ) !important;

    filter:
        drop-shadow(0 1px 2px rgba(0,0,0,.75));
}


.site-backtop[data-site-backtop-theme="filmleader-v3"]
.site-backtop-leader-rail {
    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,.72) 12%,
            rgba(255,255,255,.72) 88%,
            transparent
        ) !important;

    filter:
        drop-shadow(0 0 3px rgba(0,0,0,.85));
}


.site-backtop[data-site-backtop-theme="filmleader-v3"]
.site-backtop-perf {
    border-color:
        rgba(255,255,255,.62) !important;

    box-shadow:
        0 0 3px rgba(0,0,0,.68);
}


.site-backtop[data-site-backtop-theme="filmleader-v3"]
.site-backtop-film-mark {
    opacity: .82 !important;

    filter:
        drop-shadow(0 0 3px rgba(0,0,0,.72));
}

/* END BACKTOP VISIBLE HALO FIX V2 */


/* =========================================================
   SIMPLE BACK TO TOP V4
   Clear first, cinematic accent second.
   ========================================================= */

.site-backtop[
    data-site-backtop-theme="simple-up-v4"
] {
    position:
        fixed;

    z-index:
        120;

    right:
        clamp(
            14px,
            1.8vw,
            26px
        );

    bottom:
        clamp(
            14px,
            2vw,
            28px
        );

    width:
        52px
        !important;

    height:
        52px
        !important;

    padding:
        0
        !important;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(
            224,
            159,
            83,
            .72
        )
        !important;

    border-radius:
        50%
        !important;

    clip-path:
        none
        !important;

    appearance:
        none;

    background:
        rgba(
            27,
            48,
            20,
            .96
        )
        !important;

    color:
        #fff;

    box-shadow:
        0 8px 24px
        rgba(
            0,
            0,
            0,
            .26
        ),

        0 0 0 1px
        rgba(
            255,
            255,
            255,
            .035
        )
        inset
        !important;

    backdrop-filter:
        blur(
            7px
        );

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

    isolation:
        isolate;

    overflow:
        hidden;

    cursor:
        pointer;

    filter:
        none
        !important;
}


/*
 * Remove every previous pseudo-element idea:
 * Film Leader, halo, registration graphics.
 */

.site-backtop[
    data-site-backtop-theme="simple-up-v4"
]::before,

.site-backtop[
    data-site-backtop-theme="simple-up-v4"
]::after {
    content:
        none
        !important;

    display:
        none
        !important;
}


/* =========================================================
   BIG CLEAR UP ARROW
   ========================================================= */

.site-backtop-simple-icon {
    position:
        relative;

    z-index:
        4;

    display:
        grid;

    place-items:
        center;

    width:
        100%;

    height:
        100%;

    pointer-events:
        none;
}


.site-backtop-simple-icon i {
    display:
        block;

    color:
        #fff
        !important;

    font-size:
        21px
        !important;

    line-height:
        1;

    transform:
        translateY(
            0
        )
        !important;

    filter:
        drop-shadow(
            0 2px 3px
            rgba(
                0,
                0,
                0,
                .22
            )
        );

    transition:
        transform
            .34s
            cubic-bezier(.16,1,.3,1),

        color
            .28s
            ease;
}


/* =========================================================
   SMALL CINEMA ACCENT

   Deliberately secondary.
   It must never compete with the arrow.
   ========================================================= */

.site-backtop-simple-film {
    position:
        absolute;

    z-index:
        5;

    right:
        5px;

    bottom:
        4px;

    display:
        grid;

    place-items:
        center;

    width:
        15px;

    height:
        15px;

    border-radius:
        50%;

    color:
        var(--amber);

    background:
        #1b3014;

    pointer-events:
        none;
}


.site-backtop-simple-film i {
    display:
        block;

    color:
        var(--amber)
        !important;

    font-size:
        7px
        !important;

    line-height:
        1;

    transform:
        none
        !important;
}


/* =========================================================
   VISIBILITY
   ========================================================= */

.site-backtop[
    data-site-backtop-theme="simple-up-v4"
] {
    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translateY(
            10px
        )
        scale(
            .92
        )
        !important;

    transition:
        opacity
            .25s
            ease,

        visibility
            .25s
            ease,

        transform
            .38s
            cubic-bezier(.16,1,.3,1),

        background
            .28s
            ease,

        border-color
            .28s
            ease,

        box-shadow
            .28s
            ease;
}


.site-backtop.is-visible[
    data-site-backtop-theme="simple-up-v4"
] {
    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translateY(
            0
        )
        scale(
            1
        )
        !important;
}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) {

    .site-backtop[
        data-site-backtop-theme="simple-up-v4"
    ]:hover {
        background:
            #bd6728
            !important;

        border-color:
            #e5aa67
            !important;

        box-shadow:
            0 12px 32px
            rgba(
                0,
                0,
                0,
                .30
            ),

            0 0 20px
            rgba(
                224,
                159,
                83,
                .16
            )
            !important;
    }


    .site-backtop[
        data-site-backtop-theme="simple-up-v4"
    ]:hover
    .site-backtop-simple-icon i {
        transform:
            translateY(
                -4px
            )
            !important;
    }


    .site-backtop[
        data-site-backtop-theme="simple-up-v4"
    ]:hover
    .site-backtop-simple-film {
        color:
            #fff;
    }

}


/* =========================================================
   FOCUS
   ========================================================= */

.site-backtop[
    data-site-backtop-theme="simple-up-v4"
]:focus-visible {
    outline:
        2px solid
        var(--amber);

    outline-offset:
        4px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .site-backtop[
        data-site-backtop-theme="simple-up-v4"
    ] {
        right:
            11px;

        bottom:
            11px;

        width:
            46px
            !important;

        height:
            46px
            !important;
    }


    .site-backtop-simple-icon i {
        font-size:
            19px
            !important;
    }


    .site-backtop-simple-film {
        right:
            4px;

        bottom:
            3px;

        width:
            13px;

        height:
            13px;
    }


    .site-backtop-simple-film i {
        font-size:
            6px
            !important;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .site-backtop[
        data-site-backtop-theme="simple-up-v4"
    ],

    .site-backtop.is-visible[
        data-site-backtop-theme="simple-up-v4"
    ] {
        transition:
            opacity
            .15s
            linear;

        transform:
            none
            !important;
    }


    .site-backtop[
        data-site-backtop-theme="simple-up-v4"
    ]
    .site-backtop-simple-icon i {
        transition:
            none;
    }

}

/* END SIMPLE BACK TO TOP V4 */


/* =========================================================
   BACKTOP ICON SWITCH V5

   Arrow remains primary.
   Film icon periodically replaces it for a short moment.
   ========================================================= */


/* =========================================================
   BOTH ICONS SHARE THE CENTRE
   ========================================================= */

.site-backtop[
    data-site-backtop-theme="simple-up-v4"
]
.site-backtop-simple-icon,

.site-backtop[
    data-site-backtop-theme="simple-up-v4"
]
.site-backtop-simple-film {
    position:
        absolute
        !important;

    z-index:
        5;

    left:
        50%
        !important;

    right:
        auto
        !important;

    top:
        50%
        !important;

    bottom:
        auto
        !important;

    width:
        30px
        !important;

    height:
        30px
        !important;

    margin:
        0;

    display:
        grid;

    place-items:
        center;

    border-radius:
        0
        !important;

    background:
        transparent
        !important;

    pointer-events:
        none;

    transform:
        translate(
            -50%,
            -50%
        );
}


/* =========================================================
   ARROW — PRIMARY STATE
   ========================================================= */

.site-backtop[
    data-site-backtop-theme="simple-up-v4"
]
.site-backtop-simple-icon {
    opacity:
        1;

    animation:
        siteBacktopArrowSwitchV5
        6.4s
        cubic-bezier(.4,0,.2,1)
        1.5s
        infinite;
}


.site-backtop[
    data-site-backtop-theme="simple-up-v4"
]
.site-backtop-simple-icon i {
    color:
        #fff
        !important;

    font-size:
        22px
        !important;

    line-height:
        1;

    filter:
        drop-shadow(
            0 2px 3px
            rgba(0,0,0,.24)
        );

    transform:
        none
        !important;
}


/* =========================================================
   FILM ICON — SECONDARY STATE
   ========================================================= */

.site-backtop[
    data-site-backtop-theme="simple-up-v4"
]
.site-backtop-simple-film {
    opacity:
        0;

    animation:
        siteBacktopFilmSwitchV5
        6.4s
        cubic-bezier(.4,0,.2,1)
        1.5s
        infinite;
}


.site-backtop[
    data-site-backtop-theme="simple-up-v4"
]
.site-backtop-simple-film i {
    color:
        var(--amber)
        !important;

    font-size:
        19px
        !important;

    line-height:
        1;

    filter:
        drop-shadow(
            0 2px 3px
            rgba(0,0,0,.24)
        )
        drop-shadow(
            0 0 7px
            rgba(224,159,83,.20)
        );

    transform:
        none
        !important;
}


/* =========================================================
   SWITCH MOTION

   Arrow is visible ~75% of the cycle.
   Film appears only briefly.
   ========================================================= */

@keyframes siteBacktopArrowSwitchV5 {

    0%,
    61% {
        opacity:
            1;

        transform:
            translate(
                -50%,
                -50%
            )
            translateY(
                0
            )
            scale(
                1
            );
    }


    67% {
        opacity:
            0;

        transform:
            translate(
                -50%,
                -50%
            )
            translateY(
                -5px
            )
            scale(
                .82
            );
    }


    68%,
    84% {
        opacity:
            0;

        transform:
            translate(
                -50%,
                -50%
            )
            translateY(
                4px
            )
            scale(
                .82
            );
    }


    91% {
        opacity:
            1;

        transform:
            translate(
                -50%,
                -50%
            )
            translateY(
                0
            )
            scale(
                1
            );
    }


    100% {
        opacity:
            1;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(
                1
            );
    }

}


@keyframes siteBacktopFilmSwitchV5 {

    0%,
    64% {
        opacity:
            0;

        transform:
            translate(
                -50%,
                -50%
            )
            translateY(
                5px
            )
            scale(
                .80
            );
    }


    70% {
        opacity:
            1;

        transform:
            translate(
                -50%,
                -50%
            )
            translateY(
                0
            )
            scale(
                1
            );
    }


    80% {
        opacity:
            1;

        transform:
            translate(
                -50%,
                -50%
            )
            translateY(
                0
            )
            scale(
                1
            );
    }


    87% {
        opacity:
            0;

        transform:
            translate(
                -50%,
                -50%
            )
            translateY(
                -4px
            )
            scale(
                .84
            );
    }


    100% {
        opacity:
            0;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(
                .84
            );
    }

}


/* =========================================================
   HOVER

   Always show the arrow while the user is actively
   interacting with the control.
   ========================================================= */

@media (hover: hover) {

    .site-backtop[
        data-site-backtop-theme="simple-up-v4"
    ]:hover
    .site-backtop-simple-icon {
        animation:
            none
            !important;

        opacity:
            1
            !important;

        transform:
            translate(
                -50%,
                -50%
            )
            translateY(
                -3px
            )
            !important;
    }


    .site-backtop[
        data-site-backtop-theme="simple-up-v4"
    ]:hover
    .site-backtop-simple-film {
        animation:
            none
            !important;

        opacity:
            0
            !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .site-backtop[
        data-site-backtop-theme="simple-up-v4"
    ]
    .site-backtop-simple-icon i {
        font-size:
            20px
            !important;
    }


    .site-backtop[
        data-site-backtop-theme="simple-up-v4"
    ]
    .site-backtop-simple-film i {
        font-size:
            17px
            !important;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .site-backtop[
        data-site-backtop-theme="simple-up-v4"
    ]
    .site-backtop-simple-icon {
        animation:
            none
            !important;

        opacity:
            1
            !important;

        transform:
            translate(
                -50%,
                -50%
            )
            !important;
    }


    .site-backtop[
        data-site-backtop-theme="simple-up-v4"
    ]
    .site-backtop-simple-film {
        display:
            none
            !important;

        animation:
            none
            !important;
    }

}

/* END BACKTOP ICON SWITCH V5 */


/* =========================================================
   ABOUT AZ CINEMATIC V7
   AZ master visual approval layer.
   ========================================================= */


/* =========================================================
   HERO → CONTENT CUT
   ========================================================= */

.story-page[
    data-about-az-cinematic="v7"
]
.story-content {
    position:
        relative;
}


.story-page[
    data-about-az-cinematic="v7"
]
.story-content::before {
    content:
        "";

    position:
        absolute;

    z-index:
        2;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        7px;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            rgba(193,107,39,.95) 0%,
            rgba(225,160,89,.82) 22%,
            rgba(40,54,24,.16) 55%,
            transparent 100%
        );

    transform:
        scaleX(.38);

    transform-origin:
        left center;

    animation:
        aboutAzContentCutV7
        1.25s
        cubic-bezier(.16,1,.3,1)
        .12s
        both;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-opening-transition {
    position:
        relative;

    height:
        86px;

    margin:
        0 0
        18px;

    overflow:
        hidden;

    pointer-events:
        none;

    opacity:
        0;

    background:
        linear-gradient(
            180deg,
            rgba(40,54,24,.045),
            rgba(248,244,235,.10) 45%,
            rgba(255,255,255,0)
        );

    border-bottom:
        1px solid
        rgba(40,54,24,.08);

    transform:
        translateY(-9px);

    transition:
        opacity
        .62s
        ease,

        transform
        .85s
        cubic-bezier(.16,1,.3,1);
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-opening-transition.is-visible {
    opacity:
        1;

    transform:
        translateY(0);
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-opening-edge {
    position:
        absolute;

    top:
        17px;

    bottom:
        16px;

    width:
        9px;

    opacity:
        .23;

    background:
        repeating-linear-gradient(
            180deg,
            rgba(193,107,39,.58) 0 7px,
            transparent 7px 14px
        );
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-opening-edge.edge-left {
    left:
        5%;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-opening-edge.edge-right {
    right:
        5%;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-opening-frame {
    position:
        absolute;

    top:
        24px;

    width:
        118px;

    height:
        38px;

    border:
        1px solid
        rgba(40,54,24,.10);

    background:
        rgba(255,255,255,.20);

    opacity:
        .48;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-opening-frame.frame-a {
    left:
        17%;

    transform:
        translateX(-16px);
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-opening-frame.frame-b {
    left:
        50%;

    transform:
        translateX(-50%);
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-opening-frame.frame-c {
    right:
        17%;

    transform:
        translateX(16px);
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-opening-focus {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        44px;

    height:
        44px;

    border:
        1px solid
        rgba(193,107,39,.28);

    border-radius:
        50%;

    transform:
        translate(-50%,-50%);

    opacity:
        .70;

    animation:
        aboutAzOpeningFocusV7
        4.8s
        ease-in-out
        infinite;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-opening-scan {
    position:
        absolute;

    z-index:
        3;

    top:
        13px;

    bottom:
        13px;

    left:
        15%;

    width:
        1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(193,107,39,.58),
            transparent
        );

    box-shadow:
        0 0 17px
        rgba(221,161,94,.30);

    animation:
        aboutAzOpeningScanV7
        4.7s
        cubic-bezier(.45,0,.2,1)
        infinite;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-opening-transition
+
.about-timeline {
    margin-top:
        0
        !important;
}


/* =========================================================
   CHAPTER STAGE
   ========================================================= */

.story-page[
    data-about-az-cinematic="v7"
]
.about-chapter {
    position:
        relative;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-chapter[
    data-chapter-index="1"
] {
    padding-top:
        14px;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-chapter.is-active
.about-marker i {
    animation:
        aboutAzMarkerPulseV7
        1.85s
        ease-in-out
        infinite;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-chapter.is-active
.about-marker span {
    text-shadow:
        0 0 18px
        rgba(193,107,39,.24);
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-chapter.is-active
.about-chapter-body > h2 {
    text-shadow:
        0 8px 30px
        rgba(40,54,24,.055);
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-chapter.is-active
.about-chapter-body > h2::after {
    box-shadow:
        0 0 15px
        rgba(193,107,39,.18);
}


/*
 * Existing scenes were visually too faint:
 * ~.16–.19 in current desktop layer.
 */

.story-page[
    data-about-az-cinematic="v7"
]
.about-chapter.is-active
.motion-scene-1 {
    opacity:
        .34
        !important;

    filter:
        blur(0)
        !important;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-chapter.is-active
.motion-scene-2 {
    opacity:
        .32
        !important;

    filter:
        blur(0)
        !important;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-chapter.is-active
.motion-scene-3 {
    opacity:
        .31
        !important;

    filter:
        blur(0)
        !important;
}


/* =========================================================
   01 — CAREER / FILM GATE
   ========================================================= */

.story-page[
    data-about-az-cinematic="v7"
]
.motion-scene-1::after {
    content:
        "";

    position:
        absolute;

    z-index:
        8;

    top:
        0;

    bottom:
        0;

    left:
        12px;

    width:
        2px;

    opacity:
        0;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(221,161,94,.82),
            transparent
        );
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-chapter.is-active
.motion-scene-1::after {
    animation:
        aboutAzFilmGateV7
        3.8s
        ease-in-out
        infinite;
}


/* =========================================================
   02 — SCREENPLAY SCAN
   ========================================================= */

.story-page[
    data-about-az-cinematic="v7"
]
.about-screenplay::after {
    content:
        "";

    position:
        absolute;

    z-index:
        8;

    left:
        20px;

    right:
        20px;

    top:
        32px;

    height:
        1px;

    pointer-events:
        none;

    opacity:
        0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(193,107,39,.62),
            transparent
        );

    box-shadow:
        0 0 10px
        rgba(193,107,39,.18);
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-chapter.is-active
.about-screenplay::after {
    animation:
        aboutAzScreenplayScanV7
        4.6s
        ease-in-out
        infinite;
}


/* =========================================================
   03 — CLAPPER / FINAL FRAME
   ========================================================= */

.story-page[
    data-about-az-cinematic="v7"
]
.about-slate::after {
    content:
        "";

    position:
        absolute;

    z-index:
        8;

    right:
        15px;

    bottom:
        14px;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    opacity:
        .28;

    background:
        var(--rust);

    box-shadow:
        0 0 0 0
        rgba(193,107,39,.30);
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-chapter.is-active
.about-slate::after {
    animation:
        aboutAzSlateRecV7
        2.7s
        ease-out
        infinite;
}


/* =========================================================
   SMALL CHAPTER SIGNAL
   ========================================================= */

.story-page[
    data-about-az-cinematic="v7"
]
.about-az-chapter-signal {
    position:
        absolute;

    z-index:
        2;

    right:
        0;

    top:
        24px;

    width:
        72px;

    height:
        20px;

    pointer-events:
        none;

    opacity:
        .14;

    transition:
        opacity
        .45s
        ease;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-chapter.is-active
.about-az-chapter-signal {
    opacity:
        .82;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-az-chapter-signal
.signal-line {
    position:
        absolute;

    left:
        0;

    right:
        8px;

    top:
        50%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(193,107,39,.48)
        );
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-az-chapter-signal
.signal-dot {
    position:
        absolute;

    right:
        0;

    top:
        50%;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--amber);

    transform:
        translateY(-50%);
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-chapter.is-active
.about-az-chapter-signal
.signal-dot {
    animation:
        aboutAzChapterSignalV7
        2.4s
        ease-in-out
        infinite;
}


/* =========================================================
   PROFESSIONAL FINAL SUBHEADING
   ========================================================= */

.story-page[
    data-about-az-cinematic="v7"
]
.about-professional-heading {
    position:
        relative;

    margin-top:
        56px
        !important;

    padding-top:
        25px;

    border-top:
        1px solid
        rgba(40,54,24,.10);
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-professional-heading::before {
    content:
        "";

    position:
        absolute;

    top:
        -1px;

    left:
        0;

    width:
        76px;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            var(--rust),
            var(--amber)
        );

    transform-origin:
        left center;

    animation:
        aboutAzProfessionalLineV7
        4.6s
        ease-in-out
        infinite;
}


/* =========================================================
   NEXT PATHS
   ========================================================= */

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths {
    position:
        relative;

    margin:
        78px 0
        18px;

    padding:
        32px 0
        12px;

    opacity:
        0;

    transform:
        translateY(22px);

    transition:
        opacity
        .70s
        ease,

        transform
        .85s
        cubic-bezier(.16,1,.3,1);
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths.is-visible {
    opacity:
        1;

    transform:
        translateY(0);
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            var(--rust) 0 12%,
            rgba(40,54,24,.13) 12% 72%,
            transparent 100%
        );
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths-film {
    position:
        absolute;

    top:
        -11px;

    right:
        0;

    display:
        flex;

    gap:
        6px;

    padding:
        5px 8px;

    opacity:
        .54;

    background:
        #fff;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths-film i {
    display:
        block;

    width:
        8px;

    height:
        8px;

    border:
        1px solid
        rgba(193,107,39,.32);

    background:
        rgba(221,161,94,.09);

    animation:
        aboutAzEndFilmV7
        4.2s
        ease-in-out
        infinite;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths-film i:nth-child(2) {
    animation-delay:
        .12s;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths-film i:nth-child(3) {
    animation-delay:
        .24s;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths-film i:nth-child(4) {
    animation-delay:
        .36s;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths-film i:nth-child(5) {
    animation-delay:
        .48s;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths-grid {
    display:
        grid;

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

    gap:
        14px;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-path {
    position:
        relative;

    min-height:
        154px;

    display:
        grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:
        center;

    gap:
        17px;

    padding:
        24px
        21px;

    overflow:
        hidden;

    color:
        var(--green);

    text-decoration:
        none;

    border:
        1px solid
        rgba(40,54,24,.12);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.97),
            rgba(246,241,230,.70)
        );

    transition:
        transform
        .40s
        cubic-bezier(.16,1,.3,1),

        border-color
        .35s
        ease,

        box-shadow
        .35s
        ease;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-path::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        0;

    background:
        linear-gradient(
            110deg,
            transparent 18%,
            rgba(221,161,94,.16) 48%,
            transparent 76%
        );

    transform:
        translateX(-90%);

    transition:
        opacity
        .25s
        ease;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-index {
    align-self:
        start;

    color:
        var(--rust);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .12em;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-copy {
    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-copy small {
    color:
        rgba(40,54,24,.58);

    font-size:
        12px;

    line-height:
        1.45;

    letter-spacing:
        .02em;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-copy strong {
    color:
        var(--green);

    font-size:
        clamp(
            20px,
            1.75vw,
            27px
        );

    line-height:
        1.12;

    font-weight:
        760;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-arrow {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

    place-items:
        center;

    width:
        38px;

    height:
        38px;

    border:
        1px solid
        rgba(193,107,39,.28);

    border-radius:
        50%;

    color:
        var(--rust);

    font-size:
        20px;

    transition:
        color
        .32s
        ease,

        background
        .32s
        ease,

        transform
        .40s
        cubic-bezier(.16,1,.3,1);
}


@media (hover: hover) {

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-path:hover {
        transform:
            translateY(-5px);

        border-color:
            rgba(193,107,39,.36);

        box-shadow:
            0 18px 42px
            rgba(40,54,24,.08);
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-path:hover::before {
        opacity:
            1;

        animation:
            aboutAzNextSweepV7
            .85s
            cubic-bezier(.16,1,.3,1)
            both;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-path:hover
    .about-next-arrow {
        color:
            #fff;

        background:
            var(--rust);

        transform:
            translateX(4px)
            rotate(-4deg);
    }

}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes aboutAzContentCutV7 {

    from {
        opacity:
            .20;

        transform:
            scaleX(.18);
    }

    to {
        opacity:
            1;

        transform:
            scaleX(1);
    }

}


@keyframes aboutAzOpeningFocusV7 {

    0%,
    100% {
        opacity:
            .28;

        transform:
            translate(-50%,-50%)
            scale(.84);
    }

    48% {
        opacity:
            .76;

        transform:
            translate(-50%,-50%)
            scale(1.08);
    }

}


@keyframes aboutAzOpeningScanV7 {

    0% {
        left:
            14%;

        opacity:
            0;
    }

    12% {
        opacity:
            .82;
    }

    52% {
        opacity:
            .46;
    }

    78% {
        left:
            86%;

        opacity:
            .82;
    }

    100% {
        left:
            86%;

        opacity:
            0;
    }

}


@keyframes aboutAzMarkerPulseV7 {

    0%,
    100% {
        box-shadow:
            0 0 0 6px
            rgba(221,161,94,.10),

            0 0 18px
            rgba(221,161,94,.30);
    }

    50% {
        box-shadow:
            0 0 0 10px
            rgba(221,161,94,.04),

            0 0 30px
            rgba(221,161,94,.58);
    }

}


@keyframes aboutAzFilmGateV7 {

    0%,
    72%,
    100% {
        opacity:
            0;

        transform:
            translateX(0);
    }

    78% {
        opacity:
            .82;
    }

    88% {
        opacity:
            .26;

        transform:
            translateX(118px);
    }

    94% {
        opacity:
            0;

        transform:
            translateX(126px);
    }

}


@keyframes aboutAzScreenplayScanV7 {

    0%,
    15% {
        top:
            34px;

        opacity:
            0;
    }

    23% {
        opacity:
            .76;
    }

    62% {
        opacity:
            .34;
    }

    78% {
        top:
            calc(100% - 31px);

        opacity:
            .68;
    }

    88%,
    100% {
        top:
            calc(100% - 31px);

        opacity:
            0;
    }

}


@keyframes aboutAzSlateRecV7 {

    0%,
    100% {
        opacity:
            .24;

        box-shadow:
            0 0 0 0
            rgba(193,107,39,.26);
    }

    35% {
        opacity:
            .92;

        box-shadow:
            0 0 0 8px
            rgba(193,107,39,0);
    }

}


@keyframes aboutAzChapterSignalV7 {

    0%,
    100% {
        opacity:
            .34;

        transform:
            translateY(-50%)
            scale(.72);
    }

    50% {
        opacity:
            1;

        transform:
            translateY(-50%)
            scale(1.18);
    }

}


@keyframes aboutAzProfessionalLineV7 {

    0%,
    100% {
        transform:
            scaleX(.62);

        opacity:
            .52;
    }

    50% {
        transform:
            scaleX(1);

        opacity:
            1;
    }

}


@keyframes aboutAzEndFilmV7 {

    0%,
    100% {
        border-color:
            rgba(193,107,39,.20);

        background:
            rgba(221,161,94,.05);
    }

    50% {
        border-color:
            rgba(193,107,39,.48);

        background:
            rgba(221,161,94,.16);
    }

}


@keyframes aboutAzNextSweepV7 {

    from {
        transform:
            translateX(-95%);
    }

    to {
        transform:
            translateX(105%);
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (
    min-width: 701px
) and (
    max-width: 1040px
) {

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-opening-transition {
        height:
            70px;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-opening-frame {
        width:
            92px;

        height:
            31px;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths-grid {
        grid-template-columns:
            1fr;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-path {
        min-height:
            116px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-opening-transition {
        height:
            52px;

        margin-bottom:
            8px;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-opening-edge {
        top:
            12px;

        bottom:
            11px;

        width:
            6px;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-opening-frame {
        top:
            16px;

        width:
            55px;

        height:
            22px;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-opening-focus {
        width:
            30px;

        height:
            30px;
    }


    /*
     * Existing large decorative chapter scenes remain
     * hidden on mobile. Keep only layout-neutral signals.
     */

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-az-chapter-signal {
        width:
            38px;

        top:
            17px;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-professional-heading {
        margin-top:
            39px
            !important;

        padding-top:
            20px;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths {
        margin-top:
            52px;

        padding-top:
            27px;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths-grid {
        grid-template-columns:
            1fr;

        gap:
            10px;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-path {
        min-height:
            104px;

        grid-template-columns:
            auto 1fr auto;

        gap:
            13px;

        padding:
            20px 17px;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-copy strong {
        font-size:
            21px;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-arrow {
        width:
            34px;

        height:
            34px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .story-content::before,

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-opening-focus,

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-opening-scan,

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-chapter.is-active
    .about-marker i,

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .motion-scene-1::after,

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-screenplay::after,

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-slate::after,

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-az-chapter-signal
    .signal-dot,

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-professional-heading::before,

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths-film i {
        animation:
            none
            !important;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-opening-transition,

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths {
        opacity:
            1
            !important;

        transform:
            none
            !important;
    }

}

/* END ABOUT AZ CINEMATIC V7 */


/* =========================================================
   ABOUT NEXT PATHS CINEMATIC V8
   Strong visual decision frame before footer.
   ========================================================= */


/* =========================================================
   MASTER BLOCK
   ========================================================= */

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-cinematic="v8"
] {
    position:
        relative;

    isolation:
        isolate;

    margin:
        86px 0
        0;

    padding:
        54px
        34px
        38px;

    overflow:
        hidden;

    color:
        #f7f1e6;

    border:
        1px solid
        rgba(221,161,94,.30);

    border-bottom:
        4px solid
        rgba(193,107,39,.82);

    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(221,161,94,.13),
            transparent 25%
        ),

        radial-gradient(
            circle at 11% 85%,
            rgba(193,107,39,.10),
            transparent 27%
        ),

        linear-gradient(
            135deg,
            #263817 0%,
            #172a1d 58%,
            #102319 100%
        );

    box-shadow:
        0 26px 70px
        rgba(18,35,24,.16);
}


/*
 * Film perforation strip.
 */

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-cinematic="v8"
]::before {
    content:
        "";

    position:
        absolute;

    z-index:
        2;

    top:
        10px;

    left:
        18px;

    right:
        18px;

    height:
        7px;

    opacity:
        .56;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(221,161,94,.76)
            0 12px,

            transparent
            12px 25px
        );
}


/*
 * Large atmospheric projector sweep.
 */

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-cinematic="v8"
]::after {
    content:
        "";

    position:
        absolute;

    z-index:
        0;

    top:
        -40%;

    bottom:
        -40%;

    left:
        -42%;

    width:
        25%;

    pointer-events:
        none;

    opacity:
        .42;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,225,174,.16),
            rgba(255,255,255,.10),
            transparent
        );

    transform:
        skewX(-18deg);

    animation:
        aboutNextProjectorSweepV8
        8.4s
        cubic-bezier(.45,0,.2,1)
        infinite;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-master-beam-v8 {
    position:
        absolute;

    z-index:
        1;

    top:
        22px;

    bottom:
        22px;

    left:
        39%;

    width:
        1px;

    pointer-events:
        none;

    opacity:
        .17;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--amber),
            transparent
        );

    animation:
        aboutNextMasterBeamV8
        6.8s
        ease-in-out
        infinite;
}


/* =========================================================
   BLOCK HEADING
   ========================================================= */

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-heading-v8 {
    position:
        relative;

    z-index:
        4;

    max-width:
        680px;

    margin:
        0 0
        34px;

    padding:
        0 0
        27px;

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


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-kicker-v8 {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin:
        0 0
        12px;

    color:
        rgba(231,179,110,.86);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .22em;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-kicker-v8
> span {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--amber);

    box-shadow:
        0 0 0 0
        rgba(221,161,94,.32);

    animation:
        aboutNextKickerPulseV8
        2.2s
        ease-out
        infinite;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-heading-v8
h2 {
    margin:
        0;

    color:
        #fff;

    font-size:
        clamp(
            31px,
            4vw,
            54px
        );

    line-height:
        .98;

    font-weight:
        780;

    letter-spacing:
        -.035em;

    text-shadow:
        0 14px 35px
        rgba(0,0,0,.18);
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-heading-line-v8 {
    position:
        absolute;

    left:
        0;

    bottom:
        -2px;

    display:
        flex;

    gap:
        5px;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-heading-line-v8
i {
    display:
        block;

    height:
        3px;

    background:
        var(--rust);

    animation:
        aboutNextHeadingBarsV8
        4.2s
        ease-in-out
        infinite;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-heading-line-v8
i:nth-child(1) {
    width:
        54px;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-heading-line-v8
i:nth-child(2) {
    width:
        20px;

    animation-delay:
        .18s;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-heading-line-v8
i:nth-child(3) {
    width:
        8px;

    animation-delay:
        .34s;
}


/* =========================================================
   GRID
   ========================================================= */

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-cinematic="v8"
]
.about-next-paths-grid {
    position:
        relative;

    z-index:
        4;

    display:
        grid;

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

    gap:
        14px;
}


/* =========================================================
   CARDS
   ========================================================= */

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-cinematic="v8"
]
.about-next-path {
    position:
        relative;

    min-height:
        205px;

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        end;

    gap:
        14px;

    padding:
        94px
        20px
        22px;

    overflow:
        hidden;

    color:
        #fff;

    border:
        1px solid
        rgba(255,255,255,.15);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );

    box-shadow:
        inset
        0 1px 0
        rgba(255,255,255,.05);

    transition:
        transform
        .48s
        cubic-bezier(.16,1,.3,1),

        border-color
        .35s
        ease,

        background
        .35s
        ease,

        box-shadow
        .35s
        ease;
}


/*
 * Disable the pale V7 card sweep.
 */

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-cinematic="v8"
]
.about-next-path::before {
    display:
        none;
}


/*
 * Amber frame corner.
 */

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-cinematic="v8"
]
.about-next-path::after {
    content:
        "";

    position:
        absolute;

    z-index:
        2;

    top:
        14px;

    right:
        14px;

    width:
        30px;

    height:
        30px;

    border-top:
        1px solid
        rgba(221,161,94,.54);

    border-right:
        1px solid
        rgba(221,161,94,.54);

    opacity:
        .62;

    transition:
        width
        .42s
        cubic-bezier(.16,1,.3,1),

        height
        .42s
        cubic-bezier(.16,1,.3,1),

        opacity
        .32s
        ease;
}


/* =========================================================
   CARD CINEMA SCENE
   ========================================================= */

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-card-scene-v8 {
    position:
        absolute;

    z-index:
        1;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        83px;

    pointer-events:
        none;

    overflow:
        hidden;

    border-bottom:
        1px solid
        rgba(255,255,255,.09);

    background:
        linear-gradient(
            180deg,
            rgba(221,161,94,.07),
            rgba(255,255,255,.01)
        );
}


.story-page[
    data-about-az-cinematic="v7"
]
.next-card-frame-v8 {
    position:
        absolute;

    top:
        16px;

    left:
        18px;

    width:
        56px;

    height:
        42px;

    border:
        1px solid
        rgba(221,161,94,.26);

    box-shadow:
        inset
        0 0 0 6px
        rgba(255,255,255,.015);

    animation:
        aboutNextFrameBreathV8
        4.8s
        ease-in-out
        infinite;
}


.story-page[
    data-about-az-cinematic="v7"
]
.next-card-icon-v8 {
    position:
        absolute;

    top:
        22px;

    left:
        35px;

    display:
        grid;

    place-items:
        center;

    width:
        25px;

    height:
        25px;

    color:
        var(--amber);

    font-size:
        16px;

    opacity:
        .88;

    filter:
        drop-shadow(
            0 0 10px
            rgba(221,161,94,.24)
        );
}


.story-page[
    data-about-az-cinematic="v7"
]
.next-card-code-v8 {
    position:
        absolute;

    right:
        18px;

    bottom:
        13px;

    color:
        rgba(255,255,255,.31);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .18em;
}


.story-page[
    data-about-az-cinematic="v7"
]
.next-card-rec-v8 {
    position:
        absolute;

    top:
        18px;

    right:
        19px;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--rust);

    box-shadow:
        0 0 8px
        rgba(193,107,39,.50);

    animation:
        aboutNextRecBlinkV8
        2.4s
        steps(1)
        infinite;
}


.story-page[
    data-about-az-cinematic="v7"
]
.next-card-scan-v8 {
    position:
        absolute;

    z-index:
        3;

    top:
        0;

    bottom:
        0;

    left:
        -10%;

    width:
        1px;

    opacity:
        0;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(221,161,94,.68),
            transparent
        );

    box-shadow:
        0 0 12px
        rgba(221,161,94,.28);

    animation:
        aboutNextCardScanV8
        6.2s
        ease-in-out
        infinite;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-path[
    data-next-card="2"
]
.next-card-scan-v8 {
    animation-delay:
        .85s;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-path[
    data-next-card="3"
]
.next-card-scan-v8 {
    animation-delay:
        1.7s;
}


/* =========================================================
   CARD TYPOGRAPHY
   ========================================================= */

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-cinematic="v8"
]
.about-next-index {
    position:
        relative;

    z-index:
        5;

    align-self:
        start;

    color:
        var(--amber);

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        .14em;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-cinematic="v8"
]
.about-next-copy {
    position:
        relative;

    z-index:
        5;

    gap:
        6px;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-cinematic="v8"
]
.about-next-copy small {
    color:
        rgba(255,255,255,.52);

    font-size:
        11px;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-cinematic="v8"
]
.about-next-copy strong {
    color:
        #fff;

    font-size:
        clamp(
            21px,
            2vw,
            29px
        );

    text-shadow:
        0 8px 24px
        rgba(0,0,0,.18);
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-cinematic="v8"
]
.about-next-arrow {
    position:
        relative;

    z-index:
        5;

    color:
        var(--amber);

    border-color:
        rgba(221,161,94,.42);

    background:
        rgba(221,161,94,.035);

    box-shadow:
        0 0 0 0
        rgba(221,161,94,.10);
}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) {

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-cinematic="v8"
    ]
    .about-next-path:hover {
        transform:
            translateY(-8px);

        border-color:
            rgba(221,161,94,.52);

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.12),
                rgba(221,161,94,.045)
            );

        box-shadow:
            0 22px 42px
            rgba(0,0,0,.18),

            inset
            0 1px 0
            rgba(255,255,255,.08);
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-cinematic="v8"
    ]
    .about-next-path:hover::after {
        width:
            48px;

        height:
            48px;

        opacity:
            1;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-cinematic="v8"
    ]
    .about-next-path:hover
    .next-card-icon-v8 {
        animation:
            aboutNextIconGlitchV8
            .72s
            cubic-bezier(.16,1,.3,1)
            both;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-cinematic="v8"
    ]
    .about-next-path:hover
    .about-next-arrow {
        color:
            #14261b;

        background:
            var(--amber);

        border-color:
            var(--amber);

        transform:
            translateX(5px);

        box-shadow:
            0 0 0 7px
            rgba(221,161,94,.08);
    }

}


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes aboutNextProjectorSweepV8 {

    0%,
    18% {
        left:
            -42%;

        opacity:
            0;
    }

    27% {
        opacity:
            .42;
    }

    58% {
        opacity:
            .18;
    }

    72% {
        left:
            122%;

        opacity:
            .34;
    }

    100% {
        left:
            122%;

        opacity:
            0;
    }

}


@keyframes aboutNextMasterBeamV8 {

    0%,
    100% {
        opacity:
            .07;

        transform:
            translateX(-50px);
    }

    50% {
        opacity:
            .27;

        transform:
            translateX(110px);
    }

}


@keyframes aboutNextKickerPulseV8 {

    0%,
    100% {
        box-shadow:
            0 0 0 0
            rgba(221,161,94,.22);
    }

    55% {
        box-shadow:
            0 0 0 9px
            rgba(221,161,94,0);
    }

}


@keyframes aboutNextHeadingBarsV8 {

    0%,
    100% {
        opacity:
            .42;

        transform:
            scaleX(.60);
    }

    50% {
        opacity:
            1;

        transform:
            scaleX(1);
    }

}


@keyframes aboutNextFrameBreathV8 {

    0%,
    100% {
        border-color:
            rgba(221,161,94,.18);

        transform:
            scale(.94);
    }

    50% {
        border-color:
            rgba(221,161,94,.42);

        transform:
            scale(1);
    }

}


@keyframes aboutNextRecBlinkV8 {

    0%,
    48% {
        opacity:
            .88;
    }

    49%,
    100% {
        opacity:
            .18;
    }

}


@keyframes aboutNextCardScanV8 {

    0%,
    17% {
        left:
            -8%;

        opacity:
            0;
    }

    24% {
        opacity:
            .82;
    }

    52% {
        opacity:
            .22;
    }

    68% {
        left:
            108%;

        opacity:
            .62;
    }

    78%,
    100% {
        left:
            108%;

        opacity:
            0;
    }

}


@keyframes aboutNextIconGlitchV8 {

    0% {
        opacity:
            .45;

        transform:
            translateX(-7px)
            rotate(-9deg)
            scale(.76);
    }

    35% {
        opacity:
            1;

        transform:
            translateX(3px)
            rotate(4deg)
            scale(1.16);
    }

    62% {
        transform:
            translateX(-2px)
            rotate(-2deg);
    }

    100% {
        opacity:
            1;

        transform:
            none;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (
    min-width: 701px
) and (
    max-width: 1040px
) {

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-cinematic="v8"
    ] {
        padding:
            48px
            27px
            31px;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-cinematic="v8"
    ]
    .about-next-paths-grid {
        grid-template-columns:
            1fr;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-cinematic="v8"
    ]
    .about-next-path {
        min-height:
            158px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-cinematic="v8"
    ] {
        margin-top:
            58px;

        padding:
            46px
            17px
            24px;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-heading-v8 {
        margin-bottom:
            25px;

        padding-bottom:
            21px;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-heading-v8
    h2 {
        font-size:
            34px;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-cinematic="v8"
    ]
    .about-next-paths-grid {
        grid-template-columns:
            1fr;

        gap:
            10px;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-cinematic="v8"
    ]
    .about-next-path {
        min-height:
            166px;

        padding:
            82px
            17px
            19px;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-cinematic="v8"
    ]
    .about-next-copy strong {
        font-size:
            22px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-cinematic="v8"
    ]::after,

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-master-beam-v8,

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-kicker-v8
    > span,

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-heading-line-v8
    i,

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .next-card-frame-v8,

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .next-card-rec-v8,

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .next-card-scan-v8 {
        animation:
            none
            !important;
    }

}

/* END ABOUT NEXT PATHS CINEMATIC V8 */


/* =========================================================
   ABOUT NEXT PATHS V9
   CARDS ONLY — NO OUTER FRAME
   ========================================================= */


/* =========================================================
   REMOVE OUTER BLOCK PRESENTATION
   ========================================================= */

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-layout="cards-only-v9"
] {
    margin:
        72px 0
        24px;

    padding:
        0;

    overflow:
        visible;

    color:
        inherit;

    border:
        0;

    border-bottom:
        0;

    background:
        none;

    box-shadow:
        none;

    isolation:
        auto;
}


/*
 * Remove V8 film perforation and projector sweep
 * from the section itself.
 */

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-layout="cards-only-v9"
]::before,

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-layout="cards-only-v9"
]::after {
    display:
        none
        !important;

    content:
        none
        !important;
}


/*
 * Safety: heading / outer decorative items
 * must stay absent even before JS cleanup finishes.
 */

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-layout="cards-only-v9"
]
.about-next-heading-v8,

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-layout="cards-only-v9"
]
.about-next-master-beam-v8,

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-layout="cards-only-v9"
]
.about-next-paths-film {
    display:
        none
        !important;
}


/* =========================================================
   GRID
   ========================================================= */

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-layout="cards-only-v9"
]
.about-next-paths-grid {
    display:
        grid;

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

    align-items:
        stretch;

    gap:
        15px;

    width:
        100%;
}


/* =========================================================
   CARD BODY ALIGNMENT
   ========================================================= */

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-layout="cards-only-v9"
]
.about-next-path {
    min-height:
        205px;

    height:
        100%;

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

    grid-template-rows:
        1fr;

    align-items:
        center;

    column-gap:
        13px;

    padding:
        94px
        18px
        18px;

    box-sizing:
        border-box;
}


/*
 * All numbers use same vertical axis.
 */

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-layout="cards-only-v9"
]
.about-next-index {
    align-self:
        center;

    justify-self:
        start;

    margin:
        0;

    line-height:
        1;
}


/*
 * Equal text block for all cards.
 *
 * Kurs və təlimlər may wrap to two lines,
 * but its total block occupies the same geometry
 * as Portfolio and Xidmətlər.
 */

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-layout="cards-only-v9"
]
.about-next-copy {
    align-self:
        center;

    justify-self:
        stretch;

    display:
        grid;

    grid-template-rows:
        22px
        62px;

    align-content:
        center;

    gap:
        5px;

    min-width:
        0;

    min-height:
        89px;

    margin:
        0;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-layout="cards-only-v9"
]
.about-next-copy small {
    display:
        flex;

    align-items:
        center;

    min-width:
        0;

    height:
        22px;

    margin:
        0;

    overflow:
        hidden;

    font-size:
        11px;

    line-height:
        1.25;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-layout="cards-only-v9"
]
.about-next-copy strong {
    display:
        flex;

    align-items:
        center;

    min-width:
        0;

    min-height:
        62px;

    margin:
        0;

    font-size:
        clamp(
            22px,
            2vw,
            29px
        );

    line-height:
        1.02;

    overflow-wrap:
        normal;

    word-break:
        normal;
}


/*
 * Arrow sits on same centerline for all cards.
 */

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-layout="cards-only-v9"
]
.about-next-arrow {
    align-self:
        center;

    justify-self:
        end;

    margin:
        0;
}


/* =========================================================
   KEEP CARD CINEMATIC HEADER EXACTLY VISIBLE
   ========================================================= */

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-layout="cards-only-v9"
]
.about-next-card-scene-v8 {
    display:
        block;

    height:
        83px;
}


/*
 * Cards remain dark even though their parent
 * is now transparent.
 */

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-layout="cards-only-v9"
]
.about-next-path {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(221,161,94,.09),
            transparent 27%
        ),

        linear-gradient(
            145deg,
            #2c3d20 0%,
            #1d3326 52%,
            #14291f 100%
        );

    border:
        1px solid
        rgba(221,161,94,.25);

    box-shadow:
        0 14px 34px
        rgba(18,35,24,.10),

        inset
        0 1px 0
        rgba(255,255,255,.035);
}


/* =========================================================
   HOVER — KEEP FOCUS ON EACH CARD
   ========================================================= */

@media (hover: hover) {

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-path:hover {
        transform:
            translateY(-8px);

        border-color:
            rgba(221,161,94,.54);

        box-shadow:
            0 22px 44px
            rgba(18,35,24,.17),

            inset
            0 1px 0
            rgba(255,255,255,.06);
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (
    min-width: 701px
) and (
    max-width: 1040px
) {

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-paths-grid {
        grid-template-columns:
            1fr;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-path {
        min-height:
            172px;

        padding-top:
            88px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ] {
        margin-top:
            54px;

        padding:
            0;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-paths-grid {
        grid-template-columns:
            1fr;

        gap:
            11px;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-path {
        min-height:
            172px;

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

        padding:
            84px
            16px
            17px;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-copy {
        grid-template-rows:
            20px
            54px;

        min-height:
            79px;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-copy small {
        height:
            20px;

        font-size:
            10px;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-copy strong {
        min-height:
            54px;

        font-size:
            22px;
    }

}

/* END ABOUT NEXT PATHS V9 */


/* =========================================================
   ABOUT NEXT PATHS V10
   Separation + fixed dark hover.
   ========================================================= */


/* =========================================================
   MORE SPACE AFTER MAIN ABOUT CONTENT
   ========================================================= */

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-paths[
    data-next-layout="cards-only-v9"
][
    data-next-spacing="v10"
] {
    margin-top:
        118px;

    margin-bottom:
        36px;
}


/* =========================================================
   CINEMATIC SEPARATOR
   ========================================================= */

.story-page[
    data-about-az-cinematic="v7"
]
.about-next-separator-v10 {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        1fr
        34px
        1fr;

    align-items:
        center;

    column-gap:
        12px;

    height:
        42px;

    margin:
        0 0
        32px;

    pointer-events:
        none;

    overflow:
        hidden;
}


.story-page[
    data-about-az-cinematic="v7"
]
.separator-line-v10 {
    display:
        block;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(193,107,39,.42)
        );
}


.story-page[
    data-about-az-cinematic="v7"
]
.separator-line-v10.line-right {
    background:
        linear-gradient(
            90deg,
            rgba(193,107,39,.42),
            transparent
        );
}


.story-page[
    data-about-az-cinematic="v7"
]
.separator-center-v10 {
    position:
        relative;

    display:
        grid;

    place-items:
        center;

    width:
        34px;

    height:
        34px;
}


.story-page[
    data-about-az-cinematic="v7"
]
.separator-center-v10::before,

.story-page[
    data-about-az-cinematic="v7"
]
.separator-center-v10::after {
    content:
        "";

    position:
        absolute;

    inset:
        7px;

    border:
        1px solid
        rgba(193,107,39,.28);

    transform:
        rotate(45deg);
}


.story-page[
    data-about-az-cinematic="v7"
]
.separator-center-v10::after {
    inset:
        12px;

    border-color:
        rgba(221,161,94,.52);

    animation:
        aboutNextSeparatorPulseV10
        3.6s
        ease-in-out
        infinite;
}


.story-page[
    data-about-az-cinematic="v7"
]
.separator-center-v10
> i {
    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

    background:
        var(--amber);

    box-shadow:
        0 0 12px
        rgba(221,161,94,.36);
}


.story-page[
    data-about-az-cinematic="v7"
]
.separator-perf-v10 {
    position:
        absolute;

    top:
        50%;

    left:
        50%;

    display:
        flex;

    gap:
        7px;

    opacity:
        .18;

    transform:
        translate(-50%,-50%);
}


.story-page[
    data-about-az-cinematic="v7"
]
.separator-perf-v10
i {
    display:
        block;

    width:
        5px;

    height:
        3px;

    border:
        1px solid
        rgba(193,107,39,.52);

    animation:
        aboutNextSeparatorPerfV10
        4.2s
        ease-in-out
        infinite;
}


.story-page[
    data-about-az-cinematic="v7"
]
.separator-perf-v10
i:nth-child(2) {
    animation-delay:
        .10s;
}


.story-page[
    data-about-az-cinematic="v7"
]
.separator-perf-v10
i:nth-child(3) {
    animation-delay:
        .20s;
}


.story-page[
    data-about-az-cinematic="v7"
]
.separator-perf-v10
i:nth-child(4) {
    animation-delay:
        .30s;
}


.story-page[
    data-about-az-cinematic="v7"
]
.separator-perf-v10
i:nth-child(5) {
    animation-delay:
        .40s;
}


.story-page[
    data-about-az-cinematic="v7"
]
.separator-perf-v10
i:nth-child(6) {
    animation-delay:
        .50s;
}


.story-page[
    data-about-az-cinematic="v7"
]
.separator-perf-v10
i:nth-child(7) {
    animation-delay:
        .60s;
}


/* =========================================================
   CRITICAL HOVER FIX
   ========================================================= */

/*
 * V8 had a light hover background.
 * Override it explicitly with the dark cinematic palette.
 */

@media (hover: hover) {

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-path:hover {
        color:
            #fff
            !important;

        background:
            radial-gradient(
                circle at 86% 12%,
                rgba(221,161,94,.16),
                transparent 29%
            ),

            linear-gradient(
                145deg,
                #334823 0%,
                #20392a 52%,
                #163025 100%
            )
            !important;

        border-color:
            rgba(221,161,94,.64)
            !important;

        box-shadow:
            0 24px 48px
            rgba(18,35,24,.22),

            0 0 0 1px
            rgba(221,161,94,.07),

            inset
            0 1px 0
            rgba(255,255,255,.07)
            !important;

        transform:
            translateY(-8px)
            scale(1.012);
    }


    /*
     * Force all text to remain visible during hover.
     */

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-path:hover
    .about-next-copy strong {
        color:
            #fff
            !important;

        opacity:
            1
            !important;

        text-shadow:
            0 8px 26px
            rgba(0,0,0,.24);
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-path:hover
    .about-next-copy small {
        color:
            rgba(255,255,255,.68)
            !important;

        opacity:
            1
            !important;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-path:hover
    .about-next-index {
        color:
            var(--amber)
            !important;

        opacity:
            1
            !important;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-path:hover
    .next-card-code-v8 {
        color:
            rgba(255,255,255,.48)
            !important;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-path:hover
    .about-next-card-scene-v8 {
        background:
            linear-gradient(
                180deg,
                rgba(221,161,94,.12),
                rgba(255,255,255,.02)
            )
            !important;

        border-bottom-color:
            rgba(221,161,94,.20)
            !important;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-path:hover
    .about-next-arrow {
        color:
            #172a1d
            !important;

        background:
            var(--amber)
            !important;

        border-color:
            var(--amber)
            !important;

        opacity:
            1
            !important;

        transform:
            translateX(5px)
            rotate(-4deg);

        box-shadow:
            0 0 0 8px
            rgba(221,161,94,.08);
    }

}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes aboutNextSeparatorPulseV10 {

    0%,
    100% {
        opacity:
            .34;

        transform:
            rotate(45deg)
            scale(.72);
    }

    50% {
        opacity:
            1;

        transform:
            rotate(45deg)
            scale(1.08);
    }

}


@keyframes aboutNextSeparatorPerfV10 {

    0%,
    100% {
        opacity:
            .20;

        transform:
            translateY(0);
    }

    50% {
        opacity:
            .65;

        transform:
            translateY(-2px);
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (
    min-width: 701px
) and (
    max-width: 1040px
) {

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ][
        data-next-spacing="v10"
    ] {
        margin-top:
            94px;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-separator-v10 {
        margin-bottom:
            27px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ][
        data-next-spacing="v10"
    ] {
        margin-top:
            76px;

        margin-bottom:
            26px;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-separator-v10 {
        grid-template-columns:
            1fr
            28px
            1fr;

        height:
            34px;

        margin-bottom:
            23px;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .separator-center-v10 {
        width:
            28px;

        height:
            28px;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .separator-perf-v10 {
        display:
            none;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .separator-center-v10::after,

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .separator-perf-v10
    i {
        animation:
            none
            !important;
    }

}

/* END ABOUT NEXT PATHS V10 */


/* =========================================================
   ABOUT NEXT PATHS V11
   Title size + exact bottom-row alignment.
   ========================================================= */


/* =========================================================
   DESKTOP CARD GRID
   ========================================================= */

@media (min-width: 701px) {

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-path {
        /*
         * Row 1 = supporting copy.
         * Row 2 = number / main title / arrow.
         */

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

        grid-template-rows:
            24px
            48px;

        column-gap:
            11px;

        row-gap:
            3px;

        align-content:
            end;

        align-items:
            center;

        padding:
            94px
            17px
            19px;
    }


    /*
     * Let children of .about-next-copy participate
     * directly in the card grid.
     */

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-copy {
        display:
            contents;
    }


    /*
     * Supporting sentence:
     *
     * İşlərimlə tanış olmaq
     * Əməkdaşlıq istiqamətləri
     * Tədris proqramları
     */

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-copy small {
        grid-column:
            2;

        grid-row:
            1;

        align-self:
            end;

        display:
            block;

        width:
            100%;

        height:
            auto;

        min-width:
            0;

        margin:
            0;

        overflow:
            hidden;

        color:
            rgba(255,255,255,.54);

        font-size:
            10.5px;

        line-height:
            1.25;

        white-space:
            nowrap;

        text-overflow:
            ellipsis;
    }


    /*
     * Main title.
     *
     * Slight reduction only.
     * This keeps the visual weight while allowing
     * "Kurs və təlimlər" to stay on one line.
     */

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-copy strong {
        grid-column:
            2;

        grid-row:
            2;

        align-self:
            center;

        display:
            block;

        width:
            100%;

        min-width:
            0;

        min-height:
            0;

        margin:
            0;

        color:
            #fff;

        font-size:
            clamp(
                21px,
                1.65vw,
                25px
            );

        line-height:
            1;

        font-weight:
            760;

        letter-spacing:
            -.025em;

        white-space:
            nowrap;

        overflow:
            visible;
    }


    /*
     * Number sits on exact same row as title.
     */

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-index {
        grid-column:
            1;

        grid-row:
            2;

        align-self:
            center;

        justify-self:
            start;

        margin:
            0;

        padding:
            0;

        line-height:
            1;

        transform:
            translateY(
                1px
            );
    }


    /*
     * Arrow uses same title row as well.
     */

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-arrow {
        grid-column:
            3;

        grid-row:
            2;

        align-self:
            center;

        justify-self:
            end;

        margin:
            0;
    }

}


/* =========================================================
   TABLET SAFETY
   ========================================================= */

@media (
    min-width: 701px
) and (
    max-width: 1040px
) {

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-copy strong {
        font-size:
            24px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    /*
     * Mobile remains flexible:
     * long localized titles may wrap safely.
     */

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-path {
        grid-template-columns:
            24px
            minmax(0,1fr)
            36px;

        grid-template-rows:
            21px
            minmax(
                43px,
                auto
            );

        column-gap:
            10px;

        row-gap:
            3px;

        align-content:
            end;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-copy {
        display:
            contents;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-copy small {
        grid-column:
            2;

        grid-row:
            1;

        align-self:
            end;

        height:
            auto;

        margin:
            0;

        white-space:
            nowrap;

        overflow:
            hidden;

        text-overflow:
            ellipsis;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-copy strong {
        grid-column:
            2;

        grid-row:
            2;

        align-self:
            center;

        min-height:
            0;

        margin:
            0;

        font-size:
            21px;

        line-height:
            1.05;

        white-space:
            normal;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-index {
        grid-column:
            1;

        grid-row:
            2;

        align-self:
            center;

        margin:
            0;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-next-paths[
        data-next-layout="cards-only-v9"
    ]
    .about-next-arrow {
        grid-column:
            3;

        grid-row:
            2;

        align-self:
            center;

        margin:
            0;
    }

}

/* END ABOUT NEXT PATHS V11 */


/* =========================================================
   ABOUT HERO FRAMING V12 CORRECT

   AZ desktop only.

   Actual production media:
   01 = about-01.jpg / main photographic plate
   02 = about-02.jpg / vertical memory frame

   Goal:
   - remove unnecessary horizontal crop from 01;
   - show substantially more of 02 so poster/name text is
     not read as an accidental cropped fragment.
   ========================================================= */

@media (min-width: 901px) {


    /* =====================================================
       FRAME 01 — MAIN PHOTO
       ===================================================== */

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-media-shot-01 {
        /*
         * Old:
         * right: 4%;
         * width: 60%;
         *
         * The source photo is 1024×683 = 1.499.
         *
         * Making the plate wider removes the horizontal
         * cover-crop and also closes the unnecessary gap
         * at the right edge of the Hero.
         */

        right:
            0;

        width:
            64%;
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-media-shot-01 img {
        object-fit:
            cover;

        /*
         * No artificial zoom.
         * Preserve the approved vertical framing.
         */

        object-position:
            center 40%;

        transform:
            none;
    }


    /* =====================================================
       FRAME 02 — VERTICAL MEMORY CARD
       ===================================================== */

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-media-shot-02 {
        /*
         * Source = 1536×2048 = 0.75.
         *
         * Old Hero frame was roughly 0.55, therefore
         * object-fit:cover removed a significant amount
         * from both horizontal sides.
         *
         * New frame is close to the source proportion,
         * revealing much more of the original image.
         */

        top:
            7%;

        right:
            1.2%;

        width:
            22%;

        height:
            78%;

        opacity:
            .91;

        transform:
            rotate(.55deg);
    }


    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-media-shot-02 img {
        width:
            100%;

        height:
            100%;

        object-fit:
            cover;

        object-position:
            center top;

        transform:
            none;
    }


    /*
     * Keep the small card clearly separated from the main
     * photographic plate after enlarging it.
     */

    .story-page[
        data-about-az-cinematic="v7"
    ]
    .about-media-shot-02 {
        box-shadow:
            0 26px 68px
            rgba(12,18,7,.34);
    }

}

/* END ABOUT HERO FRAMING V12 CORRECT */