.app {
    height: 100%;
    overflow: clip;
    position: relative;
    width: 100vw
}

*,*::after,*::before {
    box-sizing: border-box
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    border: 0;
    font: inherit;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
    left: 0;
    position: fixed;
    text-rendering: optimizelegibility;
    top: 0;
    width: 100%
}

body {
    height: 100%;
    left: 0;
    line-height: 1;
    position: fixed;
    top: 0;
    width: 100%
}

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

button,input,textarea {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    padding: 0
}

button {
    cursor: pointer
}

ol,ul {
    list-style: none
}

blockquote,q {
    quotes: none
}

blockquote::before,blockquote::after,q::before,q::after {
    content: "";
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
    overflow: clip
}

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

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

.lenis.lenis-autoToggle {
    transition-behavior: allow-discrete;
    transition-duration: 1ms;
    transition-property: overflow
}

:root {
    --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
    --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
    --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
    --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
    --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
    --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
    --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
    --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
    --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
    --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.work__header__gallery__media__image,.work__header__gallery__media__wrapper,.studio__skills__cursor,.studio__media__media__image,.studio__media__media,.studio__highlight__media__image,.studio__highlight__media,.studio__header__media__image,.studio__header__media,.studio__awards__header__media__image,.studio__awards__header__media,.studio__awards__header:before,.project__next__media__image,.project__next__progress__dash,.project__next__link,.project__header__media__image,.project__header__media,.project__content__gallery__media__image,.project__content__media-description__media__image,.project__content__media__image,.home__services__media__image,.home__services__media,.home__header__medias,.menu__list:before,.menu__shape--2:before,.menu__shape--1:before,.menu__shape--0:after,.menu__shape--0:before,.menu__shape,.menu__columns__column__wrapper,.menu__columns,.menu__left__title__media,.menu__button__line:before,.menu__button__line:after,.menu__wrapper,.loader__media__image,.cursor,.contact__submit__feedback,.work__project__media__image,.home__project__media__image,.work__project__hover,.home__project__hover,.home__header__media__image,.home__header__media,.studio__brands__gallery {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

:root {
    --spacing: 8.1rem;
    --translate: 0;
    --translate-clamped: 0
}

.studio__brands__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.studio__brands__header {
    display: flex;
    margin-bottom: auto;
    padding-top: 7rem
}

@media(max-width: 768px) {
    .studio__brands__header {
        flex-direction:column;
        gap: 2.5rem;
        padding-top: 0
    }
}

.studio__brands__header__entry {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .5rem
}

.studio__brands__title {
    margin-bottom: auto
}

.studio__brands__content {
    margin-top: auto;
    position: relative
}

@media(max-width: 768px) {
    .studio__brands__content {
        margin-top:8rem
    }
}

.studio__brands__gallery {
    pointer-events: none;
    top: 2px;
    z-index: 1
}

.studio__brands__gallery__background {
    background: var(--background);
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity .7s .2s var(--ease-out-quint);
    width: 50%;
    z-index: 1
}

.studio__brands__gallery__background--left {
    right: 0
}

.studio__brands__gallery__background--right {
    left: 0
}

[data-animation-active=true].studio__brands__gallery__background {
    opacity: 1;
    transition-delay: 0s
}

.studio__brands__gallery__media {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity .7s var(--ease-out-quint);
    width: 50%;
    z-index: 2
}

.studio__brands__gallery__media--left {
    left: 0
}

.studio__brands__gallery__media--right {
    right: 0
}

[data-animation-active=true].studio__brands__gallery__media {
    opacity: 1
}

.studio__brands__gallery__media__image {
    display: block;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    width: var(--size)
}

.studio__brands__list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0 2rem;
    height: var(--height);
    justify-content: flex-end;
    width: calc(100% - 2rem)
}

@media(max-width: 768px) {
    .studio__brands__list {
        height:auto;
        pointer-events: none;
        width: 100%
    }
}

.studio__brands__list__item {
    align-items: center;
    display: flex;
    height: 6rem;
    overflow: clip;
    padding-bottom: .4rem;
    position: relative;
    width: 50%
}

@media(max-width: 768px) {
    .studio__brands__list__item {
        height:4.4rem;
        width: 100%
    }
}

.studio__brands__list__marker {
    left: 0;
    position: absolute;
    top: 1.1rem;
    word-spacing: -0.3rem
}

.studio__brands__list__marker:before {
    content: "( "
}

.studio__brands__list__marker:after {
    content: " )"
}

@media(max-width: 768px) {
    .studio__brands__list__marker {
        top:.9rem
    }
}

.studio__brands__list__line {
    border-top: 1px solid #000;
    left: 0;
    position: absolute;
    top: 0;
    transform-origin: left;
    width: 100%
}

.studio__brands__list__text {
    clip-path: polygon(0 8%, 110% 8%, 110% 110%, 0 110%);
    padding-left: 10.3rem
}

@media(max-width: 768px) {
    .studio__brands__list__text {
        padding-left:4.7rem
    }
}

.studio__features__wrapper,.home__features__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative
}

@media(max-width: 768px) {
    .studio__features__wrapper,.home__features__wrapper {
        height:auto
    }
}

.studio__features__box {
    position: relative
}

.studio__features__description p:not(:first-child),.home__features__description p:not(:first-child) {
    margin-top: 3.6rem
}

@media(max-width: 768px) {
    .studio__features__description br,.home__features__description br {
        display:none
    }
}

.studio__features__description__target,.home__features__description__target {
    height: var(--100vh);
    left: 0;
    position: absolute;
    top: calc(.5*var(--100vh));
    width: 100%
}

@media(max-width: 768px) {
    .studio__features__description__target,.home__features__description__target {
        height:100%;
        top: 0
    }
}

.studio__features__link,.home__features__link {
    display: block;
    margin-top: 4.3rem
}

.contact__title * {
    pointer-events: none
}

.contact__title:before,.contact__title:after {
    background: var(--background);
    content: "";
    position: absolute;
    z-index: 2
}

.contact__title:before {
    height: 1rem;
    left: 22.7rem;
    top: 13rem;
    width: 1.7rem
}

.contact__title:after {
    height: 1rem;
    left: 74.7rem;
    top: 13rem;
    width: 1.5rem
}

.contact__title>span:before {
    background: currentcolor;
    bottom: 2px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .6s cubic-bezier(0.4, 0, 0, 1);
    width: 100%;
    z-index: 1
}

.contact__title:hover>span:before {
    transform: scaleX(1);
    transform-origin: left center
}

.contact__title span span {
    position: relative;
    z-index: 3
}

.footer__address a *,.studio__features__description a *,.home__features__description a * {
    pointer-events: none
}

.footer__address a em,.studio__features__description a em,.home__features__description a em {
    position: relative;
    display: inline-block
}

.footer__address a em:after,.studio__features__description a em:after,.home__features__description a em:after,.footer__address a em:before,.studio__features__description a em:before,.home__features__description a em:before {
    background: currentcolor;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    top: 100%;
    transition: transform .6s cubic-bezier(0.4, 0, 0, 1);
    width: 100%
}

.footer__address a:hover em:after,.studio__features__description a:hover em:after,.home__features__description a:hover em:after,.footer__address a em:before,.studio__features__description a em:before,.home__features__description a em:before {
    transform: scaleX(1);
    transform-origin: left center;
    transition-delay: .1s
}

.footer__address a:hover em:before,.studio__features__description a:hover em:before,.home__features__description a:hover em:before,.footer__address a em:after,.studio__features__description a em:after,.home__features__description a em:after {
    transform: scaleX(0);
    transform-origin: right center;
    transition-delay: 0s
}

.work__header__gallery__link *,.studio__awards__button *,.project__information__description__wrapper a *,.project__information__button *,.menu__right__socials__link *,.footer__terms *,.work__project__link *,.home__project__link *,.studio__features__link *,.home__features__link * {
    pointer-events: none
}

.work__header__gallery__link span,.studio__awards__button span,.project__information__description__wrapper a span,.project__information__button span,.menu__right__socials__link span,.footer__terms span,.work__project__link span,.home__project__link span,.studio__features__link span,.home__features__link span {
    position: relative;
    display: inline-block
}

.work__header__gallery__link span:after,.studio__awards__button span:after,.project__information__description__wrapper a span:after,.project__information__button span:after,.menu__right__socials__link span:after,.footer__terms span:after,.work__project__link span:after,.home__project__link span:after,.studio__features__link span:after,.home__features__link span:after,.work__header__gallery__link span:before,.studio__awards__button span:before,.project__information__description__wrapper a span:before,.project__information__button span:before,.menu__right__socials__link span:before,.footer__terms span:before,.work__project__link span:before,.home__project__link span:before,.studio__features__link span:before,.home__features__link span:before {
    background: currentcolor;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    top: 100%;
    transition: transform .6s cubic-bezier(0.4, 0, 0, 1);
    width: 100%
}

.work__header__gallery__link:hover span:after,.studio__awards__button:hover span:after,.project__information__description__wrapper a:hover span:after,.project__information__button:hover span:after,.menu__right__socials__link:hover span:after,.footer__terms:hover span:after,.work__project__link:hover span:after,.home__project__link:hover span:after,.studio__features__link:hover span:after,.home__features__link:hover span:after,.work__header__gallery__link span:before,.studio__awards__button span:before,.project__information__description__wrapper a span:before,.project__information__button span:before,.menu__right__socials__link span:before,.footer__terms span:before,.work__project__link span:before,.home__project__link span:before,.studio__features__link span:before,.home__features__link span:before {
    transform: scaleX(1);
    transform-origin: left center;
    transition-delay: .1s
}

.work__header__gallery__link:hover span:before,.studio__awards__button:hover span:before,.project__information__description__wrapper a:hover span:before,.project__information__button:hover span:before,.menu__right__socials__link:hover span:before,.footer__terms:hover span:before,.work__project__link:hover span:before,.home__project__link:hover span:before,.studio__features__link:hover span:before,.home__features__link:hover span:before,.work__header__gallery__link span:after,.studio__awards__button span:after,.project__information__description__wrapper a span:after,.project__information__button span:after,.menu__right__socials__link span:after,.footer__terms span:after,.work__project__link span:after,.home__project__link span:after,.studio__features__link span:after,.home__features__link span:after {
    transform: scaleX(0);
    transform-origin: right center;
    transition-delay: 0s
}

.home__header__media__image {
    -o-object-fit: cover;
    object-fit: cover
}

.work__projects,.home__projects {
    color: var(--color);
    overflow: clip;
    position: relative;
    z-index: 5
}

@media(max-width: 768px) {
    .work__projects,.home__projects {
        margin-top:0
    }
}

.work__projects__wrapper,.home__projects__wrapper {
    background: var(--background)
}

.work__projects__row,.home__projects__row {
    background: var(--background);
    color: var(--color);
    display: flex;
    position: relative
}

@media(max-width: 768px) {
    .work__projects__row,.home__projects__row {
        flex-direction:column
    }
}

