/* ============================================================
   HOME  (index.html)
   Homepage-only styles, layered on the shared design system.
   Every colour references a token or a page variable declared
   below, so dark mode is a single remap. Class prefix: hp-.
   ------------------------------------------------------------
   1.  Page tokens (light + dark remap)
   2.  Shared section furniture (heads, buttons, arrows, decor)
   3.  Hero (blank placeholder)
   4.  A Century of Values (intro + timeline)
   5.  Chairman's Letter
   6.  Our Leadership (hotspots + tooltips)
   7.  There at Every Turn (marquee)
   8.  FY2026 Numbers (vertical tabs)
   9.  Building for Tomorrow (dark showcase)
   10. A Century Celebrated (gallery)
   11. Our Companies (org chart panel)
   12. People Who Power Our Purpose
   13. ESG (vertical tabs + photo panel)
   14. CSR banner
   15. Moments carousel
   16. Reveal states (JS-gated) + reduced motion
   ============================================================ */

/* ------------------------------------------------------------
   1. PAGE TOKENS
   ------------------------------------------------------------ */
:root {
  /* Section washes (exact Figma fills) */
  --hp-periwinkle:   #E2E5F3;   /* chairman band            */
  --hp-cyan-wash:    #DFF2F7;   /* lifecycle band           */
  --hp-panel-tint:   #CFECF3;   /* FY26 active tab + panel  */
  --hp-grey-wash:    #F6F6F6;   /* companies band           */
  --hp-mist:         #EFF8F9;   /* ESG band                 */
  --hp-hero-grey:    #E5E5E5;   /* blank hero               */
  --hp-sand-bar:     #E7DBD6;   /* people stat bar 1        */
  --hp-grey-bar:     #CECECE;   /* people stat bar 2        */
  --hp-panel-ink:    var(--bf-ink);
  --hp-hairline:     rgba(0, 0, 0, 0.30);
  --hp-hairline-10:  rgba(46, 46, 46, 0.10);
  --hp-line:         var(--bf-ink);      /* dashed journey line  */
  --hp-node-ink:     var(--bf-ink-900);  /* circled dots          */
  --hp-card-face:    var(--bf-white);    /* white cards on washes */
}
[data-theme="dark"] {
  --hp-periwinkle:   #0E1B36;
  --hp-cyan-wash:    #062334;
  --hp-panel-tint:   #0A3050;
  --hp-grey-wash:    #071523;
  --hp-mist:         #06213B;
  --hp-hero-grey:    #10202F;
  --hp-sand-bar:     #37291F;
  --hp-grey-bar:     #26313C;
  --hp-panel-ink:    #E8EEF4;
  --hp-hairline:     rgba(255, 255, 255, 0.28);
  --hp-hairline-10:  rgba(255, 255, 255, 0.12);
  --hp-line:         #7C8EA0;
  --hp-node-ink:     #AFC3D4;
  --hp-card-face:    var(--bf-navy);
}

/* ------------------------------------------------------------
   2. SHARED SECTION FURNITURE
   ------------------------------------------------------------ */
.hp-section {
  position: relative;
  padding-block: var(--space-16);
  overflow: hidden;   /* clips decorative lines + parallax bleed */
}

/* Section head row: title left, action right (per Figma) */
.hp-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-13);
}
.hp-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hp-title {
  font-family: var(--font-primary);
  font-size: var(--fs-3xl);          /* 36px */
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-primary-strong);
  margin: 0;
}
.hp-title--light { color: var(--bf-white); }
.hp-title--xl { font-size: var(--fs-4xl); }   /* 40px (ESG / CSR) */
.hp-eyebrow {
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tight);
  color: var(--color-primary-strong);
  margin: 0 0 var(--space-9);
}
.hp-sub {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
  margin: var(--space-9) 0 0;
  max-width: 62ch;
}
.hp-sub--light { color: var(--bf-white); }
.hp-head .bf-btn-link { flex-shrink: 0; }

/* Homepage "Explore More": bottom-rule only. On hover the arrow
   slides left→right and the underline wipes in from the left. */
.hp-section .bf-btn-link,
.hp-leaders .bf-btn-link {
  position: relative;
  border: none;
  padding: 0 0 var(--space-4);
  align-items: center;
  line-height: var(--lh-loose);
  overflow: hidden;
}
.hp-section .bf-btn-link::before,
.hp-leaders .bf-btn-link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-divider);
}
.hp-section .bf-btn-link::after,
.hp-leaders .bf-btn-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-base) var(--ease-out);
}
.hp-section .bf-btn-link:hover::after,
.hp-leaders .bf-btn-link:hover::after { transform: scaleX(1); }
.hp-section .bf-btn-link .bf-btn-link__chip,
.hp-leaders .bf-btn-link .bf-btn-link__chip {
  width: 24px;
  height: auto;
  align-self: stretch;
  overflow: hidden;
}
/* Chip holds two arrows: on hover the first exits right and the
   second slides in from the left to take its place. */
.hp-section .bf-btn-link .bf-btn-link__chip,
.hp-leaders .bf-btn-link .bf-btn-link__chip { position: relative; }
.hp-section .bf-btn-link .bf-btn-link__chip i,
.hp-leaders .bf-btn-link .bf-btn-link__chip i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform var(--transition-base) var(--ease-out);
}
.hp-section .bf-btn-link .bf-btn-link__chip i:last-child,
.hp-leaders .bf-btn-link .bf-btn-link__chip i:last-child {
  transform: translate(-260%, -50%);
}
.hp-section .bf-btn-link:hover .bf-btn-link__chip i:first-child,
.hp-leaders .bf-btn-link:hover .bf-btn-link__chip i:first-child {
  transform: translate(160%, -50%);
}
.hp-section .bf-btn-link:hover .bf-btn-link__chip i:last-child,
.hp-leaders .bf-btn-link:hover .bf-btn-link__chip i:last-child {
  transform: translate(-50%, -50%);
}
.hp-section .bf-btn-link:hover .bf-btn-link__chip,
.hp-leaders .bf-btn-link:hover .bf-btn-link__chip { transform: none; }
.hp-section .bf-btn-link--light::before,
.hp-leaders .bf-btn-link--light::before { background: rgba(255, 255, 255, 0.2); }
.hp-section .bf-btn-link--light::after,
.hp-leaders .bf-btn-link--light::after { background: var(--bf-white); }
/* Leadership CTA in brand blue. It sits at the foot of the photo (past the
   top-only scrim), so keep a soft light halo to hold contrast over any part
   of the image, in every breakpoint. */
.hp-leaders .bf-btn-link--light,
.hp-leaders .bf-btn-link--light:hover {
  color: var(--bf-blue-strong);
  border-color: var(--bf-blue-strong);
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.7);
}
.hp-leaders .bf-btn-link--light::before { background: rgba(7, 93, 170, 0.35); }   /* static track */
.hp-leaders .bf-btn-link--light::after  { background: var(--bf-blue-strong); }    /* hover fill  */
.hp-leaders .bf-btn-link--light .bf-btn-link__chip {
  background: var(--bf-blue-strong);
  color: #fff;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

/* Round prev / next arrows (Figma "Frame 45": 35px circle) */
.hp-nav {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}
.hp-nav--center { justify-content: center; }
.hp-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  padding: 0;
  border: none;
  border-radius: var(--radius-circle);
  background: var(--bf-ink);
  color: var(--bf-white);
  font-size: var(--fs-md);
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast) var(--ease-standard),
              transform var(--transition-fast) var(--ease-standard),
              opacity var(--transition-fast) var(--ease-standard);
}
.hp-arrow--next { background: var(--bf-blue-strong); }
.hp-arrow:hover { transform: translateY(-2px); }
.hp-arrow:disabled,
.hp-arrow.swiper-button-disabled { opacity: 0.35; pointer-events: none; }
.hp-arrow--onlight { background: var(--bf-white); color: var(--bf-ink); }
[data-theme="dark"] .hp-arrow { background: #3A4E63; }
[data-theme="dark"] .hp-arrow--next { background: var(--color-primary); color: var(--bf-navy-900); }

/* Decorative dashed journey line — path is drawn by home.js */
.hp-journey {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  color: var(--hp-line);
}
.hp-journey--light { color: rgba(255, 255, 255, 0.85); }

/* Hand-placed route lines. Stretched to fill the section box
   (preserveAspectRatio="none" on the element), so a point at 99%
   of one viewBox's width lands at 99% of the section's width in
   every section — which is what lets one section's exit point
   meet the next section's entry point regardless of how tall
   either section is. */
.hp-section > svg[data-draw] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 95%;
  margin: auto;
  pointer-events: none;
  z-index: 0;
}
.hp-section > .bf-container { position: relative; z-index: 1; }

