:root {
    --easeOut: cubic-bezier(.77, 0, .175, 1);
    --easeOutBack: cubic-bezier(.175, 0, .77, 1);
    --easeOutQuint: cubic-bezier(.23, 1, .32, 1)
}

[data-delay=".1"] {
    transition-delay: .1s
}

[data-delay=".2"] {
    transition-delay: .2s
}

[data-delay=".3"] {
    transition-delay: .3s
}

[data-delay=".4"] {
    transition-delay: .4s
}

[data-delay=".5"] {
    transition-delay: .5s
}

[data-delay=".6"] {
    transition-delay: .6s
}

[data-delay=".8"] {
    transition-delay: .8s
}

[data-delay="1"] {
    transition-delay: 1s
}

[data-delay="1.2"] {
    transition-delay: 1.2s
}

[data-delay="1.4"] {
    transition-delay: 1.4s
}

[data-delay="1.6"] {
    transition-delay: 1.6s
}

[data-delay="1.8"] {
    transition-delay: 1.8s
}

[data-delay="2"] {
    transition-delay: 2s
}

html.lenis,
html.lenis body {
    height: auto
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain
}

.lenis.lenis-stopped {
    overflow: clip
}

.lenis.lenis-smooth iframe {
    pointer-events: none
}

:root {
    --easeOut: cubic-bezier(.77, 0, .175, 1);
    --easeOutBack: cubic-bezier(.175, 0, .77, 1);
    --easeOutQuint: cubic-bezier(.23, 1, .32, 1);
    --customEase: cubic-bezier(.19, 1, .22, 1);
    --panels-duration: .9s
}

.svg-logo path {
    mix-blend-mode: difference
}

[data-a=y] {
    --duration: .8s;
    --halfDuration: .55s;
    --ease: var(----customEase);
    transform: translate3d(0, 150%, 0);
    transition-property: transform;
    transition-duration: .2s;
    transition-timing-function: var(--ease)
}

.menu-w:has(input:checked) [data-a=y] {
    transform: translateZ(0);
    transition-property: transform;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease)
}

[data-menu=iconline] {
    --duration: 1.1s;
    --halfDuration: .7s;
    --ease: var(--customEase);
    transition-property: transform;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease)
}

[data-menu=iconline]:nth-child(1) {
    transform: translate3d(0, -5px, 0);
    transition-delay: 0s
}

[data-menu=iconline]:nth-child(2) {
    transform: translateZ(0);
    transition-delay: .05s
}

[data-menu=iconline]:nth-child(3) {
    transform: translate3d(0, 5px, 0);
    transition-delay: 0s
}

.menu-w:has(#mainpanel:checked) [data-menu=iconline]:nth-child(1) {
    transform: translateZ(0) rotate(-45deg) scaleX(.8);
    transition-delay: .05s
}

.menu-w:has(#mainpanel:checked) [data-menu=iconline]:nth-child(2) {
    transform: translateZ(0) scaleX(0);
    transition-delay: 0s
}

.menu-w:has(#mainpanel:checked) [data-menu=iconline]:nth-child(3) {
    transform: translateZ(0) rotate(45deg) scaleX(.8);
    transition-delay: .05s
}

[data-a=arrow] {
    transition: transform .8s var(--customEase), opacity .8s var(--customEase);
    transform: rotate(0)
}

.menu-w:has(#mainpanel:checked) [data-a=arrow] {
    opacity: 0
}

.menu-w:has(input:checked) [data-a=arrow] {
    transform: rotate(180deg)
}

.menu-w:has(.open) [data-a=arrow] {
    transform: rotate(180deg)
}

.open [data-a=y] {
    transform: translateZ(0)
}

.open [data-menu=line] {
    transform: scaleX(1) !important
}

.open [data-menu=x] {
    transform: scaleX(1) translate(0) !important
}

.open [data-menu=x] {
    transform: scaleX(1)
}

.menu-w:has(#mainpanel:not(:checked)) [data-menu=mainpanel] * {
    transition-delay: 0s !important
}

.menu-w:has(#smallpanel:not(:checked)) [data-menu=smallpanel] * {
    transition-delay: 0s !important
}

[data-hover=bggrow] {
    --duration: 1.1s;
    --halfDuration: .55s;
    --ease: var(--easeOutQuint)
}

[data-hover=bggrow]:before {
    content: " ";
    background-color: #d6d3cc;
    position: absolute;
    inset: 0;
    transform: scaleY(0);
    transform-origin: bottom;
    transition-property: all;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease)
}

