/* ============================================================
   1. NAVIGATION
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--nav-height);
  background-color: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  display: flex;
  align-items: center;

  box-shadow: 0 1px 0 var(--nav-border), 0 2px 8px rgba(17, 5, 65, 0.04);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1;
  padding: 13px 26px;
  border-radius: var(--btn-primary-radius);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Primary  Bidcorp green */
.btn--primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}

.btn--primary:hover {
  background-color: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text);
}

/* Secondary  navy outline */
.btn--secondary {
  background-color: transparent;
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}

.btn--secondary:hover {
  background-color: var(--btn-secondary-hover-bg);
  color: var(--btn-secondary-hover-text);
  border-color: var(--btn-secondary-hover-bg);
}

/* Ghost  for dark backgrounds */
.btn--ghost {
  background-color: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.45);
}

.btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-white);
  color: var(--color-white);
}

/* Small button variant */
.btn--sm {
  padding: 8px var(--space-4);
  font-size: var(--text-sm);
}

/* White button  for use on coloured backgrounds */
.btn--white {
  background-color: var(--color-white);
  color: var(--color-accent-green);
  border-color: var(--color-white);
}

.btn--white:hover {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

/* ============================================================
   3. CARDS
   ============================================================ */

/*
 * DESIGN DECISION: Cards use a subtle lift-on-hover (translateY + shadow)
 * rather than a simple border change. This gives better spatial feedback
 * for clickable cards without being flashy.
 */

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-padding);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-xl);
  margin-bottom: var(--space-4);
  color: var(--color-text-primary);
}

.card__body {
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  color: var(--color-text-body);
  margin-bottom: var(--space-6);
}

.card__image {
  width: 100%;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

/* ============================================================
   4. HERO SECTION
   ============================================================ */

.hero {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--section-padding-y);
  overflow: hidden;
}

/* ============================================================
   11. FOOTER
   ============================================================ */

.footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: var(--section-padding-y) 0 var(--space-8);
}

/* ============================================================
   12. TIP-OFFS OVERLAY
   ============================================================ */

/*
 * DESIGN DECISION: Fixed bottom-right button, always visible.
 * Uses brand navy rather than a warning colour  this is a
 * governance feature, not an emergency alert. The icon (shield
 * or lock) should communicate security, not urgency.
 */

.tipoffs-trigger {
  position: fixed;
  bottom: var(--space-8);
  right: var(--space-8);
  z-index: var(--z-tipoffs);
  background: var(--color-brand-primary);
  color: var(--color-white);
  padding: 11px 18px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  box-shadow: 0 4px 20px rgba(17, 5, 65, 0.35);
  cursor: pointer;
  border: none;
  transition:
    background var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.tipoffs-trigger:hover {
  background: var(--color-brand-secondary);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(17, 5, 65, 0.4);
}

.tipoffs-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(17, 5, 65, 0.70);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);

  /* DESIGN DECISION: Backdrop blur for modern depth effect */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.tipoffs-modal:not([hidden]) {
  opacity: 1;
  pointer-events: all;
}

.tipoffs-modal__panel {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  max-width: 520px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  position: relative;

  /* DESIGN DECISION: Slide-up entrance animation */
  transform: translateY(16px);
  transition: transform var(--transition-base);
}

.tipoffs-modal__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  color: var(--color-brand-primary);
  border: none;
  transition: background var(--transition-fast);
}

.tipoffs-modal__close:hover {
  background: var(--color-grey-light);
}

.tipoffs-modal__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  margin-bottom: var(--space-3);
}

/* ============================================================
   14. RESPONSIVE OVERRIDES FOR COMPONENTS
   ============================================================ */

@media (max-width: 1024px) {

}

@media (max-width: 768px) {

  /* Show icon only on mobile  hide label text */

  .tipoffs-trigger {
    padding: 12px;
    width: 48px;
    height: 48px;
    justify-content: center;
  }
}

@media (max-width: 480px) {

  .hero {
    min-height: 420px;
    align-items: center;
    padding-bottom: var(--space-12);
  }

}

/* ============================================================
   15. ACCESSIBILITY & FOCUS
   ============================================================ */

/* Skip link  visible only on :focus-visible */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: calc(var(--z-overlay) + 10); /* above ticker (200) and header (100) */
  padding: var(--space-3) var(--space-5);
  background: var(--color-accent-green);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus-visible {
  top: var(--space-4);
}

/*
 * DESIGN DECISION: Single consistent focus ring across all interactive
 * elements using brand secondary blue. 2px offset keeps the ring
 * visible against both light and dark surfaces without cluttering
 * the layout. :focus-visible ensures it only appears on keyboard nav.
 */
:focus-visible {
  outline: 2px solid var(--color-brand-secondary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================
   15b. SITEWIDE SHARE PRICE TICKER
   ============================================================ */

/*
 * DESIGN DECISION: Dark grey (--color-brand-dark-grey = #262626)
 * chosen over navy to avoid competing with the main nav, and to
 * signal "financial data" without duplicating the brand header.
 * Fixed at top:0 with z-index above .site-header (--z-nav = 100).
 * Continuous scroll animation  JS (main.js initTickerScroll) clones
 * the track content for a seamless loop and sets --ticker-duration.
 * TODO: Replace static values with Profile Media live feed
 *       when Liam @ Profile Media confirms endpoint + data package.
 */

.ticker-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--ticker-height);
  background: var(--color-brand-dark-grey);
  z-index: var(--z-overlay); /* 200  above .site-header at z-index: 100 */
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/*  Animated scroll track  */

/*
 * JS clones all children of .ticker-bar__track (aria-hidden on clones)
 * so the total content is 2 wide. The animation runs translateX(0Ã-50%),
 * which aligns the clone's start with the original's end = seamless loop.
 * --ticker-duration is set by JS based on content width ÷ scroll speed.
 */
.ticker-bar__track {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  white-space: nowrap;
  width: max-content;
  padding-left: var(--space-5);
  animation: ticker-scroll var(--ticker-duration, 38s) linear infinite;
}

.ticker-bar:hover .ticker-bar__track {
  animation-play-state: paused;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--single-set-px, 800px))); }
}

/*  Reduced motion  stop animation, show data statically  */
@media (prefers-reduced-motion: reduce) {
  .ticker-bar__track {
    animation: none;
  }
}

/*  Mobile  compact brand label  */
@media (max-width: 640px) {
}

/*  Scroll-margin so skip link lands below ticker + header  */

#main,
#main-content {
  scroll-margin-top: calc(var(--ticker-height) + var(--header-height));
}

/* ============================================================
   16. SITE HEADER & PRIMARY NAVIGATION
   ============================================================ */

.site-header {
  position: fixed;
  top: var(--ticker-height); /* pushed below the fixed ticker bar */
  width: 100%;
  z-index: var(--z-nav);
  background: var(--nav-bg);
  transition: background-color 300ms ease, box-shadow 300ms ease;
  box-shadow: 0 1px 0 var(--nav-border), 0 2px 8px rgba(17, 5, 65, 0.04);
}

/* All pages: clear the fixed ticker bar */
body {
  padding-top: var(--ticker-height);
}

/* Inner pages: also clear the fixed header below the ticker */
body:not(.page-home) {
  padding-top: calc(var(--header-height) + var(--ticker-height));
}

/* Main nav row */
.header-main {
  height: var(--nav-height);
  display: flex;
  align-items: center;
}

.header-main .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

/* Wordmark logo */
.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

/* Primary nav wrapper */
.primary-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
}

.nav-item {
  position: relative;
}

.nav-link {
  font-family: var(--nav-link-font);
  font-size: var(--nav-link-size);
  font-weight: var(--nav-link-weight);
  color: var(--nav-link-color);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast);
}

/* Button-style nav item (triggers dropdown) */
.nav-link--btn {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

.nav-link[aria-current="page"] {
  color: var(--nav-link-active);
}

/* Dropdown caret arrow */
.nav-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: var(--space-1);
  transition: transform var(--transition-fast);
}

.nav-item.is-open .nav-caret {
  transform: rotate(180deg);
}

/* Dropdown panel */
.nav-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  min-width: 220px;
  background: var(--color-white);
  border: 1px solid var(--nav-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  list-style: none;
  padding: var(--space-2) 0;
  z-index: var(--z-above);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.nav-item.is-open .nav-dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.nav-dropdown a {
  display: block;
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-body);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-dropdown a:hover {
  background: var(--color-off-white);
  color: var(--color-brand-primary);
}

/* Right-side actions: search + hamburger */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.btn-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand-primary);
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.btn-icon:hover {
  background: var(--color-brand-primary);
  color: var(--color-white);
}

/* DESIGN DECISION: Hamburger is hidden on desktop. It must still be
   rendered in the DOM for JS to target it, so we use display:none
   rather than visibility:hidden so it is also removed from tab order. */
.btn-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
}

.btn-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-brand-primary);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Hamburger à ✕ when open */
.btn-hamburger.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.btn-hamburger.is-active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.btn-hamburger.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   17. SEARCH OVERLAY
   ============================================================ */

/*
 * DESIGN DECISION: Full-screen overlay with backdrop blur and a
 * large Comfortaa input. Uses opacity+pointer-events transition so
 * the close animation plays before display:none kicks in.
 * The [hidden] attribute is overridden with display:flex so the
 * transition can run  visibility is controlled by opacity only.
 */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(17, 5, 65, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  padding-top: 120px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.search-overlay[hidden] {
  display: flex !important;
}

.search-overlay:not([hidden]) {
  opacity: 1;
  pointer-events: all;
}

.search-overlay .container {
  position: relative;
  max-width: 680px;
}

.search-overlay__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: var(--space-4);
}

.search-overlay__input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.25);
  padding: var(--space-4) 0;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  outline: none;
  caret-color: var(--color-accent-green);
  transition: border-color var(--transition-fast);
}

.search-overlay__input::placeholder {
  color: rgba(255, 255, 255, 0.20);
}

.search-overlay__input:focus {
  border-bottom-color: var(--color-accent-green);
}

.search-overlay__results {
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.55);
}

.search-overlay__close {
  position: absolute;
  top: -80px;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.10);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.search-overlay__close:hover {
  background: rgba(255, 255, 255, 0.20);
}

/* ============================================================
   19. PAGE HERO (inner pages)
   ============================================================ */

.page-hero {
  position: relative;
  min-height: 550px;
  display: flex;
  align-items: flex-end;
  padding: var(--space-16) 0 var(--space-16);
  background: var(--color-brand-primary);
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(17, 5, 65, 0.95) 0%, rgba(24, 74, 135, 0.40) 100%);
  z-index: 0;
}

/* Section-specific hero tints derived from --color-section-* tokens */
.page-hero--investors::before {
  background: linear-gradient(135deg, rgba(17, 5, 65, 0.95) 0%, rgba(24, 74, 135, 0.50) 100%);
}

.page-hero--esg::before {
  background: linear-gradient(135deg, rgba(17, 5, 65, 0.95) 0%, rgba(147, 201, 187, 0.35) 100%);
}

.page-hero--news::before {
  background: linear-gradient(135deg, rgba(17, 5, 65, 0.95) 0%, rgba(121, 191, 67, 0.30) 100%);
}

.page-hero--about {
  background-color: var(--color-brand-primary);
  background-image: url('../images/about-us-header-img.jpg');
  background-size: cover;
  background-position: center;
}

.page-hero--about::before {
  background: linear-gradient(
    105deg,
    rgba(17, 5, 65, 0.94) 0%,
    rgba(17, 5, 65, 0.70) 45%,
    rgba(24, 74, 135, 0.35) 100%
  );
}

.page-hero__inner {
  position: relative;
  z-index: 1;
}

/* Breadcrumb inside page hero */
.page-hero__breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin-bottom: var(--space-6);
}

.page-hero__breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-brand-primary);
}

.page-hero__breadcrumb li::after {
  content: '/';
  color: var(--color-brand-primary);
}

.page-hero__breadcrumb li:last-child::after {
  display: none;
}

.page-hero__breadcrumb a {
  color: var(--color-brand-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.page-hero__breadcrumb a:hover {
  color: var(--color-brand-primary);
}

.page-hero__breadcrumb span {
  color: rgba(255, 255, 255, 0.80);
}

.page-hero__title {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-4xl);
    color: var(--color-brand-primary);
    max-width: 100%;
    margin-bottom: var(--space-4);
}

.page-hero__sub {
    font-size: var(--text-md);
    color: rgba(255, 255, 255, 0.65);
    max-width: 100%;
    line-height: var(--leading-md);
}

/* Page hero with background image  matches hp-hero overlay treatment */
.page-hero--has-image {
  position: relative;
  overflow: hidden;
  background: transparent;
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* .page-hero__media always holds exactly one hero photo, but pages were
   built inconsistently  some use .page-hero__bg-img (styled below),
   others .page-hero__bg / .page-hero__img (never defined anywhere) or no
   class at all. Those fall back to the sitewide img{height:auto} reset,
   so the image just scales to its own aspect ratio at the container's
   width instead of filling the hero's fixed height  fine on a wide
   desktop viewport where that scaled height usually still covers, but
   on narrow mobile widths the same image often ends up only half the
   hero's height, leaving the background gradient exposed underneath.
   Target any img here directly so every page covers correctly,
   regardless of which class (if any) it happens to carry. */
.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    /* Layer 1: #8AB4D1 left à transparent right */
    linear-gradient(to right, rgba(138, 180, 209, 1) 0%, rgba(138, 180, 209, 0) 65%),
    /* Layer 2: #79BF43 bottom à transparent top */
    linear-gradient(to top, rgba(121, 191, 67, 1) 0%, rgba(121, 191, 67, 0) 45%),
    /* Layer 3: dark navy base tint  video remains visible but legible */
    rgba(17, 5, 65, 0.25);
}

.page-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
}

.page-hero--has-image .page-hero__breadcrumb a:hover {
  color: var(--color-white);
}

/* ============================================================
   20. SECTION HEADER & COLOUR VARIANTS
   ============================================================ */

/* Centred heading + lead text pattern used above most content grids */
.section__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--space-10);
  padding:40px 0;
}

.section__header p {
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--color-text-body);
}

/* Scaffold used .section--grey and .section--navy  map to base tokens */
.section--grey  { background-color: var(--color-bg-section-alt); }
.section--navy  { background-color: var(--color-bg-dark); }
.section--dark  { background-color: var(--color-brand-dark-grey); }

.section--navy h2,
.section--dark  h2 {
  color: var(--color-white);
}

.section--navy p,
.section--dark  p {
  color: rgba(255, 255, 255, 0.65);
}

.section--navy .section__header p,
.section--dark  .section__header p {
  color: rgba(255, 255, 255, 0.65);
}

.section--off-white { background-color: var(--color-off-white); }

.section--navy .eyebrow,
.section--dark .eyebrow   { color: rgba(255, 255, 255, 0.65); }

/* ============================================================
   21. STAT ROW
   ============================================================ */

/*
 * DESIGN DECISION: Centred flex row, wraps on mobile. Each stat gets
 * a minimum width so numbers never feel cramped. The row itself has
 * generous vertical padding so it reads as a landmark on the page.
 */
.stat-row {
  display: flex;
  gap: var(--space-12);
  justify-content: center;
  flex-wrap: wrap;
  padding: var(--space-8) 0;
  margin-bottom: var(--space-8);
}

/* ============================================================
   22. CARD EXTENSIONS
   ============================================================ */

/* .card__eyebrow  green uppercase label above card title */
.card__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-accent-green);
  margin-bottom: var(--space-3);
  display: block;
}

/* DESIGN DECISION: Arrow gap animates on hover for tactile feel */
.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  text-decoration: none;
  margin-top: var(--space-4);
  transition: color var(--transition-fast), gap var(--transition-fast);
}

.card__link:hover {
  color: var(--color-accent-green);
  gap: var(--space-3);
}

/* ============================================================
   23. MEDIA PLACEHOLDER
   ============================================================ */

.media-placeholder {
  background: var(--color-off-white);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-grey-light);
  font-size: var(--text-sm);
  font-style: italic;
  min-height: 200px;
  border: 2px dashed var(--color-border);
}

/* ============================================================
   25. TIP-OFFS FAB (scaffold class aliases)
   ============================================================ */

/*
 * The HTML scaffold uses .tipoffs-fab / .tipoffs-fab__label.
 * These aliases map to the same visual as .tipoffs-trigger (section 12).
 */
.tipoffs-fab {
  position: fixed;
  bottom: var(--space-8);
  right: var(--space-8);
  z-index: var(--z-tipoffs);
  background: var(--color-brand-primary);
  color: var(--color-white);
  padding: 11px 18px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  box-shadow: 0 4px 20px rgba(17, 5, 65, 0.35);
  cursor: pointer;
  border: none;
  transition:
    background var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.tipoffs-fab:hover {
  background: var(--color-brand-secondary);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(17, 5, 65, 0.40);
}

.tipoffs-modal__backdrop {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.tipoffs-modal__intro {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: var(--leading-base);
  margin-bottom: var(--space-6);
}

.tipoffs-modal__regions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tipoffs-modal__region {
  padding: var(--space-4);
  background: var(--color-off-white);
  border-radius: var(--radius-md);
}

.tipoffs-modal__region h3 {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  margin-bottom: var(--space-1);
}

.tipoffs-modal__note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

/* Override display:none so the opacity transition plays on open */
.tipoffs-modal[hidden] {
  display: flex !important;
}

/* Unclaimed dividends FAB  stacked above the tip-offs button */
.unclaimed-fab {
  position: fixed;
  bottom: calc(var(--space-8) + 44px + var(--space-3));  /* tip-offs height + gap */
  right: -999;
  z-index: var(--z-tipoffs);
  background: var(--color-accent-green);
  color: var(--color-brand-primary);
  padding: 11px 18px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  box-shadow: 0 4px 20px rgba(121, 191, 67, 0.35);
  cursor: pointer;
  border: none;
  transition:
    background var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
	opacity: 0;
}

.unclaimed-fab:hover {
  background: var(--color-brand-primary);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(17, 5, 65, 0.40);
}

#investor-overview .unclaimed-fab { opacity: 1; right: var(--space-8);}

/* ============================================================
   26. DOCUMENT ROWS
   ============================================================ */

.doc-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-light);
  transition: background var(--transition-fast), padding var(--transition-fast);
}

.doc-row:last-child {
  border-bottom: none;
}

/* DESIGN DECISION: Indent on hover mirrors the pub-card link behaviour */
.doc-row:hover {
  padding-left: var(--space-3);
}

.doc-row__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  color: var(--color-brand-secondary);
  border: 1px solid var(--color-border-light);
}

.doc-row__name {
  flex: 1;
}

.doc-row__name strong,
.doc-row__name a {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.doc-row__name a:hover {
  color: var(--color-brand-secondary);
}

.doc-row__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.doc-row__action {
  flex-shrink: 0;
}

.doc-row--on-dark {
  border-color: rgba(255, 255, 255, 0.12);
}
.doc-row--on-dark .doc-row__icon {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.5);
}
.doc-row--on-dark .doc-row__name {
  color: var(--color-white);
}
.doc-row--on-dark .doc-row__name strong,
.doc-row--on-dark .doc-row__name a {
  color: var(--color-white);
}
.doc-row--on-dark .doc-row__meta {
  color: rgba(255, 255, 255, 0.55);
}

.es-doc-section {
  margin-top: var(--space-10);
}

.es-doc-section__heading {
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-normal);
  margin-bottom: var(--space-5);
}

/* ============================================================
   27. FAQ ACCORDION
   ============================================================ */

.faq-item {
  border-bottom: 1px solid var(--color-border-light);
}

.faq-item__question {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.faq-item__question:hover {
  color: var(--color-brand-secondary);
}

/*
 * DESIGN DECISION: Plus/minus indicator via ::after pseudo-element
 * keeps the markup clean and avoids a decorative SVG in the DOM.
 */
.faq-item__question::after {
  content: '+';
  font-size: var(--text-xl);
  font-weight: var(--weight-light);
  line-height: 1;
  flex-shrink: 0;
  color: var(--color-accent-green);
  transition: transform var(--transition-base);
}

.faq-item.is-open .faq-item__question::after {
  content: '-';
}

.faq-item__answer {
  display: none;
  padding-bottom: var(--space-5);
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: var(--leading-base);
}

.faq-item.is-open .faq-item__answer {
  display: block;
}

/* ============================================================
   29. TIMELINE
   ============================================================ */

.timeline {
  position: relative;
  padding-left: var(--space-12);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}

/* ============================================================
   Table Toggle
   ============================================================ */
.perf-view-toggle { display: flex; gap: 2px; background: var(--color-off-white); border-radius: 6px; padding: 2px; }
.perf-view-btn { display: flex; align-items: center; gap: 5px; padding: 5px 12px; border: none; border-radius: 4px; background: transparent; font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--color-grey-dark); cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; }
.perf-view-btn--active { background: #fff; color: var(--color-brand-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.perf-view-btn svg { flex-shrink: 0; }

/* Data tables */
.perf-table-view { margin-top: 24px; }
.perf-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.perf-data-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 14px; }
.perf-data-table th { text-align: left; padding: 10px 16px; background: var(--color-brand-primary); color: var(--color-white); font-weight: 600; font-size: 12px; letter-spacing: 0.03em; white-space: nowrap; }
.perf-data-table td { padding: 10px 16px; border-bottom: 1px solid #eee; color: var(--color-text-body); white-space: nowrap; }
.perf-data-table tr:last-child td { border-bottom: none; }
.perf-data-table tr:hover td { background: var(--color-off-white); }
.perf-data-table__year { font-weight: 700; color: var(--color-brand-primary); }
.perf-data-table__pos { color: #2a7a2a; font-weight: 600; }
.perf-data-table__neg { color: #b91c1c; font-weight: 600; }

/* ============================================================
   33. RESPONSIVE ADDITIONS
   ============================================================ */

@media (max-width: 1024px) {

}

@media (max-width: 768px) {
  .btn-hamburger {
    display: flex;
  }

  .primary-nav {
    display: none;
  }

  .primary-nav.is-open {
    display: flex;
    position: fixed;
    top: calc(var(--ticker-height) + var(--header-height));
    left: 0;
    right: 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--nav-border);
    padding: var(--space-6) var(--container-padding-x);
    flex-direction: column;
    box-shadow: var(--shadow-md);
    z-index: calc(var(--z-nav) - 1);
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
  }

  .primary-nav.is-open .nav-list {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }

  .primary-nav.is-open .nav-link {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
  }

  .primary-nav.is-open .nav-dropdown {
    position: static;
    opacity: 1;
    pointer-events: all;
    transform: none;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--color-accent-green);
    padding-left: var(--space-4);
    margin-left: var(--space-4);
    display: none;
  }

  .primary-nav.is-open .nav-item.is-open .nav-dropdown {
    display: block;
  }

  .stat-row {
    gap: var(--space-8);
  }

  .page-hero {
    min-height: 320px;
    padding: var(--space-12) 0 var(--space-8);
  }

  .page-hero__title {
    font-size: var(--text-3xl);
    line-height: var(--leading-3xl);
  }
}

@media (max-width: 480px) {

  /* Mobile tip-offs: icon only, no label */
  .tipoffs-fab .tipoffs-fab__label {
    display: none;
  }

  .tipoffs-fab {
    padding: 12px;
    width: 48px;
    height: 48px;
    justify-content: center;
  }
}

/* ============================================================
   34. PRINT STYLES
   ============================================================ */

@media print {
  .site-header,
  .search-overlay,
  .tipoffs-fab,
  .tipoffs-modal,
  .btn {
    display: none !important;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }
}

/* ============================================================
   35. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   36. DOCUMENT ARCHIVE  investors/archive.html
   ============================================================ */

/*
 * DESIGN DECISION: Three stacked regions  white search bar (always
 * visible), sticky filter bar (follows the page header), and a scrollable
 * results area. The search bar sits above the filter bar so both are
 * immediately visible on load without scrolling.
 *
 * Badge colours are applied via inline style from typeColors in
 * archive-data.js rather than CSS modifier classes, so new document
 * types added to the data file automatically receive the correct colour
 * without any CSS changes.
 */

/*  Search bar  */

.archive-search-section {
  background: var(--color-bg-white);
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--space-6) 0;
}

.archive-search__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.archive-search__wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.archive-search__icon {
  position: absolute;
  left: var(--space-5);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
  flex-shrink: 0;
}

/*
 * DESIGN DECISION: Pill-shaped search input on off-white background mirrors
 * the filter pill language below it, creating a visual family. Border appears
 * only on :focus to avoid doubling the prominent pill shape at rest.
 */
.archive-search__input {
  width: 100%;
  height: 52px;
  padding: 0 var(--space-5) 0 var(--space-12);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-normal);
  color: var(--color-text-primary);
  background: var(--color-off-white);
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  outline: none;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.archive-search__input:focus {
  background: var(--color-bg-white);
  border-color: var(--color-brand-secondary);
}

.archive-search__input::placeholder {
  color: var(--color-text-muted);
  font-weight: var(--weight-normal);
}

/*  Sticky filter bar  */

/*
 * DESIGN DECISION: Filter bar sticks at calc(ticker + header height) so it
 * travels below both the ticker bar and the sticky site header while
 * scrolling through 35+ result cards.
 */
.archive-filter-bar {
  position: sticky;
  top: calc(var(--ticker-height) + var(--header-height));
  z-index: var(--z-above);
  background: var(--color-bg-white);
  border-bottom: 1px solid var(--color-border-light);
  box-shadow: 0 2px 8px rgba(17, 5, 65, 0.04);
}

.archive-filter-bar .container {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: nowrap;
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}

/* Inner wrapper  all filter groups; collapses on mobile */
.archive-filter-bar__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-3) 0;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

/* One filter dimension group (Year, Type, Period, Division) */
.archive-filter-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.archive-filter-group__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Individual filter pill */
.archive-filter-btn {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-body);
  background: var(--color-off-white);
  border: 1.5px solid transparent;
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.archive-filter-btn:hover {
  border-color: var(--color-brand-secondary);
  color: var(--color-brand-secondary);
}

/*
 * DESIGN DECISION: Active filter pills use --color-accent-green (the primary
 * CTA colour) so active state reads as a positive selection  consistent with
 * active states throughout the site (nav-link[aria-current], timeline dots).
 */
.archive-filter-btn.is-active {
  background: var(--color-accent-green);
  color: var(--color-white);
  border-color: var(--color-accent-green);
}

.archive-filter-btn.is-active:hover {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
}

/* "Clear all filters" link  appears only when a filter is active */
.archive-clear {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  white-space: nowrap;
  padding: var(--space-3) 0;
  margin-left: auto;
  flex-shrink: 0;
  align-self: flex-start;
  transition: color var(--transition-fast);
}

.archive-clear:hover {
  color: var(--color-brand-primary);
}

/* Mobile filter toggle button  hidden on desktop */
.archive-filter-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  background: var(--color-off-white);
  border: 1.5px solid var(--color-border-light);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  flex-shrink: 0;
  margin: var(--space-3) 0;
  transition: border-color var(--transition-fast);
}

.archive-filter-toggle:hover {
  border-color: var(--color-brand-secondary);
}

/* Active filter count badge on the mobile toggle button */
.archive-filter-toggle__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  background: var(--color-accent-green);
  color: var(--color-white);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--weight-bold);
  line-height: 1;
}

/*  Results bar  */

.archive-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-8);
  margin-bottom: var(--space-6);
}

.archive-results-count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/*  Featured "Latest publications" section  */

/*
 * DESIGN DECISION: Featured documents are highlighted with a left border
 * in --color-brand-secondary (the investor accent colour) and a light grey
 * tint to lift them above the main grid without introducing a new visual
 * language. The section uses --color-bg-section-alt to stay within tokens.
 */
.archive-featured {
  background: var(--color-bg-section-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin-bottom: var(--space-10);
}

.archive-featured__label {
  color: var(--color-brand-secondary);
  margin-bottom: var(--space-6);
}

/*  Document grid  */

.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  margin-bottom: var(--space-8);
}

/*  Document card  */

/*
 * DESIGN DECISION: flex-column layout keeps the actions row always at the
 * card bottom regardless of description length, so the grid stays visually
 * aligned across cards with unequal content.
 */
