.hero {
    width: 100%;
    height: 100vh;
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block:min(38rem,38vh);position: relative
}

@media screen and (orientation: portrait) {
    .hero {
        min-height:500px;
        padding-block:0rem;position: relative;
        overflow: hidden
    }
}

.hero .hero-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: -1;
    mask-image: linear-gradient(black 50%,transparent);
    -webkit-mask-image: linear-gradient(black 50%,transparent);
    opacity: 0;
    visibility: hidden
}

.hero .hero-flex {
    display: flex;
    flex-direction: column;
    align-items: center
}

@media screen and (orientation: portrait) {
    .hero .hero-flex {
        width:100%
    }
}

.hero .hero-flex .uptown-link-t1 {
    position: relative;
    margin-bottom: 3.5rem;
    opacity: 0;
    visibility: hidden
}

@media screen and (orientation: portrait) {
    .hero .hero-flex .uptown-link-t1 {
        margin-bottom:.7rem
    }
}

.hero .hero-flex .hero-heading {
    color: #fdfdfd;
    font-size: var(--font-180);
    line-height: 80%;
    text-transform: uppercase;
    margin-bottom: 4.5rem;
    opacity: 0;
    visibility: hidden
}

@media screen and (orientation: portrait) {
    .hero .hero-flex .hero-heading {
        font-size:5rem;
        line-height: 120%;
        margin-bottom: 1rem
    }
}

.hero .hero-flex .hero-description {
    color: #fdfdfd;
    text-align: center;
    font-size: var(--font-25);
    line-height: normal;
    max-width: 77.6rem;
    margin-bottom: 5rem;
    opacity: 0;
    visibility: hidden
}

@media screen and (orientation: portrait) {
    .hero .hero-flex .hero-description {
        font-size:1.4rem;
        max-width: 30.5rem;
        margin-bottom: 2.6rem
    }
}

.hero .hero-flex .CTA-btn {
    opacity: 0;
    visibility: hidden
}

