/* ============================================================
   GLOBAL / BASE STYLES
   Resets, element defaults, theme transition, typography base,
   and a couple of layout primitives (container, section).
   Bootstrap-first: only what Bootstrap does not give us.
   ============================================================ */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Fixed header (.bf-header) overlays the page — land anchor jumps
     below it instead of underneath. */
  scroll-padding-top: var(--header-h);
  /* Guard against horizontal scroll from the off-canvas menu panel
     (.bf-menu-panel is position:fixed, parked off-screen right). The
     body's overflow-x:clip can't contain a fixed element, and `clip`
     doesn't propagate to the viewport — so clip here too. `clip` (not
     hidden) avoids creating a scroll container, so the sticky portrait
     pin on the Chairman/Leadership pages keeps working. */
  overflow-x: clip;
}

/* The header is position:fixed, so it no longer reserves layout space.
   Offset every page's content by the header height — except the home
   hero (#hp-main), which is meant to sit full-bleed under the header. */
main:not(#hp-main) {
  padding-top: var(--header-h);
}

body {
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  /* Clip stray horizontal overflow from entrance animations that
     translate elements sideways past the layout edge (e.g. the
     pull-quote's translateX(52px) and the GSAP x:-52 reveals on the
     salutation/sign-off). Using `clip` rather than `hidden` avoids
     creating a scroll container, so the sticky portrait pin
     (.cl-layout__media) keeps working. */
  overflow-x: clip;
}

/* ---- Smooth theme transition ----------------------------- */
/* Applied to elements that carry themed colours. Guarded by a
   utility class so the very first paint (theme set pre-render)
   doesn't animate. */
body,
.bf-header,
.bf-footer,
.bf-card,
.bf-download-card,
.bf-btn,
.bf-breadcrumb,
.bf-pagination .bf-page {
  transition:
    background-color var(--transition-base) var(--ease-standard),
    border-color var(--transition-base) var(--ease-standard),
    color var(--transition-base) var(--ease-standard);
}

/* Disable transitions during initial theme application */
.no-transitions * {
  transition: none !important;
}

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

/* ---- Headings -------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text-strong);
  text-wrap: balance;
}

h1 { font-size: var(--fs-5xl); }
h2 { font-size: var(--fs-4xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); }

p {
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}

/* ---- Links ----------------------------------------------- */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast) var(--ease-standard);
}
a:hover { color: var(--color-primary-hover); }
a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ---- Media ----------------------------------------------- */
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* ---- Forms inherit type ---------------------------------- */
input, button, textarea, select { font: inherit; color: inherit; }

/* ---- Focus-visible baseline ------------------------------ */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---- Selection ------------------------------------------- */
::selection {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* ---- Layout primitives ----------------------------------- */
/* Content container matched to the design's 1366px column with
   73px gutters (falls back to fluid padding on small screens). */
.bf-container {
  width: 100%;
  max-width: calc(var(--container-content) + var(--container-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.bf-section {
  padding-block: var(--space-16);
}

/* Scrollbar (WebKit) — subtle, on-brand */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }


/* ============================================================
   CHAIRMAN'S LETTER  (chairmans-message.html)
   Page-scoped styles. Everything references the semantic theme
   tokens so light/dark modes are handled automatically. A few
   letter-only tokens are declared here (light) and remapped for
   dark mode at the foot of this block.
   ============================================================ */

:root {
  /* Pull-quote card — soft periwinkle wash from the PDF */
  --cl-quote-bg:      #E8ECF8;
  --cl-quote-border:  #DADFF3;
  --cl-quote-ink:     #1C5AA6;   /* body of the quote            */
  --cl-quote-name:    var(--bf-blue-strong);
  --cl-quote-mark:    #1C5AA6;
  --cl-hl-bg:         var(--bf-blue-050);   /* highlight callout  */
  --cl-hl-border:     #E1E9F6;
  --cl-marker:        var(--bf-blue);       /* list bullet colour */
}

[data-theme="dark"] {
  --cl-quote-bg:      rgba(255,255,255,0.06);
  --cl-quote-border:  rgba(255,255,255,0.12);
  --cl-quote-ink:     #CFE0F5;
  --cl-quote-name:    var(--color-primary-strong);
  --cl-quote-mark:    var(--color-primary-strong);
  --cl-hl-bg:         rgba(255,255,255,0.04);
  --cl-hl-border:     rgba(255,255,255,0.10);
  --cl-marker:        var(--color-primary);
}

/* ---- Breadcrumb container --------------------------------- */
/* Themed subtle bar spanning the breadcrumb's container. Uses
   semantic tokens so it recolours automatically in light / dark. */
.cl-crumb-bar {
  background: var(--color-bg-subtle);
  border-block: 1px solid var(--color-border);
}
.cl-crumb-bar .bf-breadcrumb {
  margin: 0;
}


/* On phones, collapse the breadcrumb to Home › Chairman's Letter.
   The following item's separator is preserved automatically. */
@media (max-width: 575.98px) {
  .cl-crumb__optional { display: none; }
}

/* ---- LAYOUT — pinned portrait (left) + scrolling body ---- */
.cl-layout {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: var(--space-14);
  align-items: start;
}

/* Left column pins while the right-hand letter scrolls past.
   Offset clears the ~92px sticky header. */
.cl-layout__media {
  position: sticky;
  top: 50px;
  align-self: start;
}
.cl-layout__body { min-width: 0; }

/* Note: no `position` here — it is set by .cl-layout__media (sticky
   on desktop, relative on mobile). Both are always on the same figure;
   whichever wins the cascade must be the positioned one so the sticky
   pin isn't overridden and the absolute title still has a container. */
.cl-hero__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  animation: cl-fade 800ms var(--ease-out) both;
}
.cl-hero__img {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: center;
  animation: cl-zoom 1400ms var(--ease-out) both;
}
.cl-hero__scrim {
  position: absolute;
  inset: 0 0 auto 0;
  height: 45%;
  /* background: linear-gradient(to bottom, rgba(0,20,45,0.55), rgba(0,20,45,0)); */
  pointer-events: none;
}
.cl-hero__title {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
  margin: 0;
  color: #ffffff;
  font-size: var(--fs-page-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tight);
  /* text-shadow: 0 2px 18px rgba(0,0,0,0.35); */
  animation: cl-fade-up 800ms var(--ease-out) 200ms both;
}

/* ---- Pull-quote card (top of the scrolling column) ------- */
/* Sits above the fold, so it gets an on-load entrance rather than
   a scroll-linked reveal. */
.cl-quote {
  margin: 0 0 var(--space-13);
  padding: var(--space-12);
  background: var(--cl-quote-bg);
  border: 1px solid var(--cl-quote-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  animation: cl-in-right 900ms var(--ease-out) 350ms both;
}
.cl-quote__mark {
  width: 34px;
  height: auto;
  opacity: 0.9;
}
.cl-quote__mark--down {
  display: inline-block;
  vertical-align: baseline;
  margin-left: var(--space-2);
}
.cl-quote__text {
  margin: var(--space-7) 0 0;
  color: var(--cl-quote-ink);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-normal);
}
.cl-quote__cite {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-7);
}
.cl-quote__name {
  color: var(--cl-quote-name);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
}
.cl-quote__role {
  color: var(--cl-quote-ink);
  font-size: var(--fs-sm);
  opacity: 0.85;
}

/* ---- LETTER BODY ----------------------------------------- */
.cl-letter {
  max-width: 68ch;
}
.cl-letter > p {
  color: var(--color-text);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  margin-top: var(--space-9);
}
.cl-letter__salutation {
  color: var(--color-primary);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-4);
}

/* ---- Highlight callouts ---------------------------------- */
.cl-highlights {
  margin-top: var(--space-12);
  /* padding: var(--space-11) var(--space-12);
  background: var(--cl-hl-bg);
  border: 1px solid var(--cl-hl-border); */
  /* border-left: 3px solid var(--color-primary); */
  /* border-radius: var(--radius-md); */
}
.cl-highlights__eyebrow {
  margin: 0 0 var(--space-7);
  color: var(--color-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  /* text-transform: uppercase; */
  letter-spacing: var(--ls-wide);
}
.cl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.cl-list li {
  position: relative;
  padding-left: var(--space-10);
  color: var(--color-text);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}
.cl-list li::before {
  content: "";
  position: absolute;
  left: var(--space-3);
  top: calc(var(--lh-relaxed) * 0.5em);
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: var(--radius-circle);
  background: var(--cl-marker);
}
.cl-list2 {list-style: decimal; padding-left: 1rem;}
.cl-list2 li::before {
  display: none;
}
.cl-list--roman {
  counter-reset: cl-roman;
}
.cl-list--roman li {
  counter-increment: cl-roman;
}
.cl-list--roman li::before {
  content: counter(cl-roman, lower-roman) ".";
  left: 0;
  /* top: 0; */
  width: var(--space-9);
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--cl-marker);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

/* ---- Sign-off -------------------------------------------- */
.cl-signoff {
  margin-top: var(--space-13);
}
.cl-signoff__line {
  color: var(--color-text);
  margin-top: var(--space-4);
}
.cl-signoff__name {
  margin-top: var(--space-9);
  color: var(--color-primary);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}
.cl-signoff__role {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* ---- Previous / Next section navigation ------------------ */
.cl-pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-9);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-13);
}
.cl-pager__link {
  flex: 1 1 0;
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-9) var(--space-11);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: border-color var(--transition-base) var(--ease-standard),
              box-shadow var(--transition-base) var(--ease-standard),
              transform var(--transition-base) var(--ease-standard);
}
.cl-pager__link--next {
  justify-content: flex-end;
  text-align: right;
}
/* Pager with only one link (first/last section): keep the card at the
   width it would have beside a sibling instead of stretching full-bleed. */
.cl-pager--single .cl-pager__link {
  flex: 0 1 calc(50% - (var(--space-9) / 2));
}
.cl-pager__link:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
  color: var(--color-text);
}
.cl-pager__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: var(--icon-2xl);
  height: var(--icon-2xl);
  border-radius: var(--radius-circle);
  background: var(--color-icon-well);
  color: var(--color-primary);
  font-size: var(--fs-lg);
  transition: background var(--transition-base) var(--ease-standard),
              color var(--transition-base) var(--ease-standard);
}
.cl-pager__link:hover .cl-pager__icon {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.cl-pager__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cl-pager__label {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.cl-pager__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-text-strong);
}
/* Mobile pager. Must stay after the rules above: a media query adds no
   specificity, so an equal-specificity selector declared later would win
   regardless of viewport.
   • One card per row, edge to edge — a half-width card leaves the row
     looking unfinished, and side-by-side prev/next gets too cramped.
   • Section titles are long ("Our Companies: Building Responsibly"), so
     the title steps down to the label's size; its weight and stronger
     colour still separate it from the uppercase label above. */
