.bannerImg{
    height: 100vh;
    position: relative;
    &::after{
        position: absolute;
        bottom: 0;
        width: 100%;
        left: 0;
        content: "";
        background: linear-gradient(to top, rgba(102, 197, 199, 0.5) 0%, rgba(0, 114, 183, 0) 100%);
    }
    img, video{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }
}
.banner-cont{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 70px;
    .bannerText{
        margin-bottom: 100px;
        h1{
            line-height: .7;
            border-top: 1px solid #fff;
            padding-bottom: 10px;
            border-bottom: 1px solid #fff;
        }
    }
}
.bannerProductImg{
    width: 50%;
    position: absolute;
    bottom: 50px;
    right: 50px;
    z-index: 1;
}
.bannerIcon{
    padding-top: 50px;
}
.aboutSec{
    .aboutImg{
        img{
            width: 100%;
            display: block;
        }
    }
    .aboutTxt{
        .secTitle{
            margin-bottom: 15px;
        }
        p{
            margin-bottom: 25px;
        }
    }
}
.msgSec{
    .msgCard{
        height: 100%;
        /* the cut-out runs to the foot of the card, so the padding stops short */
        padding: 30px 30px 0;
    }
    .secTitle{
        margin-bottom: 30px;
    }
    .msgImg{
        img{
            width: 100%;
            display: block;
        }
    }
    .msgTxt{
        padding-bottom: 30px;
    }
    .msgName{
        margin-bottom: 20px;
    }

    /* same component as the one on chairman-message.html; that page's stylesheet
       is not loaded here, so it is restated for the card */
    .quoteCard{
        position: relative;
        margin-top: 35px;
        margin-bottom: 25px;
        padding: 25px;
        border-radius: 20px;
        background-color: rgba(255, 255, 255, 0.16);
        backdrop-filter: blur(2px);
        min-height: 225px;

        .quoteTxt{
            margin-bottom: 0;
            font-weight: 700;
            color: var(--white);
            font-family: 'Helvetica Neue';
        }
    }
    .quoteIc{
        position: absolute;
        width: 50px;

        img{
            width: 100%;
            display: block;
        }

        &.quoteIcTop{
            top: -22px;
            left: 25px;
        }
        &.quoteIcBtm{
            right: 25px;
            bottom: -22px;
        }
    }

}
.btnWrap{
    .commonBtn{
        font-size: 18px;
        padding: 12px 20px;
        padding-right: 60px;
        border: 1px solid var(--grayDk);
        color: var(--blue);
        border-radius: 8px;
        position: relative;
        display: inline-block;
        &::after{
            width: 40px;
            height: 40px;
            border-radius: 5px;
            background-color: var(--blue);
            position: absolute;
            right: 4px;
            top: 5px;
            content: "";
        }
        &:before{
            content: "\f061";
            position: absolute;
            top: 6px;
            right: 10px;
            font-family: "FontAwesome";
            color: #fff;
            z-index: 1;
            transform: rotate(-45deg);
            font-size: 16px;
            transition: 0.5s;
        }
        &:hover{
            background-color: var(--blue);
            color: #fff;
            border: 1px solid var(--blue);
            &::after{
                background-color: #fff;
            }
            &:before{
                top: 14px;
                right: 17px;
                color: var(--blue);
            }
        }
    }
}

/* the message buttons sit on the gradient, so they need a ground of their own.
   Declared after .btnWrap so its border shorthand does not win the tie */
.msgSec .btnWrap .commonBtn{
    border: 1px solid var(--white);
    color: #fff;
    &::after{
        background-color: #ffffff;
    }
    &::before{
        color: var(--blue);
    }
}

/* Responsive */
@media (max-width: 991px){
    .aboutSec{
        .aboutFig{
            width: 100%;
            margin-bottom: 30px;
        }
        .aboutTxt{
            width: 100%;
        }
    }
    .msgSec{
        .msgCard{
            padding: 25px 25px 0;
        }
        .secTitle{
            margin-bottom: 25px;
        }
    }
}

/* stacked, the cut-out no longer sits beside the quote, so it goes back to
   being an image in the flow with the card's own padding under it */
@media (max-width: 767px){
    .msgSec{
        .msgCard{
            padding: 25px;
        }
        .msgFig{
            max-width: 240px;
            margin: 0 auto 20px;
        }
        .quoteCard{
            padding: 20px;
        }
        .quoteIc{
            width: 40px;

            &.quoteIcTop{
                top: -18px;
                left: 20px;
            }
            &.quoteIcBtm{
                right: 20px;
                bottom: -18px;
            }
        }
        .msgTxt{
            margin-top: -40px;
        }
    }
    .aboutSec {
        .aboutTxt {
            text-align: center;
        }
    }
    .msgSec {
        .msgName {
            text-align: center;
        }
        .btnWrap{
            text-align: center;
        }
    }
}
/* ============================ 04. BUSINESS HIGHLIGHTS ==================== */
.hlSec{
    padding-bottom: 0;
    isolation: isolate;

    .hlBg{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 78%;
        z-index: -2;

        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center bottom;
        }
    }
    /* the copy sits over the photograph, so the top of the band is washed out */
    .hlVeil{
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(to bottom,
                    #f7efe9 0%,
                    rgba(247, 239, 233, 0.96) 34%,
                    rgba(250, 246, 242, 0.55) 52%,
                    rgba(253, 252, 252, 0) 72%);
    }
    .hlPanels{
        min-height: 380px;
        max-width: 1000px;
    }
    .hlPanel{
        p{
            margin-bottom: 25px;
        }
        .secTitle{
            margin-bottom: 15px;
        }
    }
    /* the bar overhangs into the next band, as the design has it */
    .hlTabs{
        background-color: var(--white);
        box-shadow: 0 4px 27px rgba(0, 0, 0, 0.17);
        margin-top: 60px;
        margin-bottom: -60px;
    }
    .hlTab{
        position: relative;
        width: 100%;
        min-height: 120px;
        padding: 20px 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border: 0;
        background: none;
        border-radius: 10px;
        font-size: 16px;
        line-height: 1.45;
        color: var(--black);
        transition: 0.3s;

        &::before{
            content: "";
            position: absolute;
            left: 0;
            top: 11px;
            bottom: 11px;
            width: 1px;
            background-color: rgba(0, 0, 0, 0.25);
        }
        &:hover{
            color: var(--blue);
        }
        &.is-active{
            background: linear-gradient(to bottom, #65c4c7 0%, #0375b7 100%);
            color: var(--white);
            font-weight: 700;

            &::before{
                opacity: 0;
            }
        }
    }
    .hlTabs [class*="col-"]:first-child .hlTab::before,
    .hlTabs .is-active + .hlTab::before{
        opacity: 0;
    }
}