.work__projects__row:not(.work__projects__row--highlight),.home__projects__row:not(.home__projects__row--highlight) {
    padding: 2rem 2rem 6rem
}

@media(max-width: 768px) {
    .work__projects__row:not(.work__projects__row--highlight),.home__projects__row:not(.home__projects__row--highlight) {
        padding:0
    }
}

.work__projects__row--double,.home__projects__row--double {
    gap: 2rem
}

.work__project,.home__project {
    position: relative;
    width: 50%
}

@media(max-width: 768px) {
    .work__project,.home__project {
        width:100%
    }
}

@media(max-width: 768px) {
    .work__project__content,.home__project__content {
        padding:0 2rem 8rem
    }
}

@media(max-width: 768px) {
    .work__project__single:last-child,.home__project__single:last-child {
        display:none
    }
}

.work__projects__row--highlight .work__project,.home__projects__row--highlight .home__project {
    width: 100%
}

.work__project__hover,.home__project__hover {
    cursor: pointer;
    font-size: 0;
    z-index: 1
}

.work__project__media,.home__project__media {
    margin-bottom: 2rem;
    overflow: clip;
    padding-top: 80.8571428571%;
    position: relative
}

.work__projects__row--highlight .work__project__media,.home__projects__row--highlight .home__project__media {
    height: 78rem;
    padding-top: 0;
    width: 100%
}

@media(max-width: 768px) {
    .work__projects__row--highlight .work__project__media,.home__projects__row--highlight .home__project__media {
        height:auto;
        padding-top: 80.8571428571%
    }
}

.work__project__media__image,.home__project__media__image {
    -o-object-fit: cover;
    object-fit: cover
}

.work__project__columns,.home__project__columns {
    display: flex;
    padding: 0 2rem 8rem
}

@media(max-width: 768px) {
    .work__project__columns,.home__project__columns {
        padding:0
    }
}

.work__project__column,.home__project__column {
    flex: 1
}

@media(max-width: 768px) {
    .work__project__column:nth-child(2),.home__project__column:nth-child(2) {
        display:none
    }
}

.work__project__title,.home__project__title {
    text-transform: uppercase
}

@media(max-width: 768px) {
    .work__project__title,.home__project__title {
        font-size:1.6rem !important
    }
}

.work__project__description,.home__project__description {
    margin-top: 1rem;
    opacity: .5
}

.work__project__information,.home__project__information {
    display: flex;
    flex-wrap: wrap;
    padding-left: var(--padding)
}

.work__project__information__column,.home__project__information__column {
    flex: 1
}

.work__project__information__column ul,.home__project__information__column ul {
    margin-top: 1rem;
    opacity: .5
}

.work__project__footer,.home__project__footer {
    display: block;
    margin-top: 7rem;
    position: relative;
    width: 100%;
    z-index: 3
}

.work__project__link--mobile,.home__project__link--mobile {
    display: none
}

@media(max-width: 768px) {
    .work__project__link--mobile,.home__project__link--mobile {
        display:block;
        margin-top: 4.5rem
    }
}

.page {
    height: 100%;
    overflow: auto;
    position: relative
}

.is-transitioning .page:first-of-type {
    z-index: 1
}

.page__wrapper {
    overflow: clip;
    pointer-events: none
}

.page__wrapper>*:not(.credits) {
    pointer-events: auto
}

.footer__wrapper,.work__header__wrapper,.studio__skills__wrapper,.studio__media__wrapper,.studio__highlight__wrapper,.studio__header__wrapper,.studio__awards__wrapper,.project__next__wrapper,.project__information__wrapper,.project__header__wrapper,.project__content__wrapper,.home__services__rows,.home__services__wrapper,.home__header__wrapper,.contact__wrapper,.studio__brands__wrapper,.studio__features__wrapper,.home__features__wrapper {
    padding: 3rem 11rem
}

@media(max-width: 768px) {
    .footer__wrapper,.work__header__wrapper,.studio__skills__wrapper,.studio__media__wrapper,.studio__highlight__wrapper,.studio__header__wrapper,.studio__awards__wrapper,.project__next__wrapper,.project__information__wrapper,.project__header__wrapper,.project__content__wrapper,.home__services__rows,.home__services__wrapper,.home__header__wrapper,.contact__wrapper,.studio__brands__wrapper,.studio__features__wrapper,.home__features__wrapper {
        padding:5rem 2rem
    }
}

.work__header,.studio__skills,.studio__media,.studio__highlight,.studio__header,.studio__awards,.project__next,.project__information,.project__header,.project__content,.home__services,.home__header,.contact,.studio__brands,.studio__features,.home__features {
    color: var(--color);
    overflow: clip;
    position: relative;
    z-index: 1
}

@media(max-width: 768px) {
    .work__header,.studio__skills,.studio__media,.studio__highlight,.studio__header,.studio__awards,.project__next,.project__information,.project__header,.project__content,.home__services,.home__header,.contact,.studio__brands,.studio__features,.home__features {
        height:auto;
        min-height: var(--100vh);
        margin-top: 0
    }
}

.work__header__wrapper,.studio__skills__wrapper,.studio__media__wrapper,.studio__highlight__wrapper,.studio__header__wrapper,.studio__awards__wrapper,.project__next__wrapper,.project__information__wrapper,.project__header__wrapper,.project__content__wrapper,.home__services__rows,.home__services__wrapper,.home__header__wrapper,.contact__wrapper,.studio__brands__wrapper,.studio__features__wrapper,.home__features__wrapper {
    background: var(--background);
    height: var(--100vh);
    opacity: var(--opacity);
    position: relative
}

@media(max-width: 768px) {
    .work__header__wrapper,.studio__skills__wrapper,.studio__media__wrapper,.studio__highlight__wrapper,.studio__header__wrapper,.studio__awards__wrapper,.project__next__wrapper,.project__information__wrapper,.project__header__wrapper,.project__content__wrapper,.home__services__rows,.home__services__wrapper,.home__header__wrapper,.contact__wrapper,.studio__brands__wrapper,.studio__features__wrapper,.home__features__wrapper {
        height:auto;
        min-height: var(--100vh);
        opacity: 1
    }
}

.notfound__content,.notfound__wrapper,.menu__right,.menu__left,.loader,.contact__submit__feedback {
    align-items: center;
    display: flex;
    justify-content: center
}

.home__header__label__text,.home__header__label,.loader__media {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

.home__header__label,.menu__list__link {
    font-family: "Victor Serif";
    font-size: 12rem;
    font-weight: 400;
    letter-spacing: -2px;
    line-height: .85
}

@media(max-width: 768px) {
    .home__header__label,.menu__list__link {
        font-size:5rem;
        letter-spacing: -1.25px;
        line-height: .92
    }
}

.contact__title {
    font-family: "Victor Serif";
    font-size: 10.7rem;
    font-weight: 400;
    letter-spacing: -1px
}

@media(max-width: 768px) {
    .contact__title {
        font-size:2.4rem
    }
}

.work__header__title,.studio__skills__header__title,.studio__header__title,.project__next__title,.notfound__content__title,.home__services__rows__title,.home__services__titles__title {
    font-family: "Victor Serif";
    font-size: 10rem;
    font-weight: 400;
    letter-spacing: -2.5px;
    line-height: .92
}

@media(max-width: 768px) {
    .work__header__title,.studio__skills__header__title,.studio__header__title,.project__next__title,.notfound__content__title,.home__services__rows__title,.home__services__titles__title {
        font-size:4.6rem
    }
}

.studio__skills__content__description,.studio__media__description,.studio__highlight__title,.project__information__highlight,.project__content__description,.project__content__media-description__content,.notfound__content__label,.home__services__rows__description,.studio__brands__title,.studio__brands__list__text,.studio__features__description,.home__features__description,.footer__address a,.studio__features__description a,.home__features__description a {
    font-family: "Victor Serif";
    font-size: 4.6rem;
    font-weight: 400;
    line-height: 1.05
}

@media(max-width: 768px) {
    .studio__skills__content__description,.studio__media__description,.studio__highlight__title,.project__information__highlight,.project__content__description,.project__content__media-description__content,.notfound__content__label,.home__services__rows__description,.studio__brands__title,.studio__brands__list__text,.studio__features__description,.home__features__description,.footer__address a,.studio__features__description a,.home__features__description a {
        font-size:2.5rem
    }
}

.footer__address {
    font-family: "Victor Serif";
    font-size: 4.6rem;
    font-weight: 400;
    line-height: 1.15
}

@media(max-width: 768px) {
    .footer__address {
        font-size:2.5rem
    }
}

.work__project__title,.home__project__title {
    font-family: "Matter";
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1
}

.studio__skills__content__label,.studio__skills__header__label,.studio__awards__content__wrapper,.project__information__header,.project__header__title,.notfound__content__link,.home__brands__wrapper>span span,.contact__submit,.contact__fields,.studio__brands__header__entry,.studio__brands__list__marker,.work__project__description,.home__project__description,.work__project__information,.home__project__information {
    font-family: "Matter";
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.05
}

@media(max-width: 768px) {
    .studio__skills__content__label,.studio__skills__header__label,.studio__awards__content__wrapper,.project__information__header,.project__header__title,.notfound__content__link,.home__brands__wrapper>span span,.contact__submit,.contact__fields,.studio__brands__header__entry,.studio__brands__list__marker,.work__project__description,.home__project__description,.work__project__information,.home__project__information {
        font-size:1.4rem
    }
}

.work__header__footer__texts,.studio__highlight__label,.project__next__label,.project__information__description__wrapper,.menu__right,.footer__credits,.contact__description,.work__header__gallery__link,.studio__awards__button,.project__information__description__wrapper a,.project__information__button,.menu__right__socials__link,.footer__terms,.studio__features__link,.home__features__link,.work__project__link,.home__project__link {
    font-family: "Matter";
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.15
}

@media(max-width: 768px) {
    .work__header__footer__texts,.studio__highlight__label,.project__next__label,.project__information__description__wrapper,.menu__right,.footer__credits,.contact__description,.work__header__gallery__link,.studio__awards__button,.project__information__description__wrapper a,.project__information__button,.menu__right__socials__link,.footer__terms,.studio__features__link,.home__features__link,.work__project__link,.home__project__link {
        font-size:1.4rem
    }
}

.work__header__footer__label span,.studio__highlight__label a,.studio__highlight__label em,.project__information__description__wrapper h1,.project__information__description__wrapper h2,.project__information__description__wrapper h3,.project__information__description__wrapper h4,.project__information__description__wrapper h5,.project__information__description__wrapper h6,.studio__brands__header__entry ul,.studio__brands__header__entry p {
    font-family: "Matter";
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.15;
    opacity: .4
}

@media(max-width: 768px) {
    .work__header__footer__label span,.studio__highlight__label a,.studio__highlight__label em,.project__information__description__wrapper h1,.project__information__description__wrapper h2,.project__information__description__wrapper h3,.project__information__description__wrapper h4,.project__information__description__wrapper h5,.project__information__description__wrapper h6,.studio__brands__header__entry ul,.studio__brands__header__entry p {
        font-size:1.4rem
    }
}

.contact__field__extra {
    font-size: 1.2rem;
    font-weight: 400
}

.notfound__content__description {
    font-family: "Victor Serif";
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.15;
    opacity: .5
}

html {
    background: #000;
    color: #fff;
    font-size: .6944444444vw;
    overflow: clip !important
}

@media(max-width: 768px) {
    html {
        font-size:3.125vw
    }

    html br {
        display: none
    }
}

body {
    font-family: "font-victor-serif";
    font-size: 1.6rem;
    overflow: clip !important;
    visibility: hidden
}

html.loaded body {
    visibility: visible
}

em {
    display: inline-block;
    margin: 0 -0.1em;
    padding: 0 .1em;
    font-style: italic
}

.app {
    position: relative
}

.canvas {
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    z-index: 2
}

[data-animation=link] span {
    clip-path: polygon(0, 100% 0, 100% 115%, 0 115%);
    display: inline-block;
    vertical-align: top
}

[data-animation=parallax] {
    overflow: clip
}

[data-animation=paragraph] span {
    clip-path: polygon(-10% 0, 100% 0, 100% 115%, -10% 115%);
    display: inline-block;
    vertical-align: top
}

[data-animation=title] span {
    clip-path: polygon(-10% 0, 100% 0, 100% 120%, -10% 120%);
    display: inline-block;
    vertical-align: top
}

::-webkit-scrollbar {
    display: none;
    opacity: 0;
    visibility: hidden
}

@font-face {
    font-display: swap;
    font-family: "Victor Serif";
    font-style: italic;
    font-weight: 400;
    src: url("../fonts/victor-serif-regular-italic.woff2") format("woff2") format("woff")
}

@font-face {
    font-display: swap;
    font-family: "Victor Serif";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/victor-serif-regular.woff2") format("woff2") format("woff")
}

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

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

.contact__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.contact__title {
    clip-path: polygon(0 0, 100% 0, 100% 130%, 0 130%);
    display: block;
    margin-bottom: auto;
    padding-top: 3rem;
    position: relative;
    text-align: center;
    white-space: nowrap
}

@media(max-width: 768px) {
    .contact__title {
        font-size:2.5rem;
        letter-spacing: -0.5px;
        padding-top: 0
    }
}

.contact__title__text {
    display: block
}

.contact__form {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 4.2rem;
    margin-top: auto;
    overflow: clip;
    transform: translateZ(0);
    width: 100%
}

@media(max-width: 768px) {
    .contact__form {
        gap:3rem;
        margin-top: 8rem
    }
}

.contact__description {
    font-family: "Matter"
}

@media(max-width: 768px) {
    .contact__description br {
        display:none
    }
}

.contact__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 2.3rem 0;
    position: relative
}

