:root {
    --cl-dm-bg: #0c0d10;
    --cl-dm-title: #fff;
    --cl-dm-subtitle: rgba(255, 255, 255, .7);
    --cl-dm-body: rgba(255, 255, 255, .5);
    --cl-dm-desc: rgba(255, 255, 255, .3);
    --cl-dm-disable: rgba(255, 255, 255, .15);
    --cl-dm-border: rgba(255, 255, 255, .1);
    --cl-lm-bg: #fffbf9;
    --cl-lm-txt: #1d1d1d;
    --cl-lm-desc: rgba(29, 29, 29, .5);
    --cl-lm-disable: rgba(29, 29, 29, .3);
    --cl-lm-border: #c4c4c4;
    --cl-orange: #ff3d00;
    --cl-white: #fff
}

.cl-txt-orange {
    color: var(--cl-orange) !important
}

.cl-txt-title {
    color: var(--cl-dm-title)
}

.cl-txt-sub {
    color: var(--cl-dm-subtitle)
}

.cl-txt-sub-solid {
    color: #b6b6b7
}

.cl-txt-desc {
    color: var(--cl-dm-desc)
}

.cl-txt-desc-solid {
    color: #555658
}

.cl-txt-disable {
    color: var(--cl-dm-disable)
}

.cl-txt-disable-solid {
    color: #303134
}

*,
*:after,
*:before {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .6s
}

:root {
    --spring-easing-1: linear( 0, .002, .009 1%, .035, .078, .141 4.4%, .281 6.7%, .723 12.9%, .842, .938, 1.017, 1.077 20.4%, 1.101, 1.121, 1.137, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154, 1.143, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 1.002, .991, .982 48.9%, .977 51%, .974 53.8%, .975 57.1%, .979 60%, .997 69.8%, 1.001, 1.003 76.9%, 1.004 83.8%, 1);
    --spring-easing-2: linear( 0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938, 1.077 20.4%, 1.121, 1.149 24.3%, 1.163 27%, 1.154 29.9%, 1.017 43.1%, .991, .977 51%, .975 57.1%, 1.003 76.9%, 1);
    --spring-easing-3: linear(0, .938 16.7%, 1.149 24.3%, 1.154 29.9%, .977 51%, 1)
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-rendering: optimizeSpeed;
    text-rendering: optimizeSpeed;
    font-kerning: none;
    background-color: var(--cl-dm-bg);
    -ms-overflow-style: none;
    scrollbar-width: none
}

html.lenis {
    height: auto
}

html::-webkit-scrollbar {
    display: none
}

.pages {
    position: relative;
    z-index: 3;
    display: grid;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background-color: var(--cl-dm-bg)
}

.page {
    min-width: 0;
    position: relative;
    grid-row: 1;
    grid-column: 1;
    background-color: var(--cl-dm-bg);
    z-index: 2
}

.page+.page {
    z-index: 1
}

@media screen and (max-width: 767px) {
    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden
    }
    body {
        overscroll-behavior-y: none;
        overscroll-behavior-x: none;
        position: fixed
    }
}

body {
    position: relative;
    font-size: var(--fs-16);
    line-height: var(--lh-16)
}

.main {
    opacity: 1
}

.main.on-load {
    opacity: 0
}

@media screen and (max-width: 991px) {
    .wrapper {
        width: 100%;
        height: 100%
    }
}

@media screen and (max-width: 767px) {
    .wrapper {
        overscroll-behavior: none;
        position: absolute;
        top: 0;
        left: 0;
        overflow-y: scroll;
        overflow-x: hidden
    }
}

.lenis.lenis-smooth {
    scroll-behavior: auto
}

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

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

.main {
    position: relative
}

.grid {
    --grid-gap: 2rem;
    --grid-column: 16;
    display: grid;
    column-gap: var(--grid-gap);
    grid-template-columns: repeat(var(--grid-column), 1fr)
}

@media screen and (max-width: 991px) {
    .grid {
        --grid-column: 12
    }
}

@media screen and (max-width: 767px) {
    .grid {
        --grid-column: 4;
        --grid-gap: 1.6rem
    }
}

:root {
    --container-width: 1728px;
    --container-padding: 6rem
}

@media screen and (max-width: 991px) {
    :root {
        --container-padding: 4rem
    }
}

@media screen and (max-width: 767px) {
    :root {
        --container-padding: 2rem
    }
}

