/* Page-only styles for about.html — loaded after styles.css, only on this page. */

/* ---------- hero: intro runs 1001 wide (2 lines), plain white ---------- */
@media (min-width: 768px) {
  .hero--inner .intro { max-width: min(69.51vw, 1001px); color: var(--white); }
}

/* ---------- who we are ---------- */
@media (min-width: 768px) {
  .about-who .section-head { gap: min(2.22vw, 32px); }
}
/* Stat rows: bottom rule only (Figma: independent strokes, bottom = 1),
   text flush left, first row top-aligned with the image. */
.about-stats-list div,
.about-stats-list div:last-child { border: 0; border-bottom: 1px solid var(--line); padding: min(2.5vw, 36px) 0; gap: min(.56vw, 8px); }
.about-stats-list div:first-child { padding-top: 0; }
.about-stats-list dd { line-height: 1.094; }
.about-stats-list dt { line-height: 1.083; }

/* ---------- mission / vision / purpose: 665 | 30 | 665 ---------- */
@media (min-width: 768px) {
  .mvp, .journey { grid-template-columns: 665fr 30fr 665fr; }
  .mvp-right { padding-top: min(4.17vw, 60px); }
  .mvp-mark { margin-top: max(-.56vw, -8px); }
  .mvp-vision { margin-top: min(25.07vw, 361px); }
  .mvp-purpose { margin-top: min(16.94vw, 244px); }
}

/* ---------- journey ---------- */
@media (min-width: 768px) {
  .journey .section-head p { max-width: min(34.65vw, 499px); }
}
.journey .timeline .t { line-height: 1.094; gap: clamp(8px, .83vw, 12px); }
.journey .timeline .t::before,
.journey .timeline [data-shape] .t::before {
  width: 18px; height: 18px; margin: 0; border-radius: 0; transform: none;
  transition: transform .7s var(--ease-out), background-color .3s;
  clip-path: polygon(18.75% 18.75%, 81.25% 18.75%, 81.25% 81.25%, 18.75% 81.25%);
}
.journey .timeline [data-shape="0"] .t::before { clip-path: polygon(50% 6.25%, 81.25% 50%, 50% 93.75%, 18.75% 50%); }
.journey .timeline [data-shape="2"] .t::before { clip-path: circle(31.25% at 50% 50%); }
.journey .timeline [data-shape="3"] .t::before { clip-path: polygon(50% 12.5%, 87.5% 81.25%, 12.5% 81.25%); }
.journey .timeline [data-shape="4"] .t::before { clip-path: polygon(52.1% 6.25%, 61.7% 36.9%, 94.1% 36.9%, 67.8% 56.1%, 77.5% 85.9%, 52.1% 67.5%, 26.7% 85.9%, 36.3% 56.1%, 10.1% 36.9%, 42.5% 36.9%); }
.journey .timeline .d { line-height: 1.25; }
/* every milestone shows its text (Figma); the selected one is dark, the others grey */
.journey .timeline .d { display: block; color: var(--muted); transition: color .3s; }
.journey .timeline button[aria-selected="true"] .d, .journey .timeline button:hover .d { color: var(--ink); }
.journey .timeline button:hover .t { color: var(--ink); }
/* shapes spin in one after another when the list appears, and turn a quarter on the active / hovered item */
.js .journey .timeline.reveal:not(.in) .t::before { opacity: 0; }
.journey .timeline.in .t::before { animation: shapeIn .9s var(--ease-out) calc(.2s + var(--k, 0) * 90ms) backwards; }
.journey .timeline button:is(:hover, [aria-selected="true"]) .t::before { transform: rotate(90deg); }
@keyframes shapeIn { from { opacity: 0; transform: rotate(-180deg) scale(0); } }

/* ---------- why partner ---------- */
@media (min-width: 768px) {
  #why-title + .measure-sm { max-width: min(36.94vw, 532px); }
}

