:root {
    --_clr-black: #101820;
    --_clr-green: #78D64B;
    --_clr-grey: #48484A;
    --_clr-dark-grey: #6D6E71;
    --_crl-grey6C: #6C6C6C;
    --_clr-greyBD: #BDBDBD;

    --_padding-offset: clamp(2.5rem, calc((100% - 1280px) / 2), 5rem);
}

body.home #content {
    font-family: 'Inter', sans-serif;
    overflow: clip;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        font-family: 'Inter', sans-serif;
    }


    .button:not(.button-on-anchor) {
        font-family: 'Inter', sans-serif;
        font-size: 0.875rem;
        line-height: 1.214;
        font-weight: 700;
        color: var(--_clr-green);

        border-radius: 100px;
        border: 2px solid var(--_clr-green);
        padding: 1rem;
        text-transform: unset;
        text-align: center;

        &.fill {
            background-color: var(--_clr-green);
            color: #fff;

            &:hover,
            &:focus-visible {
                background-color: transparent;
                color: var(--_clr-green);
            }
        }

        &:hover,
        &:focus-visible {
            background-color: var(--_clr-green);
            color: #fff;
        }

        @media (width > 768px) {
            padding: 1.125rem;
        }
    }
}

header .sticky .header-logo img {
    filter: brightness(0) invert(1);
}

.landing-chicago-testimonials {
    position: relative;
    isolation: isolate;
    padding-block:
        clamp(3.125rem, calc(80 / 1280 * 100vw), 5rem) clamp(6.25rem, calc(150 / 1280 * 100vw), 9.375rem);

    &>svg {
        position: absolute;
        z-index: -1;
        inset: 8% 0 auto;
        margin-inline: auto;
    }

    .container {
        max-width: 1084px;
    }
}

llt-testimonials-slider {
    text-align: center;

    .slick-dots {
        margin-top: clamp(1.25rem, calc(35 / 1280 * 100vw), 2.188rem);

        li {
            width: 13px;
            height: 13px;
            background-color: transparent;
            border: 1px solid #D0D0CE;

            &.slick-active {
                background-color: #FEDD00;
                border-color: #FEDD00;
            }
        }

        button {
            padding: 0;
        }
    }
}

.landing-chicago-testimonials-slide {

    &>* {
        font-family: 'Inter', sans-serif;
    }

    p {
        margin-bottom: clamp(1.25rem, calc(35 / 1280 * 100vw), 2.188rem);
        color: var(--_clr-black);
        font-size: clamp(1.25rem, calc(26 / 1280 * 100vw), 1.625rem);
        line-height: 1.42;
        font-weight: 500;
    }

    strong {
        display: block;
        margin-bottom: 4px;
        font-size: 1.125rem;
        line-height: 1;
        color: var(--_clr-green);
    }

    span {
        line-height: 1.62;
        font-weight: 300;
        color: var(--_clr-black);
    }
}

#call-to-action-anchor.layout-c {
    padding-block: clamp(3.75rem, calc(90 / 1280 * 100vw), 5.625);

    h2 {
        font-family: 'Inter', sans-serif;
        font-size: clamp(2.375rem, calc(60 / 1280 * 100vw), 3.75rem) !important;
        font-weight: 700;

        @media (width > 960px) {
            padding-inline: 30px;
        }
    }

    a.button {
        margin-top: clamp(1.25rem, calc(50 / 1280 * 100vw), 3.125rem);
        font-family: 'Avenir Next', sans-serif;
        font-weight: 600;
    }

    @media (width > 1024px) {
        .container {
            padding-inline: 80px;
        }
    }
}

.landing-chicago-logos-section {
    padding-block:
        clamp(3.125rem, calc(75 / 1280 * 100vw), 4.688rem) clamp(3.125rem, calc(75 / 1280 * 100vw), 5rem);
    overflow: clip;

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

    h3 {
        text-align: center;
        font-family: 'Inter', sans-serif;
        font-size: clamp(1.25rem, calc(24 / 1280 * 100vw), 1.5rem);
        line-height: 2.29;
        color: var(--_clr-black);
    }
}

