*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

:root{
--red:#d61f26;
--red-bright:#ff4040;
--navy:#1d2a4d;
--bg:#0b0d10;
--bg-alt:#15171b;
--card:#1b1d22;
--card-border:#26292f;
--text-dim:#9aa0aa;
--text-dimmer:#6c7178;
--white:#fff;
}

body{
background:var(--bg);
font-family:"Inter",Segoe UI,Arial,sans-serif;
color:var(--white);
overflow-x:hidden;
max-width:1920px;
margin:0 auto;
position:relative;
}

h1,h2,h3{
font-family:"Anton",Impact,sans-serif;
font-weight:400;
letter-spacing:.5px;
text-transform:uppercase;
}

.icon{
width:22px;
height:22px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
flex-shrink:0;
}

/* ---------- header ---------- */

.site-header{
position:fixed;
top:0;
left:50%;
transform:translateX(-50%);
width:min(100%,1920px);
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 60px;
background:rgba(8,9,11,.6);
backdrop-filter:blur(14px);
z-index:1000;
transition:padding .3s,background .3s,border-color .3s;
border-bottom:1px solid transparent;
}

.site-header.scrolled{
padding:10px 60px;
background:rgba(8,9,11,.92);
border-bottom:1px solid var(--card-border);
}

.logo img{
height:64px;
width:auto;
transition:height .3s;
display:block;
}

.site-header.scrolled .logo img{
height:48px;
}

nav.site-nav{
display:flex;
gap:34px;
align-items:center;
}

nav.site-nav a{
color:var(--white);
text-decoration:none;
font-family:"Oswald",Arial,sans-serif;
font-weight:600;
font-size:15px;
letter-spacing:1px;
text-transform:uppercase;
position:relative;
padding:4px 0;
}

nav.site-nav a::after{
content:"";
position:absolute;
left:0;
bottom:-2px;
width:0;
height:2px;
background:var(--red);
transition:width .25s;
}

nav.site-nav a:hover::after{
width:100%;
}

.header-actions{
display:flex;
align-items:center;
gap:20px;
}

.shop-button{
display:inline-flex;
align-items:center;
gap:10px;
background:var(--red);
color:var(--white);
text-decoration:none;
padding:12px 22px;
border:6px solid transparent;
border-image:url("images/card-frame.webp") 42 stretch;
border-radius:0;
font-family:"Oswald",Arial,sans-serif;
font-weight:600;
letter-spacing:1px;
text-transform:uppercase;
font-size:14px;
transition:background .25s,transform .25s;
}

.shop-button:hover{
background:var(--red-bright);
transform:translateY(-2px);
}

/* ---------- button shine & pulse ---------- */

.shop-button,
.cta{
position:relative;
overflow:hidden;
}

.shop-button::after,
.cta::after{
content:"";
position:absolute;
top:0;
left:-80%;
width:45%;
height:100%;
background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);
transform:skewX(-20deg);
animation:shine 4s ease-in-out infinite;
pointer-events:none;
}

@keyframes shine{
0%{left:-80%;}
18%{left:130%;}
100%{left:130%;}
}

.cta{
animation:ctaPulse 2.6s ease-out infinite;
}

@keyframes ctaPulse{
0%{box-shadow:0 0 0 0 rgba(214,31,38,.55);}
70%{box-shadow:0 0 0 16px rgba(214,31,38,0);}
100%{box-shadow:0 0 0 0 rgba(214,31,38,0);}
}

.nav-toggle{
display:none;
background:none;
border:none;
color:var(--white);
cursor:pointer;
padding:6px;
}

.nav-toggle .icon{
width:28px;
height:28px;
}

.nav-toggle .icon-close{
display:none;
}

.shop-button-mobile{
display:none;
}

/* ---------- hero ---------- */

.hero{
position:relative;
min-height:760px;
background-image:
linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.28)),
url("images/hero-1920.jpg");
background-size:cover,cover;
background-position:center center,center calc(50% - 50px);
background-repeat:no-repeat,no-repeat;
display:flex;
flex-direction:column;
justify-content:space-between;
overflow:hidden;
padding:130px 60px 20px;
}