@media screen and (max-width: 476px) {
    :root {
        --container-padding: 1.6rem
    }
}

.container {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--container-padding)
}

.container.fluid {
    max-width: none
}

.container.calc-h {
    height: 100%
}

a {
    text-decoration: none;
    color: inherit;
    display: inline-block
}

.inline-block {
    display: inline-block
}

.inline-flex {
    display: inline-flex
}

.unset-margin div {
    will-change: transform
}

button,
input,
textarea {
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    border: none;
    font-family: inherit
}

button {
    cursor: pointer
}

button * {
    pointer-events: none
}

ul,
li {
    list-style: none
}

img,
.img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    content-visibility: auto
}

img.img-h,
.img.img-h {
    height: 100%;
    width: auto
}

img.img-fill,
.img.img-fill {
    height: 100%;
    object-fit: cover
}

img.img-fit,
.img.img-fit {
    height: 100%;
    object-fit: contain
}

button {
    appearance: none;
    background-color: transparent;
    color: inherit;
    outline: none;
    border: none
}

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 2.4rem;
    position: relative;
    overflow: hidden;
    z-index: 1;
    color: var(--cl-orange);
    background-color: unset;
    border: 1px solid var(--cl-dm-border)
}

.btn.fill {
    background-color: var(--cl-orange)
}

.btn[data-cursor-txtlink] .txt {
    transition: transform .4s ease
}

.btn[data-cursor-txtlink]:hover .txt {
    transform: translate(.6rem)
}

.btn:before,
.btn:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 100%;
    top: 0;
    left: -100%;
    z-index: -1;
    transition: transform .3s cubic-bezier(.75, 0, .125, 1);
    -webkit-transition: transform .3s cubic-bezier(.75, 0, .125, 1);
    -moz-transition: transform .3s cubic-bezier(.75, 0, .125, 1);
    -ms-transition: transform .3s cubic-bezier(.75, 0, .125, 1);
    -o-transition: transform .3s cubic-bezier(.75, 0, .125, 1)
}

.btn:before {
    background-color: var(--cl-orange)
}

.btn:after {
    background-color: var(--cl-dm-dark)
}

@media (hover: hover) {
    .btn:hover:before,
    .btn:hover:after {
        transform: translate3d(100%, 0, 0);
        -webkit-transform: translate3d(100%, 0, 0);
        -moz-transform: translate3d(100%, 0, 0);
        -ms-transform: translate3d(100%, 0, 0);
        -o-transform: translate3d(100%, 0, 0)
    }
    .btn:hover:after {
        transition-duration: .38s;
        transition-delay: .08s;
        -webkit-transition-delay: .08s;
        -moz-transition-delay: .08s;
        -ms-transition-delay: .08s;
        -o-transition-delay: .08s
    }
}

.btn-circle {
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff3d0003;
    backdrop-filter: blur(1rem);
    border: none;
    border-radius: 50%;
    transition: background .4s ease-in-out
}

.btn-circle:before,
.btn-circle:after {
    display: none
}

.btn-circle-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    align-self: auto;
    flex: 0 0 auto
}

.btn-outline {
    position: relative;
    overflow: hidden;
    transition: all .4s ease-in-out
}

.btn-outline:before,
.btn-outline:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 100%;
    top: 0;
    left: -100%;
    z-index: -1;
    transition: transform .4s cubic-bezier(.75, 0, .125, 1);
    -webkit-transition: transform .4s cubic-bezier(.75, 0, .125, 1);
    -moz-transition: transform .4s cubic-bezier(.75, 0, .125, 1);
    -ms-transition: transform .4s cubic-bezier(.75, 0, .125, 1);
    -o-transition: transform .4s cubic-bezier(.75, 0, .125, 1)
}

.btn-outline:before {
    background-color: var(--cl-orange-dark)
}

.btn-outline:after {
    background-color: var(--cl-orange)
}

.btn-outline-ic {
    height: 7.2rem;
    margin: -.1rem 0
}

