.hero {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-inline:9.8rem;padding-block:min(29rem,29vh) min(6.5rem,6.5vh);position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px
}

@media screen and (orientation: portrait) {
    .hero {
        padding-inline:1.5rem;
        padding-block:16.8rem min(4.3rem,4.3vh);position: relative
    }
}

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

.hero .hero__flex {
    display: flex;
    flex-direction: column;
    height: 100%
}

.hero .hero__flex .uptown-link-t1 {
    opacity: 0;
    visibility: hidden
}

.hero .hero__flex .hero__heading {
    display: grid;
    width: fit-content;
    color: #fff;
    font-size: min(18rem,18vh);
    line-height: 1;
    opacity: 0;
    visibility: hidden
}

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

    .hero .hero__flex .hero__heading {
        font-size: 3rem;
    }
}

.hero .hero__flex .hero__heading span:nth-child(2) {
    margin-left: 34rem
}

@media screen and (orientation: portrait) {
    .hero .hero__flex .hero__heading span:nth-child(2) {
        margin-left:10.7rem
    }
}

.hero .hero__flex .hero__description {
    max-width: 42.3rem;
    color: #c1c1c1;
    font-size: 2.5rem;
    line-height: normal;
    margin-top: auto;
    opacity: 0;
    visibility: hidden
}

@media screen and (orientation: portrait) {
    .hero .hero__flex .hero__description {
        max-width:28rem;
        font-size: 1.4rem
    }
}

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

.contact .contact-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-block:min(19rem,19vh);width: 93rem;
    gap: 7.5rem
}

.contact .contact-flex .contact__heading {
    color: #fff;
    text-align: center;
    font-size: 9rem;
    line-height: normal;
    width: 100%
}

.contact .contact-flex .contact__heading span {
    color: #009ca8
}

@media screen and (orientation: portrait) {
    .contact .contact-flex {
        margin-block:6rem 7rem;
        width: 100%;
        gap: 5rem
    }

    .contact .contact-flex .contact__heading {
        color: #fff;
        font-size: 3.5rem
    }
}

.contact__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline:12rem;gap: 2rem;
    width: 100%
}

.contact__form .form-group {
    width: 100%
}

.contact__form .form-group .form-group-field {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column
}

@media screen and (orientation: portrait) {
    .contact__form {
        padding-inline:5rem;
        gap: 1rem
    }
}

.contact__form .form-group .form-group-field .form-label {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none
}

.contact__form .form-group .form-group-field .form-input {
    font-size: 2.5rem;
    line-height: normal;
    color: #fff;
    background: transparent;
    border: none;
    padding-block:2.2rem;border-bottom: 1px solid rgba(255,255,255,.5);
    width: 100%
}

.contact__form .form-group .form-group-field .form-input::placeholder {
    color: #ffffff40
}

.contact__form .form-group .form-group-field .form-input:focus {
    outline: none
}

@media screen and (orientation: portrait) {
    .contact__form .form-group .form-group-field .form-input {
        font-size: 1.5rem;
        padding-block:.8rem;
        width: 100%
    }
}

.contact__form .form-group-field .form-input.is--textarea {
    resize: none;
    padding-block:2.2rem 7rem}

@media screen and (orientation: portrait) {
    .contact__form .form-group-field .form-input.is--textarea {
        padding-block:.8rem 3.5rem
    }
}

.form-group.--is-terms {
    margin-block: 3.5rem 3.5rem
}

.terms-flex {
    display: flex;
    flex-direction: row;
    gap: 2.5rem;
    align-items: center;
    position: relative
}

.form-group .form-group-field #terms.form-input {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    opacity: 0;
    width: clamp(30px,4rem,40px);
    height: clamp(30px,4rem,40px);
    cursor: pointer
}

@media screen and (orientation: portrait) {
    .form-group.--is-terms {
        margin-block:3.5rem 5rem
    }

    .terms-flex {
        gap: 1.2rem
    }

    .form-group .form-group-field #terms.form-input {
        width: 1.6rem;
        height: 1.6rem
    }
}

.form-group .form-group-field .checkmark {
    width: clamp(30px,4rem,40px);
    height: clamp(30px,4rem,40px);
    flex-shrink: 0;
    border: 1px solid #009ca8;
    border-radius: 100%;
    display: grid;
    place-content: center;
    transition: var(--transition)
}

