/*
==================================================
TECHNOLOGY PAGE GLOBAL
==================================================
*/
.section-kicker{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--gold);
    font-family:'Inter', sans-serif;
    font-size:.76rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.13em;
    margin-bottom:18px;
}

.section-kicker::before{
    content:"";
    width:34px;
    height:3px;
    border-radius:999px;
    background:var(--gold);
}
/*
==================================================
TECHNOLOGY HERO
==================================================
*/

.tech-hero{
    position:relative;
    overflow:hidden;
    background-color:#071a38 !important;
    background-image:
        linear-gradient(
            90deg,
            #071a38 0%,
            #071a38 42%,
            rgba(7,26,56,.86) 52%,
            rgba(7,26,56,.36) 68%,
            rgba(7,26,56,.08) 100%
        ),
        linear-gradient(
            180deg,
            rgba(7,26,56,.18) 0%,
            rgba(7,26,56,0) 38%,
            rgba(7,26,56,.16) 100%
        ),
        url("../images/technology/technology-hero-visual.png");
    background-repeat:no-repeat;
    background-size:100% 100%, 100% 100%, auto 90%;
    background-position:center, center, right 10% center;
    color:#fff;
    padding:0;
}

.tech-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:44px 44px;
    opacity:.28;
    mask-image:linear-gradient(to bottom, #000 0%, transparent 92%);
    pointer-events:none;
}

.tech-hero-inner{
    position:relative;
    z-index:2;
    width:min(1180px, calc(100% - 40px));
    margin:auto;
    display:grid;
    grid-template-columns:.82fr 1.18fr;
    align-items:center;
    min-height:520px;
}

.tech-hero-content{
    max-width:640px;
}

.tech-hero h1{
    max-width:620px;
    margin:0 0 22px;
    font-family:'Montserrat', sans-serif;
    font-weight:800;
    font-size:clamp(2rem, 4.1vw, 4.15rem);
    line-height:1.03;
    letter-spacing:-.07em;
    color:#fff;
}

.tech-hero-content p{
    max-width:580px;
    margin:0;
    color:rgba(255,255,255,.82);
    font-size:1.02rem;
    line-height:1.75;
}

.tech-hero .btn-primary{
    margin-top:30px;
}


/*
==================================================
BUILT FOR EXECUTION SLIDER
==================================================
*/

.tech-execution{
    padding:50px 0;
    background:#F5F7FA;
}

.tech-container{
    width:min(1180px, calc(100% - 40px));
    margin:auto;
}

.tech-section-head{
    text-align:center;
    margin:0 auto 42px;
}

.tech-section-head .section-kicker{
    justify-content:center;
}

.tech-section-head h2{
    font-family:'Montserrat', sans-serif;
    font-size:clamp(1.7rem, 2.25vw, 2.15rem);
    color:var(--primary);
    font-weight:800;
    line-height:1.22;
    margin:0;
}

.tech-section-head p{
    margin:14px auto 0;
    color:#5d6675;
    line-height:1.75;
    font-size:1rem;
}

.tech-slider{
    position:relative;
}

.tech-slide-panel{
    position:relative;
    min-height:430px;
    display:grid;
    grid-template-columns:.7fr 1.3fr;
    gap:44px;
    align-items:center;
    padding:10px;
    border-radius:28px;
    background:#fff;
    border:1px solid rgba(11,31,77,.08);
    box-shadow:0 24px 70px rgba(11,31,77,.09);
    overflow:hidden;
}

.tech-slide-copy{
    position:relative;
    z-index:2;
    padding-left:30px;
}

.tech-slide-number{
    display:block;
    color:var(--gold);
    font-family:'Montserrat', sans-serif;
    font-weight:800;
    font-size:1.18rem;
    margin-bottom:18px;
}

.tech-slide-copy h3{
    max-width:390px;
    margin:0 0 16px;
    font-family:'Montserrat', sans-serif;
    color:var(--primary);
    font-size:clamp(1.65rem, 2.7vw, 2.6rem);
    line-height:1.08;
    font-weight:800;
}

.tech-slide-copy p{
    max-width:430px;
    margin:0 0 24px;
    color:#596574;
    font-size:1rem;
    line-height:1.72;
}

.tech-slide-points{
    list-style:none;
    display:grid;
    gap:14px;
    margin:0;
    padding:0;
}

.tech-slide-points li{
    position:relative;
    padding-left:30px;
    color:#12274a;
    font-weight:700;
    font-size:.94rem;
}

.tech-slide-points li::before{
    content:"";
    position:absolute;
    left:0;
    top:4px;
    width:17px;
    height:17px;
    border-radius:50%;
    border:1.5px solid var(--gold);
    background:radial-gradient(circle at center, var(--gold) 0 3px, transparent 4px);
}


/*
==================================================
SLIDER IMAGE
==================================================
*/

.tech-slide-visual{
    position:relative;
    height:450px;
    min-height:450px;
    border-radius:24px;
    background:#071a38;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
}

