/**
 * ============================================================
 * ESG COMPONENTS — Developer Handoff Package
 * Bidcorp Group Corporate Site
 * ============================================================
 *
 * PURPOSE
 * -------
 * Standalone CSS extract for the four ESG pillar pages:
 *   esg/people.html      — Social Impact
 *   esg/planet.html      — Environment
 *   esg/product.html     — Product Quality & Responsibility
 *   esg/principals.html  — Governance
 *
 * USAGE
 * -----
 * This file replaces the full three-file cascade for isolated
 * development or handoff. In production, use the full cascade:
 *
 *   <link rel="stylesheet" href="assets/css/design-tokens.css">
 *   <link rel="stylesheet" href="assets/css/base.css">
 *   <link rel="stylesheet" href="assets/css/components.css">
 *   <link rel="stylesheet" href="assets/css/region-selector.css">
 *
 * CONTENTS
 * --------
 *  A. DESIGN TOKENS (from design-tokens.css) — :root block
 *  B. BUTTONS          (.btn, .btn--primary, .btn--secondary, .btn--ghost, etc.)
 *  C. CARDS            (.card, .card__label, .card__title, .card__body, .card__image)
 *  D. PAGE HERO        (.page-hero, .page-hero--has-image, .page-hero--people, etc.)
 *  E. SECTION VARIANTS (.section__header, .section--navy, .section--off-white, etc.)
 *  F. STAT ROW         (.stat-row, .stat-row .stat)
 *  G. CARD EXTENSIONS  (.card__eyebrow, .card__link)
 *  H. DOCUMENT ROWS    (.doc-row, .doc-row__icon, .doc-row__name, .es-doc-section)
 *  I. ANIMATE-IN       (.animate-in, .animate-in--from-left, .is-visible)
 *  J. HP-GRAIN         (.hp-grain — texture overlay, used by ob-ob-pillars)
 *  K. METRIC STATS     (.hp-glance__stat-number, .hp-glance__stat-label, .stat-card)
 *  L. EXPLORE CARDS    (.ab-explore, .ab-explore-card, .ab-explore-card__frost, etc.)
 *  M. HEADINGS         (.ab-heading-over, .ab-heading-main)
 *  N. ES FRAMEWORK     (.es-framework-grid, .es-framework-col, .es-ratings-box, etc.)
 *  O. OWN BRAND        (.ob-own-brand-intro, .ob-ob-stats, .ob-ob-pillars, .ob-ob-brands,
 *                        .ob-ob-sustain, .ob-ob-brand-card)
 *  P. ESG ENVIRONMENT  (.env-metrics, .env-pillar, .env-pillar--alt, .env-highlight-stat)
 *  Q. ESG SOCIAL       (.si-intro, .si-programs, .si-program-card)
 *  R. ESG GOVERNANCE   (.gov-link-callout, .gov-pillars, .gov-pillar-card)
 *  S. ESG PRODUCT      (.pr-priorities, .pr-checklist, .pr-factsheet-tags)
 *
 * EXCLUDED
 * --------
 *  • Site header / primary nav (sections 16, 17)
 *  • Site footer (sections 24, 25)
 *  • Tip-offs FAB and modal (sections 12, 25)
 *  • Homepage-only sections (globe, divisional tabs, hero video)
 *  • Investor centre grid, document archive, divisional pages
 *  • History timeline, leadership profile cards
 *
 * NOTE: .grid--2, .grid--3, .section--white, .eyebrow, .container,
 *  .section (padding util) are defined in base.css, not components.css.
 *  Include base.css alongside this file, or copy those rules from base.css.
 * ============================================================
 */


/* ============================================================
   A. DESIGN TOKENS (from design-tokens.css)
   ============================================================ */

/**
 * ============================================================
 * BIDCORP GROUP — DESIGN TOKENS
 * Extracted from Adobe XD design system (March 2026)
 * ============================================================
 *
 * Source: XD CSS export + visual analysis of prototype screens
 * Usage: Import this file first in your project stylesheet.
 *        All values are used via var() references in style.css
 * ============================================================
 */

