@font-face {
  font-family: "Axiforma";
  src: url("../fonts/AxiformaRegular.eot");
  src: url("../fonts/AxiformaRegular.eot") format("embedded-opentype"), url("../fonts/AxiformaRegular.woff2") format("woff2"), url("../fonts/AxiformaRegular.woff") format("woff"), url("../fonts/AxiformaRegular.ttf") format("truetype"), url("../fonts/AxiformaRegular.svg#AxiformaRegular") format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Axiforma";
  src: url("../fonts/AxiformaMedium.eot");
  src: url("../fonts/AxiformaMedium.eot") format("embedded-opentype"), url("../fonts/AxiformaMedium.woff2") format("woff2"), url("../fonts/AxiformaMedium.woff") format("woff"), url("../fonts/AxiformaMedium.ttf") format("truetype"), url("../fonts/AxiformaMedium.svg#AxiformaMedium") format("svg");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Axiforma";
  src: url("../fonts/AxiformaSemiBold.eot");
  src: url("../fonts/AxiformaSemiBold.eot") format("embedded-opentype"), url("../fonts/AxiformaSemiBold.woff2") format("woff2"), url("../fonts/AxiformaSemiBold.woff") format("woff"), url("../fonts/AxiformaSemiBold.ttf") format("truetype"), url("../fonts/AxiformaSemiBold.svg#AxiformaSemiBold") format("svg");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Axiforma";
  src: url("../fonts/AxiformaBold.eot");
  src: url("../fonts/AxiformaBold.eot") format("embedded-opentype"), url("../fonts/AxiformaBold.woff2") format("woff2"), url("../fonts/AxiformaBold.woff") format("woff"), url("../fonts/AxiformaBold.ttf") format("truetype"), url("../fonts/AxiformaBold.svg#AxiformaBold") format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "RupeeForadian";
  src: url("../fonts/Rupee_Foradian.eot");
  src: url("../fonts/Rupee_Foradian.eot") format("embedded-opentype"), url("../fonts/Rupee_Foradian.woff2") format("woff2"), url("../fonts/Rupee_Foradian.woff") format("woff"), url("../fonts/Rupee_Foradian.ttf") format("truetype"), url("../fonts/Rupee_Foradian.svg#Rupee_Foradian") format("svg");
}
.rs {
  font-family: "RupeeForadian";
}

/*  */
/* WEBKIT SCROLLBAR */
/* **************** */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 4px rgba(120, 120, 120, 0.5);
}

/* Handle */
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 6px;
  border-radius: 6px;
  background: rgba(120, 120, 120, 0.6);
  -webkit-box-shadow: inset 0 0 4px rgba(120, 120, 120, 0.6);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(120, 120, 120, 0.4);
}

body {
  margin: 0px;
  padding: 0px;
  font-size: 20px;
  font-weight: 400;
  font-family: "Axiforma";
}

/* BREAKPOINTS */
/* *********** */
/* THEME TOKENS */
/* ************ *
   Light is the page's own theme; dark is the same page with the plate turned
   down. The banner artwork is a dark photograph either way, so everything
   sitting on it - the header, the scroll cue - keeps its light ink in both. */
:root {
  --gr-gutter: 72px;
  /* the copy sits a little further in than the header does */
  --gr-bnr-inset: 108px;
  --gr-page-bg: #ffffff;
  --gr-text: #1a1a1a;
  /* the brand green, in one place - the label dot, the name in the heading and
     the rule under a call to action all read off it */
  --gr-green: #8cc63f;
  /* a call to action is one component wherever it lands, so it works off its
     own tokens; a section that sits on its own plate re-points them at that
     plate's ink (see ABOUT) and the component itself is left alone */
  --gr-cta-ink: var(--gr-text);
  --gr-cta-rule: rgba(26, 26, 26, 0.28);
  /* line art is drawn once, in the ink it reads in on a light page, and
     flattened to white where the page turns dark */
  --gr-ico-filter: none;
  /* THEME INTRO - the list sits on the page itself, the open row on a plate of
     its own that does not change between themes, so the ink on it is fixed */
  --gr-ti-ink: #1a0e50;
  --gr-ti-body: rgba(26, 14, 80, 0.86);
  --gr-ti-rule: rgba(26, 14, 80, 0.14);
  --gr-ti-card: #2b1069;
  --gr-ti-card-ink: #ffffff;
  --gr-ti-card-body: rgba(255, 255, 255, 0.86);
  --gr-ti-card-rule: rgba(255, 255, 255, 0.34);
  /* OUR BUSINESSES - the deck stands on the page's own white, and the cards
     are photographs in both themes, so their ink is fixed and only the wash
     that carries it over the picture is turned up in the dark */
  --gr-ob-bg: #ffffff;
  --gr-ob-ink: #1a0e50;
  --gr-ob-count-all: rgba(26, 14, 80, 0.4);
  --gr-ob-card-ink: #ffffff;
  --gr-ob-card-body: rgba(255, 255, 255, 0.92);
  --gr-ob-scrim-top: 0.44;
  --gr-ob-scrim-foot: 0.62;
  --gr-ob-card-shadow: 0 18px 40px rgba(26, 14, 80, 0.16);
  /* PERFORMANCE SNAPSHOT - the plate is deep indigo whichever way the page is
     set, so its ink is fixed and the dark theme only takes it down a little
     further to sit with the rest */
  --gr-ps-plate: #1e1250;
  --gr-ps-ink: #ffffff;
  --gr-ps-body: rgba(255, 255, 255, 0.72);
  --gr-ps-rule: rgba(255, 255, 255, 0.22);
  --gr-ps-off: rgba(255, 255, 255, 0.46);
  /* the line being read is set into the plate rather than lifted off it - the
     box goes darker and its edge sharper, and the rest wash back */
  --gr-ps-key-bg: rgba(255, 255, 255, 0.045);
  --gr-ps-key-bg-on: rgba(6, 3, 26, 0.55);
  --gr-ps-key-edge: rgba(255, 255, 255, 0.1);
  --gr-ps-key-edge-on: rgba(255, 255, 255, 0.26);
  --gr-ps-track: #2f2266;
  /* one colour a line of spending - soft against the indigo, since each is
     read on its own with the rest of the ring left as track */
  --gr-ps-c1: #a5dc86;
  --gr-ps-c2: #f7b3ae;
  --gr-ps-c3: #9c8c6a;
  --gr-ps-c4: #b3b0d8;
  --gr-ps-c5: #f2504e;
  /* ESG HIGHLIGHTS - the three cards are brand pastels and do not change with
     the page, so their ink is fixed too; only the plate under them moves */
  --gr-esg-plate: #1e1250;
  --gr-esg-ink: #2d1f66;
  --gr-esg-rule: rgba(45, 31, 102, 0.18);
  --gr-esg-rail-ink: #ffffff;
  --gr-esg-gov: #dcd6cb;
  --gr-esg-gov-rail: #c9c1b4;
  --gr-esg-soc: #fbdcd7;
  --gr-esg-soc-rail: #e5bcb7;
  --gr-esg-env: #c6dae4;
  --gr-esg-env-rail: #adc3ce;
  --gr-esg-dot: rgba(255, 255, 255, 0.32);
  --gr-esg-dot-on: #ffffff;
  /* THE MESSAGES - the plate stands a shade off the page and the ink flips
     with the theme. The unlit tabs are held well off the read one, and the
     frame is the ground the portrait is laid on while it loads. */
  --gr-mc-bg: #f9f9f9;
  --gr-mc-ink: #221264;
  --gr-mc-body: rgba(34, 18, 100, 0.88);
  --gr-mc-role: rgba(34, 18, 100, 0.7);
  --gr-mc-rule: rgba(34, 18, 100, 0.18);
  --gr-mc-tab-off: rgba(34, 18, 100, 0.42);
  --gr-mc-frame: #eceef5;
  /* STRATEGIC PRIORITIES - a ruled band on the page's own ground. The card
     under the pointer is turned over: it takes the ink as its ground and hands
     its own back, which is why the lit set is named apart rather than being
     the same tokens at another opacity. */
  --gr-sp-ink: #1a0e50;
  --gr-sp-body: rgba(26, 14, 80, 0.88);
  --gr-sp-num: rgba(26, 14, 80, 0.17);
  --gr-sp-rule: rgba(26, 14, 80, 0.12);
  --gr-sp-fill: #1a0e50;
  --gr-sp-on-ttl: var(--gr-green);
  --gr-sp-on-body: rgba(255, 255, 255, 0.88);
  --gr-sp-on-num: rgba(255, 255, 255, 0.26);
  /* OUR STAKEHOLDERS - a pale sky of its own, lit from the top left. The tiles
     in front of the eight are pictures with their green already in them, so
     there is no token for that here - only for what is written beside them. */
  --gr-st-sky-a: #eaf4fd;
  --gr-st-sky-b: #d8ecfa;
  --gr-st-glow: rgba(255, 255, 255, 0.9);
  --gr-st-ink: #1a0e50;
  --gr-st-body: rgba(26, 14, 80, 0.9);
  --gr-st-rule: rgba(26, 14, 80, 0.28);
  /* DOUBLE MATERIALITY - a dark photograph in either theme, so what stands on
     it keeps its light ink in both and only the plate under it is turned down.
     The scrim is laid into the two corners the copy stands in, not across the
     whole picture, so the water in the middle of it is left alone. */
  --gr-dm-ink: #ffffff;
  --gr-dm-body: rgba(255, 255, 255, 0.92);
  --gr-dm-rule: rgba(255, 255, 255, 0.42);
  --gr-dm-scrim: 0.3;
  --gr-dm-media-brightness: 1;
  /* THE STORIES - photographs again, and dark enough in all three that the ink
     is fixed light rather than flipped. Each plate carries its own colour for
     the keys beside its focus areas, which is set on the plate, not here. */
  --gr-sc-ink: #ffffff;
  --gr-sc-body: rgba(255, 255, 255, 0.92);
  --gr-sc-rule: rgba(255, 255, 255, 0.34);
  --gr-sc-thumb-on: #ffffff;
  --gr-sc-scrim: 0.5;
  --gr-sc-media-brightness: 1;
  /* DOWNLOAD CENTRE - a plate a shade off the page. The badge on each row is
     artwork with its ring and its ground already in it, so it is turned rather
     than recoloured where the page goes dark; the plain glyph on the left rail
     has nothing but ink in it and is simply flipped. */
  --gr-dc-bg: #f8f8f8;
  --gr-dc-ink: #1a0e50;
  --gr-dc-rule: rgba(26, 14, 80, 0.14);
  --gr-dc-badge-filter: none;
  --gr-dc-glyph-filter: none;
  /* FOOTER - the page's own ground, so it reads as the end of the page rather
     than as one more plate on it. The mark's bar is the studio's orange in
     either theme; only the letter under it takes the page's ink. */
  --gr-ft-bg: var(--gr-page-bg);
  --gr-ft-ink: rgba(26, 26, 26, 0.62);
  --gr-ft-rule: rgba(26, 26, 26, 0.1);
  --gr-ft-brand: #000000;
  /* SUSTAINABILITY FRAMEWORK - a colour a pillar, carried by the tab, the
     heading, the badges and the wash the panel is laid on */
  --gr-sf-ink: #1a1a2e;
  --gr-sf-body: rgba(26, 26, 46, 0.86);
  --gr-sf-rule: rgba(26, 26, 46, 0.16);
  --gr-sf-tab-ink: #ffffff;
  /* what a pillar is painted while it waits - its own colour is kept for the
     one being read, so the rail says which of the three is open before any of
     it is read. Dark enough to carry the white the tabs are lettered in. */
  --gr-sf-off: #6f7478;
  --gr-sf-env: #0e8ba0;
  --gr-sf-env-wash: #edf3f5;
  --gr-sf-soc: #ef7d80;
  --gr-sf-soc-wash: #fdf3f1;
  --gr-sf-res: #87754a;
  --gr-sf-res-wash: #f2f1ec;
  --gr-bnr-ink: #ffffff;
  --gr-bnr-line: rgba(255, 255, 255, 0.42);
  --gr-bnr-brightness: 1;
  /* what the artwork stands on once it stops covering the whole plate - the
     deep green out of its own corners, with the warm glow off its middle */
  --gr-bnr-base: #1e3c39;
  --gr-bnr-glow: rgba(197, 175, 115, 0.5);
  /* below tablet the film covers the whole plate rather than sitting on the
     floor of it, so the green the lockup used to stand on is laid back over
     the top of the film as a wash - it keeps the reading edge the mask used
     to give. The stops are set off the lockup rather than by eye: it runs to
     around 44% of the plate on the widest portrait screen, and the film is
     brightest at the bottom of that run, so the wash is still carrying a
     third of its weight at 50% and only lets go at 74%, which holds white on
     the whole lockup at 4.7:1 and leaves the lower film untouched. */
  --gr-bnr-scrim: linear-gradient(180deg,
      rgba(20, 43, 40, 0.82) 0%,
      rgba(20, 43, 40, 0.6) 30%,
      rgba(20, 43, 40, 0.34) 50%,
      rgba(20, 43, 40, 0) 74%);
  /* the film runs brighter down its right side than the still it replaced, and
     that side is where the lockup stands on a landscape plate - white on it
     measures 3.5:1 against the still's 5:1. This deepens the empty green back
     to the headroom the still gave, off the copy's own edge and starting well
     clear of the subject, so it reads as the plate going quiet rather than as
     a panel behind the type. */
  --gr-bnr-wash: linear-gradient(90deg,
      rgba(20, 43, 40, 0) 38%,
      rgba(20, 43, 40, 0.3) 70%,
      rgba(20, 43, 40, 0.44) 100%);
  /* SEARCH
     The overlay is its own small surface and needs a few steps of grey the
     page never asked for elsewhere - a raised plate, two weights of rule,
     two weights of ink under the body ink, and a row that lifts under the
     pointer. They are named here so the dark page can restate the set. */
  --gr-srch-scrim: rgba(26, 26, 26, 0.46);
  --gr-srch-plate: #ffffff;
  --gr-srch-raised: #f6f7f4;
  --gr-srch-rule: rgba(26, 26, 26, 0.1);
  --gr-srch-rule-2: rgba(26, 26, 26, 0.18);
  --gr-srch-ink-2: rgba(26, 26, 26, 0.68);
  --gr-srch-ink-3: rgba(26, 26, 26, 0.46);
  --gr-srch-row: rgba(26, 26, 26, 0.04);
  --gr-srch-row-on: rgba(140, 198, 63, 0.12);
  /* the key caps at the foot carry white, so they need a ground dark enough
     to hold it - on the light page that means the cap is filled rather than
     outlined, or the letter would be white on near-white */
  --gr-srch-cap: #2f3330;
  --gr-srch-mark: rgba(140, 198, 63, 0.32);
  --gr-srch-shadow: 0 30px 80px rgba(26, 26, 26, 0.24);
  /* the floating download. The plate is the navy the button ships baked
     into it, repeated here so there is no white gap behind the image
     while it loads; the bar is the brand green with the white the page
     already sets on green elsewhere */
  --gr-fab-plate: #1a0e50;
  --gr-fab-bar: var(--gr-green);
  --gr-fab-ink: #ffffff;
  --gr-fab-shadow: 0 14px 34px rgba(26, 14, 80, 0.24);
  /* the about plate is the one light picture on the page, so it keeps its own
     ink rather than borrowing the banner's. --gr-about-sky is the plate's own
     top colour, sampled off the photograph, so a flat fill under it is
     invisible where the picture stops covering (see RESPONSIVE) */
  --gr-about-sky-a: #cce8f6;
  --gr-about-sky-b: #eef8fe;
  --gr-about-ink: #1a0e50;
  --gr-about-body: rgba(26, 14, 80, 0.92);
  /* the words the reveal has not reached yet */
  --gr-about-word-off: rgba(26, 14, 80, 0.16);
  /* the company's own name in the heading, in the brand green the label dot
     already carries, and the same green held back until the reveal reaches it */
  --gr-about-accent: var(--gr-green);
  --gr-about-accent-off: rgba(140, 198, 63, 0.24);
  --gr-about-rule: rgba(26, 14, 80, 0.28);
  --gr-about-dot: var(--gr-green);
  --gr-about-media-brightness: 1;
  --gr-about-media-saturate: 1;
  --gr-about-scrim: 0;
  --gr-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme=dark] {
  --gr-page-bg: #0e1513;
  --gr-text: #eef1ef;
  /* the same green, lifted so it does not sink into a dark plate */
  --gr-green: #a3d95e;
  --gr-cta-ink: var(--gr-text);
  --gr-cta-rule: rgba(238, 241, 239, 0.3);
  --gr-ico-filter: brightness(0) invert(1);
  /* the rows flip with the page; the open plate is already dark, so it only
     loses a little of its glare against one */
  --gr-ti-ink: #eaf1f7;
  --gr-ti-body: rgba(234, 241, 247, 0.82);
  --gr-ti-rule: rgba(234, 241, 247, 0.18);
  --gr-ti-card: #241059;
  --gr-ob-bg: #121a19;
  --gr-ob-ink: #eaf1f7;
  --gr-ob-count-all: rgba(234, 241, 247, 0.45);
  --gr-ob-scrim-top: 0.54;
  --gr-ob-scrim-foot: 0.7;
  --gr-ob-card-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  --gr-ps-plate: #170d3e;
  --gr-ps-track: #2b2065;
  --gr-esg-plate: #170d3e;
  --gr-mc-bg: var(--gr-page-bg);
  --gr-mc-ink: #eaf1f7;
  --gr-mc-body: rgba(234, 241, 247, 0.84);
  --gr-mc-role: rgba(234, 241, 247, 0.66);
  --gr-mc-rule: rgba(234, 241, 247, 0.22);
  --gr-mc-tab-off: rgba(234, 241, 247, 0.5);
  --gr-mc-frame: #1b2430;
  /* the band is ruled against a dark page, so the hairline is lifted rather
     than deepened - and the card under the pointer takes a navy of its own,
     since the page's own ground is already as dark as the fill would be */
  --gr-sp-ink: #eaf1f7;
  --gr-sp-body: rgba(234, 241, 247, 0.82);
  --gr-sp-num: rgba(234, 241, 247, 0.2);
  --gr-sp-rule: rgba(234, 241, 247, 0.16);
  --gr-sp-fill: #1d1152;
  --gr-sp-on-body: rgba(234, 241, 247, 0.88);
  --gr-sp-on-num: rgba(234, 241, 247, 0.28);
  /* the sky is turned down to a dusk rather than swapped, and the ink flips
     against it - the same as the about plate does with its photograph */
  --gr-st-sky-a: #101f2b;
  --gr-st-sky-b: #0c1720;
  --gr-st-glow: rgba(120, 170, 210, 0.16);
  --gr-st-ink: #eaf1f7;
  --gr-st-body: rgba(234, 241, 247, 0.84);
  --gr-st-rule: rgba(234, 241, 247, 0.3);
  /* the picture is turned down and its corners deepened, so the plate sits
     with the rest of the page rather than glowing out of it */
  --gr-dm-scrim: 0.5;
  --gr-dm-media-brightness: 0.74;
  --gr-sc-scrim: 0.62;
  --gr-sc-media-brightness: 0.76;
  /* the badge is turned over rather than flattened: its white disc goes to
     black and is lost in the plate, which leaves the ring and the arrow
     standing - and the hue is turned back so the arrow keeps its own colour
     rather than coming out its opposite */
  --gr-dc-bg: var(--gr-page-bg);
  --gr-dc-ink: #eaf1f7;
  --gr-dc-rule: rgba(234, 241, 247, 0.18);
  --gr-dc-badge-filter: invert(1) hue-rotate(180deg);
  --gr-dc-glyph-filter: brightness(0) invert(1);
  --gr-ft-ink: rgba(234, 241, 247, 0.6);
  --gr-ft-rule: rgba(234, 241, 247, 0.12);
  --gr-ft-brand: #eaf1f7;
  /* the pillars are lifted so they hold against a dark wash, and the washes
     themselves become the darkest tint of their own colour rather than the
     lightest */
  --gr-sf-ink: #eaf1f7;
  --gr-sf-body: rgba(234, 241, 247, 0.82);
  --gr-sf-rule: rgba(234, 241, 247, 0.2);
  /* lifted off the dark page rather than dropped into it, so the waiting
     pillars are still read as a rail */
  --gr-sf-off: #4b5359;
  --gr-sf-env: #35b3c8;
  --gr-sf-env-wash: #10202a;
  --gr-sf-soc: #f2908f;
  --gr-sf-soc-wash: #241a1c;
  --gr-sf-res: #b09a63;
  --gr-sf-res-wash: #1f1c14;
  --gr-bnr-brightness: 0.88;
  --gr-bnr-base: #16302e;
  --gr-bnr-glow: rgba(197, 175, 115, 0.34);
  --gr-bnr-scrim: linear-gradient(180deg,
      rgba(11, 26, 24, 0.84) 0%,
      rgba(11, 26, 24, 0.62) 30%,
      rgba(11, 26, 24, 0.36) 50%,
      rgba(11, 26, 24, 0) 74%);
  --gr-bnr-wash: linear-gradient(90deg,
      rgba(11, 26, 24, 0) 38%,
      rgba(11, 26, 24, 0.32) 70%,
      rgba(11, 26, 24, 0.46) 100%);
  /* the search surface, restated for a dark page: the plate lifts off the
     page rather than sinking into it, and the scrim goes near-black so the
     report behind it is properly put away */
  --gr-srch-scrim: rgba(0, 0, 0, 0.66);
  --gr-srch-plate: #16201d;
  --gr-srch-raised: #1c2724;
  --gr-srch-rule: rgba(238, 241, 239, 0.12);
  --gr-srch-rule-2: rgba(238, 241, 239, 0.22);
  --gr-srch-ink-2: rgba(238, 241, 239, 0.72);
  --gr-srch-ink-3: rgba(238, 241, 239, 0.5);
  --gr-srch-row: rgba(238, 241, 239, 0.05);
  --gr-srch-row-on: rgba(163, 217, 94, 0.14);
  /* lifted off the foot rather than sunk into it, since the foot is already
     dark here - the cap still has to read as a cap */
  --gr-srch-cap: #39443f;
  --gr-srch-mark: rgba(163, 217, 94, 0.3);
  --gr-srch-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  /* the plate is the button's own navy in either theme - it is a mark on
     the page rather than part of it, the way the banner is. Only the green
     is taken down a shade, because the lighter brand green the dark page
     uses glares against it, and the shadow is deepened to carry on a dark
     ground where a navy one would be lost. */
  --gr-fab-bar: #7ab52f;
  --gr-fab-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  /* the same photograph, turned down to dusk and washed, so the ink can flip
     without the plate having to be swapped for another picture */
  --gr-about-sky-a: #0d1a26;
  --gr-about-sky-b: #12222f;
  --gr-about-ink: #eaf1f7;
  --gr-about-body: rgba(234, 241, 247, 0.82);
  --gr-about-word-off: rgba(234, 241, 247, 0.2);
  /* lifted off the dusk plate so the green does not go muddy against it */
  --gr-about-accent: var(--gr-green);
  --gr-about-accent-off: rgba(163, 217, 94, 0.26);
  --gr-about-rule: rgba(234, 241, 247, 0.3);
  --gr-about-media-brightness: 0.44;
  --gr-about-media-saturate: 1.12;
  --gr-about-scrim: 0.52;
}

