/* About introduction: a light editorial composition, shared with the existing brand palette. */
.about-v4-intro {
  grid-template-columns: minmax(245px, .74fr) minmax(430px, 1.26fr);
  gap: clamp(54px, 9vw, 142px);
  align-items: center;
  padding-top: 126px;
  padding-bottom: 132px;
}

.about-v5-intro-media {
  position: relative;
  width: 100%;
  max-width: 365px;
  margin: 0;
  aspect-ratio: 0.76;
  overflow: hidden;
  background: #e8f4fc;
}

.about-v5-intro-media::before {
  position: absolute;
  z-index: 1;
  top: 30px;
  left: -1px;
  width: 4px;
  height: 74px;
  content: "";
  background: #1476e8;
}

.about-v5-intro-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% center;
  filter: saturate(.82) contrast(.98);
}

.about-v5-intro-media::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 34%;
  content: "";
  background: linear-gradient(0deg, rgb(10 50 88 / 44%), rgb(10 50 88 / 0%));
}

.about-v5-intro-media figcaption {
  position: absolute;
  z-index: 2;
  right: 26px;
  bottom: 22px;
  left: 26px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.65;
}

.about-v5-intro-copy { min-width: 0; }

.about-v4-intro-title > span { margin-bottom: 16px; }

.about-v4-intro h2 {
  max-width: 560px;
  font-size: clamp(35px, 3.15vw, 48px);
  line-height: 1.22;
  letter-spacing: -.035em;
}

.about-v5-intro-body {
  max-width: 540px;
  margin-top: 38px;
  padding-top: 31px;
  border-top: 1px solid #d6e5f0;
}

.about-v5-intro-body p {
  max-width: none;
  margin: 0;
  color: #647e98;
  font-size: 16px;
  line-height: 1.95;
}

.about-v5-intro-body p + p { margin-top: 16px; color: #7890a5; }

.about-v5-intro-track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 17px;
  margin-top: 42px;
  color: #1d649f;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
}

.about-v5-intro-track i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #8cbce7;
}

@media (max-width: 900px) {
  .about-v4-intro {
    grid-template-columns: minmax(210px, .72fr) minmax(300px, 1.2fr);
    gap: clamp(38px, 6vw, 72px);
    padding-top: 108px;
    padding-bottom: 114px;
  }

  .about-v5-intro-media { max-width: none; }
  .about-v5-intro-body { margin-top: 29px; padding-top: 25px; }
}

@media (max-width: 620px) {
  .about-v4-intro {
    grid-template-columns: 1fr;
    gap: 46px;
    padding-top: 78px;
    padding-bottom: 86px;
  }

  .about-v5-intro-media { width: min(100%, 390px); aspect-ratio: 1.25; }
  .about-v5-intro-media img { object-position: center 35%; }
  .about-v5-intro-media figcaption { right: 20px; bottom: 17px; left: 20px; font-size: 12px; }
  .about-v5-intro-media::before { top: 22px; height: 58px; }
  .about-v4-intro h2 { font-size: 34px; }
  .about-v5-intro-body { margin-top: 25px; padding-top: 22px; }
  .about-v5-intro-body p { font-size: 15px; line-height: 1.85; }
  .about-v5-intro-track { gap: 9px 12px; margin-top: 32px; font-size: 13px; }
}