section {
    position:relative;
    clear:left;
    width:100%;
    overflow-x:clip;
    overflow-y:visible;
    scroll-margin-top: 50px;

    & > .wrap {
        z-index:1;
    } 
}

.pad_top {
    padding-top:var(--global_block_padding);
}
.pad_bottom {
    padding-bottom:var(--global_block_padding);
}
.pad_left {
    padding-left:var(--global_inline_padding);
}
.pad_right {
    padding-right:var(--global_inline_padding);
}

@media screen and (min-width > 1400px) {
    .pad_left {
        padding-left:0;
    }
    .pad_right {
        padding-right:0;
    }
}

/***********************************************/

.flip .slide_from_left.run {
    animation-name: slide_from_right;
}

.flip .slide_from_right.run {
    animation-name: slide_from_left;
}

.heading {
    font-size:clamp(1.1rem,2.7vw,2.5rem);
    text-align: center;
    margin-bottom:0.75lh;
    grid-column: 1/-1;
    text-wrap:balance;
}

.textonly {
    & .text {
        width:min(1000px,100%);
        margin-inline:auto;
    }
}

/************************************************/

.hero {
    min-height:100svh;
    display:grid;
    align-items:end;
    justify-content: start;

    & :is(.bgimg,.bgrs,.bgvid) {
        opacity:0.5;
    }

    & .text {
        width:65%;
        margin-top:25svh;
    }

    & h1 {
        margin-bottom:1rem;
    }

    & .triangles {
        position:absolute;
        right:0;
        bottom:0;
        max-width:25%;
        max-height:calc(100vh - 150px);
    }

    @media screen and (max-width:600px){
        .text {
            width:100%;
        }
    }
}

.two_col {
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--global_inline_padding);
    align-items:start;

    & .image {
        position:sticky;
        top:0;
        mask-repeat: no-repeat;
        mask-size: cover;
        mask-position:right top;
        height:100%;
        max-height:100vh;
        background-color:#000;
        & img {
            position:absolute;
            width:100%;
            height:100%;
            object-fit:cover;
            opacity:0.5;
        }
    }

    & .image:not(:has(img)){
        display:none;
    }

    & .text {
        padding:var(--global_block_padding) var(--global_inline_padding);

        & h2 {
            font-size:clamp(1.6rem,2.7vw,2.5rem);
            margin-bottom:0.75lh;
        }
    }

    &.numbered {

        gap:calc(2 * var(--global_inline_padding));

        & .bg {
            position:absolute;
            opacity:0.3;
            left:0;
            top:0;
            height:100%;
            max-height:100vh;
            width:25%;
            background-image:url('../img/triangles-white-outline.svg');
            background-size: cover;
            background-position: right center;
            background-repeat: no-repeat;
        }

        & .text {
            padding:0;
        }

        & .numbered_blocks {
            display:grid;
            grid-template-columns: 1fr 1fr;
            gap:var(--global_inline_padding);

            & .text {
                padding:0;
            }

            & .number {
                font-size:clamp(3rem,6vw,6rem);
                font-weight:Bold;
                line-height:1;
            }

            & .head {
                font-weight:bold;
                margin-bottom:0;
            }
        }
    }

    &.faqs {
        & .image {
            mask-position: left bottom;
        }
    }

    &.flip {
        & > .text {
            order:-1;
        }

        & > .image {
            mask-position:left top;
        }
    }

    &.faqs {
        grid-template-columns: 1fr 1.5fr;

        & > .text h2 {
            text-align: left;
            margin-bottom:1.5lh;
        }

        &.flip {
            grid-template-columns: 1.5fr 1fr;
        }
    }

    @media screen and (max-width:900px){
        grid-template-columns: 1fr;

        & .image,
        .flip & .image {
            position:static;
            order:2;

            & img {
                position: static;
            }
        }
    }

    @media screen and (max-width:800px){

        & .faqs,
        &.faqs.flip {
            grid-template-columns: 1fr;
        }
    }

    @media screen and (max-width:350px){
        &.numbered .numbered_blocks {
            grid-template-columns: 1fr;
        }
    }
}

details {
    display:grid;
    align-items:start;
    padding-bottom:1.5rem;
    border-bottom:1px solid #333;
    margin-bottom:1.5rem;

    & summary {
        display:grid;
        grid-template-columns: 1fr 1.5rem;
        gap:1rem;
        align-items:center;
        cursor:pointer;

        & h3 {
            margin:0;
            color:#7b7b7b;
            font-weight:600;
        }

        &:hover {
            & h3 {
                color:#fff;
            }
            & .plus,
            & .minus {
                color:#fff;
            }
        }

        & .plus,
        & .minus {
            text-align:center;
            margin:0;
            font-weight:600;
            color:#7b7b7b;
        }

        & .minus {
            display:none;
        }
    }

    &[open]{
        & summary {
            & h3 {
                color:#fff;
            }
            & .plus {
                display:none;
            }
            & .minus {
                color:#fff;
                display:block;
            }
        }
    }

    & .content {
        padding-top:0.5rem;
        display:grid;
        grid-template-columns: repeat(auto-fill,minmax(80px,1fr));
        gap:3rem;

        & > p {
            grid-column: 1/-1;
        }
    }

    &:last-of-type {
        margin-bottom:0;
        border-bottom:none;
    }

    .w_theme &,
    .lg_theme & {
        border-color:#ddd;

        & summary:hover,
        &[open] summary {
            & h3 {
                color:#000;
            }
        }
    }
}