@media only screen and (min-width: 767px) {
    [data-hover=bggrow]:hover:before {
        transform: scaleY(1)
    }
}

.menu-film:last-of-type {
    clip-path: url(#smallPanelClip)
}

.menu-film:first-of-type {
    clip-path: url(#smallPanelClipTop)
}

.menu-w:has(#mainpanel:checked) [data-hover=bggrow]:before {
    opacity: 0
}

.menu-w {
    counter-reset: menulinks
}

[data-counter=menuLinkText]:before {
    counter-increment: menulinks;
    content: "0" counter(menulinks);
    font-size: .8rem;
    padding-right: .6rem;
    opacity: 50%
}

.nav-w.on-dark .logo {
    color: #000;
    svg.svg-logo {
        color: #000
    }
}

.about-menu-w,
.contact-menu-w {
    display: none
}

[data-page=about] {
    .menu-row-film-w {
        display: none
    }
    .about-menu-w {
        display: flex
    }
    .small-panel,
    .footage-panel {
        display: none
    }
    .checkbox-w {
        pointer-events: none
    }
}

[data-page=contact] {
    .menu-row-film-w {
        display: none
    }
    .contact-menu-w {
        display: flex
    }
    .nav-shadow,
    .small-panel,
    .footage-panel {
        display: none
    }
    .checkbox-w {
        pointer-events: none
    }
}

[data-page=policy] {
    .menu-row-film-w {
        display: none
    }
    .mmenu-col>.abs {
        pointer-events: none
    }
    #smallpanel {
        display: none
    }
}

.menu-close-trig {
    display: none
}

.nav-w:has(input:checked) .menu-close-trig {
    display: block
}

.menu-mobile-bg {
    transition: visibility 0s, opacity .3s ease-in-out;
    opacity: 0
}

.nav-w:has(#mainpanel:checked) .menu-mobile-bg {
    transition: visibility 0s, opacity .3s ease-in-out;
    opacity: .8
}

[data-menu=mainpanel] {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows var(--panels-duration) var(--customEase)
}

[data-menu=mainpanel]>* {
    overflow: hidden
}

.menu-w:has(#mainpanel:checked) [data-menu=mainpanel] {
    grid-template-rows: 1fr
}

[data-menu=mainpanel] [data-menu=line] {
    --duration: 1.1s;
    --halfDuration: .7s;
    --ease: var(--customEase);
    transform-origin: left;
    transform: scaleX(0)
}

.menu-w:has(input:checked) [data-menu=mainpanel] [data-menu=line] {
    transform: scaleX(1);
    transition-property: transform;
    transition-duration: var(--duration);
    transition-timing-function: var(--customEase)
}

[data-menu=mainline] {
    --duration: 1.1s;
    --halfDuration: .7s;
    --ease: var(--customEase);
    transform-origin: left;
    transform: scaleX(1);
    transition-property: transform;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease)
}

.menu-w:has(#mainpanel:checked) [data-menu=mainline] {
    transform: scaleX(0)
}

[data-menu=mainy] {
    --duration: 1.1s;
    --halfDuration: .7s;
    --ease: var(--customEase);
    transform: translateY(0);
    transition-property: transform;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease)
}

.menu-w:has(#mainpanel:checked) [data-menu=mainy] {
    transform: translateY(120%)
}

@media only screen and (max-width: 767px) {
    .menu-w:has(#mainpanel: checked) [data-menu=mainy] {
        transform:translateY(0)
    }
}

[data-menu=mainyr] {
    --duration: 1.1s;
    --halfDuration: .7s;
    --ease: var(--customEase);
    transform: translateY(0);
    transition-property: transform;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease)
}

.menu-w:has(#mainpanel:checked) [data-menu=mainyr] {
    transform: translateY(-120%)
}

@media only screen and (max-width: 767px) {
    [data-menu=mainyr] {
        transition-property: opacity
    }
    .menu-w:has(#mainpanel:checked) [data-menu=mainyr] {
        transform: translateY(0);
        opacity: 0
    }
}

[data-menu=mainx] {
    --duration: 1.1s;
    --halfDuration: .7s;
    --ease: var(--customEase);
    transform: translate(0);
    transition-property: transform;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease)
}

.menu-w:has(#mainpanel:checked) [data-menu=mainx] {
    transform: translate(-200%)
}

.moving {
    --duration: .2s
}