:root {

  /* ----------------------------------------------------------
   * COLOUR PALETTE
   * Primary brand colours extracted from XD colour styles
   * ---------------------------------------------------------- */

  /* Core brand — navy / dark purple (primary brand colour) */
  --color-brand-primary:        #1F1346;   /* Deep navy — headlines, nav bg, footer */
  --color-brand-primary-alt:    #110541;   /* Deeper variant — hero overlays */
  --color-brand-secondary:      #184A87;   /* Mid blue — accents, links, CTA hover */
  --color-brand-dark-grey:      #262626;   /* Dark grey — body text, secondary text */

  /* Accent colours — used for section highlights, data viz, tags */
  --color-accent-green:         #79BF43;   /* Bidcorp green — primary CTA buttons */
  --color-accent-teal:          #93C9BB;   /* Teal — ESG/sustainability sections */
  --color-accent-blue:          #8AB4D1;   /* Sky blue — investor section accents */
  --color-accent-amber:         #E2A44A;   /* Amber — warnings, highlights */
  --color-accent-coral:         #F18E82;   /* Coral/salmon — ESG social pillar */
  --color-accent-yellow:        #F2CE66;   /* Yellow — data callouts, badges */

  /* Neutrals */
  --color-white:                #FFFFFF;
  --color-off-white:            #F2F2F2;   /* Page background, section alternates */
  --color-grey-light:           #BBBDBF;   /* Borders, dividers, disabled states */
  --color-grey-dark:            #4B4B4B;   /* Body text, secondary text */

  /* Semantic aliases */
  --color-text-primary:         #1F1346;   /* All primary text */
  --color-text-body:            #4B4B4B;   /* Body copy */
  --color-text-muted:           #BBBDBF;   /* Captions, labels, metadata */
  --color-text-inverse:         #FFFFFF;   /* Text on dark backgrounds */
  --color-text-link:            #184A87;   /* Hyperlinks */
  --color-text-link-hover:      #79BF43;   /* Link hover state */

  --color-bg-page:              #F2F2F2;   /* Default page background */
  --color-bg-white:             #FFFFFF;   /* Card / panel backgrounds */
  --color-bg-dark:              #1F1346;   /* Dark section backgrounds (footer, hero) */
  --color-bg-dark-alt:          #110541;   /* Deeper dark (hero overlay) */
  --color-bg-section-alt:       #F2F2F2;   /* Alternating section bg */

  --color-border:               #BBBDBF;   /* Default border colour */
  --color-border-light:         #E8E8E8;   /* Subtle card borders */
  --color-border-navy:          #110541;   /* Navy border for investor tiles */

  /* Section-specific colour associations (from design screens) */
  --color-section-investors:    #184A87;   /* Investor centre — blue */
  --color-section-esg:          #93C9BB;   /* ESG/Sustainability — teal */
  --color-section-news:         #79BF43;   /* News & Stories — green */
  --color-section-careers:      #E2A44A;   /* Careers — amber */

  /* ----------------------------------------------------------
   * TYPOGRAPHY — FONT FAMILIES
   * Two fonts: Comfortaa (display/headings) + Lato (body/UI)
   * Both available on Google Fonts
   * ---------------------------------------------------------- */

  --font-display:     'Comfortaa', cursive;   /* H1–H4, hero headlines, brand text */
  --font-body:        'Lato', sans-serif;     /* Body copy, UI labels, nav, buttons */

  /* Google Fonts import string (add to HTML <head>):
   * <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;700&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
   */

  /* ----------------------------------------------------------
   * TYPOGRAPHY — TYPE SCALE
   * Scale extracted directly from XD character styles
   * ---------------------------------------------------------- */

  --text-xs:    0.6875rem;                             /* Small labels, captions, legal — 11px */
  --text-sm:    0.8125rem;                             /* Body copy small, nav items, metadata — 13px */
  --text-base:  1rem;                                  /* Default body copy — 16px */
  --text-md:    1.1875rem;                             /* Lead paragraphs, card intro text — 19px */
  --text-lg:    1.4375rem;                             /* Section subheadings — 23px */
  --text-xl:    clamp(1.375rem, 2vw, 1.75rem);         /* H4 headings — 22–28px */
  --text-2xl:   clamp(1.5rem, 2.5vw, 2.0625rem);      /* H3 headings — 24–33px */
  --text-3xl:   clamp(1.75rem, 3vw, 2.5rem);          /* H2 section headings — 28–40px */
  --text-4xl:   clamp(2rem, 3.5vw, 3rem);             /* H1 page headings — 32–48px */
  --text-5xl:   clamp(2.5rem, 5vw, 3.875rem);         /* Hero display headings — 40–62px */
  --text-6xl:   clamp(3.75rem, 6vw, 5rem);            /* Optional — for larger hero text if needed */

  /* ----------------------------------------------------------
   * TYPOGRAPHY — LINE HEIGHTS
   * Matched to XD line-spacing values
   * ---------------------------------------------------------- */

  --leading-xs:     1.18;   /* For xs text — tight */
  --leading-sm:     1.23;   /* For sm text */
  --leading-base:   1.625;  /* For body copy — generous, readable */
  --leading-md:     1.3;    /* For md lead text */
  --leading-lg:     1.4;    /* For lg subheadings */
  --leading-xl:     1.25;   /* For xl headings */
  --leading-2xl:    1.3;    /* For 2xl headings */
  --leading-3xl:    1.2;    /* For 3xl headings */
  --leading-4xl:    1.15;   /* For 4xl page headings */
  --leading-5xl:    1.1;    /* For 5xl hero display */
  --leading-6xl:    1.0;    /* For 6xl max hero display */

  /* ----------------------------------------------------------
   * TYPOGRAPHY — FONT WEIGHTS
   * ---------------------------------------------------------- */

  --weight-light:     300;
  --weight-normal:    400;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* ----------------------------------------------------------
   * SPACING SCALE
   * Based on layout proportions observed in prototype screens
   * ---------------------------------------------------------- */

  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:   128px;

  /* Section vertical padding (desktop) */
  --section-padding-y:        80px;
  --section-padding-y-sm:     48px;

  /* Container max-widths */
  --container-max:            1640px;
  --container-content:        900px;   /* Narrower for editorial content */
  --container-padding-x:      clamp(1.5rem, 5vw, 6rem);  /* Fluid horizontal padding */

  /* ----------------------------------------------------------
   * BORDER RADIUS
   * Clean, modern — minimal rounding observed in design
   * ---------------------------------------------------------- */

  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    20px;
  --radius-full:  9999px;   /* Pills, tags */

  /* ----------------------------------------------------------
   * SHADOWS
   * Subtle elevation — design uses clean, card-based surfaces
   * ---------------------------------------------------------- */

  --shadow-sm:    0 1px 4px rgba(17, 5, 65, 0.06);
  --shadow-md:    0 4px 16px rgba(17, 5, 65, 0.10);
  --shadow-lg:    0 8px 32px rgba(17, 5, 65, 0.14);
  --shadow-card:  0 2px 12px rgba(17, 5, 65, 0.08);

  /* ----------------------------------------------------------
   * TRANSITIONS
   * ---------------------------------------------------------- */

  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;

  /* ----------------------------------------------------------
   * LAYOUT — GRID & NAV
   * Observed from homepage and interior page layouts
   * ---------------------------------------------------------- */

  --nav-height:         68px;    /* Sticky header height */
  --nav-bg:             #FFFFFF;
  --nav-bg-scroll:      #FFFFFF; /* Stays white on scroll */
  --nav-border:         #E8E8E8;

  --grid-columns:       12;
  --grid-gap:           24px;

  /* ----------------------------------------------------------
   * COMPONENT TOKENS — BUTTONS
   * Primary (green CTA), Secondary (outline), Ghost
   * ---------------------------------------------------------- */

  /* Primary button — green, used for main CTAs */
  --btn-primary-bg:         #79BF43;
  --btn-primary-bg-hover:   #65a835;
  --btn-primary-text:       #FFFFFF;
  --btn-primary-radius:     var(--radius-sm);   /* Pill shape observed in XD */

  /* Secondary button — dark navy outline */
  --btn-secondary-bg:       transparent;
  --btn-secondary-border:   #1F1346;
  --btn-secondary-text:     #1F1346;
  --btn-secondary-hover-bg: #1F1346;
  --btn-secondary-hover-text: #FFFFFF;

  /* Icon CTA — circular dark button with arrow (seen in prototype) */
  --btn-icon-bg:            #1F1346;
  --btn-icon-bg-hover:      #184A87;
  --btn-icon-size:          40px;

  /* ----------------------------------------------------------
   * COMPONENT TOKENS — CARDS
   * ---------------------------------------------------------- */

  --card-bg:              #FFFFFF;
  --card-border:          #E8E8E8;
  --card-radius:          var(--radius-lg);
  --card-shadow:          var(--shadow-card);
  --card-padding:         var(--space-8);

  /* ----------------------------------------------------------
   * COMPONENT TOKENS — NAVIGATION
   * ---------------------------------------------------------- */

  --nav-link-color:         #1F1346;
  --nav-link-hover:         #184A87;
  --nav-link-active:        #79BF43;
  --nav-link-size:          var(--text-sm);
  --nav-link-weight:        var(--weight-bold);
  --nav-link-font:          var(--font-body);

  /* ----------------------------------------------------------
   * COMPONENT TOKENS — SECTION TABS
   * Divisional tabs (Australasia / UK / Europe / Emerging Markets)
   * Observed as horizontal tab bar with navy active state
   * ---------------------------------------------------------- */

  --tab-bg:               #FFFFFF;
  --tab-active-bg:        #1F1346;
  --tab-active-text:      #FFFFFF;
  --tab-inactive-text:    #4B4B4B;
  --tab-border:           #1F1346;

  /* ----------------------------------------------------------
   * COMPONENT TOKENS — FOOTER
   * Dark navy footer with white text, email signup
   * ---------------------------------------------------------- */

  --footer-bg:            #1F1346;
  --footer-text:          rgba(255, 255, 255, 0.75);
  --footer-heading:       #FFFFFF;
  --footer-link:          rgba(255, 255, 255, 0.65);
  --footer-link-hover:    #79BF43;
  --footer-border:        rgba(255, 255, 255, 0.12);

  /* ----------------------------------------------------------
   * COMPONENT TOKENS — STAT / METRIC CALLOUTS
   * Large financial figures (R18.7bn, 26,000 etc.)
   * Observed in divisional tabs section
   * ---------------------------------------------------------- */

  --stat-number-font:     var(--font-body);
  --stat-number-weight:   var(--weight-bold);
  --stat-number-size:     var(--text-3xl);
  --stat-label-size:      var(--text-sm);
  --stat-label-color:     var(--color-text-body);

  /* ----------------------------------------------------------
   * COMPONENT TOKENS — PUBLICATION / REPORT CARDS
   * Cards used in "Key publications" section
   * ---------------------------------------------------------- */

  --pub-card-bg:          #FFFFFF;
  --pub-card-radius:      var(--radius-lg);
  --pub-card-shadow:      var(--shadow-md);
  --pub-card-img-radius:  var(--radius-md);

  /* ----------------------------------------------------------
   * COMPONENT TOKENS — INVESTOR CENTRE GRID
   * Dark navy tiled grid: Investor calendar, Share price, etc.
   * ---------------------------------------------------------- */

  --investor-tile-bg:     #1F1346;
  --investor-tile-text:   #FFFFFF;
  --investor-tile-border: rgba(255, 255, 255, 0.1);
  --investor-tile-accent: #79BF43;

  /* ----------------------------------------------------------
   * Z-INDEX SCALE
   * ---------------------------------------------------------- */

  --z-base:       0;
  --z-above:      10;
  --z-nav:        100;
  --z-overlay:    200;
  --z-modal:      300;
  --z-tipoffs:    400;   /* Tip-offs button — always on top */

  /* ----------------------------------------------------------
   * LAYOUT — HEADER
   * ---------------------------------------------------------- */

  --ticker-height:    36px;   /* Share price ticker bar — sits above the main header */
  --header-height:    var(--nav-height); /* eyebrow removed — header is nav bar only */

  /* ----------------------------------------------------------
   * COLOURS — ADDITIONAL
   * ---------------------------------------------------------- */

  /* Light blue tint used in tip-offs country item hover */
  --color-blue-light:   #e8f2fc;

  /* ----------------------------------------------------------
   * OVERLAY BACKGROUNDS
   * Pre-mixed rgba values — CSS custom properties cannot be used
   * inside rgba(), so these provide token-accessible overlay tints
   * based on --color-brand-primary-alt (#110541 = rgb 17, 5, 65)
   * ---------------------------------------------------------- */

  --overlay-dark-70:    rgba(17, 5, 65, 0.70);   /* Modal backdrop */
  --overlay-dark-95:    rgba(17, 5, 65, 0.95);   /* Search overlay */
  --overlay-dark-90:    rgba(17, 5, 65, 0.90);   /* Hero overlay start */
  --overlay-dark-65:    rgba(17, 5, 65, 0.65);   /* Hero overlay mid */

  /* ── REGIONAL DIVISION COLOURS ─────────────────────────────────────
     Used for division-specific UI: timeline, globe, region cards,
     stat highlights, and any other division-coded elements.
     ──────────────────────────────────────────────────────────────── */
  --color-division-australasia: #004278;
  --color-division-uk:          #7BBF44;
  --color-division-europe:      #2189AA;
  --color-division-emerging:    #FD644E;

}