/* Terminus of the route, in the Download Centre partial. Unlike the
   section routes this keeps its aspect ratio — it ends in a circular
   node that would go oval if stretched — so it is a fixed-size strip
   positioned to meet them. The 3.183% is where a section's left-hand
   vertical actually lands once the rule above insets the art:
   2.5% margin + (0.719% of viewBox x 95% width). translateX(-50%)
   because the stroke runs down the middle of its own 22-wide box. */
.bf-footer { position: relative; }
.bf-footer__route {
  position: absolute;
  top: 0;
  left: 3.183%;
  transform: translateX(-50%);
  width: 22px;
  height: 209px;
  pointer-events: none;
  z-index: 0;
}
.bf-footer > .bf-container { position: relative; z-index: 1; }

/* Circled-dot cluster (Figma "Group 427319792" ×5) */
.hp-dots {
  display: flex;
  gap: var(--space-9);
  align-items: center;
  pointer-events: none;
}
.hp-dots--v { flex-direction: column; position: absolute; z-index: 0; }
.hp-dots span {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-circle);
  border: 1.5px solid var(--hp-node-ink);
  position: relative;
}
.hp-dots span::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  border-radius: var(--radius-circle);
  background: var(--hp-node-ink);
}

/* Count-up numbers keep tabular width while ticking */
.hp-num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   3. HERO — blank grey placeholder (final hero arrives later)
   ------------------------------------------------------------ */
.hp-hero {
  position: relative;
  min-height: calc(100svh - 0px);   /* full screen minus sticky header */
  background: var(--hp-hero-grey);
  overflow: hidden;
}

.hp-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fill the hero, crop as needed */
  display: block;
}

/* Scroll-down cue — bottom-left, animated rail */
.hp-hero__scroll {
  position: absolute;
  left: clamp(20px, 4vw, 64px);
  bottom: clamp(24px, 4vh, 48px);
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-decoration: none;
  color: var(--bf-ink);
}

.hp-hero__scroll-rail {
  position: relative;
  flex: 0 0 auto;
  width: 2px;
  height: 34px;
  margin-top: 2px;
  border-radius: 2px;
  background: rgba(0, 93, 172, 0.22);   /* faint track */
  overflow: hidden;
}

/* travelling fill that runs down the rail to suggest scrolling */
.hp-hero__scroll-rail::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 45%;
  border-radius: 2px;
  background: var(--bf-blue);
  animation: hp-hero-scroll 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes hp-hero-scroll {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(220%); }
  100% { transform: translateY(220%); }
}

.hp-hero__scroll-text {
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .hp-hero__scroll-rail::after { animation: none; transform: none; height: 100%; }
}

/* HERO — on tablets the landscape desktop video is cover-cropped to fill
   the tall viewport. Let it sit in flow at its natural aspect ratio so the
   whole frame shows: the hero height follows the video instead of 100svh. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .hp-hero { min-height: 0; }
  .hp-hero__video {
    position: relative;
    height: auto;
    object-fit: contain;
  }
}

/* ------------------------------------------------------------
   4. A CENTURY OF VALUES — intro + 1926-2026 timeline
   ------------------------------------------------------------ */
.hp-century { background: var(--color-bg); }
/* Drawn-in half of a [data-draw] route: accent over the dashed
   track, so the fill reads as the line "arriving". Routed through
   --hp-draw-accent so a section can remap it; the JS marks read the
   same property, which is why it can't just be a plain rule. */
:root { --hp-draw-accent: var(--color-primary); }
/* On a navy band any blue is too dark to read, so the accent is white
   and the fill reads purely as dashed becoming solid. */
.hp-draw--light { --hp-draw-accent: var(--bf-white); }
.hp-draw__solid { stroke: var(--hp-draw-accent); }
.hp-century__grid {
  display: grid;
  grid-template-columns: minmax(0, 466px) minmax(0, 1fr);
  gap: var(--space-14);
  align-items: start;
}
.hp-century__grid .bf-btn-link { margin-bottom: 40px; }
.hp-century__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-13);   /* 45 in Figma; 40 token */
}
.hp-century__badge {
  width: 95px;
  height: 95px;
  padding: 5px;
  /* background: var(--bf-blue-600); */
  display: block;
}
.hp-century__badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hp-century__copy .hp-title { color: var(--bf-blue); }
[data-theme="dark"] .hp-century__copy .hp-title { color: var(--color-primary-strong); }
.hp-century__body {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
  margin: 0;
}
.hp-century__media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  align-self: stretch;
  height: 100%;
}
.hp-century__media img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}

/* Timeline label between intro and strip */
.hp-century__range {
  margin: var(--space-15) auto var(--space-13);
  text-align: center;
}
.hp-century__years {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
}
.hp-century__tag {
  display: block;
  margin-top: var(--space-7);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text);
}

/* -- Timeline strip (Swiper) --
   The rail IS the Swiper scrollbar: a 2px hairline track with a
   dark drag that reads as the progress segment. The year nodes
   scroll across it; the round arrows sit on its two ends. */
.hp-timeline { position: relative; padding-inline: 55px; }
.hp-timeline .swiper { position: relative; z-index: 1; }
.hp-timeline .hp-timeline__bar {
  position: absolute;
  left: 35px;
  right: 35px;
  top: 59px;                       /* year row (30) + gap (25) + node centre */
  bottom: auto;
  width: auto;
  height: 2px;
  overflow: hidden;
  background: var(--hp-hairline-10);
  z-index: 0;
}
.hp-timeline__fill {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-base) var(--ease-out);
}
.hp-timeline__prev,
.hp-timeline__next {
  position: absolute;
  top: 42px;
  z-index: 2;
}
.hp-timeline__prev { left: 0; }
.hp-timeline__next { right: 0; }
.hp-timeline .swiper-slide {
  width: 217px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hp-timeline__year {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: 30px;
  letter-spacing: var(--ls-tight);
  color: var(--bf-blue);
  margin: 0;
}
[data-theme="dark"] .hp-timeline__year { color: var(--color-primary-strong); }
.hp-timeline__node {
  width: 10px;
  height: 10px;
  margin-top: var(--space-11);
  border-radius: var(--radius-circle);
  border: 1.5px solid var(--hp-node-ink);
  position: relative;
  background: var(--color-bg);
}
.hp-timeline__node::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4.5px;
  height: 4.5px;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-circle);
  background: var(--hp-node-ink);
}
.hp-timeline__logo {
  height: 60px;
  margin-top: var(--space-11);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-timeline__logo img {
  max-height: 60px;
  max-width: 150px;
  object-fit: contain;
}
/* Logos stay legible on dark surfaces */
[data-theme="dark"] .hp-timeline__logo img {
  background: var(--bf-white);
  padding: 4px 6px;
  border-radius: var(--radius-xs);
}
.hp-timeline__text {
  margin: var(--space-7) 0 0;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
  max-width: 180px;
}
.hp-timeline__text ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: left;
}
.hp-timeline__text li {
  position: relative;
  padding-left: var(--space-5);
}
.hp-timeline__text li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--color-text);
}


