/* =============================================================
   TransRisk v3 — about.css
   Page-specific styles for /about
============================================================= */

/* ─────────────────────────────────────────────────────────────
   HERO
───────────────────────────────────────────────────────────── */
.about-hero {
  position: relative;
  background: var(--color-navy);
  padding: 100px 0 88px;
  overflow: hidden;
  text-align: center;
}

/* dot-grid overlay */
.about-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* fade out at bottom */
.about-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--color-navy));
  pointer-events: none;
}

.about-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 740px;
  margin: 0 auto;
}

.about-hero-title {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 20px;
}

.about-hero-sub {
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  color: rgba(255,255,255,0.70);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto;
}


/* ─────────────────────────────────────────────────────────────
   SECTION 2 — ABOUT TRANSGRAPH (stat grid + narrative)
───────────────────────────────────────────────────────────── */
.about-transgraph {
  background: var(--color-bg);
}

.transgraph-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

/* Stat grid — 2×2 */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.stat-tile {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: box-shadow var(--transition), transform var(--transition);
}

.stat-tile:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.stat-number {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--color-green);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

/* Narrative column */
.transgraph-narrative h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 12px;
}

.transgraph-narrative p {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin-bottom: 20px;
}

.transgraph-narrative p:last-of-type {
  margin-bottom: 0;
}

.vision-quote {
  margin-top: 28px;
  padding: 20px 22px;
  background: rgba(45,122,58,0.06);
  border-left: 3px solid var(--color-green);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--color-navy);
  line-height: 1.65;
}


/* ─────────────────────────────────────────────────────────────
   SECTION 1 — ABOUT TRANSRISK (product profile card)
───────────────────────────────────────────────────────────── */
.about-product {
  background: #fff;
}

.product-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 0;
  overflow: hidden;
  max-width: 880px;
  margin: 0 auto;
}

.product-card-header {
  background: var(--color-navy);
  padding: 32px 40px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.product-card-logo {
  /* holds the real symbol now, not the old "TR" lettering — no tile, so the
     mark reads the same way it does in the nav */
  width: 76px;
  height: auto;
  flex-shrink: 0;
}

.product-card-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}

.product-card-tagline {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
}

.product-card-body {
  padding: 36px 40px;
}

/* Attribute grid.

   Previously each cell was itself a 180px-label + value grid, nested inside a
   two-column layout — so a value only got ~200px and long ones ("TransGraph
   Consulting Pvt. Ltd.", the instrument list) wrapped while "12" and "2008"
   sat in empty space. Stacking the label above the value gives every value the
   full cell width, and the 1px gap over a border-coloured background draws
   hairline rules that align in both directions. */
.product-attrs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 0;
}

.product-attr {
  background: var(--color-white);
  padding: 16px 20px 18px;
  min-width: 0; /* lets long values wrap instead of forcing the track wider */
}

.product-attr-key {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  margin: 0 0 6px;
}

.product-attr-val {
  display: block;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-navy);
  overflow-wrap: break-word;
}

/* Rows whose value needs the full width. Spanning in pairs keeps the grid
   filled — a single spanning row would leave a trailing empty cell. */
.product-attr--wide {
  grid-column: 1 / -1;
}

/* Separator leads each item and is welded to it, so a wrap moves a whole
   "· Options" unit to the next line rather than stranding a dot at a line end. */
.inst-list > span {
  white-space: nowrap;
}

.inst-list > span + span::before {
  content: "\00b7";
  color: var(--color-text-muted);
  margin: 0 8px 0 6px;
}

@media (max-width: 600px) {
  .product-attrs {
    grid-template-columns: 1fr;
  }

  .product-attr {
    padding: 14px 16px 16px;
  }
}


/* ─────────────────────────────────────────────────────────────
   SECTION 3 — LEADERSHIP
───────────────────────────────────────────────────────────── */
.about-leadership {
  background: var(--color-bg);
}

.leadership-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.leader-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 40px 36px;
  transition: box-shadow var(--transition);
}

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

