/* =========================================================================
   IRVx Softlabs : pages/about.css
   Who We Are (loaded after inner.css): the evolution timeline, the figures,
   and the monogram with its intersections on navy. Navy, white and blue.
   Flat colour.
   ========================================================================= */

/* ------------------------------------------------------ Evolution timeline */
/* Eight stages on a blue line, one short line each; the last one (IRVx) is filled.
   Each stage draws the segment down to the next dot once the list is in view
   (site-motion.js [data-in]); at rest and without JavaScript the line is whole. */
.evo { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.evo li { position: relative; display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: .3rem 2rem; align-items: baseline; padding: 1.15rem 0 1.15rem 2.6rem; border-bottom: 1px solid var(--line); }
.evo li:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 2rem; height: 100%; width: 2px; background: var(--blue-100); transform-origin: 50% 0; }
.evo h3 { position: relative; font-size: clamp(1.2rem, 1rem + .6vw, 1.45rem); letter-spacing: -.025em; line-height: 1.2; margin: 0; }
.evo h3::before { content: ""; position: absolute; z-index: 1; left: -2.6rem; top: calc(.6em - 8px); width: 16px; height: 16px; border-radius: 50%; background: var(--bg-soft); border: 2px solid var(--blue-bright); }
.evo p { margin: 0; color: var(--body); font-size: 1rem; line-height: 1.5; }
.evo li:last-child h3 { color: var(--blue); }
.evo li:last-child h3::before { background: var(--blue-bright); box-shadow: 0 0 0 5px var(--blue-100); }
html.has-motion .evo li::after { transform: scaleY(0); }
html.has-motion .evo.is-in li::after { transform: scaleY(1); transition: transform .7s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(.35s + var(--i, 0) * .12s); }
@media (max-width: 767.98px) {
  .evo li { grid-template-columns: minmax(0, 1fr); padding-left: 2.3rem; }
  .evo h3::before { left: -2.3rem; }
}

/* ------------------------------------------------------------- Figures */
/* Figures side by side, each under a rule. Light by default, white on navy. */
.figs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3rem; }
.figs li { border-top: 2px solid var(--ink); padding-top: 1.1rem; min-width: 0; }
.figs__v { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 1.2rem + 1.6vw, 3rem); letter-spacing: -.04em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: .55rem; }
.figs__l { display: block; color: var(--body); font-size: .98rem; line-height: 1.5; max-width: 26ch; }
.section--dark .figs li { border-top-color: rgba(255, 255, 255, .5); }
.section--dark .figs__v { color: var(--white); }
.section--dark .figs__l { color: var(--on-dark); }
@media (max-width: 575.98px) { .figs { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; } }

/* ------------------------------------------------ 50+ Years Young, with a photo */
.young .figs { margin-top: 2.5rem; }
.young__photo { margin: 0; justify-self: end; width: 100%; max-width: 460px; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-2); }
.young__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
@media (max-width: 991.98px) { .young__photo { justify-self: start; max-width: 420px; } }
@media (max-width: 575.98px) { .young__photo { max-width: none; aspect-ratio: 4 / 3; } .young__photo img { object-position: 50% 0%; } }   /* phones: wide, not tall */

/* ------------------------------------------ The monogram and pairs on navy */
.section--dark .mono { background: var(--ink-2); border: 1px solid var(--line-dark); }
.section--dark .pairs li { color: var(--white); border-bottom-color: var(--line-dark); }
.section--dark .pairs li:first-child { border-top-color: rgba(255, 255, 255, .5); }
.section--dark .pairs i { color: var(--blue-on-dark); }