*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
margin:0;
background:#05070a;
color:#f4f7fb;
font-family:Arial,Helvetica,sans-serif;
line-height:1.55
}

a{
color:inherit;
text-decoration:none
}

/* HEADER */

.site-header{
position:sticky;
top:0;
z-index:20;
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 5vw;
background:rgba(5,7,10,.92);
backdrop-filter:blur(12px);
border-bottom:1px solid #132238
}

.brand{
display:flex;
align-items:center;
gap:10px;
font-weight:800
}

.brand img{
width:46px;
height:46px;
border-radius:50%
}

.site-header nav{
display:flex;
align-items:center;
gap:22px;
font-size:14px
}

.nav-cta{
padding:10px 14px;
border:1px solid #16a9ff;
border-radius:999px
}

/* HERO */

.hero{
position:relative;
min-height:78vh;
display:flex;
align-items:end;
overflow:hidden
}

.hero-image{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover
}

.hero-overlay{
position:absolute;
inset:0;
background:
linear-gradient(90deg,rgba(1,4,10,.94) 0%,rgba(1,4,10,.65) 48%,rgba(1,4,10,.2) 100%),
linear-gradient(0deg,#05070a 0%,transparent 35%)
}

.hero-content{
position:relative;
z-index:2;
max-width:760px;
padding:11vh 6vw 10vh
}

.eyebrow{
margin:0 0 10px;
text-transform:uppercase;
letter-spacing:.16em;
font-size:12px;
font-weight:800;
color:#28b8ff
}

.hero h1,
.section h2,
.contact-section h2{
margin:0;
font-size:clamp(38px,6vw,78px);
line-height:.98;
letter-spacing:-.045em
}

.hero h1 span{
color:#23b9ff
}

.hero-copy{
max-width:620px;
font-size:clamp(17px,2vw,22px);
color:#d7e1ec
}

.hero-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:28px
}

.button{
display:inline-flex;
justify-content:center;
align-items:center;
padding:13px 20px;
border-radius:8px;
font-weight:800
}

