/* KOSCA Distribution — About Page Styles */

/* Gold eyebrows across the whole About page. The indigo sections already get
   gold via the .section--indigo token rules; these two light-background
   sections (Company Overview, Market Presence) default to indigo, so override
   them to deep-gold for contrast on the light wash. */
.company-overview .section-label,
.market-section .section-label {
  color: var(--color-gold-deep);
}

/* ============================================================
   COMPANY OVERVIEW
============================================================ */

.company-overview {
  background: transparent;   /* warm bg + blooms show through */
}

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

.company-overview__body p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}

.company-overview__body p:last-child {
  margin-bottom: 0;
}

/* One grouped indigo panel holding all the info rows (modeled on the Academy
   benefits panel): a single drenched jewel card with a gold-tinted edge and a
   deep shadow. The rows live inside it, borderless, separated by faint
   hairlines — not as individual floating pills. */
.company-overview__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-primary-dark) 60%, #6b3fa0 100%);
  border: 1px solid rgba(201, 162, 75, 0.25);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: 0 18px 44px rgba(43, 38, 96, 0.30);
}

/* Borderless row inside the panel; light text on the indigo. */
.overview-pill {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  transition: background var(--transition-base);
}

.overview-pill:hover {
  background: rgba(255, 255, 255, 0.07);
}

/* Gold-tinted hairline between rows — fades at the ends so it reads as a soft
   divider, not a hard line (same device as the Academy panel). */
.overview-pill + .overview-pill {
  position: relative;
}
.overview-pill + .overview-pill::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--space-4);
  right: var(--space-4);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15) 20%, rgba(255, 255, 255, 0.15) 80%, transparent);
}

/* Solid gold gradient tile with a deep-indigo glyph — matches the Academy
   benefit icons exactly (warm tile pops against the indigo panel). */
.overview-pill__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fff8ee 0%, #e8c97a 50%, #b8820f 100%);
  border: 1px solid rgba(201, 162, 75, 0.35);
  color: var(--color-brand-primary);
  box-shadow: 0 4px 12px rgba(43, 38, 96, 0.25);
}

.overview-pill__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold-light);   /* warm label, ties into the gold icon tiles */
  margin-bottom: var(--space-1);
}

/* Sized to match the Academy benefit titles (the panel this is modeled on):
   body font, base size, semibold — calmer than the old bold serif, and the
   longer values (Authorization, Coverage) read cleanly across two lines. */
.overview-pill__value {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: #fff;
  line-height: var(--leading-snug);
}

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

/* ============================================================
   SABARI GROUP / PARENT COMPANY
============================================================ */

/* Drenched jewel surface — the homepage indigo treatment (violet + gold blooms
   over deep indigo), not the old flat brand-primary. */
.sabari-section {
  background: var(--gradient-jewel);
  overflow: hidden;
  position: relative;
}

/* Soft gold bloom, top-right — echoes the jewel sections' gold cast. */
.sabari-section::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 75, 0.10) 0%, transparent 70%);
  pointer-events: none;
}

.sabari-section::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

/* Gold eyebrow — matches every indigo section on the homepage. */
.sabari-section .section-label {
  color: var(--color-gold-light);
}

.sabari-section .section-title {
  color: #fff;
}

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

/* No section-header wrapper here (title sits directly above body copy), so
   give the title a little extra breathing room before the paragraphs. */
.sabari__title {
  margin-bottom: var(--space-6);
}

.sabari__body p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--space-5);
}

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

/* Founder card — gold-edged glass panel with a gold hairline crown, mirroring
   the homepage spotlight card's jewel treatment. Right-anchored in its column,
   widened toward the left so it fills more of the column without becoming a
   full-width slab. */
.sabari__founder-card {
  position: relative;
  max-width: 440px;
  margin-left: auto;          /* sit toward the right of the grid column */
  background: var(--color-surface);   /* light box on the indigo ground */
  border: 1px solid rgba(201, 162, 75, 0.30);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: 0 16px 40px rgba(15, 12, 45, 0.30);
  overflow: hidden;
}

/* gold hairline crowning the card (same device as the spotlight card) */
.sabari__founder-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

