body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 24px;
     font-family: "Open Sans", sans-serif;
     font-weight: 400;
    color: #000000;
}
h1,
h2,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0px;
    padding: 0px;
}

a {
    text-decoration: none !important;
    font-size: 16px;
}

a:hover {
    text-decoration: none !important;
}

p {
    font-size: 16px;
    line-height: 24px;
     font-family: "Open Sans", sans-serif;
     font-weight: 400;
    color: #000000;
}

.my-sidenav {
    display: none;
}
/*-----------Header Css End-------------*/

/*==========================================================
  DESIGN TOKENS  — change brand colours / heading font here
==========================================================*/
:root {
    --brand: #e8222e;
    --brand-dk: #c00f1a;
    --ink: #0c0c0e;
    --dark: #0c0c0e;
    --white: #ffffff;
    --line: #e4e4e7;
    --line-dk: rgba(255, 255, 255, 0.13);
    --head-font: "Open Sans", sans-serif;
    --hdr-h: 74px;
    --ease: cubic-bezier(0.62, 0.05, 0.1, 1);
    /*the height of the home banner, which the stage and the section
      after it are both measured against*/
    --hm-h: max(100vh, var(--hm-min));
    --hm-min: 520px;
    /*the stretch of scrolling the film is held for while the section
      below comes up in its place*/
    --hm-rev: calc(var(--hm-h) * 0.5);
}
@supports (height: 100svh) {
    :root {
        --hm-h: max(100svh, var(--hm-min));
    }
}

/*----------Shared icons + buttons----------*/
.btn-line svg,
.btn-solid svg,
.to-top svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

.btn-line {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    border: 1px solid var(--line);
    border-radius: 40px;
    color: var(--ink);
    font-size: 13px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    transition: color 0.4s var(--ease), border-color 0.4s var(--ease), opacity 0.4s var(--ease);
}
.btn-line > * {
    position: relative;
    z-index: 2;
}
.btn-line::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    background: var(--brand);
    transition: height 0.4s var(--ease);
    z-index: 1;
}
.btn-line:hover {
    color: var(--white);
    border-color: var(--brand);
}
.btn-line:hover::before {
    height: 100%;
}
.btn-line svg {
    transition: transform 0.4s var(--ease);
}
.btn-line:hover svg {
    transform: translateY(2px);
}

.btn-solid {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    padding: 12px 20px;
    border-radius: 0px;
    background: var(--brand);
    color: var(--white);
    font-size: 16px;
    text-transform: uppercase;
    transition: color 0.4s var(--ease);
    font-weight: 600;
}
.btn-solid > * {
    position: relative;
    z-index: 2;
}
/*fills up from the bottom on hover, same as the header button*/
.btn-solid::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    background: var(--ink);
    transition: height 0.4s var(--ease);
    z-index: 1;
}
.btn-solid:hover {
    color: var(--white);
}
.btn-solid:hover::before {
    height: 100%;
}
.btn-solid svg {
    width: 16px;
    height: 16px;
    transition: transform 0.4s var(--ease);
}
.btn-solid:hover svg {
    transform: translateY(3px);
}

/*==========================================================
  HEADER
==========================================================*/
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9990;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    transition: transform 0.5s var(--ease), border-color 0.45s var(--ease);
}
.hdr-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: var(--hdr-h);
    transition: height 0.45s var(--ease);
}
.hdr-left {
    display: flex;
    align-items: center;
    gap: 26px;
    min-width: 0;
}
.logo a {
    display: block;
}
.logo img {
    width: 112px;
    height: auto;
    display: block;
    transition: width 0.45s var(--ease);
}

/*----------Report meta rail----------*/
.hdr-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 26px;
    border-left: 1px solid var(--line);
    transition: opacity 0.45s var(--ease), border-color 0.45s var(--ease);
}
.hdr-meta-num {
    font-family: var(--head-font);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: var(--brand);
}
.hdr-meta-num sup {
    font-size: 0.45em;
    top: -0.75em;
}
.hdr-meta-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/*the edition and the year read as the label, and the company name is
  the thing being named, so it carries the weight*/
.hdr-meta-txt i {
    font-style: normal;
    font-size: 13px;
    line-height: 1.15;
    color: #808285;
}
.hdr-meta-txt i em {
    font-style: normal;
    /*the rule between the two, a shade back from the words*/
    margin: 0 3px;
    color: var(--line);
}
.hdr-meta-txt b {
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ink);
}

.hdr-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

/*----------Menu button----------*/
.menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 8px 11px 20px;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--ink);
    transition: color 0.45s var(--ease);
}
.menu-btn-txt {
    position: relative;
    display: block;
    height: 15px;
    overflow: hidden;
    font-family: var(--head-font);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}
.menu-btn-txt b,
.menu-btn-txt i {
    display: block;
    font-weight: 600;
    font-style: normal;
    line-height: 15px;
    transition: transform 0.45s var(--ease);
}
.menu-btn-icon {
    position: relative;
    display: block;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ink);
    flex: 0 0 auto;
    transition: background 0.4s var(--ease);
}
.menu-btn-icon em {
    position: absolute;
    left: 50%;
    width: 16px;
    height: 1.5px;
    margin-left: -8px;
    background: var(--white);
    transition: transform 0.45s var(--ease), width 0.45s var(--ease), background 0.4s var(--ease);
}
.menu-btn-icon em:nth-child(1) {
    top: 16px;
}
.menu-btn-icon em:nth-child(2) {
    top: 21px;
    width: 10px;
}
.menu-btn:hover .menu-btn-icon {
    background: var(--brand);
}
.menu-btn:hover .menu-btn-icon em:nth-child(2) {
    width: 16px;
}
.menu-btn.active .menu-btn-txt b,
.menu-btn.active .menu-btn-txt i {
    transform: translateY(-15px);
}
.menu-btn.active .menu-btn-icon em:nth-child(1) {
    transform: translateY(2.5px) rotate(45deg);
}
.menu-btn.active .menu-btn-icon em:nth-child(2) {
    width: 16px;
    transform: translateY(-2.5px) rotate(-45deg);
}


/*----------Brand sail mark (top right)----------*/
.hdr-inner {
    position: relative;
    z-index: 2;
}
.hdr-mark {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--hdr-h);
    height: var(--hdr-h);
    background: url(../images/menu-right.svg) no-repeat top right;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}


#header.hide-up {
    transform: translateY(-100%);
}

/*----------Header stays as it is while the menu is open----------*/
#header.nav-open {
    transform: none;
}


/*==========================================================
  MENU OVERLAY
==========================================================*/
.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    z-index: 9980;
    background: var(--dark);
    overflow-y: auto;
    visibility: hidden;
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.75s var(--ease), -webkit-clip-path 0.75s var(--ease), visibility 0s linear 0.75s;
}
.nav-overlay.open {
    visibility: visible;
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.75s var(--ease), -webkit-clip-path 0.75s var(--ease), visibility 0s linear 0s;
}
.nav-overlay-in {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    /*starts flush under the header so the column rule can touch it*/
    padding-top: var(--hdr-h);
}

/*----------Upper band----------*/
.nav-main {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
}
.nav-main > .container {
    display: flex;
    align-items: stretch;
}
.nav-layout {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 340px 1fr;
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s var(--ease) 0.35s, transform 0.6s var(--ease) 0.35s;
}
.nav-overlay.open .nav-layout {
    opacity: 1;
    transform: translateY(0);
}

/*----------Column heading----------*/
.nav-head {
    font-size: 15px;
    text-transform: uppercase;
    color: var(--white);
    padding-bottom: 13px;
    margin-bottom: 18px;
    border-bottom: 2px solid var(--brand);
}
.nav-head a {
    font-size: 15px;
    color: var(--white);
    transition: color 0.35s var(--ease);
}
.nav-head a:hover {
    color: var(--brand);
}

/*----------Left: section list----------*/
.nav-side {
    display: flex;
    flex-direction: column;
    padding: 30px 34px 30px 0;
    /*rule runs the full height, header edge to bottom rule*/
    border-right: 1px solid var(--line-dk);
}
.nav-sections {
    /*stays put when a panel of a different height is chosen*/
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav-sections li 
{
    margin-bottom: 20px;
}
.nav-sec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    background: transparent;
    text-align: left;
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.nav-sec svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
    opacity: 0.7;
}
.nav-sec:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.06);
}
.nav-sec.active {
    background: var(--brand);
    color: var(--white);
}
.nav-sec.active svg {
    opacity: 1;
}

/*----------Right: panels stacked so the height never shifts----------*/
.nav-panels {
    display: grid;
    padding:30px 0 30px 46px;
}
.nav-panel {
    grid-area: 1 / 1;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
.nav-panel.active {
    visibility: visible;
    opacity: 1;
}
.nav-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav-panel.is-wide ul {
    columns: 3;
    column-gap: 36px;
}
.nav-panel ul li {
    break-inside: avoid;
}
.nav-panel ul li a {
    display: inline-flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px 0;
    transition: transform 0.3s var(--ease);
}
.nav-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nav-ttl {
    font-size: 16px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
    transition: color 0.3s var(--ease);
}
.nav-sub {
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.42);
    transition: color 0.3s var(--ease);
}
.nav-panel ul li a svg {
    width: 15px;
    height: 15px;
    margin-top: 4px;
    fill: none;
    stroke: rgba(255, 255, 255, 0.75);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
    opacity: 0.55;
}
.nav-panel ul li a:hover {
    transform: translateX(4px);
}
.nav-panel ul li a:hover .nav-ttl {
    color: var(--brand);
}
.nav-panel ul li a:hover .nav-sub {
    color: rgba(255, 255, 255, 0.62);
}

/*----------Lower band, rule runs the full width----------*/
.nav-bottom {
    flex: 0 0 auto;
    border-top: 1px solid var(--line-dk);
}
.nav-tools {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    padding: 20px 0 20px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s var(--ease) 0.5s, transform 0.6s var(--ease) 0.5s;
}
.nav-overlay.open .nav-tools {
    opacity: 1;
    transform: translateY(0);
}
.nav-tool {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 264px;
    padding: 15px 26px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: var(--white);
    font-size: 15px;
    text-transform: uppercase;
    transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.nav-tool svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}
.nav-tool:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--white);
}

body.nav-lock {
    overflow: hidden;
}

/*==========================================================
  HOME BANNER
==========================================================*/
.hm-banner {
    position: relative;
    width: 100%;
    margin-top: calc(var(--hdr-h) * -1);
    height: var(--hm-h);
    overflow: hidden;
    /*the film opens on white and is faded up from nothing, so the
      ground it is held on is white too. on dark it read as a black
      screen for the moment between the page painting and the film
      arriving*/
    background: var(--white);
}
/*----------The stage----------*/
/*a banner and the stretch of scrolling it is held for. the film is
  pinned to the top of the window over that stretch while the script
  carries A Thousand Steps Forward up to its resting place beneath it,
  and the film is faded off it. so the section comes up in the frame
  the film is in rather than travelling in from the bottom, and past
  that the page scrolls as it always did. a banner left outside a
  stage, as on the demo page, keeps its old behaviour*/
.hm-stage {
    position: relative;
    /*it stands over the section, and it is the film that goes rather
      than the section that arrives — one small layer changing opacity
      instead of five screens of one. nothing in it is for clicking, so
      it can be seen through in every sense*/
    z-index: 2;
    pointer-events: none;
    margin-top: calc(var(--hdr-h) * -1);
    height: calc(var(--hm-h) + var(--hm-rev));
    will-change: opacity;
    /*a wheel arrives in steps of a hundred-odd pixels, and a fade shown
      in four of them is visibly steppy. this carries it between them.
      only the fade is smoothed: the section under it answers the scroll
      exactly, or it drifts against the page*/
    transition: opacity 0.22s linear;
}
.hm-stage > .hm-banner {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    margin-top: 0;
}
/*----------The way in----------*/
/*nothing pops. the film comes up and settles back to its own size, and
  the title follows it a beat later. the stage's own opacity is spoken
  for by the hand-over, so this rides on the pieces inside it — and the
  scale is on the video rather than the sticky box around it, which
  leaves the pin alone.

  hm-anim is put on by the script, so a page with no javascript is
  never left holding an invisible banner. hm-in follows a frame later,
  which is what starts the move*/
@media (prefers-reduced-motion: no-preference) {
    html.hm-anim .hm-stage .hm-banner video {
        opacity: 0;
        transform: scale(1.06);
    }
    html.hm-anim .hm-stage .hm-heading {
        opacity: 0;
    }
}
.hm-stage .hm-banner video {
    transition: opacity 1.1s var(--ease), transform 1.9s var(--ease);
}
.hm-stage .hm-heading {
    transition: opacity 0.9s var(--ease) 0.35s;
}
html.hm-in .hm-stage .hm-banner video {
    opacity: 1;
    transform: none;
}
html.hm-in .hm-stage .hm-heading {
    opacity: 1;
}
.hm-banner video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hm-banner .hmvideo-mbl {
    display: none;
}

/*----------The report heading on the banner----------*/
/*the film leaves its right third open, and this stands in it. it is
  set against the width of the window so it holds the same share of
  the frame on any screen*/
.hm-heading {
    position: absolute;
    top: 50%;
    right: 5%;
    z-index: 3;
    width: 32vw;
    max-width: 470px;
    min-width: 260px;
    transform: translateY(-50%);
    /*it is a title, not a target*/
    pointer-events: none;
}
.hm-heading img {
    width: 100%;
    height: auto;
    display: block;
}

/*----------Placeholder until the video is supplied----------*/
.hm-banner-ph {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 78% 18%, rgba(232, 34, 46, 0.30) 0%, rgba(232, 34, 46, 0) 55%),
        radial-gradient(circle at 12% 88%, rgba(232, 34, 46, 0.14) 0%, rgba(232, 34, 46, 0) 52%),
        var(--dark);
}
.hm-banner-ph span {
    font-size: 13px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.32);
}

/*----------Scroll cue----------*/
/*a sign, not a control: it says which way the page goes and fades as
  soon as it starts going there. the word sits over a hairline rail
  that a red segment runs down, and the arrow rests in a ring at the
  foot of it, so the whole mark reads as one downward gesture*/
.hm-scroll {
    position: absolute;
    left: 80%;
    bottom: 30px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transform: translateX(-50%);
    transition: opacity 0.22s linear;
}
.hm-scroll-txt {
    font-family: var(--head-font);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.32em;
    /*the letter spacing hangs a gap off the last letter, so the word
      is nudged back by half of it to sit square over the rail*/
    text-indent: 0.32em;
    text-transform: uppercase;
    color: var(--ink);
}
.hm-scroll-rail {
    position: relative;
    display: block;
    width: 1px;
    height: 38px;
    overflow: hidden;
    background: rgba(12, 12, 14, 0.18);
}
.hm-scroll-rail i {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 46%;
    background: var(--brand);
    animation: scrollrail 1.9s var(--ease) infinite;
}
@keyframes scrollrail {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(220%);
    }
}
.hm-scroll-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(12, 12, 14, 0.2);
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: scrollcue 1.9s var(--ease) infinite;
}
.hm-scroll-ring img {
    width: 13px;
    height: auto;
    display: block;
}
@keyframes scrollcue {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(6px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .hm-scroll-rail i,
    .hm-scroll-ring {
        animation: none;
    }
}
/*-----------Banner Css End-------------*/

/*==========================================================
  A THOUSAND STEPS FORWARD
==========================================================*/
.steps {
    position: relative;
    /*it sits one screen up, under the pinned film. the script lifts it
      the rest of the way to where it will sit, so it is already in
      place when the film comes off it. the lift is the exact opposite
      of the scroll, which is what keeps it standing still*/
    z-index: 1;
    margin-top: calc(var(--hm-h) * -1);
    will-change: transform;
    /*no runway any more: the whole block arrives together in the frame
      the film leaves, so the section is only as tall as that frame*/
    height: auto;
    min-height: var(--hm-h);
    background: var(--white);
}
/*its own ground, carried one header's height above it. the section is
  laid so its content lands under the header, which leaves that much of
  the frame open over its top edge in the last of the hand-over. this
  fills it, and is lifted along with the section*/
.steps::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: var(--hdr-h);
    background: var(--white);
}
.steps-sticky {
    display: flex;
    align-items: center;
    min-height: var(--hm-h);
    padding: calc(var(--hdr-h) + 30px) 0 50px;
    overflow: hidden;
}
.steps-sticky > .container {
    width: 100%;
}
.steps-tag {
    display: block;
    width: -webkit-fit-content;
    width: fit-content;
    margin-bottom: 14px;
    padding: 0 0 8px;
    background: none;
    border-bottom: 2px solid var(--brand);
    color: var(--ink);
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    
    text-transform: uppercase;
}
/*the copy on the left, the picture on the right, both standing where
  the old sequence used to leave them*/
