@charset "UTF-8";
/* =========================================================
   HIKAL — Integrated Annual Report 2025-26
   Author: style.scss  (compiled to style.css)
   ========================================================= */
/* ---------- Variables ---------- */
/* the hero sky */
/* ---------- Base ---------- */
* {
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: #000000;
  font-size: 16px;
  line-height: 1.4;
  background: #ffffff;
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

/* ---------- Smooth scrolling (Lenis) ----------
   Lenis eases the real scroll position, so the sticky pins keep working.
   These four rules are what it needs from the stylesheet: the document
   must be free to take its natural height, nothing else may try to smooth
   the scroll at the same time, nested scrollers must not chain their
   overscroll back to the page, and iframes must not swallow the wheel
   mid-scroll. The classes are put on <html> by the library itself. */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

a {
  color: #0354AC;
  text-decoration: none;
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

a:hover {
  color: #009988;
}

/* screen-reader-only text (accounting negatives, etc.) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hk-container {
  width: 100%;
  max-width: 1366px;
  margin: 0 auto;
  padding: 0 20px;
}

.hk-container-esg {
  width: 100%;
  max-width: 1305px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Shared type ---------- */
.sec-eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #0354AC;
  margin-bottom: 16px;
}

.sec-eyebrow--dark {
  color: #000000;
}

.sec-eyebrow--light {
  color: #ffffff;
}

.sec-title {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0;
  color: #000000;
  text-wrap: pretty;
}

.sec-title--light {
  color: #ffffff;
}

/* line masks built by split-reveal.js — the padding/margin pair keeps
   descenders from being clipped by the overflow */
.sec-title .sl {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.sec-title .sl__i {
  display: block;
  will-change: transform;
}

/* ---------- Star glyph ---------- */
.star {
  width: 20px;
  height: 20px;
  fill: #009988;
  flex: 0 0 auto;
}

.star--lg {
  width: 26px;
  height: 26px;
}

/* ---------- Buttons ---------- */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 10px 20px 10px 10px;
  border: 1px solid #009988;
  border-radius: 38px;
  color: #009988;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}

.btn-pill:hover {
  background: #009988;
  color: #ffffff;
}

.btn-pill:hover .star {
  fill: #ffffff;
}

.btn-pill--dark {
  border-color: #000000;
  color: #000000;
}

.btn-pill--dark .star {
  fill: #000000;
}

.btn-pill--dark:hover {
  background: #000000;
  color: #ffffff;
}

.btn-pill--dark:hover .star {
  fill: #ffffff;
}

.btn-pill--white {
  border-color: #ffffff;
  color: #ffffff;
}

.btn-pill--white .star {
  fill: #ffffff;
}

.btn-pill--white:hover {
  background: #ffffff;
  color: #0354AC;
}

.btn-pill--white:hover .star {
  fill: #0354AC;
}

/* ---------- Stats ---------- */
.stat {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.stat__value {
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  display: block;
}

.stat__value em {
  font-style: normal;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.stat__value em:first-child {
  margin-right: 0.18em;
}

.stat__value--sm {
  font-size: 32px;
}

.stat__label {
  font-size: 16px;
  font-weight: 500;
}

.stat--md .stat__value {
  font-size: 46px;
}

.stat--md .stat__value em {
  font-size: 24px;
}

.stat--sm .stat__value {
  font-size: 36px;
}

.stat--sm .stat__value em {
  font-size: 20px;
}

.stat--sm .stat__label {
  font-size: 14px;
  font-weight: 400;
}

.stat--light {
  color: #ffffff;
}

.stat--light .stat__value {
  font-size: 36px;
}

.stat--light .stat__value em {
  font-size: 20px;
}

.stat--light .stat__label {
  font-size: 14px;
  font-weight: 400;
}

.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 40px;
}

.stat-row--3 {
  gap: 40px;
}

.stat-row--3 .stat {
  width: 270px;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  will-change: transform;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Past the first screen the bar needs its own ground, or the logo and the
   links read against whatever section happens to be underneath. */
.site-header.is-stuck {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(23, 70, 122, 0.08);
}

/* Reading downward: out of the way. Scrolling back up brings it straight
   back, so the nav is one flick away without ever covering the page. */
.site-header.is-hidden {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
}

.site-header__logo img {
  height: 40px;
  width: auto;
}

.site-header__toggle {
  display: none;
}

.site-header__right {
  display: flex;
  align-items: center;
}

.report-link {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #17467A;
  font-size: 16px;
}

.report-link b {
  font-weight: 700;
}

.report-link__icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(180deg, #DCEAF7 0%, #B9D5EC 100%);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.report-link__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #17467A;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-header__divider {
  width: 1px;
  height: 42px;
  margin: 0 26px;
  background: linear-gradient(180deg, rgba(23, 70, 122, 0) 0%, #17467A 50%, rgba(23, 70, 122, 0) 100%);
}

.site-header__search {
  background: none;
  border: 0;
  padding: 0;
  line-height: 0;
}

.site-header__search svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #17467A;
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* =========================================================
   PRELOADER + INTRO
   ========================================================= */
.is-loading,
.is-loading body {
  overflow: hidden;
}

/* only ever shown when JS is running, so a no-JS visitor is never trapped */
.preloader {
  display: none;
}

.js .preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  padding: 54px 60px 46px;
  color: #fff;
  background: radial-gradient(115% 130% at 50% 30%, #1B5390 0%, #17467A 46%, #0A2C53 100%);
  clip-path: inset(0% 0% 0% 0%);
  will-change: clip-path;
}

.preloader__orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.preloader__orb {
  position: absolute;
  display: block;
  opacity: 0.42;
  filter: blur(1px);
  mix-blend-mode: screen;
  will-change: transform;
}

.preloader__orb--1 {
  top: -170px;
  left: -130px;
  width: 520px;
  animation: pl-drift 13s ease-in-out infinite;
}

.preloader__orb--2 {
  right: -190px;
  bottom: -220px;
  width: 640px;
  animation: pl-drift 17s ease-in-out -4s infinite reverse;
}

.preloader__orb--3 {
  top: 21%;
  right: 19%;
  width: 148px;
  opacity: 0.65;
  animation: pl-drift 9s ease-in-out -2s infinite;
}

@keyframes pl-drift {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(22px, -30px, 0) scale(1.05);
  }
}
.preloader__core {
  position: relative;
  margin: auto;
  text-align: center;
}

.preloader__logo {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.preloader__logo img {
  display: block;
  width: 196px;
  height: auto;
  filter: brightness(0) invert(1);
}

.preloader__sheen {
  position: absolute;
  inset: -20% -10%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 62%);
  transform: translateX(-130%);
  animation: pl-sheen 2.6s cubic-bezier(0.45, 0, 0.2, 1) 0.5s infinite;
}

@keyframes pl-sheen {
  0% {
    transform: translateX(-130%);
  }
  55%, 100% {
    transform: translateX(130%);
  }
}
.preloader__tag {
  margin: 26px 0 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.preloader__tag b {
  font-weight: 700;
  color: #fff;
}

.preloader__foot {
  position: relative;
}

.preloader__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.preloader__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  padding-bottom: 8px;
}

.preloader__num {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 68px;
  font-weight: 300;
  line-height: 0.85;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.preloader__num i {
  font-style: normal;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.55);
}

.preloader__bar {
  display: block;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.preloader__bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #098 0%, #7FC4EE 100%);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* hero title lines get wrapped by the intro script */
.hero__title .ln {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.hero__title .ln__i {
  display: block;
  will-change: transform;
}

@media (max-width: 767px) {
  .js .preloader {
    padding: 28px 24px 26px;
  }
  .preloader__logo img {
    width: 140px;
  }
  .preloader__tag {
    margin-top: 20px;
    font-size: 10px;
    letter-spacing: 0.24em;
  }
  .preloader__num {
    font-size: 42px;
  }
  .preloader__label {
    letter-spacing: 0.18em;
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .preloader__orb,
  .preloader__sheen {
    animation: none;
  }
}
/* =========================================================
   HERO (pinned: banner -> intro)
   ========================================================= */
/* 200vh = one screen of scroll to play the banner -> intro sequence, plus
   the 100vh pin itself. The pin carries the sky, so the gradient fills
   the whole section no matter how this height changes. */
.hero {
  position: relative;
  height: 200vh;
}

.hero__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: radial-gradient(80.8% 57.13% at 50% 50%, #CCE7F8 0%, #C9E5F7 33%, #C1DFF3 51%, #B3D6EE 66%, #A0C8E6 78%, #87B6DC 90%, #69A2D0 100%);
}

.hero__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(80.8% 57.13% at 50% 50%, #CCE7F8 0%, #C9E5F7 33%, #C1DFF3 51%, #B3D6EE 66%, #A0C8E6 78%, #87B6DC 90%, #69A2D0 100%);
}

.hero__canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1512px;
  height: 850px;
  margin: -425px 0 0 -756px;
  /* centred by margin, not transform, so the
                                  timeline is free to animate y on it */
  /* The banner is composed on a fixed 1512x850 board so the bubbles and the
     type hold the exact geometry of the comp. On anything narrower the board
     is scaled as a whole rather than reflowed — that is what keeps the titles
     off the edges at 1366 / 1280 instead of letting the board hang out of the
     viewport on both sides. --hero-k is measured in js/main.js. */
  transform: scale(var(--hero-k, 1));
  transform-origin: 50% 50%;
}

.hero__circles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__circles .hc {
  position: absolute;
  display: block;
  will-change: transform, opacity;
}

/* one transform layer per bubble — carries the pointer parallax so it
   never collides with the intro / scroll transforms on the image */
.hero__circles .hc-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* back circles — natural 326px artwork, laid out to match the banner comp */
.hc--b1 {
  left: 336px;
  top: -23px;
  width: 326px;
  opacity: 0.5;
}

/* top left */
.hc--b2 {
  left: 212px;
  top: 228px;
  width: 326px;
  opacity: 0.5;
}

/* left, mid height */
.hc--b3 {
  left: 961px;
  top: 254px;
  width: 326px;
  opacity: 0.5;
}

/* right */
.hc--b4 {
  left: 948px;
  top: 582px;
  width: 326px;
  opacity: 0.5;
}

/* bottom right */
.hc--b5 {
  left: 311px;
  top: 747px;
  width: 326px;
  opacity: 0.5;
}

/* bottom centre */
.hc--b6 {
  left: 806px;
  top: 69px;
  width: 164px;
  opacity: 0.5;
}

/* small, top right */
.hc--f1 {
  left: 581px;
  top: 77px;
  width: 373px;
}

.hc--f2 {
  left: 628px;
  top: 254px;
  width: 433px;
}

.hc--f3 {
  left: 477px;
  top: 443px;
  width: 373px;
}

.hc--s1 {
  left: 441px;
  top: 473px;
  width: 164px;
}

.hc--star {
  width: 114px;
}

.hc--star1 {
  left: 846px;
  top: 203px;
  z-index: 1;
}

.hc--star2 {
  left: 484px;
  top: 642px;
  z-index: 1;
}

.hero__title {
  position: absolute;
  margin: 0;
  font-size: 48px;
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #17467A;
  will-change: transform;
}

.hero__title strong {
  font-weight: 700;
}

.hero__title--a {
  left: 202px;
  top: 188px;
}

.hero__title--b {
  right: 254px;
  top: 636px;
  text-align: right;
}

.hero__scroll {
  position: absolute;
  left: 69px;
  top: 712px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero__mouse {
  width: 16px;
  height: 28px;
  border: 1px solid rgba(23, 70, 122, 0.35);
  border-radius: 10px;
  display: grid;
  place-items: start center;
  padding-top: 4px;
}

.hero__mouse i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #17467A;
  display: block;
  animation: heroScroll 1.6s ease-in-out infinite;
}

.hero__scroll-text {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  color: #17467A;
  letter-spacing: 0.02em;
}

@keyframes heroScroll {
  0%, 100% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(10px);
    opacity: 0.3;
  }
}
.hero__intro {
  position: absolute;
  left: 790px;
  top: 188px;
  width: 620px;
  opacity: 0;
  visibility: hidden;
}

.hero__intro-text {
  font-size: 18px;
  line-height: 1.4;
  margin: 0 0 40px;
}

/* =========================================================
   WHO WE ARE
   ========================================================= */
.who {
  background: #ffffff;
}

.who__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* the panel's circle composition is sized off the panel's own width via
     --u below, so the grid has to be a query container */
  container-type: inline-size;
}

.who__left {
  display: flex;
  justify-content: flex-end;
}

.who__left-inner {
  width: 100%;
  /* right-aligned inside the half column: the copy runs 540px wide and sits
     on a 72px gutter at the 1512px design width. The gutter is padding rather
     than the box's own offset so it holds all the way down to the 1200px
     breakpoint — sized off the box, it collapsed to 36px by 1441px. */
  max-width: 756px;
  padding: 99px 136px 60px 72px;
}

.who__text {
  font-size: 18px;
  line-height: 1.4;
  margin: 24px 0 28px;
}

.who__left-inner .stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 240px));
  gap: 10px 0;
  margin-bottom: 30px;
}

/* Two CTAs sit side by side under the stats and wrap as a pair on narrow
   viewports rather than one dropping out of line with the other. */
.who__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.who__right {
  position: relative;
  /* One design pixel. The dashed ring is wider than the panel, so it bleeds
     off both edges and reads as an arc; at a fixed 860px it stops bleeding
     the moment the panel grows past that and the arc closes into a circle
     sitting inside the panel. Everything drawn on the ring is sized in --u
     so the whole composition scales with the panel and keeps the screenshot's
     proportions. --u is exactly 1px at the 1512px design width, and stops
     growing past 1920 so it can't run away on an ultrawide display. */
  --u: calc(min(50cqw, 960px) / 756);
  min-height: calc(820 * var(--u));
  overflow: hidden;
  background: linear-gradient(180deg, #E4F0FA 0%, #DCEBF8 100%);
}

.who__photo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  background: url("../images/vis-mis-rhs-pic.jpg") center bottom/cover no-repeat;
  opacity: 0.5;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 26%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 26%);
}

