/* ============================================================
   Indegene Annual Report FY 2025-26 — Nav + Hero
   ============================================================ */

:root {
  /* Brand core */
  --brand-blue: #034EA2;
  --brand-cyan: #00C0F3;
  --brand-magenta: #ED0677;
  --ink: #231F20;

  /* Extended */
  --navy-900: #0A1E3C;
  --navy-700: #0B2A5B;
  --cyan-400: #29ABE2;
  --sky-050: #EAF4FB;
  --white: #FFFFFF;
  --grey-400: #8A93A0;

  /* Nav chrome (dark) */
  --nav-bg: rgba(10, 14, 20, 0.82);
  --nav-bg-solid: #0A0E14;
  --nav-surface: #141922;
  --nav-text: #FFFFFF;
  --nav-text-dim: rgba(255, 255, 255, 0.72);

  /* Radii */
  --r-sm: 8px;
  --r-md: 16px;
  --r-pill: 999px;

  --maxw: 1320px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Nunito Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--navy-900);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ============================================================
   LOGO (standalone, top-left)
   ============================================================ */
.site-logo {
  position: fixed;
  top: 24px;
  left: 32px;
  z-index: 101;
  display: flex;
  align-items: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.site-logo img {
  height: 28px;
  width: 138px;
}

/* hero-only chrome — hidden once the user scrolls past the hero */
.site-logo.scrolled {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ============================================================
   REPORT LABEL (standalone, top-right)
   ============================================================ */
.site-report-label {
  position: fixed;
  top: 24px;
  right: 32px;
  z-index: 101;
  margin: 0;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.9375rem;
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.site-report-label .bold    { font-weight: 800; }
.site-report-label .regular { font-weight: 400; }

/* hero-only chrome — hidden once the user scrolls past the hero */
.site-report-label.scrolled {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 560px) {
  .site-report-label { top: 16px; right: 20px; font-size: 0.6875rem; }
}

/* ============================================================
   NAVIGATION — iOS "liquid glass" bar, flush to the bottom edge
   ============================================================ */
.site-header {
  position: fixed;
  bottom: 0;
  top: auto;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 0;
  transition: bottom 0.3s ease, transform 0.3s ease;
}

.navbar {
  position: relative;
  width: 100%;
  max-width: none;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 32px;
  border-radius: 0;

  /* liquid-glass surface: bright translucent wash + heavy blur + specular top edge */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 100%),
    rgba(20, 24, 34, 0.42);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 -8px 30px rgba(0, 0, 0, 0.12);
}

.nav-notch { display: none; }

/* Menu */
/* wrapper is transparent to layout on desktop */
.nav-collapse { display: contents; }

.nav-menu {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0 auto;
  width: 100%;
}

.nav-item { position: relative; }

.nav-link {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--nav-text-dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav-link::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.2s ease;
  opacity: 0.7;
}

.nav-link[aria-expanded="true"],
.nav-link:focus-visible {
  color: var(--nav-text);
}
.nav-link[aria-expanded="true"]::after {
  transform: rotate(225deg) translateY(-1px);
}

/* ============================================================
   FULLSCREEN MENU OVERLAY — opens on click, closes on click-away/Esc
   ============================================================ */
body.menu-open { overflow: hidden; }

.dropdown {
  position: fixed;
  inset: 0;
  z-index: 95;                 /* above hero content, below the docked nav bar */
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-color: var(--navy-900); /* shows while/if the supplied image is loading or missing */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.06);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0.5s;
}

/* dark scrim so link text stays legible over any supplied photo */
.dropdown::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 10, 20, 0.78) 0%, rgba(6, 10, 20, 0.62) 55%, rgba(6, 10, 20, 0.82) 100%);
  z-index: 0;
}

.dropdown.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}

