/* ================= DESIGN TOKENS ================= */
:root{
  --black: #0c0c0b;
  --black-soft: #131311;
  --aluminum: #c7c9c4;
  --aluminum-dim: #8d8f89;
  --outlaw-red: #8f1c1f;
  --outlaw-red-bright: #b3272a;
  --olive: #5c5e46;
  --parchment: #eeece2;
  --parchment-dim: #b9b6a9;
  --burnt-orange: #c2712f;

  --sans: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --mono: 'JetBrains Mono', 'Courier New', monospace;

  --edge: clamp(24px, 6vw, 96px);
  --section-pad: clamp(80px, 12vw, 160px);
}

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

html{scroll-behavior:smooth;}

body{
  background:var(--black);
  color:var(--parchment);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

img{display:block; max-width:100%; height:auto;}

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

/* subtle film grain overlay for the whole page */
.grain{
  position:fixed; top:0; right:0; bottom:0; left:0; pointer-events:none; z-index:200;
  opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ================= NAV ================= */
#siteNav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:20px var(--edge);
  transition:background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
#siteNav.solid{
  background:rgba(12,12,11,0.92);
  backdrop-filter:blur(8px);
  padding:14px var(--edge);
  border-bottom-color:rgba(199,201,196,0.14);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1600px; margin:0 auto;
}
.nav-mark{
  font-family:var(--display); font-weight:800; font-size:22px;
  letter-spacing:0.08em; color:var(--parchment);
}
.nav-links{
  list-style:none; display:flex; gap:clamp(16px,2.4vw,40px);
}
.nav-links a{
  font-family:var(--mono); font-size:11px; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--parchment-dim);
  transition:color .25s ease;
  position:relative;
  padding-bottom:4px;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--outlaw-red-bright); transition:width .3s ease;
}
.nav-links a:hover{color:var(--parchment);}
.nav-links a:hover::after{width:100%;}

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:8px;
}
.nav-toggle span{width:24px; height:1.5px; background:var(--parchment); display:block;}

/* ================= HERO ================= */
.hero{
  position:relative;
  /* Always fills the full viewport, at any window size — this is what
     makes the scroll cue meaningful (the next section peeks in from
     the bottom as you scroll, no matter how the browser is sized). */
  height:100svh; min-height:560px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:var(--black);
}
.hero-media{position:absolute; top:0; right:0; bottom:0; left:0;}
.hero-img{
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
  opacity:0; transform:scale(1.06);
  animation:heroReveal 1.6s cubic-bezier(.2,.7,.2,1) 0.15s forwards;
}
@keyframes heroReveal{
  to{opacity:1; transform:scale(1);}
}
.hero-veil{
  position:absolute; top:0; right:0; bottom:0; left:0;
  background:linear-gradient(180deg, rgba(12,12,11,0.35) 0%, rgba(12,12,11,0.05) 30%, rgba(12,12,11,0.15) 55%, rgba(12,12,11,0.85) 100%);
}
.hero-content{
  position:relative; z-index:2; text-align:center; padding:0 20px;
  /* Holds the desktop offset (8vh + 250px), but capped at 40% of the
     viewport's own height so it can't push the title stack below a
     short window — scales safely on any real screen since height is
     now fixed to the viewport rather than the window's width. */
  margin-top:min(calc(8vh + 250px), 40vh);
}
.hero-eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:0.22em;
  color:var(--parchment-dim); margin-bottom:26px;
  opacity:0; animation:fadeUp .9s ease 1.1s forwards;
}
.hero-word{
  font-family:var(--display); line-height:0.86;
}
.word-lucifer{
  display:block; font-weight:900; color:var(--parchment);
  font-size:clamp(56px, 13vw, 168px); letter-spacing:0.01em;
  opacity:0; transform:translateY(24px);
  animation:fadeUp 1s cubic-bezier(.2,.7,.2,1) 0.35s forwards;
}
.word-pana{
  display:block; font-weight:600; color:var(--outlaw-red-bright);
  font-size:clamp(18px, 3.4vw, 42px); letter-spacing:0.16em;
  margin-top:clamp(6px,1.4vw,14px);
  opacity:0; transform:translateY(18px);
  animation:fadeUp 1s cubic-bezier(.2,.7,.2,1) 0.7s forwards;
}
.hero-tag{
  font-family:var(--sans); font-style:italic; font-weight:400;
  font-size:clamp(13px,1.6vw,17px); letter-spacing:0.05em;
  color:var(--parchment-dim); margin-top:20px;
  opacity:0; animation:fadeUp .9s ease 1.05s forwards;
}
@keyframes fadeUp{
  to{opacity:1; transform:translateY(0);}
}

