/* Bus World homepage Fleet Comparison section. */
.bw-fleet-comparison{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    padding:var(--bw-fc-desktop-top,62px) 0 var(--bw-fc-desktop-bottom,56px);
    background:#fdf7f0;
    color:#111;
    font-family:var(--font-interface);
}

.bw-fleet-comparison__container{
    position:relative;
    z-index:1;
}

.bw-fleet-comparison__header{
    max-width:1120px;
    margin:0 auto;
    text-align:center;
}

.bw-fleet-comparison__motif{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0;
    width:150px;
    margin:0 auto 20px;
    color:#F30101;
}

.bw-fleet-comparison__motif span{
    width:58px;
    height:1px;
    background:currentColor;
    opacity:.48;
}

.bw-fleet-comparison__motif i{
    width:18px;
    height:18px;
    display:block;
    border:2px solid currentColor;
    transform:rotate(45deg);
    position:relative;
}

.bw-fleet-comparison__motif i::after{
    content:"";
    position:absolute;
    inset:4px;
    border:1px solid currentColor;
}

.bw-fleet-comparison__title{
    margin:0;
    font-family:var(--font-display);
    font-size:clamp(42px,4.35vw,70px);
    font-weight:600;
    line-height:1.02;
    letter-spacing:-.035em;
    text-wrap:balance;
}

.bw-fleet-comparison__title-rule{
    width:118px;
    height:1px;
    display:block;
    margin:24px auto 0;
    background:linear-gradient(90deg,transparent 0 35%,#F30101 35% 65%,transparent 65% 100%);
    position:relative;
}

.bw-fleet-comparison__title-rule::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:7px;
    height:7px;
    background:#F30101;
    transform:translate(-50%,-50%) rotate(45deg);
}

.bw-fleet-comparison__paragraph{
    max-width:840px;
    margin:22px auto 0;
    color:rgba(0,0,0,.7);
    font-size:clamp(15px,1.1vw,19px);
    line-height:1.6;
}

.bw-fleet-comparison__selector-wrap{
    margin-top:42px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
}

.bw-fleet-comparison__selector-wrap::-webkit-scrollbar{display:none}

.bw-fleet-comparison__selector{
    position:relative;
    min-width:760px;
    display:grid;
    grid-template-columns:repeat(5,minmax(120px,1fr));
    align-items:start;
    padding:0 8px;
}

.bw-fleet-comparison__connector{
    position:absolute;
    left:10%;
    right:10%;
    top:15px;
    height:1px;
    background:rgba(0,0,0,.28);
}

.bw-fleet-comparison__selector-item{
    position:relative;
    z-index:1;
    display:grid;
    justify-items:center;
    gap:16px;
}

.bw-fleet-comparison__point{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    padding:0;
    border:1.5px solid rgba(0,0,0,.34);
    border-radius:50%;
    background:#fff;
    color:#F30101;
    cursor:pointer;
    transition:border-color 180ms ease,box-shadow 180ms ease,transform 180ms ease;
}

.bw-fleet-comparison__point span{
    width:14px;
    height:14px;
    border-radius:50%;
    background:transparent;
    transition:background-color 180ms ease,transform 180ms ease;
}

.bw-fleet-comparison__point:hover{transform:translateY(-1px)}

.bw-fleet-comparison__point:focus-visible,
.bw-fleet-comparison__capacity:focus-visible,
.bw-fleet-comparison__link:focus-visible,
.bw-fleet-comparison__cta:focus-visible{
    outline:3px solid #F30101;
    outline-offset:4px;
}

.bw-fleet-comparison__selector-item.is-active .bw-fleet-comparison__point{
    border-color:#F30101;
    box-shadow:0 0 0 4px rgba(243,1,1,.08);
}

.bw-fleet-comparison__selector-item.is-active .bw-fleet-comparison__point span{
    background:#F30101;
    transform:scale(.95);
}

.bw-fleet-comparison__capacity{
    position:relative;
    min-height:50px;
    display:inline-flex;
    align-items:flex-start;
    justify-content:center;
    padding:0 8px 14px;
    color:#111;
    font-family:var(--font-display);
    font-size:clamp(29px,2.45vw,42px);
    font-weight:600;
    line-height:1;
    text-decoration:none;
    white-space:nowrap;
}

.bw-fleet-comparison__capacity::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:0;
    height:3px;
    background:#F30101;
    transform:translateX(-50%);
    transition:width 180ms ease;
}

.bw-fleet-comparison__selector-item.is-active .bw-fleet-comparison__capacity{
    color:#F30101;
}

.bw-fleet-comparison__selector-item.is-active .bw-fleet-comparison__capacity::after{
    width:72px;
}

.bw-fleet-comparison__vehicles{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:end;
    gap:clamp(14px,1.6vw,26px);
    margin:26px 0 0;
    padding:0;
    list-style:none;
}

.bw-fleet-comparison__item{
    min-width:0;
    text-align:center;
}

.bw-fleet-comparison__link{
    display:grid;
    grid-template-rows:var(--bw-fc-image-height-desktop,155px) auto auto;
    align-items:end;
    min-width:0;
    color:#111;
    text-decoration:none;
}

.bw-fleet-comparison__media{
    height:var(--bw-fc-image-height-desktop,155px);
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
}

.bw-fleet-comparison__picture,
.bw-fleet-comparison__picture img{
    width:100%;
    height:100%;
    display:block;
}