.dropdown-close {
  position: absolute;
  top: 28px;
  right: 32px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.dropdown-close:hover { background: rgba(255, 255, 255, 0.16); transform: rotate(90deg); }

/* Two-column layout: categories on the left, active group's links on the right */
.dropdown-layout {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: clamp(48px, 8vw, 140px);
  padding: 0 48px;
  max-width: 1200px;
  width: 100%;
}

/* Left: the 5 top-level categories */
.dropdown-categories {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  padding-right: clamp(24px, 4vw, 70px);
}

.dropdown-cat {
  font-family: "Nunito Sans", sans-serif;
  font-size: clamp(1.25rem, 2.4vw, 2.1rem);
  font-weight: 300;
  text-align: left;
  color: rgba(255, 255, 255, 0.45);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0;
  white-space: nowrap;
  transition: color 0.25s ease, transform 0.25s ease;
  opacity: 0;
  transform: translateX(-16px);
}
.dropdown.open .dropdown-cat {
  animation: dropdown-item-in-x 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.dropdown-cat:nth-child(1) { animation-delay: 0.06s; }
.dropdown-cat:nth-child(2) { animation-delay: 0.12s; }
.dropdown-cat:nth-child(3) { animation-delay: 0.18s; }
.dropdown-cat:nth-child(4) { animation-delay: 0.24s; }
.dropdown-cat:nth-child(5) { animation-delay: 0.30s; }

.dropdown-cat:hover { color: rgba(255, 255, 255, 0.75); }
.dropdown-cat.active {
  font-weight: 800;
  color: var(--white);
}

@keyframes dropdown-item-in-x {
  to { opacity: 1; transform: translateX(0); }
}

/* Right: sub-links for whichever category is active */
.dropdown-sublinks {
  position: relative;
  flex: 1;
  min-width: 0;
  padding-top: 8px;
}

.submenu {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.submenu.active { display: flex; }

.dropdown a {
  display: block;
  padding: 10px 0;
  font-family: "Nunito Sans", sans-serif;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  font-weight: 600;
  text-align: left;
  color: rgba(255, 255, 255, 0.82);
  border-radius: var(--r-sm);
  transition: color 0.2s ease;
  /* staggered reveal, replayed each time the category switches */
  opacity: 0;
  transform: translateY(16px);
}
.submenu.active a {
  animation: dropdown-item-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.submenu.active a:nth-child(1) { animation-delay: 0.05s; }
.submenu.active a:nth-child(2) { animation-delay: 0.1s; }
.submenu.active a:nth-child(3) { animation-delay: 0.15s; }
.submenu.active a:nth-child(4) { animation-delay: 0.2s; }
.submenu.active a:nth-child(5) { animation-delay: 0.25s; }

@keyframes dropdown-item-in {
  to { opacity: 1; transform: translateY(0); }
}

.dropdown a:hover,
.dropdown a:focus-visible {
  color: var(--white);
}
.dropdown a:hover::after {
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  max-width: 220px;
  margin-top: 2px;
  background: linear-gradient(90deg, var(--brand-cyan), var(--brand-blue));
  border-radius: 2px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}
.nav-toggle span {
  width: 22px; height: 2px; background: var(--white);
  border-radius: 2px; transition: 0.3s ease;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  /* pinned behind the page — the next section scrolls up and over it (parallax reveal) */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: #cfe4f5; /* matches video's light-blue base for any letterboxing */
}

/* occupies the scroll length the fixed .hero no longer takes up in normal flow */
.hero-spacer {
  height: 100vh;
  min-height: 640px;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* very light overlay — only to seat the nav + CTAs, the video stays bright */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,20,44,0.10) 0%, rgba(10,20,44,0) 18%, rgba(10,20,44,0) 78%, rgba(10,20,44,0.12) 100%);
}

/* Tagline overlaid left & right of the centered figure (matches banner still).
   Each side is positioned independently so they don't have to move symmetrically. */
.hero-tagline {
  position: absolute;
  z-index: 2;
  top: 56%;
  left: 0;
  right: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
  font-family: "Nunito Sans", sans-serif;
  font-size: clamp(1.5rem, 3.4vw, 3.5rem);
  line-height: 1;
  text-transform: uppercase;
  color: #21306a;            /* deep indigo-navy from the still */
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.hero-tagline .tag {
  position: absolute;
  top: 0;
}
.hero-tagline .tag-left  { right: 58%; text-align: right; transform: translateY(calc(-50% - 20px)); }
.hero-tagline .tag-right { left: 62%; text-align: left; transform: translateY(calc(-50% - 20px)); }
.hero-tagline .thin { font-weight: 300; letter-spacing: 0.04em; }
.hero-tagline .bold { font-weight: 800; letter-spacing: 0.01em; }

/* Portrait / narrow: stack the tagline over the figure */
@media (max-aspect-ratio: 1/1), (max-width: 820px) {
  .hero-tagline {
    top: auto;
    bottom: 150px;
    height: auto;
    font-size: clamp(1.75rem, 8vw, 3rem);
    color: #21306a;
    text-shadow: 0 2px 16px rgba(255,255,255,0.45);
  }
  .hero-tagline .tag {
    position: static;
    transform: none;
    display: block;
  }
  .hero-tagline .tag-left,
  .hero-tagline .tag-right { text-align: center; }
  .hero-tagline .tag-left { margin-bottom: 6px; }
}

/* Animated scroll-down cue: mouse pill with a bobbing dot + bouncing chevrons */
.scroll-cue {
  position: absolute;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.scroll-cue-mouse {
  width: 26px;
  height: 42px;
  border: 2px solid rgba(3, 78, 162, 0.55);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  padding-top: 7px;
  transition: border-color 0.2s ease;
}
.scroll-cue:hover .scroll-cue-mouse { border-color: rgba(3, 78, 162, 0.9); }

.scroll-cue-dot {
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: var(--brand-blue);
  animation: scroll-dot-bob 1.6s ease-in-out infinite;
}

.scroll-cue-chevrons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  height: 14px;
}
.scroll-cue-chevrons span {
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--brand-blue);
  border-bottom: 2px solid var(--brand-blue);
  transform: rotate(45deg);
  opacity: 0.25;
  animation: scroll-chevron-fade 1.6s ease-in-out infinite;
}
.scroll-cue-chevrons span:nth-child(1) { animation-delay: 0s; }
.scroll-cue-chevrons span:nth-child(2) { margin-top: -8px; animation-delay: 0.25s; }

@keyframes scroll-dot-bob {
  0%, 100% { opacity: 0; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(9px); }
}
@keyframes scroll-chevron-fade {
  0%   { opacity: 0.15; }
  50%  { opacity: 1; }
  100% { opacity: 0.15; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .nav-menu { gap: 0; }
  .nav-link { padding: 10px 10px; font-size: 0.82rem; }
}

@media (max-width: 900px) {
  .navbar { padding: 0 10px; height: 60px; justify-content: center; }
  .nav-notch { display: none; }
  .nav-toggle { display: flex; margin-left: 0; }
  .nav-menu { display: none; }

  /* collapse wrapper becomes the dropdown panel, opening upward above the bar */
  .nav-collapse { display: none; }
  .navbar.open .nav-collapse {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    position: absolute;
    bottom: calc(100% + 12px);
    top: auto;
    left: 0; right: 0;
    background: var(--nav-surface);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: var(--r-md);
    padding: 14px;
    max-height: 72vh;
    overflow-y: auto;
  }

  .navbar.open .nav-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
  }

  .nav-link { width: 100%; justify-content: space-between; }

  .dropdown-close { top: 20px; right: 20px; }

  /* stack categories above sub-links on narrower screens */
  .dropdown {
    align-items: flex-start;
    padding: 100px 0 90px;
    overflow-y: auto;
  }
  .dropdown-layout {
    flex-direction: column;
    gap: 28px;
    padding: 0 28px;
    margin: auto 0;
  }
  .dropdown-categories {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 18px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    padding-right: 0;
    padding-bottom: 20px;
    width: 100%;
  }
  .dropdown-cat { font-size: 1rem; padding: 4px 0; }
  .dropdown a { font-size: 1.15rem; }
}

@media (max-width: 560px) {
  .site-logo { top: 16px; left: 20px; }
  .site-logo img { height: 24px; width: 118px; }
}

/* ============================================================
   THEME STORY — "From Promise to Performance" narrative section
   ============================================================ */
.theme-story {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 100vh;
  background-color: var(--sky-050); /* fallback; the image itself is set inline on this element */
  background-size: cover;
  background-position: 15% center;
}

/* Left: dark scrim + stacked headline + intro copy over the shared section image */
.theme-story-visual {
  position: relative;
  flex: 1 1 60%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 110px 64px 72px;
  overflow: hidden;
}
.theme-story-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  /* uniform dark scrim (heavier top/bottom where the headline & copy sit) for text legibility */
  background: linear-gradient(180deg, rgba(4, 10, 22, 0.55) 0%, rgba(4, 10, 22, 0.32) 35%, rgba(4, 10, 22, 0.4) 65%, rgba(4, 10, 22, 0.82) 100%);
}

.theme-story-headline {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  font-family: "Nunito Sans", sans-serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--white);
  letter-spacing: 0.01em;
}
.theme-story-headline .line { white-space: nowrap; }
.theme-story-headline .thin { font-weight: 200; }
.theme-story-headline .bold { font-weight: 800; }

.theme-story-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 640px;
}
.theme-story-copy p {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}

/* Snippet + "Read more" — collapses the second paragraph by default */
.read-more-collapse {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}
.read-more-collapse > p {
  overflow: hidden;
  min-height: 0;
}
.read-more-block.expanded .read-more-collapse {
  grid-template-rows: 1fr;
  opacity: 1;
}

.read-more-toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: -4px;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--brand-cyan);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
}
.read-more-toggle svg {
  transition: transform 0.3s ease;
}
.read-more-block.expanded .read-more-toggle svg {
  transform: rotate(180deg);
}
.read-more-toggle:hover { color: var(--brand-magenta); }

/* Right: light info panel with a decorative corner-bracket frame */
.theme-story-panel {
  --panel-pad-x: 56px;
  flex: 1 1 40%;
  min-width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 90px var(--panel-pad-x);
  background: rgba(234, 244, 251, 0.5);
}

.theme-story-frame {
  position: relative;
  max-width: 460px;
  padding: 64px 8px;
}
.theme-story-frame::before,
.theme-story-frame::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--panel-pad-x) - 8px);
  width: 50%;
  height: 44px;
  border: 1.5px solid var(--cyan-400);
}
.theme-story-frame::before {
  top: 0;
  border-left: none;
  border-bottom: none;
}
.theme-story-frame::after {
  bottom: 0;
  border-left: none;
  border-top: none;
}

.theme-story-intro {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 28px;
}