.hero-inner{
position:relative;
z-index:2;
max-width:560px;
animation:fade 1.2s ease both;
}

.hero-bottom{
position:relative;
z-index:2;
display:flex;
align-items:center;
gap:36px;
animation:fade 1.2s ease both;
}

.hero-bottom-left{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:10px;
flex-shrink:0;
}

.hero-inner h1{
font-size:clamp(42px,6vw,72px);
line-height:1;
letter-spacing:1px;
transform:skewX(-4deg);
color:#ffffff;
text-shadow:0 4px 2px rgba(0,0,0,.5),0 10px 20px rgba(0,0,0,.55);
}

.hero-inner h1 span{
display:block;
color:#ff2b32;
text-shadow:0 4px 2px rgba(0,0,0,.5),0 10px 20px rgba(0,0,0,.55);
}

.hero-inner .subtext{
margin-top:12px;
font-size:19px;
line-height:1.6;
color:#f2f2f2;
max-width:480px;
text-shadow:0 2px 0 rgba(0,0,0,.5);
}

.badges{
display:flex;
gap:26px;
flex-wrap:wrap;
margin-left:auto;
}

.badge{
display:flex;
align-items:center;
gap:12px;
color:var(--white);
background:rgba(8,9,11,.6);
backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.16);
border-left:3px solid var(--red);
border-radius:8px;
padding:10px 18px;
box-shadow:0 6px 18px rgba(0,0,0,.45);
}

.badge .icon{
width:26px;
height:26px;
color:var(--red);
filter:drop-shadow(0 2px 0 rgba(0,0,0,.5));
}

.badge span{
font-family:"Oswald",Arial,sans-serif;
font-weight:600;
font-size:14px;
letter-spacing:.5px;
text-transform:uppercase;
line-height:1.3;
text-shadow:0 2px 0 rgba(0,0,0,.5);
}

.cta{
display:inline-flex;
align-items:center;
gap:12px;
padding:15px 28px;
background:var(--red);
border:7px solid transparent;
border-image:url("images/card-frame.webp") 42 stretch;
border-radius:0;
text-decoration:none;
color:var(--white);
font-family:"Oswald",Arial,sans-serif;
font-size:17px;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
transition:.3s;
}

.cta:hover{
background:var(--red-bright);
transform:translateY(-3px);
}

.cta .icon{
width:20px;
height:20px;
transition:transform .25s;
}

.cta:hover .icon{
transform:translateX(4px);
}

/* ---------- vehicles bar ---------- */

.vehicles-bar{
background:#000;
padding:46px 8%;
border-top:1px solid var(--card-border);
border-bottom:1px solid var(--card-border);
}

.vehicles-bar h2{
text-align:center;
font-size:30px;
display:flex;
align-items:center;
justify-content:center;
gap:24px;
margin-bottom:28px;
color:var(--white);
}

.vehicles-bar h2 .line{
height:2px;
width:60px;
background:var(--red);
display:inline-block;
}

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

.vehicle-card{
text-align:center;
transition:transform .3s;
}

.vehicle-card:hover{
transform:translateY(-6px);
}

.vehicle-badge{
display:block;
width:100%;
max-width:150px;
aspect-ratio:420/410;
object-fit:contain;
border-radius:10px;
margin:0 auto 10px;
transition:filter .3s;
}

.vehicle-card:hover .vehicle-badge{
filter:drop-shadow(0 12px 24px rgba(214,31,38,.35));
}

.vehicle-card a{
display:block;
color:var(--red);
text-decoration:none;
font-family:"Oswald",Arial,sans-serif;
font-weight:600;
font-size:12px;
letter-spacing:1.5px;
text-transform:uppercase;
}

.vehicle-card a:hover{
color:var(--red-bright);
}

/* ---------- generic sections ---------- */

section{
padding:64px 8%;
}

.section-head{
margin-bottom:28px;
}

