/* shared/designops-variant.css — DESIGNOPS VARIANT (capabilities/evolution/track-record) — split from main.css lines 2181-2327. See docs/ for the reorg record. */
/* ============================================================ DESIGNOPS VARIANT — OFFER / CAPABILITIES / EVOLUTION / TRACK RECORD ============================================================ */

/* SwapLang toggle — active, EN/ES bilingual engine live. */

/* ---- Shared section headers (centered desktop, left on mobile) ---- */
.capabilities__header,
.evolution__header,
.track-record__header {
  text-align: center;
  margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
}
.capabilities__header .section__eyebrow,
.evolution__header .section__eyebrow,
.track-record__header .section__eyebrow {
  align-items: center;
}
.evolution__header .section__lede,
.track-record__header .section__lede {
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 767px) {
  .capabilities__header,
  .evolution__header,
  .track-record__header { text-align: left; }
  .capabilities__header .section__eyebrow,
  .evolution__header .section__eyebrow,
  .track-record__header .section__eyebrow { align-items: flex-start; }
  .evolution__header .section__lede,
  .track-record__header .section__lede { margin-left: 0; margin-right: 0; }
}

/* ---- EVOLUTION — tap-to-expand timeline ---- */
.timeline {
  list-style: none;
  max-width: 46rem;
  margin: 0 auto;
  position: relative;
  padding-left: 1.75rem;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: var(--color-border-faint);
}
.timeline__item {
  position: relative;
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__marker {
  position: absolute;
  left: calc(-1.75rem - 1px);
  top: 0.4rem;
  width: 12px;
  height: 12px;
  background: var(--color-brand-purple);
  transform: translateX(-50%);
  transition: transform 250ms var(--ease-decelerate);
}
.timeline__item.is-open .timeline__marker { transform: translateX(-50%) scale(1.3); }
.timeline__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.1rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.timeline__toggle:focus-visible {
  outline: 2px solid var(--color-brand-purple);
  outline-offset: 4px;
}
.timeline__title {
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--color-brand-white);
  margin: 0;
}
.timeline__chevron {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--color-brand-purple);
  border-bottom: 2px solid var(--color-brand-purple);
  transform: rotate(45deg);
  transition: transform 250ms var(--ease-decelerate);
}
.timeline__item.is-open .timeline__chevron { transform: rotate(-135deg); }
.timeline__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms var(--ease-decelerate);
}
.timeline__body {
  margin-top: 0.45rem;
  font-size: 0.95rem;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  color: var(--color-text-muted);
}
.timeline__note {
  margin-top: 0.45rem;
  font-size: 0.8rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  color: var(--color-purple-light);
}
@media (max-width: 1023px) {
  .timeline__note { display: none; }
}

/* ---- O-2 · nested "go deeper" reveal (adopts the briefs' rv pattern) ---- */
.timeline__reveal { margin-top: 0.6rem; }
.timeline__rv-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.35rem 0;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  color: var(--color-purple-light);
  transition: color var(--duration-ui) var(--ease-standard);
}
.timeline__rv-btn:hover { color: var(--color-brand-purple); }
.timeline__rv-btn:focus-visible {
  outline: 2px solid var(--color-brand-purple);
  outline-offset: 4px;
}
.timeline__rv-icon {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 250ms var(--ease-decelerate);
}
.timeline__rv-btn[aria-expanded="true"] .timeline__rv-icon { transform: rotate(-135deg); }
.timeline__rv-panel {
  margin-top: 0.4rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--color-border-faint);
}
.timeline__rv-panel[hidden] { display: none; }
.timeline__rv-txt {
  font-size: 0.9rem;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ---- TRACK RECORD — stat grid + preserved marquee ---- */
.section--track-record { padding-bottom: clamp(2.5rem, 4vw, 4rem); }
.track-record__stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.track-record__stats .stat { text-align: center; }
/* Figure type, relocated from home/hero.css with the organism (S10C). */
.stat__number { font-size:clamp(1.875rem,2.8vw,2.75rem); font-weight:var(--fw-black); line-height:1; letter-spacing:-0.02em; color:var(--color-brand-white); }
.stat__label { margin-top:0.4rem; font-size:0.78rem; font-weight:var(--fw-regular); line-height:1.5; color:var(--color-text-muted); }
/* P-11: 900px/480px are RETAINED (not migrated to the canonical 767/1023
   hinges). They are the column-count staircase for the five-stat track
   record grid (5 → 2 → 1), load-bearing for this specific grid rather than
   layout hinges: forcing 5 columns down to 768px would cramp them, and
   collapsing to a canonical hinge would drop the 2-column intermediate
   stage. Both are documented, deliberate exceptions. */
@media (max-width: 900px) {
  .track-record__stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .track-record__stats { grid-template-columns: 1fr; }
  .track-record__stats .stat,
  .track-record__stats .stat__number,
  .track-record__stats .stat__label { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .timeline__panel,
  .timeline__chevron,
  .timeline__marker,
  .timeline__rv-icon { transition: none; }
}