.scroll-cue{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  z-index:2; background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--parchment-dim);
  opacity:0; animation:fadeUp .9s ease 1.4s forwards;
}
.scroll-line{
  width:1px; height:38px; background:linear-gradient(180deg, var(--parchment-dim), transparent);
  position:relative; overflow:hidden;
}
.scroll-line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--parchment); animation:scrollDrop 1.8s ease-in-out infinite;
}
@keyframes scrollDrop{
  0%{top:-100%;} 60%{top:100%;} 100%{top:100%;}
}
.scroll-word{font-family:var(--mono); font-size:10px; letter-spacing:0.24em;}

/* ================= SHARED SECTION TYPE ================= */
.section{padding:var(--section-pad) var(--edge);}
.kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--outlaw-red-bright); margin-bottom:18px;
}
.kicker.light{color:var(--burnt-orange);}
.section-head{
  font-family:var(--display); font-weight:700; letter-spacing:0.005em;
  font-size:clamp(32px, 4.6vw, 60px); line-height:1.04;
  color:var(--parchment); margin-bottom:28px;
}
.section-head.light{color:var(--parchment);}
.body-copy{
  font-size:clamp(15px, 1.15vw, 18px); color:var(--parchment-dim);
  max-width:56ch; margin-bottom:20px; font-weight:400;
}
.body-copy.light{color:rgba(238,236,226,0.86);}
.body-copy.narrow{max-width:52ch;}
.section-intro{max-width:1600px; margin:0 auto var(--section-pad); }

/* ================= OVERVIEW ================= */
/* Full-bleed background portrait, same construction as .heritage — the
   photo already carries its own dark ground on the left for the text to
   sit in, with a light veil layered on for legibility insurance. */
.overview-hero{
  position:relative; min-height:96vh;
  display:flex; align-items:center; overflow:hidden;
}
.overview-hero-media{position:absolute; top:0; right:0; bottom:0; left:0;}
.overview-hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
}
.overview-hero-veil{
  position:absolute; top:0; right:0; bottom:0; left:0;
  background:linear-gradient(90deg, rgba(12,12,11,0.55) 0%, rgba(12,12,11,0.2) 40%, rgba(12,12,11,0) 60%);
}
.overview-hero-content{
  position:relative; z-index:2; max-width:1600px; width:100%;
  margin:0 auto; padding:0 var(--edge);
}
.overview-hero-content .section-head{max-width:14ch;}
.overview-hero-content .body-copy{max-width:46ch;}

.quote-block{
  margin-top:36px; padding-left:24px; border-left:2px solid var(--outlaw-red);
  max-width:46ch;
}
.pull-quote{
  font-family:var(--sans); font-style:italic; font-weight:400;
  font-size:clamp(19px,1.9vw,26px); color:var(--parchment); line-height:1.42;
  margin-bottom:12px;
}
.quote-attr{
  font-family:var(--mono); font-size:11px; letter-spacing:0.06em;
  color:var(--parchment-dim); text-transform:uppercase;
}

/* ================= LIGHT SECTION (shared) ================= */
/* Used by any section whose source imagery sits on white/paper stock —
   the section itself takes on that tone instead of framing artwork in
   dark cards. */