.section-head .tag{
color:var(--red);
font-family:"Oswald",Arial,sans-serif;
font-weight:600;
letter-spacing:3px;
font-size:13px;
text-transform:uppercase;
}

.section-head h2{
font-size:34px;
margin-top:6px;
color:var(--white);
}

section p{
font-size:17px;
line-height:1.65;
color:var(--text-dim);
}

#about{
text-align:center;
}

.about-panel{
max-width:920px;
margin:0 auto;
padding:40px 44px;
background:
linear-gradient(rgba(8,9,11,.45),rgba(8,9,11,.45)),
url("images/about-hex-bg.jpg") center/cover no-repeat;
border:16px solid transparent;
border-image:url("images/card-frame.webp") 42 stretch;
border-radius:18px;
box-shadow:
0 8px 24px rgba(0,0,0,.5),
0 0 18px rgba(214,31,38,.12);
}

.about-panel p{
color:#e8eaee;
text-shadow:0 1px 3px rgba(0,0,0,.6);
}

#about .section-head,
#about p{
max-width:820px;
margin-left:auto;
margin-right:auto;
}

#about p + p{
margin-top:16px;
}

#about .signature{
margin-top:24px;
font-family:"Oswald",Arial,sans-serif;
font-style:italic;
font-size:19px;
color:var(--white);
}

/* ---------- products ---------- */

.product-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

.product-card{
background:var(--card);
border:16px solid transparent;
border-image:url("images/card-frame.webp") 42 stretch;
border-radius:18px;
overflow:hidden;
display:flex;
flex-direction:column;
box-shadow:
0 8px 24px rgba(0,0,0,.5),
0 0 18px rgba(214,31,38,.12);
transition:transform .3s,box-shadow .3s;
}

.product-card:hover{
transform:translateY(-8px);
box-shadow:
0 14px 32px rgba(0,0,0,.55),
0 0 26px rgba(214,31,38,.45);
}

.product-media{
position:relative;
height:180px;
overflow:hidden;
background:
linear-gradient(160deg,var(--navy) 0%,#0d0f13 60%),
radial-gradient(circle at 30% 20%,rgba(214,31,38,.35),transparent 60%);
display:flex;
align-items:center;
justify-content:center;
}

.product-media img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s;
}

.product-card:hover .product-media img{
transform:scale(1.06);
}

.product-media .icon{
width:70px;
height:70px;
color:rgba(255,255,255,.18);
stroke-width:1;
}

.product-media .icon-watermark{
position:absolute;
width:160px;
height:160px;
color:rgba(255,255,255,.06);
stroke-width:1;
}

.product-media.zoomable{
cursor:pointer;
}

.zoom-hint{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
background:rgba(0,0,0,.35);
opacity:0;
transition:opacity .3s;
pointer-events:none;
}

.product-media.zoomable:hover .zoom-hint{
opacity:1;
}

.zoom-hint .icon{
width:32px;
height:32px;
color:var(--white);
stroke-width:1.5;
}

/* ---------- lightbox ---------- */

.lightbox{
position:fixed;
inset:0;
background:rgba(4,5,6,.94);
display:flex;
align-items:center;
justify-content:center;
padding:40px;
z-index:2000;
opacity:0;
pointer-events:none;
transition:opacity .3s;
}

.lightbox.open{
opacity:1;
pointer-events:auto;
}

.lightbox-img{
max-width:90vw;
max-height:90vh;
border-radius:10px;
box-shadow:0 30px 80px rgba(0,0,0,.6);
}

.lightbox-close{
position:absolute;
top:24px;
right:24px;
background:rgba(255,255,255,.08);
border:1px solid var(--card-border);
border-radius:50%;
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
color:var(--white);
cursor:pointer;
transition:background .25s;
}

.lightbox-close:hover{
background:var(--red);
}

.lightbox-close .icon{
width:20px;
height:20px;
}

.lightbox-nav{
display:none;
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(255,255,255,.08);
border:1px solid var(--card-border);
border-radius:50%;
width:48px;
height:48px;
align-items:center;
justify-content:center;
color:var(--white);
font-size:26px;
line-height:1;
cursor:pointer;
transition:background .25s;
}