/* ============================================================
   B. BUTTONS
   ============================================================ */

/* ============================================================
   2. BUTTONS
   ============================================================ */

/*
 * DESIGN DECISION: XD shows pill-shaped buttons (border-radius: full)
 * for some CTAs and circular icon buttons. However, the early XD
 * draft mixes conventions. The system below uses a cleaner hierarchy:
 *
 *   btn--primary   → Filled green, rounded (not full-pill)
 *   btn--secondary → Navy outline, matching radius
 *   btn--ghost     → White outline for dark backgrounds
 *   btn--icon      → Circular icon-only button (retained from XD)
 *   link-arrow     → Inline text link with animated arrow
 *
 * DESIGN DECISION: Border-radius is set to --radius-md (8px) rather
 * than --radius-full (pill). This looks more grounded and professional
 * at corporate scale, and avoids the CTAs fighting with the rounded
 * Comfortaa display font. If the XD design confirms pills, update
 * --btn-primary-radius in design-tokens.css and it cascades here.
 */

.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);
}

/*
 * Icon button — circular dark button with arrow
 * Used throughout XD for "Our business →" style CTAs
 * DESIGN DECISION: Retained as-is from XD — this is a
 * distinctive Bidcorp pattern worth keeping.
 */
.btn--icon {
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  border-radius: var(--radius-full);
  background-color: var(--btn-icon-bg);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 18px;
  border: 2px solid transparent;
  flex-shrink: 0;
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.btn--icon:hover {
  background-color: var(--btn-icon-bg-hover);
  transform: translateX(3px);
  box-shadow: var(--shadow-sm);
}

/*
 * Inline text link with animated arrow
 * DESIGN DECISION: Arrow animates on hover for tactile feedback.
 */
.link-arrow {
  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;
  transition: color var(--transition-fast);
}

.link-arrow::after {
  content: '→';
  display: inline-block;
  transition: transform var(--transition-base);
}

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

.link-arrow:hover::after {
  transform: translateX(4px);
}

/* On dark backgrounds */
.link-arrow--light {
  color: rgba(255, 255, 255, 0.8);
}

.link-arrow--light:hover {
  color: var(--color-white);
}




/* ============================================================
   C. CARDS
   ============================================================ */

/* ============================================================
   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--interactive:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.card--flat {
  box-shadow: none;
  border: 1px solid var(--color-border-light);
}

.card--flat:hover {
  box-shadow: var(--shadow-md);
}

/* Top colour accent strip */

/* Dark surface card */
.card--dark {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
  border-color: rgba(255, 255, 255, 0.08);
}

.card__label {
  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);
}

