.page-about{
  background:
    radial-gradient(1000px 380px at 50% 0%, rgba(255,255,255,.75), transparent 58%),
    linear-gradient(180deg, #f4f1eb 0%, #efebe4 100%);
}

@media (min-width: 861px){
  body.page-about,
  body.page-about a,
  body.page-about button{
    cursor: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'>\
<g transform='rotate(-35 16 16)'>\
<rect x='13' y='3' width='6' height='17' rx='2' fill='%23222222'/>\
<rect x='12' y='18' width='8' height='5' rx='1.5' fill='%238b6b4d'/>\
<path d='M12 23 L20 23 L18 29 L14 29 Z' fill='%23d8c2a6'/>\
</g>\
</svg>") 4 4, auto;
  }
}

.aboutHero{
  padding-top: 56px;
  padding-bottom: 28px;
}

.aboutHero__brand{
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(18,18,18,.62);
  margin-bottom: 18px;
}

.aboutHero__eyebrow{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}

.aboutHero__title{
  margin: 0;
  font-size: clamp(42px, 8vw, 88px);
  line-height: .92;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 500;
}

.aboutLayout{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 28px;
  padding-bottom: 70px;
}

.aboutStatement{
  font-size: 20px;
  line-height: 1.9;
  color: rgba(18,18,18,.88);
}

.aboutStatement p{
  margin: 0 0 24px;
}

.aboutInfo{
  align-self: start;
}

.aboutInfo__card{
  border: 1px solid rgba(18,18,18,.08);
  border-radius: 28px;
  background: rgba(247,244,239,.68);
  padding: 22px;
}

.aboutInfo__item + .aboutInfo__item{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(18,18,18,.08);
}

.label{
  display: block;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.value{
  display: block;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(18,18,18,.9);
}

.link{
  text-decoration: none;
  border-bottom: 1px solid rgba(18,18,18,.16);
  width: max-content;
}

.link:hover{
  border-bottom-color: rgba(18,18,18,.38);
}

@media (max-width: 980px){
  .aboutLayout{
    grid-template-columns: 1fr;
  }

  .aboutStatement{
    font-size: 18px;
  }
}

@media (max-width: 860px){
  .aboutHero{
    padding-top: 22px;
  }

  .aboutHero__brand{
    display: none;
  }

  .aboutHero__title{
    font-size: 34px;
  }

  .aboutStatement{
    font-size: 16px;
    line-height: 1.85;
  }

  .aboutInfo__card{
    border-radius: 22px;
    padding: 18px;
  }
}