/* ================================================================
   TARABA BizComm — About (story, 70%, beliefs, team, milestones, reach)
   css/pages/about.css | Loaded by about.html only, after base.css,
   layout.css, showroom.css, showroom-motion.css, modal.css.

   Rebuilt for the showroom restructure (Phase 7). Each room has one
   exhibit: the founder's card, the 70% bar, three beliefs, the people,
   the milestone track, the reach rings. The pre-rebuild version is
   kept in _archive/pre-showroom/about.css.
================================================================ */

html {
  scroll-padding-top: 70px;
}

/* ── Hero — story left, founder's card right (7/5) ── */
.about-hero {
  padding-top: calc(70px + var(--s-8));
}
.about-hero .wrap {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--s-8);
  align-items: center;
}
.about-hero h1 {
  font-family: var(--f-display);
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--white);
  max-width: 20ch;
}
.about-hero h1 em {
  font-style: normal;
  color: var(--orange);
}
.about-hero .lead {
  color: rgba(255, 255, 255, 0.78);
}
/* The hero's right column: the mascot stands beside the headline
   (replaced the founder's card on the client's ask, 2026-11-03) */
.about-hero__mascot {
  margin: 0;
  text-align: center;
}
.about-hero__mascot img {
  width: 100%;
  max-width: 380px;
  height: auto;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.45));
}
/* ── 01 The 70% bar (smaller and lighter for the client, 2026-10-31) ── */
.journey {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: var(--s-3) var(--s-6);
  align-items: center;
  margin: var(--s-6) 0 0;
}
.journey__big {
  grid-row: span 2;
  font-family: var(--f-display);
  font-size: clamp(52px, 6vw, 84px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--orange-ink);
}
.journey__big span {
  color: var(--navy);
}
.journey__bar {
  position: relative;
  display: grid;
  grid-template-columns: 70fr 30fr;
  height: 48px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.journey__before,
.journey__after {
  display: flex;
  align-items: center;
  padding: 0 var(--s-5);
  font-size: var(--fs-small);
  font-weight: 600;
  white-space: nowrap;
}
.journey__before {
  background: var(--navy);
  color: var(--white);
  transform-origin: 0 50%;
}
.journey__after {
  color: var(--text-soft);
  justify-content: center;
}
.journey__marker {
  position: absolute;
  left: 70%;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 3px solid var(--amber);
}
.journey__marker {
  font-size: 0;
}
.journey figcaption {
  margin-top: 0;
  max-width: 52ch;
}
.about-origin {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  max-width: 64ch;
  font-size: var(--fs-lead);
  color: var(--text-soft);
}
.about-origin strong {
  color: var(--navy);
}
.js-motion [data-motion="journey"] .journey__before {
  transition: transform 1.2s cubic-bezier(0.45, 0, 0.25, 1) 0.2s;
}
.js-motion [data-motion="journey"]:not(.is-in) .journey__before {
  transform: scaleX(0);
}
.js-motion [data-motion="journey"] .journey__marker {
  transition: opacity 250ms ease-out 1.35s;
}
.js-motion [data-motion="journey"]:not(.is-in) .journey__marker {
  opacity: 0;
}
.belief--lit .exhibit__icon {
  background: linear-gradient(160deg, #1f3a6c, #13284f);
  color: var(--white);
}

/* ── 03 Team ── */
.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-7);
  list-style: none;
}
/* The team room's heading and its line each run on one line (client,
   2026-11-03). Both are held back by a max-width meant for a narrow
   column; from 1024px up they may use the full wrap, and the line
   shrinks with the viewport so it still fits in one. Under 1024px
   they wrap as before — one line there would be unreadably small. */
@media (min-width: 1024px) {
  #team h2,
  #team .lead {
    max-width: none;
  }
  #team .lead {
    /* the wrap gives 1216px at most, and the line needs ~61.75px of it
       per 1px of type, so 19px is the ceiling that still fits */
    font-size: min(19px, 1.4vw);
  }
}
.person img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 15%;
  border-radius: var(--r-lg);
  background: var(--navy);
}
.person h3 {
  margin-top: var(--s-4);
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--navy);
}
.person__role {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--orange-ink);
}
.person p:not(.person__role) {
  margin: var(--s-2) 0 var(--s-3);
  font-size: var(--fs-small);
  color: var(--text-soft);
}
.studio {
  margin: var(--s-8) 0 0;
}
.studio img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