/* PAGE */
/* **** */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: var(--gr-page-bg);
  color: var(--gr-text);
  transition: background-color 0.4s ease, color 0.4s ease;
}

.page-main {
  position: relative;
}

/* HEADER */
/* ****** *
   Nothing but the two controls, and it rides over the banner rather than
   taking a band of its own. */
.site-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 5;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 34px var(--gr-gutter);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--gr-bnr-ink);
}

.header-search,
.theme-tgl {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}

.header-search {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.header-search .header-search-ico {
  display: block;
  width: 18px;
  height: 18px;
}

.header-divider {
  display: block;
  width: 1px;
  height: 22px;
  background: var(--gr-bnr-line);
}

.theme-tgl {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
}
.theme-tgl .theme-tgl-ico {
  display: flex;
  width: 18px;
  height: 18px;
}
.theme-tgl svg {
  width: 18px;
  height: 18px;
}
.theme-tgl {
  /* one icon per theme - kept inside .theme-tgl so it outweighs the svg rule
     above rather than losing to it on specificity */
}
.theme-tgl .ico-sun {
  display: block;
}
.theme-tgl .ico-moon {
  display: none;
}

[data-theme=dark] .theme-tgl .ico-sun {
  display: none;
}
[data-theme=dark] .theme-tgl .ico-moon {
  display: block;
}

/* one word per theme */
.on-dark {
  display: none;
}

[data-theme=dark] .on-light {
  display: none;
}
[data-theme=dark] .on-dark {
  display: inline;
}

/* INTRO */
/* ***** *
   The plate the page is met by: the banner's own green with the mark on it,
   held while the film behind it loads and then faded off.

   It is only shown on a page that armed it in <head>, so a page without
   script never sees it. On top of that it carries a way out of its own,
   timed well past the longest wait main.js will hold it for - a script that
   puts the plate up and then fails cannot leave the report behind a cover. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  /* the armed page turns this on; unarmed, the plate never exists */
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(26px, 4vh, 40px);
  background: radial-gradient(94% 62% at 46% 4%, var(--gr-bnr-glow) 0%, rgba(30, 60, 57, 0) 68%), var(--gr-bnr-base);
  /* visibility is held back until the fade is over, so the plate stops taking
     clicks at the same moment it stops being seen */
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}

.has-intro .intro {
  display: flex;
  animation: intro-failsafe 0s linear 7s forwards;
}

.intro-logo {
  width: clamp(150px, 17vw, 220px);
  height: auto;
}

/* the mark is brought in on the stylesheet rather than by main.js, so it is
   already moving at the first paint instead of waiting on a script */
.has-intro .intro-logo {
  animation: intro-mark 1.1s var(--gr-ease) both;
}

@keyframes intro-mark {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* THE BAR
   It is a real measure rather than a turning wheel: main.js fills it off
   whatever the plate is actually waiting on, and it is full at the moment
   the plate goes. The track is laid on the plate rather than tokened, since
   the plate is the one green the report never flips. */
.intro-bar {
  position: relative;
  overflow: hidden;
  width: clamp(140px, 17vw, 220px);
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
}

/* it comes in behind the mark, so the eye is given the logo first */
.has-intro .intro-bar {
  animation: intro-mark 0.9s var(--gr-ease) 0.28s both;
}

/* scaled rather than widened, so the fill is carried on the compositor and
   the transform-origin is what makes it run from the left */
.intro-bar-fill {
  position: absolute;
  inset: 0;
  display: block;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--gr-bnr-ink);
  transition: transform 0.45s var(--gr-ease);
}

.intro.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes intro-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
/* nothing is scrolled out from under the plate while it is up */
.is-intro-held,
.is-intro-held body {
  overflow: hidden;
}

/* SEARCH */
/* ****** *
   One overlay, at every size. The mark in the header opens it, it takes the
   whole screen on a phone and stands as a plate in the middle of a desktop,
   and everything inside it - the field, the shelves, the rows - is the same
   markup either way. js/search.js builds it and fills it; nothing below is
   written against a result that has not been asked for.

   The plate is the one surface on the page that is not the page, so it
   carries its own small set of tokens rather than borrowing the banner's. */
.srch {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(16px, 7vh, 92px) clamp(12px, 4vw, 32px) 24px;
  background: var(--gr-srch-scrim);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.srch.is-open {
  display: flex;
  animation: srch-in 0.2s ease-out;
}

@keyframes srch-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.srch-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 760px;
  /* it never grows past the room it is standing in, because the body inside
     it is what scrolls - not the page behind it */
  max-height: 100%;
  overflow: hidden;
  border: 1px solid var(--gr-srch-rule);
  border-radius: 14px;
  background: var(--gr-srch-plate);
  box-shadow: var(--gr-srch-shadow);
  color: var(--gr-text);
  animation: srch-rise 0.24s var(--gr-ease);
}

@keyframes srch-rise {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* THE FIELD */
.srch-head {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--gr-srch-rule);
}

.srch-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px clamp(14px, 2.4vw, 22px);
}

.srch-field-ico {
  flex: 0 0 auto;
  color: var(--gr-srch-ink-3);
}

.srch-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--gr-text);
  /* 16px is the floor an iPhone will not zoom the page to reach */
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
}
.srch-input::placeholder {
  color: var(--gr-srch-ink-3);
}
.srch-input:focus {
  outline: none;
}
.srch-input {
  /* the browser's own clear cross is dropped - there is one in the markup
     that matches the rest of this */
}
.srch-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.srch-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gr-srch-row);
  color: var(--gr-srch-ink-2);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.srch-close:hover {
  background: var(--gr-srch-row-on);
  color: var(--gr-text);
}
.srch-close:focus-visible {
  outline: 2px solid var(--gr-green);
  outline-offset: 2px;
}

.srch-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 0 clamp(14px, 2.4vw, 22px) 14px;
}

.srch-count {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--gr-srch-ink-2);
}

/* THE SHELVES */
.srch-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.srch-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--gr-srch-rule);
  border-radius: 999px;
  background: transparent;
  color: var(--gr-srch-ink-2);
  font-family: inherit;
  font-size: 11.5px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.srch-chip span {
  color: var(--gr-srch-ink-3);
  font-size: 10.5px;
}
.srch-chip:hover {
  border-color: var(--gr-srch-rule-2);
  color: var(--gr-text);
}
.srch-chip.is-on {
  border-color: var(--gr-green);
  background: var(--gr-srch-row-on);
  color: var(--gr-text);
}
.srch-chip.is-on span {
  color: var(--gr-text);
}
.srch-chip:focus-visible {
  outline: 2px solid var(--gr-green);
  outline-offset: 2px;
}

/* THE RESULTS */
.srch-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px clamp(10px, 2vw, 16px) 16px;
}

.srch-block + .srch-block {
  margin-top: 20px;
}

.srch-block-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding: 6px 6px 8px;
  border-bottom: 1px solid var(--gr-srch-rule);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gr-srch-ink-3);
}

.srch-block-n {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0;
  color: var(--gr-srch-ink-3);
}

.srch-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.srch-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease;
  /* the row the keyboard is on and the row the pointer is on are the same
     row as far as the eye is concerned, so they are lit the same way */
}
.srch-row:hover, .srch-row.is-active {
  background: var(--gr-srch-row-on);
}
.srch-row:focus-visible {
  outline: 2px solid var(--gr-green);
  outline-offset: -2px;
}

.srch-row-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}

.srch-row-ttl {
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--gr-text);
}

.srch-row-snip {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gr-srch-ink-2);
}

.srch-row mark {
  padding: 0 1px;
  border-radius: 2px;
  background: var(--gr-srch-mark);
  color: inherit;
}

.srch-row-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--gr-srch-ink-3);
  transition: color 0.16s ease, transform 0.16s ease;
}

.srch-row:hover .srch-row-ico,
.srch-row.is-active .srch-row-ico {
  color: var(--gr-green);
  transform: translateX(2px);
}

/* THE SHELF LABEL ON A ROW */
.srch-cat {
  display: inline-flex;
  align-items: center;
  height: 17px;
  padding: 0 7px;
  border: 1px solid var(--gr-srch-rule-2);
  border-radius: 3px;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--gr-srch-ink-2);
  white-space: nowrap;
}

/* THE ANSWER
   A recognised question is answered on the spot rather than being made to
   look like one more row - it keeps the green edge so the eye finds it
   first, and still goes to the place in the report it came from. */
.srch-qa {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 16px;
  padding: 16px 16px 16px 19px;
  overflow: hidden;
  border: 1px solid var(--gr-srch-rule);
  border-radius: 12px;
  background: var(--gr-srch-raised);
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.srch-qa::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--gr-green);
}
.srch-qa:hover {
  border-color: var(--gr-srch-rule-2);
}
.srch-qa:focus-visible {
  outline: 2px solid var(--gr-green);
  outline-offset: 2px;
}

.srch-qa-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 3px;
  background: var(--gr-srch-row-on);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gr-text);
}

.srch-qa-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.srch-qa-label {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gr-srch-ink-3);
}

.srch-qa-value {
  font-size: 21px;
  line-height: 1.25;
  color: var(--gr-text);
}

