/* ============================================================================
   FINNECT CAPITAL — REACH MODEL  (about page only)

   A compass-accurate hub-and-spoke diagram of where Finnect operates: Nagpur is
   the central hub, live markets sit on solid teal spokes, and expanding markets
   sit on dashed spokes with an outward arrowhead. The whole diagram is drawn by
   finnect-journey.js from a single `reachData` array — this file only styles it.

   COLOUR SCOPING — IMPORTANT
   The coral/terracotta below (`--reach-map-expanding-color`) is a LOCAL,
   FUNCTIONAL colour for this diagram's "expanding" status ONLY. It is deliberately
   defined on `.reach-map` (component scope), NOT in :root and NOT in the shared
   palette. It must never be applied to a button, link, badge, hover state or any
   other element anywhere on the site. The brand palette is charcoal + teal only.
   ========================================================================== */

.reach-map {
  /* ---- component-local tokens · DO NOT promote to :root or a shared file ---- */
  --reach-charcoal: #1C1F1F;                 /* text + structural (brand) */
  --reach-teal: #0F6E6E;                      /* "live" status (brand) */
  --reach-map-expanding-color: #C2683E;       /* "expanding" status — LOCAL only */
  --reach-line: #E4E2DB;

  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}

.reach-svg { display: block; width: 100%; height: auto; overflow: visible; }
.reach-svg text { font-family: Inter, system-ui, sans-serif; }

/* ---- connectors (spokes) -------------------------------------------------- */
.reach-connector { fill: none; stroke-linecap: round; }
.reach-connector.reach-live { stroke: var(--reach-teal); stroke-width: 2.4; }
.reach-connector.reach-expanding {
  stroke: var(--reach-map-expanding-color);
  stroke-width: 2.2;
  stroke-dasharray: 7 6;
}

/* arrowhead marker — expanding spokes only */
.reach-svg marker.reach-arrow path { fill: var(--reach-map-expanding-color); }

/* ---- hub ------------------------------------------------------------------ */
.reach-hub-core  { fill: var(--reach-charcoal); }
.reach-hub-ring  { fill: none; stroke: var(--reach-teal); stroke-width: 2; opacity: .55; }
.reach-hub-dot   { fill: var(--reach-teal); }
.reach-hub-label { fill: var(--reach-charcoal); font-weight: 700; font-size: 13.5px; }
.reach-hub-sub   { fill: #6B7280; font-weight: 600; font-size: 9px; letter-spacing: .12em; }

/* ---- standalone nodes ----------------------------------------------------- */
.reach-node-ring.reach-live { fill: var(--reach-teal); }
.reach-node-inner { fill: #fff; }
.reach-node-label { fill: var(--reach-charcoal); font-weight: 600; font-size: 12.5px; }

/* ---- clusters (state boxes) ----------------------------------------------- */
.reach-cluster-box { fill: #fff; stroke-width: 1.6; }
.reach-cluster-box.reach-live      { stroke: var(--reach-teal); }
.reach-cluster-box.reach-expanding { stroke: var(--reach-map-expanding-color); }
.reach-cluster-title { fill: var(--reach-charcoal); font-weight: 700; font-size: 12.5px; }
.reach-city-dot.reach-live      { fill: var(--reach-teal); }
.reach-city-dot.reach-expanding { fill: var(--reach-map-expanding-color); }
.reach-city-label { fill: var(--reach-charcoal); font-weight: 500; font-size: 11px; }

/* ---- click / touch affordance + selection --------------------------------- */
[data-reach] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
[data-reach] .reach-focus-ring {
  fill: none;
  stroke: var(--reach-charcoal);
  stroke-width: 1.4;
  stroke-dasharray: 3 3;
  opacity: 0;
  transition: opacity .18s ease;
}
[data-reach]:focus-visible { outline: none; }
[data-reach]:focus-visible .reach-focus-ring,
[data-reach].is-active .reach-focus-ring { opacity: .9; }

/* ---- legend --------------------------------------------------------------- */
.reach-legend {
  display: flex; gap: 26px; justify-content: center; flex-wrap: wrap;
  margin-top: 10px; font-size: 12px; color: var(--reach-charcoal);
}
.reach-legend .k { display: inline-flex; align-items: center; gap: 9px; }
.reach-legend .sw { width: 28px; height: 0; border-top-width: 2.4px; border-top-style: solid; }
.reach-legend .sw.live      { border-top-color: var(--reach-teal); }
.reach-legend .sw.expanding { border-top-color: var(--reach-map-expanding-color); border-top-style: dashed; }
.reach-legend .k.expanding::after {
  content: ""; width: 0; height: 0;
  border-left: 6px solid var(--reach-map-expanding-color);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  margin-left: -6px;
}

/* ---- detail line ---------------------------------------------------------- */
.reach-detail {
  text-align: center; margin-top: 16px; min-height: 22px;
  font-size: 13.5px; color: #4B5563; line-height: 1.5;
}
.reach-detail b { color: var(--reach-charcoal); }
.reach-detail .st-live      { color: var(--reach-teal); font-weight: 700; }
.reach-detail .st-expanding { color: var(--reach-map-expanding-color); font-weight: 700; }
.reach-detail .muted { color: #9CA3AF; }

/* ============================================================================
   REVEAL ANIMATION — opt-in only.

   The hidden start-state lives ENTIRELY inside this no-preference block, so for
   `prefers-reduced-motion: reduce` (and if this stylesheet/JS never loads) every
   element is simply visible at full opacity — the diagram can never get stuck
   invisible. finnect-journey.js adds `.is-revealed` once, on scroll-into-view.
   Stagger: hub (0ms) → live spokes (150ms) → expanding spokes (300ms).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reach-map .reach-animate { opacity: 0; transition: opacity .55s ease; }
  .reach-map.is-revealed .reach-animate { opacity: 1; }
  .reach-map.is-revealed [data-group="hub"]       { transition-delay: 0s; }
  .reach-map.is-revealed [data-group="live"]      { transition-delay: .15s; }
  .reach-map.is-revealed [data-group="expanding"] { transition-delay: .30s; }
}

/* ============================================================================
   ABOUT · "Our Story" row layout

   `.about-split` (finone.css) is a two-column grid — it used to hold the story
   on the left and the map on the right. The map now lives full-width below as
   the reach diagram, so this row must collapse to ONE column; otherwise the
   story sits in the left half with an empty right half on desktop. (Mobile is
   unaffected because `.about-split` already collapses to 1fr in its own media
   queries.)
   ========================================================================== */
.about-split-stack { grid-template-columns: 1fr; }

/* Breathing room between the reach diagram and the journey timeline beneath it,
   which ships with no top margin of its own. */
.tl { margin-top: 72px; }
@media (max-width: 720px) { .tl { margin-top: 48px; } }