:root {
    --brand-blue: #03b1cd;
    --brand-pink: #ed1f79;
    --brand-yellow: #F9C028;
}

h1, h2, h3, h4 {
    margin: 0 !important;
}

#banner {
    background-color: var(--brand-pink);
    background-size: cover;
    background-position: center top;

    .headline-container {
        padding: 171px 0 0 31px;

        @media (min-width: 1024px) {
            padding: 359px 0 0 85px;
        }
    }

    .headline {
        color: #FFF;
        font-family: kulturistaLight;
        font-size: 41px;
        font-style: normal;
        font-weight: 300;
        line-height: 84%;
        letter-spacing: 0.3px;
        text-transform: uppercase;

        @media (min-width: 1024px) {
            font-size: 142px;
            line-height: 100%;
            letter-spacing: 1px;
        }

        .line-0 {

            @media (min-width: 768px) {
                display: flex;
                align-items: flex-start;
                gap: 12px;
            }

            @media (min-width: 1024px) {
                gap: 24px;
            }
        }

        .terms-container {
            position: relative;
            height: 41px;
            flex: 1;
            overflow: hidden;
            margin-top: 12px;

            @media (min-width: 768px) {
                margin-top: 0;
            }

            @media (min-width: 1024px) {
                height: 145px;
            }

            .prev {
                position: absolute;
                left: 0;
                top: 120px;
            }

            .term {
                position: absolute;
                left: 0;
                top: 0;
                overflow: hidden;
                transition: top 200ms ease-in;
            }

            .next {
                position: absolute;
                left: 0;
                top: 142px;
                transition: top 800ms cubic-bezier(0.34, 1.56, 0.64, 1);
            }

            .underline {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 3px;
                background-color: #fff;
                transition: width 800ms cubic-bezier(0.34, 1.56, 0.64, 1);

                @media (min-width: 1024px) {
                    height: 10px;
                }
            }
        }

        .line-1 {
            margin-top: 12px;

            @media (min-width: 1024px) {
                margin-top: 20px;
            }
        }
    } /* headline */

    .subheader {
        margin-top: 8px;
        color: #FFF;
        font-family: brandonRegular;
        font-size: 1rem;
        font-style: normal;
        line-height: 86%;
        letter-spacing: 1px;
        text-transform: uppercase;

        @media (min-width: 1024px) {
            margin-top: 0;
            font-size: 1.25rem;
            line-height: 110%;
        }
    }

    .intro-panel {
        position: relative;
        margin-top: 96px;
        padding-bottom: 171px;
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: -50px;
        overflow: hidden;

        @media (min-width: 1024px) {
            margin-top: 140px;
            padding-bottom: 125px;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            gap: 13%;
        }

        .image-panel.mobile {
            position: absolute;
            z-index: 1;
            left: 0;
            bottom: 0;
            width: 50%;
            max-width: 300px;
            transform: translateY(47%);

            @media (min-width: 1024px) {
                display: none;
            }

            img {
                max-width: 100%;
            }
        }

        .image-panel.desktop {
            display: none;

            @media (min-width: 1024px) {
                display: block;
            }

            img {
                max-width: 100%;
            }
        }

        .copy-panel {
            position: relative;
            z-index: 3;
            padding: 0 31px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 30px;

            @media (min-width: 1500px) {
                width: 56%;
                padding-right: 3%;
                flex-direction: row;
                justify-content: space-between;
                gap: 53px;
            }

            .subheader {
                width: 30%;
                max-width: 110px;
                flex: 1;
                color: #FFF;
                font-family: brandonRegular;
                font-size: 1.25rem;
                font-style: normal;
                line-height: 110%;
                letter-spacing: 1px;
                text-transform: uppercase;

                @media (min-width: 1024px) {
                    width: auto;
                    max-width: none;
                }
            }

            .headline-button-container {
                flex: 6;
            }

            .headline {
                color: #FFF;
                font-family: kulturistaMedium;
                font-size: 1.4375rem;
                font-style: normal;
                line-height: 120%;
                letter-spacing: 0.465px;
                text-transform: uppercase;

                @media (min-width: 768px) {
                    font-size: 2rem;
                }

                @media (min-width: 1200px) {
                    font-size: 3.125rem;
                    letter-spacing: 1px;
                }

                span {
                    font-family: kulturistaBold;
                }
            }

            .button-container {
                margin-top: 32px;

                @media (min-width: 1024px) {
                    margin-top: 67px;
                }

                button {
                    padding: 8px 32px;
                    background-color: #000;
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    color: #FFF;
                    font-family: brandonBold;
                    font-size: 1rem;
                    font-style: normal;
                    font-weight: 450;
                    text-transform: uppercase;
                    transition: all 200ms ease-in;

                    @media (min-width: 1024px) {
                        padding: 16px 32px;
                    }

                    &:hover {
                        color: var(--brand-pink);

                        path {
                            stroke: var(--brand-pink);
                        }
                    }
                }

                svg path {
                    stroke: #fff;
                }
            }
        } /* copy-panel */
    } /* intro-panel */
} /* banner */