.who__ring {
  position: absolute;
  left: 50%;
  top: calc(-198 * var(--u));
  width: calc(860 * var(--u));
  height: calc(860 * var(--u));
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #E1EEF9 0%, rgba(214, 232, 247, 0.86) 100%);
  border: 1px dashed rgba(3, 84, 172, 0.55);
}

.who__vm {
  position: absolute;
  width: 278px;
  z-index: 3;
}

/* anchored to the panel's centre, the same as the ring, the CORE VALUES
   heading and the value markers. Pinning these two to the panel's left edge
   instead splits the composition in half on anything wider than the 1512px
   design width — the pair drifts left while everything else stays centred. */
.who__vm--vision {
  /* The pair is 604px of fixed-width card either side of the panel centre,
     while everything else in this composition scales with --u. Below about
     a 1320px viewport the half-width panel is narrower than the pair needs
     and the Vision card slid off the left edge, where the panel's
     overflow:hidden cut it. Clamping keeps a 12px margin only once it would
     actually clip -- at 1366 and above these resolve to the original
     offsets, so the desktop composition is untouched. */
  left: max(12px, 50% - 326px);
  top: 138px;
}

.who__vm--mission {
  left: min(50% + 32px, 100% - 290px);
  top: 138px;
}

.who__vm-icon {
  display: block;
  height: 38px;
  margin-bottom: 26px;
}

.who__vm-icon svg {
  height: auto;
  width: auto;
  fill: #17467A;
}

.who__vm-icon--mission {
  height: 38px;
}

.who__vm-title {
  font-size: 24px;
  font-weight: 300;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: #000000;
}

.who__vm-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  margin: 0;
}

.who__values {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.who__values-set {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}

.who__values-set.is-active {
  opacity: 1;
  visibility: visible;
}

.who__values-title {
  position: absolute;
  left: 50%;
  top: calc(494 * var(--u));
  transform: translateX(-50%);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-align: center;
}

.who__values-set[data-set=pillars] .who__values-title {
  top: calc(512 * var(--u));
}

body:has(.who__values-set[data-set=pillars].is-active) .who__values-dots {
  top: calc(554 * var(--u));
}

.who__values-dots {
  position: absolute;
  left: 50%;
  top: calc(536 * var(--u));
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
}

.who__values-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid rgba(3, 84, 172, 0.55);
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
}

.who__values-dot.is-active {
  border-color: #0354AC;
}

.who__values-dot.is-active {
  background: #0354AC;
}

.who__values-ring {
  list-style: none;
  margin: 0;
  padding: 0;
}

.who__values-ring li {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 150px;
  text-align: center;
}

.cv__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #17467A;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.cv__dot i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #17467A;
  display: block;
}

.cv__label {
  font-size: 14px;
  font-weight: 700;
  color: #0354AC;
  line-height: 1.25;
}

.who__values-ring--6 li:nth-child(1) {
  left: calc(50% - 305 * var(--u));
  top: calc(526 * var(--u));
}

.who__values-ring--6 li:nth-child(2) {
  left: calc(50% - 183 * var(--u));
  top: calc(612 * var(--u));
}

.who__values-ring--6 li:nth-child(3) {
  left: calc(50% - 62 * var(--u));
  top: calc(649 * var(--u));
}