.main-panel {
    [data-hover=mainlinkgroup] {
        [data-hover=mainlink] {
            transition: opacity .2s
        }
    }
    [data-hover=mainlinkgroup]:has([data-hover=mainlink]:hover) {
        [data-hover=mainlink] {
            opacity: 70%;
            transition: opacity .2s
        }
        [data-hover=mainlink]:hover {
            opacity: 100%;
            transition: opacity .2s
        }
    }
}

[data-menu=smallpanel] {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows var(--panels-duration) var(--customEase)
}

[data-menu=smallpanel]>* {
    overflow: hidden
}

.menu-w:has(#smallpanel:checked) [data-menu=smallpanel] {
    grid-template-rows: 1fr
}

[data-menu=smallpanel] [data-menu=line] {
    --duration: 1.1s;
    --halfDuration: .7s;
    --ease: var(--easeOutQuint);
    transform-origin: left;
    transform: scaleX(0)
}

.menu-w:has(input:checked) [data-menu=smallpanel] [data-menu=line] {
    transform: scaleX(1);
    transition-property: transform;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease);
    transition-delay: var(--delay)
}

.menu-w:has(#smallpanel:checked) [data-a=y] {
    transition-delay: var(--delay)
}

[data-menu=smallpanel] [data-menu=x] {
    --duration: 1.1s;
    --halfDuration: .7s;
    --ease: var(--easeOutQuint);
    transform: translate(-300%)
}

.menu-w:has(input:checked) [data-menu=smallpanel] [data-menu=x] {
    transform: translate(0);
    transition-property: transform;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease);
    transition-delay: var(--delay)
}

.menu-film:last-of-type {
    .line-menu {
        display: none
    }
}

.menu-film-item .menu-film-direct-link {
    transition: opacity .2s ease-out, transform .2s ease-out;
    transform: scale(.5);
    opacity: 0
}

.menu-film-item:hover .menu-film-direct-link {
    transition: opacity .2s ease-out, transform .2s ease-out;
    opacity: 1;
    transform: scale(1)
}

.menu-film-item:hover .dot {
    transform: scale(0)
}

.menu-film-direct-link:hover svg path {
    transition: fill .2s ease-out;
    fill: #fff
}

.menu-film-direct-link:hover svg path:first-of-type {
    transition: fill .4s ease-out;
    fill: #000
}

[data-roll=menuItem] .dot {
    --duration: 1.1s;
    --halfDuration: .55s;
    --ease: var(--easeOutQuint);
    transition-property: all;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease);
    transform: scale(0)
}

.current .dot {
    transform: scale(1)
}

[data-menu=footagepanel] {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows var(--panels-duration) var(--customEase)
}

[data-menu=footagepanel]>* {
    overflow: hidden
}

[data-footagemenu=w]:hover {
    transition: color .6s ease-out
}

[data-footagemenu=w]:hover [data-footagemenu=bg] {
    transition: fill .6s ease-out
}

[data-footagemenu=w]:hover {
    color: #fff;
    transition: fill .6s ease-out
}

[data-footagemenu=w]:hover [data-footagemenu=bg],
.footagemenu-cta-w:hover [data-footagemenu=bg] {
    fill: #000 !important;
    transition: fill .6s ease-out
}

[data-menu=casepanel] {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows var(--panels-duration) var(--customEase)
}

[data-menu=casepanel]>* {
    overflow: hidden
}

[data-cursor=home] {
    --duration: .3s;
    --durationLong: .5s;
    --durationShort: .15s;
    --ease: var(--easeOutQuint)
}

[data-cursor=home] .arrow-of:first-of-type>svg {
    transition-property: transform;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease);
    transform: translateY(130%)
}

[data-cursor=home] .arrow-of:last-of-type>svg {
    transition-property: transform;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease);
    transform: translateY(-130%) rotate(180deg)
}

[data-cursor=home] .circle {
    transition-property: transform;
    transition-duration: var(--durationLong);
    transition-timing-function: var(--ease);
    transform: scale(1)
}

[data-cursor=home] .text-of-w>* {
    transition-property: transform;
    transition-duration: var(--durationLong);
    transition-timing-function: var(--ease);
    transform: translateY(0)
}

.pressed[data-cursor=home] .arrow-of:first-of-type>svg {
    transform: translateY(0);
    transition-delay: .1s
}

.pressed[data-cursor=home] .arrow-of:last-of-type>svg {
    transform: translateY(0) rotate(180deg);
    transition-delay: .1s
}

.pressed[data-cursor=home] .circle {
    transform: scale(.7)
}

