/* Page-specific layout; colors, cards, buttons and breakpoints are shared. */
.brand { min-height: 44px; }
.about-page .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.about-page .hero-copy h1 { margin-bottom: 24px; }
.about-intro { max-width: 55ch; margin-bottom: 0; }
.about-photo { height: auto; aspect-ratio: 4 / 3; border: 1px solid var(--border); border-radius: var(--card-radius); margin-block: 32px; }
.about-story { max-width: 760px; margin-inline: auto; }
.about-story + .about-story { border-top: 1px solid var(--border); }
.about-story p { color: var(--text-muted); }
.about-story p:last-child { margin-bottom: 0; }
.about-topics { padding-bottom: var(--section-spacing); }
@media (max-width: 1199px) {
  .about-page .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .about-photo { max-height: 400px; margin-top: 0; }
}
@media (max-width: 767px) {
  .about-page .water-card p { font-size: 16px; }
}