.services-intro {
    margin-top: 62px;

    @media (min-width: 1024px) {
        margin-top: 204px;
    }

    .inner-container {
        padding: 0 31px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 44px;

        @media (min-width: 1024px) {
            margin-left: 5.5%;
            padding: 0;
            flex-direction: row;
            gap: 94px;
        }

        .intro {

            @media (min-width: 1024px) {
                width: 61%;
            }

            p {
                margin-top: 0;
                color: #000;
                font-family: brandonRegular;
                font-size: 1.25rem;
                font-style: normal;
                font-weight: 390;
                line-height: 37px;

                @media (min-width: 1024px) {
                    width: 80%;
                }
            }
        }

        .headline {
            font-family: kulturistaBold;
            font-size: 3.5rem;
            line-height: 94%;
            text-transform: uppercase;
            color: var(--brand-pink);

            &.mobile {

                @media (min-width: 1024px) {
                    display: none;
                }
            }

            &.desktop {
                display: none;

                @media (min-width: 1024px) {
                    display: block;
                }
            }

            @media (min-width: 1024px) {
                width: 34%;
            }

            span {
                opacity: 0.5;
            }
        }
    }
} /* services-intro */

.services {
    margin-top: 62px;

    @media (min-width: 1024px) {
        margin-top: 204px;
    }

    .inner-container {
        display: flex;
        flex-direction: column-reverse;
        gap: 53px;

        @media (min-width: 1024px) {
            margin-left: 5.5%;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            gap: 0;
        }
    }

    .listing-panel {
        padding: 0 31px;

        @media (min-width: 1024px) {
            width: 61%;
        }

        .headline {
            font-family: kulturistaLight;
            font-size: 2.5rem;
            line-height: 104%;
            text-transform: uppercase;
            color: #000;

            @media (min-width: 1024px) {
                font-size: 3rem;
            }
        }

        .service-groups {
            margin-top: 23px;
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 29px;

            @media (min-width: 1024px) {
                grid-template-columns: repeat(2, 1fr);
            }

            @media (min-width: 1500px) {
                grid-template-columns: repeat(3, 1fr);
                gap: 0;
            }

            .service-group {

                .group-name {
                    display: flex;
                    align-items: center;
                    gap: 20px;
                    color: var(--brand-pink);
                    font-family: kulturistaBold;
                    font-size: 1.25rem;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 20px;
                    letter-spacing: 1px;
                    text-transform: uppercase;
                    cursor: pointer;

                    @media (min-width: 1024px) {
                        font-size: 1rem;
                        line-height: 63px;
                        cursor: normal;
                    }

                    svg {
                        transition: all 200ms ease-in;

                        @media (min-width: 1024px) {
                            display: none;
                        }
                    }
                }

                ul {
                    display: none;
                    list-style-type: none;
                    padding: 0;

                    @media (min-width: 1024px) {
                        display: block;
                    }

                    li {
                        color: #000;
                        font-family: kulturistaMedium;
                        font-size: 1.125rem;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 34px;
                        text-transform: uppercase;

                        &:first-child {
                            margin-top: 20px;

                            @media (min-width: 1024px) {
                                margin-top: 0;
                            }
                        }
                    }
                }
            }
        } /* service-groups */

        .button-panel {
            margin-top: 46px;

            @media (min-width: 1024px) {
                margin-top: 118px;
            }

            button {
                padding: 8px 32px;
                background-color: #000;
                display: flex;
                align-items: center;
                gap: 12px;
                color: #FFF;
                font-family: brandonBold;
                font-size: 1rem;
                font-style: normal;
                font-weight: 450;
                text-transform: uppercase;
                transition: all 200ms ease-in;

                @media (min-width: 1024px) {
                    padding: 16px 32px;
                }

                &:hover {
                    color: var(--brand-pink);

                    path {
                        stroke: var(--brand-pink);
                    }
                }
            }

            svg path {
                stroke: #fff;
            }
        }
    } /* listing-panel */

    .image-panel {

        @media (min-width: 1024px) {
            width: 34%;
        }

        img {
            width: 100%;

            @media (min-width: 1024px) {
                aspect-ratio: 0.75;
            }
        }
    }
} /* services */

