.about-page {
  background: #fff;
}

.about-intro {
  padding: 190px 0 112px;
}

.about-intro-inner {
  max-width: 980px;
}

.about-intro h1 {
  max-width: 880px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(58px, 6vw, 92px);
  line-height: .98;
  letter-spacing: -.055em;
}

.about-intro p {
  max-width: 780px;
  margin: 34px 0 0;
  color: #6f7177;
  font-size: clamp(18px, 1.65vw, 25px);
  line-height: 1.65;
}

.about-overview {
  padding: 92px 0 122px;
}

.about-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(70px, 10vw, 160px);
  align-items: start;
}

.about-page h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(38px, 4vw, 60px);
  line-height: 1.04;
  letter-spacing: -.045em;
}

.about-overview-copy {
  max-width: 670px;
}

.about-overview-copy p,
.about-next p,
.about-cta p {
  margin: 0;
  color: #6f7177;
  font-size: 17px;
  line-height: 1.8;
}

.about-overview-copy p + p {
  margin-top: 24px;
}

.about-principles {
  padding: 112px 0 120px;
  background: #f7f6f4;
}

.about-principles h2 {
  max-width: 700px;
}

.about-principles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(45px, 7vw, 105px);
  margin-top: 72px;
}

.about-principles h3 {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  letter-spacing: -.025em;
}

.about-principles article p {
  margin: 18px 0 0;
  color: #707177;
  font-size: 15px;
  line-height: 1.75;
}

.about-next {
  padding: 132px 0;
}

.about-next-inner {
  max-width: 850px;
  text-align: center;
}

.about-next p {
  max-width: 680px;
  margin: 28px auto 0;
}

.about-cta {
  padding: 92px 0 126px;
  text-align: center;
}

.about-cta h2 {
  max-width: 760px;
  margin-inline: auto;
}

.about-cta p {
  max-width: 620px;
  margin: 24px auto 0;
}

.about-cta .button {
  margin-top: 32px;
}

@media (max-width: 820px) {
  .about-intro {
    padding: 160px 0 90px;
  }

  .about-overview-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .about-principles-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 42px;
  }
}

@media (max-width: 680px) {
  .about-intro {
    padding: 136px 0 72px;
  }

  .about-intro h1 {
    font-size: clamp(48px, 15vw, 66px);
  }

  .about-intro p {
    margin-top: 26px;
    font-size: 17px;
  }

  .about-overview,
  .about-principles,
  .about-next,
  .about-cta {
    padding-block: 82px;
  }
}