.archive-doc-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.archive-doc-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Featured cards get a subtle green top accent */
.archive-doc-card--featured {
  border-top: 3px solid var(--color-accent-green);
}

/* Header row: badge (left) and format type indicator (right) */
.archive-doc-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/*  Type badge  */

/*
 * Badge background and text colours are set via inline style from
 * typeColors/TYPE_TEXT_COLOR in archive.js  no modifier classes needed.
 * This means new document types in archive-data.js are automatically styled.
 */
.archive-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4;
}

/* Format type indicator pill: icon + label */
.archive-format-icon {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-muted);
  background: var(--color-off-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Document title */
.archive-doc-card__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  line-height: var(--leading-md);
  margin-bottom: var(--space-2);
}

/* Meta row: year · period · date */
.archive-doc-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.archive-doc-card__meta-item {
  display: inline;
}

.archive-doc-card__meta-sep {
  color: var(--color-border);
}

/* Description  flex:1 pushes actions to card bottom */
.archive-doc-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: var(--leading-base);
  flex: 1;
  margin-bottom: var(--space-5);
}

/* File size annotation inside the primary CTA button */
.archive-doc-card__size {
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  opacity: 0.75;
}

/* Primary action button row */
.archive-doc-card__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: auto;
  margin-bottom: var(--space-4);
}

/*  Secondary format links  */

/*
 * DESIGN DECISION: Secondary formats (e.g. recording + slides below the
 * primary PDF) are separated by a hairline border and presented as compact
 * text links  not as full buttons  so they read as supplementary rather
 * than competing with the primary CTA.
 */
.archive-doc-card__secondary-formats {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
  margin-top: auto;
}

.archive-format-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-brand-secondary);
  text-decoration: none;
  line-height: 1.3;
  transition: color var(--transition-fast);
}

.archive-format-link:hover {
  color: var(--color-brand-primary);
}

.archive-format-link__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.archive-format-link__size {
  color: var(--color-text-muted);
  font-weight: var(--weight-normal);
}

/*  Empty state  */

.archive-empty {
  text-align: center;
  padding: var(--space-20) var(--space-8);
  max-width: 480px;
  margin: 0 auto;
}

.archive-empty__icon {
  margin-bottom: var(--space-6);
  color: var(--color-grey-light);
  display: flex;
  justify-content: center;
}

.archive-empty h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-brand-primary);
  margin-bottom: var(--space-3);
}

.archive-empty p {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: var(--leading-md);
  margin-bottom: var(--space-6);
}

/*  Responsive  */

/* The site-wide fixed .tipoffs-fab button sits 32px from the viewport's
   right edge. Above --container-max (1640px) the container is centred
   with room to spare, so the button floats in the margin outside it.
   Below that, the container runs edge-to-edge with no margin, so the
   grid's right-hand column runs right up against the button's corner.
   Reserve clearance on the grid itself (not the button, which is
   shared site-wide) so the last column never sits under it. */
@media (min-width: 1025px) and (max-width: 1800px) {
  .archive-grid {
    padding-right: 156px;
  }
}

@media (max-width: 1024px) {
  .archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .archive-filter-bar__inner {
    gap: var(--space-4);
  }
}

@media (max-width: 768px) {
  /* Reveal the filter toggle button; collapse the filter groups */
  .archive-filter-toggle {
    display: flex;
  }

  .archive-filter-bar__inner {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: 0 0 var(--space-4);
    width: 100%;
  }

  .archive-filter-bar__inner.is-open {
    display: flex;
  }

  .archive-filter-bar .container {
    flex-wrap: wrap;
  }

  .archive-clear {
    margin-left: 0;
    padding: var(--space-2) 0;
  }

  .archive-grid {
    grid-template-columns: 1fr;
  }

  .archive-featured {
    padding: var(--space-5);
  }

  .archive-search__input {
    font-size: var(--text-base);
    height: 48px;
  }
}

@media (max-width: 480px) {
  .archive-results-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .archive-doc-card__actions .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ============================================================
   HOMEPAGE COMPONENTS
   All styles below are scoped to homepage elements
   prefixed with .hp- to avoid collisions with scaffold styles.
   ============================================================ */

/* ----------------------------------------------------------
   GRAIN TEXTURE UTILITY
   Reusable pseudo-element mixin via class.
   Applied to off-white sections for subtle noise texture.
   ---------------------------------------------------------- */

/* Inline via ::before on sections that need it */
.hp-grain {
  position: relative;
}

/* Ensure content sits above the grain pseudo-element */
.hp-grain > * {
  position: relative;
  z-index: 1;
}

.hp-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
}

/* ----------------------------------------------------------
   CIRCLE ARROW BUTTON
   Inline-flex component: label + animated navy circle with arrow.
   Variants: default (navy), --white (glass), --dark (filled on dark bg)
   ---------------------------------------------------------- */

.btn-circle-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  text-decoration: none;
  transition: gap 200ms ease, color 150ms ease;
}

.btn-circle-arrow__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  color: var(--color-white);
  flex-shrink: 0;
  transition: transform 250ms ease, background 200ms ease;
}

.btn-circle-arrow:hover .btn-circle-arrow__circle {
  transform: translateX(5px);
}

.btn-circle-arrow:hover {
  color: var(--color-brand-secondary);
}

/* White variant  for use on dark backgrounds */
.btn-circle-arrow--white {
  color: var(--color-white);
}

.btn-circle-arrow--white .btn-circle-arrow__circle {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.30);
}

.btn-circle-arrow--white:hover {
  color: rgba(255, 255, 255, 0.80);
}

.btn-circle-arrow--white:hover .btn-circle-arrow__circle {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================================
   MOBILE MENU  Full screen overlay
   ============================================================ */

/* The [hidden] attribute is overridden by display:flex below,
   so we explicitly restore it here. */

@keyframes mobileMenuIn {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   HERO  Homepage full-viewport video hero
   position: sticky so content below slides over it.
   ============================================================ */

.hp-hero {
  position: sticky;
  top: 0;
  width: 100%;

  height: calc(70vh + var(--header-height));
  overflow: hidden;
  z-index: 0;
  /* Fallback bg if video unavailable */
  background-color: var(--color-brand-primary-alt);
}

/* Video layer */
.hp-hero__media {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.hp-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
}

/* Gradient overlay  three layers */
.hp-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    /* Layer 1: #8AB4D1 left à transparent right */
    linear-gradient(to right, rgba(138, 180, 209, 1) 0%, rgba(138, 180, 209, 0) 65%),
    /* Layer 2: #79BF43 bottom à transparent top */
    linear-gradient(to top, rgba(121, 191, 67, 1) 0%, rgba(121, 191, 67, 0) 45%),
    /* Layer 3: dark navy base tint  video remains visible but legible */
    rgba(17, 5, 65, 0.25);
  pointer-events: none;
}

/* Content wrapper  fills hero, positions text bottom-left */
.hp-hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  pointer-events: none; /* children re-enable as needed */
}

.hp-hero__content-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: var(--space-20);
  padding-top: calc(var(--ticker-height) + var(--header-height)); /* clear ticker + fixed nav */
  gap: var(--space-8);
  width: 100%;
  pointer-events: none;
}

/* Headline text block  bottom left */
.hp-hero__text {
  flex: 0 1 680px;
  
  pointer-events: auto;
}

.hp-hero__headline {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  line-height: var(--leading-6xl);
  margin-bottom: var(--space-6);
  word-spacing: -10px;
}

.hp-hero__line {
  display: block;
}

.hp-hero__line--light {
  font-weight: var(--weight-light);
  color: var(--color-text-primary);
}

.hp-hero__line--bold {
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}

.hp-hero__body {
  font-size: var(--text-md);
  line-height: var(--leading-lg);
  color: var(--color-text-inverse);
  max-width: 680px;
  margin-bottom: var(--space-6);
}

/* Hero CTA  uses .btn-circle-arrow--white from global utilities */
.hp-hero__cta-link {
  /* Extend .btn-circle-arrow--white inline */
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  text-decoration: none;
  transition: gap 200ms ease;
}

.hp-hero__cta-link__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.30);
  flex-shrink: 0;
  transition: transform 250ms ease;
}

.hp-hero__cta-link:hover .hp-hero__cta-link__circle {
  transform: translateX(5px);
}

.hp-hero__cta-link:hover {

  color: rgba(255, 255, 255, 0.80);
}

/* Floating event card  glassmorphism navy */
.hp-hero__event-card {
  flex: 0 0 580px;
  display: grid;
  grid-template-columns: 180px 1fr;
  background: rgba(31, 19, 70, 0.541);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  border: 0.1px solid rgba(255, 255, 255, 0.522);
  border-radius: var(--radius-lg);
  overflow: hidden;
  pointer-events: auto;
}

/* Left column  cover image */
.hp-hero__event-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
}

.hp-hero__event-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Right column  event details */
.hp-hero__event-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
}

.hp-hero__event-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-accent-green);
  margin-bottom: var(--space-2);
}

.hp-hero__event-title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  line-height: 1.3;
  margin-bottom: var(--space-2);
}

.hp-hero__event-presenter {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: rgba(255, 255, 255, 0.60);
  margin-bottom: var(--space-4);
  line-height: 1.5;
}

.hp-hero__event-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.hp-hero__event-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-white);
}

.hp-hero__event-meta-item svg {
  flex-shrink: 0;
  color: var(--color-white);
}

.hp-hero__event-cta {
  width: 100%;
  text-align: center;
  justify-content: center;
  padding: 10px 16px;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  margin-top: auto;
}

/* Scroll indicator */
.hp-hero__scroll-indicator {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.6);
  transition: opacity 300ms ease;
  animation: scrollBounce 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* ============================================================
   MAIN CONTENT WRAPPER
   Slides up over the sticky hero via z-index.
   ============================================================ */

.hp-main {
  position: relative;
  z-index: 1;
  background-color: var(--color-bg-page);
}

/* ============================================================
   SECTION ENTRANCE ANIMATIONS
   Global rules  elements start hidden, JS adds .is-visible.
   Delay set via --anim-delay CSS custom property on element.
   ============================================================ */

.animate-in {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 600ms ease-out,
    transform 600ms ease-out;
  transition-delay: var(--anim-delay, 0ms);
}

.animate-in--from-left {
  transform: translateX(-48px) translateY(0);
}

.animate-in--from-right {
  transform: translateX(48px) translateY(0);
}

.animate-in.is-visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .animate-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   SECTION: BIDCORP AT A GLANCE
   Background: off-white + grain texture
   Two columns: headline left | body + link right
   ============================================================ */

.hp-glance {
  background-color: var(--color-white);
}

.hp-glance__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

.hp-glance__headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: var(--weight-light);
  line-height: 1.15;
  color: var(--color-brand-primary);
  margin-top: var(--space-4);
}

.hp-glance__body-lead {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: var(--leading-base);
  color: var(--color-brand-primary);
  margin-top: var(--space-0);
  margin-bottom: var(--space-4);
}

.hp-glance__body {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--color-text-body);
  margin-bottom: var(--space-8);
}

@media (max-width: 768px) {
  .hp-glance__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

.hp-glance__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border-light);
}

.hp-glance__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hp-glance__stat-number {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-normal);
  line-height: var(--leading-3xl);
  color: var(--color-brand-primary);
}

.hp-glance__stat-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 768px) {
  .hp-glance__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
}

@media (max-width: 480px) {
  .hp-glance__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .hp-glance__stat-number {
    font-size: var(--text-2xl);
  }
}

/* ============================================================
   SECTION: DIVISIONAL TABS
   Full-width dark navy tab bar + white content panels.
   Three-column panel: map | info | metrics
   ============================================================ */

.hp-divisions {
  background-color: var(--color-bg-white);
}

/* Full-width white tab bar */
.hp-divisions__tab-bar {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border-navy);
  border-top: 1px solid var(--color-border-navy);
  width: 100%;
}

.hp-divisions__tab-bar .container {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.hp-divisions__tab-bar .container::-webkit-scrollbar {
  display: none;
}

/* Progress bar  dark navy band, green fill advances with active tab */
.hp-divisions__progress {
  height: 12px;
  background: var(--color-off-white);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.hp-divisions__progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress-width, 25%);
  background: var(--color-brand-primary);
  transition: width 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hp-div-tab {
    /* flex-basis:auto (not 0) so each tab starts at its own content
       width instead of an equal share  flex-grow still stretches
       tabs to fill slack space on wide screens, but flex items default
       to min-width:auto (= their min-content width) so a tab can never
       shrink below what its own label needs, at any viewport. This
       replaced flex:1 + min-width:140px, which forced every tab to an
       identical width and let long labels (e.g. "Angliss China and
       Hong Kong", ~167px) overflow their box at ANY width, not just
       below 1280px  it was just harder to notice above 1280px.
       min-width is explicit (not just omitted) so a stale cached/
       minified build of this file elsewhere in the deploy can't
       leak its old min-width:140px back in through the cascade. */
    flex: 1 1 auto;
    min-width: auto;
    padding: 20px 16px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
    background: none;
    border: none;
    border-right: 1px solid var(--color-border-navy);
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: color 200ms ease, background 200ms ease;
    position: relative;
}

.hp-div-tab:last-child {
  border-right: none;
}

.hp-div-tab:hover {
  color: var(--color-brand-primary);
  background: var(--color-off-white);
}

.hp-div-tab--active,
.hp-div-tab[aria-selected="true"] {
  color: var(--color-brand-primary);
  background: var(--color-white);
}

/* Individual panels */
.hp-div-panel {
  position: relative;
  padding: var(--space-16) 0;
  background: var(--color-off-white);
  animation: tabPanelIn 350ms ease forwards;
  overflow: hidden;
}

.hp-div-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 800px 800px;
  background-repeat: repeat;
}

/* Content sits above grain */
.hp-div-panel > * {
  position: relative;
  z-index: 1;
}

@keyframes tabPanelIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Three-column layout inside panel */

.hp-div-panel__region {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

.hp-div-panel__desc {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--color-text-body);
  margin-bottom: var(--space-6);
  max-width: 480px;
}

/* Metrics column */
.hp-div-panel__metrics {
  display: flex;
  flex-direction: column;
  min-width: 320px;
}

.hp-div-panel__metric {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.hp-div-panel__metric:first-child {
  padding-top: 0;
}

.hp-div-panel__metric:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.hp-div-panel__metric-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.hp-div-panel__metric-number {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  font-weight: var(--weight-normal);
  color: var(--color-brand-primary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1024px) {

  .hp-div-panel__metrics {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    border-top: 1px solid var(--color-border-light);
    padding-top: var(--space-6);
  }

  .hp-div-panel__metric {
    flex: 1;
    min-width: 120px;
    border-bottom: none;
    border-right: 1px solid var(--color-border-light);
    padding: 0 var(--space-6) 0 0;
  }

  .hp-div-panel__metric:last-child {
    border-right: none;
  }
}

@media (max-width: 640px) {

  .hp-div-panel {
    padding: var(--space-10) 0;
  }
}

/* ============================================================
   GLOBE  DIVISIONAL TABS
   Three.js interactive globe replaces static SVG maps.
   Single persistent canvas; tab changes highlight division
   countries and rotate the camera to the relevant region.

   Mobile < 480px: globe hidden, panel info full-width.
   No WebGL: .globe-grid--no-webgl collapses the globe column.
   ============================================================ */

/* Override panels wrapper  globe layout sets its own bg/padding */
.hp-divisions__panels {
  position: relative;
  background: var(--color-off-white);
  padding: var(--space-20) 0;
  overflow: hidden;
}

/* Grain texture on the shared wrapper (was on each .hp-div-panel) */
.hp-divisions__panels::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 800px 800px;
  background-repeat: repeat;
}

.hp-divisions__panels .container {
  position: relative;
  z-index: 1;
}

/* Two-column layout: globe | panel info */
.hp-divisions__globe-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

/* Globe canvas wrapper  square aspect ratio, clipped to circle */
.hp-divisions__globe-col {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 80px rgba(24, 74, 135, 0.25);
}

#globe-3d {
  display: block;
  width: 100%;
  height: 100%;
}

/* Panel info column */
.hp-divisions__panel-info-col {
  position: relative;
}

/* Override base .hp-div-panel styles inside info column */
.hp-divisions__panel-info-col .hp-div-panel {
  background: none;
  padding: 0;
  overflow: visible;
}

.hp-divisions__panel-info-col .hp-div-panel::before {
  display: none;     /* grain lives on .hp-divisions__panels now */
}

/* Metrics: horizontal row across the info column */
.hp-divisions__panel-info-col .hp-div-panel__metrics {
  flex-direction: row;
  min-width: 0;
  margin-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
}

.hp-divisions__panel-info-col .hp-div-panel__metric {
  flex: 1;
  border-bottom: none;
  border-right: 1px solid var(--color-border-light);
  padding: 0 var(--space-6) 0 0;
}

.hp-divisions__panel-info-col .hp-div-panel__metric:first-child {
  padding-top: 0;
}

.hp-divisions__panel-info-col .hp-div-panel__metric:last-child {
  border-right: none;
  padding-right: 0;
}

/* No WebGL fallback  collapse globe column */
.hp-divisions__globe-grid.globe-grid--no-webgl {
  grid-template-columns: 1fr;
}

.hp-divisions__globe-grid.globe-grid--no-webgl .hp-divisions__globe-col {
  display: none;
}

.hp-divisions__globe-grid.globe-grid--no-webgl .hp-divisions__panel-info-col {
  max-width: 640px;
  margin: 0 auto;
}

/* Responsive  tighten gap at mid-breakpoint */
@media (max-width: 1100px) {
  .hp-divisions__globe-grid {
    gap: var(--space-10);
  }
}

/* Stack vertically on tablet */
@media (max-width: 860px) {
  .hp-divisions__globe-grid {
    grid-template-columns: 1fr;
  }

  .hp-divisions__globe-col {
    max-width: 360px;
    margin: 0 auto var(--space-8);
  }

  .hp-divisions__panel-info-col .hp-div-panel__desc {
    max-width: none;
  }
}

/* Hide globe on small mobile  info only */
@media (max-width: 480px) {
  .hp-divisions__globe-col {
    display: none;
  }

  .hp-divisions__panels {
    padding: var(--space-12) 0;
  }
}

/* ============================================================
   SECTION: SUSTAINABILITY SNAPSHOT
   Background: off-white + grain texture
   Two columns: image left | text + metrics right
   ============================================================ */

.hp-sustainability {
  background-color: var(--color-white);
}

.hp-sustainability__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

/* Left: image */
.hp-sustainability__image {
  position: relative;
}

.hp-sustainability__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}

/* Right: text */
.hp-sustainability__headline {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  line-height: 1.2;
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}

.hp-sustainability__subheading {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-text-body);
  margin-bottom: var(--space-4);
}

.hp-sustainability__body {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--color-text-body);
  margin-bottom: var(--space-8);
}

/* Three metric callouts */
.hp-sustainability__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.hp-sustainability__metric-pct {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-normal);
  color: var(--color-accent-green);
  line-height: 1;
  margin-bottom: var(--space-1);
}

/* Eyebrow-style label for People / Product / Planet */
.hp-sustainability__metric-label {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  text-transform: none;
  letter-spacing: 0;
}

.hp-sustainability__metric-desc {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1.5;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.hp-sustainability__metric-context {
  font-size: var(--text-sm);
  line-height: var(--leading-lg);
  color: var(--color-text-body);
  margin-top: var(--space-2);
}

@media (max-width: 1024px) {
  .hp-sustainability__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

}

@media (max-width: 480px) {
  .hp-sustainability__metrics {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* ============================================================
   SECTION: KEY PUBLICATIONS
   White background. Two cards side by side.
   ============================================================ */

/* Off-white + grain background */
.hp-publications {
  background-color: var(--color-off-white);
  position: relative;
  overflow: hidden;
}

.hp-publications::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 800px 800px;
}

.hp-publications .container {
  position: relative;
  z-index: 1;
  width: 80%
}

.hp-publications__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-10);
}

.hp-publications__heading {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
}

/* Dark filled header button */
.hp-publications__all-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 22px;
  background: var(--color-brand-primary);
  color: var(--color-white);
  border-radius: var(--radius-sm);

  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  text-decoration: none;
  flex-shrink: 0;
  transition: background 150ms ease;
}

.hp-publications__all-btn:hover {
  background: var(--color-brand-secondary);
}

.hp-publications__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* Featured results banner */
.hp-pub-featured {
  margin-bottom: var(--space-8);
}

.hp-pub-featured__inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-6) var(--space-8);
  background: var(--color-brand-primary);
  border-radius: var(--radius-lg);
}

.hp-pub-featured__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex-shrink: 0;
}

.hp-pub-featured__tag {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-green);
}

.hp-pub-featured__date {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.5);
}

.hp-pub-featured__content {
  flex: 1;
}

.hp-pub-featured__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  margin-bottom: var(--space-1);
}

.hp-pub-featured__desc {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
}

.hp-pub-featured__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.hp-pub-featured__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  text-decoration: none;
  transition: opacity var(--transition-fast);
  background: var(--color-accent-green);
  color: var(--color-white);
}

.hp-pub-featured__link--secondary {
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.hp-pub-featured__link:hover {
  opacity: 0.85;
}

@media (max-width: 1024px) {
  .hp-pub-featured__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }

  .hp-pub-featured__actions {
    flex-wrap: wrap;
  }
}

/* Publication card */
.hp-pub-card {
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-white);
  overflow: hidden;
  transition: box-shadow 250ms ease;
  display: flex;
  flex-direction: column;
  padding: var(--space-10) var(--space-6);
}

.hp-pub-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.hp-pub-card__header {
  padding: var(--space-8) var(--space-8) var(--space-6);
}

/* Card title as circle-arrow CTA */
.hp-pub-card__title-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  text-decoration: none;
  margin-bottom: var(--space-2);
}

.hp-pub-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  transition: color 150ms ease;
}

.hp-pub-card__title-link:hover .hp-pub-card__title {
  color: var(--color-brand-secondary);
}

.hp-pub-card__title-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  color: var(--color-white);
  flex-shrink: 0;
  transition: transform 250ms ease, background 200ms ease;
}

.hp-pub-card__title-link:hover .hp-pub-card__title-circle {
  transform: translateX(4px);
  background: var(--color-brand-secondary);

}

.hp-pub-card__subtitle {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.hp-pub-card__desc {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--color-text-body);
  margin-top: var(--space-10);
}

.hp-pub-card__cover {
  padding: 0 var(--space-8) var(--space-6);
}

.hp-pub-card__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

/* Document list rows */
.hp-pub-card__links {
  list-style: none;
  padding: var(--space-4) var(--space-8) var(--space-8);
  margin: 0;
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.hp-pub-card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text-body);
  text-decoration: none;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
  transition: color 150ms ease;
}

.hp-pub-card__link:last-child {
  border-bottom: 1px solid var(--color-border-light);
}

.hp-pub-card__link:hover {
  color: var(--color-brand-primary);
}

.hp-pub-card__link-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border-color: var(--color-border-light);
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-brand-primary);
  flex-shrink: 0;
  transition: transform 200ms ease, background 150ms ease;
}

.hp-pub-card__link:hover .hp-pub-card__link-arrow {
  transform: translateX(3px);
  background: var(--color-border-light);
}

@media (max-width: 768px) {
  /* Desktop deliberately narrows this section's container to 80% for a
     framed look. On mobile that compounds with the container's own
     side padding and leaves the cards needlessly narrow  use the
     full container width here instead. */
  .hp-publications .container {
    width: 100%;
  }

  .hp-publications__grid {
    grid-template-columns: 1fr;
  }

  .hp-publications__header {
    flex-direction: column;
    gap: var(--space-4);
  }
}

/* ============================================================
   SECTION: LATEST NEWS
   Background: white
   3-column card grid, consistent with publications section
   ============================================================ */

.hp-news__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-10);
}

.hp-news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* Card */
.hp-news-card {
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
  gap: var(--space-4);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

/* Image */
.hp-news-card__img-link {
  display: block;
  border-radius: var(--radius-md);
  text-decoration: none;
}

.hp-news-card__img-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg-section-alt);
}

.hp-news-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease;
}

.hp-news-card:hover .hp-news-card__img-wrap img {
  transform: scale(1.03);
}

.hp-news-card__img-wrap .media-placeholder {
  width: 100%;
  height: 100%;
  min-height: 180px;
}

/* Body */
.hp-news-card__body {
  padding: var(--space-5) 0 0 0;
  flex: 1;
  display: flex;

  flex-direction: column;
  gap: var(--space-3);
}

.hp-news-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hp-news-card__category {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent-green);
}

.hp-news-card__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.hp-news-card__title {
  font-size: var(--text-md);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  line-height: 1.35;
  margin: 0;
}

.hp-news-card__title-link {
  color: var(--color-brand-primary);
  text-decoration: none;
  transition: color 150ms ease;
}

.hp-news-card__title-link:hover {
  color: var(--color-accent-green);
}

.hp-news-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: 1.6;
  margin: 0;
}

/* Read more link */

@media (max-width: 1024px) {
  .hp-news__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .hp-news__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .hp-news__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SECTION: INVESTOR CENTRE
   Background: --color-brand-secondary (#184A87)
   Three dark tile columns
   ============================================================ */

/* Off-white + grain background */
.hp-investor {
  background-color: var(--color-off-white);
  position: relative;
  overflow: hidden;
}

.hp-investor::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 800px 800px;
}

.hp-investor .container {
  position: relative;
  width: 80%;
  z-index: 1;
}

.hp-investor__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-10);
}

.hp-investor__heading {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
}

.hp-investor__cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 22px;
  background: var(--color-brand-primary);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: background 150ms ease;
}

/* Three-column grid with equal heights */
.hp-investor__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
  align-items: stretch;
}

/* Base tile  white card */
.hp-investor__tile {
  border-radius: var(--radius-md);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
}

/* Column 1: Solid navy calendar card */
.hp-investor__tile--calendar {
  background: var(--color-brand-primary);
  border-color: transparent;
}

/* Column 2: Two stacked sub-cards (no outer bg/border) */
.hp-investor__tile--stacked {
  padding: 0;
  border: none;
  background: transparent;
  gap: var(--space-1);
}

/* Each sub-card  white, full card with heading, content, arrow link */
.hp-investor__sub-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hp-investor__sub-card-heading {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
}

/* Arrow link at the bottom of each sub-card */
.hp-investor__sub-card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-brand-secondary);
  text-decoration: none;
  transition: color 150ms ease;
}

.hp-investor__sub-card-link:hover {
  color: var(--color-brand-primary);
}

.hp-investor__sub-card-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border-color: var(--color-border-light);
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-brand-primary);
  flex-shrink: 0;
  transition: transform 200ms ease, background 150ms ease;
}

.hp-investor__sub-card-link:hover .hp-investor__sub-card-arrow {
  transform: translateX(3px);
  background: var(--color-border-light);
}

.hp-investor__sub-card-link-light {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  text-decoration: none;
  transition: color 150ms ease;
}

.hp-investor__sub-card-link-light:hover {
  color: var(--color-text-inverse);
}

.hp-investor__sub-card-arrow-light {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border-color: var(--color-border-light);
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-brand-primary);
  flex-shrink: 0;
  transition: transform 200ms ease, background 150ms ease;
}

.hp-investor__sub-card-link-light:hover .hp-investor__sub-card-arrow-light {
  transform: translateX(3px);
  background: var(--color-accent-green);
}

/* Column 3: Stacked white resource boxes */
.hp-investor__tile--resources {
  padding: 0;
  border: none;
  background: transparent;
  gap: var(--space-1);
}

.hp-investor__resource-box {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.hp-investor__resource-box:hover {
  border-color: var(--color-brand-secondary);
  box-shadow: var(--shadow-sm);
}

.hp-investor__resource-box-label {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
}

.hp-investor__resource-box-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border-color: var(--color-border-light);
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-brand-primary);
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.hp-investor__resource-box:hover .hp-investor__resource-box-arrow {
  transform: translateX(3px);
  background: var(--color-border-light);
}

