/* About: an introduction, a sense of place, and a short purpose statement. */
.about-intro { background: var(--ivory); }
.about-intro-inner { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr); align-items: end; gap: 80px; padding-block: 54px 51px; }
.about-intro .eyebrow { margin-bottom: 22px; }
.about-intro h1 { font-size: clamp(44px,4.6vw,68px); line-height: 1.05; margin: 0; max-width: 790px; letter-spacing: -1.6px; }
.about-description { max-width: 410px; font-size: 17px; line-height: 1.75; padding-bottom: 5px; }
.about-landscape { margin: 0; background: var(--navy); overflow: hidden; }
.about-landscape img { width: 100%; height: clamp(270px,23vw,365px); object-fit: cover; object-position: center 55%; }
.about-purpose { display: grid; grid-template-columns: minmax(0,.94fr) minmax(0,1.06fr); gap: clamp(40px,7vw,105px); align-items: center; padding-block: 64px 67px; }
.about-purpose-image { margin: 0; }
.about-purpose-image img { width: 100%; height: 390px; object-fit: cover; object-position: center; }
.about-purpose-copy { max-width: 600px; }
.about-purpose-copy > .eyebrow { margin-bottom: 15px; }
.about-purpose-copy h2 { max-width: 490px; font-size: clamp(35px,3.3vw,49px); line-height: 1.12; margin-bottom: 21px; }
.about-purpose-copy > p:not(.eyebrow) { max-width: 490px; font-size: 15px; line-height: 1.8; }
.about-principles { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 24px; border-top: 1px solid var(--line); margin-top: 26px; }
.about-principles dt { font-family: var(--serif); font-size: 23px; line-height: 1.2; margin-bottom: 10px; letter-spacing: -.3px; }
.about-principles dd { margin: 0; font-size: 13px; line-height: 1.7; color: var(--blue); }
@media(max-width:1100px) {
  .about-intro-inner { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 45px; }
  .about-intro h1 { font-size: 52px; }
  .about-description { font-size: 15px; }
  .about-purpose { gap: 40px; padding-block: 51px; }
  .about-purpose-image img { height: 390px; }
  .about-principles { gap: 22px; }
  .about-principles dt { font-size: 22px; }
}
@media(max-width:760px) {
  .about-intro-inner { grid-template-columns: 1fr; gap: 22px; padding-block: 35px 32px; }
  .about-intro .eyebrow { font-size: 9px; letter-spacing: 2px; margin-bottom: 18px; }
  .about-intro h1 { font-size: clamp(39px,6.6vw,49px); letter-spacing: -1.1px; max-width: 590px; }
  .about-description { font-size: 14px; line-height: 1.75; max-width: 520px; padding: 0; }
  .about-landscape img { height: 240px; object-position: 69% center; }
  .about-purpose { grid-template-columns: 1fr; gap: 31px; padding-block: 35px 39px; }
  .about-purpose-copy { grid-row: 1; max-width: 600px; }
  .about-purpose-copy h2 { font-size: 37px; max-width: 430px; margin-bottom: 17px; }
  .about-purpose-copy > p:not(.eyebrow) { font-size: 14px; }
  .about-purpose-image img { height: 285px; object-position: center 45%; }
  .about-principles { padding-top: 22px; margin-top: 24px; gap: 24px; }
  .about-principles dt { font-size: 23px; }
  .about-principles dd { font-size: 12px; }
}
@media(max-width:390px) {
  .about-intro h1 { font-size: 39px; }
  .about-landscape img { height: 220px; }
  .about-purpose-copy h2 { font-size: 35px; }
  .about-principles { gap: 19px; }
  .about-principles dt { font-size: 21px; }
  .about-purpose-image img { height: 250px; }
}