/* ================================ 05. OUR CAPITAL ======================== */
.capSec{
    .secTitle{
        margin-bottom: 20px;
    }
    .capDivider{
        border: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.25);
        margin: 0 auto 35px;
        opacity: 1;
    }
    /* the six sit in one cell and cross-fade */
    .capMedia,
    .capCopy{
        display: grid;
    }
    .capShot,
    .capItem{
        grid-area: 1 / 1;
        margin: 0;
    }
    .capShot img{
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 20px;
        object-fit: cover;
        object-position: center center;
    }
    .capCount{
        letter-spacing: 0.08em;
        color: var(--grayDk);
        margin-bottom: 20px;
        font-weight: 700;
    }
    .capEyebrow{
        margin-bottom: 5px;
        line-height: 1.1;
    }
    .capTitle{
        margin-bottom: 18px;
    }
    .capItem p{
        margin-bottom: 25px;
    }
    .capTicks{
        list-style: none;
        justify-content: center;
        gap: 10px;
        margin: 30px 0 0;
        padding: 0;

        li{
            width: 46px;
            height: 3px;
            background-color: rgba(0, 0, 0, 0.18);
            transition: 0.3s;

            &.is-on{
                background-color: var(--blue);
                transform: scaleX(1.12);
            }
        }
    }
}
.subText {
    p {
        font-size: 24px;
    }
}
.tabBannerWrap{
    position: relative;
    height: 90vh;
}
.fullTabCont{
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    &.active{
        opacity: 1;
        visibility: visible;
    }
    .imgWrap{
        width: 100%;
        height: 100%;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
        }
    }
    .TabContInner{
        position: absolute;
        top:100px;
        left: 0;
        width: 100%;
    }
    &.tab_1_wrap{
        .TabContInner{
            position: absolute;
            top: 120px;
            left: 0;
        }
    }
    &.tab_2_wrap{
        .imgWrap{
            img{
                object-position: center center;
            }
        }
        .TabContInner{
            top: 150px;
        }
        .commonBtn {
            border: 1px solid var(--white);
            color: #fff;
        }
    }
    &.tab_3_wrap{
        .commonBtn {
            border: 1px solid var(--white);
            color: #fff;
        }
    }
    &.tab_4_wrap{
        .imgWrap {
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center center;
            }
        }
        .TabContInner{
            top: 100px;
        }
        .commonBtn {
            border: 1px solid var(--white);
            color: #fff;
        }
    }
    &.tab_5_wrap{
        .commonBtn {
            border: 1px solid var(--white);
            color: #fff;
        }
        .TabContInner{
            top: 50px;
        }
    }
}
.tabWrap{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    .tabInner{
        border-radius: 15px 15px 0 0;
        background-color: #fff;
        padding: 15px 15px 10px 15px;
        position: relative;
        &:before{
            width: 20px;
            height: 20px;
            position: absolute;
            left: -20px;
            bottom: 0;
            content: "";
            background: url(../images/home/arrow_left.png);
            background-size: 100%;
        }
        &:after{
            width: 20px;
            height: 20px;
            position: absolute;
            right: -20px;
            bottom: 0;
            content: "";
            background: url(../images/home/arrow_right.png);
            background-size: 100%;
        }
        ul{
            box-shadow: 0 0 10px 0px #ccc;
            border-radius: 10px;
            display: flex;
            overflow: hidden;
            li{
                width: calc(100% / 6);
                border-right: 1px solid #c4c4c4;
                margin-bottom: 0px;
                &:last-child{
                    border-right: none;
                }
                /* the child combinator matters: in the accordion state the panel
                   moves inside this <li>, and a bare `a` would repaint the
                   panel's Read More button as a tab label */
                > a{
                    width: 100%;
                    padding: 15px 20px;
                    min-height: 115px;
                    display: flex;
                    align-items: center;
                    color: #000;
                }
                &.active{
                    > a{
                        color: #ffffff;
                        background: linear-gradient(to top, #0075b8 0%, #56b6c5 100%);
                    }
                }
            }
        }
    }
}

.tab_2_wrap{
    .imgWrap{
        position: relative;
        &::before{
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            position: absolute;
            background: linear-gradient(to bottom, #001928 0%, #56b6c500 100%);
            content: "";
        }
    }
}
    
/* Panels whose photograph is light where the copy sits. tab_1 and tab_2 carry
   their own contrast, so the scrim is opted into rather than applied to all. */
.fullTabCont.tab_scrim .imgWrap{
    position: relative;
}
/* .fullTabCont.tab_scrim .imgWrap::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 39, 66, 0.72) 0%, rgba(0, 39, 66, 0.35) 45%, rgba(0, 39, 66, 0) 75%);
} */

/* six labels in one row runs out of width before the breakpoint does */

@media (max-width: 1280px){
    .pairCard{
        .fz_28 {
            font-size: 18px !important;
        }
    }

}


@media (max-width: 1199px){
    .tabWrap .tabInner ul li > a{
        min-height: 100px;
        padding: 12px 14px;
        font-size: 15px;
    }
}

/* --------------------------------------------- s04 as an accordion ------- */
/* JS moves each .fullTabCont into its own <li> below 992px and flags the
   section, so the rules below are only ever live in the accordion state. */
.s04.is-accordion{
    .tabBannerWrap{
        display: none;
    }
    .tabWrap{
        position: static;
    }
    .tabInner{
        padding: 0;
        border-radius: 0;

        &::before,
        &::after{
            display: none;
        }
    }
    .tabInner ul{
        display: block;
        overflow: visible;

        li{
            width: 100%;
            border-right: 0;
            border-bottom: 1px solid #c4c4c4;

            &:last-child{
                border-bottom: 0;
            }
        }
        li > a{
            min-height: 0;
            padding: 16px 52px 16px 20px;
            position: relative;
            font-size: 16px;
            line-height: 1.35;

            &::after{
                content: "\f067";
                font-family: "FontAwesome";
                position: absolute;
                right: 20px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 14px;
            }
        }
        li.active > a::after{
            content: "\f068";
        }
    }

    /* the collapse. grid-template-rows animates from nothing to content height
       without JS having to measure anything */
    .accBody{
        display: grid;
        grid-template-rows: 0fr;
        background-color: var(--white);
        transition: grid-template-rows 0.4s ease;
    }
    li.active > .accBody{
        grid-template-rows: 1fr;
    }
    .accBody > .fullTabCont{
        min-height: 0;
        overflow: hidden;
    }

    /* the panel stops being a stacked, full-height banner */
    .fullTabCont,
    .fullTabCont.tab_1_wrap,
    .fullTabCont.tab_2_wrap{
        position: static;
        width: auto;
        height: auto;
        opacity: 1;
        visibility: visible;

        .imgWrap{
            height: auto;

            img{
                height: auto;
                aspect-ratio: 16 / 10;
            }
        }
        .TabContInner{
            position: static;
            top: auto;
            padding: 22px 0 30px;
        }
        .container-max{
            padding-left: 20px;
            padding-right: 20px;
        }
        .textWrap{
            width: 100%;
            margin-bottom: 0;
        }
    }

    /* nothing sits on the photograph any more, so the scrim only darkens it */
    .fullTabCont.tab_scrim .imgWrap::after{
        display: none;
    }

    /* the white copy was set for a photographic ground. In the accordion it
       sits under the image on the panel's own white plate, so it has to come
       back to the brand colours or it disappears. */
    /* .whiteText is an !important utility in reset.css, so undoing it here
       needs the same weight - specificity alone cannot reach it */
    .fullTabCont .whiteText{
        color: var(--blue) !important;
    }
    .fullTabCont .subText p.whiteText{
        color: #414042 !important;
    }
    .fullTabCont .commonBtn{
        border-color: var(--grayDk);
        color: var(--blue);

        &::after{
            background-color: var(--blue);
        }
        &::before{
            color: var(--white);
        }
        &:hover{
            background-color: var(--blue);
            border-color: var(--blue);
            color: var(--white);

            &::after{
                background-color: var(--white);
            }
            &::before{
                color: var(--blue);
            }
        }
    }
}


/* Pinned. ScrollTrigger adds .is-pinned only once the pin has actually taken,
   so if GSAP is missing the section stays a plain list.

   The images do not simply fade - they travel. The next capital waits parked as
   a thumbnail beside the frame, grows into it as you scroll, and the outgoing
   one shrinks away to the left. JS measures the two parked positions against
   the columns and writes them to --cap-park-* / --cap-exit-*; the values below
   are only the pre-JS fallback. */
/* --------------------------------------------------------------------------------
   The pin itself - plain CSS, not gated behind any JS class.

   This is how metriccivil.ca does it: .section-home-scope is 280vh and .sticky-div
   inside it is 100vh / position:sticky / top:0. No ScrollTrigger, no class toggled
   from script. Having it depend on .is-pinned was the mistake - if the JS gate
   never fires for any reason, nothing pins and the whole section reads as dead.
   Now the pin holds on its own and JS only drives which capital is showing.
-------------------------------------------------------------------------------- */
@media (min-width: 1200px){
    .capSec{
        /* --cap-run is written by JS as steps x count; the fallback covers six */
        height: calc(100vh * (1 + var(--cap-run, 4.8)));
        padding-top: 0;
        padding-bottom: 0;
    }
    .capSec .capStage{
        height: 100vh;
        position: sticky;
        top: 0;
        overflow: hidden;

        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.capSec.is-pinned{
    --cap-scale: 0.19;
    --cap-park-x: 104%;  --cap-park-y: 70%;
    --cap-exit-x: -24%;  --cap-exit-y: 28%;

    .capNav{
        display: block;
    }

    /* waiting: parked off-frame */
    .capShot{
        transform: translate(var(--cap-park-x), var(--cap-park-y)) scale(var(--cap-scale));
        transform-origin: 0 0;
        opacity: 0;
        transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
    }
    /* next up: visible as a thumbnail, so you can see what is coming */
    .capShot.is-next{
        opacity: 1;
    }
    /* current: full size, in frame */
    .capShot.is-active{
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    /* just left: shrunk and slid away */
    .capShot.is-prev{
        transform: translate(var(--cap-exit-x), var(--cap-exit-y)) scale(var(--cap-scale));
        opacity: 1;
    }
    /* long gone */
    .capShot.is-gone{
        transform: translate(var(--cap-exit-x), var(--cap-exit-y)) scale(0);
        opacity: 0;
    }

    /* A lane on each side of the image. "next" waits in the gap between the
       image and the copy, so the padding that protects it is on the copy's
       LEFT; on the right it would have protected nothing and the tile landed on
       the Read More button. "prev" gets the matching lane before the image. */
    .capCopy{
        padding-left: 0;
    }
    .capMediaCol{
        padding-left: var(--cap-gutter, 150px);
    }
    /* The copy sits toward the top rather than centred. Centred, on a shorter
       image, the Read More button drops far enough to meet the thumbnail parked
       at the image's foot - top-aligning keeps the two apart at every width. */
    .capRow{
        align-items: flex-start;
    }
    .capCopyCol{
        padding-top: 40px;
    }
    .capItem{
        opacity: 0;
        visibility: hidden;
        transition: opacity 2s ease, visibility 0s linear 2s;
    }
    .capItem.is-active{
        opacity: 1;
        visibility: visible;
        transition: opacity 1s ease, visibility 0s;
    }
}

/* prev / next, flanking the stage as the design sets them */
.capSec .capNav{
    display: none;
    position: absolute;
    padding: 0;
    border: 0;
    background: none;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: 16px;
    color: var(--grayDk);
    white-space: nowrap;
    transition: 0.3s;
    z-index: 2;

    &:hover{
        color: var(--blue);
    }
    &[disabled]{
        opacity: 0.35;
        cursor: default;
    }
    /* JS parks each label under its own thumbnail; the fallbacks only matter
       before the first measure */
    &.capNavPrev{
        left: var(--cap-prev-left, 0);
        top: var(--cap-prev-top, 40%);
    }
    &.capNavNext{
        left: var(--cap-next-left, auto);
        top: var(--cap-next-top, 70%);
    }
}
/* reduced motion keeps the sequence and drops only the easing */
.capSec.is-reduced .capShot,
.capSec.is-reduced .capItem{
    transform: none;
    transition: none;
}

/* ------------------------------- the carousel, below 1200 --------------- */
/* JS moves each image and its article into one .capSlide and flags the section,
   so these rules are only live once that has happened. */
.capSec.is-slider{
    .capRow{
        display: block;
    }
    /* the conveyor's two columns are empty in this mode, and the labels and the
       tick bar belong to it rather than to the carousel */
    .capMediaCol,
    .capCopyCol,
    .capNav,
    .capTicks{
        display: none;
    }
    .capSlide{
        display: flex;
        align-items: center;
        gap: 35px;
        padding: 0 5px;
    }
    /* the pair no longer sits in a one-cell grid, so the stacking that put them
       on top of each other has to come off */
    .capShot,
    .capItem{
        grid-area: auto;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .capShot{
        flex: 0 0 44%;
        max-width: 44%;
        margin: 0;

        img{
            height: auto;
        }
    }
    .capItem{
        flex: 1 1 auto;
        min-width: 0;
    }
    /* Two lines then an ellipsis, with Read More carrying the rest. The six
       capitals have paragraphs of quite different lengths, and slick's
       adaptiveHeight was resizing the whole carousel on every move; clamping
       them settles it. `:not(.capTitle)` matters - the subtitle above is a <p>
       too, and clamping that would be clamping a one-line heading. */
    .capItem p:not(.capTitle){
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* slick's own controls, matched to the governance slider on the same page.
       Arrows only - the carousel is initialised with dots off. */
    .capSlider{
        .slick-arrow{
            position: absolute;
            bottom: -78px;
            width: 54px;
            height: 54px;
            border: 0;
            border-radius: 50%;
            font-size: 0;
            background-color: var(--blue);
            z-index: 2;
            transition: 0.3s;

            &::before{
                content: "\f060";
                font-family: "FontAwesome";
                font-size: 17px;
                color: var(--white);
            }
            &.slick-prev{ left: calc(50% - 64px); }
            &.slick-next{
                left: calc(50% + 10px);
                background-color: #d9d9d9;

                &::before{
                    content: "\f061";
                    color: var(--black);
                }
            }
            &.slick-disabled{
                opacity: 0.4;
                cursor: default;
            }
            /* Both arrows come to brand blue on hover, and the grey "next"
               brings its glyph over to white with it. Disabled ones are inert,
               so they are left out.

               The second branch naming .slick-next is deliberate: the grey is
               set on `&.slick-next`, and a bare `&:hover` would be relying on
               :hover and :not each counting a class to out-weigh it. Spelling
               out the compound puts it beyond question. */
            &:hover:not(.slick-disabled),
            &.slick-next:hover:not(.slick-disabled){
                background-color: var(--blue);

                &::before{
                    color: var(--white);
                }
            }
        }
    }
    /* room under the slide for the arrows the rule above lifts into */
    .capStage{
        padding-bottom: 95px;
    }
}

@media (max-width: 767px){
    .capSec.is-slider{
        .capSlide{
            display: block;
            padding: 0;
            margin: 0 15px;
        }
        .capShot{
            max-width: 100%;
            margin-bottom: 20px;
        }
        .capSlider .slick-arrow{
            width: 46px;
            height: 46px;
            bottom: -68px;

            &.slick-prev{ left: calc(50% - 54px); }
            &.slick-next{ left: calc(50% + 8px); }
        }
        .capStage{ padding-bottom: 82px; }
    }
    h2, .h2 {
        font-size: 20px !important;
    }
}

/* Neither pinned nor sliding - no JS at all. Each capital becomes its own row,
   so the wrappers dissolve and the pairs are ordered back together. */
.capSec:not(.is-pinned):not(.is-slider){
    .capRow{
        display: flex;
        flex-wrap: wrap;
        row-gap: 50px;
    }
    .capMediaCol,
    .capCopyCol,
    .capMedia,
    .capCopy{
        display: contents;
    }
    .capShot,
    .capItem{
        grid-area: auto;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .capShot{
        margin-bottom: 20px;
    }
    .capShot[data-i="0"]{ order: 0; }  .capItem[data-i="0"]{ order: 1; }
    .capShot[data-i="1"]{ order: 2; }  .capItem[data-i="1"]{ order: 3; }
    .capShot[data-i="2"]{ order: 4; }  .capItem[data-i="2"]{ order: 5; }
    .capShot[data-i="3"]{ order: 6; }  .capItem[data-i="3"]{ order: 7; }
    .capShot[data-i="4"]{ order: 8; }  .capItem[data-i="4"]{ order: 9; }
    .capShot[data-i="5"]{ order: 10; } .capItem[data-i="5"]{ order: 11; }

    .capTicks{
        display: none;
    }
}

/* ========================= 06. RISK + GOVERNANCE ========================= */
.pairSec{
    .pairCard{
        height: 100%;
        display: flex;
        flex-direction: column;
        background-color: var(--white);
        box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.12);
    }
    .pairTxt{
        flex: 1 1 auto;
        padding: 40px;
        z-index: 1;
        position: relative;
        margin-bottom: -40px;
        z-index: 2;
    }
    .pairEyebrow{
        margin-bottom: 12px;
    }
    .secTitle{
        margin-bottom: 18px;
    }
    .pairTxt p{
        margin-bottom: 25px;
    }
    .riskCard{
        .pairBg{
            position: absolute;
            inset: 0;
            z-index: 0;
            width: 100%;
            height: 100%;
            &::before{
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                content: "";
                background-color: #e1f3ffb5;
            }

            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: right top;
            }
            video{
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: left top;
            }
        }
        /* the plate is light, so the whole card is set in brand blue */
        .pairTxt p{
            color: var(--blue);
        }
    }
    .govCard .pairPhoto{
        margin-top: auto;

        img{
            width: 100%;
            display: block;
            position: relative;
            z-index: 1;
        }
        .pairSwatch{
            position: absolute;
            left: 0;
            bottom: 0;
            width: 36%;
            height: 60px;
            background-color: #006eb7;
        }
    }
}

/* ====================== 07. CORPORATE GOVERNANCE ========================= */
.govSec{
    background: linear-gradient(to bottom, rgba(102, 197, 199, 0.5) 0%, rgba(0, 114, 183, 0) 100%);

    .secTitle{
        margin-bottom: 35px;
    }
    .govTabs{
        justify-content: center;
        margin-bottom: 45px;
    }
    .govTab{
        position: relative;
        padding: 16px 32px;
        border: 0;
        background: none;
        border-radius: 8px;
        font-size: 20px;
        line-height: 1.1;
        color: var(--black);
        transition: 0.3s;

        & + .govTab::before{
            content: "";
            position: absolute;
            left: 0;
            top: 9px;
            bottom: 9px;
            width: 1px;
            background-color: rgba(0, 0, 0, 0.25);
        }
        &:hover{
            color: var(--blue);
        }
        &.is-active{
            background-color: var(--white);

            &::before{ opacity: 0; }
            & + .govTab::before{ opacity: 0; }
        }
    }
    .govFig{
        max-width: 200px;

        img{
            width: 100%;
            display: block;
        }
    }
    .govItem .col-md-5{
        flex: 0 0 auto;
        width: 220px;
        max-width: 100%;
    }
    .govItem .col-md-7{
        flex: 1 1 0;
        width: auto;
        max-width: 100%;
    }
    .govTxt{
        .govRole{
            margin-bottom: 15px;
        }
    }
    .govItem{
        padding: 0 15px;
    }

    /* slick, as the rest of the site uses it */
    .govSlider{
        .slick-track{
            display: flex;
            align-items: stretch;
        }
        .slick-slide{
            height: auto;
        }
        .slick-arrow{
            position: absolute;
            bottom: -100px;
            width: 60px;
            height: 60px;
            border: 0;
            border-radius: 50%;
            font-size: 0;
            background-color: var(--blue);
            z-index: 2;
            transition: 0.3s;

            &::before{
                content: "\f060";
                font-family: "FontAwesome";
                font-size: 18px;
                color: var(--white);
            }
            &.slick-prev{ left: calc(50% - 70px); }
            &.slick-next{
                left: calc(50% + 10px);
                background-color: #d9d9d9;

                &::before{
                    content: "\f061";
                    color: var(--black);
                }
            }
            &.slick-disabled{
                opacity: 0.4;
                cursor: default;
            }
            /* same hover as the capital carousel: blue ground, white glyph.
               .slick-next spelled out for the same reason it is there. */
            &:hover:not(.slick-disabled),
            &.slick-next:hover:not(.slick-disabled){
                background-color: var(--blue);

                &::before{
                    color: var(--white);
                }
            }
        }
    }
    .govPanel{
        padding-bottom: 105px;
    }
    /* the padding is only there to make room for the arrows, so a panel that
       shows everything at once gets it back */
    .govPanel.noPaging{
        padding-bottom: 0;
    }
}

/* ------------------------- governance as an accordion ------------------- */
/* JS moves each panel in under its own button and flags the section, so these
   rules are only live once that has happened. */
.govSec.is-accordion{
    /* The markup carries .df .fw .aic, and all three are !important utilities
       in reset.css - `display: block` here loses to them silently, which left
       every row a content-width flex item about 28px across. Turning the same
       flex row into a stretched column is what actually takes. */
    .govTabs{
        flex-direction: column;
        align-items: stretch !important;
        margin-bottom: 0;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.12);
        background-color: var(--white);
    }
    .govTab{
        width: 100%;
        text-align: left;
        padding: 16px 48px 16px 18px;
        border: 0;
        border-radius: 0;
        font-size: 16px;
        line-height: 1.35;
        background-color: var(--white);

        &::before{
            display: none;
        }
        &::after{
            content: "\f067";
            font-family: "FontAwesome";
            position: absolute;
            right: 18px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 13px;
        }
        &.is-active{
            color: var(--white);
            background: linear-gradient(to top, #0075b8 0%, #56b6c5 100%);

            &::after{
                content: "\f068";
            }
        }
    }

    /* the animated wrapper JS drops around the panel */
    .accBody{
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.4s ease;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    }
    .govTab.is-active + .accBody{
        grid-template-rows: 1fr;
    }
    .accBody:last-child{
        border-bottom: 0;
    }
    .accBody > .govPanel{
        min-height: 0;
        overflow: hidden;
        padding: 0 14px 90px;

        /* the shared tab code closes a panel with the hidden attribute, which is
           display:none - that would cut the collapse dead. Here the .accBody
           row height is what opens and closes, so hidden only has to stop
           meaning invisible. */
        &[hidden]{
            display: block;
        }
        &.noPaging{
            padding-bottom: 18px;
        }
    }
}

/* Responsive — new sections */
@media (max-width: 1199px){
    .hlSec{
        .hlTab{
            min-height: 100px;
            font-size: 15px;
        }
        .hlTab::before{ display: none; }
        .hlTabs [class*="col-"] .hlTab{ border-bottom: 1px solid rgba(0, 0, 0, 0.25); }
    }
}

@media (max-width: 991px){
    .hlSec{
        .hlPanels{ min-height: 0; }
        .hlTabs{ margin-top: 40px; margin-bottom: 0; }
    }
    .pairSec .pairTxt{ padding: 30px; }
    .govSec{
        .govTabs{
            gap: 8px;
        }
        .govTab{
            border: 1px solid rgba(0, 0, 0, 0.15);
            font-size: 17px;
            padding: 12px 20px;

            & + .govTab::before{ display: none; }
        }
        .govFig{
            max-width: 300px;
            margin: 0 auto 25px;
        }
    }
    .s04.is-accordion {
        .tabInner {
            overflow: hidden;
            box-shadow: 0 0 10px 0px #ccc;
            border-radius: 10px;
        }
    }
}

@media (max-width: 767px){
    .hlSec .hlTab{
        min-height: 0;
        padding: 16px 15px;
    }
    .capSec{
        .capShot img{ border-radius: 15px; }
        .capTicks li{ width: 30px; }
    }
    .pairSec .pairTxt{ padding: 25px; }
    .govSec{
        .govItem{ padding: 0 8px; }
        .govPanel{ padding-bottom: 95px; }
        .govPanel.noPaging{ padding-bottom: 0; }
        .govSlider .slick-arrow{
            width: 45px;
            height: 45px;
            bottom: -75px;

            &.slick-prev{ left: calc(50% - 58px); }
            &.slick-next{ left: calc(50% + 8px); }
        }
    }
    .msgSec {
        .msgCard {
            padding-bottom:20px;
        }
    }
}

/* The five morph states, written flat rather than nested. Nested inside
   .capSec.is-pinned the state rules did not beat the base .capShot rule in this
   browser, so the active image stayed parked. Flat selectors make the cascade
   explicit and are what actually drive the sequence. */
.capSec.is-pinned .capShot{
    transform: translate(var(--cap-park-x), var(--cap-park-y)) scale(var(--cap-scale));
    transform-origin: 0 0;
    opacity: 0;
    transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}
.capSec.is-pinned .capShot.is-next{
    opacity: 1;
}
.capSec.is-pinned .capShot.is-active{
    transform: translate(0, 0) scale(1);
    opacity: 1;
}
.capSec.is-pinned .capShot.is-prev{
    transform: translate(var(--cap-exit-x), var(--cap-exit-y)) scale(var(--cap-scale));
    opacity: 1;
}
.capSec.is-pinned .capShot.is-gone{
    transform: translate(var(--cap-exit-x), var(--cap-exit-y)) scale(0);
    opacity: 0;
}
.capSec.is-reduced .capShot{
    transition: none;
}

/* Between 1200 and 1280 the conveyor still runs, but there is no room either
   side of the frame for a thumbnail that does not crowd the copy. JS flags the
   section and fades the parked tiles out entirely; the labels that pointed at
   them go with them, and the lanes that were holding space for them collapse
   (the gutter itself is written from JS). */
.capSec.is-pinned.is-compact{
    .capNav{
        display: none;
    }
    .capCopyCol{
        padding-top: 0;
    }
    .capRow{
        align-items: center;
    }
}

/* Scroll-linked. JS writes transform / opacity every frame off the scroll
   position, so a CSS transition would only fight it - it would still be easing
   towards the previous frame's value when the next one arrives, which reads as
   the images lagging behind the wheel. The class is only added once the
   ScrollTrigger is live, so without GSAP the state rules above still stand. */
.capSec.is-scrubbed .capShot,
.capSec.is-scrubbed .capItem{
    transition: none;
}
/* the frame is the fixed window the images travel through; without this the
   parked tiles would be clipped by the column they overhang */
.capSec.is-scrubbed .capMedia{
    overflow: visible;
}
.capShot{
    box-shadow: 0px 0px 10px 0px #868686b3;
    border-radius: 20px;
}


/*===bod section start--*/
.bodCard {
    .bodImg {
        width: 100%;
        height: 300px;
        position: relative;

        &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 190px;
            background: linear-gradient(90deg, #0075b8 0%, #56b6c5 100%);
            border-radius: 20px;
            z-index: -1;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: bottom;
        }
    }

    .bodTxt {
        .bodTxtInn {
            height: 220px;
            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 12px;

            /* navigation.css carries `.home ::-webkit-scrollbar { width: 0 }`,
               a descendant rule that zeroes the bar on EVERY scrollable box
               inside body.home - which is why this one scrolled with no visible
               bar on index.html but showed one on bod.html, where the body has
               no .home class. Restated here rather than unpicked there, so
               whatever else that rule was hiding is left as it is. */
            scrollbar-width:0;
            scrollbar-color: transparent;

            &::-webkit-scrollbar {
                width: 6px;
            }
            &::-webkit-scrollbar-track {
                background: rgba(0, 0, 0, 0.12);
                border-radius: 10px;
            }
            &::-webkit-scrollbar-thumb {
                background: var(--blue);
                border-radius: 10px;
            }
        }
    }
}
.mob_991{
    display: none !important;
}

/* ==========================================================================
   INDEX RESPONSIVE LADDER

   One block per breakpoint, widest first, so the cascade reads top to bottom.
   Shared typography (h2, .commonHead, .subText, .fz_24, .fz_36 ...) already
   steps down in common.css and reset.css - what follows is only this page's
   own layout, plus the display sizes in the banner, which no other page uses
   and which nothing else scales.
   ========================================================================== */

/* ------------------------------------------------------------- <= 1768 --- */
@media (max-width: 1768px){
    .bannerSec{
        .bannerText h1{ font-size: 104px !important; }
        .bannerText .fz_65{ font-size: 58px !important; }
        .bannerText .fz_44{ font-size: 38px !important; }
        .bannerProductImg{ width: 52%; right: 40px; }
    }
    .fullTabCont {
        &.tab_6_wrap {
            .TabContInner {
                position: absolute;
                top: 150px;
                left: 0;
                width: 100%;
            }
        }
    }
    .capSec.is-pinned {
        .capCopyCol {
            padding-top: 0;
        }
    }
}

/* ------------------------------------------------------------- <= 1600 --- */
@media (max-width: 1600px){
    .bannerSec{
        .bannerText h1{ font-size: 94px !important; }
        .bannerText .fz_65{ font-size: 52px !important; }
        .bannerText .fz_44{ font-size: 34px !important; }
        .bannerText{ margin-bottom: 35px; }
        .bannerProductImg{ width: 53%; right: 30px; }
        .bannerIcon{ padding-top: 40px; max-width: 40%;}
    }
    .msgSec .quoteCard{ min-height: 205px; }
    .subText {
        p {
            font-size: 20px;
        }
    }
    .capSec {
        .capItem p.capTitle {
            margin-bottom: 5px;
        }
    }
    .pairCard {
        .fz_28 {
            font-size: 20px !important;
        }
    }
    .fullTabCont {
        &.tab_6_wrap{
            .imgWrap {
                img {
                    object-position: left top;
                }
            }
        }
    }
    .fullTabCont{
        .commonHead {
            font-size: 36px !important;
        }
    }
    .fullTabCont {
        &.tab_6_wrap {
            .TabContInner {
                top: 50px;
            }
        }
    }
    .fullTabCont {
        &.tab_4_wrap {
            .TabContInner {
                top: 55px;
            }
        }
    }
}

/* ------------------------------------------------------------- <= 1440 --- */
@media (max-width: 1440px){
    .bannerSec{
        .bannerText h1{ font-size: 84px !important; }
        .bannerText .fz_65{ font-size: 46px !important; }
        .bannerText .fz_44{ font-size: 30px !important; }
        .bannerText{ margin-bottom: 65px; }
        .banner-cont{ bottom: 55px; }
        .bannerProductImg{ width: 54%; right: 24px; bottom: 60px; }
        .bannerIcon{
            padding-top: 32px;
            img{ max-width: 460px; }
        }
    }
    .aboutSec .aboutTxt .fz_28{ font-size: 24px !important; }
    .msgSec{
        .msgCard{ padding: 25px 25px 0; }
        .quoteCard{ min-height: 220px; padding: 22px; }
    }
    .tabWrap .tabInner ul li > a{ min-height: 100%; font-size: 16px; }
    .capSec .capItem .fz_20{ font-size: 18px !important; }
    .capSec.is-pinned {
        .capCopyCol {
            padding-top: 0;
        }
    }
}

/* ------------------------------------------------------------- <= 1366 --- */
@media (max-width: 1366px){
    .bannerSec{
        .bannerText h1{ font-size: 78px !important; }
        .bannerText .fz_65{ font-size: 43px !important; }
        .bannerText .fz_44{ font-size: 28px !important; }
        .banner-cont{ bottom: 50px; }
        .bannerProductImg{ width: 55%; right: 20px; bottom: 70px; }
        .bannerIcon img{ max-width: 430px; }
    }
    .pairSec .pairTxt{ padding: 34px; }
    .govSec .bodCard .bodTxt .bodTxtInn{ height: 200px; }
    .capSec .capStage {
        height: 100vh;
        justify-content: flex-start;
        padding-top: 50px;
    }
    .fullTabCont {
        .commonHead {
            font-size: 26px !important;
        }
    }
    .fullTabCont {
        & .subText {
            p {
                font-size: 16px !important;
            }
        }
    }
    .fullTabCont {
        &.tab_2_wrap {
            .TabContInner {
                top: 100px;
            }
        }
    }
    .govSec {
        .secTitle {
            margin-bottom: 20px;
        }
        .govTabs {
            margin-bottom: 15px;
        }
        .bodTxt{
            .fz_24 {
                font-size: 18px !important;
            }
        }
    }
    .fullTabCont {
        &.tab_5_wrap {
            .TabContInner {
                top: 15px;
            }
        }
    }
    .tabWrap .tabInner ul li > a {
        font-size: 14px;
        padding: 10px 15px;
    }
}
@media (min-width: 1200px) {
    .capSec .capStage {
        height: 100vh;
        position: sticky;
        top: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 70px;
    }
}
/* ------------------------------------------------------------- <= 1280 --- */
@media (max-width: 1280px){
    .bannerSec{
        .bannerText h1{ font-size: 72px !important; }
        .bannerText .fz_65{ font-size: 40px !important; }
        .bannerText .fz_44{ font-size: 26px !important; }
        .bannerText{ margin-bottom: 50px; }
        .banner-cont{ bottom: 45px; }
        /* the product shot and the category strip share the foot of the frame;
           lifting it clear is what stops it covering the last two icons */
        .bannerProductImg{ width: 56%; right: 16px; bottom: 86px; }
        .bannerIcon img{ max-width: 400px; }
    }
    .tabWrap .tabInner ul li > a{ 
        min-height: 95px;
        font-size: 13px;
        padding: 13px 16px;
    }
    .fullTabCont {
        &.tab_6_wrap {
            .TabContInner {
                position: absolute;
                top: 50px;
                left: 0;
                width: 100%;
            }
        }
        &.tab_1_wrap {
            .TabContInner {
                position: absolute;
                top: 80px;
                left: 0;
            }
        }
    }
    #govPanel_1{
        .bodCard {
            .bodImg {
                height: auto;
            }
        }
    }
    .bodCard {
        .bodImg {
            height: 280px;
        }
    }
    #govPanel_3{
       .bodCard {
            .bodImg {
                height: 280px;
            }
        } 
    }
    .capSec .capStage{
        padding-top:30px !important;
    }
    .fullTabCont {
        .tab_3_wrap{
            .TabContInner {
                top: 130px;
            }
        }
        &.tab_4_wrap {
            .TabContInner {
                top: 50px;
            }
        }
        .subText {
            p {
                font-size: 18px;
            }
        }
        .tab_6_wrap{

        }
    }
    .capSec.is-pinned {
        .capMediaCol {
            -ms-flex: 0 0 50%;
            flex: 0 0 50%;
            max-width: 50%;
        }
        .capCopyCol{
            -ms-flex: 0 0 50%;
            flex: 0 0 50%;
            max-width: 50%;
        }
    }
    .capSec .capStage{
        height: auto;
    }
    .pairSec {
        .secTitle {
            font-size: 22px !important;
        }
    }
}

/* ------------------------------------------------------------- <= 1199 --- */
@media (max-width: 1199px){
    .bannerSec{
        /* Above this width the heading sits over the dark blue top-left of the
           photograph. As the copy shrinks it slides down into the pale water,
           and white on near-white is unreadable - so the ground gets a scrim
           from here down. It fades out well before the product shot, which
           needs the bright plate behind it. */
        .bannerImg{
            position: relative;

            &::after{
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(to right,
                            rgba(0, 60, 110, 0.55) 0%,
                            rgba(0, 60, 110, 0.22) 42%,
                            rgba(0, 60, 110, 0) 72%);
            }
        }
        .bannerText h1{ font-size: 64px !important; }
        .bannerText .fz_65{ font-size: 36px !important; }
        .bannerText .fz_44{ font-size: 24px !important; }
        .bannerText{ margin-bottom: 40px; }
        .banner-cont{ 
            bottom: auto;
            top: 50%;
            transform: translateY(-50%);
        }
        .bannerProductImg{ width: 58%; right: 10px; bottom: 96px; }
        .bannerIcon{
            padding-top: 26px;
            img{ max-width: 370px; }
        }
    }
    .aboutSec .aboutTxt .fz_28{ font-size: 20px !important; }
    .msgSec{
        .msgCard{ padding: 22px 22px 0; }
        .quoteCard{ margin-top: 30px; }
    }
    .pairSec .pairTxt{ padding: 30px; }
    .capSec .capItem .fz_20{ font-size: 17px !important; }
    .govSec{
        .bodCard .bodImg{ height: 260px; }
        .bodCard .bodTxt .bodTxtInn{ height: 190px; }
    }
    .efFooter{
        .footerHead{ font-size: 22px; }
        .footerInfo p{ font-size: 17px; }
    }
}

/* ------------------------------------------------------------- <= 1024 --- */
@media (max-width: 1024px){
    .bannerSec{
        .bannerText h1{ font-size: 56px !important; }
        .bannerText .fz_65{ font-size: 32px !important; }
        .bannerText .fz_44{ font-size: 22px !important; }
        .banner-cont{ bottom: 34px; }
        .bannerProductImg{ width: 60%; right: 4px; bottom: 104px; }
        .bannerIcon img{ max-width: 330px; }
    }
    .msgSec .msgFig{ max-width: 240px; }
}

/* -------------------------------------------------------------- <= 991 --- */
/* Bootstrap lg boundary: every col-lg pair on the page is now stacked, the s04
   strip has become an accordion and Our Capital has dropped its pin. */
@media (max-width: 991px){
    .bannerSec{
        .bannerText h1{ font-size: 52px !important; }
        .bannerText .fz_65{ font-size: 29px !important; }
        .bannerText .fz_44{ font-size: 20px !important; }
        .bannerText{ margin-bottom: 30px; }
        .banner-cont{
            top: 50%;
            transform: translateY(-50%);
        }
        .bannerProductImg{ width: 64%; right: 0; bottom: 104px; }
        .bannerIcon{
            padding-top: 20px;
            img{ max-width: 300px; }
        }
    }
    .aboutSec{
        .aboutFig{ max-width: 520px; margin: 0 auto 30px; }
        .aboutTxt .fz_28{ font-size: 19px !important; }
    }
    .msgSec{
        .msgFig{ 
            max-width: 210px; 
            margin-bottom: 0px;
        }
        .quoteCard{ margin-top: 0px; margin-bottom: 20px; min-height: auto; }
    }
    .capSec{
        .capItem{ margin-bottom: 10px; }
        .capItem .fz_20{ font-size: 16px !important; }
        .capCount{ margin-bottom: 12px; }
        .capTitle{ margin-bottom: 12px; }
    }
    .govSec{
        .bodCard .bodImg{ height: 240px; }
        .bodCard .bodTxt .bodTxtInn{ height: 170px; }
    }
    .efFooter .footerGrid .footerDownloads{ margin-top: 5px; }
    .bannerProductImg{
        display: none;
    }
    .bannerSec {
        .bannerImg {
            position: relative;
        }
    }
    .fz_44 {
        font-size: 28px !important;
    }
    .desk_991{
        display: none !important;
    }
    .mob_991{
        display: block !important;
        img {
            height: auto;
            aspect-ratio: auto !important;
        }
    }
    .pairSec .pairTxt {
        margin-bottom: 0px !important;
        &.wid_60{
            width: 100%;
        }
    }
}

/* -------------------------------------------------------------- <= 768 --- */
/* Bootstrap md boundary - iPad portrait sits exactly here, and it is where the
   banner stops working as a viewport-height stage. The copy, the category strip
   and the product shot all end up fighting for the same corner, so from here
   down the photograph drops behind as the ground and the copy goes back into
   the flow: the section is then as tall as what is in it. */
@media (max-width: 768px){
    .bannerSec{
        .bannerImg{

            /* the copy now sits across the top rather than down the left, so
               the scrim turns with it */
            &::after{
                background: linear-gradient(to bottom,
                            rgba(0, 60, 110, 0.62) 0%,
                            rgba(0, 60, 110, 0.28) 42%,
                            rgba(0, 60, 110, 0) 78%);
            }
        }
        .bannerText{
            margin-bottom: 28px;
            h1{ font-size: 46px !important; }
            .fz_65{ font-size: 26px !important; }
            .fz_44{ font-size: 18px !important; }
        }
        .bannerIcon{
            padding-top: 0;
            display: none;
            img{ max-width: 260px; }
        }
        .bannerProductImg{
            position: static;
            width: 100%;
            max-width: 430px;
            margin: 18px auto 0;
        }
    }
    .capSec .capShot img{ border-radius: 15px; }
    .efFooter .dlGridOffset{ padding-top: 15px; }
}

/* -------------------------------------------------------------- <= 767 --- */
/* Phones. The flowed banner from the rung above carries down; this only tunes
   what it holds. */
@media (max-width: 767px){
    .bannerSec{
        .bannerText{
            h1{ font-size: 42px !important; }
            .fz_65{ font-size: 24px !important; }
            .fz_44{ font-size: 17px !important; }
        }
        .bannerIcon img{ max-width:300px; }
        .bannerProductImg{ max-width: 400px; }
    }
    .btnWrap {
        .commonBtn {
            background-color: var(--blue);
            color: #fff;
            border: 1px solid var(--blue);
            &::after {
                background-color:#fff;
            }
            &:before {
                top: 14px;
                right: 17px;
                color: var(--blue);
            }
        }
    }
    .s04.is-accordion {
        .fullTabCont .commonBtn {
            border-color: var(--grayDk);
            color:#fff;
            &::after {
                background-color: #fff;
            }
            &::before {
                color: var(--blue);
            }
        }
    }
    .pairSec {
        padding-top: 0 !important;
    }
    .aboutSec .aboutFig{ max-width: 100%; }
    .msgSec .msgCard .secTitle{ margin-bottom: 20px; }
    .capSec .capCopy .btnWrap{ margin-bottom: 10px; }
    .pairSec .govCard .pairPhoto .pairSwatch{ height: 42px; }
    .govSec{
        .bodCard .bodImg{ height: 230px; }
        /* the bio runs to its full length rather than scrolling, the same way
           bod.html handles it at this width */
        .bodCard .bodTxt .bodTxtInn{ padding-right: 5px; }
    }
    .efFooter{
        .footerLogo{ max-width: 190px; }
        .footerBlock{ margin-bottom: 22px; }
    }
    .bannerImg {
        height: 500px;
    }
    .bannerText{
        .mb_30{
            margin-bottom: 15px !important;
            padding-top: 15px !important;
        }
        .btnWrap.pt_20{
            padding-top: 0px !important;
        }
    }
    .header-wrapper {
        .logo_wrap {
            .logo {
                width: 130px;
            }
        }
    }
    .bodCard {
        .bodImg {
            &::after {
                height: 100%;
            }
        }
    }
    .subText {
        p {
            font-size: 16px;
        }
    }

    .capSec .capStage{
        padding-top: 20px !important;
    }
}

/* -------------------------------------------------------------- <= 575 --- */
@media (max-width: 575px){
    .bannerSec{
        .bannerText{
            margin-bottom: 22px;
            h1{ font-size: 36px !important; }
            .fz_65{ font-size: 21px !important; }
            .fz_44{ font-size: 15px !important; }
        }
    }
    .msgSec{
        .msgCard{ padding: 20px; }
        .msgFig{ max-width: 200px; }
        .quoteCard{ padding: 18px; margin-top: 26px; }
    }
    .s04.is-accordion{
        .tabInner ul li > a{ padding: 14px 44px 14px 16px; font-size: 15px; }
        .tabInner ul li > a::after{ right: 16px; }
        .fullTabCont .container-max{ padding-left: 16px; padding-right: 16px; }
        .fullTabCont .TabContInner{ padding: 18px 0 24px; }
    }
    .capSec{
        .capShot{ margin-bottom: 15px; }
        .capItem p{ margin-bottom: 18px; }
    }
    .pairSec .pairTxt{ padding: 20px; }
    .govSec{
        .govTab{ font-size: 15px; padding: 10px 14px; }
        .bodCard .bodImg{ height: 210px; }
    }
    .efFooter{
        padding: 40px 0 45px;
        .footerLogo{ max-width: 170px; }
        .dlCard{ padding: 12px 14px; gap: 12px; }
    }
}

/* -------------------------------------------------------------- <= 480 --- */
@media (max-width: 480px){
    .bannerSec{
        .bannerText{
            h1{ font-size: 32px !important; }
            .fz_65{ font-size: 19px !important; }
            .fz_44{ font-size: 14px !important; }
        }
    }
    .msgSec .msgFig{ max-width: 175px; }
    .s04.is-accordion .tabInner ul li > a{ font-size: 14px; }
    .govSec{
        .govTabs{ gap: 6px; }
        .govTab{ font-size: 14px; padding: 9px 12px; }
        .bodCard .bodImg{ height: 190px; }
    }
    .efFooter .dlName{ font-size: 14px; }

    .btnWrap {
        .commonBtn {
            font-size: 18px;
            padding: 9px 10px;
            padding-right: 50px;
            border: 1px solid var(--grayDk);
            border-radius: 8px;
            position: relative;
            display: inline-block;
            &::after {
                height: 35px;
            }
            &:before {
                top: 10px;
            }
        }
    }
}

/* -------------------------------------------------------------- <= 420 --- */
@media (max-width: 420px){
    .bannerSec{
        .bannerText{
            margin-bottom: 18px;
            h1{ font-size: 28px !important; }
            .fz_65{ font-size: 17px !important; }
            .fz_44{ font-size: 13px !important; }
        }
    }
    .msgSec{
        .msgCard{ padding: 16px; }
        .msgFig{ max-width: 150px; }
        .quoteCard{ padding: 16px; }
    }
    .s04.is-accordion .tabInner ul li > a{ padding: 12px 38px 12px 14px; }
    .pairSec .pairTxt{ padding: 16px; }
    .govSec{
        .govTab{ font-size: 13px; padding: 8px 10px; }
        .bodCard .bodImg{ height: 170px; }
    }
    .efFooter{
        padding: 34px 0 38px;
        .footerLogo{ max-width: 150px; }
        .dlCard{ padding: 11px 12px; }
        .dlName{ font-size: 13px; }
        .dlMeta{ font-size: 11px; }
    }
}