.contact__fields:after {
    background: var(--background);
    bottom: -4px;
    content: "";
    left: 50%;
    margin-left: -1.15rem;
    position: absolute;
    top: -4px;
    width: 2.3rem;
    z-index: 2
}

@media(max-width: 768px) {
    .contact__fields {
        gap:0
    }

    .contact__fields:after {
        display: none
    }
}

.contact__fields__left,.contact__fields__right {
    display: flex;
    flex-direction: column;
    width: 50%
}

@media(max-width: 768px) {
    .contact__fields__left,.contact__fields__right {
        width:100%
    }
}

.contact__fields__left {
    padding-right: 1.15rem
}

@media(max-width: 768px) {
    .contact__fields__left {
        padding-right:0
    }
}

.contact__fields__right {
    padding-left: 1.15rem
}

@media(max-width: 768px) {
    .contact__fields__right {
        padding-left:0
    }
}

.contact__field {
    height: 100%;
    min-height: 5rem;
    overflow: clip
}

.contact__field:not(:first-child) {
    position: relative
}

@media(max-width: 768px) {
    .contact__field {
        height:auto;
        position: relative
    }

    .contact__field--file {
        height: 8rem
    }

    .contact__field--message {
        height: 10rem
    }
}

.contact__field__wrapper {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-between;
    width: 100%
}

.contact__fields__right .contact__field__wrapper {
    align-items: flex-start;
    height: 100%
}

@media(max-width: 768px) {
    .contact__field__wrapper {
        align-items:flex-start;
        height: 100%
    }
}

.contact__field__label {
    display: block;
    width: 10.3rem
}

.contact__fields__right .contact__field__label {
    padding-top: 1.7rem
}

.contact__field--invalid .contact__field__label {
    color: #ed145b
}

@media(max-width: 768px) {
    .contact__field__label {
        display:none
    }
}

.contact__field__box {
    height: 100%;
    position: relative;
    width: calc(100% - 10.3rem)
}

@media(max-width: 768px) {
    .contact__field__box {
        width:100%
    }
}

.contact__field__dash {
    border-top: 1px solid #000;
    left: 0;
    position: absolute;
    top: 0;
    transform-origin: left;
    width: 100%;
    z-index: 1
}

.contact__field__dash:last-child {
    bottom: 0;
    top: auto
}

.contact__fields__right .contact__field__dash {
    display: none
}

@media(max-width: 768px) {
    .contact__fields__right .contact__field__dash {
        display:block
    }
}

.contact__field__input {
    background: rgba(0,0,0,0);
    border: none;
    box-shadow: 0 0 0px 1000px var(--background) inset;
    outline: none;
    height: 5rem
}

.contact__fields__right .contact__field__input {
    height: 100%;
    padding-top: 1.7rem;
    resize: none
}

.contact__field--file .contact__field__input {
    left: -999999rem;
    position: absolute
}

.contact__field__placeholder {
    color: rgba(0,0,0,.25);
    left: 0;
    position: absolute;
    top: 2.5rem;
    transform: translateY(-50%);
    transition: opacity .4s ease
}

.contact__field__input--active+.contact__field__placeholder {
    opacity: 0 !important
}

.contact__field__extra {
    bottom: 2.5rem;
    color: rgba(0,0,0,.25);
    position: absolute;
    right: 0;
    transform: translateY(50%)
}

@media(max-width: 768px) {
    .contact__field__extra {
        bottom:1rem;
        left: 0;
        right: auto;
        transform: none
    }
}

.contact__field__feedback {
    align-items: center;
    background: var(--background);
    display: flex;
    gap: .5rem;
    left: 0;
    line-height: 4rem;
    opacity: 0;
    position: absolute;
    top: 2.5rem;
    transform: translateY(-50%);
    transition: opacity .4s ease,visibility .4s ease;
    visibility: hidden;
    z-index: 2
}

.contact__field__feedback--active {
    opacity: 1;
    visibility: visible
}

.contact__field__feedback__text {
    max-width: 21rem;
    overflow: clip;
    text-overflow: ellipsis;
    white-space: nowrap
}

.contact__field__feedback__close {
    height: 2rem;
    position: relative;
    width: 2rem
}

.contact__field__feedback__close:before,.contact__field__feedback__close:after {
    background: currentColor;
    content: "";
    height: 1.5rem;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 1px
}

.contact__field__feedback__close:before {
    transform: translate(-50%, -50%) rotate(45deg)
}

.contact__field__feedback__close:after {
    transform: translate(-50%, -50%) rotate(-45deg)
}

.contact__submit {
    background: var(--background);
    border: 1px solid #000;
    overflow: clip;
    padding: 1.8rem;
    position: relative;
    transition: color .7s var(--ease-out-quint);
    width: 100%
}

.contact__submit:before {
    background: #000;
    bottom: -1px;
    content: "";
    left: -1px;
    position: absolute;
    right: -1px;
    top: -1px;
    transform: scaleY(0) translateZ(0);
    transform-origin: top;
    transition: transform .7s var(--ease-out-quint);
    z-index: 1
}

.contact__submit:hover {
    color: #fff
}

.contact__submit:hover:before {
    transform: scaleY(1);
    transform-origin: bottom
}

.contact--sent .contact__submit {
    pointer-events: none
}

@media(max-width: 768px) {
    .contact__submit {
        border:none;
        height: 5.3rem;
        padding: 0
    }

    .contact__submit:before {
        transform: scaleY(1)
    }
}

.contact__submit__text {
    position: relative;
    z-index: 2
}

@media(max-width: 768px) {
    .contact__submit__text {
        color:#fff
    }
}

.contact__submit__feedback {
    background: #000;
    color: #fff;
    opacity: 0;
    transition: opacity .4s ease;
    z-index: 3
}

.contact--sent .contact__submit__feedback {
    opacity: 1
}

.cursor {
    mix-blend-mode: difference;
    transform: translateZ(0);
    pointer-events: none;
    position: fixed;
    z-index: 10
}

@media(max-width: 768px) {
    .cursor {
        display:none
    }
}

.cursor__bullet {
    background: #fff;
    border-radius: 50%;
    height: 10rem;
    mix-blend-mode: difference;
    left: 0;
    margin-left: -5rem;
    margin-top: -5rem;
    position: absolute;
    top: 0;
    transform: translateZ(0);
    width: 10rem
}

.cursor__media {
    height: 10.4rem;
    left: 0;
    margin-left: -5.2rem;
    margin-top: -5.2rem;
    position: absolute;
    top: 0;
    transform: translateZ(0);
    width: 10.4rem;
    z-index: 2
}

.footer {
    color: var(--color);
    height: var(--100vh);
    overflow: clip;
    position: relative;
    z-index: 1
}

.footer__wrapper {
    background: var(--background);
    display: flex;
    flex-direction: column;
    transform: translateY(var(--translate));
    justify-content: flex-end;
    height: var(--100vh)
}

.footer__address span br {
    display: none
}

@media(max-width: 768px) {
    .footer__address span br {
        display:block !important
    }
}

.footer__credits {
    margin-top: 3.6rem
}

.footer__terms {
    display: block;
    margin-top: .5rem;
    opacity: .4
}

.loader {
    background: #000;
    height: 100%;
    justify-content: space-between;
    position: fixed;
    width: 100%;
    z-index: 3
}

@media(max-width: 768px) {
    .loader {
        align-items:flex-end;
        padding-bottom: 2.5rem
    }

    .loader:before,.loader:after {
        background: #fff;
        content: "";
        height: 21.6rem;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%) scaleY(0);
        transition: height 1s var(--ease-in-out-expo),opacity 1s var(--ease-in-out-expo),transform 1s var(--ease-in-out-expo);
        width: 1px;
        z-index: 3
    }

    .loader--one .loader:before,.loader--one .loader:after {
        transform: translateY(-50%) scaleY(1)
    }

    .loader--two .loader:before {
        transform: translateY(-50%) translateX(-8.5rem) scaleY(1)
    }

    .loader--two .loader:after {
        transform: translateY(-50%) translateX(8.5rem) scaleY(1)
    }

    .loader--three .loader:before,.loader--four .loader:before {
        height: 100%;
        opacity: 0;
        transform: translateY(-50%) translateX(-50vw) scaleY(1)
    }

    .loader--three .loader:after,.loader--four .loader:after {
        height: 100%;
        opacity: 0;
        transform: translateY(-50%) translateX(50vw) scaleY(1)
    }
}