.hp-investor__tile-heading {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Calendar events  on navy card */
.hp-investor__events {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hp-investor__event {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.hp-investor__event:first-child {
  padding-top: 0;
}

.hp-investor__event:last-child {
  border-bottom: none;
}

/* 3-column date row */
.hp-investor__event-date-row {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: center;
  gap: var(--space-3);
}

/* Large day number */
.hp-investor__event-day {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-accent-green);
  line-height: 1;
  min-width: 3rem;
}

/* Day name + month/year stacked */
.hp-investor__event-month-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.hp-investor__event-dayname {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-accent-green);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hp-investor__event-monthyear {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Green circle + button */
.hp-investor__event-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--color-accent-green);
  color: var(--color-accent-green);
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.hp-investor__event-add:hover {
  background: var(--color-accent-green);
  color: #fff;
}

.hp-investor__event-name {
  font-size: var(--text-base);
  color: var(--color-white);
  line-height: 1.4;
  padding-left: calc(3rem + var(--space-3));
}

@media (max-width: 1024px) {
  .hp-investor__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }

  .hp-investor__tile--stacked,
  .hp-investor__tile--resources {
    grid-column: 1 / -1;
    flex-direction: row;
  }

  .hp-investor__sub-card,
  .hp-investor__resource-box {
    flex: 1;
  }
}

@media (max-width: 768px) {
  /* Desktop deliberately narrows this section's container to 80% for a
     framed look. On mobile that compounds with the container's own
     side padding and leaves the tiles needlessly narrow  use the
     full container width here instead. */
  .hp-investor .container {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .hp-investor__grid {
    grid-template-columns: 1fr;
  }

  .hp-investor__tile--stacked,
  .hp-investor__tile--resources {
    flex-direction: column;
    grid-column: auto;
  }

  .hp-investor__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }
}

/* ============================================================
   SECTION: INVESTOR TABS (homepage)
   Background: white. Four content tabs: 10-Year Performance,
   Investment Case, Our Strategy, Own Brands.
   Light-theme variant  complements the dark hp-divisions tabs.
   ============================================================ */

.hp-itabs {
  background-color: var(--color-off-white);
  border-top: 1px solid var(--color-border-light);
  position: relative;          /* needed for ::before grain */
  padding-top: 0;              /* tab bar sits flush  override .section utility */
}

/* Grain texture  exact copy of .hp-divisions__panels::before */
.hp-itabs::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 800px 800px;
  background-repeat: repeat;
}

/* Ensure all child content sits above the grain */
.hp-itabs > * {
  position: relative;
  z-index: 1;
}

/*  Tab bar  mirrors the divisional tab bar (.hp-divisions__tab-bar)  */
.hp-itabs__tab-bar {
  background-color: var(--color-white);
  border-top: 1px solid var(--color-border-navy);
  border-bottom: 1px solid var(--color-border-navy);
  width: 100%;
}

.hp-itabs__nav {
  display: flex;
  overflow-x: auto;

  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hp-itabs__nav::-webkit-scrollbar { display: none; }

/* Progress band  off-white track, navy fill advances with active tab */
.hp-itabs__progress {
  height: 12px;
  background: var(--color-off-white);
  width: 100%;
  position: relative;
  overflow: hidden;
}
.hp-itabs__progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress-width, 25%);
  background: var(--color-brand-primary);
  transition: width 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hp-itabs__tab {
  /* flex-basis:auto (not 0) so each tab starts at its own content
     width instead of an equal share  flex items default to
     min-width:auto (their min-content width), so a tab can never
     shrink below what its own label needs. Was flex:1 + min-width:140px,
     which forced every tab to an identical width and let "10-year
     performance" (the longest label) overflow its box by 3-6px from
     320-600px  same root cause as the emerging-markets .hp-div-tab fix.
     min-width is explicit (not just omitted) because a stale cached/
     minified build of this file elsewhere in the deploy can still
     carry the old min-width:140px/110px rules  if this file only
     ever adds flex:1 1 auto without also overriding min-width, the
     stale declaration wins the cascade on min-width specifically
     since nothing here ever re-declares it. */
  flex: 1 1 auto;
  min-width: auto;
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-right: 1px solid var(--color-border-navy);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: color 200ms ease, background 200ms ease;
  position: relative;
}

.hp-itabs__tab:last-child {
  border-right: none;
}

.hp-itabs__tab:hover {
  color: var(--color-brand-primary);
  background: var(--color-off-white);
}

.hp-itabs__tab--active,
.hp-itabs__tab[aria-selected="true"] {
  color: var(--color-brand-primary);
  background: var(--color-white);
}

/*  Panels  */
.hp-itabs__panel {
  padding: var(--space-20) 0 var(--space-16);
}

/* ── Scroll-driven tab section (ESG our-approach)  */
.hp-itabs__scroll-track {
  height: 400vh;
  position: relative;
}

.hp-itabs__sticky-wrapper {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hp-itabs__intro {
  flex-shrink: 0;
  padding-top: var(--space-20);
  padding-bottom: var(--space-3);
}

.hp-itabs__sticky-wrapper > .container:not(.hp-itabs__intro) {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* Progress bar: no transition when scroll-driven — instant response */
#esg-impact-progress {
  transition: none;
}

/* Panels stacked absolutely so only the active one is visible.
   Opacity cross-fade instead of display:none so transitions work in both directions. */
#our-approach .hp-itabs__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-10) 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

#our-approach .hp-itabs__panel--active {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 300ms ease 100ms;
}

/* This whole section is scroll-jacked: .hp-itabs__scroll-track is 400vh
   tall, .hp-itabs__sticky-wrapper pins at height:100vh while the user
   scrolls through it, and the JS below cross-fades between the three
   absolutely-positioned panels based on scroll position. It's tuned to
   exactly fill 100vh at desktop widths (measured zero slack even
   there  intro + panel + progress + tab bar sum to exactly the
   viewport height). Mobile has a shorter viewport AND needs more
   height per panel (image stacks above text instead of beside it), so
   the same content measured ~964px tall against a ~664px iPhone 13
   viewport  a ~300px deficit no amount of padding/font trimming
   closes safely, and it would stay fragile to any future content edit.

   Instead of shrinking content to fit an increasingly tight budget,
   disable the scroll-jack/pin/cross-fade entirely on mobile and let
   the section flow normally at its natural height. Panels switch by
   tapping the tab bar instead of by scroll position  the click
   handlers in the <script> below are wired unconditionally, and that
   script's onScroll() already no-ops safely once the track stops
   being taller than the viewport (scrollable <= 0 is guarded), so no
   JS changes are needed. */
@media (max-width: 768px) {
  .hp-itabs__scroll-track {
    height: auto;
  }
  .hp-itabs__sticky-wrapper {
    position: static;
    height: auto;
    overflow: visible;
  }
  .hp-itabs__intro {
    /* padding-top was sized to clear the fixed site header while this
       box was pinned at top:0  no longer needed once sticky is off. */
    padding-top: var(--section-padding-y);
  }
  .hp-itabs__sticky-wrapper > .container:not(.hp-itabs__intro) {
    flex: none;
    overflow: visible;
  }
  #our-approach .hp-itabs__panel {
    position: relative;
    inset: auto;
    display: none;
  }
  #our-approach .hp-itabs__panel--active {
    display: flex;
  }
}

/*  Two-column grids  */
.hp-itabs__grid {
  display: grid;
  gap: var(--space-16);
  align-items: start;
}
.hp-itabs__grid--55-45 { grid-template-columns: 55fr 45fr; }
.hp-itabs__grid--45-55 { grid-template-columns: 45fr 55fr; }
.hp-itabs__grid--60-40 { grid-template-columns: 60fr 40fr; }

/*  Shared text elements  */
.hp-itabs__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-green);
  margin: 0 0 var(--space-3);
}

.hp-itabs__heading {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  line-height: 1.15;
  margin: 0 0 var(--space-5);
}

.hp-itabs__body {
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: var(--leading-base);
  margin: 0 0 var(--space-4);
  max-width: 52ch;
}

.hp-itabs__body-sub {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  margin: var(--space-6) 0 var(--space-3);
}

/* Page links use the shared .btn-circle-arrow (same as the divisional panels);
   only the panel-layout top spacing is added here. */
.hp-itabs__text-col .btn-circle-arrow { margin-top: var(--space-6); }
.hp-itabs__ic-cta { margin-top: var(--space-8); }

/*  Tab 1: Stats  */
.hp-itabs__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border-light);
}

.hp-itabs__stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hp-itabs__stat-number {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-normal);
  color: var(--color-brand-primary);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.hp-itabs__stat-cagr {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  color: var(--color-text-p);
  background: var(--color-off-white);
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 1.4;
}

.hp-itabs__stat-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}

.hp-itabs__stat-desc {
  font-size: var(--text-xs);
  color: var(--color-text-body);
  line-height: 1.4;
}

/*  Tab 1: Chart wrap  */
.hp-itabs__chart-wrap {
  min-height: 300px;
  /* ApexCharts fills this */
}

/*  Tab 2: Image panel  */

/*  Tab 2: Accordion  */
/* Accordion  mirrors the strategy-page pillar accordion (.st-pillar*) */

/* Chevron caret  stays navy, rotates when open (mirrors .st-pillar__caret) */

/* Accordion body  two-column grid with stat highlights and key-point cells */

/* Highlighted stat cell (number + label) */

/* Key-point cell (bold lead + body text) */

/* Full-width cell  spans both columns */

/* Retain the old list class for any legacy use */

/*  Tab 2: Investment Case  two-column layout  */
.hp-itabs__ic-layout {
  display: grid;
  grid-template-columns: 38fr 62fr;
  gap: var(--space-16);
  align-items: start;
  padding: var(--space-6) 0 var(--space-16);
}

/* Left column: sticky image */
.hp-itabs__ic-img-col {
  position: sticky;
  top: calc(var(--header-height, 64px) + var(--space-8));
}

.hp-itabs__ic-figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  line-height: 0;
}

.hp-itabs__ic-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
}

/* Right column: heading + grid */
.hp-itabs__ic-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hp-itabs__ic-content .hp-itabs__heading {
  margin-bottom: var(--space-6);
}

/*  Capability card grid  */
.hp-itabs__ic-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hp-itabs__ic-row {
  display: flex;
  flex-direction: row;
  gap: 4px;
}

/* Individual card */
.hp-itabs__ic-card {
  position: relative;
  flex: 1 0 0px;
  min-height: 56px;
  padding: var(--space-4) var(--space-6) var(--space-3);
  background: var(--color-white);
  border-radius: 4px;
  overflow: hidden;
  cursor: default;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-3);
  transition:
    background-color 350ms cubic-bezier(0.34, 1.2, 0.64, 1),
    flex 350ms cubic-bezier(0.34, 1.2, 0.64, 1),
    min-height 350ms cubic-bezier(0.34, 1.2, 0.64, 1);
  will-change: background-color, flex;
}

/* Label */
.hp-itabs__ic-label {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  line-height: 1.3;
  padding-right: var(--space-10);
  transition: color 250ms ease;
}

/* Description  hidden by default, revealed on hover */
.hp-itabs__ic-desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin: 0;
  max-width: 48ch;
  opacity: 0;
  filter: blur(4px);
  transform: translateY(4px);
  transition:
    opacity 300ms ease 80ms,
    filter 300ms ease 80ms,
    transform 300ms ease 80ms;
  pointer-events: none;
}

/* Arrow circle  top right, absolute */
.hp-itabs__ic-arrow {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #212121;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 250ms ease;
}

.hp-itabs__ic-arrow-icon {
  color: var(--color-white);
  transform: rotate(180deg);   /* points SW = collapsed state */
  transition: transform 300ms cubic-bezier(0.34, 1.2, 0.64, 1), color 250ms ease;
}

/*  Active card  */
.hp-itabs__ic-card--active {
  background: #212121;
  flex: 2.8 0 0px;
  min-height: 160px;
}

.hp-itabs__ic-card--active .hp-itabs__ic-label {
  color: var(--color-white);
}

.hp-itabs__ic-card--active .hp-itabs__ic-desc {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.hp-itabs__ic-card--active .hp-itabs__ic-arrow {
  background: var(--color-white);
}

.hp-itabs__ic-card--active .hp-itabs__ic-arrow-icon {
  color: #212121;
  transform: rotate(0deg);   /* points NE = active */
}

/*  Responsive  */
@media (max-width: 1024px) {
  .hp-itabs__ic-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
}

@media (max-width: 768px) {
  .hp-itabs__ic-layout {
    grid-template-columns: 1fr;
  }
  .hp-itabs__ic-img-col {
    position: static;
  }
  .hp-itabs__ic-img {
    aspect-ratio: 16 / 9;
  }
  .hp-itabs__ic-card--active {
    flex: 2 0 0px;
  }
}

/*  Tab 3: Strategy continuum  column sizing + title  */
.hp-itabs__chart-eyebrow { margin-bottom: var(--space-2); }

.hp-itabs__chart-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-brand-primary);
  margin: 0 0 var(--space-4);
}
/* Scoped to the continuum wrap only  bare .hp-itabs__chart-col
   is also used in Tab 1 (ApexCharts) and must not be flex-collapsed. */
.hp-itabs__chart-col .st-continuum__chart-wrap {
  width: 100%;
  --ct-band: rgba(173, 210, 230, 0.25);   /* mirrors .st-continuum  variable not inherited here */
}

.hp-itabs__chart-col #ct-svg {
  width: 100%;
  height: auto;
}

/*  Tab 3: Bullet list  */
.hp-itabs__bullet-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hp-itabs__bullet-list li {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: 1.6;
  padding-left: var(--space-5);
  position: relative;
}

.hp-itabs__bullet-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-green);
}

/*  Tab 4: Logo mosaic  */
.hp-itabs__logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--space-3);
}

.hp-itabs__logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.hp-itabs__logo-tile:hover {
  border-color: var(--color-accent-green);
  box-shadow: var(--shadow-sm);
}

.hp-itabs__logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: 56px;
}

.hp-itabs__logo-name {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  text-align: center;
  line-height: 1.3;
}

/*  Responsive  */
@media (max-width: 1024px) {
  .hp-itabs__grid--55-45,
  .hp-itabs__grid--45-55,
  .hp-itabs__grid--60-40 {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
}

@media (max-width: 768px) {
  .hp-itabs__grid--55-45,
  .hp-itabs__grid--45-55,
  .hp-itabs__grid--60-40 {
    grid-template-columns: 1fr;
  }
  .hp-itabs__stats {
    grid-template-columns: 1fr 1fr;
  }
  .hp-itabs__tab {
    padding: var(--space-4) var(--space-5);
  }

  /* Tab bar scrolls horizontally on narrow screens - fade the right
     edge so a mid-word cut off reads as "swipe for more" rather than
     looking broken. */
  .hp-itabs__tab-bar {
    position: relative;
  }

  .hp-itabs__tab-bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, transparent, var(--color-white));
    pointer-events: none;
  }
}

@media (max-width: 480px) {
  .hp-itabs__stats {
    grid-template-columns: 1fr;
  }

  .hp-itabs__tab {
    padding: var(--space-4) var(--space-3);
    font-size: var(--text-xs);
  }
}

/* ══════════════════════════════════════════════════════════
   UNCLAIMED DIVIDENDS BANNER
   Sits between .hp-investor and .hp-divisions
   ══════════════════════════════════════════════════════════ */

.hp-unclaimed__card {
  background: var(--color-brand-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  cursor: default;
  transition: box-shadow 250ms ease;
}

.hp-unclaimed__card:hover {
  box-shadow: 0 8px 32px rgba(31, 19, 70, 0.18);
}

/*  Collapsed row  */
.hp-unclaimed__main {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.hp-unclaimed__identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex-shrink: 0;
  min-width: 200px;
}

.hp-unclaimed__tag {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-green);
}

.hp-unclaimed__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  line-height: 1.2;
}

.hp-unclaimed__teaser {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  min-width: 200px;
}

.hp-unclaimed__contacts {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.hp-unclaimed__contact-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  white-space: nowrap;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.hp-unclaimed__contact-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.45);
}

.hp-unclaimed__contact-icon {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.45);
  transition: color 200ms ease;
}

.hp-unclaimed__contact-btn:hover .hp-unclaimed__contact-icon {
  color: rgba(255, 255, 255, 0.75);
}

/*  Expanded detail panel  */
.hp-unclaimed__expand {
  max-height: 0;
  overflow: hidden;
  transition: max-height 450ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hp-unclaimed__card:hover .hp-unclaimed__expand,
.hp-unclaimed__card:focus-within .hp-unclaimed__expand,
.hp-unclaimed__card.is-expanded .hp-unclaimed__expand {
  max-height: 320px;
}

.hp-unclaimed__expand-inner {
  padding-top: var(--space-5);
}

.hp-unclaimed__expand-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin-bottom: var(--space-5);
}

.hp-unclaimed__expand-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6) var(--space-12);
  align-items: start;
}

.hp-unclaimed__expand-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
  margin: 0;
}

.hp-unclaimed__expand-text strong {
  color: rgba(255, 255, 255, 0.9);
  font-weight: var(--weight-semibold);
}

.hp-unclaimed__expand-contacts {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hp-unclaimed__expand-contacts-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 var(--space-1);
}

.hp-unclaimed__expand-contact-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hp-unclaimed__expand-icon {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.35);
}

.hp-unclaimed__expand-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 200ms ease;
}

.hp-unclaimed__expand-link:hover {
  color: var(--color-accent-green);
}

.hp-unclaimed__expand-text-inline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
}

/*  Responsive  */
@media (max-width: 1024px) {
  .hp-unclaimed__main {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .hp-unclaimed__expand-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .hp-unclaimed__card {
    padding: var(--space-5);
  }
  .hp-unclaimed__contacts {
    gap: var(--space-2);
  }
}

@media (max-width: 480px) {
  /* Even at full container width, the email address (one unbroken
     string, no spaces) doesn't fit .hp-unclaimed__contact-btn's
     white-space:nowrap on very small screens. Let it wrap (break
     mid-string, since there's nowhere else to break) instead of
     overflowing  card's own padding is untouched. */
  .hp-unclaimed__contact-btn {
    white-space: normal;
    overflow-wrap: anywhere;
    align-items: flex-start;
  }
}

/* ============================================================
   FOOTER  Homepage footer
   Dark navy. Large white signup card floated at top.
   Four-column nav below.
   ============================================================ */

.hp-footer {
  background-color: var(--color-brand-primary);
  position: relative;
  z-index: 1;
}

/* Signup card */
.hp-footer__signup-wrap {
  padding-top: var(--space-16);
  padding-bottom: var(--space-12);
}

.hp-footer__signup-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
    box-shadow: var(--shadow-lg);
}

.hp-footer__signup-brand {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: var(--space-4);
  flex-shrink: 0;
}

.hp-footer__signup-brand img {
  height: 68px;
  width: auto;
  display: block;
}

.hp-footer__signup-tagline {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  color: var(--color-text-body);
  max-width: 620px;
  line-height: 1.5;
}

.hp-footer__signup-heading {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-normal);
  color: var(--color-brand-primary);
  margin-bottom: var(--space-5);
  line-height: 1.2;
}

.hp-footer__signup-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--color-text-body);
  margin-bottom: var(--space-4);
}

.hp-footer__checkboxes {
  border: none;
  padding: 0;
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.hp-footer__check-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-body);
  cursor: pointer;
}

/* Custom circle checkboxes */
.hp-footer__check-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-grey-light);
  background: var(--color-white);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: border-color 150ms ease;
}

.hp-footer__check-label input[type="checkbox"]:checked {
  border-color: var(--color-accent-green);
  background: var(--color-white);
}

.hp-footer__check-label input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-accent-green);
}

.hp-footer__check-label input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-accent-green);
  outline-offset: 2px;
}

.hp-footer__terms {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  line-height: 1.5;
}

.hp-footer__terms a {
  color: var(--color-brand-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hp-footer__form-row {
  display: flex;
  gap: 0;
  max-width: 620px;
}

.hp-footer__email-input {
  flex: 1;
  height: 46px;
  border: none;
  border-right: none;
  border-radius: var(--radius-md);
  padding: 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background: var(--color-off-white);
  outline: none;
  transition: border-color 150ms ease;
}

.hp-footer__email-input:focus {
  border-color: var(--color-brand-secondary);
}

.hp-footer__email-input::placeholder {
  color: var(--color-text-muted);
}

.hp-footer__submit-btn {
  width: 36px;
  height: 36px;
  background: var(--color-brand-primary);
  border: none;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 5px;
  margin-left: -40px;
  transition: background 150ms ease;
}

.hp-footer__submit-btn:hover {
  background: var(--btn-primary-bg-hover);
}

/* Footer body */
.hp-footer__body {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding-top: var(--space-12);
  padding-bottom: var(--space-10);
}

.hp-footer__nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6);

  margin-bottom: var(--space-10);
}

.hp-footer__col-heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-white);
  margin-bottom: var(--space-5);
}

.hp-footer__col-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hp-footer__col-links a {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 150ms ease;
}

.hp-footer__col-links a:hover {
  color: var(--color-accent-green);
}

/* Bottom bar */
.hp-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.hp-footer__copy {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.40);
}

.hp-footer__legal {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.hp-footer__legal a {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.40);
  text-decoration: none;
  transition: color 150ms ease;
}

.hp-footer__legal a:hover {
  color: rgba(255, 255, 255, 0.75);
}

/* Tablet — signup card stacks, nav collapses to 3 columns */
@media (max-width: 1024px) {
  .hp-footer__signup-card {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .hp-footer__nav {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile — 2-column nav, bottom bar stacks */
@media (max-width: 640px) {
  .hp-footer__nav {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .hp-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .hp-footer__checkboxes {
    flex-direction: column;
    gap: var(--space-3);
  }

  .hp-footer__signup-card {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
  }
}

/* Small mobile — 1-column nav, FAB icon-only */
@media (max-width: 480px) {
  .hp-footer__nav {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   NAV SCROLL STATE
   Nav is fixed on all pages. Inner pages start white (default).
   Homepage starts transparent so the hero video shows through.
   On scroll, all pages transition to dark navy.
   ============================================================ */

/* Homepage: nav starts white (same as inner pages)  white à dark navy on scroll */

/* Scrolled state  all pages */
.site-header.site-header--scrolled {
  background-color: rgba(31, 19, 70, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 16px rgba(17, 5, 65, 0.30);
}

.site-header.site-header--scrolled .site-logo__img {
  filter: brightness(0) invert(1);
}

.site-header.site-header--scrolled .btn-hamburger span {
  background: var(--color-white);
}

/* Replace text wordmark with SVG logo */
.site-logo__img {
  height: 34px;
  width: auto;
  display: block;
  transition: filter 300ms ease;
}

/* Push hero content below the fixed ticker + header */
.page-home .hp-hero__content-inner {
  padding-top: calc(var(--ticker-height) + var(--header-height));
}

/* ============================================================
   RESPONSIVE  NAV
   Show hamburger, hide desktop links at ≤768px
   ============================================================ */

@media (max-width: 768px) {

}

/* ============================================================
   HERO  Mobile adjustments
   ============================================================ */

@media (max-width: 1024px) {
  /* Stacked text + event card can be taller than a fixed vh-based hero.
     Let .hp-hero grow to fit instead of clipping content behind the
     fixed ticker/header (was: fixed height + overflow:hidden + content
     absolutely positioned and bottom-anchored, which pushed anything
     that didn't fit up and out of view). */
  .hp-hero {
    height: auto;
    min-height: calc(70vh + var(--header-height));
  }

  .hp-hero__content {
    position: relative;
    z-index: 1;
    display: block;
  }

  .hp-hero__content-inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .hp-hero__text {
    flex: 1;
  }

  .hp-hero__event-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 480px;
  }
}

@media (max-width: 640px) {
  .hp-hero__content-inner {
    padding-bottom: var(--space-12);
    gap: var(--space-6);
  }

  .hp-hero__headline {
    font-size: clamp(2.25rem, 9vw, 3rem);
    word-spacing: normal;
  }

  .hp-hero__event-card {
    max-width: 100%;
    grid-template-columns: 110px 1fr;
  }

  .hp-hero__event-body {
    padding: var(--space-4);
  }
}

/* ============================================================
   INNER PAGE  ABOUT / WHO WE ARE
   Shared layout and component styles for about/about.html.
   Classes prefixed ab- (about).
   ============================================================ */

/*  Who we are two-column section  */
@media (max-width: 900px) {
}

.ab-who__image {
  grid-column: 1 / -1;
}

.ab-who__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

/*  Stats section  */
@media (max-width: 1024px) {
  .ab-stats__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .ab-stats__grid { grid-template-columns: repeat(2, 1fr); }
}

/*  Value creation section  */

.ab-value__heading-wrap {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-12);
}

.ab-value__intro {
  font-size: var(--text-base);
  color: var(--color-text-primary);
  line-height: var(--leading-base);
  margin: 0;
}

.ab-value-card__watermark {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  width: 100px;
  height: 100px;
  opacity: 0.1;
  color: var(--color-brand-primary);
  pointer-events: none;
  transition: opacity 300ms ease;
}

.ab-value-card:hover .ab-value-card__watermark {
  opacity: 0.10;
}

.ab-value-card__title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  margin-bottom: 0;
  line-height: 1.2;
  flex-shrink: 0;
  transition: color 300ms ease;
}

.ab-value-card:hover .ab-value-card__title {
  color: var(--color-accent-green);
}

.ab-value-card:hover .ab-value-card__arrow {
  background: var(--color-accent-green);
  transform: rotate(45deg);
}

@media (max-width: 1024px) {
}
@media (max-width: 560px) {
}

/*  Competitive advantage  sticky scroll accordion  */

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

/*  CEO two-column section  */

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

/*  Leadership teaser  */
.ab-leadership .container {
  width: 80%;
}
.ab-leadership__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
.ab-leadership__intro {
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: var(--leading-base);
  margin-top: var(--space-4);
}
.ab-leadership__right {
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ab-leadership__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}
@media (max-width: 900px) {
  .ab-leadership__inner { grid-template-columns: 1fr; }
  .ab-leadership .container { width: 100%; }
}

/*  Explore further  frosted glass cards  */
.ab-explore {
  padding-block: var(--section-padding-y);
  background: var(--color-bg-section-alt);
}

.ab-explore__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
}

/*
 * CANONICAL PATTERN: Full-bleed image card with frosted glass overlay.
 * Use this structure for any card that has a background image with
 * text sitting on top. See also: .ab-model-card (same treatment).
 *
 * Structure:
 *   .ab-explore-card           positioned container, aspect-ratio 4/3
 *   .ab-explore-card__img      fills card absolutely, scales on hover
 *   .ab-explore-card__frost    backdrop-filter layer, masked to bottom
 *   .ab-explore-card__content  text, sits above frost at z-index: 2
 */
.ab-explore-card {
  position: relative;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: grid;
  align-content: end;
  justify-content: start;
  padding: var(--space-6);
  background: var(--color-brand-primary);
  cursor: pointer;
  text-decoration: none;
  color: var(--color-white);
  transition: transform 250ms ease-in-out;
}

.ab-explore-card:hover {
  transform: scale(1.03);
  color: var(--color-white);
}

.ab-explore-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  transition: transform 500ms ease-in-out;
}

.ab-explore-card:hover .ab-explore-card__img {
  transform: scale(1.08);
}

.ab-explore-card__frost {
  position: absolute;
  inset: -0.5rem;
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(16px) saturate(1.5) brightness(0.85);
  -webkit-backdrop-filter: blur(16px) saturate(1.5) brightness(0.85);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.12) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.06) 40%,
    rgba(0, 0, 0, 0.5) 55%,
    black 75%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.06) 40%,
    rgba(0, 0, 0, 0.5) 55%,
    black 75%
  );
}

.ab-explore-card__content {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-2);
}

.ab-explore-card__category {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}

.ab-explore-card__heading {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  margin: 0;
  line-height: var(--leading-lg);
}

