.m27_title_text_split {
    background: #d9d9d9;
    color: #353434;
    padding: 110px 0;
}

.m27_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.m27_title {
    margin: 0 0 1rem;
    font-family: 'Nexa-Black-Italic', 'Nexa', system-ui, sans-serif;
    font-style: italic;
    font-weight: 900;
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.05;
    color: #353434;
    text-transform: uppercase;
}

.m27_title em,
.m27_title .m27_title_accent {
    color: #6b6b6b;
    font-style: italic;
}

.m27_topline {
    margin: 0 0 .8em;
    font-family: 'Nexa-Black-Italic', 'Nexa', system-ui, sans-serif;
    font-style: italic;
    font-size: clamp(16px, 1.4vw, 22px);
    line-height: 1.2;
    color: #6b6b6b;
    text-transform: uppercase;
}

.m27_topline--bottom {
    margin: 0.4em 0 0;
}

.m27_text {
    font-family: 'Nexa-Regular', 'Nexa', system-ui, sans-serif;
    font-weight: 400;
    color: #6b6b6b;
}

/* Lead paragraph (first) — 22px / 30px line-height per Figma 57:86 */
.m27_text p:first-child {
    font-size: 22px;
    line-height: 30px;
    margin: 0 0 30px;
}

/* Subsequent paragraphs — 17px / 30px line-height */
.m27_text p {
    font-size: 17px;
    line-height: 30px;
    margin: 0 0 1.2em;
}

.m27_text p:last-child { margin-bottom: 0; }

.m27_text strong { color: #353434; font-weight: 400; }

/* m27 CTAs use the shared .showm_cta classes (primary-dark on light bg).
   See BLUEtheWEB-child/style.css → showm_render_cta() in functions.php. */
.m27_ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

@media (max-width: 1100px) {
    .m27_grid { gap: 48px; }
}

@media (max-width: 768px) {
    .m27_title_text_split { padding: 60px 0; }
    .m27_grid { grid-template-columns: 1fr; gap: 32px; }
    .m27_title { font-size: clamp(28px, 7vw, 40px); }
    .m27_text p:first-child { font-size: 19px; line-height: 28px; }
}