.who__values-ring--6 li:nth-child(4) {
  left: calc(50% + 61 * var(--u));
  top: calc(649 * var(--u));
}

.who__values-ring--6 li:nth-child(5) {
  left: calc(50% + 183 * var(--u));
  top: calc(612 * var(--u));
}

.who__values-ring--6 li:nth-child(6) {
  left: calc(50% + 304 * var(--u));
  top: calc(526 * var(--u));
}

.who__values-ring--5 li:nth-child(1) {
  left: calc(50% - 245 * var(--u));
  top: calc(576 * var(--u));
}

.who__values-ring--5 li:nth-child(2) {
  left: calc(50% - 123 * var(--u));
  top: calc(635 * var(--u));
}

.who__values-ring--5 li:nth-child(3) {
  left: calc(50% - 1 * var(--u));
  top: calc(653 * var(--u));
}

.who__values-ring--5 li:nth-child(4) {
  left: calc(50% + 121 * var(--u));
  top: calc(636 * var(--u));
}

.who__values-ring--5 li:nth-child(5) {
  left: calc(50% + 243 * var(--u));
  top: calc(577 * var(--u));
}

/* =========================================================
   PROJECT PINNACLE
   ========================================================= */
.pinnacle {
  position: relative;
  padding: 99px 0 0;
  overflow: hidden;
  background: #EAF2FA url("../images/pillar-bg.jpg") center top/cover no-repeat;
}

.pinnacle__head {
  max-width: 730px;
  margin: 0 auto;
  text-align: center;
}

.pinnacle__title {
  margin-bottom: 22px;
}

.pinnacle__sub {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
}

.pinnacle__text {
  font-size: 18px;
  line-height: 1.42;
  margin: 30px auto 40px;
  max-width: 700px;
}

.pinnacle__btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.pillars {
  margin-top: 90px;
}

.pillars__title {
  display: block;
  text-align: center;
  color: #009988;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 48px;
}

.pillars__band {
  display: flow-root;
  max-width: 1127px;
  margin: 0 auto;
  padding: 0 100px 100px;
  border-radius: 100px 100px 0 0;
  background: linear-gradient(180deg, #009988 46.34%, #007F71 100%);
}

.pillars-swiper {
  overflow: visible;
}

.pillars-swiper.swiper-initialized {
  overflow: hidden;
  padding-top: 44px;
  margin-top: -44px;
}

.pillars__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  text-align: center;
  width: auto;
}

.pillar__icon {
  width: 64px;
  height: 64px;
  margin-top: -32px;
  flex: 0 0 auto;
  display: block;
}

.pillar__icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.pillar__label {
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.pillars-pagination {
  display: none;
}

/* =========================================================
   HIGHLIGHTS
   ========================================================= */
.highlights {
  padding: 99px 0 100px;
}

.highlights__head {
  row-gap: 40px;
}

.highlights__intro {
  font-size: 18px;
  line-height: 1.4;
  margin: 0 0 40px;
}

.hl-card {
  display: flex;
  gap: 40px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 44px rgba(3, 84, 172, 0.1);
  padding: 71px 50px;
  margin-top: 100px;
}

.hl-card__side {
  width: 386px;
  flex: 0 0 386px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.hl-card__title {
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.2;
}

.hl-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.biz-row {
  display: flex;
  gap: 40px;
}

.biz {
  width: 270px;
}

.biz__icon {
  height: 115px;
  width: auto;
  object-fit: contain;
  margin-bottom: 57px;
  display: block;
}

.biz__title {
  color: #009988;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 30px;
}

.biz__text {
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
}

/* =========================================================
   CHAIRMAN
   ========================================================= */
.chairman {
  position: relative;
  overflow: hidden;
  height: 850px;
  background: linear-gradient(135deg, #7EB7D2 0%, #A3D3E1 48%, #B1DCE5 100%);
}

.chairman__star {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.chairman__star--tr {
  top: 0;
  right: -128px;
  width: 420px;
}

.chairman__star--bl {
  bottom: 0;
  left: -82px;
  width: 332px;
  transform: rotate(180deg);
}

.chairman__glow {
  position: absolute;
  left: 655px;
  top: 90px;
  width: 770px;
  height: 770px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 62%, rgba(255, 255, 255, 0) 72%);
  z-index: 1;
}

.chairman__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: 1512px;
  margin: 0 auto;
}

.chairman__copy {
  position: absolute;
  left: 73px;
  top: 90px;
  width: 620px;
}

.chairman__eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #0354AC;
  margin-bottom: 22px;
}

.chairman__title {
  font-size: 48px;
  line-height: 1.08;
  margin: 0;
}

.chairman__body {
  margin: 78px 0 0 128px;
  max-width: 410px;
}

.chairman__salute {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 12px;
}

.chairman__text {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 68px;
}

.chairman__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  max-width: 425px;
}

.chairman__btns .btn-pill {
  height: 38px;
  font-size: 14px;
  gap: 8px;
  padding: 8px 16px 8px 8px;
}

.chairman__btns .btn-pill .star {
  width: 16px;
  height: 16px;
}

.chairman__people {
  position: absolute;
  right: 112px;
  bottom: 80px;
  width: 710px;
}

.chairman__photos {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  /* The bubble backdrop is wider than the pair of portraits it sits behind,
     and a background paints only inside its own box — so the box is widened
     by 60px a side and the padding hands that back, leaving the photos where
     they were and giving the circles room to finish instead of being cut off
     at the edges. Sized and nudged so each bubble centres on a portrait. */
  margin: 0 -60px;
  padding: 0 60px;
  background: url("../images/chair-bubble-pic.png") -2px center/821px auto no-repeat;
}

.chairman__photo {
  display: block;
  width: auto;
}

.chairman__photo--jai {
  height: 542px;
}

.chairman__photo--sameer {
  height: 537px;
}

.chairman__names {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #0354AC;
  padding-top: 16px;
}

.chairman__name {
  padding-left: 53px;
}

.chairman__name:last-child {
  padding-left: 13px;
}

.chairman__name-t {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.chairman__name-r {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #0354AC;
}

/* =========================================================
   WHERE WE OPERATE
   ========================================================= */
.operate {
  padding: 99px 0 100px;
}

.operate__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}

.operate__grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 70px;
  margin-top: 40px;
  align-items: start;
}

.operate__mix-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 30px;
}

.operate__pie {
  width: 257px;
  display: block;
  margin-bottom: 70px;
}

.geo-table {
  width: 100%;
  border-collapse: collapse;
}

.geo-table th {
  font-size: 18px;
  font-weight: 700;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

.geo-table td {
  font-size: 16px;
  font-weight: 400;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.geo-table th:last-child,
.geo-table td:last-child {
  text-align: right;
}

.operate__map {
  position: relative;
}

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

.map-num {
  position: absolute;
  font-size: 16px;
  color: #000000;
  transform: translate(-50%, -50%);
}

.map-num--1 {
  left: 19.6%;
  top: 28.9%;
}

.map-num--2 {
  left: 30.2%;
  top: 67.6%;
}

.map-num--3 {
  left: 50%;
  top: 31.8%;
}

.map-num--4 {
  left: 67.8%;
  top: 50.1%;
}

.map-num--5 {
  left: 83.3%;
  top: 40.7%;
}

.map-pin {
  position: absolute;
  left: 67.3%;
  top: 41.8%;
  transform: translate(-50%, -100%);
  background: none;
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.map-pin__label {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: #0354AC;
  letter-spacing: 0.02em;
}

.map-pin__dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #0354AC;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  box-shadow: 0 0 0 6px rgba(3, 84, 172, 0.15);
}

.map-pin:hover .map-pin__dot {
  background: #009988;
  box-shadow: 0 0 0 8px rgba(0, 153, 136, 0.18);
}

/* =========================================================
   OUR SCORECARD
   ========================================================= */
.scorecard {
  padding: 89px 0 60px;
  overflow: hidden;
}

.scorecard__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 58px;
}

.scorecard__eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #0354AC;
  margin-bottom: 14px;
}

.scorecard__title {
  font-size: 48px;
  line-height: 1.05;
  margin: 0;
}

.swiper-nav {
  display: flex;
  gap: 6px;
  padding-top: 26px;
}

.swiper-nav__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: #14509B;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.25s ease;
}

.swiper-nav__btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.swiper-nav__btn.swiper-button-disabled {
  background: #CFE0F1;
  cursor: default;
}

.swiper-nav__btn.swiper-button-disabled svg {
  stroke: #14509B;
}

.kpi-swiper {
  overflow: visible;
}

.kpi {
  width: 438px;
  max-width: 100%;
}

.kpi__hd {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 34px;
}

.kpi__name {
  font-size: 20px;
  font-weight: 700;
  color: #1157A6;
  letter-spacing: -0.01em;
}

