/* ==========================================================
   Sweet Sadie Mae — 2026 redesign · about.css
   About page (about/index). Loads after base.css.
   ========================================================== */

.ssm2-about-intro { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: center; padding-top: 56px; padding-bottom: 56px; }
.ssm2-about-intro h2, .ssm2-about-why h2, .ssm2-about-phil > h2, .ssm2-about-cta h2 {
  font-family: var(--ssm-font-display); font-weight: 600; font-size: 30px; line-height: 1.2; margin: 0 0 14px;
}
.ssm2-about-intro p { margin: 0; font-size: 18px; line-height: 1.7; }
/* object-position crops the empty top of the group image */
.ssm2 .ssm2-about-intro img { display: block; width: 100%; max-width: 560px; margin: auto; aspect-ratio: 900 / 510; object-fit: cover; object-position: bottom; }

.ssm2-about-why { background: var(--ssm-ink); color: #fff; padding: 56px 0; }
.ssm2-about-why p { margin: 0; max-width: 760px; font-size: 19px; line-height: 1.7; color: var(--ssm-on-dark-muted); }

.ssm2-about-phil { padding-top: 56px; padding-bottom: 56px; }
.ssm2-about-phil__grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ssm2-about-phil h3 { font-family: var(--ssm-font-display); font-weight: 600; font-size: 21px; line-height: 1.25; margin: 0; }
.ssm2-about-phil .ssm2-card p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ssm-muted); }

.ssm2-about-cta { background: var(--ssm-sun-soft); padding: 48px 0; }
.ssm2-about-cta__inner { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.ssm2-about-cta h2 { margin: 0; }
.ssm2-about-cta__links { display: flex; flex-wrap: wrap; gap: 12px; }