/* Full-width banner photo at the top of the card. It breaks out of the card's
   padding to span edge-to-edge, then masks to transparent at the bottom so the
   image dissolves into the card just above the text — no hard cut-off line.
   --pad must match the card's padding (var(--space-8)). */
.sabari__founder-media {
  --pad: var(--space-6);   /* must match the card padding */
  position: relative;
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0;   /* escape top + sides */
  aspect-ratio: 1 / 1;   /* square box shows the full 1000x1000 portrait, no crop */
  overflow: hidden;
  /* Soft bottom fade — the image is fully visible at the top and dissolves to
     transparent before it reaches the text below. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,0.6) 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,0.6) 86%, transparent 100%);
}

.sabari__founder-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Per-card crop anchor — override with style="--founder-focus: center 35%"
     on .sabari__founder-media so each portrait frames its own face. */
  object-position: var(--founder-focus, center 22%);
  display: block;
}

/* Placeholder state — soft, faded jewel wash with a faint gold initial, sized
   as the same banner so the empty state reads as a gentle "photo coming" area. */
/* Light "photo coming" wash — soft champagne/gold on the white card (a real
   photo replaces this entirely; the bottom mask fades either into the card). */
.sabari__founder-media.is-placeholder {
  background:
    radial-gradient(120% 120% at 30% 18%, rgba(255, 255, 255, 0.65) 0%, transparent 60%),
    linear-gradient(160deg, var(--color-champagne) 0%, rgba(201, 162, 75, 0.18) 100%);
}

.sabari__founder-initial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-6xl);
  font-weight: var(--weight-bold);
  color: rgba(126, 99, 26, 0.35);   /* faint deep-gold — clearly a placeholder */
}

/* Pull the text up into the faded tail of the image so they sit close, with a
   little breathing room. */
.sabari__founder-body {
  position: relative;
  margin-top: calc(-1 * var(--space-4));
}

.sabari__founder-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold-deep);   /* deep gold — eyebrow on the light card */
  margin-bottom: var(--space-2);
}

.sabari__founder-name {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.sabari__founder-role {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}

.sabari__founder-quote {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-style: italic;
  color: var(--color-text-primary);
  line-height: var(--leading-relaxed);
  border-left: 3px solid var(--color-gold);   /* gold quote rule — jewel accent */
  padding-left: var(--space-4);
}

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

/* ============================================================
   MISSION / VISION / VALUES
============================================================ */

.mvv-section {
  /* background comes from the .section--indigo utility — drenched jewel surface.
     The shared rules flip the eyebrow/title/subtitle light; the cards below get
     the translucent jewel-glass treatment. */
}

/* Mission + Vision now sit as a 2-up row (Values moved to the infographic
   below). Capped + centred so two cards don't stretch awkwardly wide. */
.mvv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  max-width: 820px;
  margin-inline: auto;
}

/* Light card on the indigo ground — white surface with dark text and gold
   accents (the homepage news/spotlight pattern: light cards lifting off the
   dark band). */
.mvv-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(15, 12, 45, 0.30);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.mvv-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 52px rgba(15, 12, 45, 0.42);
  border-color: var(--color-gold);
}

/* Gold top bar — fades at the ends, matching the jewel card crowns elsewhere. */
.mvv-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

/* Jewel icon tile — deep indigo chip with a gold glyph + gold ring (pops on the
   light card). */
.mvv-card__icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.14) 0%, transparent 55%),
    linear-gradient(160deg, var(--color-brand-primary) 0%, var(--color-brand-primary-dark) 100%);
  border: 1px solid rgba(201, 162, 75, 0.45);
  color: var(--color-gold-light);
  box-shadow: 0 8px 20px rgba(15, 12, 45, 0.30);
}

/* Scoped under .mvv-section so these beat the shared tokens.css
   `.section--indigo [class*="card"] { color: ... }` override. The light card
   takes dark text + a deep-gold tag. */
.mvv-section .mvv-card__tag {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold-deep);
  margin-bottom: var(--space-3);
}

.mvv-section .mvv-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  line-height: var(--leading-snug);
}

.mvv-section .mvv-card__body {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

@media (max-width: 700px) {
  .mvv-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
  }
}

