@charset "utf-8";

.numbers-page {
  color: #111;
}

.numbers-page .global-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.numbers-page .header-entry img.icon-entry {
  filter: brightness(0) invert(1);
}

.numbers-shell {
  padding: min(8vw, 120px) min(5.333vw, 80px) min(10.667vw, 160px);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: min(4vw, 60px) min(2.667vw, 40px);
  width: min(100%, 1120px);
  margin-inline: auto;
}

.metric-card {
  position: relative;
  display: flex;
  min-height: min(20vw, 300px);
  align-items: center;
  justify-content: space-between;
  gap: min(1.333vw, 20px);
  padding: min(3.333vw, 50px) min(2.667vw, 40px) min(2.667vw, 40px);
  border: 1px solid #d7dedb;
  border-radius: min(1.067vw, 16px);
  background: var(--color-white);
}

.metric-card--half {
  grid-column: span 3;
}

.metric-card--third {
  grid-column: span 2;
}

.metric-card--full {
  grid-column: 1 / -1;
}

.metric-card__tag {
  position: absolute;
  top: 0;
  left: 50%;
  display: grid;
  min-width: min(12vw, 180px);
  min-height: min(2.533vw, 38px);
  padding-inline: min(1.333vw, 20px);
  place-items: center;
  color: #65716e;
  background: var(--color-lime);
  border-radius: 999px;
  font: 600 min(1vw, 1.5rem)/1 Arial, sans-serif;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.metric-card__body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
}