/* ------------------------------------------------------------
   5. CHAIRMAN'S LETTER
   ------------------------------------------------------------ */
.hp-chairman { background: var(--hp-periwinkle); }
.hp-chairman svg {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.hp-chairman__grid {
  display: grid;
  /* Figma: 683px photo + 477px copy column, 81px gutter */
  grid-template-columns: minmax(0, 683fr) minmax(0, 477fr);
  gap: clamp(40px, 6vw, 81px);
  align-items: center;
}
.hp-chairman__media {
  position: relative;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  max-height: 683px;
}
.hp-chairman__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hp-chairman__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 4.5%, rgba(0, 0, 0, 0) 38.31%);
  pointer-events: none;
}
.hp-chairman__caption {
  position: absolute;
  top: 11.7%;                 /* 80px within the 683px square */
  left: 7.3%;                 /* 50px within the 683px square */
  margin: 0;
  color: var(--bf-white);
  font-family: var(--font-primary);
  font-size: var(--fs-3xl);   /* 36px */
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.hp-chairman__quote {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hp-chairman__mark {
  width: 49px;
  height: auto;
  display: block;
}
.hp-chairman__mark--down { align-self: flex-end; }
.hp-chairman__text {
  margin: var(--space-9) 0;
  font-family: var(--font-primary);
  font-size: var(--fs-lg);    /* 20px */
  font-weight: var(--fw-medium);
  line-height: 1.3;
  letter-spacing: var(--ls-tight);
  color: #075DAA;
  text-wrap: pretty;
}
[data-theme="dark"] .hp-chairman__text { color: #CFE0F5; }
.hp-chairman__cite {
  display: flex;
  flex-direction: column;
  gap: 5px;
      margin: 100px 0 30px;
}

@media screen and (min-width: 1400px) and (max-width: 1600px) {
  .hp-chairman__cite {
    margin-top: 110px;
  }
}

.hp-chairman__name {
  font-size: var(--fs-lg);    /* 20px */
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-tight);
  color: #075DAA;
}
[data-theme="dark"] .hp-chairman__name { color: var(--color-primary-strong); }
.hp-chairman__role {
  font-size: var(--fs-base);  /* 16px */
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
}

/* ------------------------------------------------------------
   6. OUR LEADERSHIP — full-bleed photo with hotspots
   ------------------------------------------------------------ */
/* Doubled up on .hp-section so this out-specifies the responsive
   .hp-section { padding-block: … } overrides further down the file,
   which would otherwise re-add vertical padding below 992px and break
   the full-bleed photo. */
.hp-section.hp-leaders {
  position: relative;
  padding: 0;
  background: var(--bf-navy);
}
.hp-leaders__media {
  position: relative;
  aspect-ratio: 1512 / 760;   /* matches the photo so pin %s land on faces */
  /* min-height: clamp(520px, 62vh, 780px);
  max-height: 860px; */
  overflow: hidden;
}
.hp-leaders__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.hp-leaders__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 32%);
  pointer-events: none;
}
.hp-leaders__inner {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.hp-leaders__head {
  position: absolute;
  top: var(--space-16);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 2;
}
.hp-leaders__actions {
  position: absolute;
  right: var(--container-gutter);
  bottom: var(--space-13);
  z-index: 3;
}
/* Hotspot pin (Figma: 25px circle #1761AC with white +) */
.hp-pin {
  position: absolute;
  z-index: 3;
  width: 25px;
  height: 25px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #1761AC;
  color: #fff;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform var(--transition-fast) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-out);
}
.hp-pin::before,
.hp-pin::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transition: transform var(--transition-base) var(--ease-out);
}
.hp-pin::before { width: 10px; height: 1.5px; transform: translate(-50%, -50%); }
.hp-pin::after  { width: 1.5px; height: 10px; transform: translate(-50%, -50%); }
.hp-pin:hover,
.hp-pin:focus-visible { transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 0 0 6px rgba(23, 97, 172, 0.25); }
.hp-pin.is-open { z-index: 6; }
.hp-pin.is-open::after { transform: translate(-50%, -50%) rotate(90deg); }

/* Popup: 90px-style white connector line + info card, drawn on open.
   Click toggles .is-open (see home.js); the line grows first, then
   the card scales + fades in. */
.hp-pin__pop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 205px;
  transform: translateX(-50%);
  /* Reserves the connector run: the gap off the pin plus the line
     itself. Change --pin-line-len alone to lengthen the connector —
     the padding follows so the card stays at the line's far end. */
  --pin-line-gap: 8px;
  --pin-line-len: 110px;
  padding-top: calc(var(--pin-line-gap) + var(--pin-line-len));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 5;
}
.hp-pin__line {
  position: absolute;
  top: var(--pin-line-gap);
  left: 50%;
  width: 1px;
  height: var(--pin-line-len);
  background: #fff;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  transition: transform 0.26s var(--ease-out);
}
.hp-pin__card {
  position: relative;
  background: #fff;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  transform-origin: top center;
  transition: opacity 0.3s var(--ease-standard) 0.16s,
              transform 0.3s var(--ease-out) 0.16s;
}
.hp-pin.is-open .hp-pin__pop { opacity: 1; visibility: visible; pointer-events: auto; }
.hp-pin.is-open .hp-pin__line { transform: translateX(-50%) scaleY(1); }
.hp-pin.is-open .hp-pin__card { opacity: 1; transform: translateY(0) scale(1); }
.hp-pin__name {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  color: #075DAA;
}
.hp-pin__role {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: #2F2F2F;
}

/* Back-row pins: longer connector so the card clears the front row
   and lands below it rather than on those faces. The var drives both
   the line height and the pop's padding, so this one line moves both. */
.hp-pin--top .hp-pin__pop { --pin-line-len: 170px; }

/* Upward variant (back-row pins): card opens above the pin, so it
   clears the front row instead of covering those faces */
.hp-pin--up .hp-pin__pop {
  top: auto;
  bottom: 50%;
  padding-top: 0;
  padding-bottom: calc(var(--pin-line-gap) + var(--pin-line-len));
}
.hp-pin--up .hp-pin__line { top: auto; bottom: var(--pin-line-gap); transform-origin: bottom center; }
.hp-pin--up .hp-pin__card { transform-origin: bottom center; transform: translateY(6px) scale(0.96); }
.hp-pin--up.is-open .hp-pin__card { transform: translateY(0) scale(1); }

/* Edge pins: keep the card inside the frame */
.hp-pin--left .hp-pin__pop { left: 0; transform: none; }
.hp-pin--left .hp-pin__line { left: 12px; }
.hp-pin--right .hp-pin__pop { left: auto; right: 0; transform: none; }
.hp-pin--right .hp-pin__line { left: auto; right: 12px; }

/* ------------------------------------------------------------
   7. THERE AT EVERY TURN — marquee of brand stat cards
   ------------------------------------------------------------ */