.landing-chicago-logos {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, calc(70 / 1280 * 100vw), 4.375rem);
    width: max-content;
    animation: logos-infinit-scroll var(--_duration, 10s) forwards infinite linear;

    span {
        line-height: 1;
    }

    img {
        height: 3.1875rem;
        width: 100%;
        object-fit: cover;
        filter: grayscale(1);
    }

    a {
        display: inline-block;

        &:hover,
        &:focus-visible {
            scale: 1.1;
        }
    }
}


@keyframes logos-infinit-scroll {
    from {
        translate: 0 0;
    }

    to {
        translate: calc(calc(100% / 3) * -1 - (clamp(1.25rem, calc(70 / 1280 * 100vw), 4.375rem) / 3)) 0;
    }
}

.home-hero {
    display: grid;
    max-width: 120rem;
    margin-inline: auto;
    align-items: center;
    padding-inline: 35px;

    @media (width > 960px) {
        grid-template-columns: 50% 1fr;
        gap: clamp(1.875rem, calc(135 / 1440 * 100vw), 8.4375rem);
        padding-inline: var(--_padding-offset) 0;
    }

    .home-hero__copy-wrapper {
        padding-top: 7rem;

        @media (width > 768px) {
            padding-top: 8rem;
        }

        @media (width > 960px) {
            padding-top: 9rem;
            padding-block: 8.125rem;
        }
    }

    .home-hero__copy-wrapper>*:not(:last-child) {
        margin-bottom: clamp(1.25rem, calc(32 / 1440 * 100vw), 2rem);
    }

    .home-hero__copy {
        text-wrap: balance;

        h1 {
            color: #000;
            font-size: clamp(2.2rem, calc(65 / 1440 * 100vw), 4.0625rem);
            font-weight: 700;
            line-height: 1.27692;
            margin-bottom: 0.625rem;
        }

        p {
            color: var(--_crl-grey6C);
            font-size: clamp(1.125rem, calc(22 / 1440 * 100vw), 1.375rem);
            line-height: 1.45455;
        }

        @media (width <=960px) {
            text-align: center;
        }
    }

    .home-hero__buttons {
        display: flex;
        gap: 0.625rem;
        justify-content: center;

        @media (width < 641px) {
            .button.fill {
                display: none;
            }
        }

        @media (width > 960px) {
            justify-content: start;
            gap: 0.625rem 1.25rem;
        }
    }

    .home-hero__images {
        display: none;

        img {
            max-width: 100%;
        }

        @media (width > 960px) {
            display: grid;
            align-items: end;
            grid-template-areas: "image";
            height: 100%;
        }
    }

    .home-hero__image-bg {
        display: grid;
        isolation: isolate;
        grid-template-areas: "image";
        grid-area: image;
        grid-row: 1;
        height: 100%;
        overflow: clip;
        border-bottom-left-radius: 100px;

        img {
            grid-area: image;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.65;
            mix-blend-mode: screen;
            aspect-ratio: 600/725;
        }

        &:after {
            content: "";
            grid-area: image;
            border-bottom-left-radius: 100px;
            background: linear-gradient(259deg, #0D085A 0%, #10069F 100%);
        }
    }

    .home-hero__main-photo {
        position: relative;
        grid-area: image;
        grid-row: 1;
        object-fit: contain;
        object-position: bottom;
        height: auto;

        @media (width > 960px) {
            transform-origin: bottom;
            scale: 1.3;
        }
    }
}

.home-portfolio {
    position: relative;
    isolation: isolate;
    padding-block:
        clamp(3.125rem, calc(117 / 1440 * 100vw), 7.3125rem) clamp(3.125rem, calc(75 / 1440 * 100vw), 4.6875rem);
    overflow: clip;

    --_border-radius: 20px;

    &>*:not(:last-child) {
        margin-bottom: clamp(2rem, calc(119 / 1440 * 100vw), 7.4375rem);
    }

    &:after {
        content: '';
        position: absolute;
        inset: 63% 0 0;
        z-index: -1;
        pointer-events: none;
        background: url('../images/black-curve.png') no-repeat center top;
        background-size: 100% 101%;

        @media (width > 768px) {
            background-size: 100%;
        }
    }

    &>.container:first-child {
        text-align: center;
        max-width: 1010px;

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

    .home-portfolio__subtitle {
        display: inline-block;
        margin-bottom: 5px;
        color: var(--_clr-greyBD);
        font-size: 0.75rem;
        line-height: 1.25;
        font-weight: 700;
        text-transform: uppercase;
    }

    .home-portfolio__heading {
        margin-bottom: clamp(1.25rem, calc(46 / 1440 * 100vw), 2.875rem);
        color: #000;
        font-size: clamp(1.5rem, calc(38 / 1440 * 100vw), 2.375rem);
        line-height: 1.15789;
        font-weight: 700;
    }

    .home-portfolio-project {
        position: relative;
        line-height: 0;
        border-radius: var(--_border-radius);
        box-shadow: 0 20px 24px -10px hsl(from var(--_color, var(--_clr-green)) h s l / 0.40), 0 14px 8px -10px hsl(from var(--_color, #fff) h s l / 0.30);
        transition: box-shadow 200ms ease;
        display: grid;
        grid-template-areas: "full";

        &:has(a:hover),
        &:has(a:focus-visible) {
            box-shadow: none;

            .home-portfolio-project__overlay {
                opacity: 1;
            }
        }
    }

    .home-portfolio-project__preview {
        grid-area: full;

        img {
            aspect-ratio: 357/400;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top;
            border-radius: var(--_border-radius);

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

    .home-portfolio-project__overlay {
        grid-area: full;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-color: hsl(from var(--_color, var(--_clr-green)) h s l / 0.95);
        opacity: 0;
        transition: opacity 200ms ease;
        padding: 1rem;
        border-radius: var(--_border-radius);

        @media (width > 960px) {
            padding: 2.1875rem;
        }

        span {
            display: block;
            margin-bottom: 0.75rem;
            font-weight: 500;
            font-size: 1rem;
            line-height: 1;
            text-transform: uppercase;
            text-wrap: balance;
            color: var(--_text-color, #fff);
        }

        h3 {
            font-weight: 700;
            font-size: 1.5rem;
            line-height: 1.3;
            text-wrap: balance;
            color: var(--_text-color, #fff);
        }

        p {
            margin-top: 1.25rem;
            color: var(--_text-color, #fff);
            text-wrap: balance;
            font-size: 1rem;
            line-height: 1.375rem;
        }
    }

    .home-portfolio-project__link {
        font-size: 0.875rem;
        line-height: 1;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 0.625rem;
        margin-top: 1.25rem;
        color: var(--_text-color, #fff);

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

    llt-projects-slider {
        @media (width > 960px) {
            .slick-slider {
                --_translate: 0 clamp(-3.25rem, calc(-52 / 1440 * 100vw), 0px);

                .slick-slide {
                    transition: translate 200ms ease;
                }

                &:has(.slick-current:nth-child(odd)) {
                    .slick-slide:nth-child(even) {
                        translate: var(--_translate);
                    }
                }

                &:has(.slick-current:nth-child(even)) {
                    .slick-slide:nth-child(odd) {
                        translate: var(--_translate);
                    }
                }
            }
        }
    }


}

llt-projects-slider {
    display: block;

    &>.container:first-child {
        max-width: 120rem;
    }

    .slick-slider {
        --_gap-spacing: 0.625rem;
        margin-inline: calc(var(--_gap-spacing) * -1);
        margin-bottom: clamp(1.5rem, calc(100 / 1440 * 100vw), 6.25rem);

        &:not(.slick-initialized) {
            display: none;
        }

        @media (width > 768px) {
            --_gap-spacing: 1.25rem;
        }

        .slick-slide {
            padding-inline: var(--_gap-spacing);
        }

        @media (width > 960px) {
            padding-right: clamp(0px, calc(142 / 1440 * 100vw), 8.9rem);
        }
    }

    .slick-list {
        overflow: visible;
    }

    [data-nav] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(1rem, calc(36/ 1440 * 100vw), 2.25rem);
    }

    [data-dots] {
        flex-grow: 1;
        --_track-background: var(--_clr-dark-grey);
        --_thumb-width: 6.25rem;

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

        @media (width > 960px) {
            --_thumb-width: 12.5rem;
        }

        &:empty {
            display: none;
        }

        input[type=range] {
            -webkit-appearance: none;
            appearance: none;
            background: transparent;
            width: 100%;
            border-radius: 50%;
        }

        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 2px;
            cursor: pointer;
            background: var(--_track-background);
            border-radius: 10px;
        }

        input[type=range]::-webkit-slider-thumb {
            height: 2px;
            width: var(--_thumb-width);
            border-radius: 10px;
            background: var(--_clr-green);
            cursor: grab;
            -webkit-appearance: none;
            appearance: none;
            margin-top: 0px;
        }

        input[type=range]::-webkit-slider-thumb:active,
        input[type=range]::-webkit-slider-thumb:focus {
            cursor: grabbing;
        }

        input[type=range]::-moz-range-track {
            width: 100%;
            height: 2px;
            cursor: pointer;
            background: var(--_track-background);
            border-radius: 10px;
        }

        input[type=range]::-moz-range-thumb {
            height: 2px;
            width: var(--_thumb-width);
            border-radius: 10px;
            background: var(--_clr-green);
            cursor: grab;
            -webkit-appearance: none;
            appearance: none;
            margin-top: 0px;
        }

        input[type=range]::-moz-range-thumb:active,
        input[type=range]::-moz-range-thumb:focus {
            cursor: grabbing;
        }

        input[type=range]::-ms-track {
            width: 100%;
            height: 2px;
            cursor: pointer;
            background: var(--_track-background);
            border-radius: 10px;
        }

        input[type=range]::-ms-thumb {
            height: 2px;
            width: var(--_thumb-width);
            border-radius: 10px;
            background: var(--_clr-green);
            cursor: grab;
            -webkit-appearance: none;
            appearance: none;
            margin-top: 0px;
        }

        input[type=range]::-ms-thumb:active,
        input[type=range]::-ms-thumb:focus {
            cursor: grabbing;
        }
    }

    .slick-dots {
        display: none !important;
    }

    [data-arrows] {
        flex-shrink: 0;
        display: flex;
        gap: 0.625rem;

    }

    [data-arrows] button {
        background-color: transparent;
        padding: 0;
        color: #fff;
        cursor: pointer;

        &:hover,
        &:focus-visible {
            color: var(--_clr-green);
        }
    }
}

.home-cta {
    position: relative;
    isolation: isolate;
    background-color: #000;
    padding-block:
        clamp(3.125rem, calc(75 / 1440 * 100vw), 4.6875rem) clamp(3.125rem, calc(70 / 1440 * 100vw), 4.375rem);

    .container {
        max-width: 56.6875rem;
    }

    .glow-box {
        --_border-radius: 100px;
        position: relative;
        border-radius: var(--_border-radius);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: clamp(1.25rem, calc(46 / 1440 * 100vw), 2.875rem) clamp(1.25rem, calc(50 / 1440 * 100vw), 3.125rem);
        background-color: #000;

        &>div:first-child>*:not(:last-child) {
            margin-bottom: 5px;
        }

        @media (width <=768px) {
            flex-direction: column;
            text-align: center;
            --_border-radius: 25px;
        }

        h3 {
            font-size: 1.25rem;
            line-height: 1.2;
            font-weight: 700;
            color: #fff;
        }

        p {
            color: #fff;
            line-height: 1.1875;
        }

        &:before,
        &:after {
            content: '';
            position: absolute;
            inset: -5px;
            border-radius: calc(var(--_border-radius) + 5px);
            z-index: -1;
        }

        &:after {
            background-image: linear-gradient(0deg, #78D64B 0%, #FEDD00 100%);
        }

        &:before {
            animation: glow-pulse 3.5s ease-in-out infinite;
        }
    }
}

@keyframes glow-pulse {

    0%,
    100% {
        box-shadow: 0 -12px 40px 0 rgba(254, 221, 0, 0.50), 0 12px 40px 0 rgba(255, 255, 238, 0.50);
    }

    50% {
        box-shadow: 0 -6px 20px 0 rgba(254, 221, 0, 0.50), 0 6px 20px 0 rgba(255, 255, 238, 0.50);
    }
}


.home-services-section {
    padding-top: clamp(3.125rem, calc(70 / 1440 * 100vw), 4.375rem);
    background-color: #000;

    .container {
        display: grid;
        gap: 2rem clamp(1rem, calc(136 / 1440 * 100vw), 8.5rem);

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

    .home-services-section__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;
        }
    }

    .home-services-section__subtitle {
        color: var(--_clr-greyBD);
        font-size: 0.75rem;
        line-height: 1.25;
        font-weight: 700;
        text-transform: uppercase;
        display: block;
        margin-bottom: clamp(1rem, calc(26 / 1440 * 100vw), 1.625rem);
    }

    .home-services-section__heading {
        font-size: clamp(2.5rem, calc(64 / 1440 * 100vw), 4rem);
        line-height: 1.09375;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: #fff;
    }

    .home-services-section__copy {
        position: relative;

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

        &>* {
            color: #fff;
        }

        &>*:not(:last-child) {
            margin-bottom: clamp(2.5rem, calc(57 / 1440 * 100vw), 3.5625rem);
        }

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

            strong {
                font-weight: 700;
            }
        }
    }

    &:after {
        content: '';
        display: block;
        background-image: linear-gradient(0deg, #000 33.42%, rgba(255, 255, 255, 0.00) 110.34%);
        height: 116px;
        position: sticky;
        bottom: 0;
        pointer-events: none;
    }

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

.home-benefits-section {
    padding-block: 3.125rem;
    background-color: #000;

    @media (width > 768px) {
        padding-block: clamp(3.125rem, calc(116 / 1280 * 100vw), 7.25rem) clamp(3.125rem, calc(165 / 1280 * 100vw), 10.3125rem);
    }

    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 {
            &>* {
                color: #fff;
            }
        }
    }
}

.home-videos-section {
    background-color: #000;
    padding-block: 3.125rem;
    isolation: isolate;

    --_border-radius: 0;

    @media (width > 641px) {
        --_border-radius: 10px;
    }

    @media (width > 768px) {
        padding-block: clamp(3.125rem, calc(165 / 1280 * 100vw), 10.3125rem) clamp(3.125rem, calc(106 / 1280 * 100vw), 6.625rem);
    }

    &>.container {
        display: grid;
        grid-template-areas: "full";
        max-width: 75rem;

        @media (width <=641px) {
            padding: 0;
        }

        &:after {
            content: '';
            display: block;
            border-radius: var(--_border-radius);
            grid-area: full;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 65%, #000 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%);
            height: calc(100% + 1px);
        }
    }

    .home-videos-section-video {
        grid-area: full;
        display: grid;
        grid-template-areas: "video";
        z-index: -1;
        scale: 0.8;
        transition: scale 500ms ease;

        &.is-visible {
            scale: 1;
        }

        video,
        iframe {
            grid-area: video;
            width: 100%;
            height: 100%;
            border-radius: var(--_border-radius);
            aspect-ratio: 1120/608;
        }

        video {
            object-fit: cover;
        }

        .home-videos-section-video__preview {
            grid-area: video;
        }

        .home-videos-section-video__preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: var(--_border-radius);
            aspect-ratio: 1120/608;
        }
    }

    .home-videos-section-copy {
        z-index: 1;
        grid-area: full;
        padding: 1.25rem 1rem;
        text-wrap: pretty;

        @media (width > 768px) {
            padding: clamp(1.25rem, calc(151 / 1440 * 100vw), 9.4375rem) clamp(1rem, calc(190 / 1440 * 100vw), 11.875rem) clamp(1.25rem, calc(152 / 1440 * 100vw), 9.5rem);
        }

        &>* {
            color: #fff;
        }

        &>*:not(:last-child) {
            margin-bottom: clamp(1.25rem, calc(28 / 1440 * 100vw), 1.75rem);
        }

        p {
            font-size: clamp(1.25rem, calc(38 / 1440 * 100vw), 2.375rem);
            line-height: 1.15789474;
        }

        @media (width <=768px) {
            text-align: center;
            text-wrap: balance;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    }
}

.home-how-it-works {
    position: relative;
    z-index: 1;
    background-color: #000;

    .container {
        display: grid;
        gap: 2.8125rem;

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

        @media (width > 960px) {
            gap: 4.375rem;
        }
    }

    .home-how-it-works-section__subtitle {
        display: block;
        margin-bottom: clamp(1rem, calc(30 / 1440 * 100vw), 1.875rem);
        color: var(--_clr-greyBD);
        font-size: 0.75rem;
        line-height: 1.25;
        font-weight: 700;
        text-transform: uppercase;
    }

    .home-how-it-works-section__heading {
        margin-bottom: clamp(1.25rem, calc(100 / 1440 * 100vw), 6.25rem);
        color: #fff;
        font-size: clamp(2rem, calc(65 / 1440 * 100vw), 4.0625rem);
        line-height: 1.07692;
        font-weight: 700;
        letter-spacing: -0.02em;
        text-wrap: balance;
    }

    .home-how-it-works__top-left-frame {
        margin-bottom: 2.8125rem;

        video,
        iframe,
        .home-video-frame__image {
            aspect-ratio: 495/556;
        }
    }

    .home-how-it-works__bottom-left-frame {
        @media (width > 768px) {
            margin-bottom: clamp(-6.875rem, calc(-110 / 1440 * 100vw), -2rem);
        }

    }

    .home-how-it-works__bottom-right-frame {
        margin-bottom: 3.125rem;

        @media (width > 768px) {
            margin-bottom: clamp(3.125rem, calc(150 / 1440 * 100vw), 9.375rem);
        }

        video,
        iframe,
        .home-video-frame__image {
            aspect-ratio: 615/500;
        }
    }

    .how-it-works-steps {
        position: relative;
        isolation: isolate;
        display: grid;
        grid-template-rows: repeat(var(--_row-count, 1), auto);
        list-style: none;
        counter-reset: steps;
        max-width: 28.1875rem;
        margin-inline: auto;
        margin-bottom: 2.8125rem;

        --_circle-size: clamp(2.5rem, calc(72 / 1440 * 100vw), 4.5rem);

        @media (width > 960px) {
            margin-bottom: 5.625rem;
        }

        &:before {
            content: '';
            position: absolute;
            z-index: -1;
            background-image: linear-gradient(180deg, #FEDD00 0%, #78D64B 100%);
            top: calc(var(--_circle-size) / 2);
            left: calc(var(--_circle-size) / 2);
            translate: 50% 0;
            width: 3px;
            height: 100%;
            grid-row: 1 / -2;
        }

        li {
            display: grid;
            grid-template-areas:
                "counter title"
                "counter description"
            ;
            gap: 0.625rem clamp(0.625rem, calc(20 / 1440 * 100vw), 1.25rem);

            &:not(:last-child) {
                margin-bottom: clamp(2rem, calc(62 / 1440 * 100vw), 3.875rem);
            }

            &:before {
                counter-increment: steps;
                content: counter(steps);
                grid-area: counter;
                color: var(--_row-color, #fff);
                display: flex;
                justify-content: center;
                align-items: center;
                aspect-ratio: 1/1;
                width: var(--_circle-size);
                background-color: #000;
                border: 3px solid var(--_row-color, #fff);
                border-radius: 100%;
                text-align: center;
                font-size: clamp(1rem, calc(32 / 1440 * 100vw), 2rem);
                line-height: 1;
                font-weight: 700;
            }
        }

        strong {
            color: var(--_row-color, #fff);
            font-size: 1.125rem;
            line-height: 1.22;
            grid-area: title;
        }

        p {
            color: #BBB;
            line-height: 1.5625;
            grid-area: description;
        }
    }


}

.home-video-frame {
    display: grid;
    grid-template-areas:
        "video"
        "copy";
    /* gap: clamp(1rem, calc(30 / 1440 * 100vw), 1.875rem); */

    video,
    iframe,
    .home-video-frame__image {
        grid-area: video;
        aspect-ratio: 550/400;
    }

    video,
    iframe {
        position: relative;
        border-radius: 15px;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .home-video-frame__image {
        position: relative;
    }

    .home-video-frame__image img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 15px;
    }

    .home-video-frame__copy {
        margin-top: clamp(1rem, calc(30 / 1440 * 100vw), 1.875rem);
        grid-area: copy;

        strong {
            display: block;
            margin-bottom: 0.625rem;
            color: #FFEFB7;
            line-height: 1.1875;
        }

        span {
            color: #fff;
            font-size: 0.9375rem;
            line-height: 1.6;
        }
    }
}

.home-blog-section {
    padding-block: 3.125rem;
    margin-bottom: clamp(1.5rem, calc(42 / 1440 * 100vw), 2.625rem);
    position: relative;
    isolation: isolate;
    overflow: clip;

    @media (width > 768px) {
        padding-block: clamp(3.125rem, calc(177 / 1440 * 100vw), 11.0625rem) clamp(3.125rem, calc(160 / 1440 * 100vw), 10rem);
    }

    &:before {
        content: '';
        position: absolute;
        z-index: -1;
        inset: auto 0 0;
        height: 125%;
        background: url('../images/gray-curve.svg') no-repeat center bottom / 100%;
        pointer-events: none;
    }


    &>.container:first-child {
        text-align: center;
        max-width: 63.125rem;
    }

    .home-blog-section__subtitle {
        display: block;
        margin-bottom: 1rem;
        color: var(--_clr-greyBD);
        font-size: 0.75rem;
        line-height: 1.25;
        font-weight: 700;
        text-transform: uppercase;
    }

    .home-blog-section__heading {
        margin-bottom: clamp(1.25rem, calc(46 / 1440 * 100vw), 2.875rem);
        color: #000;
        font-size: clamp(1.5rem, calc(38 / 1440 * 100vw), 2.375rem);
    }

    .home-blog-section__card {
        position: relative;
        isolation: isolate;
        display: grid;
        grid-template-areas: "card";
        border-radius: 10px;
        background-color: #000;
        box-shadow: 0 20px 24px -4px rgba(0, 0, 0, 0.20), 0 8px 8px -4px rgba(0, 0, 0, 0.20);
        transition: box-shadow 200ms ease;

        &:has(a:hover),
        &:has(a:focus-visible) {
            box-shadow: none;
        }

        .home-blog-section__preview,
        .home-blog-section__info,
        &:after {
            grid-area: card;
        }

        &:after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            border-radius: inherit;
            background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 47.54%, #000 83.07%);
        }

        .home-blog-section__preview {
            position: relative;
            z-index: -1;
            aspect-ratio: 360/400;

            img {
                aspect-ratio: 360/508;
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 10px;

                @media (width > 960px) {
                    aspect-ratio: 360/508;

                }
            }
        }

        .home-blog-section__info {
            align-self: end;
            padding: clamp(1rem, calc(30 / 1440 * 100vw), 1.875rem);

            h3 {
                color: #fff;
                font-size: clamp(1.25rem, calc(22 / 1440 * 100vw), 1.375rem);
                line-height: 1.27273;
                font-weight: 700;
                margin-bottom: 0.625rem;
            }

            a {
                color: #fff;
                font-size: 0.9375rem;
                line-height: 1.6;
                text-decoration: underline;

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

    llt-projects-slider {
        margin-top: 2.5rem;

        .slick-slider {
            @media (width > 768px) {
                --_gap-spacing: 0.6875rem;
            }
        }

        [data-arrows] button {
            color: #000;

            &:hover,
            &:focus-visible {
                color: var(--_clr-green);
            }
        }

        [data-dots] {
            --_track-background: #EAEAEA;
        }
    }
}

@media screen and (max-width: 1200px) {
    .home header .cta a[href*="tel"] {
        color: #fff;
    }
}

#form-anchor {


    .gform_required_legend {
        display: none;
    }

    .calendly-inline-widget {
        min-height: 300px;

        @media (width > 960px) {
            float: right;
            width: 54%;
            transform: translateY(-90px);
            /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
            background-color: #fff; */
        }
    }
}