/* How We Work: on the page background. Heading, intro and the steps on the left as ruled rows, each led by a large primary numeral; the rounded commitments photo on the right. One column without a photo or on smaller screens. */
.ocf-commitments-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ocf-split-gap);
    align-items: center;
}

.ocf-commitments--photo .ocf-commitments-grid { grid-template-columns: minmax(0, 560fr) minmax(0, 560fr); }

.ocf-commitments-photo {
    order: 2; /* the homepage About section above has its photo on the left, so this one sits on the right */
    margin: 0;
    overflow: hidden;
    border-radius: var(--image-radius);
    aspect-ratio: 560 / 600;
}

.ocf-commitments-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ocf-commitments-copy { max-width: 600px; }

.ocf-commitments-intro {
    max-width: 520px;
    margin-top: 18px;
    font-size: calc(var(--font-body-size) * 1.06);
    line-height: 1.6;
}

.ocf-commitments-list {
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--ocf-border);
}

.ocf-commitment {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 24px;
    padding: 24px 0;
    border-top: 1px solid var(--ocf-border);
}

.ocf-commitment__num {
    color: var(--ocf-primary);
    font-family: var(--ocf-font-heading), system-ui, sans-serif;
    font-size: 40px;
    font-weight: var(--ocf-font-h1-weight, 700);
    letter-spacing: -0.02em;
    line-height: 1;
}

.ocf-commitment h3 {
    color: var(--ocf-heading);
    font-size: clamp(21px, 1.8vw, 24px);
}

.ocf-commitment p {
    margin-top: 6px;
    color: var(--ocf-body);
    font-size: var(--font-body-size);
    line-height: 1.55;
}

@media (max-width: 1023px) {
    .ocf-commitments--photo .ocf-commitments-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .ocf-commitments-photo { order: 0; aspect-ratio: 16 / 10; }
    .ocf-commitments-copy { max-width: none; }
}

@media (max-width: 639px) {
    .ocf-commitment { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 20px 0; }
    .ocf-commitment__num { font-size: 32px; }
}