.cta-section {
    box-sizing: border-box;
    padding: 96px 40px 64px;
    background: #023A85;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.cta-section__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.cta-section__title {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 88px;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #FFFFFF;
}

.cta-section__divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
}

.cta-circle {
    flex-shrink: 0;
    box-sizing: border-box;
    width: 236px;
    height: 236px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    transition: transform 0.35s ease, background-color 0.35s ease;
}

.cta-circle__icon {
    display: inline-block;
    width: 48px;
    height: 48px;
    background-color: #FFFFFF;
    -webkit-mask-image: url('../assets/images/arrow_long_right.svg');
    mask-image: url('../assets/images/arrow_long_right.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: transform 0.35s ease;
}

.cta-circle__label {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.48;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    color: #FFFFFF;
}

.cta-circle:hover {
    transform: scale(1.08);
    background: rgba(255, 255, 255, 0.12);
}

.cta-circle:hover .cta-circle__icon {
    transform: translate(4px, -4px);
}

/* Light variant — same markup, inverted colors (used on the About page,
   where cta-section sits on white below content rather than as home's
   standalone dark block). */
.cta-section--light {
    background: #FFFFFF;
}

.cta-section--light .cta-section__title {
    color: #023A85;
}

.cta-section--light .cta-section__divider {
    background: rgba(2, 58, 133, 0.3);
}

.cta-circle--light {
    border-color: #023A85;
}

.cta-circle--light .cta-circle__icon {
    background-color: #023A85;
}

.cta-circle--light .cta-circle__label {
    color: #023A85;
}

.cta-circle--light:hover {
    background: rgba(2, 58, 133, 0.08);
}

.cta-followup {
    box-sizing: border-box;
    padding: 64px 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.cta-followup__text {
    margin: 0;
    max-width: 672px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: -0.06em;
    color: #023A85;
}

.cta-followup__buttons {
    display: flex;
    gap: 16px;
}

.btn {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding: 16px 24px;
    border-radius: 40px;
    border: 1px solid #023A85;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.06em;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn--filled {
    background: #023A85;
    color: #FFFFFF;
}

.btn--filled:hover {
    background: #012a63;
}

.btn--outline {
    background: transparent;
    color: #023A85;
}

.btn--outline:hover {
    background: #023A85;
    color: #FFFFFF;
}

@media (max-width: 768px) {
    .cta-section {
        padding: 64px 24px 0;
        gap: 40px;
    }

    /* flex-wrap alone left both the title and circle pinned to the start
       of the main axis (nothing to "space-between" once each is on its
       own wrapped line) — a huge block of empty blue space sat to the
       circle's right instead of it reading as its own centered element.
       An explicit column direction is what actually gives each one its
       own row. */
    .cta-section__row {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .cta-section__title {
        font-size: 40px;
        text-align: center;
    }

    .cta-circle {
        width: 160px;
        height: 160px;
    }

    .cta-followup {
        padding: 40px 24px;
    }
}

@media (max-width: 480px) {
    .cta-section__title {
        font-size: 32px;
    }

    .cta-circle {
        width: 140px;
        height: 140px;
    }
}