@media (max-width: 767.98px) {
  .cl-pager__link,
  .cl-pager--single .cl-pager__link { flex-basis: 100%; }
  .cl-pager__title { font-size: var(--fs-sm); }
}

/* ---- Appearance animations ------------------------------- */
@keyframes cl-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cl-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cl-zoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}
/* Pull-quote entrance (on load). */
@keyframes cl-in-right {
  from { opacity: 0; transform: translateX(52px); }
  to   { opacity: 1; transform: none; }
}

/* Scroll reveal — GSAP ScrollTrigger animates every .cl-reveal
   element into view (see assets/js/gsap-init.js). They are hidden
   up-front only when motion is allowed, so there is no flash
   before GSAP runs. Under reduced-motion they stay visible, and
   gsap-init reveals them (inline style) if GSAP fails to load. */
@media (prefers-reduced-motion: no-preference) {
  .cl-reveal { opacity: 0; }
}

/* Image reveal — a left-to-right clip-path wipe + gentle zoom-out,
   applied to in-content photography/diagrams across every page
   (see .cl-img-reveal wiring in assets/js/gsap-init.js). clip-path
   scales along with the element's own transform, so the wipe stays
   pinned to the image's edges without needing overflow:hidden on
   the parent figure — several of these images carry their own
   box-shadow, which overflow:hidden would otherwise clip. Hidden
   up-front only when motion is allowed, matching .cl-reveal. */
@media (prefers-reduced-motion: no-preference) {
  .cl-img-reveal img {
    clip-path: inset(0 100% 0 0);
    transform: scale(1.12);
  }
}

/* ---- Responsive ------------------------------------------ */
/* Below the laptop breakpoint the layout collapses to a single
   column and the portrait un-pins (stacks above the letter). */
@media (max-width: 991.98px) {
  .cl-layout {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
  .cl-layout__media {
    position: relative;
    top: auto;
    max-width: 520px;
    margin-inline: auto;
  }
  .cl-layout__body { width: 100%; }
  .cl-letter { max-width: none; }
}

@media (max-width: 575.98px) {
  .cl-hero__title {
    top: var(--space-9);
    left: var(--space-9);
  }
  .cl-quote {
    padding: var(--space-11) var(--space-9);
  }
  .cl-highlights {
    padding: var(--space-9);
  }
}


/* ============================================================
   OUR LEADERSHIP  (our-leadership.html)
   Reuses the shared hero classes (.cl-hero__media / __img /
   __scrim / __title) for the team photo. Only the roster below
   is page-specific. Everything references semantic theme tokens
   so light / dark modes are handled automatically.
   ============================================================ */

/* Wide team photo. `position: relative` is required here because
   the shared .cl-hero__media no longer sets it (on the Chairman
   page .cl-layout__media does) — it anchors the absolutely
   positioned title + scrim to the figure. */
.ol-hero {
  position: relative;
  max-height: 78vh;
}
.ol-hero .cl-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ol-hero .cl-hero__title {
  color: var(--bf-blue);
}

/* ---- Groups: seating diagram + numbered two-column list --- */
.ol-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}
.ol-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
  padding: var(--space-12);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base) var(--ease-standard),
              transform var(--transition-base) var(--ease-standard),
              border-color var(--transition-base) var(--ease-standard);
}
.ol-group:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--color-primary);
}

/* Diagrams are line-art on a white sheet — keep them on a fixed
   light card so the strokes stay legible in dark mode too. */
.ol-group__diagram-wrap {
  background: var(--bf-white);
  border-radius: var(--radius-md);
  padding: var(--space-9);
  box-shadow: var(--shadow-xs);
}
.ol-group__diagram {
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
}

.ol-group__lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-11) var(--space-10);
}

.ol-list {
  --ol-accent: #7e564a;
  list-style: decimal;
  margin: 0;
  padding-left: 1.15em;
}
.ol-list > li + li {
  margin-top: var(--space-9);
}
.ol-list li::marker {
  color: var(--ol-accent);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}
.ol-person {
  display: list-item;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}
.ol-person__name,
.ol-person__role {
  display: block;
}
.ol-person__name {
  color: var(--ol-accent);
  font-weight: var(--fw-semibold);
  margin-bottom: 2px;
}
.ol-person__role {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* ---- Responsive ------------------------------------------ */
@media (max-width: 991.98px) {
  .ol-groups {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
}
/* Phones + small tablets: the 32px title overlaps the team's faces at
   these sizes (and has no scrim behind it), so lift it out of the photo
   and stack it as a heading above the image. The card chrome (rounded
   corners + shadow) moves from the figure onto the image itself. */
@media (max-width: 767.98px) {
  .ol-hero {
    display: flex;
    flex-direction: column;
    max-height: none;
    overflow: visible;      /* don't clip the image's shadow / the title */
    box-shadow: none;
    border-radius: 0;
  }
  .ol-hero .cl-hero__title {
    position: static;
    order: -1;              /* above the image regardless of DOM order */
    margin: 0 0 var(--space-9);
    line-height: var(--lh-tight);
  }
  .ol-hero .cl-hero__img {
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }
  .ol-hero .cl-hero__scrim { display: none; }
  /* Stacked title now sits on the page background, not the light photo,
     so use the lightened brand blue in dark mode (as other headings do). */
  [data-theme="dark"] .ol-hero .cl-hero__title { color: var(--color-primary-strong); }
}
@media (max-width: 575.98px) {
  .ol-group {
    padding: var(--space-9);
  }
  .ol-group__lists {
    grid-template-columns: 1fr;
    gap: var(--space-9);
  }
}


/* ============================================================
   CORPORATE INFORMATION  (corporate-information.html)
   Periwinkle page background with blue-headed white panels and
   committee badges, matching the annual-report spread. Page-only
   tokens are declared on .ci-page (light) and remapped for dark.
   ============================================================ */
.ci-page {
  --ci-bg:          #E8ECF8;
  --ci-card:        #FFFFFF;
  --ci-head:        var(--bf-blue);
  --ci-border:      #C7D3EE;
  --ci-accent:      var(--bf-blue-strong);
  --ci-badge-fill:  var(--bf-blue);
  --ci-inner:       #FFFFFF;
}
[data-theme="dark"] .ci-page {
  --ci-bg:          var(--bf-navy-900);
  --ci-card:        var(--bf-navy);
  --ci-head:        #0C4C8A;
  --ci-border:      rgba(255,255,255,0.14);
  --ci-accent:      var(--color-primary-strong);
  --ci-badge-fill:  var(--bf-blue-500);
  --ci-inner:       #07305A;
}

/* Tint the whole content area (header/footer keep their own surfaces) */
.ci-page main { background: var(--ci-bg); }

.ci-title {
  color: var(--color-text-strong);
  font-size: var(--fs-page-title);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
}

/* ---- Panel (blue header + white body) -------------------- */
.ci-panel {
  background: var(--ci-card);
  border: 1px solid var(--ci-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ci-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  background: var(--ci-head);
  color: var(--bf-white);
  padding: var(--space-7) var(--space-11);
}
.ci-panel__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
}
.ci-panel__chevron {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-circle);
  border: 1.5px solid rgba(255,255,255,0.65);
  font-size: var(--fs-sm);
}
.ci-panel__body {
  padding: var(--space-11);
}

/* ---- Board of Directors ---------------------------------- */
.ci-board__chair {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-11);
}
.ci-board__chair .ci-dir {
  max-width: 360px;
  width: 100%;
}
.ci-board__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-9);
}

.ci-dir {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  padding: var(--space-9);
  background: var(--ci-inner);
  border: 1px solid var(--ci-border);
  border-radius: var(--radius-md);
}
.ci-dir__head {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--ci-border);
  text-align: center;
}
.ci-dir__name {
  color: var(--ci-accent);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}
.ci-dir__role {
  margin-top: var(--space-2);
  color: var(--color-text-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.ci-dir__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* ---- Committee badge ------------------------------------- */
.ci-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 2px var(--space-3);
  border: 1px solid var(--ci-badge-fill);
  border-radius: var(--radius-xs);
  background: #fff;
  color: invert;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  white-space: nowrap;
}
.ci-badge--chair {
  background: var(--ci-badge-fill);
  border-color: var(--ci-badge-fill);
  color: var(--bf-white);
}

[data-theme="dark"] .ci-badge {
  color: #000;
}

[data-theme="dark"] .ci-badge--chair {
  color: var(--bf-white);
}

/* ---- Committees legend ----------------------------------- */
.ci-legend {
  background: var(--ci-card);
  border: 1px solid var(--ci-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-12);
}
.ci-legend__title {
  color: var(--ci-accent);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--space-9);
}
.ci-legend__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-13);
}
.ci-legend__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.ci-legend__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  color: var(--color-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}
.ci-legend__item .ci-badge { flex-shrink: 0; }
.ci-legend__key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-11);
  margin-top: var(--space-11);
  padding-top: var(--space-9);
  border-top: 1px solid var(--ci-border);
}
.ci-legend__keyitem {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  color: var(--color-text);
  font-size: var(--fs-sm);
}
.ci-badge--key {
  min-width: 34px;
  height: 18px;
}
.ci-legend__note {
  margin-top: var(--space-9);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

/* ---- CFO + Company Secretary duo -------------------------- */
.ci-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-11);
}
.ci-namecard {
  display: grid;
  place-items: center;
  min-height: 72px;
  padding: var(--space-9);
  border: 1.5px solid var(--ci-border);
  border-radius: var(--radius-md);
  color: var(--ci-accent);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  text-align: center;
}

/* ---- Auditors -------------------------------------------- */
.ci-auditors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-9);
}
.ci-auditor {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  text-align: center;
  padding: var(--space-9);
  border: 1.5px solid var(--ci-border);
  border-radius: var(--radius-md);
}
.ci-auditor__name {
  color: var(--ci-accent);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}
.ci-auditor__role {
  color: var(--color-text-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

/* ---- Bankers --------------------------------------------- */
.ci-bankers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-13);
}
.ci-bankers__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.ci-bankers__list li {
  color: var(--color-text-strong);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
}

/* ---- Contact panels -------------------------------------- */
.ci-contacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-11);
  align-items: start;
}
.ci-field {
  color: var(--color-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-7);
}
.ci-field:last-child { margin-bottom: 0; }
.ci-label {
  /* color: var(--ci-accent); */
  color: invert;
  font-weight: var(--fw-semibold);
}
.ci-field a { word-break: break-word; }

/* ---- Responsive ------------------------------------------ */
@media (max-width: 991.98px) {
  .ci-board__grid { grid-template-columns: repeat(2, 1fr); }
  .ci-contacts { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  .ci-duo { grid-template-columns: 1fr; }
  .ci-auditors { grid-template-columns: 1fr; }
  .ci-legend__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .ci-bankers { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .ci-board__grid { grid-template-columns: 1fr; }
  .ci-panel__title { font-size: var(--fs-base); }
  .ci-panel__body { padding: var(--space-9); }
}

/* ---- Non-executive director pair (no committee badges) --- */
.ci-board__pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-9);
  max-width: 620px;
  margin: var(--space-9) auto 0;
}