.steps-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

/*----------Headline blocks, arrive from the left----------*/
.steps-text {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 62%;
}
.steps-head {
    font-size: 42px;
    font-weight: 800;
    line-height: 38px;
    text-transform: uppercase;
}
.steps-head span {
    display: block;
    width: -webkit-fit-content;
    width: fit-content;
    padding: 3px 16px;
}
.steps-h1 span {
    background: var(--brand);
    color: var(--ink);
}
/*left edge lines up with the M of MOOD on the line above,
  lines inside stay right aligned to each other*/
.steps-h2 {
    width: -webkit-fit-content;
    width: fit-content;
    margin-left: calc(16px + 3.61em);
    text-align: right;
}
.steps-h2 span {
    margin-left: auto;
    background: var(--ink);
    color: var(--brand);
}
.steps-h3 span {
    background: var(--brand);
    color: var(--white);
}
.steps-cta {
    margin-top: 28px;
}
.steps-cta svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
    transition: transform 0.4s var(--ease);
}
.steps-cta .btn-solid:hover svg {
    transform: translateX(4px);
}

/*----------Picture, resting at the right of the row----------*/
.steps-img {
    position: relative;
    flex: 0 0 auto;
    width: 450px;
    height: 550px;
}
/*----------One arrival, not four----------*/
/*the tag, the three headlines, the button and the picture all come up
  together as the film hands over, rather than each waiting its own
  turn down a runway. hm-anim is put on by the script before the first
  paint, so a page with no javascript never holds an invisible block*/
html.hm-anim .steps-tag,
html.hm-anim .steps-head,
html.hm-anim .steps-cta,
html.hm-anim .steps-img {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
html.hm-anim .steps.is-in .steps-tag,
html.hm-anim .steps.is-in .steps-head,
html.hm-anim .steps.is-in .steps-cta,
html.hm-anim .steps.is-in .steps-img {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    html.hm-anim .steps-tag,
    html.hm-anim .steps-head,
    html.hm-anim .steps-cta,
    html.hm-anim .steps-img {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
.steps-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/*-----------A Thousand Steps Forward Css End-------------*/

/*==========================================================
  GUIDING PRINCIPLES
==========================================================*/
.gp {
    position: relative;
    /*the scroll runway for the pinned sequence*/
    height: 400vh;
    background: var(--white);
}
.gp-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}

/*----------Full bleed image, shrinks to the centre then goes----------*/
.gp-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
}
.gp-media picture,
.hl-media picture {
    display: block;
    width: 100%;
    height: 100%;
}
.gp-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/*----------The copy that takes its place----------*/
.gp-stage {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-top: var(--hdr-h);
}
/*the stage runs down the centre*/
.gp-stage .container {
    text-align: center;
}
/*held back until the pinned sequence brings it up*/
.gp-tag {
    opacity: 0;
    transform: translateY(30px);
    will-change: transform, opacity;
    display: block;
    width: -webkit-fit-content;
    width: fit-content;
    /*the stage it stands on is centred, so it is centred with it*/
    margin: 0 auto 14px;
    padding: 0 0 8px;
    background: none;
    border-bottom: 2px solid var(--brand);
    color: var(--ink);
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
}
.gp-head {
    margin-bottom: 34px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0;
    transform: translateY(30px);
    will-change: transform, opacity;
}
.gp-vp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    max-width: 820px;
    margin: 0 auto;
}
.gp-vp-col {
    opacity: 0;
    transform: translateY(30px);
    will-change: transform, opacity;
}
.gp-vp-head {
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 700;
    color: var(--brand);
}

/*==========================================================
  PRIDE, OUR VALUES
  the bracket layout is shared with the inner page. only the
  reveal is added here, scoped to this section so the inner
  page still renders straight away.
==========================================================*/
.pride {
    position: relative;
    margin-top: 26px;
    opacity: 0;
    transform: translateY(30px);
    will-change: transform, opacity;
}
.pride-eyebrow {
    display: block;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--brand);
}
.gp .values-pride-list {
    text-align: left;
}
/*----------Held back until the row is reached----------*/
.gp .values-pride-letter {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.45s var(--ease), -webkit-clip-path 0.45s var(--ease);
}
.gp .values-pride-label {
    opacity: 0;
    transition: opacity 0.4s var(--ease);
}
.gp .values-pride-list.play .values-pride-letter {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
}
.gp .values-pride-list.play .values-pride-label {
    opacity: 1;
}
/*one letter after the next, its sentence following it in*/
.gp .values-pride-list li:nth-child(1) .values-pride-letter { transition-delay: 0.00s; }
.gp .values-pride-list li:nth-child(1) .values-pride-label  { transition-delay: 0.30s; }
.gp .values-pride-list li:nth-child(2) .values-pride-letter { transition-delay: 0.28s; }
.gp .values-pride-list li:nth-child(2) .values-pride-label  { transition-delay: 0.58s; }
.gp .values-pride-list li:nth-child(3) .values-pride-letter { transition-delay: 0.56s; }
.gp .values-pride-list li:nth-child(3) .values-pride-label  { transition-delay: 0.86s; }
.gp .values-pride-list li:nth-child(4) .values-pride-letter { transition-delay: 0.84s; }
.gp .values-pride-list li:nth-child(4) .values-pride-label  { transition-delay: 1.14s; }
.gp .values-pride-list li:nth-child(5) .values-pride-letter { transition-delay: 1.12s; }
.gp .values-pride-list li:nth-child(5) .values-pride-label  { transition-delay: 1.42s; }
/*-----------Guiding Principles Css End-------------*/

/*==========================================================
  HIGHLIGHTS FY 2025-26
==========================================================*/
.hl {
    position: relative;
    /*the runway is gone: the figures step through on their own time
      now, so the band is a single screen like any other section*/
    background: var(--dark);
}
.hl-sticky {
    position: relative;
    display: flex;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
}

/*----------Full bleed image behind----------*/
.hl-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.hl-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/*keeps the figures legible over the picture*/
.hl-media::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(12, 12, 14, 0.90) 0%, rgba(12, 12, 14, 0.72) 46%, rgba(12, 12, 14, 0) 76%);
}

/*----------The column that holds them----------*/
.hl-inner {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    padding-top: var(--hdr-h);
}
.hl-inner > .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding-top: 40px;
    padding-bottom: 34px;
}
.hl-head {
    flex: 0 0 auto;
    margin-bottom: 16px;
}
.hl-tag {
    display: block;
    width: -webkit-fit-content;
    width: fit-content;
    margin-bottom: 14px;
    padding: 0 0 8px;
    background: none;
    border-bottom: 2px solid var(--brand);
    color: var(--white);
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    
    text-transform: uppercase;
}
.hl-sub {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--brand);
}

/*----------The figures, three slides of them----------*/
.hl-slider {
    position: relative;
    width: 100%;
    max-width: 660px;
    overflow: hidden;
}
/*owl lays its stage out as a row of equal cells, so every slide
  fills the tallest of the three and the dots never jump*/
.hl-track.owl-carousel .owl-stage {
    display: flex;
    align-items: stretch;
}
.hl-track.owl-carousel .owl-item {
    display: flex;
}
.hl-slide {
    width: 100%;
}
.hl-grid {
    /*the short ones pair up, the wordy ones take the full width*/
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    column-gap: 34px;
}
.hl-item.hl-wide {
    grid-column: 1 / -1;
}
.hl-item {
    padding: 18px 0;
}
.hl-num {
    display: block;
    font-variant-numeric: tabular-nums;
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    font-size: 36px;
    font-weight: 800;
    line-height: 1.14;
    color: var(--brand);
}
.hl-num em {
    font-style: normal;
    font-size: 22px;
    font-weight: 700;
}
.hl-yoy {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    font-weight:600;
    line-height: 1.35;
    color: var(--white);
}
.hl-lbl {
    display: block;
    margin-top: 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--white);
}
.hl-slider .owl-dots {
    display: flex;
    gap: 9px;
    margin-top: 18px;
}
.hl-slider .owl-dots button.owl-dot span {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: background 0.35s var(--ease), width 0.35s var(--ease);
}
.hl-slider .owl-dots button.owl-dot.active span {
    width: 26px;
    border-radius: 5px;
    background: var(--brand);
}
.hl-note {
    flex: 0 0 auto;
    margin-top: 22px;
    font-size: 13px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.62);
}
/*-----------Highlights Css End-------------*/

/*==========================================================
  CHAIRMAN'S COMMUNIQUE
==========================================================*/
.cm {
    position: relative;
    padding: 80px 0;
    /*the charcoal the spread sits on*/
    background: #2b2e34;
    overflow: hidden;
}
.cm .container {
    position: relative;
    z-index: 2;
}

/*----------Background image----------*/
.cm-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.cm-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/*holds the copy legible over whatever picture goes in*/
.cm-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(30, 32, 36, 0.90) 0%, rgba(30, 32, 36, 0.72) 48%, rgba(30, 32, 36, 0.30) 100%);
}

/*----------Copy on the left----------*/
.cm-row {
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 60px;
    align-items: center;
}
.cm-tag {
    display: block;
    width: -webkit-fit-content;
    width: fit-content;
    margin-bottom: 14px;
    padding: 0 0 8px;
    background: none;
    border-bottom: 2px solid var(--brand);
    color: var(--white);
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    
    text-transform: uppercase;
}
.cm-head {
    margin-bottom: 28px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.22;
    color: var(--brand);
}
.cm-head span {
    display: block;
}
.cm-quote {
    position: relative;
    padding: 0;
    margin: 0 0 32px;
}
.cm-quote span {
    display: block;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.42;
    text-transform: uppercase;
    color: var(--white);
}

/*----------Chairman on the right----------*/
.cm-img {
    position: relative;
}
.cm-img img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    display: block;
}
/*-----------Chairman Css End-------------*/

/*==========================================================
  METRO BRANDS, THE COMPANY OVERVIEW
==========================================================*/
.ab {
    position: relative;
    /*the runway the pinned story plays over*/
    height: 420vh;
    background: #ffffff;
}
.ab-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}

/*----------The wave behind the screen----------*/
/*it fills the pinned screen and is held under a white veil, so the
  copy, the rules and the brand marks over it read exactly as they
  did on the plain ground. the section keeps its white underneath,
  so nothing shifts while the file is still arriving*/
.ab-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    /*it is scenery: the pointer belongs to what is over it*/
    pointer-events: none;
}
.ab-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/*the veil the wave is read through. it starts at the value the
  section always carried and is taken to solid white as the brand
  stage arrives, so the marks stand on a clean ground instead of
  over the film. abProgress is what moves it*/
.ab-video::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    opacity: var(--ab-veil, 0.82);
}
.ab-sticky > .container {
    position: relative;
    /*over the wave*/
    z-index: 2;
    height: 100%;
    padding-top: var(--hdr-h);
    /*everything in this section runs down the centre*/
    text-align: center;
}
/*the dot field behind everything*/
.ab-sticky::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    /*over the wave, under the copy: the texture the section always
      carried still reads across the picture*/
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(0, 0, 0, 0.09) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 70%);
    mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 70%);
    opacity: 0.5;
    pointer-events: none;
}

/*----------The intro, centred then carried up----------*/
.ab-strip {
    position: absolute;
    top: 50%;
    left: 12px;
    right: 12px;
    transform: translateY(-50%);
    will-change: transform, opacity;
}
.ab-tag {
    display: block;
    width: -webkit-fit-content;
    width: fit-content;
    /*the only centred eyebrow on the page*/
    margin: 0 auto 14px;
    padding: 0 0 8px;
    background: none;
    border-bottom: 2px solid var(--brand);
    color: var(--ink);
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.ab-head {
    max-width: 900px;
    margin: 0 auto 24px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.22;
    color: var(--brand);
}
.ab-intro {
    max-width: 940px;
    margin: 0 auto;
}
.ab-lead {
    display: block;
    margin-bottom: 18px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.34;
    text-transform: uppercase;
    color: var(--ink);
}
.ab-copy p + p {
    margin-top: 12px;
}
.ab-rule {
    display: block;
    width: 96px;
    height: 3px;
    margin: 26px auto 0;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: center;
}

/*----------The two panels----------*/
.ab-stage {
    position: absolute;
    top: var(--hdr-h);
    left: 12px;
    right: 12px;
    bottom: 96px;
}
.ab-slide {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    opacity: 0;
    will-change: transform, opacity;
}
/*----------The mark that sits over each heading----------*/
.ab-bicon {
    display: block;
    margin: 0 auto 10px;
    color: var(--brand);
    opacity: 0;
    transform: translateY(16px);
}
.ab-bicon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/*both marks share a 60x60 canvas but sit in it differently: the
  home-grown one is inked landscape, the licensed one portrait. one box
  for both left one wide and short and the other narrow and tall, so
  each gets a box cut to its own ratio and they carry the same weight*/
.ab-bicon--home {
    width: 66px;
    height: 75px;
}
.ab-bicon--global {
    width: 52px;
    height: 66px;
}

/*----------Heading sitting on the rule, not above it----------*/
.ab-gtitle {
    position: relative;
    display: block;
    max-width: 900px;
    margin: 0 auto 22px;
    text-align: center;
    opacity: 0;
    transform: translateY(16px);
}
.ab-gtitle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.2);
}
.ab-gtitle b {
    position: relative;
    display: inline-block;
    padding: 0 18px;
    /*the section ground, so the rule reads as broken by the words*/
    background: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ink);
}

/*----------Slide 1 : brands----------*/
.ab-block {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto 30px;
}
.ab-logos {
    /*flex not grid, so a short row centres instead of sitting left*/
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
.ab-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 158px;
    height: 72px;
    padding: 8px;
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: translateY(24px);
}
.ab-logo img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
}
.ab-note {
    display: block;
    max-width: 940px;
    margin: 0 auto;
    font-size: 13px;
    line-height: 1.5;
    color: #6c7076;
    opacity: 0;
}

/*----------Slide 2 : categories----------*/
.ab-cats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 20px;
}
.ab-cat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: translateY(24px) scale(0.88);
}
.ab-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    border-radius: 50%;
    /*the mark is thin red line art, so it keeps a white ground
      and the ring alone carries the brand colour*/
    background: var(--white);
}
.ab-ic img {
    /*the artwork carries its own margin and the set is not square,
      so it is boxed generously and left to fit inside*/
    width: 40px;
    height: 40px;
    display: block;
    object-fit: contain;
}
.ab-cname {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
}

/*----------Progress, spanning the foot of the stage----------*/
.ab-progress {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 30px;
    display: flex;
    align-items: center;
    /*the counter that held the left is out of the markup, so the rule
      and the button stand together in the middle instead*/
    justify-content: center;
    gap: 20px;
    opacity: 0;
}
.ab-pnum {
    font-size: 14px;
    font-weight: 700;
    color: #8a8f97;
}
.ab-pnum #abCur {
    margin-right: 3px;
    font-size: 22px;
    font-weight: 800;
    color: var(--brand);
}
.ab-ptrack {
    position: relative;
    flex: 1 1 auto;
    max-width: 480px;
    height: 3px;
    background: rgba(0, 0, 0, 0.12);
}
.ab-pfill {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--brand);
}
/*----------Scroll cue on the first screen----------*/
.ab-hint {
    position: absolute;
    left: 50%;
    bottom:20px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    text-transform: uppercase;
    color: #8a8f97;
    white-space: nowrap;
}
.ab-hint i {
    position: relative;
    display: block;
    width: 40px;
    height: 2px;
    overflow: hidden;
    background: var(--brand);
}
/*the light running along the rule*/
.ab-hint i::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    animation: absweep 2s linear infinite;
}
@keyframes absweep {
    to {
        left: 110%;
    }
}
/*-----------Company Overview Css End-------------*/

/*==========================================================
  JOURNEY SINCE INCEPTION
  a horizontal track that is drawn across by vertical scroll
==========================================================*/
.jr {
    position: relative;
    /*fallback runway. app.js replaces it with the exact width the
      track needs, so the pin releases as the last year lands*/
    height: 300vh;
    background: #ededee;
}
.jr-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding-top:20px;
}

/*----------Head----------*/
.jr-head {
    margin-bottom: 26px;
}
.jr-tag {
    display: block;
    width: -webkit-fit-content;
    width: fit-content;
    margin-bottom: 14px;
    padding: 0 0 8px;
    background: none;
    border-bottom: 2px solid var(--brand);
    color: var(--ink);
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    
    text-transform: uppercase;
}
.jr-title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.18;
    color: var(--brand);
}