.kpi__unit {
  font-size: 12px;
  font-weight: 400;
}

.kpi__vals,
.kpi__fys,
.kpi__negs {
  display: flex;
  gap: 16px;
  padding: 0 32px;
}

.kpi__vals {
  margin-bottom: 12px;
}

.kpi__plot {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  height: 235px;
  padding: 0 32px;
}

.kpi__axis {
  height: 4px;
  background: #0B3F80;
  border-radius: 2px;
}

.bar {
  position: relative;
  width: 62px;
  flex: 0 0 62px;
  text-align: center;
}

.kpi__plot > .bar {
  height: 235px;
  align-self: stretch;
}

.bar--neg .bar__val {
  flex: 0 0 auto;
  height: auto;
}

.bar__val {
  display: block;
  width: 62px;
  flex: 0 0 62px;
  font-size: 14px;
  font-weight: 700;
  color: #5E6470;
  text-align: center;
}

.bar__val--hl {
  color: #14509B;
}

.bar__stem {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: calc(235px - var(--h));
  background: #AFB4BC;
}

.bar__col {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--h);
  border-radius: 31px 31px 0 0;
  background: #B9CDE6;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 6px;
}

.bar__col--hl {
  background: #14509B;
}

.bar__cap {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #C7D8EC;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
  display: block;
}

.bar__col--hl .bar__cap {
  background: #123F7C;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.bar__fy {
  display: block;
  width: 62px;
  flex: 0 0 62px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  padding-top: 14px;
}

.bar__fy-inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  font-size: 14px;
  text-align: center;
}

.kpi__negs {
  margin-top: -34px;
  align-items: flex-start;
}

.bar--neg {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bar__col--neg {
  position: static;
  height: var(--h, 62px);
  width: 62px;
  border-radius: 0 0 31px 31px;
  align-items: flex-end;
  padding: 0 0 6px;
}

.bar--neg .bar__val {
  margin-top: 12px;
}

.rating-pill {
  max-width: 696px;
  margin: 96px auto 0;
  padding: 14px 40px;
  text-align: center;
  background: #F2F6FE;
  border: 1px solid #0354AC;
  border-radius: 40px;
}

.rating-pill__value {
  display: block;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.rating-pill__note {
  display: block;
  font-size: 14px;
  font-weight: 700;
}

/* =========================================================
   WHAT WE DO
   ========================================================= */
.wwd {
  padding: 0px 0 100px;
  overflow: hidden;
}

.wwd__title {
  text-align: center;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1157A6;
  margin: 0;
}

/* The strip scrolls sideways rather than wrapping once the tabs stop fitting.
   `justify-content: center` would make the left overflow unreachable, so the
   row is centred with auto margins instead — centred while it fits, and both
   ends still scrollable once it doesn't. */
.wwd__tabs {
  display: flex;
  gap: 5px;
  margin: 40px 0 26px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.wwd__tabs::-webkit-scrollbar {
  display: none;
}

.wwd__tab:first-child {
  margin-left: auto;
}

.wwd__tab:last-child {
  margin-right: auto;
}

.wwd__tab {
  flex: 0 0 auto;
  white-space: nowrap;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0 12px 14px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #000000;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.wwd__tab:hover {
  color: #1157A6;
}

.wwd__tab.is-active {
  border-bottom-color: #1157A6;
}

.wwd-swiper {
  overflow: visible;
  margin: 0 -20px;
}

.wwd__panel {
  display: grid;
  grid-template-columns: 505px 1fr;
  min-height: 590px;
}

.wwd__left {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 78px 40px 40px 76px;
}

.wwd__panel-title {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: #000000;
}

.wwd__art {
  display: block;
  width: auto;
  margin-top: 40px;
}

.wwd__right {
  background: #F1F8FE;
  padding: 118px 60px 60px 91px;
}

.wwd__text {
  font-size: 18px;
  line-height: 1.45;
  margin: 0 0 32px;
  max-width: 640px;
}

.wwd__btn {
  height: 40px;
}

.wwd__caps {
  display: grid;
  grid-template-columns: 298px 1fr;
  gap: 0;
  margin-top: 78px;
}

.wwd__cap-title {
  display: block;
  color: #1157A6;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 22px;
}

.wwd-stat {
  margin-bottom: 30px;
}

.wwd-stat:last-child {
  margin-bottom: 0;
}

.wwd-stat__value {
  display: block;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.wwd-stat__value em {
  font-style: normal;
  font-size: 20px;
  font-weight: 700;
}

.wwd-stat__value em:first-child {
  margin-right: 0.18em;
}

.wwd-stat__label {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  margin-top: 4px;
}

.wwd__note {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  margin: 26px 0 0;
}

/* =========================================================
   HOW WE CREATE VALUE
   ========================================================= */
.value {
  position: relative;
  overflow: hidden;
  min-height: 850px;
  padding: 88px 0 100px;
  background: #DDF0FE;
}

.value__circle {
  position: absolute;
  top: -74px;
  border-radius: 50%;
  height: max(997px, 100% + 148px);
  aspect-ratio: 1;
}

.value__circle--light {
  left: -379px;
  background: #C7EBFB;
}

.value__circle--dark {
  left: 888px;
  background: #97BFF2;
}

.value__star {
  position: absolute;
  width: 18px;
  height: 18px;
  z-index: 2;
}

.value__star svg {
  width: 100%;
  height: 100%;
  fill: #01ABE6;
  display: block;
}

.value__star--1 {
  left: 474px;
  top: 77px;
}

.value__star--2 {
  left: 1026px;
  top: 770px;
}

.value__inner {
  position: relative;
  z-index: 3;
}

@media (min-width: 1406px) {
  .value__inner {
    padding: 0;
  }
}
.value__eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0354AC;
  margin-bottom: 16px;
}

.value__title {
  font-size: 48px;
  line-height: 1.05;
  margin: 0;
}

.value__flow {
  display: flex;
  align-items: center;
  margin: 44px 0 0;
  padding-left: 315px;
}

.flow-pill {
  background: #ffffff;
  border: 1px solid #14509B;
  border-radius: 40px;
  cursor: pointer;
  height: 40px;
  padding: 0 26px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #14509B;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease;
}

.value__flow .flow-pill:nth-of-type(1) {
  width: 114px;
  padding: 0;
}

.value__flow .flow-pill:nth-of-type(2) {
  width: 244px;
  padding: 0;
}

.value__flow .flow-pill:nth-of-type(3) {
  width: 145px;
  padding: 0;
}

.flow-pill.is-active {
  background: #0B4A96;
  border-color: #0B4A96;
  color: #ffffff;
}

.flow-arrow {
  position: relative;
  width: 116px;
  height: 1px;
  background: #14509B;
  flex: 0 0 116px;
}

.flow-arrow:after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-left: 9px solid #14509B;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.value__panes {
  margin-top: 66px;
}

.value__pane {
  display: none;
}

.value__pane.is-active {
  display: block;
}

.value__cols {
  display: grid;
  gap: 26px;
}

.value__cols--4 {
  grid-template-columns: 356px 346px 316px 1fr;
  gap: 0;
  padding-left: 74px;
}

.value__cols--3 {
  grid-template-columns: 341px 349px 1fr;
  gap: 0;
  padding-left: 219px;
}

.value__col {
  display: flex;
  flex-direction: column;
}

.vc-group__title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 24px;
}

.vc-div {
  display: block;
  height: 1px;
  border-top: 1px dotted rgba(0, 0, 0, 0.35);
  width: 70%;
  margin: 26px 0;
}

.vc-stat {
  margin-bottom: 26px;
}

.vc-stat:last-child {
  margin-bottom: 0;
}

.vc-stat__value {
  display: block;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.vc-stat__value em {
  font-style: normal;
  font-size: 20px;
  font-weight: 700;
}

.vc-stat__value em:first-child {
  margin-right: 0.18em;
}

.vc-stat__value sub {
  font-size: 0.62em;
}

.vc-stat__label {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  margin-top: 3px;
}

.vcp {
  position: relative;
  max-width: 900px;
  margin: 30px auto 0;
  padding: 24px;
  border: 1px dashed #14509B;
  border-radius: 44px;
}

.vcp__card {
  background: #ffffff;
  border-radius: 30px;
  padding: 56px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.vcp__half {
  padding: 0 40px;
}

.vcp__half + .vcp__half {
  border-left: 1px solid #D6E6F5;
}

.vcp__h {
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  margin: 0 0 30px;
}

.vcp__p {
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  color: #14509B;
  margin: 0;
}

.vcp__edge {
  position: absolute;
  background: #fff;
  border-radius: 5px;
  color: #14509B;
  font-size: 11px;
  font-weight: 500;
  padding: 5px 5px;
}

.vcp__edge--top {
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}

.vcp__edge--bottom {
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}

.vcp__edge--left {
  left: -10px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
}

.vcp__edge--right {
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
}

/* =========================================================
   COMMITTED TO TOMORROW
   ========================================================= */
.committed {
  padding: 100px 0 110px;
  background: #ffffff;
}

.committed .hk-container {
  padding-left: 84px;
}

@media (min-width: 1406px) {
  .committed .hk-container {
    padding: 0 0 0 64px;
  }
}
.committed__title {
  font-size: 48px;
  line-height: 1.05;
  margin: 0;
}

.committed__grid {
  display: grid;
  grid-template-columns: 866px 338px;
  gap: 34px;
  margin-top: 46px;
}

.committed__main {
  min-width: 0;
}

.committed__sub {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
}

.committed__sub-text {
  font-size: 24px;
  font-weight: 300;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.committed__rule {
  flex: 1 1 auto;
  height: 1px;
  background: rgba(0, 0, 0, 0.18);
}

.ct {
  display: grid;
  grid-template-columns: 250px 1fr;
}

.ct__tabs {
  display: flex;
  flex-direction: column;
  padding-top: 12px;
}

.ct__tab {
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #000000;
  height: 41px;
  padding: 0 15px;
  transition: background 0.25s ease, color 0.25s ease;
}

.ct__tab:hover {
  color: #14509B;
}

.ct__tab.is-active {
  background: #14509B;
  color: #ffffff;
}

.ct__panes {
  position: relative;
  background: #F1F8FE;
  border: 1px solid #BBD8F1;
  border-radius: 8px;
  min-height: 296px;
  padding: 34px 40px;
}

.ct__pane {
  display: none;
}

.ct__pane.is-active {
  display: block;
}

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

.ct__list li {
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 22px;
}

.ct__list li:last-child {
  margin-bottom: 0;
}

.ct__list li:before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #14509B;
}

.committed__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 36px 0 0 250px;
}

.committed__btns .btn-pill {
  height: 40px;
  gap: 8px;
  padding: 8px 16px 8px 8px;
}

.committed__btns .btn-pill .star {
  width: 16px;
  height: 16px;
}

.ecovadis {
  background: #1268B3;
  border-radius: 8px;
  color: #ffffff;
  padding: 30px 34px 38px;
  align-self: start;
}

.ecovadis__title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.ecovadis__meta {
  display: block;
  font-size: 12px;
  font-weight: 700;
}

.ecovadis__text {
  font-size: 14px;
  line-height: 1.55;
  margin: 26px 0 32px;
}

.ecovadis__badge {
  display: block;
  width: 261px;
  max-width: 100%;
  border-radius: 6px;
}

/* =========================================================
   RESEARCH AND TECHNOLOGY
   ========================================================= */
/* 200vh = the 100vh pinned stage plus one screen of scroll to play the
   image-to-cover scale, matching the hero's pacing */
.research {
  position: relative;
  height: 200vh;
  background: #ffffff;
}

.research__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #ffffff;
  display: grid;
  grid-template-rows: auto 1fr;
}

.research__media {
  grid-row: 2;
  place-self: center;
  width: 616px;
  height: 349px;
  transform: scale(1);
  transform-origin: 50% 50%;
  object-fit: cover;
  border-radius: 12px;
  will-change: transform;
}

.research__hd {
  grid-row: 1;
  padding-top: 122px;
  z-index: 3;
}

.research__title {
  font-size: 48px;
  line-height: 1.05;
  margin: 0;
}

.research__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}