@media screen and (hover: hover) and (min-width: 992px) {
    .btn-outline:hover {
        color: var(--cl-white);
        border-color: var(--cl-orange)
    }
    .btn-outline:hover:before,
    .btn-outline:hover:after {
        transform: translate3d(100%, 0, 0);
        -webkit-transform: translate3d(100%, 0, 0);
        -moz-transform: translate3d(100%, 0, 0);
        -ms-transform: translate3d(100%, 0, 0);
        -o-transform: translate3d(100%, 0, 0)
    }
    .btn-outline:hover:after {
        transition-duration: .38s;
        transition-delay: .08s;
        -webkit-transition-delay: .08s;
        -moz-transition-delay: .08s;
        -ms-transition-delay: .08s;
        -o-transition-delay: .08s
    }
    .btn-outline:hover .btn-outline-ic {
        border-color: var(--cl-dm-bg)
    }
}

.line {
    will-change: transform;
    width: 100%;
    height: 1px;
    background-color: var(--cl-dm-border)
}

.line-ver {
    width: 1px;
    height: 100%
}

@media screen and (max-width: 767px) {
    .hide-mb {
        display: none !important
    }
}

@media screen and (min-width: 768px) {
    .hide-dk {
        display: none !important
    }
}

.divScript {
    position: absolute;
    inset: 0;
    pointer-events: none
}

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

.marquee {
    display: flex;
    width: 100vw
}

.marquee-inner {
    display: flex
}

.marquee-inner-item {
    width: max-content;
    display: flex;
    flex: none
}

.hidden {
    display: none
}

.fix-font {
    margin-left: -1rem
}

@media screen and (max-width: 767px) {
    .fix-font {
        margin-left: -.4rem
    }
}

.grid-1-1 {
    display: grid
}

.grid-1-1>* {
    grid-area: 1/1/2/2
}

.swiper {
    width: 100%
}

.richtext-global>*:first-child {
    margin-top: 0
}

.richtext-global>*:last-child {
    margin-bottom: 0
}

.richtext-global p:last-child {
    margin-bottom: 0
}

.hover-multiple {
    display: inline;
    background-image: linear-gradient(transparent calc(100% - .3rem), var(--cl-orange) .3rem);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size .6s cubic-bezier(.66, 0, .15, 1)
}

.hover-multiple:hover {
    background-size: 100% 100%
}

.ev-none {
    pointer-events: none
}

.mf-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 250;
    direction: ltr;
    contain: layout style size;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: unset !important;
    transition: opacity .3s, color .4s
}

.mf-cursor:before {
    content: "";
    position: absolute;
    top: -3rem;
    left: -3rem;
    display: block;
    width: 6rem;
    height: 6rem;
    transform: scale(.2);
    background: var(--cl-orange);
    border-radius: 50%;
    transition: transform .25s ease-in-out, opacity .1s, background-color .25s ease-in-out
}

.mf-cursor-inner {
    display: flex;
    justify-content: center;
    align-items: center
}

.mf-cursor.-inverse {
    color: invert(var(--cl-orange))
}

@supports (mix-blend-mode: exclusion) {
    .mf-cursor.-exclusion {
        mix-blend-mode: exclusion
    }
    .mf-cursor.-exclusion:before {
        background: invert(var(--cl-orange))
    }
}

.mf-cursor.-pointer:before {
    transform: scale(.15)
}

.mf-cursor.-text:before {
    opacity: .85;
    transform: scale(1.4)
}

.mf-cursor.-text.-active:before {
    transform: scale(1.2);
    transition-duration: .2s
}

.mf-cursor.-stroke:before {
    backdrop-filter: blur(1rem);
    background-color: #002fff03;
    border: 1px solid var(--cl-dm-border)
}

.mf-cursor.-stroke .mf-cursor-text {
    color: var(--cl-orange)
}

.mf-cursor.-mag:before {
    transform: scale(1.6);
    background-color: #002aff0d
}

.mf-cursor.-mag-small:before {
    transform: scale(1.2);
    background-color: #0040ff00;
    border: 1px solid var(--cl-dm-border)
}

.mf-cursor.-social:before {
    transform: scale(1.09);
    background-color: #001eff03;
    border: 1px solid rgba(0, 60, 255, 0.3)
}

.mf-cursor.-close:before {
    border-radius: .2rem;
    transform: scale(.9);
    background-color: #ff3d0000;
    border: 1px solid var(--cl-dm-border)
}

.mf-cursor.-nav:before {
    backdrop-filter: blur(.2rem);
    background-color: #ff3d0003;
    border: 1px solid rgba(255, 255, 255, .3)
}

.mf-cursor.-nav.-media:before {
    transform: scale(1.1)
}