.hero .hero-flex .CTA-btn .CTA-btn__border:after {
    background: linear-gradient(90deg,#fff,#fff0 10%,#fff0 89.92%,#fff)
}

.hero .hero-flex .CTA-btn .CTA-btn__inner {
    display: flex;
    align-items: center;
    padding: 1rem 2.5rem;
    gap: 1.5rem
}

@media screen and (orientation: portrait) {
    .hero .hero-flex .CTA-btn .CTA-btn__inner {
        gap:.8rem;
        padding: 1rem 2.5rem
    }
}

.hero .hero-flex .CTA-btn .CTA-btn__icon {
    background: #fff;
    width: 1rem;
    height: 1rem
}

@media screen and (orientation: portrait) {
    .hero .hero-flex .CTA-btn .CTA-btn__icon {
        width:.8rem;
        height: .8rem
    }
}

.hero .hero-flex .CTA-btn .CTA-btn__text {
    color: #fff
}

.hero .hero__lines {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(black 80%,transparent);
    mask-image: linear-gradient(black 80%,transparent)
}

.creating {
    width: 100%;
    padding-block:17.5rem 10rem;position: relative
}

@media screen and (orientation: portrait) {
    .creating {
        padding-block:6rem 12rem
    }
}

.creating .creating__lines {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(transparent,black 10%,black 90%,transparent);
    mask-image: linear-gradient(transparent,black 10%,black 90%,transparent);
    opacity: .6;
    top: 0;
    left: 0;
    width: 100%;
    height: auto
}

@media screen and (orientation: portrait) {
    .creating .creating__lines {
        display:block;
        opacity: 1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0
    }
}

.creating .creating-flex {
    display: flex;
    flex-direction: column;
    align-items: center
}

.creating .creating-flex .creating-text {
    position: relative;
    color: #fdfdfd;
    text-align: center;
    font-size: 8rem;
    line-height: normal;
    text-transform: uppercase;
    max-width: 134.6rem;
    z-index: 1
}

@media screen and (orientation: portrait) {
    .creating .creating-flex .creating-text {
        font-size:2.5rem;
        max-width: 33.5rem
    }
}

.creating .creating-flex .creating-image {
    width: 75.2rem;
    height: 56.4rem;
    flex-shrink: 0;
    margin-top: -9rem
}

.creating .creating-flex .creating-image img {
    display: inline-block
}

@media screen and (orientation: portrait) {
    .creating .creating-flex .creating-image {
        width:30rem;
        height: 22.3rem;
        margin-top: -6rem
    }
}

.mission {
    padding-inline:19.4rem;position: relative
}

@media screen and (orientation: portrait) {
    .mission {
        padding-inline:2rem
    }
}

.mission .mission__lines {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(transparent,black 10%,black 90%,transparent);
    mask-image: linear-gradient(transparent,black 10%,black 90%,transparent)
}

@media screen and (orientation: portrait) {
    .mission .mission__lines {
        display:block;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        -webkit-mask-image: linear-gradient(transparent,#000 10%,#000);
        mask-image: linear-gradient(transparent,#000 10%,#000)
    }
}

.mission .mission-flex {
    display: flex;
    flex-direction: column;
    width: 100%
}

.mission .mission-flex .mission-media {
    position: relative;
    margin-bottom: 12rem;
    width: 100%
}

@media screen and (orientation: portrait) {
    .mission .mission-flex .mission-media {
        margin-bottom:10rem;
        width: 100%;
        height: 17.2rem
    }
}

.mission .mission-flex .mission-media .mission-image {
    width: 78%
}

@media screen and (orientation: portrait) {
    .mission .mission-flex .mission-media .mission-image {
        width:31.5rem;
        height: 100%
    }
}

@media screen and (min-width: 482px)and (max-width:991px)and (orientation:portrait) {
    .mission .mission-flex .mission-media .mission-image {
        width:78%
    }
}

.mission .mission-flex .mission-media video {
    position: absolute;
    top: 56%;
    right: 0rem;
    width: 42%;
    height: auto
}

@media screen and (orientation: portrait) {
    .mission .mission-flex .mission-media video {
        top:10.8rem;
        left: 14rem;
        width: 20rem;
        height: 12.5rem
    }
}

@media screen and (min-width: 482px)and (max-width:991px)and (orientation:portrait) {
    .mission .mission-flex .mission-media video {
        top:56%;
        right: 0rem;
        left: auto;
        width: 42%;
        height: auto
    }
}

.mission .mission-flex .mission-heading {
    color: #fff;
    font-size: var(--font-50);
    font-weight: 5;
    line-height: 105%;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 3rem
}

@media screen and (orientation: portrait) {
    .mission .mission-flex .mission-heading {
        font-size:3.5rem;
        letter-spacing: .6px;
        margin-bottom: 1.4rem
    }
}

.mission .mission-flex .mission-text {
    width: 57rem;
    color: #ffffff80;
    font-size: var(--font-25);
    line-height: 128%;
    margin-bottom: 5.8rem
}

.mission .mission-flex .mission-text span {
    color: #fdfdfd
}

@media screen and (orientation: portrait) {
    .mission .mission-flex .mission-text {
        width:28rem;
        font-size: 1.4rem;
        line-height: 138%;
        margin-bottom: 2.6rem
    }
}

.mission .mission-flex .CTA-btn {
    margin-top: .5rem
}

@media screen and (orientation: portrait) {
    .mission .mission-flex .CTA-btn {
        margin-top:.3rem
    }
}

.mission .mission-flex .CTA-btn .CTA-btn__inner {
    display: flex;
    align-items: center;
    padding: 1.5rem 2.5rem;
    gap: 1rem
}

@media screen and (orientation: portrait) {
    .mission .mission-flex .CTA-btn .CTA-btn__inner {
        padding:1rem 2.5rem;
        gap: .8rem
    }
}

.mission .mission-flex .CTA-btn .CTA-btn__icon {
    width: 1rem;
    height: 1rem
}

@media screen and (orientation: portrait) {
    .mission .mission-flex .CTA-btn .CTA-btn__icon {
        width:.8rem;
        height: .8rem
    }
}

.vision {
    width: 100%;
    height: 100vh;
    padding-inline:19.5rem 10.5rem;padding-block:16rem;position: relative
}

@media screen and (orientation: portrait) {
    .vision {
        height:fit-content;
        max-height: fit-content;
        padding-inline:2rem;padding-block:11rem 8.5rem}
}

.vision .vision__lines {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(transparent,black 20%,black 50%,transparent);
    mask-image: linear-gradient(transparent,black 20%,black 50%,transparent)
}

@media screen and (orientation: portrait) {
    .vision .vision__lines {
        -webkit-mask-image:linear-gradient(transparent,black 00%,black 90%,transparent);
        mask-image: linear-gradient(transparent,black 00%,black 90%,transparent)
    }
}

.vision .vision-flex {
    display: flex;
    gap: 20rem;
    align-items: flex-start
}

@media screen and (orientation: portrait) {
    .vision .vision-flex {
        display:flex;
        gap: 3.8rem;
        flex-direction: column-reverse
    }
}

.vision .vision-flex .vision-content {
    display: flex;
    flex-direction: column;
    gap: 3.3rem;
    margin-top: auto
}

@media screen and (orientation: portrait) {
    .vision .vision-flex .vision-content {
        gap:2rem;
        margin-top: 0
    }
}

.vision .vision-flex .vision-content .vision-heading {
    color: #fff;
    font-size: var(--font-50);
    line-height: 105%;
    letter-spacing: 1px;
    text-transform: uppercase
}

@media screen and (orientation: portrait) {
    .vision .vision-flex .vision-content .vision-heading {
        font-size:3.5rem;
        letter-spacing: .6px
    }
}

.vision .vision-flex .vision-content .vision-text {
    color: #ffffff80;
    font-size: var(--font-25);
    line-height: 128%
}

@media screen and (orientation: portrait) {
    .vision .vision-flex .vision-content .vision-text {
        font-size:1.4rem;
        line-height: 138%
    }
}

.vision .vision-flex .vision-content span {
    color: #fff
}

.vision .CTA-btn {
    margin-top: .5rem
}

@media screen and (orientation: portrait) {
    .vision .CTA-btn {
        margin-top:.3rem
    }
}

.vision .vision-flex .CTA-btn .CTA-btn__inner {
    display: flex;
    align-items: center;
    padding: 1.5rem 2.5rem;
    gap: 1rem
}

@media screen and (orientation: portrait) {
    .vision .vision-flex .CTA-btn .CTA-btn__inner {
        padding:1rem 2.5rem;
        gap: .8rem
    }
}

.vision .vision-flex .CTA-btn .CTA-btn__icon {
    width: 1rem;
    height: 1rem
}

.vision .vision-flex .CTA-btn .CTA-btn__text {
    color: #fff
}

@media screen and (orientation: portrait) {
    .vision .vision-flex .CTA-btn .CTA-btn__icon {
        width:.8rem;
        height: .8rem
    }
}

.vision .vision-flex .vision-image {
    width: min(85rem,85vh);
    width: 52%;
    height: min(65.3rem,65.3vh);
    flex-shrink: 0;
    overflow: hidden;
    position: relative
}

.vision .vision-flex .vision-image img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: opacity 1s ease-out,transform 1s ease-out
}

.vision .vision-flex .vision-image img[data-status=in] {
    opacity: 1;
    z-index: 1;
    transform: scale(1)
}

.vision .vision-flex .vision-image img[data-status=out] {
    opacity: 0;
    transform: scale(1.1)
}

@media screen and (orientation: portrait) {
    .vision .vision-flex .vision-image {
        width:100%;
        height: 26.6rem
    }
}

.safety {
    width: 100%;
    height: 100vh;
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block:min(38rem,38vh);position: relative
}

@media screen and (orientation: portrait) {
    .safety {
        padding-block:20rem;
        max-height: 900px
    }
}

.safety .safety-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: -1;
    mask-image: linear-gradient(black 50%,transparent);
    -webkit-mask-image: linear-gradient(black 50%,transparent)
}

.safety .safety-flex {
    display: flex;
    flex-direction: column;
    align-items: center
}

.safety .safety-flex .uptown-link-t1 {
    position: relative;
    margin-bottom: 3.5rem
}

@media screen and (orientation: portrait) {
    .safety .safety-flex .uptown-link-t1 {
        margin-bottom:.7rem;
        gap: .6rem
    }

    .safety .safety-flex .uptown-link-t1-icon {
        width: 1rem;
        height: 1rem
    }

    .safety .safety-flex .uptown-link-t1-text {
        font-size: 1.4rem
    }
}

.safety .safety-flex .safety-heading {
    color: #fdfdfd;
    font-size: var(--font-112);
    line-height: 80%;
    text-transform: uppercase;
    margin-bottom: 4.5rem
}

@media screen and (orientation: portrait) {
    .safety .safety-flex .safety-heading {
        font-size:5rem;
        line-height: 120%;
        margin-bottom: 1rem;
        text-align: center;
    }
}

.safety .safety-flex .safety-description {
    color: #fdfdfd;
    text-align: center;
    font-size: var(--font-20);
    line-height: normal;
    max-width: 62.2rem;
    margin-bottom: 4.5rem
}

@media screen and (orientation: portrait) {
    .safety .safety-flex .safety-description {
        font-size:1.4rem;
        max-width: 90%;
        margin-bottom: 2.5rem
    }
}

.safety .safety-flex .CTA-btn .CTA-btn__inner {
    display: flex;
    align-items: center;
    padding: 1.5rem 2.5rem;
    gap: 1rem
}

.safety .safety-flex .CTA-btn .CTA-btn__icon {
    width: 1rem;
    height: 1rem
}

@media screen and (orientation: portrait) {
    .safety .safety-flex .CTA-btn .CTA-btn__inner {
        padding:1rem 2.5rem;
        gap: .8rem
    }

    .safety .safety-flex .CTA-btn .CTA-btn__icon {
        width: .8rem;
        height: .8rem
    }
}

.team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4.3rem;
    position: relative
}