.theme-story-highlight {
  display: flex;
  flex-direction: column;
  font-family: "Nunito Sans", sans-serif;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.2;
  color: #034ea2;
  margin-bottom: 20px;
}
.theme-story-highlight .thin { font-weight: 300; }
.theme-story-highlight .bold { font-weight: 800; }

.theme-story-body {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 32px;
}

.theme-story-closing {
  display: flex;
  flex-direction: column;
  font-family: "Nunito Sans", sans-serif;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.25;
  color: #034ea2;
}
.theme-story-closing .thin { font-weight: 300; }
.theme-story-closing .bold { font-weight: 800; }

@media (max-width: 1080px) {
  .theme-story-visual { padding: 100px 40px 56px; }
  .theme-story-panel { --panel-pad-x: 40px; padding: 64px var(--panel-pad-x); }
}

@media (max-width: 860px) {
  .theme-story { flex-direction: column; }
  .theme-story-visual {
    padding: 90px 24px 48px;
    min-height: 0;
    justify-content: flex-start;
    gap: 48px;
  }
  .theme-story-panel { --panel-pad-x: 24px; padding: 56px var(--panel-pad-x) 80px; }
  .theme-story-frame { max-width: 100%; }
}

/* ============================================================
   INDEGENE AT A GLANCE
   ============================================================ */
.glance {
  position: relative;
  z-index: 2;
  background: var(--white);
  padding: 96px 64px 0;
}

.glance-top {
  display: flex;
  gap: 64px;
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 72px;
}

.glance-intro {
  flex: 1 1 42%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.glance-heading {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 300;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-blue);
  margin-bottom: 48px;
}

.glance-stats {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 48px;
}

.glance-stat-value {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 200;
  font-size: 1.75rem;
  color: #034ea2;
  margin-bottom: 4px;
}
.glance-page-stats-grid .glance-stat-value { font-weight: 600; }

.glance-stat-label {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #4d4d4f;
  line-height: 1.5;
  max-width: 340px;
}

.glance-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  background: linear-gradient(135deg, var(--brand-cyan), var(--brand-blue));
  padding: 14px 30px;
  border-radius: var(--r-pill);
  box-shadow: 0 10px 30px rgba(3, 78, 162, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.glance-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(3, 78, 162, 0.35);
}
.glance-cta::after {
  content: "\2192";
  font-weight: 700;
}

/* Right: the two chart cards */
.glance-charts {
  flex: 1 1 58%;
  min-width: 0;
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.glance-chart-card {
  flex: 1 1 260px;
  background: none;
  border-radius: var(--r-md);
  padding: 32px 28px;
}

.glance-chart-title {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy-900);
  margin-bottom: 24px;
}
.glance-chart-title span {
  font-weight: 500;
  color: var(--grey-400);
  font-size: 0.85rem;
}
.glance-chart-title--stacked span {
  display: block;
  font-weight: 800;
  color: var(--navy-900);
  font-size: 1rem;
  margin-top: 2px;
}

.glance-donut-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 4px;
}
.glance-donut-img { width: 100%; max-width: 300px; height: auto; }

.glance-badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.glance-badge {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.glance-laurel {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
}
.glance-badge-value,
.glance-badge-label {
  position: absolute;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
}
.glance-badge-value {
  top: 31%;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  color: #034ea2;
}
.glance-badge-label {
  top: 60%;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  padding: 0 20px;
  line-height: 1.2;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Bottom: full-bleed team photo */
.glance-photo {
  width: 100%;
  height: clamp(320px, 42vw, 620px);
  background-size: cover;
  background-position: center;
  background-color: var(--sky-050); /* shows while the photo loads or if the path is a placeholder */
}

@media (max-width: 1080px) {
  .glance { padding: 80px 40px 0; }
  .glance-top { flex-direction: column; gap: 48px; }
}

@media (max-width: 640px) {
  .glance { padding: 64px 24px 0; }
  .glance-charts { flex-direction: column; }
  .glance-badges { gap: 20px; }
  .glance-laurel { max-width: 240px; }
  .glance-badge-value { font-size: 1.4rem; }
  .glance-badge-label { font-size: 0.85rem; }
}

/* ============================================================
   WHO WE ARE / WHAT WE DO
   ============================================================ */
.who-what {
  position: relative;
  z-index: 2;
  background: var(--white);
}

.section-eyebrow {
  display: block;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  margin-bottom: 12px;
  background: linear-gradient(90deg, #2E6DB4, #5BC3F0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-heading {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 300;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--brand-blue);
}

.section-subheading {
  display: block;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.3;
  margin-bottom: 16px;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Who We Are ---------- */
.who-we-are {
  display: flex;
  gap: 64px;
  padding: 96px 64px;
  max-width: 1400px;
  margin: 0 auto;
}

.who-content {
  flex: 1 1 42%;
  min-width: 0;
}

.who-snippet {
  display: flex;
  gap: 24px;
  margin-top: 40px;
}
.who-snippet-tick {
  flex-shrink: 0;
  width: 40px;
  height: 2px;
  margin-top: 14px;
  background: var(--brand-magenta);
}
.who-snippet-text p {
  font-family: "Nunito", "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: #034ea2;
}
.who-snippet-text .read-more-toggle { margin-top: 10px; }

.who-visual {
  position: relative;
  flex: 1 1 58%;
  min-width: 0;
}
.who-photo {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  display: block;
}
.who-card {
  position: absolute;
  right: 24px;
  top: 89%;
  width: 46%;
  min-width: 320px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 20px;
  padding: 32px 24px;
  background-color: #034ea2;
  background-image: linear-gradient(rgba(3, 78, 162, 0.72), rgba(3, 78, 162, 0.72)), url('../assets/blue-background-transparency.webp');
  background-size: cover;
  background-position: center;
  border-radius: var(--r-md);
  box-shadow: 0 20px 50px rgba(3, 78, 162, 0.35);
}
.who-card-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 16px;
}
.who-card-item-wide {
  grid-column: 1 / -1;
  justify-content: flex-start;
}
.who-card-icon { width: 36px; height: 36px; flex-shrink: 0; }
.who-card-item span {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--white);
}

/* ---------- What We Do ---------- */
.what-we-do {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 64px 96px;
}

.what-intro {
  font-family: "Nunito", "Nunito Sans", sans-serif;
  font-size: 1rem;
  color: #5B6B87;
  line-height: 1.7;
  max-width: 900px;
  margin-bottom: 48px;
}

.what-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-bottom: 72px;
}
.what-stat-icon { width: 64px; height: 64px; margin-bottom: 18px; }
.what-stat-label {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--brand-blue);
  margin-bottom: 4px;
  min-height: 44px;
}
.what-stat-value {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: 2.25rem;
  color: #034ea2;
  line-height: 1;
  margin-bottom: 8px;
}
.what-stat-caption {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: #4d4d4f;
}

