html:has(body.page-template-landing-page-chicago) {
    scroll-behavior: smooth;
}

.page-template-landing-page-chicago {
    header .static {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background-color: transparent;

        @media (width > 960px) {
            padding-top: 33px;
        }
    }

    header .static>.container {
        height: auto;

        @media (width > 851px) {
            display: flex;
            align-items: center;

            .toggle-box {
                flex-grow: 1;
            }
        }
    }

    header nav>ul>li>a {
        font-size: 0.875em;
        font-weight: 700;
        color: #fff;
    }

    header .cta a[href*="tel"] {
        font-size: 0.9375rem;
        color: #fff;
    }

    header nav>ul>li:not(:last-child) {
        margin-right: 41px;
    }

    button,
    label {
        cursor: pointer;
    }

    @media (width > 1024px) {
        header .header-logo {
            width: 168px;
            height: 58px;
        }

        .container {
            padding-inline: 80px;
        }
    }

    .invisible {
        visibility: hidden;
        opacity: 0;
    }
}

#content:has(llt-projects-scroll-animation) {
    overflow: clip;
}

.landing-chicago-hero {
    background: var(--_clr-black);
}

.landing-chicago-hero-video-wrapper {
    position: relative;
    isolation: isolate;

    &:before {
        content: '';
        position: absolute;
        z-index: 1;
        inset: 0;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
            linear-gradient(180deg, rgba(16, 24, 32, 0) 65%, #101820 100%);
    }

    .landing-chicago-hero-preview,
    .landing-chicago-hero-video {
        position: absolute;
        inset: 0;
    }

    .landing-chicago-hero-preview img,
    .landing-chicago-hero-video video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .landing-chicago-hero-heading {
        position: relative;
        z-index: 2;
        padding-block: clamp(6.25rem, 24vw, 18.563rem) clamp(3.125rem, 8vw, 5.813rem);
    }

    .landing-chicago-hero-heading>* {
        color: #fff;
    }

    .landing-chicago-hero-heading h1 {
        font-family: "Inter", sans-serif;
        font-size: clamp(2.1875rem, calc(120 / 1280 * 100vw), 7.5rem);
        font-weight: 700;
        line-height: 1.13;
        letter-spacing: -0.02em;
    }
}

.stay-dreaming-font {
    font-family: "stay_dreamingregular";
    font-style: normal;
    font-size: 1.5em;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--_clr-green);
}

llt-video-embed-background {
    position: absolute;
    inset: 0;
    overflow: hidden;


    iframe {
        position: absolute;
        right: 50%;
        bottom: 50%;
        translate: 50% 50%;
        width: 110%;
        height: 110%;
    }
}

