.experience-metrics { padding:64px 5.2% 42px; color:#f7f7fa; background:#151632; }
.metrics-heading { display:grid; grid-template-columns:1.3fr .8fr; align-items:end; gap:50px; max-width:1400px; margin:0 auto 35px; }
.metrics-heading .eyebrow { color:#9be2d2; font-size:10px; letter-spacing:.13em; margin-bottom:17px; }
.metrics-heading h2 { max-width:620px; font:500 clamp(31px,3.2vw,48px)/1.12 Oxanium,sans-serif; letter-spacing:-.035em; }
.metrics-heading > p { max-width:400px; margin:0; font-size:14px; line-height:1.8; color:#c2bfd6; }
.metrics-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; max-width:1400px; margin:0 auto; }
.metrics-grid-6 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.metric-card { min-width:0; padding:24px 20px 20px; border:1px solid #ffffff23; border-radius:12px; background:#ffffff04; }
.metric-index { margin:0 0 24px; color:#a9a3c4; font:400 9px 'IBM Plex Mono',monospace; letter-spacing:.055em; }
.metric-value { margin:0 0 9px; color:#c2b9ff; font:500 clamp(42px,4.3vw,64px)/1 Oxanium,sans-serif; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
.metric-card h3 { min-height:44px; max-width:230px; margin:0; color:#f7f7fa; font:500 15px/1.5 Manrope,sans-serif; letter-spacing:-.01em; }
.metric-spark { margin:20px 0 22px; }
.metric-spark svg { display:block; width:100%; height:auto; max-height:85px; overflow:visible; }
.metric-spark text { font:400 10px 'IBM Plex Mono',monospace; fill:#c8c3dc; }
.metric-spark-guide { fill:none; stroke:#ffffff25; stroke-width:1; }
.metric-spark-line { fill:none; stroke:#9be2d2; stroke-width:2.5; stroke-linecap:round; }
.metric-spark-point { fill:#b1f1e1; }
.metric-spark-bar { fill:#9be2d2; }
.metric-spark-bar-secondary { fill:#b9b0ff; }
.metric-spark figcaption { margin-top:7px; color:#aaa4c2; font:400 9px/1.5 'IBM Plex Mono',monospace; }
.metric-context { margin:0 0 15px; color:#d0ccdf; font-size:12px; line-height:1.8; }
.metric-attribution { margin:0; color:#b5aecb; font-size:10px; line-height:1.7; }
.metric-qualification { margin:13px 0 0; padding-top:13px; border-top:1px solid #ffffff17; color:#b5aecb; font-size:10px; line-height:1.7; }
.metrics-footer { max-width:1400px; margin:24px auto 0; display:flex; justify-content:space-between; align-items:center; gap:30px; }
.metrics-footer > p { max-width:720px; margin:0; color:#b5aecb; font-size:11px; line-height:1.8; }
.metrics-footer .text-link { flex-shrink:0; color:#d9d1ff; font-size:11px; }
.metrics-method { max-width:1400px; margin:18px auto 0; padding-top:15px; border-top:1px solid #ffffff1c; color:#b5aecb; font-size:11px; }
.metrics-method summary { width:fit-content; cursor:pointer; list-style:none; }
.metrics-method summary::-webkit-details-marker { display:none; }
.metrics-method summary span { display:inline-block; margin-left:15px; color:#c2b9ff; }
.metrics-method[open] summary span { transform:rotate(45deg); }
.metrics-method p { max-width:950px; margin:15px 0 10px; line-height:1.9; }
.metrics-method a { color:#d9d1ff; text-decoration:underline; text-underline-offset:3px; }
@media(min-width:1600px) { .experience-metrics { padding-inline:max(8.5%,calc((100vw - 1400px)/2)); } }
@media(max-width:1100px) {
  .metrics-grid,.metrics-grid-6 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metric-card { padding:25px; }
  .metric-value { font-size:58px; }
  .metric-card h3 { min-height:0; max-width:none; }
  .metrics-heading { gap:30px; }
}
@media(max-width:760px) {
  .experience-metrics { padding:42px 6% 30px; }
  .metrics-heading { grid-template-columns:1fr; gap:20px; margin-bottom:26px; }
  .metrics-heading h2 { max-width:490px; font-size:37px; }
  .metrics-heading > p { max-width:530px; font-size:13px; }
  .metric-card { padding:21px 17px; }
  .metric-value { font-size:48px; }
  .metric-card h3 { min-height:45px; font-size:14px; }
  .metrics-footer { flex-direction:column; align-items:flex-start; gap:15px; }
}
@media(max-width:440px) {
  .metrics-grid,.metrics-grid-6 { grid-template-columns:1fr; }
  .metric-card { padding:24px; }
  .metric-value { font-size:60px; }
  .metric-card h3 { min-height:0; }
  .metric-spark { max-width:280px; }
  .metric-index { margin-bottom:17px; }
}