.ab-explore-card__desc {
  font-size: var(--text-sm);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

@media (max-width: 1024px) {
  .ab-explore__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .ab-explore__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   INNER PAGE  ABOUT / WHO WE ARE
   Enhancements and component styles for about/about.html.
   Classes prefixed ab- (about page).
   Merged from about.css  do not create separate per-page CSS files.
   All inner page styles live in this file.
   ============================================================ */

/* 
   GRAIN TEXTURE  matching .hp-grain from components.css
   Applied to all off-white sections via ::before pseudo-element
    */

/* Grain  ab-strategy */
.ab-strategy::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 800px 800px;
  background-repeat: repeat;
}
.ab-strategy .container,
.ab-strategy__header,
.ab-strategy__pillars {
  position: relative;
  z-index: 1;
}

/* Grain  ab-leadership */
.ab-leadership {
  padding: var(--section-padding-y) 0;
  background: var(--color-bg-section-alt);
  position: relative;
  overflow: hidden;
}
.ab-leadership::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 800px 800px;
  background-repeat: repeat;
}
.ab-leadership .container,
.ab-leadership__inner,
.ab-leadership__left,
.ab-leadership__right {
  position: relative;
  z-index: 1;
}

/* 
   SECTION PADDING  match homepage .section (80px)
    */

.ab-intro,
.ab-stats,
.ab-value,
.ab-leadership,
.ab-explore {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
}

/* 
   SECTION HEADINGS
    */

/* h2s that contain split spans  reset inherited h2 styles */
.ab-stats h2 {
  font-size: unset;
  font-weight: unset;
  line-height: unset;
  color: unset;
}

/* Plain h2s (no spans)  Comfortaa light, matching hp-glance__headline */
.ab-leadership h2 {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-2xl);
  color: var(--color-brand-primary);
}

/* Value creation heading */
.ab-value__heading {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-2xl);
  color: var(--color-text-primary);
  letter-spacing: 0;
  margin: var(--space-3) 0 var(--space-4);
}

/* 
   SPLIT HEADING  .ab-heading-over / .ab-heading-main
    */

.ab-heading-main {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* On dark backgrounds (stats section) invert both span colours */
.ab-stats .ab-heading-main {
  color: var(--color-white);
}

.section--navy .ab-heading-main,
.section--dark .ab-heading-main {
  color: var(--color-white);
}
/* 
   INTRO PULL QUOTE  two-column dark section
    */

.ab-intro {
  background: var(--color-brand-dark-grey);
  padding: var(--space-20) 0;
  position: relative;
  overflow: hidden;
  text-align: left;
}

.ab-intro__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-16);
  align-items: center;
  position: relative;
  z-index: 1;
}

.ab-intro__quote {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  color: var(--color-white);
  font-style: normal !important;
  text-align: left !important;
  max-width: none !important;
  margin: 0 !important;
  font-size: clamp(1.625rem, 3vw, 2.5rem) !important;
  line-height: 1.35 !important;
}

.ab-intro__right {
  padding-top: var(--space-8);
}

.ab-intro__body {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: rgba(255, 255, 255, 0.60);
  margin-bottom: var(--space-8);
}

/* Bottom fade */
.ab-intro::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, rgba(53, 53, 53, 0.2));
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 860px) {
  .ab-intro__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .ab-intro__right {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: var(--space-8);
  }
}

/* 
   STATS SECTION  dark navy inversion
    */

.ab-stats {
  padding: var(--space-16) 0;
  background: var(--color-brand-dark-grey);
}

.ab-stats .eyebrow {
  color: rgba(255, 255, 255, 0.65);
}

.ab-stats__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-10);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border-light);
  border-top-color: rgba(255, 255, 255, 0.1);
}

.ab-stats .hp-glance__stat {
  padding-right: var(--space-6);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  will-change: transform;
  transition: transform 0.35s ease;
}

.ab-stats .hp-glance__stat:last-child {
  border-right: none;
}

.ab-stats .hp-glance__stat:hover {
  transform: translateY(-3px);
}

.ab-stats .hp-glance__stat-number {
  color: var(--color-white);
  transition: color 0.25s ease;
}

.ab-stats .hp-glance__stat:hover .hp-glance__stat-number {
  color: var(--color-accent-green);
}

.ab-stats .hp-glance__stat-label {
  color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 1024px) {
  .ab-stats .hp-glance__stat {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: var(--space-4);
  }
  .ab-stats .hp-glance__stat:last-child {
    border-bottom: none;
  }
}

/* 
   VALUE CREATION CARDS  reveal on hover
   Default: title visible top; lead + arrow pinned at bottom
            via an absolute overlay panel (lead-wrap).
   Hover:   lead-wrap lifts; stats slide up from below.
    */

.ab-value-card {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-6) var(--space-14);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--space-6);
  min-height: 360px;
  will-change: transform;
  counter-increment: none;
}

/* Stats: pushed to bottom via margin-top:auto; hidden until hover */
.ab-value-card__stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: auto;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity    0.4s ease 0.08s,
    transform  0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
  pointer-events: none;
}

/* Lead wrap: absolute overlay anchored to card bottom */

.ab-value-card__lead {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-body);
  line-height: 1.55;
  margin: 0;
}

.ab-value-card__arrow {
  position: static;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  flex-shrink: 0;
  transition: background 300ms ease, transform 300ms ease;
}

.ab-value-card:hover .ab-value-card__stats {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* No step counter badge needed with new layout */
.ab-value-card::after { content: none; }

/* Stats text  larger and more readable */
.ab-value-card__stats li {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: 1.6;
}

.ab-value-card__stats strong {
  color: var(--color-brand-primary);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
}

/* 
   STAT COUNTER  highlight colour during animation
    */

.ab-stats .hp-glance__stat-number[data-counting="true"] {
  color: var(--color-accent-green);
}

/* 
   REDUCED MOTION  disable all enhancements
    */

@media (prefers-reduced-motion: reduce) {
  .ab-value-card,
  .ab-stats .hp-glance__stat {
    will-change: auto;
    transition: none;
  }
}

/* 
   SCROLL PROGRESS BAR
    */

.ab-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(
    90deg,
    var(--color-accent-green) 0%,
    var(--color-brand-secondary) 100%
  );
  z-index: calc(var(--z-nav) + 10);
  pointer-events: none;
  transition: width 80ms linear;
}

/* 
   WORD-BY-WORD TEXT REVEAL
    */

.js-reveal-text .word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.15;
}

.js-reveal-text .word {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--wi, 0) * 55ms);
  will-change: transform;
}

.js-reveal-text.is-visible .word {
  transform: translateY(0);
}

/* 
   MARQUEE TICKER STRIP
    */

.ab-marquee {
  background: var(--color-brand-dark-grey);
  overflow: hidden;
  padding: var(--space-4) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ab-marquee__track {
  display: flex;
  white-space: nowrap;
  animation: ab-marquee-scroll 35s linear infinite;
  will-change: transform;
}

.ab-marquee__content {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ab-marquee__item {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.50);
  padding: 0 var(--space-6);
  white-space: nowrap;
}

.ab-marquee__sep {
  color: var(--color-accent-green);
  font-size: var(--text-base);
  opacity: 0.7;
}

@keyframes ab-marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ab-marquee__track {
    animation: none;
  }
}

/* ============================================================
   INNER PAGE  CORPORATE GOVERNANCE
   Classes prefixed cg-
   ============================================================ */

/*  Hero modifier  */

.page-hero--governance {
  background-color: var(--color-brand-primary);
}

.page-hero--governance::before {
  background: linear-gradient(105deg, rgba(17, 5, 65, 0.96) 0%, rgba(24, 74, 135, 0.55) 100%);
}

/*  Stats Band (Section 2) 
   Full-width white band, 4 large metrics in a row.
   Comfortaa display numbers  the memorable anchor of this page.
    */

.cg-stats-band {
  background: var(--color-bg-white);
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.cg-stats-band__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
}

.cg-stats-band__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  position: relative;
}

/* Vertical dividers between stats */
.cg-stats-band__stat + .cg-stats-band__stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--color-border-light);
}

.cg-stats-band__number {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-4xl);
  color: var(--color-brand-primary);
}

.cg-stats-band__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  max-width: 140px;
}

@media (max-width: 768px) {
  .cg-stats-band__list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Row dividers on 2-col layout */
  .cg-stats-band__stat:nth-child(3) {
    border-top: 1px solid var(--color-border-light);
  }

  .cg-stats-band__stat:nth-child(4) {
    border-top: 1px solid var(--color-border-light);
  }

  .cg-stats-band__stat:nth-child(3)::before,
  .cg-stats-band__stat:nth-child(4)::before {
    display: none;
  }
}

@media (max-width: 480px) {
  .cg-stats-band__number {
    font-size: var(--text-3xl);
  }
}

/*  Governance Framework (Section 3)  */

.cg-framework__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

.cg-framework__left h2 {
  margin-bottom: var(--space-6);
}

.cg-framework__intro {
  color: var(--color-text-body);
  line-height: var(--leading-base);
  margin-bottom: var(--space-8);
}

.cg-framework__right p {

  color: var(--color-text-body);
  line-height: var(--leading-base);
  margin-bottom: var(--space-5);
}

.cg-framework__right p:last-child {
  margin-bottom: 0;
}

.cg-framework__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  transition: color var(--transition-base);
}

.cg-framework__cta:hover {
  color: var(--color-brand-secondary);
}

/* Reuse btn-circle-arrow structure  override the circle arrow colour */
.cg-framework__cta .btn-circle-arrow__circle {
  background: var(--color-brand-primary);
}

.cg-framework__cta:hover .btn-circle-arrow__circle {
  background: var(--color-brand-secondary);
}

@media (max-width: 900px) {
  .cg-framework__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

/*  Board of Directors (Section 4) 
   4-column grid of director cards with role badge
   and committee membership tags.
    */

.cg-board__intro {
  max-width: 650px;
  color: var(--color-text-body);
  line-height: var(--leading-base);
  margin-bottom: var(--space-12);
}

/* Committee tag for roles where director chairs the committee */

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

@media (max-width: 600px) {

}

/*  Board Committees (Section 5) 
   5 cards in a 3+2 centred layout using a 6-column subgrid.
   Green accent top border is the visual signature.
    */

.cg-committees__intro {
  max-width: 560px;
  color: var(--color-text-body);
  line-height: var(--leading-base);
  margin-bottom: var(--space-10);
}

/* 6-column subgrid  first 3 cards span 2 cols each (fills row),
   last 2 cards each start at col 2 and 4 to centre the bottom row. */
.cg-committees__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-5);
  list-style: none;
}

.cg-committee-card {
  grid-column: span 2;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-7) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: box-shadow var(--transition-base), transform var(--transition-base); padding:15px;
}

.cg-committee-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Centre the bottom row of 2 */
.cg-committee-card:nth-child(4) {
  grid-column: 2 / span 2;
}

.cg-committee-card:nth-child(5) {
  grid-column: 4 / span 2;
}

.cg-committee-card__name {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  line-height: 1.35;
  margin: 0;
}

.cg-committee-card__chair {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  background: var(--color-accent-green);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  line-height: 1.4;
  margin: 0;
}

.cg-committee-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: 1.6;
  margin: 0;
  margin-top: auto;
}

.cg-committee-card__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent-green);
  transition: color var(--transition-fast);
}

.cg-committee-card__toggle:hover {
  color: var(--color-brand-secondary);
}

.cg-committee-card__chevron {
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.cg-committee-card.is-open .cg-committee-card__chevron {
  transform: rotate(180deg);
}

.cg-committee-card__members {
  display: none;
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--color-border-light);
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: 1.7;
}

.cg-committee-card.is-open .cg-committee-card__members {
  display: block;
}

@media (max-width: 900px) {
  .cg-committees__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cg-committee-card {
    grid-column: span 1;
  }

  .cg-committee-card:nth-child(4),
  .cg-committee-card:nth-child(5) {
    grid-column: span 1;
  }
}

@media (max-width: 480px) {
  .cg-committees__grid {
    grid-template-columns: 1fr;
  }
}

/*  Chairman's Quote (Section 6) 
   Full dark navy band. Large centred Comfortaa light italic
   quote  the emotional centrepiece of the page.
    */

.cg-quote {
  padding: var(--space-20) 0;
  position: relative;
  overflow: hidden;
}

.cg-quote__inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.cg-quote__mark {
  color: rgba(255, 255, 255, 0.10);
  margin: 0 auto var(--space-8);
  display: block;
}

.cg-quote__text {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: var(--weight-light);
  font-style: italic;
  line-height: 1.5;
  color: var(--color-text-inverse);
  quotes: none;
  margin: 0 0 var(--space-8);
}

.cg-quote__attribution {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
}

.cg-quote__attribution strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: var(--weight-bold);
}

/*  Board Activity (Section 7) 
   Two-column checklist. Green tick icon, clean body copy.
    */

.cg-activity h2 {
  margin-bottom: var(--space-10);
}

.cg-activity__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-16);
  list-style: none;
}

.cg-activity__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: var(--leading-base);
}

.cg-activity__tick {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(121, 191, 67, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-green);
  margin-top: 2px;
}

@media (max-width: 768px) {
  .cg-activity__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/*  Related Documents (Section 8) 
   3 document cards. Document icon, title, meta, desc, CTA.
    */

.cg-docs h2 {
  margin-bottom: var(--space-10);
}

.cg-docs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.cg-doc-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6);
  text-decoration: none;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.cg-doc-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.cg-doc-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(31, 19, 70, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand-primary);
  flex-shrink: 0;
}

.cg-doc-card__icon--internal {
  background: rgba(121, 191, 67, 0.08);
  color: var(--color-accent-green);
}

.cg-doc-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cg-doc-card__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  line-height: 1.35;
}

.cg-doc-card__meta {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.cg-doc-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-top: var(--space-1);
}

.cg-doc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-accent-green);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

@media (max-width: 768px) {
  .cg-docs__grid {
    grid-template-columns: 1fr;
  }
}

/*  Board summary table  */

.cg-board-summary {
  margin-top: var(--space-10);
}

.cg-board-table {
  margin-bottom: var(--space-10);
}

.cg-board-table__group {
  margin-bottom: var(--space-8);
}

.cg-board-table__group-heading {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
}

.cg-board-table__row {
    display: grid;
    grid-template-columns: 225px 220px 1fr;
    gap: var(--space-4);
    align-items: baseline;
    padding: var(--space-3) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.cg-board-table__row:last-child {
  border-bottom: none;
}

.cg-board-table__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
}

@media (max-width: 768px) {
  .cg-board-table__row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
    padding: var(--space-4) 0;
  }
}

/*  Reduced motion  governance page  */
@media (prefers-reduced-motion: reduce) {
  .cg-committee-card,
  .cg-doc-card {
    transition: none;
  }
}

/* ============================================================
   INNER PAGE  LEADERSHIP TEAM
   Classes prefixed lt-
   ============================================================ */

/*  Hero modifier  */

.page-hero--leadership {
  background-color: var(--color-brand-primary);
}

/* ::before suppressed  overlay div inside page-hero__media handles the tint */
.page-hero--leadership::before {
  display: none;
}

/*  Executive Directors (Section 2) 
   Two large featured cards, side-by-side.
   Portrait photo placeholder on left, body content right.
   Navy 4px left accent bar is the visual anchor.
    */

.lt-exec {
  padding: var(--section-padding-y) 0;
}

.lt-exec__intro {
  max-width: 680px;
  color: var(--color-text-body);
  line-height: var(--leading-base);
  margin-bottom: var(--space-12);
}

/* Tag lists  shared between exec and NED cards */
.lt-director-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.lt-tag--chair {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-accent-green);
  color: var(--color-white);
  white-space: nowrap;
}

.lt-tag--member {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: var(--weight-normal);
    letter-spacing: 0.03em;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--color-bg-dark-alt);
    color: var(--color-text-inverse);
    white-space: nowrap;
}

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

@media (max-width: 640px) {

}

/*  Executive Profile Cards (Bernard & David) 
   Stacked full-width cards. Leadership background image fills
   the entire card. Photo sits flush at the bottom-left column;
   all text content on the right.
    */

.lt-exec__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-10);
}

.lt-exec-profile {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 2fr 3fr;
  min-height: 520px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Full-bleed background image */
.lt-exec-profile__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.lt-exec-profile__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* White gradient: transparent on left (photo) Ã near-white on right (text) */
.lt-exec-profile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.72) 35%,
    rgba(255, 255, 255, 0.95) 100%
  );
}

/* Left column  photo sits flush at bottom */
.lt-exec-profile__photo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.lt-exec-profile__photo-img {
  display: block;
  max-height: 520px;
  width: auto;
  object-fit: cover;
  object-position: bottom center;
}

/* Right column  all text content */
.lt-exec-profile__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-10) var(--space-10) var(--space-8);
}

.lt-exec-profile .lt-tag--member {
  background: var(--color-brand-primary);
  color: var(--color-bg-white);
}

.lt-exec-profile__role {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-green);
}

.lt-exec-profile__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  margin: 0;
  line-height: 1.2;
}

.lt-exec-profile__quote {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: var(--weight-normal);
  font-style: italic;
  line-height: 1.55;
  color: var(--color-brand-primary);
  border-left: 3px solid var(--color-accent-green);
  padding-left: var(--space-5);
  margin: var(--space-2) 0;
  position:relative;
}
.lt-exec-profile__quote:before {content:'"';
position:absolute; top:0px; left:10px; font-size:15px; color:#1F1346;
}

.lt-exec-profile__bio {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text-body);
  margin: 0;
  max-width: 560px;
}

/* Career Impact */

@media (max-width: 900px) {
  .lt-exec-profile {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .lt-exec-profile__photo {
    max-height: 340px;
    overflow: hidden;
  }

  .lt-exec-profile__photo-img {
    max-height: 340px;
    width: 100%;
    object-fit: cover;
    object-position: top center;
  }

  .lt-exec-profile__overlay {
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.90) 50%,
      rgba(255, 255, 255, 0.97) 100%
    );
  }

  .lt-exec-profile__content {
    padding: var(--space-8) var(--space-6);
  }

}

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

/*  Non-Executive Directors (Section 3) 
   4-column grid. Avatar initials circle via ::before pseudo
   using data-initials attribute  same technique as ab-leader-card.
    */

.lt-ned__intro {
  max-width: 640px;
  color: var(--color-text-body);
  line-height: var(--leading-base);
  margin-bottom: var(--space-10);
}

.lt-ned__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  list-style: none;
}

/* NED card  avatar + name + role + tags + bio */
.lt-director-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  will-change: transform;
  transition:
    box-shadow var(--transition-slow),
    transform var(--transition-slow);
  /* Containing block for .lt-director-card__expand, and raised above
     sibling cards on hover so the expanded bio overlay isn't painted
     underneath the row below it. */
  position: relative;
  z-index: 1;
}

/* Purely decorative lift on hover (pointers that can genuinely hover
   only  mouse/trackpad). Doesn't drive the bio open/closed on its
   own; that's handled below by .lt-director-card--expanded, toggled
   from leadership.js on click/tap AND on mouseenter/mouseleave for
   hover-capable pointers. Deliberately not pure CSS :hover for the
   expand state: the toggle button sits inside the card, so clicking
   it to close while the mouse is still resting on top would otherwise
   leave :hover true and the card would refuse to visually collapse. */
@media (hover: hover) and (pointer: fine) {
  .lt-director-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
  }
}

.lt-director-card--expanded {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  z-index: 20;
}

/* Collapsed by default: only the avatar, name, role and committee tags
   show (everything above this point in the card). The bio  wrapped in
   .lt-director-card__expand around all the <p class="lt-director-card__bio">
   paragraphs and the nationality <small>  is positioned as an overlay
   that pops open below the card when .lt-director-card--expanded is
   present (see leadership.js), instead of pushing the card's own
   height (and therefore the whole grid row) around. */
.lt-director-card__expand {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 0 var(--space-6) var(--space-6);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    visibility 0s linear 220ms;
  pointer-events: none;
}

.lt-director-card--expanded .lt-director-card__expand {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    visibility 0s linear 0s;
  pointer-events: auto;
}

/* Expand/collapse toggle  explicit control, click/tap-driven via
   leadership.js. Sits top-right of the card, always visible and
   reachable without scrolling regardless of how tall the bio is. */
.lt-director-card__toggle {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand-primary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 150ms ease, border-color 150ms ease;
}

.lt-director-card__toggle:hover {
  background: var(--color-off-white);
  border-color: var(--color-border-navy);
}

.lt-director-card__toggle-icon {
  transition: transform 250ms cubic-bezier(0.34, 1.2, 0.64, 1);
}

.lt-director-card--expanded .lt-director-card__toggle-icon {
  transform: rotate(180deg);
}

/* Avatar initials circle  data-initials attribute */
.lt-director-card::before {
  content: '';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  flex-shrink: 0;
  background-color: var(--color-brand-secondary);
  background-position: center;
  background-size: cover;
}

.lt-director-card[data-initials="SK"]::before {
  background-image: url("../images/directors/stephen-koseff.png");
}

.lt-director-card[data-initials="NP"]::before {
  background-image: url("../images/directors/nigel-payne.png");
}

.lt-director-card[data-initials="BJ"]::before {
  background-image: url("../images/directors/brian-joffe.png");
}

.lt-director-card[data-initials="HW"]::before {
  background-image: url("../images/directors/helen-wiseman.png");
}

.lt-director-card[data-initials="PB"]::before {
  background-image: url("../images/directors/paul-baloyi.png");
}

.lt-director-card[data-initials="TA"]::before {
  background-image: url("../images/directors/tasneem.png");
}

.lt-director-card[data-initials="CR"]::before {
  background-image: url("../images/directors/clifford-rosenberg.png");
}

.lt-director-card[data-initials="KM"]::before {
  background-image: url("../images/directors/keneilwe-moloko.png");
}

.lt-director-card[data-initials="KO"]::before {
  background-image: url("../images/directors/kathy.png");
}

.lt-director-card[data-initials="TJB"]::before {
  background-image: url("../images/directors/trevor3.png");
}

.lt-director-card__name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  line-height: 1.3;
  margin: 0;
}
.lt-director-card__name small{font-size: var(--text-xs); padding-left:var(--space-3); }
.lt-director-card__role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
  margin: 0;
}

.lt-director-card__bio {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: 1.60;
  margin-top: 25px;
}

@media (max-width: 1024px) {
  .lt-ned__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .lt-ned__grid {
    grid-template-columns: 1fr;
  }
}

/*  Stats Band (Section 4)  dark navy variant 
   Full-width navy background. Comfortaa white numbers.
   Dividers between stats in semi-transparent white.
    */

@media (max-width: 768px) {

  /* Restore vertical divider for items 2 and 4 only */
}

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

/*  Governance CTA (Section 5) 
   2-col: editorial copy left, two stacked link cards right.
    */

.lt-gov-cta {
  padding: var(--section-padding-y) 0;
}

/* Individual CTA link cards */

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

/*  Media Section (Section 6) 
   Split layout: text + CTA left, document SVG illustration right.
    */

.lt-media__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-16);
  align-items: center;
}

.lt-media__body h2 {
  margin-bottom: var(--space-5);
}

.lt-media__body p {
  max-width: 480px;
  color: var(--color-text-body);
  line-height: var(--leading-base);
  margin-bottom: var(--space-8);
}

.lt-media__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  transition: color var(--transition-base);
}

.lt-media__cta:hover {
  color: var(--color-brand-secondary);
}

.lt-media__graphic {
  width: 200px;
  flex-shrink: 0;
  opacity: 0.85;
}

.lt-media__illustration {
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .lt-media__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .lt-media__graphic {
    display: none;
  }
}

/*  Simple governance CTA  */

.lt-gov-cta__simple {
  max-width: 560px;
}

.lt-gov-cta__text {
  color: var(--color-text-body);
  line-height: var(--leading-base);
  margin-bottom: var(--space-8);
}

/*  Senior Management (Section 4) 
   Division groups with 6-column photo grids.
   Photo placeholders are navy circles awaiting headshots.
    */

.lt-management h2 {
  margin-bottom: var(--space-3);
}

.lt-management__intro {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 580px;
  margin: var(--space-3) 0 var(--space-12);
  line-height: var(--leading-base);
}

/* Leader grid inside divisional tab panels */
.lt-leader-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5) var(--space-4);
  margin: var(--space-5) 0 var(--space-8);
}

.lt-leader-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
}

.lt-leader-item::before {
  content: attr(data-initials);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.lt-leader-item__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lt-leader-item__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  line-height: 1.3;
}

.lt-leader-item__role {
  font-size: var(--text-xs);
  color: var(--color-text-body);
  line-height: 1.4;
}

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

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

/*  Reduced motion  leadership page  */
@media (prefers-reduced-motion: reduce) {
  .lt-director-card {
    transition: none;
  }

  .lt-director-card:hover {
    transform: none;
  }
}

/* ============================================================
   INNER PAGE  OUR BUSINESS OVERVIEW
   Prefix: ob-
   ============================================================ */

/*  Hero  */

.page-hero--our-business {
  background-color: var(--color-brand-primary);
  background-image: url('../images/bidfood-turkey-antalya-depot-solar-panels-trucks-aerial.jpg');
  background-size: cover;
  background-position: center 55%;
}

.page-hero--our-business::before {
  background: linear-gradient(
    105deg,
    rgba(17, 5, 65, 0.94) 0%,
    rgba(17, 5, 65, 0.70) 45%,
    rgba(24, 74, 135, 0.35) 100%
  );
}

/*  Section image (Global Footprint)  */

.ob-section-figure {
  margin: 0;
  line-height: 0;
}

.ob-section-image {
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  aspect-ratio: 21 / 9;
  display: block;
}

/*  Full-bleed divider  */

.ob-full-bleed {
  margin: 0;
  line-height: 0;
  overflow: hidden;
}

.ob-full-bleed img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

/*  Own brand split layout  */

.ob-own-brand-content h2 {
  margin-bottom: var(--space-5);
}

.ob-own-brand-content p {
  margin-bottom: var(--space-8);
  color: var(--color-text-secondary);
}

.ob-own-brand-figure {
  margin: 0;
  line-height: 0;
}

.ob-own-brand-image {
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
}

/*  Responsive  */

@media (max-width: 900px) {
  .ob-own-brand-figure {
    order: -1;
  }
}

@media (max-width: 640px) {
  .ob-full-bleed img {
    height: 220px;
  }

  .ob-section-image {
    aspect-ratio: 16 / 9;
  }
}

/*  DIVISION PAGES  Operating Company tab panel layout 
   .hp-divisions--op-tabs is applied to the tab wrapper on each division page.
   Uses the same globe-grid layout as the homepage divisional tabs.
   Globe highlights only the countries of the selected operating company.
    */

/* Panel itself has no extra padding  info col handles it */
.hp-divisions--op-tabs .hp-div-panel {
  padding: 0;
  background: transparent;
}

.hp-divisions--op-tabs .hp-div-panel::before {
  display: none;
}

/*  DIVISION PAGES  Operating Company brand list  */

/* Globe sticks at top of viewport as panel content scrolls */
.hp-divisions--op-tabs .hp-divisions__globe-grid {
  align-items: start;
}
.hp-divisions--op-tabs .hp-divisions__globe-col {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
}

.op-brand-list-section {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-light);
}
.op-brand-list__heading {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.op-brand-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--space-3);
}
.op-brand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.op-brand-card:hover {
  border-color: var(--color-brand-secondary);
  box-shadow: var(--shadow-sm);
}
.op-brand-card__logo {
  width: 80px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-off-white);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.op-brand-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}
.op-brand-card__name {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-brand-primary);
  line-height: 1.3;
}

/*  */
/* INNER PAGE  OUR HISTORY                                                    */
/*  */

/* Division colour legend pills */
.oh-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.oh-legend__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px var(--space-3);
  border-radius: 100px;
  border: 1.5px solid var(--oh-color, var(--color-border));
  font-size: var(--text-xs);
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-primary);
}

.oh-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--oh-color, var(--color-border));
}

/*  Mobile vertical list  */

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

/* ============================================================
   INVESTOR RESULTS SECTION (ir-)
   ============================================================ */

.ir-section {
  position: relative;
  background-color: #2C2C2C;
  padding-block: 5rem;
}

.ir-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
}

.ir-section > * {
  position: relative;
  z-index: 1;
}

/* Heading block */
.ir-heading {
  text-align: center;
  margin-bottom: 3rem;
}

.ir-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: #79BF43;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 0.6rem;
}

.ir-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--color-white);
  margin: 0 0 0.5rem;
}

.ir-sub {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* Three-column card grid */
.ir-grid {
  display: grid;
  grid-template-columns: 2fr 2fr 1.5fr;
  gap: 1.5rem;
}

/* All cards share base shape */
.ir-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
}

