/* About (homepage): primary band between two triple-stripe bands; the request form card beside the about copy. */
.ocf-about {
    background: var(--ocf-primary);
    color: var(--ocf-body-alt);
}

/* The band above reads ink → border → tint so the tint meets the primary band. */
.cardiff-rule--down {
    background: linear-gradient(180deg, var(--cardiff-ink) 0 33.33%, var(--ocf-border) 33.33% 66.67%, var(--cardiff-tint) 66.67% 100%);
}

.ocf-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
    gap: calc(var(--ocf-split-gap) * 1.1);
    align-items: center;
}

.ocf-about-copy .heading-2 {
    margin-bottom: calc(var(--ocf-grid-gap) * 0.75);
    color: var(--ocf-heading-alt);
    font-size: clamp(36px, 4.6vw, 66px);
}

.ocf-about-copy .prose { color: var(--ocf-body-alt); }
.ocf-about-copy .prose p + p { margin-top: calc(var(--ocf-grid-gap) * 0.5); }
.ocf-about-copy .prose strong { color: var(--ocf-heading-alt); }

/* List items: white check marks. */
.ocf-about-copy .prose ul { list-style: none; margin: calc(var(--ocf-grid-gap) * 0.75) 0 0; padding-left: 0; }
.ocf-about-copy .prose li { position: relative; margin: calc(var(--ocf-grid-gap) * 0.375) 0; padding-left: calc(var(--ocf-space-unit) * 2); }
.ocf-about-copy .prose li::before {
    content: '';
    position: absolute;
    top: 0.2em;
    left: 0;
    width: calc(var(--ocf-space-unit) * 1.375);
    height: calc(var(--ocf-space-unit) * 1.375);
    border-radius: 50%;
    background: var(--ocf-heading-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.3l3.6 3.4L17.5 8.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
    -webkit-mask: none;
}

.ocf-about-actions { margin-top: calc(var(--ocf-grid-gap) * 1.5); }

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

@media (max-width: 767px) {
    .ocf-about-actions { flex-direction: column; align-items: stretch; }
    .ocf-about-actions > a { width: 100%; }
}