.bannerWrap{
    overflow: hidden;
    .bannerImg{
        height: calc(100vh - 80px);
        border-radius: 50px;
        overflow: hidden;
        position: relative;
        &::before{
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            content: "";
            position: absolute;
            background: linear-gradient(to top, rgb(0 0 0 / 82%) 0%, rgb(0 0 0 / 0%) 100%);
        }
        picture{
            display: block;
            height: 100%;
        }
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
        }
    }
    /*===a picture-only slide (e.g. the brand wall) has no text to shade===*/
    .noText .bannerImg::before{
        display: none;
    }
    .bannerContent{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 40px;
        .bannerText{
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;
            .bannerHeading{
                width: calc(100% - 28%);
                /*===scales with the viewport so the 3-line break holds below 1920===*/
                font-size: clamp(32px, calc(7vw - 14px), 90px);
                display: block;
                font-weight: 800;
                line-height: 1;
                color: #fff;
                text-transform: uppercase;    
                font-family: "Special Gothic", sans-serif;            
            }
            .stokeText{
                -webkit-text-stroke: 1px rgb(245, 237, 237) !important;
                color: transparent !important;
                font-family: sans-serif;
                font-family: "Special Gothic", sans-serif;
            }
        }
        .bannerBtnWrap{
            /*===buttons sit at the right edge of the banner===*/
            margin-left: auto;
            width: 28%;
            ul{
                display: flex;
                gap: 20px;
                justify-content: flex-end;
                li{
                    a{
                        display: block;
                        padding: 15px 20px 15px;
                        background-color: #ffffff;
                        color: #000;
                        border: 1px solid #ffffff;
                        border-radius: 30px;
                    }
                    &:last-child{
                        a{
                            background-color: transparent;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
}



/*===groupSec start===*/
.groupSec{
    background-color: #1667a6;
    .groupCard{
        display: block; /* rendered as a link when the card has a URL */
        color: inherit;
        background-color: #fff;
        border-radius: 30px;
        overflow: hidden;
        padding-bottom: 230px;
        .groupCardContent{
            padding: 20px;
            min-height: 380px;
            z-index: 2;
            .serviceLogo{
                padding: 15px;
                background-color: #fff;
                box-shadow: 0 0 10px 0px #ccc;
                margin-bottom: 15px;
                border-radius: 15px;
                display: inline-block;
                img{
                    height: 60px;
                    width: auto;
                }
            }
            .cardTitle{
                font-size: 30px;
                font-weight: 600;
                display: block;
                margin-bottom: 15px;
                line-height: 1;
            }
        }
        .groupCardImg{
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            &::before{
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                content: "";
                position: absolute;
                z-index: 1; /* stays above the image when it scales on hover */
                background: linear-gradient(to bottom, rgb(255 255 255 / 100%) 55%, rgb(0 0 0 / 0%) 95%);
            }
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center bottom;
            }
        }
    }
}
@media (max-width: 1540px){
    .groupSec {
        .groupCard {
            padding-bottom: 150px;
            .groupCardContent {
                .serviceLogo {
                    img {
                        height: 50px;
                    }
                }
                p{
                    font-size: 16px;
                }
                .cardTitle {
                    font-size: 22px;
                }
            }
        }
    }
}
/*===solutionSec start==*/
.solutionBox{
    border-radius: 20px;
    overflow: hidden;
    background-color: #fff;
    margin-bottom: 25px;
    .solutionImg{
        width: 100%;
        position: relative;
        overflow: hidden;
        &::before{
            width: 100%;
            height: 200px;
            left: 0;
            bottom: 0;
            content: "";
            position: absolute;
            z-index: 1; /* stays above the image when it scales on hover */
            background: linear-gradient(to top, rgb(255 255 255 / 100%) 6%, rgb(0 0 0 / 0%) 78%);
        }
        img{
            width: 100%;
        }
    }
    .solutionCont{
        padding: 20px;
        margin-top: -30px;
        position: relative;
        z-index: 1;
        span{
            width: 100%;
            display: block;
            &.solutionNum{
                font-size: 50px;
                font-weight: 700;
                line-height: 1;
                margin-bottom: 15px;
                display: inline-block;
                padding-left: 20px;
                position: relative;
                &:before{
                    position: absolute;
                    width: 8px;
                    height: 50px;
                    content: "";
                    left: 0;
                    top: 0;
                    background: url(../images/home/title_line.png) no-repeat center center;
                    background-size: 100%;
                }
                &::after{
                    position: absolute;
                    width: 15px;
                    height: 15px;
                    content: "";
                    left: 90px;
                    top: 28px;
                    background: url(../images/home/title-dot.png) no-repeat center center;
                    background-size: 100%;
                }
            }
            &.solutionTitle{
                font-size: 24px;
                font-weight: 600;
                text-transform: uppercase;
                color: var(--blue);
                margin-bottom: 10px;
            }
            &.btnOne{                
                text-align: center;
            }
        }
        .solutionTxt{
            margin-bottom: 15px;
            min-height: 70px;
        }
    }
    .btnOne {
        border: 1px solid #acacac;
    }
}

/*===blueSec start===*/
.blueSec{
    background-color: #1667a6;
    .chooseCont{
        margin-bottom: 30px;
        &:last-child{
            margin-bottom: 0px;
        }
        .chooseIcon{
            width: 110px;
            height: 110px;
            border-radius: 50%;
            padding: 10px;
            background-color: #7ca9cd;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            span{
                font-size: 26px;
                font-weight: 700;
                line-height: 1;
                color: #fff;
                letter-spacing: .5px;
                white-space: nowrap;
            }
            /*===hand-entered counters like 45+ or 1980 need a touch less size===*/
            &.isCounter span{
                font-size: 20px;
                letter-spacing: 0;
            }
        }
        .chooseText{
            h3{
                font-size: 24px;
                font-weight: 700;
                margin-bottom: 10px;
                color: #fff;
            }
            p{
                font-size: 17px;
                color: #fff;
            }
        }
    }
}


/*===presenceSec start===*/
.presenceSec{
    background: linear-gradient(180deg, #f3f8fc 0%, #e4eef7 100%);
    overflow: hidden;
    .presenceCont{
        padding-right: 30px;
        .SecH{
            font-size: 90px;
            margin-bottom: 25px;
        }
        p{
            max-width: 100%;
            margin-bottom: 30px;
        }
    }
    .btnOne.blueBtn{
        padding: 15px 35px;
        background-color: #1667a6;
        border: 1px solid #1667a6;
        color: #fff;
        &:hover{
            background-color: transparent;
            color: #1667a6;
        }
    }
}

.mapWrap{
    display: flex;
    width: 60%;
    .mapInner{
        width: 100%;
        max-width: 660px;
        position: relative;
    }
}
.mapCanvas{
    position: relative;
    width: 100%;
}
.indiaMap{
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
    /*===the artwork is one flat blue shape, so it is cooled to a neutral
         land tone - the state outlines stay crisp and the coloured pins
         are the only saturated thing on the map===*/
    filter:
        saturate(.2) brightness(2.1) contrast(.9)
        drop-shadow(0 14px 30px rgb(16 58 92 / 14%));
}

/*===a soft wash of the group colour behind each cluster, so the states we
     actually cover read as coloured regions on an otherwise neutral map.
     Position and size are measured from the pins by custom-home.js.===*/
.mapHaloList{
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    list-style: none;
    margin: 0;
    padding: 0;
}
.mapHalo{
    position: absolute;
    /*===one glow per location - they overlap into a single mass wherever
         the offices cluster, which is the coverage read we want===*/
    width: 9%;
    height: 9%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--pinColor, #1667a6) 0%, transparent 70%);
    opacity: .38;
    transform: translate(-50%, -50%) scale(.9);
    transition: opacity .45s ease, transform .45s ease;
    mix-blend-mode: multiply;
    &.is-shown{
        transform: translate(-50%, -50%) scale(1);
    }
    &.is-lit{
        opacity: .55;
        transform: translate(-50%, -50%) scale(1.08);
    }
    &.is-dim{
        opacity: .12;
    }
}

/*===map pins===*/
.mapPinList{
    position: absolute;
    inset: 0;
    z-index: 3;
    list-style: none;
    margin: 0;
    padding: 0;
    .mapPin{
        position: absolute;
        width: 0;
        height: 0;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity .45s ease, transform .45s ease;
        &.is-shown{
            opacity: 1;
            transform: translateY(0);
        }
        &.is-active{
            z-index: 8;
        }
        /*===everything else steps back while a group is being read===*/
        &.is-dim{
            opacity: .2;
        }
    }
    .mapPinBtn{
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
        white-space: nowrap;
        transform: translate(-6px, calc(-50% + var(--nudge, 0px)));
        transition: transform .3s ease;
        &:focus-visible{
            outline: 2px solid #0d4c7d;
            outline-offset: 4px;
            border-radius: 999px;
        }
    }
    /*===label flips to the other side of the dot near the right edge===*/
    .mapPin.labelLeft .mapPinBtn{
        flex-direction: row-reverse;
        transform: translate(calc(-100% + 6px), -50%);
    }
    .mapPinDot{
        flex: none;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: var(--pinColor, #1667a6);
        box-shadow:
            0 0 0 3px #fff,
            0 3px 9px rgb(10 45 76 / 32%);
        transition: transform .3s ease, box-shadow .3s ease;
    }
    /*===the name is the whole of the hover state now, so it stays out of
         the way until its pin is pointed at===*/
    .mapPinLabel{
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: .01em;
        color: #fff;
        padding: 6px 11px;
        border-radius: 999px;
        background-color: var(--pinColor, #1667a6);
        box-shadow: 0 6px 16px rgb(10 45 76 / 26%);
        opacity: 0;
        visibility: hidden;
        transform: translateX(-6px) scale(.94);
        transform-origin: left center;
        transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    }
    .mapPin.labelLeft .mapPinLabel{
        transform: translateX(6px) scale(.94);
        transform-origin: right center;
    }
    .mapPinBtn:hover,
    .mapPinBtn:focus-visible,
    .is-active .mapPinBtn{
        .mapPinDot{
            transform: scale(1.3);
            box-shadow:
                0 0 0 4px #fff,
                0 5px 16px rgb(10 45 76 / 40%);
        }
        .mapPinLabel{
            opacity: 1;
            visibility: visible;
            transform: translateX(0) scale(1);
        }
    }
    /*===pulse ring on the active pin===*/
    .mapPinPulse{
        position: absolute;
        left: 0;
        top: 0;
        width: 16px;
        height: 16px;
        margin: -8px 0 0 -8px;
        border-radius: 50%;
        border: 2px solid var(--pinColor, #1667a6);
        opacity: 0;
        pointer-events: none;
    }
    .is-active .mapPinPulse{
        animation: mapPulse 2s ease-out infinite;
    }
}
@keyframes mapPulse{
    0%{
        opacity: .65;
        transform: scale(1);
    }
    100%{
        opacity: 0;
        transform: scale(3.2);
    }
}

/*===state key under the copy - one row per state, opening to its towns===*/
.presenceLegend{
    position: absolute;
    right: 0;
    width: 40%;
    padding-left: 30px;
    bottom: 0;
}
.legendList{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.legendGroup{
    border-radius: 16px;
    background-color: rgb(255 255 255 / 55%);
    border: 1px solid rgb(22 103 166 / 8%);
    overflow: hidden;
    transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
    &.is-active{
        background-color: #fff;
        border-color: color-mix(in srgb, var(--pinColor, #1667a6) 35%, #fff);
        box-shadow: 0 12px 26px rgb(11 51 85 / 9%);
    }
}
.legendHead{
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
    &:focus-visible{
        outline: 2px solid #0d4c7d;
        outline-offset: -2px;
    }
}
.legendIcon{
    flex: none;
    width: 27px;
    height: 27px;
    border-radius: 8px;
    background-color: var(--pinColor, #1667a6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 4px 11px color-mix(in srgb, var(--pinColor, #1667a6) 45%, transparent);
    transition: transform .3s ease;
}
.legendGroup.is-active .legendIcon{
    transform: scale(1.08);
}
.legendState{
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pinColor, #1667a6);
}
.legendCount{
    flex: none;
    min-width: 24px;
    padding: 4px 7px;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--pinColor, #1667a6) 13%, #fff);
    color: var(--pinColor, #1667a6);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}
/*===towns roll open under their state. The 0fr/1fr grid row animates to
     the content's own height, so nothing has to be measured in js and the
     chips can rewrap at any width without being clipped===*/
.legendPlacesWrap{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s ease, opacity .3s ease;
    opacity: 0;
}
.legendGroup.is-active .legendPlacesWrap{
    grid-template-rows: 1fr;
    opacity: 1;
}
.legendPlaces{
    list-style: none;
    margin: 0;
    padding: 0 14px;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.legendGroup.is-active .legendPlaces{
    padding-bottom: 13px;
}
.legendPlace{
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 6px 11px;
    border: 0;
    border-radius: 999px;
    background-color: #fff;
    box-shadow: inset 0 0 0 1px rgb(20 60 95 / 10%);
    font-size: 12px;
    line-height: 1.2;
    color: #33506a;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
    &:hover,
    &.is-active{
        background-color: var(--pinColor, #1667a6);
        color: #fff;
        box-shadow: 0 5px 14px color-mix(in srgb, var(--pinColor, #1667a6) 40%, transparent);
        .legendPlaceNote{
            color: rgb(255 255 255 / 80%);
        }
    }
    &:focus-visible{
        outline: 2px solid #0d4c7d;
        outline-offset: 2px;
    }
}
.legendPlaceNote{
    font-size: 10px;
    color: #8298ab;
    transition: color .25s ease;
}

/*===responsive===*/
@media (max-width: 1600px){
    .bannerWrap {
        .bannerContent {
            .bannerText {
                .bannerHeading {
                    font-size: 80px;
                    width: calc(100% - 32%);
                    padding-right: 20px;
                }
            }
            .bannerBtnWrap {
                margin-left: auto;
                width: 32%;
            }
        }
    }
    .home {
        .tagHolder {
            .SecH {
                font-size: 70px;
            }
        }
    }
    .section_9 {
        .hookDrop {
            width: 75px !important;
        }
    }
}
@media (max-width: 1440px){
    .bannerWrap {
        .bannerContent {
            .bannerText {
                .bannerHeading {
                    font-size: 74px;
                }
            }
        }
        .bannerImg {
            height: auto;
        }
    }
}
/*===with height auto each slide took its own image's height, so slides with a
     wider picture came out ~30px shorter than the slider and the dots (30px off
     the slider's bottom) landed on their edge. One shape for every slide - the
     main hero images' 1660x948. Landscape only: portrait screens get the
     separate portrait picture.===*/
@media (max-width: 1440px) and (orientation: landscape){
    .bannerWrap .bannerImg{
        aspect-ratio: 1660 / 948;
    }
}
@media (max-width: 1399px){
    .presenceSec .presenceCont .SecH{
        font-size: 62px;
    }
    .bannerWrap {
        .bannerContent {
            top: 50%;
            bottom: auto;
            transform: translateY(-50%);
            left: 0;
            .bannerBtnWrap{
                margin: 0 auto;
                width: 100%;
                ul{                    
                    justify-content: center;
                }
            }
            .bannerText {
                .bannerHeading {
                    width: 100%;
                    padding-right: 0;
                    text-align: center;
                    margin-bottom: 30px;
                }
            }
        }
    }
}
@media (max-width: 1280px){
    .whyChooseSec{
        .row{
            align-items: flex-end;
        }
    }
    .blueSec {
        .chooseCont {
            &:last-child {
                margin-bottom: 30px;
            }
        }
    }
}
@media (max-width: 1200px){
    .chooseMiddle{
        display: none !important;
    }
    .whyChooseSec{
        .col-lg-4 {
            flex: 0 0 auto;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            .chooseCont{
                width: 33.33%;
                padding: 0 20px;
            }
        }
    }
}
/* The menu is no longer hidden here: header.css turns it into a
   drawer below 1200px, site-wide, so the homepage and the inner
   pages share one header behaviour. */
@media (max-width: 1199px){
    .presenceSec .presenceCont{
        padding-right: 0;
        .SecH{
            font-size: 56px;
        }
    }
    .presenceLegend{
        padding-right: 0;
    }
    .mapPinList .mapPinLabel{
        font-size: 11px;
        padding: 5px 9px;
    }
}

@media (max-width: 991px){
    .presenceSec .presenceCont{
        margin-bottom: 30px;
        text-align: center;
        p{
            margin-left: auto;
            margin-right: auto;
        }
        .btnWrap{
            display: flex;
            justify-content: center;
        }
    }
    /*===the state key leaves its pinned column and stacks above the map===*/
    .presenceLegend{
        position: static;
        width: auto;
        max-width: 520px;
        padding-left: 0;
        margin: 0 auto 45px;
    }
    .legendHead{
        text-align: left;
    }
    /*===the legend is no longer pinned to the right, so the 60% the map
         shares with it on desktop has to go back to full width===*/
    .mapWrap{
        width: 100%;
    }
    .mapWrap .mapInner{
        max-width: 480px;
    }
    .whyChooseSec{
        .col-lg-4 {
            .chooseCont{
                width: 100%;
                padding: 0 20px;
                text-align: center;
            }
        }
    }
    .blueSec {
        .chooseCont {
            .chooseIcon {
                margin: 0 auto;
                margin-bottom: 20px;
            }
            &:last-child {
                margin-bottom: 30px;
            }
        }
    }

}
@media (max-width: 767px){
    /*===claw back the outer gutters so the map is not squeezed===*/
    .section_4 .container-max{
        padding-left: 15px;
        padding-right: 15px;
    }
    .presenceSec{
        border-radius: 30px;
        padding: 60px 0;
        .container{
            padding-left: 15px;
            padding-right: 15px;
        }
        .presenceCont .SecH{
            font-size: 42px;
        }
    }
    /*===on a phone the section is a plain map image with pointers on it:
         the artwork gets the full width, and the pins become finger-sized
         targets that reveal their name on tap===*/
    .mapWrap{
        width: 100%;
        .mapInner{
            max-width: 100%;
        }
    }
    .mapPinList{
        .mapPinDot{
            width: 16px;
            height: 16px;
            box-shadow:
                0 0 0 3px #fff,
                0 3px 10px rgb(10 45 76 / 38%);
        }
        /*===the dot is the visible pointer; this is the part a thumb has to
             hit, so it is grown well past it without moving anything===*/
        .mapPinBtn::before{
            content: "";
            position: absolute;
            left: 8px;
            top: 50%;
            width: 40px;
            height: 40px;
            transform: translate(-50%, -50%);
            border-radius: 50%;
        }
        .mapPin.labelLeft .mapPinBtn::before{
            left: auto;
            right: 8px;
            transform: translate(50%, -50%);
        }
        .mapPinLabel{
            font-size: 12px;
            padding: 6px 11px;
        }
    }
    .mapPinList .mapPinBtn,
    .mapPinList .mapPin.labelLeft .mapPinBtn{
        transform: translate(-8px, -50%);
    }
    .mapPinList .mapPin.labelLeft .mapPinBtn{
        transform: translate(calc(-100% + 8px), -50%);
    }
    .presenceLegend{
        margin-bottom: 35px;
    }
}

/*===industrySec start===*/
.section_5{
    .headingWrap{
        display: block;
    }
}
/*===industry slider styles moved to common.css (shared with inner pages)===*/
@media (max-width: 1199px){
    .section_5 .SecH{
        font-size: 64px;
    }
}
@media (max-width: 991px){
    .section_5 .SecH{
        font-size: 48px;
    }
}
@media (max-width: 767px){
    .section_5 .SecH{
        font-size: 36px;
    }
}

/*===oemLogoSec start===*/
.section_6{
    .headingWrap{
        display: block;
    }
}
@media (max-width: 991px){
    .section_6 .SecH{
        font-size: 48px;
    }
}
@media (max-width: 767px){
    .section_6 .SecH{
        font-size: 36px;
    }
}

/*===serviceSec start===*/
.serviceSec{
    background-color: #e4edf8;
    /*===one service centre: copy on the left, photo on the right===*/
    .headingWrap{
        justify-content: center;
    }
    .centerCont{
        padding-right: 30px;
    }
    .centerH{
        font-size: 70px;
        line-height: 1;
        text-transform: uppercase;
        font-weight: 800;
        margin-bottom: 25px;
    }
    .centerText{
        p{
            font-size: 17px;
            line-height: 1.6;
            color: #4b5a66;
            margin-bottom: 15px;
            &:last-child{
                margin-bottom: 0;
            }
        }
    }
    .centerBtn{
        margin-top: 30px;
    }
    .centerImg{
        border-radius: 20px;
        overflow: hidden;
        img{
            width: 100%;
            height: 480px;
            object-fit: cover;
            object-position: center center;
            display: block;
        }
    }
}

@media (max-width: 1366px){
    .serviceSec {
        .centerH {
            font-size: 40px;
            margin-bottom: 10px;
        }
        .centerImg {
            img {
                height: 410px;
            }
        }
        .centerText {
            p {
                font-size: 16px;
                margin-bottom: 10px;
            }
        }
    }
    .legendPlace {
        gap: 5px;
        padding: 6px 5px;
        font-size: 10px;
    }
    .section_8{
        .headingWrap {
            justify-content: center;
            text-align: center;
        }
    }
    .clientSliderWrap {
        .testiInner {
            .testiCont {
                .testiQuote {
                    .quoteText {
                        font-size: 22px;
                    }
                }
                .quoteSub {
                    margin: 0 0 20px auto;
                    font-size: 16px;
                }
            }
        }
    }
    .ctaSec {
        .ctaContent {
            .SecH {
                font-size: 48px;
                margin-bottom: 30px;
            }
        }
    }
}
@media (max-width: 1199px){
    .bannerWrap {
        .bannerImg {
            border-radius: 30px;
        }
    }
}
@media (max-width: 1024px){
    .serviceSec {
        .centerH {
            font-size: 60px;
        }
    }
}
@media (max-width: 991px){
    .section_7 .SecH{
        font-size: 48px;
    }
    .serviceSec{
        .centerCont{
            padding-right: 0;
            margin-bottom: 30px;
        }
        .centerImg img{
            height: 400px;
        }
    }
    .section_7{
        .headingWrap{
            justify-content: center;
            .SecH{
                text-align: center;
            }
        }
    }
}
@media (max-width: 767px){
    .section_7 .SecH{
        font-size: 36px;
    }
    .serviceSec{
        border-radius: 30px;
        padding: 60px 0;
        .centerH{
            font-size: 36px;
        }
        .centerImg img{
            height: 260px;
        }
    }
    .home {
        .tagHolder {
            .SecH {
                font-size: 44px !important;
            }
        }
    }
    .groupSec {
        .groupCard {            
            padding-bottom: 80px;
            .groupCardContent {
                padding: 20px;
                .cardTitle {
                    font-size: 24px;
                }
            }
        }
    }
    .mb_50 {
        margin-bottom: 20px !important;
    }
    .bannerWrap {
        .bannerContent {
            .bannerBtnWrap {
                ul {
                    li {
                        a {
                            padding: 10px 20px 10px;
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 480px){
    .home {
        .tagHolder {
            .SecH {
                font-size: 32px !important;
            }
        }
    }
    .bannerWrap {
        .bannerContent {
            .bannerBtnWrap {
                ul {
                    flex-wrap: wrap;
                    li {
                        width: 100%;
                        a{
                            width: 100%;
                            text-align: center;
                        }
                    }
                }
            }
        }
    }
}
/*===clientSec start===*/
.clientSliderWrap{
    .testiInner{
        .testiImg{
            max-width: 440px;
            border-radius: 8px;
            height: 550px;
            figure{
                width: 100%;
                height: 100%;
                border-radius: 10px;
                overflow: hidden;
            }
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center center;
            }
            .watchVideoBtn{
                position: absolute;
                right: -70px;
                bottom: 25px;
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 8px 10px 8px 20px;
                border-radius: 30px;
                background-color: #000;
                color: #fff;
                font-size: 15px;
                transition: background-color .3s ease;
                i,
                svg{
                    font-size: 26px;
                    width: 1em;
                    height: auto;
                    color: #fff;
                    fill: currentColor;
                }
                &:hover{
                    background-color: #1667a6;
                    color: #fff;
                }
            }
        }
        .testiCont{
            padding: 0px 0 0 20px;
            .testiQuote{
                display: flex;
                gap: 18px;
                margin-bottom: 25px;
                align-items: flex-start;
                .quoteIcon{
                    flex-shrink: 0;
                    font-size: 34px;
                    width: 1em;
                    height: auto;
                    color: #1667a6;
                    fill: currentColor;
                }
                .quoteText{
                    font-size: 30px;
                    line-height: 1.3;
                    color: #1667a6;
                }
            }
            .quoteSub{
                max-width: 550px;
                margin: 0 0 25px auto;
                font-size: 18px;
                line-height: 1.5;
                color: #1f2428;
            }
            .testiAuthor{
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap: 12px;
                font-size: 17px;
                font-weight: 600;
                color: #1667a6;
                &::before{
                    content: "";
                    width: 35px;
                    height: 1px;
                    background-color: #1667a6;
                }
            }
        }
    }
    /*===slider arrows, bottom right===*/
    .clientArrows{
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        margin-top: 20px;
        position: absolute;
        right: 0;
        bottom: 10px;
        .industryArrow{
            width: 40px;
            height: 40px;
            i,
            svg{
                font-size: 14px;
            }
        }
    }
}
/*===heading sits above the client marquee===*/
.clientLogoHead{
    /*===unset the flex row so text-center can centre the tagHolder===*/
    .headingWrap{
        display: block;
    }
}
.clientLogoHead + .clientLogoWrap{
    margin-top: 0;
}
/*===client logos ride the oem marquee styles, greyed out===*/
.clientLogoWrap{
    margin-top: 60px;
    .oemLogoBox{
        img{
            filter: grayscale(1);
            opacity: .75;
            transition: filter .3s ease, opacity .3s ease;
        }
        &:hover img{
            filter: grayscale(0);
            opacity: 1;
        }
    }
}
@media (max-width: 1760px){
    .bannerWrap {
        .bannerContent {
            .bannerText {
                .bannerHeading {
                    font-size: 68px !important;
                }
            }
        }
    }
    .home {
        .tagHolder {
            .SecH {
                font-size: 70px;
            }
        }
    }
}
@media (max-width: 1399px){
    .clientSliderWrap {
        .testiInner {
            .testiCont {
                .testiQuote {
                    .quoteText {
                        font-size: 30px;
                    }
                }
            }
        }
    }
}
@media (max-width: 1366px){
    .bannerWrap {
        .bannerContent {
            .bannerText {
                .bannerHeading {
                    font-size: 40px !important;
                }
            }
            .bannerBtnWrap {
                ul {
                    li {
                        a {
                            padding: 10px 15px 10px;
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }
    .home {
        .tagHolder {
            .SecH {
                font-size: 48px;
            }
        }
    }
    .groupSec {
        .groupCard {
            display: block;
            color: inherit;
            background-color: #fff;
            border-radius: 30px;
            overflow: hidden;
            padding-bottom: 80px;
            .groupCardContent {
                .cardTitle {
                    font-size: 22px;
                    margin-bottom: 10px;
                }
            }
        }
    }
    
}
/*===================================================
    Testimonial, laptop band (992px - 1440px).

    The desktop block is drawn for a 1380px container:
    a 440x550 photo, the Watch Video pill hung 70px off
    its right edge, and the quote dropping to 30px at
    1399. None of that follows the columns down, so by
    1200 the pill is ~20px from the quote and under about
    1060 it sits on top of it, the photo keeps its hard
    550px height while the column squeezes the width to
    395 (0.72 against the intended 0.80), and the quote
    holds 30px all the way to 991 and piles up to eight
    short lines beside a photo it no longer fills.

    These tiers scale the photo, the pill and the quote
    with the column. Everything is bounded at 992 so the
    stacked <=991 layout below is untouched.
===================================================*/
@media (min-width: 992px){
    .clientSliderWrap .testiInner{
        /*===the short text column was top-aligned against a 550px photo===*/
        .row{
            align-items: center;
        }
        /*===height follows the width now, so the crop stays put===*/
        .testiImg{
            height: auto;
            aspect-ratio: 440 / 550;
        }
    }
}
@media (min-width: 992px) and (max-width: 1366px){
    .clientSliderWrap .testiInner{
        .testiCont{
            padding-left: 40px;
        }
    }
}
@media (min-width: 992px) and (max-width: 1280px){
    .clientSliderWrap .testiInner{
        /*===no room left for the whole overhang===*/
        .testiImg{
            .watchVideoBtn{
                right: -20px;
                padding: 7px 8px 7px 16px;
                font-size: 14px;
                i,
                svg{
                    font-size: 22px;
                }
            }
        }
        .testiCont{
            padding-left: 55px;
            .testiQuote{
                gap: 14px;
                margin-bottom: 20px;
                .quoteIcon{
                    font-size: 28px;
                }
                .quoteText{
                    font-size: 26px;
                }
            }
            .quoteSub{
                font-size: 17px;
            }
        }
    }
}
@media (min-width: 992px) and (max-width: 1199px){
    .clientSliderWrap .testiInner{
        /*===pill tucks inside the photo rather than over the quote===*/
        .testiImg{
            .watchVideoBtn{
                right: 15px;
            }
        }
        .testiCont{
            padding-left: 30px;
            .testiQuote{
                .quoteText{
                    font-size: 24px;
                }
            }
            .quoteSub{
                font-size: 16px;
            }
        }
    }
}
@media (max-width: 991px){
    .section_8 .SecH{
        font-size: 48px;
    }
    .clientSliderWrap .testiInner{
        .testiImg{
            margin-bottom: 30px;
        }
        .testiCont{
            padding: 0;
        }
    }
    .section_8{
        .headingWrap{
            justify-content: center;
            .SecH{
                text-align: center;
            }
        }
    }
    .clientSliderWrap {
        .testiInner {
            .testiImg {
                max-width: 180px;
                height: auto;
                margin: 0 auto;
            }
        }
    }
    .clientSliderWrap {
        padding-bottom: 10px;
        margin-bottom: 80px;
        .testiInner {
            .testiImg {
                max-width: 180px;
            }
            .testiCont {
                .quoteSub {
                    text-align: center;
                    max-width: 100%;
                }
                .testiQuote {
                    display: block;
                    .quoteText {
                        font-size: 30px;
                        text-align: center;
                    }
                    .quoteIcon {
                        font-size: 34px;
                        height: auto;
                        padding-left: 10px;
                    }
                }
                .testiAuthor{
                    justify-content: center;
                }
            }
        }
        .clientArrows {
            right: auto;
            bottom: -60px;
            left: 50%;
            transform: translateX(-50%);
        }
    }
}
@media (max-width: 767px){
    .section_8 .SecH{
        font-size: 36px;
    }
    .clientSliderWrap .testiInner .testiCont{
        .testiQuote .quoteText{
            font-size: 19px;
        }
        .quoteSub{
            max-width: 100%;
        }
    }
    .clientLogoWrap{
        margin-top: 40px;
    }
}

/*===equipSec start===*/
.section_9{
    .headingWrap{
        display: block;
    }
    /*===crane hook + tag pill drop in as one assembly===*/
    .hookDrop{
        position: absolute;
        left: 50%;
        top: -150px;
        transform: translateX(-50%);
        width: 120px;
        z-index: 1;
        pointer-events: none;
        opacity: 0; /* gsap reveals it */
        .hookImg{
            width: 100%;
            display: block;
        }
        /*===the pill hangs off the hook tip - gsap owns its transform===*/
        .tagPill.hookPill{
            left: 50%;
            top: calc(100% - 10px);
            opacity: 1;
            transform: none;
            animation: none;
        }
    }
}
@media (max-width: 991px){
    .section_9 .hookDrop{
        width: 80px;
        top: -100px;
    }
}
@media (max-width: 767px){
    .section_9 .hookDrop{
        width: 60px;
        top: -80px;
    }
}
/*===equipment slider styles moved to common.css (shared with inner pages)===*/
@media (max-width: 991px){
    .section_9 .SecH{
        font-size: 48px;
    }
}
@media (max-width: 767px){
    .section_9 .SecH{
        font-size: 36px;
    }
}

/*===ctaSec start===*/
.ctaSec{
    background-color: var(--blue);
    padding: 90px 80px;
    overflow: hidden;
    .ctaContent{
        max-width: 62%;
        .SecH{
            font-size: 64px;
            margin-bottom: 40px;
        }
    }
    .ctaBtnWrap{
        ul{
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            li{
                a{
                    padding: 14px 30px;
                }
            }
        }
    }
    .btnOne.solidWhiteBtn{
        background-color: #fff;
        border: 1px solid #fff;
        color: #000;
        &:hover{
            background-color: transparent;
            color: #fff;
        }
    }
    /*===crane artwork bleeding off the right edge===*/
    .ctaImg{
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 220px;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
        }
    }
}
@media (max-width: 1199px){
    .ctaSec .ctaContent .SecH{
        font-size: 50px;
    }
}
@media (max-width: 991px){
    .ctaSec{
        padding: 70px 50px;
        .ctaContent{
            max-width: 70%;
            .SecH{
                font-size: 40px;
            }
        }
        .ctaImg{
            width: 160px;
            right: 20px;
        }
    }
}
@media (max-width: 767px){
    .ctaSec{
        border-radius: 30px;
        padding: 50px 25px;
        .ctaBtnWrap {
            & ul {
                li {
                    width: 100%;
                    a{
                        width: 100%;
                        text-align: center;
                    }
                }
            }
        }
        .ctaContent{
            max-width: 100%;
            .SecH{
                font-size: 30px !important;
                margin-bottom: 30px !important;
                text-align: center;
            }
        }
        /*===crane fades behind the copy on small screens===*/
        .ctaImg{
            width: 130px;
            right: -30px;
            opacity: .35;
        }
    }
}

/*===faqSec start===*/
.faqCont{
    .SecH{
        margin-bottom: 30px;
    }
    p{
        font-size: 18px;
        margin-bottom: 20px;
    }
    .faqMail{
        font-size: 19px;
        font-weight: 700;
        color: var(--blue);
        &:hover{
            text-decoration: underline !important;
        }
    }
}

/*===================================================
    FAQ intro sticks beside the answers

    The questions column runs a good deal taller than
    this one, and taller still once "See more" is open,
    so the heading, the blurb and the mail link hold
    their place instead of scrolling away and leaving
    the answers next to nothing.

    From 992 up only: below that the two columns stack
    and there is nothing left to sit beside. The offset
    clears the sticky .headerWrap (81px) with some air
    under it.
===================================================*/
@media (min-width: 992px){
    .faqCont{
        position: sticky;
        top: 110px;
    }
}

.faqAccordion{
    padding-top: 15px;
    /*===questions past the first few stay folded until "See more"===*/
    .faqItem.faqExtra{
        display: none;
    }
    &.is-expanded .faqItem.faqExtra{
        display: block;
    }
    .faqItem{
        border-radius: 0px;
        transition: background-color .4s ease;
        border-top: 1px solid #b9cede;
        &:last-child{
            margin-bottom: 0px;
        }
        &:last-child{
            border-bottom: none;
        }
        .faqQues{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            text-align: left;
            padding: 20px 0px;
            background-color: transparent;
            cursor: pointer;
            span{
                font-size: 18px;
                font-weight: 600;
                color: #1f2428;
                line-height: 1.4;
            }
        }
        /*===plus / minus drawn in css so it animates cleanly===*/
        .faqIcon{
            position: relative;
            flex-shrink: 0;
            width: 14px;
            height: 14px;
            &::before,
            &::after{
                content: "";
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                background-color: #1f2428;
                transition: transform .35s ease, background-color .35s ease;
            }
            &::before{
                width: 14px;
                height: 2px;
            }
            &::after{
                width: 2px;
                height: 14px;
            }
        }
        .faqAns{
            display: none;
            padding: 0 22px 20px;
            p{
                font-size: 15px;
                line-height: 1.55;
                color: #4b5a66;
            }
        }
        &.is-open{
            background-color: #EDF3F8;
            border-bottom-color: transparent;
            padding-bottom: 20px;
            .faqQues{
                padding: 20px 25px;
            }
            .faqIcon{
                &::before{
                    background-color: var(--blue);
                }
                &::after{
                    transform: translate(-50%, -50%) rotate(90deg);
                    background-color: var(--blue);
                    opacity: 0;
                }
            }
        }
    }
}
@media (max-width: 991px){
    .section_11 .SecH{
        font-size: 48px;
    }
    .faqCont{
        margin-bottom: 40px;
    }
}
@media (max-width: 767px){
    .section_11 .SecH{
        font-size: 36px;
        text-align: center;
    }
    .faqCont{
        text-align: center;
        p{
            text-align: center;
        }
        a{
            text-align: center;
            margin: 0 auto;
        }
    }
    .faqAccordion .faqItem{
        .faqQues{
            padding: 16px;
        }
        .faqAns{
            padding: 0 16px 16px;
        }
    }
}

/*===blogSec start===*/
.section_13{
    .blogHeadWrap{
        .tagHolder{
            margin-bottom: 0px;
        }
    }
}
.blogHeadWrap{
    .headingRight{
        display: flex;
    }
    /*===category pills===*/
    .blogTabs{
        display: flex;
        gap: 12px;
        li{
            padding: 10px 28px;
            border: 1px solid #c6d4e4;
            border-radius: 30px;
            font-size: 15px;
            cursor: pointer;
            transition: all .3s ease;
            &:hover{
                border-color: var(--blue);
                color: var(--blue);
            }
            &.is-active{
                background-color: var(--blue);
                border-color: var(--blue);
                color: #fff;
            }
        }
    }
}
.blogSliderWrap{
    padding: 0 30px;
    /*===one slider per tab, only the active pane is shown===*/
    .blogTabPane{
        display: none;
        &.is-active{
            display: block;
        }
    }
    .blogSlider{
        margin: 0 -13px;
        .blogItem{
            padding: 0 13px;
        }
    }
    .blogCard{
        .blogImg{
            border-radius: 15px;
            overflow: hidden;
            margin-bottom: 18px;
            img{
                width: 100%;
                height: 450px;
                object-fit: cover;
                object-position: center center;
            }
        }
        .blogMeta{
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 15px;
            li{
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 0 15px;
                border-right: 1px solid #c6d4e4;
                font-size: 13px;
                color: #1f2428;
                &:first-child{
                    padding-left: 0;
                }
                &:last-child{
                    border-right: none;
                }
                i,
                svg{
                    font-size: 14px;
                    width: 1em;
                    height: auto;
                    color: #1f2428;
                    fill: currentColor;
                }
            }
        }
        .blogTitle{
            display: block;
            font-size: 18px;
            font-weight: 600;
            line-height: 1.35;
            color: #1f2428;
            margin-bottom: 14px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .readMore{
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            font-weight: 600;
            color: #1f2428;
            .readMoreIcon{
                width: 24px;
                height: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                background-color: var(--blue);
                transition: transform .3s ease;
                i,
                svg{
                    font-size: 10px;
                    width: 1em;
                    height: auto;
                    color: #fff;
                    fill: currentColor;
                    transform: rotate(-45deg);
                }
            }
            &:hover{
                color: var(--blue);
                .readMoreIcon{
                    transform: translate(2px, -2px);
                }
            }
        }
    }
    /*===edge arrows===*/
    /*===vertically centred on the 450px card image, whatever the button size===*/
    .blogArrow{
        position: absolute;
        top: 225px;
        transform: translateY(-50%);
        z-index: 2;
        &.blogPrev{
            left: -10px;
        }
        &.blogNext{
            right: -10px;
        }
    }
}
@media (max-width: 1560px){
    .blogSliderWrap {
        .blogCard {
            .blogImg {
                img {
                    height: 325px;
                }
            }
        }
    }
}
@media (max-width: 1366px){
    .blogSliderWrap {
        .blogCard {
            .blogImg {
                img {
                    height: 285px;
                }
            }
        }
    }
    .ctaSec {
        .ctaContent {
            .SecH {
                font-size: 48px;
                margin-bottom: 40px;
            }
        }
    }
    .ctaSec {
        padding: 50px 40px;
    }
}
@media (max-width: 991px){
    .section_13{
        .SecH{
            font-size: 48px;
        }
        .blogHeadWrap{
            .headingLeft{
                width: 100%;
                margin-bottom: 25px;
            }
            .headingRight{
                width: 100%;
                justify-content: flex-start;
            }
        }
    }
}
@media (max-width: 767px){
    .section_13 .SecH{
        font-size: 36px;
    }
    .blogSliderWrap{
        padding: 0 15px;
        .blogCard .blogImg img{
            height: 200px;
        }
        /*===centred on the 200px card image===*/
        .blogArrow{
            top: 100px;
        }
    }
}

/*===banner cross-fade slider===*/
/*===before slick runs, every slide sits in the page flow at full screen height,
     so the page starts several screens tall and then collapses (PageSpeed layout
     shift). Show only the first slide until then. slick adds slick-initialized
     before it measures, so this stops applying the moment the slider starts.===*/
.bannerSlider:not(.slick-initialized) > .bannerItem:not(:first-child){
    display: none;
}
.bannerSlider{
    position: relative;
    /*===slick fade mode stacks the slides and animates opacity===*/
    .slick-list{
        overflow: hidden;
    }
    .slick-slide{
        outline: none;
        will-change: opacity;
        backface-visibility: hidden;
    }
    /*===horizontal dots at the bottom centre===*/
    .slick-dots{
        position: absolute;
        left: 50%;
        bottom: 30px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: row;
        gap: 12px;
        z-index: 2;
        li{
            line-height: 0;
            button{
                width: 10px;
                height: 10px;
                padding: 0;
                font-size: 0;
                border-radius: 50%;
                cursor: pointer;
                background-color: rgb(255 255 255 / 40%);
                transition: background-color .3s ease, transform .3s ease;
            }
            &.slick-active button{
                background-color: #fff;
                transform: scale(1.3);
            }
        }
    }
    /*===text animates in on load and on every slide change===*/
    .bannerHeading,
    .bannerBtnWrap{
        opacity: 0;
        transform: translateY(45px);
        transition: opacity .8s ease, transform .8s ease;
    }
    .bannerItem.anim-in{
        .bannerHeading{
            opacity: 1;
            transform: translateY(0);
            transition-delay: .25s;
        }
        .bannerBtnWrap{
            opacity: 1;
            transform: translateY(0);
            transition-delay: .5s;
        }
    }
}
@media (max-width: 991px){
    .bannerSlider {
        .slick-dots {
            bottom: 20px;
        }
    }
}
/*===================================================
    card hover animations
===================================================*/
/*===three ways cards - lift with image zoom===*/
.groupSec .groupCardOuter{
    .groupCard{
        transition: transform .45s ease, box-shadow .45s ease;
        .groupCardImg img{
            transition: transform .6s ease;
        }
    }
    &:hover .groupCard{
        transform: translateY(-8px);
        box-shadow: 0 22px 45px rgb(6 45 77 / 30%);
        .groupCardImg img{
            transform: scale(1.06);
        }
    }
}
/*===solution cards===*/
.solutionBox{
    transition: transform .45s ease, box-shadow .45s ease;
    .solutionImg{
        img{
            transition: transform .6s ease;
        }
    }
    &:hover{
        box-shadow: 0 18px 40px rgb(11 51 85 / 15%);
        .solutionImg img{
            transform: scale(1.06);
        }
        .solutionTitle{
            color: #0d4c7d;
        }
    }
}
/*===why choose items - counter pops===*/
.blueSec .chooseCont{
    .chooseIcon{
        transition: background-color .4s ease, transform .4s ease;
        span{
            transition: color .4s ease;
        }
    }
    &:hover .chooseIcon{
        background-color: #fff;
        transform: translateY(-5px);
        span{
            color: #1667a6;
        }
    }
}
/*===blog cards===*/
.blogSliderWrap .blogCard{
    .blogImg img{
        transition: transform .6s ease;
    }
    .blogTitle{
        transition: color .35s ease;
    }
    &:hover{
        .blogImg img{
            transform: scale(1.06);
        }
        .blogTitle{
            color: var(--blue);
        }
    }
}
/*===testimonial photo===*/
.clientSliderWrap .testiImg{
    img{
        transition: transform .6s ease;
    }
    &:hover img{
        transform: scale(1.05);
    }
}

/*===================================================
    Testimonial read more / read less.

    The supporting paragraph runs long on a phone, so
    below 768px it clamps to four lines and the toggle
    opens it. custom-home.js only reveals the button on
    quotes that actually overflow, so short entries are
    left alone.
===================================================*/
.testiToggle{
    display: none;
    padding: 0;
    border: 0;
    background: none;
    color: #1667a6;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .2px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

@media (max-width: 767px){
    .testiToggle{
        display: block;
        text-align: center;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    .clientSliderWrap .testiInner .testiCont{
        .innerTestiText{
            height: 155px;
            overflow: hidden;
            margin-bottom: 10px;
            position: relative;
            &::after{
                width: 100%;
                height: 45px;
                left: 0px;
                bottom: 0px;
                content: "";
                position: absolute;
                z-index: 1;
                background: linear-gradient(to top, rgb(255 255 255 / 94%) 20%, rgba(0, 0, 0, 0) 78%);
            }
        }
        .quoteSub{
            margin-bottom: 12px;
        }
        /*===only js-flagged quotes get the control===*/
        &.hasToggle .testiToggle{
            display: inline-block;
            margin: 0 auto 20px;
        }
        /*===the paragraph is centred here, so centre the control too===*/
        text-align: center;
        &.isExpanded {
            .innerTestiText{
                height:auto;
                overflow: auto;
                &::after{
                    display: none;
                }
            }
        }
    }
    .solutionBox {
        .solutionCont {
            span {
                &.solutionNum {
                    font-size: 30px;
                    &:before {
                        height: 30px;
                    }
                    &::after {
                        left: 65px;
                        top: 10px;
                    }
                }
            }
        }
    }
    .industrySliderWrap {
        .industryCard {
            .industryImg {
                border-radius: 20px 20px 0 0;
            }
            .industryLabel {
                position: initial;
                border-radius: 0 0 20px 20px;
            }
        }
    }
    .blogHeadWrap {
        .blogTabs {
            display: flex;
            gap: 12px;
            justify-content: center;
            width: 100%;
            li {
                padding: 7px 15px;
                border-radius: 30px;
                font-size: 15px;
            }
        }
    }
}
@media (max-width: 480px){
    .section_9 {
        .hookDrop {
            width: 50px !important;
        }
    }
    .bannerWrap {
        .bannerContent {
            .bannerText {
                .bannerHeading {
                    font-size: 24px !important;
                }
            }
        }
    }
}

/*===================================================
    scale stats (ported from the About page)
===================================================*/
/*===scale stats===*/
.scaleSec{
    .scalePanel{
        background-color: #ecf3f8;
    }
    .headingWrap{
        display: block;
        .tagHolder{
            max-width: 100%;
        }
    }
    .scaleGrid{
        .row{
            row-gap: 24px;
        }
        .scaleCard{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            height: 100%;
            min-height: 175px;
            padding: 30px 20px;
            border-radius: 24px;
            background-color: #85aacd;
            color: #ffffff;
            .scaleNum{
                font-size: 42px;
                font-weight: 800;
                line-height: 1;
                letter-spacing: 0.5px;
                margin-bottom: 14px;
            }
            .scaleLabel{
                font-size: 18px;
                font-weight: 600;
                letter-spacing: 0.3px;
                margin-bottom: 8px;
            }
            .scaleSub{
                font-size: 16px;
                letter-spacing: 0.3px;
                opacity: 0.85;
            }
            &.darkCard{
                background-color: #1667a6;
            }
        }
    }
    /*===on the home page the grid sits on the blue panel, so the
         dark cards go a shade deeper to stay visible===*/
    .blueSec .scaleCard.darkCard{
        background-color: #0f4f82;
    }
}
@media (max-width: 1366px){
    .scaleSec {
        .scaleGrid {
            .scaleCard {
                .scaleNum {
                    font-size: 24px;
                    margin-bottom: 10px;
                }
            }
        }
    }
    .scaleSec {
        .scaleGrid {
            .scaleCard {
                min-height: 150px;
                padding: 15px;
                .scaleSub{
                    font-size: 14px;
                }
            }
        }
    }
}
@media (max-width: 767px){
    .scaleSec{
        .scaleGrid{
            .row{
                row-gap: 0px;
            }
            .scaleCard{
                min-height: 150px;
                padding: 24px 14px;
                border-radius: 18px;
                .scaleNum{
                    font-size: 30px;
                }
                .scaleLabel{
                    font-size: 13px;
                }
            }
        }
    }
}
@media (max-width: 1024px){
    .scaleSec {
        .scaleGrid {
            .scaleCard {
                .scaleNum {
                    font-size: 36px;
                }
            }
        }
    }
}
@media (max-width: 991px){
    .scaleSec {
        .scaleGrid {
            .scaleCard {
                background-color: #1667a6 !important;
            }
        }
    }
}
@media (max-width:520px){
    .scaleGrid{
        .col-6 {
            flex: 0 0 auto;
            width: 100%;
        }
    }
}
/*===faq see more / see less===*/
.faqToggleWrap{
    margin-top: 30px;
    .faqToggle{
        cursor: pointer;
    }
}

/*===================================================
    AMC Spyro spotlight - a dark product panel with a
    model switcher on the left and the unit itself on a
    lit stage to the right. The stage tilts toward the
    pointer; the switcher cross-fades the two units.
===================================================*/
.spyroPanel{
    position: relative;
    overflow: hidden;
    background: radial-gradient(120% 120% at 78% 18%, #1d7ac2 0%, #14639f 38%, #0b3a63 100%);
    background-color: #0b3a63;
    color: #fff;
}
.spyroPanel:before{
    /*===a slow sheen so the panel never reads as flat===*/
    content: "";
    position: absolute;
    inset: -40% -10% auto -10%;
    height: 90%;
    background: radial-gradient(50% 60% at 50% 50%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}
.spyroPanel .SecH{
    color: #fff;
}
.spyroRow{
    position: relative;
    z-index: 1;
}
.spyroCont .headingWrap{
    display: block;
}
.spyroLead{
    color: rgba(255,255,255,.82);
    max-width: 520px;
    margin-bottom: 30px;
}

/*===model switcher===*/
.spyroTabs{
    display: inline-flex;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    background-color: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    margin-bottom: 26px;
    max-width: 100%;
    flex-wrap: wrap;
}
.spyroTab{
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.75);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .3px;
    padding: 10px 24px;
    border-radius: 999px;
    cursor: pointer;
    transition: color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.spyroTab:hover{
    color: #fff;
}
.spyroTab.is-active{
    color: var(--blue);
    background-color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.spyroTab:focus-visible{
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/*===the panel that swaps with the switcher===*/
.spyroPane{
    animation: spyroPaneIn .45s ease both;
}
.spyroPane[hidden]{
    display: none;
}
@keyframes spyroPaneIn{
    from{ opacity: 0; transform: translateY(10px); }
    to{ opacity: 1; transform: none; }
}
.spyroDescriptor{
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
}
.spyroPoints{
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
}
.spyroPoints li{
    position: relative;
    padding: 0 0 0 34px;
    margin-bottom: 16px;
    color: rgba(255,255,255,.76);
    font-size: 15px;
    line-height: 1.55;
}
.spyroPoints li:last-child{
    margin-bottom: 0;
}
/*===the tick is drawn, not a font glyph: Font Awesome ships as JS here
   and swaps <i> for <svg>, so a CSS content glyph is not dependable===*/
.spyroPoints li:before{
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: rgba(255,255,255,.18);
}
.spyroPoints li:after{
    content: "";
    position: absolute;
    left: 8px;
    top: 7px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.spyroPoints li strong{
    display: block;
    color: #fff;
    font-weight: 600;
    margin-bottom: 2px;
}

/*===cta===*/
.spyroBtnWrap{
    margin-top: 34px;
}
.spyroBtn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.spyroBtn i{
    font-size: 13px;
    transition: transform .3s ease;
}
.spyroBtn:hover i{
    transform: translateX(4px);
}

/*===the lit stage===*/
.spyroStage{
    position: relative;
    perspective: 1200px;
}
.spyroGlow,
.spyroGrid{
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.spyroGlow{
    background: radial-gradient(45% 45% at 50% 50%, rgba(125,201,255,.45) 0%, rgba(125,201,255,0) 70%);
    filter: blur(6px);
}
.spyroGrid{
    background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 78%);
}
.spyroStageInner{
    position: relative;
    z-index: 1;
    transform-style: preserve-3d;
    transition: transform .4s ease;
    /*===set by the pointer-tilt script===*/
    transform: rotateX(var(--spyro-rx, 0deg)) rotateY(var(--spyro-ry, 0deg));
}
.spyroShot{
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: scale(.94);
    transition: opacity .5s ease, transform .5s ease, visibility .5s;
}
.spyroShot:not(.is-active){
    position: absolute;
    inset: 0;
}
.spyroShot.is-active{
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: none;
}
.spyroShot img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
    filter: drop-shadow(0 30px 45px rgba(0,0,0,.35));
}
.spyroBadge{
    position: absolute;
    left: 50%;
    bottom: -14px;
    transform: translateX(-50%) translateZ(60px);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    padding: 11px 22px;
    border-radius: 999px;
    background-color: rgba(255,255,255,.95);
    color: var(--blue);
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
    z-index: 1;
}
.spyroBadge i{
    font-size: 13px;
}

/*===entrance, once the panel scrolls in===*/
.spyroPanel .spyroCont,
.spyroPanel .spyroStage{
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}
.spyroPanel .spyroStage{
    transition-delay: .12s;
}
.spyroPanel.is-inview .spyroCont,
.spyroPanel.is-inview .spyroStage{
    opacity: 1;
    transform: none;
}

@media (max-width: 1199px){
    .spyroLead{
        max-width: 100%;
    }
}
@media (max-width: 991px){
    .section_spyro .SecH{
        font-size: 48px;
    }
    .spyroStage{
        margin-top: 50px;
        perspective: none;
    }
    .spyroStageInner{
        transform: none;
    }
}
@media (max-width: 767px){
    .section_spyro .SecH{
        font-size: 36px;
    }
    .spyroTab{
        padding: 9px 18px;
        font-size: 14px;
    }
    .spyroBadge{
        font-size: 12px;
        padding: 9px 16px;
    }
}

/*===motion is decoration here; honour the OS setting===*/
@media (prefers-reduced-motion: reduce){
    .spyroPane{
        animation: none;
    }
    .spyroShot,
    .spyroStageInner,
    .spyroPanel .spyroCont,
    .spyroPanel .spyroStage{
        transition: none;
    }
    .spyroPanel .spyroCont,
    .spyroPanel .spyroStage{
        opacity: 1;
        transform: none;
    }
}

/*===992-1399: the state key is pinned to the bottom-right of the map column, but
     here the column is shorter than the key once a state is open, so the key ran
     out of the top of the panel and sat flush against (or past) its right edge.
     In this range it sits beside the map in the normal flow instead - still to
     the right, still bottom-aligned - so the panel grows to fit it.===*/
@media (min-width: 992px) and (max-width: 1399px){
    .presenceSec .col-lg-7.rel{
        display: flex;
        align-items: flex-end;
    }
    .presenceSec .mapWrap{
        flex: 0 0 60%;
    }
    .presenceSec .presenceLegend{
        position: static;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        padding-left: 20px;
        padding-right: 0;
    }
}