@media(max-width:1200px){
}
@media(max-width:991px){
    .menu, .nav-icon3 {
        display: none;
    }   
    .my-sidenav {
        width: 0px;
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        overflow-x: hidden;
        z-index: 999999999;
        height: 100vh;
        max-width: 0px;
        width: 100%;
        background-color:#003974;
        transition: 0.5s;
        -webkit-transition: 0.5s;
    }
    .my-sidenav>ul {
        padding: 0px 20px 0px;
    }
    .my-sidenav>ul>li>ul {
        margin-top: 0px;
        display: none;
    }
    .my-sidenav ul.submenu li ul.submenu {
        display: none;
        position: static;
        width: 100%;
    }
    .my-sidenav ul {
        list-style-type: none;
        padding-left: 15px;
    }
    .my-sidenav ul li
    {
        border-bottom: 1px solid #ffffff;
        padding: 15px 0px;
    }
    .my-sidenav > ul > li > ul >li
    {
        border-bottom: 1px solid #ffffff;
        padding: 10px 0px;
    }
    .my-sidenav > ul > li > ul >li:last-child, .my-sidenav ul.submenu li ul.submenu li:last-child
    {
        border-bottom: 0px;
    }
    .my-sidenav ul.submenu li ul.submenu li {
        border-bottom: 1px solid #ffffff;
        padding: 10px 10px;
    }
    .my-sidenav ul.submenu li ul.submenu li a {
        color: #ffffff;
        font-size: 16px;
    }

    .cross-btn1 {
        text-align: right;
        padding: 16px 14px 0px 0px;
        color: #fff;
        font-size: 35px;
        cursor: pointer;
    }
    .my-sidenav .submenu-indicator-minus .submenu-indicator {
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .my-sidenav .submenu-indicator {
        font-size: 30px;
        position: absolute;
        line-height: 25px;
        right: 15px;
    }
    .my-sidenav>ul>li>a {
        color: #ffffff;
        font-size:18px;
        display:block;
    }
    .my-sidenav>ul>li>ul>li>a {
        color: #ffffff;
        font-size: 14px;
    }
    .my-sidenav>ul>li>ul>li>a img {
        padding-right: 0;
        float: right;
        padding-left: 50px;
    }

}

@media (max-width: 767px) {

}
@media (max-width: 420px){

}
@media (max-width: 380px){

}

/*==========================================================
  HEADER + FOOTER RESPONSIVE
==========================================================*/

@media (max-width: 1200px) {
    .hdr-meta {
        padding-left: 18px;
    }
    .hdr-meta-num {
        font-size: 24px;
    }
}

@media (max-width: 991px) {
    :root {
        --hdr-h: 68px;
    }
    .hm-heading {
        width: 40vw;
    }
    /*the title lets go of its button, and the three downloads fall
      into one column, each with a rule over it instead of beside it*/
    .foot-ribbon {
        height: 80px;
    }
    .foot-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    .foot-cta {
        width: 100%;
        justify-content: space-between;
    }
    .foot-secs {
        grid-template-columns: 1fr;
    }
    .foot-secs li + li {
        border-left: 0;
        border-top: 1px solid rgba(232, 222, 216, 0.13);
    }
    .foot-secs a,
    .foot-secs li + li a {
        padding: 22px 0;
    }
    .foot-secs li + li a::after {
        left: 0;
    }
    .hdr-meta {
        display: none;
    }
    .btn-line {
        padding: 10px 16px;
        font-size: 12px;
    }
    .logo img {
        width: 104px;
    }
}

@media (max-width: 767px) {
    /*the mark, the name and the two lines at the foot all stand down
      the left rather than across*/
    .foot-ribbon {
        height: 60px;
    }
    .foot-id {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }
    .foot-brand {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .foot-org {
        padding-left: 0;
        border-left: 0;
    }
    .foot-base-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
    }
    .btn-line span {
        display: none;
    }
    .btn-line {
        width: 38px;
        height: 38px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
    .menu-btn {
        padding: 10px 0 10px 14px;
    }
    .btn-solid {
        padding: 14px 24px;
        font-size: 13px;
    }
    .to-top {
        right: 18px;
        bottom: 18px;
        width: 42px;
        height: 42px;
    }
}

@media (max-width: 420px) {
    .menu-btn-txt {
        display: none;
    }
    .logo img {
        width: 96px;
    }
}

@media (max-width: 767px) {
    /*the floor for the banner height. the stage and the pull-up of the
      section below both read it, so they stay in step with each other*/
    :root {
        --hm-min: 460px;
    }
    /*the phone cut of the film leaves its open ground at the top, not
      to the side, so the heading stands up there across the frame*/
    .hm-heading {
        top: calc(var(--hdr-h) + 20px);
        right: auto;
        left: 50%;
        width: 76vw;
        max-width: 340px;
        min-width: 0;
        transform: translateX(-50%);
    }
    /*there is no room beside the frame on a phone, so the title comes
      off the right edge and stands over the middle of it*/
    .hm-title {
        top: auto;
        right: auto;
        bottom: 128px;
        left: 8%;
        transform: none;
    }
    .hm-banner .hmvideo {
        display: none;
    }
    .hm-banner .hmvideo-mbl {
        display: block;
    }
    .hm-scroll {
        bottom: 20px;
        left: 50%;
        gap: 9px;
    }
    .hm-scroll-rail {
        height: 28px;
    }
    .hm-scroll-ring {
        width: 38px;
        height: 38px;
    }
}


/*==========================================================
  INNER BANNER + PREV / NEXT RESPONSIVE
==========================================================*/
@media (max-width: 1200px) {
    .inner-banner-body {
        padding: 50px 0;
    }
}
/*----------Menu overlay----------*/
@media (max-width: 1200px) {
    .nav-layout {
        grid-template-columns: 290px 1fr;
    }
    .nav-side {
        padding-right: 26px;
    }
    .nav-panels {
        padding-left: 32px;
    }
    .nav-panel.is-wide ul {
        columns: 2;
    }
    .nav-tool {
        min-width: 232px;
    }
}

@media (max-width: 991px) {
    .inner-breadcrumb {
        padding: 14px 0;
    }
    .inner-banner-body {
        padding: 44px 0;
    }
    .inner-banner-eyebrow {
        font-size: 16px;
        margin-bottom: 12px;
    }
    .inner-banner-heading {
        font-size: 30px;
    }
    .page-nav {
        padding: 40px 0;
    }
    .page-nav-btn {
        padding: 18px 24px;
        gap: 16px;
    }
    .page-nav-icon {
        width: 46px;
        height: 46px;
    }
}

@media (max-width: 767px) {
    .inner-banner {
        margin-bottom: 30px;
    }
    .inner-banner-heading span {
        display: inline;
    }
    .inner-banner-bg .inner-banner-image {
        display: none;
    }
    .inner-banner-bg .inner-banner-image-mobile {
        display: block;
    }
    .inner-banner-bg::after {
        background: linear-gradient(180deg, rgba(12, 12, 14, 0.58) 0%, rgba(12, 12, 14, 0.32) 45%, rgba(12, 12, 14, 0.68) 100%);
    }
    .inner-banner-body {
        padding: 36px 0;
    }
    .inner-banner-eyebrow {
        font-size: 15px;
    }
    .inner-banner-heading {
        font-size: 26px;
    }
    .inner-breadcrumb-list {
        flex-wrap: wrap;
        gap: 4px 8px;
    }
    .inner-breadcrumb-list li {
        max-width: 100%;
        gap: 8px;
    }
    .inner-breadcrumb-list a,
    .inner-breadcrumb-list span {
        font-size: 12px;
    }
    .page-nav {
        padding: 34px 0;
    }
    .pg-nav-btn:hover {
        transform: none;
    }
}




/*==========================================================
  GUIDING PRINCIPLES
==========================================================*/
@media (max-width: 1400px) {
    .values-pride-list {
        --pride-letter-h: 98px;
    }
    .values-pride-letter {
        font-size: 50px;
    }
}

@media (max-width: 1200px) {
    /*the top edge must run unbroken across the whole band, so the columns
      cannot be separated by a gap*/
    .values-pride-list li + li {
        margin-left: 0;
    }
    .values-pride-list {
        /*46 + 24 + 16, matching the letter box below*/
        --pride-letter-h: 86px;
    }
    .values-pride-letter {
        font-size: 46px;
        padding: 24px 18px 16px;
    }
    .values-pride-label {
        padding: 14px 18px 0;
    }
}

@media (max-width: 991px) {
    .vision-purpose-values {
        padding: 10px 0 50px;
    }
    .vision-purpose-values-row {
        gap: 30px;
    }
    .vision-purpose-values-heading {
        font-size: 20px;
    }
    .values-pride-letter {
        font-size: 44px;
    }
}

@media (max-width: 767px) {
    .vision-purpose-values {
        padding: 10px 0 40px;
    }
    /*no room for two across, so they take a turn each*/
    .vision-purpose-values-pair {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}


/*==========================================================
  CONTAINER WIDTH TOKEN — follows Bootstrap's breakpoints
==========================================================*/
@media (max-width: 1399.98px) {
    :root {
        --container-w: 1140px;
    }
}
@media (max-width: 1199.98px) {
    :root {
        --container-w: 960px;
    }
}
@media (max-width: 991.98px) {
    :root {
        --container-w: 720px;
    }
}
@media (max-width: 767.98px) {
    :root {
        --container-w: 540px;
    }
}
@media (max-width: 575.98px) {
    :root {
        --container-w: 100vw;
    }
}


/*==========================================================
  A THOUSAND STEPS FORWARD — BANNER
==========================================================*/
@media (max-width: 1400px) {
    .tsf-banner-head {
        font-size: 44px;
    }
}

@media (max-width: 1200px) {
    .tsf-banner-head {
        font-size: 36px;
    }
    .tsf-banner-line-black {
        margin-left: 40px;
    }
    .movements-intro-list li {
        font-size: 19px;
    }
}

@media (max-width: 991px) {
    /*the copy no longer fits over the artwork, so it sits above it*/
    .tsf-banner {
        display: flex;
        flex-direction: column;
    }
    /*the copy stands above the plate here rather than on it, so the
      plate goes back to its own ratio instead of a screenful*/
    .tsf-banner-media {
        height: auto;
    }
    /*the artwork leads the markup, so the copy is pulled above it here*/
    .tsf-banner-body {
        position: static;
        order: -1;
        height: auto;
        padding: 0 0 26px;
    }
    .tsf-banner-crumb {
        padding-bottom: 14px;
    }
    .tsf-banner-eyebrow,
    .tsf-banner-head {
        margin-top: 0;
    }
    .tsf-banner-head {
        font-size: 34px;
        margin-bottom: 0;
    }
    .movements-intro {
        padding: 30px 0 50px;
    }
}

@media (max-width: 767px) {
    .tsf-banner-head {
        font-size: 28px;
    }
    .tsf-banner-line {
        padding: 5px 12px 7px;
    }
    .tsf-banner-line-black {
        margin-left: 24px;
    }
    /*the mobile crop is portrait, so the ratio changes with it*/
    .tsf-banner-media {
        aspect-ratio: 3 / 4;
    }
    .tsf-banner-img {
        display: none;
    }
    .tsf-banner-img-mbl {
        display: block;
    }
    .movements-intro-list li {
        font-size: 18px;
    }
}

@media (max-width: 420px) {
    .tsf-banner-head {
        font-size: 23px;
    }
    .tsf-banner-line-black {
        margin-left: 14px;
    }
}



@media (max-width: 767px) {
    .year-changed-gears-block {
        margin-bottom: 26px;
    }
    .year-changed-gears-image {
        margin-bottom: 20px;
    }
}


/*==========================================================
  HIGHLIGHTS FY 2025-26 — PERFORMANCE FIGURES
==========================================================*/
@media (max-width: 1200px) {
    .highlights-figures-item {
        padding: 26px 24px;
    }
    .highlights-figures-value {
        font-size: 36px;
    }
    .highlights-figures-value em {
        font-size: 22px;
    }
    .highlights-figures-value-name {
        font-size: 30px;
    }
}

@media (max-width: 991px) {
    .highlights-figures {
        padding: 10px 0 50px;
    }
    /*two across; the divider pattern follows the new row length*/
    .highlights-figures-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .highlights-figures-item:nth-child(3n + 1)::before {
        display: block;
    }
    .highlights-figures-item:nth-child(odd)::before {
        display: none;
    }
    .highlights-figures-item:nth-child(-n + 3)::after {
        display: block;
    }
    .highlights-figures-item:nth-child(-n + 2)::after {
        display: none;
    }
    .highlights-figures-grid-reach .highlights-figures-item:nth-child(-n + 2)::after {
        display: block;
    }
    /*third cell sits alone on the last row, so its rule spans both columns*/
    .highlights-figures-grid-reach .highlights-figures-item:nth-child(3) {
        grid-column: 1 / -1;
    }
    .highlights-figures-value {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    .highlights-figures {
        padding: 10px 0 40px;
    }
    /*single column, so only the horizontal rule survives*/
    .highlights-figures-grid {
        grid-template-columns: 1fr;
    }
    .highlights-figures-item::before {
        display: none;
    }
    .highlights-figures-item:nth-child(odd)::before,
    .highlights-figures-item:nth-child(3n + 1)::before {
        display: none;
    }
    .highlights-figures-item::after {
        display: block;
    }
    .highlights-figures-item:first-child::after {
        display: none;
    }
    .highlights-figures-grid-reach .highlights-figures-item:first-child::after {
        display: block;
    }
    .highlights-figures-item {
        padding: 24px 0;
    }
    .highlights-figures-value {
        font-size: 30px;
    }
}


/*==========================================================
  METRO BRANDS — COMPANY OVERVIEW
==========================================================*/
@media (max-width: 1200px) {
    .company-overview-lead {
        font-size: 22px;
    }
    .brand-portfolio-box {
        padding: 30px 30px 34px;
    }
    .brand-portfolio-list {
        gap: 24px 26px;
    }
    .product-categories-box {
        padding: 40px 30px;
    }
    .product-categories-icon {
        height: 60px;
    }
}

@media (max-width: 991px) {
    .company-overview {
        padding: 10px 0 40px;
    }
    .company-overview-lead {
        font-size: 20px;
    }
    .brand-portfolio,
    .product-categories {
        padding: 0 0 40px;
    }
    .brand-portfolio-mark {
        width: 70px;
    }
    .company-overview-artwork-figure {
        height: 180px;
        margin-bottom: -80px;
    }
    .brand-portfolio-list {
        gap: 22px 22px;
    }
    .brand-portfolio-list li {
        min-height: 62px;
    }
    .brand-portfolio-list img {
        max-height: 44px;
    }
    .product-categories-grid {
        --pc-gap: 24px;
        gap: 36px var(--pc-gap);
    }
    .product-categories-icon {
        height: 54px;
    }
}

@media (max-width: 767px) {
    .company-overview-lead {
        font-size: 18px;
    }
    .brand-portfolio-box {
        padding: 24px 20px 28px;
    }
    .brand-portfolio-heading {
        margin-bottom: 20px;
    }
    /*four across is too tight for the home-grown names on a phone;
      the licensed ones keep their three*/
    .brand-portfolio-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 16px;
    }
    .brand-portfolio-list-global {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .brand-portfolio-list li {
        min-height: 54px;
    }
    .brand-portfolio-list img {
        max-width: 86%;
        max-height: 36px;
    }
    /*the ribbon is very shallow at this width, so the figure is scaled to it
      and only dipped enough to stand on the crest*/
    .company-overview-artwork-figure {
        height: 110px;
        margin-bottom: -34px;
    }
    /*two across keeps the icons legible*/
    .product-categories-box {
        padding: 30px 20px;
    }
    .product-categories-grid {
        --pc-cols: 3;
        --pc-gap: 20px;
        gap: 30px var(--pc-gap);
    }
    .product-categories-name {
        font-size: 16px;
        margin-bottom: 14px;
    }
    .product-categories-icon {
        height: 48px;
    }
}

@media (max-width: 420px) {
    /*two across is kept even at the narrowest widths; a single column
      leaves the dark panel very tall with one icon per row*/
   
    .product-categories-icon {
        height: 42px;
    }
    .product-categories-name {
        font-size: 15px;
    }
}


/*==========================================================
  CHAIRMAN'S COMMUNIQUE
==========================================================*/
@media (max-width: 1200px) {
    .chairman-letter-row {
        gap: 40px;
    }
    .chairman-letter-media {
        flex: 0 0 400px;
        max-width: 400px;
    }
    .chairman-letter-quote p {
        font-size: 17px;
    }
}

@media (max-width: 991px) {
    /*portrait leads, copy follows; nothing pins once stacked*/
    .chairman-letter {
        padding: 10px 0 50px;
    }
    .chairman-letter-row {
        flex-direction: column;
        gap: 30px;
    }
    .chairman-letter-content,
    .chairman-letter-media {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
    }
    .chairman-letter-media {
        order: -1;
    }
    .chairman-letter-portrait {
        position: static;
    }
    /*keep the artwork close to the photo once stacked*/
    .chairman-letter-portrait {
        max-width: 460px;
    }
    /*the fixed crop is only needed while the column is narrow*/
    .chairman-letter-portrait-image {
        height: auto;
    }
}

@media (max-width: 767px) {
    .chairman-letter {
        padding: 10px 0 40px;
    }
    /*the backdrop's top strip reads as a stray rule at this size, so the
      photo sits flush and the artwork stays behind it*/
    .chairman-letter-portrait-image {
        /* padding: 0; */
    }
    .chairman-letter-quote {
        padding: 22px 18px 26px;
    }
    .chairman-letter-quote p {
        font-size: 16px;
    }
}


/*==========================================================
  CORE COMPETENCIES
==========================================================*/
@media (max-width: 1200px) {
    .competency-heading {
        font-size: 22px;
    }
    .stack-chart-pair {
        --bs-gutter-x: 34px;
    }
    .portfolio-split {
        --bs-gutter-x: 30px;
    }
    .category-row {
        gap: 30px 16px;
    }
    .category-row-icon {
        height: 66px;
    }
    .omni-channel {
        grid-template-columns: 1fr 380px;
        gap: 36px;
    }
    .omni-channel-mark {
        height: 210px;
    }
    .reason-grid-item {
        padding: 20px 18px;
    }
    .competency-stat-value {
        font-size: 38px;
    }
    .competency-media {
        grid-template-columns: 1fr 330px;
        gap: 36px;
    }
    .competency-artwork-image {
        height: 150px;
    }
}

@media (max-width: 991px) {
    .competency-intro {
        padding: 10px 0 30px;
    }
    .competency {
        padding: 0 0 40px;
    }
    .competency-heading {
        font-size: 20px;
    }
    .competency-subheading {
        margin-top: 30px;
        margin-bottom: 18px;
    }
    /*both pairs stack once the columns get too narrow — the grid does
      that on its own now, so all this sets is the room between them*/
    .stack-chart-pair,
    .portfolio-split {
        row-gap: 10px;
    }
    .category-row {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 30px 18px;
    }
    .category-row-icon {
        height: 62px;
    }
    .stack-chart-bar {
        max-width: 56px;
    }
    .stack-chart-bar {
        height: 200px;
    }
    .stack-chart-plot {
        gap: 20px;
    }
    .stack-chart-total {
        font-size: 18px;
    }
    /*two across keeps the cards from squeezing*/
    .reason-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .competency-stat-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .competency-stat-value {
        font-size: 34px;
    }
    /*copy first, artwork below it*/
    .competency-media {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .competency-media-image {
        height: auto;
        max-height: 460px;
    }
    .competency-heading-spaced {
        margin-top: 36px;
    }
    .competency-artwork-image {
        height: 130px;
    }
}

@media (max-width: 767px) {
    /*copy first, diagram below once stacked*/
    .omni-channel {
        grid-template-columns: 1fr;
        gap: 26px;
    }
    .omni-channel-figure {
        max-width: 380px;
    }
    .omni-channel-mark {
        height: 150px;
    }
    .segment-split {
        max-width: 90%;
    }
    /*the container is full width here with a 12px gutter, so a row
      pulling 17px of negative margin either side hangs off both edges
      and the page slides sideways. the columns are stacked at this
      width, so the gutter goes back to the bootstrap default, whose
      half is exactly the padding it cancels*/
    .stack-chart-pair,
    .portfolio-split {
        --bs-gutter-x: 24px;
    }
    .category-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 26px 14px;
    }
    .category-row-icon {
        height: 54px;
    }
    .stack-chart-bar {
        max-width: 44px;
    }
    /*the five bars scroll sideways rather than crush*/
    .stack-chart-plot {
        gap: 14px;
    }
    .stack-chart-bar {
        height: 170px;
    }
    .stack-chart-part,
    .stack-chart-year {
        font-size: 12px;
    }
    .stack-chart-total {
        font-size: 16px;
    }
    .stack-chart-key {
        gap: 8px 18px;
    }
    .competency-stat-value {
        font-size: 30px;
    }
    /*too narrow to wrap; the artwork sits on its own line*/
    .competency-artwork {
        float: none;
        margin: 0 0 18px;
    }
    .competency-artwork-image {
        height: 105px;
    }
}

@media (max-width: 575px) {
    .category-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .category-row-icon {
        height: 48px;
    }
    /* .reason-grid {
        grid-template-columns: 1fr;
    } */
    .stack-chart-plot {
        gap: 10px;
    }
    .stack-chart-part {
        font-size: 11px;
    }
}


/*==========================================================
  Q&A WITH THE MANAGEMENT
==========================================================*/
@media (max-width: 1200px) {
    .qna-lead-row {
        grid-template-columns: 240px 1fr;
        gap: 36px;
    }
    .qna-answer-media {
        width: 250px;
    }
    .qna-q-text {
        font-size: 18px;
    }
    .qna-q-mark img {
        height: 46px;
    }
}

@media (max-width: 991px) {
    .qna-intro {
        padding: 0px 0 30px;
    }
    .qna-lead,
    .qna {
        padding: 0 0 40px;
    }
    /*mark above the standfirst, portrait above the copy*/
    .qna-lead-row {
        grid-template-columns: 1fr;
        gap: 26px;
    }
    .qna-lead-mark {
        max-width: 240px;
    }
    .qna-answer {
        gap: 16px;
    }
    .qna-answer-media {
        width: 230px;
    }
    .qna-answer-mark {
        height: 46px;
    }
}

@media (max-width: 767px) {
    /*the row tightens up and the mark columns narrow with it*/
    .qna-q {
        gap: 14px;
        padding: 20px 0;
    }
    .qna-q-mark {
        flex: 0 0 18px;
    }
    .qna-q-mark img {
        height: 38px;
    }
    .qna-q-text {
        font-size: 17px;
    }
    .qna-q-sign {
        width: 30px;
        height: 30px;
    }
    .qna-answer {
        gap: 14px;
    }
    .qna-answer-mark {
        flex: 0 0 18px;
        width: 18px;
        height: 38px;
    }
    .qna-lead-mark {
        max-width: 200px;
    }
    /*the portrait stands clear of the copy rather than squeezing it*/
    .qna-answer-media {
        float: none;
        width: 100%;
        max-width: 300px;
        margin: 0 0 20px;
    }
    /*the closing landscape shot runs full width, below the copy*/
    .qna-answer-reverse {
        flex-wrap: wrap;
    }
    .qna-answer-reverse .qna-answer-media {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        margin: 20px 0 0;
    }
    .qna-lead-rule {
        height: 8px;
        margin-top: 22px;
    }
}


/*==========================================================
  JOURNEY SINCE INCEPTION
==========================================================*/
@media (max-width: 1400px) {
    .timeline-track {
        padding: 0 max(15px, calc((100vw - 1140px) / 2 + 15px));
    }
}

@media (max-width: 1200px) {
    .timeline-track {
        padding: 0 max(15px, calc((100vw - 960px) / 2 + 15px));
        gap: 70px;
    }
    .timeline-stage {
        gap: 32px;
        padding-left: 34px;
    }
    .timeline-item {
        width: 240px;
    }
    .timeline-year {
        font-size: 38px;
    }
    .timeline-badge {
        width: 170px;
        height: 170px;
    }
    .timeline-badge b {
        font-size: 34px;
    }
    .timeline-figures-image {
        height: 200px;
    }
}

@media (max-width: 991px) {
    .timeline-track {
        padding: 0 max(15px, calc((100vw - 720px) / 2 + 15px));
    }
    .timeline-item {
        width: 220px;
    }
    .timeline-year {
        font-size: 34px;
        margin-bottom: 14px;
    }
    .timeline-figures-image {
        height: 175px;
    }
}

/*----------Mobile: the timeline turns vertical----------*/
@media (max-width: 767px) {
    .timeline-image-pair{
        max-height: max-content;
    }
    .timeline {
        padding: 0px 0 0px;
        margin-bottom: 0px;
    }
    /*sideways scrolling is replaced by ordinary page scroll*/
    .timeline-head,
    .timeline-ruler,
    .timeline-progress {
        display: none;
    }
    .timeline-scroll {
        overflow: visible;
        padding-bottom: 0;
        cursor: auto;
    }
    .timeline-track {
        display: block;
        width: auto;
        padding: 0 15px;
    }
    .timeline-stage {
        display: block;
        padding-left: 22px;
        margin-bottom: 44px;
    }
    .timeline-stage:last-child {
        margin-bottom: 0;
    }
    /*one continuous red rule down the left of every stage*/
    .timeline-rule {
        width: 4px;
        min-height: 0;
    }
    .timeline-item {
        width: 100%;
        max-width: 420px;
        margin-bottom: 30px;
    }
    .timeline-item:last-child {
        margin-bottom: 0;
    }
    .timeline-year {
        font-size: 32px;
    }
    .timeline-figures {
        margin-top: 22px;
    }
    .timeline-figures-image {
        height: 160px;
    }
    .timeline-badge {
        width: 150px;
        height: 150px;
    }
    .timeline-badge b {
        font-size: 30px;
    }

    .nav-layout {
        grid-template-columns: 1fr;
    }
    .nav-panel.is-wide ul {
        columns: 1;
    }
    .nav-side {
        padding: 32px 0 26px;
        border-right: 0;
        border-bottom: 1px solid var(--line-dk);
    }
    .nav-sections {
        display: block;
    }
    .nav-panels {
        padding: 26px 0 36px;
    }
    .nav-tool {
        min-width: 0;
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .nav-sec,
    .nav-panel ul li a {
        font-size: 15px;
    }
    .nav-tools {
        flex-direction: column;
        gap: 12px;
        padding: 26px 0 30px;
    }
    .nav-tool {
        width: 100%;
        padding: 15px 20px;
        font-size: 14px;
    }
}

/*==========================================================
  GUIDING PRINCIPLES — banner headline and PRIDE band
==========================================================*/
@media (max-width: 1200px) {
    .inner-banner-light .inner-banner-heading,
    .guiding-principles-banner .inner-banner-heading {
        font-size: 58px;
    }
    .values-pride-list {
        --pride-letter-h: 98px;
    }
    .values-pride-letter {
        font-size: 58px;
        padding: 22px 18px 18px;
    }
    .values-pride-label {
        padding: 0 18px;
    }
}

@media (max-width: 991px) {
    .inner-banner-light .inner-banner-heading,
    .guiding-principles-banner .inner-banner-heading {
        font-size: 44px;
    }
    .values-pride-list {
        --pride-letter-h: 78px;
    }
    .values-pride-letter {
        font-size: 46px;
        padding: 18px 14px 14px;
    }
    .values-pride-label {
        min-height: 58px;
        padding: 0 14px;
    }
}

@media (max-width: 767px) {
    .inner-banner-light .inner-banner-heading,
    .guiding-principles-banner .inner-banner-heading {
        font-size: 34px;
    }
    /*The band turns on its side: the bracket stands upright around the column
      of letters, and the divided edge that ran along the bottom on desktop now
      runs down the right of the letters, breaking between the sentences.*/
    .values-pride-list {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        margin: 24px 0 0;
        border-top: 0;
    }
    /*The bracket closes around the letter column only, so the caps stop at the
      right wall rather than running on under the sentences.*/
    .values-pride-list::before,
    .values-pride-list::after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        /*the cap spans the letter column and stops at the divided right wall*/
        width: 77px;
        height: 5px;
        background: var(--ink);
        top: auto;
        bottom: auto;
    }
    .values-pride-list::before {
        top: 0;
    }
    .values-pride-list::after {
        bottom: 0;
    }
    .values-pride-list li,
    .values-pride-list li + li {
        flex: 0 0 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        border-top: 0;
        /*the horizontal gap between columns has no meaning once stacked*/
        margin-left: 0;
        /*the unbroken left wall runs down every row, meeting both caps*/
        border-left: 5px solid var(--ink);
    }
    /*the breathing room sits inside the walls, so they meet the caps unbroken*/
    .values-pride-list li:first-child {
        padding-top: 22px;
    }
    .values-pride-list li:last-child {
        padding-bottom: 22px;
    }
    /*the letter keeps the left column, with the divided right wall alongside it*/
    .values-pride-letter {
        position: relative;
        flex: 0 0 auto;
        width: 72px;
        font-size: 40px;
        line-height: 1;
        text-align: center;
        padding: 8px 0;
    }
    /*The right wall is divided exactly as the bottom edge is on desktop: the
      break sits AT each sentence, so a segment starts level with its own label
      and runs down to just above the next one.*/
    .values-pride-letter::after {
        content: "";
        position: absolute;
        /*the sentence is centred on the row, so the break starts at mid-row*/
        top: 50%;
        bottom: -50%;
        /*clear of this label, and stopping clear of the next*/
        margin-top: 16px;
        margin-bottom: 16px;
        right: 0;
        width: 5px;
        background: var(--ink);
    }
    /*the first row carries a second segment, running from the top cap down to
      its own label, so the corner is closed*/
    .values-pride-list li:first-child .values-pride-letter::before {
        content: "";
        position: absolute;
        /*the row is padded above, so reach back up through it to the cap*/
        top: -22px;
        bottom: 50%;
        margin-bottom: 16px;
        right: 0;
        width: 5px;
        background: var(--ink);
    }
    /*the last segment runs down to meet the bottom cap, closing that corner*/
    .values-pride-list li:last-child .values-pride-letter::after {
        /*likewise reach down through the row's lower padding to the cap*/
        bottom: -22px;
        margin-bottom: 0;
    }
    .values-pride-label {
        flex: 1 1 auto;
        /*a flex item will not shrink past its own text without this, so
          the longer values ran off the side of the screen instead of
          wrapping beside their letter*/
        min-width: 0;
        align-items: center;
        min-height: 0;
        padding: 0 0 0 14px;
        font-size: 15px;
        line-height: 20px;
    }
    /*no horizontal rule to mask once the band is upright*/
    .values-pride-label::before {
        display: none;
    }
    .values-pride-label span {
        background: none;

        padding-right: 0;
        margin-left: 0;
        text-align: left;
        padding: 0;
        box-shadow: none;
    }
}

/*==========================================================
  STORE FORMATS RESPONSIVE
==========================================================*/
@media (max-width: 1200px) {
    .stf-tab {
        padding: 11px 20px;
        font-size: 13px;
    }
    .stf-stats-col {
        padding: 16px 18px;
    }
}
/*----------A Thousand Steps Forward----------*/
@media (max-width: 1400px) {
    .steps-head {
        font-size: 44px;
    }
    .steps-img {
        width: 400px;
        height: 490px;
    }
}

@media (max-width: 1200px) {
    .steps-head {
        font-size: 37px;
    }
    .steps-text {
        max-width: 58%;
    }
    .steps-img {
        width: 340px;
        height: 420px;
    }
}

@media (max-width: 991px) {
    .stf-tabs {
        padding: 12px 0;
    }
    .stf-tabs-row {
        gap: 8px;
    }
    .stf-tab {
        padding: 10px 16px;
        font-size: 12px;
    }
    .stf-item-img {
        margin-top: 24px;
    }
    .stf-feature-item {
        flex: auto;
        padding: 10px 20px;
    }
}

@media (max-width: 767px) {
    .stf-tabs-toggle {
        display: flex;
    }
    .stf-tabs-row {
        position: absolute;
        left: var(--bs-gutter-x, 0.75rem);
        right: var(--bs-gutter-x, 0.75rem);
        top: 100%;
        z-index: 5;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        margin-top: 6px;
        background: var(--white);
        border: 1px solid var(--brand);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease), transform 0.35s var(--ease);
    }
    .stf-tabs.open .stf-tabs-row {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .stf-tab {
        flex: 0 0 auto;
        justify-content: flex-start;
        border: 0;
        padding: 13px 18px;
    }
    .stf-tab + .stf-tab {
        border-top: 1px solid var(--line);
    }
    .stf-stats {
        grid-template-columns: 1fr;
        padding: 22px 0;
    }
    .stf-stats-col + .stf-stats-col::before {
        display: none;
    }
    .stf-stats-col + .stf-stats-col {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 6px solid var(--brand);
    }
    .stf-feature {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }
    .stf-feature-item + .stf-feature-item::before {
        left: 30px;
        right: 30px;
        top: -12px;
        bottom: auto;
        width: auto;
        height: 5px;
    }
    .stf-statement {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    .stf-statement-box span {
        max-width: 100%;
    }
    .stf-statement-arrow svg {
        width: 26px;
        height: 70px;
        transform: rotate(90deg);
    }
}

/*==========================================================
  BUSINESS RESPONSIBILITY RESPONSIVE
==========================================================*/
@media (max-width: 1200px) {
    .br-head {
        font-size: 38px;
    }
}

@media (max-width: 991px) {
    .br-head {
        font-size: 34px;
    }
    .br-item-img {
        margin-bottom: 24px;
    }
    /*the columns stack here, so there is no copy alongside to match and
      the frame takes the height of the picture in it*/
    .br-item-img-stack,
    .br-item-img-stack.owl-carousel,
    .br-item-img-stack .owl-stage-outer,
    .br-item-img-stack .owl-stage,
    .br-item-img-stack .owl-item {
        height: auto;
    }
    .br-item-img-stack img {
        height: auto;
    }
    .br-stat-num {
        font-size: 26px;
    }
    .br-stats-wide {
        gap: 30px;
        margin-top: 26px;
    }
    .br-sdg-row img {
        width: 56px;
    }
}

@media (max-width: 767px) {
    .br-inline {
        gap: 24px;
    }
    /*too tight for two abreast on a phone*/
    .br-stats-row {
        flex-direction: column;
        gap: 24px;
    }
    .br-head {
        font-size: 28px;
    }
    .br-title {
        font-size: 18px;
    }
    .br-stat-num {
        font-size: 24px;
    }
    .br-stats-wide {
        gap: 24px;
    }
    .br-sdg-row img {
        width: 50px;
    }
    .br-stats{
        margin-bottom: 0;
        margin-top: 20px;
    }
}

/*==========================================================
  E-COMMERCE OPERATIONS RESPONSIVE
==========================================================*/
@media (max-width: 991px) {
    .eco-col {
        margin-bottom: 24px;
    }
    /*the charts centre once the columns stack*/
    .eco-chart-sm,
    .eco-chart-pie {
        margin-left: auto;
        margin-right: auto;
    }
    .eco-channel {
        padding-top: 56px;
        margin-bottom: 26px;
    }
    .eco-channel-head {
        font-size: 24px;
    }
    .eco-channel-img {
        max-width: 380px;
        margin: 0 auto 26px;
    }
}

@media (max-width: 767px) {
    .eco-head {
        font-size: 18px;
    }
    .eco-stats-wide {
        gap: 24px;
    }
    .eco-chart-sm,
    .eco-chart-pie {
        max-width: 100%;
    }
    .eco-channel {
        padding-top: 52px;
    }
    /*both markers sit left once there is no illustration between them*/
    .eco-channel-end::before {
        left: 38px;
        right: 0;
    }
    .eco-channel-end .eco-channel-num {
        left: 0;
        right: auto;
    }
    .eco-channel-head {
        font-size: 21px;
    }
}

/*==========================================================
  RETAIL NETWORK RESPONSIVE
==========================================================*/
@media (max-width: 991px) {
    .rn-col {
        margin-bottom: 24px;
    }
    /*three across once the map drops below*/
    .rn-shots {
        flex-direction: row;
        gap: 20px;
        height: auto;
        max-width: 100%;
        margin-left: 0;
        margin-bottom: 24px;
        padding-bottom: 0;
    }
    .rn-shot {
        flex: 1 1 0;
        min-width: 0;
    }
    .rn-count-logo {
        width: 84px;
    }
    /*the row stacks, the picture first. the section still has to fill
      the frame it arrives in, or the film would show under it during
      the hand-over*/
    .steps-sticky {
        padding: calc(var(--hdr-h) + 20px) 0 50px;
    }
    .steps-inner {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 24px;
    }
    .steps-text {
        max-width: 100%;
    }
    .steps-img {
        width: 100%;
        max-width: 450px;
        /*the artwork is 450x550, so the frame keeps that ratio and
          nothing gets cropped away*/
        aspect-ratio: 450 / 550;
        height: auto;
        margin: 0 auto;
    }
    .steps-head {
        font-size: 34px;
    }
}

@media (max-width: 767px) {
    .rn-head {
        font-size: 18px;
    }
    .rn-head-ink {
        font-size: 17px;
    }
    .rn-panel {
        padding: 40px 18px 6px;
    }
    .rn-panel-head {
        right: 18px;
        font-size: 16px;
    }
    /*one cell to a line here, so a 76px box held the marks far smaller
      than they needed to be. the logo is given its own size and the
      figure follows one gap behind it*/
    .rn-count {
        gap: 40px;
        margin-bottom: 24px;
    }
    .rn-count-logo {
        /*the same box on every row, wide enough for the widest mark, so
          the figures all start on one line down the column*/
        width: 120px;
        flex: 0 0 auto;
        min-width: 0;
    }
    .rn-count-logo img {
        /*the height every mark reaches for, the width it may not pass*/
        height: 90px;
        max-width: 120px;
    }
    .rn-count-num {
        width: 76px;
        font-size: 26px;
    }
    /*the whole block has to sit inside the frame it arrives in, or the
      button is under the fold the moment the film hands over*/
    .steps-sticky {
        padding: calc(var(--hdr-h) + 12px) 0 30px;
    }
    .steps-inner {
        gap: 18px;
    }
    .steps-h2 {
        margin-left: calc(12px + 2.61em);
    }
    .steps-head {
        font-size: 27px;
    }
    .steps-head span {
        padding: 3px 12px;
    }
    .steps-img {
        max-width: 250px;
    }
}

@media (max-width: 420px) {
    /*too narrow for three across*/
    .rn-shots {
        flex-direction: column;
    }
}


/*==========================================================
  TESTIMONIALS RESPONSIVE
==========================================================*/
@media (max-width: 991px) {
    .ts-block .row {
        row-gap: 34px;
    }
    .ts-card {
        padding-bottom: 26px;
    }
    .ts-quote {
        width: 180px;
    }
    .ts-photo {
        width: 190px;
    }
}

@media (max-width: 767px) {
    .ts-quote {
        width: 42%;
    }
    /*leaves the same breathing room on the right as the mark has on the left*/
    .ts-photo {
        width: 50%;
    }
    .ts-plate {
        padding: 10px 14px;
    }
    .ts-name {
        font-size: 16px;
    }
}

/*==========================================================
  FINANCIAL PERFORMANCE RESPONSIVE
==========================================================*/
@media (max-width: 1200px) {
    .fp-table th,
    .fp-table td {
        padding: 6px 10px;
    }
    .fp-table td:first-child {
        min-width: 200px;
    }
}

@media (max-width: 767px) {
    .fp-graph-head {
        font-size: 17px;
        /*one per row here, so a title needs no reserved second line*/
        min-height: 0;
    }
   
    .fp-table td:first-child {
        min-width: 170px;
    }
}

/*==========================================================
  BOARD OF DIRECTORS RESPONSIVE
==========================================================*/
@media (max-width: 991px) {
    .bod-block .row {
        row-gap: 26px;
    }
    .bod-card {
        padding: 12px 12px 18px;
    }
}

@media (max-width: 767px) {
    .rn-donut{
        /* margin-bottom: 20px; */
        max-width: 270px;
        margin: 0 auto 20px;
    }
    /*the three splits stand one under the next here rather than side by
      side, so a mark between them says where one ends and the next
      begins. a short bar centred over each, in the heading red and
      standing clear of both edges, rather than a rule drawn wall to
      wall — it reads as punctuation instead of a table border*/
    .rn-donut-row > [class*="col-"] + [class*="col-"] {
        position: relative;
        padding-top: 34px;
    }
    .rn-donut-row > [class*="col-"] + [class*="col-"]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 75%;
        height: 2px;
        transform: translateX(-50%);
        background: var(--brand);
    }
}

/*==========================================================
  BANNER + PREV/NEXT RESPONSIVE, EIGHT PAGE CLASS NAMES
==========================================================*/
@media (max-width: 1200px) {
    .inr-banner-body {
        padding: 50px 0;
    }
}

@media (max-width: 991px) {
    .inr-crumb {
        padding: 14px 0;
    }
    .inr-banner-body {
        padding: 44px 0;
    }
    .inr-banner-eyebrow {
        font-size: 16px;
        margin-bottom: 10px;
    }
    .inr-banner-head {
        font-size: 30px;
    }
    .pg-nav {
        padding: 40px 0;
    }
    .pg-nav-icon {
        width: 46px;
        height: 46px;
    }
}

@media (max-width: 767px) {
    .inr-crumb,.inner-breadcrumb,.tsf-banner-crumb{
        display: none ;
    }
    .inr-banner {
        margin-bottom: 15px;
    }
    .inr-banner-head span {
        display: inline;
    }
    .inr-banner-bg .inr-bg-img {
        display: none;
    }
    .inr-banner-bg .inr-bg-img-mbl {
        display: block;
    }
    /* .inr-banner-bg::after {
        background: linear-gradient(180deg, rgba(12, 12, 14, 0.72) 0%, rgba(12, 12, 14, 0.55) 45%, rgba(12, 12, 14, 0.82) 100%);
    } */
    .inr-banner-bg::after {
        background: linear-gradient(180deg, rgba(12, 12, 14, 0.58) 0%, rgba(12, 12, 14, 0.32) 45%, rgba(12, 12, 14, 0.68) 100%);
    }
    .inr-banner-body {
        padding: 36px 0;
    }
    .inr-banner-eyebrow {
        font-size: 15px;
    }
    .inr-banner-head {
        font-size: 26px;
    }
    .inr-crumb-list {
        flex-wrap: wrap;
        gap: 4px 8px;
    }
    .inr-crumb-list li {
        max-width: 100%;
        gap: 8px;
    }
    .inr-crumb-list a,
    .inr-crumb-list span {
        font-size: 12px;
    }
    .pg-nav {
        padding: 34px 0;
    }
    .pg-nav-btn:hover {
        transform: none;
    }

    .steps-head {
        font-size: 23px;
        line-height: 30px;
    }
    .steps-img {
        max-width: 210px;
    }
}

/*----------Guiding Principles----------*/


@media (max-width: 991px) {
    /*no pinning below the desktop breakpoint*/
    .gp {
        height: auto;
    }
    .gp-sticky {
        position: static;
        height: auto;
        overflow: visible;
    }
    .gp-media {
        position: static;
        height: 60vh;
        transform: none;
    }
    .gp-stage {
        height: auto;
        padding: 40px 0 30px;
    }
    /*the pinned sequence does not run here, so whatever it would have
      revealed has to start out visible*/
    .gp-tag,
    .gp-head,
    .gp-vp-col,
    .pride {
        opacity: 1;
        transform: none;
    }
    /*the play class is only added by that same sequence*/
    .gp .values-pride-letter {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
    }
    .gp .values-pride-label {
        opacity: 1;
    }
    .gp-vp {
        gap: 30px;
    }

    /*the row becomes a list, the connector is dropped*/
    .pride {
        margin-top: 40px;
    }
}

@media (max-width: 767px) {
    .gp-vp {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .gp-head {
        font-size: 26px;
        margin-bottom: 22px;
    }
    .gp-media {
        /*the source is 16:9. a fixed height had object-fit crop a
          different slice of it on every phone, so the frame takes
          its height from the picture and nothing is lost*/
        height: auto;
    }
    .gp-media picture {
        height: auto;
    }
    .gp-media img {
        height: auto;
        object-fit: contain;
    }
}

/*----------Highlights FY 2025-26----------*/
@media (max-width: 1400px) {
    .hl-slider {
        max-width: 620px;
    }
}

@media (max-width: 1200px) {
    .hl-sub {
        font-size: 30px;
    }
    .hl-num {
        font-size: 32px;
    }
    .hl-num em {
        font-size: 19px;
    }
    .hl-slider {
        max-width: 560px;
    }
    .hl-grid {
        column-gap: 26px;
    }
}

@media (max-width: 991px) {
    /*the picture sits above and the slider takes the ground below it*/
    .hl-sticky {
        display: block;
        min-height: 0;
        overflow: visible;
    }
    .hl-media {
        position: static;
        height: 56vh;
    }
    .hl-media::after {
        display: none;
    }
    .hl-inner {
        padding-top: 0;
        background: var(--dark);
    }
    .hl-inner > .container {
        padding-top: 46px;
        padding-bottom: 46px;
    }
    .hl-slider {
        max-width: 100%;
    }
    .hl-item {
        padding: 16px 0;
    }
}

@media (max-width: 767px) {
    .hl-media {
        height: 44vh;
    }
    .hl-sub {
        font-size: 22px;
    }
    /*the short figures stay paired; the wordy ones keep the full width
      through .hl-wide, as they do on the desktop grid*/
    .hl-grid {
        column-gap: 18px;
    }
    .hl-num {
        font-size: 28px;
    }
    .hl-lbl {
        font-size: 15px;
    }
}

/*----------Chairman's Communique----------*/
@media (max-width: 1200px) {
    .cm-row {
        grid-template-columns: 1fr 360px;
        gap: 44px;
    }
    .cm-head {
        font-size: 32px;
    }
    .cm-quote span {
        font-size: 20px;
    }
    .cm-img img {
        height: 410px;
    }
}

@media (max-width: 991px) {
    .cm {
        padding: 70px 0;
    }
    .cm-row {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .cm-bg::after {
        background: rgba(30, 32, 36, 0.86);
    }
    .cm-img {
        max-width: 440px;
    }
    .cm-img img {
        height: 380px;
    }
}

@media (max-width: 767px) {
    .cm {
        padding: 50px 0 ;
    }
    .cm-head {
        font-size: 26px;
        margin-bottom: 22px;
    }
    .cm-quote span {
        font-size: 17px;
    }
    /*the picture is read first here and the whole of the copy follows
      it. cm-text stays a block of its own, so the chip inside it is
      still only as wide as its own words*/
    .cm-row {
        display: flex;
        flex-direction: column;
        gap: 26px;
    }
    .cm-img {
        order: -1;
    }
    .mblnonefotbl{
    display: none;
    }
}

/*----------Company overview----------*/
@media (max-width: 1400px) {
    .ab-logo {
        width: 148px;
    }
}

@media (max-width: 1200px) {
    .ab-head {
        font-size: 32px;
    }
    .ab-lead {
        font-size: 19px;
    }
    .ab-logo {
        width: 132px;
        height: 66px;
    }
    .ab-cats {
        gap: 16px;
    }
    .ab-cat {
        padding: 14px 16px;
        gap: 12px;
    }
}

@media (max-width: 991px) {
    /*no pinning: the three parts simply stack*/
    .ab {
        height: auto;
    }
    .ab-sticky {
        height: auto;
        position: static;
        overflow: visible;
    }
    .ab-sticky > .container {
        height: auto;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .ab-strip {
        position: static;
        transform: none;
        opacity: 1;
    }
    .ab-rule {
        transform: none;
    }
    .ab-stage {
        position: static;
        margin-top: 20px;
    }
    .ab-slide {
        position: static;
        transform: none;
        opacity: 1;
        margin-bottom: 0px;
    }
    .ab-bicon,
    .ab-gtitle,
    .ab-logo,
    .ab-cat,
    .ab-note {
        opacity: 1;
        transform: none;
    }
    .ab-progress,
    .ab-hint {
        display: none;
    }
    .ab-cats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .ab-head {
        font-size: 26px;
    }
    .ab-lead {
        font-size: 17px;
    }
    /*the wave belongs to the intro above. behind the brand marks it
      only makes them harder to read, so the stage lays its own white
      over it and the film stops at the copy*/
    .ab-stage {
        /*the gutters are pulled back so the white reaches the edges of
          the screen and no strip of film is left showing beside it*/
        margin: 20px -12px 0;
        padding: 20px 14px;
        background: var(--white);
    }
    .ab-logo {
        width: calc(50% - 7px);
    }
    .ab-cats {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}


/*----------Journey since inception----------*/
@media (max-width: 1400px) {
}

@media (max-width: 1200px) {
    .jr-title {
        font-size: 32px;
    }
    .jr-track {
        gap: 46px;
    }
    .jr-item {
        width: 360px;
    }
    .jr-img-ph,
    .jr-body img {
        height: 165px;
    }
}

@media (max-width: 991px) {
    /*no pinning: the years stack down the page*/
    .jr {
        height: auto;
    }
    .jr-sticky {
        position: static;
        height: auto;
        overflow: visible;
        padding: 40px 0 30px;
    }
    .jr-ruler {
        margin-bottom: 30px;
    }
    .jr-viewport > .jr-track,
    .jr-track {
        display: block;
        padding-left: 0;
        transform: none;
    }
    .jr-viewport {
        padding: 0 12px;
    }
    .jr-item {
        width: 100%;
        margin-bottom: 34px;
    }
    .jr-img-ph,
    .jr-body img {
        height: auto;
    }
}

@media (max-width: 767px) {
    .jr-title {
        font-size: 26px;
    }
    .jr-date {
        font-size: 15px;
    }
    .jr-item {
        gap: 14px;
    }
    /*the closing entry carries a disc where the others carry a plain
      year, and beside the picture it left barely half a column. the
      disc and its rule keep the first line to themselves, the way the
      other entries pair a year with one, and the entry itself drops to
      the full width underneath*/
    .jr-item-end {
        flex-wrap: wrap;
        align-items: stretch;
        gap: 12px;
    }
    /*it is not standing beside the picture any more, so it needs less
      room than the 140px it holds on a wide screen*/
    .jr-item-end .jr-disc {
        width: 104px;
        height: 104px;
        padding: 10px;
    }
    .jr-item-end .jr-disc b {
        font-size: 22px;
    }
    .jr-item-end .jr-disc i {
        font-size: 12px;
    }
    /*the rule stands upright next to the disc, drawn to its height,
      with the bead at the top as every other entry carries it*/
    .jr-item-end .jr-rule {
        width: 2px;
        height: auto;
        align-self: stretch;
    }
    /*and the entry takes the line under them both*/
    .jr-item-end .jr-body {
        flex: 0 0 100%;
        width: 100%;
    }
    .mt-cta{
        margin-top: 20px;
    }
}


/*----------Core competencies----------*/
@media (max-width: 1200px) {
    .cc-title {
        font-size: 32px;
    }
    .cc-tab {
        font-size: 15px;
        padding: 12px 14px;
        min-height: 58px;
    }
    .cc-card-in {
        padding: 15px;
    }
    .cc-card--lead .cc-card-in {
        padding-bottom: 15px;
    }
    .cc-ph {
        height: 220px;
    }
    .cc-ph--pie {
        height: 200px;
    }
}

@media (max-width: 991px) {
    .cc {
        padding: 40px 0 30px;
    }
    .cc-tabs {
        flex-direction: column;
        gap: 10px;
    }
    .cc-tab {
        min-height: 0;
        padding: 14px 20px;
    }
    .cc-3 {
        grid-column: span 6;
    }
    .cc-card:only-child .cc-reasons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .cc-title {
        font-size: 26px;
    }
    .cc-card-in {
        padding: 24px 22px;
    }
    /*the tightening above is for the wider screens. here the panel
      already reads in one column, so the old room is kept*/
    .cc-ico {
        width: 70px;
        height: 70px;
    }
    .cc-cat {
        gap: 10px;
    }
    .cc-cta {
        margin-top: 40px;
    }
    /*nine categories, three to a row, the same block a wide screen
      shows. the icon and the word are what give, not the count*/
    .cc-cats {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px 8px;
    }
    .cc-cats .cc-ico {
        width: 56px;
        height: 56px;
    }
    .cc-cats .cc-cat b {
        font-size: 12px;
        line-height: 1.25;
    }
    .cc-reasons,
    .cc-logos,
    .cc-card:only-child .cc-reasons {
        grid-template-columns: 1fr;
    }
    .cc-ph,
    .cc-ph--pie {
        height: 180px;
    }
}

/*----------Store formats----------*/
@media (max-width: 1200px) {
    .sf-title {
        font-size: 32px;
    }
    .sf-item {
        width: 260px;
    }
    .sf-media {
        height: 300px;
    }
}

@media (max-width: 991px) {
    /*no pinning: the pictures become a plain row that scrolls sideways*/
    .sf {
        height: auto;
    }
    .sf-runway {
        height: auto;
    }
    .sf-sticky {
        position: static;
        height: auto;
        overflow: visible;
    }
    .sf-stage {
        position: static;
        overflow-x: auto;
        padding: 0 0 10px;
    }
    .sf-track {
        position: static;
        display: flex;
        gap: 20px;
        height: auto;
        padding: 0 12px;
    }
    .sf-item {
        position: static;
        flex: 0 0 auto;
        transform: none;
    }
    /*no hover on touch, so the name stays put*/
    .sf-cap {
        opacity: 1;
    }
    .sf-media img {
        filter: grayscale(0);
    }
}

@media (max-width: 767px) {
    .sf-title {
        font-size: 26px;
    }
    .sf-item {
        width: 230px;
    }
    .sf-media {
        /*the pictures are 800 x 1000. a fixed height made the box
          wider than 4:5, so object-fit: cover shaved the top and
          bottom off. the box now takes its height from them*/
        height: auto;
    }
    .sf-media img {
        height: auto;
    }

    /*----------The slider----------*/
    /*owl lays the cards out itself, so the sideways scroller and the
      flex row it holds both stand down for it. the stage has to stop
      clipping too, or the dots under the cards would be cut off*/
    .sf-stage {
        overflow: visible;
        padding: 0;
        margin-bottom: 20px;
    }
    .sf-track.owl-carousel {
        display: block;
        gap: 0;
        padding: 0;
    }
    /*owl sets the width on its own item wrapper; the card fills it*/
    .sf-track.owl-carousel .sf-item {
        width: 100%;
    }
    /*the name of each store stands on the ground above its picture, and
      owl clips the strip it lays out. this is the room it needs*/
    .sf-track.owl-carousel .owl-stage-outer {
        padding-top: 30px;
    }
    /*the same pair the journey slider carries, so the two read alike*/
    .sf-track .owl-nav {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: 18px;
    }
    .sf-track .owl-nav button.owl-prev,
    .sf-track .owl-nav button.owl-next {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--brand);
        color: var(--white);
    }
    .sf-track .owl-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 14px;
    }
    .sf-track .owl-dots button.owl-dot span {
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--line);
    }
    .sf-track .owl-dots button.owl-dot.active span {
        background: var(--brand);
    }
}

/*----------E-commerce operations----------*/
@media (max-width: 1400px) {
    .ec-panel-in {
        padding: 50px 7% 50px 5%;
    }
}

@media (max-width: 1200px) {
    .ec-title {
        font-size: 32px;
    }
}

@media (max-width: 991px) {
    /*no pinning: the picture sits above the copy and both scroll by*/
    .ec {
        height: auto;
    }
    .ec-sticky {
        position: static;
        height: auto;
        overflow: visible;
    }
    .ec-img {
        position: relative;
        width: 100%;
        height: 320px;
    }
    .ec-img img {
        position: relative;
        width: 100%;
    }
    .ec-panel {
        position: relative;
        width: 100%;
        height: auto;
        opacity: 1;
    }
    .ec-panel-in {
        max-height: none;
        padding: 46px 12px;
    }
}

@media (max-width: 767px) {
    .ec-title {
        font-size: 26px;
    }
    .ec-img {
        height: 240px;
    }
}

/*----------Management team----------*/
@media (max-width: 1200px) {
    .mt-slider {
        gap: 26px;
    }
    .mt-stage {
        min-height: 400px;
    }
    .mt-name {
        font-size: 22px;
    }
    .mt-thumb {
        width: 66px;
        height: 82px;
    }
}

@media (max-width: 991px) {
    .mt {
        padding: 40px 0 30px;
    }
    /*the portrait leads, the copy sits under it and the faces
      in waiting run along the bottom*/
    .mt-slider {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .mt-stage {
        order: 1;
        min-height: 0;
        height: 420px;
    }
    .mt-copy {
        order: 2;
        padding-left: 0;
    }
    .mt-copy-in {
        padding-top: 0;
    }
    .mt-side {
        order: 3;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
    }
    .mt-meta {
        align-items: center;
    }
    .mt-vert {
        writing-mode: horizontal-tb;
        transform: none;
    }
    .mt-nav {
        margin-top: 26px;
    }
}

@media (max-width: 767px) {
    .mt-title {
        font-size: 26px;
    }
    .mt-side {
        flex-direction: column;
        align-items: flex-start;
    }
    /*the vertical word and the waiting faces are both dropped, the
      counter alone carries the position on a narrow screen*/
    .mt-vert,
    .mt-thumbs {
        display: none;
    }
    .mt-btn {
        width: 44px;
        height: 44px;
    }
}

/*----------Testimonials----------*/
@media (max-width: 1200px) {
    .tst-people {
        gap: 18px;
    }
    .tst-person {
        padding: 20px 12px;
    }
    .tst-face {
        width: 104px;
        height: 104px;
        padding: 9px;
    }
    .tst-who b {
        font-size: 16px;
    }
}

@media (max-width: 991px) {
    .tst {
        padding: 40px 0 30px;
    }
    /*four across is too tight here, so they fold to two*/
    .tst-people {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-bottom: 34px;
    }
    .tst-face {
        width: 96px;
        height: 96px;
        padding: 8px;
    }
    .tst-who b {
        font-size: 15px;
    }
    .tst-who i {
        font-size: 13px;
    }
    .tst-note p {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .tst-title {
        font-size: 26px;
    }
    .tst-mark {
        width: 220px;
    }
    /*the row of four and the panel under it are folded into four
      slides here, so the grid gives way to owl and the panel that
      held the accounts is left with nothing to show*/
    .tst-people {
        display: block;
        margin-bottom: 0;
    }
    .tst-say {
        display: none;
    }
    .tst-people.owl-carousel .owl-stage {
        display: flex;
        align-items: stretch;
    }
    .tst-people.owl-carousel .owl-item {
        display: flex;
    }
    .tst-slide {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 24px 20px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.03);
    }
    /*inside its own slide the button is no longer one of four to pick
      between, so it drops the card it wore and stops holding back*/
    .tst-slide .tst-person {
        align-items: flex-start;
        width: 100%;
        margin-bottom: 18px;
        padding: 0;
        border: 0;
        background: none;
        text-align: left;
        cursor: default;
    }
    .tst-slide .tst-face {
        width: 88px;
        height: 88px;
        padding: 7px;
        border-color: var(--brand);
    }
    .tst-slide .tst-face img {
        filter: grayscale(0);
        opacity: 1;
    }
    .tst-slide .tst-who {
        text-align: left;
    }
    .tst-slide .tst-who b {
        font-size: 17px;
        color: var(--white);
    }
    .tst-slide .tst-who i {
        color: rgba(255, 255, 255, 0.72);
    }
    /*every account stands in its own slide, so none of them waits*/
    .tst-slide .tst-note {
        display: block;
        animation: none;
    }
    .tst-note p {
        font-size: 15px;
        margin-bottom: 22px;
    }
    /*owl sizes every picture in its stage to the full cell. the
      portraits want that; the vendor’s quote mark does not*/
    .tst-people.owl-carousel .owl-item .tst-face img {
        width: 100%;
        height: 100%;
    }
    .tst-people.owl-carousel .owl-item .tst-face--mark img {
        width: 30px;
        height: auto;
    }
    .tst-people .owl-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 18px;
    }
    .tst-people .owl-dots button.owl-dot span {
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
    }
    .tst-people .owl-dots button.owl-dot.active span {
        background: var(--brand);
    }
}

/*----------Business responsibility----------*/
@media (max-width: 1200px) {
    
    .bsr-title {
        font-size: 32px;
    }
    .bsr-in {
        max-width: 500px;
    }
}

@media (max-width: 991px) {
    .bsr-in {
        max-width: 100%;
    }
    /*no open wall to the side once the crop tightens, so the
      whole frame carries the wash instead*/
    .bsr-bg::after {
        background: none;
  }
}
@media (max-width: 767px) {
    .bsr-slide{
        align-items: self-start;
    }
    .bsr {
        align-items: self-start;
    }
    .bsr-title {
        font-size: 26px;
    }
    .bsr-body {
        margin-bottom: 24px;
  }
    /*the copy stands at the top of the frame here, so the wash comes
      down from the top rather than in from the side, and clears the
      picture again below it*/
    .bsr-bg::after {
        background: linear-gradient(to bottom,
            rgba(12, 12, 14, 0.88) 0%,
            rgba(12, 12, 14, 0.72) 38%,
            rgba(12, 12, 14, 0.3) 66%,
            rgba(12, 12, 14, 0) 88%);
    }
}

/*==========================================================
  DIRECTOR MODAL RESPONSIVE
==========================================================*/
@media (max-width: 767px) {
    .bod-modal .modal-body {
        padding: 26px 20px;
    }
    .bod-modal-photo {
        max-width: 200px;
    }
    .bod-modal-name {
        font-size: 20px;
    }
}

/*==========================================================
  HOME, SMALL SCREEN BEHAVIOURS
==========================================================*/
@media (max-width: 767px) {
    /*the pills fold into a dropdown, opened by the trigger above them.
      the row is not pinned here, the page just scrolls past it*/
    .cc-tabs-wrap {
        position: relative;
        z-index: 5;
        padding: 20px 0 18px;
        background: var(--cc-bg);
    }
    .cc-tabs-toggle {
        display: flex;
    }
    .cc-tabs {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        /*clears the tiles that scroll underneath it*/
        z-index: 20;
        flex-direction: column;
        gap: 0;
        margin-top: 6px;
        padding: 0;
        background: var(--white);
        border: 1px solid var(--brand);
        box-shadow: 0 14px 30px rgba(12, 12, 14, 0.24);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease), transform 0.35s var(--ease);
    }
    .cc-tabs-wrap.open .cc-tabs {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    /*as list rows rather than pills, so nothing overlaps*/
    .cc-tab {
        flex: 0 0 auto;
        width: 100%;
        padding: 14px 18px;
        border: 0;
        border-radius: 0;
        background: var(--white);
        color: var(--ink);
        text-align: left;
    }
    .cc-tab + .cc-tab {
        border-top: 1px solid var(--line);
    }
    /*the chosen row is filled with the brand, the same as the pill it
      stands in for on a wider screen*/
    .cc-tab.is-active {
        background: var(--brand);
        color: var(--white);
    }
}

@media (max-width: 767px) {
    .jr-body img.jr-steps {
        height: 84px;
    }
}


/*==========================================================
  Inner banner copy — top aligned on mobile
  Own class, applied on the banner section, so the shared
  banner rules stay untouched.
==========================================================*/
@media (max-width: 767px) {
    /*the copy centres in the full-height banner on desktop; on mobile
      that reads as sitting low, so lift it up under the breadcrumb*/
    .banner-copy-top .inner-banner-body,
    .banner-copy-top .inr-banner-body {
        align-items: flex-start;
        flex: 1 1 auto;
        padding-top: 12px;
        padding-bottom: 36px;
    }
    /*the tsf banner drives its position from the eyebrow/headline
      auto margins rather than the body*/
    .banner-copy-top .tsf-banner-eyebrow {
        margin-top: 12px;
    }
    .banner-copy-top .tsf-banner-head {
        margin-bottom: auto;
    }
    .inr-banner-body{
        align-items: self-start;
    }
    /*so it is turned to run top to bottom instead: darkest where the
      copy now sits and clearing as it falls away, which keeps the
      eyebrow and the headline readable whatever the picture does*/
    .inr-banner-bg::after {
        background: linear-gradient(180deg, rgba(12, 12, 14, 0.82) 0%, rgba(12, 12, 14, 0.72) 34%, rgba(12, 12, 14, 0.42) 62%, rgba(12, 12, 14, 0.24) 100%);
    }
}

/*==========================================================
  MENU OVERLAY, ACCORDION BELOW 767
  each panel is moved under its own button, so the section
  opens and closes in place instead of swapping a column
==========================================================*/
@media (max-width: 767px) {
    /*the panels have all been moved out of it*/
    .nav-panels {
        display: none;
    }
    .nav-side {
        padding: 24px 0;
        border-bottom: 0;
    }
    .nav-sections {
        display: block;
    }
    .nav-sections li {
        margin-bottom: 0;
    }
    .nav-sections li + li {
        border-top: 1px solid var(--line-dk);
    }
    .nav-sec {
        width: 100%;
        justify-content: space-between;
        padding: 15px 5px;
    }
    /*the arrow turns down to point at what it opened*/
    .nav-sec svg {
        transition: transform 0.35s var(--ease);
    }
    .nav-sec.active svg {
        transform: rotate(90deg);
    }
    /*in the flow now, rather than stacked in a grid cell*/
    .nav-panel {
        display: none;
        grid-area: auto;
        visibility: visible;
        opacity: 1;
        padding: 0 0 18px;
    }
    .nav-panel.active {
        display: block;
    }
    /*the button already names the section*/
    .nav-panel .nav-head {
        display: none;
    }
    .nav-panel ul li a {
        padding: 10px 0;
    }
    .foot-title{
        font-size: 24px;
    }
}

/*----------Financial performance----------*/
@media (max-width: 767px) {
    /*two labels across leaves each of them three or four lines deep
      here, so the pair folds into a dropdown instead*/
    .fp-tabs-wrap {
        margin-bottom: 20px;
    }
    .fp-tabs-toggle {
        display: flex;
    }
    .fp-tabs {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        z-index: 20;
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 6px;
        background: var(--white);
        border: 1px solid var(--brand);
        box-shadow: 0 14px 30px rgba(12, 12, 14, 0.24);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease), transform 0.35s var(--ease);
    }
    .fp-tabs-wrap.open .fp-tabs {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    /*as list rows rather than pills, so nothing overlaps*/
    .fp-tab {
        width: 100%;
        padding: 14px 18px;
        border: 0;
        border-radius: 0;
        background: var(--white);
        color: var(--ink);
        font-size: 13px;
        text-align: left;
    }
    .fp-tab + .fp-tab {
        border-top: 1px solid var(--line);
    }
    /*the chosen row is filled with the brand, the same as the pill it
      stands in for on a wider screen*/
    .fp-tab.is-active {
        background: var(--brand);
        color: var(--white);
    }
    .inner-banner{
        padding-top: 60px;
    }
    .inr-banner {
        padding-top: 60px;
    }
    .belw767pdt0{
        padding-top: 0;
    }
    .belw767pdt0 .inr-banner-body{
        padding-bottom: 0;
        padding-top: 25px;
    }
    .category-row-item {
        align-items: center;
    }
    .competency-last{
        padding-bottom: 0;
    }
    .stf-item{
        padding-top: 20px;
    }
    .fp-graph{
    max-width: 90%;
    }

}

/*----------Business responsibility----------*/
@media (max-width: 767px) {
    /*the copy runs the full width here, so there is no left column for
      the marks to line up under and the middle reads better*/
    .bsr-slider .owl-dots {
        justify-content: center;
        padding: 0 12px;
        bottom: 26px;
    }
    /*the scrim runs left to right, which suits copy held to the left of
      a wide frame. here the copy spans the width, and it sits in the
      top half of the slide — 8% to 54% of it — so the scrim is turned
      to fall the same way: enough weight over the words to read them,
      lifting off through the lower half so the picture comes through*/
    .bsr-slide-bg::after {
        background: linear-gradient(180deg,
            rgba(12, 12, 14, 0.74) 0%,
            rgba(12, 12, 14, 0.62) 42%,
            rgba(12, 12, 14, 0.34) 62%,
            rgba(12, 12, 14, 0.06) 100%);
    }
}