:root{
    --red:#c81010;
    --red2:#ef2525;
    --black:#090909;
    --dark:#121212;
    --grey:#707070;
    --light:#f4f4f4;
    --white:#fff;
    --line:rgba(255,255,255,.14);
    --heading:'Barlow Condensed',sans-serif;
    --body:'Inter',sans-serif
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    font-family:var(--body);
    background:var(--black);
    color:#fff;
    overflow-x:hidden
}
a{
    text-decoration:none;
    color:inherit
}
button{
    font:inherit
}
.container{
    width:min(1280px,92%);
    margin:auto
}
.eyebrow{
    color:var(--red);
    font-size:11px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:14px
}
.title{
    font:800 clamp(48px,6vw,90px)/.88 var(--heading);
    text-transform:uppercase;
    letter-spacing:-1px
}
.title span{
    color:var(--red)
}
.lead{
    color:#9e9e9e;
    line-height:1.8;
    max-width:620px;
    margin-top:20px
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:15px 24px;
    border:1px solid transparent;
    cursor:pointer;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.4px;
    text-transform:uppercase;
    transition:.3s
}
.btn-red{
    background:var(--red);
    color:#fff
}
.btn-red:hover{
    background:#fff;
    color:#000;
    transform:translateY(-3px)
}
.btn-outline{
    border-color:rgba(255,255,255,.45);
    background:transparent;
    color:#fff
}
.btn-outline:hover{
    background:#fff;
    color:#000
}
.progress{
    position:fixed;
    top:0;
    left:0;
    height:4px;
    background:var(--red);
    width:0;
    z-index:9999
}

/* nav */
header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:110px;
    z-index:1000;
    transition:.35s
}
header.scrolled{
    height:100px;
    background:rgba(9,9,9,.94);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line)
}
.nav{
    height:100%;
    width:min(1400px,94%);
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between
}
.brand{
    display:flex;
    align-items:center;
    gap:12px
}
.brand img{
    width:60px;
    height:60px;
    border-radius:50%;
    object-fit:cover;
    background:#fff
}
.brand b{
    font:800 32px var(--heading);
    letter-spacing:1px;
    text-transform:uppercase
}
.brand b span{
    color:var(--red)
}
.menu{
    display:flex;
    gap:30px;
    align-items:center
}
.menu a{
    font-size:16px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:#ddd
}
.menu a:hover{
    color:var(--red)
}
.nav-actions{
    display:flex;
    gap:10px;
    align-items:center
}
.hamb{
    display:none;
    background:none;
    border:0;
    color:#fff;
    font-size:23px
}

/* hero */
.hero{
    height:100vh;
    min-height:720px;
    background:#000
}
.hero .swiper,.hero .swiper-wrapper,.hero .swiper-slide{
    height:100%
}
.slide{
    height:100%;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden
}
.slide-bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    transform:scale(1.1);
    transition:transform 7s ease
}
.swiper-slide-active .slide-bg{
    transform:scale(1)
}
.slide:before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(0,0,0,.93),rgba(0,0,0,.62) 23%,rgba(0,0,0,.1)),linear-gradient(0deg,#090909,transparent 35%);
    z-index:1
}
.hero-content{
    position:relative;
    z-index:2;
    width:min(1400px,92%);
    margin:auto;
    padding-top:90px
}
.slide-tag{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--red2);
    font-size:11px;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase
}
.slide-tag:before{
    content:"";
    width:42px;
    height:2px;
    background:var(--red)
}
.slide h1,.slide h2{
    font:600 clamp(35px,10vw,85px)/.76 var(--heading);
    letter-spacing:-1px;
    text-transform:uppercase;
    max-width:950px;
    margin:22px 0 28px
}
.slide h1 span,.slide h2 span{
    color:var(--red)
}
.slide p{
    max-width:560px;
    color:#d0d0d0;
    line-height:1.8
}
.slide-buttons{
    display:flex;
    gap:14px;
    margin-top:34px
}
.slide-tag,.slide h1,.slide h2,.slide p,.slide-buttons{
    opacity:0;
    transform:translateY(35px);
    transition:opacity .8s,transform .8s
}
.swiper-slide-active .slide-tag{
    opacity:1;
    transform:none;
    transition-delay:.25s
}
.swiper-slide-active h1,.swiper-slide-active h2{
    opacity:1;
    transform:none;
    transition-delay:.4s
}
.swiper-slide-active p{
    opacity:1;
    transform:none;
    transition-delay:.58s
}
.swiper-slide-active .slide-buttons{
    opacity:1;
    transform:none;
    transition-delay:.75s
}
.swiper-pagination{
    bottom:34px!important;
    text-align:right;
    padding-right:7%
}
.swiper-pagination-bullet{
    width:28px;
    height:3px;
    border-radius:0;
    background:#fff;
    opacity:.35
}
.swiper-pagination-bullet-active{
    background:var(--red);
    opacity:1
}
.hero-number{
    position:absolute;
    z-index:5;
    right:7%;
    bottom:78px;
    font:700 20px var(--heading);
    letter-spacing:2px
}
.hero-number b{
    font-size:52px;
    color:var(--red);
    vertical-align:middle
}
.swiper-button-next,.swiper-button-prev{
    color:#fff!important;
    border:1px solid rgba(255,255,255,.3);
    width:48px!important;
    height:48px!important
}
.swiper-button-next:after,.swiper-button-prev:after{
    font-size:15px!important
}
.swiper-button-next:hover,.swiper-button-prev:hover{
    background:var(--red);
    border-color:var(--red)
}