/*----------The measuring rule above the track----------*/
.jr-ruler {
    display: block;
    height: 30px;
    margin-bottom: 30px;
    /*two layers: tall dark ticks marking the intervals, short
      light ticks filling between them*/
    background-image:
        repeating-linear-gradient(to right, rgba(0, 0, 0, 0.65) 0 2px, transparent 2px 220px),
        repeating-linear-gradient(to right, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 22px);
    background-size: 220px 30px, 22px 18px;
    background-repeat: repeat-x, repeat-x;
    background-position: 0 0, 0 0;
}

/*----------The track----------*/
.jr-viewport {
    overflow: hidden;
}
.jr-track {
    display: flex;
    /*stretch, so every year's rule runs to the same depth. left at
      flex-start the years without a photograph ended their line early*/
    align-items: stretch;
    gap: 60px;
    /*app.js sets this to the container gutter so the first year
      lines up with the heading at any width*/
    padding-left: 12px;
    will-change: transform;
}
.jr-item {
    display: flex;
    align-items: stretch;
    gap: 20px;
    flex: 0 0 auto;
    width: 420px;
}
.jr-date {
    /*shrinks to its digits so the year starts exactly on the
      heading edge rather than inside a padded column*/
    flex: 0 0 auto;
    text-align: left;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--ink);
}
/*the rule with its bead, running the height of the entry*/
.jr-rule {
    position: relative;
    width: 2px;
    flex: 0 0 auto;
    background: var(--ink);
}
.jr-rule::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: var(--brand);
}
.jr-body {
    flex: 1 1 auto;
    min-width: 0;
}
.jr-img-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 190px;
    margin-bottom: 16px;
    background:
        radial-gradient(circle at 70% 28%, rgba(232, 34, 46, 0.10) 0%, rgba(232, 34, 46, 0) 62%),
        #e2e2e4;
}
.jr-img-ph span {
    font-size: 13px;
    text-transform: uppercase;
    color: #8a8f97;
}
.jr-body img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
    margin-bottom: 18px;
}
/*----------Brand marks under the picture----------*/
.jr-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom:0px;
}
.jr-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /*one footprint for every mark. the logos run from square (new era)
      to nine-to-one (Metroactiv), so a box that sizes to its image left
      some tiny and others wide enough to overrun the card*/
    width: 132px;
    height: 48px;
    flex: 0 0 auto;
}
.jr-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/*each milestone its own underscored line, as in the spread*/
.jr-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.jr-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--brand);
}
.jr-list li:last-child
{
    border: none;
    padding-bottom: 0px;
}
.jr-list li span {
    /*block, so its own line-height governs instead of the
      list item strut forcing a taller line box*/
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: var(--ink);
}
.jr-list li .jr-logo {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 6px;
}
/*a mark that stands beside its line instead of over the list, the way
  the inner page sets one inline with the words it belongs to*/
.jr-list li.jr-li-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}
.jr-list li.jr-li-logo > span:first-child {
    flex: 1 1 auto;
}
.jr-list li .jr-logo-end {
    flex: 0 0 auto;
    /*the card marks stand in a fixed box; this one answers to a single
      line, so the box gives way and the drawing itself is what is set*/
    width: auto;
    height: auto;
    margin-bottom: 0;
    justify-content: flex-end;
}
.jr-list li .jr-logo-end img {
    width: auto;
    height: 34px;
    max-width: 96px;
    max-height: none;
}/*----------The last stop----------*/
/*a disc carrying the year and what it celebrates, standing where the
  other entries carry a plain year, the way the inner page marks it*/
.jr-item-end {
    width: 480px;
}
.jr-date.jr-disc {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: 140px;
    height: 140px;
    padding: 14px;
    border-radius: 50%;
    background: var(--brand);
    text-align: center;
}
.jr-disc b {
    font-family: var(--head-font);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    /*the year reads in ink against the red disc, as on the spread*/
    color: var(--ink);
}
.jr-disc i {
    margin-top: 6px;
    font-family: var(--head-font);
    font-size: 13px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.25;
    color: var(--white);
}
.jr-badge {
    display: inline-block;
    padding: 6px 15px;
    margin-bottom: 14px;
    border-radius: 40px;
    background: var(--brand);
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
}
/*-----------Journey Css End-------------*/

/*==========================================================
  CORE COMPETENCIES
  tab pills over a six column grid of tiles. the pills stay
  put at the top while the tiles scroll past.
==========================================================*/
.cc {
    position: relative;
    /*white, like the sections either side of it. the sticky pill row
      and, on a phone, the wrap around the dropdown both read this, so
      they stay on the same ground as the tiles passing behind them*/
    --cc-bg: var(--white);
    padding: 50px 0;
    background: var(--cc-bg);
}
.cc-head {
    max-width: 900px;
    margin-bottom: 0;
}
.cc-tag {
    display: block;
    width: -webkit-fit-content;
    width: fit-content;
    margin-bottom: 14px;
    padding: 0 0 8px;
    background: none;
    border-bottom: 2px solid var(--brand);
    color: var(--ink);
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    
    text-transform: uppercase;
}
.cc-title {
    margin-bottom: 16px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.22;
    color: var(--brand);
}
.cc-intro {
    display: block;
    max-width: 780px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
}

/*----------Tab pills, equal width, held at the top----------*/
.cc-tabs {
    position: -webkit-sticky;
    position: sticky;
    /*sticks flush to the top. the header slides away on scroll down,
      so the pills only need enough room above them to sit clear of
      the tiles passing behind, not the whole header height*/
    top: 0;
    z-index: 5;
    display: flex;
    gap: 16px;
    padding: 30px 0 18px;
    /*its own ground, so the tiles pass behind it cleanly*/
    background: var(--cc-bg);
}
/*the ones not chosen are quiet outlines on the white*/
.cc-tab {
    flex: 1 1 0;
    min-height:auto;
    padding: 15px 14px;
    border: 1px solid var(--line);
    border-radius: 50px;
    background: var(--white);
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--ink);
    transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.cc-tab:hover {
    border-color: var(--ink);
}
/*and the chosen one is filled with the brand, so the eye lands on the
  panel it opens rather than on the two it does not*/
.cc-tab.is-active {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--white);
}

/*----------Panels----------*/
.cc-panel {
    display: none;
}
.cc-panel.is-active {
    display: block;
    animation: ccfade 0.45s var(--ease) both;
}
@keyframes ccfade {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*----------The tile grid----------*/
.cc-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 30px;
}
.cc-6 {
    grid-column: span 6;
}
.cc-3 {
    grid-column: span 3;
}
/*a panel with only one tile to show gives it the whole line rather
  than half of one with nothing standing beside it*/
.cc-grid > .cc-card:only-child {
    grid-column: 1 / -1;
}
/*and the four reasons spread across it instead of pairing up in a
  column that is now twice as wide*/
.cc-card:only-child .cc-reasons {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cc-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 5px;
    overflow: hidden;
    transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
/*a shade toward the ink, the way it used to lift toward the white*/
.cc-card:hover {
    border-color: var(--ink);
    background: rgba(12, 12, 14, 0.03);
}
.cc-card-in {
    position: relative;
    height: 100%;
    padding: 15px;
}
.cc-ctitle {
    margin-bottom: 22px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
}
.cc-lead {
    display: block;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
}
.cc-card--lead .cc-card-in {
    padding-bottom: 15px;
}

/*----------Icon placeholders----------*/
.cc-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    flex: 0 0 auto;
}
.cc-ico img {
    width: 62%;
    height: 62%;
    object-fit: contain;
    display: block;
}

/*----------Category chips----------*/
.cc-cats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 14px;
}
.cc-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
}
.cc-cat b {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

/*----------Chart placeholders, swap for the artwork----------*/
.cc-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    /*the plate hugs the chart, so no dead white either side*/
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 100%;
    height: 250px;
    margin:0px;
    padding: 16px;
    background: var(--white);
}
/*the plate stacks under the title and takes what is left, so the
  card's own bottom padding stays clear. at height:100% it measured
  against the whole content box, overshot by the title's height and
  had the foot of the chart clipped away*/
.cc-card--chart .cc-card-in {
    display: flex;
    flex-direction: column;
}
.cc-ph--pie {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 auto;
}
.cc-ph span {
    font-size: 13px;
    text-transform: uppercase;
    color: rgba(12, 12, 14, 0.6);
}
.cc-ph img,
.cc-ph svg {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

/*----------The stacked chart drawing itself----------*/
/*app.js swaps the picture for the drawing itself, which puts the
  columns within reach of css. each one grows off the axis and its
  figures follow once it has arrived, left to right across the year.
  as an <img> anywhere else the same file still reads flat*/
.cc-ph--bars svg .cc-bars,
.cc-ph--bars svg .cc-vals {
    transform-box: fill-box;
}
.cc-ph--bars svg .cc-bars {
    /*off the foot of the column, so it rises from the axis*/
    transform-origin: 50% 100%;
    transform: scaleY(0);
    transition: transform 0.9s var(--ease) var(--cc-d, 0s);
}
.cc-ph--bars svg .cc-vals {
    opacity: 0;
    /*held back until the column that carries them is up*/
    transition: opacity 0.5s var(--ease) calc(var(--cc-d, 0s) + 0.55s);
}
.cc-ph--bars.is-drawn svg .cc-bars {
    transform: scaleY(1);
}
.cc-ph--bars.is-drawn svg .cc-vals {
    opacity: 1;
}
/*one after the next, in the order they are read*/
.cc-ph--bars svg [data-col="1"] { --cc-d: 0.10s; }
.cc-ph--bars svg [data-col="2"] { --cc-d: 0.20s; }
.cc-ph--bars svg [data-col="3"] { --cc-d: 0.30s; }
.cc-ph--bars svg [data-col="4"] { --cc-d: 0.40s; }

/*----------Why brands choose us----------*/
.cc-reasons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 18px;
}
.cc-reason {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cc-reason b {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
}

/*----------Partner logos----------*/
.cc-logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.cc-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    padding: 8px;
    /*a white plate on a white ground is no plate at all, so the rule
      is what holds each logo in its own tile now*/
    border: 1px solid var(--line);
    background: var(--white);
}
.cc-logo img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
}

.cc-cta {
    margin-top: 20px;
}
/*-----------Core Competencies Css End-------------*/

/*==========================================================
  STORE FORMATS
  the copy sits above; below it the pictures alone hold a
  full screen. they stand on one baseline, overlap, and grow
  the further right they are, carried across by scroll.
==========================================================*/
.sf {
    position: relative;
    padding-top: 40px;
    background: var(--white);
}
.sf-head {
    max-width: 820px;
    margin-bottom: 40px;
}
.sf-tag {
    display: block;
    width: -webkit-fit-content;
    width: fit-content;
    margin-bottom: 14px;
    padding: 0 0 8px;
    background: none;
    border-bottom: 2px solid var(--brand);
    color: var(--ink);
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    
    text-transform: uppercase;
}
.sf-title {
    margin-bottom: 14px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.22;
    color: var(--brand);
}
.sf-intro {
    display: block;
    margin-bottom: 26px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
}

/*----------The pictures, on a screen of their own----------*/
.sf-runway {
    position: relative;
    /*fallback. app.js sets the exact travel distance*/
    height: 300vh;
}
.sf-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}
.sf-stage {
    position: absolute;
    left: 0;
    /*the room the hint used to take now sits above, giving the
      names space over the tallest card*/
    top: 150px;
    right: 0;
    bottom: 0;
}
.sf-track {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.sf-track .sf-item {
    padding-top: 0;
}
.sf-item {
    position: absolute;
    left: 0;
    /*all of them stand on one baseline and grow upward*/
    bottom: 0;
    width: 280px;
    /*left bottom, so the x written by app.js is the real left edge*/
    transform-origin: 0 100%;
    will-change: transform;
}
.sf-media {
    position: relative;
    display: block;
    width: 100%;
    /*280 x 350 renders 462 x 578 at the largest scale*/
    height: 350px;
    overflow: hidden;
    background: #e4e4e6;
}
.sf-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /*colour arrives with the hover*/
    filter: grayscale(1);
    transition: filter 0.45s var(--ease);
}
.sf-item:hover .sf-media img {
    filter: grayscale(0);
}

/*----------The name, sitting above the picture on hover----------*/
/*----------The name, over the top of the picture on hover.
  it lives inside the card, so however tall the card grows the
  name can never be clipped by the top of the section----------*/
.sf-cap {
    position: absolute;
    left: 0;
    /*clear of the picture, standing on the section ground above it*/
    bottom: 100%;
    z-index: 2;
    padding-bottom: 10px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.35s var(--ease);
    /*counter-scaled whole, so the name and the gap it keeps above the
      picture both read the same however far the card has grown*/
    transform-origin: 0 100%;
    transform: scale(var(--inv, 1));
}
.sf-item:hover .sf-cap {
    opacity: 1;
}
.sf-cap b {
    display: block;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--ink);
}
/*-----------Store Formats Css End-------------*/


/*==========================================================
  E-COMMERCE OPERATIONS
  the picture holds the whole screen, then gives up half of
  it to the copy. the image itself stays 100vw inside a
  window that narrows, so the frame is revealed rather than
  re-cropped as the panel takes its half
==========================================================*/
.ec {
    position: relative;
    /*fallback runway. app.js sets the exact travel distance*/
    height: 280vh;
    background: var(--white);
}
.ec-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}
.ec-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    will-change: width;
}
/*fixed at the full viewport width, so narrowing the window
  above uncovers the frame instead of squeezing it*/
.ec-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    object-fit: cover;
    display: block;
    will-change: transform;
}
.ec-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    background: #ededee;
    opacity: 0;
    will-change: opacity;
}
.ec-panel-in {
    width: 100%;
    max-height: 100%;
    padding: 60px 9% 60px 6%;
}
.ec-tag {
    display: block;
    width: -webkit-fit-content;
    width: fit-content;
    margin-bottom: 14px;
    padding: 0 0 8px;
    background: none;
    border-bottom: 2px solid var(--brand);
    color: var(--ink);
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    
    text-transform: uppercase;
}
.ec-title {
    margin-bottom: 16px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.22;
    color: var(--brand);
}
.ec-body {
    margin-bottom: 28px;
}
/*-----------E-commerce Operations Css End-------------*/



/*==========================================================
  MANAGEMENT TEAM
  three columns: the count and the faces waiting their turn,
  the portrait, then the copy. stepping through slides the
  portrait on the vertical and the copy on the horizontal,
  each away in the direction travelled
==========================================================*/
.mt {
    position: relative;
    padding: 50px 0 50px;
    background: var(--white);
}
.mt-head {
    max-width: 820px;
    margin-bottom: 20px;
}
.mt-tag {
    display: block;
    width: -webkit-fit-content;
    width: fit-content;
    margin-bottom: 14px;
    padding: 0 0 8px;
    background: none;
    border-bottom: 2px solid var(--brand);
    color: var(--ink);
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    
    text-transform: uppercase;
}
.mt-title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.22;
    color: var(--brand);
}

/*----------The three columns----------*/
.mt-slider {
    display: grid;
    grid-template-columns: 3fr 4fr 5fr;
    gap: 34px;
    align-items: stretch;
}

/*----------Left: the count and the faces in waiting----------*/
.mt-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.mt-meta {
    display: flex;
    /*count first, the label hanging down the edge below it*/
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}
.mt-count {
    font-size: 14px;
    color: #6c7076;
}
.mt-count b {
    font-weight: 700;
    color: var(--ink);
}
.mt-count i {
    font-style: normal;
}
.mt-vert {
    /*reads bottom to top down the edge of the column*/
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--ink);
}
.mt-thumbs {
    display: flex;
    gap: 10px;
}
.mt-thumb {
    display: block;
    width: 78px;
    height: 96px;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #ededee;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.3s var(--ease);
}
.mt-thumb:hover,
.mt-thumb:focus-visible {
    opacity: 1;
}
.mt-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/*----------Centre: the portrait----------*/
.mt-stage {
    position: relative;
    min-height: 460px;
    overflow: hidden;
    background: #ededee;
}
.mt-stage img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/*----------Right: the copy----------*/
.mt-copy {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 12px;
}
.mt-copy-in {
    position: relative;
    padding-top: 20px;
}
/*only the one in hand is in the flow, so the block is as
  tall as the entry it is showing*/
.mt-item {
    display: none;
}
.mt-item.is-active {
    display: block;
}
.mt-role {
    display: block;
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 400;
    color: #6c7076;
}
.mt-name {
    margin-bottom: 6px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--brand);
}
.mt-bio {
    margin-bottom: 0;
}

/*----------Stepping through----------*/
/*the way on from the row, sitting under it as the other sections
  carry theirs*/
.mt-cta {
    margin-top: 46px;
}
.mt-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 34px;
}
.mt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(12, 12, 14, 0.28);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.mt-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mt-btn:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--white);
}
.mt-btn--on {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--white);
}
.mt-btn--on:hover {
    border-color: var(--ink);
    background: var(--ink);
}