/* ------------------------------------------------------------
   VALUES — five-value infographic row (full width, on the indigo ground).
   Five equal chips: gold icon tile, value name, one-line descriptor. Sits
   below the Mission/Vision cards, separated by a faint gold hairline.
------------------------------------------------------------ */
.values-info {
  margin-top: var(--space-12);
  padding-top: var(--space-10);
  border-top: 1px solid rgba(201, 162, 75, 0.25);
}

.values-info__head {
  text-align: center;
  margin-bottom: var(--space-8);
}

.values-info__tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: var(--space-2);
}

.values-info__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: #fff;
  line-height: var(--leading-snug);
}

/* The ACTED acronym in the heading — light gold on the indigo ground. */
.values-info__acr {
  color: var(--color-gold-light);
  letter-spacing: var(--tracking-wide);
}

.values-info__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
}

/* One value chip — light card with dark text and a gold icon tile (matches the
   Mission/Vision cards on the same indigo ground). */
.value-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(15, 12, 45, 0.28);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.value-chip:hover {
  transform: translateY(-4px);
  border-color: var(--color-gold);
  box-shadow: 0 18px 44px rgba(15, 12, 45, 0.40);
}

/* Indigo jewel icon tile with a gold glyph — matches the Mission/Vision card
   icons (.mvv-card__icon-wrap) for a consistent icon language across the
   section. */
.value-chip__icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.14) 0%, transparent 55%),
    linear-gradient(160deg, var(--color-brand-primary) 0%, var(--color-brand-primary-dark) 100%);
  border: 1px solid rgba(201, 162, 75, 0.45);
  color: var(--color-gold-light);
  box-shadow: 0 8px 20px rgba(15, 12, 45, 0.30);
}

.value-chip__name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.2;
}

.value-chip__desc {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-text-secondary);
}

/* Tablet: 5-across gets cramped → wrap to a flexible grid. */
@media (max-width: 900px) {
  .values-info__grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 560px;
    margin-inline: auto;
  }
}

@media (max-width: 520px) {
  .values-info__grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 340px;
  }
}

/* ============================================================
   MARKET PRESENCE
============================================================ */

.market-section {
  /* background comes from the .section--champagne utility — a light warm wash;
     the stat cards and region rows already use light surfaces with dark text. */
}

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

.market__stats-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

/* Jewel stat cards — matches the homepage "Who We Are" stat cards (deep indigo
   with a plum bloom + gold hairline + gold figures), the established treatment
   for stat cards on a light section. */
.market__stat {
  position: relative;
  padding: var(--space-8) var(--space-6);
  text-align: center;
  background: var(--gradient-jewel-plum);
  border: 1px solid rgba(201, 162, 75, 0.22);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(43, 38, 96, 0.28);
  overflow: hidden;
}

/* Gold hairline across the top — same refined detailing as the homepage cards. */
.market__stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.market__stat-number {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--color-gold-light);   /* gold figures on the deep jewel card */
  font-variant-numeric: tabular-nums;   /* equal-width digits — steady during the count-up */
  line-height: 1;
  margin-bottom: var(--space-2);
}

.market__stat-label {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.82);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.market__intro p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);   /* light section now → dark body text */
  margin-bottom: var(--space-8);
}

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

/* Jewel region pills — same deep-indigo surface as the stat cards (gold dot,
   white name, light detail), so the whole right column reads as one jewel set. */
.market__region {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,0.08) 0%, transparent 55%),
    linear-gradient(160deg, var(--color-brand-primary) 0%, var(--color-brand-primary-dark) 100%);
  border: 1px solid rgba(201, 162, 75, 0.22);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 20px rgba(43, 38, 96, 0.22);
  transition: transform var(--transition-base), border-color var(--transition-base);
}

.market__region:hover {
  transform: translateX(4px);
  border-color: var(--color-gold);
}

.market__region-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-gold);   /* gold dot on the indigo pill */
  flex-shrink: 0;
}

.market__region-name {
  font-weight: var(--weight-semibold);
  color: #fff;
  font-size: var(--text-sm);
}