.srch-qa-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--gr-srch-ink-2);
}

.srch-qa-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gr-green);
  white-space: nowrap;
}

/* WHAT IS OFFERED BEFORE ANYTHING IS TYPED */
.srch-recents {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 6px;
}

.srch-recent {
  padding: 6px 11px;
  border: 1px solid var(--gr-srch-rule);
  border-radius: 999px;
  background: transparent;
  color: var(--gr-srch-ink-2);
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.srch-recent:hover {
  border-color: var(--gr-srch-rule-2);
  background: var(--gr-srch-row);
  color: var(--gr-text);
}
.srch-recent:focus-visible {
  outline: 2px solid var(--gr-green);
  outline-offset: 2px;
}

.srch-recent--clear {
  color: var(--gr-srch-ink-3);
}

/* NOTHING FOUND */
.srch-none {
  padding: 44px 16px 48px;
  text-align: center;
}

.srch-none-h {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gr-text);
}
.srch-none-h strong {
  font-weight: 400;
  color: var(--gr-green);
}

.srch-none-s {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gr-srch-ink-2);
}

.srch-inline {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gr-green);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* THE KEYS, NAMED AT THE FOOT */
.srch-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 9px 14px;
  border-top: 1px solid var(--gr-srch-rule);
  background: var(--gr-srch-raised);
  font-size: 11px;
  color: var(--gr-srch-ink-3);
}
.srch-foot kbd {
  display: inline-block;
  min-width: 17px;
  padding: 2px 5px;
  border: 1px solid var(--gr-srch-cap);
  border-radius: 4px;
  background: var(--gr-srch-cap);
  font-family: inherit;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  color: #ffffff;
}

/* nothing behind the overlay is scrolled while it is up */
.srch-locked,
.srch-locked body {
  overflow: hidden;
}

/* WHERE IT LANDS
   The section a result went to is named for a moment, so the eye is told
   where it has arrived rather than being left to work it out. */
.srch-pulse {
  animation: srch-pulse 2.1s ease-out forwards;
}

@keyframes srch-pulse {
  0% {
    box-shadow: inset 0 0 0 0 rgba(140, 198, 63, 0);
  }
  18% {
    box-shadow: inset 0 0 0 3px rgba(140, 198, 63, 0.55);
  }
  100% {
    box-shadow: inset 0 0 0 3px rgba(140, 198, 63, 0);
  }
}
/* FLOATING DOWNLOAD */
/* ***************** *
   The report itself, kept within reach of every section. It rests as its
   own mark in the corner and opens on a hover, the label unrolling out
   from behind the plate.

   It rides the right edge at the middle of the screen, flush to it, so it
   is on the same line wherever the page is scrolled to.

   The box is anchored by that right edge and has no width of its own, so
   what opens is the label and the box follows it - which means the side
   that grows is the one away from the edge, and the plate is never pushed
   off the screen however long the label gets.

   Its measurements are held as four properties on the box, so a narrower
   screen re-states those four and none of the rules below change.
*/
.fab-dl {
  --fab-h: 50px;
  --fab-fz: 14px;
  --fab-pad: 20px;
  --fab-max: 340px;
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: stretch;
  height: var(--fab-h);
  /* a label that outgrew the screen would take the plate off it, so the
     box is never allowed wider than the room it is standing in */
  max-width: calc(100vw - 20px);
  overflow: hidden;
  /* it is hung from its own middle rather than from its top, so the height
     it happens to be at any breakpoint does not shift where it sits */
  transform: translateY(-50%);
  box-shadow: var(--gr-fab-shadow);
  text-decoration: none;
}

.fab-dl-ico {
  flex: 0 0 auto;
  display: block;
  height: 100%;
  background: var(--gr-fab-plate);
}

/* the button ships at 38x44 with its plate and glyph already on it, so it
   is set by its height and keeps its own proportion */
.fab-dl-ico img {
  display: block;
  width: auto;
  height: 100%;
}

.fab-dl-txt {
  display: flex;
  align-items: center;
  max-width: 0;
  padding: 0;
  overflow: hidden;
  background: var(--gr-fab-bar);
  color: var(--gr-fab-ink);
  font-size: var(--fab-fz);
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 0.55s var(--gr-ease), padding 0.55s var(--gr-ease), opacity 0.3s ease;
}

/* the keyboard opens it the same way the pointer does, so the label is
   not something only a mouse can reach */
.fab-dl:hover .fab-dl-txt,
.fab-dl:focus-visible .fab-dl-txt {
  max-width: var(--fab-max);
  padding: 0 var(--fab-pad);
  opacity: 1;
}

.fab-dl:focus-visible {
  outline: 2px solid var(--gr-green);
  outline-offset: 3px;
}

/* A screen with no pointer has no hover to open the label with, and it is
   left shut rather than opened for it. Standing open, the label would lie
   across two thirds of a phone at the height the eye is reading at, for the
   whole visit - which is a worse thing to do to a page than not naming the
   plate. The plate carries a download mark and the link carries its name
   for anything reading the page out, and the Download Centre says it in
   full further down. */
/* BANNER */
/* ****** *
   One screen: the film covers the plate, the lockup sits in the right half
   against the empty green, and the scroll cue runs up the left edge. Two cuts
   are supplied - a 16:9 for a landscape plate and a 9:16 shot for a portrait
   one - and main.js hangs whichever one matches the plate's shape on the box
   below, so neither is ever asked to cover a plate it was not framed for. The
   still is left underneath as the floor: it is what shows while the film is
   still loading, if it never plays, and if less motion was asked for. */
.bnr-wrp {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: radial-gradient(94% 62% at 46% 4%, var(--gr-bnr-glow) 0%, rgba(30, 60, 57, 0) 68%), var(--gr-bnr-base);
  color: var(--gr-bnr-ink);
}

.bnr-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  background: url("../images/bnr-desk-bg.jpg") 50% 50%/cover no-repeat;
  filter: brightness(var(--gr-bnr-brightness));
  transition: filter 0.4s ease;
}

/* the film is held at the plate's size and cropped to it, the way the still
   behind it is - so the two sit in register and the swap between them is not
   a move. It is faded up rather than shown, because a <video> with nothing
   decoded yet paints its own empty box over the still in some browsers; at
   zero it is the still that reads until there is a frame to fade to. */
.bnr-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.bnr-video.is-playing {
  opacity: 1;
}

/* the wash the lockup stands on. It is on the box rather than on the plate so
   it rides above the film and below the copy, and it changes shape with the
   copy: a side wash while the lockup is off to the right, a top one once the
   plate turns and the lockup moves up over the middle of the film. */
.bnr-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gr-bnr-wash);
  pointer-events: none;
}

.bnr-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 0 var(--gr-bnr-inset);
}

/* the lockup ships as one 502x319 piece - headline, rule, logo and line - so
   it is placed at its own size and scaled from there */
.bnr-copy {
  width: clamp(300px, 33.2vw, 560px);
}

.bnr-text {
  display: block;
  width: 100%;
  height: auto;
}

.bnr-scroll {
  position: absolute;
  bottom: 95px;
  left: var(--gr-gutter);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  color: var(--gr-bnr-ink);
  text-decoration: none;
}

.bnr-scroll-txt {
  /* reads bottom to top, the way the rule below it runs */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* the rule is the track; a bright length of it runs down and off the end, on
   a loop, so the cue reads as an instruction rather than a mark */
.bnr-scroll-line {
  position: relative;
  display: block;
  overflow: hidden;
  width: 1px;
  height: 62px;
  background: var(--gr-bnr-line);
}
.bnr-scroll-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: var(--gr-bnr-ink);
  animation: bnr-scroll-run 1.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes bnr-scroll-run {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  28% {
    opacity: 1;
  }
  72% {
    opacity: 1;
  }
  100% {
    transform: translateY(250%);
    opacity: 0;
  }
}
/* SHARED PARTS */
/* ************ *
   The pieces every section is built from - the label above a heading, a phrase
   carrying the brand green inside one, and the call to action under the copy.
   Each works off its own tokens, so a section that sits on a plate of its own
   re-points those at that plate's ink and the part itself is left alone. */
/* the label above a section heading, with the brand dot in front of it */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--gr-text);
}
.eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gr-green);
}

/* a phrase inside a heading, carrying the brand green. Where the heading is
   also walked word by word (see ABOUT), main.js hands the class on to the
   words it makes, which is what .about-word.is-accent then colours. */
.accent {
  color: var(--gr-green);
}

/* CALL TO ACTION */
/* ************* *
   One component for every section. At rest the arrow points out of the page
   and the rule under it is a hairline of the section's own ink; on hover the
   arrow turns to lie along the reading line and the brand green wipes in over
   the hairline from the left. The arrow is drawn in the markup and stroked in
   currentColor, so it follows the ink of whatever plate it lands on and needs
   nothing per theme. Colours come from --gr-cta-*, which a section re-points
   at its own ink where it has any. */
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* a flex parent blockifies it and would stretch it across the column, and
     the rule under it runs the full width of the box - so the box is held to
     its own content wherever it is dropped */
  width: fit-content;
  padding-bottom: 13px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--gr-cta-ink);
  text-decoration: none;
  /* the hairline, and the green laid over it - the border is left alone so the
     two rules can sit on the same line without moving the text */
}
.cta::before, .cta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
}
.cta::before {
  background: var(--gr-cta-rule);
}
.cta::after {
  height: 2px;
  background: var(--gr-green);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--gr-ease);
}
.cta:hover::after, .cta:focus-visible::after {
  transform: scaleX(1);
}

.cta-ico {
  display: block;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  /* drawn pointing right, so it is turned up to leave the page at rest and
     let back down as the link is taken */
  transform: rotate(-45deg);
  transition: transform 0.45s var(--gr-ease);
}
.cta-ico svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cta:hover .cta-ico,
.cta:focus-visible .cta-ico {
  transform: rotate(0deg) translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .cta::after,
  .cta-ico {
    transition: none;
  }
}
/* ABOUT */
/* ***** *
   The plate is a 1512x719 photograph of a haze-blue skyline with the ranges in
   its bottom fifth, so it is anchored to the floor and the copy takes the open
   sky above. It is the one light picture on the page - in dark it is turned
   down and washed rather than swapped, and the ink flips against it.

   The layout stacks: the label across the top, then the sentence and the
   paragraph sharing the row beneath it - the sentence on the wide rail, the
   paragraph and its link on the narrow one. */
.about-section-wrp {
  position: relative;
  overflow: hidden;
  padding: 104px 0 148px;
  background: linear-gradient(180deg, var(--gr-about-sky-a) 0%, var(--gr-about-sky-b) 100%);
  color: var(--gr-about-ink);
  transition: color 0.4s ease;
}

.about-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  background: url("../images/about-desk-bg.jpg") 50% 100%/cover no-repeat;
  filter: brightness(var(--gr-about-media-brightness)) saturate(var(--gr-about-media-saturate));
  transition: filter 0.4s ease;
  /* nothing in light; a dusk wash in dark */
}
.about-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 14, 22, calc(var(--gr-about-scrim) * 1.15)) 0%, rgba(6, 14, 22, calc(var(--gr-about-scrim) * 0.72)) 56%, rgba(6, 14, 22, var(--gr-about-scrim)) 100%);
}

.about-inner {
  position: relative;
  z-index: 1;
  /* the plate carries its own ink in both themes, so anything shared that
     lands on it is re-pointed at that rather than at the page's */
  --gr-cta-ink: var(--gr-about-ink);
  --gr-cta-rule: var(--gr-about-rule);
  max-width: 1366px;
  margin: 0 auto;
  padding: 0 var(--gr-gutter);
}

/* the label opens the section, sitting on the same left edge as the sentence */
.about-eyebrow {
  margin-bottom: 22px;
  color: var(--gr-about-ink);
}
.about-eyebrow::before {
  background: var(--gr-about-dot);
}

/* the sentence lights word by word as the section is read - main.js splits it
   and ScrollTrigger walks the words. Without either it simply reads as set,
   which is why the solid colour lives on the heading and not on the words. */
/* the sentence takes the wide rail and the paragraph the narrow one, so the
   sentence wraps against a column rather than running the whole width */
.about-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  align-items: start;
  gap: 0 clamp(56px, 8.5vw, 128px);
}

/* the paragraph is dropped to the sentence's first baseline rather than to its
   line box, so the two columns read as starting together */
.about-copy {
  padding-top: 34px;
}

.about-title {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--gr-about-ink);
}

.about-word {
  color: var(--gr-about-word-off);
  transition: color 0.45s ease;
}
.about-word.is-lit {
  color: var(--gr-about-ink);
}
.about-word {
  /* the name stays green through both halves of the reveal */
}
.about-word.is-accent {
  color: var(--gr-about-accent-off);
}
.about-word.is-accent.is-lit {
  color: var(--gr-about-accent);
}

.about-txt {
  margin: 0 0 42px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gr-about-body);
}
.about-txt strong {
  font-weight: 700;
  color: var(--gr-about-ink);
}

/* THEME INTRO */
/* *********** *
   Two rails again: the list of chapters on the left, the picture belonging to
   the open one on the right. The six pictures are all laid in on top of each
   other and only the open one is shown, so the swap is a cross-fade and no
   picture is fetched at the moment it is asked for.

   The open row is a plate of its own: its title stays at the top and the copy
   and the link sit at the foot, which is why the panel is given a height
   rather than being left to its text. That height is what keeps the column -
   and the picture beside it - standing still as the rows are worked through. */
.theme-intro-wrp {
  padding: 104px 0 124px;
  background: var(--gr-page-bg);
  color: var(--gr-ti-ink);
}

.ti-inner {
  max-width: 1366px;
  margin: 0 auto;
  padding: 0 var(--gr-gutter);
}

/* the heading takes the left rail and the standfirst the right, on the same
   two rails the list and the picture take underneath */
.ti-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 32px;
  align-items: start;
  margin-bottom: 74px;
}

.ti-eyebrow {
  grid-column: 1;
  margin-bottom: 20px;
}

.ti-title {
  grid-column: 1;
  max-width: 480px;
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--gr-ti-ink);
}

/* the standfirst sits beside the heading, on the row the label opened */
.ti-intro {
  grid-column: 2;
  grid-row: 2;
  max-width: 560px;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--gr-ti-body);
}

.ti-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 32px;
  align-items: stretch;
}

/* THE LIST */
.ti-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ti-item {
  border-radius: 10px;
  /* a closed row is nothing but the rule under it, and the rule has to leave
     as the plate arrives rather than sit across its foot */
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--gr-ti-rule);
  transition: background 0.45s var(--gr-ease), box-shadow 0.45s var(--gr-ease);
}
.ti-item.is-open {
  background: var(--gr-ti-card);
  box-shadow: inset 0 -1px 0 transparent;
  /* the link on the plate reads against it, not against the page */
  --gr-cta-ink: var(--gr-ti-card-ink);
  --gr-cta-rule: var(--gr-ti-card-rule);
}

.ti-hd {
  margin: 0;
  font: inherit;
}

.ti-tgl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 30px 24px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  color: var(--gr-ti-ink);
  cursor: pointer;
  transition: color 0.45s var(--gr-ease);
}
.is-open .ti-tgl {
  color: var(--gr-ti-card-ink);
}
.ti-tgl:focus-visible {
  outline: 2px solid var(--gr-green);
  outline-offset: -4px;
}

.ti-tgl-ico {
  display: block;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  /* the badge is the artwork's own, open or closed and in either theme - it is
     not flipped against a dark page the way a line-art icon would be */
}

/* THE PANEL
   Held at a height rather than at its content, so every open row stands the
   same whatever its copy runs to - which is what the picture beside it needs.
   Copy longer than that height is clipped, so the height is the thing to raise
   if a chapter grows. Once the two are stacked the panel is let out to its own
   copy instead (see RESPONSIVE), where there is no column to keep steady. */
.ti-panel {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.5s var(--gr-ease), opacity 0.3s ease;
}
.is-open .ti-panel {
  height: 232px;
  opacity: 1;
}

.ti-panel-in {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 0 24px 26px;
}

.ti-txt {
  margin: 0 0 22px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--gr-ti-card-body);
}