.light-section{
  background:#ffffff;
  color:var(--black);
  max-width:none;
  margin-left:0;
  margin-right:0;
}
.light-section > *{max-width:1600px; margin-left:auto; margin-right:auto;}
.light-section .kicker{color:var(--outlaw-red);}
.light-section .section-head{color:var(--black);}
.light-section .body-copy{color:rgba(12,12,11,0.6);}

/* ================= EVOLUTION ================= */
.evolution{}

.evo-item{
  display:flex; gap:clamp(32px,5vw,80px);
  align-items:center; margin-bottom:clamp(60px,9vw,120px);
}
.evo-item:last-child{margin-bottom:0;}
.evo-item .evo-media{flex:1.65 1 0;}
.evo-item .evo-caption{flex:1 1 0;}
.evo-b .evo-media{order:2;}
.evo-b .evo-caption{order:1;}
.evo-media img{
  width:100%; height:auto; display:block; object-fit:contain;
}
.evo-caption{padding:4px;}
.evo-date{
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em;
  color:var(--outlaw-red-bright); display:block; margin-bottom:12px;
}
.evo-caption h3{
  font-family:var(--display); font-weight:700; font-size:clamp(24px,2.6vw,34px);
  color:var(--black); margin-bottom:14px;
}
.evo-caption p{
  font-size:15px; color:rgba(12,12,11,0.58); max-width:42ch;
}