@media screen and (orientation: portrait) {
    .team {
        gap:5rem
    }
}

.team-heading {
    color: #fff;
    text-align: center;
    font-size: var(--font-50);
    line-height: 120%;
    text-transform: uppercase;
    margin-bottom: min(4rem,4vh)
}

@media screen and (orientation: portrait) {
    .team-heading {
        font-size:3.5rem;
        margin-bottom: 0
    }
}

.team .team__lines {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(transparent,black 20%,black 50%,transparent);
    mask-image: linear-gradient(transparent,black 20%,black 50%,transparent)
}

.team .team__lines img {
    object-fit: contain
}

@media screen and (orientation: portrait) {
    .team .team__lines {
        -webkit-mask-image:linear-gradient(transparent,black 10%,black 80%,transparent);
        mask-image: linear-gradient(transparent,black 10%,black 80%,transparent)
    }
}

.team .CTA-btn .CTA-btn__inner {
    display: flex;
    align-items: center;
    padding: 1.5rem 2.5rem;
    gap: 1rem
}

.team .CTA-btn .CTA-btn__icon {
    width: 1rem;
    height: 1rem
}

@media screen and (orientation: portrait) {
    .team .CTA-btn .CTA-btn__inner {
        padding:1rem 2.5rem;
        gap: .8rem
    }

    .team .CTA-btn .CTA-btn__icon {
        width: .8rem;
        height: .8rem
    }
}

