/* vn-cta-band — closing call band
   Source: Latest mockups/corrected/index.html (.final-cta, Large)
           + mem-care/index.html (.final-cta, Standard). */

.vn-cta {
    --vn-cta-scrim: #D9EAF7;
    --vn-cta-icon: clamp(56px, 4.4vw, 85px);
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(240px, 14.1vw, 271px);
    padding: clamp(36px, 4.5vw, 80px) clamp(24px, 3.85vw, 74px);
    overflow: hidden;
    font-family: var(--vn-font-body);
    color: var(--vn-navy);
}

.vn-cta .vn-cta__bg {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    width: 56%;
    height: 100%;
    object-position: var(--vn-img-x, 50%) var(--vn-img-y, 50%);
}

/* Solid until ~52%, gone by ~64% (Standard) */
.vn-cta__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right,
        var(--vn-cta-scrim) 0%,
        var(--vn-cta-scrim) 51.73%,
        transparent 63.81%,
        transparent 100%);
}

.vn-cta__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(30px, 4vw, 90px);
    width: 75%;
}

.vn-cta .vn-cta__heading {
    max-width: 15ch;
    margin: 0 0 10px;
    font-family: var(--vn-font-display);
    font-size: clamp(1.6rem, 2vw, 2.4375rem);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.03em;
    color: var(--vn-navy);
}