.clients {
    margin-top: 109px;
    overflow: hidden;

    @media (min-width: 1024px) {
        margin-top: 234px;
    }

    .headline {
        margin-left: 5.5% !important;
        font-family: kulturistaLight;
        font-size: 2.5rem;
        line-height: 104%;
        text-transform: uppercase;
        color: #000;

        @media (min-width: 1024px) {
            font-size: 3rem;
        }
    }

    .slides {
        width: 140%;
        margin-top: 83px;

        @media (min-width: 1024px) {
            width: 110%;
        }

        .slide {

            .image-container {

                .logo-container {
                    position: relative;
                    max-width: 100px;
                    height: 100px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    @media (min-width: 1200px) {
                        max-width: 150px;
                    }

                    svg {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        max-width: 100%;
                    }
                }
            }
        }
    }
} /* clients */

.team {
    margin-top: 69px;
    background-color: #171717;

    .inner-container {
        width: 89%;
        margin: 0 auto;
        padding: 24px 0 77px 0;

        @media (min-width: 1024px) {
            padding: 64px 0 308px 0;
        }
    }

    .headline {
        font-family: kulturistaLight;
        font-size: 2.5rem;
        line-height: 104%;
        text-transform: uppercase;
        color: #fff;

        @media (min-width: 1024px) {
            font-size: 3rem;
        }
    }

    .load-more-container {
        margin-top: 75px;
        display: flex;
        justify-content: center;

        @media (min-width: 1024px) {
            display: none;
        }

        button {
            padding: 12px 27px;
            border: 1px solid var(--brand-yellow);
            background-color: transparent;
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--brand-yellow);
            font-family: kulturistaMedium;
            font-size: 1rem;
            font-style: normal;
            font-weight: 450;
            text-transform: uppercase;
            transition: all 200ms ease-in;

            &:hover {
                background-color: var(--brand-yellow);
                color: #171717;
            }
        }
    }
}

.team-grid {
    margin-top: 36px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 34px;

    @media (min-width: 1024px) {
        margin-top: 53px;
    }

    .cell {
        width: 100%;

        &.to-load {
            display: none;

            @media (min-width: 1024px) {
                display: block;
            }
        }

        &.bio-enabled {
            cursor: pointer;
        }

        @media (min-width: 1024px) {
            width: calc(33% - 23px);
        }

        .image-container {
            position: relative;
            aspect-ratio: 1.09;
            border-top: 1px solid #fff;
            border-right: 1px solid #fff;
            border-left: 1px solid #fff;
            display: flex;
            justify-content: center;
            align-content: center;
            padding: 48px;

            .photo {
                position: absolute;
                z-index: 3;
                left: 0;
                top: 0;
                width: 100%;
                aspect-ratio: 1.09;
                object-fit: cover;
                opacity: 0;
                transition: all 200ms ease-in;
            }
        }

        .name-container {
            border-top: 1px solid #fff;
            border-right: 1px solid #fff;
            border-left: 1px solid #fff;
            padding: 10px 20px;

            &.bio-disabled {
                border-bottom: 1px solid #fff;
            }

            .name {
                color: #FFF;
                font-family: brandonBold;
                font-size: 1rem;
                font-style: normal;
                font-weight: 450;
                line-height: 25px;
                letter-spacing: 1px;
                text-transform: uppercase;
            }

            .title {
                color: #FFF;
                font-family: brandonRegular;
                font-size: 1rem;
                font-style: normal;
                font-weight: 330;
                line-height: 25px;
                letter-spacing: 1px;
                text-transform: uppercase;
            }
        }

        .extra-container {
            position: relative;
            border-top: 1px solid #fff;
            border-right: 1px solid #fff;
            border-bottom: 1px solid #fff;
            border-left: 1px solid #fff;

            .more-container {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 6px 20px;

                .label {
                    color: #FFF;
                    font-family: brandonRegular;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 330;
                    line-height: 25px; /* 156.25% */
                    letter-spacing: 1px;
                    text-transform: uppercase;
                    transition: all 200ms ease-in;
                }

                .icon {

                    svg path {
                        transition: all 200ms ease-in;
                    }

                    &.expand {
                        margin-top: 4px;
                    }

                    &.collapse {
                        display: none;
                        margin-top: -10px;
                    }
                }
            } /* more-container */
        } /* extra-container */

        .bio {
            position: relative;
            z-index: 3;
            height: 0;
            margin: 0;
            overflow: hidden;
            border-right: 1px solid #fff;
            border-bottom: 1px solid #fff;
            border-left: 1px solid #fff;
            transition: all 200ms ease-in;

            .copy-container {
                padding: 10px 20px;
                color: #FFF;
                font-family: brandonRegular;
                font-size: 1rem;
                font-style: normal;
                font-weight: 330;
                line-height: 25px;
                letter-spacing: 1px;
                text-transform: uppercase;
            }
        }

        &:hover {

            .more-container {

                .label {
                    color: var(--brand-yellow);
                }

                .icon svg path {
                    stroke: var(--brand-yellow);
                }
            }
        }
    } /* cell */
} /* team-grid */

footer {
    margin-top: 0;
}