/* ================= HERITAGE (full bleed) ================= */
.heritage{
  position:relative;
  /* Same fluid approach as the hero: 88vh on wide screens, eases into
     64.4vw (the image's own ratio) as the window narrows, so the photo
     scales down continuously instead of cropping tighter. min-height
     (not height) means the box will still grow taller if the text ever
     needs more room than this — text can never get clipped. */
  min-height:max(420px, min(88vh, 64.4vw));
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.heritage-media{position:absolute; top:0; right:0; bottom:0; left:0;}
.heritage-media img{width:100%; height:100%; object-fit:cover; object-position:center 70%;}
.heritage-content{
  position:relative; z-index:2; max-width:1600px; width:100%;
  margin:0 auto; padding:0 var(--edge) clamp(40px,6vw,72px);
}
.heritage-content .section-head{max-width:20ch;}

/* On narrow phones the fluid height floor crops in tighter on the photo,
   pushing the headline over the busiest part of the livery. Give the
   text a solid panel in the photo's own tan tone (sampled directly from
   the image) so it reads as a natural continuation of that surface
   rather than a mismatched overlay, with a soft fade at the top edge
   so the car still appears to emerge from behind it. */
@media (max-width: 640px){
  .heritage-content{
    background:linear-gradient(180deg,
      rgba(211,204,197,0) 0%,
      rgba(211,204,197,0.9) 20%,
      rgb(211,204,197) 38%);
    padding-top:64px;
  }
}

/* No gradient veil — the source photo is light enough on its own, so
   text switches to a dark palette instead of darkening the image. */
.heritage--onlight .kicker{color:var(--outlaw-red);}
.heritage--onlight .section-head{color:#0c0c0b;}
.heritage--onlight .body-copy{color:rgba(12,12,11,0.72);}

/* ================= FORM (front/rear) ================= */
/* True edge-to-edge treatment: the heading stays in the normal reading
   column, but the image pair spans the full viewport width for maximum
   scale, side by side. */
.form-section{padding-left:0; padding-right:0;}
.form-section > .section-intro{padding:0 var(--edge);}
.light-section > .form-grid{max-width:none; margin-left:0; margin-right:0;}
.form-grid{
  display:flex; gap:2px;
}
.form-fig{flex:1 1 0;}
.form-fig img{width:100%; height:auto; display:block; object-fit:cover;}

/* ================= CHASSIS / ENGINEERING ================= */
.chassis-section{max-width:1600px; margin:0 auto;}
.chassis-grid{
  display:flex; gap:clamp(32px,5vw,80px);
  align-items:center; margin-bottom:clamp(64px,9vw,120px);
}
.chassis-grid > *{flex:1 1 0;}
.chassis-grid:last-child{margin-bottom:0;}
.chassis-grid.reverse .chassis-plates{order:2;}
.chassis-grid.reverse .chassis-text{order:1;}
.feature-list{list-style:none; margin-top:8px;}
.feature-list li{
  font-family:var(--mono); font-size:13px; letter-spacing:0.02em;
  color:var(--parchment); padding:10px 0 10px 22px; position:relative;
  border-top:1px solid rgba(199,201,196,0.14);
}
.feature-list li:last-child{border-bottom:1px solid rgba(199,201,196,0.14);}
.feature-list li::before{
  content:''; position:absolute; left:0; top:19px; width:6px; height:6px;
  border-radius:50%; background:var(--outlaw-red-bright);
}
.plate{
  border:1px solid rgba(199,201,196,0.16); background:var(--black-soft);
  padding:10px;
}
.plate img{width:100%; filter:grayscale(0.08);}
.plate figcaption{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--parchment-dim); padding:12px 6px 4px;
}

/* ================= SPECIFICATIONS ================= */
.specs-section{padding-left:0; padding-right:0;}
/* Full-bleed banner (same construction as .heritage) flowing straight
   into the stat bar below it, edge to edge, no card, no text overlay. */
.specs-banner{position:relative; width:100%; overflow:hidden;}
.specs-banner img{width:100%; height:auto; display:block;}

.specs-hero{
  display:flex; flex-wrap:wrap; gap:1px;
  background:rgba(199,201,196,0.14);
  border-bottom:1px solid rgba(199,201,196,0.14);
  margin-bottom:clamp(60px,8vw,100px);
}
.specs-hero .spec-big{flex:1 1 240px;}
.spec-big{
  background:var(--black); padding:clamp(28px,4vw,52px) var(--edge);
  display:flex; flex-direction:column; align-items:flex-start;
}
.spec-num{
  font-family:var(--display); font-weight:800; color:var(--parchment);
  font-size:clamp(48px, 6.4vw, 96px); line-height:0.9;
}
.spec-unit{
  font-family:var(--mono); font-size:13px; letter-spacing:0.1em;
  color:var(--outlaw-red-bright); margin-top:8px;
}
.spec-label{
  font-family:var(--sans); font-style:italic; font-size:14px;
  color:var(--parchment-dim); margin-top:14px;
}
.specs-table{
  max-width:1600px; margin:0 auto;
  padding:0 var(--edge);
  display:flex; flex-wrap:wrap; gap:clamp(32px,4vw,64px);
}
.specs-table .specs-col{flex:1 1 220px;}
.specs-col h3{
  font-family:var(--display); font-weight:700; font-size:18px;
  letter-spacing:0.04em; text-transform:uppercase; color:var(--parchment);
  margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid rgba(199,201,196,0.2);
}
.specs-col dl div{
  display:flex; justify-content:space-between; gap:12px;
  padding:11px 0; border-bottom:1px solid rgba(199,201,196,0.1);
}
.specs-col dt{
  font-family:var(--mono); font-size:12px; color:var(--parchment-dim);
}
.specs-col dd{
  font-family:var(--mono); font-size:12.5px; color:var(--parchment);
  text-align:right;
}

/* ================= DESIGNER ================= */
.designer-section{max-width:1600px; margin:0 auto;}

/* Alternating project showcase — same left/right rhythm as the Design
   Evolution section, but in the site's dark register with larger images
   and fuller project write-ups. */
.project-item{
  display:flex; gap:clamp(40px,6vw,90px);
  align-items:center; margin-bottom:clamp(80px,10vw,140px);
}
.project-media{flex:1.3 1 0;}
.project-caption{flex:1 1 0;}
.project-b .project-media{order:2;}
.project-b .project-caption{order:1;}
.project-media img{
  width:100%; height:auto; display:block;
  filter:grayscale(0.08) contrast(1.02);
}
.project-year{
  font-family:var(--mono); font-size:12px; letter-spacing:0.14em;
  color:var(--outlaw-red-bright); display:block; margin-bottom:14px;
}
.project-caption h3{
  font-family:var(--display); font-weight:800; letter-spacing:0.002em;
  font-size:clamp(28px,3.4vw,46px); line-height:1.05;
  color:var(--parchment); margin-bottom:10px;
}
.project-sub{
  font-family:var(--sans); font-style:italic; font-size:15px;
  color:var(--parchment-dim); margin-bottom:16px;
}
.project-caption p{
  font-size:15.5px; color:var(--parchment-dim); max-width:48ch; margin-bottom:22px;
}
.project-tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px;}
.project-tags span, .project-tags a{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--parchment-dim); border:1px solid rgba(199,201,196,0.22); padding:5px 10px;
}
.project-tags a{
  display:inline-block; text-decoration:none;
  transition:color .2s ease, border-color .2s ease;
}
.project-tags a:hover{color:var(--outlaw-red-bright); border-color:var(--outlaw-red-bright);}
.project-link{
  font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--outlaw-red-bright); border-bottom:1px solid var(--outlaw-red-bright);
  padding-bottom:3px; display:inline-block;
  transition:color .2s ease, border-color .2s ease;
}
.project-link:hover{color:var(--parchment); border-color:var(--parchment);}