.research__overlay.is-on {
  pointer-events: auto;
}

.research__grid {
  height: 100%;
  display: grid;
  grid-template-columns: 620px 1fr;
  gap: 40px;
  align-content: end;
  padding-bottom: 96px;
  color: #ffffff;
}

.research__copy {
  max-width: 560px;
  align-self: end;
}

.research__text {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 26px;
}

.research__btns {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.research__btns .btn-pill {
  height: 38px;
  font-size: 13px;
  gap: 8px;
  padding: 8px 18px 8px 8px;
}

.research__btns .btn-pill .star {
  width: 15px;
  height: 15px;
}

.research__stats {
  display: grid;
  grid-template-columns: 215px 1fr;
  gap: 26px;
  align-self: end;
}

.research__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rt-stat__value {
  display: block;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.rt-stat__label {
  display: block;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  margin-top: 2px;
}

.rt-stat__label b {
  font-weight: 700;
}

/* =========================================================
   ESG
   ========================================================= */
.esg {
  background: #E2F4FD;
  padding: 99px 0 130px;
}

/* ---------- the card deck ----------
   `.esg-pin` is sticky, so for the length of `.esg-runway` the deck holds
   still in the viewport and scrolling advances it instead: every card climbs
   one slot, and whatever was at the front is thrown a full viewport upward
   and out of frame.

   The depth is not a scale() — the cards really are further away, with the
   perspective on the stack doing the foreshortening (288px pairs with the
   30px z-step to shrink each slot by ~9%). Nothing here touches width or
   height, so the deck holds at any breakpoint. The runway's height is
   measured in JS, because one step is a multiple of the card height and the
   card height is set by its own copy. */
.esg-track {
  position: relative;
}

.esg-pin {
  position: sticky;
  top: 90px;
}

.esg-runway {
  height: 0;
}

.esg-stack {
  perspective: 288px;
  perspective-origin: 50% 50%;
}

.esg-stack.is-deck {
  display: grid;
}

.esg-stack.is-deck .esg-card {
  grid-area: 1/1;
  margin-bottom: 0;
  will-change: transform;
  transform: translate3d(0, calc(var(--i, 0) * 6.5%), calc(var(--i, 0) * -30px));
}

.esg-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 1267px;
  max-width: calc(100% - 40px);
  margin: 0 auto 60px;
  min-height: 594px;
  border-radius: 20px;
  overflow: hidden;
  color: #ffffff;
  z-index: calc(10 - var(--i, 0));
  box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.1);
}

.esg-card:last-child {
  margin-bottom: 0;
}

/* ---------- the progress rail ----------
   It measures the runway, not the deck: it fills while the pin is held and
   is full the moment the pin lets go. */
.esg-progress {
  position: fixed;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 16px;
  height: 240px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
}

.esg-progress.is-on {
  opacity: 1;
  visibility: visible;
}

.esg-progress .sp-line {
  width: 1px;
  background: rgba(3, 84, 172, 0.25);
}

.esg-progress .sp-line-read {
  flex: 0 0 auto;
  height: calc(var(--p, 0) * (100% - 26px));
  background: #0354AC;
}

.esg-progress .sp-line-left {
  flex: 1 1 auto;
}

.esg-progress .sp-cursor {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(3, 84, 172, 0.35);
  border-radius: 50%;
}

.esg-progress .sp-cursor i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0354AC;
}

/* ---------- what happens inside a card ----------
   A separate thing from the deck that carries it there. `is-lit` goes on once
   and stays, so scrubbing back up does not replay a card. Everything hidden
   here is hidden behind `is-armed`, which the script adds only once it knows
   it can bring the content back — a script that never runs leaves the section
   whole. */
.esg-track.is-armed .esg-card__media {
  clip-path: inset(100% 0 0 0);
}

.esg-track.is-armed .esg-card__text,
.esg-track.is-armed .esg-card__btn,
.esg-track.is-armed .esg-card__hl-title,
.esg-track.is-armed .esg-stat {
  opacity: 0;
  transform: translateY(18px);
}

