/* ==========================================================
   FINSEARCH PUBLIC HERO
   Shark Search Atlas
   ========================================================== */

#finsearch-public-hero {

    position:
        relative;

    isolation:
        isolate;

    width:
        100%;

    height:
        380px;

    min-height:
        380px;

    margin:
        0;

    padding:
        0;

    overflow:
        hidden;

    background:
        #0A2635;

    font-family:
        "Manrope",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}


#finsearch-public-hero
.fs-public-hero-image {

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    object-position:
        center center;

}


/*
 * Two restrained overlays:
 * one establishes text contrast,
 * the second keeps the photography natural.
 */

#finsearch-public-hero::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    background:
        linear-gradient(
            90deg,
            rgba(3, 24, 36, .78) 0%,
            rgba(3, 24, 36, .62) 34%,
            rgba(3, 24, 36, .26) 68%,
            rgba(3, 24, 36, .18) 100%
        );

}


#finsearch-public-hero::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    background:
        linear-gradient(
            180deg,
            rgba(3, 20, 31, .48) 0%,
            rgba(3, 20, 31, .25) 16%,
            rgba(3, 20, 31, .10) 34%,
            rgba(3, 20, 31, .18) 100%
        );

}


#finsearch-public-hero
.fs-public-hero-inner {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    width:
        min(100%, 1380px);

    height:
        100%;

    margin:
        0 auto;

    padding:
        0 76px;

}


#finsearch-public-hero
.fs-public-hero-eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    margin:
        0 0 17px;

    color:
        rgba(255,255,255,.86);

    font-size:
        10.5px;

    line-height:
        1;

    font-weight:
        700;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;

}


#finsearch-public-hero
.fs-public-hero-eyebrow::before {

    content:
        "";

    display:
        block;

    width:
        28px;

    height:
        1px;

    flex:
        0 0 28px;

    background:
        #79D0EE;

}


#finsearch-public-hero
.fs-public-hero-title {

    max-width:
        720px;

    margin:
        0;

    padding:
        0;

    color:
        #FFFFFF;

    font-size:
        clamp(
            42px,
            4.1vw,
            58px
        );

    line-height:
        .98;

    font-weight:
        600;

    letter-spacing:
        -.045em;

}


#finsearch-public-hero
.fs-public-hero-copy {

    max-width:
        650px;

    margin:
        20px 0 0;

    padding:
        0;

    color:
        rgba(255,255,255,.88);

    font-size:
        clamp(
            16px,
            1.3vw,
            19px
        );

    line-height:
        1.5;

    font-weight:
        400;

    letter-spacing:
        -.01em;

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1050px) {

    #finsearch-public-hero {

        height:
            340px;

        min-height:
            340px;

    }


    #finsearch-public-hero
    .fs-public-hero-inner {

        padding:
            0 42px;

    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    #finsearch-public-hero {

        height:
            285px;

        min-height:
            285px;

    }


    #finsearch-public-hero::before {

        background:
            rgba(3, 24, 36, .58);

    }


    #finsearch-public-hero
    .fs-public-hero-inner {

        padding:
            0 25px;

    }


    #finsearch-public-hero
    .fs-public-hero-eyebrow {

        margin-bottom:
            14px;

        font-size:
            9.5px;

    }


    #finsearch-public-hero
    .fs-public-hero-title {

        font-size:
            clamp(
                38px,
                11vw,
                48px
            );

    }


    #finsearch-public-hero
    .fs-public-hero-copy {

        max-width:
            520px;

        margin-top:
            15px;

        font-size:
            15.5px;

        line-height:
            1.45;

    }

}


@media (max-width: 440px) {

    #finsearch-public-hero
    .fs-public-hero-inner {

        padding-left:
            22px;

        padding-right:
            22px;

    }

}