/* ── 04 Milestones — one track, dots on the line ── */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-8);
  padding-top: 40px;
  list-style: none;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 12px;
  height: 2px;
  background: linear-gradient(90deg, rgba(168, 191, 218, 0.25), var(--amber));
  transform-origin: 0 50%;
}
.milestone {
  position: relative;
}
.milestone::before {
  content: "";
  position: absolute;
  top: -35px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--navy);
  border: 2px solid var(--slate-light);
}
.milestone h3 {
  margin-top: 6px;
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
}
.milestone p {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--slate-light);
}
.js-motion [data-motion="timeline"]::before {
  transition: transform 1.6s cubic-bezier(0.45, 0, 0.25, 1) 0.1s;
}
.js-motion [data-motion="timeline"]:not(.is-in)::before {
  transform: scaleX(0);
}
.js-motion [data-motion="timeline"] .milestone {
  transition:
    opacity 400ms var(--ease-out),
    transform 400ms var(--ease-out);
  transition-delay: calc(150ms + var(--i, 0) * 180ms);
}
.js-motion [data-motion="timeline"]:not(.is-in) .milestone {
  opacity: 0;
  transform: translateY(10px);
}

/* ── 05 Reach rings ── */
.reach {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: var(--s-8);
  align-items: center;
}
.reach__list {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-6);
  list-style: none;
}
/* Dot in the gutter, so the bold name and its line wrap as one sentence */
.reach__list li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-body);
  color: var(--text-soft);
}
.reach__list b {
  color: var(--navy);
}
.reach__dot {
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.reach__dot--2 {
  background: var(--slate);
}
.reach__dot--3 {
  background: var(--navy);
}
.reach__stage {
  margin: 0;
}
.reach__stage svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
/* SVG user units: the 520-wide drawing renders at ~400px, so these
   come out at roughly 13–18px on screen */
.reach__label {
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 600;
  fill: var(--navy);
}
.reach__label--light {
  fill: var(--white);
  font-size: 15px;
  letter-spacing: 0.06em;
}
.reach__label--home {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 800;
  fill: var(--orange-ink);
}
.js-motion [data-motion="reach"] .reach__ring {
  transform-box: view-box;
  transform-origin: 260px 220px;
  transition:
    transform 700ms var(--ease-out),
    opacity 500ms var(--ease-out);
  transition-delay: calc(100ms + var(--i, 0) * 180ms);
}
.js-motion [data-motion="reach"]:not(.is-in) .reach__ring {
  transform: scale(0.6);
  opacity: 0;
}
.js-motion [data-motion="reach"] .reach__pin {
  transition:
    transform 300ms cubic-bezier(0.3, 1.4, 0.5, 1),
    opacity 250ms var(--ease-out);
  transition-delay: calc(300ms + var(--i, 0) * 110ms);
}
.js-motion [data-motion="reach"]:not(.is-in) .reach__pin {
  transform: scale(0.5);
  opacity: 0;
}

/* ── 04 India map: the logo's arrow flies out of Nashik ── */
.reach__map {
  position: relative;
}
.reach__map img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.reach__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Dotted flight paths: navy dots read on every state colour */
.reach__leg {
  fill: none;
  stroke: var(--navy);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 1 13;
  opacity: 0.85;
}
/* the mask stroke that reveals each path as the arrow flies it */
.reach__reveal {
  fill: none;
  stroke: #fff;
  stroke-width: 24;
  stroke-linecap: round;
}
.reach__stop-dot {
  fill: var(--orange);
  stroke: var(--white);
  stroke-width: 4;
}
.reach__stop-ring,
.reach__home-ring {
  fill: none;
  stroke: var(--orange);
  stroke-width: 4;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.reach__home-ring {
  opacity: 0.9;
}
/* SVG user units: the 1402-wide map renders at ~600px */
.reach__map .reach__label--home {
  font-size: 40px;
  paint-order: stroke;
  stroke: var(--white);
  stroke-width: 8px;
}
/* The world map (client, 2026-11-02) is near-black, so the route has to
   read light on it: amber dots instead of navy, white destination names,
   and the Nashik label outlined in the map's own dark blue. The image is
   cropped to Europe–Africa–Asia and the viewBox frames that same crop, so
   strokes and type are about 0.6x the figures the full map needed. */
.reach__map--world .reach__leg {
  stroke: var(--amber);
  stroke-width: 3.5;
  stroke-dasharray: 1 8;
  opacity: 0.95;
}
.reach__map--world .reach__reveal {
  stroke-width: 14;
}
.reach__map--world .reach__stop-dot {
  stroke-width: 2;
}
.reach__map--world .reach__stop-ring,
.reach__map--world .reach__home-ring {
  stroke-width: 2.5;
}
.reach__map--world .reach__label--light {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  paint-order: stroke;
  stroke: rgba(2, 10, 30, 0.85);
  stroke-width: 3.5px;
}
.reach__map--world .reach__label--home {
  font-size: 24px;
  fill: var(--amber);
  stroke: rgba(2, 10, 30, 0.85);
  stroke-width: 5px;
}
/* On a phone the map is only ~340px wide, so the names need a bigger
   share of the viewBox to stay legible */
@media (max-width: 639px) {
  .reach__map--world .reach__label--light {
    font-size: 27px;
    stroke-width: 6.5px;
  }
  .reach__map--world .reach__label--home {
    font-size: 37px;
  }
}

/* Without the script (or with reduced motion) every path and stop shows */
.reach__arrow {
  opacity: 0;
}
.reach__map.is-armed .reach__stop {
  opacity: 0;
  transform: scale(0.4);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 250ms ease-out,
    transform 400ms cubic-bezier(0.3, 1.6, 0.5, 1);
}
.reach__map.is-armed .reach__stop.is-hit {
  opacity: 1;
  transform: none;
}
.reach__map .reach__stop.is-hit .reach__stop-ring {
  animation: reach-ping 900ms ease-out;
}
.reach__map.is-flying .reach__home-ring {
  animation: reach-ping 1.6s ease-out infinite;
}
@keyframes reach-ping {
  from {
    opacity: 0.9;
    transform: scale(0.6);
  }
  to {
    opacity: 0;
    transform: scale(1.8);
  }
}

/* Two principals: keep each card the width it had in a row of three */
.team {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: calc((100% - 2 * var(--s-5)) / 3 * 2 + var(--s-5));
  /* two cards where three fit: centre them (client, 2026-11-03) */
  margin-inline: auto;
}

/* ─────────────────────────────────────────────
       RESPONSIVE
    ───────────────────────────────────────────── */
@media (max-width: 1023px) {
  .about-hero .wrap,
  .reach {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
  .about-hero__mascot img {
    max-width: 300px;
  }
  .journey {
    grid-template-columns: 1fr;
  }
  .journey__big {
    grid-row: auto;
  }
  .timeline {
    grid-template-columns: repeat(4, 1fr);
    row-gap: var(--s-7);
  }
  .timeline::before {
    display: none;
  }
  .reach__stage {
    max-width: 520px;
    justify-self: center;
    width: 100%;
  }
}
@media (max-width: 639px) {
  .beliefs,
  .team {
    grid-template-columns: 1fr;
  }
  .team {
    gap: var(--s-6);
    max-width: none;
  }
  .reach__map .reach__label--home {
    font-size: 56px;
  }
  .person {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: var(--s-4);
    align-items: start;
  }
  .person img {
    grid-row: span 4;
    aspect-ratio: 1;
  }
  .person h3 {
    margin-top: 0;
  }
  .journey__bar {
    height: 44px;
  }
  .journey__before span {
    font-size: 12px;
  }
  .journey__after span {
    display: none;
  }
  /* Vertical track on phones: dots down the left edge */
  .timeline {
    grid-template-columns: 1fr;
    row-gap: var(--s-5);
    padding: 0 0 0 28px;
  }
  .timeline::before {
    display: block;
    left: 6px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    background: linear-gradient(
      180deg,
      rgba(168, 191, 218, 0.25),
      var(--amber)
    );
    transform-origin: 50% 0;
  }
  .js-motion [data-motion="timeline"]:not(.is-in)::before {
    transform: scaleY(0);
  }
  .milestone::before {
    top: 6px;
    left: -28px;
  }
  .reach__label {
    font-size: 21px;
  }
  .reach__label--light {
    font-size: 17px;
  }
  .reach__label--home {
    font-size: 26px;
  }
}