.esg-track.is-armed .esg-card.is-lit .esg-card__media {
  animation: esg-wipe 1100ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.esg-track.is-armed .esg-card.is-lit .esg-card__text {
  animation: esg-up 800ms cubic-bezier(0.16, 1, 0.3, 1) 380ms forwards;
}

.esg-track.is-armed .esg-card.is-lit .esg-card__btn {
  animation: esg-up 700ms cubic-bezier(0.16, 1, 0.3, 1) 500ms forwards;
}

.esg-track.is-armed .esg-card.is-lit .esg-card__hl-title {
  animation: esg-up 700ms cubic-bezier(0.16, 1, 0.3, 1) 600ms forwards;
}

/* the highlight figures deal in one at a time, behind their label */
.esg-track.is-armed .esg-card.is-lit .esg-stat {
  animation: esg-up 700ms cubic-bezier(0.16, 1, 0.3, 1) calc(700ms + var(--n, 0) * 70ms) forwards;
}

@keyframes esg-wipe {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0);
  }
}
@keyframes esg-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.esg-card--env .esg-card__panel {
  background: radial-gradient(664px 664px at 40% -18%, #55AFAC 0%, #02736B 100%);
}

.esg-card--social .esg-card__panel {
  background: radial-gradient(664px 664px at 40% -18%, #0277B4 0%, #004076 100%);
}

.esg-card--gov .esg-card__panel {
  background: radial-gradient(664px 664px at 40% -18%, #013D6E 0%, #023252 100%);
}

.esg-card__media {
  position: relative;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 90px 40px 74px 72px;
}

.esg-card__eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}

.esg-card__title {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0;
}

.esg-card__sdg-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}

.sdg {
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

/* the official goal tiles carry their own colour, number and wordmark */
.sdg__item {
  width: 52px;
  height: 52px;
}

.sdg__item img {
  display: block;
  width: 100%;
  height: 100%;
}

.esg-card__panel {
  padding: 88px 60px 60px 65px;
}

.esg-card__text {
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 26px;
  max-width: 533px;
}

.esg-card__btn {
  height: 37px;
  font-size: 13px;
}

.esg-card__hl-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin: 40px 0 20px;
}

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

.esg-card__stats--1 {
  grid-template-columns: 1fr;
}

.esg-card__stats--2 {
  grid-template-columns: 1fr 1fr;
}

.esg-stat__value {
  display: block;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.esg-stat__value em {
  font-style: normal;
  font-size: 19px;
  font-weight: 700;
}

.esg-stat__value em:first-child {
  margin-right: 0.18em;
}

.esg-stat__label {
  display: block;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  margin-top: 3px;
}

/* ---------- the deck on a short window ----------
   The pin holds the deck still in the viewport, so a card that is taller
   than the window can never be read: on a 1366x768 or a 1280x800 laptop
   there are only ~650px of window to land the card, the 90px the pin sits
   below the top, and the slot peeking out behind it. At full size that
   comes to 769px and the last row of highlight figures is cut off by the
   bottom edge.

   Only the vertical rhythm gives way — the card keeps its 1267px width and
   its two columns, so the composition is the same one, read closer. */
@media (min-width: 1200px) and (max-height: 850px) {
  .esg {
    padding: 70px 0 90px;
  }
  .esg-pin {
    top: 24px;
  }
  .esg-card {
    min-height: 0;
  }
  .esg-card__media {
    padding: 54px 40px 46px 72px;
  }
  .esg-card__title {
    font-size: 32px;
  }
  .sdg__item {
    width: 46px;
    height: 46px;
  }
  .esg-card__panel {
    padding: 48px 60px 40px 65px;
  }
  .esg-card__text {
    margin-bottom: 20px;
  }
  .esg-card__hl-title {
    margin: 26px 0 16px;
  }
  .esg-card__stats {
    gap: 16px 40px;
  }
  .esg-stat__value {
    font-size: 26px;
  }
  .esg-stat__value em {
    font-size: 17px;
  }
}
/* =========================================================
   OUR MOTIVATION
   ========================================================= */
.motivation {
  position: relative;
  overflow: hidden;
  background: #004886;
  color: #ffffff;
  padding: 250px 0 200px;
}

.motivation__star {
  position: absolute;
  right: 0;
  bottom: -120px;
  width: 402px;
  opacity: 0.9;
}

.motivation__head {
  text-align: center;
  margin-bottom: 130px;
}

.motivation__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px;
  max-width: 1055px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.motivation__col--offset {
  margin-top: 190px;
}

.award {
  margin-bottom: 140px;
}

.award__img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  margin-bottom: 30px;
}

.award__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 20px;
}

.award__text {
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
}

.award-note {
  background: #D0E7F7;
  color: #000000;
  border-radius: 10px;
  padding: 30px;
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.award-note__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 20px;
}

.award-note__list {
  margin: 0;
  padding-left: 22px;
}

.award-note__list li {
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 30px;
}

.award-note__list li:last-child {
  margin-bottom: 0;
}

.award-note__icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
}

/* =========================================================
   DOWNLOAD CENTRE
   ========================================================= */
.download {
  padding: 100px 0;
}

.download__title {
  margin-bottom: 60px;
}

/* stretch so the card's rule lines up with the last row's rule beside it */
.download__grid {
  display: grid;
  grid-template-columns: 555px minmax(0, 1fr);
  gap: 30px;
  align-items: stretch;
}

/* the box border is gone but the inset stays: the rule runs the full column
   width while the cover and copy sit in from it */
.dl-card {
  display: flex;
  align-items: center;
  gap: 76px;
  padding: 0 30px 30px;
  border-bottom: 1px solid #C9D6E4;
}

.dl-card__title {
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 34px;
}

.btn-dl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 10px 22px;
  border: 1px solid #1268B3;
  border-radius: 38px;
  color: #1268B3;
  font-size: 14px;
  white-space: nowrap;
}

.btn-dl svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #1268B3;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-dl:hover {
  background: #1268B3;
  color: #ffffff;
}

.btn-dl:hover svg {
  stroke: #ffffff;
}

.dl-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 26px;
}

.dl-list {
  display: flex;
  flex-direction: column;
}

.dl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid #C9D6E4;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #000000;
}

.dl-row:hover {
  color: #1268B3;
}

.dl-row__btn {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid #1268B3;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.dl-row__btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #1268B3;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  position: relative;
  background: #D0E7F7;
  padding: 32px 0;
}