.pressed[data-cursor=home] .text-of-w>* {
    transform: translateY(150%);
    transition-duration: .2s
}

.prevnext[data-cursor=home] .circle {
    transform: scale(.7);
    transition-duration: .2s
}

.prevnext[data-cursor=home] .text-of-w>* {
    transform: translateY(200%)
}

.top[data-cursor=home] .arrow-of:first-of-type>svg {
    transform: translateY(0);
    transition-delay: .1s
}

.bottom[data-cursor=home] .arrow-of:last-of-type>svg {
    transform: translateY(0) rotate(180deg);
    transition-delay: .1s
}

.left[data-cursor=work] .arrow-of:first-of-type>svg {
    transform: translate(0);
    transition-delay: .1s
}

.right[data-cursor=work] .arrow-of:last-of-type>svg {
    transform: translate(0) rotate(180deg);
    transition-delay: .1s
}

.prevnext.pressed[data-cursor=home] .arrow-of:first-of-type>svg {
    transform: translateY(130%) !important
}

.prevnext.pressed[data-cursor=home] .arrow-of:last-of-type>svg {
    transform: translateY(-130%) rotate(180deg) !important
}

.prevnext.pressed[data-cursor=home] .circle {
    transform: scale(1) !important
}

.hide[data-cursor=home] {
    transition-property: opacity;
    transition-duration: var(--durationShort)
}

.hide[data-cursor=home] .arrow-of:first-of-type>svg {
    transform: translateY(130%)
}

.hide[data-cursor=home] .arrow-of:last-of-type>svg {
    transform: translateY(-130%) rotate(180deg)
}

.hide[data-cursor=home] .circle {
    transform: scale(0)
}

.hide[data-cursor=home] .text-of-w>* {
    opacity: 0
}

@media only screen and (min-width: 767px) {
    [data-btn=explore] {
        --duration: .8s;
        --durationShort: .4s;
        --ease: var(--easeOutQuint);
        transition: opacity .6s var(--ease)
    }
    [data-btn=explore] [data-after] {
        position: relative
    }
    [data-btn=explore] [data-after]:after {
        content: attr(data-after);
        position: absolute;
        inset: 150% 0 0
    }
    [data-btn=explore] [data-explore=bg] {
        transition: fill var(--duration) var(--ease);
        fill: transparent
    }
    [data-btn=explore]:hover [data-explore=bg] {
        fill: #fff
    }
    [data-btn=explore]:hover [data-explore=line] {
        stroke: #000
    }
    [data-btn=explore] [data-after] {
        transition: transform var(--duration) var(--ease) .1s;
        transform: translateY(0)
    }
    [data-btn=explore]:hover [data-after] {
        transition: transform var(--duration) var(--ease) .1s, color var(--duration) var(--ease) .1s;
        transform: translateY(-150%);
        color: #000
    }
    [data-btn=explore] [data-x] {
        transition: transform var(--duration) var(--ease);
        transform: translate(0)
    }
    [data-btn=explore]:hover [data-x] {
        transition: transform var(--duration) var(--ease), color var(--duration) var(--ease);
        transform: translate(100%);
        color: #000
    }
    [data-tuto=true]:hover [data-explore=line] {
        stroke: #fff
    }
    [data-tuto=true]:hover [data-x] {
        color: #fff
    }
    [data-tuto=true]:hover [data-after] {
        transition: transform var(--duration) var(--ease) .1s, color var(--duration) var(--ease) .1s;
        transform: translateY(-150%);
        color: #fff
    }
    [data-wf--explore-btn--variant=white] {
        color: #000
    }
    [data-wf--explore-btn--variant=white] [data-explore=bg] {
        fill: #fff;
        stroke: transparent !important
    }
}

@media only screen and (max-width: 767px) {
    [data-btn=explore] .abs svg {
        fill: #fff;
        stroke: #000
    }
    [data-wf--explore-btn--variant=white] [data-explore=line] {
        stroke: #000
    }
}

.work-toggle {
    --duration: .6s;
    --ease: var(--easeOutQuint)
}

.toggle-switch-cont .toggle-switch {
    transform: translate(0);
    transition-property: transform;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(.19, 1, .22, 1)
}

.toggle-switch-cont.toggled .toggle-switch {
    transform: translate(100%)
}

.toggle-switch-cont .switch-alt-tx>* {
    transition: transform .4s ease-out;
    transform: translateY(0)
}

.toggle-switch-cont.toggled .switch-alt-tx>* {
    transform: translateY(-100%)
}