.tech-slide-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
    transition:opacity .25s ease, transform .35s ease;
}

.tech-slide-visual img.is-changing{
    opacity:0;
    transform:scale(.985);
}


/*
==================================================
SLIDER ARROWS
==================================================
*/

.tech-slider-arrow{
    position:absolute;
    top:215px;
    z-index:5;
    width:48px;
    height:48px;
    border-radius:50%;
    border:0;
    background:#071a38;
    color:#fff;
    font-size:2rem;
    line-height:1;
    cursor:pointer;
    display:grid;
    place-items:center;
    box-shadow:0 18px 40px rgba(7,26,56,.25);
    transition:transform .25s ease, background .25s ease, color .25s ease;
}

.tech-slider-arrow:hover{
    background:var(--gold);
    color:var(--primary);
    transform:scale(1.06);
}

.tech-prev{
    left:-24px;
}

.tech-next{
    right:-24px;
}


/*
==================================================
FEATURE TABS
==================================================
*/

.tech-feature-nav{
    display:grid;
    grid-template-columns:repeat(8,1fr);
    margin-top:24px;
    padding:16px;
    border-radius:24px;
    background:#fff;
    border:1px solid rgba(11,31,77,.08);
    box-shadow:0 18px 45px rgba(11,31,77,.06);
}

.tech-feature-tab{
    min-height:112px;
    border:0;
    background:transparent;
    border-right:1px solid rgba(11,31,77,.08);
    color:var(--primary);
    cursor:pointer;
    padding:14px 10px;
    display:grid;
    place-items:center;
    gap:8px;
    transition:background .25s ease, color .25s ease, transform .25s ease;
}

.tech-feature-tab:last-child{
    border-right:0;
}

.tech-feature-tab strong{
    font-family:'Inter', sans-serif;
    font-size:.78rem;
    line-height:1.25;
    font-weight:800;
}