.landing-chicago-hero-animation {
    position: relative;
    overflow: clip;

    .container {
        @media (width > 960px) {
            display: grid;
            grid-template-columns: 1fr 49.11%;
            gap: clamp(1.5rem, 8.9vw, 7.188rem);
        }
    }

    .landing-chicago-hero-animation-content {
        padding-block: clamp(6.25rem, 14.3vw, 11.438rem) clamp(3.125rem, 7.2vw, 5.75rem);
    }

    .landing-chicago-hero-heading>* {
        color: #fff;
    }

    .landing-chicago-hero-heading h1 {
        font-family: "Inter", sans-serif;
        font-size: clamp(2.1875rem, calc(55 / 1280 * 100vw), 3.4375rem);
        font-weight: 700;
        line-height: 1.13;
        letter-spacing: -0.02em;
    }

    .landing-chicago-hero-animation-description {
        margin-top: clamp(1.25rem, 4vw, 3.125rem);
        font-family: 'Inter';
        font-size: clamp(1rem, calc(20 / 1280 * 100vw), 1.25rem);
        line-height: 1.45;
        color: #fff;

        display: flex;
        gap: clamp(0.625rem, 2.2vw, 1.75rem);

        &:before {
            content: '';
            display: block;
            border-left: 2px solid var(--_clr-green);
            border-radius: 2px;
            margin-block: 8px 3px;
        }
    }

    .landing-chicago-hero-animation-thumbs {
        position: relative;

        llt-hero-thumbs-animation {

            @media (width > 960px) {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        }
    }

    @media (width <=960px) {
        padding-bottom: 50px;
    }
}

llt-hero-thumbs-animation {
    position: relative;
    display: block;

    @media (width <=960px) {
        margin-inline: -40px;
    }

    &:before {
        --_height: 50px;
        --_inset: 0 auto 0 0;
        --_angle: -90deg;

        content: '';
        position: absolute;
        z-index: 1;
        background: linear-gradient(var(--_angle), rgba(16, 24, 32, 0) 0%, #101820 100%);
        pointer-events: none;
        inset: var(--_inset);
        width: 50px;

        @media (width > 960px) {
            width: 100%;
            height: 183px;
            --_inset: 0 0 auto 0;
            --_angle: 0deg;
        }
    }

    &:after {
        --_height: 50px;
        --_inset: 0 0 0 auto;
        --_angle: 90deg;

        content: '';
        position: absolute;
        z-index: 1;
        background: linear-gradient(var(--_angle), rgba(16, 24, 32, 0) 0%, #101820 100%);
        pointer-events: none;
        width: 50px;
        inset: var(--_inset);

        @media (width > 960px) {
            width: 100%;
            height: 170px;
            --_inset: auto 0 0 0;
            --_angle: 180deg;
        }
    }

    .thumbs-columns {
        display: grid;
        gap: 7px;
        grid-template-columns: repeat(3, 1fr);

        @media (width <=960px) {
            display: none;
        }
    }

    .thumbs-rows {
        display: flex;
        flex-direction: column;
        gap: 10px;

        @media (width > 960px) {
            display: none;
        }
    }

    .thumb-column {
        display: flex;
        flex-direction: column;
        height: max-content;
        gap: 7px;
    }

    .thumb-row {
        display: flex;
        gap: 7px;
        width: max-content;
    }

    .hero-thumb {
        overflow: clip;
        border-radius: 7px;
        line-height: 0;

        img {
            width: 100%;
            max-width: 100%;
            height: 100%;
            object-fit: cover;
            transition: inherit;

            @media (width <=960px) {
                width: auto;
                height: 200px;
            }
        }

        &,
        img {
            aspect-ratio: 179/255;
        }
    }

    a.hero-thumb {

        &:hover,
        &:focus-visible {
            img {
                scale: 1.05;
            }
        }
    }
}

.landing-chicago-call-out {
    position: relative;
    z-index: 1;
    background-color: var(--_clr-black);
    padding-block: clamp(3.125rem, 5vw, 4rem);

    .landing-chicago-call-out-content {
        max-width: 832px;

        &:has([style*="text-align: right"]) {
            margin-inline: auto 0;
        }

        &:has([style*="text-align: center"]) {
            margin-inline: auto;
        }
    }

    .landing-chicago-call-out-content p {
        font-family: 'Inter';
        font-size: clamp(1rem, calc(35 / 1280 * 100vw), 2.1875rem);
        line-height: 1.43;
        font-weight: 300;
        color: #fff;
    }

    .landing-chicago-call-out-content a {
        display: inline;
        text-decoration: underline;
        color: var(--_clr-green);

        &:hover,
        &:focus-visible {
            text-decoration: none;
        }
    }
}

.landing-chicago-popover {
    width: 100%;
    height: 100%;
    overflow: auto;

    button[popovertarget] {
        position: absolute;
        top: 0;
        right: 0;
        background-color: var(--_clr-green);
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-end-start-radius: 5px;

        &:hover,
        &:focus-visible {
            opacity: 0.8;
        }
    }

    .landing-chicago-popover-content {
        width: 100%;
        height: 100%;
        display: grid;
    }
}

.llt-landing-chicago-cta-form {
    background-color: var(--_clr-black);
    padding-block: clamp(3.125rem, 11vw, 8.75rem) clamp(3.125rem, 11.8vw, 9.375rem);
    word-wrap: break-word;

    .llt-landing-chicago-cta-form-inner {
        max-width: 835px;
    }

    p {
        font-family: 'Inter';
        font-size: clamp(1rem, calc(35 / 1280 * 100vw), 2.1875rem);
        line-height: 1.42;
        font-weight: 300;
        color: #fff;
    }

    fieldset :where(p, h1, h2, h3, h4, h6, ul, ol, blockquote):not(:last-child) {
        margin-bottom: clamp(1.25rem, 3.7vw, 2.938rem);
    }

    .cta-radio-button {
        position: relative;

        input {
            margin: 0;
            position: absolute;
        }

        span {
            color: var(--_clr-grey);
            border: 2px solid var(--_clr-grey);
            border-radius: 10px;
            padding-inline: 7.5px;
        }

        input:checked {
            ~span {
                border-color: var(--_clr-green);
                color: #fff;
            }
        }

        &:hover,
        &:has(input:focus-visible) {
            span {
                color: #fff;
            }
        }
    }

    .cta-text-input {
        position: relative;
        min-width: 3ch;

        input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
            width: 0;
            height: 0;
        }

        input::placeholder {
            opacity: 0;
        }

        span {
            text-decoration: underline 2px;
            text-underline-offset: 2px;
            color: var(--_clr-grey);
        }

        &:hover,
        &:has(input:focus-visible) {
            span {
                text-decoration-color: var(--_clr-green)
            }
        }

        input:not(:placeholder-shown) {
            ~span {
                color: #fff;
                text-decoration-color: var(--_clr-green);
            }
        }

        input:focus {
            ~span {
                &:after {
                    content: '';
                    display: inline-block;
                    border-left: 2px solid var(--_clr-green);
                    border-radius: 2px;
                    height: 1em;
                    translate: 0 0.1em;
                    animation: blink-caret 1s ease infinite;
                }
            }
        }

        &.not-valid {
            span {
                color: red !important;
                text-decoration-color: red !important;
            }
        }
    }

    .llt-landing-chicago-cta-form-footer {
        margin-top: clamp(1.25rem, 4.3vw, 3.438rem);
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .llt-landing-chicago-cta-form-footer .form-spinner {
        animation: spinn 1s infinite linear;
    }

    .llt-landing-chicago-cta-form-footer .form-spinner:not(.active) {
        display: none;
    }

    button[type="submit"][disabled] {
        opacity: 0.25;
        pointer-events: none;
    }

    .llt-landing-chicago-cta-form-inner [data-sentence]:not([data-sentence="show"]) {
        display: none;
    }

    .llt-landing-chicago-cta-form-validation {
        margin-block: clamp(1.25rem, 3.7vw, 2.938rem);
        border: 2px solid red;
        border-radius: 10px;
        padding: clamp(1rem, 16vw, 1.25rem) clamp(1.25rem, 4vw, 3.125rem);
    }

    .llt-landing-chicago-cta-form-validation li {
        font-family: 'Inter';
        line-height: 1.5;
        color: #fff;
    }

    .llt-landing-chicago-cta-form-validation:not(.active) {
        display: none;
    }

    .gform_confirmation_wrapper {
        margin-block: clamp(1.25rem, 3.7vw, 2.938rem);
        font-family: 'Inter';
        font-size: clamp(1.25rem, calc(32 / 1280 * 100vw), 2rem);
        line-height: 1.42;
        color: #fff;
    }
}



llt-projects-scroll-animation {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--_clr-black);

    @media (width > 960px) {
        height: calc(200vh * var(--_count, 1));

        &[data-animation="horizontal"] {
            [data-slides] {
                display: flex;
                gap: 200px;
            }

            [data-slide] {
                width: 100%;
                flex: 1 0 100%;
            }
        }

        &[data-animation="vertical"] {
            [data-wrapper] {
                position: relative;

                &:after {
                    content: '';
                    position: absolute;
                    left: calc(var(--_left, 100%) - 2px);
                    top: 0;
                    display: block;
                    border-left: 2px solid var(--_clr-green);
                    border-radius: 2px;
                    height: var(--_height, 0);
                    transition: height 0.3s ease;
                }
            }

            [data-slides] {
                display: grid;
                grid-template-areas: "slide";
            }

            [data-slide] {
                grid-area: slide;
                transition: opacity 0.5s ease;
            }
        }

        [data-sticky] {
            position: sticky;
            top: 3.75rem;
        }
    }

    [data-wrapper] {
        @media (width <=960px) {
            clip-path: none !important;
        }
    }

    [data-slides] {
        transition: translate 0.5s ease;

        @media (width <=960px) {
            translate: 0 0 !important;
        }
    }

    [data-slide] {
        position: relative;
        isolation: isolate;
    }

    [data-mock] {
        position: relative;
        isolation: isolate;
        pointer-events: none;

        @media (width > 960px) {
            position: absolute;
            z-index: -1;
            inset:
                clamp(-5.5rem, -6.9vw, -3.125rem) clamp(-15.875rem, -19.9vw, -3.125rem) clamp(-12.563rem, -15.7vw, -3.125rem) clamp(13.25rem, 16.6vw, 3.125rem);
        }
    }

    [data-mock] img {
        max-width: 100%;
        max-height: 100%;
        height: auto;
        object-fit: contain;

        @media (width > 960px) {
            aspect-ratio: 1242/1087;
        }
    }

    [data-mock] img[aria-hidden="true"] {
        position: absolute;
        inset: 0;
        z-index: -1;
    }

    [data-dots] {
        position: absolute;
        right: 1.75rem;
        bottom: 2.875rem;
        display: flex;
        flex-direction: column;
        gap: 0.6875rem;

        span {
            display: block;
            width: 0.6875rem;
            height: 0.6875rem;
            border-radius: 50%;
            background-color: var(--_clr-dark-grey);

            &.is-active {
                background-color: var(--_clr-green);
            }
        }

        @media (width <=960px) {
            display: none;
        }

        &:after {
            content: '';
            position: absolute;
            top: calc(100% + 25px);
            right: 50%;
            translate: 50% 0;
            height: clamp(6.25rem, calc(250 / 1280 * 100vw), 15.625rem);
            border-left: 2px solid var(--_clr-green);
            border-radius: 2px;
        }
    }

    [data-end] {
        margin-top: auto;
    }
}

.projects-scroll-project-details {
    padding-block: 3.125rem;

    @media (width > 960px) {
        max-width: 454px;
        padding-block: clamp(3.125rem, 6.9vw, 5.5rem) clamp(3.125rem, 17.6vw, 14.063rem);
    }

    .projects-scroll-project-details-logo {
        margin-bottom: clamp(1.25rem, 2.8vw, 2.188rem);
    }

    .projects-scroll-project-details-logo img {
        width: auto;
        max-width: 190px;
        max-height: 70px;
        object-fit: contain;
    }

    .projects-scroll-project-details-copy {
        margin-bottom: clamp(1.25rem, 2.8vw, 2.188rem);
        font-family: 'Inter';
        font-size: clamp(1rem, calc(20 / 1280 * 100vw), 1.25rem);
        line-height: 1.45;
        color: #fff;
    }

    llt-projects-scroll-stat {
        position: relative;
        display: grid;
        padding-left: 23px;

        &:before {
            content: '';
            position: absolute;
            left: 0;
            top: 1rem;
            border: 2px solid var(--_clr-dark-grey);
            border-radius: 2px;
            height: 80%;
        }

        [data-line] {
            position: absolute;
            left: 0;
            top: 1rem;
            border: 2px solid var(--_clr-green);
            border-radius: 2px;
            height: 0;
        }
    }

    [data-stat] {
        grid-area: 1 / 1;
        font-family: 'Inter';
        line-height: 1.5;
        transition: opacity 0.5s ease;

        strong {
            display: block;
            font-size: clamp(1.25rem, calc(50 / 1280 * 100vw), 3.125rem);
            letter-spacing: -0.02em;
            color: #fff;
        }

        >span {
            font-size: 1rem;
            color: var(--_clr-dark-grey);
        }
    }

    a.button.fill {
        margin-top: clamp(1.25rem, 3.6vw, 2.813rem);
    }
}

.landing-chicago-right-scroll {
    padding-top: clamp(6.25rem, calc(140 / 1280 * 100vw), 8.75rem);

    .landing-chicago-right-scroll__logo {
        position: absolute;
        z-index: -1;
        left: 0;
        bottom: 0;
        pointer-events: none;
        translate: -25% 63%;
    }

    .container {
        display: grid;
        gap: 50px 20px;

        @media (width > 960px) {
            grid-template-columns: 1fr 1fr;
        }
    }

    .landing-chicago-right-scroll__left {
        position: relative;
        isolation: isolate;

        &>*:not(:last-child) {
            margin-bottom: clamp(1.25rem, calc(50 / 1280 * 100vw), 3.125rem);
        }

        @media (width > 960px) {
            position: sticky;
            top: 100px;
            align-self: start;
        }
    }

    .landing-chicago-right-scroll__heading {
        font-family: 'Inter', sans-serif;
        font-size: clamp(3.125rem, calc(100 / 1280 * 100vw ), 6.25rem);
        line-height: 1;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--_clr-black);
    }

    .landing-chicago-right-scroll__copy {
        position: relative;

        @media (width > 960px) {
            margin-top: clamp(3.125rem, calc(126 / 1280 * 100vw), 7.875rem);
        }

        &>* {
            font-family: 'Inter', sans-serif;
            color: var(--_clr-black);
        }

        &>*:not(:last-child) {
            margin-bottom: clamp(1.25rem, calc(60 / 1280 * 100vw), 3.75rem);
        }

        p {
            font-size: clamp(1.125rem, calc(35 / 1280 * 100vw), 2.1875rem);
            line-height: 1.28;
            font-weight: 300;

            strong {
                font-weight: 700;
            }
        }
    }

    &:after {
        content: '';
        display: block;
        background-image: linear-gradient(0deg, #FFF 33.42%, rgba(255, 255, 255, 0.00) 110.34%);
        height: clamp(6.25rem, calc(288 / 1280 * 100vw), 18rem);
        position: sticky;
        bottom: 0;
        pointer-events: none;
    }

    &+.icons-section {
        padding-top: 0;
    }
}

.icons-section {
    padding-block:
        clamp(3.125rem, calc(140 / 1280 * 100vw), 8.75rem) clamp(3.125rem, calc(155 / 1280 * 100vw), 9.688rem);

    ul {
        list-style: none;
        display: grid;
        gap:
            clamp(1.25rem, calc(100 / 1280 * 100vw), 6.25rem) clamp(1.25rem, calc(60 / 1280 * 100vw), 3.75rem);
        grid-template-columns: repeat(var(--_columns, 1), 1fr);

        @media (width > 700px) {
            --_columns: 2;
        }

        @media (width > 960px) {
            --_columns: 3;
        }
    }

    li {
        display: flex;
        gap: 20px;
        align-items: center;
        translate: 0 100%;
        opacity: 0;
        transition:
            translate 0.5s var(--_delay, 0ms) ease,
            opacity 0.5s var(--_delay, 0ms) ease;

        &.is-visible {
            translate: 0 0;
            opacity: 1;
        }
    }

    li>div {
        &:first-child {
            flex-shrink: 0;

            img {
                width: clamp(3.125rem, calc(75 / 1280 * 100vw), 4.688rem);
                height: clamp(3.125rem, calc(75 / 1280 * 100vw), 4.688rem);
                object-fit: contain;
            }
        }

        &:last-child {
            &>* {
                font-family: 'Inter', sans-serif;
                color: var(--_clr-dark-grey);
            }
        }
    }
}


.landing-chicago-full-width-image-video {
    position: relative;
    /* overflow: clip; */

    &:before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(16, 24, 32, 0) 65%, #101820 100%);
        pointer-events: none;
        z-index: 1;
    }
}

.landing-chicago-full-width-video {
    position: relative;
    isolation: isolate;
    background-color: var(--_clr-black);
    overflow: clip;

    &>img {
        object-fit: cover;
        aspect-ratio: 1280/650;
        width: 100%;
        height: auto;
    }

    video,
    iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    video {
        object-fit: cover;
    }
}

llt-full-width-image-slider {
    position: relative;

    [data-slide] {
        line-height: 0;
    }

    img {
        aspect-ratio: 1280/650;
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .slick-dots {
        position: absolute;
        left: clamp(1rem, calc(24 / 1280 * 100vw), 1.5rem);
        top: clamp(1.25rem, calc(46 / 1280 * 100vw), 2.875rem);
        z-index: 3;
        display: flex;
        flex-direction: column;
        gap: 11px;

        li {
            margin-right: 0 !important;
            width: 11px;
            height: 11px;
            background-color: #F1F1F1;

            &.slick-active {
                background-color: var(--_clr-green);
            }
        }

        button {
            padding: 0;
        }

        &:before {
            content: '';
            position: absolute;
            bottom: calc(100% + 18px);
            right: 50%;
            translate: 50% 0;
            border-left: 2px solid var(--_clr-green);
            border-radius: 2px;
            display: block;
            height: clamp(6.25rem, calc(143 / 1280 * 100vw), 8.938rem);
        }
    }

    [data-arrows] {
        position: absolute;
        inset: 0;
        z-index: 1;
        overflow: clip;
    }

    .slick-arrow {
        top: 0;
        width: 50%;
        height: 100%;
        border-radius: 0;
        transform: translateY(0);
        background: transparent;

        &:before {
            --_size: clamp(3.125rem, calc(84 / 1280 * 100vw), 5.25rem);
            position: absolute;
            left: var(--_left, 50%);
            top: var(--_top, 50%);
            opacity: 0;
            width: var(--_size);
            height: var(--_size);
            border: 2px solid var(--_clr-green);
            border-radius: 50%;
            background: url("data:image/svg+xml,%3Csvg width='16' height='28' viewBox='0 0 16 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 27L14 14L1 0.999998' stroke='%2378D64B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A") no-repeat 55% center / 20%;
            pointer-events: none;
            transition: none;
        }

        &:hover {
            transform: translateY(0) scale(1);

            &:before {
                opacity: 1;
            }
        }
    }

    .slick-prev {
        left: 0;

        &:before {
            transform: translate(-80%, -80%) rotate(180deg) !important;
        }
    }

    .slick-next {
        right: 0;

        &:before {
            transform: translate(-80%, -80%) rotate(0deg) !important;
        }
    }
}

.landing-chicago-works-slider {
    padding-block:
        clamp(3.125rem, calc(140 / 1280 * 100vw), 8.75rem) clamp(3.125rem, calc(75 / 1280 * 100vw), 4.688rem);
    overflow: clip;


    .landing-chicago-works-slider__heading {
        margin-bottom: clamp(3.125, calc(80 / 1280 * 100vw), 5rem);

        &>* {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            color: var(--_clr-black);

            strong {
                font-weight: 700;
            }
        }

        h2 {
            font-size: clamp(2.375rem, calc(100 / 1280 * 100vw), 6.25rem);
            line-height: 1;
            letter-spacing: -0.02em;
            text-wrap: balance;
        }

        h3 {
            font-size: clamp(2rem, calc(60 / 1280 * 100vw), 3.75rem);
            line-height: 1.16;
            letter-spacing: -0.02em;
            text-wrap: balance;
        }
    }

    .landing-chicago-works-slider__button {
        margin-top: clamp(3.125rem, calc(120 / 1280 * 100vw), 7.5rem);
        text-align: center;
    }
}

llt-works-slider {
    [data-slides] {
        margin-inline: -10px;
    }

    [data-slides] .slick-list {
        overflow: visible;
    }

    [data-slide] {
        position: relative;
        padding-inline: 10px;

        &:has(:where(:hover, :focus-visible)) {
            img {
                scale: 1.1;
            }
        }

        &:nth-child(even) {
            translate: 0 clamp(0.625rem, calc(45 / 1280 * 100vw), 2.813rem);
        }
    }

    [data-slide]>*:not(:last-child) {
        margin-bottom: 1.25rem;
    }

    [data-slide]>div:first-child {
        overflow: clip;
    }

    [data-slide] img {
        aspect-ratio: 391/316;
        width: 100%;
        height: auto;
        object-fit: cover;
        transition: scale 0.3s ease;
    }

    [data-slide] a {
        font-family: 'Inter', sans-serif;
        font-weight: 700;
        font-size: clamp(1rem, calc(24 / 1280 * 100vw), 1.5rem);
        line-height: 1;
        color: var(--_clr-black);

        &:before {
            content: '';
            position: absolute;
            inset: 0;
        }
    }

    [data-navigation] {
        margin-top: clamp(2.5rem, calc(130 / 1280 * 100vw), 8.125rem);
        display: flex;
        gap: 15px;
        align-items: center;
        justify-content: center;
    }

    .slick-dots {
        position: relative;
        flex-grow: 1;
        display: flex !important;

        @media (width < 700px) {
            display: none !important;
        }

        li {
            margin-right: 0 !important;
            flex: 1;
            background-color: transparent;
            border-radius: 4px;
            height: 4px;

            &.slick-active,
            &:has(:where(:hover, :focus-visible)) {
                background-color: var(--_clr-green);
            }
        }

        &:before {
            content: '';
            position: absolute;
            left: 0;
            bottom: 50%;
            translate: 0 50%;
            width: 100%;
            border-top: 2px solid #F5F5F5;
            border-radius: 2px;
        }
    }

    [data-arrows] {
        order: 1;
        flex-shrink: 0;
        display: flex;
        gap: 10px;
    }

    .slick-arrow {
        position: static;
        transform: translate(0);
        box-shadow: none;
        border-radius: 0;
        background-color: var(--_clr-green);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.3s ease-in-out;

        &:hover {
            transform: translate(0) scale(1);
        }

        &:hover,
        &:focus-visible {
            opacity: 0.8;
        }

        &:before {
            margin: 0;
            border: none;
            width: 14px;
            height: 14px;
            background: url("data:image/svg+xml,%3Csvg width='13' height='22' viewBox='0 0 13 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 21L11 11L1 0.999999' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A") no-repeat 65% center / contain;
        }
    }

    .slick-prev {
        &:before {
            transform: rotate(180deg) !important;
        }
    }

    .slick-next {
        &:before {
            transform: rotate(0deg) !important;
        }
    }
}


@keyframes blink-caret {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@keyframes spinn {
    to {
        rotate: 360deg;
    }
}

@keyframes line-grow {
    from {
        height: 0;
    }

    to {
        height: 80%;
    }
}


@font-face {
    font-family: "stay_dreamingregular";
    src: url("../fonts/stay-dreaming/stay_dreaming_regular-webfont.eot");
    src: url("../fonts/stay-dreaming/stay_dreaming_regular-webfont.eot?#iefix") format("embedded-opentype"),
        url("../fonts/stay-dreaming/stay_dreaming_regular-webfont.woff2") format("woff2"),
        url("../fonts/stay-dreaming/stay_dreaming_regular-webfont.woff") format("woff"),
        url("../fonts/stay-dreaming/stay_dreaming_regular-webfont.ttf") format("truetype"),
        url("../fonts/stay-dreaming/stay_dreaming_regular-webfont.svg#stay_dreamingregular") format("svg");
    font-weight: normal;
    font-style: normal;
}

/* @font-face {
    font-family: "Avenir Next";
    src: url("../fonts/avenir-next/AvenirNextCyr-Demi.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Avenir Next";
    src: url("../fonts/avenir-next/AvenirNextCyr-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
} */

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/Inter-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/Inter-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/Inter-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/Inter-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/Inter-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}