.work-roll-c {
    .roll-cont-item {
        .linecallout-list {
            .linecallout-item:nth-child(1) div:nth-child(2) {
                transform: translate(-15%)
            }
            .linecallout-item:nth-child(1) div:nth-child(3) {
                transform: translate(-20%)
            }
            .linecallout-item:nth-child(2) div:nth-child(1) {
                transform: translate(10%)
            }
            .linecallout-item:nth-child(2) div:nth-child(2) {
                transform: translate(-5%)
            }
            .linecallout-item:nth-child(3) div:nth-child(1) {
                transform: translate(-10%)
            }
            .linecallout-item:nth-child(3) div:nth-child(1) {
                transform: translate(-5%)
            }
        }
    }
}

[data-fade-x="1"] {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%)
}

[data-fade-x="2"] {
    -webkit-mask-image: linear-gradient(to right, transparent 15%, black 30%, black 70%, transparent 85%);
    mask-image: linear-gradient(to right, transparent 15%, black 30%, black 70%, transparent 85%)
}

[data-fade-y="1"] {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%)
}

[data-page=work] {
    @media (min-width: 1024px) and (max-height: 750px) {
        .work-roll-item {
            max-width:100%;
            min-width: auto;
            width: 18vw !important
        }
        .roll-cont-he {
            font-size: 5vh !important
        }
        .roll-subh-flip-w {
            width: 10em
        }
    }
}

[data-page=home] {
    .awards-w>div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center
    }
    @media only screen and (max-width: 767px) {
        .awards-w {
            align-items: start;
            gap: .2rem
        }
        .awards-w h3 {
            font-size: 1.2rem
        }
        [data-hide=desktop] {
            [data-roll=reviews].mobile {
                display: flex;
                flex-direction: row;
                width: 100%;
                justify-content: space-between;
                div:nth-child(3) {
                    display: none
                }
            }
        }
    }
    @media (min-width: 1024px) and (max-height: 890px) {
        .awards-w>div>h3 {
            margin-bottom: 1.3rem;
            font-size: 1.2rem
        }
        .awards-w>div>figure>div>img {
            padding-bottom: .2rem
        }
    }
    @media (min-width: 1024px) and (max-height: 750px) {
        .awards-w>div>h3 {
            margin-bottom: 1.3rem;
            font-size: 2vh
        }
        .awards-w>div>figure>div>img {
            padding-bottom: .1vh;
            margin-bottom: .6vh
        }
        h2 {
            font-size: 8vh
        }
        .award_headline {
            font-size: 2vh
        }
        .award_img-wrap {
            margin-top: .5vh
        }
        .award-year {
            font-size: 3vh
        }
        .roll-content-w {
            padding: 1vh 2vh
        }
        .linecallout-item {
            height: 12px
        }
    }
}

@media (min-width: 1024px) and (max-height: 550px) {
    .awards-w>div:last-of-type {
        display: none
    }
}

[data-css=aboutdash] {
    opacity: .6;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' rx='12' ry='12' fill='none' stroke='%23FFF' stroke-width='1.8' stroke-dasharray='2%2c 6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    border-radius: 12px
}

[data-css=aboutdashwhite] {
    color: #fff;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' rx='12' ry='12' fill='none' stroke='%23FFF' stroke-width='1.8' stroke-dasharray='2%2c 6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")
}

[data-page=about] {
    @media (min-width: 1024px) and (max-height: 750px) {
        .span-clip, .span-move, .about-he {
            font-size:10vh
        }
    }
    [data-svg=resize] rect:first-child {
        stroke-dasharray: .4vh;
        stroke-width: .16vh
    }
}

@media (max-width: 1220px) {
    .about-he {
        font-size: 4vw !important
    }
    .about-he>.span-move {
        font-size: 4vw !important;
        transform: translate(0, 0, 0) !important
    }
    .about-he>.span-clip {
        font-size: 4vw !important
    }
    .about-he-sm-tx {
        font-size: 1.8vw !important
    }
}

[data-css=creditgrid2]:nth-child(-n+2) {
    display: none
}

[data-css=creditgrid3]:last-child {
    .dot-separator {
        display: none
    }
}

.review-slider-slide {
    --slider-dur: .8s
}

.review-slide-cont {
    .review-he,
    .roll-cont-eyeb {
        transition: color var(--slider-dur) var(--easeOutQuint)
    }
    .review-svg {
        transform: scale(1);
        transition: transform var(--slider-dur) var(--easeOutQuint)
    }
    .cta-hide {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows var(--slider-dur) var(--easeOutQuint)
    }
}