.hp-lifecycle {
  background:
    linear-gradient(180deg, var(--hp-cyan-wash) 0%, rgba(223, 242, 247, 0) 70%),
    var(--hp-cyan-wash);
  position: relative;
}
.hp-lifecycle::after {          /* decorative background illustration */
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/thereat.png") bottom center / 100% auto no-repeat;
  pointer-events: none;

  display: none;
}
[data-theme="dark"] .hp-lifecycle::after { opacity: 0.35; }
.hp-lifecycle > * { position: relative; z-index: 1; }
.hp-lifecycle__viewport {
  overflow: hidden;
  margin-top: var(--space-13);
  /* -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); */
}
.hp-lifecycle__viewport .swiper { overflow: visible; }
.hp-lifecycle__viewport .swiper-slide { width: 490px; height: auto; }
/* Continuous, even glide for the autoplay marquee */
.hp-lifecycle__viewport .swiper-wrapper { transition-timing-function: linear; }
.hp-lifecycle__track {
  display: flex;
  gap: var(--grid-gutter);
  width: max-content;
  will-change: transform;
}
.hp-lifecycle__actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-14);
  margin-bottom: 50px;
}
/* Card: 490×250, image half + copy half (Figma exact) */
.hp-lcard {
  display: grid;
  grid-template-columns: 239px 1fr;
  width: 490px;
  height: 250px;
  border-radius: 16.66px;
  overflow: hidden;
  color: var(--bf-white);
  flex-shrink: 0;
}
.hp-lcard--teal { background: #00A5AE; }
.hp-lcard--blue { background: #075DAA; }
.hp-lcard--tan  { background: #B4917F; }
.hp-lcard--grey { background: #959595; }
.hp-lcard--cyan { background: #6CCBD9; }
.hp-lcard--navy { background: #002A50; }
.hp-lcard__media {
  margin: 0;
  border-radius: 14.29px;
  overflow: hidden;
  height: 100%;
}
.hp-lcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hp-lcard__body {
  align-self: center;
  padding: 0 20px 0 37px;      /* image 239 → text starts at 276 */
  min-width: 0;
}
.hp-lcard__value {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-3xl);    /* 36px */
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
}
.hp-lcard__unit {
  display: block;
  font-size: var(--fs-lg);     /* 20px */
  font-weight: var(--fw-regular);
  line-height: 1.5;
  letter-spacing: var(--ls-tight);
  margin-top: 15px;
}
.hp-lcard__label {
  margin: 28px 0 0;
  font-size: var(--fs-xl);     /* 24px */
  font-weight: var(--fw-regular);
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
}
/* Text-only variant (locations): copy left, map graphic right */
.hp-lcard--solo { grid-template-columns: 1fr 210px; }
.hp-lcard--solo .hp-lcard__body { padding: 0 0 0 32px; }
.hp-lcard--solo .hp-lcard__label { margin-top: 26px; }
.hp-lcard--solo .hp-lcard__media {
  border-radius: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
/* max-width halves the pin inside the 210px media cell, leaving the
   card's own column layout untouched. Intrinsic height (rather than
   the 100% inherited above) is what lets flex-end actually park it on
   the bottom edge instead of stretching it back to full height. */
.hp-lcard--solo .hp-lcard__media img {
  object-fit: contain;
  max-width: 50%;
  width: auto;
  height: auto;
}

/* ------------------------------------------------------------
   8. FY2026 — THE NUMBERS THAT DEFINED THE YEAR (tabs)
   ------------------------------------------------------------ */
.hp-numbers { background: var(--color-bg); }
.hp-numbers .hp-head {margin-bottom: var(--space-16);}
.hp-numbers__panel {
  display: grid;
  grid-template-columns: 430px minmax(0, 1fr);
  border-radius: 20px;
  overflow: hidden;
  background: var(--hp-fy-tint, #D8EAF2);
  transition: background var(--transition-base) var(--ease-standard);
  margin: 50px 0;
}
/* Per-company panel tint (set on the panel by home.js on tab change) */
.hp-numbers__panel[data-tint="blue"]  { --hp-fy-tint: #D8EAF2; }
.hp-numbers__panel[data-tint="beige"] { --hp-fy-tint: #EDE7E0; }
.hp-numbers__panel[data-tint="grey"]  { --hp-fy-tint: #CBCBCB; }
[data-theme="dark"] .hp-numbers__panel[data-tint="blue"]  { --hp-fy-tint: #0B2C46; }
[data-theme="dark"] .hp-numbers__panel[data-tint="beige"] { --hp-fy-tint: #332B22; }
[data-theme="dark"] .hp-numbers__panel[data-tint="grey"]  { --hp-fy-tint: #2A2E33; }
.hp-numbers__tabs {
  display: flex;
  flex-direction: column;
}
/* Dropdown trigger, injected by home.js. Only ever shown below 768px
   (see the phone block further down); a tablist everywhere else. */
.hp-numbers__select { display: none; }
.hp-numbers__tab {
  appearance: none;
  border: none;
  border-bottom: 1px solid var(--hp-hairline);
  background: var(--color-surface);
  min-height: 64px;
  padding: 0 var(--space-12);
  text-align: left;
  font-family: var(--font-primary);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-fast) var(--ease-standard),
              color var(--transition-fast) var(--ease-standard);
}
.hp-numbers__tab:first-child { border-top: 1px solid var(--hp-hairline); }
.hp-numbers__tab:hover { filter: brightness(0.98); }
.hp-numbers__tab[aria-selected="true"] {
  background: transparent;
  border-color: transparent;
  color: var(--hp-panel-ink);
}
.hp-numbers__views {
  position: relative;
  min-height: 576px;
}
.hp-numbers__view {
  display: none;
  padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 64px);
  height: 100%;
}
.hp-numbers__view.is-active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 80px);
  align-content: start;
}
.hp-numbers__col { display: flex; flex-direction: column; min-width: 0; }
.hp-numbers__cat {
  margin: 0 0 34px;
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  color: var(--hp-panel-ink);
}
.hp-numbers__name {
  margin: 0 0 var(--space-7);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: #075DAA;
}
[data-theme="dark"] .hp-numbers__name { color: var(--color-primary-strong); }
.hp-numbers__desc {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--hp-panel-ink);
}
.hp-numbers__desc strong { font-weight: var(--fw-semibold); }
.hp-numbers__desc ul {
  list-style: none;
  margin: var(--space-7) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.hp-numbers__desc li { position: relative; padding-left: var(--space-7); }
.hp-numbers__desc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-circle);
  background: currentColor;
}
.hp-numbers__logo {
  /* height: 46px; */

  width: 150px;
  max-width: 180px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 40px;
}
.hp-numbers__stats {
  display: flex;
  flex-direction: column;
  gap: 38px;
}
.hp-numbers__fig {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--hp-panel-ink);
}
.hp-numbers__label {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--hp-panel-ink);
}

/* ------------------------------------------------------------
   9. BUILDING FOR TOMORROW — dark AI showcase
   ------------------------------------------------------------ */
.hp-tomorrow {
  position: relative;
  color: var(--bf-white);
  background: var(--bf-navy-900);
}
.hp-tomorrow::before {
  content: "";
  position: absolute;
  inset: 0;
  height: 100%;
  background:
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url("../images/building-for-tomorrow-bg.jpg") center top / cover no-repeat;
  background-attachment: fixed;
  pointer-events: none;
}
.hp-tomorrow::after {          /* blend the photo into the dark body */
  display: none;
  content: "";
  position: absolute;
  top: 620px;
  left: 0;
  right: 0;
  height: 280px;
  background: linear-gradient(180deg, rgba(0, 27, 51, 0) 0%, var(--bf-navy-900) 100%);
}
.hp-tomorrow > .bf-container { position: relative; z-index: 1; }
.hp-tomorrow .bf-btn-link--light { border-color: rgba(255, 255, 255, 0.2); }
.hp-tomorrow__carousel { margin-top: clamp(28px, 4vw, 60px); }
.hp-tomorrow__bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-11);
}
.hp-tomorrow__strip { width: 100%; }
.hp-tomorrow__strip .swiper-slide { width: 322px; height: auto; }
/* Continuous, even glide for the autoplay marquee — same as the
   lifecycle strip; without it Swiper's default ease stalls each cycle. */
.hp-tomorrow__strip .swiper-wrapper { transition-timing-function: linear; }
.hp-tstat {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 180px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--bf-white);
  padding: var(--space-11) var(--space-11) var(--space-12);
  overflow: hidden;
  z-index: 0;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: background 0.3s var(--ease-standard),
              border-color 0.3s var(--ease-standard),
              box-shadow 0.3s var(--ease-standard),
              -webkit-backdrop-filter 0.3s var(--ease-standard),
              backdrop-filter 0.3s var(--ease-standard);
}
.hp-tstat:hover {
  /* Translucent tint, not transparent — the backdrop photo is flat navy
     behind most of the strip, so blur alone reads as nothing there. */
  background: rgba(255, 255, 255, 0.12);
  border-color: #4CDEFF;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.hp-tstat__fig {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: #075DAA;
  transition: color 0.3s var(--ease-standard);
}
.hp-tstat:hover .hp-tstat__fig { color: var(--bf-white); }
.hp-tstat__label {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--bf-ink);
  transition: color 0.3s var(--ease-standard);
}
.hp-tstat:hover .hp-tstat__label { color: var(--bf-white); }
/* Feature cards — one full-width card per view, arrows overlaid
   bottom-right inside the card. */
.hp-tomorrow__cards {
  position: relative;
  margin-top: clamp(56px, 8vw, 110px);
  padding-inline: clamp(0px, 4vw, 57px);   /* 1252 within the 1366 column */
}
.hp-tomorrow__cardstrip { width: 100%; }
.hp-tomorrow__cardstrip .swiper-slide {
  width: 100%;
  height: auto;
}
/* Arrows sit inside the card's bottom-right corner. */
.hp-tomorrow__cardnav {
  position: absolute;
  right: calc(clamp(0px, 4vw, 57px) + 40px);
  bottom: 40px;
  z-index: 2;
}
.hp-tcard {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  /* box-shadow: 0 0 0 2.5px #5FC9E1; */
  aspect-ratio: 1252 / 512;
  min-height: 360px;
  border: 2px solid #5FC9E1;
}
.hp-tcard__media,
.hp-tcard__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}
.hp-tcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.6) 100%);
}
.hp-tcard__panel {
  position: absolute;
  left: 40px;
  bottom: 40px;
  z-index: 1;
  width: min(354px, calc(100% - 80px));
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hp-tcard__title {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: #075DAA;
}
.hp-tcard__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.hp-tcard__list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-tight);
  color: var(--bf-ink);
}
.hp-tcard__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--bf-ink);
}
/* Finserv Intelligence — closing banner beneath the feature carousel.
   Inset to match the card carousel (same padding-inline as .hp-tomorrow__cards)
   and translucent so the section's backdrop shows through. */