.leader-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-navy) 0%, #1e3a52 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  flex-shrink: 0;
}

/* Photograph fills the circle. object-fit keeps a non-square source centred
   rather than distorted; overflow clips it to the border-radius. */
.leader-avatar {
  overflow: hidden;
}

.leader-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Retained for cards that fall back to initials. */
.leader-avatar-initials {
  font-size: 1.375rem;
  font-weight: 800;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.02em;
}

.leader-name {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 4px;
}

.leader-title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-green-dark);
  margin-bottom: 18px;
}

.leader-bio {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin-bottom: 22px;
}

.leader-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #0a66c2;
  text-decoration: none;
  transition: opacity 0.15s;
}

.leader-linkedin:hover {
  opacity: 0.75;
}

.leader-linkedin svg {
  width: 18px;
  height: 18px;
}


/* ─────────────────────────────────────────────────────────────
   SECTION 4 — INDUSTRIES (reuse homepage styles, minor override)
───────────────────────────────────────────────────────────── */
.about-industries {
  background: #fff;
}


/* ─────────────────────────────────────────────────────────────
   SECTION 6 — CLIENT SPREAD / WORLD MAP
───────────────────────────────────────────────────────────── */
.about-world {
  background: var(--color-navy);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}

/* dot-grid overlay */
.about-world::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.about-world-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.about-world .section-eyebrow-white {
  margin-bottom: 12px;
}

.world-title {
  font-size: clamp(1.625rem, 3.5vw, 2.25rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.025em;
  margin-bottom: 52px;
}

/* SVG world map container */
.world-map-wrap {
  max-width: 860px;
  margin: 0 auto 40px;
  position: relative;
}

.world-map-svg {
  width: 100%;
  height: auto;
}

/* Animated pulse dots on the map */
.map-dot {
  animation: mapPulse 2.4s ease-in-out infinite;
}

.map-dot:nth-child(2) { animation-delay: 0.4s; }
.map-dot:nth-child(3) { animation-delay: 0.8s; }
.map-dot:nth-child(4) { animation-delay: 1.2s; }
.map-dot:nth-child(5) { animation-delay: 1.6s; }
.map-dot:nth-child(6) { animation-delay: 2.0s; }

@keyframes mapPulse {
  0%, 100% { opacity: 0.5; r: 5; }
  50%       { opacity: 1;   r: 7; }
}

/* Region labels below map */
.world-regions {
  display: flex;
  justify-content: center;
  gap: 10px 20px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.world-region-pill {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255,255,255,0.60);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 100px;
  padding: 5px 14px;
}

.world-footnote {
  max-width: 580px;
  margin: 0 auto;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.60);
  line-height: 1.7;
}


/* ─────────────────────────────────────────────────────────────
   BOTTOM CTA
───────────────────────────────────────────────────────────── */
.about-cta {
  background: var(--color-bg);
  padding: 88px 0;
  text-align: center;
}

.about-cta-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: -0.025em;
  margin-bottom: 10px;
}

.about-cta-sub {
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin-bottom: 32px;
}

.about-cta-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}


/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .transgraph-layout {
    gap: 40px;
  }

  .product-attrs {
    grid-template-columns: 1fr;
  }

  .product-attr {
    border-bottom: 1px solid var(--color-border);
  }

  .product-attr:last-child {
    border-bottom: none;
  }
}

@media (max-width: 768px) {
  .about-hero {
    padding: 80px 0 64px;
  }

  .transgraph-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

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

  .product-card-header {
    padding: 24px 24px;
  }

  .product-card-body {
    padding: 28px 24px;
  }

  .product-attr {
    grid-template-columns: 140px 1fr;
  }

  .leadership-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .world-title {
    margin-bottom: 36px;
  }
}

@media (max-width: 480px) {
  .stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .stat-number {
    font-size: 1.875rem;
  }

  .stat-tile {
    padding: 20px 16px;
  }
}