/* ==========================================================
   VBC Framework
   Hero
   Version: 3.0.0
========================================================== */

.vbc-hero{
    position:relative;
    z-index:1;
    overflow:hidden;
    background:var(--vbc-color-white);
    min-height:560px;
    padding:0;
}

/*==========================================================
    Background Texture
==========================================================*/

.vbc-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:var(--vbc-color-white);

    z-index:1;

}

/*==========================================================
    Container
==========================================================*/

.vbc-hero .vbc-container{

    position:relative;

    z-index:10;

    min-height:560px;

    display:flex;

    align-items:flex-start;

    padding-top:18px;

}

/*==========================================================
    Left Content
==========================================================*/

.vbc-hero__content{

    width:45%;

    position:relative;

    z-index:20;

    padding:0;

    margin-top:8px;

}

.vbc-hero__eyebrow{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-bottom:22px;

    color:var(--vbc-color-accent);

    font-size:14px;

    font-weight:700;

    letter-spacing:.16em;

    text-transform:uppercase;

}

.vbc-hero__eyebrow::before{

    content:"";

    width:50px;

    height:2px;

    background:var(--vbc-color-accent);

}

.vbc-hero__title{

    margin:0 0 0;

    color:var(--vbc-color-black);

    font-size:48px;

    line-height:.92;

    font-size:50px;
font-weight:600;
letter-spacing:-1px;
line-height:.92;

    text-transform:uppercase;

    max-width:600px;

}

.vbc-hero__subtitle{

    margin:0 0 0;

    font-size:28px;

    font-weight:700;

    color:var(--vbc-color-primary);

}

.vbc-hero__description{

    margin:0 0 24px;

    max-width:500px;

    font-size:17px;

    line-height:1.75;

    color:var(--vbc-color-black);

}

/*==========================================================
    Right Image Layer
==========================================================*/

.vbc-hero__image-layer{
    position:absolute;
    top:0;
    right:-50px;
    bottom:0;
    width:57%;
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    overflow:hidden;
}

/*==========================================================
    Motorcycle Image
==========================================================*/

.vbc-hero__bike{

    position:absolute;

    top:-20px;

    right:-40px;

    height:108%;

    width:auto;

    max-width:none;

    object-fit:contain;

    z-index:2;

}

/*==========================================================
    Floating Badge
==========================================================*/

.vbc-hero__badge{
    display:none;
}

/*==========================================================
    Bike Finder
==========================================================*/

.vbc-hero__finder{

    width:100%;

    max-width:550px;

    background:var(--vbc-color-white);

    border:1px solid var(--vbc-color-primary);

    border-radius:var(--vbc-radius-xl);

    padding:18px;

    margin:0 0 20px;

    box-shadow:var(--vbc-shadow-sm);

    position:relative;

}

.vbc-hero__finder::before,
.vbc-hero__finder::after{

    content:"";

    position:absolute;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--vbc-color-accent);

    top:12px;

}

.vbc-hero__finder::before{

    left:12px;

    box-shadow:
        0 calc(100% + 16px) 0 var(--vbc-color-accent);

}

.vbc-hero__finder::after{

    right:12px;

    box-shadow:
        0 calc(100% + 16px) 0 var(--vbc-color-accent);

}

.vbc-hero__finder-header,
.vbc-hero__finder-label{

    display:block;

    margin-bottom:16px;

    font-size:14px;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:var(--vbc-color-black);
    
    padding-left:20px;

}

.vbc-hero__finder-fields{

    display:grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr))
        130px;

    gap:10px;

    align-items:center;

}

.vbc-hero__finder-fields select{

    height:48px;

    padding:0 10px;

    border:1px solid var(--vbc-color-border);

    border-radius:var(--vbc-radius-md);

    background:var(--vbc-color-white);

    font-size:13px;

    color:var(--vbc-color-heading);

    text-overflow:ellipsis;

    overflow:hidden;

    white-space:nowrap;

}

.vbc-hero__finder-fields select:focus{

    outline:none;

    border-color:var(--vbc-color-primary);

}

.vbc-hero__finder-fields button{

    width:130px;

    height:48px;

    border:none;

    border-radius:var(--vbc-radius-md);

    background:var(--vbc-color-primary);

    color:var(--vbc-color-white);

    font-size:14px;

    font-weight:700;

    letter-spacing:.05em;

    cursor:pointer;

    transition:var(--vbc-transition-normal);

}

.vbc-hero__finder-fields button:hover{

    background:var(--vbc-color-primary-dark);

}

/*==========================================================
    Features
==========================================================*/

