/* About (homepage): photo beside the copy. */
.ocf-about {
    background: var(--cardinal-bg-alt);
}

.ocf-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ocf-split-gap);
    align-items: center;
}

.ocf-about-grid figure {
    margin: 0;
}

.ocf-about-grid figure img {
    width: 100%;
    height: var(--ocf-about-image-height);
    object-fit: cover;
}

.ocf-about-grid .heading-2 {
    margin-bottom: calc(var(--ocf-grid-gap) * 0.75);
}

.ocf-about-grid li {
    margin: calc(var(--ocf-grid-gap) * 0.25) 0;
}

.ocf-about-grid .prose ul {
    padding-left: calc(var(--ocf-grid-gap) * 0.75);
}

@media (max-width: 767px) {
    .ocf-about-grid {
        grid-template-columns: 1fr;
        gap: calc(var(--ocf-grid-gap) * 1.25);
    }

    .ocf-about-grid figure img {
        height: var(--ocf-about-image-height-mobile);
    }
}

/* Cardinal: copy column with a text link to the About page; list markers in the primary color. */
.ocf-about-grid .prose ul { list-style: none; padding-left: 0; }
.ocf-about-grid .prose li { position: relative; padding-left: calc(var(--ocf-space-unit) * 1.25); }
.ocf-about-grid .prose li::before {
    content: '';
    position: absolute;
    top: 0.62em;
    left: 0;
    width: calc(var(--ocf-space-unit) * 0.4375);
    height: calc(var(--ocf-space-unit) * 0.4375);
    background: var(--ocf-primary);
}
.ocf-about-grid .prose li strong { color: var(--ocf-heading); }
.ocf-about-link { margin-top: calc(var(--ocf-grid-gap) * 0.5); }
@media (min-width: 768px) { .ocf-about-grid { grid-template-columns: minmax(0, 600fr) minmax(0, 608fr); } }

/* OCF_AGENT_BLOCK:afv-home-about-flyer START */
/* Homepage About: mission flyer shown whole, no crop. */
.ocf-about-grid figure img {
    height: auto;
    object-fit: contain;
    box-shadow: 0 10px 30px rgba(31, 42, 68, 0.15);
}
@media (max-width: 767px) {
    .ocf-about-grid figure img { height: auto; }
}
/* OCF_AGENT_BLOCK:afv-home-about-flyer END */

/* OCF_AGENT_BLOCK:afv-home-about-centered START */
/* Homepage About: one centered column, text first, flyer centered below. */
.ocf-about-grid { grid-template-columns: 1fr; justify-items: center; }
@media (min-width: 768px) { .ocf-about-grid { grid-template-columns: 1fr; } }
.ocf-about-grid > div { order: 1; max-width: 820px; margin-left: auto; margin-right: auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.ocf-about-grid > figure { order: 2; width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
.ocf-about-grid .prose ul { max-width: 720px; margin-left: auto; margin-right: auto; }
.ocf-about-grid .prose li { padding-left: 0; text-align: center; }
.ocf-about-grid .prose li::before { display: none; }

.ocf-about-grid .prose .afv-about-tagline { font-size: 1.25rem; letter-spacing: 0.06em; color: var(--ocf-primary); margin-bottom: calc(var(--ocf-grid-gap) * 0.5); }
.ocf-about-grid .prose .afv-about-tagline strong { color: inherit; }
/* The three points: bold lead-in centered on its own line, description as a neat left-aligned block. */
.ocf-about-grid .prose ul { max-width: 600px; }
.ocf-about-grid .prose li { text-align: left; margin-bottom: calc(var(--ocf-grid-gap) * 0.75); }
.ocf-about-grid .prose li strong { display: block; text-align: center; letter-spacing: 0.04em; margin-bottom: 0.25em; }
/* Intro paragraph: same neat left-aligned block as the points, centered on the page. */
.ocf-about-grid .prose > p:not(.afv-about-tagline) { max-width: 600px; margin-left: auto; margin-right: auto; text-align: left; }
/* Computer: flyer on the left; label and heading centered at the top of the right column, text below. */
@media (min-width: 900px) {
    .ocf-about-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        grid-template-areas: "fig eb" "fig hd" "fig body" "fig link" "fig .";
        grid-template-rows: auto auto auto auto 1fr;
        column-gap: calc(var(--ocf-grid-gap) * 2.5);
        row-gap: 0;
        justify-items: stretch;
        align-items: start;
    }
    .ocf-about-grid > div { display: contents; }
    .ocf-about-grid > div > .eyebrow { grid-area: eb; justify-self: center; text-align: center; margin-top: 0; }
    .ocf-about-grid > div > .heading-2 { grid-area: hd; justify-self: center; text-align: center; margin-bottom: calc(var(--ocf-grid-gap) * 0.75); }
    .ocf-about-grid > div > .prose { grid-area: body; }
    .ocf-about-grid > div > .ocf-about-link { grid-area: link; justify-self: start; }
    .ocf-about-grid > figure { grid-area: fig; max-width: none; width: 100%; }
    .ocf-about-grid .prose ul,
    .ocf-about-grid .prose > p:not(.afv-about-tagline) { max-width: none; margin-left: 0; margin-right: 0; }
}
/* Bruce 2026-11-01: paragraphs centered too. */
.ocf-about-grid .prose li,
.ocf-about-grid .prose > p:not(.afv-about-tagline) { text-align: center; }
/* OCF_AGENT_BLOCK:afv-home-about-centered END */