body.page-about{background:var(--c-ivory-deep)}

.about{padding-bottom:var(--sp-4)}

.page-about .page-hero{min-height:clamp(300px,32vw,440px);margin-bottom:var(--sp-4)}
.page-about .page-hero img{object-position:50% 18%}

.about__row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-3);align-items:stretch;
  margin-top:var(--sp-3);
}

.about-card{
  display:flex;flex-direction:column;
  margin-top:var(--sp-3);
  padding:clamp(20px,2.6vw,36px);
  background:var(--c-ivory);
  border:1px solid var(--c-line);
  border-radius:clamp(14px,1.4vw,22px);
  box-shadow:0 10px 30px rgba(28,22,16,.10), 0 2px 6px rgba(28,22,16,.05);

  scroll-margin-top:calc(var(--header-real,112px) + 16px);
}
.about__row > .about-card{margin-top:0}
.about__row{scroll-margin-top:calc(var(--header-real,112px) + 16px)}

.about-card h2{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.15;
  margin:0 0 var(--sp-2);
}
.about-card h2:last-child{margin-bottom:0}
.about-card p{margin:0;color:var(--c-graphite-soft);max-width:62ch;text-wrap:pretty}
.about-card p + p{margin-top:12px}

.about-card .lead-form p{max-width:none}

.about-card__grow{flex:1}
.about-card__action{align-self:flex-start;margin-top:var(--sp-3)}

.about-form{display:grid;gap:16px;max-width:520px;margin-top:var(--sp-3)}

.about-card--accent{background:var(--c-green);border-color:var(--c-green);color:var(--c-on-dark)}
.about-card--accent p{color:rgba(247,242,230,.86)}

.about-card--split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,4vw,56px);align-items:start;
}
.about-card--split .about-form{margin-top:0;max-width:none}

.about-card--inline{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.about-card--inline .btn{flex:0 0 auto}

@media (max-width:899px){
  .about__row{grid-template-columns:1fr}
  .about-card--split{grid-template-columns:1fr}
  .about-card--split .about-form{margin-top:0}
  .about-card--inline{flex-direction:column;align-items:flex-start}
}
@media (max-width:559px){

  .about-card .btn{width:100%;justify-content:center}
  .about-card__action{align-self:stretch}
}