/* range */
.range{
    background:#f5f5f5;
    color:#111;
    padding:110px 0
}
.range-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;
    margin-bottom:45px
}
.range-cards{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:1px;
    background:#ddd
}
.range-card{
    position:relative;
    min-height:360px;
    background:#fff;
    overflow:hidden;
    padding:28px;
    display:flex;
    flex-direction:column;
    justify-content:end;
    cursor:pointer
}
.range-card img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(1);
    transition:.6s
}
.range-card:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(transparent 35%,rgba(0,0,0,.85));
    transition:.4s
}
.range-card:hover img{
    transform:scale(1.08);
    filter:grayscale(0)
}
.range-card .rc{
    position:relative;
    z-index:2
}
.range-card small{
    color:#ddd;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:9px
}
.range-card h3{
    font:800 35px var(--heading);
    text-transform:uppercase;
    color:#fff;
    margin-top:8px
}
.range-card i{
    position:absolute;
    z-index:2;
    right:22px;
    bottom:31px;
    color:#fff;
    transition:.3s
}
.range-card:hover i{
    color:var(--red);
    transform:translateX(6px)
}

/* showcase */
.showcase{
    padding:120px 0;
    background:#0d0d0d
}
.showcase-intro{
    margin-bottom:70px
}
.vehicle-show{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    min-height:610px;
    background:#151515;
    overflow:hidden
}
.vehicle-visual{
    position:relative;
    min-height:500px;
    overflow:hidden
}
.vehicle-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:contrast(1.05)
}
.vehicle-no{
    position:absolute;
    left:35px;
    top:20px;
    font:900 130px var(--heading);
    color:rgba(255,255,255,.1);
    z-index:1
}
.vehicle-copy{
    padding:80px 7%;
    display:flex;
    flex-direction:column;
    justify-content:center
}
.vehicle-copy .num{
    color:var(--red);
    font:800 18px var(--heading);
    letter-spacing:2px
}
.vehicle-copy h2{
    font:900 clamp(60px,7vw,110px)/.8 var(--heading);
    text-transform:uppercase;
    margin:18px 0
}
.vehicle-copy p{
    color:#aaa;
    line-height:1.8
}
.specs{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    margin:38px 0
}
.spec{
    padding:18px 12px;
    border-right:1px solid var(--line)
}
.spec:last-child{
    border:0
}
.spec small{
    color:#777;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:1.5px
}
.spec b{
    display:block;
    font:700 22px var(--heading);
    text-transform:uppercase;
    margin-top:6px
}
.showcase-tabs{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-top:26px
}
.showcase-tabs button{
    background:none;
    border:0;
    color:#777;
    font:700 14px var(--heading);
    letter-spacing:1px;
    text-transform:uppercase;
    cursor:pointer
}
.showcase-tabs button.active,.showcase-tabs button:hover{
    color:#fff
}
.showcase-tabs button.active:after{
    content:"";
    display:block;
    width:28px;
    height:2px;
    background:var(--red);
    margin-top:7px
}