.what-highlights {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 48px;
  padding: 48px;
  border-radius: 0;
  background: linear-gradient(135deg, #EAF7FD, #FFFFFF);
  margin-bottom: 40px;
  overflow: hidden;
}
/* decorative stacked rectangles supplied as an asset (matches the report's page-11 layout) */
.what-highlight {
  position: relative;
  z-index: 1;
}
.what-highlight-title {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 8px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.what-highlight-stat {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 200;
  font-size: 1.75rem;
  color: #034ea2;
  margin-bottom: 6px;
}
.what-highlight-caption {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #4d4d4f;
  line-height: 1.6;
}

@media (max-width: 1080px) {
  .who-we-are { padding: 80px 40px; gap: 40px; }
  .what-we-do { padding: 24px 40px 80px; }
  .what-stats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .who-we-are { flex-direction: column; padding: 64px 24px 64px; }
  .who-visual { width: 100%; }
  /* the vertical card is too tall to float over the photo without covering it — stack it below instead */
  .who-card {
    position: static;
    right: auto; left: auto; bottom: auto;
    width: 100%;
    margin-top: 24px;
  }
  .what-we-do { padding: 24px 24px 64px; }
  .section-subheading { white-space: normal; }
  .what-stats { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
  .what-highlights { grid-template-columns: 1fr; padding: 32px 24px; }
}

/* ============================================================
   BUILT FOR SCALE
   ============================================================ */
.scale {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, var(--sky-050) 0%, var(--white) 45%);
  padding: 56px 64px 0;
}

.scale-inner {
  max-width: 1400px;
  margin: 0 auto;
}

.scale-intro-heading {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--brand-blue);
  margin-bottom: 10px;
}

.scale-chain {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  margin-top: 56px;
}

.scale-chain-item {
  position: relative;
}

.scale-chain-graphic {
  position: absolute;
  top: -6px;
  left: -4px;
  width: 30px;
  height: auto;
  z-index: 0;
}

.scale-chain-title {
  position: relative;
  z-index: 1;
  color: var(--brand-blue);
  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.3;
  margin-bottom: 16px;
}

.scale-chain-desc {
  position: relative;
  z-index: 1;
  padding-left: 24px;
  font-family: "Nunito", "Nunito Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.6;
  color: #4d4d4f;
}

.scale .glance-photo {
  margin-top: 56px;
}

.scale-footer {
  display: flex;
  gap: 64px;
  margin-top: 56px;
  padding-bottom: 72px;
}

.scale-footer-text {
  flex: 1 1 48%;
  min-width: 0;
}

.scale-footer-heading {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.3;
  margin-bottom: 16px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.scale-footer-text p {
  font-family: "Nunito", "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: #4d4d4f;
}

.scale-cta {
  margin-top: 32px;
}

.scale-stats {
  flex: 1 1 48%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 32px;
}

@media (max-width: 1080px) {
  .scale { padding: 56px 40px 0; }
  .scale-chain { grid-template-columns: repeat(3, 1fr); gap: 40px 24px; }
  .scale-footer { flex-direction: column; gap: 48px; }
}

@media (max-width: 860px) {
  .scale { padding: 48px 24px 0; }
  .scale-chain { grid-template-columns: repeat(2, 1fr); }
  .scale-stats { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   MESSAGE FROM THE CHAIRMAN AND CEO
   ============================================================ */
.ceo-message {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  display: flex;
  background-color: var(--sky-050); /* fallback while the bg image loads */
  background-size: cover;
  background-position: center;
}

.ceo-inner {
  display: flex;
  align-items: center;
  gap: 64px;
  padding: 96px 64px 0;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.ceo-content {
  flex: 1 1 52%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 96px;
}

.ceo-salutation {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--brand-blue);
  margin-top: 32px;
  margin-bottom: 8px;
}

.ceo-copy p {
  font-family: "Nunito", "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--brand-blue);
  margin-top: 24px;
}

.ceo-divider {
  width: 64px;
  height: 3px;
  background: var(--brand-magenta);
  margin-top: 32px;
}

.ceo-cta {
  align-self: flex-start;
  margin-top: 32px;
}

.ceo-visual {
  flex: 1 1 40%;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.ceo-photo {
  width: 100%;
  max-width: 483px;
  height: auto;
  display: block;
}

@media (max-width: 1080px) {
  .ceo-inner { padding: 80px 40px 0; gap: 40px; }
}

@media (max-width: 860px) {
  .ceo-message { min-height: auto; }
  .ceo-inner { flex-direction: column-reverse; padding: 64px 24px; gap: 32px; }
  .ceo-visual { align-self: auto; }
  .ceo-content { padding-bottom: 0; }
  .ceo-photo { max-width: 260px; margin: 0 auto; }
}

/* ============================================================
   PERFORMANCE AT A GLANCE
   ============================================================ */
.performance {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  display: flex;
  background-color: var(--sky-050); /* fallback while the bg image loads */
  background-size: cover;
  background-position: center;
}

.performance::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(234, 244, 251, 0.94) 0%, rgba(234, 244, 251, 0.88) 40%, rgba(234, 244, 251, 0.55) 75%, rgba(234, 244, 251, 0.3) 100%);
  pointer-events: none;
}

.performance-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 64px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 96px 64px;
  box-sizing: border-box;
}

.performance-content {
  flex: 1 1 58%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.performance-quote {
  background: var(--sky-050);
  padding: 32px;
  margin-top: 24px;
}

.performance-quote .read-more-block p {
  font-family: "Nunito", "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
}

.performance-quote .read-more-toggle { margin-top: 12px; }

.performance-attribution {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--brand-blue);
  margin-top: 16px;
}

.performance-cta {
  align-self: flex-start;
  margin-top: 32px;
}

.performance-stats {
  flex: 1 1 38%;
  min-width: 0;
  background: var(--brand-blue);
  padding: 32px 32px;
  display: flex;
  flex-direction: column;
}

.performance-stat {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.performance-stat-last { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }

.performance-stat-value {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 300;
  font-size: 1.3rem;
  color: var(--white);
  margin-bottom: 2px;
}

.performance-stat-label {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 6px;
}

.performance-stat-delta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--white);
}

.performance-stat-tick {
  width: 16px;
  height: 2px;
  background: var(--brand-magenta);
}

.performance-stat-arrow { color: var(--white); flex-shrink: 0; width: 9px; height: 9px; }

.performance-stat-caption {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
  margin-left: 24px;
}

@media (max-width: 1080px) {
  .performance-inner { flex-direction: column; padding: 80px 40px; gap: 48px; }
  .performance-stats { padding: 40px 32px; }
}

@media (max-width: 860px) {
  .performance { min-height: auto; }
  .performance-inner { padding: 64px 24px; }
  .performance-quote { padding: 24px; }
  .performance-stats { padding: 32px 24px; }
}

/* ============================================================
   SCROLL-TRIGGERED ELEMENT REVEALS
   (applied to individual content blocks within a section — never
   to a section's own background/wrapper. Hero + Theme Story are
   intentionally left un-animated.)
   ============================================================ */
.reveal,
.reveal-left,
.reveal-right {
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal { opacity: 0; transform: translateY(40px); }
.reveal-left { opacity: 0; transform: translateX(-56px); }
.reveal-right { opacity: 0; transform: translateX(56px); }

.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   CHAPTERS: ESG / CSR / PEOPLE EXCELLENCE (pill-rail + card stack)
   ============================================================ */
.chapters {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  display: flex;
  background: var(--white);
}

.chapter-carousel {
  width: 100%;
  display: flex;
  overflow: hidden;
}

/* ---------- Left: pill rail ---------- */
.chapter-rail {
  position: relative;
  flex: 0 0 38%;
  min-width: 0;
  background: var(--brand-blue);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 48px;
}

.chapter-rail-fade {
  position: absolute;
  inset-inline: 0;
  height: 72px;
  z-index: 2;
  pointer-events: none;
}
.chapter-rail-fade-top { top: 0; background: linear-gradient(180deg, var(--brand-blue), rgba(3, 78, 162, 0)); }
.chapter-rail-fade-bottom { bottom: 0; background: linear-gradient(0deg, var(--brand-blue), rgba(3, 78, 162, 0)); }

.chapter-pills {
  position: relative;
  width: 100%;
  height: 100%;
}

.chapter-pill {
  position: absolute;
  top: 50%;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  padding: 16px 26px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease,
    background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
  transform: translateY(-50%);
}

.chapter-pill-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
}
.chapter-pill-icon svg { width: 100%; height: 100%; }

.chapter-pill-label {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.chapter-pill:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
}

.chapter-pill.is-active {
  background: var(--white);
  border-color: var(--white);
  color: var(--brand-blue);
}
.chapter-pill.is-active .chapter-pill-icon { color: var(--brand-blue); }

/* ---------- Right: card stack (full-bleed image fills the panel) ---------- */
.chapter-cards {
  flex: 1 1 62%;
  min-width: 0;
  background: var(--sky-050);
  position: relative;
  overflow: hidden;
}

.chapter-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.55s ease;
}