/* Card 1  Image */
.ir-card--image {
  position: relative;
  min-height: 320px;
}

.ir-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ir-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(31, 19, 70, 0.88) 100%);
}

.ir-card__img-content {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1.5rem;
  z-index: 1;
}

.ir-pill {
  display: inline-block;
  background: rgba(121, 191, 67, 0.15);
  border: 1px solid #79BF43;
  color: #79BF43;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border-radius: 100px;
}

.ir-card__img-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-white);
  margin: 0.5rem 0 0;
}

.ir-card__img-sub {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  margin: 0.25rem 0 0;
}

/* Card 2  Chart */
.ir-card--chart {
  background: rgba(255, 255, 255, 0.95);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.ir-card__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: #1F1346;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.75rem;
}

.ir-mini-stats {
  display: flex;
  gap: 1rem;
  border-top: 1px solid rgba(31, 19, 70, 0.08);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

.ir-mini-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ir-mini-stat__num {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: #1F1346;
  line-height: 1;
}

.ir-mini-stat__num--green { color: #79BF43; }

.ir-mini-stat__label {
  font-size: var(--text-xs);
  color: #6B7280;
  margin-top: 3px;
}

/* Card 3  Downloads */
.ir-card--downloads {
  background: rgba(255, 255, 255, 0.05);
  padding: 1.5rem;
}

.ir-downloads__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: #79BF43;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 1rem;
}

.ir-download-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.18s;
}

.ir-download-row:last-child { border-bottom: none; }

.ir-download-row:hover { color: #fff; }

.ir-download-row:hover .ir-download-row__arrow { color: #79BF43; }

.ir-download-row__icon { flex-shrink: 0; }

.ir-download-row__text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ir-download-row__title {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
}

.ir-download-row__sub {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
}

.ir-download-row__arrow {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.40);
  transition: color 0.18s;
}

/* Highlights strip */
.ir-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.ir-strip__item {
  display: flex;
  flex-direction: column;
}

.ir-strip__divider {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.12);
  align-self: center;
  flex-shrink: 0;
}

.ir-strip__stat {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1;
}

.ir-strip__label {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.6);
  display: block;
  margin-top: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ir-strip__change {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.45);
  margin-top: var(--space-1);
}

/* Stack the 3-column interim results grid below tablet - the fixed
   2fr/2fr/1.5fr columns had no floor and squeezed to illegible widths
   (chart labels overlapping, download rows crushed) on narrow screens. */
@media (max-width: 768px) {
  .ir-grid {
    grid-template-columns: 1fr;
  }

  .ir-card--image {
    min-height: 260px;
  }
}

/* .ir-strip is a single no-wrap flex row of 4 stats - on mobile it
   overflowed its container with no way to scroll to the hidden ones
   (the 4th stat, "Return on Funds Employed", was fully clipped).
   Switch to a 2x2 grid and drop the vertical dividers, which don't
   translate to a wrapped layout. */
@media (max-width: 640px) {
  .ir-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 1rem;
  }

  .ir-strip__divider {
    display: none;
  }
}

/* ============================================================
   INNER PAGE  INVESTOR OVERVIEW
   Prefix: io-
   ============================================================ */

/*  Stat cards (Section 1  navy background)  */
.stat-card {
  flex: 1;
  min-width: 200px;
  text-align: center;
  padding: var(--space-6);
}

.stat-card__value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.1;
  margin-bottom: var(--space-2);
}

.stat-card__label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-1);
}

.stat-card__sub {
  font-size: var(--text-xs);
  color: var(--color-accent-green);
}

/*  Listing details (Section 3)  */
.io-listing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
  margin-top: var(--space-8);
}

.io-listing-table {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--space-6);
}

.io-listing-table dt,
.io-listing-table dd {
  font-size: var(--text-sm);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-light);
  margin: 0;
  line-height: 1.5;
}

.io-listing-table dt {
  font-weight: 700;
  color: var(--color-brand-primary);
  white-space: nowrap;
}

.io-listing-table dd {
  color: var(--color-text-body);
}

.io-listing-card {
  background: var(--color-brand-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

.io-listing-card__exchange {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: var(--space-1);
}

.io-listing-card__code {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.io-listing-card__isin {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 1px;
  margin-bottom: 0;
}

.io-shareprice-placeholder {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.io-shareprice-label {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-1);
}

.io-shareprice-value {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.io-shareprice-note {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: var(--space-4);
}

/*  Shareholding pie (Section 5)  */
.io-shareholding {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-12);
  align-items: start;
  margin-top: var(--space-8);
}

.io-shareholding__legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.io-shareholding__legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.io-shareholding__swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
  background: var(--io-swatch, #ccc);
}

.io-shareholding__name {
  flex: 1;
  color: var(--color-text-body);
  line-height: 1.3;
}

.io-shareholding__pct {
  font-weight: 700;
  color: var(--color-brand-primary);
  min-width: 44px;
  text-align: right;
}

.io-shareholding__footnote {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-6);
  grid-column: 1 / -1;
  line-height: 1.6;
}

/*  Investor alerts form (Section 7)  */
.io-alerts-form {
  max-width: 720px;
  margin: var(--space-8) auto 0;
}

.io-alerts-form__row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.io-alerts-form input[type="text"],
.io-alerts-form input[type="email"] {
  flex: 1;
  min-width: 160px;
  padding: 12px var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
  font-size: var(--text-base);
  font-family: var(--font-body);
}

.io-alerts-form input::placeholder { color: rgba(255, 255, 255, 0.55); }

.io-alerts-form input:focus {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 0;
  background: rgba(255, 255, 255, 0.22);
}

.io-alerts-form__legal {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.65);
  margin-top: var(--space-3);
  text-align: center;
  line-height: 1.5;
}

/*  IR contacts (Section 8)  */

.io-contact-card {
  padding: var(--space-8);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.io-contact-card__detail {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: 1.5;
}

.io-contact-card__detail svg {
  flex-shrink: 0;
  color: var(--color-brand-secondary);
  margin-top: 2px;
}

/*  Mobile  */
@media (max-width: 767px) {
  .io-listing-grid    { grid-template-columns: 1fr; }
  .io-shareholding    { grid-template-columns: 1fr; justify-items: center; }

  .io-alerts-form__row { flex-direction: column; }

  .io-alerts-form input[type="text"],
  .io-alerts-form input[type="email"] { width: 100%; }
}

/* ============================================================
   INNER PAGE — OUR ESG STORY (es-)
   ============================================================ */

/* ── Section 4: Two-column commitment grid ── */
.es-commitment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-14);
  align-items: start;
}
.es-commitment-col--left {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* ── Section 4: Commitment Illustration ── */
.es-commitment-illustration {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.es-commitment-illustration__img {
  display: block;
  width: 100%;
  height: auto;
}

/* Gauge counter text overlay */
.es-commitment-overlay {

  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
  /* Grid trick: stack both phases in the same cell so they share
     identical position regardless of which one is visible */
  display: grid;
}
.es-commitment-phase {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 600ms ease;
}
.es-commitment-phase.is-visible {
  opacity: 1;
}
.es-commitment-overlay__number {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 4.5rem);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}
.es-commitment-overlay__label {
  font-family: var(--font-body);
  font-size: clamp(0.55rem, 0.8vw, 0.7rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
  margin: var(--space-2) 0 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* CSS sync clock — zero-size, drives GSAP via animationiteration events */
.es-gauge-clock {
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  animation: es-gauge-tick 22s ease-in-out infinite;
}
@keyframes es-gauge-tick {
  from { opacity: 0; }
  to   { opacity: 0; }
}

/*  Section 4: Framework Grid  */
.es-framework-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin: var(--space-8) 0;
}

.es-framework-col {
  background: var(--color-off-white);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.es-framework-col__title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-accent-green);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
}

.es-framework-col__items {
  padding-left: var(--space-4);
  margin: 0;
}

.es-framework-col__items li {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
  line-height: 1.55;
}

/* ISS Ratings Box */
.es-ratings-box {
  background: var(--color-off-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-top: var(--space-8);
}

.es-ratings-box__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-brand-primary);
  margin: 0 0 var(--space-4);
}

.es-ratings-box__scores {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}

.es-score-tile {
  text-align: center;
  min-width: 80px;
}

.es-score-tile__value {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-brand-primary);
  line-height: 1;
}

.es-score-tile__label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.es-score-tile__prev {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.es-ratings-box__note {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.6;
}

/* ── Section 5: Stakeholder Grid ── */
.sk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--space-8);
}

.sk-card {
  position: relative;
  padding: 2rem 2rem 2.5rem;
  background: var(--color-white);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
  cursor: pointer;
  transition: background 350ms cubic-bezier(0.34, 1.2, 0.64, 1);
  min-height: 220px;
}

.sk-card:nth-child(3n)        { border-right: none; }
.sk-card:nth-last-child(-n+3) { border-bottom: none; }

.sk-card:hover,
.sk-card--active {
  background: var(--color-brand-primary);
}

.sk-card__arrow {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 36px;
  height: 36px;
  background: var(--color-brand-primary);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: background 0.35s ease, color 0.35s ease;
  flex-shrink: 0;
}

.sk-card:hover .sk-card__arrow,
.sk-card--active .sk-card__arrow {
  background: var(--color-white);
  color: var(--color-brand-primary);
}

.sk-card__arrow svg {
  transform: rotate(180deg);
  transition: transform 300ms cubic-bezier(0.34, 1.2, 0.64, 1);
}

.sk-card:hover .sk-card__arrow svg,
.sk-card--active .sk-card__arrow svg {
  transform: rotate(0deg);
}

.sk-card__icon-bg {
  position: absolute;
  bottom: -16px;
  right: -16px;
  width: 110px;
  height: 110px;
  color: var(--color-brand-primary);
  opacity: 0.07;
  pointer-events: none;
  transition: opacity 0.35s ease, color 0.35s ease;
}

.sk-card__icon-bg svg {
  width: 100%;
  height: 100%;
}

.sk-card:hover .sk-card__icon-bg,
.sk-card--active .sk-card__icon-bg {
  color: var(--color-white);
  opacity: 0.15;
}

.sk-card__title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 0.85rem;
  padding-right: 2.75rem;
  line-height: 1.3;
  transition: color 0.35s ease;
}

.sk-card:hover .sk-card__title,
.sk-card--active .sk-card__title {
  color: var(--color-white);
}

.sk-card__body {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  filter: blur(4px);
  transform: translateY(4px);
  pointer-events: none;
  transition:
    max-height 0.4s ease,
    opacity 0.3s ease 80ms,
    filter 0.3s ease 80ms,
    transform 0.3s ease 80ms;
}

.sk-card:hover .sk-card__body,
.sk-card--active .sk-card__body {
  max-height: 220px;
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  pointer-events: auto;
  color: rgba(255, 255, 255, 0.82);
}

/* ── Stakeholder Engagement — dark section overrides ── */
#stakeholder-engagement > .container > p {
  color: rgba(255, 255, 255, 0.7);
}

#stakeholder-engagement .sk-grid {
  border-color: rgba(255, 255, 255, 0.1);
}

#stakeholder-engagement .sk-card {
  background: var(--color-bg-dark);
  border-right-color: rgba(255, 255, 255, 0.1);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

#stakeholder-engagement .sk-card__title {
  color: rgba(255, 255, 255, 0.88);
}

#stakeholder-engagement .sk-card__arrow {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
}

#stakeholder-engagement .sk-card__icon-bg {
  color: var(--color-white);
  opacity: 0.08;
}

/* Hover / active — invert to white card */
#stakeholder-engagement .sk-card:hover,
#stakeholder-engagement .sk-card--active {
  background: var(--color-white);
}

#stakeholder-engagement .sk-card:hover .sk-card__title,
#stakeholder-engagement .sk-card--active .sk-card__title {
  color: var(--color-brand-primary);
}

#stakeholder-engagement .sk-card:hover .sk-card__arrow,
#stakeholder-engagement .sk-card--active .sk-card__arrow {
  background: #000000;
  color: var(--color-white);
}

#stakeholder-engagement .sk-card:hover .sk-card__icon-bg,
#stakeholder-engagement .sk-card--active .sk-card__icon-bg {
  color: var(--color-brand-primary);
  opacity: 0.07;
}

#stakeholder-engagement .sk-card:hover .sk-card__body,
#stakeholder-engagement .sk-card--active .sk-card__body {
  color: var(--color-text-body);
}

/* ── Section 6: ESG Stories ── */
.es-stories-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.es-story-card {
  background: white;
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  grid-column: span 1;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.es-story-card__badge {
  display: inline-block;
  background: color-mix(in srgb, var(--es-badge-color, var(--color-accent-teal)) 15%, white);
  color: color-mix(in srgb, var(--es-badge-color, var(--color-accent-teal)) 70%, var(--color-brand-primary));
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--es-badge-color, var(--color-accent-teal));
  width: fit-content;
}

.es-story-card__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.4;
  transition: font-size 0.3s ease, color 0.3s ease;
}

.es-story-card__body {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.65;
  flex: 1;
  transition: color 0.3s ease;
}

.es-story-card__region {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent-teal);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color 0.3s ease, border-top-color 0.3s ease;
}

.es-story-card__inner {
  display: block;
  flex: 1;
}

.es-story-card__stat {
  display: none;
}

.es-story-card__stat-acc {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--color-accent-green);
  margin-bottom: var(--space-2);
}

.es-story-card__stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.es-story-card__stat-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.4;
  margin-top: var(--space-1);
}

.es-story-card.is-expanded {
  grid-column: span 2;
  background: #1c1c1c;
  border-color: #1c1c1c;
  box-shadow: none;
  position: relative;
  z-index: 2;
}

.es-story-card.is-expanded .es-story-card__badge {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.82);
}

.es-story-card.is-expanded .es-story-card__inner {
  display: flex;
  gap: 0;
  align-items: center;
}

.es-story-card.is-expanded .es-story-card__text {
  flex: 1;
  padding-right: 2rem;
}

.es-story-card.is-expanded .es-story-card__stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 140px;
  flex-shrink: 0;
  border-left: 0.5px solid rgba(255, 255, 255, 0.1);
  padding-left: 1.75rem;
}

.es-story-card.is-expanded .es-story-card__title {
  font-size: 1.2rem;
  color: #ffffff;
}

.es-story-card.is-expanded .es-story-card__body {
  color: rgba(255, 255, 255, 0.65);
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.es-story-card.is-expanded .es-story-card__region {
  color: rgba(255, 255, 255, 0.3);
  border-top-color: rgba(255, 255, 255, 0.08);
}

.es-stories-cta {
  text-align: center;
  margin: var(--space-8) 0 0;
}

/* ── Section 7: Reporting Frameworks (navy) ── */
.es-frameworks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-4);
}

.es-framework-tile {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.es-framework-tile__logo {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent-teal);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.es-framework-tile__name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: white;
  margin: 0 0 var(--space-2);
  line-height: 1.35;
}

.es-framework-tile__desc {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  line-height: 1.55;
}

/* ── Grain texture on navy sections (ESG page) ── */
.page-esg .section--navy {
  position: relative;
}

.page-esg .section--navy::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
}

.page-esg .section--navy > * {
  position: relative;
  z-index: 1;
}

/* ── Tablet ── */
@media (max-width: 1023px) {
  .es-commitment-grid     { grid-template-columns: 1fr; gap: var(--space-10); }
  .sk-grid { grid-template-columns: repeat(2, 1fr); }
  .sk-card:nth-child(3n)        { border-right: 1px solid var(--color-border); }
  .sk-card:nth-child(2n)        { border-right: none; }
  .sk-card:nth-last-child(-n+3) { border-bottom: 1px solid var(--color-border); }
  .sk-card:nth-last-child(-n+2) { border-bottom: none; }
  #stakeholder-engagement .sk-card:nth-child(3n)        { border-right: 1px solid rgba(255,255,255,0.1); }
  #stakeholder-engagement .sk-card:nth-child(2n)        { border-right: none; }
  #stakeholder-engagement .sk-card:nth-last-child(-n+3) { border-bottom: 1px solid rgba(255,255,255,0.1); }
  #stakeholder-engagement .sk-card:nth-last-child(-n+2) { border-bottom: none; }
  .es-frameworks-grid     { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile ── */
@media (max-width: 767px) {
  .es-framework-grid      { grid-template-columns: 1fr; }
  .sk-grid { grid-template-columns: 1fr; }
  .sk-card { border-right: none; border-bottom: 1px solid var(--color-border); }
  .sk-card:nth-child(3n)        { border-right: none; }
  .sk-card:nth-last-child(-n+3) { border-bottom: 1px solid var(--color-border); }
  .sk-card:last-child           { border-bottom: none; }
  #stakeholder-engagement .sk-card { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
  #stakeholder-engagement .sk-card:last-child { border-bottom: none; }
  .es-frameworks-grid     { grid-template-columns: 1fr; }
  .es-ratings-box__scores { flex-direction: row; justify-content: flex-start; flex-wrap: wrap; }
}

/* ── ESG Story: Approach section grain texture + image containers ── */
#our-approach {
  background-color: var(--color-off-white);
  border-top: 1px solid var(--color-border-light);
  position: relative;
  padding-block: 0;
}

#our-approach::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
}

#our-approach > * {
  position: relative;
  z-index: 1;
}

/* Grain texture — exact match of #our-approach */
#esg-framework {
  position: relative;
  background: var(--color-off-white);
}
#esg-framework::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;

}
#esg-framework > * {
  position: relative;
  z-index: 1;
}

/* Image containers: 16:9, contained */
.page-esg .hp-itabs__ic-img {
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

/* ============================================================
   INNER PAGE  INVESTOR OVERVIEW  INVESTMENT CASE STACK (ic-)
   ============================================================ */

/* Stack container  normal document flow */
.ic-stack {
  position: relative;
  padding-bottom: 2rem;
}

/* Each card: sticky with progressive offset, entrance animation */
.ic-card {
  position: sticky;
  top: calc(80px + var(--i) * 12px);
  margin-bottom: 1.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;

  view-timeline-name: --ic-card;
  view-timeline-axis: block;
  animation: ic-card-in linear both;
  animation-timeline: --ic-card;
  animation-duration: 1ms;
  animation-range: entry 0% entry 25%;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
}

@keyframes ic-card-in {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* All cards  white background */
.ic-card .ic-card__inner { background: var(--color-white); }

/* Inner two-column grid */
.ic-card__inner {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 0;
  min-height: 380px;
  border: 1px solid rgba(31, 19, 70, 0.09);
  box-shadow: 0 4px 32px rgba(31, 19, 70, 0.10);
}

/* LEFT  number + title + tagline */
.ic-card__left {
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--color-border-light);
  border-right-color: rgba(31, 19, 70, 0.08);
  position: relative;
}

.ic-card__number {
    display: block;
    font-family: var(--font-display);
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(31, 19, 70, 0.09);
    margin-bottom: -0.5rem;
    letter-spacing: -0.02em;
}

.ic-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-brand-primary);
  line-height: 1.25;
  margin: 0 0 1rem;
  position: relative;
  z-index: 1;
}

.ic-card__sub {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent-green);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}

/* RIGHT  bullets + stats */
.ic-card__right {
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}

/* Bullet list */
.ic-card__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;

}

.ic-card__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;

  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text-body);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border-light);
  border-bottom-color: rgba(31, 19, 70, 0.07);
}

.ic-card__bullets li:last-child {
  border-bottom: none;
}

.ic-card__bullets li::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent-green);
  margin-top: 0.55rem;
}

/* Stats row */
.ic-card__stats {
  display: flex;
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border-light);
  border-top-color: rgba(31, 19, 70, 0.08);
}

.ic-stat {
  flex: 1;
}

.ic-stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--color-brand-primary);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.ic-stat__label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Mobile  remove sticky/animation, stack normally */
@media (max-width: 768px) {
  .ic-card {
    position: relative;
    top: auto;
    animation: none;
  }

  .ic-card__inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .ic-card__left {
    border-right: none;
    border-bottom: 1px solid var(--color-border-light);
    padding: 2rem 1.5rem;
  }

  .ic-card__right {
    padding: 2rem 1.5rem;
  }

  .ic-card__number {
    font-size: 3.5rem;
  }

  .ic-card__stats {
    flex-direction: column;
    gap: 1rem;
  }
}

/* ============================================================
   INVESTMENT CASE  GRAIN BACKGROUND + LIGHT CARD TREATMENT
   ============================================================ */

/* Grain wrapper  matches hp-glance / hp-grain technique exactly */
section.section.ic-grain-wrap {
  position: relative;
  background-color: var(--color-white);
  padding-block: 5rem;
}

/* Grain texture  copied from .hp-grain::before */
section.section.ic-grain-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
}

/* Content above the grain layer  matches .hp-grain > * */
.ic-grain-wrap > * {
  position: relative;
  z-index: 1;
}

/* Section heading on grain/white background */
.ic-grain-wrap .eyebrow            { color: var(--color-brand-secondary); }
.ic-grain-wrap .section__header h2 { color: var(--color-brand-primary); }
.ic-grain-wrap .section__header p  { color: var(--color-text-body); }

/* All cards white  grain-wrap confirmation */
.ic-grain-wrap .ic-card .ic-card__inner { background: var(--color-white); }

/*  Investment case chart additions  */

/* Intro sentence above the stack */

.ic-intro {
  display: block;
  width: 100%;
  max-width: 680px;
  margin: 0 auto var(--space-10);
  text-align: center;
  font-size: var(--text-lg);
  color: var(--color-text-body);
  line-height: 1.6;
}

/* Tagline  supporting descriptor below title, above bullets */
.ic-card__tagline {
  font-size: var(--text-base);
  color: rgba(31, 19, 70, 0.55);
  line-height: 1.5;
  margin: 0.25rem 0 0.75rem;
  font-style: italic;
}

/* Right panel variant for chart cards */
.ic-card__right--chart {
  padding: 1.75rem 2rem 2rem;
  justify-content: flex-start;
  gap: 0;
}

/* Card 2  map left / donut right two-column layout */
.ic-card__right--map-split {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  overflow: hidden;
}

.ic-card__map-col {
  overflow: hidden;
}

.ic-card__map-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.ic-card__donut-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 1.75rem 2rem 2rem;
}

/* Small label above each chart */
.ic-chart-title {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(31, 19, 70, 0.5);
  margin: 0 0 0.5rem;
}

/* Chart container  fixed height so ApexCharts renders consistently */
.ic-card__chart {
  width: 100%;
  height: 180px;
  flex-shrink: 0;
  margin-bottom: 0;
}

/* Stats strip on chart cards sits at the bottom with top border */
.ic-card__right--chart .ic-card__stats {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border-light);
}

/* Bullets in the left panel  tighter spacing to fit 2 items */
.ic-card__left .ic-card__bullets {
  margin-top: 1.25rem;
}

.ic-card__left .ic-card__bullets li {
  font-size: 0.85rem;
  padding: 0.5rem 0;
}

/* ApexCharts tooltip override  white card on light background */
.ic-card .apexcharts-tooltip {
  background: #fff !important;
  border: 1px solid var(--color-border-light) !important;
  box-shadow: 0 4px 20px rgba(31, 19, 70, 0.12) !important;
}

.ic-card .apexcharts-tooltip-title {
  background: rgba(31, 19, 70, 0.04) !important;
  border-bottom: 1px solid var(--color-border-light) !important;
  color: rgba(31, 19, 70, 0.5) !important;
  font-family: var(--font-body) !important;
}

.ic-card .apexcharts-tooltip-text,
.ic-card .apexcharts-tooltip-y-label,
.ic-card .apexcharts-tooltip-y-value {
  color: var(--color-brand-primary) !important;
  font-family: var(--font-body) !important;
}

/* Mobile  collapse charts to a sensible height */
@media (max-width: 768px) {
  .ic-card__right--chart {
    padding: 1.5rem;
  }

  .ic-card__chart {
    height: 150px;
  }

  /* Map + donut two-column card: side by side at 50/50 squeezed both
     illegible on mobile. Stack them full-width instead. */
  .ic-card__right--map-split {
    grid-template-columns: 1fr;
  }

  .ic-card__map-col {
    min-height: 220px;
  }
}

/* ============================================================
   INNER PAGE  INVESTOR OVERVIEW  REPORT BANNER (rb-)
   ============================================================ */
.rb-banner {
  background: var(--color-white);
  border-top: 1px solid rgba(31, 19, 70, 0.08);
  border-bottom: 1px solid rgba(31, 19, 70, 0.08);
}

.rb-banner__inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 4rem;
  align-items: center;
  padding-block: 3.5rem;
}

.rb-banner__image-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rb-banner__cover {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.10);
}

.rb-banner__body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rb-banner__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-green);
  margin-bottom: 0.75rem;
}

.rb-banner__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 700;
  color: var(--color-brand-primary);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.rb-banner__sub {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-body);
  margin-bottom: 2rem;
}

.rb-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}

.rb-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.375rem;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}

.rb-banner__btn--primary {
  background: var(--color-accent-green);
  color: var(--color-white);
  box-shadow: 0 4px 16px rgba(121, 191, 67, 0.30);
}

.rb-banner__btn--primary:hover {
  background: #8fd44d;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(121, 191, 67, 0.40);
}

.rb-banner__btn--ghost {
  background: transparent;
  color: var(--color-brand-primary);
  border: 2px solid rgba(31, 19, 70, 0.30);
}

.rb-banner__btn--ghost:hover {
  border-color: var(--color-brand-primary);
  background: rgba(31, 19, 70, 0.04);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .rb-banner__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-block: 2.5rem;
  }

  .rb-banner__image-col {
    justify-content: flex-start;
  }

  .rb-banner__cover {
    max-width: 160px;
  }
}

/* ============================================================
   INNER PAGE  OUR HISTORY  TIMELINE (ht-)
   ============================================================ */

/*  SECTION  */
.ht-section {
  position: relative;
  padding: 3rem 0 3rem 0;
  overflow: hidden;
  background-color: var(--color-off-white);
}

/* Grain texture  exact copy of .hp-grain::before */
.ht-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
}

.ht-section > * {
  position: relative;
  z-index: 1;
}

/*  SCROLL DRIVER WRAPPER  */
/* Height is set by JS: maxHScroll + stickyHeight            */
.ht-scroll-driver {
  position: relative;
}

