/* Image + Text — two-column photo/copy section, reversible order. */
.imagetext { background: var(--brand-white); padding: 80px 0; }
.imagetext-grid { display: flex; align-items: center; gap: 72px; }
.imagetext-reverse .imagetext-grid { flex-direction: row-reverse; }
.imagetext-img { flex: 0 0 45%; max-width: 45%; border-radius: 20px; overflow: hidden; }
.imagetext-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imagetext-text, .imagetext-text * { min-width: 0; }
.imagetext-text { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.imagetext-text p { font-family: var(--font-body); font-size: 16px; line-height: 24px; color: var(--brand-dark-grey); margin: 0; }
.imagetext-text strong { color: var(--brand-dark-grey); }
.imagetext-text a { color: var(--brand-teal); text-decoration: underline; }
/* Rich-text content (WYSIWYG) can include its own <ul> — style it like the
   site's .dash-list so admin-authored lists still match the brand look. */
.imagetext-text ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.imagetext-text ul li {
    position: relative;
    padding-left: 20px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    color: var(--brand-dark-grey);
}
.imagetext-text ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 10px;
    height: 2px;
    background: var(--brand-teal);
}

@media (max-width: 991.98px) {
    .imagetext-grid, .imagetext-reverse .imagetext-grid { flex-direction: column; }
    .imagetext-img { max-width: 100%; flex: none; width: 100%; }
}

@media (max-width: 767.98px) {
    .imagetext { padding: 56px 0; }
}