.chapter-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) blur(2px) brightness(0.8);
  transition: filter 0.6s ease;
}

.chapter-card.is-active {
  transform: translateX(0) scale(1) rotate(0deg);
  opacity: 1;
  z-index: 20;
  pointer-events: auto;
}
.chapter-card.is-active .chapter-card-img { filter: none; }

.chapter-card.is-prev {
  transform: translateX(-6%) scale(0.92) rotate(-2deg);
  opacity: 0.5;
  z-index: 10;
  pointer-events: none;
}
.chapter-card.is-next {
  transform: translateX(6%) scale(0.92) rotate(2deg);
  opacity: 0.5;
  z-index: 10;
  pointer-events: none;
}
.chapter-card.is-hidden {
  transform: scale(0.8);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}

.chapter-card-overlay {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 96px 56px 96px;
  background: linear-gradient(0deg, rgba(10, 20, 44, 0.92), rgba(10, 20, 44, 0.55) 55%, transparent);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.chapter-card.is-active .chapter-card-overlay { opacity: 1; transform: translateY(0); }

.chapter-card-eyebrow {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cyan-400);
  margin-bottom: 12px;
}

.chapter-card-heading {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--white);
  margin-bottom: 20px;
}

.chapter-card-copy {
  display: flex;
  gap: 18px;
  margin-bottom: 24px;
}

.chapter-card-tick {
  flex-shrink: 0;
  width: 32px;
  height: 2px;
  margin-top: 10px;
  background: var(--brand-magenta);
}

.chapter-card-copy-text {
  min-width: 0;
}

.chapter-card-subheading {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--white);
  margin-bottom: 10px;
}

.chapter-card-desc {
  font-family: "Nunito", "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.chapter-card-cta {
  padding: 12px 26px;
  font-size: 0.9rem;
}

@media (max-width: 1080px) {
  .chapters { min-height: 0; }
  .chapter-carousel { flex-direction: column; }
  .chapter-rail { flex: none; padding: 32px 24px; min-height: 220px; }
  .chapter-cards { min-height: 560px; }
  .chapter-card-overlay { padding: 72px 32px 56px; }
}

@media (max-width: 860px) {
  .chapter-rail { min-height: 190px; }
  .chapter-pill { padding: 12px 18px; gap: 10px; }
  .chapter-pill-label { font-size: 0.75rem; }
  .chapter-cards { min-height: 480px; }
  .chapter-card-overlay { padding: 56px 24px 40px; }
  .chapter-card-heading { font-size: 1.4rem; }
}

/* ============================================================
   AWARDS AND RECOGNITION
   ============================================================ */
.awards {
  position: relative;
  z-index: 2;
  background-color: var(--sky-050);
  background-size: cover;
  background-position: center;
  padding: 96px 64px;
}

.awards-inner {
  max-width: 1400px;
  margin: 0 auto;
}

.awards-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 48px;
}

.awards-tab {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brand-blue);
  background: var(--white);
  border: 1px solid rgba(3, 78, 162, 0.18);
  padding: 12px 24px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.awards-tab:hover { border-color: var(--brand-blue); }
.awards-tab.is-active {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: var(--white);
}

.awards-panel {
  display: none;
}
.awards-panel.is-active {
  display: block;
}

.awards-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px 32px;
  margin-top: 48px;
}

.award-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.award-icon {
  width: 100%;
  max-width: 126px;
  height: auto;
  margin-bottom: 16px;
}

.award-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 14px;
  margin: 0 auto 16px;
}
.award-divider::before,
.award-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--brand-magenta);
}
.award-divider::before { left: 0; }
.award-divider::after { right: 0; }
.award-divider .star {
  position: relative;
  z-index: 1;
  color: var(--brand-magenta);
  font-size: 0.75rem;
  line-height: 1;
}

.award-caption {
  font-family: "Nunito", "Nunito Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
}

@media (max-width: 1080px) {
  .awards { padding: 80px 40px; }
  .awards-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .awards { padding: 64px 24px; }
  .awards-tabs { gap: 8px; }
  .awards-tab { padding: 10px 18px; font-size: 0.8rem; }
  .awards-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  position: relative;
  z-index: 2;
}

.footer-band {
  position: relative;
  background: var(--brand-blue);
  padding: 80px 64px 40px;
  overflow: hidden;
}

.footer-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(120deg, rgba(255, 255, 255, 0.10) 0%, transparent 45%, transparent 60%, rgba(255, 255, 255, 0.06) 100%),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0px,
      rgba(255, 255, 255, 0.05) 18px,
      rgba(255, 255, 255, 0) 36px,
      rgba(0, 0, 0, 0.045) 54px,
      rgba(255, 255, 255, 0) 72px
    );
}

.footer-inner {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 64px;
}

.footer-brand {
  flex: 1 1 300px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
}

.footer-logo {
  width: 150px;
  height: auto;
  margin-bottom: 20px;
}

.footer-tagline {
  font-family: "Nunito", "Nunito Sans", sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 32px;
}

.footer-copyright {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.45);
  margin-top: auto;
  padding-top: 24px;
}

.footer-download {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 320px;
  text-decoration: none;
}

.footer-download-thumb {
  width: 130px;
  height: auto;
  flex-shrink: 0;
  border-radius: 6px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}
.footer-download:hover .footer-download-thumb {
  transform: translateY(-3px);
}

.footer-download-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--white);
}

.footer-download-icon {
  flex-shrink: 0;
  color: var(--white);
}

.footer-columns {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}

.footer-col h3 {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 20px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
}

.footer-col a {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--white); }

@media (max-width: 1080px) {
  .footer-band { padding: 64px 40px 32px; }
  .footer-columns { gap: 40px; }
}

@media (max-width: 860px) {
  .footer-band { padding: 48px 24px 32px; }
  .footer-inner { flex-direction: column; gap: 40px; }
  .footer-brand { max-width: 100%; }
  .footer-copyright { margin-top: 0; }
  .footer-columns { gap: 32px 40px; }
}

/* ============================================================
   CHAPTER PAGE (dedicated full-detail pages, e.g. About Indegene)
   ============================================================ */