/* ---- Committees legend — single column layout ------------ */
.ci-legend__list--single {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ---- Leadership Team --------------------------------------- */
.ci-lead__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-9);
}
.ci-lead {
  padding: var(--space-9);
  background: var(--ci-inner);
  border: 1px solid var(--ci-border);
  border-radius: var(--radius-md);
  text-align: center;
  transition: transform var(--transition-base, .2s ease), box-shadow var(--transition-base, .2s ease), border-color var(--transition-base, .2s ease);
}
.ci-lead:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
  border-color: var(--ci-accent);
}
.ci-lead__name {
  color: var(--ci-accent);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}
.ci-lead__role {
  margin-top: var(--space-3);
  color: var(--color-text-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-relaxed);
}
.ci-lead__role span {
  display: block;
  margin-top: 2px;
  color: invert;
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular, 400);
}

/* ---- Appearance animations ---------------------------------
   Pure-CSS fade/rise-in for director, leadership and badge
   elements — layered on top of the page-level .cl-reveal scroll
   trigger so content still animates in for reduced network/JS
   edge cases and gives badges/cards a staggered pop on paint. */
@keyframes ci-rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ci-pop-in {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .ci-dir,
  .ci-lead,
  .ci-auditor {
    animation: ci-rise-in .5s ease both;
  }
  .ci-board__grid .ci-dir:nth-child(2) { animation-delay: .06s; }
  .ci-board__grid .ci-dir:nth-child(3) { animation-delay: .12s; }
  .ci-board__grid .ci-dir:nth-child(4) { animation-delay: .18s; }
  .ci-board__grid .ci-dir:nth-child(5) { animation-delay: .24s; }
  .ci-board__grid .ci-dir:nth-child(6) { animation-delay: .3s; }
  .ci-lead__grid .ci-lead:nth-child(4n+2) { animation-delay: .05s; }
  .ci-lead__grid .ci-lead:nth-child(4n+3) { animation-delay: .1s; }
  .ci-lead__grid .ci-lead:nth-child(4n+4) { animation-delay: .15s; }
  .ci-dir__badges .ci-badge {
    animation: ci-pop-in .35s ease both;
  }
  .ci-dir__badges .ci-badge:nth-child(2) { animation-delay: .05s; }
  .ci-dir__badges .ci-badge:nth-child(3) { animation-delay: .1s; }
  .ci-dir__badges .ci-badge:nth-child(4) { animation-delay: .15s; }
  .ci-dir__badges .ci-badge:nth-child(5) { animation-delay: .2s; }
}

/* ---- Responsive: pair, legend, leadership ------------------ */
@media (max-width: 991.98px) {
  .ci-lead__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  .ci-board__pair { grid-template-columns: 1fr; max-width: 360px; }
}
@media (max-width: 575.98px) {
  .ci-lead__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   OUR ESG PRIORITIES  (our-esg-priorities.html)
   "Our Planet has a Deadline. We have a Plan: ESG"
   Forest hero spread carrying eight white pillar cards, then a
   pale-mint canvas with the carbon-neutrality / wind panels and
   the story rows. Surface + accent tints are theme variables so
   dark mode remaps in a single place.
   ============================================================ */
.esgp-page {
  --esgp-canvas:      #EAF1E9;              /* pale mint page body   */
  --esgp-card:        var(--bf-white);      /* white pillar/story card */
  --esgp-fig:         #231F20;              /* big number ink        */
  --esgp-label:       #3B4655;              /* stat caption slate    */
  --esgp-icon-op:     0.9;                  /* line-icon opacity     */
}
[data-theme="dark"] .esgp-page {
  --esgp-canvas:      #0B1712;              /* deep green canvas     */
  --esgp-card:        #14201A;              /* dark forest card      */
  --esgp-fig:         #F3F7F4;
  --esgp-label:       #AFC0B4;
  --esgp-icon-op:     0.85;
}
.esgp-page main { background: var(--esgp-canvas); }
.esgp-choices { padding-block: var(--space-16) var(--space-13); }
.esgp-stories { padding-block: 0 var(--space-16); }

/* ---- Hero spread (forest backdrop) ----------------------- */
.esgp-hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-15) var(--space-16);
  background:
    linear-gradient(180deg, rgba(9, 26, 16, 0.62) 0%, rgba(9, 26, 16, 0.30) 34%, rgba(9, 26, 16, 0.14) 100%),
    url("../images/our-esg-priorities-bg.jpg") center top / cover no-repeat;
}
[data-theme="dark"] .esgp-hero {
  background:
    linear-gradient(180deg, rgba(3, 12, 7, 0.74) 0%, rgba(3, 12, 7, 0.52) 40%, rgba(3, 12, 7, 0.42) 100%),
    url("../images/our-esg-priorities-bg.jpg") center top / cover no-repeat;
}
.esgp-hero__inner { position: relative; z-index: 1; }

.esgp-hero__head { max-width: 60ch; margin-bottom: var(--space-14); }
.esgp-eyebrow {
  color: var(--bf-white);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--space-7);
}
.esgp-title {
  color: var(--bf-white);
  font-size: var(--fs-page-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-9);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.esgp-lede {
  color: rgba(255, 255, 255, 0.94);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  max-width: 54ch;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
  margin-bottom: 0;
}

/* ---- Eight pillar cards ---------------------------------- */
.esgp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-10);
  align-items: stretch;
}
.esgp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  padding: var(--space-11) var(--space-11) var(--space-15);
  background: var(--esgp-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.esgp-card__title {
  color: var(--color-primary);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-9);
}
.esgp-card__stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}
.esgp-stat__fig {
  color: var(--esgp-fig);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-3);
}
.esgp-stat__fig--word { font-size: var(--fs-xl); }
.esgp-stat__fig sub { font-size: 0.55em; font-weight: var(--fw-bold); }
.esgp-cur { font-weight: var(--fw-bold); }
.esgp-sep { color: var(--color-text-muted); font-weight: var(--fw-regular); }
.esgp-stat__label {
  color: var(--esgp-label);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  margin-bottom: 0;
}
.esg-num { color: inherit; }

/* Bullet-style cards (cyber security / stakeholder engagement) */
.esgp-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.esgp-card__list li {
  position: relative;
  color: var(--esgp-label);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  padding-left: var(--space-7);
}
.esgp-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--color-primary);
}

/* Decorative line icon, pinned bottom-right */
.esgp-card__icon {
  position: absolute;
  right: var(--space-11);
  bottom: 0;
  width: 54px;
  height: 54px;
  object-fit: contain;
  opacity: var(--esgp-icon-op);
  filter: invert(1) brightness(1.6);
}
[data-theme="dark"] .esgp-card__icon { filter: invert(0) brightness(1.6); }

/* ============================================================
   ESG CHOICES THAT CREATE CHANGE — panels + story rows
   ============================================================ */
.esgp-h2 {
  color: var(--color-primary);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-9);
}
.esgp-intro {
  color: var(--color-text-strong);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-relaxed);
  max-width: 70ch;
  margin-bottom: var(--space-13);
}

.esgp-duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-10);
  align-items: stretch;
  margin-bottom: var(--space-11);
}
.esgp-panel {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.esgp-panel--text {
  background: var(--esgp-card);
  padding: var(--space-13);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.esgp-panel--media { background: var(--esgp-card); }
.esgp-panel--media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
}
.esgp-panel__title {
  color: var(--color-primary);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-8);
}
.esgp-panel__desc {
  color: var(--color-text);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  margin-bottom: 0;
}
.esgp-bignum {
  color: var(--esgp-fig);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tight);
  margin: var(--space-11) 0 var(--space-5);
}
.esgp-bignum sub { font-size: 0.5em; }
.esgp-bignum__sub {
  color: var(--color-text-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  margin-bottom: 0;
}

/* ---- Story rows (image + copy) --------------------------- */
.esgp-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  padding: var(--space-11);
  background: var(--esgp-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-11);
}
.esgp-story:last-child { margin-bottom: 0; }
.esgp-story--reverse .esgp-story__media { order: -1; }
.esgp-story__media { margin: 0; border-radius: var(--radius-md); overflow: hidden; }
.esgp-story__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
}
.esgp-story__title {
  color: var(--color-primary);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-8);
}
.esgp-story__desc {
  color: var(--color-text);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  margin-bottom: 0;
}

/* ---- Responsive ------------------------------------------ */
@media (max-width: 1199.98px) {
  .esgp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991.98px) {
  .esgp-duo { grid-template-columns: 1fr; }
  .esgp-duo--reverse .esgp-panel--media { order: -1; }
  .esgp-story { grid-template-columns: 1fr; gap: var(--space-9); }
  .esgp-story--reverse .esgp-story__media { order: -1; }
  .esgp-h2 { font-size: var(--fs-2xl); }
}
@media (max-width: 575.98px) {
  .esgp-hero { padding-block: var(--space-13) var(--space-14); }
  .esgp-grid { grid-template-columns: 1fr; }
  .esgp-panel--text { padding: var(--space-11); }
  .esgp-bignum { font-size: var(--fs-3xl); }
}


/* ============================================================
   OUR REFRESHED BRAND IDENTITY  (our-refreshed-brand-identity.html)
   Intro copy in brand blue, three staggered pillar cards
   (Vision / Mission / Purpose) tinted per the PDF, then the new
   Bajaj brand-architecture logo family. Card + icon-well tints
   are theme variables so dark mode remaps in one place.
   ============================================================ */
.rbi-title {
  color: var(--color-primary);
  font-size: var(--fs-page-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  max-width: 18ch;
}
.rbi-lead {
  margin-top: var(--space-11);
  max-width: 72ch;
  color: var(--color-primary);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
}

[data-theme='dark'] .rbi-title,
[data-theme='dark'] .rbi-lead {
  color: var(--bf-white);
}

/* ---- Pillar card tints (per PDF) ------------------------- */
.rbi-pillars {
  --rbi-vision-bg:   #E6EEF0;   /* pale blue-grey  */
  --rbi-mission-bg:  var(--bf-white);
  --rbi-purpose-bg:  var(--bf-sand);   /* #F1E8E2 warm sand */
  --rbi-vision-well:  var(--bf-teal);   /* teal  */
  --rbi-mission-well: var(--bf-grey-600);
  --rbi-purpose-well: var(--bf-tan);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-12);
  align-items: stretch;          /* equal-height boxes, aligned in a row */
  margin-top: var(--space-15);   /* room for the half-outside icons */
}
[data-theme="dark"] .rbi-pillars {
  --rbi-vision-bg:   #102A33;
  --rbi-mission-bg:  var(--color-surface);
  --rbi-purpose-bg:  #2A211C;
}