.vn-cta .vn-cta__text {
    max-width: 36ch;
    margin: 0;
    font-size: clamp(1.1rem, 1.15vw, 1.375rem);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

.vn-cta__divider {
    flex: none;
    width: 3px;
    height: clamp(90px, 7.94vw, 152.5px);
    background-color: #B3D1FF;
    border-radius: 2px;
}

.vn-cta .vn-cta__phone {
    display: flex;
    align-items: center;
    gap: 16px;
    color: inherit;
    text-decoration: none;
}

a.vn-cta__phone:focus-visible { outline: 3px solid var(--vn-navy); outline-offset: 4px; }

.vn-cta__phone .vn-icon {
    width: var(--vn-cta-icon);
    color: var(--vn-navy);
}

.vn-cta__phone .vn-icon svg {
    display: block;
    width: 100%;
    height: auto;
    fill: currentColor;
}

.vn-cta__phone .vn-icon i { font-size: var(--vn-cta-icon); }

.vn-cta__phone-text { display: block; }

.vn-cta__num {
    display: block;
    font-family: var(--vn-font-display);
    font-size: clamp(1.5rem, 1.93vw, 2.3125rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.vn-cta__lines {
    display: block;
    font-size: clamp(1.05rem, 1.4vw, 1.6875rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.3;
}

/* ── Large (Home) ── */

.vn-cta-size-large .vn-cta {
    --vn-cta-icon: clamp(64px, 5.2vw, 110px);
    min-height: 260px;
    padding: clamp(40px, 5vw, 90px) clamp(24px, 4vw, 80px);
}

.vn-cta-size-large .vn-cta .vn-cta__bg { width: 51.4%; }

/* Separate scrim box 77.7% wide: solid to ~69%, clear by ~95% of its own width */
.vn-cta-size-large .vn-cta__scrim {
    right: auto;
    width: 77.7%;
    background: linear-gradient(to right,
        var(--vn-cta-scrim) 0%,
        var(--vn-cta-scrim) 69.28%,
        transparent 94.69%,
        transparent 100%);
}

.vn-cta-size-large .vn-cta__content { width: 70%; gap: clamp(30px, 4vw, 80px); }

.vn-cta-size-large .vn-cta .vn-cta__heading {
    margin-bottom: 0;
    font-size: clamp(1.8rem, 2.6vw, 3.4rem);
    letter-spacing: -0.02em;
}

.vn-cta-size-large .vn-cta .vn-cta__text {
    max-width: 34ch;
    margin-top: 10px;
    font-size: clamp(1.1rem, 1.4vw, 1.8rem);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--vn-ink);
}

.vn-cta-size-large .vn-cta__divider {
    width: 1px;
    height: auto;
    align-self: stretch;
    background-color: rgba(16, 50, 113, 0.35);
    border-radius: 0;
}

.vn-cta-size-large .vn-cta__num {
    font-size: clamp(1.9rem, 2.6vw, 3.4rem);
    letter-spacing: 0;
}

.vn-cta-size-large .vn-cta__lines {
    font-size: clamp(1.2rem, 1.5vw, 2rem);
    font-weight: 500;
    color: var(--vn-ink);
}

/* ── Slogan band (Gallery) ──
   Source: Rest of pages/Responsive/Gallery (.g-cta): #e3ecfa band 200px, "Come for the care." Lora 52px
   + script "Stay for the life." 86px, phone block, heart note, palm frond bottom-right. */

.vn-cta__note { display: flex; align-items: center; gap: min(1.5vw, 29px); }
.vn-cta__note .vn-icon { width: min(3.5vw, 67px); color: #031870; }
.vn-cta__note .vn-icon svg { display: block; width: 100%; height: auto; fill: currentColor; }
.vn-cta__note .vn-icon i { font-size: min(3.5vw, 67px); }
.vn-cta .vn-cta__note-text { margin: 0; }

.vn-cta-size-slogan .vn-cta {
    --vn-cta-icon: min(5.77vw, 110px);
    min-height: min(10.47vw, 200px);
    padding: min(0.9vw, 17px) 24px min(0.9vw, 17px) min(5.5vw, 105px);
    background-color: #E3ECFA;
}

.vn-cta-size-slogan .vn-cta__scrim { display: none; }

/* The frond sits in the bottom-right corner, cropped like the mockup */
.vn-cta-size-slogan .vn-cta .vn-cta__bg {
    top: auto;
    bottom: 0;
    width: min(9.1vw, 174px);
    height: min(9.96vw, 190px);
    object-fit: cover;
    object-position: var(--vn-img-x, 0%) var(--vn-img-y, 0%);
    opacity: 1;
}

.vn-cta-size-slogan .vn-cta__content {
    width: auto;
    flex-wrap: nowrap;
    gap: 0;
}

.vn-cta-size-slogan .vn-cta .vn-cta__heading {
    max-width: none;
    margin: 0;
    font-size: min(2.75vw, 52.5px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0;
}

.vn-cta__script {
    display: block;
    font-size: 1.645em;
    line-height: 1.1;
    color: #103271;
}

.vn-cta-size-slogan .vn-cta__divider {
    width: 2px;
    height: min(5.93vw, 113px);
    margin: 0 min(2.3vw, 44px) 0 min(3.8vw, 72px);
    background-color: #7D92B2;
    border-radius: 0;
}

.vn-cta-size-slogan .vn-cta .vn-cta__phone { gap: min(1.1vw, 21px); color: #103271; }

.vn-cta-size-slogan .vn-cta__num {
    font-family: var(--vn-font-body);
    font-size: min(2.66vw, 50.76px);
    font-weight: 400;
    letter-spacing: -0.05em;
}

.vn-cta-size-slogan .vn-cta__lines {
    font-size: min(1.68vw, 32.15px);
    font-style: normal;
    line-height: 1.105;
}

.vn-cta-size-slogan .vn-cta .vn-cta__note-text {
    max-width: min(18.6vw, 355px);
    padding-right: min(9vw, 174px);
    font-size: min(1.3vw, 24.77px);
    font-weight: 500;
    line-height: 1.33;
    letter-spacing: 0.01em;
    box-sizing: content-box;
}

/* ── Tablet: copy takes the width, photo drops back ── */

@media (max-width: 1024px) {
    .vn-cta,
    .vn-cta-size-large .vn-cta { padding: 44px 32px; }

    .vn-cta__content,
    .vn-cta-size-large .vn-cta__content { width: 100%; gap: 32px; }

    .vn-cta .vn-cta__bg { width: 60%; opacity: 0.55; }
    .vn-cta-size-large .vn-cta .vn-cta__bg { width: 62%; }

    .vn-cta__scrim,
    .vn-cta-size-large .vn-cta__scrim {
        width: 100%;
        background: linear-gradient(to right,
            var(--vn-cta-scrim) 0%,
            var(--vn-cta-scrim) 55%,
            color-mix(in srgb, var(--vn-cta-scrim) 78%, transparent) 80%,
            color-mix(in srgb, var(--vn-cta-scrim) 55%, transparent) 100%);
    }

    .vn-cta .vn-cta__heading { font-size: 1.75rem; }
    .vn-cta-size-large .vn-cta .vn-cta__heading { font-size: 1.85rem; }

    /* Slogan band: three blocks that wrap, frond stays small in the corner */
    .vn-cta-size-slogan .vn-cta { --vn-cta-icon: 60px; min-height: 0; padding: 36px 32px; }
    .vn-cta-size-slogan .vn-cta .vn-cta__bg { width: 96px; height: 105px; opacity: 1; }
    .vn-cta-size-slogan .vn-cta__content { width: 100%; flex-wrap: wrap; justify-content: space-between; gap: 24px 32px; }
    .vn-cta-size-slogan .vn-cta__divider { display: none; }
    .vn-cta-size-slogan .vn-cta .vn-cta__heading { font-size: clamp(1.9rem, 4.4vw, 2.6rem); }
    .vn-cta-size-slogan .vn-cta__script { font-size: 1.5em; line-height: 1; }
    .vn-cta-size-slogan .vn-cta .vn-cta__phone { gap: 14px; }
    .vn-cta-size-slogan .vn-cta__num { font-size: clamp(1.6rem, 3.4vw, 2.1rem); }
    .vn-cta-size-slogan .vn-cta__lines { margin-top: 4px; font-size: clamp(1rem, 1.9vw, 1.2rem); line-height: 1.3; }
    .vn-cta-size-slogan .vn-cta__note { gap: 12px; position: relative; z-index: 1; }
    .vn-cta-size-slogan .vn-cta__note .vn-icon { width: 40px; }
    .vn-cta-size-slogan .vn-cta .vn-cta__note-text { max-width: none; padding-right: 96px; font-size: clamp(0.95rem, 1.7vw, 1.1rem); line-height: 1.35; }
    .vn-cta .vn-cta__text,
    .vn-cta-size-large .vn-cta .vn-cta__text { font-size: 1.05rem; }
    .vn-cta__divider { height: 110px; }
}

@media (max-width: 767px) {
    .vn-cta,
    .vn-cta-size-large .vn-cta { padding: 36px 22px 44px; }

    .vn-cta .vn-cta__bg,
    .vn-cta-size-large .vn-cta .vn-cta__bg { width: 100%; opacity: 0.3; }

    .vn-cta__scrim,
    .vn-cta-size-large .vn-cta__scrim { background: color-mix(in srgb, var(--vn-cta-scrim) 92%, transparent); }

    .vn-cta__content,
    .vn-cta-size-large .vn-cta__content {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .vn-cta__divider,
    .vn-cta-size-large .vn-cta__divider { display: none; }

    .vn-cta,
    .vn-cta-size-large .vn-cta { --vn-cta-icon: 56px; }

    .vn-cta__num { font-size: 1.6rem; }
    .vn-cta-size-large .vn-cta__num { font-size: 1.7rem; }

    .vn-cta-size-slogan .vn-cta { padding: 32px 20px 36px; }
    .vn-cta-size-slogan .vn-cta .vn-cta__bg { display: none; }
    .vn-cta-size-slogan .vn-cta__content { flex-direction: column; align-items: flex-start; gap: 22px; }
    .vn-cta-size-slogan .vn-cta .vn-cta__note-text { padding-right: 0; }
    .vn-cta__lines,
    .vn-cta-size-large .vn-cta__lines { font-size: 1.05rem; }
}

@media (max-width: 480px) {
    .vn-cta .vn-cta__heading { font-size: 1.5rem; }
    .vn-cta-size-large .vn-cta .vn-cta__heading { font-size: 1.55rem; }
    .vn-cta .vn-cta__phone { gap: 12px; }
    .vn-cta__num { font-size: 1.4rem; }
    .vn-cta-size-large .vn-cta__num { font-size: 1.45rem; }
}