.loader__text {
    font: 12rem "Victor Serif";
    flex: 1;
    overflow: clip;
    text-align: center
}

@media(max-width: 768px) {
    .loader__text {
        font-size:5rem;
        line-height: 4.2rem
    }
}

.loader__text__text {
    display: block;
    transform: translateY(100%)
}

.loader__media {
    height: 15.1rem;
    opacity: .85;
    overflow: clip;
    width: 0
}

@media(max-width: 768px) {
    .loader__media {
        height:14rem
    }
}

.loader__media__wrapper {
    height: 15.1rem;
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    width: 14.7rem
}

@media(max-width: 768px) {
    .loader__media__wrapper {
        height:14rem;
        width: 13.5rem
    }
}

.loader__media__image {
    -o-object-fit: cover;
    object-fit: cover
}

.menu {
    --active-background: #000000;
    --active-color: #ffffff
}

.menu--active .menu {
    pointer-events: auto
}

.menu__clamped {
    height: var(--100vh);
    left: 0;
    margin-bottom: calc(-1*var(--100vh));
    mix-blend-mode: difference;
    pointer-events: none;
    position: sticky;
    top: 0;
    transform: translateY(var(--translate-clamped));
    width: 100%;
    z-index: 4
}

.menu__wrapper {
    height: var(--100vh);
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transform: translateY(var(--translate));
    z-index: 6
}

.menu__button {
    font-size: 0;
    height: 5rem;
    left: 50%;
    mix-blend-mode: difference;
    pointer-events: auto;
    position: fixed;
    top: 1rem;
    transform: translateX(-50%);
    transition: color 1s var(--ease-out-quint);
    width: 5rem;
    z-index: 7
}

@media(max-width: 768px) {
    .menu__button {
        top:0
    }
}

.menu__button__line {
    color: currentColor;
    height: 2px;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transition: color 1s var(--ease-out-expo),transform 1s var(--ease-out-expo),width 1.5s var(--ease-out-quint);
    width: 0
}

.menu__button__line:before,.menu__button__line:after {
    background: currentColor;
    content: "";
    transition: transform .7s var(--ease-out-quint)
}

.menu__button__line:before {
    transform-origin: left
}

.menu__button__line--top:before {
    transition-delay: .3s
}

.menu__button__line--center:before {
    transition-delay: .2s
}

.menu__button__line--bottom:before {
    transition-delay: .1s
}

.menu__button__line:after {
    transform: scaleX(0);
    transform-origin: right;
    transition-delay: 0s
}

.menu__button:hover .menu__button__line:before {
    transform: scaleX(0);
    transform-origin: right;
    transition-delay: 0s
}

.menu__button:hover .menu__button__line:after {
    transform: scaleX(1);
    transform-origin: left
}

.menu__button:hover .menu__button__line--top:after {
    transition-delay: .2s
}

.menu__button:hover .menu__button__line--center:after {
    transition-delay: .3s
}

.menu__button:hover .menu__button__line--bottom:after {
    transition-delay: .4s
}

.menu__button__line--top {
    transform: translate(-50%, calc(-50% - 0.8rem))
}

.menu__button__line--center {
    transform: translate(-50%, calc(-50% - 0rem))
}

.menu__button__line--bottom {
    transform: translate(-50%, calc(-50% + 0.8rem))
}

.loader--four .menu__button__line--top,.loader--four .menu__button__line--center,.loader--four .menu__button__line--bottom {
    width: 5.6rem
}

.menu--active .menu__button__line {
    color: var(--active-color)
}

.menu--active .menu__button__line--top {
    transform: translate(-50%, -50%) scale(0.7) rotate(45deg)
}

.menu--active .menu__button__line--center {
    transform: translate(-50%, -50%) scale(0.7) rotate(45deg)
}

.menu--active .menu__button__line--bottom {
    transform: translate(-50%, -50%) scale(0.7) rotate(-45deg)
}

.menu__left {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: var(--spacing);
    z-index: 1
}

.menu__clamped>.menu__left {
    opacity: var(--opacity)
}

.menu[data-animation-fixed=minimal]>.menu__clamped>.menu__left {
    visibility: hidden
}

@media(max-width: 768px) {
    .menu__left {
        display:none
    }
}

.menu__left__title {
    height: 3rem;
    left: 50%;
    opacity: 0;
    pointer-events: auto;
    position: absolute;
    top: 3rem;
    transform: translateX(-50%);
    transition: opacity .7s var(--ease-out-quint);
    width: 3rem
}

html[data-template=home].menu--scroll .menu__left__title,html:not([data-template=home]).loader--four .menu__left__title {
    opacity: 1;
    transform: translateX(-50%)
}

.menu__left__title__media {
    fill: currentColor
}

.menu__left__content {
    display: block;
    fill: currentColor;
    height: 5.2rem;
    opacity: 0;
    transform: scale(1.5);
    transition: opacity 1.5s var(--ease-out-quint),transform 1.5s var(--ease-out-quint);
    width: 2.1rem
}

.loader--one .menu__left__content,.loader--two .menu__left__content,.loader--three .menu__left__content,.loader--four .menu__left__content {
    opacity: 1;
    transform: scale(1)
}

.menu__left__label {
    align-items: center;
    bottom: 3.2rem;
    display: flex;
    gap: 1rem;
    height: 1.84rem;
    left: 50%;
    position: absolute;
    transform: rotate(-90deg) translate(0%, 50%);
    transform-origin: bottom left;
    white-space: nowrap;
    width: 30rem
}

.menu__left__label:after {
    border-top: 1px solid currentColor;
    content: "";
    left: 2px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 5rem
}

.menu__left__label:before {
    border-color: currentColor;
    border-style: solid;
    border-width: 0 0 1px 1px;
    content: "";
    height: 2.1rem;
    top: 50%;
    position: absolute;
    transform: translateY(-50%) rotate(45deg);
    left: .5rem;
    width: 2.1rem
}

.menu__line {
    background: currentColor;
    bottom: 3rem;
    position: absolute;
    top: 3rem;
    transition: height 1s var(--ease-in-out-expo),transform 1s var(--ease-in-out-expo);
    width: 1px;
    z-index: 2
}

.menu__left .menu__line {
    right: 0;
    transform: translateX(calc(50vw - 8.1rem + 1px)) scaleY(0)
}

.loader--one .menu__left .menu__line {
    transform: translateX(calc(50vw - 8.1rem + 1px)) scaleY(0.2)
}

.loader--two .menu__left .menu__line {
    transform: translateX(calc(50vw - 8.1rem + 1px - 10rem)) scaleY(0.2)
}

.loader--three .menu__left .menu__line,.loader--four .menu__left .menu__line {
    transform: none
}

.menu__right .menu__line {
    left: 0;
    transform: translateX(calc(-50vw + 8.1rem)) scaleY(0)
}

.loader--one .menu__right .menu__line {
    transform: translateX(calc(-50vw + 8.1rem)) scaleY(0.2)
}

.loader--two .menu__right .menu__line {
    transform: translateX(calc(-50vw + 8.1rem + 10rem)) scaleY(0.2)
}

.loader--three .menu__right .menu__line,.loader--four .menu__right .menu__line {
    transform: none
}

.menu__clamped>.menu__line {
    opacity: var(--opacity)
}

.menu[data-animation-fixed=minimal]>.menu__clamped>.menu__line {
    visibility: hidden
}

.menu__line__center {
    border-left: 1px solid #fff;
    height: calc(var(--100vh) - 11rem) !important;
    left: 50%;
    position: absolute;
    top: 8rem;
    transform: scaleY(0);
    transition: transform .7s var(--ease-out-quint);
    z-index: 4
}

.menu--active .menu__line__center {
    transform: scaleY(1)
}

.menu__right {
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: var(--spacing);
    z-index: 1
}

.menu__clamped>.menu__right {
    opacity: var(--opacity)
}

.menu[data-animation-fixed=minimal]>.menu__clamped>.menu__right {
    visibility: hidden
}

@media(max-width: 768px) {
    .menu__right {
        display:none
    }
}

.menu__right__socials {
    left: 50%;
    overflow: clip;
    pointer-events: auto;
    position: absolute;
    top: -0.9rem;
    transform: rotate(90deg) translateY(50%);
    transform-origin: left bottom
}

.menu__right__date br,.menu__right__content br,.menu__right__socials__title br {
    display: none
}

.menu__right__date span,.menu__right__content span,.menu__right__socials__title span {
    display: block;
    overflow: clip
}

.menu__right__date span span,.menu__right__content span span,.menu__right__socials__title span span {
    transform: translateY(-100%);
    transition: transform 1.5s var(--ease-out-quint)
}

.loader--four .menu__right__date span span,.loader--four .menu__right__content span span,.loader--four .menu__right__socials__title span span {
    transform: translateY(0)
}

.menu__right__socials__title {
    display: block;
    overflow: clip
}

.menu__right__socials__list {
    display: flex;
    gap: .5rem;
    overflow: clip;
    padding-bottom: 1px
}

.menu__right__socials__item {
    display: flex;
    transform: translateY(-110%);
    transition: transform 1.5s var(--ease-out-quint)
}

.menu__right__socials__item:not(:last-child):after {
    content: ","
}

.loader--four .menu__right__socials__item {
    transform: translateY(0)
}

.menu__right__content {
    transform: rotate(90deg);
    white-space: nowrap
}

.loader--one .menu__right__content span span,.loader--two .menu__right__content span span,.loader--three .menu__right__content span span,.loader--four .menu__right__content span span {
    transform: translateY(0)
}

.menu__right__date {
    bottom: -0.9rem;
    position: absolute;
    right: 50%;
    transform: rotate(90deg) translateY(-50%);
    transform-origin: right top;
    white-space: nowrap
}

.menu__columns {
    color: var(--active-color);
    z-index: 2
}

.menu__columns__column {
    background: var(--active-background);
    height: 0;
    overflow: clip;
    position: absolute;
    top: 0;
    transform-origin: top center;
    transition: height 1s var(--ease-out-quint);
    width: 50vw
}

.menu__columns__column--left {
    left: 0;
    transition-delay: .3s
}

.menu__columns__column--right {
    right: 0;
    transition-delay: .4s
}

.menu--active .menu__columns__column {
    height: var(--100vh)
}

.menu--active .menu__columns__column--left {
    transition-delay: 0s
}

.menu--active .menu__columns__column--right {
    transition-delay: .1s
}

@media(max-width: 768px) {
    .menu__columns__column {
        width:100vw
    }

    .menu__columns__column--left {
        display: none
    }
}

.menu__columns__column__wrapper {
    height: var(--100vh)
}

.menu__shapes {
    height: 24rem;
    left: 25%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(0) rotate(90deg);
    transition: transform .5s var(--ease-out-expo);
    width: 24rem;
    z-index: 2
}

