/* ==========================================================================
   HOME — MARKETS
   ========================================================================== */

.fhm-markets{
    padding:58px 0 72px;
    background:#fff;
    color:var(--ui-ink);
}

.fhm-markets .section-heading{
    display:flex;
    margin-bottom:34px;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
}

.fhm-markets .section-title{
    margin:0 0 8px;
    color:#26333e;
    font-size:30px;
    font-weight:400;
    line-height:1.12;
}

.fhm-markets .section-lead{
    max-width:1100px;
    margin:0;
    color:#7c7f85;
    font-size:18px;
    line-height:1.55;
}

.fhm-markets .section-arrows{
    display:flex;
    gap:10px;
}

.fhm-track{
    display:flex;
    gap:26px;
    padding:4px 0 6px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
}

.fhm-track::-webkit-scrollbar{
    display:none;
}

/*
 * The later approved silhouette:
 * soft left corners + asymmetric rounded-arrow right side.
 * Mobile deliberately returns to a simple rounded card.
 */
.fhm-card{
    position:relative;
    flex:0 0 calc((100% - 52px) / 3);
    min-height:520px;
    overflow:hidden;
    border-radius:42px;
    background:#eef4f8;
    clip-path:polygon(
        0 0,
        67% 0,
        72% 1%,
        77% 4%,
        81% 9%,
        95% 37%,
        98.5% 45%,
        100% 50%,
        100% 55%,
        98% 62%,
        82% 91%,
        78% 96%,
        73% 99%,
        67% 100%,
        0 100%
    );
    scroll-snap-align:start;
    isolation:isolate;
}

.fhm-image{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.fhm-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.02);
    filter:saturate(.92) contrast(.96) brightness(1.04);
    transition:
        transform .55s ease,
        filter .55s ease;
}

.fhm-image::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:
        radial-gradient(
            ellipse at 77% 24%,
            rgba(255,255,255,.58) 0%,
            rgba(255,255,255,.16) 27%,
            rgba(255,255,255,0) 55%
        ),
        radial-gradient(
            ellipse at 84% 80%,
            rgba(3,186,240,.11) 0%,
            rgba(3,186,240,0) 48%
        ),
        linear-gradient(
            90deg,
            #f8fbfd 0%,
            rgba(248,251,253,.96) 19%,
            rgba(248,251,253,.76) 34%,
            rgba(248,251,253,.34) 50%,
            rgba(248,251,253,.07) 68%,
            transparent 82%
        );
}

.fhm-image::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    opacity:.32;
    background:
        linear-gradient(
            128deg,
            transparent 0 54%,
            rgba(255,255,255,.55) 54.15% 54.35%,
            transparent 54.5%
        ),
        linear-gradient(
            145deg,
            transparent 0 69%,
            rgba(3,186,240,.12) 69.1% 69.3%,
            transparent 69.45%
        );
}

.fhm-card:hover .fhm-image img{
    transform:scale(1.055);
    filter:saturate(.98) contrast(.99) brightness(1.05);
}

.fhm-copy{
    position:relative;
    z-index:4;
    width:58%;
    padding:68px 24px 44px 38px;
}

.fhm-copy h3{
    margin:0 0 28px;
    color:#202d37;
    font-size:30px;
    font-weight:400;
    line-height:1.16;
}

.fhm-copy .rich-text{
    color:#46535e;
    font-size:18px;
    line-height:1.6;
}

.fhm-content{
    margin-top:10px;
}

.fhm-copy .text-link{
    display:inline-flex;
    margin-top:42px;
}

@media(max-width:1380px){
    .fhm-card{
        flex-basis:calc((100% - 26px) / 2);
        clip-path:polygon(
            0 0,
            70% 0,
            76% 2%,
            81% 8%,
            96% 39%,
            100% 49%,
            100% 55%,
            96% 65%,
            82% 92%,
            76% 98%,
            70% 100%,
            0 100%
        );
    }
}

@media(max-width:900px){
    .fhm-card{
        flex-basis:82%;
        min-height:470px;
    }

    .fhm-copy{
        width:68%;
        padding:48px 24px 34px 28px;
    }
}

@media(max-width:620px){
    .fhm-markets{
        padding:42px 0 54px;
    }

    .fhm-card{
        flex-basis:92%;
        min-height:430px;
        border-radius:28px;
        clip-path:none;
    }

    .fhm-copy{
        width:76%;
        padding:36px 20px 28px;
    }

    .fhm-copy h3{
        font-size:25px;
    }

    .fhm-copy .rich-text{
        font-size:16px;
    }
}