/*----------The change itself----------*/
/*restarted from custom.js by removing the class and forcing
  a reflow, so the same step can play twice in a row*/
/*the portrait comes in against the step: forward brings the
  next face in from the left, back from the right, so the
  picture crosses the copy travelling beside it*/
.mt-stage.is-fwd img {
    animation: mtEnterLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.mt-stage.is-back img {
    animation: mtEnterRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.mt-copy-in.is-fwd {
    animation: mtSlideLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.mt-copy-in.is-back {
    animation: mtSlideRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes mtEnterRight {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes mtEnterLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes mtSlideLeft {
    from { transform: translateX(50px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes mtSlideRight {
    from { transform: translateX(-50px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
/*-----------Management Team Css End-------------*/



/*==========================================================
  TESTIMONIALS
  the stakeholders step down the left, each circle set
  against the one above it. only the one in hand keeps its
  colour; what they said stands to the right
==========================================================*/
.tst {
    position: relative;
    padding: 50px 0 50px;
    background: #282e36;
    overflow: hidden;
}
/*the mark the spread carries, sat low and quiet behind. its own
  ink is #3e434b, a shade above this ground, so it needs weight
  rather than the near nothing it carried on the light one*/
.tst-mark {
    position: absolute;
    right: -60px;
    bottom: -90px;
    width: 340px;
    height: auto;
    opacity: 0.5;
    pointer-events: none;
}
.tst-head {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin-bottom: 30px;
}
/*inverted for the dark ground: an ink chip would sink into it*/
.tst-tag {
    display: block;
    width: -webkit-fit-content;
    width: fit-content;
    margin-bottom: 14px;
    padding: 0 0 8px;
    background: none;
    border-bottom: 2px solid var(--brand);
    color: var(--white);
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    
    text-transform: uppercase;
}
.tst-title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.22;
    color: var(--white);
}
/*the four stand in a row of their own and what the chosen one said
  opens underneath them, so the picker reads across and the account
  reads down*/
.tst-wrap {
    position: relative;
    z-index: 2;
}

/*----------The stakeholders, across the full width----------*/
.tst-people {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 20px;
}
.tst-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    border: none;
    background: none;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.tst-person:hover,
.tst-person.is-active {
    border-color: rgba(232, 34, 46, 0.55);
    /* background: rgba(255, 255, 255, 0.04); */
}
.tst-face {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 122px;
    height: 122px;
    flex: 0 0 auto;
    /*the ring stands off the portrait rather than hugging it,
      so the gap between the two is part of the mark*/
    padding: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    transition: border-color 0.35s var(--ease);
}
.tst-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    /*colour is kept for whoever is being read*/
    filter: grayscale(1);
    opacity: 0.45;
    transition: filter 0.4s var(--ease), opacity 0.4s var(--ease);
}
/*the vendor sits for no portrait in the spread, so the mark
  stands in for one*/
.tst-face--mark {
    background: transparent;
}
.tst-face--mark img {
    width: 40px;
    height: auto;
    border-radius: 0;
    object-fit: contain;
}
.tst-person.is-active .tst-face img,
.tst-person:hover .tst-face img {
    filter: grayscale(0);
    opacity: 1;
}
.tst-person.is-active .tst-face {
    border-color: var(--brand);
}
.tst-who {
    display: block;
    min-width: 0;
}
/*the ones in waiting hold back, the one being read comes forward*/
.tst-who b {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.35s var(--ease);
}
.tst-who i {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.35s var(--ease);
}
.tst-person.is-active .tst-who b,
.tst-person:hover .tst-who b {
    color: var(--white);
}
.tst-person.is-active .tst-who i,
.tst-person:hover .tst-who i {
    color: rgba(255, 255, 255, 0.72);
}

/*----------What the chosen one said, under the row----------*/
.tst-say {
    position: relative;
    padding-top: 6px;
}
.tst-quote {
    display: block;
    width: 40px;
    height: auto;
    margin-bottom: 22px;
}
.tst-note {
    display: none;
}
.tst-note.is-active {
    display: block;
    animation: tstRise 0.5s var(--ease) both;
}
/*only the opening of each account stands here; the rest of it is a
  click away on the testimonials page*/
.tst-note p {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
}
@keyframes tstRise {
    from { transform: translateY(14px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/*-----------Testimonials Css End-------------*/



/*==========================================================
  BUSINESS RESPONSIBILITY
  the picture holds the whole band and the copy stands on
  the open wall to its left, where the frame leaves room
==========================================================*/
.bsr {
    position: relative;
    background: var(--dark);
    overflow: hidden;
}

/*----------One initiative to a slide----------*/
/*picture, words and button travel together, so each turn of the band
  changes all three at once*/
.bsr-slide {
    position: relative;
    display: flex;
    align-items: center;
    /*a full screen of its own. min- rather than a fixed height so a
      short window lets the copy through instead of cropping it*/
    min-height: 100vh;
    min-height: 100svh;
    padding: 60px 0;
}
.bsr-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block;
}
.bsr-slide-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/*carries the left of the frame darker still, so the copy
  holds up wherever the crop lands*/
.bsr-slide-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,
        rgba(12, 12, 14, 0.88) 0%,
        rgba(12, 12, 14, 0.62) 38%,
        rgba(12, 12, 14, 0) 70%);
}
.bsr-slide > .container {
    position: relative;
    z-index: 2;
    width: 100%;
}
.bsr-in {
    max-width: 540px;
}
/*the section eyebrow, on the dark ground the picture gives it*/
.bsr-tag {
    display: block;
    width: -webkit-fit-content;
    width: fit-content;
    margin-bottom: 14px;
    padding: 0 0 8px;
    background: none;
    border-bottom: 2px solid var(--brand);
    color: var(--white);
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
/*the programme the slide belongs to, over its heading*/
.bsr-note-tag {
    display: block;
    margin-bottom: 8px;
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand);
}
.bsr-title {
    margin-bottom: 14px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.22;
    color: var(--brand);
}
/*a span, not a p: the only thing it takes is the colour it
  needs to read on the picture*/
.bsr-body {
    display: block;
    /*was 30: the button sat a long way adrift of the words it belongs to*/
    margin-bottom: 18px;
    color: var(--white);
}

/*----------The dots, standing under the copy----------*/
/*inside the band rather than below it, so the picture keeps the whole
  screen and the marks fall in line with the words on the left*/
.bsr-slider .owl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 40px;
    z-index: 3;
    display: flex;
    justify-content: flex-start;
    gap: 9px;
    /*standing under the words rather than under the middle of the
      picture: the container gutter worked out the way the journey
      track works its own out*/
    padding: 0 max(12px, calc((100% - 1320px) / 2 + 12px));
}
.bsr-slider .owl-dots button.owl-dot span {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.38);
    transition: background 0.35s var(--ease), width 0.35s var(--ease);
}
.bsr-slider .owl-dots button.owl-dot.active span {
    width: 26px;
    border-radius: 5px;
    background: var(--brand);
}

/*-----------Business Responsibility Css End-------------*/



/*==========================================================
  FOOTER
  option A off the report directions: the cover swoosh runs
  full bleed over an espresso ground, the report title and
  its button stand under it, the three downloads share one
  row of columns, and the mark and the social row close it.
==========================================================*/
#footer {
    position: relative;
    /*the darkest of the report's browns, not the page ink*/
    background: #241410;
    /*the warm off-white the report sets its small copy in*/
    color: #e8ded8;
    /*the report red, a shade off the site's own*/
    --foot-red: #ee1b2a;
    --foot-rule: rgba(232, 222, 216, 0.15);
    overflow: hidden;
}

/*----------The swoosh----------*/
/*stretched to the width of any screen, so the sweep keeps its
  shape whatever the window does*/
.foot-ribbon {
    display: block;
    width: 100%;
    height: 110px;
}

/*----------Report title and its button----------*/
.foot-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    padding: 6px 0 42px;
    border-bottom: 1px solid var(--foot-rule);
}
.foot-title {
    margin: 0;
    font-family: var(--head-font);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.06;
    color: var(--white);
}
.foot-title sup {
    position: relative;
    top: -0.72em;
    font-size: 0.46em;
    font-weight: 700;
}
.foot-title em {
    font-style: normal;
    color: var(--foot-red);
}
.foot-cta {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    flex-shrink: 0;
    padding: 19px 30px;
    background: var(--foot-red);
    color: var(--white);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.foot-cta:hover {
    background: var(--white);
    color: #241410;
}
.foot-cta svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

/*----------The three report downloads----------*/
.foot-secs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 6px 0 0;
    margin: 0;
    list-style: none;
}
.foot-secs li + li {
    border-left: 1px solid rgba(232, 222, 216, 0.13);
}
.foot-secs a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 30px 30px 30px 0;
    transition: color 0.18s var(--ease);
}
.foot-secs li + li a {
    padding-left: 30px;
}
.foot-secs span {
    font-family: var(--head-font);
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 700;
    letter-spacing: -0.012em;
    color: var(--white);
    transition: color 0.18s var(--ease);
}
.foot-secs svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
    /*held back from the title beside it, and carried into the red
      with it on hover rather than only brightening*/
    color: rgba(232, 222, 216, 0.55);
    transition: color 0.18s var(--ease), transform 0.18s var(--ease);
}
/*a short rule drawn out from the left on hover*/
.foot-secs a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background: var(--foot-red);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.foot-secs li + li a::after {
    left: 30px;
}
.foot-secs a:hover span {
    color: var(--foot-red);
}
.foot-secs a:hover svg {
    color: var(--foot-red);
    transform: translateY(2px);
}
.foot-secs a:hover::after {
    width: 52px;
}

/*----------The mark, and who to find----------*/
.foot-id {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    flex-wrap: wrap;
    padding: 34px 0;
    border-top: 1px solid var(--foot-rule);
}
.foot-brand {
    display: flex;
    align-items: center;
    gap: 22px;
}
.foot-logo {
    display: block;
    width: 140px;
}
.foot-logo img {
    width: 100%;
    height: auto;
    display: block;
}
.foot-org {
    margin: 0;
    padding-left: 22px;
    border-left: 1px solid rgba(232, 222, 216, 0.22);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: rgba(232, 222, 216, 0.62);
}
.foot-social {
    display: flex;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.foot-social a {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
    transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}
.foot-social a:hover {
    background: var(--foot-red);
    transform: translateY(-2px);
}
/*these marks are drawn as solids, not as outlines like the rest*/
.foot-social svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
    stroke: none;
}

/*----------The line at the foot of it all----------*/
.foot-base {
    border-top: 1px solid var(--foot-rule);
}
.foot-base-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 19px 0 21px;
    font-size: 14px;
    color: rgba(232, 222, 216, 0.52);
}
.foot-credit a {
    color: rgba(232, 222, 216, 0.9);
    font-size: 14px;
    transition: color 0.18s var(--ease);
}
.foot-credit a:hover {
    color: var(--foot-red);
}

/*----------Floating back to top----------*/
.to-top {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 9970;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--brand);
    color: var(--white);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease), transform 0.4s var(--ease), background 0.35s var(--ease);
}
.to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.to-top:hover {
    background: var(--ink);
}
/*-----------Footer Css End-------------*/

/*----------Clear the fixed header----------*/
#wrapper {
    padding-top: var(--hdr-h);
}


.logo img {
    transition: width 0.45s var(--ease), filter 0.45s var(--ease);
}
/* #header.nav-open .logo img {
    filter: brightness(0) invert(1);
} */

/*==========================================================
  INNER PAGE BANNER
==========================================================*/
.inner-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100svh;
    margin-bottom: 40px;
    overflow: hidden;
    background: var(--dark);
}
.inner-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.inner-banner-bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
}
.inner-banner-bg .inner-banner-image-mobile {
    display: none;
}
/*keeps the copy readable over any supplied image*/
.inner-banner-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(90deg, rgba(12, 12, 14, 0.74) 0%, rgba(12, 12, 14, 0.58) 40%, rgba(12, 12, 14, 0.30) 70%, rgba(12, 12, 14, 0.10) 100%);
}

/*----------Breadcrumb, sits directly under the header----------*/
.inner-breadcrumb {
    position: relative;
    z-index: 3;
    padding: 18px 0;
}
.inner-breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.inner-breadcrumb-list li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.inner-breadcrumb-list a {
    font-size: 14px;
    color: var(--white);
    transition: color 0.35s var(--ease);
}
.inner-breadcrumb-list a:hover {
    color: var(--brand);
}
.inner-breadcrumb-list span {
    font-size: 14px;
    color: var(--white);
}

/*----------Copy block, centred top to bottom----------*/
.inner-banner-body {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    width: 100%;
    padding: 60px 0;
}
.inner-banner-body .row {
    width: 100%;
}
.inner-banner-eyebrow {
    font-family: var(--head-font);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 14px;
}
.inner-banner-heading {
    font-family: var(--head-font);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--brand);
}
.inner-banner-heading span {
    display: block;
}
/*----------Plain variant: no background image or colour, height follows the copy----------*/
.inner-banner.inner-banner-plain {
    height: auto;
    background: transparent;
}
.inner-banner-plain .inner-banner-body {
    flex: 0 0 auto;
    padding: 10px 0 0;
}
.inner-banner-plain .inner-breadcrumb-list a {
    color: var(--ink);
}
.inner-banner-plain .inner-breadcrumb-list a:hover {
    color: var(--brand);
}
.inner-banner-plain .inner-breadcrumb-list span {
    color: var(--ink);
}
.inner-banner-plain .inner-banner-eyebrow {
    color: var(--ink);
}
/*-----------Inner Banner Css End-------------*/


/*==========================================================
  PREV / NEXT PAGE NAVIGATION
==========================================================*/
.page-nav {
    padding: 50px 0;
}
.page-nav .row {
    row-gap: 20px;
}
.page-nav-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--line);
    background: var(--white);
    overflow: hidden;
    transition: border-color 0.5s var(--ease), transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.page-nav-prev {
    justify-content: flex-start;
}
.page-nav-next {
    justify-content: flex-end;
    text-align: right;
}
.page-nav-btn > * {
    position: relative;
    z-index: 3;
}

/*----------Brand wipe, travels in the direction of the link----------*/
.page-nav-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: linear-gradient(100deg, var(--brand) 0%, var(--brand-dk) 100%);
    transform: scaleX(0);
    transition: transform 0.6s var(--ease);
}
.page-nav-prev::before {
    transform-origin: 100% 50%;
}
.page-nav-next::before {
    transform-origin: 0 50%;
}
.page-nav-btn:hover::before {
    transform: scaleX(1);
}

/*----------Light sweeping across once the wipe lands----------*/
.page-nav-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    z-index: 2;
    width: 55%;
    height: 100%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg);
    pointer-events: none;
}
.page-nav-btn:hover::after {
    animation: pgnavshine 1s var(--ease) 0.15s;
}
@keyframes pgnavshine {
    from {
        left: -150%;
    }
    to {
        left: 150%;
    }
}