.chapter-page {
  position: relative;
  z-index: 2;
  background: var(--white);
  padding: 120px 0 96px;
}

.chapter-page-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 64px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--grey-400);
}
.breadcrumb a { color: var(--brand-blue); transition: color 0.2s ease; }
.breadcrumb a:hover { color: var(--brand-magenta); }
.breadcrumb-sep { color: var(--grey-400); }
.breadcrumb-current { color: var(--ink); }

.chapter-page-heading {
  margin-bottom: 48px;
}

.chapter-hero-visual {
  position: relative;
  /* clears the icon card's fixed 56px overhang below the photo, see below */
  margin-bottom: 96px;
}
.chapter-hero-visual .who-photo { width: 100%; }

/* The icon card overlaps the photo's bottom-right corner by design (see
   .who-card on the homepage), but that version's overhang scales with the
   photo's height and was colliding with the flowing paragraph copy below on
   this single-column layout. Here it's pinned to a fixed 56px overhang below
   the photo instead, so the overlap stays generous but predictable at every
   width. (The shared ≤860px stacked-card rule in .who-card still applies
   unchanged — it sets position:static, which makes this top/bottom no-op.) */
.chapter-hero-visual .who-card {
  top: auto;
  bottom: -56px;
}

.chapter-body {
  max-width: none;
}
.chapter-body > p:not(.section-eyebrow) {
  font-family: "Nunito", "Nunito Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.75;
  color: #4d4d4f;
  margin-bottom: 28px;
}

/* Leading paragraph — tick + larger intro copy, reusing the shared
   .who-snippet tick pattern (see design.md §6) instead of a plain <p>. */
.chapter-lead {
  margin-top: 0;
  margin-bottom: 32px;
}
.chapter-lead .who-snippet-text p {
  font-size: 1.3rem;
  line-height: 1.6;
}

.chapter-subeyebrow {
  margin-top: 8px;
  background: none;
  color: var(--brand-blue);
}

.chapter-inline-heading {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 16px;
}

.chapter-body .what-stats,
.chapter-body .what-highlights {
  max-width: none;
}
.chapter-body .what-stats { margin-bottom: 56px; }
.chapter-body .what-highlights { margin-top: 8px; }

@media (max-width: 1080px) {
  .chapter-page { padding: 110px 0 80px; }
  .chapter-page-inner { padding: 0 40px; }
}

@media (max-width: 860px) {
  .chapter-page-inner { padding: 0 24px; }
  .chapter-hero-visual { margin-bottom: 24px; }
  .chapter-body .what-stats { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
  .chapter-body .what-highlights { grid-template-columns: 1fr; padding: 32px 24px; }
}

/* Chapter pages have no hero video to sit on — the white/reversed logo and
   report label are invisible against the white page background, so swap in
   the colored logo mark and brand-blue label text. Homepage keeps the
   white/hero versions untouched. Both still fade out on scroll via the
   shared .scrolled state (see updateChromeGlass() in js/script.js). */
.site-report-label--on-light {
  color: var(--brand-blue);
}

/* ============================================================
   CHAPTER PAGE: OUR APPROACH TO AI (page-specific components)
   ============================================================ */

/* Placeholder banner — stands in for the hero photo until a real asset is
   supplied, sized to the same aspect ratio as the other chapter pages'
   full-width photo (16:9) so swapping in the real image later is a drop-in. */
.chapter-placeholder-image {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  border: 2px dashed var(--grey-400);
  background: var(--sky-050);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.chapter-placeholder-label {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.7;
  color: var(--grey-400);
  text-align: center;
  max-width: 560px;
}

/* Data Security and Privacy photo — same 16:9 full-width treatment as the
   placeholder it replaces, minus the dashed border. */
.ai-security-image {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
}
.ai-security-image .who-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Section subheadings on this page are long PDF sentence-headings, not the
   short two-word labels the base .section-subheading (white-space:nowrap,
   blue→magenta gradient-text) was designed for — force wrapping, give each
   one room from the preceding block since none of them pair with an eyebrow
   line, and drop the gradient for solid blue since at this length the
   magenta only shows at the very end of the line and reads as a rendering
   glitch rather than a deliberate two-tone treatment. */
.ai-subheading {
  white-space: normal;
  margin-top: 48px;
  background: none;
  color: var(--brand-blue);
}

/* Four-layer card grid (Data Foundation / Cortex / The Mesh / The Cockpit) */
.ai-layers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 32px 0 8px;
}
.ai-layer-card {
  position: relative;
  padding: 32px 28px 28px;
}
/* Line-art frame asset (assets/our-approach-to-ai-text-box.svg) — an open
   rectangle outline with a magenta accent break in the top edge, matching
   the PDF's card styling. Stretched to fill the card (object-fit:fill) since
   it's a straight-edged frame — non-uniform scaling doesn't distort it. */
.ai-layer-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.ai-layer-card > *:not(.ai-layer-frame) { position: relative; z-index: 1; }
.ai-layer-icon { width: 32px; height: 32px; margin-bottom: 14px; }
.ai-layer-tick {
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: 14px;
  background: var(--brand-magenta);
}
.ai-layer-title {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--brand-blue);
  margin-bottom: 10px;
}
.ai-layer-caption {
  font-family: "Nunito", "Nunito Sans", sans-serif;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.6;
  color: #4d4d4f;
}

/* Next-gen AI solutions bullet list */
.ai-solutions-list {
  list-style: none;
  margin: 8px 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ai-solutions-list li {
  position: relative;
  padding-left: 28px;
  font-family: "Nunito", "Nunito Sans", sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #4d4d4f;
}
.ai-solutions-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-magenta);
}
.ai-solutions-list strong { color: var(--navy-700); font-weight: 800; }

/* Secondary tick-callout (governance paragraph) — same tick pattern as
   .chapter-lead but at the standard body copy size, not the enlarged lead. */
.ai-callout { margin: 8px 0 28px; }

/* Key AI Products 2x2 grid, framed with the line-art asset
   (assets/our-key-ai-products-box.svg — magenta outline + cyan accent
   bracket on the left edge, matching the PDF) instead of a plain CSS
   border, same stretch technique as .ai-layer-frame. */
.ai-products {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 40px;
  margin: 24px 0 8px;
  padding: 40px;
}
.ai-products-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.ai-products > *:not(.ai-products-frame) { position: relative; z-index: 1; }
.ai-product-title {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--brand-blue);
  margin-bottom: 10px;
}
.ai-product-tick {
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: 10px;
  background: var(--brand-magenta);
}
.ai-product-caption {
  font-family: "Nunito", "Nunito Sans", sans-serif;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #4d4d4f;
}

/* Cortex platform dark card + domain pill row */
.ai-cortex-card {
  margin-top: 24px;
  padding: 40px;
  border-radius: var(--r-md);
  background-color: #034ea2;
  background-image: linear-gradient(rgba(3, 78, 162, 0.82), rgba(3, 78, 162, 0.82)), url('../assets/blue-background-transparency.webp');
  background-size: cover;
  background-position: center;
}
.ai-cortex-name {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: 1.75rem;
  color: var(--white);
  margin-bottom: 6px;
}
.ai-cortex-subhead {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--cyan-400);
  margin-bottom: 16px;
}
.ai-cortex-copy {
  font-family: "Nunito", "Nunito Sans", sans-serif;
  font-size: 0.98rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
  max-width: 640px;
  margin-bottom: 24px;
}
.ai-cortex-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.ai-cortex-pill {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--white);
  padding: 8px 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--r-pill);
}

