/* ================= 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;
  /* Fluid height: on wide/short screens this is 100svh (full-screen
     cinematic hero, unchanged). As the window narrows, 64.8vw (the
     image's own aspect ratio) becomes the smaller value and takes over,
     so the box shrinks continuously with width instead of snapping at
     a breakpoint — and since the box ratio now tracks the image ratio,
     the photo stays essentially uncropped rather than zooming in. */
  height:max(480px, min(100svh, 64.8vw));
  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;
  /* Same fluid logic as the box height: holds at the desktop offset
     (8vh + 250px) on wide screens, eases down smoothly as the window
     narrows so the title stack still fits inside the shorter box —
     it's fine, and expected, for it to sit closer over the car on
     small screens rather than leaving the photo. */
  margin-top:min(24vw, calc(8vh + 250px));
}
.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;}

/* 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);}
}