/* --- Our Approach CTA Section --- */
.ourapproach-cta-section {
    position: relative;
    padding: 6rem 2rem;
    overflow: hidden;

    /* Blueprint background effect (remains unchanged) */
    background-color: #0D2B4C;
    background-image:
        linear-gradient(rgba(173, 216, 230, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(173, 216, 230, 0.2) 1px, transparent 1px),
        linear-gradient(rgba(173, 216, 230, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(173, 216, 230, 0.1) 1px, transparent 1px);
    background-size:
        100px 100px,
        100px 100px,
        20px 20px,
        20px 20px;
}

/* --- Themed Container --- */
.ourapproach-cta-container {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    padding: 4rem;
    text-align: center;
    background-color: var(--opco-accent-alt); /* Cozy Cream background */
    border: 2px solid var(--opco-accent);      /* Gold border */
    box-shadow: var(--opco-shadow);             /* Global shadow style */
    border-radius: 24px;
}

/* --- Content Styling --- */
.ourapproach-cta-headline {
    /* Let h2 styles from global.css apply */
    /* We only need to set the color to contrast with the new background */
    color: var(--opco-text-main);
    /* Your global.css makes h2 uppercase, so we override that here to match the requested text */
    text-transform: none;
    margin: 0 auto 2rem auto;
    max-width: 90%;
}

/* Button styling for .ourapproach-cta-button has been removed.
   It is now handled by the .btn and .btn-primary classes from global.css.
*/


/* --- Responsive Styles for Mobile --- */
@media (max-width: 768px) {
    .ourapproach-cta-section {
        padding: 4rem 1rem;
    }

    .ourapproach-cta-container {
        padding: 2.5rem 1.5rem;
    }

    .ourapproach-cta-headline {
        /* Font size will be handled by the global h2 styles */
        max-width: 100%;
    }
}