/*----------Arrow disc----------*/
.page-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink);
    flex: 0 0 auto;
    overflow: hidden;
    transition: color 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease), transform 0.5s var(--ease);
}
.page-nav-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.page-nav-btn:hover .page-nav-icon {
    color: var(--brand);
    background: var(--white);
    border-color: var(--white);
}
.page-nav-prev:hover .page-nav-icon {
    transform: translateX(-4px);
}
.page-nav-next:hover .page-nav-icon {
    transform: translateX(4px);
}
/*arrow leaves one side and returns from the other*/
.page-nav-prev:hover .page-nav-icon svg {
    animation: pgnavleft 0.7s var(--ease);
}
.page-nav-next:hover .page-nav-icon svg {
    animation: pgnavright 0.7s var(--ease);
}
@keyframes pgnavleft {
    45% {
        transform: translateX(-26px);
        opacity: 0;
    }
    46% {
        transform: translateX(26px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes pgnavright {
    45% {
        transform: translateX(26px);
        opacity: 0;
    }
    46% {
        transform: translateX(-26px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/*----------Label----------*/
.page-nav-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.page-nav-next .page-nav-txt {
    align-items: flex-end;
}
.page-nav-txt b {
    display: block;
    font-family: var(--head-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    transition: color 0.5s var(--ease);
}
.page-nav-btn:hover .page-nav-txt b {
    color: var(--white);
}
/*-----------Prev / Next Css End-------------*/


/*==========================================================
  INNER BANNER — LIGHT VARIANT
  Artwork already carries its own colour, so the dark scrim
  is dropped and the copy runs black.
==========================================================*/
.inner-banner-light {
    background: transparent;
}
.inner-banner-light .inner-banner-bg::after {
    display: none;
}
.inner-banner-light .inner-breadcrumb-list a {
    color: rgba(12, 12, 14, 0.65);
}
.inner-banner-light .inner-breadcrumb-list a:hover {
    color: var(--brand);
}
.inner-banner-light .inner-breadcrumb-list span {
    color: var(--ink);
}
.inner-banner-light .inner-banner-eyebrow {
    color: var(--ink);
}
.inner-banner-light .inner-banner-heading {
    font-size: 72px;
    text-transform: uppercase;
    color: var(--ink);
}
/*Guiding Principles runs a full-bleed photograph, so it keeps the standard
  dark treatment but the same oversized headline*/
.guiding-principles-banner .inner-banner-heading {
    font-size: 72px;
    text-transform: uppercase;
}
/*each word sits on its own line, so the default 1.25 leading opens a large
  gap between them at this size*/
.gp-banner-heading {
    line-height: 1.02;
    font-weight: 800;
    color: var(--white);
}
/*-----------Inner Banner Light Css End-------------*/


/*==========================================================
  GUIDING PRINCIPLES — VISION / PURPOSE / VALUES
==========================================================*/
.vision-purpose-values {
    padding: 0px 0 30px;
}
.vision-purpose-values-row {
    display: flex;
    flex-direction: column;
    gap: 38px;
}
/*vision and purpose read as a pair, so they stand beside one another
  down the middle of the page with a gap between, the way they do on
  the home page*/
.vision-purpose-values-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}
.vision-purpose-values-pair p {
    margin: 0 auto;
}
/*the values heading stands over the middle of the bracket below it*/
.vision-purpose-values-block-values .vision-purpose-values-heading {
    text-align: center;
}
.vision-purpose-values-heading {
    font-family: var(--head-font);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--brand);
    margin-bottom: 10px;
}
.vision-purpose-values-block p {
    max-width: 760px;
}

/*----------PRIDE, read left to right----------*/
/*The bracket encloses the letter row only. The top edge runs unbroken across
  the whole row; the bottom edge is divided, breaking between the labels. Both
  the walls and the bottom edge live on the letter, so the walls stop level
  with the bottom edge instead of running down past the labels.*/
.values-pride-list {
    /*the height of the letter box, which the side walls measure against*/
    --pride-letter-h: 118px;
    /*where the rule sits inside the label; the walls run down to meet it*/
    --pride-rule-top: 23px;
    position: relative;
    display: flex;
    align-items: stretch;
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
}
/*The band is closed at both ends, but only down to the sentence rule — a
  full-height border would overshoot well below it. The wall is measured DOWN
  from the top, so it lands on the rule whatever the sentences do: however many
  lines a label wraps to, the rule stays put and the bracket still closes on it.
  The run is the top border + the letter box + the rule's offset inside the
  label, then the rule's own 4px, so the wall closes flush on the rule's
  bottom edge instead of stopping just short of it.*/
.values-pride-list::before,
.values-pride-list::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 53px;
    height: calc(4px + var(--pride-letter-h) + var(--pride-rule-top) + 4px);
    width: 4px;
    background: #000000;
}
.values-pride-list::before {
    left: 0;
}
.values-pride-list::after {
    right: 0;
}
/*equal columns keep the five letters evenly spaced across the band*/
.values-pride-list li {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /*the unbroken top edge runs across every cell*/
    border-top: 4px solid #000000;
}
.values-pride-letter {
    display: block;
    font-family: var(--head-font);
    font-size: 70px;
    font-weight: 600;
    line-height: 1;
    color: var(--brand);
    /*the letter lines up with the sentence beneath it*/
    padding: 26px 24px 22px 38px;
}
/*The sentence sits ON the rule: the line is drawn through the middle of the
  band and the text covers it, so the rule appears to fill only the gaps
  between one sentence and the next.*/
.values-pride-label {
    position: relative;
    display: flex;
    /*aligned to the top so the rule meets the first line of every sentence,
      whether it runs to one line or two*/
    align-items: flex-start;
    flex: 1 1 auto;
    min-height: 66px;
    padding: 14px 24px 0 0;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: #000000;
}
/*the rule, running edge to edge behind the sentences*/
.values-pride-label::before {
    content: "";
    position: absolute;
    /*sits on the centre of the first text line*/
    top: var(--pride-rule-top);
    left: 0;
    width: 100%;
    height: 4px;
    background: #000000;
}
/*the text sits over the rule on the page ground, masking it*/
/*a fixed lead-in of rule before each sentence, so every segment is the same
  length whatever the column width; the text then masks the rest of the rule*/
.values-pride-label span {
    position: relative;
    background: var(--white);
    margin-left: 30px;
    padding: 0 0 0 12px;
    /*the sentence covers the rule out to the end of its column*/
    box-shadow: 14px 0 0 0 var(--white);
}
/*-----------Guiding Principles Css End-------------*/


/*==========================================================
  A THOUSAND STEPS FORWARD — BANNER
  The supplied artwork is the banner itself: a wide 16:9
  composition with the subject on the right and clear space
  on the left, where the headline sits.
==========================================================*/
/*the banner opens directly below the header, with no gap and no overlap*/
.tsf-banner {
    position: relative;
    background: var(--white);
}

/*----------Breadcrumb, riding on the artwork----------*/
.tsf-banner-crumb {
    padding: 18px 0 0;
}
.tsf-banner-crumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.tsf-banner-crumb-list li {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tsf-banner-crumb-list a,
.tsf-banner-crumb-list span {
    font-size: 14px;
}
.tsf-banner-crumb-list a {
    color: rgba(12, 12, 14, 0.65);
    transition: color 0.35s var(--ease);
}
.tsf-banner-crumb-list a:hover {
    color: var(--brand);
}
.tsf-banner-crumb-list span {
    color: var(--ink);
}
/*----------The artwork----------*/
.tsf-banner-media {
    position: relative;
    width: 100%;
    /*one screen, less the header it stands under. as a 16/9 plate it
      ran to 1080px on a wide window, which put the foot of it well past
      the fold and left the copy stranded in an empty top half*/
    aspect-ratio: 16 / 9;
    height: calc(100vh - var(--hdr-h));
    height: calc(100svh - var(--hdr-h));
}
.tsf-banner-img,
.tsf-banner-img-mbl {
    display: block;
    width: 100%;
    height: 100%;
    /*never cropped. on a window wider than the plate the room left over
      goes to the left, which is the empty ground the copy sits on, so
      the figure stays against the right edge*/
    object-fit: contain;
    object-position: right center;
}
.tsf-banner-img-mbl {
    display: none;
}

/*----------The copy, laid over the artwork's clear left side----------*/
.tsf-banner-body {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
/*the crumb holds the top; the eyebrow and headline centre in what is left*/
.tsf-banner-body .container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.tsf-banner-eyebrow {
    display: inline-block;
    align-self: flex-start;
    margin-top: auto;
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    /* color: var(--white); */
    /* background: var(--ink); */
    /* padding: 8px 14px; */
    margin-bottom: 14px;
}
.tsf-banner-head {
    font-family: var(--head-font);
    font-size: 52px;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: auto;
}
/*each band is its own block, so the colour only runs as far as the words*/
.tsf-banner-line {
    display: table;
    padding: 6px 16px 8px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.tsf-banner-line-red {
    color: var(--ink);
    background: var(--brand);
}
.tsf-banner-line-black {
    color: var(--brand);
    background: var(--ink);
    margin-left: 60px;
}
.tsf-banner-line-white {
    color: var(--white);
    background: var(--brand);
}
/*-----------A Thousand Steps Forward Banner Css End-------------*/


/*==========================================================
  A THOUSAND STEPS FORWARD — INTRO COPY
==========================================================*/
.movements-intro {
    padding: 50px 0 70px;
}
.movements-intro-lead {
    margin-bottom: 22px;
}
.movements-intro-list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}
.movements-intro-list li {
    font-family: var(--head-font);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: 14px;
}
.movements-intro-list li:last-child {
    margin-bottom: 0;
}
/*-----------A Thousand Steps Forward Css End-------------*/


/*==========================================================
  CONTAINER WIDTH TOKEN
  Mirrors Bootstrap's .container max-width so full-bleed
  sections can line their copy up with the page gutter.
==========================================================*/
:root {
    --container-w: 1320px;
}


/*==========================================================
  A THOUSAND STEPS FORWARD — THE YEAR CHANGED GEARS
  Chart and narrative sit left, artwork right. Both columns
  stretch to the same height, the artwork cropping to fill.
==========================================================*/
/*it runs into the prev / next bar below it, so nothing under its
  last paragraph*/
.year-changed-gears {
    padding: 0;
}
/*the split is the grid's now — 7 and 5 of the twelve — so all this
  keeps is the height the two share and the room between the rows when
  they stack*/
.year-changed-gears-row {
    align-items: stretch;
    row-gap: 30px;
}
.year-changed-gears-chart {
    margin-bottom: 30px;
}
/*the chart's own title, in ink rather than the brand red used by the
  narrative headings below it*/
.year-changed-gears-chart-title {
    font-family: var(--head-font);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: 12px;
}
.year-changed-gears-chart-image {
    display: block;
    width: 100%;
    max-width: 500px;
    height: auto;
}
.year-changed-gears-block {
    margin-bottom: 34px;
}
.year-changed-gears-block:last-child {
    margin-bottom: 0;
}
.year-changed-gears-heading {
    font-family: var(--head-font);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--brand);
    margin-bottom: 10px;
}
/*fills the column, matching the height of the copy beside it*/
.year-changed-gears-image {
    display: block;
    object-fit: cover;
    object-position: center;
}
/*-----------The Year Changed Gears Css End-------------*/


/*==========================================================
  HIGHLIGHTS FY 2025-26 — PERFORMANCE FIGURES
  Three across. Dividers are drawn with ::before (vertical)
  and ::after (horizontal) on each cell rather than borders,
  so every figure sits centred between its rules and no line
  ever lands on an outer edge of the grid.
==========================================================*/
.highlights-figures {
    padding: 20px 0 70px;
}
.highlights-figures-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.highlights-figures-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 34px;
    /*revealed from app.js as each cell scrolls in*/
    visibility: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.highlights-figures-item.is-shown {
    visibility: visible;
    opacity: 1;
    transform: none;
}
/*without scripting the figures must still be readable*/
.no-js .highlights-figures-item {
    visibility: visible;
    opacity: 1;
    transform: none;
}
/*vertical rule, sits to the left of every cell except the first in a row*/
.highlights-figures-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: var(--line);
}
.highlights-figures-item:nth-child(3n + 1)::before {
    display: none;
}
/*horizontal rule, sits above every cell except those in the first row*/
.highlights-figures-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--line);
}
.highlights-figures-item:nth-child(-n + 3)::after {
    display: none;
}
/*the reach grid follows the figures, so its first row keeps its rule*/
.highlights-figures-grid-reach .highlights-figures-item:nth-child(-n + 3)::after {
    display: block;
}
.highlights-figures-grid-reach .highlights-figures-item {
    justify-content: flex-start;
}

/*----------Figure and label----------*/
.highlights-figures-value {
    display: block;
    font-family: var(--head-font);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--brand);
    margin-bottom: 8px;
}
.highlights-figures-value i {
    font-style: normal;
}
/*the animated number keeps the value's own type*/
.highlights-figures-value .figure-count {
    font-weight: 700;
}
.highlights-figures-value em {
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
}
.highlights-figures-value-name {
    font-size: 30px;
}
.highlights-figures-label {
    display: block;
    font-family: var(--head-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink);
}
/*a following figure needs air above it within the same cell*/
.highlights-figures-label + .highlights-figures-value {
    margin-top: 22px;
}
.highlights-figures-note {
    font-style: italic;
    margin-top: 26px;
}
/*-----------Highlights Figures Css End-------------*/


/*==========================================================
  METRO BRANDS — COMPANY OVERVIEW
==========================================================*/
.company-overview {
    padding: 10px 0 50px;
}
.company-overview-lead {
    font-family: var(--head-font);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 22px;
}
.company-overview p {
    margin-bottom: 18px;
}
.company-overview p:last-child {
    margin-bottom: 0;
}
/*-----------Company Overview Css End-------------*/


/*==========================================================
  METRO BRANDS — BRAND PORTFOLIO
  Each group leads with its mark, then a heading centred on a
  rule, then the logos spread across the row.
==========================================================*/
.brand-portfolio {
    padding: 0 0 50px;
}
.brand-portfolio-box {
    background: #f0f0f0;
    padding: 30px 40px 40px;
}
.brand-portfolio-group {
    margin-bottom: 34px;
}
.brand-portfolio-group:last-child {
    margin-bottom: 0;
}
.brand-portfolio-mark {
    display: block;
    width: 100px;
    height: auto;
    margin-bottom: 8px;
}
/*the heading sits centred on a rule that runs the full width*/
.brand-portfolio-heading {
    position: relative;
    font-family: var(--head-font);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
    text-align: center;
    margin-bottom: 26px;
}
.brand-portfolio-heading::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--ink);
}
.brand-portfolio-heading span {
    position: relative;
    display: inline-block;
    background: #f0f0f0;
    padding: 0 16px;
}
/*a grid rather than a flex row: the marks differ so much in width
  that space-around left them unevenly spread, and a column each
  gives every brand the same ground to stand on. the four home-grown
  names take a line, the six licensed ones three to a row*/
.brand-portfolio-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 26px 30px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.brand-portfolio-list-global {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
/*every tile is the same box, so no mark can crowd its neighbours*/
.brand-portfolio-list li {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 76px;
}
/*the marks vary widely in aspect: a common height made the wide ones
  tower over the tall narrow ones. they are given a box to fit inside
  instead, and each takes as much of it as its own shape allows*/
.brand-portfolio-list img {
    display: block;
    width: auto;
    height: auto;
    max-width: 78%;
    max-height: 58px;
    object-fit: contain;
}
.brand-portfolio-note {
    margin-top: 26px;
}
/*-----------Brand Portfolio Css End-------------*/


/*==========================================================
  METRO BRANDS — PRODUCT CATEGORIES
  Dark panel, three across and three down.
==========================================================*/
.product-categories {
    padding: 0 0 50px;
}
.product-categories-box {
    background: #4a3f3d;
    padding: 46px 40px;
}
.product-categories-grid {
    --pc-cols: 5;
    --pc-gap: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 44px var(--pc-gap);
    list-style: none;
    padding: 0;
    margin: 0;
}
.product-categories-item {
    flex: 0 0 calc((100% - (var(--pc-cols) - 1) * var(--pc-gap)) / var(--pc-cols));
    max-width: calc((100% - (var(--pc-cols) - 1) * var(--pc-gap)) / var(--pc-cols));
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.product-categories-name {
    font-family: var(--head-font);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--white);
    margin-bottom: 18px;
}
.product-categories-icon {
    display: block;
    width: auto;
    height: 68px;
}
.product-categories-note {
    font-style: italic;
    margin-top: 16px;
}
/*-----------Product Categories Css End-------------*/


/*==========================================================
  METRO BRANDS — CLOSING ARTWORK
==========================================================*/
/*the ribbon is a wide, shallow graphic; the figure stands over it*/
.company-overview-artwork {
    position: relative;
    margin-bottom: 50px;
}
.company-overview-artwork-inner {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
}
.company-overview-artwork-figure {
    display: block;
    width: auto;
    height: 300px;
    /*the artwork carries empty space below the figure, so it needs a deep
      negative pull to actually meet the crest of the ribbon*/
    margin-bottom: -175px;
}
.company-overview-artwork-image {
    display: block;
    width: 100%;
    height: auto;
}
/*-----------Closing Artwork Css End-------------*/


/*==========================================================
  CHAIRMAN'S COMMUNIQUE
  The page runs on the dark ground from the spread. Portrait
  pins in place while the letter scrolls past it.
==========================================================*/
/*----------The letter----------*/
.chairman-letter {
    background: #2b2b2f;
    padding: 20px 0 70px;
}
.chairman-letter-row {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}
.chairman-letter-content {
    flex: 1 1 auto;
    min-width: 0;
}
.chairman-letter-content p {
    color: rgba(255, 255, 255, 0.86);
    margin-bottom: 18px;
}
.chairman-letter-salutation {
    font-family: var(--head-font);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--white);
    margin-bottom: 18px;
}
.chairman-letter-signoff {
    margin-top: 30px;
}
.chairman-letter-signoff p {
    margin-bottom: 0;
}
.chairman-letter-name {
    font-weight: 700;
    color: var(--white) !important;
}

/*----------Portrait, pinned while the copy scrolls----------*/
/*the column must span the full row height, otherwise it ends level with the
  portrait and sticky has no distance to travel*/