/* Career & Credentials — runs the full content width, not split into columns */
.designer-grid{padding-top:clamp(20px,3vw,32px);}
.designer-text > .body-copy{max-width:none;}
.designer-highlights{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:rgba(199,201,196,0.14);
  border-top:1px solid rgba(199,201,196,0.14);
  border-bottom:1px solid rgba(199,201,196,0.14);
  margin:32px 0;
}
.highlight{background:var(--black); padding:22px clamp(4px,2vw,28px);}
.highlight h4{
  font-family:var(--display); font-weight:700; font-size:17px;
  color:var(--parchment); margin-bottom:8px; letter-spacing:0.01em;
}
.highlight p{font-size:14px; color:var(--parchment-dim); max-width:60ch;}
.client-line{font-size:13.5px; margin-top:8px;}
.client-line strong{color:var(--parchment); font-weight:600;}

@media (max-width: 900px){
  .project-item{flex-direction:column;}
  .project-b .project-media, .project-b .project-caption{order:initial;}
}

/* ================= FOOTER ================= */
.site-footer{}

/* Designer bio / resume block */
.footer-bio{
  border-top:1px solid rgba(199,201,196,0.12);
  padding:clamp(56px,8vw,88px) var(--edge) clamp(48px,6vw,72px);
}
.footer-bio-inner{max-width:1600px; margin:0 auto; text-align:left;}
.footer-bio-inner .kicker{margin-bottom:14px;}
.footer-bio-inner .section-head{font-size:clamp(28px,3.4vw,46px); margin-bottom:24px;}
.footer-bio-objective{
  max-width:64ch; color:var(--parchment-dim); font-size:15px; line-height:1.7; margin-bottom:24px;
}
.footer-bio-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(32px,4vw,64px);
  margin-top:44px; padding-top:36px; border-top:1px solid rgba(199,201,196,0.14);
}
.footer-bio-col h4{
  font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--outlaw-red-bright); margin-bottom:20px;
}
.footer-bio-list div{margin-bottom:18px;}
.footer-bio-list div:last-child{margin-bottom:0;}
.footer-bio-list dt{
  font-size:14px; color:var(--parchment); font-weight:600; margin-bottom:4px; line-height:1.35;
}
.footer-bio-list dd{
  font-family:var(--mono); font-size:11px; color:var(--parchment-dim);
  letter-spacing:0.02em; line-height:1.5;
}
.footer-bio-tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;}
.footer-bio-tags a{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--parchment-dim); border:1px solid rgba(199,201,196,0.22); padding:5px 10px;
  text-decoration:none; display:inline-block;
  transition:color .2s ease, border-color .2s ease;
}
.footer-bio-tags a:hover{color:var(--outlaw-red-bright); border-color:var(--outlaw-red-bright);}
.footer-bio-coroflot{font-size:13px; color:var(--parchment-dim);}
.footer-bio-coroflot a{
  color:var(--outlaw-red-bright); text-decoration:none; border-bottom:1px solid var(--outlaw-red-bright);
}
.footer-bio-coroflot a:hover{color:var(--parchment); border-color:var(--parchment);}