.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--dark .card__title {
  color: var(--color-white);
}

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

.card--dark .card__body {
  color: rgba(255, 255, 255, 0.65);
}

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




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

/* ============================================================
   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--careers::before {
  background: linear-gradient(135deg, rgba(17, 5, 65, 0.95) 0%, rgba(226, 164, 74, 0.35) 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: 640px;
  margin-bottom: var(--space-4);
}

.page-hero__sub {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.65);
  max-width: 520px;
  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__bg-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);
}




/* ── ESG pillar page hero modifiers ──
   The shared .page-hero--has-image overlay uses brand blue/green
   washes. Add per-page background-image in the integration layer
   (e.g. a <style> block scoped to the page), or override here. */


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

/* ============================================================
   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);
}

.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--green     { background-color: var(--color-accent-green); }

.section--green h2,
.section--green h3  { color: var(--color-white); }

.section--green p,
.section--green .section__header p { color: rgba(255, 255, 255, 0.85); }

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




/* ============================================================
   F. STAT ROW
   ============================================================ */

/* ============================================================
   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);
}

.stat-row .stat {
  text-align: center;
  min-width: 100px;
}




/* ============================================================
   G. CARD EXTENSIONS
   ============================================================ */

/* ============================================================
   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);
}



/* ============================================================
   H. DOCUMENT ROWS
   ============================================================ */