/* THE PICTURE
   All six are stacked and only the open one is shown, so the swap is a
   cross-fade. Every one of them is laid out of the flow, which leaves the box
   with no height of its own - beside the list it is stretched to the list's,
   and once the two are stacked it is given a ratio instead (see RESPONSIVE).
   Left in the flow they would hand the row their own full height. */
.ti-media {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.ti-pix {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.ti-pix.is-on {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ti-item,
  .ti-panel,
  .ti-pix,
  .ti-tgl {
    transition: none;
  }
}
/* OUR BUSINESSES */
/* ************** *
   Five cards on one spot. The one in front is read; the rest wait behind it,
   each a notch higher and a notch smaller, so the deck shows its depth over
   the top edge. main.js pins the section and deals it: the front card is taken
   down and out as the next comes up into its place, and the whole thing runs
   backwards on the way up. The transforms are its business - everything here
   is what the cards are, where the deck sits and how it falls apart on a
   narrow screen.

   Nothing here assumes the script ran. Left alone the cards read one under the
   other, which is also what a visitor who asked for less motion gets; the
   stacking arrives with .is-stacked and the slider with .is-slider. */
.our-business-wrp {
  padding: 104px 0 124px;
  background: var(--gr-ob-bg);
  color: var(--gr-ob-ink);
  overflow: hidden;
}

.ob-inner {
  max-width: 1366px;
  margin: 0 auto;
  padding: 0 var(--gr-gutter);
}

.ob-head {
  text-align: center;
}

/* the label is a row of its own, so it is centred by its box rather than by
   the text alignment the heading takes */
.ob-eyebrow {
  justify-content: center;
  margin-bottom: 18px;
}

.ob-title {
  max-width: 520px;
  margin: 0 auto;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--gr-ob-ink);
}

/* the count and the link sit out on the margins, level with the middle of the
   deck, and hold their rails whatever the deck is doing between them */
.ob-stage {
  /* the deck reaches four notches above the card in front, so the gap under
     the heading carries that lift as well as the space meant to be seen -
     shorten it and the back of the stack climbs into the heading */
  margin-top: 160px;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 850px) minmax(120px, 1fr);
  gap: 0 32px;
  align-items: center;
}

.ob-count {
  grid-column: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  justify-self: end;
  font-weight: 700;
  line-height: 1;
  color: var(--gr-ob-ink);
}

.ob-count-now {
  font-size: 64px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.ob-count-all {
  font-size: 20px;
  font-weight: 400;
  color: var(--gr-ob-count-all);
}

.ob-deck {
  grid-column: 2;
}

/* THE CARDS
   In the flow they are simply five cards in a column. Once main.js has taken
   the deck over they are laid on one spot and it places them from there. */
.ob-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 850/495;
  border-radius: 14px;
  box-shadow: var(--gr-ob-card-shadow);
  /* the deck is dealt off the top, so a card shrinking behind the one in front
     keeps its top edge where it was put */
  transform-origin: top center;
  will-change: transform;
}

.ob-track {
  display: grid;
  gap: 24px;
}

.ob-pix {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the pictures are their own photographs and some of them are pale, so the
   ink is carried on a wash rather than trusted to the picture */
.ob-scrim {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(180deg, rgba(9, 12, 32, var(--gr-ob-scrim-top)) 0%, rgba(9, 12, 32, 0.06) 34%, rgba(9, 12, 32, 0.14) 58%, rgba(9, 12, 32, var(--gr-ob-scrim-foot)) 100%);
}

.ob-card-in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 58px 52px 46px;
  color: var(--gr-ob-card-ink);
}

.ob-card-ttl {
  max-width: 230px;
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--gr-ob-card-ink);
}

/* the title keeps the top of the card and everything under it is carried to
   the floor together, so the link sits with the figures rather than the three
   of them being spread down the card */
.ob-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 26px 46px;
  margin-top: auto;
}

/* the card is a picture with a scrim over it in both themes, so the link is
   written in the card's own ink and given a rule to match rather than reading
   the page's */
.ob-card-cta {
  --gr-cta-ink: var(--gr-ob-card-ink);
  --gr-cta-rule: rgba(255, 255, 255, 0.34);
  margin-top: 26px;
}

.ob-stat {
  max-width: 260px;
}

.ob-stat-fig {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--gr-ob-card-ink);
}
.ob-stat-fig sup {
  font-size: 0.6em;
  /* the ordinal rides the cap line rather than the browser's own guess */
  top: -0.55em;
}

.ob-stat-cap {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--gr-ob-card-body);
}

/* DEALT
   What main.js turns on once it has the deck. The cards come out of the flow
   onto one spot; the deck keeps the height of one card so the rails beside it
   stay put.

   A card leaves by being taken all the way down rather than by fading, so the
   deck has to end somewhere - an unfaded card would otherwise sit under the
   stack for the rest of the section. The edge is put below the deck rather
   than on it, far enough down to clear the front card's own shadow, and left
   open above and to the sides so the waiting stack and its shadows are not
   touched. */
.ob-deck.is-stacked {
  position: relative;
  clip-path: inset(-220px -80px -64px -80px);
}
.ob-deck.is-stacked .ob-track {
  display: block;
  position: relative;
  aspect-ratio: 850/495;
}
.ob-deck.is-stacked .ob-card {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

/* PERFORMANCE SNAPSHOT */
/* ******************** *
   A plate of its own, dark in both themes, so everything on it is written
   against the plate rather than against the page - which is why this section
   holds its ink flat and only the plate itself moves between themes.

   The tabs swap the panel under them. The first panel is three rails: the two
   totals on the left, the ring in the middle and the key to it on the right.
   The ring carries one line of spending at a time - the one picked out of the
   key - as a share of everything distributed, which is the number the key
   itself is measured against (data-total on the list). */
.performance-snapshot-wrp {
  padding: 84px 0 96px;
  background: var(--gr-ps-plate);
  color: var(--gr-ps-ink);
}

/* The link out of this plate is written against the plate, not the page. It
   was reading the page's cta ink, which on a light page is near-black - so
   on this deep purple it was all but invisible, hairline and all.

   It is the two tokens that are re-pointed rather than the colour, because
   the component is more than its text: the arrow is stroked in currentColor
   and the hairline under it reads off --gr-cta-rule, so setting colour alone
   would have left a dark rule drawn on a dark plate. */
.performance-snapshot-wrp .cta.dm-cta {
  --gr-cta-ink: #ffffff;
  --gr-cta-rule: rgba(255, 255, 255, 0.34);
  margin-top: 50px;
}

.ps-inner {
  max-width: 1366px;
  margin: 0 auto;
  padding: 0 var(--gr-gutter);
}

/* the title and the tabs take an end of the row each, and the rule under them
   runs the whole width rather than stopping at either */
.ps-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 48px;
  padding-bottom: 58px;
  border-bottom: 1px solid var(--gr-ps-rule);
}

.ps-title {
  max-width: 450px;
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--gr-ps-ink);
}

/* TABS
   Each is a length of the same rule, lit where it is the one being read. */
.ps-tabs {
  display: flex;
  flex: 0 0 auto;
}

.ps-tab {
  min-width: 176px;
  padding: 0 18px 14px;
  border: 0;
  border-bottom: 2px solid var(--gr-ps-rule);
  background: none;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  color: var(--gr-ps-off);
  cursor: pointer;
  transition: color 0.35s ease, border-color 0.35s ease;
}
.ps-tab.is-on {
  border-bottom-color: var(--gr-ps-ink);
  font-weight: 700;
  color: var(--gr-ps-ink);
}
.ps-tab:focus-visible {
  outline: 2px solid var(--gr-green);
  outline-offset: 2px;
}

.ps-panel {
  padding-top: 58px;
}
.ps-panel[hidden] {
  display: none;
}

/* THE FIGURES
   A number, the rule it stands on, and what it is underneath - the same three
   lines whichever panel they are read in. */
.ps-fig-num {
  margin: 0 0 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gr-ps-rule);
  font-size: 38px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--gr-ps-ink);
}

.ps-fig-cap {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--gr-ps-ink);
}

/* ECONOMIC VALUE */
.ps-econ {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr) minmax(0, 320px);
  gap: 0 48px;
  align-items: center;
}

.ps-figs {
  display: grid;
  gap: 64px;
}

/* THE RING
   Drawn from the top and round, on a track that stands for everything else
   distributed. The length of the arc is set in main.js off the numbers in the
   key, so the picture cannot drift from them. */
.ps-ring {
  justify-self: center;
  width: 100%;
  max-width: 350px;
}

.ps-ring-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform: rotate(-90deg);
}

.ps-ring-track,
.ps-ring-arc {
  fill: none;
  stroke-width: 7;
}

.ps-ring-track {
  stroke: var(--gr-ps-track);
}

.ps-ring-arc {
  stroke: var(--gr-ps-key, var(--gr-ps-c1));
  stroke-linecap: butt;
  transition: stroke-dashoffset 0.8s var(--gr-ease), stroke 0.4s ease;
}

/* THE KEY */
.ps-legend-ttl {
  margin: 0 0 20px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gr-ps-ink);
}

.ps-keys {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* one colour a line, in the order they are read */
}
.ps-keys .ps-key-item:nth-child(1) .ps-key {
  --gr-ps-key: var(--gr-ps-c1);
}
.ps-keys .ps-key-item:nth-child(2) .ps-key {
  --gr-ps-key: var(--gr-ps-c2);
}
.ps-keys .ps-key-item:nth-child(3) .ps-key {
  --gr-ps-key: var(--gr-ps-c3);
}
.ps-keys .ps-key-item:nth-child(4) .ps-key {
  --gr-ps-key: var(--gr-ps-c4);
}
.ps-keys .ps-key-item:nth-child(5) .ps-key {
  --gr-ps-key: var(--gr-ps-c5);
}

.ps-key {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 18px;
  border: 1px solid var(--gr-ps-key-edge);
  border-radius: 8px;
  background: var(--gr-ps-key-bg);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  color: var(--gr-ps-off);
  cursor: pointer;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.ps-key.is-on {
  border-color: var(--gr-ps-key-edge-on);
  background: var(--gr-ps-key-bg-on);
  color: var(--gr-ps-ink);
}
.ps-key:hover {
  color: var(--gr-ps-ink);
}
.ps-key:focus-visible {
  outline: 2px solid var(--gr-green);
  outline-offset: 2px;
}

.ps-key-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gr-ps-key);
  /* the line not being read is stated, not shouted */
  opacity: 0.55;
  transition: opacity 0.35s ease;
}
.ps-key.is-on .ps-key-dot {
  opacity: 1;
}

.ps-note {
  margin: 18px 0 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  text-align: right;
  color: var(--gr-ps-body);
}

/* FINANCIAL */
.ps-fin {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px 100px;
}

/* ESG HIGHLIGHTS */
/* ************** *
   Three cards on the indigo, each a coloured rail with the name standing up it
   and a two-by-two of figures beside it. They pile up as they are read: main.js
   pins each one where it lands, a notch lower than the last, so what is already
   read stays under the edge of what is being read now. Nothing here assumes
   that ran - left alone the cards are three in a column, which is also what a
   phone gets, one slide at a time. */
.esg-highlights-wrp {
  padding-top: 96px;
  /* The cards are pinned out of the flow, so this section does not grow to
     make room for the pile - the last card is still on its way up after the
     one before it has landed, and that travel is paid for by whatever scroll
     follows. THE MESSAGES supplies it. Were this section ever to end the page
     again, the pile would stop unfinished at the foot of it, and the room
     would have to be left here instead: a window, less the card, where its
     top rests and the notches the three of them take. */
  padding-bottom: 112px;
  background: var(--gr-esg-plate);
}

.esg-inner {
  max-width: 1366px;
  margin: 0 auto;
  padding: 0 var(--gr-gutter);
}

.esg-track {
  display: grid;
  gap: 40px;
}

.esg-card {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  min-height: 440px;
  overflow: hidden;
  border-radius: 12px;
  color: var(--gr-esg-ink);
}
.esg-card--gov {
  --gr-esg-card: var(--gr-esg-gov);
  --gr-esg-card-rail: var(--gr-esg-gov-rail);
}
.esg-card--soc {
  --gr-esg-card: var(--gr-esg-soc);
  --gr-esg-card-rail: var(--gr-esg-soc-rail);
}
.esg-card--env {
  --gr-esg-card: var(--gr-esg-env);
  --gr-esg-card-rail: var(--gr-esg-env-rail);
}
.esg-card {
  background: var(--gr-esg-card);
}

/* THE RAIL
   The name is set on its side, reading up the card. It is a heading first and
   a rail second, so it is turned by the stylesheet rather than written out in
   pieces - which keeps it one word to a reader that does not paint. */
.esg-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: var(--gr-esg-card-rail);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--gr-esg-rail-ink);
}

.esg-rail-txt {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* THE FIGURES
   Two by two, centred down the card, with a rule between the rows. The rule is
   drawn on the cells rather than across the card so it stops where they do. */
.esg-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 0 56px;
  padding: 48px 100px 48px 130px;
}

.esg-stat {
  padding: 30px 0;
  /* the two on the top row carry the rule that separates them from the two
     underneath */
}
.esg-stat:nth-child(-n+2) {
  border-bottom: 1px solid var(--gr-esg-rule);
}

.esg-stat-num {
  margin: 0 0 10px;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--gr-esg-ink);
}

.esg-stat-cap {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--gr-esg-ink);
}

/* the qualifier rides with the caption but is not part of the claim */
.esg-stat-note {
  font-size: 12px;
  font-weight: 400;
}

/* the dots belong to the slider, so they are nothing until there is one */
.esg-dots {
  display: none;
}

/* PILED
   What main.js turns on. The cards keep their place in the flow - each is
   pinned as it arrives, which is why nothing here has to know their heights. */
.esg-stack.is-piled .esg-card {
  will-change: transform;
}

/* TAKEN ONE AT A TIME
   The few rules Swiper needs, written here because the track keeps its own
   class names - main.js hands them over as wrapperClass and slideClass. */
.esg-stack.is-slider {
  overflow: hidden;
}
.esg-stack.is-slider .esg-track {
  display: flex;
  gap: 0;
  box-sizing: content-box;
  transition-property: transform;
}
.esg-stack.is-slider .esg-card {
  flex: 0 0 auto;
  height: auto;
}
.esg-stack.is-slider .esg-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}

/* scoped, so these win over the ones swiper-bundle.css brings with the same
   names - it is loaded after this stylesheet */
.esg-dots .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: 50%;
  background: var(--gr-esg-dot);
  opacity: 1;
  transition: width 0.35s var(--gr-ease), background 0.35s ease;
}

.esg-dots .swiper-pagination-bullet-active {
  width: 26px;
  border-radius: 4px;
  background: var(--gr-esg-dot-on);
}

/* THE MESSAGES */
/* ************ *
   One message is read at a time and the three tabs above choose it - a
   portrait on one rail and what was said on the other. All three panels are
   laid in and only the chosen one is shown, so the swap costs a class and no
   picture is fetched at the moment it is asked for; see main.js.

   The three portraits are not promised to be the same shape, so the frame is
   given the ratio and the picture is cropped into it - that is what stops the
   plate changing height as the tabs are worked through. */
.md-cfo-wrp {
  padding: 96px 0 116px;
  background: var(--gr-mc-bg);
  color: var(--gr-mc-ink);
  /* the link under each message reads against this ground, not the page's */
  --gr-cta-ink: var(--gr-mc-ink);
  --gr-cta-rule: var(--gr-mc-rule);
}

.mc-inner {
  max-width: 1366px;
  margin: 0 auto;
  padding: 0 var(--gr-gutter);
}

/* THE TABS
   Each is a length of the same rule, lit where it is the one being read. The
   lit one is set in bold, which is wider - so every tab is held at its bold
   width by a copy of its own label, and the row stands still as it is worked
   through rather than shuffling under the pointer. */
.mc-tabs {
  display: flex;
}