.chairman-letter-media {
    flex: 0 0 480px;
    max-width: 480px;
    align-self: stretch;
}
.chairman-letter-portrait {
    position: sticky;
    top: calc(var(--hdr-h) + -44px);
    background: url("../images/chairmans-communique/bg.webp") center / cover no-repeat;
}
/*wider column, so the portrait is cropped shorter to keep the block compact*/
.chairman-letter-portrait-image {
    display: block;
       width: 100%;
    /* height: 548px; */
    object-fit: cover;
    object-position: top center;
    padding: 14px 14px 0;
}
.chairman-letter-quote {
    padding: 26px 22px 30px;
}
.chairman-letter-quote p {
    font-family: var(--head-font);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    text-transform: uppercase;
    color: var(--white);
}

/*-----------Chairman Communique Css End-------------*/


/*==========================================================
  CORE COMPETENCIES
  The spread runs in magazine columns; here every competency
  reads straight down the page, one after another.
==========================================================*/
.competency-intro {
    padding: 10px 0 40px;
}
.competency {
    padding: 0 0 50px;
}
.competency-last {
    padding-bottom: 40px;
}
.competency-heading {
    font-family: var(--head-font);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 18px;
}
.competency-subheading {
    font-family: var(--head-font);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--brand);
    margin-top: 36px;
    margin-bottom: 22px;
}

/*----------Portfolio: categories left, revenue ring right----------*/
/*the split is the grid's: six of the twelve for the nine icons, five
  for the ring, and the twelfth left empty between them as the gap*/
.portfolio-split {
    --bs-gutter-x: 40px;
    row-gap: 10px;
    align-items: start;
}
/*the first heading in each column already has the section's top gap*/
.portfolio-split-col .competency-subheading:first-child {
    margin-top: 36px;
}

/*----------Category icons, five across----------*/
.category-row {
    display: grid;
    /*five across, so the nine icons fill the column's width rather than
      stacking into a narrow block with space beside it*/
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 30px 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.category-row-item {
    display: flex;
    flex-direction: column;
    /*left, so the column lines up with the heading above it*/
    align-items: flex-start;
    text-align: left;
}
.category-row-name {
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: 14px;
}
/*the red rule under each icon is drawn into the artwork*/
.category-row-icon {
    display: block;
    width: auto;
    height: 50px;
}

/*----------Revenue split: the ring carries its own key----------*/
/*the ring fills its column, so the pair reads as one block of content*/
.segment-split {
    max-width: 60%;
}
.segment-split-image {
    display: block;
    width: 100%;
    height: auto;
}

/*----------Stacked bars, five years across----------*/
/*half the grid each, with a wide gutter between them so the two sets
  of bars are never mistaken for one*/
.stack-chart-pair {
    --bs-gutter-x: 50px;
    row-gap: 20px;
}
.stack-chart-plot {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    /*wide gutters keep the bars slim and the years clearly apart*/
    gap: 0 18px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.stack-chart-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
/*the tier chart has no totals row; this keeps both baselines level*/
.stack-chart-col-wrap {
    display: flex;
    flex-direction: column;
}
.stack-chart-col-wrap .stack-chart {
    margin-top: auto;
}
.stack-chart-total {
    font-family: var(--head-font);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: 10px;
}
/*fixed height so the percentage heights read as one scale*/
.stack-chart-bar {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 46px;
    height: 240px;
}
.stack-chart-part {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--head-font);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--white);
    overflow: hidden;
}
/*west/south/north/east carry Metro, Tier I, Tier II and Tier III on the
  second chart, so one set of colours serves both*/
.stack-chart-part-west {
    background: #B04342;
}
.stack-chart-part-south {
    background: #BA8360;
}
.stack-chart-part-north {
    background: #684D43;
}
.stack-chart-part-east {
    background: #ED1C2B;
}
.stack-chart-year {
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
    margin-top: 10px;
}
.stack-chart-key {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 26px;
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
}
.stack-chart-key-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.stack-chart-key-item::before {
    content: "";
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
}
.stack-chart-key-west::before {
    background: #B04342;
}
.stack-chart-key-south::before {
    background: #BA8360;
}
.stack-chart-key-north::before {
    background: #684D43;
}
.stack-chart-key-east::before {
    background: #ED1C2B;
}

/*----------Why brands choose MBL: four outlined cards----------*/
.reason-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.reason-grid-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    border: 1px solid var(--brand);
    padding: 22px 20px;
}
.reason-grid-icon {
    display: block;
    width: auto;
    height: 74px;
}
.reason-grid-text {
    font-size: 16px;
    line-height: 22px;
}

/*----------Omni-channel: copy left, diagram right----------*/
/*the copy sits above; these are the two artworks that follow it, the figure
  beside the diagram, both centred in their own column*/
.omni-channel {
    display: grid;
    /*even columns, so the figure and the diagram carry equal weight*/
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px;
    margin-top: 30px;
}
.omni-channel-mark-col {
    display: flex;
    justify-content: center;
}
.omni-channel-mark {
    display: block;
    width: auto;
    height: 260px;
}
/*labels are drawn into the artwork*/
.omni-channel-image {
    display: block;
    width: 100%;
    height: auto;
}
.omni-channel-figure {
    max-width: 560px;
}

/*----------Headline figures, rule underneath----------*/
.competency-stat {
    max-width: 460px;
    margin-top: 30px;
}
.competency-stat-value {
    display: block;
    font-family: var(--head-font);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 12px;
}
.competency-stat-label {
    display: block;
    font-size: 16px;
    line-height: 22px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--brand);
}
.competency-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.competency-stat-row .competency-stat {
    margin-top: 30px;
}

/*----------Copy on the left, artwork holding the right----------*/
.competency-media {
    display: grid;
    grid-template-columns: 1fr 400px;
    align-items: start;
    gap: 50px;
}
.competency-media-figure {
    /*the image tracks the copy beside it rather than running short*/
    align-self: stretch;
}
.competency-media-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/*second heading in a shared column needs air above it*/
.competency-heading-spaced {
    margin-top: 44px;
}

/*----------Closing icons at the foot of the page----------*/
/*----------The artwork inside Operational Excellence----------*/
/*floated, so the copy runs around it rather than sitting below*/
.competency-artwork {
    float: left;
    margin: 0 34px 20px 0;
}
.competency-artwork-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: 180px;
}
/*the float must not escape into the next section*/
.competency-artwork + p::after {
    content: "";
    display: block;
    clear: both;
}
/*-----------Core Competencies Css End-------------*/


/*==========================================================
  Q&A WITH THE MANAGEMENT
  The spread runs in narrow magazine columns; here each
  exchange reads straight down the page.
==========================================================*/
.qna-intro {
    padding: 10px 0 40px;
}

/*----------The mark, with the standfirst alongside----------*/
.qna-lead {
    padding: 0 0 50px;
}
.qna-lead-row {
    display: grid;
    grid-template-columns: 300px 1fr;
    align-items: center;
    gap: 50px;
}
.qna-lead-mark-image {
    display: block;
    width: 100%;
    height: auto;
}
.qna-lead-standfirst {
    font-size: 20px;
    line-height: 1.45;
    font-weight: 700;
}
/*the red rule that closes the standfirst on the spread*/
.qna-lead-rule {
    display: block;
    width: 100%;
    max-width: 440px;
    height: 10px;
    background: var(--brand);
    margin-top: 26px;
}

/*----------The exchanges----------*/
.qna {
    padding: 0 0 0px !important;
}
/*----------The exchanges, one row per question----------*/
/*each question is the control that opens its own answer, and only one
  stands open at a time. a hairline between them and a red one under
  the open row, so the eye can see where it is in the list*/
.qna-item {
    border-top: 1px solid var(--line);
}
.qna-item:last-child {
    border-bottom: 1px solid var(--line);
}
.qna-question {
    margin: 0;
}
.qna-q {
    display: flex;
    align-items: center;
    gap: 22px;
    width: 100%;
    padding: 26px 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    transition: color 0.35s var(--ease);
}
/*the red Q, standing to the height of the words beside it*/
/*the report's own condensed Q, set by its height so it keeps its
  proportions. the column it stands in is the same width as the one the
  A stands in below, so the two line up straight down the page*/
.qna-q-mark {
    flex: 0 0 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qna-q-mark img {
    display: block;
    width: auto;
    height: 52px;
}
.qna-q-text {
    flex: 1 1 auto;
    font-family: var(--head-font);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
    transition: color 0.35s var(--ease);
}
/*----------The sign that opens it----------*/
/*a plus drawn in two rules: the upright turns away as the row opens,
  which leaves a minus behind*/
.qna-q-sign {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line);
    transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.qna-q-sign::before,
.qna-q-sign::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    background: var(--ink);
    transform: translate(-50%, -50%);
    transition: transform 0.4s var(--ease), background 0.35s var(--ease);
}
.qna-q-sign::after {
    transform: translate(-50%, -50%) rotate(90deg);
}
.qna-q:hover .qna-q-text {
    color: var(--brand);
}
.qna-q:hover .qna-q-sign,
.qna-q:focus-visible .qna-q-sign {
    border-color: var(--brand);
}
.qna-q:hover .qna-q-sign::before,
.qna-q:hover .qna-q-sign::after,
.qna-q:focus-visible .qna-q-sign::before,
.qna-q:focus-visible .qna-q-sign::after {
    background: var(--brand);
}
/*----------The open row----------*/
.qna-item.is-open {
    border-top-color: var(--brand);
}
.qna-item.is-open .qna-q-text {
    color: var(--brand);
}
.qna-item.is-open .qna-q-sign {
    border-color: var(--brand);
    background: var(--brand);
}
.qna-item.is-open .qna-q-sign::before,
.qna-item.is-open .qna-q-sign::after {
    background: var(--white);
}
/*the upright lies down, leaving the minus*/
.qna-item.is-open .qna-q-sign::after {
    transform: translate(-50%, -50%) rotate(0deg);
}
/*----------Answer: the A sits beside the copy, as the Q does----------*/
/*it opens and closes on its own height, which the script measures and
  then hands back to auto, so a picture arriving late or a window
  changing width cannot leave it clipped*/
.qna-answer {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    overflow: hidden;
    transition: height 0.5s var(--ease), opacity 0.4s var(--ease);
}
.qna-answer.is-shut {
    height: 0;
    opacity: 0;
}
/*room under the copy so it does not sit on the next question's rule.
  it goes on the body rather than the panel, which is measured to the
  pixel when it opens*/
.qna-answer-body {
    flex: 1 1 auto;
    min-width: 0;
    padding-bottom: 34px;
}
/*the portrait floats, so the copy runs around it*/
.qna-answer-media {
    float: right;
    width: 300px;
    max-width: 45%;
    margin: 0 0 20px 30px;
}
.qna-answer-image {
    display: block;
    width: 100%;
    height: auto;
}
/*the closing campaign shot is landscape, not a portrait*/
.qna-answer-reverse .qna-answer-media {
    width: 150%;
}
/*the body must clear its own float before the next question*/
.qna-answer-body::after {
    content: "";
    display: block;
    clear: both;
}
/*the A stands in a column the width of the Q's, so the two read as one
  line running down the page*/
.qna-answer-mark {
    flex: 0 0 26px;
    display: block;
    width: 26px;
    height: 52px;
    object-fit: contain;
}
.qna-answer-body p {
    margin-bottom: 18px;
}
.qna-answer-body p:last-child {
    margin-bottom: 0;
}

/*-----------Q&A With The Management Css End-------------*/


/*==========================================================
  JOURNEY SINCE INCEPTION
  A horizontal timeline in the manner of the reference site:
  a light band, a ruler, then stages travelling left to right,
  each opened by a red rule as on the spread.
==========================================================*/
.timeline {
    position: relative;
    background: var(--white);
    padding: 10px 0 50px;
    margin-bottom: 20px;
    overflow: hidden;
}
.timeline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}
.timeline-hint {
    color: #6a6a6a;
}
.timeline-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}
.timeline-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.timeline-nav-btn svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.5;
    transition: stroke 0.35s var(--ease);
}
.timeline-nav-btn:hover {
    background: var(--brand);
    border-color: var(--brand);
}
.timeline-nav-btn:hover svg {
    stroke: var(--white);
}
.timeline-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.timeline-nav-btn:disabled:hover {
    background: var(--white);
    border-color: #d8d8d8;
}
.timeline-nav-btn:disabled:hover svg {
    stroke: var(--ink);
}

/*----------The ruler across the top----------*/
/*the ticks are real elements rather than a gradient, so each one can react
  to the scroll on its own*/
.timeline-ruler {
    position: relative;
    display: flex;
    align-items: center;
    gap: 21px;
    height: 22px;
    margin-bottom: 30px;
    overflow: hidden;
}
.timeline-tick {
    flex: 0 0 1px;
    width: 1px;
    height: 14px;
    background: #d9d9d9;
    transform-origin: 50% 50%;
    transition: background-color 0.45s var(--ease), height 0.45s var(--ease),
                opacity 0.45s var(--ease);
}
/*the travelling band: ticks near the scroll position light up and stretch,
  so the ruler reads as speed rather than a static rule*/
.timeline-tick.is-near {
    background: rgba(227, 6, 19, 0.45);
    height: 18px;
}
.timeline-tick.is-live {
    background: var(--brand);
    height: 22px;
}
/*while the track is actually moving the whole band leans into the travel*/
.timeline-ruler.is-travelling .timeline-tick.is-live {
    animation: tltick 0.6s var(--ease) infinite alternate;
}
@keyframes tltick {
    from {
        opacity: 0.55;
        transform: scaleY(0.78);
    }
    to {
        opacity: 1;
        transform: scaleY(1);
    }
}
/*a fixed gradient stands in when scripting is unavailable*/
.no-js .timeline-ruler {
    display: block;
    background-image: repeating-linear-gradient(90deg, #d9d9d9 0 1px, transparent 1px 22px);
    background-repeat: repeat-x;
    background-size: 22px 14px;
    background-position: 0 50%;
}

/*----------The scroller----------*/
.timeline-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 14px;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.timeline-scroll::-webkit-scrollbar {
    display: none;
}
.timeline-scroll.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}
.timeline-track {
    display: flex;
    /*stretch, so every stage is as tall as the tallest and their red rules
      all come out the same height*/
    align-items: stretch;
    gap: 90px;
    /*matches the container gutter so the first year lines up with the copy*/
    padding: 0 max(15px, calc((100vw - 1320px) / 2 + 15px));
    width: max-content;
}

/*----------A stage: the red rule, then its years----------*/
.timeline-stage {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 40px;
    padding-left: 40px;
}
/*the vertical red rule that opens each stage on the spread*/
.timeline-rule {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--brand);
}

/*----------One year----------*/
.timeline-item {
    display: flex;
    flex-direction: column;
    width: 260px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.timeline-stage.is-shown .timeline-item {
    opacity: 1;
    transform: none;
}
/*never leave the copy hidden if scripting is unavailable*/
.no-js .timeline-item {
    opacity: 1;
    transform: none;
}
.timeline-year {
    position: relative;
    font-family: var(--head-font);
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 18px;
}
/*the marker sitting on the rule, level with the year*/
.timeline-rule::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--brand);
    transform: translateX(-50%);
}
.timeline-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
.timeline-image {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s var(--ease);
}
/*where a year carries two images, they share the room one would take*/
.timeline-image-pair {
    max-height: 200px;
    object-fit: cover;
}
.timeline-item:hover .timeline-image {
    transform: translateY(-4px);
}
.timeline-logo {
    display: block;
    width: auto;
    height: 70px;
    max-width: 100%;
}
.timeline-logo-lead {
    height: 30px;
}
/*the footprints walking away from the first store*/
.timeline-steps {
    display: block;
    width: auto;
    height: 150px;
    margin-top: 6px;
}
.timeline-title {
    font-family: var(--head-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink);
}
/*each point sits over a hairline, as printed*/
.timeline-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}
.timeline-list li {
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--brand);
}
.timeline-list li:last-child {
    margin-bottom: 0;
}
.timeline-inline-logo {
    display: inline-block;
    width: auto;
    height: 18px;
    vertical-align: middle;
    margin-left: 4px;
}

/*----------The 2026 badge----------*/
.timeline-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: var(--brand);
    text-align: center;
    padding: 20px;
    margin-bottom: 20px;
}
.timeline-badge b {
    font-family: var(--head-font);
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    /*the year reads in ink against the red disc, as on the spread*/
    color: var(--ink);
}
.timeline-badge i {
    font-family: var(--head-font);
    font-size: 20px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.3;
    color: var(--white);
    margin-top: 6px;
}

/*----------Closing artwork inside the track----------*/
.timeline-figures {
    align-self: flex-end;
}
.timeline-figures-image {
    display: block;
    width: auto;
    height: 230px;
}