.mf-cursor.-link:before {
    transform: scale(.12)
}

.mf-cursor.-link-med:before {
    transform: scale(.18)
}

.mf-cursor.-icon:before {
    transform: scale(1.7)
}

.mf-cursor.-icon.-active:before {
    transform: scale(1.6)
}

.mf-cursor.-hidden:before {
    opacity: 0;
    transform: scale(0)
}

.mf-cursor-text {
    position: absolute;
    top: -1.8rem;
    left: -1.8rem;
    width: 3.6rem;
    height: 3.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0) rotate(10deg);
    opacity: 0;
    color: var(--cl-dm-title);
    border-radius: 50%;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    transition: opacity .4s, transform .3s
}

.mf-cursor.-text .mf-cursor-text,
.mf-cursor.-icon .mf-cursor-text,
.mf-cursor.-media .mf-cursor {
    opacity: 1;
    transform: scale(1)
}

.mf-cursor.-media:before {
    transform: scale(1.2)
}

.mf-cursor-media {
    position: absolute;
    width: 3rem;
    height: 3rem
}

.mf-cursor-media img,
.mf-cursor-media video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%
}

@supports (object-fit: cover) {
    .mf-cursor-media img,
    .mf-cursor-media video {
        position: static;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: translateZ(0)
    }
}

.mf-cursor-media-box {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: scale(0) translateZ(0);
    padding: .1rem;
    opacity: 0;
    border-radius: 50%;
    transition: transform .35s, opacity .2s .2s
}

.mf-cursor.-media .mf-cursor-media-box {
    opacity: 1;
    transform: scale(.696);
    transition-duration: .4s, .4s;
    transition-delay: 0s, 0s
}

[data-border-glow] {
    position: relative
}

[data-border-glow] .glow-el {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--glow);
    height: var(--glow);
    background-image: url(../images/glow-1.png);
    background-size: cover
}

@media screen and (max-width: 991px) {
    [data-border-glow] .glow-el {
        bottom: 0;
        top: auto;
        transform: translate(-50%, 15%)
    }
}

[data-border-glow] .glow-big {
    background-image: url(../images/glow-2.png)
}

[data-border-glow] .glow-nor {
    background-image: url(../images/glow-4.png)
}

[data-border-glow] .border-outer {
    --border-width: 1px;
    --glow: 10rem;
    --bg-cl: rgba(255, 255, 255, 1);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    inset: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    pointer-events: none;
    opacity: 1;
    overflow: hidden
}

[data-border-glow] .border-inner {
    border-radius: 100vmax;
    width: 0px;
    height: 0px
}

[data-border-glow] .glow-outer,
[data-border-glow] .glow-inner {
    z-index: -1;
    pointer-events: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    border-radius: var(--border-radius);
    width: 100%;
    height: 100%;
    opacity: var(--opacity)
}

[data-border-glow] .glow-outer-inner,
[data-border-glow] .glow-inner-inner {
    border-radius: 100vmax;
    width: 0px;
    height: 0px
}

[data-border-glow] .glow-outer-inner .glow-el,
[data-border-glow] .glow-inner-inner .glow-el {
    width: calc(var(--glow) / 1.5);
    height: calc(var(--glow) / 1.5);
    opacity: .2;
    display: flex
}

[data-border-glow] .glow-inner {
    z-index: 20;
    mix-blend-mode: soft-light;
    overflow: hidden
}

[data-border-glow] .glow-inner-inner .glow-el {
    width: calc(var(--glow) / 1.2);
    height: calc(var(--glow) / 1.2);
    opacity: .3
}

#sticker {
    position: relative;
    width: 0;
    height: 0;
    top: .65em;
    left: -1rem
}

@font-face {
    font-family: Helvetica Neue;
    src: url(../fonts/HelveticaNeue-Light.woff2) format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: block
}