.mc-tab {
  flex: 0 0 auto;
  padding: 0 30px 14px;
  border: 0;
  border-bottom: 2px solid var(--gr-mc-rule);
  background: none;
  font-family: inherit;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  color: var(--gr-mc-tab-off);
  cursor: pointer;
  transition: color 0.35s ease, border-color 0.35s ease;
  /* the label again, in bold and taking no height - it is only here to set
     the width, so the tab does not grow when it is the one being read */
}
.mc-tab::after {
  content: attr(data-label);
  display: block;
  height: 0;
  overflow: hidden;
  font-weight: 700;
  visibility: hidden;
}
.mc-tab:hover {
  color: var(--gr-mc-ink);
}
.mc-tab.is-on {
  border-bottom-color: var(--gr-mc-ink);
  font-weight: 700;
  color: var(--gr-mc-ink);
}
.mc-tab:focus-visible {
  outline: 2px solid var(--gr-green);
  outline-offset: 2px;
}
.mc-tab {
  /* the row is centred by the slack at its ends rather than by the box,
     because slack falls to nothing on its own once the three stop fitting -
     which is what leaves the first tab reachable where the row is walked
     sideways instead. Centring the box would push it out of reach. */
}
.mc-tab:first-child {
  margin-left: auto;
}
.mc-tab:last-child {
  margin-right: auto;
}

/* THE MESSAGE */
.mc-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr);
  gap: 0 clamp(48px, 8vw, 122px);
  align-items: center;
  padding-top: 62px;
  /* the ones not being read are out of the document, not merely out of sight */
}
.mc-panel[hidden] {
  display: none;
}

.mc-media {
  overflow: hidden;
  margin: 0;
  border-radius: 8px;
  /* held while the portrait loads, so the row does not jump into place */
  background: var(--gr-mc-frame);
}

.mc-pix {
  display: block;
  width: 100%;
  height: auto;
  /* the ratio is the frame's, not the file's - a portrait taller than this is
     cropped from its foot rather than pushing the copy beside it down */
  aspect-ratio: 650/600;
  object-fit: cover;
  object-position: 50% 20%;
}

/* WHAT WAS SAID */
.mc-copy {
  max-width: 560px;
}

.mc-ttl {
  margin: 0 0 40px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--gr-mc-ink);
}

.mc-txt {
  margin: 0 0 32px;
  padding-bottom: 33px;
  border-bottom: 1px solid var(--gr-mc-rule);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--gr-mc-body);
}

.mc-who {
  margin: 0 0 40px;
}

.mc-name {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gr-mc-ink);
}

.mc-role {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--gr-mc-role);
}

/* STRATEGIC PRIORITIES */
/* ******************** *
   Five of them across, reading as one ruled band: every card carries its own
   border and is pulled a hairline into the one before it, so where they sit
   side by side the two borders land on each other and the band comes out ruled
   once. That is the whole of the resting state, and it is what a visitor gets
   if nothing runs.

   Once the section is reached main.js hands over .is-set and every second card
   is let down a notch. The drop is a transform, so the row keeps the height it
   laid out with - which is the point: the notch left by the raised middle card
   is where the link below the band sits, and the two cards let down either side
   of it come to rest level with that link rather than pushing it away.

   --sp-drop is the notch, and it is the one number the whole thing is built on;
   the room kept under the band is measured off it. */
.strategic-prior-wrp {
  --sp-drop: 123px;
  padding: 104px 0 112px;
  background: var(--gr-page-bg);
  color: var(--gr-sp-ink);
  /* the link under the band reads against this ground, not the page's */
  --gr-cta-ink: var(--gr-sp-ink);
  --gr-cta-rule: var(--gr-sp-rule);
}

.sp-inner {
  max-width: 1366px;
  margin: 0 auto;
  padding: 0 var(--gr-gutter);
}

.sp-head {
  margin-bottom: 76px;
  text-align: center;
}

/* the label is a row of its own, so it is centred by its box rather than by
   the text alignment the heading takes */
.sp-eyebrow {
  justify-content: center;
  margin-bottom: 18px;
  color: var(--gr-sp-ink);
}

.sp-title {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--gr-sp-ink);
}

/* THE BAND */
.sp-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  /* the cards are laid edge to edge and share their rules, so there is nothing
     to put between them */
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 345px;
  padding: 40px 30px 30px;
  border: 1px solid var(--gr-sp-rule);
  background: transparent;
  /* the drop is held apart from the rest so it can be turned off on its own
     where the band wraps and the pattern stops meaning anything */
  transform: translateY(var(--sp-y, 0));
  transition: transform 0.8s var(--gr-ease), background-color 0.4s ease, border-color 0.4s ease;
  /* pulled a hairline left so its border lands on its neighbour's rather than
     beside it - the band is ruled once between cards, twice nowhere */
}
.sp-card + .sp-card {
  margin-left: -1px;
}
.sp-card {
  /* the card under the pointer is turned over: the ink becomes its ground and
     what it was carrying is handed back light. There is nothing to focus
     inside a card - the band is read, not worked - so this is the pointer's
     alone and nothing is owed to the keyboard by it. */
}
.sp-card:hover {
  background: var(--gr-sp-fill);
  border-color: var(--gr-sp-fill);
  /* lifted over its neighbours' rules, so the filled edge comes out clean */
  z-index: 1;
}
.sp-card:hover .sp-num {
  color: var(--gr-sp-on-num);
}
.sp-card:hover .sp-ttl {
  color: var(--gr-sp-on-ttl);
}
.sp-card:hover .sp-txt {
  color: var(--gr-sp-on-body);
}

/* every second one is let down a notch once the section has been reached */
.sp-grid.is-set .sp-card:nth-child(even) {
  --sp-y: var(--sp-drop);
}

.sp-num {
  display: block;
  margin-bottom: 22px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
  color: var(--gr-sp-num);
  transition: color 0.4s ease;
}

.sp-ttl {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gr-sp-ink);
  transition: color 0.4s ease;
}

/* what the priority is stands at the foot of the card whatever the title above
   it ran to, so the five read along one line rather than off their own titles.
   The padding is the least that may ever stand between the two of them. */
.sp-txt {
  margin: auto 0 0;
  padding-top: 42px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gr-sp-body);
  transition: color 0.4s ease;
}

.sp-cta {
  /* the band keeps its laid-out height and the dropped cards hang below it, so
     the room they need is kept here - the link sits in the notch the raised
     middle card leaves, and the two beside it come down level with it. It is
     blockified to be centred by its margins, which an inline box cannot be. */
  display: flex;
  margin: 88px auto 0;
}

@media (prefers-reduced-motion: reduce) {
  .sp-card,
  .sp-num,
  .sp-ttl,
  .sp-txt {
    transition: none;
  }
}
/* OUR STAKEHOLDERS */
/* **************** *
   Two rails: what is said about listening on the left, the eight who are
   listened to on the right, three across. The sky behind them is drawn rather
   than photographed - a wash with a soft light in the top left corner - so it
   costs nothing to fetch and is turned down to a dusk in the dark instead of
   being swapped for another picture.

   The tile in front of each name is a picture with its green already in it, so
   nothing here colours it and it stands the same in either theme. */
.stakeholder-wrp {
  position: relative;
  overflow: hidden;
  padding: 104px 0 116px;
  background: linear-gradient(160deg, var(--gr-st-sky-a) 0%, var(--gr-st-sky-b) 100%);
  color: var(--gr-st-ink);
  /* the link under the copy reads against this ground, not the page's */
  --gr-cta-ink: var(--gr-st-ink);
  --gr-cta-rule: var(--gr-st-rule);
  transition: color 0.4s ease;
}

/* the light in the corner, laid over the wash and reaching about as far as the
   copy does - it is what keeps the plate from reading as a flat fill */
.st-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  background: radial-gradient(120% 90% at 8% -10%, var(--gr-st-glow) 0%, rgba(255, 255, 255, 0) 62%);
}

.st-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.68fr) minmax(0, 1fr);
  gap: 0 clamp(40px, 5vw, 68px);
  align-items: center;
  max-width: 1366px;
  margin: 0 auto;
  padding: 0 var(--gr-gutter);
}

/* WHAT IS SAID */
.st-eyebrow {
  margin-bottom: 20px;
  color: var(--gr-st-ink);
}

.st-title {
  margin: 0 0 34px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--gr-st-ink);
}

.st-txt {
  margin: 0 0 44px;
  max-width: 400px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gr-st-body);
}

/* WHO IS LISTENED TO */
.st-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 74px clamp(20px, 2.4vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the name is set against the middle of the tile however many lines it runs
   to, so a name of one line and a name of three both read off the same centre */
.st-item {
  display: flex;
  align-items: center;
  gap: 18px;
  /* the longest of the eight closes the last row, so it is given what is left
     of it rather than a third of it and its name reads across instead of
     breaking after every word. Counted from the far end, so it takes whatever
     the row has left over at the width in hand - two columns of three, and
     nothing worth doing where the row is already down to two. */
}
.st-item:last-child {
  grid-column: 2/-1;
}

.st-ico {
  display: block;
  flex: 0 0 auto;
}
.st-ico img {
  display: block;
  width: 60px;
  height: 60px;
}

.st-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gr-st-ink);
}

/* DOUBLE MATERIALITY */
/* ****************** *
   One photograph the width of the page, 1512x641, with the copy standing in
   two opposite corners of it: the label and the heading at the head of the
   left rail, what is said and the link at the foot of the right one. The plate
   is given the picture's own ratio down to the width where the copy stops
   fitting in it, and a floor under that - so the picture is never cropped to
   a letterbox and the words are never squeezed out of it.

   The picture is dark in both themes, which is why the ink is fixed light in
   both rather than flipped: there is nothing to flip against. Dark turns the
   plate down and deepens the two corners instead. */
.double0material-wrp {
  position: relative;
  overflow: hidden;
  color: var(--gr-dm-ink);
  /* the link at the foot reads against the picture, not against the page */
  --gr-cta-ink: var(--gr-dm-ink);
  --gr-cta-rule: var(--gr-dm-rule);
}

/* The frame rather than the picture: it holds the plate that moves inside it
   and the wash that must not. The picture is on .dm-plate so it can be walked
   through this box as the page scrolls - carrying the corner wash with it
   would take the deepening off the very corners it is there to deepen, and
   the copy stands in those. The brightness stays out here, so it goes on the
   picture and the wash together, the way it did when they were one element. */
.dm-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  filter: brightness(var(--gr-dm-media-brightness));
  transition: filter 0.4s ease;
  /* the two corners the copy stands in are deepened and the rest of the
     picture is left as it was shot */
}
.dm-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(76% 86% at 0% 0%, rgba(6, 14, 22, var(--gr-dm-scrim)) 0%, rgba(6, 14, 22, 0) 62%), radial-gradient(76% 86% at 100% 100%, rgba(6, 14, 22, var(--gr-dm-scrim)) 0%, rgba(6, 14, 22, 0) 62%);
}

/* the picture itself, and the only part of the plate that moves. It sits flush
   in the frame until main.js sets it larger and walks it - left to the
   stylesheet alone it simply covers, which is what it did before. */
.dm-plate {
  position: absolute;
  inset: 0;
  display: block;
  background: url("../images/double-material-bg.jpg") 50% 50%/cover no-repeat;
}

.dm-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 0 clamp(40px, 6vw, 90px);
  /* the plate keeps the picture's own ratio, and stops shrinking where the
     copy in the corners would start running into itself */
  min-height: min(641px, 42.4vw);
  max-width: 1366px;
  margin: 0 auto;
  padding: 96px var(--gr-gutter) 104px;
}

/* the head takes the top of the left rail, what is said the foot of the right */
.dm-head {
  grid-column: 1;
  align-self: start;
}

.dm-copy {
  grid-column: 2;
  align-self: end;
}

.dm-eyebrow {
  margin-bottom: 20px;
  color: var(--gr-dm-ink);
}

.dm-title {
  margin: 0;
  max-width: 520px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--gr-dm-ink);
}

.dm-txt {
  margin: 0 0 40px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gr-dm-body);
}

/* SUSTAINABILITY FRAMEWORK */
/* ************************ *
   Three pillars standing down the left and one panel beside them. Each pillar
   owns a colour, and it is handed to the tab and the panel together as --sf-c
   and --sf-wash - so the heading, the badges and the wash the panel is laid on
   all come off the one pair, and nothing inside has to know which pillar it is
   being read under.

   On the rail that colour is spent only on the pillar being read: the other
   two wait in grey, so the rail carries the answer to which is open. The tab
   paints --sf-plate for that reason - the grey, swapped for the pillar's own
   --sf-c when it is opened - and the pointer takes the same plate, since it is
   that tab carried on into the panel.

   The rail is as tall as the panel and divided between the three, which is why
   it is a grid of equal rows rather than three boxes with heights of their own.
   Below the tab breakpoint it lies down and becomes three bars across the top,
   where standing text would have nothing to stand in. */
.sustainability-framework-wrp {
  padding: 100px 0 116px;
  background: var(--gr-page-bg);
  color: var(--gr-sf-ink);
}

.sf-inner {
  max-width: 1366px;
  margin: 0 auto;
  padding: 0 var(--gr-gutter);
}

.sf-head {
  margin-bottom: 46px;
  text-align: center;
}

.sf-eyebrow {
  justify-content: center;
  margin-bottom: 18px;
}

.sf-title {
  margin: 0 0 46px;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--gr-mc-ink);
}

.sf-sub {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gr-sf-ink);
}

.sf-board {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: stretch;
}

/* THE RAIL
   One row a pillar, each the same height, with the name standing up it. */
/* the rail is lifted a layer above the panel beside it, because the pointer
   on the open tab is drawn outside the tab and lands in the panel's column -
   anything that gives the panel a layer of its own would otherwise take the
   pointer behind it */
.sf-rail {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.sf-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  border: 0;
  /* the plate is the grey every pillar waits in; only the open one is handed
     its own colour, which is why the background reads --sf-plate and not the
     pillar's --sf-c */
  --sf-plate: var(--gr-sf-off);
  background: var(--sf-plate);
  transition: background-color 0.4s var(--gr-ease);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--gr-sf-tab-ink);
  cursor: pointer;
}
.sf-tab--env {
  --sf-c: var(--gr-sf-env);
}
.sf-tab--soc {
  --sf-c: var(--gr-sf-soc);
}
.sf-tab--res {
  --sf-c: var(--gr-sf-res);
}
.sf-tab.is-on {
  --sf-plate: var(--sf-c);
}
/* one pillar is told from the next by a hairline rather than by a gap, so the
   rail stays a single column of colour. It is laid on as an inset shadow, not
   a border, because the three rows are cut out of one height - a border would
   take its pixel out of the tab it is put on and leave the row it divides
   shorter than the two beside it. It stands only while the rail does - laid
   down, the tabs are already in rows of their own. */
.sf-tab + .sf-tab {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.sf-tab:first-child {
  border-radius: 10px 0 0 0;
}
.sf-tab:last-child {
  border-radius: 0 0 0 10px;
}
.sf-tab {
  /* the one being read points into the panel it opened. The box begins where
     the tab ends - the coloured border is the near half of it, so anchoring
     the far edge instead would draw the arrow back over the tab, in the tab's
     own colour, where nothing can be seen of it. */
}
.sf-tab::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 0;
  height: 0;
  border: 9px solid transparent;
  border-left-color: var(--sf-plate);
  /* held back inside the tab and hidden until it is asked for - the tab being
     read shows it at rest, and a tab being pointed at walks it out */
  opacity: 0;
  transform: translate(-7px, -50%);
  transition: opacity 0.35s var(--gr-ease), transform 0.35s var(--gr-ease);
}
.sf-tab.is-on::after,
.sf-tab:hover::after,
.sf-tab:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}
/* the open tab is already pointing when the page is met, rather than sliding
   its arrow out on arrival */
.sf-tab.is-on::after {
  transition: none;
}
.sf-tab:focus-visible {
  outline: 2px solid var(--gr-sf-ink);
  outline-offset: -4px;
}

/* THE HOVER
   Each tab is a plate of colour already, so the hover is played in light on
   that colour rather than in a colour of its own - a veil drawn up from the
   foot of the pillar, and the name carried a step toward the panel it would
   open. The veil takes the tab's own corners and stops inside the box, so the
   pointer on the open tab, which is drawn outside it, is left alone.

   The tab being read is out of it: it has said its piece with the pointer, and
   lifting it on hover would only blur which of the three is open. */