.flick-group {
    position: relative;
    width: 100%;
    height: fit-content;
    padding-top: min(83rem,83vh)
}

@media screen and (orientation: portrait) {
    .flick-group {
        padding-top:23rem
    }
}

.flick-group__collection {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    user-select: none;
}

.flick-group__list {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative
}

.flick-group__item {
    position: absolute
}

.flick-card {
    color: #fff;
    -webkit-user-select: none;
    user-select: none;
    position: relative;
    overflow: hidden;
    width: 49rem;
    flex-shrink: 0
}

@media screen and (orientation: portrait) {
    .flick-card {
        width:13rem
    }
}

.flick-card__media {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    top: 0;
    left: 0;
    height: min(83rem,83vh)
}

@media screen and (orientation: portrait) {
    .flick-card__media {
        height:23rem
    }
}

.cover-image {
    pointer-events: none;
    object-fit: cover;
    -webkit-user-select: none;
    user-select: none;
    width: 100%;
    height: min(72.9rem,72.9vh);
    position: absolute;
    top: 0;
    left: auto
}

.cover-image:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #171717;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: .6;
    transition: var(--transition)
}

@media screen and (orientation: portrait) {
    .cover-image {
        width:100%;
        height: 19rem
    }
}

.flick-card__btn {
    justify-content: center;
    align-items: center;
    width: 100%;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 0;
    left: 0
}

.flick-card__btn-name {
    color: #fff;
    text-align: center;
    font-size: var(--font-25);
    line-height: normal;
    margin-bottom: 2px;
    text-transform: uppercase
}

.flick-card__btn-rol {
    color: #ffffff80;
    text-align: center;
    font-size: var(--font-20);
    line-height: normal;
    text-transform: capitalize
}

@media screen and (orientation: portrait) {
    .flick-card__btn-name {
        font-size:1.2rem;
        margin-bottom: 5px
    }

    .flick-card__btn-rol {
        font-size: 1rem
    }
}

[data-flick-cards-dragger] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    touch-action: pan-y;
    pointer-events: none !important;
}

[data-flick-cards-item-status] .flick-card__media {
    transition: opacity .2s ease
}

[data-flick-cards-item-status="2-before"] .flick-card__media,[data-flick-cards-item-status="2-after"] .flick-card__media {
    transition: opacity .2s ease;
    opacity: .75
}

[data-flick-cards-item-status=active] .flick-card__media .cover-image:after {
    opacity: 0
}

[data-flick-cards-item-status] .flick-card__btn {
    transition: opacity .4s cubic-bezier(.625,.05,0,1),1s cubic-bezier(.16,1,.3,1);
    opacity: 0;
    transform: translateY(50%) rotate(.001deg)
}

[data-flick-cards-item-status=active] .flick-card__btn {
    opacity: 1;
    transform: translate(0) rotate(.001deg)
}