.rbi-pillar {
  position: relative;
  /* extra top padding leaves room for the icon that straddles the top edge */
  padding: var(--space-14) var(--space-11) var(--space-11);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-out);
}
.rbi-pillar:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.rbi-pillar--vision  { background: var(--rbi-vision-bg); }
.rbi-pillar--mission { background: #c6e9f4; }
.rbi-pillar--purpose { background: var(--rbi-purpose-bg); }


[data-theme="dark"] .rbi-pillar--mission { background: var(--color-surface); }


/* Circular icon well — sits half outside the top edge of the card */
.rbi-pillar__well {
  position: absolute;
  top: -32px;                 /* half of the 64px well → half outside */
  left: var(--space-11);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-sm);
}
.rbi-pillar__well img {
  width: 100%;
    height: 100%;
    object-fit: contain;
}
.rbi-pillar__well--vision  { background: var(--rbi-vision-well); }
.rbi-pillar__well--mission { background: var(--rbi-mission-well); }
.rbi-pillar__well--purpose { background: var(--rbi-purpose-well); }

.rbi-pillar__title {
  color: var(--color-text-strong);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-7);
}
.rbi-pillar__text {
  color: var(--color-text);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  margin: 0;
}

/* ---- Descent: line + dot flowing down to the logo family - */
.rbi-descent {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-12);
}
.rbi-descent__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-circle);
  background: var(--color-primary);
}
.rbi-descent__line {
  width: 2px;
  height: var(--space-14);
  background: var(--bf-slate);
}
[data-theme="dark"] .rbi-descent__line { background: rgba(255,255,255,0.32); }

/* ---- Brand architecture (logo family) -------------------- */
.rbi-arch {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-8);
}

/* Holding company node — Bajaj Finserv */
.rbi-arch__parent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-12);
}
.rbi-arch__parent-logo {
  display: block;
  height: 65px;
  width: auto;
  object-fit: contain;
}

/* Connector line from parent down to the subsidiary grid */
.rbi-arch__stem {
  width: 2px;
  height: var(--space-13);
  background: var(--color-border-strong);
}

/* Subsidiary logo grid — framed family box */
.rbi-arch__grid {
  /* Height every Bajaj mark (the blue square) is scaled to — that square
     is what the eye compares across the family, not the whole artwork.
     The corrections below are ratios of this value, so it alone resizes
     the grid. */
  --rbi-mark-h: 55px;
  list-style: none;
  margin: 0;
  width: 100%;
  padding: var(--space-13) var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-9);
}
.rbi-arch__cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 96px;
  padding: var(--space-9) var(--space-10);
  background: var(--bf-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rbi-arch__cell:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--bf-blue);
}
/* Logos sit flush to the cell's left edge, so the marks line up in a
   column down the grid rather than drifting with each wordmark's length.
   Every source canvas starts its artwork at x=0, so pinning the canvas
   left pins the mark left. In these four the canvas is cropped to the
   mark, so canvas height IS mark height and no correction applies. */
.rbi-arch__cell img {
  width: auto;
  max-width: 100%;
  height: var(--rbi-mark-h);
  object-fit: contain;
  object-position: left center;
}
/* In the remaining seven the mark occupies only the top ~82.5% of the
   canvas — the band below it is either empty (housing-finance, health,
   asset-mgmt, broking, markets) or holds a tagline (life, general).
   object-fit scales that band along with the mark, so untreated these
   print ~18% small and ride high. Scale the canvas up by the same factor
   to bring the mark back to size, then nudge down to re-centre it. */
.rbi-arch__cell img[src$="bajaj-housing-finance.png"],
.rbi-arch__cell img[src$="babaj-life.png"],
.rbi-arch__cell img[src$="bajaj-general.png"],
.rbi-arch__cell img[src$="bajaj-health.png"],
.rbi-arch__cell img[src$="bajaj-asset-mgmt.png"],
.rbi-arch__cell img[src$="bajaj-broking.png"],
.rbi-arch__cell img[src$="bajaj-markets.png"] {
  height: calc(var(--rbi-mark-h) / 0.825);
  position: relative;
  top: calc(var(--rbi-mark-h) * 0.106);
}
/* babaj-life.png also carries 201px of empty canvas on its right edge.
   Left-aligned that padding falls outside the artwork and needs no
   correction — it only mattered while the logos were centred. */

/* ---- Responsive ------------------------------------------ */
@media (max-width: 991.98px) {
  .rbi-pillars {
    grid-template-columns: 1fr;
    gap: var(--space-15);   /* clears the half-outside icons when stacked */
    margin-top: var(--space-13);
  }
  .rbi-arch__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767.98px) {
  .rbi-arch__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .rbi-lead { font-size: var(--fs-base); }
  .rbi-arch__grid {
    padding: var(--space-12) var(--space-8);
    --rbi-mark-h:45px;   /* corrections above follow automatically */
  }
  .rbi-arch__parent { padding: var(--space-5) var(--space-10); }
  .rbi-arch__parent-logo { height: 60px; }
  /* Narrow side padding here: the widest wordmark (bajaj-asset-mgmt)
     needs ~105px of cell width to reach the shared logo height. */
  .rbi-arch__cell { min-height: 74px; padding: var(--space-8) var(--space-5); }
}


/* ============================================================
   CORPORATE SOCIAL RESPONSIBILITY  (corporate-social-responsibility.html)
   Eyebrow/title hero pattern (per pc-/esg- pages) + a reusable
   coloured section head, split media/text rows, case-study
   callouts and stat tiles built from the shared design tokens.
   ============================================================ */
:root {
  --csr-head-blue-bg:   var(--bf-blue-050);
  --csr-head-blue-fg:   var(--bf-blue);
  --csr-head-green-bg:  #E7F0DD;
  --csr-head-green-fg:  #4db848;
  --csr-callout-bg:     var(--color-bg-subtle);
  --csr-icon-cyan-bg:   var(--bf-cyan-100);
  --csr-icon-cyan-fg:   var(--bf-teal);
  --csr-icon-green-bg:  #E7F0DD;
  --csr-icon-green-fg:  #4db848;
  --csr-icon-sage-bg:   #EDF3E4;
  --csr-icon-sage-fg:   #6B9A4A;
  --csr-icon-grey-bg:   var(--bf-grey-100);
  --csr-icon-grey-fg:   var(--bf-slate);
}
[data-theme="dark"] {
  --csr-head-blue-bg:   rgba(0,93,172,0.16);
  --csr-head-blue-fg:   var(--color-primary-strong);
  --csr-head-green-bg:  rgba(62,122,52,0.18);
  --csr-head-green-fg:  #8FC97D;
  --csr-callout-bg:     var(--color-surface-2);
  --csr-icon-cyan-bg:   rgba(58,194,214,0.16);
  --csr-icon-cyan-fg:   var(--bf-cyan);
  --csr-icon-green-bg:  rgba(62,122,52,0.18);
  --csr-icon-green-fg:  #8FC97D;
  --csr-icon-sage-bg:   rgba(107,154,74,0.18);
  --csr-icon-sage-fg:   #A9CC8F;
  --csr-icon-grey-bg:   rgba(255,255,255,0.08);
  --csr-icon-grey-fg:   var(--color-text-muted);
}

/* ---- Hero: eyebrow, title, lead + quote / stats ----------- */
.csr-eyebrow {
  color: var(--color-primary);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-8);
}
.csr-title {
  color: var(--color-text-strong);
  font-size: var(--fs-page-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  max-width: 22ch;
  margin-bottom: var(--space-13);
}
.csr-hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-14);
  align-items: start;
}
.csr-lead {
  color: var(--color-text);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
}
.csr-quote { margin-top: var(--space-11); margin-bottom: 0; }

.csr-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-9);
  align-content: start;
}
.csr-hero-stat {
  padding: var(--space-10) var(--space-9);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-standard);
}
.csr-hero-stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.csr-hero-stat__num {
  color: var(--color-primary);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tight);
}
.csr-unit { font-size: 0.6em; font-weight: var(--fw-medium); }
/* Count-up target — number-only text node so the ScrollTrigger
   tween in gsap-init.js can safely parseFloat() it; unit/currency
   text stays in sibling .csr-unit spans. */
.csr-num {     color: var(--color-primary); font: inherit; letter-spacing: inherit; }
.csr-hero-stat__label {
  margin-top: var(--space-5);
  color: var(--color-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* ---- Five pillars wheel box -------------------------------- */
.csr-pillars-box {
  margin-top: var(--space-15);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
}
.csr-pillars__title {
  color: var(--color-primary);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  text-align: center;
  margin-bottom: var(--space-11);
}
.csr-pillars {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-13);
  align-items: center;
}
.csr-pillars__media { margin: 0; display: flex; justify-content: center; }
.csr-pillars__media img { width: 100%; max-width: 420px; height: auto; }
.csr-pillars__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}
.csr-pillars__list li {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  color: var(--color-text-strong);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}
.csr-pillars__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-2xl);
  height: var(--icon-2xl);
  flex-shrink: 0;
  border-radius: var(--radius-circle);
  font-size: var(--icon-lg);
}
.csr-pillars__icon--blue  { background: var(--csr-head-blue-bg);  color: var(--csr-head-blue-fg); }
.csr-pillars__icon--cyan  { background: var(--csr-icon-cyan-bg);  color: var(--csr-icon-cyan-fg); }
.csr-pillars__icon--green { background: var(--csr-icon-green-bg); color: var(--csr-icon-green-fg); }
.csr-pillars__icon--sage  { background: var(--csr-icon-sage-bg);  color: var(--csr-icon-sage-fg); }
.csr-pillars__icon--grey  { background: var(--csr-icon-grey-bg);  color: var(--csr-icon-grey-fg); }

/* ---- Coloured section head (Youth Skilling / Child Development) */
.csr-head {
  display: flex;
  align-items: center;
  gap: var(--space-9);
  padding: var(--space-9) var(--space-11);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-13);
}
.csr-head--blue  { background: var(--csr-head-blue-bg); }
.csr-head--green { background: var(--csr-head-green-bg); }
.csr-head__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  font-size: var(--icon-xl);
  color: #fff;
  padding: 5px;
}
.csr-head--blue .csr-head__icon  { background: var(--csr-head-blue-fg); }
.csr-head--green .csr-head__icon { background: var(--csr-head-green-fg); }
.csr-head__title {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
}
.csr-head--blue .csr-head__title  { color: var(--csr-head-blue-fg); }
/* .csr-head--green .csr-head__title { color: var(--csr-head-green-fg); } */

/* ---- Body copy ---------------------------------------------- */
.csr-h3 {
  color: var(--color-primary);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin: var(--space-13) 0 var(--space-6);
}
.csr-h3:first-child { margin-top: 0; }
/* Child Development sub-sections (Child Education, Child Health, Child
   Protection, Inclusion for PwDs, PI JAM case study) pick up the same
   green used for the "Child Development" section head. */