.site-footer__star {
  position: absolute;
  top: -31px;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  height: 62px;
  fill: #ffffff;
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-footer__copy {
  margin: 0;
  color: #0354AC;
  font-size: 16px;
  font-weight: 500;
}

.site-footer__top {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: none;
  border: 0;
  padding: 0;
  color: #0354AC;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.site-footer__top-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #1268B3;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
}

.site-footer__top-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-footer__top:hover .site-footer__top-btn {
  background: #0354AC;
}

.site-footer__right {
  display: flex;
  align-items: center;
  gap: 30px;
}

.site-footer__credit {
  display: block;
  line-height: 0;
}

.site-footer__credit svg {
  display: block;
  width: 21px;
  height: 30px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1439px) {
  /* the hero board scales as one piece now (see --hero-k), so the titles keep
     their place in the composition instead of being nudged in per breakpoint */
  .chairman__body {
    margin-left: 60px;
  }
  .wwd__caps {
    gap: 70px;
  }
  .hl-card__side {
    width: 300px;
    flex: 0 0 300px;
  }
}
/* ---------- laptop range: 1280 / 1366 ----------
   The desktop layout is drawn against a 1366px .hk-container with room to
   spare either side, i.e. a 1440+ viewport. From 1200 to 1439 that container
   IS the viewport, so the 48px display type reads oversized and the grids that
   are sized in fixed pixels run out of room: the ecoVadis card (866 + 338 + 34
   = 1238 inside a 1176 container) and the fourth value column both push past
   the right edge, and the 710px absolutely-placed portraits reach back under
   the chairman's copy. Type steps down to sit between the 48px desktop scale
   and the 38px <=1199 tablet scale, and the three grids are made to flex
   instead of overflow. The hero is deliberately left alone: it is a fixed
   1512x850 board that already scales itself through --hero-k (js/main.js). */
@media (min-width: 1200px) and (max-width: 1439px) {
  /* --- display type --- */
  .sec-title,
  .chairman__title,
  .wwd__title,
  .value__title,
  .research__title,
  .committed__title {
    font-size: 42px;
  }
  .wwd__panel-title {
    font-size: 38px;
  }
  .esg-card__title {
    font-size: 34px;
  }
  /* --- stat numerals --- */
  .stat__value {
    font-size: 48px;
  }
  .stat__value em {
    font-size: 24px;
  }
  .stat--md .stat__value {
    font-size: 40px;
  }
  .stat--md .stat__value em {
    font-size: 21px;
  }
  .stat--sm .stat__value,
  .stat--light .stat__value {
    font-size: 32px;
  }
  .stat--sm .stat__value em,
  .stat--light .stat__value em {
    font-size: 18px;
  }
  .wwd-stat__value,
  .vc-stat__value {
    font-size: 28px;
  }
  .esg-stat__value {
    font-size: 26px;
  }
  .rt-stat__value {
    font-size: 25px;
  }
  /* --- overflow fixes --- */
  /* was 866px 338px, which put 42px of the ecoVadis card outside the viewport */
  .committed__grid {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
  /* three fixed columns plus a 74px indent squeezed the fourth column to 171px
     and 3px past the edge; same proportions, now allowed to shrink */
  .value__cols--4 {
    grid-template-columns: minmax(0, 356fr) minmax(0, 346fr) minmax(0, 316fr) minmax(0, 300fr);
    padding-left: 40px;
  }
  .value__cols--3 {
    grid-template-columns: minmax(0, 341fr) minmax(0, 349fr) minmax(0, 330fr);
    padding-left: 120px;
  }
  /* the portraits are fixed-height images sitting on a fixed-width bubble
     graphic, so the block is scaled as one piece the way the hero board is;
     narrowing it would only crop the composition */
  .chairman__people {
    transform: scale(0.82);
    transform-origin: 100% 100%;
  }
  .chairman__body {
    margin-left: 40px;
    max-width: 380px;
  }
}
/* ---------- 1280-class laptops ----------
   Narrower than 1366, the Vision/Mission pair is clamped in from the panel
   edges (see .who__vm--vision) and the two cards sit closer together, so the
   copy inside them is stepped down to suit the tighter column. Held below
   1340 so 1366, where the cards keep their full spacing, is untouched. */
@media (min-width: 1200px) and (max-width: 1339px) {
  .who__vm-text {
    font-size: 12px;
    line-height: 1.35;
  }
  /* the five-bar plots are the widest fixed run in the scorecard. 52px is the
     widest the bottom of this range can take: at 1200 the plot is 362px across
     inside 64px of padding and 4x16px of gap, leaving about 46px a bar. */
  .bar {
    width: 52px;
    flex: 0 0 52px;
  }
  /* The clamp on the base rule only rescues the card from being cut -- it
     leaves it hard against the panel edge. Stand it off by 32px here. The room
     comes out of the gap between the two cards, which is the only slack in the
     row, so the offset yields once that gap would close: 608px is Vision +
     33px of gap + Mission + Mission's 12px right margin. At 1280 and up there
     is slack for the full 32px; below that it eases back to the 12px the base
     clamp gives, which is where those widths already sat. */
  .who__vm--vision {
    left: max(12px, min(32px, 100% - 601px));
  }
}
/* 1280 has room the bottom of the range does not: the plot is 389px there,
   so the bars can carry their full width without spilling out of it. */
@media (min-width: 1280px) and (max-width: 1339px) {
  .bar {
    width: 57px;
    flex: 0 0 57px;
  }
}
@media (max-width: 1199px) {
  .sec-title {
    font-size: 38px;
  }
  .stat__value {
    font-size: 44px;
  }
  .stat__value em {
    font-size: 22px;
  }
  .stat--md .stat__value {
    font-size: 38px;
  }
  .hero {
    height: auto;
  }
  /* the pin paints the sky at full height here, so the old fixed 720px
     .hero__bg band would only stack a second, differently-sized copy of the
     same gradient on top of it and show a seam where they met */
  .hero__pin {
    position: static;
    height: auto;
    min-height: 0;
    overflow: hidden;
    background: radial-gradient(80.8% 57.13% at 50% 50%, #CCE7F8 0%, #C9E5F7 33%, #C1DFF3 51%, #B3D6EE 66%, #A0C8E6 78%, #87B6DC 90%, #69A2D0 100%);
  }
  .hero__bg {
    display: none;
  }
  .hero__canvas {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    margin: 0;
    transform: none;
    padding: 150px 20px 60px;
  }
  .hero__circles {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1512px;
    height: 850px;
    transform: translateX(-50%) scale(0.6);
    transform-origin: 50% 0;
    opacity: 0.8;
  }
  .hero__title {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    text-align: left;
  }
  .hero__title--b {
    margin-top: 30px;
  }
  .hero__scroll {
    display: none;
  }
  .hero__intro {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 620px;
    opacity: 1;
    visibility: visible;
    margin-top: 330px;
  }
  .who__grid {
    grid-template-columns: 1fr;
  }
  .who__left {
    justify-content: flex-start;
  }
  .who__left-inner {
    max-width: 100%;
    padding: 80px 20px 40px;
  }
  /* the copy is no longer held by the half column, so cap it here or the
     paragraph runs the full tablet width and gets hard to read */
  .who__text {
    max-width: 620px;
    margin-bottom: 40px;
  }
  .who__left-inner .stat-row {
    grid-template-columns: repeat(2, minmax(0, 240px));
    gap: 34px 0;
    margin-bottom: 36px;
  }
  .who__right {
    min-height: 0;
    padding: 70px 20px 80px;
  }
  .who__photo {
    height: 100%;
    opacity: 0.28;
  }
  .who__ring {
    display: none;
  }
  .who__vm {
    position: static;
    width: 100%;
    max-width: 520px;
    margin-bottom: 50px;
  }
  .who__values {
    position: static;
  }
  .who__values-set {
    position: static;
    display: none;
  }
  .who__values-set.is-active {
    display: block;
  }
  .who__values-title {
    position: static;
    transform: none;
    display: block;
    margin-bottom: 26px;
    font-size: 18px;
    text-align: left;
  }
  .who__values-set[data-set=pillars] .who__values-title {
    top: auto;
  }
  .who__values-dots {
    position: static;
    transform: none;
    margin-top: 30px;
  }
  .who__values-dot {
    border: 1px solid #0354AC;
  }
  .who__values-ring {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
  }
  .who__values-ring li {
    position: static;
    left: auto !important;
    top: auto !important;
    transform: none;
    flex-direction: row;
    width: auto;
    gap: 10px;
    text-align: left;
  }
  .who__values-ring li .cv__label br {
    display: none;
  }
  .pillars__band {
    padding: 0 40px 70px;
  }
  .pillars__list {
    flex-wrap: wrap;
    gap: 40px 50px;
    justify-content: center;
  }
  .pillar {
    flex: 0 0 auto;
  }
  .hl-card {
    flex-direction: column;
    gap: 40px;
    padding: 50px 40px;
  }
  .hl-card__side {
    width: auto;
    flex: 0 0 auto;
  }
  .hl-card__body {
    gap: 60px;
  }
  .chairman {
    height: auto;
    padding: 80px 0 60px;
  }
  .chairman__inner {
    height: auto;
    padding: 0 20px;
  }
  .chairman__copy {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
  }
  .chairman__title {
    font-size: 38px;
  }
  .chairman__body {
    margin: 50px 0 0;
    max-width: 620px;
  }
  .chairman__text {
    margin-bottom: 40px;
  }
  .chairman__btns {
    max-width: none;
  }
  .chairman__people {
    position: static;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: 50px;
  }
  .chairman__photos {
    justify-content: center;
    /* desktop-only backdrop — from here down the portraits centre themselves
       and shrink, so the bubbles would no longer sit behind them */
    margin: 0;
    padding: 0;
    background: none;
  }
  .chairman__photo--jai,
  .chairman__photo--sameer {
    height: 420px;
  }
  .chairman__glow {
    display: none;
  }
  .chairman__star--tr {
    width: 260px;
    right: -80px;
  }
  .chairman__star--bl {
    width: 150px;
    left: -50px;
  }
  .operate__grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .operate__pie {
    margin-bottom: 40px;
  }
  .wwd__panel {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .wwd__left {
    min-height: 340px;
    padding: 46px 40px;
  }
  .wwd__right {
    padding: 46px 40px;
  }
  .wwd__caps {
    margin-top: 50px;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .wwd__title {
    font-size: 38px;
  }
  .value {
    min-height: 0;
  }
  .value__inner {
    padding: 0 20px;
  }
  .value__cols--4,
  .value__cols--3 {
    grid-template-columns: 1fr 1fr;
    padding-left: 0;
    gap: 40px 26px;
  }
  .value__flow .flow-pill:nth-of-type(1),
  .value__flow .flow-pill:nth-of-type(2),
  .value__flow .flow-pill:nth-of-type(3) {
    width: auto;
    padding: 0 22px;
  }
  .value__star {
    display: none;
  }
  .value__title {
    font-size: 38px;
  }
  .value__flow {
    padding-left: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .flow-arrow {
    flex: 0 0 60px;
    width: 60px;
  }
  .vcp {
    margin-top: 20px;
  }
  .vcp__card {
    padding: 40px 20px;
  }
  .vcp__half {
    padding: 0 24px;
  }
  .research {
    height: auto;
  }
  .research__stage {
    position: static;
    height: auto;
    min-height: 0;
    grid-template-rows: auto auto auto;
  }
  .research__media {
    grid-row: 2;
    place-self: stretch;
    width: 100%;
    height: 420px;
    transform: none;
    border-radius: 0;
  }
  .research__hd {
    grid-row: 1;
    padding: 70px 0 30px;
  }
  .research__title {
    font-size: 38px;
  }
  .research__overlay {
    position: static;
    grid-row: 3;
    opacity: 1 !important;
    background: #0C2A3E;
  }
  .research__grid {
    grid-template-columns: 1fr;
    padding: 50px 20px;
    gap: 50px;
  }
  .research__stats {
    grid-template-columns: 1fr 1fr;
  }
  .committed {
    padding: 70px 0 80px;
  }
  .committed__title {
    font-size: 38px;
  }
  .committed .hk-container {
    padding-left: 20px;
  }
  .committed__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ct {
    grid-template-columns: 220px 1fr;
  }
  .committed__btns {
    margin-left: 0;
  }
  .ecovadis {
    max-width: 420px;
  }
  .research__card {
    padding: 50px 40px;
    min-height: 0;
  }
  .research__body {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .esg-card {
    grid-template-columns: 1fr;
    min-height: 0;
    width: 100%;
  }
  .esg-card__media {
    min-height: 420px;
    padding: 50px 40px;
    gap: 60px;
  }
  .esg-card__panel {
    padding: 50px 40px;
  }
  .esg-card__title {
    font-size: 32px;
  }
  .esg {
    padding: 60px 0 70px;
  }
  /* below the deck's breakpoint the cards are simply a column */
  .esg-pin {
    position: static;
  }
  .esg-runway {
    display: none;
  }
  .esg-progress {
    display: none;
  }
  .esg-card {
    margin-bottom: 50px;
    box-shadow: none;
    transform: none !important;
  }
  .motivation {
    padding: 100px 0;
  }
  .motivation__head {
    margin-bottom: 70px;
  }
  .motivation__col--offset {
    margin-top: 0;
  }
  .award {
    margin-bottom: 70px;
  }
  .motivation__star {
    width: 240px;
    bottom: -60px;
  }
  .download__grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 991px) {
  .site-header__inner {
    height: 74px;
  }
  .site-header__logo img {
    height: 32px;
  }
  .report-link__text {
    display: none;
  }
  .site-header__divider {
    margin: 0 16px;
  }
  .hero__circles {
    transform: translateX(-50%) scale(0.45);
    opacity: 0.7;
  }
  .hero__intro {
    margin-top: 100px;
  }
  .sec-title {
    font-size: 34px;
  }
  .wwd__title {
    font-size: 34px;
  }
  .pillars__title {
    margin-bottom: 50px;
  }
  .value__flow {
    margin-top: 40px;
    padding-bottom: 10px;
    scrollbar-width: none;
  }
  .value__flow::-webkit-scrollbar {
    display: none;
  }
  .flow-pill {
    flex: 0 0 auto;
  }
  .flow-arrow {
    flex: 0 0 40px;
    width: 40px;
  }
  .motivation__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .dl-lists {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .dl-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }
  .chairman__photo--jai,
  .chairman__photo--sameer {
    height: 320px;
  }
  .chairman__name {
    padding-left: 20px;
  }
  .chairman__name:last-child {
    padding-left: 10px;
  }
  .chairman__name-t {
    font-size: 16px;
  }
  .chairman__name-r {
    font-size: 13px;
  }
}
@media (max-width: 767px) {
  .sec-title,
  .wwd__title,
  .esg-card__title {
    font-size: 28px;
  }
  .hero__title {
    font-size: 32px;
  }
  .stat__value {
    font-size: 34px;
  }
  .stat__value em {
    font-size: 18px;
  }
  .stat--md .stat__value,
  .stat--sm .stat__value,
  .stat--light .stat__value {
    font-size: 30px;
  }
  .stat-row--3 {
    flex-direction: column;
  }
  .who__left-inner .stat-row {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  /* the tablet's free-flowing flex row goes ragged at phone widths — six
     labels of very different lengths wrap 1/2/2/1 — so pin them to a grid */
  .who__values-ring {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
  }
  .who__values-ring li {
    align-items: flex-start;
  }
  .who__values-ring li .cv__dot {
    margin-top: 2px;
  }
  .who__btns {
    gap: 12px;
  }
  .stat-row--3 .stat {
    width: 100%;
  }
  .hl-card {
    padding: 36px 24px;
  }
  .biz-row {
    flex-direction: column;
    gap: 50px;
  }
  .biz {
    width: 100%;
  }
  .biz__icon {
    margin-bottom: 30px;
  }
  .highlights {
    padding-top: 70px;
    padding-bottom: 70px;
  }
  .who__left-inner {
    padding-top: 60px;
  }
  .pinnacle {
    padding-top: 70px;
  }
  .pillars__band {
    padding: 0 20px 60px;
    border-radius: 60px 60px 0 0;
  }
  .pillars__list {
    flex-wrap: nowrap;
    gap: 0;
    justify-content: flex-start;
  }
  .pillar {
    width: 100%;
    gap: 26px;
  }
  .pillars-pagination {
    display: block;
    position: static;
    margin-top: 10px;
  }
  .pillars-pagination .swiper-pagination-bullet {
    background: #ffffff;
    opacity: 0.45;
  }
  .pillars-pagination .swiper-pagination-bullet-active {
    opacity: 1;
  }
  .pillars__title {
    margin-bottom: 40px;
  }
  .wwd-swiper {
    margin: 0;
  }
  .wwd__tabs {
    gap: 16px;
  }
  .wwd__tab {
    font-size: 15px;
    padding: 0 6px 10px;
  }
  .wwd__caps {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .wwd__panel-title {
    font-size: 30px;
  }
  .wwd__left {
    padding: 36px 24px;
    min-height: 300px;
  }
  .wwd__right {
    padding: 36px 24px;
  }
  .wwd-stat__value {
    font-size: 26px;
  }
  .wwd-stat__value em {
    font-size: 17px;
  }
  .research__stats {
    grid-template-columns: 1fr;
  }
  .ct {
    grid-template-columns: 1fr;
  }
  .ct__tabs {
    flex-direction: row;
    padding: 0 0 0 0;
    margin-bottom: 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ct__tabs::-webkit-scrollbar {
    display: none;
  }
  .ct__tab {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 15px;
    padding: 0 16px;
  }
  .ct__panes {
    padding: 26px 24px;
    min-height: 0;
  }
  .committed__sub-text {
    font-size: 20px;
  }
  .committed__title {
    font-size: 28px;
  }
  .esg-card__stats--2 {
    grid-template-columns: 1fr;
  }
  .esg-stat__value {
    font-size: 26px;
  }
  .esg-stat__value em {
    font-size: 17px;
  }
  .value__cols--4,
  .value__cols--3 {
    grid-template-columns: 1fr;
  }
  .vcp__card {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .vcp__half + .vcp__half {
    border-left: 0;
    border-top: 1px solid #D6E6F5;
    padding-top: 40px;
  }
  .vc-stat__value {
    font-size: 26px;
  }
  .vc-stat__value em {
    font-size: 17px;
  }
  .esg-card__media,
  .esg-card__panel {
    padding: 36px 24px;
  }
  .esg-card__title {
    font-size: 26px;
  }
  .award-note {
    flex-direction: column;
    padding: 24px;
  }
  .dl-card {
    padding: 24px;
  }
  .dl-row {
    padding: 18px 20px;
    font-size: 15px;
  }
  .rating-pill {
    padding: 18px 24px;
  }
  .rating-pill__value {
    font-size: 26px;
  }
  .scorecard__title {
    font-size: 28px;
  }
  .kpi__vals,
  .kpi__fys,
  .kpi__negs,
  .kpi__plot {
    gap: 8px;
    padding: 0 10px;
  }
  .bar,
  .bar__val,
  .bar__fy {
    width: 46px;
    flex: 0 0 46px;
  }
  .bar__val,
  .bar__fy {
    font-size: 12px;
  }
  .bar__col {
    border-radius: 23px 23px 0 0;
  }
  .bar__cap {
    width: 36px;
    height: 36px;
  }
  .bar__col--neg {
    width: 46px;
    border-radius: 0 0 23px 23px;
  }
  .rating-pill {
    padding: 14px 24px;
  }
  .rating-pill__value {
    font-size: 24px;
  }
  .site-footer {
    padding: 26px 0;
  }
  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .site-footer__right {
    gap: 22px;
  }
  .motivation {
    padding: 70px 0;
  }
  .motivation__star {
    width: 160px;
  }
  .geo-table th {
    font-size: 16px;
  }
  .geo-table td {
    font-size: 14px;
    padding: 14px 0;
  }
  .operate__top {
    flex-direction: column;
  }
}
@media (max-width: 575px) {
  .hero__title {
    font-size: 28px;
  }
  .sec-title,
  .wwd__title,
  .esg-card__title {
    font-size: 24px;
  }
  .hero__intro-text,
  .who__text,
  .pinnacle__text,
  .highlights__intro,
  .wwd__text,
  .research__text,
  .esg-card__text,
  .chairman__text {
    font-size: 16px;
  }
  .pillar__label {
    font-size: 15px;
  }
  .flow-pill {
    font-size: 15px;
    padding: 12px 24px;
  }
  .award__img {
    height: 200px;
  }
}
@media (min-width: 320px) and (max-width: 767px) {
  .wwd__art {
    width: 87px;
  }
  .research__hd {
    padding: 0px 0 30px;
  }
  .wwd {
    padding: 0px 0 50px;
    overflow: hidden;
  }
  .value {
    padding: 38px 0 100px;
  }
  .committed {
    padding: 40px 0 80px;
  }
}