.lightbox.has-nav .lightbox-nav{
display:flex;
}

.lightbox-nav:hover{
background:var(--red);
}

.lightbox-prev{
left:24px;
}

.lightbox-next{
right:24px;
}

.product-body{
padding:20px;
display:flex;
flex-direction:column;
flex:1;
}

.product-body h3{
font-size:20px;
color:var(--white);
margin-bottom:8px;
}

.product-body p{
font-size:15px;
line-height:1.6;
color:var(--text-dim);
flex:1;
margin-bottom:14px;
}

.product-desc{
display:flex;
flex-direction:column;
flex:1;
margin-bottom:14px;
}

.product-desc p{
flex:none;
margin-bottom:10px;
}

.product-desc p:last-child{
margin-bottom:0;
}

.product-desc .fit-label{
color:var(--white);
font-weight:600;
margin-bottom:6px;
}

.fit-list{
list-style:none;
margin-bottom:10px;
}

.fit-list li{
position:relative;
padding-left:16px;
font-size:15px;
line-height:1.6;
color:var(--text-dim);
}

.fit-list li::before{
content:"";
position:absolute;
left:0;
top:10px;
width:6px;
height:6px;
background:var(--red);
border-radius:50%;
}

.product-stats{
display:flex;
flex-wrap:wrap;
gap:16px;
margin-bottom:16px;
}

.product-stat{
display:flex;
align-items:center;
gap:7px;
color:var(--text-dim);
font-family:"Oswald",Arial,sans-serif;
font-weight:600;
font-size:12px;
letter-spacing:.5px;
text-transform:uppercase;
}

.product-stat .icon{
width:15px;
height:15px;
color:var(--red);
}

.product-links{
display:flex;
flex-direction:column;
gap:8px;
}

.product-link{
display:inline-flex;
align-items:center;
gap:8px;
color:var(--red);
text-decoration:none;
font-family:"Oswald",Arial,sans-serif;
font-weight:600;
font-size:13px;
letter-spacing:1.5px;
text-transform:uppercase;
}

.product-link:hover{
color:var(--red-bright);
}

.product-link .icon{
width:16px;
height:16px;
}

/* ---------- gallery ---------- */

.gallery-hero{
padding:150px 8% 40px;
text-align:center;
background:#000;
border-bottom:1px solid var(--card-border);
}

.gallery-hero .section-head{
margin-bottom:14px;
}

.gallery-intro{
max-width:640px;
margin:0 auto;
}

#swatches,
#custom-work{
text-align:center;
}

#swatches .section-head,
#custom-work .section-head{
text-align:center;
}

#swatches{
scroll-margin-top:100px;
}

.swatch-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,320px));
gap:24px;
justify-content:center;
text-align:left;
}

.swatch-card{
background:var(--card);
border:16px solid transparent;
border-image:url("images/card-frame.webp") 42 stretch;
border-radius:18px;
overflow:hidden;
box-shadow:
0 8px 24px rgba(0,0,0,.5),
0 0 18px rgba(214,31,38,.12);
transition:transform .3s,box-shadow .3s;
}

.swatch-card:hover{
transform:translateY(-8px);
box-shadow:
0 14px 32px rgba(0,0,0,.55),
0 0 26px rgba(214,31,38,.45);
}

@keyframes swatchTargetGlow{
0%{box-shadow:0 0 0 0 rgba(214,31,38,.9),0 8px 24px rgba(0,0,0,.5);}
100%{box-shadow:0 0 0 10px rgba(214,31,38,0),0 8px 24px rgba(0,0,0,.5);}
}

#swatches:target .swatch-card{
animation:swatchTargetGlow 1.8s ease-out;
}

.swatch-card .product-media{
height:auto;
background:none;
}

.swatch-card .product-media img{
width:100%;
height:auto;
object-fit:contain;
display:block;
}

.swatch-body{
padding:16px 20px 20px;
}