.sf-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.06));
  opacity: 0;
  /* it comes up from the bottom edge rather than fading in on the spot */
  transform: scaleY(0.35);
  transform-origin: bottom center;
  transition: opacity 0.45s var(--gr-ease), transform 0.45s var(--gr-ease);
}
.sf-tab.is-on::before {
  content: none;
}
.sf-tab:not(.is-on):hover::before,
.sf-tab:not(.is-on):focus-visible::before {
  opacity: 1;
  transform: scaleY(1);
}

.sf-tab-txt {
  /* over the veil, which is laid across the whole of the tab */
  position: relative;
  z-index: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  transition: transform 0.45s var(--gr-ease);
}
/* the label is turned through half a turn, so the step that carries it right
   across the screen - into the panel - is written to its left */
.sf-tab:not(.is-on):hover .sf-tab-txt,
.sf-tab:not(.is-on):focus-visible .sf-tab-txt {
  transform: rotate(180deg) translateX(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .sf-tab,
  .sf-tab::before,
  .sf-tab::after,
  .sf-tab-txt {
    transition: none;
  }
  .sf-tab:not(.is-on):hover .sf-tab-txt,
  .sf-tab:not(.is-on):focus-visible .sf-tab-txt {
    transform: rotate(180deg);
  }
}

/* THE PANEL */
.sf-panel {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 44px 58px 40px;
  border-radius: 0 10px 10px 0;
  background: var(--sf-wash);
}
.sf-panel--env {
  --sf-c: var(--gr-sf-env);
  --sf-wash: var(--gr-sf-env-wash);
}
.sf-panel--soc {
  --sf-c: var(--gr-sf-soc);
  --sf-wash: var(--gr-sf-soc-wash);
}
.sf-panel--res {
  --sf-c: var(--gr-sf-res);
  --sf-wash: var(--gr-sf-res-wash);
}
.sf-panel[hidden] {
  display: none;
}

.sf-kicker {
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--gr-sf-ink);
}

.sf-pillar {
  margin: 0 0 6px;
  font-size: 29px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--sf-c);
}

.sf-tag {
  margin: 0 0 34px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--gr-sf-rule);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--sf-c);
}

/* THE FOCUS AREAS
   How many there are is the pillar's business, not the stylesheet's, so the
   count is handed in on the element as --sf-cols. */
.sf-areas {
  display: grid;
  grid-template-columns: repeat(var(--sf-cols, 3), minmax(0, 1fr));
  gap: 0 56px;
  align-items: start;
}

.sf-badge {
  display: inline-block;
  margin-bottom: 16px;
  padding: 5px 9px;
  border-radius: 4px;
  background: var(--sf-c);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--gr-sf-tab-ink);
}

.sf-area-ttl {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gr-sf-ink);
}

.sf-area-txt {
  margin: 0 0 26px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--gr-sf-body);
}

.sf-topics {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-topic {
  padding: 13px 0;
  border-bottom: 1px solid var(--gr-sf-rule);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--gr-sf-ink);
}

/* the link sits at the foot of the panel whatever the columns above it ran to */
.sf-cta {
  margin-top: auto;
  padding-top: 46px;
}

/* RESPONSIVE */
/* ********** */
/* THE STORIES */
/* *********** *
   Three plates on one spot, each a photograph the width of the page. Only the
   chosen one is laid out - the other two are out of the document, not merely
   out of sight - and the three pictures at the foot choose between them; see
   main.js. They stand outside the plates because they belong to all three.

   The photographs are 1920x965, so the plate is given that ratio down to the
   width where the copy in it stops fitting, and set by its copy under that.
   All three are dark enough for the ink to be fixed light in either theme, the
   way the banner's is; dark turns the plates down instead of flipping them.

   The key beside each focus area is the one thing that is not shared: every
   plate hands its own colour down as --sc-key, so nothing inside has to know
   which of the three it is being read under. */
.story-cover-wrp {
  position: relative;
  overflow: hidden;
  color: var(--gr-sc-ink);
  /* the link at the foot reads against the photograph, not against the page */
  --gr-cta-ink: var(--gr-sc-ink);
  --gr-cta-rule: var(--gr-sc-rule);
}

.sc-slide {
  position: relative;
  /* the picture is pushed past its own edges on a hover, so the plate is the
     thing that holds it in - the section clips too, but that would let it
     spread over the plate's own bounds on the way there */
  overflow: hidden;
}
.sc-slide[hidden] {
  display: none;
}

/* The plate is the whole panel and the copy is laid over it, so it is the
   panel that is hovered rather than the picture - hovering the picture
   itself would mean hovering the one part of it the copy is not sitting on.

   Nothing else moves: the wash rides along with the picture, and being a
   rail down the left it only deepens as it grows, so the copy keeps the
   ground it is read against. */
.sc-slide:hover .sc-media {
  transform: scale(1.05);
}

.sc-slide--env {
  --sc-key: #1f7f96;
}

.sc-slide--soc {
  --sc-key: #d9536a;
}

.sc-slide--gov {
  --sc-key: #7f7c52;
}

.sc-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  background: 50% 50%/cover no-repeat;
  filter: brightness(var(--gr-sc-media-brightness));
  /* the filter is the theme's and the transform is the hover's; they are
     timed apart because one is a change of page and the other a gesture */
  transition: filter 0.4s ease, transform 0.7s var(--gr-ease);
  /* the copy is all on the left rail, so that is the only side deepened - the
     picture is left as it was shot from about two thirds of the way across */
}
.sc-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 14, 22, var(--gr-sc-scrim)) 0%, rgba(6, 14, 22, calc(var(--gr-sc-scrim) * 0.52)) 34%, rgba(6, 14, 22, 0) 64%);
}

.sc-slide--env .sc-media {
  background-image: url("../images/story-big-1.jpg");
}

.sc-slide--soc .sc-media {
  background-image: url("../images/story-big-2.jpg");
}

.sc-slide--gov .sc-media {
  background-image: url("../images/story-big-3.jpg");
}

/* the heading stands at the head of the rail and everything else at its foot,
   so the link comes to rest on the same line whichever plate is being read */
.sc-inner {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: space-between;
  gap: 40px 0;
  min-height: min(760px, 50.3vw);
  max-width: 1366px;
  margin: 0 auto;
  padding: 74px var(--gr-gutter) 72px;
}

.sc-title {
  margin: 0;
  max-width: 520px;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--gr-sc-ink);
}

.sc-tag {
  display: inline-block;
  margin-bottom: 26px;
  padding: 7px 14px;
  border-radius: 6px;
  background: var(--gr-green);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
}

/* FOCUS AREAS
   A rule stands between the areas and not under the last of them, so the list
   reads as ruled rather than as boxed. */
.sc-focus {
  max-width: 380px;
  margin: 0 0 50px;
  padding: 0;
  list-style: none;
}

.sc-focus-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gr-sc-rule);
}
.sc-focus-item + .sc-focus-item {
  padding-top: 20px;
}
.sc-focus-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.sc-key {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 6px;
  background: var(--sc-key);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}

.sc-focus-name {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gr-sc-ink);
}

/* THE GOALS
   The badges are the UN's own artwork and carry their own colours, so nothing
   here touches them. The list is held to nine of them across, which is what
   sets where the seventeen break into a second row. */
.sc-sdg-ttl {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gr-sc-ink);
}

.sc-sdg {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 315px;
  margin: 0 0 46px;
  padding: 0;
  list-style: none;
}
.sc-sdg img {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 2px;
}

/* THE THREE PICTURES
   They belong to all three plates, so they stand on the section rather than in
   any one of them - which is also what keeps them still as the plates swap. */
.sc-thumbs {
  position: absolute;
  left: 50%;
  bottom: 72px;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  /* the same box the copy in the plates is laid in, so the pictures come to
     rest on the rail the copy is written to rather than on the plate's edge */
  width: 100%;
  max-width: 1366px;
  padding: 0 var(--gr-gutter);
  transform: translateX(-50%);
  /* the box reaches across the plate and the link at the foot of the copy is
     under it, so only the pictures themselves take the pointer */
  pointer-events: none;
}

.sc-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 0;
  pointer-events: auto;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  /* the two not being read are turned down, so the lit one is told apart by
     more than a ring - which over a bright photograph is not much to go on */
  opacity: 0.58;
  /* the ring is laid on rather than laid out, so the lit picture is no larger
     than the two beside it and the row does not shift as they are worked
     through. Two rings, not one: a dark one against the picture and the light
     one outside it, because a white hairline on its own is lost in whatever
     the picture happens to be doing behind it. */
  box-shadow: 0 0 0 4px rgba(6, 14, 22, 0), 0 0 0 6px rgba(255, 255, 255, 0);
  transition: opacity 0.35s ease, box-shadow 0.35s ease;
}
.sc-thumb img {
  display: block;
  width: 120px;
  height: 80px;
  object-fit: cover;
}
/* THE POINTER
   Hovering one says what taking it would do: it puts on the same ring the open
   picture wears, comes up to full, and a plus is set in the middle. The mark
   is given a disc of its own rather than being trusted to the photograph
   behind it, which is a different picture under every one of the three. The
   open picture is left out - it is wearing the ring already and there is
   nothing of its own left to open. */
.sc-thumb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  /* the two bars of the plus, laid over the disc they stand on */
  background: linear-gradient(var(--gr-sc-thumb-on), var(--gr-sc-thumb-on)) center/14px 2px no-repeat, linear-gradient(var(--gr-sc-thumb-on), var(--gr-sc-thumb-on)) center/2px 14px no-repeat, rgba(6, 14, 22, 0.58);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.72);
  transition: opacity 0.35s ease, transform 0.35s var(--gr-ease);
}
.sc-thumb:not(.is-on):hover,
.sc-thumb:not(.is-on):focus-visible {
  /* over its neighbours, for the same reason the open one is */
  z-index: 1;
  opacity: 1;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0), 0 0 0 2px var(--gr-sc-thumb-on);
}
.sc-thumb:not(.is-on):hover::after,
.sc-thumb:not(.is-on):focus-visible::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.sc-thumb.is-on {
  /* over its neighbours, so neither of their corners crosses the ring */
  z-index: 1;
  opacity: 1;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0), 0 0 0 2px var(--gr-sc-thumb-on);
}
.sc-thumb:focus-visible {
  outline: 2px solid var(--gr-green);
  outline-offset: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .sc-media,
  .sc-thumb,
  .sc-thumb::after {
    transition: none;
  }
}
/* DOWNLOAD CENTRE */
/* *************** *
   The report in one piece on the left rail and its chapters on the right,
   three across. Every chapter is a link with its badge inside it, so the whole
   row is the target rather than the badge alone.

   The badge stands at the foot of each row rather than under its title, which
   is what keeps the six of them reading along one line however many lines the
   titles above them ran to - the rows of a grid are already the same height,
   so it takes no more than pushing the badge down into the room left over. */
.dc-main-wrp {
  padding: 72px 0 76px;
  background: var(--gr-dc-bg);
  color: var(--gr-dc-ink);
}

.dc-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 3fr);
  gap: 0 clamp(32px, 3.4vw, 45px);
  max-width: 1366px;
  margin: 0 auto;
  padding: 0 var(--gr-gutter);
}

/* the heading at the head of the rail and the whole report at its foot, level
   with the second row of chapters beside it */
.dc-head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}

.dc-title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--gr-dc-ink);
}

.dc-main {
  display: block;
  text-decoration: none;
  color: var(--gr-dc-ink);
}

.dc-main-ico {
  display: block;
  margin-bottom: 21px;
}
.dc-main-ico img {
  display: block;
  width: 25px;
  height: 25px;
  filter: var(--gr-dc-glyph-filter);
  transition: transform 0.35s var(--gr-ease);
}

.dc-main:hover .dc-main-ico img {
  transform: translateY(3px);
}

.dc-main-txt {
  display: block;
  /* held narrow so the year comes down onto a line of its own, the way it is
     set - it is a label of two parts, not a sentence */
  max-width: 220px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

/* THE CHAPTERS */
.dc-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 62px clamp(32px, 3.4vw, 45px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dc-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--gr-dc-rule);
  text-decoration: none;
  color: var(--gr-dc-ink);
}

.dc-ttl {
  margin-bottom: 34px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.32;
}

.dc-ico {
  display: block;
  /* the room left over is taken above the badge, not below it */
  margin-top: auto;
}
.dc-ico img {
  display: block;
  width: 40px;
  height: 40px;
  filter: var(--gr-dc-badge-filter);
  transition: transform 0.35s var(--gr-ease);
}

.dc-link:hover .dc-ico img,
.dc-link:focus-visible .dc-ico img {
  transform: translateY(3px);
}

.dc-link:focus-visible {
  outline: 2px solid var(--gr-green);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .dc-ico img,
  .dc-main-ico img {
    transition: none;
  }
}
/* FOOTER */
/* ****** *
   Named .ft-main-wrp rather than .footer-wrp: main.js carries a dormant
   include - $('.footer-wrp').load('footer.html') - from the template this was
   started from, and there is no footer.html here. While nothing on the page
   answered to that class the line asked for nothing; a footer called
   .footer-wrp would have it fetching a 404 on every load.

   One line, centred on the page. The studio's mark is taken out of the row and
   stood against the right edge rather than laid beside the line, so the line is
   centred on the page and not on what is left of it - and it stays put however
   wide the mark is set. */
.ft-main-wrp {
  padding: 28px 0;
  background: var(--gr-ft-bg);
  border-top: 1px solid var(--gr-ft-rule);
}

.ft-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  max-width: 1366px;
  margin: 0 auto;
  padding: 0 var(--gr-gutter);
}

.ft-copy {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  color: var(--gr-ft-ink);
}

