/* ==========================================================================
   Bcallvn — About Us page
   --------------------------------------------------------------------------
   Scoped styles for resources/views/pages/about.blade.php.
   Built entirely on the design tokens declared in base.css, so every colour,
   space and radius follows the active [data-theme] (light / dark) with no
   hard-coded palette values. Loaded only on the About page via @push.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared layout primitives used across the page
   -------------------------------------------------------------------------- */

.about-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section-eyebrow,
.about-eyebrow,
.global-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.about-eyebrow i,
.global-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--brand-gradient);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.about-hero {
  position: relative;
  padding-block: clamp(2rem, 5vw, 4rem) var(--section-y);
  background: var(--glow), var(--bg);
  overflow: hidden;
}

.about-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-subtle);
  margin-bottom: var(--sp-7);
}

.about-breadcrumb strong { color: var(--text); }

.about-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.about-hero-copy h1 {
  font-size: var(--fs-3xl);
  line-height: 1.04;
  margin-block: var(--sp-4) var(--sp-5);
}

.about-hero-copy h1 span {
  background: var(--brand-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.about-hero-description {
  font-size: var(--fs-md);
  /* No bottom margin: the description is now the last element in the hero
     (the stats strip was removed), so the hero's own bottom padding governs
     the spacing to the next section. Leaving the old --sp-7 here stacked with
     the hero padding and the next section's top padding, producing a large
     visible gap. */
  margin-bottom: 0;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: clamp(1.25rem, 4vw, 2.75rem);
  justify-content: start;
}

.about-stat strong {
  display: block;
  font-size: var(--fs-2xl);
  line-height: 1;
  background: var(--brand-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.about-stat span {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-subtle);
}

/* "By the numbers" band (§4.5).
   A self-contained dark card matching the service "snapshot" card — a violet-
   tinted dark gradient with a soft corner glow — so the four figures read as a
   deliberate, premium element rather than bare text on the section. */
.about-numbers {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: var(--sp-5);
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 3rem);
  background: linear-gradient(160deg, #282a3c 0%, #1a1a26 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-xl, 1.25rem);
  box-shadow: var(--shadow-lg);
  text-align: center;
  overflow: hidden;
}

/* Violet corner glow, mirroring the service snapshot card. */
.about-numbers::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -50px;
  width: 220px;
  height: 220px;
  border-radius: var(--r-pill);
  background: var(--brand-magenta, #d600ff);
  filter: blur(55px);
  opacity: 0.32;
  pointer-events: none;
}

/* On the dark card the figures and labels are rendered in white. The base
   .about-stat strong rule paints the number with a violet gradient clip, so
   both the gradient background and the transparent text-fill must be reset. */
.about-numbers .about-stat strong {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
}
.about-numbers .about-stat span {
  color: #fff;
}

/* Vertical dividers between the figures (not before the first). */
.about-numbers .about-stat {
  position: relative;
  z-index: 1;
}
.about-numbers .about-stat + .about-stat::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-5) * -0.5);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 2.4rem;
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 640px) {
  .about-numbers {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6) var(--sp-4);
  }
  /* On the 2-column layout, only draw the divider between the two columns
     (the odd items that start a new row), never a stray line at the row start. */
  .about-numbers .about-stat + .about-stat::before { display: none; }
  .about-numbers .about-stat:nth-child(even)::before {
    content: "";
    position: absolute;
    left: calc(var(--sp-4) * -0.5);
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 2.4rem;
    background: rgba(255, 255, 255, 0.12);
  }
}

/* "Who we are" (§4.1) — two columns: copy on the left, illustration on the
   right. Previously the copy and image were unwrapped siblings, so they simply
   stacked, and the image borrowed a services.css class that isn't loaded here
   (rendering unframed). This gives it a proper grid and a framed illustration. */
.who-we-are {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  /* Stretch so the image column matches the full height of the text column. */
  align-items: stretch;
}

.who-we-are__copy > p {
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}
.who-we-are__copy > p:last-child { margin-bottom: 0; }

.who-we-are__media {
  position: relative;
  padding: clamp(1rem, 2.5vw, 1rem);
  border-radius: var(--r-2xl);
  background:
    radial-gradient(120% 120% at 80% 10%, rgba(214, 0, 255, 0.10), transparent 55%),
    radial-gradient(120% 120% at 10% 90%, rgba(123, 44, 255, 0.12), transparent 55%),
    var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.who-we-are__media img {
  display: block;
  width: 100%;
  /* Fill the frame's full height (which stretches to the text column) and crop
     the illustration to fit, so left and right columns end level. */
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-xl, 1.25rem);
}

/* Reversed variant: illustration on the LEFT, copy on the RIGHT. */
.who-we-are--reverse .who-we-are__media { order: 1; }
.who-we-are--reverse .who-we-are__copy { order: 2; }