.vbc-hero__features{

    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:stretch;
    gap:12px;

    width:100%;
    max-width:550px;

    margin:0;
    padding:0;
    list-style:none;

}

.vbc-hero__features li{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    gap:10px;

     padding:8px 8px;

    margin-top:0;

    min-height:70px;

    background:rgba(255,255,255,.55);

    border:1px solid var(--vbc-color-primary);

    border-radius:var(--vbc-radius-xl);

    text-align:center;

    backdrop-filter:blur(3px);

}

.vbc-hero__features i{

    font-size:22px;

    color:var(--vbc-color-primary);

}

.vbc-hero__features span{

   font-weight:600;
font-size:12px;
line-height:1.4;

    color:var(--vbc-color-black);

}

/*==========================================================
    Responsive
==========================================================*/

@media(max-width:1200px){

    .vbc-hero{

        min-height:auto;

    }

    .vbc-hero .vbc-container{

        min-height:auto;

    }

    .vbc-hero__content{

        width:44%;

    }

    .vbc-hero__title{

        font-size:50px;

    }

    .vbc-hero__image-layer{

        width:50vw;

        min-width:700px;

    }

}

@media(max-width:1024px){

    .vbc-hero{

        padding:0;

    }

    /*
     * .vbc-hero .vbc-container and .vbc-hero__content both carry
     * position:relative for desktop's z-index layering. Left as-is,
     * .vbc-hero__copy's position:absolute would anchor to whichever
     * of those is nearest -- landing right after the image instead
     * of on top of it, since both sit in normal flow below the
     * image at this breakpoint. Setting them back to static here
     * lets .vbc-hero__copy bubble up to .vbc-hero itself, which is
     * flush with the top of the image.
     */

    .vbc-hero .vbc-container{

        position:static;

        min-height:auto;

    }

    .vbc-hero__content{

        position:static;

    }

    /*
     * Full-bleed background image instead of the small offset photo
     * (which was sized/positioned for sitting beside desktop text,
     * not for standing alone on mobile). object-fit:cover fills the
     * box completely regardless of the source photo's aspect ratio.
     */

    .vbc-hero__image-layer{

        position:relative;

        right:0;

        width:100%;

        min-width:0;

        height:420px;

    }

    .vbc-hero__image-layer::after{

        content:"";

        position:absolute;

        inset:0;

        background:linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.15) 55%, transparent);

        z-index:3;

    }

    .vbc-hero__bike{

        position:absolute;

        inset:0;

        top:0;
        right:0;

        width:100%;

        height:100%;

        object-fit:cover;

    }

    .vbc-hero .vbc-container{

        display:block;

        padding-top:0;

    }

    .vbc-hero__content{

        width:100%;

        padding-top:0;

    }

    /*
     * The copy sits absolutely positioned over the image (anchored
     * to .vbc-hero, which is already position:relative) rather than
     * in normal flow -- it contributes zero height to the document,
     * so .vbc-hero__below (finder + features), its next sibling,
     * naturally starts right where the 420px image box ends. No
     * manual offset math needed.
     */

    .vbc-hero__copy{

        position:absolute;

        top:0;

        left:0;

        right:0;

        height:420px;

        z-index:5;

        display:flex;

        flex-direction:column;

        justify-content:flex-end;

        padding:24px;

    }

    .vbc-hero__eyebrow{

        color:var(--vbc-color-accent-light);

    }

    .vbc-hero__eyebrow::before{

        background:var(--vbc-color-accent-light);

    }

    .vbc-hero__title{

        font-size:32px;

        color:var(--vbc-color-white);

    }

    .vbc-hero__subtitle{

        font-size:20px;

        color:var(--vbc-color-accent-light);

    }

    .vbc-hero__description{

        font-size:14px;

        color:var(--vbc-color-white);

        margin-bottom:0;

    }

    .vbc-hero__below{

        display:none;

    }

    .vbc-hero__finder-fields{

        grid-template-columns:1fr;

    }

    .vbc-hero__features{

        grid-template-columns:repeat(4,minmax(0,1fr));

        gap:6px;

    }

    .vbc-hero__features li{

        min-height:0;

        padding:8px 4px;

        gap:4px;

    }

    .vbc-hero__features i{

        font-size:16px;

    }

    .vbc-hero__features span{

        font-size:9px;

        line-height:1.2;

    }

}

@media(max-width:640px){

    .vbc-hero__badge{

        width:90px;

        height:90px;

        right:20px;

        top:20px;

    }

    .vbc-hero__badge strong{

        font-size:30px;

    }

}