@font-face {
    font-family: Helvetica Neue;
    src: url(../fonts/HelveticaNeue-Roman.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block
}

@font-face {
    font-family: Helvetica Neue;
    src: url(../fonts/HelveticaNeue-Medium.woff2) format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: block
}

@font-face {
    font-family: Matter;
    src: url(../fonts/MatterRegular.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block
}

@font-face {
    font-family: Matter;
    src: url(../fonts/MatterMedium.woff2) format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: block
}

@font-face {
    font-family: Matter;
    src: url(../fonts/MatterSemiBold.woff2) format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: block
}

@font-face {
    font-family: Matter;
    src: url(../fonts/MatterBold.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: block
}

html {
    font-size: .5787037037vw;
    --vw: 100%;
    --vh: 100vh
}

@media screen and (min-aspect-ratio: 16/8.5) and (min-width: 991px) {
    html {
        font-size: 1.01vh
    }
}

@media screen and (max-width: 991px) {
    html {
        font-size: 1.0090817356vw
    }
}

@media screen and (max-width: 767px) {
    html {
        font-size: 1.8vw
    }
}

@media screen and (max-width: 476px) {
    html {
        font-size: 2.667vw
    }
}

html {
    font-family: Helvetica Neue, sans-serif;
    font-weight: 400;
    color: var(--cl-dm-body)
}

:root {
    --fs-dis1: 9.2rem;
    --lh-dis1: 1em;
    --fs-dis2: 8rem;
    --lh-dis2: 1em;
    --fs-h1: 18rem;
    --lh-h1: 1em;
    --fs-h2: 16rem;
    --lh-h2: 1em;
    --fs-h3: 8rem;
    --lh-h3: 1.2em;
    --fs-h4: 4.4rem;
    --lh-h4: 1.2em;
    --fs-h5: 3.2rem;
    --lh-h5: 1.1em;
    --fs-h6: 2.8rem;
    --lh-h6: 1.3em
}

@media screen and (max-width: 991px) {
    :root {
        --fs-h1: 6.4rem;
        --lh-h1: 1em;
        --fs-h2: 5.6rem;
        --lh-h2: 1em;
        --fs-h3: 3.6rem;
        --lh-h3: 1.2em;
        --fs-h4: 2.4rem;
        --lh-h4: 1.2em;
        --fs-h5: 2rem;
        --lh-h5: 1.2em;
        --fs-h6: 1.8rem;
        --lh-h6: 1.4em
    }
}

.heading {
    font-family: Matter, sans-serif;
    font-weight: 400
}

.ver-align-top {
    vertical-align: top
}

h0,
.h0 {
    font-size: var(--fs-h0);
    line-height: var(--lh-h0)
}

h1,
.h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1)
}

h2,
.h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2)
}

h3,
.h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3)
}

h4,
.h4 {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4)
}

h5,
.h5 {
    font-size: var(--fs-h5);
    line-height: var(--lh-h5)
}

h6,
.h6 {
    font-size: var(--fs-h6);
    line-height: var(--lh-h6)
}

.display-1 {
    font-size: var(--fs-dis1);
    line-height: var(--lh-dis1)
}

.display-2 {
    font-size: var(--fs-dis2);
    line-height: var(--lh-dis2)
}

:root {
    --fs-10: 1rem;
    --lh-10: 1.2em;
    --fs-12: 1.2rem;
    --lh-12: 1.4em;
    --fs-14: 1.4rem;
    --lh-14: 1.2em;
    --fs-16: 1.6rem;
    --lh-16: 1.4em;
    --fs-18: 1.8rem;
    --lh-18: 1.3em;
    --fs-20: 2rem;
    --lh-20: 1.3em;
    --fs-24: 2.4rem;
    --lh-24: 1.3em;
    --fs-36: 3.6rem;
    --lh-36: 1.1em;
    --fs-180: 18rem;
    --lh-180: 1em
}

@media screen and (max-width: 991px) {
    :root {
        --fs-180: 9rem;
        --lh-180: 1em
    }
}

.fs-10 {
    font-size: var(--fs-10);
    line-height: var(--lh-10)
}

.fs-12 {
    font-size: var(--fs-12);
    line-height: var(--lh-12)
}

.fs-14 {
    font-size: var(--fs-14);
    line-height: var(--lh-14)
}

.fs-16 {
    font-size: var(--fs-16);
    line-height: var(--lh-16)
}

.fs-18 {
    font-size: var(--fs-18);
    line-height: var(--lh-18)
}

.fs-20 {
    font-size: var(--fs-20);
    line-height: var(--lh-20)
}

.fs-24 {
    font-size: var(--fs-24);
    line-height: var(--lh-24)
}

.fs-36 {
    font-size: var(--fs-36);
    line-height: var(--lh-36)
}

.fs-180 {
    font-size: var(--fs-180);
    line-height: var(--lh-180)
}

