/* ==========================================================================
   Metrics strip, options (Alex, 2026-11-10): a small section between What We
   Do and How We Work. Figures and wording are the intro deck's.

   Sources: run 2 Home big stats (.hm-shift, board Agriswara b03); the intro
   deck's "different financial trajectory" comparison; run 2 Home hero glass
   stat cards (board Verden b01, Terrava b04), with hard edges here.
   ========================================================================== */

.mx { --mx-g3: #86867F; --mx-g4: #61635C; --mx-bar2: #D6D5D1; background: var(--bg); color: var(--ink); padding: 0 0 clamp(48px, 5.5vw, 88px); }
.mx-wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.mx-h { margin: 0; font-family: var(--logo); font-weight: 400; font-size: clamp(22px, 2vw, 30px); line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.mx-src { margin: 18px 0 0; font-size: 12px; line-height: 1.5; color: var(--mx-g3); }

/* ---------- option 1: four large figures across ---------- */
.mx-head { display: grid; gap: 14px; justify-items: start; margin-bottom: clamp(24px, 2.6vw, 40px); max-width: 44ch; }
.mx-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.mx-cell { padding: clamp(18px, 1.9vw, 28px) clamp(14px, 1.8vw, 28px) 0 0; }
.mx-cell + .mx-cell { padding-left: clamp(14px, 1.8vw, 28px); border-left: 1px solid var(--line); }
.mx-fig { display: block; font-family: var(--logo); font-weight: 300; font-size: clamp(52px, 6.6vw, 104px); line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.mx-fig small { font-size: .55em; letter-spacing: -.02em; color: var(--mx-g3); }
.mx-name { display: block; margin-top: 12px; font-size: 16px; font-weight: 500; line-height: 1.3; }
.mx-vs { display: block; margin-top: 5px; max-width: 28ch; font-size: 14px; line-height: 1.45; color: var(--mx-g4); text-wrap: pretty; }

/* ---------- option 2: head to head bars ---------- */
.mx-duel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(32px, 5vw, 80px); align-items: start; border-top: 1px solid var(--line); padding-top: clamp(20px, 2.2vw, 32px); }
.mx-side { display: grid; gap: 16px; justify-items: start; }
.mx-key { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.3; color: var(--mx-g4); }
.mx-key li { display: flex; align-items: center; gap: 9px; }
.mx-key i { flex: none; width: 12px; height: 12px; background: var(--ink); }
.mx-key li + li i { background: var(--mx-bar2); }
.mx-bars { display: grid; gap: clamp(14px, 1.5vw, 22px); }
.mx-bar { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 20px; align-items: center; }
.mx-bar b { grid-row: span 2; font-size: 15px; font-weight: 500; line-height: 1.3; }
.mx-track { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mx-fill { display: block; height: 26px; width: var(--w); background: var(--ink); transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.mx-track--low .mx-fill { height: 12px; background: var(--mx-bar2); }
.mx-val { font-family: var(--logo); font-size: 26px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mx-track--low .mx-val { font-size: 14px; letter-spacing: 0; color: var(--mx-g4); }
.mx-js .mx-duel:not(.in) .mx-fill { transform: scaleX(0); }

/* ---------- option 3: glass cards over a photograph ---------- */
.mx-photo { position: relative; display: grid; align-items: end; min-height: clamp(320px, 50vh, 460px); overflow: hidden; color: #fff; background: #111; }
.mx-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; filter: grayscale(1) contrast(1.06); }
.mx-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0, 0, 0, .66), rgba(0, 0, 0, .12) 62%); }
.mx-over { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: end; padding: clamp(18px, 2vw, 30px); }
.mx-over .mx-h { max-width: 17em; }
.mx-cards { display: grid; grid-template-columns: repeat(4, clamp(140px, 11.5vw, 180px)); gap: 10px; }
.mx-card { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: clamp(140px, 11.5vw, 170px); padding: 13px 14px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.mx-card > span { font-size: 13px; line-height: 1.32; color: rgba(255, 255, 255, .92); }
.mx-card strong { font-family: var(--logo); font-weight: 300; font-size: clamp(38px, 3.5vw, 54px); line-height: 1; letter-spacing: -.04em; text-align: right; font-variant-numeric: tabular-nums; }
.mx-src--under { margin-top: 12px; text-align: right; }

@media (max-width: 1023px) {
  .mx-duel { grid-template-columns: minmax(0, 1fr); }
  .mx-over { grid-template-columns: minmax(0, 1fr); }
  .mx-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .mx-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx-cell, .mx-cell + .mx-cell { padding: 18px 14px 18px 0; border-left: 0; }
  .mx-cell:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
  .mx-cell:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .mx-bar { grid-template-columns: minmax(0, 1fr); }
  .mx-bar b { grid-row: auto; }
  .mx-cards { grid-template-columns: minmax(0, 1fr); }
  .mx-card { flex-direction: row; align-items: center; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-fill { transition: none; }
}