/* Right-aligned meta block: branch detail on top, sub-distributor city beneath. */
.market__region-meta {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.market__region-detail {
  font-size: var(--text-xs);
  color: var(--color-gold-light);   /* gold detail on the indigo pill */
  letter-spacing: var(--tracking-wide);
}

.market__region-subd {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.55);   /* quieter than the gold branch line */
}

/* ------------------------------------------------------------
   SOUTH INDIA LOCATION MAP (left column)
   Custom inline SVG — a simplified 5-state landmass with city pins
   plotted by lat/long projection, colour-coded by category. No map
   library, no API key. Category colours:
     ho      → gold (head office)
     academy → plum/violet
     branch  → indigo
     subd    → teal (the brand "fresh" accent)
------------------------------------------------------------ */
.market__map {
  --c-ho: var(--color-gold);
  --c-academy: #b88be8;
  --c-branch: #9d92e8;
  --c-subd: #4fd0c0;
  margin-top: var(--space-10);   /* drop the map down to balance the taller right column */
}

@media (max-width: 900px) {
  .market__map { margin-top: 0; }   /* no offset when stacked on mobile */
}

.sa-map {
  display: block;
  width: 100%;
  height: auto;
  max-width: 420px;
  margin: 0 auto;
  overflow: visible;   /* let tooltips/halos spill past the viewBox edge */
}

/* Indigo jewel landmass — deep indigo states with gold seams between them,
   sitting on the light section like a drenched map panel. */
.sa-map__state {
  fill: var(--color-brand-primary);
  stroke: rgba(201, 162, 75, 0.55);
  stroke-width: 0.6;
  stroke-linejoin: round;
  transition: fill var(--transition-base);
}

/* ---- ANIMATION: outline draw-in, then staggered pin drop-in -------------
   Fires once when the map scrolls into view (.market__map gets .is-visible
   from the site's IntersectionObserver). The gold borders trace themselves
   around the states while the indigo fill fades up; pins then drop in one by
   one. Falls back to fully-shown if JS/observer never runs. ---------------- */

/* Draw-in: dash the gold seam and reel it in. ~1400 covers the longest path. */
.js-anim .market__map .sa-map__state {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  fill-opacity: 0;
}
.js-anim .market__map.is-mapped .sa-map__state {
  animation: sa-draw 1.5s ease forwards, sa-fill 1.1s ease 0.5s forwards;
}
@keyframes sa-draw { to { stroke-dashoffset: 0; } }
@keyframes sa-fill { to { fill-opacity: 1; } }

/* Pins hidden until the outline has mostly drawn, then drop in staggered.
   IMPORTANT: each .sa-pin <g> carries a transform="translate(x,y)" for its map
   position — a CSS transform here would clobber it. So we animate OPACITY on the
   <g> and SCALE on the inner pieces (transform-box: fill-box scales each child
   around its own centre, independent of the parent's positional translate). */
.js-anim .market__map .sa-pin {
  opacity: 0;
}
/* Scale only the dot (the halo just fades with the <g> — leaving the HO halo's
   pulse animation untouched). */
.js-anim .market__map .sa-pin .sa-pin__dot {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.2);
}
.js-anim .market__map.is-mapped .sa-pin {
  animation: sa-drop-fade 0.45s ease forwards;
}
.js-anim .market__map.is-mapped .sa-pin .sa-pin__dot {
  animation: sa-drop-scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: inherit;   /* match the per-pin delay on the parent <g> */
}
@keyframes sa-drop-fade { to { opacity: 1; } }
@keyframes sa-drop-scale { to { transform: scale(1); } }
/* Chennai (HO, pin 1) drops first; every other city dot pops as its line
   from Chennai lands on it. Line N (0.80 + (N-1)*0.08, 0.55s draw) reaches
   pin N+1 at ~1.30 + (N-1)*0.08 — the pin delays below match those arrivals. */