.hp-finserv {
  margin-top: clamp(28px, 4vw, 44px);
  margin-inline: clamp(0px, 4vw, 57px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-12);
  padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 64px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.28) 100%);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.hp-finserv__head { flex: 1 1 320px; }
.hp-finserv__title {
  margin: 0;
  font-size: var(--fs-4xl);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--bf-white);
}
.hp-finserv__sub {
  margin: var(--space-9) 0 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--bf-white);
}
.hp-finserv__body {
  flex: 1 1 420px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
}
.hp-finserv__lede {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.85);
}

/* ------------------------------------------------------------
   10. A CENTURY CELEBRATED — legacy gallery
   ------------------------------------------------------------ */
.hp-gallery { background: var(--color-bg); }
.hp-gallery .swiper-slide {
  width: 315px;
  height: auto;
  padding-bottom: 10px;
  display: flex;
  flex-direction: column;
}
.hp-gallery__media {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  /* height: 420px; */
}
.hp-gallery__media--sm { height: 195px; }
.hp-gallery__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
      object-position: top;
}
.hp-gallery__cap {
  margin: 25px 0 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  line-height: 1.4;
  color: var(--color-text);
}
.hp-gallery__rule {
  margin-top: 0;
  padding-top: 10px;
  position: relative;
}
.hp-gallery__rule::before {
  content: "";
  display: block;
  border-top: 1px dashed var(--hp-line);
}
.hp-gallery__rule::after {
  content: "";
  position: absolute;
  right: 0;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-circle);
  background: #075DAA;
}
.hp-gallery__controls {
  display: flex;
  justify-content: center;
  margin-top: var(--space-13);
}
/* Bullet pager — hidden on desktop; shown on phones where the gallery
   goes one-up (see the 767.98px breakpoint). */
.hp-gallery__pager { display: none; }

/* ------------------------------------------------------------
   11. OUR COMPANIES — org chart panel
   ------------------------------------------------------------ */
.hp-companies { background: var(--hp-grey-wash); }
.hp-org {
  border-radius: 20px;
  overflow: hidden;
  background: var(--hp-card-face);
  box-shadow: inset 0 0 0 1px #075DAA;
  padding-bottom: 40px;
}
.hp-org__band {
  padding: 15px 25px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: 1;
  text-align: center;
  color: var(--bf-white);
}
.hp-org__band--blue { background: #075DAA; }
.hp-org__band--teal { background: #3AC2D6; margin-top: 30px; }
.hp-org__band:first-child { margin-top: 0; }
/* Bands keep their spacing above; the card rows below them sit flush */
.hp-org__band--arrow { position: relative; margin-top: 40px; }
.hp-org__band--arrow + .hp-org__row { padding-top: 0; }
.hp-org__band--arrow + .hp-org__row .hp-org__card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: none;
  border: 1px solid #075DAA;
  border-top: none;
}
.hp-org__band--arrow + .hp-org__row .hp-org__card:hover {
  box-shadow: var(--shadow-md);
}
.hp-org__card-arrow {
  display: block;
  width: 20px;
  height: auto;
  margin: 0 0 6px;
}
.hp-org__listed {
  margin: 25px 0 0;
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: #075DAA;
}
[data-theme="dark"] .hp-org__listed { color: var(--color-primary-strong); }
.hp-org__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--grid-gutter);
  padding: 40px clamp(20px, 4vw, 83px) 0;
}
.hp-org__row--3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 820px;
  margin-inline: auto;
}
.hp-org__card {
  position: relative;
  border-radius: 10px;
  background: var(--hp-card-face);
  box-shadow: inset 0 0 0 1px #075DAA;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-standard);
}
.hp-org__card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px #075DAA, var(--shadow-md);
}
.hp-org__name {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--color-text);
}
.hp-org__desc {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-light);
  line-height: 1.4;
  color: var(--color-text);
}
.hp-org__chip {
  margin-top: auto;
  align-self: flex-start;
  border-radius: var(--radius-sm);
  background: var(--bf-blue-strong);
  color: var(--bf-white);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  padding: var(--space-4) var(--space-9);
}

/* ------------------------------------------------------------
   12. PEOPLE WHO POWER OUR PURPOSE
   ------------------------------------------------------------ */
.hp-people { background: var(--color-bg); }
/* Mirrored so the route enters from the left. The art is centred and
   fills the box, so scaleX flips it in place without moving its box —
   cheaper and far more reversible than re-authoring every path's x.
   NOTE: this reverses the section's entry/exit sides, so the handoff
   to the routes above and below no longer lines up (see the comment
   on .hp-section > svg[data-draw]). */