/* ============================================================
   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);
}




/* ============================================================
   I. SECTION ENTRANCE ANIMATIONS
   ============================================================ */


/* ============================================================
   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;
  }
}



/* ============================================================
   J. HP-GRAIN (noise texture — used by .ob-ob-pillars.hp-grain)
   ============================================================ */

.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;
}

.hp-grain > * {
  position: relative;
  z-index: 1;
}



/* ============================================================
   K. METRIC STATS
   ============================================================ */

.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;
}

/* ── 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);
}

.hp-glance__stat .stat-card__sub {
  font-size: var(--text-sm);
}



/* ============================================================
   L. EXPLORE FURTHER CARDS (.ab-explore)
   ============================================================ */

.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;
  }
}



/* ============================================================
   M. SPLIT HEADINGS (.ab-heading-over / .ab-heading-main)
   ============================================================ */

}


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

.ab-heading-over {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-1xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-1xl);
  color: var(--color-brand-secondary);
  line-height: 1.3;
  margin-bottom: 0.2em;
  letter-spacing: 0.01em;
}

.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-over {
  color: rgba(121, 191, 67, 0.85);
}
.ab-stats .ab-heading-main {
  color: var(--color-white);
}

/* ab-heading-main on navy/dark sections must be white */
.section--navy .ab-heading-main,
.section--dark .ab-heading-main {
  color: var(--color-white);
}