.js-anim .market__map.is-mapped .sa-pin:nth-child(1)  { animation-delay: 0.55s; }  /* Chennai / HO — first */
.js-anim .market__map.is-mapped .sa-pin:nth-child(2)  { animation-delay: 1.30s; }  /* line 1 lands */
.js-anim .market__map.is-mapped .sa-pin:nth-child(3)  { animation-delay: 1.38s; }
.js-anim .market__map.is-mapped .sa-pin:nth-child(4)  { animation-delay: 1.46s; }
.js-anim .market__map.is-mapped .sa-pin:nth-child(5)  { animation-delay: 1.54s; }
.js-anim .market__map.is-mapped .sa-pin:nth-child(6)  { animation-delay: 1.62s; }
.js-anim .market__map.is-mapped .sa-pin:nth-child(7)  { animation-delay: 1.70s; }
.js-anim .market__map.is-mapped .sa-pin:nth-child(8)  { animation-delay: 1.78s; }
.js-anim .market__map.is-mapped .sa-pin:nth-child(9)  { animation-delay: 1.86s; }
.js-anim .market__map.is-mapped .sa-pin:nth-child(10) { animation-delay: 1.94s; }
.js-anim .market__map.is-mapped .sa-pin:nth-child(11) { animation-delay: 2.02s; }
.js-anim .market__map.is-mapped .sa-pin:nth-child(12) { animation-delay: 2.10s; }
.js-anim .market__map.is-mapped .sa-pin:nth-child(13) { animation-delay: 2.18s; }

@media (prefers-reduced-motion: reduce) {
  .js-anim .market__map .sa-map__state,
  .js-anim .market__map.is-mapped .sa-map__state {
    stroke-dasharray: none; stroke-dashoffset: 0; fill-opacity: 1; animation: none;
  }
  .js-anim .market__map .sa-pin,
  .js-anim .market__map.is-mapped .sa-pin {
    opacity: 1; animation: none;
  }
  .js-anim .market__map .sa-pin .sa-pin__dot,
  .js-anim .market__map.is-mapped .sa-pin .sa-pin__dot {
    transform: none; animation: none;
  }
  .js-anim .market__map .sa-map__links line,
  .js-anim .market__map.is-mapped .sa-map__links line {
    stroke-dasharray: none; stroke-dashoffset: 0; animation: none;
  }
}

/* Connector lines from HO (Chennai) to each node — faint, gold-tinted.
   Each <line> is authored x1,y1 = Chennai → x2,y2 = city, so animating
   stroke-dashoffset draws it OUTWARD from Chennai to the city. */
.sa-map__links line {
  stroke: rgba(201, 162, 75, 0.45);   /* gold-tinted, reads on the indigo land */
  stroke-width: 0.6;
  /* one dash the full line length, offset so the line starts hidden and
     "grows" from Chennai outward as the offset animates to 0 */
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}

/* Draw each line from Chennai outward, staggered so they radiate one by one.
   13 pins → 12 lines (Chennai itself has no line). Lines lead their dots. */
.js-anim .market__map.is-mapped .sa-map__links line {
  animation: sa-line-draw 0.55s ease forwards;
}
@keyframes sa-line-draw { to { stroke-dashoffset: 0; } }

.js-anim .market__map.is-mapped .sa-map__links line:nth-child(1)  { animation-delay: 0.80s; }
.js-anim .market__map.is-mapped .sa-map__links line:nth-child(2)  { animation-delay: 0.88s; }
.js-anim .market__map.is-mapped .sa-map__links line:nth-child(3)  { animation-delay: 0.96s; }
.js-anim .market__map.is-mapped .sa-map__links line:nth-child(4)  { animation-delay: 1.04s; }
.js-anim .market__map.is-mapped .sa-map__links line:nth-child(5)  { animation-delay: 1.12s; }
.js-anim .market__map.is-mapped .sa-map__links line:nth-child(6)  { animation-delay: 1.20s; }
.js-anim .market__map.is-mapped .sa-map__links line:nth-child(7)  { animation-delay: 1.28s; }
.js-anim .market__map.is-mapped .sa-map__links line:nth-child(8)  { animation-delay: 1.36s; }
.js-anim .market__map.is-mapped .sa-map__links line:nth-child(9)  { animation-delay: 1.44s; }
.js-anim .market__map.is-mapped .sa-map__links line:nth-child(10) { animation-delay: 1.52s; }
.js-anim .market__map.is-mapped .sa-map__links line:nth-child(11) { animation-delay: 1.60s; }
.js-anim .market__map.is-mapped .sa-map__links line:nth-child(12) { animation-delay: 1.68s; }