.csr-h3--green { color: var(--csr-head-green-fg); }
.csr-h4 {
  color: var(--color-text-strong);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  margin: var(--space-11) 0 var(--space-6);
}
.csr-body {
  color: var(--color-text);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-7);
}
.csr-body:last-child { margin-bottom: 0; }
.csr-list {
  margin: var(--space-7) 0;
  padding-left: var(--space-9);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.csr-list li {
  color: var(--color-text);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}
.csr-list li strong { color: var(--color-text-strong); }

/* ---- Two-column body layout ---------------------------------- */
.csr-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-14);
  margin-bottom: var(--space-13);
}
.csr-col--full { grid-column: 1 / -1; }

/* ---- Media + text split row (Healthcare Skilling, Child Health…) */
.csr-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-14);
  align-items: center;
  margin-bottom: var(--space-15);
}
.csr-split--reverse { grid-template-columns: 1.1fr 0.9fr; }
.csr-split--reverse .csr-split__media { order: 2; }
.csr-split__media { margin: 0; height: 100%; }
.csr-split__media img {
  width: 100%;
  /* height: 100%; */
  min-height: 240px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
  .csr-split__media img {
    height: auto;
  }
}

.csr-split__body { min-width: 0; }

/* ---- Case-study callout (PanIIT, Youth4Jobs, PI JAM, Volunteering) */
.csr-case {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: var(--space-13);
  align-items: start;
  background: var(--csr-callout-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-11);
  margin-bottom: var(--space-13);
}
.csr-case--reverse { grid-template-columns: 1.3fr 0.7fr; }
.csr-case--reverse .csr-case__media { order: 2; }
/* Pinned to the top of the row and capped to a fixed ratio so a
   long case-study write-up can't stretch the photo tall — the old
   height:100% + align-items:center let the image balloon to match
   whatever the text column's height happened to be. */