/* ============================================================
   N. ESG FRAMEWORK GRID & RATINGS BOX
   ============================================================ */

.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: 0px;
    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;
}

.es-framework-col__img-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.es-framework-col__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.es-framework-col__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-base);
  margin: 0 0 var(--space-3);
}

/* 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;
}



/* ============================================================
   O. OWN BRAND STRATEGY (ob-ob-)
   Used on: esg/product.html (Own Brand section)
   ============================================================ */

   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);
  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; }
}

/* ── ob-ob-pillars (own brand — already has hp-grain class) ── */
.ob-ob-pillars .container {
  position: relative;
  z-index: 1;
}




/* ============================================================
   P. ESG ENVIRONMENT (env-)
   Used on: esg/planet.html, esg/product.html
   ============================================================ */

   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);
}

/* LEGIBILITY — ESG pillar pages: eyebrow on light backgrounds.
   Default green (#79BF43) gives only ~2:1 on white/off-white (WCAG fail).
   Mid-blue gives 7.9:1 on white and 7:1 on off-white. Scoped to .page-esg
   so it does not affect other pages that use these wrappers. */
.page-esg .env-pillar .eyebrow,
.page-esg .si-programs .eyebrow,
.page-esg .section__header .eyebrow {
  color: var(--color-brand-secondary);
}