.feature-svg{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    color:var(--primary);
    border:1.5px solid currentColor;
    border-radius:14px;
    transition:
        color .25s ease,
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.feature-svg svg{
    width:23px;
    height:23px;
    display:block;
}

.feature-svg svg path{
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.tech-feature-tab:hover{
    color:var(--gold);
}

.tech-feature-tab:hover .feature-svg{
    color:var(--gold);
    background:rgba(212,160,23,.08);
    box-shadow:0 10px 24px rgba(212,160,23,.16);
    transform:translateY(-3px);
}

.tech-feature-tab.active{
    background:#071a38;
    color:#fff;
    border-radius:16px;
    transform:translateY(-3px);
}

.tech-feature-tab.active .feature-svg{
    color:var(--gold);
    border-color:var(--gold);
    background:rgba(212,160,23,.1);
    box-shadow:0 10px 24px rgba(212,160,23,.18);
}


/*
==================================================
SLIDER PROGRESS
==================================================
*/

.tech-slider-progress{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin-top:22px;
}

.progress-track{
    width:180px;
    height:5px;
    border-radius:999px;
    background:#d8dee8;
    overflow:hidden;
}

.progress-track span{
    display:block;
    width:12.5%;
    height:100%;
    border-radius:999px;
    background:var(--gold);
    transition:width .35s ease;
}

.tech-slider-progress p{
    margin:0;
    color:var(--primary);
    font-weight:800;
    font-size:.9rem;
}


/*
==================================================
HERO RESPONSIVE
==================================================
*/

@media(max-width:979.99px){

    .tech-hero{
        background-color:#071a38 !important;
        background-image:
            linear-gradient(
                90deg,
                rgba(7,26,56,.98) 0%,
                rgba(7,26,56,.94) 48%,
                rgba(7,26,56,.82) 100%
            ),
            url("../images/technology/technology-hero-visual.png") !important;
        background-repeat:no-repeat;
        background-size:100% 100%, auto 92% !important;
        background-position:center, right -130px center !important;
        padding:74px 0 54px;
    }

    .tech-hero-inner{
        width:min(1180px, calc(100% - 40px));
        min-height:auto;
        display:block;
    }

    .tech-hero-content{
        position:relative;
        z-index:2;
        max-width:100%;
    }

    .tech-hero h1,
    .tech-hero-content p{
        max-width:100%;
    }

    .tech-hero-content p{
        color:rgba(255,255,255,.82);
    }
}

@media(max-width:640px){
    .tech-hero-inner{
        width:min(100% - 28px, 1180px);
    }
    .tech-hero-content p{
        font-size:.96rem;
    }
    .section-kicker::before{
        width:26px;
    }
    .tech-hero .btn-primary{
        width:70%;
    }
}

/*
==================================================
SLIDER TABLET / MIDPOINT
701px - 1080px
==================================================
*/

@media(min-width:701px) and (max-width:1080px){
    .tech-slide-panel{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:22px;
        padding:28px;
    }
    .tech-slide-copy{
        display:contents;
        padding-left:0;
    }
    .tech-slide-number{
        display:none;
    }
    .tech-slide-copy h3{
        order:1;
        max-width:100%;
        margin:0;
        font-size:clamp(1.7rem, 4vw, 2.35rem);
    }
    .tech-slide-visual{
        order:2;
        width:100%;
        height:390px;
        min-height:390px;
        border-radius:22px;
    }
    .tech-slide-copy p{
        order:3;
        max-width:100%;
        margin:0;
        text-align:left;
    }
    .tech-slide-points{
        order:4;
        width:100%;
        display:grid;
        justify-items:start;
        text-align:left;
        margin:0;
        padding:0;
    }
    .tech-slide-points li{
        width:100%;
        text-align:left;
        justify-self:start;
    }
    .tech-feature-nav{
        display:none;
    }
    .tech-slider-arrow{
        top:330px;
        bottom:auto;
        width:46px;
        height:46px;
        font-size:1.8rem;
        transform:none;
    }
    .tech-slider-arrow:hover{
        transform:scale(1.06);
    }
    .tech-prev{
        left:14px;
    }
    .tech-next{
        right:14px;
    }
    .tech-slider-progress{
        margin-top:18px;
    }
    .tech-slider-progress p{
        display:none;
    }
}


/*
==================================================
SLIDER MOBILE
==================================================
*/

@media(max-width:700px){
    .tech-execution{
        padding:66px 0 74px;
    }
    .tech-container{
        width:min(100% - 28px, 1180px);
    }
    .tech-slide-panel{
        display:flex;
        flex-direction:column;
        gap:18px;
        padding:16px;
        border-radius:24px;
        align-items:stretch;
    }
    .tech-slide-copy{
        display:contents;
        padding-left:0;
    }
    .tech-slide-number{
        display:none;
    }
    .tech-slide-copy h3{
        order:1;
        max-width:100%;
        margin:0;
        font-size:clamp(1.35rem, 7vw, 1.85rem);
    }
    .tech-slide-visual{
        order:2;
        width:100%;
        height:280px;
        min-height:280px;
        border-radius:20px;
    }
    .tech-slide-visual img{
        width:100%;
        height:100%;
        object-fit:contain;
        object-position:center center;
        padding:4px;
    }
    .tech-slide-copy p{
        order:3;
        max-width:100%;
        margin:0;
        text-align:left;
    }
    .tech-slide-points{
        order:4;
        width:100%;
        display:grid;
        justify-items:start;
        text-align:left;
        margin:0;
        padding:0;
    }
    .tech-slide-points li{
        width:100%;
        text-align:left;
        justify-self:start;
    }
    .tech-feature-nav{
        display:none;
    }
    .tech-slider-arrow{
        top:210px;
        bottom:auto;
        width:42px;
        height:42px;
        font-size:1.7rem;
    }
    .tech-prev{
        left:8px;
    }
    .tech-next{
        right:8px;
    }
    .tech-slider-progress{
        margin-top:18px;
    }
    .tech-slider-progress p{
        display:none;
    }
}

/*
==================================================
TECHNOLOGY CTA VISUAL
==================================================
*/
.tech-cta-visual{
    padding:0;
    background:#fff;
    overflow:hidden;
}
.tech-cta-visual__grid{
    display:grid;
    grid-template-columns:.88fr 1.12fr;
    align-items:center;
    gap:42px;
    padding:0;
    border-bottom:1px solid rgba(11,31,77,.08);
    margin-bottom: -7%;
}
.tech-cta-visual__content{
    max-width:520px;
    padding-bottom:25%;
    padding-top: 10%;
}
.tech-cta-visual__content h2{
    margin:0 0 16px;
    font-family:'Montserrat', sans-serif;
    font-size:clamp(1.7rem, 2.25vw, 2.15rem);
    color:var(--primary);
    font-weight:800;
    line-height:1.05;
}
.tech-cta-visual__content h2 span{
    color:var(--gold);
}
.tech-cta-visual__content p{
    max-width:430px;
    margin:0 0 28px;
    color:#5d6675;
    font-size:1rem;
    line-height:1.72;
}
.tech-cta-visual__content .btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}
.tech-cta-visual__content .btn-arrow{
    display:inline-block;
    line-height:1;
    transition:transform .25s ease;
}
.tech-cta-visual__content .btn-primary:hover .btn-arrow{
    transform:translateX(4px);
}
.tech-cta-visual__art{
    display:flex;
    justify-content:flex-end;
    align-items:flex-end;
}
.tech-cta-visual__art img{
    width:100%;
    max-width:500px;
    height:auto;
    display:block;
    object-fit:contain;
}

@media(max-width:700px){

    .tech-cta-visual{
        padding:56px 0 64px;
    }

    .tech-cta-visual__grid{
        display:block;
        padding-bottom:0;
        border-bottom:0;
    }

    .tech-cta-visual__content{
        max-width:100%;
        text-align:left;
        padding: 2% 10%;
    }

    .tech-cta-visual__content p{
        max-width:100%;
    }

    .tech-cta-visual__content .btn-primary{
        width:70%;
    }

    .tech-cta-visual__art{
        display:none;
    }
}