.hp-people > svg[data-draw] { transform: scaleX(-1); }
.hp-people .hp-head { align-items: flex-start; margin-top: 50px; }
.hp-people__lede {
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-13);
}
.hp-people__lede p {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
}
.hp-people__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 46px);
}
.hp-pcard {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 425 / 535;
  display: block;
  color: var(--bf-white);
}
.hp-pcard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.hp-pcard:hover img { transform: scale(1.05); }
.hp-pcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) -8%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0.6) 104%);
}
.hp-pcard__title {
  position: absolute;
  z-index: 1;
  color: var(--bf-white);
  top: var(--space-12);
  left: var(--space-12);
  right: var(--space-12);
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}
.hp-pcard__stat {
  position: absolute;
  z-index: 1;
  left: var(--space-12);
  right: var(--space-12);
  bottom: var(--space-12);
  transform: translateY(14px);
  opacity: 0;
  transition: transform var(--transition-slow) var(--ease-out),
              opacity var(--transition-slow) var(--ease-standard);
}
.hp-pcard:hover .hp-pcard__stat,
.hp-pcard:focus-visible .hp-pcard__stat {
  transform: translateY(0);
  opacity: 1;
}
.hp-pcard__value {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}
.hp-pcard__desc {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
}
/* Stat bars */
.hp-people__bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gutter);
  margin-top: var(--space-13);
      margin-bottom: 50px;
}
.hp-pbar {
  border-radius: var(--radius-lg);
  min-height: 171px;
  padding: var(--space-12) var(--space-12);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-12);
  align-items: center;
}
.hp-pbar--sand { background: var(--hp-sand-bar); }
.hp-pbar--grey { background: var(--hp-grey-bar); }
.hp-pbar__title {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--color-text-strong);
}
.hp-pbar__value {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--bf-blue-strong);
}
[data-theme="dark"] .hp-pbar__value { color: var(--color-primary-strong); }
.hp-pbar__label {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

/* ------------------------------------------------------------
   13. ESG — vertical pillar tabs + photo stat panel
   ------------------------------------------------------------ */
.hp-esg { padding-block: 0; }
.hp-esg__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.hp-esg__left {
  background: #EFF8F9;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(40px, 4.6vw, 70px);
}
[data-theme="dark"] .hp-esg__left { background: var(--hp-card-face); }
.hp-esg__kicker {
  margin: 0 0 var(--space-7);
  font-size: var(--fs-lg);
  line-height: var(--lh-none);
  color: var(--bf-blue-strong);
}
.hp-esg__title {
  margin: 0;
  font-size: var(--fs-4xl);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  color: var(--bf-blue-strong);
}
[data-theme="dark"] .hp-esg__kicker,
[data-theme="dark"] .hp-esg__title { color: var(--color-primary-strong); }
.hp-esg__tabs {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  margin-block: clamp(36px, 5vh, 60px) clamp(36px, 6vh, 64px);
}
.hp-esg__tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 1px solid #E3EBEC;
  padding: 17px 0;
  text-align: left;
  font-family: var(--font-primary);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: #8E9393;
  cursor: pointer;
  transition: color var(--transition-fast) var(--ease-standard);
}
[data-theme="dark"] .hp-esg__tab { color: var(--color-text-muted); border-bottom-color: var(--hp-hairline-10); }
.hp-esg__tab:last-child { border-bottom: none; }
.hp-esg__tab:hover { color: var(--color-text); }
.hp-esg__tab[aria-selected="true"] { color: var(--bf-blue-strong); }
[data-theme="dark"] .hp-esg__tab[aria-selected="true"] { color: var(--color-primary-strong); }
/* Dropdown trigger — only shown on phones / tablet portrait (see media query). */
.hp-esg__select { display: none; }
.hp-esg__cta { margin-top: auto; }
.hp-esg__panel {
  position: relative;
  overflow: hidden;
  min-height: clamp(560px, 55vw, 830px);
}
.hp-esg__photo {
  position: absolute;
  inset: 0;
  background: url("../images/our-esg-priorities-bg.jpg") center / cover no-repeat;
  transition: opacity 500ms var(--ease-standard);
}
.hp-esg__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
}
.hp-esg__view {
  position: relative;
  z-index: 1;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: clamp(36px, 8vh, 80px);
  height: 100%;
  min-height: inherit;
  padding: clamp(32px, 5vw, 80px) clamp(24px, 6vw, 90px) clamp(32px, 5vw, 80px) 24%;
  color: var(--bf-white);
}
.hp-esg__view.is-active { display: flex; }
.hp-esg__fig {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}
.hp-esg__fig sub { font-size: 0.6em; }
.hp-esg__label {
  margin: 0;
  max-width: 38ch;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
}
.hp-esg__bullets {
  margin: 0;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 5vh, 48px);
  max-width: 42ch;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.45;
}
.hp-esg__count {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 10px;
  transform: translateX(-50%);
  background: var(--bf-white);
  color: #2C2C2C;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: 6px 10px;
  border-radius: 4px;
}
.hp-esg__icon {
  position: absolute;
  right: clamp(24px, 3vw, 45px);
  bottom: clamp(20px, 3vw, 36px);
  width: clamp(84px, 9vw, 132px);
  height: auto;
  pointer-events: none;
}

/* ------------------------------------------------------------
   14. CSR BANNER
   ------------------------------------------------------------ */
.hp-csr { background: var(--color-bg); }
.hp-csr .bf-container {
  margin-top: 80px;

}
.hp-csr__card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: clamp(420px, 42vw, 550px);
  display: flex;
  color: var(--bf-white);
}
.hp-csr__card > img {
  position: absolute;
  inset: -6% 0;
  width: 100%;
  height: 112%;              /* parallax headroom */
  object-fit: cover;
  object-position: center 30%;
}
.hp-csr__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(0, 0, 0, 0.6) 0.6%, rgba(0, 0, 0, 0) 39.7%, rgba(0, 0, 0, 0.6) 76.8%);
}
.hp-csr__head {
  position: absolute;
  z-index: 1;
  top: var(--space-13);
  left: var(--space-13);
}
.hp-csr__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0 0 var(--space-11);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-tight);
}
.hp-csr__kicker::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: var(--radius-circle);
  background: var(--bf-white);
}
.hp-csr__title {
  margin: 0;
  color: var(--bf-white);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.hp-csr__body {
  position: absolute;
  z-index: 1;
  right: var(--space-13);
  bottom: var(--space-13);
  width: min(290px, 70%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
}
.hp-csr__body p {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-tight);
}

/* ------------------------------------------------------------
   15. MOMENTS CAROUSEL
   ------------------------------------------------------------ */
.hp-moments { background: var(--color-bg); }
.hp-moments .swiper-slide { width: 247px; }
.hp-moments__frame {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 350px;
  box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.1);
}
.hp-moments__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  transition: transform 600ms var(--ease-out);
}
.hp-moments .swiper-slide:hover img { transform: scale(1.06); }
.hp-moments__controls {
  display: flex;
  justify-content: center;
  margin-top: var(--space-13);
}

/* Download Centre gets its wash from the shared .bf-footer */

/* ------------------------------------------------------------
   16. REVEAL STATES — applied only when home.js confirms motion
   ------------------------------------------------------------ */
html.hp-anim .hp-reveal { opacity: 0; }
/* Split-text title reveal (word masks) */
.hp-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; }
.hp-word__i { display: inline-block; will-change: transform; }

/* Scrub-linked body copy: left inline (NOT inline-block) so word
   wrapping, justification and line-height are byte-identical to
   the unsplit paragraph — only opacity is animated. */
.hp-sword { will-change: opacity; }

/* Cards that take pointer tilt — promoted so the rotation does
   not repaint the card's shadow on every pointermove. */
.hp-csr__card, .hp-org__card, .hp-pin__card { will-change: transform; }

html.hp-anim .hp-img-reveal img,
html.hp-anim .hp-img-reveal .hp-esg__photo { clip-path: inset(0 100% 0 0); }