/* Desktop: pin section to viewport while user scrolls through */
@media (min-width: 769px) {
  .ht-scroll-driver > .ht-section {
    position: sticky;
    top: calc(var(--ticker-height) + var(--header-height));
    height: calc(100vh - var(--ticker-height) - var(--header-height));
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Programmatic scrollLeft only  block manual horizontal scroll */
  .ht-scroll-driver .ht-viewport {
    overflow-x: hidden;
    cursor: default;
  }
}

/*  BODY: labels + viewport side by side  */
.ht-body {
  display: flex;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

/*  DIVISION LABELS COLUMN  */
.ht-labels {
  flex-shrink: 0;
  width: 160px;
  display: flex;
  flex-direction: column;
  z-index: 10;
  height: calc(800px + 32px);
  background: transparent;
}

.ht-labels__item {
  height: 200px;
  display: flex;
  align-items: center;
  padding: 0 1rem 0 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--color-off-white);
  backdrop-filter: blur(4px);
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  white-space: nowrap;
}

.ht-labels__item[data-div="australasia"] { color: var(--color-division-australasia); }
.ht-labels__item[data-div="uk"]          { color: var(--color-division-uk); }
.ht-labels__item[data-div="europe"]      { color: var(--color-division-europe); }
.ht-labels__item[data-div="emerging"]    { color: var(--color-division-emerging); }

/*  VIEWPORT  */
.ht-viewport {
  flex: 1;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  cursor: ew-resize;
  overscroll-behavior-x: contain;
  margin-top: -16px;
  margin-bottom: -16px;
}

.ht-viewport::-webkit-scrollbar { display: none; }

/*  TRACK  */
.ht-track {
  position: relative;
  /* 23 unique year columns × 280px + 4rem padding */
  width: calc(23 * 280px + 4rem);
  height: calc(800px + 32px);
  padding-top: 16px;
  padding-bottom: 16px;
}

/*  SPINE  */
.ht-spine {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(400px + 16px); /* midpoint between rows 2 and 3, offset for track padding */
  height: 2px;
  background: var(--color-brand-primary);
  opacity: 0.12;
  z-index: 0;
}

/*  SPINE INTERSECTION DOTS  */
.ht-spine-dot {
  position: absolute;
  /* Horizontal centre matches card centre:
     card left = var(--col) * 280px + 2rem
     card centre = card left + 120px (half of 240px card width) */
  left: calc(var(--col) * 280px + 2rem + 120px);
  transform: translateX(-50%) translateY(-50%);
  /* Vertical centre on the spine:
     spine top = 400px + 16px track padding = 416px
     dot centre = 416px + 1px (half spine height) */
  top: calc(400px + 16px + 1px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--color-brand-primary);
  opacity: 0.4;
  z-index: 2;
}

/*  CARDS  */
.ht-card {
  position: absolute;
  width: 240px;
  left: calc(var(--col) * 280px + 2rem);
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.25rem 1rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Division coloured shadows */
.ht-card[data-div="australasia"] { box-shadow: 0 4px 20px color-mix(in srgb, var(--color-division-australasia) 35%, transparent), 0 1px 4px rgba(0,0,0,0.04); }
.ht-card[data-div="uk"]          { box-shadow: 0 4px 20px color-mix(in srgb, var(--color-division-uk)          45%, transparent), 0 1px 4px rgba(0,0,0,0.04); }
.ht-card[data-div="europe"]      { box-shadow: 0 4px 20px color-mix(in srgb, var(--color-division-europe)      55%, transparent), 0 1px 4px rgba(0,0,0,0.04); }
.ht-card[data-div="emerging"]    { box-shadow: 0 4px 20px color-mix(in srgb, var(--color-division-emerging)    55%, transparent), 0 1px 4px rgba(0,0,0,0.04); }

.ht-card[data-div="australasia"]:hover { box-shadow: 0 8px 32px color-mix(in srgb, var(--color-division-australasia) 55%, transparent), 0 2px 8px rgba(0,0,0,0.06); }
.ht-card[data-div="uk"]:hover          { box-shadow: 0 8px 32px color-mix(in srgb, var(--color-division-uk)          65%, transparent), 0 2px 8px rgba(0,0,0,0.06); }
.ht-card[data-div="europe"]:hover      { box-shadow: 0 8px 32px color-mix(in srgb, var(--color-division-europe)      75%, transparent), 0 2px 8px rgba(0,0,0,0.06); }
.ht-card[data-div="emerging"]:hover    { box-shadow: 0 8px 32px color-mix(in srgb, var(--color-division-emerging)    75%, transparent), 0 2px 8px rgba(0,0,0,0.06); }

.ht-card:hover {
  transform: translateY(-2px);
  z-index: 1;
}

/* Year text */
.ht-card__year {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;

  margin-bottom: 0.5rem;
}

.ht-card[data-div="australasia"] .ht-card__year { color: var(--color-division-australasia); }
.ht-card[data-div="uk"]          .ht-card__year { color: var(--color-division-uk); }
.ht-card[data-div="europe"]      .ht-card__year { color: var(--color-division-europe); }
.ht-card[data-div="emerging"]    .ht-card__year { color: var(--color-division-emerging); }

/* Body text */
.ht-card__body {
  font-size: 0.825rem;
  line-height: 1.55;
  color: var(--color-text-body);
  margin: 0;
}

/*  ABOVE-SPINE CARDS (rows 0 & 1)  */
/* Row 0: top = 10px,  bottom = 180px  Ã pin to 400px = 220px
   Row 1: top = 210px, bottom = 380px  Ã pin to 400px = 20px  */
.ht-card--above {
  top: calc(var(--row) * 200px + 10px);
  height: 170px;
}

.ht-card--above::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  height: calc(400px - (var(--row) * 200px + 180px) - 5px + 16px);
  width: 1px;
  background: var(--color-brand-primary);
  opacity: 0.2;
  z-index: -1;
}

/*  BELOW-SPINE CARDS (rows 2 & 3)  */
/* Row 2: top = 436px à pin to 416px = 20px
   Row 3: top = 636px à pin to 416px = 220px               */
.ht-card--below {
  top: calc((var(--row) - 2) * 200px + 420px + 16px);
  height: 170px;
}

.ht-card--below::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  height: calc((var(--row) - 2) * 200px + 20px - 5px);
  width: 1px;
  background: var(--color-brand-primary);
  opacity: 0.2;
  z-index: -1;
}

/*  MOBILE  */
@media (max-width: 768px) {
  .ht-section { padding: 2.5rem 0 0; }

  .ht-body {
    flex-direction: column;
  }

  /* Redundant with the division colour legend already shown above this
     section (.oh-legend), and at the old fixed desktop height it also
     obscured the first card. */
  .ht-labels {
    display: none;
  }

  .ht-viewport {
    width: 100%;
    overflow-x: visible;
    cursor: default;
  }

  /* Vertical timeline: a single spine runs down the left edge and every
     card becomes one shared chronological column (instead of 4 parallel
     division lanes), with a small dot on the spine per card coloured by
     division. --col/--row alone only encode the DESKTOP horizontal-lane
     position, not a usable stacking order, so each card also carries an
     inline order (order: N, injected in our-history.php from --col/--row
     so the flex column reflows into true chronological order without
     needing the markup itself reordered). */
  .ht-track {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0.5rem 1rem 1rem 2.5rem;
  }

  /* Spine centre sits at 1.25rem from the track's left edge. The dot
     below is positioned to share this exact same centre  computed
     from one shared anchor instead of two independently-guessed
     values, since guessing both independently is exactly how they
     ended up misaligned the first time. */
  .ht-track::before {
    content: '';
    position: absolute;
    left: calc(1.25rem - 1px); /* 2px wide, so its own centre = 1.25rem */
    top: 0.5rem;
    bottom: 1rem;
    width: 2px;
    background: var(--color-brand-primary);
    opacity: 0.15;
  }

  .ht-spine,
  .ht-spine-dot { display: none; }

  .ht-card,
  .ht-card--above,
  .ht-card--below {
    position: relative;
    width: 100%;
    height: auto;
    top: auto;
    left: auto;
  }

  /* Only .ht-card--above's ::after (the old desktop connecting line) needs
     hiding here. ::before used to be hidden the same way for
     .ht-card--below, but ::before is now repurposed below as the dot for
     EVERY card regardless of above/below  leaving that display:none in
     place would silently win the cascade over .ht-card::before further
     down (equal specificity, but this rule used to come later), since
     that rule never re-declares display itself. That's exactly why
     Europe and Emerging (the two --below divisions) were missing dots. */
  .ht-card--above::after { display: none; }

  /* Per-card dot on the spine, coloured to match the division  reuses
     the same --color-division-* tokens already used for each card's
     shadow and year colour elsewhere in this file. Card's own left edge
     is at the track's 2.5rem padding-left; to put a 12px dot's centre
     at the spine's 1.25rem centre: 1.25rem - 6px - 2.5rem = -1.625rem.

     transform/bottom/opacity are explicitly reset here too, not just
     left/width/etc: .ht-card--below::before (Europe + Emerging's old
     desktop connecting-line rule, a few lines up) sets
     transform:translateX(-50%), bottom:100% and opacity:0.2, all equal
     specificity to this rule. Only overriding the properties THIS rule
     originally cared about left those three active for every --below
     card  which is exactly why Europe/Emerging's dots came out dim
     and offset while Australasia/UK's (no competing rule) didn't. */
  .ht-card::before {
    content: '';
    display: block;
    position: absolute;
    left: -1.625rem;
    top: 1.75rem;
    bottom: auto;
    transform: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-brand-primary);
    opacity: 1;
    border: 2px solid var(--color-bg-white);
    z-index: 1;
  }

  .ht-card[data-div="australasia"]::before { background: var(--color-division-australasia); }
  .ht-card[data-div="uk"]::before          { background: var(--color-division-uk); }
  .ht-card[data-div="europe"]::before      { background: var(--color-division-europe); }
  .ht-card[data-div="emerging"]::before    { background: var(--color-division-emerging); }
}

/* ============================================================
   INNER PAGE  ABOUT  BUSINESS MODEL CARDS
   ============================================================ */

.ab-model {
  background: var(--color-white);
  padding: 6rem 0 4rem;
}

.ab-model__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}

.ab-model__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3.5rem;
}

.ab-model__scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-top: 1rem;
  animation: hint-nudge 2s ease-in-out infinite;
}

@keyframes hint-nudge {
  0%, 100% { transform: translateX(0); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-6px); }
  80%       { transform: translateX(4px); }
}

.ab-model__grid {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  cursor: grab;
  padding: 1rem 0 2rem;
  padding-left: calc((100vw - 1200px) / 2 + 1.5rem);
  padding-right: calc((100vw - 1200px) / 2 + 1.5rem);
  margin: 0;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 3%,
    black 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 3%,
    black 88%,
    transparent 100%
  );
}

.ab-model__grid::-webkit-scrollbar { display: none; }
.ab-model__grid.is-grabbing { cursor: grabbing; }

.ab-model-card {
  flex-shrink: 0;
  width: 680px;
  min-height: 520px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.ab-model-card__img-wrap {
  position: absolute;
  inset: 0;
}

.ab-model-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 500ms ease-in-out;
}

/* All .ab-model-card:hover effects below require BOTH a hover-capable
   pointer AND a desktop-width viewport (min-width:769px, matching the
   max-width:768px breakpoint further down this file that resizes
   these cards for mobile). Neither condition alone is enough:
   - hover:hover alone isn't enough because a real mouse/trackpad
     still matches it even in a narrow window  e.g. someone testing
     "mobile" by shrinking their desktop browser rather than using
     touch/device emulation. At that width the card is only 300px
     wide, so .ab-model-card:hover .ab-model-card__reveal's
     max-height:300px (below) doesn't fit the same text that wraps
     fine on the 680px desktop card, clipping it on hover  exactly
     what was reported.
   - width alone isn't enough because iOS Safari and Android Chrome
     both apply :hover on tap and leave it "stuck" until the user
     taps elsewhere, which would trigger the same undersized
     max-height:300px (having no media query of its own, it has
     higher specificity than the max-height:380px set for mobile
     further down this file) on a genuine touchscreen tap. */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .ab-model-card:hover .ab-model-card__img {
    transform: scale(1.06);
  }
}

/* Frost layer  same technique as explore cards.
 * At rest: masks to bottom third; on hover: expands to support full overlay. */
.ab-model-card__frost {
  position: absolute;
  inset: -0.5rem;
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(16px) saturate(1.5) brightness(0.85);
  -webkit-backdrop-filter: blur(16px) saturate(1.5) brightness(0.85);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.12) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.06) 50%,
    rgba(0, 0, 0, 0.5) 65%,
    black 80%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.06) 50%,
    rgba(0, 0, 0, 0.5) 65%,
    black 80%
  );
  transition: mask-image 400ms ease, -webkit-mask-image 400ms ease;
}

@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .ab-model-card:hover .ab-model-card__frost {
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.1) 20%,
      rgba(0, 0, 0, 0.6) 35%,
      black 50%
    );
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.1) 20%,
      rgba(0, 0, 0, 0.6) 35%,
      black 50%
    );
  }
}

.ab-model-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(31,19,70,0.92) 0%,
    rgba(31,19,70,0.5) 45%,
    rgba(31,19,70,0.05) 100%
  );
  pointer-events: none;
  transition: background 0.4s ease;
  z-index: 1;
}

@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .ab-model-card:hover::after {
    background: linear-gradient(
      to top,
      rgba(31,19,70, 0.96) 0%,
      rgba(31,19,70, 0.75) 60%,
      rgba(31,19,70, 0.2) 100%
    );
  }
}

.ab-model-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  z-index: 2;
  color: var(--color-white);
}

.ab-model-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--color-white);
  margin: 0 0 0.5rem;
  transition: transform 0.4s ease;
}

.ab-model-card__reveal {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  opacity: 0;
}

@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .ab-model-card:hover .ab-model-card__reveal {
    max-height: 300px;
    opacity: 1;
  }

  .ab-model-card:hover .ab-model-card__title {
    transform: translateY(-0.5rem);
  }
}

.ab-model-card__blurb {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  margin: 0 0 1rem;
}

.ab-model-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  margin-top: 1rem;
}

.ab-model-card__stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ab-model-card__stat-number {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1;
}

.ab-model-card__stat-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 768px) {
  .ab-model__grid {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .ab-model-card {
    width: 300px;
    /* .ab-model-card__reveal is always-on here (not hover-gated, since
       there's no hover on mobile), so the card needs to be tall enough
       to contain the overlay's full text without .ab-model-card's own
       overflow:hidden clipping it. Measured worst case (title + blurb
       + 4 stats + note, at the 300px card width) needs ~488px  520px
       was cutting off roughly the last stat row and/or the note line. */
    min-height: 580px;
  }
  .ab-model-card__reveal {
    /* Measured worst-case content needs ~353px at this card width,
       up from the 300px this was clamped to (sized for the much wider
       680px desktop card, where the same text wraps far less). */
    max-height: 380px;
    opacity: 1;
  }
}

/* ============================================================
   INNER PAGE  ABOUT  STRATEGY
   ============================================================ */

.ab-strategy {
  background: var(--color-off-white);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

.ab-strategy .eyebrow         { color: var(--color-brand-secondary); }
.ab-strategy .ab-heading-main { color: var(--color-brand-primary); }

.ab-strategy__header {
  text-align: center;
  max-width: 70%;
  margin: 0 auto 3.5rem;
}

.ab-strategy__body-lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-brand-primary);
  margin-top: 1rem;
}

/*  Strategy pillar cards (hover-expand  marrow.au pattern)  */

.ab-strategy__pillars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-10);
}

/* Wrapper is the scroll-trigger only  don't fade it, animate children instead */
.ab-strategy__pillars.animate-in {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Staggered card entrance via keyframes (no conflict with hover transitions) */
.ab-strategy__pillars.is-visible .ab-strategy__pillar-card {
  animation: st-card-in 600ms cubic-bezier(0.12, 0.23, 0.5, 1) both;
}

.ab-strategy__pillars.is-visible .ab-strategy__pillar-card:nth-child(1) { animation-delay:   0ms; }
.ab-strategy__pillars.is-visible .ab-strategy__pillar-card:nth-child(2) { animation-delay: 100ms; }
.ab-strategy__pillars.is-visible .ab-strategy__pillar-card:nth-child(3) { animation-delay: 200ms; }
.ab-strategy__pillars.is-visible .ab-strategy__pillar-card:nth-child(4) { animation-delay: 300ms; }
.ab-strategy__pillars.is-visible .ab-strategy__pillar-card:nth-child(5) { animation-delay: 400ms; }

@keyframes st-card-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ab-strategy__pillars.is-visible .ab-strategy__pillar-card {
    animation: none;
    opacity: 1;
  }
}

/*
 * Card  CSS grid-template-rows technique for smooth height animation.
 * Row 1 (auto): header  always visible
 * Row 2 (0fr à 1fr): body  hidden at rest, expands on hover
 */
.ab-strategy__pillar-card {
  opacity: 0; /* keyframe animation sets final opacity via fill-mode: both */
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 0fr;
  transition: grid-template-rows 400ms cubic-bezier(0.12, 0.23, 0.5, 1),
              box-shadow var(--transition-base);
}

.ab-strategy__pillar-card:hover,
.ab-strategy__pillar-card:focus-within {
  grid-template-rows: auto 1fr;
  box-shadow: var(--shadow-md);
}

/* Decorative symbol  top right, purely visual, static at 0.1 opacity always */
.ab-strategy__pillar-card__symbol {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100px;
  height: 100px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.ab-strategy__pillar-card__symbol img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Card header  always visible */
.ab-strategy__pillar-card__header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  position: relative;
  z-index: 1;
  min-height: 120px;
}

.ab-strategy__pillar-card__title {
  font-family: var(--font-base);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  line-height: var(--leading-xl);
  margin: 0;
}

/* Arrow  navy at rest, green on card hover, pointer-events none (hover is on card) */
.ab-strategy__pillar-card__arrow {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  flex-shrink: 0;
  align-self: flex-start;
  pointer-events: none;
  transition: background var(--transition-base);
}

.ab-strategy__pillar-card:hover .ab-strategy__pillar-card__arrow,
.ab-strategy__pillar-card:focus-within .ab-strategy__pillar-card__arrow {
  background: var(--color-accent-green);
  color: var(--color-white);
}

.ab-strategy__pillar-card__arrow svg {
  transition: transform 400ms cubic-bezier(0.12, 0.23, 0.5, 1);
}

.ab-strategy__pillar-card:hover .ab-strategy__pillar-card__arrow svg,
.ab-strategy__pillar-card:focus-within .ab-strategy__pillar-card__arrow svg {
  transform: rotate(90deg);
}

/* Body  hidden in 0fr row, fades in after 150ms delay */
.ab-strategy__pillar-card__body {
  overflow: hidden;
  opacity: 0;
  position: relative;
  z-index: 1;
  transition: opacity 400ms cubic-bezier(0.12, 0.23, 0.5, 1) 150ms;
}

.ab-strategy__pillar-card:hover .ab-strategy__pillar-card__body,
.ab-strategy__pillar-card:focus-within .ab-strategy__pillar-card__body {
  opacity: 1;
}

.ab-strategy__pillar-card__body p {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text-body);
  padding-top: var(--space-5);
}

/* Touch tap-to-expand (JS adds .is-expanded) */
.ab-strategy__pillar-card.is-expanded {
  grid-template-rows: auto 1fr;
  box-shadow: var(--shadow-md);
}

.ab-strategy__pillar-card.is-expanded .ab-strategy__pillar-card__body {
  opacity: 1;
}

.ab-strategy__pillar-card.is-expanded .ab-strategy__pillar-card__arrow {
  background: var(--color-accent-green);
  color: var(--color-white);
}

.ab-strategy__pillar-card.is-expanded .ab-strategy__pillar-card__arrow svg {
  transform: rotate(90deg);
}

@media (max-width: 1200px) {
  .ab-strategy__pillars {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .ab-strategy__header {
    text-align: left;
  }
  .ab-strategy__pillars {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}

@media (max-width: 480px) {
  .ab-strategy__pillars {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   INNER PAGE  ABOUT  WHERE WE OPERATE MAP
   ============================================================ */

/*
 * Width is capped so the derived height never exceeds (100vh - 220px).
 * 220px covers: section heading block + stage margin + divisions strip.
 * 1.5456 = 1000/647 (SVG viewBox aspect ratio).
 * When the viewport is short the svg-wrap narrows; when tall it fills 100%.
 * Because the wrapper always matches the 1000:647 ratio, hotspot % positions
 * stay correctly aligned over the map content at every viewport height.
 */

/* Base map styles */
.ab-map__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ab-map__svg path {
  fill: #e4e4e4;
  stroke: #ffffff;
  stroke-width: 0.5;
  stroke-linejoin: round;
  fill-rule: evenodd;
  transition: fill 0.2s;
  cursor: default;
}

/*  AUSTRALASIA  */
.ab-map__svg path[data-id="AU"],
.ab-map__svg path[data-id="NZ"] {
  fill: var(--color-division-australasia);
  cursor: pointer;
}

/*  UNITED KINGDOM  */
.ab-map__svg path[data-id="GB"] {
  fill: var(--color-division-uk);
  cursor: pointer;
}

/*  EUROPE  */
.ab-map__svg path[data-id="NL"],
.ab-map__svg path[data-id="BE"],
.ab-map__svg path[data-id="CZ"],
.ab-map__svg path[data-id="SK"],
.ab-map__svg path[data-id="PL"],
.ab-map__svg path[data-id="LT"],
.ab-map__svg path[data-id="EE"],
.ab-map__svg path[data-id="LV"],
.ab-map__svg path[data-id="IT"],
.ab-map__svg path[data-id="ES"],
.ab-map__svg path[data-id="PT"],
.ab-map__svg path[data-id="DE"],
.ab-map__svg path[data-id="AT"],
.ab-map__svg path[data-id="HU"],
.ab-map__svg path[data-id="FR"] {
  fill: var(--color-division-europe);
  cursor: pointer;
}

/*  EMERGING MARKETS  */
.ab-map__svg path[data-id="ZA"],
.ab-map__svg path[data-id="AE"],
.ab-map__svg path[data-id="SG"],
.ab-map__svg path[data-id="MY"],
.ab-map__svg path[data-id="CN"],
.ab-map__svg path[data-id="CL"],
.ab-map__svg path[data-id="BR"],
.ab-map__svg path[data-id="AR"],
.ab-map__svg path[data-id="TR"],
.ab-map__svg path[data-id="BH"],
.ab-map__svg path[data-id="SA"],
.ab-map__svg path[data-id="VN"] {
  fill: var(--color-division-emerging);
  cursor: pointer;
}

/* Hover: lighten any coloured country */
.ab-map__svg path[data-id="AU"]:hover,
.ab-map__svg path[data-id="NZ"]:hover,
.ab-map__svg path[data-id="GB"]:hover,
.ab-map__svg path[data-id="NL"]:hover,
.ab-map__svg path[data-id="BE"]:hover,
.ab-map__svg path[data-id="CZ"]:hover,
.ab-map__svg path[data-id="SK"]:hover,
.ab-map__svg path[data-id="PL"]:hover,
.ab-map__svg path[data-id="LT"]:hover,
.ab-map__svg path[data-id="EE"]:hover,
.ab-map__svg path[data-id="LV"]:hover,
.ab-map__svg path[data-id="IT"]:hover,
.ab-map__svg path[data-id="ES"]:hover,
.ab-map__svg path[data-id="PT"]:hover,
.ab-map__svg path[data-id="DE"]:hover,
.ab-map__svg path[data-id="AT"]:hover,
.ab-map__svg path[data-id="HU"]:hover,
.ab-map__svg path[data-id="FR"]:hover,
.ab-map__svg path[data-id="ZA"]:hover,
.ab-map__svg path[data-id="AE"]:hover,
.ab-map__svg path[data-id="SG"]:hover,
.ab-map__svg path[data-id="MY"]:hover,
.ab-map__svg path[data-id="CN"]:hover,
.ab-map__svg path[data-id="CL"]:hover,
.ab-map__svg path[data-id="BR"]:hover,
.ab-map__svg path[data-id="AR"]:hover,
.ab-map__svg path[data-id="TR"]:hover,
.ab-map__svg path[data-id="SA"]:hover,
.ab-map__svg path[data-id="VN"]:hover {
  opacity: 0.75;
}

.ab-map__hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem;
  z-index: 10;
}

@keyframes hotspot-pulse {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

.ab-map__tooltip-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0.25rem;
}

.ab-map__tooltip-region {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 0.4rem;
}

.ab-map__tooltip-headline {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-brand-primary);
  margin: 0 0 1rem;
  line-height: 1.2;
}

.ab-map__tooltip-stats {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ab-map__tooltip-stats li {
  font-size: 0.85rem;
  color: var(--color-text-body);
}

.ab-map__tooltip-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-brand-primary);
  text-decoration: none;
}

.ab-map__tooltip-link:hover { text-decoration: underline; }

.ab-map__division {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-right: 1px solid rgba(0,0,0,0.08);
  cursor: pointer;
  transition: background 0.2s;
}

.ab-map__division:last-child { border-right: none; }
.ab-map__division:hover { background: rgba(0,0,0,0.03); }

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

/* ============================================================
   INNER PAGE  ABOUT  ESG QUOTE (Mowi-style)
   ============================================================ */

.ab-esg-quote {
  position: relative;
  overflow: hidden;
}

/* Full-width background image */
.ab-esg-quote__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ab-esg-quote__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Subtle overlay so text remains legible */
.ab-esg-quote__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.82) 38%,
    rgba(255,255,255,0.92) 100%
  );
}

/* Main row: photo left, text right */
.ab-esg-quote__main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: flex-start;
  min-height: 520px;
  width: 80%;
  padding-top: 6rem;
  gap: var(--space-12);
}

/* Photo  sits flush at the bottom of the section */
.ab-esg-quote__photo {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.ab-esg-quote__photo-img {
  display: block;
  max-height: 500px;
  width: auto;
  object-fit: cover;
  object-position: bottom center;
}

/* Text content */
.ab-esg-quote__content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  justify-content: center;
}

/* Large quote text */
.ab-esg-quote__quote {
  font-family: var(--font-body);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: var(--weight-normal);
  line-height: 1.45;
  color: var(--color-brand-primary);
  margin: 0;
}

/* Attribution */
.ab-esg-quote__attribution {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ab-esg-quote__attribution strong {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-brand-primary);
  display: block;
}

.ab-esg-quote__attribution span {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* Supporting body paragraph */
.ab-esg-quote__body {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-body);
  margin: 0;
  max-width: 480px;
}

/* CTA bar  green strip at the bottom */
/* Mobile */
@media (max-width: 768px) {
  .ab-esg-quote__main {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 2.5rem;
    padding-bottom: 0;
  }

  .ab-esg-quote__photo {
    justify-content: center;
    max-height: 320px;
    overflow: hidden;
  }

  .ab-esg-quote__photo-img {
    max-height: 320px;
  }

  .ab-esg-quote__bg-overlay {
    background: rgba(255,255,255,0.88);
  }
}

/* ============================================================
   INNER PAGE  OUR BUSINESS  OWN BRAND STRATEGY (ob-ob-)
   ============================================================ */

/*  Intro section  */
.ob-own-brand-intro {
  background: var(--color-white);
  padding: 5rem 0;
}

.ob-own-brand-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  margin-top: 1.5rem;
}

@media (max-width: 900px) {
  .ob-own-brand-grid { grid-template-columns: 1fr; }
}

/*  Intro image  */
.ob-own-brand-intro__img-wrap {
  margin-top: 2rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-off-white);
}

.ob-own-brand-intro__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ob-own-brand-intro__img-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-off-white);
  min-height: 220px;
  border-radius: var(--radius-lg);
}

/*  Stats strip  */
.ob-ob-stats {
  background: var(--color-brand-primary);
  padding: var(--space-16) 0;
}

.ob-ob-stats__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255,255,255,0.1);
}

.ob-ob-stats .hp-glance__stat-number { color: var(--color-white); }
.ob-ob-stats .hp-glance__stat-label  { color: rgba(255,255,255,0.45); }

@media (max-width: 1024px) {
  .ob-ob-stats__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .ob-ob-stats__grid { grid-template-columns: repeat(2, 1fr); }
}

/*  Why Own Brand pillars  */
.ob-ob-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.ob-ob-pillar {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 2rem 1.75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ob-ob-pillar__num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: rgba(31,19,70,0.07);
  line-height: 1;
}

.ob-ob-pillar__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-brand-primary);
  margin: 0;
}

.ob-ob-pillar__body {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-text-body);
  margin: 0;
}

@media (max-width: 900px) {
  .ob-ob-pillars__grid { grid-template-columns: 1fr; }
}

/*  Brand logo track  */
.ob-ob-brands {
  background: var(--color-white);
  padding: 5rem 0;
}

.ob-ob-brands__intro {
  max-width: 600px;
  color: var(--color-text-body);
  margin-top: 0.75rem;
  margin-bottom: 2.5rem;
}

.ob-ob-brands__track {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.5rem 0 2rem;
  padding-left: calc((100vw - 1200px) / 2 + 1.5rem);
  padding-right: calc((100vw - 1200px) / 2 + 1.5rem);
  -webkit-mask-image: linear-gradient(
    to right, transparent 0%, black 3%, black 90%, transparent 100%
  );

  mask-image: linear-gradient(
    to right, transparent 0%, black 3%, black 90%, transparent 100%
  );
  cursor: grab;
}

.ob-ob-brands__track.is-grabbing { cursor: grabbing; }
.ob-ob-brands__track::-webkit-scrollbar { display: none; }

.ob-ob-brand-card {
  flex-shrink: 0;
  width: 180px;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  transition: box-shadow 0.2s, transform 0.2s;
}

.ob-ob-brand-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.ob-ob-brand-card__logo-wrap {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-off-white);
  border-radius: var(--radius-sm);
  overflow: hidden;
  padding: 0.5rem;
}

.ob-ob-brand-card__logo {
  max-width: 100%;
  max-height: 48px;
  object-fit: contain;
  display: block;
}

.ob-ob-brand-card__logo-placeholder {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-brand-primary);
  text-align: center;
  padding: 0.25rem;
  line-height: 1.3;
}