.fw-thin {
    font-weight: 300
}

.fw-reg {
    font-weight: 400
}

.fw-med {
    font-weight: 500
}

.fw-semi {
    font-weight: 600
}

.fw-bold {
    font-weight: 700
}

.txt-link {
    --line-spacing: 1rem;
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: fit-content
}

.txt-link:before,
.txt-link:after {
    content: "";
    position: absolute;
    display: block;
    bottom: .2em;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transition: transform .5s cubic-bezier(.59, .23, .22, .96)
}

.txt-link:before {
    left: 0
}

.txt-link:after {
    left: calc(-1 * var(--line-spacing));
    transform: translate(-100%)
}

.txt-link:hover:before {
    transform: translate(calc(100% + var(--line-spacing)))
}

.txt-link:hover:after {
    transform: translate(var(--line-spacing))
}

.txt-link.hover-un:after {
    display: none
}

.txt-link.hover-un:before {
    transform-origin: right;
    transform: scaleX(0);
    transition: .6s transform cubic-bezier(.66, 0, .15, 1)
}

.txt-link.hover-un:hover:before {
    transform-origin: left;
    transform: scaleX(1)
}

.txt-link-child .dot {
    transition: background-color .4s ease
}

.txt-link-child .txt {
    display: inline-block;
    vertical-align: bottom;
    transition: color .4s ease;
    position: relative
}

.txt-link-child .txt:after {
    pointer-events: none;
    content: "";
    position: absolute;
    display: block;
    bottom: -.14em;
    width: 100%;
    height: .2rem;
    background-color: currentColor;
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform-origin: right;
    transition: transform .5s ease;
    -webkit-transition: transform .5s ease;
    -moz-transition: transform .5s ease;
    -ms-transition: transform .5s ease;
    -o-transition: transform .5s ease
}

.txt-link-child:hover .dot {
    background-color: var(--cl-orange)
}

.txt-link-child:hover .txt {
    color: var(--cl-orange)
}

.txt-link-child:hover .txt:after {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform-origin: left
}

.txt-bg-link {
    transition: background-color .4s ease
}

.txt-bg-link:hover {
    background-color: var(--cl-orange)
}

.upper {
    text-transform: uppercase
}

.upper .heading.h1,
.upper .heading.h2,
.upper.heading.h1,
.upper.heading.h2 {
    vertical-align: middle;
    line-height: .72em
}

.ic {
    display: flex;
    align-items: center;
    justify-content: center
}

.ic-14 {
    width: 1.4rem;
    height: 1.4rem
}

.ic-16 {
    width: 1.6rem;
    height: 1.6rem
}

.ic-20 {
    width: 2rem;
    height: 2rem
}

.ic-24 {
    width: 2.4rem;
    height: 2.4rem
}

.ic-32 {
    width: 3.2rem;
    height: 3.2rem
}

.ic-36 {
    width: 3.6rem;
    height: 3.6rem
}

.ic-40 {
    width: 4rem;
    height: 4rem
}

@media screen and (max-width: 991px) {
    .ic-40 {
        width: 2.4rem;
        height: 2.4rem
    }
}

.ic-48 {
    width: 4.8rem;
    height: 4.8rem
}

.ic-52 {
    width: 5.2rem;
    height: 5.2rem
}

.ic-60 {
    width: 6rem;
    height: 6rem
}

.ic-80 {
    width: 8rem;
    height: 8rem
}

.ic-100 {
    width: 10rem;
    height: 10rem
}

.ic-120 {
    width: 12rem;
    height: 12rem
}

.ic-150 {
    width: 15rem;
    height: 15rem
}

.split-line {
    contain: paint;
    margin-block: -.1em
}

.split-line.unset-margin {
    margin-block: 0
}

.trans-line {
    position: relative;
    display: grid;
    clip-path: polygon(0 3%, 0 99%, 100% 99%, 100% 3%)
}

.trans-line-above,
.trans-line-under {
    grid-area: 1/1/2/2;
    display: inline-block
}

.trans-line-above {
    transform: translateY(-100%)
}

html .transition-fade {
    transition: opacity .8s ease;
    transition-delay: 0s
}

html.is-changing .transition-fade {
    opacity: 0
}

html.is-animating.from-route-projects.to-route-project .transition-fade {
    opacity: 0;
    transition: .8s
}