/* finder */
.finder{
    padding:115px 0;
    background:linear-gradient(120deg,#161616,#080808)
}
.finder-grid{
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:60px;
    align-items:center
}
.finder-choices{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px
}
.choice{
    background:#151515;
    border:1px solid var(--line);
    color:#fff;
    padding:27px;
    text-align:left;
    cursor:pointer;
    transition:.3s
}
.choice:hover,.choice.active{
    background:var(--red);
    transform:translateY(-4px)
}
.choice i{
    font-size:24px;
    margin-bottom:22px
}
.choice b{
    display:block;
    font:800 26px var(--heading);
    text-transform:uppercase
}
.match{
    background:#fff;
    color:#111;
    padding:55px;
    min-height:390px;
    display:flex;
    flex-direction:column;
    justify-content:center
}
.match small{
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#777
}
.match h3{
    font:900 clamp(55px,6vw,90px)/.82 var(--heading);
    text-transform:uppercase;
    margin:18px 0
}
.match h3 span{
    color:var(--red)
}
.match p{
    color:#777;
    line-height:1.8;
    margin-bottom:25px
}

/* applications */
.apps{
    padding:115px 0;
    background:#f4f4f4;
    color:#111
}
.app-grid{
    display:grid;
    grid-template-columns:360px 1fr;
    gap:55px;
    margin-top:55px
}
.app-tabs{
    display:flex;
    flex-direction:column
}
.app-tab{
    padding:22px;
    border:0;
    border-bottom:1px solid #ddd;
    background:transparent;
    text-align:left;
    cursor:pointer;
    font:800 28px var(--heading);
    text-transform:uppercase;
    transition:.3s
}
.app-tab.active,.app-tab:hover{
    background:#111;
    color:#fff;
    padding-left:35px
}
.app-display{
    height:510px;
    position:relative;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:end;
    padding:55px;
    color:#fff;
    transition:.4s
}
.app-display:before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(transparent,rgba(0,0,0,.9))
}
.app-content{
    position:relative
}
.app-content h3{
    font:900 clamp(60px,7vw,110px)/.78 var(--heading);
    text-transform:uppercase
}
.app-content p{
    max-width:600px;
    color:#ddd;
    line-height:1.8;
    margin-top:20px
}

/* why */
.why{
    padding:115px 0;
    background:#0b0b0b
}
.why-list{
    margin-top:65px;
    border-top:1px solid var(--line)
}
.why-row{
    display:grid;
    grid-template-columns:130px 1fr 1.2fr 50px;
    gap:25px;
    align-items:center;
    border-bottom:1px solid var(--line);
    padding:28px 15px;
    transition:.3s
}
.why-row:hover{
    background:var(--red);
    padding-left:30px
}
.why-row .n{
    font:800 55px var(--heading);
    color:#444
}
.why-row h3{
    font:800 35px var(--heading);
    text-transform:uppercase
}
.why-row p{
    color:#999;
    line-height:1.7;
    font-size:14px
}
.why-row:hover .n,.why-row:hover p{
    color:#fff
}

/* service */
.service{
    padding:115px 0;
    background:#fff;
    color:#111
}
.service-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-top:55px
}
.service-card{
    min-height:460px;
    position:relative;
    overflow:hidden;
    padding:50px;
    color:#fff;
    display:flex;
    align-items:end;
    background-size:cover;
    background-position:center
}
.service-card:before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(transparent 30%,rgba(0,0,0,.9))
}
.service-card>*{
    position:relative
}
.service-card h3{
    font:900 65px/.82 var(--heading);
    text-transform:uppercase;
    max-width:480px
}
.service-card p{
    margin:20px 0;
    color:#ddd;
    max-width:450px;
    line-height:1.7
}

/* CTA/footer */
.cta{
    padding:135px 0;
    text-align:center;
    background:radial-gradient(circle at center,rgba(200,16,16,.23),transparent 40%),#090909
}
.cta h2{
    font:900 clamp(65px,10vw,145px)/.78 var(--heading);
    text-transform:uppercase
}
.cta h2 span{
    color:var(--red)
}
.cta p{
    max-width:600px;
    margin:25px auto;
    color:#aaa;
    line-height:1.8
}
.cta .buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:32px
}
footer{
    padding:70px 0 25px;
    background:#050505;
    border-top:1px solid var(--line)
}
.footer{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:50px
}
.footer p{
    color:#777;
    line-height:1.8;
    margin-top:20px;
    max-width:340px
}
.footer h4{
    font:800 24px var(--heading);
    text-transform:uppercase;
    margin-bottom:20px
}
.footer li{
    margin-bottom:12px
}
.footer li a{
    font-size:13px;
    color:#777
}
.footer li a:hover{
    color:var(--red)
}
.bottom{
    border-top:1px solid var(--line);
    margin-top:55px;
    padding-top:22px;
    display:flex;
    justify-content:space-between;
    color:#666;
    font-size:11px
}

