/*===================================================
    About page
    (shared inner-hero styles live in common.css)
===================================================*/

/*===our story===*/
.storySec{
    .headingWrap{
        display: block;
        .tagHolder{
            max-width: 100%;
        }
    }
    .storyImg{
        height: 100%;
        border-radius: 24px;
        overflow: hidden;
        img{
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .storyCont{
        p{
            color: #1d2a36;
            font-size: 18px;
            line-height: 1.65;
            letter-spacing: 0.2px;
            margin-bottom: 20px;
        }
        .btnWrap{
            margin-top: 30px;
        }
        .btnOne.blueBtn{
            padding: 15px 35px;
            background-color: #1667a6;
            border: 1px solid #1667a6;
            color: #fff;
            transition: background 0.3s ease, color 0.3s ease;
            &:hover{
                background-color: transparent;
                color: #1667a6;
            }
        }
    }
}

/*===================================================
    Heritage timeline - full-width rail carousel

    It used to be a 500px-tall column in the right half of
    the panel, stepped a milestone at a time by up/down
    arrows. It now runs the full width as a looping slick
    carousel on a horizontal rail.

    The rail is drawn per slide rather than as one bar, so
    the segments meet edge to edge and the line carries on
    through slick's clones without anything having to know
    how wide the track is. A slide behind the current one
    paints its segment solid, so the fill always stops
    exactly at the live dot - custom-about.js sets isPast
    and isActive from the slide index.
===================================================*/
.heritageSec{
    .heritagePanel{
        background-color: #1667a6;
    }
    /*===heading and the arrows share the row above the rail===*/
    .heritageHead{
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 40px;
        margin-bottom: 60px;
    }
    .heritageCont{
        /*===held to the old column width so the heading keeps its line breaks===*/
        max-width: 100%;
        text-align: left;
        .tagHolder{
            max-width: 100%;
        }
        p{
            margin: 26px 0 0;
            color: #ffffffcc;
            font-size:18px;
            letter-spacing: 0.2px;
            max-width: 100%;
        }
    }
    .timelineWrap{
        position: relative;
        /*===clips the slides bleeding past the container. It sits on the wrap
             rather than the panel so the heading's pill, which is placed by a
             transform that carries it above its holder, is left alone.===*/
        overflow: hidden;
        padding-top: 10px;
        /*===edge fades hint at the milestones either side. The carousel loops,
             so there is always more in both directions and both stay on.===*/
        &::before,
        &::after{
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 80px;
            pointer-events: none;
            z-index: 2;
        }
    }
    .timelineSlider{
        /*===lines the first milestone up with the .container above===*/
        padding-inline: calc(max(0px, (100% - 1380px) / 2) + 12px);
        /*===the slides either side are meant to show, so the track is left to
             spill out of its box and the panel does the clipping===*/
        .slick-list{
            overflow: visible;
        }
        /*===equal-height cards: every slide stretches to the tallest===*/
        .slick-track{
            display: flex;
        }
        .slick-slide{
            height: auto;
        }
    }
    /*===each milestone is a card hanging from its dot on the rail. The live
         one sits in the centre (slick centerMode), turns solid white, lifts
         and scales up; its neighbours recede. Any card can be clicked to
         bring it to the centre===*/
    .timelineItem{
        position: relative;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        /*===the gutter sits inside the slide so the rail segments still touch===*/
        padding: 0 15px 20px;
        cursor: pointer;
        outline: none;
        /*===one segment of the rail, meeting its neighbours===*/
        &::before{
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 7px;
            height: 2px;
            border-radius: 2px;
            background: #ffffff38;
            transition: background 0.45s ease;
        }
        /*===solid behind the live dot, so the fill stops right at it: a whole
             segment for a milestone already passed, half of the live one===*/
        &.isPast::before{
            background: #ffffff;
        }
        &.isActive::before{
            background: linear-gradient(to right, #ffffff 50%, #ffffff38 50%);
        }
        /*===dot on the rail, centred over its card===*/
        .tlNode{
            position: relative;
            z-index: 1;
            display: block;
            flex-shrink: 0;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #1667a6;
            box-shadow: inset 0 0 0 2px #ffffff7a;
            margin-bottom: 18px;
            transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
            /*===a stem from the dot down to its card===*/
            &::after{
                content: '';
                position: absolute;
                left: 50%;
                top: 100%;
                width: 2px;
                height: 18px;
                margin-left: -1px;
                background: #ffffff38;
                transition: background 0.35s ease;
            }
        }
        &.isPast .tlNode{
            background: #ffffff;
            box-shadow: inset 0 0 0 2px #ffffff;
        }
        &.isActive .tlNode{
            background: #ffffff;
            box-shadow: inset 0 0 0 2px #ffffff, 0 0 0 7px rgb(255 255 255 / 18%);
            transform: scale(1.25);
            animation: tlPulse 2.2s ease-out infinite;
            &::after{
                background: #ffffff;
            }
        }
        /*===the card itself. Every card is solid white; the live one is
             marked by its dot and the rail fill rather than by the card===*/
        .tlCard{
            flex: 1;
            width: 100%;
            padding: 28px 26px 30px;
            border-radius: 22px;
            background: #ffffff;
            border: 1px solid #ffffff;
            transform: translateY(-4px);
            transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
        }
        &:hover .tlCard{
            transform: translateY(-8px);
        }
        .tlYear{
            display: block;
            color: var(--blue);
            font-size: 34px;
            font-weight: 500;
            line-height: 1.1;
            letter-spacing: 0.2px;
            white-space: nowrap;
            margin-bottom: 16px;
        }
        .tlCont{
            .tlTitle{
                display: block;
                color: #1d2a36;
                font-size: 20px;
                font-weight: 700;
                letter-spacing: 0.2px;
                margin-bottom: 10px;
                line-height: 1.35;
            }
            p{
                margin: 0;
                color: #4b5a66;
                font-size: 16px;
                line-height: 1.65;
                letter-spacing: 0.2px;
                max-width: 100%;
            }
        }
        &:focus-visible .tlCard{
            outline: 2px solid #ffffff;
            outline-offset: 4px;
        }
    }
    .timelineArrows{
        display: flex;
        flex-shrink: 0;
        gap: 14px;
        .tlArrow{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border: 0;
            border-radius: 50%;
            padding: 0;
            font-size: 15px;
            cursor: pointer;
            transition: background 0.3s ease, color 0.3s ease;
            background: #7ea8cc;
            color: #ffffff;
            &:hover{
                background: #0d4a7a;
                color: #ffffff;
            }
        }
    }
}
/*===OEM partners - the home page's band, so its heading takes the home
     sizes (70px rather than the inner pages' 75px) and stays on one line===*/

@media (max-width: 991px){
    .oemPartnerSec .tagHolder .SecH{
        font-size: 48px;
    }
}
@media (max-width: 767px){
    .oemPartnerSec .tagHolder .SecH{
        font-size: 36px;
    }
}
/*===vision mission values===*/
.vmvSec{
    .headingWrap{
        display: block;
        .tagHolder{
            max-width: 100%;
        }
    }
    .vmvCard{
        display: flex;
        /*===copy and photo share one grid cell so the copy still sits over
             the faded top of the image, but the card grows when the copy is
             taller than the photo instead of clipping it===*/
        display: grid;
        grid-template-areas: "stack";
        height: 100%;
        border-radius: 24px;
        overflow: hidden;
        background: linear-gradient(160deg, #fdfefe 0%, #eaf2f8 45%, #cfe2f0 100%);
        position: relative;
        .vmvCont{
            grid-area: stack;
            align-self: start;
            padding: 32px 30px 24px;
            position: relative;
            width: 100%;
            z-index: 2;
            .vmvTitle{
                display: block;
                color: #000000;
                font-size: 30px;
                font-weight: 700;
                letter-spacing: 0.2px;
                margin-bottom: 12px;
            }
            p{
                margin: 0;
                color: #1d2a36;
                font-size: 18px;
                line-height: 1.65;
                letter-spacing: 0.2px;
            }
            /*===a card can carry bullets instead of, or after, its
                 paragraph - the values card lists its principles===*/
            .vmvList{
                list-style: none;
                margin: 0;
                padding: 0;
                li{
                    position: relative;
                    padding-left: 22px;
                    margin-bottom: 12px;
                    color: #1d2a36;
                    font-size: 16px;
                    line-height: 1.55;
                    letter-spacing: 0.2px;
                    &:last-child{
                        margin-bottom: 0;
                    }
                    &::before{
                        content: "";
                        position: absolute;
                        left: 0;
                        top: 9px;
                        width: 7px;
                        height: 7px;
                        border-radius: 50%;
                        background-color: var(--blue, #1667a6);
                    }
                    strong{
                        font-weight: 700;
                        color: #0f3350;
                    }
                }
            }
            p + .vmvList{
                margin-top: 14px;
            }
        }
        .vmvImg{
            grid-area: stack;
            align-self: end;
            position: relative;
            width: 100%;
            min-height: 100%;
            &::before {
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                content: "";
                position: absolute;
                z-index: 1;
                background: linear-gradient(to bottom, rgb(255 255 255 / 85%) 86%, rgb(0 0 0 / 0%) 100%);
            }
            img{
                display: block;
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center bottom;
            }
        }
    }
}

/*===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;
            }
        }
    }
}

/*===certifications===*/
.certSec{
    .headingWrap{
        display: block;
        .tagHolder{
            max-width: 100%;
        }
    }
    /* a continuous strip like the brand logo marquee; the vertical
       padding keeps the card shadow clear of the overflow clip */
    .certMarqueeWrap{
        overflow: hidden;
    }
    .certMarquee{
        overflow: hidden;
        white-space: nowrap;
        padding: 16px 0 28px;
        ul{
            display: inline-flex;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .certItem{
            flex-shrink: 0;
            width: 320px;
            margin-right: 24px;
        }
        .certCard{
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 24px rgb(13 74 122 / 16%);
            img{
                display: block;
                width: 100%;
                height: 300px;
                object-fit: cover;
            }
        }
    }
}

/*===awards - the certificate strip with portrait trophy cards===*/
.certSec.awardSec{
    .certMarquee{
        .certItem{
            width: 240px;
        }
        .certCard{
            cursor: zoom-in;
            img{
                height: 320px;
                transition: transform .5s ease;
            }
            &:hover img{
                transform: scale(1.04);
            }
        }
    }
}
@media (max-width: 767px){
    .certSec.awardSec{
        .certMarquee{
            .certItem{
                width: 180px;
            }
            .certCard img{
                height: 240px;
            }
        }
    }
}

/*===infrastructure===*/
.infraSec{
    .infraInner{
        padding: 0 50px;
    }
    .infraPanel{
        background-color: #ecf3f8;
    }
    .headingWrap{
        display: block;
        .tagHolder{
            max-width: 100%;
        }
    }
    .infraGrid{
        .row{
            row-gap: 30px;
        }
        .infraCard{
            .infraImg{
                border-radius: 14px;
                overflow: hidden;
                img{
                    display: block;
                    width: 100%;
                    object-fit: cover;
                }
            }
            .infraLabel{
                display: block;
                margin-top: 16px;
                color: #1d2a36;
                font-size: 22px;
                font-weight: 600;
                letter-spacing: 0.2px;
                line-height: 1.3;
            }
            /* zig-zag stagger like the design */
            &.offsetCard{
                margin-top: 46px;
            }
        }
    }
}

/*===leadership===*/
.leaderSec{
    .headingWrap{
        .headingLeft{
            .tagHolder{
                max-width: 100%;
            }
        }
        .headingRight{
            p{
                margin: 0;
                color: #1d2a36;
                font-size: 18px;
                line-height: 1.65;
                letter-spacing: 0.2px;
            }
        }
    }
    .leaderGrid{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    /*===carousel variant - three people in view, the rest a swipe
         away. Arrows sit in the side gutters, as on the certificate
         slider above===*/
    .leaderSliderWrap{
        padding: 0 70px;
    }
    .leaderSlider{
        margin: 0 -12px;
        .slick-list{
            overflow: hidden;
        }
        .leaderItem{
            padding: 0 12px;
        }
        /*===the portraits have to share one height or the names below
             them stagger across the row; left unbounded, three across on
             a wide screen also grows them past 500px tall===*/
        .leaderCard .leaderImg img{
            height: 400px;
        }
    }
    /*===five across on desktop: shorter portraits so the crop stays
         on the face rather than a tall sliver===*/
    @media (min-width: 1200px){
        .leaderSlider .leaderCard .leaderImg img{
            height: 400px;
        }
    }
    .leaderArrow{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 50%;
        padding: 0;
        font-size: 15px;
        cursor: pointer;
        transition: background 0.3s ease, color 0.3s ease;
        i,
        svg{
            width: 1em;
            height: auto;
            fill: currentColor;
        }
        &.leaderPrev{
            left: 8px;
            background: #1667a6;
            color: #ffffff;
        }
        &.leaderNext{
            right: 8px;
            background: #e8edf2;
            color: #1d2a36;
        }
        &:hover{
            background: #0d4a7a;
            color: #ffffff;
        }
        &:focus-visible{
            outline: 2px solid #0d4c7d;
            outline-offset: 3px;
        }
    }
    .leaderCard{
        position: relative;
        .leaderImg{
            border-radius: 14px;
            overflow: hidden;
            img{
                display: block;
                width: 100%;
                object-fit: cover;
            }
        }
        .leaderMeta{
            text-align: center;
            padding-top: 18px;
            .leaderName{
                display: block;
                color: #85aacd;
                font-size: 20px;
                font-weight: 700;
                letter-spacing: 0.2px;
            }
            .leaderRole{
                display: block;
                margin-top: 4px;
                color: #1d2a36;
                font-size: 14px;
            }
        }
        /* blue bio panel revealed on hover / focus */
        .leaderBio{
            position: absolute;
            inset: 0;
            z-index: 2;
            display: flex;
            flex-direction: column;
            padding: 26px 18px;
            border-radius: 14px;
            background: #1667a6;
            text-align: center;
            overflow-y: auto;
            scrollbar-width: none;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;
            &::-webkit-scrollbar{
                display: none;
            }
            .bioName{
                display: block;
                color: #ffffff;
                font-size: 30px;
                font-weight: 700;
                margin-bottom: 10px;
                line-height: 1;
            }
            .bioRole{
                display: block;
                color: #ffffffcc;
                font-size: 22px;
                margin-bottom: 14px;
                line-height: normal;
            }
            p{
                margin: 0;
                color: #ffffffd9;
                font-size: 18px;
                line-height: 1.6;
                letter-spacing: 0.2px;
            }
        }
        &:hover .leaderBio,
        &:focus-within .leaderBio{
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
    }
    .leaderBtnWrap{
        display: flex;
        justify-content: center;
        margin-top: 50px;
    }
}

/*===brand marquee===*/
/*===brand marquee styles moved to common.css (shared with inner pages)===*/
@media (max-width: 991px){
    .leaderSec{
        .headingWrap{
            .headingLeft,
            .headingRight{
                width: 100%;
            }
            .headingRight p{
                margin-top: 20px;
            }
        }
        .leaderSlider .leaderCard .leaderImg img{
            height: 430px;
        }
    }
}

@media (max-width: 767px){
    .storySec{
        .storyImg{
            height: auto;
            margin-bottom: 24px;
        }
    }
    .heritageSec{
        .heritageHead{
            flex-direction: column;
            align-items: flex-start;
            gap: 26px;
            margin-bottom: 40px;
        }
        /*===the head stacks here, so the arrows sit centred over the rail's
             live dot instead of hanging off the left edge===*/
        .timelineArrows{
            align-self: center;
        }
        .timelineWrap{
            &::before,
            &::after{
                width: 40px;
            }
        }
        .timelineItem{
            .tlYear{
                font-size: 30px;
                margin-bottom: 14px;
            }
            .tlCont .tlTitle{
                font-size: 19px;
            }
        }
    }
    .vmvSec{
        .vmvCard{
            height: auto;
            margin-bottom: 24px;
        }
    }
    .scaleSec{
        .scaleGrid{
            .row{
                row-gap: 16px;
            }
            .scaleCard{
                min-height: 150px;
                padding: 24px 14px;
                border-radius: 18px;
                .scaleNum{
                    font-size: 30px;
                }
                .scaleLabel{
                    font-size: 13px;
                }
            }
        }
    }
    .infraSec{
        .infraGrid{
            .infraCard{
                .infraImg img{
                    height: 260px;
                }
                &.offsetCard{
                    margin-top: 0;
                }
            }
        }
    }
    .leaderSec{
        .leaderGrid{
            grid-template-columns: repeat(2, 1fr);
        }
        .leaderSliderWrap{
            padding: 0 52px;
        }
        .leaderSlider .leaderCard .leaderImg img{
            height: 360px;
        }
        .leaderArrow{
            width: 38px;
            height: 38px;
            &.leaderPrev{
                left: 0;
            }
            &.leaderNext{
                right: 0;
            }
        }
    }
    .certSec{
        .certMarquee{
            .certItem{
                width: 240px;
                margin-right: 16px;
            }
            .certCard img{
                height: 220px;
            }
        }
    }
}

.contactSec{
    background-color:#ecf3f8 !important;
}
/*===================================================
    About page - the 992-1199 band, which the original
    breakpoints skipped, plus panel padding on phones.
===================================================*/
@media (max-width: 1024px){
    .scaleSec {
        .scaleGrid {
            .scaleCard {
                .scaleNum {
                    font-size: 36px;
                }
            }
        }
    }
}
@media (max-width: 991px){
    .infraSec{
        /*===a flat 50px each side is a lot once the panel stops
             being desktop width===*/
        .infraInner{
            padding: 0 30px;
        }
        .infraGrid .infraCard.offsetCard{
            /*===the zig-zag reads as a stagger only when the tiles
                 are four across; at two it is just uneven spacing===*/
            margin-top: 0;
        }
    }
    .scaleSec {
        .scaleGrid {
            .scaleCard {
                background-color: #1667a6 !important;
            }
        }
    }
}

@media (max-width: 767px){
    .infraSec{
        .infraInner{
            padding: 0 16px;
        }
    }
    .leaderSec {
        .leaderSlider .leaderCard .leaderImg img {
            height: 350px;
        }
    }
}
@media (max-width:520px){
    .scaleGrid{
        .col-6 {
            flex: 0 0 auto;
            width: 100%;
        }
    }
    .brandSec{
        .headingWrap.mb_50{
            margin-bottom: 20px !important;
            text-align: center;
        }
    }
}
/*===================================================
    Heritage timeline - phase label
===================================================*/
.heritageSec .timelineItem .tlPhase{
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #4b5a66;
}
@keyframes tlPulse{
    0%{ box-shadow: inset 0 0 0 2px #ffffff, 0 0 0 0 rgb(255 255 255 / 45%); }
    70%{ box-shadow: inset 0 0 0 2px #ffffff, 0 0 0 12px rgb(255 255 255 / 0%); }
    100%{ box-shadow: inset 0 0 0 2px #ffffff, 0 0 0 0 rgb(255 255 255 / 0%); }
}
@media (max-width: 767px){
    .heritageSec .timelineItem{
        padding: 0 8px 16px;
        .tlCard{
            padding: 22px 20px 24px;
        }
    }
}
@media (prefers-reduced-motion: reduce){
    .heritageSec .timelineItem{
        .tlCard,
        &:hover .tlCard{
            transition: none;
            transform: none;
        }
        &.isActive .tlNode{
            animation: none;
        }
    }
}