@media (max-width: 860px) {
  .ai-layers { grid-template-columns: 1fr; }
  .ai-products { grid-template-columns: 1fr; padding: 28px; }
}

/* ============================================================
   CHAPTER PAGE: OUR OFFERINGS (page-specific components)
   ============================================================ */

/* Core Capabilities box — magenta-outlined card with a labeled rule and a
   list of arrow-bullet items, reused across all four offering areas. Item
   count varies per section (4–6), so the grid is single-column by default
   and opts into 2 columns via a modifier when there's room to pair items. */
.core-capabilities {
  margin: 32px 0 40px;
  padding: 36px;
  border: 1px solid var(--brand-magenta);
  border-radius: var(--r-md);
}
.core-capabilities-label {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--brand-blue);
  margin-bottom: 24px;
}
.core-capabilities-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--brand-magenta);
}
.core-capabilities-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.core-capabilities-list--2col {
  grid-template-columns: 1fr 1fr;
  gap: 20px 40px;
}
.core-capabilities-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-family: "Nunito", "Nunito Sans", sans-serif;
  font-size: 0.98rem;
  line-height: 1.5;
  color: #4d4d4f;
}
.core-capabilities-arrow {
  flex-shrink: 0;
  width: 20px;
  height: auto;
  margin-top: 6px;
}

@media (max-width: 860px) {
  .core-capabilities { padding: 28px; }
  .core-capabilities-list--2col { grid-template-columns: 1fr; }
}

/* Offering section headings — same solid-blue .ai-subheading treatment plus
   a trailing magenta rule, matching the PDF's heading style on this page
   specifically (the AI page's headings don't have this rule, hence a
   separate modifier rather than baking it into .ai-subheading itself). */
.offering-subheading {
  display: flex;
  align-items: center;
  gap: 16px;
}
.offering-subheading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--brand-magenta);
}

/* Text + photo side-by-side row — an alternative to the full-width hero
   banner for in-body placeholder photos, matching the PDF's column layout
   more closely where a photo sits beside (not above/below) its paragraph. */
.chapter-media-row {
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 8px 0 28px;
}
.chapter-media-row-text { flex: 1 1 50%; min-width: 0; }
.chapter-media-row-text p {
  font-family: "Nunito", "Nunito Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.75;
  color: #4d4d4f;
}
.chapter-media-row-image {
  flex: 1 1 50%;
  min-width: 0;
}
.chapter-media-row-image.chapter-placeholder-image {
  margin: 0;
  padding: 24px;
}
.chapter-media-row-image .who-photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-md);
}

@media (max-width: 860px) {
  .chapter-media-row { flex-direction: column; }
}

/* ============================================================
   CHAPTER PAGE: MESSAGE FROM THE CHAIRMAN AND CEO (page-specific)
   ============================================================ */

/* The bg asset alone (chairman-ceo-bg.webp) is a near-empty abstract wash —
   composite it with the actual portrait cutout (chairman-ceo.webp), same
   pairing the homepage's .ceo-message section uses, so the hero still reads
   as a real photo rather than a blank gradient. */
.chairman-hero {
  position: relative;
  min-height: 640px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 64px 64px 0;
}
.chairman-hero-text {
  position: relative;
  z-index: 1;
  /* The portrait is position:absolute (out of the flex flow), so this is
     the row's only flex item — flex-grow:1 with no sibling to share space
     with would otherwise stretch it to the full row width regardless of
     this basis, running the text under the portrait. max-width caps it. */
  flex: 1 1 42%;
  max-width: 46%;
  min-width: 0;
  padding-bottom: 64px;
}
.chairman-hero-text .chapter-lead { margin-bottom: 0; }
/* Pinned to the container's bottom edge (not the flex row's padding) so the
   portrait's own cutout edge actually touches the floor of the hero instead
   of floating above it. */
.chairman-hero-portrait {
  position: absolute;
  right: 64px;
  bottom: 0;
  width: 41.4%;
  max-width: 468px;
  height: auto;
  display: block;
}

.chairman-salutation {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
}

@media (max-width: 1080px) {
  .chairman-hero { flex-direction: column-reverse; align-items: center; padding: 0 32px; min-height: 0; }
  .chairman-hero-text { flex: 1 1 auto; max-width: none; padding: 32px 0; }
  .chairman-hero-portrait { position: static; width: 60%; max-width: 320px; margin-top: 32px; }
}

/* Inline letter subheadings ("A Defining Shift", etc.) — bold solid blue,
   no trailing rule (distinct from .offering-subheading's ruled variant and
   from the shared .chapter-inline-heading, which is styled black per
   explicit feedback on the AI page and shouldn't be reused here). */
.chairman-subheading {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--brand-blue);
  margin-top: 40px;
  margin-bottom: 8px;
}

.chairman-signoff {
  margin-top: 32px;
}
.chairman-signoff p {
  font-family: "Nunito", "Nunito Sans", sans-serif;
  font-size: 1.05rem;
  color: #4d4d4f;
  line-height: 1.6;
  margin-bottom: 2px;
}
.chairman-signoff p.chairman-signoff-name {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;
  color: var(--brand-blue);
  font-size: 1.1rem;
  margin-top: 8px;
}

/* ============================================================
   CHAPTER PAGE: PERFORMANCE AT A GLANCE (page-specific)
   ============================================================ */

/* Content + stats row — reuses the homepage's .performance-content /
   .performance-quote / .performance-stats family directly (design.md §6)
   instead of duplicating them, since this page has no hero to make that
   section's full-bleed candlestick treatment relevant, only the two-column
   layout and typography. */
.perf-hero-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 64px;
  margin-bottom: 40px;
  padding: 48px;
  overflow: hidden;
  background-color: var(--sky-050); /* fallback while the bg image loads */
  background-image: url('../assets/performance-chart.webp');
  background-size: cover;
  background-position: center;
}
/* Same readability wash the homepage's .performance section uses over this
   asset (design.md §6) — the candlestick photo alone is too busy for text
   to sit on directly. */
.perf-hero-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(234, 244, 251, 0.94) 0%, rgba(234, 244, 251, 0.88) 40%, rgba(234, 244, 251, 0.55) 75%, rgba(234, 244, 251, 0.3) 100%);
  pointer-events: none;
}
.perf-hero-row > * {
  position: relative;
  z-index: 1;
}
.perf-hero-row .performance-content { padding: 0; }
.perf-hero-row .performance-quote { margin-top: 0; }
.performance-quote p {
  font-family: "Nunito", "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 16px;
}
.perf-hero-row .performance-stats { border-radius: 0; }

/* Chart grid — pre-rendered chart SVGs (bars, axis labels, and the magenta
   FY-label frame all baked into each asset), swapped in for the earlier
   hand-built CSS bar charts. Each card adds only the title/unit line above
   the image — no wrapping border or radius, since that would be a rounded
   box sitting on top of the SVG's own sharp-cornered frame. */
.perf-chart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 8px;
}
.perf-chart-title {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 2px;
}
.perf-chart-unit {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.75rem;
  color: var(--grey-400);
  margin-bottom: 12px;
}
.perf-chart-img {
  width: 75%;
  height: auto;
  display: block;
  border-radius: 0;
}

