/* Values V5 — Why Choose Us numbered stacked list */
.vls.v5 {
    --mn-t: 61.56rem;
    /* Heading (h4 → fnt_t-1) — mixed case, lh 0.9 */
    --fnt-t-1-tt: none;
    --fnt-t-1-lh: 0.9;

    /* Card title (fnt_t-co) — mixed case, lh 0.9 (defaults: uppercase, lh 1) */
    --fnt-t-co-tt: none;
    --fnt-t-co-lh: 0.9;

    /* Card chrome — Figma 10px radius (applied selectively below) */
    --bdr-rds-crd: 0.556rem;

    /* Background photo at full strength (override the site-wide 20% bg dim),
       with a white top-down gradient so the heading stays legible over it. */
    &.bg-image { --img-bg-o: 1; }

    &:first-child { z-index: 1;}

    .bg { z-index: 0; }

    &::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(180deg, #FFF 11.03%, rgba(255, 255, 255, 0.88) 27.17%, rgba(255, 255, 255, 0.00) 80.82%);
    }

    /* Keep content (header + cards) above the image, gradient, and wave */
    > .mn_tn { z-index: 3 !important; }

    /* Bottom wave transition into the (dark) module below. Absolutely pinned to the
       section's bottom edge and layered behind the cards (but above the bg photo +
       gradient) so it rides up behind the content; its flat base meets the next module. */
    .vls-v5-btm-deco {
        position: absolute;
        left: 0;
        bottom: -1px;
        z-index: 2;
        display: block;
        width: 100%;
        height: auto;
    }

    /* Stacked list — Figma 1188px max width, centered, 4px gap between cards */
    ul {
        gap: 0.222rem;
        counter-reset: vls-v5-num;

        li {
            /* Waves decoration below the number (replaces the crown that sat above) */
            svg {
                width: 5rem;
                height: auto;
                margin-top: 0.444rem;
                color: var(--text-color);
            }
        }
    }

    /* Connected-stack radius: only outer corners rounded */
    ul > li { border-radius: 0; counter-increment: vls-v5-num; }
    ul > li:first-child { border-radius: var(--bdr-rds-crd) var(--bdr-rds-crd) 0 0; }
    ul > li:last-child  { border-radius: 0 0 var(--bdr-rds-crd) var(--bdr-rds-crd); }

    /* Number column → title gap — Figma 52px */
    .vls-v5-itm > .f_gp { --flx-gap: 2.89rem; }

    /* Number text — Figma 68px Bayon, color yellow (resolves via dark scope --accent).
       Number rendered via CSS counter (decimal-leading-zero → "01", "02", ...). */
    .vls-v5-num {
        font-family: var(--fnt-t);
        font-size: 3.78rem;
        font-weight: 400;
        line-height: 1;
        color: var(--accent);
    }
    .vls-v5-num::before { content: counter(vls-v5-num, decimal-leading-zero); }

    @media screen and (min-width: 1280px) {
        /* Card padding override — Figma 42px 40px */
        .vls-v5-itm > .pd_v.pd_h { padding: 2.33rem 2.22rem; }
    }
}