/* About — wide photo, two-column story, principle cards. */

.about-photo {
  aspect-ratio: 21 / 9;
  margin: 0 var(--gutter);
  box-shadow: var(--shadow-md);
}

.split2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  padding: clamp(40px, 5vw, 64px) var(--gutter);
}
.split2 > div {
  background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-sm);
}
.split2 h2 { font-size: 26px; margin: 0 0 14px; }
.split2 p { font-size: 16px; line-height: 1.75; margin: 0 0 14px; color: var(--color-muted); }
.split2 p:last-child { margin-bottom: 0; }

.about-how { padding: clamp(20px, 3vw, 32px) var(--gutter) 0; text-align: center; }
.about-how .rule2 { display: none; }
.about-how h2 { margin: 0; }

.about-principles { padding: clamp(28px, 4vw, 40px) var(--gutter) clamp(20px, 3vw, 32px); }

@media (max-width: 860px) {
  .split2 { grid-template-columns: 1fr; gap: 20px; }
}