.case-studies {
    & .bg {
        position:absolute;
        opacity:0.3;
        right:0;
        bottom:0;
        height:100%;
        max-height:100vh;
        width:25%;
        background-image:url('../img/triangles-white-outline2.svg');
        background-size: cover;
        background-position: left center;
        background-repeat: no-repeat;
    }

    & > .text {
        padding-inline:var(--global_inline_padding);
        text-align: center;
        margin-bottom:3rem;
        color:#fff;

        & > p {
            max-inline-size:75ch;
            margin-inline:auto;
            text-wrap:balance;
        }
    }

    & .splide__slide {
        padding:0;
        margin-right:2rem;
    
        & a {
            text-decoration: none;
        }

        & .image {
            filter:saturate(0);
            transition:filter 0.75s;
        }

        & .text {
            position:relative;
            width:100%;
            padding:1rem;
            padding-right:3rem;
            background-color:#1a1a1a;

            & h3 {
                font-weight: 600;
            }

            & .value {
                font-weight: 600;
            }

            &::after {
                content:url('../img/triangle-right-white.svg');
                position:absolute;
                right:0;
                bottom:0;
                width:1.5rem;
            }

        }
        
        &:hover {
            & .image {
                filter:saturate(1);
            }

            & .text {
                background-color:#fff;
                color:#000;
                &::after {
                    filter:invert();
                }
            }
        }
    }

    & .btns {
        width:100%;
        display:flex;
        flex-wrap:wrap;
        justify-content: center;
        gap:1rem;
        padding-top:3rem;
    }

    &.w_theme {
        & > h2,
        & > .text {
            color:#000;
        }

        & .splide__slide a {

            & .text {
                color:#fff;
                border:1px solid #fff;
                border-top:none;
            }

            &:hover {
                & .text {
                    color:#000;
                    border-color:#000;
                }
            }
        }
    }
}

.logos {

    & .text {
        text-align: center;
        margin-bottom:3rem;
    }

    & .splide__slide {
        margin-inline:1.5rem;
        
        & .image {
            display:grid;
            height:100%;
            place-items:center;
        }

        & img {
            object-position: center;
            object-fit: contain;
            filter:saturate(0);
            opacity:0.5;
            transition:filter 0.5s, opacity 0.5s;
            max-height:80px;
            max-width:100%;
        }

        &:hover img {
            filter:saturate(1);
            opacity:1;
        }

        &::before {
            display:none;
        }
    }
}

.icons {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--global_inline_padding);
    align-items:start;

    & .icons-inner {
        display:grid;
        grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
        gap:2rem;
    }
    & .image {
        position:static;
        background-color:unset;
        & img {
            position:static;
            height:100px;
            width:100%;
            object-fit:contain;
            transition:filter 0.5s, opacity 0.5s;
            filter:saturate(0);
            opacity:0.5;
        }
        &:hover img {
            filter:saturate(1);
            opacity:1;
        }
    }
    & .text {
        padding:unset;
    }

    @media screen and (max-width:900px){
        grid-template-columns: 1fr;

        & .icons-inner {
            order:2;
        }
    }
}

.match-height {
    & .images,
    & .image {
        position:absolute;
        width:100%;
        height:100%;

        & img {
            height:100%;
            object-fit:cover;
        }
    }
}

.rs {
    position: absolute;
    inset:0;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
    z-index:0;

    & li {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        display: none;
        width: 100vw;
        height:100%;
        max-width:100%;
        left: 0;
        top: 0;
        padding:0;
        margin:0;

        &:first-child {
            position: relative;
            display: block;
            float: left;
        }
    }

    & img {
        display: block;
        height: auto;
        float: left;
        width: 100%;
        border: 0;
    }
}

.bgimg,
.bgrs,
.bgvid {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-width:100%;
    object-fit:cover;
    z-index:0;
    padding:0;
    margin:0;
    user-select: none;
    pointer-events: none;
    background-color:var(--background);
  }

:is(.bgrs,.bgimg) img {
    height:100%;
    width:100%;
    object-fit: cover;
    object-position: center;
}


.final_cta {
    text-align: center;
    & h2 {
        max-width:30ch;
        margin-inline:auto;
    }
    & p {
        max-width:70ch;
        margin-inline:auto;
    }
    & .bg {
        position:absolute;
        opacity:0.15;
        left:0;
        bottom:0;
        height:100%;
        max-height:100vh;
        width:30%;
        background-size: cover;
        background-position: right bottom;
        background-repeat: no-repeat;
    }
    & .btns {
        margin-top:3rem;
    }
}





.b_theme,
.dg_theme {
    background-color:#000;
    color:#fff;

    & .cta {
        background-color:#fff;
        color:#000;
        border:1px solid #fff;
        &:hover {
            border:1px solid #000;
        }
    }

    & ul li::before {
        filter:invert();
    }
}

.dg_theme {
    background-color:#1a1a1a;
}

.lg_theme {
    background-color:#eee;
}

@media screen and (max-width:1300px) {


}

@media screen and (max-width:1100px) {

}

@media screen and (max-width:1000px) {

}

@media screen and (min-width:990px){
    .hide_d {
        display:none;
    }
}

@media screen and (max-width:990px) and (min-width:600px){
    .hide_t {
        display:none;
    }
}

@media screen and (max-width:900px) {

}

@media screen and (max-width:800px) {

}

@media screen and (max-width:700px) {

}

@media screen and (max-width:600px) {
    
    .hide_m {
        display:none;
    }
}

@media screen and (max-width:500px) {

}

@media screen and (max-width:375px) {

}