/* --- Pins -------------------------------------------------- */
.sa-pin { cursor: pointer; }
.sa-pin:focus { outline: none; }

.sa-pin__dot {
  fill: var(--color-brand-primary-light);
  stroke: #fff;
  stroke-width: 1;          /* white ring lifts every pin off the indigo land */
  transition: r var(--transition-base);
}

.sa-pin__halo {
  fill: var(--color-brand-primary-light);
  opacity: 0.20;
  transform-origin: center;
  transition: opacity var(--transition-base);
}

/* Category colours */
.sa-pin--ho      .sa-pin__dot,
.sa-pin--ho      .sa-pin__halo { fill: var(--c-ho); }
.sa-pin--academy .sa-pin__dot,
.sa-pin--academy .sa-pin__halo { fill: var(--c-academy); }
.sa-pin--branch  .sa-pin__dot,
.sa-pin--branch  .sa-pin__halo { fill: var(--c-branch); }
.sa-pin--subd    .sa-pin__dot,
.sa-pin--subd    .sa-pin__halo { fill: var(--c-subd); }

/* HO reads larger — it's the anchor. */
.sa-pin--ho .sa-pin__dot { r: 4.2; }
.sa-pin--ho .sa-pin__halo { r: 9; opacity: 0.24; }

/* Gentle breathing pulse on the HO halo. */
@keyframes sa-pulse {
  0%, 100% { opacity: 0.24; }
  50%      { opacity: 0.42; }
}
.sa-pin--ho .sa-pin__halo { animation: sa-pulse 2.8s ease-in-out infinite; }

/* Hover / focus: grow the dot, brighten the halo, reveal the tooltip. */
.sa-pin:hover .sa-pin__dot,
.sa-pin:focus .sa-pin__dot { r: 4.6; }
.sa-pin:hover .sa-pin__halo,
.sa-pin:focus .sa-pin__halo { opacity: 0.55; }
.sa-pin:hover, .sa-pin:focus { outline: none; }

/* --- Always-on labels (city name + role) ------------------- */
.sa-pin__label {
  pointer-events: none;
}

.sa-pin__label-city {
  font-family: var(--font-body);
  font-size: 7px;               /* larger — clearly readable on the indigo land */
  font-weight: 700;
  fill: #fff;
  paint-order: stroke;          /* strong dark halo behind glyphs for contrast */
  stroke: rgba(15, 12, 40, 0.85);
  stroke-width: 2;
  stroke-linejoin: round;
  letter-spacing: 0.2px;
}

/* On hover/focus, the name turns gold. */
.sa-pin:hover, .sa-pin:focus { outline: none; }
.sa-pin:hover .sa-pin__label-city,
.sa-pin:focus .sa-pin__label-city { fill: var(--color-gold-light); }

/* --- Legend ------------------------------------------------ */
.sa-legend {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
}

.sa-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}

.sa-legend__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sa-legend__item--ho      .sa-legend__dot { background: var(--c-ho); }
.sa-legend__item--academy .sa-legend__dot { background: var(--c-academy); }
.sa-legend__item--branch  .sa-legend__dot { background: var(--c-branch); }
.sa-legend__item--subd    .sa-legend__dot { background: var(--c-subd); }

/* the legend reads its category colours from the map wrapper's custom props */
.sa-legend { --c-ho: var(--color-gold); --c-academy: #b88be8; --c-branch: #9d92e8; --c-subd: #4fd0c0; }

@media (prefers-reduced-motion: reduce) {
  .sa-pin--ho .sa-pin__halo { animation: none; }
}

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

  .market__stats-group {
    margin-bottom: 0;
  }
}

/* ============================================================
   LEADERSHIP
============================================================ */

.leadership-section {
  /* background comes from the .section--indigo utility — drenched jewel surface.
     The white .leadership__card sits on top as a light card (matched by the
     .section--indigo [class*="card"] dark-on-light override). */
}