.review-slide-cont:hover {
    .review-he,
    .roll-cont-eyeb {
        color: red;
        transition: color var(--slider-dur) var(--easeOutQuint)
    }
    .review-svg {
        transform: scale(.95);
        transition: transform var(--slider-dur) var(--easeOutQuint)
    }
    .cta-hide {
        display: grid;
        grid-template-rows: 1fr;
        transition: grid-template-rows var(--slider-dur) var(--easeOutQuint)
    }
}

@keyframes arrow {
    0% {
        transform: translateY(0)
    }
    10% {
        transform: translateY(10px)
    }
    16% {
        transform: translateY(0)
    }
    to {
        transform: translateY(0)
    }
}

.arrow-link-w {
    .down-arrow-btn {
        animation: arrow 10s infinite
    }
}

.all-work-cta-w {
    transition: background-color .5s var(--easeOutQuint), color .5s var(--easeOutQuint)
}

.all-work-cta-w:hover {
    background-color: #000;
    color: #fff;
    .down-arrow-btn.black {
        transition: background-color .5s var(--easeOutQuint), color .5s var(--easeOutQuint);
        background-color: #fff;
        color: #000
    }
}

.previousnext-item {
    .full-img-w {
        transform: scale(1);
        transition: transform 1.2s var(--easeOutQuint)
    }
}

.previousnext-item:hover {
    .full-img-w {
        transform: scale(1.1)
    }
}

[data-marquee-active]>div {
    animation: marquee infinite linear
}

[data-marquee-active="1"]>div {
    animation-duration: 2s
}

[data-marquee-active="2"]>div {
    animation-duration: 4s
}

[data-marquee-active="3"]>div {
    animation-duration: 6s
}

[data-marquee-active="4"]>div {
    animation-duration: 8s
}

[data-marquee-active="5"]>div {
    animation-duration: 10s
}

[data-marquee-active="6"]>div {
    animation-duration: 12s
}

[data-marquee-active="7"]>div {
    animation-duration: 14s
}

[data-marquee-active="8"]>div {
    animation-duration: 16s
}

[data-marquee-active="9"]>div {
    animation-duration: 18s
}

[data-marquee-active="10"]>div {
    animation-duration: 20s
}

[data-marquee-active="11"]>div {
    animation-duration: 22s
}

[data-marquee-active="12"]>div {
    animation-duration: 24s
}

[data-marquee-active="13"]>div {
    animation-duration: 26s
}

[data-marquee-active="14"]>div {
    animation-duration: 28s
}

@keyframes marquee {
    0% {
        transform: translateY(0)
    }
    to {
        transform: translateY(-100%)
    }
}

[data-menu=casepanel].open,
[data-page=case] [data-menu=mainpanel] {
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, .1))
}

[data-page=contact] {
    @media (min-width: 1024px) and (max-height: 750px) {
        .contact-h-of, .contact-h {
            font-size:18vh
        }
    }
    @media (min-width: 1024px) and (max-height: 550px) {
        .contact-h-of,
        .contact-h {
            font-size: 10vh
        }
    }
}

[data-s=footer] {
    .ft-sitemap-lk {
        transition: opacity .3s var(--easeOutQuint);
        .down-arrow-btn {
            transform: scale(0) rotate(-90deg);
            transition: transform .3s var(--easeOutQuint)
        }
    }
    .ft-sitemap-lk:hover {
        opacity: 1;
        transition: opacity .4s var(--easeOutQuint);
        .down-arrow-btn {
            transform: scale(1) rotate(-135deg);
            transition: transform .8s var(--easeOutQuint)
        }
    }
}

@media only screen and (min-width: 767px) {
    .moon {
        .split-line-move:nth-child(1) {
            transform: translate(0)
        }
        .split-line-move:nth-child(2) {
            transform: translate(20%)
        }
        .split-line-move:nth-child(3) {
            transform: translate(0)
        }
    }
    .kafka {
        .split-line-move:nth-child(1) {
            transform: translate(0)
        }
        .split-line-move:nth-child(2) {
            transform: translate(-15%)
        }
    }
    .my,
    .ana {
        .split-line-move:nth-child(1) {
            transform: translate(0)
        }
        .split-line-move:nth-child(2) {
            transform: translate(0)
        }
    }
    .freud {
        .split-line-move:nth-child(1) {
            transform: translate(0)
        }
        .split-line-move:nth-child(2) {
            transform: translate(10%)
        }
    }
}

.split-line-move {
    line-height: .5em
}