/* ---------- statement band: 1300 wide, natural wrap like the design ---------- */
@media (min-width: 768px) {
  .statement-band .statement { max-width: min(90.28vw, 1300px); text-wrap: wrap; }
}
@media (min-width: 768px) {
  .statement-band .statement { letter-spacing: -.01em; }
  .mvp .h2 { text-wrap: wrap; }
}

/* ---------- phones ---------- */
@media (max-width: 767px) {
  .about-who { max-width: none; }
  .journey .timeline button { padding-block: 18px; gap: 10px; }
  .journey .timeline button:first-child { padding-top: 0; }
}

/* hero → body arch: the Figma bezier mask now lives in styles.css (.arch-top::before) */

/* ---------- why partner: 332 | 347 | 348 | 333 columns, 286-wide copy, top/bottom
   hairlines broken around each divider (Figma 'Icon container') ---------- */
@media (min-width: 768px) {
  .benefits--about { grid-template-columns: 332fr 347fr 348fr 333fr; }
  .benefits--about .benefit {
    --bl: min(1.111vw, 16px); --br: min(.972vw, 14px);
    border-top: 0; border-bottom: 0;
    padding-left: min(2.222vw, 32px); padding-right: 0;
    background:
      linear-gradient(var(--line), var(--line)) var(--bl) 0 / calc(100% - var(--bl) - var(--br)) 1px no-repeat border-box,
      linear-gradient(var(--line), var(--line)) var(--bl) 100% / calc(100% - var(--bl) - var(--br)) 1px no-repeat border-box;
  }
  .benefits--about .benefit:first-child { --bl: 0px; padding-left: min(1.111vw, 16px); }
  .benefits--about .benefit:nth-child(3) { --br: min(1.042vw, 15px); }
  .benefits--about .benefit:last-child { --br: 0px; }
  .benefits--about .benefit > div { max-width: min(19.86vw, 286px); }
  /* star mark: Figma 'Vision icon container' at x=40 — flush with the column */
  .mvp-mark { margin-left: 0; }
}

/* ---------- hero → who we are: Figma puts "WHO WE ARE" at y=1102 (202.5px below the
   900px hero), not the shared 181px (svgh × .12) — page-scoped so other heroes keep theirs ---------- */
@media (min-width: 768px) {
  .page-about .hero--inner + .arch-top { padding-top: max(var(--section), calc(var(--svgh) * .1339)) !important; }
}

/* ---------- phones: image → copy gap and stat figures were scaled down to ~7px / 26px
   by the desktop vw rules; give them phone-sized values ---------- */
@media (max-width: 767px) {
  .about-who .section-head { margin-bottom: 24px; }
  .about-who-left { gap: 16px; }
  .about-who-row { row-gap: 32px; }
  .about-stats-list div, .about-stats-list div:last-child { padding: 20px 0; gap: 6px; }
  .about-stats-list div:first-child { padding-top: 0; }
  .about-stats-list dd { font-size: 44px; }
  .about-stats-list dt { font-size: 16px; }
}

/* ---------- mission mark hover (after o-scs.com/company): the shards drift apart one after another while the
   star turns a little and deepens; each shard is a rotated copy, so one local "up" shift spreads them evenly ---------- */
.mvp-mark { transition: color .5s var(--ease); }
.mvp-mark svg { transition: rotate 1.4s var(--ease-out); }
.mvp-mark path { transition: translate .9s var(--ease-out); }
.mvp-mark g:nth-child(2) path { transition-delay: 40ms; }
.mvp-mark g:nth-child(3) path { transition-delay: 80ms; }
.mvp-mark g:nth-child(4) path { transition-delay: 120ms; }
.mvp-mark g:nth-child(5) path { transition-delay: 160ms; }
@media (hover: hover) {
  .mvp-mark:hover { color: #c6c6c6; }
  .mvp-mark:hover svg { rotate: 18deg; }
  .mvp-mark:hover path { translate: 0 -1.4px; }
}