.menu--active .menu__shapes {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    transition-delay: .5s
}

@media(max-width: 768px) {
    .menu__shapes {
        display:none
    }
}

.menu__shape {
    transform: scale(0) rotate(90deg);
    transition: transform 1s var(--ease-out-expo)
}

.menu__shape--0:before {
    background: #fff;
    content: "";
    transform: translateZ(0)
}

.menu__shape--0:after {
    background: #000;
    border-radius: 50%;
    content: "";
    transform: scale(0.8)
}

.menu--shape-0 .menu__shape--0 {
    transform: scale(1) rotate(0)
}

.menu__shape--1:before {
    background: #fff;
    content: "";
    transform: translateZ(0)
}

.menu--shape-1 .menu__shape--1 {
    transform: scale(1) rotate(0)
}

.menu__shape--2:before {
    background: #fff;
    border-radius: 50%;
    content: "";
    transform: scale(0.8)
}

.menu--shape-2 .menu__shape--2 {
    transform: scale(1) rotate(0)
}

.menu__list {
    align-items: center;
    color: var(--active-color);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    height: var(--100vh);
    justify-content: center;
    left: 50%;
    padding-right: var(--spacing);
    pointer-events: none;
    position: absolute;
    top: 0;
    transition: visibility 1.5s ease;
    visibility: hidden;
    width: 50vw;
    z-index: 2
}

.menu--active .menu__list {
    transition-duration: 0s;
    visibility: visible
}

.menu__list:before {
    content: "";
    display: none
}

@media(max-width: 768px) {
    .menu__list {
        gap:0;
        height: 30rem;
        left: 0;
        padding: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 100vw;
        z-index: 10
    }

    .menu__list:before {
        background: #000;
        display: block;
        transform: scaleY(0);
        transform-origin: top;
        transition: transform .8s 0s var(--ease-out-quint)
    }

    .menu--active .menu__list:before {
        transform: scaleY(1);
        transition-delay: .33s
    }
}

.menu__list__item {
    overflow: clip
}

.menu--active .menu__list__item {
    pointer-events: auto
}

.menu__list__link {
    clip-path: polygon(0 8%, 100% 8%, 100% 100%, 0 100%);
    display: block;
    position: relative;
    transform: translateY(110%);
    transition: opacity .4s ease,transform 1s var(--ease-out-quint)
}

.menu__list__link * {
    pointer-events: none
}

.menu--active .menu__list__link {
    transform: translateY(0)
}

.menu__list__link--active {
    opacity: .3;
    pointer-events: none
}

.menu__list__item:nth-child(1) .menu__list__link {
    transition-delay: 0.2s
}

.menu--active .menu__list__item:nth-child(1) .menu__list__link {
    transition-delay: 0.3s
}

.menu__list__item:nth-child(2) .menu__list__link {
    transition-delay: 0.1s
}

.menu--active .menu__list__item:nth-child(2) .menu__list__link {
    transition-delay: 0.4s
}

.menu__list__item:nth-child(3) .menu__list__link {
    transition-delay: 0s
}

.menu--active .menu__list__item:nth-child(3) .menu__list__link {
    transition-delay: 0.5s
}

.menu__list__item:nth-child(4) .menu__list__link {
    transition-delay: -0.1s
}

.menu--active .menu__list__item:nth-child(4) .menu__list__link {
    transition-delay: 0.6s
}

.menu__list__item:nth-child(5) .menu__list__link {
    transition-delay: -0.2s
}

.menu--active .menu__list__item:nth-child(5) .menu__list__link {
    transition-delay: 0.7s
}

@media(max-width: 768px) {
    .menu__list__link {
        font-size:7rem
    }
}

.menu__list__link__text {
    display: block;
    position: relative;
    white-space: nowrap;
    padding: 0 1rem;
    text-align: center
}

.menu__list__link__text span {
    display: inline-block;
    transform-origin: center center .4em;
    transition: transform .7s var(--ease-out-quint);
    vertical-align: top
}

.menu__list__link__text span:nth-child(1) {
    transition-delay: 0.025s
}

.menu__list__link__text span:nth-child(2) {
    transition-delay: 0.05s
}

.menu__list__link__text span:nth-child(3) {
    transition-delay: 0.075s
}

.menu__list__link__text span:nth-child(4) {
    transition-delay: 0.1s
}

.menu__list__link__text span:nth-child(5) {
    transition-delay: 0.125s
}

.menu__list__link__text span:nth-child(6) {
    transition-delay: 0.15s
}

.menu__list__link__text span:nth-child(7) {
    transition-delay: 0.175s
}

.menu__list__link__text span:nth-child(8) {
    transition-delay: 0.2s
}

.menu__list__link__text span:nth-child(9) {
    transition-delay: 0.225s
}

.menu__list__link__text span:nth-child(10) {
    transition-delay: 0.25s
}

.menu__list__link__text span:nth-child(11) {
    transition-delay: 0.275s
}

.menu__list__link__text span:nth-child(12) {
    transition-delay: 0.3s
}

.menu__list__link__text span:nth-child(13) {
    transition-delay: 0.325s
}

.menu__list__link__text span:nth-child(14) {
    transition-delay: 0.35s
}

.menu__list__link__text span:nth-child(15) {
    transition-delay: 0.375s
}

.menu__list__link__text span:nth-child(16) {
    transition-delay: 0.4s
}

.menu__list__link__text span:nth-child(17) {
    transition-delay: 0.425s
}

.menu__list__link__text span:nth-child(18) {
    transition-delay: 0.45s
}

.menu__list__link__text span:nth-child(19) {
    transition-delay: 0.475s
}

.menu__list__link__text span:nth-child(20) {
    transition-delay: 0.5s
}

.menu__list__link__text:first-child {
    position: absolute;
    top: 0
}

.menu__list__link__text:last-child {
    font-style: italic;
    opacity: .6
}

.menu__list__link__text:last-child span {
    transform: translate3d(0, 100%, 0)
}

.menu__list__link--active .menu__list__link__text:first-child span,.menu__list__link:hover .menu__list__link__text:first-child span {
    transform: translate3d(0, -100%, 0)
}

.menu__list__link--active .menu__list__link__text:last-child span,.menu__list__link:hover .menu__list__link__text:last-child span {
    transform: translate3d(0, 0, 0)
}

.menu__list__item:nth-child(1) .menu__list__link__text span {
    letter-spacing: 1rem;
    margin-left: -1rem
}

.menu__list__item:nth-child(2) .menu__list__link__text:first-child span:nth-child(1) {
    margin-right: -1rem
}

.menu__list__item:nth-child(2) .menu__list__link__text:last-child span {
    letter-spacing: 1rem;
    margin-left: -1rem
}

.menu__list__item:nth-child(2) .menu__list__link__text:last-child span:nth-child(1) {
    margin-right: -1.25rem
}

.title__line {
    clip-path: polygon(0 0, 100% 0, 100% 120%, 0 120%);
    display: inline-block;
    vertical-align: top
}

.title__line span {
    display: block
}

@keyframes marquee {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-360rem)
    }
}

.home__brands {
    align-items: center;
    background: var(--background);
    display: flex;
    height: 11rem;
    position: relative;
    z-index: 5
}

.home__brands__wrapper {
    animation: marquee 20s linear infinite;
    display: flex;
    position: relative;
    white-space: nowrap;
    width: -moz-fit-content;
    width: fit-content
}

.home__brands__wrapper>span {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 30rem
}

@media(max-width: 768px) {
    .home__brands__wrapper>span {
        width:20rem
    }
}

.home__brands__media__image {
    height: 6rem;
    -o-object-fit: contain;
    object-fit: contain;
    width: 12rem
}

.home__header {
    height: var(--100vh);
    margin-top: 0
}

@media(max-width: 768px) {
    .home__header {
        height:auto
    }
}

.home__header__wrapper {
    transform: translateY(calc(var(--parallax) * -1))
}

.home__header__wrapper canvas {
    opacity: .85;
    z-index: 0
}

.home__header__media {
    opacity: .8
}

.home__header__label {
    text-align: center;
    width: 100rem;
    z-index: 1
}

@media(max-width: 768px) {
    .home__header__label {
        width:30rem
    }
}

.home__header__interactive {
    display: inline-block;
    vertical-align: middle;
    width: 44rem
}

@media(max-width: 768px) {
    .home__header__interactive {
        width:18.5rem
    }
}

.home__header__label__sub {
    clip-path: polygon(0 0%, 100% 0%, 100% 125%, 0 125%);
    display: none;
    padding-bottom: 1.5rem
}

@media(max-width: 768px) {
    .home__header__label__sub {
        margin-top:.5rem
    }
}

.home__header__label__texts {
    clip-path: polygon(0 8%, 100% 8%, 100% 115%, 0 115%);
    display: block;
    font-style: italic;
    height: 12.4rem;
    position: relative;
    width: 100%
}

@media(max-width: 768px) {
    .home__header__label__texts {
        height:4.6rem
    }
}

.home__header__label__text {
    white-space: nowrap
}

.home__header__label__text span {
    display: inline-block;
    height: 12.4rem;
    margin: 0 -1em;
    padding: 0 1em;
    transform: translateY(120%);
    vertical-align: top
}

.home__header__label__text span:nth-child(1) {
    transition-delay: 0.025s
}

.home__header__label__text span:nth-child(2) {
    transition-delay: 0.05s
}

.home__header__label__text span:nth-child(3) {
    transition-delay: 0.075s
}

.home__header__label__text span:nth-child(4) {
    transition-delay: 0.1s
}

.home__header__label__text span:nth-child(5) {
    transition-delay: 0.125s
}

.home__header__label__text span:nth-child(6) {
    transition-delay: 0.15s
}

.home__header__label__text span:nth-child(7) {
    transition-delay: 0.175s
}

.home__header__label__text span:nth-child(8) {
    transition-delay: 0.2s
}

.home__header__label__text span:nth-child(9) {
    transition-delay: 0.225s
}

.home__header__label__text span:nth-child(10) {
    transition-delay: 0.25s
}

.home__header__label__text--previous span {
    transform: translateY(-120%);
    transition: transform .7s var(--ease-out-quint)
}

.home__header__label__text--active span {
    transform: translateY(0%);
    transition: transform .7s var(--ease-out-quint)
}

@media(max-width: 768px) {
    .home__header__label__text span {
        height:4.6rem
    }
}

.home__header__title {
    bottom: 3rem;
    display: block;
    fill: #fff;
    left: 50%;
    position: absolute;
    transform: translate(-50%, 0%);
    width: 18.3rem;
    z-index: 1
}

@media(max-width: 768px) {
    .home__header__title {
        width:15rem
    }
}

.home__header__scroll {
    bottom: 3rem;
    font: 2rem "Matter";
    left: 11rem;
    position: absolute
}

@media(max-width: 768px) {
    .home__header__scroll {
        display:none
    }
}

.home__services {
    height: calc(9*var(--100vh));
    margin-top: 0;
    z-index: 1
}

.home__services .menu {
    color: var(--services-color)
}