/* Stand-for list styling inside the copy column. */
.who-we-are__list {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: var(--sp-4);
}
.who-we-are__list li { color: var(--text-muted); }
.who-we-are__list li strong { color: var(--text); }

@media (max-width: 960px) {
  .who-we-are {
    grid-template-columns: 1fr;
    align-items: start;
  }
  /* Image below the copy on narrow screens, back to natural height. */
  .who-we-are__media { order: 2; }
  .who-we-are__media img { height: auto; }
  /* Keep the same copy-then-image order for the reversed variant too. */
  .who-we-are--reverse .who-we-are__copy { order: 1; }
  .who-we-are--reverse .who-we-are__media { order: 2; }
}

/* Hero visual — dark ops dashboard, intentionally dark in both themes */
.hero-dashboard-wrap { perspective: 1200px; }

.hero-dashboard {
  position: relative;
  aspect-ratio: 5 / 3.6;
  border-radius: var(--r-2xl);
  background: linear-gradient(160deg, #282a3c 0%, #1a1a26 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.dashboard-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 100%);
}

.dashboard-label {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.4rem 0.7rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
}

.dashboard-label .dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.label-hk    { top: 12%;  left: 8%; }
.label-usa   { top: 18%;  right: 8%; }
.label-india { bottom: 30%; left: 12%; }

.dashboard-retention {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.45rem 0.8rem;
  font-size: var(--fs-xs);
  color: #fff;
  background: rgba(123, 44, 255, 0.18);
  border: 1px solid var(--accent-ring);
  border-radius: var(--r-pill);
}

.dashboard-retention .dashboard-icon { color: var(--accent); }

.map-node {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(123, 44, 255, 0.22);
}

.map-node.node-one   { top: 25%;  left: 21%; }
.map-node.node-two   { top: 29%;  right: 25%; }
.map-node.node-three { bottom: 20%; left: 29%; }

.dashboard-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.dashboard-lines path {
  fill: none;
  stroke: url(#none);
  stroke: rgba(123, 44, 255, 0.5);
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: about-draw 2.6s var(--ease-out) forwards;
}

.dashboard-lines path:nth-child(2) { animation-delay: 0.3s; }
.dashboard-lines path:nth-child(3) { animation-delay: 0.6s; }

@keyframes about-draw { to { stroke-dashoffset: 0; } }

.dashboard-growth {
  position: absolute;
  right: 8%;
  bottom: 22%;
  padding: 0.55rem 0.85rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  backdrop-filter: blur(6px);
}

.dashboard-growth small {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.dashboard-growth strong { color: #fff; font-size: var(--fs-md); }

.dashboard-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.75);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
}

.dashboard-bottom > div { display: inline-flex; align-items: center; gap: var(--sp-2); }

.mini-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--accent);
}

.system-status span {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
}

.dashboard-users {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.dashboard-users span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 2px solid #1a1a26;
  margin-left: -8px;
}

.dashboard-users span:first-child { margin-left: 0; }

/* --------------------------------------------------------------------------
   OUR STORY
   -------------------------------------------------------------------------- */

.about-story { padding-block: var(--section-y); background: var(--bg-alt); }

.story-grid {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.story-copy h2 { font-size: var(--fs-2xl); margin-block: var(--sp-3) var(--sp-4); }

.story-intro { font-size: var(--fs-md); max-width: 52ch; margin-bottom: var(--sp-8); }

.timeline { position: relative; display: grid; gap: var(--sp-6); }

.timeline::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(var(--accent), transparent);
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--sp-4);
  align-items: start;
}

.timeline-year {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent-contrast);
  background: var(--brand-gradient);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-accent);
}

.timeline-content strong { display: block; font-size: var(--fs-md); margin-bottom: var(--sp-1); }
.timeline-content p { font-size: var(--fs-sm); }

/* Story dashboard card */
.story-visual { position: sticky; top: calc(var(--header-h) + 1.5rem); }

.story-dashboard {
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, #282a3c 0%, #1a1a26 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-5);
  color: #fff;
}

.story-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.6);
}

.window-dots { display: flex; gap: 6px; }
.window-dots i {
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.25);
}
.window-dots i:first-child { background: var(--accent); }

.story-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-block: var(--sp-5);
}

.story-metrics > div {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.story-metrics strong { display: block; font-size: var(--fs-xl); color: #fff; }
.story-metrics span { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.6); }

.revenue-chart {
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: var(--sp-4);
}

.revenue-chart > span {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--sp-3);
}