/* Cream panel on the indigo drench — given the homepage spotlight card's jewel
   language so it reads as intentional, not a floating light box: warm champagne
   gradient fill, champagne-deep edge, gold hairline crown, deep jewel shadow. */
.leadership__card {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  background: linear-gradient(160deg, #FBF4E4 0%, var(--color-champagne) 100%);
  border: 1px solid var(--color-champagne-deep);
  border-radius: var(--radius-2xl);
  padding: var(--space-12);
  box-shadow: 0 24px 60px rgba(15, 12, 45, 0.32);
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-10);
  align-items: center;
  overflow: hidden;
}

/* Gold hairline crowning the card — same device as the Sabari founder card and
   the homepage spotlight card. */
.leadership__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.leadership__photo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

/* Large rectangular portrait placeholder — deep-indigo jewel panel with gold
   initial + gold edge (the spotlight card's treatment), sized as a tall portrait
   that fills the left column. A real photo (img) overrides the gradient. */
.leadership__avatar {
  width: 100%;
  aspect-ratio: 5 / 6;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.12) 0%, transparent 55%),
    linear-gradient(160deg, var(--color-brand-primary) 0%, var(--color-brand-primary-dark) 100%);
  border: 1px solid rgba(201, 162, 75, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-6xl);
  font-weight: var(--weight-bold);
  color: var(--color-gold-light);
}

.leadership__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-xl);
}

.leadership__since {
  display: inline-block;
  background: var(--color-brand-primary);
  border: 1px solid var(--color-brand-primary);
  color: var(--color-gold-light);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  text-align: center;
}

.leadership__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-brand-primary);
  color: var(--color-gold-light);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

.leadership__name {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-2);
}

.leadership__title {
  font-size: var(--text-md);
  color: var(--color-brand-primary);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-6);
}

.leadership__bio p {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

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

.leadership__credentials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

/* Credential chips: indigo pill, white text, gold dot — the card's jewel accent
   carried into the chips so they read as part of the system, with strong
   indigo-on-champagne contrast. */
.leadership__credential {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-brand-primary);
  border: 1px solid var(--color-brand-primary);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: #fff;
}

.leadership__credential-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
  flex-shrink: 0;
}

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

  .leadership__photo-wrap {
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
  }

  /* Cap the rectangular photo on the single-column stack so it stays a tidy
     portrait rather than a full-width slab. */
  .leadership__avatar {
    width: 200px;
    max-width: 100%;
    font-size: var(--text-5xl);
  }

  .leadership__name {
    font-size: var(--text-2xl);
  }
}

/* ============================================================
   AWARDS & RECOGNITION
============================================================ */

.awards-section {
  background: var(--color-bg);
}

.awards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.award-badge {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.award-badge:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-brand-primary-faint);
}

.award-badge__icon {
  width: 56px;
  height: 56px;
  background: var(--color-brand-primary-faint);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand-primary);
}

.award-badge__year {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-brand-primary);
}

.award-badge__title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

.award-badge__org {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  letter-spacing: var(--tracking-wide);
}

.awards-placeholder-note {
  text-align: center;
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--color-brand-primary-faint);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-brand-primary);
  font-size: var(--text-sm);
  color: var(--color-brand-primary);
  max-width: 500px;
  margin-inline: auto;
  margin-top: var(--space-8);
}

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

@media (max-width: 480px) {
  .awards-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
    margin-inline: auto;
  }
}

/* ============================================================
   ABOUT PAGE — TIMELINE OVERRIDES
   The full .timeline component (spine, dots, badge, animations)
   lives in home.css and is shared. The About page only changes
   the section background here.
============================================================ */

.about-timeline-section {
  background: var(--color-surface-alt);
}

/* ============================================================
   RESPONSIVE — PAGE-WIDE ADJUSTMENTS
============================================================ */

@media (max-width: 768px) {
  .company-overview__grid,
  .sabari__grid,
  .market__layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .sabari__founder-card {
    padding: var(--space-6);
  }

  .market__stats-group {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .mvv-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

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

  .overview-pill {
    padding: var(--space-4) var(--space-4);
  }
}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {
  .mvv-card,
  .award-badge,
  .about-timeline-section .timeline__content {
    transition: none;
  }
}