@media (prefers-reduced-motion: reduce) {
  .hp-reveal { opacity: 1 !important; }
  .hp-sword { opacity: 1 !important; }
  .hp-pcard img, .hp-moments__frame img { transition: none; }
  .hp-csr__card, .hp-org__card, .hp-pin__card { will-change: auto; }
}

/* ============================================================
   RESPONSIVE
   1920/1600/1440/1366 are served by the fluid 1512px container.
   ============================================================ */
@media (max-width: 1399.98px) {
  .hp-numbers__panel { grid-template-columns: 360px minmax(0, 1fr); }
}

@media (max-width: 1199.98px) {
  .hp-chairman__caption { font-size: var(--fs-xl); }
  .hp-numbers__panel { grid-template-columns: 320px minmax(0, 1fr); }
  .hp-numbers__tab { font-size: var(--fs-md); padding-inline: var(--space-11); }
  .hp-numbers__tab[aria-selected="true"] { padding-left: calc(var(--space-11) + 6px); }
  .hp-org__row { grid-template-columns: repeat(3, 1fr); }
  .hp-esg__panel { min-height: 540px; }
  /* Route line art hugs the page edges and has no room on tablet / narrow
     screens. home.js skips building the animation below this same width
     (ROUTE_MIN_W) — keep the two breakpoints in step. */
  .hp-journey,
  .hp-section > svg[data-draw],
  .bf-footer__route { display: none; }
}

@media (max-width: 991.98px) {
  .hp-section { padding-block: var(--space-15); }
  .hp-title { font-size: var(--fs-2xl); }
  .hp-title--xl { font-size: var(--fs-3xl); }
  .hp-head { flex-wrap: wrap; align-items: flex-start; gap: var(--space-9); margin-bottom: var(--space-12); }
  .hp-century__grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .hp-century__media img { max-height: 420px; }
  .hp-century__range { margin-block: var(--space-13) var(--space-12); }
  .hp-chairman__grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .hp-chairman__media { max-width: 560px; }
  .hp-leaders__head { top: var(--space-14); }
  .hp-numbers__panel { grid-template-columns: 1fr; }
  .hp-numbers__tabs {
    flex-direction: row;
    overflow-x: auto;
    border-bottom: 0.5px solid var(--hp-hairline);
    scrollbar-width: none;
  }
  .hp-numbers__tabs::-webkit-scrollbar { display: none; }
  .hp-numbers__tab {
    border-bottom: none;
    min-height: 56px;
    white-space: nowrap;
    flex-shrink: 0;
    padding-inline: var(--space-9);
  }
  .hp-numbers__tab[aria-selected="true"] { padding-left: var(--space-9); }
  .hp-numbers__views { min-height: 0; }
  .hp-numbers__view.is-active { grid-template-columns: 1fr; gap: var(--space-12); }
  .hp-people__cards { grid-template-columns: repeat(2, 1fr); }
  .hp-people__lede { gap: var(--space-9); }
  .hp-people__bars { grid-template-columns: 1fr; }
  .hp-esg__grid { grid-template-columns: 1fr; }
  .hp-esg__panel { min-height: 480px; }
  .hp-esg__view { padding-left: clamp(24px, 8vw, 80px); }
  .hp-esg__count { left: 50%; }
  .hp-org__row { padding-inline: var(--space-9); }
  .hp-csr__body {
    position: static;
    width: auto;
    padding: 0 var(--space-13) var(--space-13);
    margin-top: auto;
  }
  .hp-csr__card { flex-direction: column; justify-content: flex-end; }
  .hp-csr__head { position: static; padding: var(--space-13) var(--space-13) var(--space-9); }
  /* Route line art is hidden from 1199.98px down — see that breakpoint. */
}

@media (max-width: 767.98px) {
  .hp-hero { min-height: calc(100svh - 0px); }
  /* Hide the "Scroll down to discover more" cue on phones. */
  .hp-hero__scroll { display: none; }
  .hp-lcard {
    width: 400px;
    height: 210px;
    grid-template-columns: 190px 1fr;
  }
  .hp-lifecycle__viewport .swiper-slide { width: 400px; }
  .hp-lcard__value { font-size: var(--fs-2xl); }
  .hp-lcard__label { font-size: var(--fs-lg); }
  .hp-org__row { grid-template-columns: repeat(2, 1fr); }
  .hp-org__row--3 { grid-template-columns: repeat(2, 1fr); }
  .hp-org__band { font-size: var(--fs-base); line-height: var(--lh-normal); }
  .hp-people__cards { grid-template-columns: 1fr; max-width: 425px; margin-inline: auto; }
  .hp-pcard__stat { transform: none; opacity: 1; }   /* touch: always visible */
  .hp-pbar { grid-template-columns: 1fr; gap: var(--space-9); padding: var(--space-11); }
  .hp-timeline { padding-inline: 46px; }
  .hp-timeline .hp-timeline__bar { left: 35px; right: 35px; }
  /* Two milestones per view: full track minus the 30px data-gap, halved. */
  .hp-timeline .swiper-slide { width: calc((100% - 30px) / 2); }
  .hp-timeline__text { max-width: 100%; }
  /* TOMORROW stat marquee: one stat per view on phones (slidesPerView is
     "auto", so the slide width drives the count). */
  .hp-tomorrow__strip .swiper-slide { width: 100%; }
  /* A CENTURY CELEBRATED gallery: one legacy card per view on phones,
     with a bullet pager sitting below the card (position: static keeps it
     in flow so it never overlaps the slide). */
  .hp-gallery .swiper-slide { width: 100%; }
  .hp-gallery .hp-gallery__pager {
    display: flex;
    position: static;
    justify-content: center;
    margin-top: var(--space-11);
    --swiper-pagination-color: var(--color-primary);
    --swiper-pagination-bullet-inactive-color: var(--color-text-muted);
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bullet-size: 9px;
    --swiper-pagination-bullet-horizontal-gap: 5px;
  }
  .hp-pin { width: 22px; height: 22px; }
  .hp-esg__icon { width: 80px; right: var(--space-11); bottom: var(--space-11); }
  .hp-csr .bf-container { margin-top: 0; }

  /* FY2026 companies: nine tabs are unusable as a scroll strip at this
     width, so they become a dropdown. The tablist keeps its role and
     keyboard behaviour — only its presentation changes. */
  .hp-numbers__select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-9);
    width: 100%;
    min-height: 56px;
    padding: 0 var(--space-9);
    appearance: none;
    border: none;
    border-bottom: 1px solid var(--hp-hairline);
    background: var(--color-surface);
    font-family: var(--font-primary);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
  }
  .hp-numbers__select .bi {
    flex-shrink: 0;
    font-size: var(--icon-md);
    transition: transform var(--transition-base) var(--ease-standard);
  }
  .is-picker-open .hp-numbers__select .bi { transform: rotate(180deg); }

  /* Collapsed by default; max-height (not display) so it can animate
     and so the tabs stay focusable targets for initTabs. */
  .hp-numbers__tabs {
    flex-direction: column;
    overflow: hidden;
    max-height: 0;
    border-bottom: none;
    transition: max-height var(--transition-base) var(--ease-standard);
  }
  .is-picker-open .hp-numbers__tabs {
    max-height: 60vh;
    overflow-y: auto;
    border-bottom: 1px solid var(--hp-hairline);
  }
  .hp-numbers__tab {
    white-space: normal;
    border-bottom: 1px solid var(--hp-hairline);
    padding-inline: var(--space-9);
  }
  .hp-numbers__tab:first-child { border-top: none; }
  /* The trigger already names the current company; keep it in the list
     as a checked state rather than letting it read as unselected. */
  .hp-numbers__tab[aria-selected="true"] {
    background: var(--color-surface);
    font-weight: var(--fw-medium);
    padding-left: var(--space-9);
  }

  /* LEADERSHIP — the 1512/760 photo collapses to a ~190px strip at phone
     widths, too small to read faces. Give the section the full viewport
     height instead and pan the photo sideways: the track keeps the image's
     true aspect ratio, so the pins' left/top percentages still land on the
     right people. Title and CTA sit outside this scroller (see index.html). */
  .hp-leaders__media {
    --lead-track: calc(100svh * 1512 / 760);
    aspect-ratio: auto;
    height: 100svh;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hp-leaders__media::-webkit-scrollbar { display: none; }
  .hp-leaders__media::before,
  .hp-leaders__inner {
    width: var(--lead-track);
    right: auto;
  }
  /* In flow (not absolute) so the track width is real scrollable overflow,
     and max-width:none to escape the global img { max-width: 100% } reset,
     which would otherwise clamp the photo to the viewport. */
  .hp-leaders__media > img {
    position: relative;
    width: var(--lead-track);
    max-width: none;
    height: 100%;
    right: auto;
    object-position: left top;
  }
}