.home__services__wrapper {
    align-items: flex-end;
    display: flex;
    position: sticky;
    top: 0
}

.home__services__intro {
    height: 100%;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 122rem;
    z-index: 1
}

@media(max-width: 768px) {
    .home__services__intro {
        height:var(--100vh);
        top: 50%;
        transform: translate(-50%, -50%);
        width: var(--100vh)
    }
}

.home__services__intro__shape {
    background: #000;
    padding-top: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50%
}

.home__services__intro__shape--circle {
    border-radius: 50%;
    left: 0
}

.home__services__intro__shape--square {
    left: 50%
}

@media(max-width: 768px) {
    .home__services__intro__shape {
        height:calc(var(--100vh)*.5);
        transform: translate(-50%, 0);
        width: calc(var(--100vh)*.5)
    }

    .home__services__intro__shape--circle {
        left: 50%;
        top: 0
    }

    .home__services__intro__shape--square {
        bottom: 0;
        left: 50%;
        top: auto
    }
}

.home__services__titles {
    bottom: 3rem;
    display: flex;
    left: 50%;
    padding: 0 3rem;
    position: absolute;
    transform: translateX(-50%);
    width: calc(100% - 16.2rem);
    z-index: 2
}

@media(max-width: 768px) {
    .home__services__titles {
        width:100%
    }
}

.home__services__titles__title {
    flex: 1;
    width: 50%
}

.home__services__titles__title span {
    clip-path: polygon(0 0, 100% 0, 100% 120%, 0 120%);
    display: inline-block;
    vertical-align: top
}

@media(max-width: 768px) {
    .home__services__titles__title:last-child {
        display:none
    }
}

.home__services__rows {
    background: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.home__services__rows:nth-of-type(3) {
    z-index: 3
}

.home__services__rows:nth-of-type(4) {
    z-index: 4
}

.home__services__rows__dash {
    background: #fff;
    height: 1px;
    left: 11rem;
    position: absolute;
    right: 11rem;
    top: 50%;
    transform-origin: left
}

@media(max-width: 768px) {
    .home__services__rows__dash {
        left:2rem;
        right: 2rem
    }
}

.home__services__rows__row {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 50%;
    justify-content: flex-end
}

.home__services__rows__row:first-of-type {
    padding-bottom: 3rem
}

@media(max-width: 768px) {
    .home__services__rows__row {
        height:calc(var(--100vh)*.5 - 5rem)
    }
}

.home__services__rows__title {
    text-align: center
}

.home__services__rows__title span {
    clip-path: polygon(0 0, 100% 0, 100% 120%, 0 120%);
    display: inline-block;
    vertical-align: top
}

.home__services__rows__description {
    align-self: flex-start
}

.home__services__rows__description span {
    clip-path: polygon(0 0, 100% 0, 100% 120%, 0 120%);
    display: inline-block;
    vertical-align: top
}

@media(max-width: 768px) {
    .home__services__rows__description br {
        display:none
    }
}

.home__services__media {
    overflow: clip;
    z-index: 5
}

.home__services__media__image {
    -o-object-fit: cover;
    object-fit: cover
}

.home__services__end {
    height: 100%;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 122rem;
    z-index: 6
}

@media(max-width: 768px) {
    .home__services__end {
        width:100%
    }
}

.home__services__end__shape {
    background: #f1efed;
    height: 31rem;
    position: absolute;
    top: 50%;
    transform: translateY(calc(50vh - 100% - 3rem));
    width: 31rem
}

.home__services__end__shape--circle {
    border-radius: 50%;
    left: 0
}

.home__services__end__shape--square {
    right: 0
}

@media(max-width: 768px) {
    .home__services__end__shape {
        height:8.7rem;
        transform: translateY(-50%);
        width: 8.7rem
    }
}

.notfound__wrapper {
    height: 100%;
    padding: 0 8rem
}

.notfound__box {
    display: flex;
    height: calc(var(--100vh) - 6rem);
    justify-content: space-around;
    width: 100%
}

.notfound__content {
    height: 100%
}

.notfound__content__texts {
    display: flex;
    flex-direction: column;
    gap: 1.4rem
}

.notfound__mask {
    flex: 1;
    overflow: clip
}

.notfound__line {
    background: #fff;
    width: 1px
}

.project__content {
    height: auto;
    position: relative;
    z-index: 5
}

@media(max-width: 768px) {
    .project__content {
        min-height:var(--100vh);
        margin-bottom: 0
    }
}

.project__content__wrapper {
    height: auto;
    padding: 2rem
}

@media(max-width: 768px) {
    .project__content__wrapper {
        min-height:var(--100vh)
    }
}

.project__content__section:not(:first-child) {
    margin-top: 2rem
}

.project__content__media {
    overflow: clip;
    position: relative
}

.project__content__media__placeholder {
    padding-top: calc(var(--height)/var(--width)*100%)
}

.project__content__media__image {
    -o-object-fit: cover;
    object-fit: cover
}

.project__content__media-description {
    display: flex;
    gap: 6rem
}

@media(max-width: 768px) {
    .project__content__media-description {
        flex-direction:column
    }

    .project__content__media-description br {
        display: none
    }
}

.project__content__media-description__content {
    flex: 1
}

.project__content__media-description__media {
    flex: 1;
    overflow: clip;
    position: relative
}

.project__content__media-description__media__placeholder {
    padding-top: calc(var(--height)/var(--width)*100%)
}

.project__content__media-description__media__image {
    -o-object-fit: cover;
    object-fit: cover
}

.project__content__description {
    min-height: 60rem
}

@media(max-width: 768px) {
    .project__content__description {
        min-height:0;
        padding-bottom: 6rem
    }

    .project__content__description br {
        display: none
    }
}

.project__content__gallery {
    display: flex;
    gap: 2rem
}

@media(max-width: 768px) {
    .project__content__gallery {
        flex-direction:column
    }
}

.project__content__gallery__media {
    flex: 1;
    overflow: clip;
    position: relative
}

.project__content__gallery__media__placeholder {
    padding-top: calc(var(--height)/var(--width)*100%)
}

.project__content__gallery__media__image {
    -o-object-fit: cover;
    object-fit: cover
}

.project__header {
    --opacity: 1;
    background: #000;
    margin-top: 0
}

@media(max-width: 768px) {
    .project__header {
        height:auto
    }
}

.project__header__media {
    opacity: .85
}

.project__header__media__image {
    -o-object-fit: cover;
    object-fit: cover
}

.project__header__title {
    bottom: 3rem;
    display: block;
    left: 50%;
    position: absolute;
    transform: translate(-50%, 0%);
    white-space: nowrap;
    z-index: 1
}

.project__information {
    color: var(--color)
}

@media(max-width: 768px) {
    .project__information {
        min-height:0
    }
}

.project__information__wrapper {
    background: var(--background)
}

@media(max-width: 768px) {
    .project__information__wrapper {
        min-height:var(--100vh)
    }
}

.project__information__box {
    display: flex;
    height: calc(var(--100vh) - 7rem);
    padding-top: 7rem
}

@media(max-width: 768px) {
    .project__information__box {
        flex-direction:column;
        height: auto;
        padding-top: 0
    }
}

.project__information__header {
    flex: 1
}

.project__information__header p:not(:first-child) {
    margin-top: 4rem
}

.project__information__header ul {
    margin-top: 1rem;
    opacity: .4
}

@media(max-width: 768px) {
    .project__information__header p:not(:first-child) {
        margin-top:2.5rem
    }
}

.project__information__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    transition: transform .7s var(--ease-out-quint)
}

.project__information--active .project__information__content {
    transform: translateY(calc(var(--height) - 3rem))
}

@media(max-width: 768px) {
    .project__information__content {
        margin-top:8rem
    }

    .project__information--active .project__information__content {
        transform: none
    }
}

@media(max-width: 768px) {
    .project__information__highlight br {
        display:none
    }
}

.project__information__button {
    align-items: center;
    display: flex;
    gap: 1rem;
    width: -moz-fit-content;
    width: fit-content
}

.project__information__button:after {
    align-items: center;
    border-color: currentColor rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);
    border-style: solid;
    border-width: .5rem .4rem 0 .4rem;
    content: "";
    height: 0;
    transition: transform .5s var(--ease-out-cubic);
    width: 0
}

.project__information--active .project__information__button:after {
    transform: rotate(-180deg)
}

@media(max-width: 768px) {
    .project__information__button {
        margin-top:2.5rem
    }
}

.project__information__description {
    height: var(--100vh);
    position: absolute;
    top: 100%;
    overflow: clip
}

@media(max-width: 768px) {
    .project__information__description {
        height:auto;
        max-height: 0;
        overflow: clip;
        position: relative;
        top: 0;
        transition: max-height .5s .5s var(--ease-out-cubic)
    }

    .project__information__description br {
        display: none
    }

    .project__information--active .project__information__description {
        max-height: 60rem
    }
}

.project__information__description__wrapper {
    opacity: 0;
    padding-top: 3rem;
    transition: opacity .5s var(--ease-out-cubic)
}

.project__information--active .project__information__description__wrapper {
    opacity: 1;
    transition-delay: .5s
}

.project__information__description__wrapper h1:not(:first-child),.project__information__description__wrapper h2:not(:first-child),.project__information__description__wrapper h3:not(:first-child),.project__information__description__wrapper h4:not(:first-child),.project__information__description__wrapper h5:not(:first-child),.project__information__description__wrapper h6:not(:first-child) {
    margin-top: 3rem
}

.project__information__description__wrapper p:not(:first-child) {
    margin-top: 1rem
}

@media(max-width: 768px) {
    .project__next {
        height:var(--100vh)
    }
}

.project__next__wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
    padding-top: 7rem
}

@media(max-width: 768px) {
    .project__next__wrapper {
        height:var(--100vh)
    }
}

.project__next__link {
    z-index: 1
}

.project__next__progress {
    background: hsla(0,0%,100%,.5);
    flex: 1;
    position: relative;
    width: 1px
}

.project__next__progress__dash {
    background: #fff;
    transform: scaleY(var(--progress))
}

.project__next__progress__dash--top {
    transform-origin: bottom
}

.project__next__progress__dash--bottom {
    transform-origin: top
}

.project__next__title {
    align-items: center;
    display: flex;
    flex: .5;
    justify-content: center;
    white-space: nowrap
}

.project__next__title span {
    clip-path: polygon(-10% 0, 120% 0, 120% 120%, -10% 120%)
}

@media(max-width: 768px) {
    .project__next__title {
        flex-wrap:wrap;
        gap: .5rem 1rem
    }
}

.project__next__media {
    background: #000;
    left: 50%;
    margin-top: 3rem;
    pointer-events: none;
    position: absolute;
    height: 15rem;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 15rem;
    z-index: 1000
}

.project__next__media__image {
    opacity: .85;
    -o-object-fit: cover;
    object-fit: cover;
    pointer-events: none
}

.studio__awards__wrapper {
    display: flex;
    height: auto;
    padding: 0 8rem;
    position: relative;
    z-index: 0
}