.ob-ob-brand-card__name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-brand-primary);
  margin: 0;
  line-height: 1.3;
}

.ob-ob-brand-card__market {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ob-ob-brands__note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  max-width: 560px;
  margin-top: 0;
  font-style: italic;
}

@media (max-width: 768px) {
  .ob-ob-brands__track {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/*  Sustainability section  */
.ob-ob-sustain {
  background: var(--color-brand-primary);
  padding: var(--space-20) 0;
}

.ob-ob-sustain__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.ob-ob-sustain .eyebrow { color: var(--color-accent-green); }
.ob-ob-sustain h2       { color: var(--color-white); }
.ob-ob-sustain p        { color: rgba(255,255,255,0.75); }

.ob-ob-sustain__list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ob-ob-sustain__list li {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.55;
  padding-left: 1.25rem;
  position: relative;
}

.ob-ob-sustain__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent-green);
}

.ob-ob-sustain__list strong {
  color: var(--color-white);
  font-weight: 700;
}

.ob-ob-sustain__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: rgba(255,255,255,0.06);
}

.ob-ob-sustain__img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 300px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ob-ob-sustain__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
}

@media (max-width: 900px) {
  .ob-ob-sustain__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .ob-ob-sustain__image { display: none; }
}

/* ============================================================
   GRAIN TEXTURE  SECTION-LEVEL SELF-CONTAINED RULES
   Pattern: ::before pseudo-element at z-index 0,
   named children lifted to z-index 1.
   No > * selector used anywhere.
   ============================================================ */

/*  hp-glance (homepage  already has hp-grain class)  */
.hp-glance .container {
  position: relative;
  z-index: 1;
}

/*  ab-value (about  value creation)  */
.ab-value {
  padding: var(--space-16) 0;
  background: var(--color-bg-section-alt);
  position: relative;
  overflow: hidden;
}
.ab-value::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 800px 800px;
  background-repeat: repeat;
}
.ab-value .container,
.ab-value__heading-wrap {
  position: relative;
  z-index: 1;
}

/*  ab-esg-quote (about  Ashley Biggs quote) 
   Already has position:relative; overflow:hidden           */
.ab-esg-quote::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 800px 800px;
  background-repeat: repeat;
}
.ab-esg-quote .container,
.ab-esg-quote__main {
  position: relative;
  z-index: 1;
}

/*  lt-ned (leadership  NED grid)  */
.lt-ned {
  padding: var(--section-padding-y) 0;
  position: relative;
  /* overflow:visible (explicit, not just omitted)  the director cards
     expand into an absolutely positioned overlay on hover
     (.lt-director-card__expand) that needs to be able to pop out past
     the section's own box, particularly for the last row of cards. The
     decorative noise background below is inset:0 so it self-clips to
     this section regardless. Explicit because a stale cached/minified
     build of this file elsewhere in the deploy can still carry the old
     overflow:hidden  if this rule only ever omitted the property
     instead of overriding it, the stale declaration wins the cascade. */
  overflow: visible;
  /* Sections are unpositioned siblings in normal flow, so without this
     the next section (.lt-management, later in the DOM) paints on top
     of any content from this section that overflows into its space
     which is exactly what the last row's hover overlay does. An
     explicit z-index makes this section (and everything overflowing
     out of it) stack above the next one. */
  z-index: 2;
}
.lt-ned::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 800px 800px;
  background-repeat: repeat;
}
.lt-ned .container {
  position: relative;
  z-index: 1;
}

/*  lt-management (leadership  senior management)  */
.lt-management {
  padding: var(--space-16) 0 0;
  background: var(--color-bg-section-alt);
  position: relative;
  overflow: hidden;
}
.lt-management::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 800px 800px;
  background-repeat: repeat;
}
.lt-management .container {
  position: relative;
  z-index: 1;
}

/*  lt-media (leadership  media section)  */
.lt-media {
  padding: var(--section-padding-y) 0;
  position: relative;
  overflow: hidden;
}
.lt-media::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 800px 800px;
  background-repeat: repeat;
}
.lt-media .container {
  position: relative;
  z-index: 1;
}

/*  cg-framework (governance)  */
.cg-framework {
  padding: var(--section-padding-y) 0;
  position: relative;
  overflow: hidden;
}
.cg-framework::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 800px 800px;
  background-repeat: repeat;
}
.cg-framework .container {
  position: relative;
  z-index: 1;
}

/*  cg-board (governance)  */
.cg-board {
  padding: var(--section-padding-y) 0;
  position: relative;
  overflow: hidden;
}
.cg-board::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 800px 800px;
  background-repeat: repeat;
}
.cg-board .container {
  position: relative;
  z-index: 1;
}

/*  cg-committees (governance)  */
.cg-committees {
  padding: var(--section-padding-y) 0;
  position: relative;
  overflow: hidden;
}
.cg-committees::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 800px 800px;
  background-repeat: repeat;
}
.cg-committees .container {
  position: relative;
  z-index: 1;
}

/*  cg-activity (governance)  */
.cg-activity {
  padding: var(--section-padding-y) 0;
  position: relative;
  overflow: hidden;
}
.cg-activity::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 800px 800px;
  background-repeat: repeat;
}
.cg-activity .container {
  position: relative;
  z-index: 1;
}

/*  cg-docs (governance)  */
.cg-docs {
  padding: var(--section-padding-y) 0;
  position: relative;
  overflow: hidden;
}
.cg-docs::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 800px 800px;
  background-repeat: repeat;
}
.cg-docs .container {
  position: relative;
  z-index: 1;
}

/*  ob-ob-pillars (own brand  already has hp-grain class)  */
.ob-ob-pillars .container {
  position: relative;
  z-index: 1;
}

/* ============================================================
   INNER PAGE  DIVISIONAL PAGES (div-)
   ============================================================ */

/*  Intro section  */
.div-intro {
  background: var(--color-white);
  padding: var(--section-padding-y) 0;
}

.div-intro__inner {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-16);
  align-items: start;
}

.div-intro__text h2 {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  line-height: 1.2;
  margin: var(--space-3) 0 var(--space-6);
}

.div-intro__text p {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--color-text-body);
  margin-bottom: var(--space-5);
}

.div-intro__text p:last-of-type {
  margin-bottom: 0;
}

/* Intro image */
.div-intro__image { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.div-intro__img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .div-intro__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .div-intro__image { aspect-ratio: 16 / 7; }
}

/*  Full-width image band  */
.div-image-band {
  width: 100%;
  height: 420px;
  overflow: hidden;
  line-height: 0;
}

.div-image-band__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 640px) {
  .div-image-band {
    height: 240px;
  }
}

/*  Stats strip (navy)  */
.div-stats {
  background: var(--color-brand-primary);
  padding: var(--space-16) 0;
  position: relative;
  overflow: hidden;
}

.div-stats .eyebrow {
  color: rgba(255,255,255,0.55);
  display: block;
  margin-bottom: var(--space-6);
}

.div-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255,255,255,0.1);
}

.div-stats .hp-glance__stat-number {
  color: var(--color-white);
}

.div-stats .hp-glance__stat-label {
  color: rgba(255,255,255,0.45);
}

@media (max-width: 768px) {
  .div-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
}

.div-stats__grid--2col { grid-template-columns: repeat(2, 1fr); max-width: 600px; }

/*  Hero two-column layout  */
.div-hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  padding-bottom: var(--space-16);
  padding-top: calc(var(--ticker-height) + var(--header-height));
  width: 100%;
}
.div-hero__text { flex: 1; }
.div-hero__card { flex-shrink: 0; }
@media (max-width: 1024px) {
  .div-hero__card { display: none; }
  .div-hero__inner { padding-bottom: var(--space-10); }
}

/*  CEO card  */
.div-ceo-card {
  display: flex; align-items: center; gap: var(--space-4);
  margin: var(--space-5) 0; padding: var(--space-4) var(--space-5);
  background: rgba(255,255,255,0.6); border-radius: var(--radius-md);
  backdrop-filter: blur(4px);
}
.div-ceo-card__photo {
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.div-ceo-card__photo-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.div-ceo-card__initials { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-bold); color: rgba(255,255,255,0.9); letter-spacing: 0.04em; }
.div-ceo-card__name { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--color-brand-primary); margin: 0; line-height: 1.2; }
.div-ceo-card__role { font-size: var(--text-xs); color: var(--color-text-muted); margin: var(--space-1) 0 0; line-height: 1.3; }

/*  News section  */
.div-news {
  background: var(--color-white);
  padding: var(--section-padding-y) 0;
}

.div-news .hp-news__header {
  margin-bottom: var(--space-10);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.div-news .hp-news__header h2 {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  margin: 0;
}

/* ============================================================
   36. INNER PAGE  SENS / REGULATORY NEWS
   ============================================================ */

.sens-feed {
  padding: var(--section-padding-y) 0;
  background: var(--color-white);
}

.sens-feed__filter {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.sens-filter-btn {
  padding: var(--space-2) var(--space-4);

  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-full);
  background: transparent;
  font-size: var(--text-sm);
  font-family: var(--font-body);
  color: var(--color-brand-primary);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.sens-filter-btn:hover,
.sens-filter-btn.is-active {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-white);
}

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

.sens-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4) var(--space-6);
  align-items: start;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.sens-item__date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  padding-top: 2px;
  min-width: 90px;
}

.sens-item__body { min-width: 0; }

.sens-item__tag {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
  background: rgba(31,19,70,0.08);
  color: var(--color-brand-primary);
}

.sens-item__tag--results { background: rgba(121,191,67,0.15); color: #3a7000; }
.sens-item__tag--distribution { background: rgba(24,74,135,0.12); color: var(--color-brand-secondary); }
.sens-item__tag--trading { background: rgba(226,164,74,0.15); color: #7a4800; }
.sens-item__tag--governance { background: rgba(147,201,187,0.2); color: #1d6050; }

.sens-item__title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  margin: 0 0 var(--space-1);
}

.sens-item__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.sens-item__action a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-brand-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.sens-item__action a:hover { text-decoration: underline; }

.sens-jse-banner {
  background: var(--color-brand-primary);
  padding: var(--space-12) 0;
}

.sens-jse-banner .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.sens-jse-banner__body { min-width: 0; }

.sens-jse-banner__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-green);
  margin-bottom: var(--space-2);
}

.sens-jse-banner__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-white);
  margin: 0 0 var(--space-3);
}

.sens-jse-banner__sub {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.7);
  margin: 0;
  max-width: 480px;
}

@media (max-width: 768px) {
  .sens-item { grid-template-columns: 1fr; }
  .sens-item__date { min-width: auto; }
  .sens-jse-banner .container { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   37. INNER PAGE  10-YEAR PERFORMANCE
   ============================================================ */

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

/* ============================================================
   38. INNER PAGE  PORTFOLIO OVERVIEW
   ============================================================ */

.po-intro {
  padding: var(--section-padding-y) 0;
  background: var(--color-off-white);
}

.po-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

.po-intro__lead {
  font-size: var(--text-xl);
  font-weight: var(--weight-light);
  color: var(--color-brand-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
}

.po-group-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.po-group-stat {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
  border-bottom: 3px solid var(--color-accent-green);
}

.po-group-stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  line-height: 1.1;
  margin-bottom: var(--space-1);
}

.po-group-stat__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.po-divisions {
  padding: var(--section-padding-y) 0;
  background: var(--color-white);
}

.po-divisions__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.po-div-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  transition: box-shadow var(--transition-base);
}

.po-div-card:hover { box-shadow: var(--shadow-lg); }

.po-div-card__hero {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.po-div-card__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.po-div-card__badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  background: var(--color-brand-primary);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.po-div-card__body {
  padding: var(--space-6);
}

.po-div-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  margin: 0 0 var(--space-2);
}

.po-div-card__lead {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  margin: 0 0 var(--space-5);
  line-height: var(--leading-base);
}

.po-div-card__bar-wrap {
  margin-bottom: var(--space-3);
}

.po-div-card__bar-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.po-div-card__bar-track {
  height: 6px;
  background: var(--color-border-light);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.po-div-card__bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-brand-secondary);
}

.po-div-card__stats {
  display: flex;
  gap: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
  margin-top: var(--space-4);
}

.po-div-card__stat { min-width: 0; }

.po-div-card__stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
}

.po-div-card__stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.po-div-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-brand-secondary);
  text-decoration: none;
  margin-top: var(--space-4);
}

.po-div-card__link:hover { text-decoration: underline; }

.po-strategy {
  padding: var(--section-padding-y) 0;
  background: var(--color-off-white);
}

.po-strategy__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.po-strategy-pillar {

  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.po-strategy-pillar__icon {
  width: 48px;
  height: 48px;
  background: rgba(121,191,67,0.12);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  color: #3a7000;
}

.po-strategy-pillar h3 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  margin: 0 0 var(--space-2);
}

.po-strategy-pillar p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-base);
  margin: 0;
}

@media (max-width: 900px) {
  .po-intro__grid { grid-template-columns: 1fr; }
  .po-divisions__grid { grid-template-columns: 1fr; }
  .po-strategy__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .po-strategy__grid { grid-template-columns: 1fr; }
  .po-group-stats { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   39. INNER PAGE  SHAREHOLDER HUB
   ============================================================ */

.sh-price {
  padding: var(--section-padding-y) 0;
  background: var(--color-brand-primary);
}

.sh-price__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-10);
  align-items: start;
}

.sh-price-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
}

.sh-price-card__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;

  letter-spacing: 0.1em;
  color: var(--color-accent-green);
  margin-bottom: var(--space-3);
}

.sh-price-card__value {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  margin-bottom: var(--space-2);
  line-height: 1;
}

.sh-price-card__note {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-5);
}

.sh-price-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: var(--space-4);
  margin-top: var(--space-2);
}

.sh-price-card__detail {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
}

.sh-price-card__detail dt { color: rgba(255,255,255,0.5); }
.sh-price-card__detail dd { color: var(--color-white); font-weight: var(--weight-bold); }

.sh-price__body { min-width: 0; }

.sh-price__body h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-white);
  margin: 0 0 var(--space-3);
}

.sh-price__body p {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.7);
  line-height: var(--leading-base);
  margin-bottom: var(--space-4);
}

.sh-contacts {
  padding: var(--section-padding-y) 0;
  background: var(--color-off-white);
}

.sh-contacts__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.sh-contact-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border-top: 3px solid var(--color-brand-primary);
}

.sh-contact-card h3 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  margin: 0 0 var(--space-4);
}

.sh-contact-card__row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-body);
}

.sh-contact-card__row svg { flex-shrink: 0; margin-top: 2px; color: var(--color-brand-secondary); }

.sh-contact-card__row a {
  color: var(--color-brand-secondary);
  text-decoration: none;
}

.sh-contact-card__row a:hover { text-decoration: underline; }

.sh-agm {
  padding: var(--section-padding-y) 0;
  background: var(--color-white);
}

.sh-agm__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

.sh-agm__body h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-brand-primary);
  margin: 0 0 var(--space-3);
}

.sh-agm__body p {
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: var(--leading-base);
  margin-bottom: var(--space-3);
}

.sh-agm__meta {

  background: var(--color-off-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.sh-agm__meta h3 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  margin: 0 0 var(--space-4);
}

.sh-agm-detail {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--text-sm);
}

.sh-agm-detail:last-child { border-bottom: none; }

.sh-agm-detail__label {
  flex: 0 0 110px;
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
}

.sh-agm-detail__value {
  color: var(--color-text-body);
}

@media (max-width: 900px) {
  .sh-price__grid { grid-template-columns: 1fr; }
  .sh-contacts__grid { grid-template-columns: 1fr; }
  .sh-agm__inner { grid-template-columns: 1fr; }
}

/* ============================================================
   40. INNER PAGE  SHAREHOLDER FAQ
   ============================================================ */

.shrfaq-intro {
  padding: var(--section-padding-y) 0;
  background: var(--color-off-white);
}

.shrfaq-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

.shrfaq-intro__sidebar h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-brand-primary);
  margin: 0 0 var(--space-3);
}

.shrfaq-body {
  padding: var(--section-padding-y) 0;
  background: var(--color-white);
}

.shrfaq-category {
  margin-bottom: var(--space-12);
}

.shrfaq-category:last-child { margin-bottom: 0; }

.shrfaq-category__heading {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-green);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-accent-green);
  display: inline-block;
}

.shrfaq-contact {
  background: var(--color-brand-primary);
  padding: var(--space-16) 0;
}

.shrfaq-contact .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.shrfaq-contact__body h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-white);
  margin: 0 0 var(--space-2);
}

.shrfaq-contact__body p {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.7);
  margin: 0;
}

@media (max-width: 768px) {
  .shrfaq-intro__grid { grid-template-columns: 1fr; }
  .shrfaq-contact .container { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   41. INNER PAGE  ESG ENVIRONMENT
   ============================================================ */

.env-metrics {
  padding: var(--section-padding-y) 0;
  background: var(--color-brand-primary);
}

.env-pillar {
  padding: var(--section-padding-y) 0;
}

.env-pillar--alt { background: var(--color-off-white); }

.env-pillar__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

.env-pillar__grid--reverse { direction: rtl; }
.env-pillar__grid--reverse > * { direction: ltr; }

.env-pillar__body h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-brand-primary);
  margin: 0 0 var(--space-4);
}

.env-pillar__body p {
  color: var(--color-text-body);
  line-height: var(--leading-base);
  margin-bottom: var(--space-3);
}

.env-pillar__img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
}

.env-pillar__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.env-highlight-stat {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  background: rgba(121,191,67,0.1);
  border: 1px solid rgba(121,191,67,0.3);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
}

.env-highlight-stat__num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  line-height: 1;
}

.env-highlight-stat__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .env-pillar__grid { grid-template-columns: 1fr; }
  .env-pillar__grid--reverse { direction: ltr; }
}

/* ============================================================
   42. INNER PAGE  ESG SOCIAL IMPACT
   ============================================================ */

.si-intro {
  padding: var(--section-padding-y) 0;
  background: var(--color-off-white);
}

.si-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

.si-intro__lead {
  font-size: var(--text-xl);
  font-weight: var(--weight-light);
  color: var(--color-brand-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
}

.si-programs {
  padding: var(--section-padding-y) 0;
  background: var(--color-white);
}

.si-programs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.si-program-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-light);
}

.si-program-card__img {
  height: 180px;
  overflow: hidden;
}

.si-program-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.si-program-card__body {
  padding: var(--space-5);
}

.si-program-card__tag {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-green);
  margin-bottom: var(--space-2);
}

.si-program-card__title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  margin: 0 0 var(--space-2);
}

.si-program-card__body p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-base);
  margin: 0;
}

@media (max-width: 900px) {
  .si-intro__grid { grid-template-columns: 1fr; }
  .si-programs__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .si-programs__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   43. INNER PAGE  ESG GOVERNANCE
   ============================================================ */

.gov-link-callout {
  background: rgba(24,74,135,0.06);
  border: 1px solid rgba(24,74,135,0.15);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.gov-link-callout h3 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  margin: 0 0 var(--space-2);
}

.gov-link-callout p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}

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

/* ============================================================
   44. INNER PAGE  ESG REPORTING ARCHIVE
   ============================================================ */

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

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

/* ============================================================
   45. INNER PAGE  NEWSROOM / NEWS PAGES
   ============================================================ */

.nm-featured {
  padding: var(--section-padding-y) 0;
  background: var(--color-white);
}

.nm-featured__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.nm-featured-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
}

.nm-featured-card__img {
  height: 300px;
  overflow: hidden;
}

.nm-featured-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nm-featured-card__body {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.nm-featured-card__tag {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-green);
  margin-bottom: var(--space-2);
}

.nm-featured-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-brand-primary);
  margin: 0 0 var(--space-3);
  line-height: var(--leading-snug);
}

.nm-featured-card__excerpt {
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: var(--leading-base);
  margin: 0 0 auto;
  padding-bottom: var(--space-4);
}

.nm-featured-card__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.nm-sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.nm-sidebar-item {
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: var(--space-4);
}

.nm-sidebar-item:last-child { border-bottom: none; padding-bottom: 0; }

.nm-sidebar-item__tag {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-accent-green);
  margin-bottom: var(--space-1);
}

.nm-sidebar-item__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-1);
}

.nm-sidebar-item__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.nm-grid {
  padding: var(--section-padding-y) 0;
  background: var(--color-off-white);
}

.nm-grid__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.nm-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-base);
}

.nm-card:hover { box-shadow: var(--shadow-lg); }

.nm-card__img {
  height: 180px;
  overflow: hidden;
}

.nm-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nm-card__body {
  padding: var(--space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.nm-card__tag {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-accent-green);
  margin-bottom: var(--space-2);
}

.nm-card__title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-snug);
}

.nm-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-base);
  margin: 0 0 auto;
  padding-bottom: var(--space-3);
}

.nm-card__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
  margin-top: var(--space-2);
}

@media (max-width: 900px) {
  .nm-featured__grid { grid-template-columns: 1fr; }
  .nm-grid__cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .nm-grid__cards { grid-template-columns: 1fr; }
}

.nm-subnav {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border-light);
  position: sticky;
  top: 72px;
  z-index: 10;
}

.nm-subnav__inner {
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.nm-subnav__link {
  display: block;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.nm-subnav__link:hover { color: var(--color-brand-primary); }

.nm-subnav__link--active {
  color: var(--color-brand-primary);
  border-bottom-color: var(--color-accent-green);
  font-weight: var(--weight-bold);
}

/* ============================================================
   46. INNER PAGE  CONTACT
   ============================================================ */

.ct-contacts {
  padding: var(--section-padding-y) 0;
  background: var(--color-white);
}

.ct-contacts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.ct-contact-card {
  background: var(--color-off-white);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  border-top: 3px solid var(--color-brand-secondary);
}

.ct-contact-card h3 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  margin: 0 0 var(--space-4);
}

.ct-contact-card__row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-body);
}

.ct-contact-card__row svg { flex-shrink: 0; margin-top: 2px; color: var(--color-brand-secondary); }

.ct-contact-card__row a {
  color: var(--color-brand-secondary);
  text-decoration: none;
}

.ct-contact-card__row a:hover { text-decoration: underline; }

.ct-form-section {
  padding: var(--section-padding-y) 0;
  background: var(--color-off-white);
}

.ct-form-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

.ct-form-section__intro p {
  color: var(--color-text-body);
  line-height: var(--leading-base);
  margin-bottom: var(--space-4);
}

.ct-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ct-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ct-form__group label {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
}

.ct-form__group input,
.ct-form__group textarea,
.ct-form__group select {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-brand-primary);
  background: var(--color-white);
  transition: border-color var(--transition-fast);
}

.ct-form__group input:focus,
.ct-form__group textarea:focus,
.ct-form__group select:focus {
  outline: none;
  border-color: var(--color-brand-secondary);
  box-shadow: 0 0 0 3px rgba(24,74,135,0.12);
}

.ct-form__group textarea {
  resize: vertical;
  min-height: 120px;
}

.ct-map {
  padding: var(--section-padding-y) 0;
  background: var(--color-white);
}

.ct-map__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

.ct-map__placeholder {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-off-white);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--color-border-light);
}

.ct-map__placeholder p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.ct-map__address h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-brand-primary);
  margin: 0 0 var(--space-4);
}

.ct-map__address address {
  font-style: normal;
  color: var(--color-text-body);
  line-height: var(--leading-base);
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
}

@media (max-width: 900px) {
  .ct-contacts__grid { grid-template-columns: 1fr 1fr; }
  .ct-form-section__grid { grid-template-columns: 1fr; }
  .ct-map__grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .ct-contacts__grid { grid-template-columns: 1fr; }
}

/* 
   47. INNER PAGE  MEDIA ASSETS (ma-)
    */

.ct-segment-cta {
  display: inline-block;
  margin-top: var(--space-5);
}

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

/* ============================================================
   10-YEAR PERFORMANCE PAGE
   Prefix: perf-
   ============================================================ */

/*  Sticky controls bar  */
.perf-controls {
  position: sticky;
  top: calc(var(--ticker-height) + var(--header-height));
  z-index: var(--z-above);
  background: var(--color-bg-white);
  border-bottom: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
  padding-block: var(--space-3);
}

.perf-controls .container {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.perf-controls__group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.perf-controls__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.perf-controls__pills {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.perf-controls__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.perf-controls__reset {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--color-text-muted);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-4);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.perf-controls__reset:hover,
.perf-controls__reset:focus-visible {
  color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  outline: 2px solid var(--color-brand-secondary);
  outline-offset: 2px;
}

/*  Pills (shared: period + segment toggles)  */
.perf-pill {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--color-text-body);
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-4);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.perf-pill:hover,
.perf-pill:focus-visible {
  border-color: var(--color-brand-primary);
  outline: 2px solid var(--color-brand-secondary);
  outline-offset: 2px;
}

.perf-pill--active {
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-brand-primary);
}

.perf-pill--active,
.perf-pill--active:hover {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-text-inverse);
  font-weight: 600;
}

/*  Year highlight badge  */
.perf-year-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
}

.perf-year-badge__clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0;
  line-height: 1;
  font-size: 1em;
}

.perf-year-badge__clear:hover { color: var(--color-brand-primary); }

/*  Graph sections  */
.perf-section {
  padding-block: var(--space-16);
  border-bottom: 1px solid var(--color-border-light);
}

.perf-section:last-of-type { border-bottom: none; }

.perf-graph-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}

.perf-graph-title {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  line-height: 1.3;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.perf-graph-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.perf-chart-wrap {
  min-height: 360px;
  position: relative;
}

.perf-chart-wrap--loading::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--color-off-white) 25%, #e8e8e8 50%, var(--color-off-white) 75%);
  background-size: 200% 100%;
  animation: perf-shimmer 1.4s ease infinite;
}

@keyframes perf-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .perf-chart-wrap--loading::after { animation: none; background: var(--color-off-white); }
}

.perf-graph-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  line-height: var(--leading-base);
}

.perf-graph-note a { color: var(--color-text-link); }
.perf-graph-note a:hover { color: var(--color-text-link-hover); }

/*  CAGR badges  */
.perf-cagr-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-brand-primary);
}

.perf-cagr-badge strong {
  display: inline-flex;
  align-items: center;
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  font-weight: var(--weight-bold);
  font-size: 0.8125rem;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  letter-spacing: 0.01em;
  font-family: var(--font-body);
}

.perf-cagr-badge__dot {
  color: var(--color-border);
  margin-inline: var(--space-1);
}

/*  Definition metric labels & tooltips  */
.metric-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.metric-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px;
  border-radius: 50%;
  transition: color var(--transition-fast);
  vertical-align: middle;
}

.metric-info:hover,
.metric-info:focus-visible {
  color: var(--color-brand-secondary);
  outline: 2px solid var(--color-brand-secondary);
  outline-offset: 2px;
}

.metric-tooltip {
  position: absolute;
  z-index: var(--z-overlay);
  max-width: 320px;
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  pointer-events: auto;
}

.metric-tooltip__label {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);

  margin-bottom: var(--space-2);
  color: var(--color-white);
}

.metric-tooltip__body {
  margin: 0;
  color: rgba(255,255,255,0.82);
}

/*  Returns layout (chart + card)  */
.perf-returns-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-8);
  align-items: start;
}

.perf-returns-card {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  min-width: 200px;
}

.perf-returns-card__year {
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.perf-returns-card__metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.perf-returns-card__metric:last-of-type { border-bottom: none; }

.perf-returns-card__metric .metric-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
}

.perf-returns-card__metric .metric-info { color: rgba(255, 255, 255, 0.5); }
.perf-returns-card__metric .metric-info:hover { color: rgba(255, 255, 255, 0.9); }

.perf-returns-card__metric strong {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: var(--weight-bold);
  color: var(--color-white);
  letter-spacing: -0.02em;
  line-height: 1;
}

.perf-returns-card__metric--rofe strong {
  color: var(--color-accent-green);
}

.perf-returns-card__note {
  margin-top: var(--space-4);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
}

/*  Series toggles (Graph 4)  */
.perf-series-toggles {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.perf-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-4);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.perf-toggle--active {
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-brand-primary);
}

.perf-toggle--active .metric-info { color: rgba(255,255,255,0.7); }
.perf-toggle--active .metric-info:hover { color: var(--color-white); }