.swatch-body h3{
font-size:19px;
color:var(--white);
}

.swatch-note{
text-align:center;
margin-top:24px;
font-size:15px;
color:var(--text-dim);
}

.instagram-grid{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:24px;
}

.instagram-grid:empty{
display:none;
}

.instagram-follow{
margin-top:28px;
}

.instagram-follow a{
color:var(--red);
font-weight:600;
text-decoration:none;
font-family:"Oswald",Arial,sans-serif;
letter-spacing:.5px;
}

.instagram-follow a:hover{
color:var(--red-bright);
}

/* ---------- bottom / contact ---------- */

.bottom{
text-align:center;
padding-top:24px;
}

.logo-break{
padding:0 8%;
display:flex;
justify-content:center;
}

.logo-break img{
width:min(620px,80vw);
height:auto;
opacity:.07;
}

.bottom p{
max-width:560px;
margin:0 auto;
}

.bottom .contact-lead{
color:#e8eaee;
font-size:19px;
margin-bottom:8px;
max-width:none;
}

.bottom .contact-sub{
margin-bottom:24px;
}

.contact-options{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:18px;
}

.contact-social{
display:inline-flex;
transition:transform .25s;
}

.contact-social:hover{
transform:translateY(-2px);
}

.contact-social img{
height:44px;
width:auto;
display:block;
}

/* ---------- footer ---------- */

footer{
background:#000;
border-top:1px solid var(--card-border);
padding:24px 8%;
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:24px;
}

.footer-features{
display:flex;
gap:34px;
flex-wrap:wrap;
}

.footer-features div{
display:flex;
align-items:center;
gap:10px;
font-family:"Oswald",Arial,sans-serif;
font-size:13px;
letter-spacing:1px;
text-transform:uppercase;
color:var(--text-dim);
}

.footer-features .icon{
width:18px;
height:18px;
color:var(--red);
}

.footer-right{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:16px 24px;
}

.copyright{
color:var(--text-dimmer);
font-size:12.5px;
letter-spacing:.5px;
}

/* ---------- nav target flash ---------- */

@keyframes sectionFlash{
0%{color:var(--red-bright);text-shadow:0 0 20px rgba(214,31,38,.65);}
100%{color:var(--white);text-shadow:none;}
}

.flash h2{
animation:sectionFlash 1.4s ease .5s both;
}

/* ---------- scroll reveal ---------- */

.reveal{
opacity:0;
transform:translateY(36px);
transition:opacity .7s ease,transform .7s ease;
}

.reveal.in-view{
opacity:1;
transform:none;
}

@keyframes fade{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* ---------- responsive ---------- */

@media(max-width:1100px){

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

.product-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:900px){

.site-header{
padding:16px 20px;
}

.site-header.scrolled{
padding:10px 20px;
}

nav.site-nav{
position:fixed;
top:0;
right:0;
height:100vh;
width:270px;
background:#0a0b0d;
border-left:1px solid var(--card-border);
flex-direction:column;
justify-content:center;
align-items:flex-start;
gap:30px;
padding:40px;
transform:translateX(100%);
transition:transform .35s ease;
}

nav.site-nav.open{
transform:translateX(0);
}

.nav-toggle{
display:block;
z-index:1100;
}

.header-actions .shop-button{
display:none;
}

nav.site-nav .shop-button-mobile{
display:inline-flex;
margin-top:10px;
}

.hero{
flex-direction:column;
padding:120px 24px 50px;
background-image:
linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.28)),
url("images/hero-960.jpg");
min-height:auto;
text-align:center;
align-items:center;
justify-content:center;
gap:20px;
}

.hero-inner{
max-width:100%;
}

.hero-bottom{
flex-direction:column;
gap:18px;
}

.hero-bottom-left{
align-items:center;
}

.badges{
justify-content:center;
margin-left:0;
}

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

.product-grid{
grid-template-columns:1fr;
}

section{
padding:44px 6%;
}

.gallery-hero{
padding:120px 6% 34px;
}

}

@media(max-width:480px){

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

}