/*----------Progress rail----------*/
.timeline-progress {
    position: relative;
    height: 3px;
    background: #dcdcdc;
    margin-top: 30px;
}
.timeline-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--brand);
}
/*-----------Journey Since Inception Css End-------------*/

/*==========================================================
  SHARED INNER PAGE SECTION RHYTHM
==========================================================*/
.pg-sec {
    padding: 0 0 30px;
}
.pg-sec-last {
    padding-bottom: 0;
}

/*==========================================================
  STORE FORMATS
==========================================================*/
.stf-lead {
    font-weight: 600;
    margin-bottom: 16px;
}

/*----------Sticky format tabs----------*/
.stf-tabs {
    position: sticky;
    top: var(--hdr-h);
    z-index: 20;
    padding: 14px 0;
    background: var(--white);
    transition: top 0.5s var(--ease), opacity 0.4s var(--ease), visibility 0.4s var(--ease), transform 0.4s var(--ease);
}
/*rides to the very top once the header has slid away*/
.stf-tabs.at-top {
    top: 0;
}
/*steps aside once the last section has been scrolled through*/
.stf-tabs.is-gone {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    pointer-events: none;
}
.stf-tabs > .container {
    position: relative;
}
/*the dropdown trigger only appears on small screens*/
.stf-tabs-toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 12px 18px;
    border: 1px solid var(--brand);
    background: var(--brand);
    color: var(--white);
    font-family: var(--head-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
}
.stf-tabs-toggle svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
    transition: transform 0.4s var(--ease);
}
.stf-tabs.open .stf-tabs-toggle svg {
    transform: rotate(180deg);
}
.stf-tabs-row {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 12px;
}
.stf-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 26px;
    border: 1px solid var(--brand);
    background: var(--white);
    color: var(--brand);
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.stf-tab:hover {
    background: var(--brand);
    color: var(--white);
}
.stf-tab.active {
    background: var(--brand);
    color: var(--white);
}

/*----------Brand rows----------*/
.stf-item {
    padding-top: 40px;
}
/*the block opener sits straight under the section start*/
.stf-item-first {
    padding-top: 20px;
}
.stf-logo {
    margin-bottom: 18px;
}
.stf-logo img {
    max-width: 100px;
    height: auto;
}
.stf-item-data p {
    margin-bottom: 16px;
}
.stf-item-tag {
    font-family: var(--head-font);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 14px;
}
.stf-item-head {
    font-family: var(--head-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--brand);
    margin-bottom: 12px;
}
.stf-item-head-ink {
    color: var(--ink);
}

/*----------Fact panel----------*/
.stf-stats {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 26px 0;
    background: var(--line);
}
.stf-stats-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 26px;
}
/*the red rule running down the middle*/
.stf-stats-col + .stf-stats-col::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 26px;
    bottom: 26px;
    width: 8px;
    margin-left: -4px;
    background: var(--brand);
}
.stf-stat {
    display: block;
}
.stf-stat b {
    display: inline;
    margin-right: 5px;
    font-family: var(--head-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink);
}
.stf-stat span {
    display: inline;
    font-size: 16px;
    line-height: 1.4;
    color: var(--ink);
}

/*----------Clarks highlight list----------*/
.stf-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.stf-list li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 10px;
}
.stf-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #000000; 
}

/*----------MetroActiv proof points----------*/
.stf-feature {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 30px;
}
.stf-feature-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex: 1 1 200px;
    padding: 10px 30px;
    text-align: center;
}
/*upright rule between the three points*/
.stf-feature-item + .stf-feature-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 5px;
    background: var(--ink);
}
.stf-feature-top {
    font-family: var(--head-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--brand);
}
.stf-feature-top b {
    font-weight: 700;
    color: var(--ink);
}
/*these logos are viewBox only svgs, so the box needs a definite
  width of its own before the image can size against it*/
.stf-feature-logo {
    display: block;
    width: 100%;
    max-width: 130px;
}
.stf-feature-logo img {
    width: 100%;
    height: auto;
}
.stf-feature-sub {
    font-size: 16px;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--ink);
}

/*----------The two positioning statements----------*/
.stf-statement {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
}
.stf-statement-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    padding: 10px 0;
    text-align: center;
}
.stf-statement-box span {
    display: block;
    max-width: 420px;
    margin: 0 auto;
    font-family: var(--head-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    color: var(--ink);
}
.stf-statement-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--brand);
}
.stf-statement-arrow svg {
    width: 40px;
    height: 110px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

/*----------Footnote----------*/
.stf-note {
    margin-top: 30px;
}
.stf-note span {
    font-size: 13px;
    font-style: italic;
    line-height: 1.5;
    color: #808285;
}
/*-----------Store Formats Css End-------------*/

/*==========================================================
  BUSINESS RESPONSIBILITY
==========================================================*/
.br-head {
    font-family: var(--head-font);
    font-size: 42px;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 10px;
}
.br-item {
    padding-top: 30px;
}
.br-eyebrow {
    font-family: var(--head-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 8px;
}
.br-title {
    font-family: var(--head-font);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 12px;
}
.br-item-data p {
    margin-bottom: 16px;
}

/*----------Headline numbers----------*/
.br-stats {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 26px;
}
/*numbers standing on their own beside the copy get more air*/
.br-stats-wide {
    gap: 40px;
    margin-bottom: 0;
}
/* .br-stats-wide .br-stat-num {
    font-size: 44px;
} */
.br-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--brand);
}
.br-stat-plain {
    padding-bottom: 0;
    border-bottom: 0;
}
.br-stat-num {
    display: block;
    font-family: var(--head-font);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
}
.br-stat-lbl {
    display: block;
    font-size: 16px;
    line-height: 1.4;
    color: var(--ink);
}

/*----------Two pictures, stacked and matched to the copy----------*/
/*the row is stretched rather than centred for this one, so the column
  of pictures takes whatever height the copy beside it comes to. the
  two share that height between them: flex-basis 0 keeps their own
  size out of the reckoning, so it is the copy that sets the row and
  not the pictures*/
.br-item-img-stack {
    position: relative;
    width: 100%;
    height: 100%;
}
/*owl carries its own boxes between the frame and the pictures, and
  every one of them has to pass the height down or the run collapses
  to whatever the first picture happens to be*/
.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: 100%;
}
.br-item-img-stack img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/*before owl has hold of it only the first is shown, so the frame does
  not stand as a column of two for the moment the page takes to load*/
.br-item-img-stack:not(.owl-loaded) img + img {
    display: none;
}
/*the marks sit on the picture rather than under it, so the frame keeps
  the height the copy beside it sets*/
.br-item-img-stack .owl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 7px;
}
.br-item-img-stack .owl-dots button.owl-dot span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 4px rgba(12, 12, 14, 0.55);
    transition: background 0.35s var(--ease), width 0.35s var(--ease);
}
.br-item-img-stack .owl-dots button.owl-dot.active span {
    width: 22px;
    border-radius: 4px;
    background: var(--brand);
}
.br-row-stretch {
    align-items: stretch;
}
.br-row-stretch > [class*="col-"] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/*a full width picture closing off an initiative row*/
.br-item-full {
    margin: 20px 0;
}

/*the figure and the sdg strip share a line*/
.br-inline {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
}
/*the figure only takes the room its caption needs, so the sdg strip
  sits comfortably alongside instead of being pushed to the edge*/
.br-inline .br-stats {
    flex: 0 1 auto;
    max-width: 300px;
    margin-bottom: 0;
}
.br-inline .br-stat-num {
    font-size: 26px;
}
.br-inline .br-sdg {
    flex: 0 0 auto;
}

/*two figures standing side by side rather than stacked*/
.br-stats-row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px;
}
.br-stats-row .br-stat {
    flex: 1 1 0;
    min-width: 0;
}

/*----------Aligned UN SDGs----------*/
.br-sdg-head {
    font-family: var(--head-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: 12px;
}
.br-sdg-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.br-sdg-row img {
    width: 62px;
    height: auto;
}

/*----------Supporting photography----------*/
.br-gallery {
    margin-top: 26px;
}
.br-gallery-img {
    position: relative;
    margin-bottom: 20px;
}
.br-gallery-tag {
    position: absolute;
    left: 12px;
    top: 12px;
    padding: 5px 12px;
    background: var(--ink);
    color: var(--white);
    font-size: 13px;
    line-height: 1.2;
}
/*the after shot carries its label on the far side*/
.br-gallery-tag-end {
    left: auto;
    right: 12px;
}

/*==========================================================
  VATAVARAN PROGRESS CHART
==========================================================*/
.br-chart {
    margin-top: 34px;
}
.br-chart-head {
    font-family: var(--head-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
}
.br-chart-sub {
    display: block;
    font-size: 16px;
    line-height: 1.4;
    color: var(--ink);
    margin-bottom: 24px;
}
/*viewBox only svg, so the box sets the width and the image fills it*/
.br-chart-img {
    max-width: 100%;
    margin-top: 4px;
}
.br-chart-img img {
    width: 100%;
    height: auto;
}
/*-----------Business Responsibility Css End-------------*/

/*==========================================================
  E-COMMERCE OPERATIONS
==========================================================*/
.eco-head {
    font-family: var(--head-font);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--brand);
    margin-bottom: 12px;
}
.eco-head-ink {
    font-family: var(--head-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: 12px;
}
.eco-col p {
    margin-bottom: 16px;
}
.eco-chart {
    margin-bottom: 20px;
}
/*the momentum graph reads better a touch smaller than its column*/
.eco-chart-sm {
    max-width: 380px;
}
.eco-chart-pie {
    max-width: 330px;
}
.eco-img {
    margin-bottom: 20px;
}
.eco-img-flush {
    margin-bottom: 0;
}

/*----------Headline numbers----------*/
.eco-stats {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 20px;
}
.eco-stats-wide {
    gap: 34px;
}
.eco-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--brand);
}
.eco-stat-num {
    display: block;
    font-family: var(--head-font);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
}
.eco-stat-lbl {
    display: block;
    font-size: 16px;
    line-height: 1.4;
    color: var(--ink);
}

/*----------Footnotes----------*/
.eco-note {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.eco-note span {
    font-size: 13px;
    font-style: italic;
    line-height: 1.5;
    color: #808285;
}

/*----------The two website channels----------*/
.eco-channel-row {
    margin-top: 20px;
}
.eco-channel {
    position: relative;
    padding-top: 62px;
}
/*the marker runs a lead line out towards the illustration*/
.eco-channel::before {
    content: "";
    position: absolute;
    top: 19px;
    left: 38px;
    right: 0;
    height: 1px;
    background: var(--brand);
}
.eco-channel-end::before {
    left: 0;
    right: 38px;
}
.eco-channel-num {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--white);
    font-family: var(--head-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}
.eco-channel-end .eco-channel-num {
    left: auto;
    right: 0;
}
.eco-channel-head {
    position: relative;
    font-family: var(--head-font);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
    padding-bottom: 14px;
    margin-bottom: 16px;
}
/*short rule under the heading, not a full underline*/
.eco-channel-head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 3px;
    background: var(--brand);
}
.eco-channel-txt {
    display: block;
    font-size: 16px;
    line-height: 1.7;
}
/*each address opens in its own tab. they carry the section's ink until
  the pointer is on one, which is when the brand and the underline come
  up together*/
.eco-channel-txt a {
    color: var(--ink);
    border-bottom: 1px solid transparent;
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.eco-channel-txt a:hover,
.eco-channel-txt a:focus-visible {
    color: var(--brand);
    border-bottom-color: var(--brand);
}
/*the rule between them is a separator, not part of an address*/
.eco-channel-txt i {
    font-style: normal;
    color: var(--line);
}
.eco-channel-img {
    margin-bottom: 20px;
}
/*-----------E-commerce Operations Css End-------------*/

/*==========================================================
  RETAIL NETWORK
==========================================================*/
.rn-head {
    font-family: var(--head-font);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--brand);
    margin-bottom: 12px;
}
.rn-head-ink {
    font-family: var(--head-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink);
    margin-bottom: 16px;
}
.rn-block p {
    margin-bottom: 16px;
}
.rn-chart {
    margin-bottom: 16px;
}
.rn-map {
    margin-bottom: 20px;
}
/*the three shots sit small and bottom aligned against the map*/
.rn-shots {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 26px;
    height: 100%;
    max-width: 215px;
    margin-left: auto;
    padding-bottom: 20px;
}
.rn-shot img {
    width: 100%;
}

/*----------Donut charts----------*/
/*the three pies are viewBox only svgs, so without a width of their own
  they fall back to the browser default and sit short of the frame at
  differing offsets. filling the box lines all three up at one size*/
.rn-donut {
    max-width: 320px;
    margin: 0 auto 20px;
}
.rn-donut .rn-chart {
    margin-bottom: 0;
}
.rn-donut .rn-chart img {
    width: 100%;
    height: auto;
}

/*----------Store counts by brand----------*/
.rn-panel {
    position: relative;
    margin-top: 16px;
    padding: 46px 26px 10px;
    border: 1px solid var(--brand);
}
/*the label straddles the top rule, masking it with the page colour*/
.rn-panel-head {
    position: absolute;
    top: 0;
    right: 26px;
    transform: translateY(-50%);
    padding: 0 14px;
    background: var(--white);
    font-family: var(--head-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--brand);
}
.rn-count {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}
.rn-count-logo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 96px;
    flex: 0 0 auto;
}
.rn-count-logo img {
    max-width: 100%;
    height: 60px;
}
/*short rule sitting under the figure, not across the cell*/
.rn-count-num {
    display: block;
    width: 92px;
    padding-bottom: 6px;
    border-bottom: 5px solid var(--brand);
    font-family: var(--head-font);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
    flex: 0 0 auto;
}

/*----------Footnotes----------*/
.rn-note {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 14px;
}
.rn-note span {
    font-size: 13px;
    font-style: italic;
    line-height: 1.5;
    color: #808285;
}
/*-----------Retail Network Css End-------------*/

/*----------Each brand carries its own rule colour----------*/
.rn-line-metro {
    border-bottom-color: #ed1c24;
}
.rn-line-mochi {
    border-bottom-color: #8bd3e6;
}
.rn-line-walkway {
    border-bottom-color: #1f3864;
}
.rn-line-crocs {
    border-bottom-color: #3f7332;
}
.rn-line-fitflop {
    border-bottom-color: #6d6e71;
}
.rn-line-footlocker {
    border-bottom-color: #f58063;
}
.rn-line-newera {
    border-bottom-color: #f9ce8e;
}
.rn-line-fila {
    border-bottom-color: #e6187e;
}
.rn-line-metroactiv {
    border-bottom-color: #5e1a2c;
}

/*==========================================================
  TESTIMONIALS
==========================================================*/
.ts-block .row {
    row-gap: 40px;
}
/*a hairline closes off each testimonial*/
.ts-card {
    position: relative;
    min-height: 100%;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--brand);
}
.ts-card-head {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}
/*the red mark, with the name plate closing off its foot*/
.ts-quote {
    position: relative;
    display: block;
    width: 200px;
    flex: 0 0 auto;
}
.ts-quote > img {
    display: block;
    width: 100%;
    height: auto;
}
/*sits flush against the mark, bottoms aligned*/
.ts-photo {
    position: relative;
    z-index: 3;
    width: 217px;
    flex: 0 0 auto;
}

/*----------Name plate----------*/
.ts-plate {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    padding: 12px 20px;
}
.ts-name {
    font-family: var(--head-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--white);
}
.ts-role {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.3;
    color: var(--white);
}

.ts-card-body {
    padding-top: 26px;
}
.ts-card-body p {
    margin-bottom: 16px;
}
.ts-card-body p:last-child {
    margin-bottom: 0;
}
/*-----------Testimonials Css End-------------*/

/*==========================================================
  FINANCIAL PERFORMANCE
==========================================================*/
/*----------The two tables, one row of tabs----------*/
.fp-tabs-wrap {
    position: relative;
    margin-bottom: 26px;
}
/*it stands for whichever tab is open, so it is dressed like the pill
  that would be open on a wider screen: the brand, filled*/
.fp-tabs-toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--brand);
    border-radius: 50px;
    background: var(--brand);
    color: var(--white);
    font-family: var(--head-font);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.fp-tabs-toggle svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
    transition: transform 0.4s var(--ease);
}
.fp-tabs-wrap.open .fp-tabs-toggle svg {
    transform: rotate(180deg);
}
/*half the row each, so the pair reads as one control rather than
  two labels of whatever width their words happen to want*/