.studio__awards__wrapper canvas {
    visibility: hidden
}

@media(max-width: 768px) {
    .studio__awards__wrapper {
        flex-direction:column;
        padding: 0
    }
}

.studio__awards__header {
    display: flex;
    flex-direction: column;
    height: var(--100vh);
    position: sticky;
    top: 0;
    width: 50%
}

.studio__awards__header:before {
    background: #b3aea8;
    content: "";
    left: -100rem;
    width: calc(100% + 100rem)
}

@media(max-width: 768px) {
    .studio__awards__header {
        height:auto;
        padding-top: 100%;
        position: relative;
        width: 100%
    }
}

.studio__awards__header__media {
    left: -8rem;
    overflow: clip;
    width: calc(100% + 8rem)
}

.studio__awards__header__media__image {
    -o-object-fit: cover;
    object-fit: cover
}

.studio__awards__content {
    position: relative;
    width: 50%
}

@media(max-width: 768px) {
    .studio__awards__content {
        width:100%
    }
}

.studio__awards__content__wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    padding: 7rem 3rem 3rem;
    transform: translateY(var(--translate))
}

@media(max-width: 768px) {
    .studio__awards__content__wrapper {
        height:auto;
        padding: 5rem 2rem;
        transform: none
    }
}

.studio__awards__content__section:not(:first-child) {
    margin-top: 3rem
}

.studio__awards__content__title {
    overflow: clip
}

.studio__awards__content__title__text {
    display: block
}

.studio__awards__list {
    background: var(--background);
    overflow: clip;
    margin-top: .7rem;
    max-height: 20.9rem;
    padding-left: 9.4rem;
    position: relative;
    transition: max-height 1s var(--ease-out-cubic)
}

@media(max-width: 768px) {
    .studio__awards__list {
        padding-left:0
    }
}

.studio__awards__list__item {
    overflow: clip
}

.studio__awards__list__item:after {
    background: #fff;
    content: "";
    height: 3.45rem;
    mix-blend-mode: difference;
    opacity: var(--opacity);
    pointer-events: none;
    position: absolute;
    top: 1px;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .7s var(--ease-out-quint);
    width: 100%;
    z-index: 2
}

.studio__awards__list__item--active:after {
    transform: scaleY(1);
    transform-origin: bottom
}

.studio__awards__list__item:not(:first-child) {
    position: relative
}

@media(max-width: 768px) {
    .studio__awards__list__item:after {
        height:5rem
    }
}

.studio__awards__list__item__dash {
    border-top: 1px solid currentColor;
    left: 0;
    position: absolute;
    top: 0;
    transform-origin: left;
    width: 100%;
    z-index: 3
}

.studio__awards__list__item__text {
    align-items: center;
    clip-path: polygon(0 25%, 100% 25%, 100% 80%, 0 80%);
    display: flex;
    height: 3.45rem
}

@media(max-width: 768px) {
    .studio__awards__list__item__text {
        height:5rem
    }
}

.studio__awards__list__item__year {
    display: block;
    transition: padding-left .7s var(--ease-out-quint);
    width: 10.7rem
}

.studio__awards__list__item--active .studio__awards__list__item__year {
    padding-left: 1rem
}

@media(max-width: 768px) {
    .studio__awards__list__item__year {
        flex:1;
        width: auto
    }
}

@media(max-width: 768px) {
    .studio__awards__list__item__title {
        flex:4
    }
}

.studio__awards__button {
    align-items: center;
    display: flex;
    gap: .5rem;
    height: 1.85rem;
    margin-top: 2rem;
    padding-left: 9.4rem;
    position: relative;
    width: 26rem
}

.studio__awards__button:after {
    align-items: center;
    border-color: currentColor rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);
    border-style: solid;
    border-width: .5rem .4rem 0 .4rem;
    content: "";
    height: 0;
    transition: transform .4s ease;
    width: 0
}

.studio__awards__content__section--active .studio__awards__button:after {
    transform: rotate(-180deg)
}

@media(max-width: 768px) {
    .studio__awards__button {
        margin-top:1rem;
        padding-left: 0
    }
}

.studio__awards__button__texts {
    position: relative;
    transition: width .4s ease;
    width: 8.2rem
}

.studio__awards__content__section--active .studio__awards__button__texts {
    width: 6.6rem
}

.studio__awards__button__text {
    transition: opacity .4s ease;
    white-space: nowrap
}

.studio__awards__button__text:first-child {
    opacity: 1;
    transition-delay: .4s
}

.studio__awards__button__text:last-child {
    left: 0;
    position: absolute !important;
    opacity: 0;
    top: 0;
    transition-delay: 0s
}

.studio__awards__content__section--active .studio__awards__button__text:first-child {
    opacity: 0;
    transition-delay: 0s
}

.studio__awards__content__section--active .studio__awards__button__text:last-child {
    opacity: 1;
    transition-delay: .4s
}

.studio__brands__list__text__hover {
    display: block;
    position: relative;
    white-space: nowrap
}

.studio__brands__list__text__hover span {
    display: inline-block;
    transform-origin: center center .4em;
    transition: transform .7s var(--ease-out-quint);
    vertical-align: top
}

.studio__brands__list__text__hover span:nth-child(1) {
    transition-delay: 0.02s
}

.studio__brands__list__text__hover span:nth-child(2) {
    transition-delay: 0.04s
}

.studio__brands__list__text__hover span:nth-child(3) {
    transition-delay: 0.06s
}

.studio__brands__list__text__hover span:nth-child(4) {
    transition-delay: 0.08s
}

.studio__brands__list__text__hover span:nth-child(5) {
    transition-delay: 0.1s
}

.studio__brands__list__text__hover span:nth-child(6) {
    transition-delay: 0.12s
}

.studio__brands__list__text__hover span:nth-child(7) {
    transition-delay: 0.14s
}

.studio__brands__list__text__hover span:nth-child(8) {
    transition-delay: 0.16s
}

.studio__brands__list__text__hover span:nth-child(9) {
    transition-delay: 0.18s
}

.studio__brands__list__text__hover span:nth-child(10) {
    transition-delay: 0.2s
}

.studio__brands__list__text__hover span:nth-child(11) {
    transition-delay: 0.22s
}

.studio__brands__list__text__hover span:nth-child(12) {
    transition-delay: 0.24s
}

.studio__brands__list__text__hover span:nth-child(13) {
    transition-delay: 0.26s
}

.studio__brands__list__text__hover span:nth-child(14) {
    transition-delay: 0.28s
}

.studio__brands__list__text__hover span:nth-child(15) {
    transition-delay: 0.3s
}

.studio__brands__list__text__hover span:nth-child(16) {
    transition-delay: 0.32s
}

.studio__brands__list__text__hover span:nth-child(17) {
    transition-delay: 0.34s
}

.studio__brands__list__text__hover span:nth-child(18) {
    transition-delay: 0.36s
}

.studio__brands__list__text__hover span:nth-child(19) {
    transition-delay: 0.38s
}

.studio__brands__list__text__hover span:nth-child(20) {
    transition-delay: 0.4s
}

.studio__brands__list__text__hover:first-child {
    position: absolute;
    top: 0
}

.studio__brands__list__text__hover:last-child {
    font-style: italic;
    opacity: .6
}

.studio__brands__list__text__hover:last-child span {
    transform: translate3d(0, 100%, 0)
}

.studio__brands__list__item--active .studio__brands__list__text__hover:first-child span,.studio__brands__list__item:hover .studio__brands__list__text__hover:first-child span {
    transform: translate3d(0, -100%, 0)
}

.studio__brands__list__item--active .studio__brands__list__text__hover:last-child span,.studio__brands__list__item:hover .studio__brands__list__text__hover:last-child span {
    transform: translate3d(0, 0, 0)
}

.studio__features__wrapper {
    height: auto;
    padding-bottom: 10rem;
    padding-top: 10rem
}

.studio__features__description p:not(:first-child) {
    margin-top: 2rem
}

.studio__header {
    background: #000;
    margin-top: 0
}

.studio__header__wrapper {
    align-items: flex-end;
    display: flex
}

@media(max-width: 768px) {
    .studio__header__wrapper {
        padding:5rem 2rem 2rem
    }
}

.studio__cover__media {
    left: -99999rem;
    position: absolute
}

.studio__header__media__image {
    -o-object-fit: cover;
    object-fit: cover;
    opacity: .5
}

.studio__header__title {
    flex: 1;
    position: relative;
    text-align: center;
    z-index: 1
}

.studio__highlight__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

@media(max-width: 768px) {
    .studio__highlight__media {
        opacity:.7;
        transform: translateX(-50%);
        width: 200%
    }
}

.studio__highlight__media__image {
    -o-object-fit: cover;
    object-fit: cover
}

.studio__highlight__label {
    color: #000;
    margin-left: 50%;
    margin-bottom: auto;
    padding-left: 3rem;
    position: relative;
    z-index: 1
}

.studio__highlight__label a,.studio__highlight__label em {
    font-style: normal
}

@media(max-width: 768px) {
    .studio__highlight__label {
        margin-left:0;
        padding-left: 0
    }
}

.studio__highlight__title {
    margin-top: auto;
    position: relative;
    width: 90%;
    z-index: 1
}

@media(max-width: 768px) {
    .studio__highlight__title {
        width:100%
    }

    .studio__highlight__title br {
        display: none
    }
}

.studio__media {
    height: var(--100vh);
    margin-top: 0
}

@media(max-width: 768px) {
    .studio__media {
        height:var(--100vh)
    }
}

.studio__media__wrapper {
    display: flex;
    align-items: flex-end;
    position: static
}

.studio__media__media {
    opacity: .85
}

.studio__media__media__image {
    -o-object-fit: cover;
    object-fit: cover
}

.studio__media__description {
    position: relative;
    z-index: 1
}

@media(max-width: 768px) {
    .studio__media__description br {
        display:none
    }
}

.studio__skills__wrapper {
    display: flex;
    justify-content: flex-end;
    padding: 7rem 8rem 3rem
}

@media(max-width: 768px) {
    .studio__skills__wrapper {
        flex-direction:column;
        justify-content: flex-start;
        padding: 5rem 2rem 3rem
    }
}

.studio__skills__item {
    height: calc(var(--100vh) - 10rem);
    position: relative;
    transform: translateZ(0);
    transition: opacity .7s var(--ease-out-quint),width .7s .33s var(--ease-out-quint);
    width: 31.1rem
}

.studio__skills--active .studio__skills__item--active {
    transition-delay: 0s;
    width: calc(100% - 39.4rem)
}

.studio__skills--active .studio__skills__item:not(.studio__skills__item--active) {
    opacity: .25;
    transition-delay: 0s;
    width: 19.7rem
}

@media(max-width: 768px) {
    .studio__skills__item {
        height:auto;
        width: 100%
    }

    .studio__skills--active .studio__skills__item--active {
        width: 100%
    }

    .studio__skills--active .studio__skills__item:not(.studio__skills__item--active) {
        opacity: 1;
        width: 100%
    }
}