.bw-fleet-comparison__picture img{
    object-fit:contain;
    object-position:var(--bw-fc-object-position,center center);
    filter:saturate(.98) contrast(1.02);
    transform:scale(1);
    transition:transform 220ms ease,filter 220ms ease,opacity 220ms ease;
}

.bw-fleet-comparison__vehicle-title{
    display:block;
    margin-top:14px;
    font-family:var(--font-display);
    font-size:clamp(18px,1.42vw,25px);
    font-weight:600;
    line-height:1.12;
    transition:color 180ms ease;
}

.bw-fleet-comparison__description{
    display:block;
    margin-top:8px;
    color:rgba(0,0,0,.62);
    font-size:clamp(12px,.82vw,14px);
    line-height:1.45;
}

.bw-fleet-comparison__item:not(.is-active) .bw-fleet-comparison__picture img{
    opacity:.9;
}

.bw-fleet-comparison__item.is-active .bw-fleet-comparison__picture img{
    transform:scale(1.012);
    filter:saturate(1) contrast(1.04);
}

.bw-fleet-comparison__item.is-active .bw-fleet-comparison__vehicle-title{
    color:#F30101;
}

.bw-fleet-comparison__link:hover .bw-fleet-comparison__picture img{
    transform:scale(1.012);
}

.bw-fleet-comparison__cta{
    width:min(100%,360px);
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin:34px auto 0;
    padding:14px 28px;
    border:1px solid #F30101;
    border-radius:4px;
    background:#F30101;
    color:#fff;
    box-shadow:0 10px 22px rgba(243,1,1,.13);
    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
    line-height:1;
    text-decoration:none;
    text-transform:uppercase;
    transition:background-color 180ms ease,transform 180ms ease,box-shadow 180ms ease;
}

.bw-fleet-comparison__cta svg{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform 180ms ease;
}

.bw-fleet-comparison__cta:hover{
    background:#d90000;
    transform:translateY(-1px);
    box-shadow:0 12px 24px rgba(243,1,1,.18);
}

.bw-fleet-comparison__cta:hover svg{transform:translateX(4px)}

.bw-fleet-comparison__skyline{
    width:100%;
    height:auto;
    display:block;
    margin:22px 0 calc(var(--bw-fc-desktop-bottom,56px) * -1);
    opacity:.2;
    pointer-events:none;
    user-select:none;
}

@media (min-width:1200px){
    .bw-fleet-comparison{max-height:var(--bw-fc-desktop-max-height,820px)}
}

@media (max-width:1199px){
    .bw-fleet-comparison{
        padding-top:var(--bw-fc-tablet-top,58px);
        padding-bottom:var(--bw-fc-tablet-bottom,58px);
    }

    .bw-fleet-comparison__title{font-size:clamp(40px,5.4vw,60px)}
    .bw-fleet-comparison__selector-wrap{margin-top:36px}
    .bw-fleet-comparison__vehicles{
        grid-template-columns:repeat(3,minmax(0,1fr));
        align-items:start;
        row-gap:28px;
    }
    .bw-fleet-comparison__link{
        grid-template-rows:var(--bw-fc-image-height-tablet,140px) auto auto;
    }
    .bw-fleet-comparison__media{height:var(--bw-fc-image-height-tablet,140px)}
}

@media (max-width:767px){
    .bw-fleet-comparison{
        padding-top:var(--bw-fc-mobile-top,52px);
        padding-bottom:var(--bw-fc-mobile-bottom,52px);
    }

    .bw-fleet-comparison__motif{margin-bottom:17px}
    .bw-fleet-comparison__title{font-size:clamp(36px,10vw,48px)}
    .bw-fleet-comparison__title-rule{margin-top:18px}
    .bw-fleet-comparison__paragraph{
        margin-top:18px;
        font-size:16px;
    }

    .bw-fleet-comparison__selector-wrap{
        margin-inline:calc(var(--site-gutter) * -1);
        padding-inline:var(--site-gutter);
        margin-top:30px;
    }

    .bw-fleet-comparison__selector{
        min-width:660px;
        grid-template-columns:repeat(5,132px);
    }

    .bw-fleet-comparison__capacity{font-size:28px}

    .bw-fleet-comparison__vehicles{
        display:flex;
        gap:16px;
        margin-inline:calc(var(--site-gutter) * -1);
        padding:0 var(--site-gutter) 8px;
        overflow-x:auto;
        overflow-y:hidden;
        scroll-snap-type:x mandatory;
        scrollbar-width:none;
        overscroll-behavior-inline:contain;
    }

    .bw-fleet-comparison__vehicles::-webkit-scrollbar{display:none}

    .bw-fleet-comparison__item{
        flex:0 0 min(82vw,360px);
        scroll-snap-align:center;
    }

    .bw-fleet-comparison__link{
        grid-template-rows:var(--bw-fc-image-height-mobile,150px) auto auto;
    }

    .bw-fleet-comparison__media{height:var(--bw-fc-image-height-mobile,150px)}
    .bw-fleet-comparison__vehicle-title{font-size:24px}
    .bw-fleet-comparison__description{font-size:14px}
    .bw-fleet-comparison__cta{width:100%;margin-top:28px}
    .bw-fleet-comparison__skyline{margin-top:18px;opacity:.15}
}

@media (max-width:390px){
    .bw-fleet-comparison__title{font-size:clamp(34px,9.8vw,40px)}
    .bw-fleet-comparison__item{flex-basis:86vw}
}

@media (prefers-reduced-motion:reduce){
    .bw-fleet-comparison *,
    .bw-fleet-comparison *::before,
    .bw-fleet-comparison *::after{
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important;
    }
}