.primary{
background:linear-gradient(135deg,#058eff,#20c1ff);
color:#02101c
}

.ghost{
border:1px solid #49637d;
background:rgba(7,14,25,.55)
}

/* TRUST STRIP */

.trust-strip{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1px;
background:#15263a;
border-top:1px solid #15263a;
border-bottom:1px solid #15263a
}

.trust-strip div{
padding:20px 5vw;
background:#07101a
}

.trust-strip strong,
.trust-strip span{
display:block
}

.trust-strip span{
font-size:13px;
color:#8ea6bd
}

/* SECTIONS */

.section{
padding:90px 6vw
}

.section.alt{
background:linear-gradient(180deg,#08111c,#05070a)
}

.section-heading{
max-width:830px;
margin-bottom:40px
}

.section-heading h2,
.section h2,
.contact-section h2{
font-size:clamp(32px,4vw,56px)
}

.section-heading p:not(.eyebrow),
.split p,
.contact-section p{
color:#aebed0
}

/* SERVICES IMAGE */

.services-showcase{
padding-top:80px;
padding-bottom:80px
}

.services-showcase .section-heading{
margin-bottom:30px
}

.services-image{
display:block;
width:100%;
max-width:1500px;
height:auto;
margin:0 auto;
border-radius:18px;
border:1px solid #173550;
box-shadow:0 20px 60px rgba(0,0,0,.28)
}

/* OLD CARD STYLES - SAFE TO KEEP */

.cards{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px
}

.card{
padding:28px;
background:linear-gradient(180deg,#0b1623,#08111b);
border:1px solid #152b42;
border-radius:16px;
box-shadow:0 16px 50px rgba(0,0,0,.18)
}

.card .icon{
font-size:34px;
color:#1fb9ff
}

.card h3{
font-size:24px;
margin:14px 0 8px
}

.card p{
color:#9db0c3
}

/* VEHICLES */

.split{
display:grid;
grid-template-columns:1fr 1fr;
gap:7vw;
align-items:start
}

.vehicle-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px
}

.vehicle-grid span{
padding:18px;
border:1px solid #16344f;
border-radius:10px;
background:#07111b;
font-weight:800;
color:#dff4ff
}

.muted{
font-size:14px
}

/* CONTACT */

.contact-section{
padding:90px 6vw;
display:grid;
grid-template-columns:1.1fr .9fr;
gap:8vw;
background:
radial-gradient(circle at 25% 20%,rgba(0,136,255,.18),transparent 38%),
#07101a
}

.contact-card{
padding:26px;
background:#050b12;
border:1px solid #173550;
border-radius:16px
}

.contact-card>a:not(.button),
.contact-card>div{
display:block;
padding:16px 0;
border-bottom:1px solid #12283d
}

.contact-card span,
.contact-card strong{
display:block
}

.contact-card span{
font-size:12px;
text-transform:uppercase;
letter-spacing:.12em;
color:#6f8aa3
}

.full{
width:100%;
margin-top:18px
}

/* FOOTER */

footer{
display:flex;
align-items:center;
gap:16px;
padding:32px 6vw;
border-top:1px solid #15263a;
color:#9fb1c3
}

footer img{
width:58px;
height:58px;
border-radius:50%
}

footer strong,
footer span,
footer small{
display:block
}

footer strong{
color:#fff
}

footer small{
margin-top:6px;
font-size:12px
}

/* TABLET */

@media(max-width:900px){

.site-header nav a:not(.nav-cta){
display:none
}

.cards{
grid-template-columns:1fr 1fr
}

.split,
.contact-section{
grid-template-columns:1fr
}

.trust-strip{
grid-template-columns:1fr 1fr
}

}

/* PHONE */

@media(max-width:580px){

.site-header{
padding:10px 18px
}

.brand span{
font-size:15px
}

/* show full banner on mobile */

.hero{
display:block;
min-height:0;
overflow:visible;
background:#05070a
}

.hero-image{
position:relative;
display:block;
width:100%;
height:auto;
max-height:none;
object-fit:contain;
object-position:center
}

.hero-overlay{
display:none
}

.hero-content{
position:relative;
padding:38px 22px 55px;
max-width:none;
background:
radial-gradient(circle at 20% 0%,rgba(0,142,255,.14),transparent 45%),
#05070a
}

.hero h1{
font-size:46px
}

.hero-copy{
font-size:18px
}

.hero-actions{
margin-top:24px
}

.section,
.contact-section{
padding:66px 22px
}

.services-showcase{
padding:55px 0
}

.services-showcase .section-heading{
padding:0 22px;
margin-bottom:24px
}

.services-image{
width:100%;
max-width:none;
border-radius:0;
border-left:0;
border-right:0;
box-shadow:none
}

.cards{
grid-template-columns:1fr
}

.vehicle-grid{
grid-template-columns:1fr 1fr
}

.trust-strip div{
padding:16px 20px
}

.trust-strip strong{
font-size:14px
}

footer{
padding:26px 22px
}

}


/* MOBILE WIDTH FIX */

html,
body{
width:100%;
max-width:100%;
overflow-x:hidden;
}

img{
max-width:100%;
}

.services-showcase{
width:100%;
max-width:100%;
overflow:hidden;
}

.services-image{
display:block;
width:100%;
max-width:100%;
height:auto;
}

@media(max-width:580px){

.hero,
.hero-content,
.trust-strip,
.section,
.contact-section,
footer{
width:100%;
max-width:100%;
}

.services-showcase{
width:100%;
max-width:100%;
padding:55px 0;
overflow:hidden;
}

.services-showcase .section-heading{
width:100%;
max-width:100%;
padding:0 22px;
}

.services-image{
display:block;
width:100%;
max-width:100%;
height:auto;
margin:0;
}

}