/* modal */
.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.82);
    z-index:3000;
    align-items:center;
    justify-content:center;
    padding:20px
}
.modal.show{
    display:flex
}
.modal-box{
    width:min(600px,100%);
    background:#fff;
    color:#111;
    padding:48px;
    position:relative
}
.close{
    position:absolute;
    right:18px;
    top:14px;
    border:0;
    background:none;
    font-size:28px;
    cursor:pointer
}
.modal-box h2{
    font:900 55px/.85 var(--heading);
    text-transform:uppercase
}
.modal-box p{
    color:#777;
    margin:15px 0 25px
}
.field{
    margin-bottom:14px
}
.field label{
    display:block;
    font-size:10px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:7px
}
.field input,.field select,.field textarea{
    width:100%;
    padding:14px;
    border:1px solid #ddd;
    font:inherit
}
.modal-box textarea{
    height:90px;
    resize:vertical
}

@media(max-width:1050px){
    .menu{
        gap:18px
    }
    .range-cards{
        grid-template-columns:repeat(3,1fr)
    }
    .range-card{
        min-height:300px
    }
    .footer{
        grid-template-columns:repeat(2,1fr)
    }
}
@media(max-width:820px){
    .menu{
        display:none;
        position:absolute;
        top:68px;
        left:0;
        width:100%;
        background:#090909;
        padding:25px;
        flex-direction:column;
        align-items:flex-start
    }
    .menu.show{
        display:flex
    }
    .hamb{
        display:block
    }
    .nav-actions .quote-nav{
        display:none
    }
    .hero{
        min-height:760px
    }
    .slide:before{
        background:linear-gradient(0deg,#090909,rgba(0,0,0,.92) 20%,rgba(0,0,0,.45))
    }
    .swiper-button-next,.swiper-button-prev{
        display:none
    }
    .range-head,.finder-grid{
        display:block
    }
    .range-head .lead{
        margin-top:20px
    }
    .range-cards{
        grid-template-columns:repeat(2,1fr)
    }
    .vehicle-show{
        grid-template-columns:1fr
    }
    .vehicle-copy{
        padding:60px 8%
    }
    .app-grid{
        grid-template-columns:1fr
    }
    .app-tabs{
        display:grid;
        grid-template-columns:repeat(2,1fr)
    }
    .app-tab{
        font-size:23px
    }
    .why-row{
        grid-template-columns:75px 1fr 35px
    }
    .why-row p{
        grid-column:2/4
    }
    .why-row .n{
        font-size:40px
    }
    .service-grid{
        grid-template-columns:1fr
    }
}
@media(max-width:560px){
    .hero-content{
        padding-top:450px
    }
    .slide h1,.slide h2{
        font-size:55px;
        letter-spacing:-2px
    }
    .slide-buttons,.cta .buttons{
        flex-direction:column
    }
    .slide-buttons .btn,.cta .btn{
        width:100%
    }
    .range{
        padding:80px 0
    }
    .range-cards{
        grid-template-columns:1fr
    }
    .range-card{
        min-height:250px
    }
    .showcase,.finder,.apps,.why,.service{
        padding:80px 0
    }
    .specs{
        grid-template-columns:1fr
    }
    .spec{
        border-right:0;
        border-bottom:1px solid var(--line)
    }
    .finder-choices{
        grid-template-columns:1fr
    }
    .match{
        margin-top:30px;
        padding:38px
    }
    .app-tabs{
        grid-template-columns:1fr
    }
    .app-display{
        padding:35px;
        height:460px
    }
    .why-row{
        grid-template-columns:55px 1fr 25px;
        gap:12px
    }
    .why-row h3{
        font-size:27px
    }
    .why-row p{
        font-size:13px
    }
    .service-card{
        min-height:390px;
        padding:35px
    }
    .service-card h3{
        font-size:52px
    }
    .footer{
        grid-template-columns:1fr
    }
    .bottom{
        display:block
    }
    .bottom div+div{
        margin-top:8px
    }
    .modal-box{
        padding:40px 24px
    }
    .modal-box h2{
        font-size:45px
    }
}