.revenue-chart svg { width: 100%; height: 120px; }
.revenue-chart .chart-area { fill: url(#chartGradient); stroke: none; }
.revenue-chart #chartGradient stop:first-child { stop-color: var(--accent); }
.revenue-chart #chartGradient stop:last-child { stop-color: var(--accent); }
.revenue-chart .chart-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.story-dashboard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

.os-card { display: flex; align-items: center; gap: var(--sp-3); }

.os-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--accent-contrast);
  background: var(--brand-gradient);
  border-radius: var(--r-md);
}

.os-card strong { display: block; font-size: var(--fs-sm); color: #fff; }
.os-card small { color: rgba(255, 255, 255, 0.55); font-size: var(--fs-xs); }

.progress-lines { display: grid; gap: 5px; width: 60px; }
.progress-lines i {
  height: 4px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.15);
}
.progress-lines i:nth-child(1) { width: 100%; background: var(--accent); }
.progress-lines i:nth-child(2) { width: 70%; }
.progress-lines i:nth-child(3) { width: 45%; }

/* --------------------------------------------------------------------------
   MISSION CARDS
   -------------------------------------------------------------------------- */

.mission-section { padding-block: var(--section-y); }

.mission-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.mission-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}

.mission-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.mission-card > span {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.mission-card h3 { font-size: var(--fs-lg); }
.mission-card p { font-size: var(--fs-sm); flex: 1; }

.mission-card a {
  align-self: flex-start;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: var(--accent-contrast);
  background: var(--brand-gradient);
  border-radius: var(--r-pill);
  transition: transform var(--t-fast) var(--ease);
}

.mission-card a:hover { transform: translate(2px, -2px); }

/* --------------------------------------------------------------------------
   WHY US
   -------------------------------------------------------------------------- */

.why-section { padding-block: var(--section-y); background: var(--bg-alt); }

.why-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
  margin-bottom: var(--sp-8);
}

.why-header h2 { font-size: var(--fs-2xl); margin-top: var(--sp-3); }
.why-header p { font-size: var(--fs-md); }

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

.why-card {
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}

.why-card:hover { transform: translateY(-4px); border-color: var(--accent); }

.why-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
}

.why-card h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.why-card p { font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   GLOBAL PRESENCE
   -------------------------------------------------------------------------- */

.global-section {
  padding-block: var(--section-y);
  background: linear-gradient(160deg, #282a3c 0%, #1a1a26 100%);
  color: #fff;
}

.global-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
  margin-bottom: var(--sp-8);
}

.global-header h2 { font-size: var(--fs-2xl); color: #fff; margin-top: var(--sp-3); }
.global-header p { font-size: var(--fs-md); color: rgba(255, 255, 255, 0.7); }

.global-map {
  position: relative;
  aspect-ratio: 12 / 5;
  border-radius: var(--r-xl);
  background:
    radial-gradient(60% 80% at 50% 50%, rgba(123, 44, 255, 0.1), transparent 70%),
    rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: var(--sp-6);
}

.map-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
}
.map-dots-left  { right: 55%; }
.map-dots-right { left: 55%;  opacity: 0.6; }

.global-location {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  transform: translate(-50%, -50%);
}

.global-location i {
  width: 14px;
  height: 14px;
  border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(123, 44, 255, 0.25);
  animation: about-pulse 2.4s var(--ease) infinite;
}

@keyframes about-pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(123, 44, 255, 0.25); }
  50%      { box-shadow: 0 0 0 12px rgba(123, 44, 255, 0.06); }
}

.location-label {
  padding: 0.35rem 0.7rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.location-label.location-active {
  color: var(--accent-contrast);
  background: var(--brand-gradient);
  border-color: transparent;
}

.location-austin    { top: 42%; left: 22%; }
.location-hongkong  { top: 40%; left: 74%; }
.location-bangalore { top: 62%; left: 64%; }

.map-footer-pills {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.locations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

.location-card {
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}

.location-card:hover { border-color: var(--accent-ring); transform: translateY(-4px); }

.location-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: var(--sp-4);
}

.location-card-top i {
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--accent);
}
.location-card-top i.white { background: #fff; }

.location-card h3 { color: #fff; font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.location-card p { color: rgba(255, 255, 255, 0.75); font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.location-card small { color: rgba(255, 255, 255, 0.5); font-size: var(--fs-xs); line-height: 1.7; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  .about-hero-grid,
  .story-grid,
  .why-header,
  .global-header { grid-template-columns: 1fr; }

  .story-visual { position: static; }

  .mission-grid,
  .why-grid,
  .locations-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .about-stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }

  .mission-grid,
  .why-grid,
  .locations-grid { grid-template-columns: 1fr; }

  .global-map { aspect-ratio: 3 / 4; }
  .location-austin    { top: 20%; left: 30%; }
  .location-hongkong  { top: 50%; left: 70%; }
  .location-bangalore { top: 76%; left: 45%; }
}