:root{
   --ink:#0b0c0e;
   --panel:#15171b;
   --panel-line:#26292f;
   --bone:#f0e6d2;
   --bone-dim:#cfc4ab;
   --ember:#dd6b2c;
   --ember-dim:#b0531f;
   --brake:#b0242a;
   --chrome:#b9c0c7;
   --beetle:#2c6e8e;

   --display:'Bebas Neue', sans-serif;
   --script:'Permanent Marker', cursive;
   --body:'Work Sans', sans-serif;

   --space-1:.5rem;
   --space-2:1rem;
   --space-3:1.5rem;
   --space-4:2.5rem;
   --space-5:4rem;
   --space-6:6.5rem;

   --maxw:1120px;
 }

 *{box-sizing:border-box;}
 html{scroll-behavior:smooth;}
 body{
   margin:0;
   background:var(--ink);
   color:var(--bone);
   font-family:var(--body);
   line-height:1.6;
   -webkit-font-smoothing:antialiased;
 }
 img{max-width:100%;display:block;}
 a{color:inherit;}
 .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--space-3);}

 h1,h2,h3{
   font-family:var(--display);
   letter-spacing:.03em;
   margin:0;
   line-height:1.05;
 }

  /* ---------- Nav ---------- */
 .nav{
   position:sticky;top:0;z-index:50;
   background:rgba(11,12,14,.88);
   backdrop-filter:blur(6px);
   border-bottom:1px solid var(--panel-line);
 }
 .nav .wrap{
   display:flex;align-items:center;justify-content:space-between;
   padding-block:var(--space-2);
 }
 .nav-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;}
 .nav-brand img{height:38px;width:auto;border-radius:4px;}
 .nav-brand span{
   font-family:var(--display);
   font-size:1.3rem;
   letter-spacing:.06em;
   color:var(--bone);
 }
 .nav-links{display:flex;gap:var(--space-4);list-style:none;margin:0;padding:0;}
 .nav-links a{
   text-decoration:none;
   font-size:.85rem;
   letter-spacing:.12em;
   text-transform:uppercase;
   color:var(--bone-dim);
   border-bottom:2px solid transparent;
   padding-bottom:4px;
   transition:color .2s, border-color .2s;
 }
 .nav-links a:hover{color:var(--ember);border-color:var(--ember);}
 .nav-toggle{display:none;background:none;border:none;color:var(--bone);font-size:1.6rem;cursor:pointer;}

 @media (max-width:720px){
   .nav-links{
     position:absolute;top:100%;left:0;right:0;
     flex-direction:column;
     background:var(--ink);
     border-bottom:1px solid var(--panel-line);
     padding:var(--space-3);
     gap:var(--space-2);
     display:none;
   }
   .nav-links.is-open{display:flex;}
   .nav-toggle{display:block;}
 }

  /* ---------- Hero ---------- */
 .hero{
   padding-top:var(--space-6);
   padding-bottom:var(--space-5);
   position:relative;
   overflow:hidden;
 }
 .hero::before{
   content:"";
   position:absolute;
   inset:0;
   background:
     radial-gradient(ellipse 60% 50% at 80% 0%, rgba(221,107,44,.16), transparent 60%),
     radial-gradient(ellipse 50% 40% at 10% 100%, rgba(44,110,142,.14), transparent 60%);
   pointer-events:none;
 }
 .hero .wrap{
   display:grid;
   grid-template-columns:340px 1fr;
   gap:var(--space-5);
   align-items:center;
   position:relative;
 }
 .hero-badge img{
   width:100%;
   filter:drop-shadow(0 18px 40px rgba(0,0,0,.55));
 }
 .hero-kicker{
   font-family:var(--script);
   color:var(--ember);
   font-size:1.3rem;
   display:inline-block;
   transform:rotate(-2deg);
   margin-bottom:var(--space-2);
 }
 .hero h1{
   font-size:clamp(2.6rem, 5vw, 4.2rem);
   color:var(--bone);
 }
 .hero h1 em{
   font-style:normal;
   color:var(--ember);
 }
 .hero p{
   color:var(--bone-dim);
   max-width:36rem;
   font-size:1.05rem;
   margin-top:var(--space-2);
 }
 .hero-ctas{
   display:flex;
   gap:var(--space-2);
   margin-top:var(--space-4);
   flex-wrap:wrap;
 }
 .btn{
   font-family:var(--display);
   letter-spacing:.08em;
   text-decoration:none;
   padding:.85rem 1.6rem;
   border-radius:3px;
   font-size:1rem;
   display:inline-flex;
   align-items:center;
   gap:.5rem;
   transition:transform .15s, box-shadow .15s, background .15s;
   border:2px solid transparent;
 }
 .btn:hover{transform:translateY(-2px);}
 .btn-primary{background:var(--ember);color:var(--ink);}
 .btn-primary:hover{background:#ef7c3a;box-shadow:0 8px 24px rgba(221,107,44,.35);}
 .btn-outline{border-color:var(--chrome);color:var(--bone);}
 .btn-outline:hover{border-color:var(--bone);background:rgba(255,255,255,.04);}

 @media (max-width:760px){
   .hero .wrap{grid-template-columns:1fr;text-align:center;}
   .hero-badge{max-width:240px;margin-inline:auto;}
   .hero p{margin-inline:auto;}
   .hero-ctas{justify-content:center;}
 }

  /* ---------- Sunset divider (signature element) ---------- */
 .divider{
   position:relative;
   height:90px;
   overflow:hidden;
   background:var(--ink);
 }
 .divider svg{position:absolute;top:0;left:0;width:100%;height:100%;}
 .divider-line{
   height:6px;
   background:repeating-linear-gradient(90deg, var(--brake) 0 18px, var(--chrome) 18px 36px);
   opacity:.9;
 }

  /* ---------- Section base ---------- */
 .section{padding-block:var(--space-6);}
 .section-tight{padding-block:var(--space-5);}
 .panel{background:var(--panel);}
 .eyebrow{
   font-size:.8rem;
   letter-spacing:.2em;
   text-transform:uppercase;
   color:var(--ember);
   margin-bottom:var(--space-1);
   display:block;
 }
 .section h2{
   font-size:clamp(2rem,3.4vw,2.8rem);
   color:var(--bone);
   margin-bottom:var(--space-3);
 }

  /* ---------- About ---------- */
 .about-grid{
   display:grid;
   grid-template-columns:1.1fr .9fr;
   gap:var(--space-5);
   align-items:start;
 }
 .about-grid p{color:var(--bone-dim);}
 .spec-plate{
   background:var(--ink);
   border:1px solid var(--panel-line);
   border-radius:6px;
   padding:var(--space-3) var(--space-4);
 }
 .spec-plate h3{
   font-size:1rem;
   letter-spacing:.18em;
   color:var(--chrome);
   border-bottom:1px solid var(--panel-line);
   padding-bottom:var(--space-2);
   margin-bottom:var(--space-2);
 }
 .spec-plate ul{list-style:none;margin:0;padding:0;}
 .spec-plate li{
   display:flex;
   justify-content:space-between;
   gap:var(--space-2);
   padding-block:.6rem;
   border-bottom:1px dashed var(--panel-line);
   font-size:.95rem;
 }
 .spec-plate li:last-child{border-bottom:none;}
 .spec-plate li span:first-child{color:var(--bone-dim);}
 .spec-plate li span:last-child{color:var(--bone);font-weight:600;text-align:right;}

 @media (max-width:760px){
   .about-grid{grid-template-columns:1fr;}
 }

  /* ---------- Build / YouTube ---------- */
 .build-card{
   background:var(--panel);
   border:1px solid var(--panel-line);
   border-radius:10px;
   padding:var(--space-4);
   display:grid;
   grid-template-columns:auto 1fr auto;
   gap:var(--space-4);
   align-items:center;
 }
 .build-icon{
   width:64px;height:64px;border-radius:50%;
   background:var(--brake);
   display:flex;align-items:center;justify-content:center;
   flex-shrink:0;
 }
 .build-icon svg{width:26px;height:26px;fill:var(--bone);}
 .build-card h3{
   font-size:1.5rem;color:var(--bone);margin-bottom:.4rem;
 }
 .build-card p{color:var(--bone-dim);margin:0;}
 .tag-soon{
   display:inline-block;
   font-size:.7rem;
   letter-spacing:.12em;
   text-transform:uppercase;
   color:var(--ink);
   background:var(--chrome);
   padding:.25rem .55rem;
   border-radius:3px;
   margin-left:.5rem;
   vertical-align:middle;
 }
 @media (max-width:700px){
   .build-card{grid-template-columns:1fr;text-align:center;}
 }

  /* ---------- Contact ---------- */
 .contact-grid{
   display:grid;
   grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
   gap:var(--space-3);
 }
 .contact-card{
   background:var(--ink);
   border:1px solid var(--panel-line);
   border-radius:8px;
   padding:var(--space-3);
 }
 .contact-card .label{
   font-size:.75rem;
   letter-spacing:.14em;
   text-transform:uppercase;
   color:var(--chrome);
   display:block;
   margin-bottom:.5rem;
 }
 .contact-card a{
   font-family:var(--display);
   font-size:1.25rem;
   letter-spacing:.03em;
   color:var(--bone);
   text-decoration:none;
 }
 .contact-card a:hover{color:var(--ember);}
 .contact-note{
   font-size:.85rem;
   color:var(--bone-dim);
   margin-top:.6rem;
 }

  /* ---------- Footer ---------- */
 footer{
   border-top:1px solid var(--panel-line);
   padding-block:var(--space-3);
 }
 footer .wrap{
   display:flex;
   align-items:center;
   justify-content:space-between;
   flex-wrap:wrap;
   gap:var(--space-2);
 }
 .footer-brand{display:flex;align-items:center;gap:.6rem;}
 .footer-brand img{height:30px;border-radius:4px;}
 .footer-brand span{font-family:var(--display);letter-spacing:.05em;color:var(--bone-dim);font-size:.95rem;}
 footer small{color:var(--bone-dim);font-size:.8rem;}

 :focus-visible{outline:2px solid var(--ember);outline-offset:2px;}

 @media (prefers-reduced-motion: reduce){
   html{scroll-behavior:auto;}
   .btn:hover{transform:none;}
 }
 

/*new*/
.gallery{
    width:100%;
}

.main-image{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:10px;
    border:1px solid var(--panel-line);
}

.thumbnails{
    display:flex;
    gap:.75rem;
    margin-top:1rem;
    flex-wrap:wrap;
}

.thumbnails img{
    width:90px;
    height:90px;
    object-fit:cover;
    border-radius:6px;
    border:2px solid transparent;
    cursor:pointer;
    transition:.2s;
}

.thumbnails img:hover{
    border-color:var(--ember);
    transform:translateY(-2px);
}