.fp-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
/*the one not chosen is a quiet outline on the white*/
.fp-tab {
    min-width: 0;
    padding: 15px 18px;
    border: 1px solid var(--line);
    border-radius: 50px;
    background: var(--white);
    cursor: pointer;
    font-family: var(--head-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--ink);
    transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.fp-tab:hover {
    border-color: var(--ink);
}
/*and the chosen one is filled with the brand, so the eye lands on the
  table it opens rather than on the one it does not*/
.fp-tab.is-active {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--white);
}
.fp-panel {
    display: none;
}
.fp-panel.is-active {
    display: block;
}

.fp-table-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.fp-head {
    font-family: var(--head-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--brand);
}
.fp-panel .fp-table-top {
    justify-content: flex-end;
}
.fp-unit {
    font-size: 16px;
    line-height: 1.3;
    color: var(--ink);
}

/*----------The data tables----------*/
.fp-table-wrap {
    width: 100%;
    overflow-x: auto;
}
.fp-table {
    width: 100%;
    border-collapse: collapse;
    border-bottom: 2px solid var(--brand);
}
.fp-table th {
    padding: 6px 10px;
    background: var(--line);
    border-bottom: 2px solid var(--brand);
    font-family: var(--head-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-align: right;
    white-space: nowrap;
    color: var(--ink);
}
/*the closing year is called out in brand red*/
.fp-table th:last-child {
    background: var(--brand);
    color: var(--white);
}
.fp-table th:first-child {
    text-align: left;
}
.fp-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
    line-height: 1.4;
    text-align: right;
    white-space: nowrap;
    color: var(--ink);
}
.fp-table td:first-child {
    min-width: 220px;
    text-align: left;
    white-space: normal;
}
.fp-table td:last-child {
    background: var(--line);
}
.fp-table tbody tr:last-child td {
    border-bottom: 0;
}
.fp-table sup {
    font-size: 0.7em;
    top: -0.5em;
}

/*----------Graphs----------*/
.fp-graph {
    margin-bottom: 30px;
    padding: 20px 25px;
    max-width: 510px;
    box-shadow: 0 2px 14px rgba(12, 12, 14, 0.10);;
}
/*the six artworks share a 350 width but run to different heights, and the
  titles run to one line or two. a common frame and a fixed title height
  keep the pair on each row at one size, sitting on one baseline*/
.fp-graph img {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 350 / 298;
    height: auto;
    object-fit: contain;
    object-position: left bottom;
}
.fp-graph-head {
    font-family: var(--head-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--brand);
    /*two lines worth, so a one line title does not lift its graph
      above the one beside it*/
    min-height: 47px;
    margin-bottom: 14px;
}

/*----------Footnotes----------*/
.fp-note {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 14px;
}
.fp-note span {
    font-size: 14px;
    font-style: italic;
    line-height: 1.5;
    color: #808285;
}
/*-----------Financial Performance Css End-------------*/

/*==========================================================
  BOARD OF DIRECTORS
==========================================================*/
.bod-block .row {
    row-gap: 30px;
}
/*a soft card rather than ruled divisions*/
.bod-card {
    position: relative;
    min-height: 100%;
    padding: 16px 16px 22px;
    background: var(--white);
    box-shadow: 0 2px 14px rgba(12, 12, 14, 0.10);
}
.bod-photo {
    margin-bottom: 16px;
}
.bod-photo img {
    width: 100%;
}
.bod-name {
    font-family: var(--head-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--brand);
    margin-bottom: 4px;
}
.bod-role {
    display: block;
    font-size: 16px;
    line-height: 1.4;
    color: var(--ink);
    margin-bottom: 12px;
}
.bod-role sup {
    font-size: 0.7em;
    top: -0.5em;
}
.bod-note {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    font-style: italic;
    line-height: 1.5;
    color: #808285;
}
.bod-note sup {
    font-size: 0.85em;
    top: -0.4em;
}
/*-----------Board of Directors Css End-------------*/



/*==========================================================
  BANNER + PREV/NEXT FOR THE EIGHT CORPORATE OVERVIEW PAGES
  Same rules as the inner-banner / page-nav blocks above, under
  the class names those pages use.
==========================================================*/
.inr-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100svh;
    margin-bottom: 40px;
    overflow: hidden;
    background: var(--dark);
}
.inr-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.inr-banner-bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
}
.inr-banner-bg .inr-bg-img-mbl {
    display: none;
}
/*keeps the copy readable over any supplied image*/
.inr-banner-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(90deg, rgba(12, 12, 14, 0.74) 0%, rgba(12, 12, 14, 0.58) 40%, rgba(12, 12, 14, 0.30) 70%, rgba(12, 12, 14, 0.10) 100%);
}

/*----------Breadcrumb, sits directly under the header----------*/
.inr-crumb {
    position: relative;
    z-index: 3;
    padding: 18px 0;
}
.inr-crumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.inr-crumb-list li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.inr-crumb-list a {
    font-size: 14px;
    color: #ffffff;
    transition: color 0.35s var(--ease);
}
.inr-crumb-list a:hover {
    color: var(--brand);
}
.inr-crumb-list span {
    font-size: 14px;
}
.inr-crumb-list span {
    font-size: 14px;
    color: var(--white);
}

/*----------Copy block, centred top to bottom----------*/
.inr-banner-body {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    width: 100%;
    padding: 60px 0;
}
.inr-banner-body .row {
    width: 100%;
}
.inr-banner-eyebrow {
    font-family: var(--head-font);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 14px;
}
.inr-banner-head {
    font-family: var(--head-font);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--brand);
}
.inr-banner-head span {
    display: block;
}
/*----------Plain variant: no background image or colour, height follows the copy----------*/
.inr-banner.inr-banner-plain {
    height: auto;
    background: transparent;
}
.inr-banner-plain .inr-banner-body {
    flex: 0 0 auto;
    padding: 10px 0 0;
}
.inr-banner-plain .inr-crumb-list a {
    color: var(--ink);
}
.inr-banner-plain .inr-crumb-list a:hover {
    color: var(--brand);
}
.inr-banner-plain .inr-crumb-list span {
    color: var(--ink);
}
.inr-banner-plain .inr-banner-eyebrow {
    color: var(--ink);
}

/*==========================================================
  CHAIRMAN'S COMMUNIQUE — BANNER
  Sits after the shared inner-banner rules above, so the grey
  ground outranks .inr-banner.inr-banner-plain's transparent.
==========================================================*/
/*two classes, to outrank .inr-banner.inr-banner-plain*/
.inr-banner.chairman-banner-dark {
    background: #2b2b2f;
    /*the plain variant drops its bottom gap; the grey ground continues below*/
    margin-bottom: 0;
}
.chairman-banner-dark .inr-crumb-list a,
.inr-banner-plain.chairman-banner-dark .inr-crumb-list a {
    color: rgba(255, 255, 255, 0.65);
}
.chairman-banner-dark .inr-crumb-list a:hover,
.inr-banner-plain.chairman-banner-dark .inr-crumb-list a:hover {
    color: var(--brand);
}
.chairman-banner-dark .inr-crumb-list span,
.inr-banner-plain.chairman-banner-dark .inr-crumb-list span,
.inr-banner-plain.chairman-banner-dark .inr-banner-eyebrow {
    color: var(--white);
}
/*the headline reads red against the grey*/
.inr-banner.chairman-banner-dark .inr-banner-head {
    color: var(--brand);
}
/*-----------Chairman Communique Banner Css End-------------*/


.pg-nav {
    padding: 50px 0;
}
.pg-nav .row {
    row-gap: 20px;
}
.pg-nav-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--line);
    background: var(--white);
    overflow: hidden;
    transition: border-color 0.5s var(--ease), transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.pg-nav-prev {
    justify-content: flex-start;
}
.pg-nav-next {
    justify-content: flex-end;
    text-align: right;
}
.pg-nav-btn > * {
    position: relative;
    z-index: 3;
}

/*----------Brand wipe, travels in the direction of the link----------*/
.pg-nav-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: linear-gradient(100deg, var(--brand) 0%, var(--brand-dk) 100%);
    transform: scaleX(0);
    transition: transform 0.6s var(--ease);
}
.pg-nav-prev::before {
    transform-origin: 100% 50%;
}
.pg-nav-next::before {
    transform-origin: 0 50%;
}
.pg-nav-btn:hover::before {
    transform: scaleX(1);
}

/*----------Light sweeping across once the wipe lands----------*/
.pg-nav-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    z-index: 2;
    width: 55%;
    height: 100%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg);
    pointer-events: none;
}
.pg-nav-btn:hover::after {
    animation: pgnavshine 1s var(--ease) 0.15s;
}
@keyframes pgnavshine {
    from {
        left: -150%;
    }
    to {
        left: 150%;
    }
}



/*----------Arrow disc----------*/
.pg-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink);
    flex: 0 0 auto;
    overflow: hidden;
    transition: color 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease), transform 0.5s var(--ease);
}
.pg-nav-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.pg-nav-btn:hover .pg-nav-icon {
    color: var(--brand);
    background: var(--white);
    border-color: var(--white);
}
.pg-nav-prev:hover .pg-nav-icon {
    transform: translateX(-4px);
}
.pg-nav-next:hover .pg-nav-icon {
    transform: translateX(4px);
}
/*arrow leaves one side and returns from the other*/
.pg-nav-prev:hover .pg-nav-icon svg {
    animation: pgnavleft 0.7s var(--ease);
}
.pg-nav-next:hover .pg-nav-icon svg {
    animation: pgnavright 0.7s var(--ease);
}
@keyframes pgnavleft {
    45% {
        transform: translateX(-26px);
        opacity: 0;
    }
    46% {
        transform: translateX(26px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes pgnavright {
    45% {
        transform: translateX(26px);
        opacity: 0;
    }
    46% {
        transform: translateX(-26px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/*----------Label----------*/
.pg-nav-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.pg-nav-next .pg-nav-txt {
    align-items: flex-end;
}
.pg-nav-txt b {
    display: block;
    font-family: var(--head-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    transition: color 0.5s var(--ease);
}
.pg-nav-btn:hover .pg-nav-txt b {
    color: var(--white);
}

/*==========================================================
  CHAIRMAN'S COMMUNIQUE — PAGE NAV
  Sits after the shared .pg-nav rules above so the grey ground
  and light-on-dark text take effect.
==========================================================*/
.chairman-pg-nav {
    background: #2b2b2f;
}
.chairman-pg-nav .pg-nav-btn {
    border-color: rgba(255, 255, 255, 0.22);
    background: transparent;
}
.chairman-pg-nav .pg-nav-txt b {
    color: var(--white);
}
.chairman-pg-nav .pg-nav-icon {
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--white);
}
/*-----------Chairman Communique Page Nav Css End-------------*/




/*==========================================================
  DIRECTOR AND MANAGEMENT CARDS, DETAIL MODAL
  the grid carries the picture, name and role only; the
  biography lives in the card but is held back for the modal
==========================================================*/
.bod-bio {
    display: none;
}
.bod-card {
    cursor: pointer;
    transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.bod-card:hover,
.bod-card:focus-visible {
    box-shadow: 0 10px 26px rgba(12, 12, 14, 0.16);
    transform: translateY(-3px);
}
.bod-card .bod-photo {
    overflow: hidden;
}
.bod-card .bod-photo img {
    transition: transform 0.6s var(--ease);
}
.bod-card:hover .bod-photo img,
.bod-card:focus-visible .bod-photo img {
    transform: scale(1.04);
}
.bod-card:hover .bod-name,
.bod-card:focus-visible .bod-name {
    color: var(--brand-dk);
}
.bod-card:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 4px;
}

/*----------The modal----------*/
/*the header sits at 9990, so the dialog and its backdrop have to
  clear it or they open underneath*/
.bod-modal {
    --bs-modal-zindex: 10000;
}
.modal-backdrop {
    --bs-backdrop-zindex: 9995;
}
.bod-modal .modal-content {
    position: relative;
    border: 0;
    border-radius: 0;
    background: var(--white);
}
.bod-modal .modal-body {
    padding: 40px;
}
.bod-modal-photo {
    margin-bottom: 20px;
}
.bod-modal-name {
    font-family: var(--head-font);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--brand);
    margin-bottom: 4px;
}
.bod-modal-role {
    display: block;
    font-size: 16px;
    line-height: 1.4;
    color: var(--ink);
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--brand);
}
.bod-modal-role sup {
    font-size: 0.7em;
    top: -0.5em;
}
.bod-modal-bio p {
    margin-bottom: 14px;
}
.bod-modal-bio .bod-note {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    font-style: italic;
    line-height: 1.5;
    color: #808285;
}
.bod-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--brand);
    color: var(--white);
    cursor: pointer;
    transition: background 0.4s var(--ease);
}
.bod-modal-close:hover {
    background: var(--ink);
}
.bod-modal-close svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}
/*-----------Director Modal Css End-------------*/

/*==========================================================
  HOME, SMALL SCREEN BEHAVIOURS
  the competencies pills become a dropdown and the journey
  becomes a slider once the row no longer fits
==========================================================*/
.cc-tabs-wrap {
    position: relative;
}
/*it stands for whichever tab is open, so it is dressed like the pill
  that would be open on a wider screen: the brand, filled*/
.cc-tabs-toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--brand);
    background: var(--brand);
    color: var(--white);
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.cc-tabs-toggle svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
    transition: transform 0.4s var(--ease);
}
.cc-tabs-wrap.open .cc-tabs-toggle svg {
    transform: rotate(180deg);
}

/*----------The journey slider----------*/
.jr-track.owl-carousel .jr-item {
    width: 100%;
    margin-bottom: 0;
}
.jr-track .owl-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
}
.jr-track .owl-nav button.owl-prev,
.jr-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);
    font-size: 20px;
    line-height: 1;
}
.jr-track .owl-nav button.owl-prev.disabled,
.jr-track .owl-nav button.owl-next.disabled {
    opacity: 0.35;
}
.jr-track .owl-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
.jr-track .owl-dots button.owl-dot span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line);
}
.jr-track .owl-dots button.owl-dot.active span {
    background: var(--brand);
}
/*-----------Home Small Screen Css End-------------*/
.inr-banner-bg.brsrinnebg::after{
    content: none !important;
}
/*----------The footprints under the first stage----------*/
/*.jr-body img sets a cropped photo frame, which this is not, so the
  selector has to outweigh it*/
.jr-body img.jr-steps {
    display: block;
    width: auto;
    max-width: 100%;
    height: 110px;
    object-fit: contain;
    margin-top: 8px;
    margin-bottom: 0;
}
.mtbtm30pxhead{
    margin-bottom: 30px;
}



/*----------The report title on the banner----------*/
/*set as live text rather than a picture, so it stays sharp at any
  size. the artwork is a heavy condensed oblique, which is Open Sans
  at its heaviest italic, squeezed on the horizontal and leaned a
  little further over*/
.hm-title {
    position: absolute;
    top: 50%;
    right: 6%;
    z-index: 3;
    transform: translateY(-50%);
    /*the squeeze is applied to each line, so it reads from the left*/
    text-align: left;
    pointer-events: none;
}
.hm-title span {
    display: block;
    font-family: var(--head-font);
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--brand);
    white-space: nowrap;
    transform: skewX(-6deg) scaleX(0.86);
    transform-origin: 0 50%;
}
.hm-title .hm-title-sm {
    margin-bottom: 10px;
    color: #6b6b6b;
    font-size: clamp(15px, 2.1vw, 34px);
    line-height: 1;
}
.hm-title-lg {
    font-size: clamp(44px, 8.4vw, 132px);
    line-height: 0.94;
}
.logohgt50{
    height: 50px;
}
.stgmetroactivlogo145 img{
    max-width: 145px;
}
.imgmarbottm0 img,.imgmarbottm0{
    margin-bottom: 0;
}
.jr-list li .jr-logo-end.hgt76 img{
    height: 76px;
}
.objtcontain{
    object-fit: initial;
}
.ab-slide{
    /* background-color: #ededee; */
    border-radius: 5px;
}
.ab-logo{
    /* background: #ededee; */
    border: none;
}
/*==========================================================
  SLIDERS — LETTING THE PAGE SCROLL THROUGH THEM
  Owl claims the touch the moment one lands on its stage and
  calls preventDefault on the move, so a finger that came down
  on a slider could not scroll the page — it had to be placed
  beside one. This hands the vertical back to the browser:
  pan-y says the page owns up-and-down and the slider owns
  side-to-side, so a swipe down the page carries on through a
  slider and a swipe across it still turns the slides.
==========================================================*/
/*owl.carousel.min.css sets touch-action:none on the item once dragging
  is armed, and the slide content sits inside that item — so every touch
  that landed on a slider met an element the browser was told not to pan
  at all. pan-y overrides it on all three: the page keeps up-and-down,
  the slider keeps side-to-side*/
.owl-carousel .owl-stage-outer,
.owl-carousel .owl-stage,
.owl-carousel.owl-drag .owl-item {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}