.split-line-move>div {
    overflow: hidden;
    line-height: .8em
}

.cloneText {
    position: absolute;
    top: 115%
}

.cloneText2 {
    position: absolute;
    top: 100%
}

@media only screen and (min-width: 1800px) {
    .preloader-video {
        width: 100vw !important;
        height: auto
    }
}

[data-vid=play]>div:nth-child(1) {
    opacity: 0
}

[data-vid=play].pause>div:nth-child(1) {
    opacity: 1
}

[data-vid=play]>div:nth-child(2) {
    opacity: 1
}

[data-vid=play].pause>div:nth-child(2) {
    opacity: 0
}

* {
    box-sizing: border-box;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-overflow-style: none;
    scrollbar-width: none
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility
}

:root {
    overscroll-behavior: none;
    overflow-x: hidden
}

.open {
    grid-template-rows: 1fr
}

@media only screen and (min-width: 767px) {
    [data-hide=desktop] {
        display: none !important
    }
}

@media (min-width: 1920px) {
    .contact-h,
    .contact-h-of {
        font-size: 20vh
    }
}

@media only screen and (max-width: 767px) {
    [data-hide=mobile] {
        display: none !important
    }
    :root {
        --text-h1: 3.2rem;
        --gx: 1.5rem;
        --sgx: 1.1rem;
        --roll-gx: 1.5rem;
        --white--hole-size: .6rem
    }
    .awards-w {
        align-items: start;
        gap: .2rem
    }
    .awards-w h3 {
        font-size: 1.2rem
    }
}

/* Fix text overlapping in film info sections */
.line-callout-w.home .linecallout-list {
    gap: 1rem;
}

.line-callout-w.home .linecallout-item {
    min-width: 100px;
}

.line-callout-w .linecallout-item .paragraph {
    white-space: nowrap;
    font-size: 0.75rem;
}

.roll-cont-he.home {
    line-height: 1.1;
    margin-bottom: 1rem;
}

/* Ensure sidebar menu items don't overlap */
.menu-films-w {
    max-height: 60vh;
    overflow-y: auto;
}

.menu-film-title.menu {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}


/* ============================================
   ANAVARAN FILMS - CUSTOM FIXES
   ============================================ */

/* 1. BIGGER LOGO */
.nav-link.logo {
    width: 180px !important;
    min-width: 180px !important;
}

.svg-logo {
    width: 180px !important;
    height: auto !important;
}

/* 2. SIDEBAR THUMBNAILS - HIDDEN BY DEFAULT */


.menu-films-w.show {
    display: block !important;
    max-height: 500px;
    opacity: 1;
}

/* Sidebar thumbnail styling with better contrast */
.menu-film-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    margin-bottom: 2px;
    transition: background 0.3s;
}

.menu-film-item:hover {
    background: rgba(255, 255, 255, 0.15);
}

.menu-smalll-film-img {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* 3. FIX OVERLAPPING TEXT - SIMPLIFIED INFO SECTION */
.line-callout-w.home {
    margin-top: 1.5rem;
}

.linecallout-list.home {
    display: flex !important;
    flex-direction: row !important;
    gap: 3rem !important;
    align-items: flex-start !important;
}

.linecallout-item.home {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 80px;
    max-width: 150px;
}

.linecallout-item.home .paragraph {
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.7;
    white-space: nowrap;
}

.linecallout-item.home > div:nth-child(2),
.linecallout-item.home > div:nth-child(3) {
    font-size: 0.85rem;
    font-weight: 500;
}

/* Hide the "Director" label, just show company name */
.linecallout-item.home .text-span {
    display: none;
}

/* 4. BETTER COLOR CONTRAST FOR TILES */
.menu-row-film-item {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
}

.top-m-film-title {
    color: #fff;
    font-weight: 600;
}

.info-grid-tx {
    color: rgba(255, 255, 255, 0.9);
}

/* 5. RESPONSIVE FIXES */
@media (max-width: 768px) {
    .nav-link.logo {
        width: 140px !important;
        min-width: 140px !important;
    }
    
    .svg-logo {
        width: 140px !important;
    }
    
    .linecallout-list.home {
        flex-wrap: wrap;
        gap: 1.5rem !important;
    }
    
    .linecallout-item.home {
        min-width: 60px;
    }
}


/* Work page thumbnail visibility fix */
.work-roll-item .roll-img-w,
.work-roll-c {
    position: relative;
}

.work-roll-item .roll-img-w::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
    z-index: 1;
}

