/* ================================================================
   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);
}
.founder-card {
  margin: 0;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
}
.founder-card__top {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.founder-card__top img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 15%;
  border: 2px solid var(--amber);
}
.founder-card__name {
  display: block;
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--navy);
}
.founder-card__role {
  font-size: var(--fs-small);
  color: var(--orange-ink);
  font-weight: 600;
}
.founder-card blockquote {
  margin: var(--s-5) 0;
  padding-left: var(--s-4);
  border-left: 3px solid var(--orange);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-body);
  font-style: italic;
}
.founder-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
/* The card is white inside a dark room: undo the dark-room stat colours */
.founder-card .stat__num {
  font-size: clamp(30px, 3vw, 40px);
  color: var(--navy);
}
.founder-card .stat__num sup {
  color: var(--orange-ink);
}
.founder-card .stat__label {
  color: var(--text-soft);
}

/* ── 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;
}
.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));
}

/* ─────────────────────────────────────────────
       RESPONSIVE
    ───────────────────────────────────────────── */
@media (max-width: 1023px) {
  .about-hero .wrap,
  .reach {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
  .founder-card {
    max-width: 480px;
  }
  .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;
  }
}