/* LEADERSHIP — tablet portrait (iPad). The wide 1512/760 photo still
   collapses to an unreadable strip at these widths, so give the section
   the mobile treatment: full-height photo panned as a horizontal
   scroller. Kept in step with the phone rules above (and the JS scroll
   hint gate in home.js). Portrait-only so landscape iPads keep the
   desktop layout. */
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: portrait) {
  .hp-leaders__head { top: var(--space-14); }
  .hp-leaders__actions { right: var(--space-9); bottom: var(--space-11); }
  /* TOMORROW — the 1252/512 card is too wide for portrait, forcing a
     short height that crops the photo. Match the phone treatment: let
     the card grow tall, span the panel full width, drop the arrows
     below. */
  .hp-tcard { min-height: 420px; aspect-ratio: auto; }
  .hp-tcard__panel { left: var(--space-9); right: var(--space-9); bottom: var(--space-9); width: auto; }
  .hp-tomorrow__cardnav {
    position: static;
    justify-content: flex-end;
    margin-top: var(--space-9);
  }
  .hp-leaders__media {
    --lead-track: calc(100svh * 1512 / 760);
    aspect-ratio: auto;
    height: 100svh;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hp-leaders__media::-webkit-scrollbar { display: none; }
  .hp-leaders__media::before,
  .hp-leaders__inner {
    width: var(--lead-track);
    right: auto;
  }
  .hp-leaders__media > img {
    position: relative;
    width: var(--lead-track);
    max-width: none;
    height: 100%;
    right: auto;
    object-position: left top;
  }
}

/* TOMORROW — tablet landscape (iPad). Keep the one-up swiper, but the
   1252/512 ratio makes the card too short here, clipping the panel. Drop the
   ratio and give the card enough height so the whole panel shows. any-pointer:
   coarse targets touch tablets so landscape laptops keep the desktop card. */
@media (orientation: landscape) and (min-width: 1024px) and (max-width: 1366px) and (any-pointer: coarse) {
  .hp-tcard { min-height: 420px; aspect-ratio: auto; }
  /* Stat marquee: show exactly three stats per view (2 × 25px gaps). */
  .hp-tomorrow__strip .swiper-slide { width: calc((100% - 50px) / 3); }
}

/* ESG — the eight pillar tabs collapse into a dropdown on phones and
   tablet portrait, mirroring the FY2026 company picker. The tablist
   keeps its role, ARIA and keyboard behaviour; only its presentation
   changes (trigger supplied by initEsgPicker in home.js). */
@media (max-width: 767.98px),
       (min-width: 768px) and (max-width: 1199.98px) and (orientation: portrait) {
  .hp-esg__grid { grid-template-columns: 1fr; }
  /* Reorder within the flex column so the dropdown sits below the CTA.
     DOM order is unchanged, so focus order and desktop layout stay put. */
  .hp-esg__cta { order: 1; margin-top: var(--space-11); }
  .hp-esg__select { order: 2; }
  .hp-esg__tabs { order: 3; }
  .hp-esg__select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-9);
    align-self: stretch;
    width: 100%;
    min-height: 56px;
    margin-top: var(--space-11);
    padding: 0 var(--space-9);
    appearance: none;
    border: 1px solid #E3EBEC;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-family: var(--font-primary);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
  }
  [data-theme="dark"] .hp-esg__select { border-color: var(--hp-hairline-10); }
  .hp-esg__select .bi {
    flex-shrink: 0;
    font-size: var(--icon-md);
    transition: transform var(--transition-base) var(--ease-standard);
  }
  .is-picker-open .hp-esg__select .bi { transform: rotate(180deg); }

  /* Collapsed by default; max-height (not display) so it can animate
     and so the tabs stay focusable targets for initTabs. */
  .hp-esg__tabs {
    align-self: stretch;
    margin-block: var(--space-7) 0;
    overflow: hidden;
    max-height: 0;
    background: var(--color-surface);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    transition: max-height var(--transition-base) var(--ease-standard);
  }
  .is-picker-open .hp-esg__tabs {
    max-height: 70vh;
    overflow-y: auto;
    margin-bottom: var(--space-11);
    border: 1px solid #E3EBEC;
    border-top: none;
  }
  [data-theme="dark"] .is-picker-open .hp-esg__tabs { border-color: var(--hp-hairline-10); }
  .hp-esg__tab { padding-inline: var(--space-9); }
}

@media (max-width: 575.98px) {
  .hp-section { padding-block: var(--space-14); }
  .hp-title { font-size: var(--fs-xl); }
  .hp-title--xl { font-size: var(--fs-2xl); }
  .hp-sub { font-size: var(--fs-base); }
  .hp-century__badge { width: 92px; height: 92px; }
  .hp-chairman__caption { top: var(--space-8); left: var(--space-8); }
  .hp-chairman__text { font-size: var(--fs-base); }
  .hp-leaders__actions { right: var(--space-9); bottom: var(--space-11); }
  .hp-lcard {
    width: 320px;
    height: 190px;
    grid-template-columns: 140px 1fr;
    border-radius: var(--radius-md);
  }
  .hp-lifecycle__viewport .swiper-slide { width: 320px; }
  .hp-lcard__body { padding: var(--space-9); }
  .hp-lcard__label { font-size: var(--fs-base); }
  .hp-numbers__view.is-active { padding: var(--space-11); }
  .hp-numbers__fig { font-size: var(--fs-xl); }
  .hp-tcard { min-height: 420px; aspect-ratio: auto; }
  .hp-tcard__panel { left: var(--space-9); right: var(--space-9); bottom: var(--space-9); width: auto; }
  /* Panel spans the full width here, so the arrows drop below the card. */
  .hp-tomorrow__cardnav {
    position: static;
    justify-content: flex-end;
    margin-top: var(--space-9);
  }
  .hp-org__row,
  .hp-org__row--3 { grid-template-columns: 1fr; }
  .hp-org__chip { margin-top: var(--space-7); }
  .hp-esg__panel { min-height: 430px; }
  .hp-esg__fig { font-size: var(--fs-xl); }
  .hp-csr__title { font-size: var(--fs-2xl); }
  .hp-csr__head,
  .hp-csr__body { padding-inline: var(--space-9); }
  .hp-gallery .swiper-slide { width: 100%; }
  .hp-gallery__media { height: 270px; }
  .hp-moments .swiper-slide { width: 210px; }
  .hp-moments__frame { height: 298px; }
}

.sectionsWrapper .newSVG {
  position: absolute;
  width: 95%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}