.about-section {
  --about-scale: clamp(0.4167, calc(100vw / 1920px), 1);
  /* Design height of the stage; the morph script reads it to size the pinned track. */
  --about-stage-height: 1918px;
  --about-intro-progress: 0;
  /* Open intro image height in design px. The morph script rewrites it per viewport so the open
     image fills the window below an 80px design gap; 900px is the pre-script default. */
  --about-open-height: 900px;
  --about-metrics-shift: 0px;
  --about-full-width: calc(100vw / var(--about-scale));
  --about-hold: 0px;
  --about-pin: 0px;
  --about-metric-0: 0;
  --about-metric-1: 0;
  --about-metric-2: 0;
  overflow: hidden;
  background: #fff;
}

.about-section__scale {
  position: relative;
  height: calc((var(--about-stage-height) * var(--about-scale)) + var(--about-hold));
}

.about-section__stage {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1920px;
  margin-left: -960px;
  transform: translate3d(0, var(--about-pin), 0) scale(var(--about-scale));
  transform-origin: top center;
}

.about-section__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: var(--about-stage-height);
  padding-top: 190px;
}

.about-section__eyebrow {
  display: flex;
  justify-content: center;
  margin: 0 0 36px;
}

.about-section__eyebrow-text {
  color: rgba(1, 3, 0, 0.7);
  text-align: center;
  font-family: "stolzlregular", sans-serif;
  font-size: 20px;
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
  line-height: 80px;
  text-transform: uppercase;
}

.about-section__eyebrow-line {
  display: none;
}

.about-section__title {
  width: 837px;
  margin: 0;
  color: #010300;
  font-family: "stolzlregular", sans-serif;
  font-size: 70px;
  font-weight: normal;
  font-style: normal;
  font-synthesis: none;
  line-height: 100px;
  letter-spacing: 0;
  text-align: center;
}

.about-section__lead {
  width: 1190px;
  margin: 48px 0 0;
  color: rgba(1, 3, 0, 0.15);
  font-family: "stolzlbook", sans-serif;
  font-size: 48px;
  font-weight: normal;
  font-style: normal;
  font-synthesis: none;
  line-height: 72px;
  letter-spacing: -0.48px;
  text-align: center;
}

.about-section__lead > span:first-child {
  color: #010300;
}

.about-section__lead-word {
  color: rgba(1, 3, 0, calc(0.15 + (0.85 * var(--about-word-alpha, 0))));
}

.about-section__lead-word--static {
  --about-word-alpha: 1;
}

.about-section__intro-image {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 0;
  width: calc(940px + ((var(--about-full-width) - 940px) * var(--about-intro-progress)));
  height: calc(210px + ((var(--about-open-height) - 210px) * var(--about-intro-progress)));
  margin: 0;
  overflow: hidden;
  border-radius: calc(8px - (8px * var(--about-intro-progress)));
  transform: translate3d(-50%, calc(80px - (120px * var(--about-intro-progress))), 0);
  transform-origin: top center;
  will-change: width, height, transform, border-radius;
}

.about-section__intro-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1 + (0.08 * var(--about-intro-progress))));
  transform-origin: center center;
  will-change: transform;
}

.about-section__morph {
  position: relative;
  width: 1400px;
  min-height: 1080px;
  margin-top: 60px;
}

.about-section__metrics {
  position: relative;
  z-index: 2;
  width: 1400px;
  min-height: 1080px;
  margin: 0;
  transform: translateY(calc(-263px + (var(--about-metrics-shift) * var(--about-intro-progress))));
}

.about-metric {
  position: absolute;
  color: #fff;
  opacity: var(--about-metric-progress, 0);
  transform: translate3d(0, calc(28px * (1 - var(--about-metric-progress, 0))), 0);
  will-change: transform, opacity;
}

.about-metric--area {
  --about-metric-progress: var(--about-metric-0);
}

.about-metric--area {
  left: 22px;
  top: 426px;
  width: 416px;
}

.about-metric--experience {
  --about-metric-progress: var(--about-metric-1);
}

.about-metric--experience {
  left: 580px;
  top: 426px;
  width: 324px;
}

.about-metric--objects {
  --about-metric-progress: var(--about-metric-2);
}

.about-metric--objects {
  left: 22px;
  top: 744px;
  width: 600px;
}

.about-metric__corner {
  position: absolute;
  left: -21px;
  top: -27px;
  width: 50px;
  height: 50px;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
}

.about-metric__value {
  display: flex;
  align-items: baseline;
  margin: 0;
  color: #fff;
  font-family: "stolzlthin", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-synthesis: none;
  line-height: 100px;
  letter-spacing: 6px;
  white-space: nowrap;
}

.about-metric__number {
  font-size: 140px;
}

.about-metric__suffix {
  font-size: 60px;
}

.about-metric__suffix--large {
  font-size: 120px;
}

.about-metric__caption {
  margin: 18px 0 0;
  color: #fff;
  font-family: "stolzlbook", sans-serif;
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
  font-synthesis: none;
  line-height: 30px;
}

@media (min-width: 1920px) {
  .about-section {
    --about-scale: 1;
  }
}