/*  Share price badge  */
.perf-price-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  flex-wrap: wrap;
}

.perf-price-badge__performance {
  display: inline-flex;
  align-items: center;
  background: rgba(121, 191, 67, 0.12);
  color: #3d6b13;
  border: 1px solid rgba(121, 191, 67, 0.35);
  border-radius: var(--radius-full);
  padding: 3px 10px;
  font-weight: var(--weight-bold);
  font-size: 0.9375rem;
}

.perf-price-badge__divider { color: var(--color-border); }

.perf-price-badge__latest {
  font-weight: 600;
  color: var(--color-brand-primary);
}

.perf-price-badge__date { font-size: var(--text-xs); color: var(--color-text-muted); }

.perf-range-btns {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.perf-range-btn {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--color-text-muted);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-4);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.perf-range-btn:hover,
.perf-range-btn:focus-visible {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
  outline: 2px solid var(--color-brand-secondary);
  outline-offset: 2px;
}

.perf-range-btn--active {
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-brand-primary);
}

/*  Segmental toggle controls  */
.perf-seg-controls {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.perf-seg-toggles {
  display: flex;
  gap: var(--space-2);
}

/*  ApexCharts custom tooltip  */
.perf-tooltip {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  min-width: 200px;
}

.perf-tooltip__year {
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.perf-tooltip__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-1);
  justify-content: space-between;
}

.perf-tooltip__row span { color: rgba(255,255,255,0.72); }
.perf-tooltip__row strong { color: var(--color-white); font-weight: var(--weight-bold); }

.perf-tooltip .perf-tooltip__yoy {
  font-size: var(--text-xs);
  color: var(--color-accent-green);
}

.perf-tooltip__annotation {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.8);
  font-style: italic;
}

.perf-tooltip__annotation-icon {
  margin-right: 4px;
}

/*  Reporting basis accordion  */
.perf-basis {
  padding-block: var(--space-12);
  background: var(--color-off-white);
  border-top: 1px solid var(--color-border-light);
}

.perf-basis__item {
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: 0;
}

.perf-basis__item:first-child { border-top: 1px solid var(--color-border-light); }

.perf-basis__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  cursor: pointer;
  list-style: none;
  gap: var(--space-4);
}

.perf-basis__toggle::-webkit-details-marker { display: none; }

.perf-basis__toggle::after {
  content: '+';
  font-size: 1.25em;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

details[open] > .perf-basis__toggle::after { content: '-'; }

.perf-basis__body {
  padding-bottom: var(--space-6);
  padding-right: var(--space-8);
}

.perf-basis__body p {
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: var(--leading-base);
  margin: 0;
}

.perf-basis__body a { color: var(--color-text-link); }
.perf-basis__body a:hover { color: var(--color-text-link-hover); }

/*  Responsive  */
@media (max-width: 1024px) {
  .perf-returns-layout {
    grid-template-columns: 1fr;
  }

  .perf-returns-card {
    max-width: 480px;
  }
}

@media (max-width: 768px) {
  .perf-controls .container {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .perf-controls__right { margin-left: 0; }

  .perf-chart-wrap { min-height: 260px; }

  .perf-graph-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .perf-returns-card__metric strong {
    font-size: 1.375rem;
  }

  .perf-series-toggles { gap: var(--space-2); }

  .perf-seg-controls {
    flex-direction: column;
    gap: var(--space-3);
  }

  .perf-price-badge {
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-3);
  }

  .perf-basis__toggle { font-size: var(--text-sm); }
}

/* ===== STRATEGY PAGE  CONTINUUM CHART ===== */
/* Rebuilt to match the Annual Integrated Report (AIR): two dotted KDE
   ridgelines, a measuring-tape axis, beeswarm dots, a description table
   and a legend. The old 4-zone layout + year toggles are gone. */

.st-continuum {
  /* AIR colour story  centralised here so no raw hex is scattered through
     the rules below. Navy + green map to brand tokens; teal / coral / grey
     and the band tint are AIR-specific values with no brand token. */
  --ct-navy:     var(--color-brand-primary);   /* F2025 default + Australasia */
  --ct-green:    var(--color-accent-green);     /* United Kingdom */
  --ct-europe:   #5BA3C9;                       /* DESIGN DECISION: AIR Europe teal */
  --ct-emerging: #F07850;                       /* DESIGN DECISION: AIR Emerging Markets coral */
  --ct-grey:     #B0B8C1;                       /* DESIGN DECISION: AIR prior-year (F2024) curve grey */
  --ct-label-grey: #A0A8B0;                     /* DESIGN DECISION: AIR F2024 label grey */
  --ct-band:     rgba(173, 210, 230, 0.25);     /* DESIGN DECISION: AIR highlight-band tint */
  --ct-divider:  var(--color-border-light);     /* table column dividers (#E8E8E8) */

  background: var(--color-off-white);
  padding: var(--space-16) 0;
  position: relative;
}

.st-continuum__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--space-10);
}

.st-continuum__intro {
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: 1.7;
}

/* Division filter  year toggles removed; the years now live as chart labels */
.st-continuum__controls {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-6);
}

.st-continuum__div-filter {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

.st-div-pill {
  padding: 6px 16px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.st-div-pill:hover { border-color: var(--ct-navy); color: var(--ct-navy); }
.st-div-pill--active { background: var(--ct-navy); border-color: var(--ct-navy); color: #fff; }
/* .st-div-pill:hover has higher specificity (class + pseudo-class) than
   .st-div-pill--active (single class), so without this override hovering
   the active pill would flip its text back to navy on its navy background. */
.st-div-pill--active:hover { color: #fff; }

/* Chart card */
.st-continuum__chart-wrap {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6) var(--space-4);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  position: relative;
  margin-bottom: var(--space-5);
}

#ct-svg { display: block; width: 100%; height: auto; }

/* Highlighted margin bands (35%, 810%) */
.ct-band { fill: var(--ct-band); }

/* Dotted KDE ridgelines */
.ct-curve { transition: stroke 0.25s ease; }

/* SVG text */
.ct-tick-label {
  font-family: var(--font-body);
  font-size: 11px;
  fill: var(--color-text-muted);
  text-anchor: middle;
}

.ct-year-label {
  font-family: var(--font-display);
  font-size: 15px;
  dominant-baseline: middle;
}
.ct-year-label--25 { font-weight: 700; }                            /* fill set by JS = active division colour */
.ct-year-label--24 { font-weight: 400; fill: var(--ct-label-grey); }

/* Beeswarm dots  fade in on filter change */
.ct-dot {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ct-dot.is-shown { opacity: 1; }
.ct-dot:not(.is-shown) { pointer-events: none; }   /* filtered-out dots ignore hover/clicks */
.ct-dot circle { cursor: pointer; }
.ct-dot:focus-visible {
  outline: 2px solid var(--ct-green);
  outline-offset: 3px;
}

/* Tooltip */
.st-continuum__tooltip {
  position: absolute;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  max-width: 240px;
  z-index: 20;
  pointer-events: none;
}
.st-continuum__tooltip[hidden] { display: none; }
.st-continuum__tooltip-div {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tip-color, var(--color-brand-primary));
  margin-bottom: var(--space-1);
}
.st-continuum__tooltip-name {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-brand-primary);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}
.st-continuum__tooltip-note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Description table */
/* Description grid  proportional columns aligned to the chart x-axis.
   The wrap shares the chart card's 24px horizontal padding so the grid lives
   in the same coordinate box as the SVG (cardWidth 48px). Label column =
   SVG left margin (80/900); trailing margin track = SVG right margin (30/900);
   the four data columns split the 010% plot area 3:2:3:2 to match toX(). */
.st-ct-table-wrap {
  --ct-label-w:  8.889%;   /* 80px  900 viewBox = SVG left margin (before 0%) */
  --ct-margin-w: 3.333%;   /* 30px  900 viewBox = SVG right margin (after 10%) */
  padding: 0 var(--space-6);   /* match .st-continuum__chart-wrap horizontal padding */
  margin-bottom: var(--space-5);
}

.st-ct-grid {
  width: 100%;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-white);
}

.st-ct-grid__row {
  display: grid;
  grid-template-columns:
    var(--ct-label-w, 9%)   /* label  : SVG left margin */
    3fr                     /* > 3%   : 03  = 30% of plot */
    2fr                     /* 35%   : 35  = 20% of plot */
    3fr                     /* 58%   : 58  = 30% of plot */
    2fr                     /* 8% <   : 810 = 20% of plot */
    var(--ct-margin-w, 0);  /* trailing margin : SVG right margin (empty track) */
  border-bottom: 1px solid var(--color-border-light);
}
.st-ct-grid__row:last-child { border-bottom: none; }

/* Cells */
.st-ct-grid__label,
.st-ct-grid__col {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-body);
  border-left: 1px solid var(--ct-divider);
}
.st-ct-grid__label { border-left: 0; }

/* Row headers (label column) */
.st-ct-grid__label strong {
  font-weight: var(--weight-bold);
  color: var(--ct-navy);
}

/* Shaded zones  same tint as the chart's highlighted 35% and 810% bands */
.st-ct-grid__col--shaded { background: var(--ct-band); }

/* Span the merged 38% cell in row 2 (covers the 2fr + 3fr tracks) */
.st-ct-grid__col--span2 { grid-column: span 2; }

/* Header row */
.st-ct-grid__row--head .st-ct-grid__col {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  font-weight: var(--weight-normal);
  color: var(--color-text-muted);
}

/* Legend */
.st-ct-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
}
.st-ct-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-text-body);
}
.st-ct-legend__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.st-ct-legend__dot--europe      { background: var(--ct-europe); }
.st-ct-legend__dot--australasia { background: var(--ct-navy); }
.st-ct-legend__dot--uk          { background: var(--ct-green); }
.st-ct-legend__dot--emerging    { background: var(--ct-emerging); }
.st-ct-legend__note {
  font-style: italic;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

/* Mobile-only zone tags — replace the description table on narrow screens,
   where its columns can't fit and the text spills out of the cells. */
.st-ct-tags {
  display: none;
}

.st-ct-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--ct-green);
  background: var(--color-white);
  color: var(--ct-navy);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.st-ct-tag__icon {
  color: var(--ct-green);
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.st-ct-tag:hover,
.st-ct-tag:focus-visible {
  background: var(--ct-green);
  color: var(--color-white);
}

.st-ct-tag:hover .st-ct-tag__icon,
.st-ct-tag:focus-visible .st-ct-tag__icon {
  color: var(--color-white);
}

.st-ct-tag:active {
  transform: scale(0.96);
}

/* Zone modal body copy — scoped override so only this modal gets larger,
   darker text; .tipoffs-modal__note is shared with other modals (tip-offs,
   unclaimed dividends) where the smaller muted style is still correct. */
.ct-zone-modal .tipoffs-modal__note {
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: 1.5;
}

/* Chart footnote */
.st-continuum__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  max-width: 760px;
  margin: 0 auto;
}
.st-continuum__note svg { flex-shrink: 0; margin-top: 1px; opacity: 0.6; }

@media (max-width: 768px) {
  .st-continuum__chart-wrap { padding: var(--space-4) var(--space-3); }
  .st-ct-table-wrap { display: none; }
  .st-ct-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    justify-content: center;
    padding: 0 var(--space-3);
    margin-bottom: var(--space-5);
  }
  /* Smaller so all 4 tags fit on one line instead of wrapping */
  .st-ct-tag {
    padding: 5px 10px;
    gap: 4px;
    font-size: 0.75rem;
  }
  .st-ct-tag__icon {
    width: 11px;
    height: 11px;
  }
}

/* ===== OUR STRATEGY PAGE ===== */
/* Consolidated, authoritative styles for our-strategy.html. The continuum chart
   (.st-continuum / .st-ct-*) is intentionally NOT included here  it owns the
   section directly above. about.html-shared classes (.ab-stats, .ab-heading-main,
   .ab-value, .hp-glance__stat) are reused as-is and never redefined. */

/*  .st-anchor  light, two-column strategic statement  */
.st-anchor {
  background: var(--color-bg-white);
  padding-block: var(--section-padding-y);
}
.st-anchor__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
  align-items: center;
}
.st-anchor__heading {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  line-height: 1.1;
  margin-bottom: var(--space-6);
}
.st-anchor__heading--accent { color: var(--color-accent-green); }
.st-anchor__lede {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}
.st-anchor__blockquote {
  border-left: 3px solid var(--color-accent-green);
  padding-left: var(--space-8);
}
.st-anchor__blockquote p {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  color: var(--color-brand-primary);
  line-height: 1.6;
  font-style: italic;
  margin: 0;
}
.st-anchor__blockquote cite {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-accent-green);
  font-style: normal;
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  display: block;
  margin-top: var(--space-4);
}
@media (max-width: 900px) {
  .st-anchor__inner { grid-template-columns: 1fr; gap: var(--space-12); }
}

/*  .ab-stats  section bg/padding & .ab-heading-main are already styled
   for about.html (confirmed: off-white bg, section padding, display heading).
   Reused as-is; not redefined here.  */

/*  .st-pillars-section  accordion list of strategy pillars  */
.st-pillars-section {
  background: var(--color-bg-white);
  padding-block: var(--section-padding-y);
}
.st-pillars-section__header {
  max-width: 640px;
  margin-bottom: var(--space-14);
}
.st-pillars-section__intro {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: 1.7;
  margin-top: var(--space-4);
}
/* Two-column layout: left image panel, right hover accordion */
.st-pillars__layout {
  display: grid;
  gap: var(--space-12);
}
.st-pillars__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 360px;
  background: var(--color-off-white);
}
.st-pillars__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.st-pillars__media-img.is-active {
  opacity: 1;
  transform: scale(1);
}
.st-pillars__grid {
  display: flex;
  flex-direction: column;
}
@media (min-width: 900px) {
  .st-pillars__layout {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: var(--space-16);
  }
}
.st-pillar {
  border-top: 1px solid var(--color-border-light);
}
.st-pillar:last-child {
  border-bottom: 1px solid var(--color-border-light);
}
.st-pillar__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-8) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.st-pillar__toggle:hover .st-pillar__name { color: var(--color-accent-green); }
.st-pillar__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  flex: 1;
  transition: color var(--transition-base);
  margin: 0;
}
.st-pillar__caret {
  margin-left: auto;
  color: var(--color-brand-primary);
  flex-shrink: 0;
  transition: transform var(--transition-slow);
  display: flex;
}
.st-pillar.is-open .st-pillar__caret { transform: rotate(-180deg); }
.st-pillar.is-open .st-pillar__name { color: var(--color-accent-green); }
.st-pillar__body {
  max-height: 0;
  overflow: hidden;   /* on the zero-height element  fully clips inner + its padding */
  transition: max-height var(--transition-slow) ease;
}
.st-pillar.is-open .st-pillar__body { max-height: 480px; }
.st-pillar__body-inner {
  padding: 0 0 var(--space-8);
}
.st-pillar__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

/*  .st-ownbrand-section  dark, two-column own-brand feature  */
.st-ownbrand-section {
  background: var(--color-brand-dark-grey);
  padding-block: var(--section-padding-y);
}
.st-ownbrand__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
}
.st-ownbrand-section .eyebrow { color: var(--color-accent-green); }
.st-ownbrand__headline {
  font-family: var(--font-body);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  margin-bottom: var(--space-6);
}
.st-ownbrand__text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.75;
  margin-bottom: var(--space-8);
}
.st-ownbrand-section .btn--secondary {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--color-white);
}
.st-ownbrand-section .btn--secondary:hover {
  background: var(--color-white);
  color: var(--color-brand-primary);
  border-color: var(--color-white);
}
/* Right column  stacked stats, vertically centred */
.st-ownbrand__inner > div:last-child {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  justify-content: center;
}
.st-ownbrand__stat {
  border-left: 3px solid var(--color-accent-green);
  padding-left: var(--space-6);
}
.st-ownbrand__stat-number {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  display: block;
  line-height: 1;
}
.st-ownbrand__stat-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  display: block;
  margin-top: var(--space-2);
}
@media (max-width: 900px) {
  .st-ownbrand__inner { grid-template-columns: 1fr; gap: var(--space-12); }
}

/*  Own-brand logo ticker  sibling after .st-ownbrand-section  */
.ob-ticker-wrap {
  background: var(--color-bg-white);
  overflow: hidden;
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-border-light);
}

.ob-ticker__track {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  width: max-content;
  animation: ob-ticker-scroll 55s linear infinite;   /* 55s  20 logos (12+) */
}

.ob-ticker__track:hover {
  animation-play-state: paused;
}

.ob-ticker__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.ob-ticker__item img {
  width: 120px;
  height: auto;
  max-height: 60px;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity var(--transition-fast);
  filter: none;
}

.ob-ticker__item img:hover {
  opacity: 1;
}

@keyframes ob-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ob-ticker__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding: var(--space-4) var(--space-6);
    gap: var(--space-8);
  }
}

/*  .ab-value  already styled (about.html). Only the strategy CTA row added.  */
.st-value-ctas {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-12);
  justify-content: center;
  flex-wrap: wrap;
}

/*  .ab-value-card hover-expand pattern (DESIGN-REFERENCE 17) 
   Scoped to .page-about so the same .ab-value-card class on investors.html
   (page-investors) keeps its own styling. The .page-about prefix outranks the
   global .ab-value-card blocks, and a few neutralisers (display/margin/position/
   transform) cancel their leaking declarations. No HTML changes required. */

.page-about .ab-value-card {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8);
  position: relative;
  overflow: hidden;
  cursor: default;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  min-height: 220px;
}

/* Eyebrow  category label, always visible */
.page-about .ab-value-card .eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-green);
  margin-bottom: var(--space-3);
}

/* Title  page-about cards have more breathing room below the title */
.page-about .ab-value-card__title {
  margin-bottom: var(--space-6);
}
.page-about .ab-value-card:hover .ab-value-card__title,
.page-about .ab-value-card:focus-within .ab-value-card__title {
  color: var(--color-brand-primary);   /* keep navy  base hover turns green */
}

/* Lead paragraph  collapsed, reveals on hover */
.page-about .ab-value-card__lead {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  color: var(--color-text-body);
  line-height: 1.7;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  transition:
    max-height 400ms cubic-bezier(0.12, 0.23, 0.5, 1),
    opacity 300ms cubic-bezier(0.12, 0.23, 0.5, 1) 100ms,
    margin-bottom 400ms cubic-bezier(0.12, 0.23, 0.5, 1);
}
.page-about .ab-value-card:hover .ab-value-card__lead,
.page-about .ab-value-card:focus-within .ab-value-card__lead {
  max-height: 200px;
  opacity: 1;
  margin-bottom: var(--space-4);
}

/* Stats list  collapsed, reveals on hover (neutralises global flex/margin/transform) */
.page-about .ab-value-card__stats {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
  transform: none;
  pointer-events: none;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 400ms cubic-bezier(0.12, 0.23, 0.5, 1) 50ms,
    opacity 300ms cubic-bezier(0.12, 0.23, 0.5, 1) 150ms;
}
.page-about .ab-value-card:hover .ab-value-card__stats,
.page-about .ab-value-card:focus-within .ab-value-card__stats {
  max-height: 200px;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.page-about .ab-value-card__stats li {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: 1.6;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border-light);
}
.page-about .ab-value-card__stats li:last-child {
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: var(--space-4);
}

/* Arrow  navy circle, always visible, pinned to the bottom of the flex column */
.page-about .ab-value-card__arrow {
  position: static;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  margin-top: auto;
  flex-shrink: 0;
  transition: background var(--transition-base), transform var(--transition-base);
}
.page-about .ab-value-card:hover .ab-value-card__arrow,
.page-about .ab-value-card:focus-within .ab-value-card__arrow {
  background: var(--color-accent-green);
  color: var(--color-brand-primary);
  transform: translateX(3px);
}

/* Watermark  decorative, top-right, low opacity, non-interactive */
.page-about .ab-value-card__watermark {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  width: 72px;
  height: 72px;
  opacity: 0.07;
  color: var(--color-brand-primary);
  pointer-events: none;
  z-index: 0;
}
.page-about .ab-value-card__watermark svg {
  width: 100%;
  height: 100%;
}

/* Section header spacing */
.page-about .ab-value__heading-wrap {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-14);
}
.page-about .ab-value__heading {
  font-family: var(--font-body);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  margin-bottom: var(--space-4);
}
.page-about .ab-value__intro {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: 1.7;
}
.page-about .ab-value .grid--3 { gap: var(--space-4); }

/* Touch / no-hover devices  always show the revealed content */
@media (hover: none) {
  .page-about .ab-value-card__lead,
  .page-about .ab-value-card__stats {
    max-height: none;
    opacity: 1;
    pointer-events: auto;
    margin-bottom: var(--space-4);
  }
}

/* ============================================================
   INVESTOR OVERVIEW  STYLING PASS (io-v2-)
   ============================================================ */

/*  Full-width image break  */
.io-fullwidth-break {
  line-height: 0;
}

.io-fullwidth-break__img {
  display: block;
  width: 100%;
  height: 480px;
  object-fit: cover;
  object-position: center center;
}

/*  Remove green decorative bottom line from ic-card left panel  */
.ic-card__left::after {
  display: none;
}

/*  JSE Listing section  constrain to Key Publications width  */
.io-listing-section .container {
  width: 80%;
}

/* Header block: eyebrow above, then flex row with heading + button */
.io-listing-header {
  margin-bottom: var(--space-10);
}

.io-listing-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/*  Unclaimed Dividends inline section  */
.io-v2-unclaimed-wrap {
  padding-block: var(--section-padding-y);
  background: var(--color-off-white);
}

.io-v2-unclaimed-wrap .container {
  width: 80%;
}

@media (max-width: 768px) {
  /* Desktop deliberately narrows this section's container to 80% for
     a framed look. On mobile that just eats into the unclaimed-
     dividends card's available width for no benefit  widen it back
     to the full container so the card (and its contact buttons) get
     more room, without touching the card's own internal padding. */
  .io-v2-unclaimed-wrap .container {
    width: 100%;
  }
}

/*  Combined two-card grid (Ownership + Coverage, Stay Informed + Get in Touch)  */
.io-v2-two-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 900px) {
  .io-v2-two-cards { grid-template-columns: 1fr; }
}

/*  White card on any background  */
.io-v2-card {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-card);
}

/*  Ownership + Coverage section (grey grain texture)  */
.io-v2-combined-section {
  background-color: var(--color-off-white);
  position: relative;
  overflow: hidden;
}

.io-v2-combined-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
}

.io-v2-combined-section .container {
  position: relative;
  z-index: 1;
  width: 80%;
}

/* Grid: tight gap + equal-height cards  matches hp-investor__grid */
.io-v2-combined-section .io-v2-two-cards {
  gap: var(--space-1);
  align-items: stretch;
}

.io-v2-combined-section .io-v2-card {
  height: 100%;
  box-sizing: border-box;
}

/* Section headers inside cards: left-aligned, investor-centre heading size */
.io-v2-combined-section .section__header {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

.io-v2-combined-section .section__header h2 {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
}

.io-v2-combined-section .section__header p {
  font-size: var(--text-base);
}

/*  Analyst list inside coverage card  */
.io-v2-analyst-list {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
}

.io-v2-analyst-row {
  display: grid;
  grid-template-columns: 40px 130px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.io-v2-analyst-row:last-child {
  border-bottom: none;
}

@media (max-width: 640px) {
  .io-v2-analyst-row {
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-2);
  }

  .io-v2-analyst-phone {
    grid-column: 2;
  }
}

.io-v2-analyst-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.05em;
}

.io-v2-analyst-firm {
  font-weight: var(--weight-bold);
  color: var(--color-brand-primary);
  font-size: var(--text-sm);
}

.io-v2-analyst-name {
  color: var(--color-text-body);
  font-size: var(--text-sm);
}

.io-v2-analyst-phone {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
  text-align: right;
  white-space: nowrap;
  transition: color var(--transition-base);
}

.io-v2-analyst-phone:hover {
  color: var(--color-brand-secondary);
}

/* Input overrides for alerts form inside white card on off-white background */
.io-v2-combined-section .io-alerts-form input[type="text"],
.io-v2-combined-section .io-alerts-form input[type="email"] {
  border: 1px solid var(--color-border-light);
  background: var(--color-off-white);
  color: var(--color-text-body);
}

.io-v2-combined-section .io-alerts-form input::placeholder {
  color: var(--color-text-muted);
}

.io-v2-combined-section .io-alerts-form input:focus {
  outline: 2px solid var(--color-accent-green);
  background: var(--color-white);
}

.io-v2-combined-section .io-alerts-form__legal {
  color: var(--color-text-muted);
}

/* io-contact-card inside io-v2-card  strip the duplicate card chrome */
.io-v2-combined-section .io-contact-card {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

/* ============================================================
   FINAL NAV ACTIVE STATE OVERRIDE
   Only one main navigation item should appear green.

   How it works:
   - All main nav links start as normal navy text.
   - main.js sets aria-current="page" on exactly one link — whichever
     href matches the current URL (Home included; it gets no special
     casing in the markup, so this alone is enough to keep it correct).
   - That link becomes green. If it's inside a dropdown, the dropdown
     parent becomes green too.
   - Underlines are fully removed.
   ============================================================ */

/* Remove all active underlines completely */
.nav-link::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Reset all main nav links first */
.nav-list > .nav-item > .nav-link,
.nav-list > .nav-item > .nav-link--btn {
  color: var(--nav-link-color) !important;
}

/* Active standalone main nav link, e.g. Home or Contact */
.nav-list > .nav-item > .nav-link[aria-current="page"] {
  color: var(--color-accent-green) !important;
}

/* Active dropdown parent main nav item — green when one of its dropdown children is the current page */
.nav-list > .nav-item:has(.nav-dropdown a[aria-current="page"]) > .nav-link,
.nav-list > .nav-item:has(.nav-dropdown a[aria-current="page"]) > .nav-link--btn {
  color: var(--color-accent-green) !important;
}

/* Dropdown selected item */
.nav-dropdown a[aria-current="page"] {
  color: var(--color-accent-green) !important;
  font-weight: var(--weight-bold);
  background: var(--color-off-white);
}

/* Hover states stay clean */
.nav-link:hover,
.nav-link--btn:hover {
  color: var(--nav-link-hover) !important;
  background: var(--color-off-white);
}

/* But active items must remain green even on hover */
.nav-list > .nav-item > .nav-link[aria-current="page"]:hover,
.nav-list > .nav-item:has(.nav-dropdown a[aria-current="page"]) > .nav-link:hover,
.nav-list > .nav-item:has(.nav-dropdown a[aria-current="page"]) > .nav-link--btn:hover {
  color: var(--color-accent-green) !important;
}

/* ============================================================
   SCROLLED HEADER TEXT FIX
   Normal nav text turns white.
   Active/current main nav item stays green.
   ============================================================ */

.site-header.site-header--scrolled .header-actions,
.site-header.site-header--scrolled .header-actions a,
.site-header.site-header--scrolled .header-actions button {
  color: var(--color-white) !important;
}

.site-header.site-header--scrolled .btn-icon {
  color: var(--color-white) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.site-header.site-header--scrolled .btn-icon:hover {
  color: var(--color-brand-primary) !important;
  background: var(--color-white) !important;
}

/* Nav link colors below are desktop-only. On mobile, a scrolled header's
   .primary-nav.is-open dropdown renders on a solid white background
   (see max-width: 768px rules above), so forcing nav-link text white here
   made every inactive item invisible (white on white). */
@media (min-width: 769px) {
  .site-header.site-header--scrolled .primary-nav .nav-link,
  .site-header.site-header--scrolled .primary-nav .nav-link--btn {
    color: var(--color-white) !important;
  }

  .site-header.site-header--scrolled .nav-link:hover,
  .site-header.site-header--scrolled .nav-link--btn:hover {
    color: var(--color-white) !important;
    background: transparent !important;
  }

  .site-header.site-header--scrolled .nav-link[aria-current="page"],
  .site-header.site-header--scrolled .nav-item:has(.nav-dropdown a[aria-current="page"]) > .nav-link {
    color: var(--color-accent-green) !important;
  }

  .site-header.site-header--scrolled .nav-caret {
    border-top-color: currentColor !important;
  }
}