@media (max-width: 1080px) {
  .perf-hero-row { flex-direction: column; align-items: stretch; gap: 40px; }
  .perf-chart-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .perf-chart-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CHAPTER PAGE: INDEGENE AT A GLANCE (page-specific)
   ============================================================ */

.chapter-body .glance-photo { margin-bottom: 40px; }

/* Stats block first (full width), then the donut + client-concentration
   cards below — reuses the homepage's .glance-intro/.glance-charts
   typography family so the two pages stay visually consistent, just with
   the full ten-stat set stacked ahead of the charts. */
.glance-page-stack {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-bottom: 40px;
}
.glance-page-charts { display: flex; gap: 32px; flex-wrap: wrap; }

.glance-page-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px 40px;
}

/* 2x2 badge grid — the homepage card only shows two badges (top client,
   top 20 clients); this page adds the top-5 and top-10 cuts from the PDF.
   The value/label text stacks in normal flow (not absolutely positioned
   over the wreath like the homepage's 2-badge version) since a 2-column
   grid squeezes the wreath too short for the homepage's percentage-based
   overlay to fit two lines of text without colliding. */
.glance-badges--quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 16px;
}
.glance-badges--quad .glance-badge {
  min-height: 128px;
  justify-content: center;
  padding: 0 8px;
}
.glance-badges--quad .glance-laurel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
}
.glance-badges--quad .glance-badge-value,
.glance-badges--quad .glance-badge-label {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  transform: none;
  z-index: 1;
}
.glance-badges--quad .glance-badge-value { font-size: 1.3rem; margin-bottom: 2px; }
.glance-badges--quad .glance-badge-label { font-size: 0.8rem; white-space: nowrap; }

@media (max-width: 1080px) {
  .glance-page-stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .glance-page-stats-grid { grid-template-columns: 1fr 1fr; }
  .glance-page-charts { flex-direction: column; }
}

/* ============================================================
   CHAPTER PAGE: OUR JOURNEY (page-specific)
   ============================================================ */

/* Pinned full-viewport background — unlike the homepage hero, this stays
   fixed behind the ENTIRE page (not just a reveal-on-scroll strip), so the
   chapter shell goes transparent and every surface on top uses a glass
   treatment instead of solid white. */
.journey-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url('../assets/our-journey-bg.webp');
  background-size: cover;
  background-position: center;
}
body.journey-page { background: transparent; }
.journey-page .chapter-page { background: transparent; }

.journey-timeline {
  position: relative;
  padding-top: 8px;
}
.journey-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: linear-gradient(180deg, var(--brand-cyan), var(--brand-blue));
  transform: translateX(-50%);
}
.journey-item {
  position: relative;
  width: 50%;
  padding: 0 56px 56px;
  box-sizing: border-box;
}
.journey-item:nth-child(odd) { left: 0; text-align: right; }
.journey-item:nth-child(even) { left: 50%; text-align: left; }

.journey-item-dot {
  position: absolute;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--brand-blue);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--brand-blue);
}
.journey-item:nth-child(odd) .journey-item-dot { right: -7px; }
.journey-item:nth-child(even) .journey-item-dot { left: -7px; }

.journey-item-year {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--brand-blue);
  margin-bottom: 12px;
}

/* Frosted-glass card so the pinned background shows through consistently,
   matching the nav bar's liquid-glass treatment (design.md §nav). */
.journey-item-card {
  display: inline-block;
  text-align: left;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-md);
  padding: 24px 28px;
}
.journey-item-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.journey-item-card li {
  position: relative;
  padding-left: 18px;
  font-family: "Nunito", "Nunito Sans", sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #4d4d4f;
}
.journey-item-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-magenta);
}

/* Closing highlight — 2026 gets its own dark card in the PDF, so it breaks
   out of the alternating spine rather than becoming just another item. */
.journey-highlight {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 16px auto 0;
  padding: 40px;
  text-align: center;
  border-radius: var(--r-md);
  background-color: #034ea2;
  background-image: linear-gradient(rgba(3, 78, 162, 0.85), rgba(3, 78, 162, 0.85)), url('../assets/blue-background-transparency.webp');
  background-size: cover;
  background-position: center;
}
.journey-highlight-year {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: 2rem;
  color: var(--white);
  margin-bottom: 16px;
}
.journey-highlight ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.journey-highlight li {
  font-family: "Nunito", "Nunito Sans", sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 860px) {
  .journey-timeline::before { left: 12px; }
  .journey-item,
  .journey-item:nth-child(even) {
    width: 100%;
    left: 0;
    text-align: left;
    padding: 0 0 40px 40px;
  }
  .journey-item:nth-child(odd) .journey-item-dot,
  .journey-item:nth-child(even) .journey-item-dot {
    left: 4px;
    right: auto;
  }
  .journey-item-card { max-width: none; }
}

/* ============================================================
   CHAPTER PAGE: WHY INDEGENE WINS (page-specific)
   ============================================================ */

/* No card overlay on this page's hero, so the who-card overhang
   allowance the shared .chapter-hero-visual reserves isn't needed. */
.win-hero { margin-bottom: 56px; }

.chapter-body .scale-chain,
.chapter-body .scale-footer,
.chapter-body .scale-stats { max-width: none; }
.chapter-body .scale-chain { margin-top: 8px; }
.chapter-body .scale-footer { margin-top: 40px; padding-bottom: 0; }

/* Talent/capabilities intro copy reads as body text here, not the blue
   lead-in treatment .who-snippet-text uses elsewhere on chapter pages. */
.win-capabilities-intro .who-snippet-text p { color: #4d4d4f; }

/* Matches the numeric weight bump used on the Indegene at a Glance page —
   thin numerals read weak against this page's denser body copy. */
.chapter-body .scale-stats .glance-stat-value { font-weight: 600; }

/* inline-block so the gradient background sizes to the text itself —
   otherwise it paints across the full block width and a short heading
   only ever shows the blue-dominant left edge of the gradient. */
.win-delivery-heading { display: inline-block; margin-top: 56px; }

.win-leads-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 56px;
}
.win-leads-line {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}
.win-leads-line--bold {
  display: inline-block;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.win-leads-rule {
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand-magenta);
  margin: 20px 0 40px;
}

.win-evo-subheading {
  font-family: "Nunito", "Nunito Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: #4d4d4f;
  max-width: 680px;
  margin-bottom: 40px;
}

.win-evo-panel { margin-bottom: 40px; }
.win-evo-panel-label {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 24px;
}
.win-evo-panel-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--brand-magenta);
}

.win-evo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 32px;
}
.win-evo-item-title {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 10px;
}
.win-evo-item-mark { display: flex; gap: 4px; }
.win-evo-item-mark span {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--brand-cyan);
}
.win-evo-item-mark span:nth-child(2) { background: var(--brand-blue); }
.win-evo-item-mark span:nth-child(3) { background: var(--brand-magenta); }

@media (max-width: 860px) {
  .win-evo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .win-evo-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   DOWNLOAD LINKS (nav dropdown + footer items that point straight
   to a PDF instead of a built page)
   ============================================================ */
.download-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dropdown a.download-link { display: inline-flex; }
.download-icon { flex-shrink: 0; color: currentColor; }