.footer-brand {
  position: absolute;
  top: 50%;
  right: var(--gr-gutter);
  line-height: 0;
  transform: translateY(-50%);
  opacity: 0.9;
  transition: opacity 0.35s ease;
}
.footer-brand:hover, .footer-brand:focus-visible {
  opacity: 1;
}
.footer-brand:focus-visible {
  outline: 2px solid var(--gr-green);
  outline-offset: 4px;
}
.footer-brand svg {
  display: block;
}
.footer-brand {
  /* the bar under the mark is the studio's own orange in either theme; the
     letter over it is drawn in ink and flips with the page */
}
.footer-brand .stirrup {
  fill: var(--gr-ft-brand);
  transition: fill 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .footer-brand,
  .footer-brand .stirrup {
    transition: none;
  }
}
@media (max-width: 1399px) {
  .sf-title {
    font-size: 34px;
  }
  .sf-areas {
    gap: 0 40px;
  }
  .mc-tab {
    padding: 0 24px 13px;
    font-size: 16px;
  }
  .mc-panel {
    padding-top: 56px;
  }
  .mc-ttl {
    margin-bottom: 34px;
    font-size: 28px;
  }
  .mc-txt {
    font-size: 16px;
  }
  .esg-body {
    padding: 44px 72px 44px 92px;
    gap: 0 44px;
  }
  .esg-stat-num {
    font-size: 30px;
  }
  .ps-econ {
    grid-template-columns: minmax(0, 330px) minmax(0, 1fr) minmax(0, 300px);
    gap: 0 36px;
  }
  .ps-fig-num {
    font-size: 34px;
  }
  .ob-title {
    font-size: 34px;
  }
  .ob-count-now {
    font-size: 56px;
  }
  .ti-title {
    font-size: 34px;
  }
  .ti-tgl {
    font-size: 19px;
  }
  :root {
    --gr-gutter: 56px;
    --gr-bnr-inset: 76px;
  }
  .header-inner {
    padding: 28px var(--gr-gutter);
  }
  .about-section-wrp {
    padding: 88px 0 128px;
  }
  .about-title {
    font-size: 34px;
  }
  .strategic-prior-wrp {
    --sp-drop: 104px;
    padding: 88px 0 96px;
  }
  .sp-head {
    margin-bottom: 64px;
  }
  .sp-title {
    font-size: 34px;
  }
  .sp-card {
    min-height: 310px;
    padding: 34px 24px 26px;
  }
  .sp-txt {
    padding-top: 32px;
    font-size: 15px;
  }
  .sp-cta {
    margin-top: 76px;
  }
  .stakeholder-wrp {
    padding: 88px 0 96px;
  }
  .st-title {
    margin-bottom: 28px;
    font-size: 34px;
  }
  .st-txt {
    margin-bottom: 36px;
  }
  .st-list {
    gap: 56px clamp(18px, 2vw, 26px);
  }
  .dm-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 310px);
    padding-top: 80px;
    padding-bottom: 88px;
  }
  .dm-title {
    font-size: 34px;
  }
  .sc-inner {
    padding-top: 62px;
    padding-bottom: 62px;
  }
  .sc-title {
    font-size: 38px;
  }
  .dc-main-wrp {
    padding: 62px 0 66px;
  }
  .dc-title {
    font-size: 27px;
  }
  .dc-list {
    gap: 52px clamp(28px, 3vw, 40px);
  }
  .dc-ttl {
    margin-bottom: 28px;
  }
  .sc-thumbs {
    bottom: 62px;
    gap: 16px;
  }
  .sc-thumb img {
    width: 104px;
    height: 70px;
  }
  .dm-txt {
    margin-bottom: 32px;
  }
  .bnr-scroll {
    bottom: 72px;
  }
}
@media (max-width: 1199px) {
  .sf-title {
    font-size: 29px;
  }
  .sf-sub {
    font-size: 19px;
  }
  .sf-board {
    grid-template-columns: 68px minmax(0, 1fr);
  }
  .sf-panel {
    padding: 34px 34px 32px;
  }
  .sf-pillar {
    font-size: 25px;
  }
  .sf-tag {
    margin-bottom: 26px;
    padding-bottom: 26px;
    font-size: 19px;
  }
  .sf-areas {
    gap: 0 28px;
  }
  .sf-area-txt {
    font-size: 14px;
  }
  .sf-topic {
    font-size: 14px;
  }
  .sf-cta {
    padding-top: 34px;
  }
  .md-cfo-wrp {
    padding: 84px 0 92px;
  }
  .mc-tab {
    padding: 0 18px 12px;
    font-size: 15px;
  }
  .mc-panel {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 0 clamp(36px, 5vw, 64px);
    padding-top: 48px;
  }
  .mc-ttl {
    margin-bottom: 26px;
    font-size: 24px;
  }
  .mc-txt {
    margin-bottom: 26px;
    padding-bottom: 26px;
    font-size: 15px;
  }
  .mc-who {
    margin-bottom: 30px;
  }
  .esg-card {
    grid-template-columns: 84px minmax(0, 1fr);
    min-height: 400px;
  }
  .esg-rail {
    font-size: 24px;
  }
  .esg-body {
    padding: 38px 48px 38px 60px;
    gap: 0 36px;
  }
  .esg-stat {
    padding: 24px 0;
  }
  .esg-stat-num {
    font-size: 27px;
  }
  .ps-title {
    font-size: 28px;
  }
  .ps-fig-num {
    font-size: 30px;
  }
  .ps-econ {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr) minmax(0, 280px);
    gap: 0 28px;
  }
  .ps-figs {
    gap: 46px;
  }
  .ps-fin {
    gap: 46px 64px;
  }
  .ob-title {
    font-size: 29px;
  }
  .ob-stage {
    margin-top: 142px;
    grid-template-columns: minmax(96px, 1fr) minmax(0, 850px) minmax(96px, 1fr);
    gap: 0 24px;
  }
  .ob-count-now {
    font-size: 48px;
  }
  .ob-card-in {
    padding: 44px 38px 36px;
  }
  .ob-card-ttl {
    font-size: 25px;
  }
  .ob-stats {
    gap: 22px 32px;
  }
  .ob-card-cta {
    margin-top: 22px;
  }
  .ob-stat {
    max-width: 210px;
  }
  .ob-stat-fig {
    font-size: 23px;
  }
  .ti-head {
    margin-bottom: 58px;
  }
  .ti-title {
    font-size: 29px;
  }
  .ti-tgl {
    padding: 26px 20px;
    font-size: 18px;
  }
  .ti-panel-in {
    padding: 0 20px 22px;
  }
  /* the rail is narrower, so the copy on the plate runs to more lines */
  .ti-item.is-open .ti-panel {
    height: 244px;
  }
  :root {
    --gr-gutter: 40px;
    --gr-bnr-inset: 52px;
  }
  /* the plate is narrower than the picture now, so it slides left to keep the
     hand in frame while the copy still has green behind it - the film is
     carried across by the same amount so the two stay in register */
  .bnr-media {
    background-position: 62% 50%;
  }
  .bnr-video {
    object-position: 62% 50%;
  }
  .bnr-copy {
    width: clamp(280px, 36vw, 430px);
  }
  .about-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: 0 clamp(40px, 6vw, 80px);
  }
  .strategic-prior-wrp {
    padding: 76px 0 84px;
  }
  .sp-head {
    margin-bottom: 52px;
  }
  .sp-title {
    font-size: 29px;
  }
  /* five across is too little width to read at, so the band wraps into three.
     A wrapped band has no first and second row of its own to alternate over -
     the drop would land on whichever card happened to be even - so it is put
     away here and the cards are simply set apart instead of sharing rules. */
  .sp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
  .sp-card {
    min-height: 250px;
    padding: 30px 24px 26px;
  }
  .sp-card + .sp-card {
    margin-left: 0;
  }
  .sp-grid.is-set .sp-card:nth-child(even) {
    --sp-y: 0;
  }
  .sp-num {
    margin-bottom: 18px;
    font-size: 18px;
  }
  .sp-ttl {
    font-size: 18px;
  }
  .sp-txt {
    padding-top: 26px;
  }
  .sp-cta {
    margin-top: 52px;
  }
  .stakeholder-wrp {
    padding: 76px 0 84px;
  }
  /* the eight no longer fit beside the copy at a width their names can break
     in, so they drop under it and take the plate three across */
  .st-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 52px 0;
  }
  .st-title {
    font-size: 29px;
  }
  .st-txt {
    max-width: 620px;
    margin-bottom: 30px;
  }
  .st-list {
    gap: 40px clamp(20px, 3vw, 40px);
  }
  .dm-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 290px);
    padding-top: 68px;
    padding-bottom: 76px;
  }
  .dm-title {
    font-size: 29px;
  }
  .sc-title {
    font-size: 32px;
  }
  /* the rail is more width than the heading needs at this size, so it folds
     back over the chapters and they take the plate three across on their own */
  .dc-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px 0;
  }
  .dc-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    gap: clamp(40px, 8vw, 110px);
  }
  .dc-title {
    font-size: 25px;
  }
  .dc-list {
    gap: 44px clamp(24px, 3vw, 36px);
  }
  .sc-focus-name {
    font-size: 16px;
  }
  .about-copy {
    padding-top: 26px;
  }
  .about-title {
    font-size: 29px;
  }
  .eyebrow,
  .about-txt,
  .cta {
    font-size: 15px;
  }
  .theme-tgl {
    font-size: 16px;
  }
}
/* IPAD PORTRAIT AND DOWN
   A portrait plate would crop the picture to a slice of itself, so the layout
   stacks instead: the lockup takes the open top, and the artwork sits on the
   floor at its own ratio, wider than the plate so the hand still reads. Its
   top edge is masked away into the plate colour, which is the green out of
   the picture's own corners, so there is no seam where it starts. */