/* Sign-off */
.footer-inner{
  max-width:1600px; margin:0 auto;
  padding:44px var(--edge) 48px; text-align:center;
  border-top:1px solid rgba(199,201,196,0.12);
}
.footer-mark{
  font-family:var(--display); font-weight:800; letter-spacing:0.1em;
  font-size:clamp(18px,2vw,24px); color:var(--parchment);
}
.footer-tag{
  font-family:var(--sans); font-style:italic; color:var(--outlaw-red-bright);
  font-size:14px; margin-top:8px;
}
.footer-meta{
  font-family:var(--mono); font-size:11px; color:var(--parchment-dim);
  margin-top:20px; letter-spacing:0.04em;
}

@media (max-width: 900px){
  .footer-bio-grid{grid-template-columns:1fr; gap:32px;}
}

/* ================= LIGHTBOX ================= */
.lightbox-img{cursor:zoom-in; transition:opacity .25s ease;}
.lightbox-img:hover{opacity:0.88;}

.lightbox{
  position:fixed; inset:0; z-index:1000;
  background:rgba(6,6,5,0.94);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(24px,6vw,80px);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease;
}
.lightbox.open{opacity:1; visibility:visible;}
.lightbox-content{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,0.5);
  transform:scale(0.96);
  transition:transform .3s ease;
}
.lightbox.open .lightbox-content{transform:scale(1);}
.lightbox-close{
  position:absolute; top:clamp(16px,3vw,32px); right:clamp(16px,3vw,32px);
  z-index:1001;
  width:44px; height:44px;
  background:rgba(12,12,11,0.6); border:1px solid rgba(199,201,196,0.3);
  color:var(--parchment); font-size:28px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.lightbox-close:hover{
  background:var(--outlaw-red); border-color:var(--outlaw-red-bright);
  transform:rotate(90deg);
}

/* ================= SCROLL REVEAL ================= */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:translateY(0);}

/* ================= RESPONSIVE ================= */
@media (max-width: 900px){
  .nav-toggle{display:flex;}
  .nav-links{
    position:fixed; top:0; right:0; height:100svh; width:min(78vw,320px);
    background:rgba(12,12,11,0.98); backdrop-filter:blur(10px);
    flex-direction:column; justify-content:center; align-items:flex-start;
    gap:26px; padding:0 40px;
    transform:translateX(100%); transition:transform .4s cubic-bezier(.2,.7,.2,1);
    border-left:1px solid rgba(199,201,196,0.14);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{font-size:13px;}

  .evo-item,
  .chassis-grid,
  .form-grid{
    flex-direction:column;
  }
  .evo-b .evo-media, .evo-b .evo-caption,
  .chassis-grid.reverse .chassis-plates, .chassis-grid.reverse .chassis-text{
    order:initial;
  }
  .designer-highlights{grid-template-columns:1fr;}

  .specs-hero{flex-direction:column;}
  .specs-table{flex-direction:column; gap:40px;}
}

@media (max-width: 520px){
  .overview-hero-veil{
    background:linear-gradient(180deg, rgba(12,12,11,0.6) 0%, rgba(12,12,11,0.72) 45%, rgba(12,12,11,0.88) 100%);
  }
  .overview-hero-content{padding-top:clamp(40px,10vh,80px); padding-bottom:clamp(40px,10vh,80px);}
}