@media screen and (max-width: 991px) {
    html.is-animating.from-route-projects.to-route-project .transition-fade {
        transition: 1.1s
    }
}

@media screen and (max-width: 767px) {
    html.is-animating.from-route-projects.to-route-project .transition-fade {
        transition: .4s
    }
}

html.is-animating.from-route-projects.to-route-project .project__info,
html.is-animating.from-route-projects.to-route-project .project__name-txt.active {
    opacity: 0
}

@media screen and (max-width: 767px) {
    html.is-animating.from-route-projects.to-route-project .project__name-txt.active {
        opacity: 1
    }
}

@media screen and (max-width: 767px) {
    html.is-animating.from-route-projects.to-route-project .project__name-txt {
        transform: translateY(100%);
        transition: .8s ease-in-out .2s
    }
}

html.is-animating.from-route-projects.to-route-project .project__scrollDown {
    opacity: 0
}

@media screen and (max-width: 991px) {
    html.is-animating.from-route-projects.to-route-project .project__thumbnail-wrap {
        opacity: 0
    }
}

html.is-animating.from-route-projects.to-route-project .project__desc-txt.active .word {
    transform: translateY(100%) !important;
    transition: .4s ease-in-out
}

@media screen and (max-width: 991px) {
    html.is-animating.from-route-projects.to-route-project .project__link .txt-link,
    html.is-animating.from-route-projects.to-route-project .project__link .ic-arr-wrap {
        transform: translateY(100%);
        transition: .4s ease-in-out
    }
}

html.is-animating.from-route-projects.to-route-project .project__pagination-wrap .line {
    transform: translateY(100%);
    transition: .4s ease-in-out
}

html.is-animating.from-route-projects.to-route-project .project__pagination-number>* {
    transform: translateY(100%);
    transition: .4s ease-in-out
}

html.is-animating.from-route-projects.to-route-project .project-item-label {
    opacity: 0
}

@media screen and (max-width: 991px) {
    html.is-animating.from-route-projects.to-route-project .project__role-listing.active .word,
    html.is-animating.from-route-projects.to-route-project .project__services-listing.active .word,
    html.is-animating.from-route-projects.to-route-project .project__selling-listing.active .word {
        transform: translateY(100%) !important;
        transition: .4s ease-in-out
    }
}

html.is-animating.from-route-projects.to-route-project .project_link {
    overflow: hidden
}

html.is-animating.from-route-projects.to-route-project .project__year {
    opacity: 0
}

html.is-changing.from-route-projects.to-route-project .transition-fade {
    opacity: unset
}

@media screen and (min-width: 992px) {
    html.is-changing.from-route-projects.to-route-project .transition-fade {
        opacity: 1
    }
}

@media screen and (max-width: 767px) {
    html.is-changing.from-route-projects.to-route-project .transition-fade {
        opacity: 0
    }
}

html.is-animating.from-route-project.to-route-projects .transition-fade {
    opacity: 0;
    transition: .4s
}

@media screen and (max-width: 991px) {
    html.is-animating.from-route-project.to-route-projects .transition-fade {
        transition: .4s
    }
}

html.is-animating.from-route-project.to-route-project .transition-fade {
    transition: .6s;
    opacity: 0
}

@media screen and (max-width: 991px) {
    html.is-animating.from-route-project.to-route-project .transition-fade {
        transition: .4s
    }
}

@keyframes noise-effect-1 {
    0% {
        background-position: 0 0
    }
    10% {
        background-position: -5% -10%
    }
    20% {
        background-position: -10% -5%
    }
    30% {
        background-position: 5% 10%
    }
    40% {
        background-position: 10% 5%
    }
    50% {
        background-position: -15% -25%
    }
    60% {
        background-position: -25% -15%
    }
    70% {
        background-position: 15% 25%
    }
    80% {
        background-position: 25% 15%
    }
    90% {
        background-position: 30% 45%
    }
    to {
        background-position: -30% -45%
    }
}

@keyframes noise-effect-2 {
    to {
        background-position: 50% 0, 60% 50%
    }
}

/* .noise {
    position: fixed;
    overflow: hidden;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    opacity: .08;
    mix-blend-mode: color-burn
}

.noise:after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../images/adjusted_grain_image.png);
    background-size: auto;
    animation: noise-effect-1 1s infinite alternate;
    pointer-events: none
} */