/* 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:pinnacle_warm_about_band START */
/* Warm forest feature band with light copy and one restrained gold accent. */
.ocf-about {
    background: var(--ocf-primary);
    color: var(--ocf-primary-contrast);
}

.ocf-about .eyebrow { color: var(--ocf-secondary); }
.ocf-about .heading-2,
.ocf-about .prose,
.ocf-about .prose p,
.ocf-about .prose li,
.ocf-about .prose h3,
.ocf-about .prose h4,
.ocf-about .prose strong { color: var(--ocf-primary-contrast); }

.ocf-about .prose a,
.ocf-about .ocf-about-link { color: var(--ocf-secondary); }

.ocf-about .prose a:hover,
.ocf-about .ocf-about-link:hover { color: var(--ocf-primary-contrast); }

.ocf-about .prose li::before { background: var(--ocf-secondary); }

.ocf-about .ocf-media {
    border-radius: var(--image-radius);
    box-shadow: var(--image-shadow);
}
/* OCF_AGENT_BLOCK:pinnacle_warm_about_band END */