.metric-card h2 {
  font-size: min(1.333vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.55;
}

.metric-card__value {
  display: flex;
  align-items: baseline;
  gap: min(0.667vw, 10px);
  margin-top: min(1.333vw, 20px);
  color: var(--color-ink);
  font-weight: 800;
  white-space: nowrap;
}

.metric-card__value strong {
  font: 800 min(5.733vw, 8.6rem)/0.9 Arial, sans-serif;
  letter-spacing: -0.05em;
}

.metric-card--01 .metric-card__value strong,
.metric-card--02 .metric-card__value strong {
  font-size: min(9.33vw, 14rem);
}

.metric-card--03 .metric-card__value strong {
  font-size: min(5.6vw, 8.4rem);
}

.metric-card--04 .metric-card__value strong,
.metric-card--05 .metric-card__value strong {
  font-size: min(5.8vw, 8.7rem);
}

.metric-card--06 .metric-card__value strong,
.metric-card--07 .metric-card__value strong,
.metric-card--08 .metric-card__value strong,
.metric-card--09 .metric-card__value strong {
  font-size: min(9.33vw, 14rem);
}

.metric-card--12 .metric-card__value strong,
.metric-card--13 .metric-card__value strong {
  font-size: min(5.6vw, 8.4rem);
}

.metric-card__value span {
  font-size: min(2vw, 3rem);
}

.metric-card__value--ratio {
  gap: min(1.067vw, 16px);
}

.metric-card__value--ratio strong {
  font-size: min(4.667vw, 7rem);
  letter-spacing: 0;
}

.metric-card__value--ratio span {
  color: #111;
  font-size: min(1.333vw, 2rem);
}

.metric-card__note {
  margin-top: min(1.067vw, 16px);
  font-size: min(0.8vw, 1.2rem);
  line-height: 1.6;
}

.metric-card__illustration {
  width: min(9.333vw, 140px);
  max-height: min(12vw, 180px);
  flex: 0 0 auto;
  object-fit: contain;
}

.metric-card--01 .metric-card__illustration {
  width: min(11.935vw, 179px);
}

.metric-card--02 .metric-card__illustration {
  width: min(12vw, 180px);
}

.metric-card--03 .metric-card__illustration {
  width: min(10.905vw, 163.5px);
}

.metric-card--04 .metric-card__illustration {
  width: min(10.248vw, 153.7px);
}

.metric-card--05 .metric-card__illustration {
  width: min(7.12vw, 106.8px);
}

.metric-card--03 .metric-card__body,
.metric-card--04 .metric-card__body,
.metric-card--05 .metric-card__body,
.metric-card--11 .metric-card__body,
.metric-card--12 .metric-card__body,
.metric-card--13 .metric-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

.metric-card--03 .metric-card__value,
.metric-card--04 .metric-card__value,
.metric-card--05 .metric-card__value,
.metric-card--11 .metric-card__value,
.metric-card--12 .metric-card__value,
.metric-card--13 .metric-card__value {
  justify-content: center;
}

.metric-card--03 .metric-card__illustration,
.metric-card--04 .metric-card__illustration,
.metric-card--05 .metric-card__illustration,
.metric-card--11 .metric-card__illustration,
.metric-card--12 .metric-card__illustration,
.metric-card--13 .metric-card__illustration {
  align-self: center;
  margin-top: min(1.333vw, 20px);
}

.metric-card--06 .metric-card__illustration {
  width: min(6.98vw, 104.7px);
}

.metric-card--07 .metric-card__illustration {
  width: min(9.83vw, 147.5px);
}

.metric-card--08 .metric-card__illustration {
  width: min(5.625vw, 84.4px);
}

.metric-card--09 .metric-card__illustration {
  width: min(9.56vw, 143.4px);
}

.metric-card--11 .metric-card__illustration {
  width: min(8.65vw, 129.7px);
}

.metric-card--12 .metric-card__illustration {
  width: min(5.65vw, 84.8px);
}

.metric-card--13 .metric-card__illustration {
  width: min(6.56vw, 98.4px);
}

.metric-card--feature {
  width: min(41vw, 620px);
  min-height: min(24vw, 360px);
  justify-self: center;
  justify-content: center;
  overflow: visible;
  padding: min(3.2vw, 48px) min(3.333vw, 50px) min(1.6vw, 24px);
}

.metric-card--feature .metric-card__tag {
  top: 0;
}

.metric-card__feature-center {
  align-self: center;
  text-align: center;
}

.metric-card__feature-center .metric-card__value {
  justify-content: center;
}

.metric-card__feature-center .metric-card__value strong {
  font-size: min(6.667vw, 10rem);
}

.metric-card__feature-center .metric-card__value span {
  font-size: min(1.333vw, 2rem);
}

.metric-card__feature-icon {
  width: min(5.333vw, 80px);
  margin: min(1.333vw, 20px) auto 0;
}

.metric-card__character {
  position: absolute;
  bottom: 0;
  width: min(13.333vw, 200px);
}

.metric-card__character:first-of-type {
  left: calc(-1 * min(6.667vw, 100px));
}

.metric-card__character:last-of-type {
  right: calc(-1 * min(6.667vw, 100px));
}

.metric-card--text-value .metric-card__value strong {
  font-size: min(3.333vw, 5rem);
  letter-spacing: 0;
}

@media (max-width: 1200px) {
  .numbers-shell {
    padding-inline: 6.667%;
  }

  .metrics-grid {
    gap: 5vw 3.333vw;
  }
}

@media (max-width: 768px) {
  .numbers-shell {
    padding: 10.256vw 6.154vw 20.513vw;
  }

  .metrics-grid {
    grid-template-columns: 1fr;
    gap: 12.821vw;
  }

  .metric-card,
  .metric-card--half,
  .metric-card--third,
  .metric-card--full {
    grid-column: 1;
  }

  .metric-card {
    min-height: 48.718vw;
    gap: 4.103vw;
    padding: 10.256vw 7.692vw 7.692vw;
    border-radius: 3.077vw;
  }

  .metric-card__tag {
    min-width: 41.026vw;
    min-height: 7.692vw;
    padding-inline: 4.103vw;
    font-size: 2.564vw;
  }

  .metric-card h2 {
    font-size: 4.103vw;
  }

  .metric-card__value {
    gap: 2.051vw;
    margin-top: 5.128vw;
  }

  .metric-card__value strong {
    font-size: 14.359vw;
  }

  .metric-card--01 .metric-card__value strong,
  .metric-card--02 .metric-card__value strong,
  .metric-card--03 .metric-card__value strong,
  .metric-card--04 .metric-card__value strong,
  .metric-card--05 .metric-card__value strong,
  .metric-card--06 .metric-card__value strong,
  .metric-card--07 .metric-card__value strong,
  .metric-card--08 .metric-card__value strong,
  .metric-card--09 .metric-card__value strong,
  .metric-card--12 .metric-card__value strong,
  .metric-card--13 .metric-card__value strong {
    font-size: 14.359vw;
  }

  .metric-card__value span {
    font-size: 5.128vw;
  }

  .metric-card__value--ratio {
    gap: 3.077vw;
  }

  .metric-card__value--ratio strong {
    font-size: 12.308vw;
  }

  .metric-card__value--ratio span {
    font-size: 3.59vw;
  }

  .metric-card__note {
    margin-top: 3.077vw;
    font-size: 2.564vw;
  }

  .metric-card__illustration {
    width: 25.641vw;
    max-height: 30.769vw;
  }

  .metric-card--01 .metric-card__illustration,
  .metric-card--02 .metric-card__illustration,
  .metric-card--03 .metric-card__illustration,
  .metric-card--04 .metric-card__illustration,
  .metric-card--05 .metric-card__illustration,
  .metric-card--06 .metric-card__illustration,
  .metric-card--07 .metric-card__illustration,
  .metric-card--08 .metric-card__illustration,
  .metric-card--09 .metric-card__illustration,
  .metric-card--11 .metric-card__illustration,
  .metric-card--12 .metric-card__illustration,
  .metric-card--13 .metric-card__illustration {
    width: 25.641vw;
  }

  .metric-card--03 .metric-card__illustration,
  .metric-card--04 .metric-card__illustration,
  .metric-card--05 .metric-card__illustration,
  .metric-card--11 .metric-card__illustration,
  .metric-card--12 .metric-card__illustration,
  .metric-card--13 .metric-card__illustration {
    margin-top: 0;
  }

  .metric-card--03 .metric-card__body,
  .metric-card--04 .metric-card__body,
  .metric-card--05 .metric-card__body,
  .metric-card--11 .metric-card__body,
  .metric-card--12 .metric-card__body,
  .metric-card--13 .metric-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22vw;
    align-items: center;
    column-gap: 4.103vw;
    text-align: left;
  }

  .metric-card--03 .metric-card__body h2,
  .metric-card--04 .metric-card__body h2,
  .metric-card--05 .metric-card__body h2,
  .metric-card--11 .metric-card__body h2,
  .metric-card--12 .metric-card__body h2,
  .metric-card--13 .metric-card__body h2,
  .metric-card--03 .metric-card__value,
  .metric-card--04 .metric-card__value,
  .metric-card--05 .metric-card__value,
  .metric-card--11 .metric-card__value,
  .metric-card--12 .metric-card__value,
  .metric-card--13 .metric-card__value {
    grid-column: 1;
    justify-content: flex-start;
  }

  .metric-card--03 .metric-card__illustration,
  .metric-card--04 .metric-card__illustration,
  .metric-card--05 .metric-card__illustration,
  .metric-card--11 .metric-card__illustration,
  .metric-card--12 .metric-card__illustration,
  .metric-card--13 .metric-card__illustration {
    width: 22vw;
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .metric-card--03 .metric-card__value,
  .metric-card--04 .metric-card__value,
  .metric-card--05 .metric-card__value,
  .metric-card--11 .metric-card__value,
  .metric-card--12 .metric-card__value,
  .metric-card--13 .metric-card__value {
    margin-top: 3.077vw;
  }

  .metric-card--11 .metric-card__value {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .metric-card--11 .metric-card__body {
    row-gap: 5.128vw;
  }

  .metric-card--11 .metric-card__illustration {
    grid-row: 1;
  }

  .metric-card--feature {
    display: grid;
    width: 100%;
    min-height: 100vw;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 5.128vw;
    padding: 10.256vw 7.692vw 7.692vw;
  }

  .metric-card--feature .metric-card__tag {
    /*top: 4.103vw;*/
  }

  .metric-card__feature-center {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .metric-card__feature-center .metric-card__value strong {
    font-size: 17.949vw;
  }

  .metric-card__feature-center .metric-card__value span {
    font-size: 3.59vw;
  }

  .metric-card__feature-icon {
    width: 12.821vw;
    margin-top: 3.077vw;
  }

  .metric-card__character {
    position: static;
    width: 100%;
  }

  .metric-card--text-value .metric-card__value strong {
    font-size: 8.205vw;
  }
}