.csr-case__media {
  margin: 0;
  position: sticky;
  top: 100px;
}
.csr-case__media img {
  width: 100%;
  height: auto;
  /* aspect-ratio: 4 / 5; */
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.csr-case__body { min-width: 0; }
.csr-case .csr-h3:first-child { margin-top: 0; }

/* ---- Inline callout stat (Supporting Women Employees box) --- */
.csr-callout {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-11);
  margin-bottom: var(--space-13);
}
.csr-callout__num {
  margin-top: var(--space-9);
  color: var(--color-primary);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-none);
}
.csr-callout__label {
  margin-top: var(--space-4);
  color: var(--color-text-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

/* ---- Metrics grid (Artisan Skilling) -------------------------- */
.csr-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-11);
}
.csr-metric {
  padding: var(--space-11);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-standard);
}
.csr-metric:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.csr-metric__num {
  color: var(--color-primary);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-none);
}
.csr-metric__label {
  margin-top: var(--space-5);
  color: var(--color-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* ---- Inline single stat under a split section ---------------- */
.csr-stat-inline {
  margin-top: var(--space-9);
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
}
.csr-stat-inline__num {
  color: var(--color-primary);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-none);
}
.csr-stat-inline__label {
  color: var(--color-text-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

/* ---- Responsive ------------------------------------------ */
@media (max-width: 991.98px) {
  .csr-hero { grid-template-columns: 1fr; gap: var(--space-12); }
  .csr-pillars { grid-template-columns: 1fr; }
  .csr-pillars__media img { max-width: 320px; }
  .csr-cols { grid-template-columns: 1fr; gap: var(--space-10); }
  .csr-split,
  .csr-split--reverse,
  .csr-case,
  .csr-case--reverse {
    grid-template-columns: 1fr;
  }
  .csr-split--reverse .csr-split__media,
  .csr-case--reverse .csr-case__media { order: -1; }
  .csr-split__media img { min-height: 220px; }
  .csr-case__media { position: static; }        /* sticky only makes sense in the two-column layout */
  /* .csr-case__media img { aspect-ratio: 16 / 9; } */
}
@media (max-width: 767.98px) {
  .csr-head { padding: var(--space-8) var(--space-9); gap: var(--space-8); }
  .csr-head__icon { width: auto; height: 42px; }
  .csr-head__icon img { height: 100%; width: auto; }
  .csr-head__title { font-size: var(--fs-xl); }
}
/* Below 576px (20px gutters) the badge and the title can no longer share a row
   without squeezing the title to a stack of broken words. Stack them instead. */
@media (max-width: 575.98px) {
  .csr-head {
    flex-direction: column;
    align-items: center;
    gap: var(--space-7);
    margin-bottom: var(--space-11);
  }
  .csr-head__icon { width: auto; max-width: 100%; height: 40px; }
  .csr-head__title { font-size: var(--fs-lg); }
  .csr-hero__stats { grid-template-columns: 1fr; }
  .csr-hero-stat { padding: var(--space-9); }
  .csr-hero-stat__num { font-size: var(--fs-xl); }
  .csr-pillars-box { padding: var(--space-9); }
  .csr-case,
  .csr-split { padding: var(--space-9); gap: var(--space-9); margin-bottom: var(--space-11); }
  .csr-metrics { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* ============================================================
   SHARED STAT-TILE PALETTE  (.fh-tile*)
   Brand-coloured infographic tiles reused by There at Every Turn
   and the FY2026 number spreads. Tile colours are constant across
   themes; only the host page's wash and headings follow light/dark.
   ============================================================ */
.fh-tile {
  position: relative;
  overflow: hidden;
  break-inside: avoid;
  margin-bottom: var(--space-8);
  padding: var(--space-10);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.fh-tile > * { position: relative; z-index: 1; }

/* Colour variants (constant across themes) */
.fh-tile--blueDark { background: #0B4C8C; color: var(--bf-white); }
.fh-tile--navy     { background: #002A50; color: var(--bf-white); }
.fh-tile--blue     { background: #0C63B7; color: var(--bf-white); }
.fh-tile--teal     { background: #159AA6; color: var(--bf-white); }
.fh-tile--tan      { background: #B4917F; color: #241C16; }
.fh-tile--sky      { background: #A6D5E8; color: #0A2540; }
.fh-tile--grey     { background: #C4CBD0; color: #1B2A3A; }

/* Stat typography */
.fh-tile__stat {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  color: inherit;
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tight);
}
.fh-cur { font-size: var(--fs-2xl); font-weight: var(--fw-medium); }
.fh-num { color: var(--bf-white); }
.fh-suffix { font-size: var(--fs-lg); font-weight: var(--fw-medium); }
.fh-tile__unit {
  margin-top: 2px;
  color: inherit;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}
.fh-tile__label {
  margin-top: var(--space-5);
  color: var(--bf-white);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
}
.fh-tile__note {
  margin-top: var(--space-6);
  color: inherit;
  opacity: 0.9;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}
.fh-mt { margin-top: var(--space-7); }

/* Growth arrow badge — reserve bottom room on any tile that
   carries an arrow so the badge never overlaps the label. */
.fh-tile:has(.fh-arrow) { padding-bottom: var(--space-16); }
.fh-arrow {
  position: absolute;
  left: var(--space-9);
  bottom: var(--space-9);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 4px solid currentColor;
  border-radius: var(--radius-circle);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  opacity: 0.92;
}
.fh-arrow i { -webkit-text-stroke: 1px currentColor; }

/* Photo tiles stack their text, then let the photo take whatever
   height is left so it always lands on the tile's bottom edge. */
.fh-tile--photo {
  display: flex;
  flex-direction: column;
}

/* Embedded photo bleeds to the tile edges at the bottom */
.fh-tile__media {
  display: flex;
  flex: 1;
  min-height: 0;
  margin: var(--space-9) calc(-1 * var(--space-10)) calc(-1 * var(--space-10));
}
.fh-tile__media img {
  display: block;
  width: 100%;
  /* height: 100%; */
  /* height: 300px; */
  object-fit: cover;
}
/* Show the full image (no crop) — e.g. a tall app screenshot */
.fh-tile__media--full img {
  height: auto;
  object-fit: contain;
}
.fh-tile__icon { margin-top: var(--space-9); }
.fh-tile__icon img {
  width: 76px;
  height: auto;
  margin-left: auto;
}

/* Decorative backgrounds from the provided assets */
.fh-tile--circuit::after,
.fh-tile--circuit-h::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.22;
  pointer-events: none;
}
.fh-tile--circuit::after   { background: url("../images/ai-bg-verticle.png") center / cover no-repeat; }
.fh-tile--circuit-h::after { background: url("../images/ai-bg-horizontal.png") center / cover no-repeat; }
.fh-tile--rupees::after {
  content: "";
  position: absolute;
  right: -12px;
  bottom: -12px;
  z-index: 0;
  width: 130px;
  height: 130px;
  background: url("../images/rupees1.png") right bottom / contain no-repeat;
  pointer-events: none;
}


/* ============================================================
   THERE AT EVERY TURN  (there-at-every-turn.html)
   Reuses the shared stat-tile palette (.fh-tile) in a fixed 3x2
   grid, over a soft cyan wash echoing the PDF spread.
   ============================================================ */
.taet-page main {
  background:
    linear-gradient(180deg, rgba(233, 244, 251, 0.82), rgba(224, 238, 249, 0.9)),
    url("../images/FY2026-bg.jpg") center top / cover no-repeat fixed;
}
[data-theme="dark"] .taet-page main {
  background:
    linear-gradient(180deg, rgba(6, 20, 34, 0.90), rgba(6, 20, 34, 0.94)),
    url("../images/FY2026-bg.jpg") center top / cover no-repeat fixed;
}

.taet-title {
  color: var(--color-primary);
  font-size: var(--fs-page-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  max-width: 22ch;
}

/* Fixed 3-column, 2-row grid (vs. the highlights page's masonry) */
.taet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

/* Decorative pin standing in for the locations tile's illustration */
.fh-tile:has(.taet-tile__pin) {
  display: flex;
  flex-direction: column;
}
.fh-tile:has(.taet-tile__pin) .taet-tile__pin { margin-top: auto; }
.taet-tile__pin {
  margin: var(--space-11) 0 0 auto;
  display: grid;
  place-items: end;
  height: 84px;
  border-radius: var(--radius-circle);
  /* background: rgba(255, 255, 255, 0.20); */
  font-size: 38px;
  line-height: 1;
}
/* Half the artwork's natural 219px width. Capping the image rather
   than the figure because the figure carries an inline height:auto
   that beats the height above. */
.taet-tile__pin img { max-width: 110px; }

/* ---- Responsive ------------------------------------------ */
@media (max-width: 991.98px) {
  .taet-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .taet-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   OUR COMPANIES: BUILDING RESPONSIBLY  (our-companies.html)
   Corporate-structure "org chart": a navy lifecycle-needs band,
   five need columns, a teal connector band, the bordered Bajaj
   Finserv (Listed) node, then two tiers of bordered company
   cards (Products & Solutions, Platform), each hung from a
   small chevron connector.
   ============================================================ */
.oc-title {
  color: var(--color-text-strong);
  font-size: var(--fs-page-title);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
}

.oc-chart {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* ---- Full-width connector bands ---------------------------- */
.oc-band {
  padding: var(--space-8) var(--space-11);
  color: var(--bf-white);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  text-align: center;
  letter-spacing: var(--ls-tight);
}
.oc-band--navy { background: var(--color-primary); }
.oc-band--teal { background: var(--bf-teal); }

/* ---- Lifecycle-needs column row ---------------------------- */
.oc-cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: none;
}
.oc-col {
  padding: var(--space-11);
  border-right: 1px solid var(--color-border);
}
.oc-col:last-child { border-right: none; }
.oc-col__title {
  color: var(--color-text-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-5);
}
.oc-col__desc {
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

/* ---- Bajaj Finserv (Listed) node ---------------------------- */
.oc-listed {
  padding: var(--space-9);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-top: none;
  text-align: center;
}
.oc-listed__name {
  color: var(--color-primary);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}
.oc-listed__tag {
  margin-left: var(--space-4);
  color: var(--color-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

/* ---- Company card rows -------------------------------------- */
.oc-row {
  display: grid;
  gap: var(--space-9);
  padding: var(--space-14) var(--space-9) var(--space-9);
  /* background: var(--color-bg-subtle); */
  /* border: 1px solid var(--color-border); */
  border-top: none;
}
.oc-row--5 { grid-template-columns: repeat(5, 1fr); }
.oc-row--3 { grid-template-columns: repeat(3, 1fr); max-width: 760px; margin: 0 auto; }

.oc-card {
  position: relative;
  padding: var(--space-11) var(--space-8) var(--space-9);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-standard);
}
.oc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.oc-card__arrow {
  position: absolute;
  top: -16px;
  left: 15%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  /* border-radius: var(--radius-circle); */
  /* background: var(--color-surface); */
  /* border: 1.5px solid var(--color-primary); */
  color: var(--color-primary);
  font-size: var(--fs-sm);
}
.oc-card__name {
  margin-top: var(--space-6);
  color: var(--color-text-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
.oc-card__desc {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  /* font-style: italic; */
  line-height: var(--lh-relaxed);
}
.oc-card__badge {
  display: inline-block;
  margin-top: var(--space-6);
  padding: 2px var(--space-6);
  background: var(--color-primary);
  color: var(--bf-white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-xs);
}

/* ---- Responsive ------------------------------------------ */
@media (max-width: 991.98px) {
  .oc-cols { grid-template-columns: repeat(3, 1fr); }
  .oc-col:nth-child(3) { border-right: none; }
  .oc-col:nth-child(n+4) { border-top: 1px solid var(--color-border); }
  .oc-row--5 { grid-template-columns: repeat(2, 1fr); }
  .oc-row { padding-top: var(--space-16); }
}
@media (max-width: 575.98px) {
  .oc-cols { grid-template-columns: 1fr; }
  .oc-col { border-right: none; border-bottom: 1px solid var(--color-border); }
  .oc-col:last-child { border-bottom: none; }
  .oc-row--5,
  .oc-row--3 { grid-template-columns: 1fr; max-width: none; }
  .oc-row { padding: var(--space-16) var(--space-8) var(--space-8); gap: var(--space-13); }
}


/* ============================================================
   FY2026: THE NUMBERS THAT DEFINED THE YEAR
   (fy-2026-the-numbers-that-defined-the-year.html)
   A hero title over two masonry columns of company cards. Each
   card pairs a brand-blue name + description with a stack of
   headline figures. Card tints are lifted straight from the PDF
   (soft blue / peach / grey / white) and stay constant in light
   mode; dark mode remaps them to muted translucent surfaces.
   ============================================================ */
.ntd-title {
  color: var(--color-primary);
  font-size: var(--fs-page-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

/* Two balanced columns; cards flow top-to-bottom then across. */
.ntd-grid {
  columns: 2;
  column-gap: var(--space-12);
}

.ntd-card {
  break-inside: avoid;
  margin-bottom: var(--space-12);
  padding: var(--space-11);
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: start;
}

/* Colour tints — sourced from the PDF. These are print-fidelity
   swatches, so they stay constant in both themes (see below). */
.ntd-card--blue  { background: #DDEBF6; }
.ntd-card--peach { background: #F6ECE6; }
.ntd-card--teal  { background: #D6E7E7; }
.ntd-card--grey  { background: #D9DBDC; }
.ntd-card--plain {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
}

/* ---- Left column: category / name / description ------------ */
.ntd-card__cat {
  margin: 0 0 var(--space-4);
  color: var(--bf-ink-900);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
.ntd-card__name {
  margin: 0 0 var(--space-6);
  color: var(--color-primary);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
.ntd-card__desc {
  margin: 0;
  color: var(--bf-slate);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}
.ntd-card__desc--tight { margin-bottom: var(--space-3); font-weight: var(--fw-medium); }
.ntd-list {
  margin: 0;
  padding-left: var(--space-8);
  color: var(--bf-slate);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}
.ntd-list li { margin-bottom: var(--space-5); }
.ntd-list li:last-child { margin-bottom: 0; }

/* ---- Right column: headline figures ----------------------- */
.ntd-card__stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.ntd-stat__fig {
  margin: 0 0 var(--space-3);
  color: var(--bf-ink-900);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tight);
}
/* .fh-num is shared with the count-up script (styled white by
   default for the dark highlight tiles) — reset it here so the
   figures read dark on these light card tints. */
.ntd-stat__fig .fh-num { color: inherit; }
.ntd-cur {
  margin-right: 4px;
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
}
.ntd-stat__label {
  margin: 0;
  color: var(--bf-slate);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
}

/* ---- Dark mode: the tints are held constant (they carry the
   print identity), so the card text is pinned to its light-mode
   ink instead of following the dark palette. ------------------ */
[data-theme="dark"] .ntd-card__cat,
[data-theme="dark"] .ntd-stat__fig { color: var(--bf-ink-900); }
[data-theme="dark"] .ntd-card__name { color: var(--bf-blue); }
[data-theme="dark"] .ntd-card__desc,
[data-theme="dark"] .ntd-list,
[data-theme="dark"] .ntd-stat__label { color: var(--bf-slate); }

/* ---- Responsive ------------------------------------------ */
@media (max-width: 991.98px) {
  .ntd-grid { columns: 1; }
}
/* Tablet (portrait + landscape): shrink the stat figure so it fits
   the narrower card columns without wrapping. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .ntd-stat__fig { font-size: var(--fs-xl); }
}
@media (max-width: 575.98px) {
  .ntd-card { grid-template-columns: 1fr; gap: var(--space-10); }
}


/* ============================================================
   BUILDING FOR TOMORROW. BUILDING FOR A BILLION FUTURES.
   (building-for-tomorrow-building-for-a-billion-futures.html)
   A light hero (title + FinAI/InsurAI diagram) over a soft blue
   wash, an FY2026 stat snapshot, then a dark showcase of three
   AI-capability cards. Colours mirror the printed spread.
   ============================================================ */
.bft-page main {
  background: linear-gradient(180deg, #F1F8FC 0%, #E4F0F9 100%);
}
[data-theme="dark"] .bft-page main {
  background: linear-gradient(180deg, #06111F 0%, #081A30 100%);
}

/* ---- Hero -------------------------------------------------- */
.bft-hero__inner {
  padding-block: var(--space-14) var(--space-13);
}
.bft-title {
  color: var(--bf-blue-strong);
  font-size: var(--fs-page-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.bft-subtitle {
  margin-top: var(--space-11);
  max-width: 60ch;
  color: var(--color-text-strong);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-relaxed);
}
.bft-intro {
  margin-top: var(--space-13);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-14);
  align-items: start;
}
.bft-intro__lead {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
}
.bft-diagram__head {
  color: var(--bf-blue-strong);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  max-width: 32ch;
}
.bft-diagram__media {
  margin: var(--space-11) 0 0;
}
.bft-diagram__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Snapshot heading + stat grid -------------------------- */
.bft-snapshot__title {
  color: var(--bf-blue-strong);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-13);
}
.bft-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-12) var(--space-14);
}
.bft-stat {
  transition: transform var(--transition-base) var(--ease-out);
}
.bft-stat:hover { transform: translateY(-4px); }
.bft-stat__fig {
  margin: 0 0 var(--space-4);
  color: var(--bf-blue-strong);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tight);
}
/* .fh-num defaults to white for the dark highlight tiles — reset
   it so the count-up figures read blue on this light spread. */
.bft-stat__fig .fh-num { color: inherit; }
.bft-cur {
  margin-right: 2px;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
}
.bft-stat__label {
  margin: 0;
  color: var(--color-text-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-relaxed);
}

/* ---- Dark AI-capability card showcase ---------------------- */
.bft-cards {
  background: linear-gradient(180deg, #0A3E86 0%, #0C4C9E 100%);
  padding-block: var(--space-15);
}
[data-theme="dark"] .bft-cards {
  background: linear-gradient(180deg, #071A33 0%, #0A2A52 100%);
}
.bft-cards__inner {
  display: grid;
  gap: var(--space-12);
}
.bft-card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 360px;
  padding: var(--space-12);
  border-radius: var(--radius-lg);
  border: 2px solid rgba(80, 190, 230, 0.55);
  overflow: hidden;
  box-shadow: 0 0 0 4px rgba(10, 40, 82, 0.35), 0 0 34px rgba(60, 194, 214, 0.28);
  transition: transform var(--transition-base) var(--ease-out),
    box-shadow var(--transition-base) var(--ease-out);
}
.bft-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 4px rgba(10, 40, 82, 0.35), 0 0 46px rgba(60, 194, 214, 0.45);
}
.bft-card__media {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}
.bft-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bft-card__panel {
  position: relative;
  z-index: 1;
  max-width: 380px;
  padding: var(--space-11);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-md);
}
[data-theme="dark"] .bft-card__panel {
  background: rgba(12, 26, 44, 0.90);
}
.bft-card__title {
  margin: 0 0 var(--space-8);
  color: var(--bf-blue-strong);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
[data-theme="dark"] .bft-card__title { color: var(--bf-cyan-light); }
.bft-card__list {
  margin: 0;
  padding-left: var(--space-9);
  color: var(--color-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}
.bft-card__list li { margin-bottom: var(--space-4); }
.bft-card__list li:last-child { margin-bottom: 0; }
[data-theme="dark"] .bft-card__list { color: rgba(232, 238, 244, 0.88); }

/* ---- Responsive ------------------------------------------- */
@media (max-width: 991.98px) {
  .bft-intro { grid-template-columns: 1fr; gap: var(--space-12); }
  .bft-stats { grid-template-columns: repeat(2, 1fr); }
}
/* Below 768px the panel is as wide as the card, so overlaying it would hide
   the artwork completely. Drop the overlay and stack media above panel. */
@media (max-width: 767.98px) {
  .bft-card {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    padding: var(--space-9);
  }
  .bft-card__media {
    position: static;
    inset: auto;
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .bft-card__media img {
    display: block;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .bft-card__panel {
    max-width: 100%;
    padding: var(--space-9);
  }
}
@media (max-width: 575.98px) {
  .bft-subtitle { font-size: var(--fs-base); }
  .bft-stats { grid-template-columns: 1fr; }
}


/* ============================================================
   FINSERV INTELLIGENCE  (finserv-intelligence.html)
   A full-bleed, always-dark hero spread: futuristic background
   art with a large title, subtitle and a glowing "glass" card
   holding the two-column body copy — matching the report design.
   The hero stays dark in both themes (the art is dark); the page
   chrome (header / breadcrumb / footer) still follows the theme.
   ============================================================ */
.fi-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--bf-white);
  background: #06122A url("../images/finserve-intelligence-bg.jpg") no-repeat center right / cover;
}

/* Left-weighted darkening wash so the title + card read cleanly
   over the art while the tech scene stays visible on the right. */
.fi-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 12, 30, 0.94) 0%, rgba(4, 12, 30, 0.80) 34%, rgba(4, 12, 30, 0.28) 62%, rgba(4, 12, 30, 0.10) 100%),
    linear-gradient(180deg, rgba(4, 12, 30, 0.55) 0%, rgba(4, 12, 30, 0) 30%);
}

.fi-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--space-16) var(--space-15);
}

/* Title block */
.fi-hero__head { margin-bottom: var(--space-13); }
.fi-title {
  margin: 0;
  color: var(--bf-white);
  font-family: var(--font-display);
  font-size: var(--fs-page-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tight);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45);
}
.fi-subtitle {
  margin-top: var(--space-9);
  color: rgba(255, 255, 255, 0.90);
  font-size: clamp(var(--fs-lg), 2.4vw, var(--fs-xl));
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-wide);
}

/* Glowing "glass" content card */
.fi-card {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  /* gap: var(--space-12); */
  max-width: 720px;
  padding: var(--space-12);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(95, 201, 225, 0.55);
  background: linear-gradient(160deg, rgba(10, 28, 56, 0.62) 0%, rgba(6, 18, 40, 0.52) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    0 0 0 1px rgba(95, 201, 225, 0.10),
    0 0 34px rgba(58, 194, 214, 0.28),
    inset 0 0 24px rgba(58, 194, 214, 0.06);
}

/* Soft cyan halo that gently breathes — pure-CSS ambient motion. */
@media (prefers-reduced-motion: no-preference) {
  .fi-card { animation: fi-glow 5.5s var(--ease-in-out) infinite; }
}
@keyframes fi-glow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(95, 201, 225, 0.10),
      0 0 30px rgba(58, 194, 214, 0.22),
      inset 0 0 24px rgba(58, 194, 214, 0.06);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(95, 201, 225, 0.18),
      0 0 46px rgba(58, 194, 214, 0.40),
      inset 0 0 28px rgba(58, 194, 214, 0.10);
  }
}

.fi-card__col { min-width: 0; }
.fi-card__text {
  margin: 0 0 var(--space-8);
  color: rgba(226, 240, 248, 0.90);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
}
.fi-card__text:last-child { margin-bottom: 0; }

/* ---- Responsive ------------------------------------------- */
@media (max-width: 991.98px) {
  .fi-hero {
    background-position: center 20%;
  }
  .fi-hero__overlay {
    background:
      linear-gradient(180deg, rgba(4, 12, 30, 0.72) 0%, rgba(4, 12, 30, 0.86) 55%, rgba(4, 12, 30, 0.92) 100%);
  }
  .fi-hero__inner { padding-block: var(--space-14) var(--space-14); }
  .fi-card { max-width: 100%; }
}
@media (max-width: 575.98px) {
  .fi-hero__head { margin-bottom: var(--space-12); }
  .fi-card {
    grid-template-columns: 1fr;
    gap: var(--space-9);
    padding: var(--space-10);
  }
  .fi-card__text { font-size: var(--fs-base); }
}


/* ============================================================
   PEOPLE WHO POWER OUR PURPOSE  (people-who-power-our-purpose.html)
   FINSERV corporate-overview spread. A stacked series of tinted
   cards, each headed by a dark navy "pill" tab, per the PDF.
   Card tints are card-scoped tokens so dark mode remaps cleanly.
   ============================================================ */

/* ---- Hero: title + intro (left) and photo (right) --------- */
.pw-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-14);
  align-items: center;
}
.pw-title {
  color: var(--color-primary);
  font-size: var(--fs-page-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.pw-hero__lead {
  margin-top: var(--space-11);
  color: var(--color-text-strong);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-relaxed);
}
.pw-hero__body {
  margin-top: var(--space-9);
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
}
.pw-hero__media {
  margin: 0;
}
.pw-hero__media img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ---- Tinted cards ----------------------------------------- */
.pw-card {
  position: relative;
  background: var(--pw-tint);
  border-radius: var(--radius-lg);
  padding: var(--space-14) var(--space-13) var(--space-13);
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-out);
}
.pw-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Card tint palette (light) */
.pw-card--blue { --pw-tint: var(--bf-cyan-100); }   /* pale blue  */
.pw-card--grey { --pw-tint: #EEF0F2; }              /* light grey */
.pw-card--sand { --pw-tint: var(--bf-sand); }       /* warm sand  */

/* Dark-mode tint remap — keep the family, drop the luminance */
[data-theme="dark"] .pw-card--blue { --pw-tint: #082742; }
[data-theme="dark"] .pw-card--grey { --pw-tint: var(--color-surface); }
[data-theme="dark"] .pw-card--sand { --pw-tint: #26201B; }

/* Navy pill tab sitting on the top-left edge of the card */
.pw-card__pill {
  position: absolute;
  top: calc(-1 * var(--space-6));
  left: var(--space-12);
  display: inline-block;
  max-width: calc(100% - var(--space-13));
  background: var(--color-primary);
  color: var(--bf-white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  padding: var(--space-4) var(--space-9);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .pw-card__pill {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* Card content grids ---------------------------------------- */
.pw-card__grid {
  display: grid;
  gap: var(--space-13);
  align-items: start;
}
/* 3-up: text · text · stat */
.pw-card__grid--tri {
  grid-template-columns: 1fr 1fr 0.85fr;
}
/* text · stat · photo */
.pw-card__grid--media {
  grid-template-columns: 1.1fr 0.7fr 1.2fr;
  align-items: center;
}
/* text(+stat) · text · photo */
.pw-card__grid--split {
  grid-template-columns: 1fr 1fr 1fr;
}

.pw-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
  color: var(--color-text);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
}
.pw-card__text p { margin: 0; }
.pw-card__text strong {
  color: var(--color-text-strong);
  font-weight: var(--fw-semibold);
}

/* The split card tucks its stat beneath the first text column */
.pw-card__grid--split .pw-stat { margin-top: var(--space-4); }

/* Card photo */
.pw-card__media { margin: 0; }
.pw-card__media img {
  width: 100%;
  height: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Big statistic block ---------------------------------------- */
.pw-stat { align-self: center; }
.pw-stat__value {
  color: var(--color-primary);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
.pw-stat__desc {
  margin-top: var(--space-8);
  color: var(--color-text-strong);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-relaxed);
}

/* ---- Responsive ------------------------------------------- */
@media (max-width: 991.98px) {
  .pw-hero {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
  .pw-hero__media { order: -1; }
  .pw-hero__media img { max-height: 380px; }

  .pw-card { padding: var(--space-14) var(--space-12) var(--space-12); }
  .pw-card__grid--tri,
  .pw-card__grid--media,
  .pw-card__grid--split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
  /* Stat + photo drop to their own full-width row */
  .pw-card__grid--tri .pw-stat,
  .pw-card__grid--media .pw-card__media,
  .pw-card__grid--split .pw-card__media {
    grid-column: 1 / -1;
  }
}
@media (max-width: 575.98px) {
  .pw-hero__lead { font-size: var(--fs-md); }
  .pw-card { padding: var(--space-13) var(--space-10) var(--space-11); }
  .pw-card__pill {
    left: var(--space-9);
    font-size: var(--fs-xs);
    padding: var(--space-3) var(--space-8);
  }
  .pw-card__grid--tri,
  .pw-card__grid--media,
  .pw-card__grid--split {
    grid-template-columns: 1fr;
  }
  .pw-stat__value { font-size: var(--fs-4xl); }
}


/* ============================================================
   CSR REDESIGN — FY2026 (Bajaj Finserv, 19th Annual Report)
   Additive layer on top of the existing .csr-* system. Adds the
   intro (text + photo) hero, plain big-figure stacks, the youth-
   skilling figure row with a tinted programme box, a three-column
   text grid, and green case-study callouts. All colours resolve
   through page-scoped tokens so light / dark modes remap in one
   place; appearance animations are pure CSS and honour
   prefers-reduced-motion.
   ============================================================ */
:root {
  --csr-tint-bg:        #EAF2FB;   /* centre-based programme box   */
  --csr-tint-border:    #D3E4F6;
  --csr-case-green-bg:  #EAF3E1;   /* Child-Development case boxes */
  --csr-fig-ink:        var(--bf-ink-900);
}
[data-theme="dark"] {
  --csr-tint-bg:        rgba(0,93,172,0.14);
  --csr-tint-border:    rgba(255,255,255,0.10);
  --csr-case-green-bg:  rgba(62,122,52,0.16);
  --csr-fig-ink:        var(--bf-white);
}

/* Title picks up the brand blue used across the PDF spread */
.csr-title { color: var(--color-primary); }
[data-theme="dark"] .csr-title { color: var(--bf-white); }

/* ---- Intro: copy + photo ---------------------------------- */
.csr-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-14);
  align-items: center;
}
.csr-intro__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-9); }
.csr-intro__media { margin: 0; }
.csr-intro__media img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.csr-lead--strong {
  color: var(--color-text-strong);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}
/* Child-Development intro: copy beside a 2x2 green figure grid */
.csr-intro--stats { align-items: start; }

/* ---- Five-pillars aside (wheel + headline figures) -------- */
.csr-pillars__title { text-align: left; }
.csr-pillars__aside { display: flex; flex-direction: column; gap: var(--space-11); }
.csr-note {
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* ---- Plain big-figure stacks ------------------------------ */
.csr-figs {
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
}
.csr-figs--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12) var(--space-11);
}
.csr-fig { break-inside: avoid; }
.csr-fig__num {
  color: var(--csr-fig-ink);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tight);
}
.csr-fig__label {
  margin-top: var(--space-4);
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}
.csr-figs--green .csr-fig__num { color: var(--csr-head-green-fg); }

/* ---- Youth-skilling figure row (figures + programme box) -- */
.csr-figrow {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-14);
  align-items: start;
}
.csr-figrow__aside { min-width: 0; }
.csr-tintbox {
  margin-top: var(--space-9);
  padding: var(--space-11);
  background: var(--csr-tint-bg);
  border: 1px solid var(--csr-tint-border);
  border-radius: var(--radius-md);
}
.csr-tintbox .csr-list { margin: 0; }

/* ---- Three-column text grid ------------------------------- */
.csr-cols--3 { grid-template-columns: repeat(3, 1fr); }

/* Blue programme sub-heads (per PDF) */
.csr-h4--blue { color: var(--color-primary); }
[data-theme="dark"] .csr-h4--blue { color: var(--color-primary-strong); }

/* ---- Green case-study callout (Child Development family) --- */
.csr-case--green { background: var(--csr-case-green-bg); }
.csr-case__body--full { grid-column: 1 / -1; }
.csr-case__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
}
/* A green case with no image collapses to a single body column */
.csr-case:has(.csr-case__body--full) { grid-template-columns: 1fr; }

/* Green inline stat variant */
.csr-stat-inline--green .csr-stat-inline__num { color: var(--csr-head-green-fg); }

/* ---- Closing footnote ------------------------------------- */
.csr-footnote {
  margin-top: var(--space-12);
  padding-top: var(--space-9);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* ---- Appearance animations -------------------------------- */
@keyframes csr-fig-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .csr-figs .csr-fig { animation: csr-fig-rise .55s var(--ease-out) both; }
  .csr-figs .csr-fig:nth-child(2) { animation-delay: .07s; }
  .csr-figs .csr-fig:nth-child(3) { animation-delay: .14s; }
  .csr-figs .csr-fig:nth-child(4) { animation-delay: .21s; }
  .csr-figs .csr-fig:nth-child(5) { animation-delay: .28s; }
  .csr-figs .csr-fig:nth-child(6) { animation-delay: .35s; }
}

/* ---- Responsive ------------------------------------------- */
@media (max-width: 991.98px) {
  .csr-intro { grid-template-columns: 1fr; gap: var(--space-11); }
  .csr-intro__media { order: -1; }
  .csr-intro--stats .csr-figs--grid { order: 0; }
  .csr-figrow { grid-template-columns: 1fr; gap: var(--space-12); }
  .csr-cols--3 { grid-template-columns: 1fr 1fr; }
  .csr-case__cols { grid-template-columns: 1fr; gap: var(--space-9); }
}
@media (max-width: 767.98px) {
  .csr-cols--3 { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .csr-figs--grid { grid-template-columns: 1fr; }
  .csr-fig__num { font-size: var(--fs-3xl); }
  .csr-tintbox { padding: var(--space-9); }
}


/* ============================================================
   A CENTURY CELEBRATED  (a-century-celebrated.html)
   Page-scoped styles for the Bajaj Group centenary feature —
   a legacy masonry, the "A Future Imagined" letter + media
   split, the "Founded in Timeless Values" alternating rows,
   and the tinted "Events that Marked the Centenary Year" cards.
   Everything references the semantic theme tokens; a few
   page-only tokens are declared here (light) and remapped for
   dark mode at the foot of this block.
   ============================================================ */
:root {
  --acc-cap:          var(--bf-grey-600);       /* caption grey (per PDF)     */
  --acc-rule:         var(--bf-grey-300);       /* dotted connector line      */
  --acc-dot:          var(--bf-blue);           /* connector end dot          */
  --acc-media-bg:     var(--bf-grey-050);       /* letterbox behind photos    */
  --acc-radius:       18px;                     /* rounded photo corners      */
  --acc-event-bg:     var(--bf-cyan-100);       /* #DFF2F7 event card wash    */
  --acc-event-title:  var(--bf-ink-900);        /* dark event heading         */
  --acc-letter-bg:    var(--bf-white);
  --acc-letter-border: var(--bf-grey-300);
  --acc-letter-ink:   var(--bf-ink-700);
}

/* ---- Titles + lead paragraphs ---------------------------- */
.acc-title {
  color: var(--color-primary);
  font-size: var(--fs-page-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.acc-title--sub { font-size: var(--fs-page-subtitle); }
[data-theme="dark"] .acc-title { color: var(--bf-white); }

.acc-lead {
  margin-top: var(--space-9);
  max-width: 88ch;
      color: var(--color-text-strong);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
}
.acc-lead + .acc-lead { margin-top: var(--space-7); }
/* Section 1 intro is a bold ink statement in the PDF. */
.acc-lead--ink {
  color: var(--color-text-strong);
  font-weight: var(--fw-semibold);
}
[data-theme="dark"] .acc-lead { color: #CFE0F5; }
[data-theme="dark"] .acc-lead--ink { color: var(--bf-white); }

/* ---- Dotted connector (caption underline + end dot) ------ */
.acc-rule {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.acc-rule::before {
  content: "";
  flex: 1 1 auto;
  border-top: 1.5px dotted var(--acc-rule);
}
.acc-rule::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  background: var(--acc-dot);
}

/* ---- Figure + caption shared shell ----------------------- */
.acc-fig { margin: 0; }
.acc-fig__media {
  display: block;
  overflow: hidden;
  border-radius: var(--acc-radius);
  background: var(--acc-media-bg);
  box-shadow: var(--shadow-sm);
}
.acc-fig__media img {
  display: block;
  width: 100%;
  height: auto;
}
.acc-fig__cap {
  margin-top: var(--space-6);
  color: var(--acc-cap);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* ============================================================
   SECTION 1 — legacy masonry
   Three explicit columns so the print sequence is preserved
   exactly; below lg the columns collapse into a flowing multicol.
   ============================================================ */
.acc-masonry {
  margin-top: var(--space-13);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-12);
  align-items: start;
}
.acc-masonry__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-13);
}
.acc-masonry .acc-fig {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* ============================================================
   SECTION 2 — A Future Imagined (letter + stacked media)
   ============================================================ */
.acc-future {
  margin-top: var(--space-13);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-13);
  align-items: start;
}
.acc-future__media {
  display: grid;
  gap: var(--space-13);
}

/* PM's letter, rendered as content inside a bordered card */
.acc-letter {
  border: 1px solid var(--acc-letter-border);
  border-radius: var(--acc-radius);
  background: var(--acc-letter-bg);
  padding: var(--space-12) var(--space-11);
  box-shadow: var(--shadow-xs);
}
.acc-letter__head {
  text-align: center;
  padding-bottom: var(--space-7);
}
.acc-letter__emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-circle);
  background: var(--color-icon-well);
  color: var(--color-primary);
  font-size: var(--fs-xl);
  margin-bottom: var(--space-4);
}
.acc-letter__hindi {
  color: var(--acc-letter-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.acc-letter__role {
  color: var(--acc-letter-ink);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}
.acc-letter__label {
  margin-top: var(--space-3);
  color: var(--acc-letter-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.acc-letter__body p {
  color: var(--acc-letter-ink);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  text-align: justify;
  margin-bottom: var(--space-5);
}
.acc-letter__body p:last-child { margin-bottom: 0; }
.acc-letter__foot { margin-top: var(--space-9); }
.acc-letter__sign {
  text-align: right;
  color: var(--acc-letter-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-7);
}
.acc-letter__meta p {
  color: var(--acc-letter-ink);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* ============================================================
   SECTION 3 — Founded in Timeless Values (alternating split)
   ============================================================ */
.acc-values {
  margin-top: var(--space-13);
  display: grid;
  gap: var(--space-14);
}
.acc-split {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--space-13);
  align-items: center;
}
.acc-split--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.acc-split--rev .acc-split__media { order: 2; }
.acc-split--rev .acc-split__body { order: 1; }
.acc-split__media {
  display: block;
  overflow: hidden;
  border-radius: var(--acc-radius);
  background: var(--acc-media-bg);
  box-shadow: var(--shadow-sm);
}
.acc-split__media img {
  display: block;
  width: 100%;
  height: auto;
}
.acc-split__body p {
  color: var(--color-text);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
}

/* ============================================================
   SECTION 4 — Events that Marked the Centenary Year
   Tinted cyan cards; image + body alternate sides.
   ============================================================ */
.acc-events {
  margin-top: var(--space-13);
  display: grid;
  gap: var(--space-12);
}
.acc-event {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: var(--space-12);
  align-items: center;
  background: var(--acc-event-bg);
  border-radius: var(--acc-radius);
  padding: var(--space-11);
}
.acc-event--rev .acc-event__media { order: 1; }
.acc-event--rev .acc-event__body { order: 2; }
.acc-event__body { min-width: 0; }
.acc-event__title {
  color: var(--acc-event-title);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-5);
}
.acc-event__text {
  color: var(--color-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
}
.acc-event__media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--acc-media-bg);
  box-shadow: var(--shadow-sm);
}
.acc-event__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Dark-mode remap (single place) ---------------------- */
[data-theme="dark"] {
  --acc-cap:           var(--bf-grey-300);
  --acc-rule:          rgba(255,255,255,0.22);
  --acc-dot:           var(--color-accent);
  --acc-media-bg:      rgba(255,255,255,0.04);
  --acc-event-bg:      rgba(255,255,255,0.05);
  --acc-event-title:   var(--bf-white);
  --acc-letter-bg:     rgba(255,255,255,0.04);
  --acc-letter-border: rgba(255,255,255,0.14);
  --acc-letter-ink:    rgba(232,238,244,0.88);
}
[data-theme="dark"] .acc-event { border: 1px solid rgba(255,255,255,0.08); }

/* ---- Responsive ------------------------------------------ */
@media (max-width: 991.98px) {
  .acc-masonry {
    display: block;
    column-count: 2;
    column-gap: var(--space-12);
  }
  .acc-masonry__col { display: contents; }
  .acc-masonry .acc-fig { margin-bottom: var(--space-13); }
  .acc-future { grid-template-columns: 1fr; gap: var(--space-12); }
  .acc-split,
  .acc-split--rev { grid-template-columns: 1fr; gap: var(--space-9); }
  .acc-split--rev .acc-split__media,
  .acc-split--rev .acc-split__body { order: 0; }
  .acc-split__media { max-width: 620px; }
  .acc-event,
  .acc-event--rev { grid-template-columns: 1fr; gap: var(--space-9); }
  .acc-event--rev .acc-event__media,
  .acc-event--rev .acc-event__body { order: 0; }
}

@media (max-width: 575.98px) {
  .acc-lead { font-size: var(--fs-base); }
  .acc-masonry { column-count: 1; }
  .acc-masonry .acc-fig { margin-bottom: var(--space-12); }
  .acc-letter { padding: var(--space-9) var(--space-7); }
  .acc-event { padding: var(--space-9); }
}