@media (max-width: 991px) {
  /* an iPad is where the label stops being hovered open and starts being
     left open, so it is taken down a little to sit more lightly */
  .fab-dl {
    --fab-h: 46px;
    --fab-fz: 13px;
    --fab-pad: 16px;
  }
  /* the rail lies down: three bars across the top, with the names the right
     way up and the pointer turned to face the panel below them */
  .sustainability-framework-wrp {
    padding: 80px 0 92px;
  }
  .sf-board {
    grid-template-columns: minmax(0, 1fr);
  }
  .sf-rail {
    grid-template-rows: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sf-tab {
    padding: 16px 10px;
    font-size: 14px;
  }
  /* the rail is laid down from here, and below this it breaks up again into a
     tab per panel - so the line is dropped rather than turned */
  .sf-tab + .sf-tab {
    box-shadow: none;
  }
  .sf-tab:first-child {
    border-radius: 10px 0 0 0;
  }
  .sf-tab:last-child {
    border-radius: 0 10px 0 0;
  }
  .sf-tab {
    /* laid down, it points at the panel underneath - and starts where the tab
       ends, for the same reason it does standing up */
  }
  .sf-tab::after {
    top: 100%;
    left: 50%;
    border-left-color: transparent;
    border-top-color: var(--sf-plate);
    transform: translate(-50%, -7px);
  }
  .sf-tab.is-on::after,
  .sf-tab:hover::after,
  .sf-tab:focus-visible::after {
    transform: translate(-50%, 0);
  }
  .sf-tab-txt {
    writing-mode: horizontal-tb;
    transform: none;
  }
  /* laid down, the panel is underneath - so the label leans down into it */
  .sf-tab:not(.is-on):hover .sf-tab-txt,
  .sf-tab:not(.is-on):focus-visible .sf-tab-txt {
    transform: translateY(3px);
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-tab:not(.is-on):hover .sf-tab-txt,
    .sf-tab:not(.is-on):focus-visible .sf-tab-txt {
      transform: none;
    }
  }
  .sf-panel {
    border-radius: 0 0 10px 10px;
  }
  /* two at a time, whatever the pillar asked for */
  .sf-areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 28px;
  }
  /* the portrait and the words no longer sit beside each other, so every row
     reads the same way down - which is the order the markup was written in,
     and why the middle one has its swap taken back off it */
  /* three long labels are near the width of a tablet, so the row stops being
     held to the plate and is walked sideways instead - bled to the gutter
     edges, so the tab at each end reads as running off the screen rather than
     being cut short of it */
  .mc-tabs {
    margin: 0 calc(var(--gr-gutter) * -1);
    padding: 0 var(--gr-gutter);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mc-tabs::-webkit-scrollbar {
    display: none;
  }
  .mc-tab {
    padding: 0 15px 12px;
    font-size: 14px;
    white-space: nowrap;
  }
  /* the portrait and the copy no longer sit side by side on a tablet, so the
     picture takes the width and what was said reads under it */
  .mc-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px 0;
    padding-top: 42px;
  }
  .mc-media {
    max-width: 560px;
  }
  .mc-copy {
    max-width: 620px;
  }
  .esg-highlights-wrp {
    padding-top: 76px;
  }
  .esg-track {
    gap: 28px;
  }
  .esg-card {
    grid-template-columns: 68px minmax(0, 1fr);
    min-height: 360px;
  }
  .esg-rail {
    font-size: 21px;
  }
  .esg-body {
    padding: 32px 34px 32px 40px;
    gap: 0 28px;
  }
  .esg-stat-num {
    font-size: 24px;
  }
  /* three rails will not go. The two totals take a row of their own across the
     top, and the ring and its key share the row underneath - which keeps the
     picture next to the numbers it is drawn from. */
  .performance-snapshot-wrp {
    padding: 72px 0 84px;
  }
  .ps-head {
    padding-bottom: 40px;
  }
  .ps-panel {
    padding-top: 40px;
  }
  .ps-econ {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px 40px;
  }
  .ps-figs {
    grid-column: 1/-1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
  }
  .ps-ring {
    max-width: 300px;
  }
  .ps-note {
    text-align: left;
  }
  /* the rails no longer have the room to stand beside the deck, so the count
     and the link drop under it and take an end of the row each */
  .our-business-wrp {
    padding: 84px 0 96px;
  }
  .ob-stage {
    margin-top: 140px;
  }
  .ob-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px 0;
  }
  .ob-deck {
    grid-column: 1;
    grid-row: 1;
  }
  /* takes the row under the deck, at the start of it */
  .ob-count {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }
  .ob-card-in {
    padding: 38px 32px 32px;
  }
  /* the two rails no longer fit beside each other. The picture has nothing to
     take its height from once the list is off its side, so it is given a ratio
     of its own and laid across the top, where the section is entered. */
  .ti-head,
  .ti-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .ti-title {
    grid-column: 1;
    max-width: 620px;
  }
  .ti-intro {
    grid-column: 1;
    grid-row: auto;
    max-width: 620px;
    margin-top: 26px;
  }
  .ti-media {
    order: -1;
    margin-bottom: 34px;
    aspect-ratio: 16/10;
  }
  /* with the picture off its side the column has nothing to keep steady for,
     so the panel is let out to its own copy - held by a cap rather than a
     height, which leaves no dead room under a short chapter and no clipping
     under a long one */
  .ti-panel {
    height: auto;
    max-height: 0;
    transition: max-height 0.5s var(--gr-ease), opacity 0.3s ease;
  }
  .ti-item.is-open .ti-panel {
    height: auto;
    max-height: 460px;
  }
  /* a plate this shape is taking the portrait cut, which was framed to fill
     it, so the lockup is not centred in what is left of the plate - it is
     carried up into the quiet top of the film, where the scrim below holds a
     reading edge for it */
  .bnr-wrp {
    padding: 128px 0 52svh;
  }
  /* the film covers the plate whatever shape it is, so the box stays full
     bleed. The still underneath is a landscape frame and cannot cover a
     portrait plate without being blown up past what it can carry, so it keeps
     its old place on the floor and the film crossfades up over it. */
  .bnr-media {
    background-size: auto 58%;
    background-position: 50% 100%;
  }
  /* the lockup is over the middle of the film now, not off to its right, so
     the wash turns with it - down from the top instead of in from the side */
  .bnr-media::after {
    background: var(--gr-bnr-scrim);
  }
  /* the portrait cut is framed on its own middle, so it is not carried across
     the way the landscape one is above */
  .bnr-video {
    object-position: 50% 50%;
  }
  .bnr-inner {
    justify-content: center;
    padding: 0 var(--gr-gutter);
  }
  .bnr-copy {
    width: min(440px, 74%);
  }
  .about-section-wrp {
    padding: 72px 0 108px;
  }
  /* the sentence and the paragraph no longer fit side by side, so the
     paragraph drops under it and each takes the full width */
  .about-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px 0;
  }
  .about-copy {
    padding-top: 0;
  }
  .about-title {
    font-size: 26px;
    line-height: 1.4;
  }
  .about-txt {
    max-width: 620px;
    margin-bottom: 34px;
  }
  .strategic-prior-wrp {
    padding: 68px 0 76px;
  }
  .sp-head {
    margin-bottom: 44px;
  }
  .sp-title {
    font-size: 26px;
  }
  /* below a tablet the count is left to the width rather than named, so the
     band holds three across an iPad on its side and falls to two on its end
     instead of squeezing a third one in at a width the copy cannot break in */
  .sp-grid {
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 16px;
  }
  .sp-card {
    min-height: 230px;
    padding: 26px 22px 24px;
  }
  .sp-cta {
    margin-top: 44px;
  }
  .stakeholder-wrp {
    padding: 68px 0 76px;
  }
  .st-inner {
    gap: 44px 0;
  }
  .st-title {
    font-size: 26px;
  }
  /* below a tablet the count is left to the width rather than named, so the
     eight hold three across an iPad on its side and fall to two on its end -
     three at that width leaves the longer names breaking after every word */
  .st-list {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 34px 24px;
  }
  /* two opposite corners need a plate wide enough to hold them apart. Below a
     tablet there is not one, so the copy comes out of its corner and reads
     under the heading - and the plate stops following the picture's ratio,
     which at this width would be a letterbox, and is set by what is on it. */
  .dm-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px 0;
    min-height: 0;
    padding-top: 60px;
    padding-bottom: 68px;
  }
  .dm-head,
  .dm-copy {
    grid-column: 1;
  }
  .dm-copy {
    align-self: start;
    max-width: 460px;
  }
  .dm-title {
    font-size: 26px;
  }
  /* the picture's own ratio at this width would be a letterbox with more copy
     on it than it can hold, so the plate is set by what is on it instead - and
     the pictures at the foot come off the right rail, which the copy now
     reaches, and stand under it on the left */
  .sc-inner {
    min-height: 0;
    gap: 34px 0;
    padding-top: 56px;
    padding-bottom: 148px;
  }
  .sc-title {
    font-size: 27px;
  }
  .dc-main-wrp {
    padding: 54px 0 58px;
  }
  /* the count is left to the width rather than named, so the six hold three
     across an iPad on its side and fall to two on its end */
  .dc-list {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 38px 28px;
  }
  .dc-title {
    font-size: 23px;
  }
  .sc-focus {
    margin-bottom: 38px;
  }
  .sc-sdg {
    margin-bottom: 36px;
  }
  .sc-thumbs {
    justify-content: flex-start;
    bottom: 56px;
  }
  .sc-thumb img {
    width: 96px;
    height: 64px;
  }
  /* the pictures are smaller from here down, so the plus is taken in with them
     rather than filling what is left of them */
  .sc-thumb::after {
    width: 28px;
    height: 28px;
    background-size: 12px 2px, 2px 12px, auto;
  }
  .bnr-scroll {
    bottom: 40px;
    gap: 14px;
  }
  .bnr-scroll-line {
    height: 46px;
  }
}
@media (max-width: 767px) {
  /* a phone has no room to stand a plate in the middle of, so the overlay
     stops being a plate and becomes the screen. The keys named at the foot
     go with it - there is no keyboard there to name them for. */
  .srch {
    padding: 0;
  }
  .srch-panel {
    max-width: none;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .srch-foot {
    display: none;
  }
  .srch-chips {
    margin-left: 0;
  }
  .srch-qa {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .srch-qa-go {
    justify-self: flex-start;
  }
  /* on a phone the label is standing open the whole time, so it is capped
     against the screen rather than against a number - whatever is left after
     the plate and the margins is as wide as it is allowed to be */
  .fab-dl {
    --fab-h: 44px;
    --fab-fz: 12.5px;
    --fab-pad: 14px;
    --fab-max: min(300px, calc(100vw - 96px));
  }
  /* three bars will not go across a phone, so they stand one under another and
     the pointer goes back to the side - now pointing down the stack */
  .sf-title {
    font-size: 25px;
  }
  .sf-sub {
    font-size: 17px;
  }
  .sf-head {
    margin-bottom: 32px;
  }
  /* AN ACCORDION
     Three bars will not go across a phone, and stacking them with the one
     panel underneath puts the open pillar's name three rows away from what it
     opened. So the rail and the panels are dissolved into the board with
     display: contents and dealt back out in pairs - each bar with its own
     panel directly under it. Nothing moves in the markup, and the rows go back
     to being a rail and a stack of panels the moment the query stops matching.

     The board does the rounding and the clipping for the whole stack, which is
     why nothing inside carries a radius: whichever pillar is open, the corners
     are the board's. */
  .sf-board {
    border-radius: 10px;
    overflow: hidden;
  }
  .sf-rail,
  .sf-panels {
    display: contents;
  }
  .sf-tab--env {
    grid-row: 1;
  }
  .sf-panel--env {
    grid-row: 2;
  }
  .sf-tab--soc {
    grid-row: 3;
  }
  .sf-panel--soc {
    grid-row: 4;
  }
  .sf-tab--res {
    grid-row: 5;
  }
  .sf-panel--res {
    grid-row: 6;
  }
  /* the corner rules further up are pseudo-class deep, so they are named again
     here rather than left to win on specificity */
  .sf-tab,
  .sf-tab:first-child,
  .sf-tab:last-child {
    border-radius: 0;
  }
  .sf-tab {
    justify-content: flex-start;
    padding: 14px 18px;
    text-align: left;
  }
  .sf-panel {
    min-height: 0;
    padding: 28px 22px 26px;
    border-radius: 0;
  }
  .sf-pillar {
    font-size: 22px;
  }
  .sf-tag {
    font-size: 17px;
  }
  .sf-areas {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px 0;
  }
  .sf-cta {
    padding-top: 28px;
  }
  .md-cfo-wrp {
    padding: 64px 0 72px;
  }
  .strategic-prior-wrp {
    padding: 56px 0 64px;
  }
  .sp-head {
    margin-bottom: 34px;
  }
  .sp-title {
    font-size: 23px;
  }
  /* a tablet on its side is down to two, and a card holds its shape rather
     than its height - the copy is what sets it from here down */
  .sp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .sp-card {
    min-height: 0;
    padding: 24px 20px 22px;
  }
  .sp-txt {
    padding-top: 22px;
    font-size: 14px;
  }
  .sp-cta {
    margin-top: 36px;
  }
  .stakeholder-wrp {
    padding: 56px 0 64px;
  }
  .st-inner {
    gap: 36px 0;
  }
  .st-title {
    font-size: 23px;
  }
  .st-txt {
    margin-bottom: 26px;
  }
  /* three names across a tablet on its end leaves each of them breaking after
     a word, so the eight come down to two */
  .st-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
  }
  .dm-inner {
    gap: 32px 0;
    padding-top: 52px;
    padding-bottom: 56px;
  }
  .dm-title {
    font-size: 23px;
  }
  .sc-inner {
    gap: 28px 0;
    padding-top: 48px;
    padding-bottom: 128px;
  }
  .sc-title {
    font-size: 23px;
  }
  .dc-main-wrp {
    padding: 46px 0 50px;
  }
  .dc-inner {
    gap: 38px 0;
  }
  /* the two of them no longer sit side by side, so the whole report goes back
     under the heading */
  .dc-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }
  .dc-title {
    font-size: 21px;
  }
  .dc-list {
    gap: 30px 24px;
  }
  .dc-ttl {
    margin-bottom: 22px;
    font-size: 15px;
  }
  .dc-ico img {
    width: 36px;
    height: 36px;
  }
  .ft-main-wrp {
    padding: 24px 0;
  }
  .ft-copy {
    font-size: 14px;
  }
  .sc-focus-name {
    font-size: 15px;
  }
  .sc-thumbs {
    bottom: 48px;
    gap: 12px;
  }
  .sc-thumb img {
    width: 84px;
    height: 56px;
  }
  .dm-eyebrow {
    margin-bottom: 16px;
  }
  .dm-txt {
    margin-bottom: 26px;
    font-size: 15px;
  }
  .st-item {
    gap: 14px;
  }
  .st-ico img {
    width: 52px;
    height: 52px;
  }
  .st-name {
    font-size: 15px;
  }
  .mc-tab {
    padding: 0 13px 11px;
    font-size: 13px;
    /* the ends sit on the gutter rather than a tab's width inside it */
  }
  .mc-tab:first-child {
    padding-left: 0;
  }
  .mc-tab:last-child {
    padding-right: 0;
  }
  .mc-panel {
    gap: 26px 0;
    padding-top: 34px;
  }
  .mc-media {
    max-width: none;
  }
  .mc-ttl {
    margin-bottom: 22px;
    font-size: 22px;
    line-height: 1.35;
  }
  .mc-txt {
    margin-bottom: 22px;
    padding-bottom: 22px;
  }
  .mc-who {
    margin-bottom: 26px;
  }
  /* one card at a time, and the figures run down it rather than across - the
     rail stays standing, which is what names the card */
  .esg-highlights-wrp {
    padding: 60px 0 72px;
  }
  .esg-card {
    grid-template-columns: 56px minmax(0, 1fr);
    min-height: 0;
  }
  .esg-rail {
    font-size: 19px;
  }
  .esg-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 26px 24px;
  }
  .esg-stat {
    padding: 18px 0;
    /* stacked, every one but the last stands on the rule */
  }
  .esg-stat:nth-child(-n+2) {
    border-bottom: 0;
  }
  .esg-stat:not(:last-child) {
    border-bottom: 1px solid var(--gr-esg-rule);
  }
  .esg-stat-num {
    font-size: 23px;
  }
  /* everything takes the width in turn: the totals, then the ring, then the
     key under it */
  .ps-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    padding-bottom: 30px;
  }
  .ps-title {
    max-width: none;
    font-size: 25px;
  }
  .ps-tabs {
    width: 100%;
  }
  .ps-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 10px 12px;
    font-size: 15px;
  }
  .ps-panel {
    padding-top: 34px;
  }
  .ps-econ,
  .ps-figs,
  .ps-fin {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .ps-figs {
    grid-column: 1;
  }
  .ps-fig-num {
    margin-bottom: 12px;
    padding-bottom: 13px;
    font-size: 27px;
  }
  .ps-ring {
    max-width: 260px;
  }
  .ps-legend-ttl {
    font-size: 16px;
  }
  /* THE DECK BECOMES A SLIDER
     A card dealt onto one spot needs a spot worth reading, and a phone has
     none to spare - so main.js hands the same five cards to Swiper instead and
     they are taken one at a time. The picture is no longer a wide plate, so
     the card is let out to its content and the figures run down it. */
  .ob-title {
    font-size: 26px;
    line-height: 1.4;
  }
  /* a slider has nothing standing above the card, so the gap is only the gap */
  .ob-stage {
    margin-top: 44px;
  }
  .ob-count-now {
    font-size: 40px;
  }
  .ob-count-all {
    font-size: 17px;
  }
  .ob-card {
    aspect-ratio: auto;
    min-height: 440px;
  }
  .ob-card-in {
    padding: 34px 28px 30px;
  }
  .ob-card-ttl {
    max-width: 200px;
    font-size: 23px;
  }
  .ob-stats {
    flex-direction: column;
    gap: 18px;
  }
  .ob-card-cta {
    margin-top: 20px;
  }
  .ob-stat {
    max-width: 300px;
  }
  /* the few rules Swiper needs of its own. They are written here rather than
     taken off swiper-bundle.css because the deck keeps its own class names -
     main.js hands them to Swiper as wrapperClass and slideClass. */
  .ob-deck.is-slider {
    overflow: hidden;
    border-radius: 14px;
  }
  .ob-deck.is-slider .ob-track {
    display: flex;
    gap: 0;
    box-sizing: content-box;
    transition-property: transform;
  }
  .ob-deck.is-slider .ob-card {
    flex: 0 0 100%;
    width: 100%;
  }
  .theme-intro-wrp {
    padding: 72px 0 84px;
  }
  .ti-head {
    margin-bottom: 40px;
  }
  .ti-title {
    font-size: 26px;
    line-height: 1.4;
  }
  .ti-tgl {
    gap: 16px;
    padding: 22px 18px;
    font-size: 17px;
  }
  .ti-tgl-ico {
    width: 24px;
    height: 24px;
  }
  .ti-panel-in {
    padding: 0 18px 20px;
  }
  .ti-media {
    margin-bottom: 28px;
    aspect-ratio: 4/3;
  }
  :root {
    --gr-gutter: 24px;
  }
  .header-inner {
    padding: 22px var(--gr-gutter);
  }
  .header-right {
    gap: 18px;
  }
  .bnr-wrp {
    padding: 96px 0 54svh;
  }
  /* a phone plate is taller than the 9:16 the cut was framed at, so covering
     it takes the crop off the sides rather than the top - which is where the
     film has its own room, so it is left centred. Only the still behind it is
     blown up, the way it was before, so the hand holds its share of a narrow
     screen rather than shrinking with it. */
  .bnr-media {
    background-size: 200% auto;
    background-position: 34% 100%;
  }
  .bnr-copy {
    width: min(320px, 84%);
  }
  .theme-tgl {
    font-size: 15px;
  }
  .about-section-wrp {
    padding: 56px 0 92px;
  }
  /* the picture is far wider than a phone, so it stops covering the plate and
     sits on the floor at a workable size - the flat sky above it is the
     photograph's own top colour, so there is no seam where it starts */
  .about-media {
    inset: auto 0 0 0;
    height: 46%;
    background-size: 210% auto;
    background-position: 50% 100%;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 34%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 34%);
  }
  .about-head {
    gap: 28px 0;
  }
  .about-title {
    font-size: 23px;
  }
  .bnr-scroll {
    bottom: 28px;
  }
  .bnr-scroll-txt {
    font-size: 11px;
  }
  .bnr-scroll-line {
    height: 34px;
  }
}
@media (max-width: 575px) {
  .fab-dl {
    --fab-h: 40px;
    --fab-fz: 12px;
    --fab-pad: 12px;
    --fab-max: min(260px, calc(100vw - 84px));
  }
  .sf-title {
    font-size: 23px;
  }
  .sf-pillar {
    font-size: 20px;
  }
  .sf-area-ttl {
    font-size: 17px;
  }
  .strategic-prior-wrp {
    padding: 48px 0 56px;
  }
  .sp-title {
    font-size: 21px;
  }
  /* two of these on a phone leaves a column too narrow for the copy to break
     in, so they read one under the other */
  .sp-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .sp-num {
    margin-bottom: 14px;
  }
  .st-title {
    font-size: 21px;
  }
  .dm-title {
    font-size: 21px;
  }
  .sc-title {
    font-size: 21px;
  }
  /* a phone is a column too narrow for two, so the six read one under the other
     - and with the row that short the badge sits beside its title rather than
     under it, which would leave the list all badge and no words */
  .dc-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .dc-link {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 0;
  }
  .dc-ttl {
    margin-bottom: 0;
  }
  .dc-ico {
    margin-top: 0;
  }
  /* the line and the mark no longer clear each other across a phone, so the
     mark comes back into the row and stands under the line rather than beside
     it - and the line goes on being centred, which is all it was ever doing */
  .ft-inner {
    flex-direction: column;
    gap: 16px;
  }
  .footer-brand {
    position: static;
    transform: none;
  }
  .sc-tag {
    margin-bottom: 20px;
  }
  /* nine badges across is wider than a phone, so the seventeen are left to
     break where the rail runs out rather than at a count */
  .sc-sdg {
    max-width: none;
  }
  .sc-focus-name {
    font-size: 14px;
  }
  /* a phone is far narrower than the picture, so it stops being covered from
     its middle and is taken from the side the water is on */
  .dm-plate {
    background-position: 42% 50%;
  }
  /* two of them is a column too narrow for the longest names, so on a phone
     they read one under the other - and with one column there is no second to
     start a span from, so the last one goes back to taking its turn */
  .st-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px 0;
  }
  .st-item:last-child {
    grid-column: auto;
  }
  .sp-txt {
    padding-top: 18px;
  }
  .mc-ttl {
    font-size: 20px;
  }
  /* a phone's width is too little for the frame's own ratio to leave a
     portrait worth looking at, so it is given a taller one */
  .mc-pix {
    aspect-ratio: 4/3.4;
  }
  .mc-txt {
    font-size: 14px;
  }
  .esg-card {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .esg-rail {
    font-size: 17px;
  }
  .esg-body {
    padding: 22px 20px;
  }
  .esg-stat-num {
    font-size: 21px;
  }
  .ps-title {
    font-size: 23px;
  }
  .ps-fig-num {
    font-size: 24px;
  }
  .ps-key {
    padding: 13px 15px;
    font-size: 14px;
  }
  .ps-ring {
    max-width: 220px;
  }
  .ob-title {
    font-size: 24px;
  }
  .ob-card {
    min-height: 400px;
  }
  .ob-card-in {
    padding: 30px 22px 26px;
  }
  .ob-card-ttl {
    font-size: 21px;
  }
  .ob-stat-fig {
    font-size: 21px;
  }
  .ti-title {
    font-size: 24px;
  }
  .ti-tgl {
    padding: 20px 16px;
    font-size: 16px;
  }
  .ti-panel-in {
    padding: 0 16px 18px;
  }
  .ti-media {
    aspect-ratio: 3/2;
  }
  .bnr-wrp {
    padding: 84px 0 50svh;
  }
  .about-section-wrp {
    padding: 48px 0 80px;
  }
  .about-title {
    font-size: 21px;
    line-height: 1.38;
  }
  .about-media {
    background-size: 260% auto;
  }
  .bnr-copy {
    width: min(280px, 86%);
  }
}
/* A PHONE ON ITS SIDE
   There is no room to stack anything into 400-odd pixels of height, so the
   plate goes back to being covered by the picture with the lockup on the
   right, the way it reads on a desktop. */
@media (max-width: 991px) and (max-height: 540px) and (orientation: landscape) {
  .bnr-wrp {
    padding: 0;
  }
  /* a landscape plate is back on the landscape cut, so the still goes back to
     covering along with it and the wash comes off - the lockup has the empty
     green at the right to stand on here, the way it does on a desktop */
  .bnr-media {
    background-size: cover;
    background-position: 58% 50%;
  }
  /* the lockup is back on the right, so the wash goes back to its side */
  .bnr-media::after {
    background: var(--gr-bnr-wash);
  }
  .bnr-video {
    object-position: 58% 50%;
  }
  .bnr-inner {
    justify-content: flex-end;
    padding: 0 var(--gr-bnr-inset);
  }
  .bnr-copy {
    width: min(300px, 38%);
  }
  .bnr-scroll {
    bottom: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}