/* ─── Aspen about page ───
 * Story split (offset photo + copy), the values band on sage as numbered rows (badge, label + title, description
 * over sage hairlines), then the shared How we work, reviews and CTA. */
.ocf-about-story-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--aspen-split-gap);
    align-items: center;
}

.ocf-about-story-grid .aspen-offset-photo { margin: 0; }

.ocf-values-rows { border-top: var(--card-border-width) solid var(--aspen-sage-line); }

.ocf-value-row {
    display: grid;
    grid-template-columns: 80px 320px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    padding: 30px 0;
    border-bottom: var(--card-border-width) solid var(--aspen-sage-line);
    text-align: left;
}

.ocf-value-row h3 { margin-top: 6px; }
.ocf-about-values .aspen-meta { color: var(--ocf-primary-hover); }
html[data-theme="dark"] .ocf-about-values .aspen-meta { color: var(--ocf-dark-link); }

@media (max-width: 1023px) {
    .ocf-about-story-grid { grid-template-columns: 1fr; gap: 44px; }
    .ocf-value-row { grid-template-columns: 64px minmax(0, 1fr); gap: 12px 24px; }
    .ocf-value-row > p { grid-column: 2; }
}

@media (max-width: 640px) {
    .ocf-value-row { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
    .ocf-value-row > p { grid-column: auto; }
}