.work-roll-item .image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ensure images load properly */
.work-roll-item img,
.home-roll-item img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* Font consistency across all pages */
.contact-h,
.contact-h-of,
h1, h2, h3,
.roll-cont-he,
.top-m-film-title,
.menu-link-list-text {
    font-family: 'Playfair Display', 'Didot', 'Bodoni MT', Georgia, serif !important;
}

/* Ensure "ANAVARAN FILMS" title uses consistent font */
.about-menu-tx,
.copyright-menu-text,
.ft-contact-li-he {
    font-family: 'Playfair Display', 'Didot', 'Bodoni MT', Georgia, serif !important;
}


/* Improved sidebar toggle */
.menu-films-w {
    display: block !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.3s ease;
}

.menu-films-w.show {
    max-height: 600px;
    opacity: 1;
}

/* Arrow rotation indicator */
[data-a="arrow"] svg,
.menu-arrow-w svg {
    transition: transform 0.3s ease;
}

[data-a="arrow"].rotated svg,
.menu-arrow-w.rotated svg {
    transform: rotate(180deg);
}


/* ============================================
   FINAL FIXES - Anavaran Films
   ============================================ */

/* 1. FIX CHOPPED VIDEO TITLES */
.roll-cont-he,
.roll-cont-he.home,
.roll-cont-he.work {
    font-size: clamp(2rem, 5vw, 4rem) !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.top-m-film-title {
    font-size: 0.9rem !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    max-width: 180px !important;
}

/* Sidebar title fix */
.menu-film-title.menu {
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 120px !important;
}

/* 2. SIDEBAR VIDEO LIST - Proper toggle */
.menu-films-w {
    display: block !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: max-height 0.4s ease, opacity 0.3s ease !important;
    padding: 0 !important;
}

.menu-films-w.visible {
    max-height: 800px !important;
    opacity: 1 !important;
    padding: 10px 0 !important;
}

/* Arrow rotation */
.menu-arrow-w,
[data-a="arrow"] {
    cursor: pointer !important;
    transition: transform 0.3s ease !important;
}

.menu-arrow-w.rotated,
[data-a="arrow"].rotated {
    transform: rotate(180deg) !important;
}

/* 3. CONTACT PAGE FIXES */
.contact-h {
    font-size: clamp(2.5rem, 8vw, 6rem) !important;
    line-height: 1.0 !important;
}

.contact-lab {
    font-size: clamp(0.9rem, 2vw, 1.2rem) !important;
    word-break: break-all !important;
}

@media (max-width: 768px) {
    .contact-h {
        font-size: 2.5rem !important;
    }
    .contact-lab {
        font-size: 0.85rem !important;
    }
}

/* 5. WORK PAGE THUMBNAILS */
.work-roll-item .image,
.work-roll-c .image,
[data-slider="item"] .image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.work-roll-item,
[data-slider="item"] {
    min-height: 300px;
    position: relative;
}

/* 6. HIDE LINKEDIN ICONS */
a[href*="linkedin"] {
    display: none !important;
}

/* 7. WORK PAGE IMAGE FIX */
.roll-img-w.work {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    overflow: hidden !important;
}

.roll-img-w.work .image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.work-roll-c {
    position: relative !important;
    min-height: 300px !important;
}

.roll-cont-item.work {
    position: relative !important;
    z-index: 2 !important;
}

/* ============================================
   MOBILE TOUCH/SCROLL FIX - Priority Styles
   ============================================ */
@media (pointer: coarse) {
    .home-roll-w,
    [data-roll="container"] {
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain;
    }
    
    body.is-mobile .home-roll-w {
        cursor: default !important;
    }
    
    /* Better tap targets */
    .explore-btn-w,
    .menu-link,
    .menu-film-item,
    [data-booking-modal] {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Touch active state */
    .touch-active {
        background: rgba(212, 175, 55, 0.15) !important;
    }
}

/* ============================================
   INDIAN WEDDING BRANDING - Gold Accents
   ============================================ */
:root {
    --gold-primary: #D4AF37;
    --gold-light: #F4E4BC;
    --gold-dark: #B8860B;
    --deep-burgundy: #722F37;
    --cream: #FDF5E6;
}

.roll-cont-eyeb,
.footage-menu-eyeb {
    color: var(--gold-primary) !important;
    letter-spacing: 0.15em;
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */
.home-roll-item,
.roll-img-w,
[data-roll="img"],
.menu-w {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.image {
    contain: layout style paint;
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--gold-primary) !important;
    outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}