.form-group .form-group-field .checkmark svg {
    width: 1.8rem;
    height: 1.3rem;
    margin-left: .2rem;
    margin-top: .3rem;
    opacity: 0;
    transition: var(--transition);
    pointer-events: none
}

.form-group .form-group-field #terms.form-input:checked~.checkmark {
    background: #009ca8
}

.form-group .form-group-field #terms.form-input:checked~.checkmark svg {
    opacity: 1
}

.form-group .form-group-field .form-label-terms {
    color: #ffffff80;
    font-size: 2.4rem;
    line-height: 128%
}

.form-group .form-group-field .form-label-terms span {
    color: #fff
}

.form-group .form-group-field .form-label-terms a {
    transition: var(--transition)
}

.form-group .form-group-field .form-label-terms a:hover {
    opacity: .7
}

@media screen and (orientation: portrait) {
    .form-group .form-group-field .checkmark {
        width:1.6rem;
        height: 1.6rem
    }

    .form-group .form-group-field .checkmark svg {
        width: .8rem;
        height: .8rem;
        margin-left: .1rem;
        margin-top: .2rem;
        opacity: 0;
        transition: var(--transition)
    }

    .form-group .form-group-field .form-label-terms {
        font-size: 1.3rem;
    }
}

.form-group .form-group-field #city.form-input.is--select {
    position: absolute
}

.form-group .form-group-field .nice-select.form-input.is--select {
    width: 100%;
    height: fit-content;
    border-radius: 0;
    padding-inline:0}

.form-group .form-group-field .nice-select.form-input.is--select:after {
    width: min(1rem,12px);
    height: min(1rem,12px);
    border-color: #fff
}

@media screen and (orientation: portrait) {
    .form-group .form-group-field .nice-select.form-input.is--select:after {
        width:min(.6rem,6px);
        height: min(.6rem,6px)
    }
}

.form-group .form-group-field .nice-select.form-input.is--select .nice-select-dropdown {
    width: 100%;
    background-color: #ffffff6b;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.form-group .form-group-field .nice-select.form-input.is--select .list .option:hover,.form-group .form-group-field .nice-select.form-input.is--select .list .option.selected {
    color: #009ca8;
    background: #fff8
}

.nice-select .current {
    color: #ffffff40
}

.nice-select .current.has-selection {
    color: #fff
}

.contact__form .form-group .form-group-field .form-error {
    margin-top: 1rem
}

.contact__form .form-group .form-group-field .form-error .error-message {
    font-size: clamp(10px,1.3rem,15px);
    color: #ff0000b8
}

@media screen and (orientation: portrait) {
    .contact__form .form-group .form-group-field .form-error {
        margin-top:.3rem
    }

    .contact__form .form-group .form-group-field .form-error .error-message {
        font-size: .9rem
    }
}

.form-group.--is-submit {
    display: flex;
    justify-content: center;
    align-items: center
}

.form-group.--is-submit .CTA-btn {
    cursor: pointer
}

@media screen and (orientation: portrait) {
    .form-group.--is-submit .CTA-btn .CTA-btn__text {
        font-size:1.36rem
    }
}

.directions {
    width: 100%
}

.directions .directions-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12rem
}

.directions .directions-flex .directions-media {
    width: 100%;
    height: min(85rem,85vh);
    position: relative;
    isolation: isolate;
    overflow: hidden
}

.directions .directions-flex .directions-media .directions-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1
}

.directions .directions-flex .directions-media .directions-pin {
    position: absolute;
    top: min(35rem,33vh);
    left: 95rem;
    width: 6.4rem;
    height: 6.9rem
}

@media screen and (orientation: portrait) {
    .directions .directions-flex {
        gap:6rem;
        padding-top: 4rem;
        background: linear-gradient(transparent,#171717 4%,transparent 100%)
    }

    .directions .directions-flex .directions-media {
        width: 100%;
        height: 45rem
    }

    .directions .directions-flex .directions-media .directions-pin {
        position: absolute;
        top: 17.5rem;
        left: 18rem;
        width: 3.8rem;
        height: 4rem
    }
}

.contact-lines {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1
}