.studio__skills__cursor {
    transition: opacity .7s var(--ease-out-quint),visibility .7s var(--ease-out-quint);
    z-index: 1
}

.studio__skills__cursor--plus {
    opacity: 1;
    visibility: visible
}

.studio__skills__cursor--minus {
    opacity: 0;
    visibility: hidden
}

.studio__skills__item--active .studio__skills__cursor--plus {
    opacity: 0;
    visibility: hidden
}

.studio__skills__item--active .studio__skills__cursor--minus {
    opacity: 1;
    visibility: visible
}

.studio__skills__dash {
    border-left: 1px solid #fff;
    height: 100%;
    left: 0;
    position: absolute;
    transform: scaleY(var(--scale));
    transform-origin: top
}

.studio__skills__dash--top {
    top: 0
}

.studio__skills__dash--bottom {
    display: none;
    bottom: 0
}

@media(max-width: 768px) {
    .studio__skills__dash {
        border-top:1px solid #fff;
        height: auto;
        transform: scaleX(var(--scale));
        transform-origin: left;
        width: 100%
    }

    .studio__skills__item:last-child .studio__skills__dash--bottom {
        display: block
    }
}

.studio__skills__header {
    height: 100%;
    left: 2.2rem;
    position: absolute;
    top: 0
}

@media(max-width: 768px) {
    .studio__skills__header {
        display:flex;
        flex-direction: column;
        height: 27rem;
        justify-content: space-between;
        left: 0;
        padding: 2rem 0;
        position: relative
    }
}

.studio__skills__header__label {
    width: 26.5rem
}

.studio__skills__header__label:before {
    border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) currentColor;
    border-style: solid;
    border-width: .7rem 0 .7rem .8rem;
    content: "";
    display: block;
    height: 0;
    margin-bottom: .7rem;
    width: 0
}

.studio__skills__header__label p:not(:first-child) {
    margin-top: 1rem;
    transition: opacity .7s .7s var(--ease-out-quint)
}

.studio__skills__header__label ul {
    list-style: disc;
    margin-top: 1em;
    padding-left: 1em;
    transition: opacity .7s .7s var(--ease-out-quint)
}

.studio__skills--active .studio__skills__header__label p:not(:first-child) {
    opacity: 0;
    transition-delay: 0s
}

.studio__skills--active .studio__skills__header__label ul {
    opacity: 0;
    transition-delay: 0s
}

.studio__skills--active .studio__skills__item--active .studio__skills__header__label {
    transition-delay: .7s
}

.studio__skills--active .studio__skills__item--active .studio__skills__header__label p:not(:first-child) {
    opacity: 1
}

.studio__skills--active .studio__skills__item--active .studio__skills__header__label ul {
    opacity: 1
}

@media(max-width: 768px) {
    .studio__skills__header__label:before {
        display:none
    }
}

.studio__skills__header__title {
    bottom: 0;
    clip-path: polygon(0 0, 100% 0, 100% 130%, 0 130%);
    font-size: 8rem;
    font-style: italic;
    left: 0;
    padding-right: 1rem;
    position: absolute;
    transform: rotate(270deg) translateY(100%);
    transform-origin: left bottom;
    white-space: nowrap
}

@media(max-width: 768px) {
    .studio__skills__header__title {
        font-size:4.6rem;
        padding-right: 0;
        position: relative;
        transform: none
    }

    .studio__skills__header__title:after {
        border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) currentColor;
        border-style: solid;
        border-width: .7rem 0 .7rem .8rem;
        content: "";
        display: block;
        height: 0;
        position: absolute;
        right: .5rem;
        top: 50%;
        transform: translateY(-50%);
        transition: transform .7s var(--ease-out-quint);
        width: 0
    }

    .studio__skills__item--active .studio__skills__header__title:after {
        transform: translateY(-50%) rotate(90deg)
    }
}

.studio__skills__header__title__text {
    display: block
}

.studio__skills__header__title__text span {
    display: inline-block;
    transition: transform .7s .33s var(--ease-out-quint);
    vertical-align: top
}

.studio__skills__item--active .studio__skills__header__title__text span {
    transform: translateY(-120%)
}

.studio__skills__item--active .studio__skills__header__title__text span:nth-child(1) {
    transition-delay: 0.025s
}

.studio__skills__item--active .studio__skills__header__title__text span:nth-child(2) {
    transition-delay: 0.05s
}

.studio__skills__item--active .studio__skills__header__title__text span:nth-child(3) {
    transition-delay: 0.075s
}

.studio__skills__item--active .studio__skills__header__title__text span:nth-child(4) {
    transition-delay: 0.1s
}

.studio__skills__item--active .studio__skills__header__title__text span:nth-child(5) {
    transition-delay: 0.125s
}

.studio__skills__item--active .studio__skills__header__title__text span:nth-child(6) {
    transition-delay: 0.15s
}

.studio__skills__item--active .studio__skills__header__title__text span:nth-child(7) {
    transition-delay: 0.175s
}

.studio__skills__item--active .studio__skills__header__title__text span:nth-child(8) {
    transition-delay: 0.2s
}

.studio__skills__item--active .studio__skills__header__title__text span:nth-child(9) {
    transition-delay: 0.225s
}

.studio__skills__item--active .studio__skills__header__title__text span:nth-child(10) {
    transition-delay: 0.25s
}

.studio__skills__item--active .studio__skills__header__title__text span:nth-child(11) {
    transition-delay: 0.275s
}

.studio__skills__item--active .studio__skills__header__title__text span:nth-child(12) {
    transition-delay: 0.3s
}

.studio__skills__item--active .studio__skills__header__title__text span:nth-child(13) {
    transition-delay: 0.325s
}

.studio__skills__item--active .studio__skills__header__title__text span:nth-child(14) {
    transition-delay: 0.35s
}

.studio__skills__item--active .studio__skills__header__title__text span:nth-child(15) {
    transition-delay: 0.375s
}

.studio__skills__item--active .studio__skills__header__title__text span:nth-child(16) {
    transition-delay: 0.4s
}

.studio__skills__item--active .studio__skills__header__title__text span:nth-child(17) {
    transition-delay: 0.425s
}

.studio__skills__item--active .studio__skills__header__title__text span:nth-child(18) {
    transition-delay: 0.45s
}

.studio__skills__item--active .studio__skills__header__title__text span:nth-child(19) {
    transition-delay: 0.475s
}

.studio__skills__item--active .studio__skills__header__title__text span:nth-child(20) {
    transition-delay: 0.5s
}

@media(max-width: 768px) {
    .studio__skills__item--active .studio__skills__header__title__text span {
        transform:none
    }
}

.studio__skills__content {
    bottom: 0;
    left: 0;
    margin-left: 2.2rem;
    padding: 0 2.2rem;
    position: absolute;
    width: 68rem
}

@media(max-width: 768px) {
    .studio__skills__content {
        max-height:0;
        margin-left: 0;
        padding: 0;
        position: relative;
        transition: max-height .7s var(--ease-out-quint);
        width: 100%
    }

    .studio__skills__item--active .studio__skills__content {
        max-height: 29rem
    }
}

.studio__skills__content__label {
    overflow: clip;
    padding-left: .2rem
}

.studio__skills__content__label>span {
    transform: translateY(100%);
    transition: transform .7s var(--ease-out-quint)
}

.studio__skills__content__label span span {
    align-items: center;
    display: flex;
    gap: 1rem
}

.studio__skills__content__label span span:before {
    background: currentColor;
    border-radius: 50%;
    content: "";
    height: 1.1rem;
    width: 1.1rem
}

.studio__skills__item--active .studio__skills__content__label>span {
    transform: translateY(0);
    transition-delay: .33s
}

.studio__skills__content__description {
    margin-top: 3.6rem
}

.studio__skills__content__description span span {
    transform: translateY(110%) !important;
    transition: transform .7s var(--ease-out-quint)
}

.studio__skills__item--active .studio__skills__content__description span span {
    transform: translateY(0%) !important;
    transition-delay: calc(var(--line)*.1s + .33s)
}

@media(max-width: 768px) {
    .studio__skills__content__description {
        padding:0 0 2rem
    }

    .studio__skills__content__description br {
        display: none
    }
}

.work__header {
    height: calc(1.5*var(--100vh) + 60.7rem + 182.1rem);
    margin-top: 0
}

@media(max-width: 768px) {
    .work__header {
        height:auto
    }
}

.work__header__wrapper {
    display: flex;
    padding-top: 7rem;
    position: sticky;
    top: 0
}

@media(max-width: 768px) {
    .work__header__wrapper {
        flex-direction:column
    }
}

.work__header__content {
    display: flex;
    flex-direction: column;
    height: calc(var(--100vh) - 10rem);
    justify-content: space-between;
    width: 50%
}

@media(max-width: 768px) {
    .work__header__content {
        height:auto;
        width: 100%
    }
}

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

@media(max-width: 768px) {
    .work__header__footer {
        margin-top:9rem
    }
}

.work__header__footer__texts {
    margin-top: .5rem
}

.work__header__gallery {
    height: 100%;
    width: 50%
}

@media(max-width: 768px) {
    .work__header__gallery {
        height:auto;
        margin-top: 2rem;
        width: 100%
    }
}

.work__header__gallery__media {
    border-left: 1px solid var(--color);
    padding-top: 100%;
    position: relative;
    transform: var(--transform)
}

.work__header__gallery__media:first-child:after {
    border-top: 2px solid var(--background);
    content: "";
    left: -1px;
    position: absolute;
    right: -1px;
    top: -1px;
    z-index: 2
}

.work__header__gallery__media:nth-child(even) {
    background: var(--background)
}

.work__header__gallery__media:nth-child(odd) {
    background: #1d1d1b
}

@media(max-width: 768px) {
    .work__header__gallery__media {
        border-left:none;
        transform: none
    }

    .work__header__gallery__media:not(:first-child) {
        display: none
    }
}

.work__header__gallery__media__wrapper {
    overflow: clip
}

.work__header__gallery__media:nth-child(1) .work__header__gallery__media__wrapper,.work__header__gallery__media:nth-child(4) .work__header__gallery__media__wrapper {
    border-radius: 50%;
    transform: scale(0.8)
}

.work__header__gallery__media:nth-child(2) .work__header__gallery__media__wrapper,.work__header__gallery__media:nth-child(5) .work__header__gallery__media__wrapper {
    border-radius: 50%;
    transform: scale(1)
}

.work__header__gallery__media__image {
    -o-object-fit: cover;
    object-fit: cover;
    transform: scale(var(--scale))
}

@media(max-width: 768px) {
    .work__header__gallery__media__image {
        transform:none
    }
}

.work__header__gallery__link {
    display: none;
    margin-top: 2rem
}

@media(max-width: 768px) {
    .work__header__gallery__link {
        display:block
    }
}

.work__project__information {
    display: none
}

.work__projects__row--highlight .work__project__information {
    display: flex
}