.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-border-navy);
}

@media (max-width: 768px) {
  .env-pillar__grid { grid-template-columns: 1fr; }
  .env-pillar__grid--reverse { direction: ltr; }
}




/* ============================================================
   Q. ESG SOCIAL IMPACT (si-)
   Used on: esg/people.html, esg/product.html
   ============================================================ */

/* ============================================================
   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-intro__body p {
  color: var(--color-text-body);
  line-height: var(--leading-base);
  margin-bottom: var(--space-3);
}

.si-intro__img {
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  display: block;
}

.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; }
}



/* ============================================================
   R. ESG GOVERNANCE (gov-)
   Used on: esg/principals.html
   ============================================================ */

/* ============================================================
   43. INNER PAGE — ESG GOVERNANCE
   ============================================================ */


.gov-intro {
  padding: var(--section-padding-y) 0;
  background: var(--color-white);
}

.gov-intro__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

.gov-intro__body p {
  color: var(--color-text-body);
  line-height: var(--leading-base);
  margin-bottom: var(--space-4);
}

.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);
}

.gov-pillars {
  padding: var(--section-padding-y) 0;
  background: var(--color-off-white);
}

.gov-pillars__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.gov-pillar-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  border-left: 4px solid var(--color-brand-primary);
}

.gov-pillar-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-3);
}

.gov-pillar-card p {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: var(--leading-base);
  margin: 0 0 var(--space-3);
}

.gov-pillar-card p:last-child { margin: 0; }

@media (max-width: 900px) {
  .gov-intro__grid { grid-template-columns: 1fr; }
  .gov-pillars__grid { grid-template-columns: 1fr; }
}




/* ============================================================
   S. ESG PRODUCT (pr-)
   Used on: esg/product.html
   ============================================================ */

/* ============================================================
   INNER PAGE — ESG PRODUCT (pr-)
   ============================================================ */

.pr-priorities {
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pr-priorities li {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: var(--leading-base);
  padding-left: var(--space-5);
  position: relative;
}

.pr-priorities li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-accent-green);
  flex-shrink: 0;
}

.pr-checklist {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pr-checklist li {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: var(--leading-base);
  padding-left: var(--space-6);
  position: relative;
}

.pr-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 16px;
  height: 10px;
  border-left: 2px solid var(--color-accent-green);
  border-bottom: 2px solid var(--color-accent-green);
  transform: rotate(-45deg);
}

.pr-factsheet-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.pr-factsheet-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--color-brand-primary);
  background: var(--color-off-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-5);
  line-height: 1.4;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.pr-factsheet-tag:hover {
  background: color-mix(in srgb, var(--color-accent-green) 10%, white);
  border-color: var(--color-accent-green);
}

@media (max-width: 600px) {
  .pr-factsheet-tags { gap: var(--space-2); }
  .pr-factsheet-tag  { font-size: var(--text-xs); padding: var(--space-2) var(--space-4); }
}