/* ============================================================
   VELOCE — LUXURY EDITORIAL STYLESHEET
   Color Palette: Deep Black · Warm Gold · Ivory · Slate
   Fonts: Cormorant Garamond (display) · Barlow (body)
   ============================================================ */

:root {
  --black:       #080808;
  --black2:      #0F0F0F;
  --black3:      #161616;
  --black4:      #1E1E1E;
  --black5:      #252525;
  --gold:        #C9A84C;
  --gold-light:  #E2C06A;
  --gold-pale:   #F5EDD3;
  --ivory:       #F2EDE4;
  --ivory2:      #E8E0D0;
  --white:       #FFFFFF;
  --gray:        #6B6B6B;
  --gray-mid:    #4A4A4A;
  --gray-light:  #ADADAD;

  --fd:   'Cormorant Garamond', serif;
  --fb:   'Barlow', sans-serif;
  --fc:   'Barlow Condensed', sans-serif;

  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t:    0.35s var(--ease);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }

body {
  font-family: var(--fb);
  background: var(--black);
  color: var(--ivory);
  overflow-x: hidden;
  cursor: none;
}
@media (hover:none) { body { cursor: auto; } }

img { display:block; max-width:100%; object-fit:cover; }
a   { text-decoration:none; color:inherit; }
ul  { list-style:none; }
button { cursor:none; border:none; background:none; font-family:var(--fb); }
select,input,textarea { font-family:var(--fb); outline:none; }

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--black2); }
::-webkit-scrollbar-thumb { background:var(--gold); }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor {
  width: 10px; height: 10px;
  background: var(--gold);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width 0.2s, height 0.2s, opacity 0.2s;
  mix-blend-mode: difference;
}
.cursor-trail {
  width: 36px; height: 36px;
  border: 1px solid rgba(201,168,76,0.5);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%,-50%);
  transition: transform 0.12s var(--ease), width 0.3s, height 0.3s, opacity 0.3s;
}
body:has(a:hover) .cursor,
body:has(button:hover) .cursor  { width:20px; height:20px; }
body:has(a:hover) .cursor-trail,
body:has(button:hover) .cursor-trail { width:60px; height:60px; opacity:0.4; }

/* ============================================================
   LOADER
   ============================================================ */
.loader {
  position: fixed; inset: 0;
  background: var(--black);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader.gone { opacity:0; pointer-events:none; transition:opacity 0.7s 0.2s; }

.loader-inner { text-align:center; }
.loader-logo {
  font-family: var(--fc);
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: 14px;
  color: var(--gold);
  margin-bottom: 2.5rem;
  opacity:0;
  animation: fadeIn 0.5s 0.2s forwards;
}
.loader-bar {
  width: 260px; height: 1px;
  background: rgba(201,168,76,0.2);
  margin: 0 auto 1.2rem;
  position: relative;
  overflow: hidden;
}
.loader-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--gold);
  transition: width 0.05s linear;
}
.loader-pct {
  font-family: var(--fc);
  font-size: 0.75rem;
  letter-spacing: 3px;
  color: var(--gold);
  opacity: 0.6;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.nav {
  position: fixed; top:0; left:0; right:0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 4%;
  transition: var(--t);
}
.nav.solid {
  background: rgba(8,8,8,0.96);
  backdrop-filter: blur(24px);
  padding: 1rem 4%;
  border-bottom: 1px solid rgba(201,168,76,0.12);
}
.nav-logo {
  font-family: var(--fc);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 8px;
  color: var(--gold);
  transition: opacity 0.2s;
}
.nav-logo:hover { opacity:0.75; }

.nav-menu {
  display: flex;
  gap: 0.2rem;
  align-items: center;
}
.nav-menu a {
  font-family: var(--fc);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(242,237,228,0.6);
  padding: 8px 18px;
  position: relative;
  transition: color 0.25s;
}
.nav-menu a::after {
  content:'';
  position:absolute;
  bottom:4px; left:18px; right:18px;
  height:1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}
.nav-menu a:hover { color: var(--ivory); }
.nav-menu a:hover::after { transform:scaleX(1); transform-origin: left; }

.nav-right {
  display:flex;
  align-items:center;
  gap:1.5rem;
}
.nav-line {
  width:1px; height:20px;
  background: rgba(201,168,76,0.3);
}
.nav-tel {
  font-family: var(--fc);
  font-size: 0.75rem;
  letter-spacing: 2px;
  color: var(--gold);
  display:flex;
  align-items:center;
  gap:8px;
  transition: opacity 0.2s;
}
.nav-tel:hover { opacity:0.7; }

.nav-burger {
  display: none;
  flex-direction: column;
  gap: 6px;
  z-index: 1001;
  cursor: pointer;
}
.nav-burger span {
  width:22px; height:1.5px;
  background: var(--gold);
  display:block;
  transition: var(--t);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg { position:absolute; inset:0; }
.hero-bg-img {
  width:100%; height:100%;
  object-fit:cover;
  transform: scale(1.08);
  animation: heroZoom 12s ease-out forwards;
}
.hero-bg-overlay {
  position:absolute; inset:0;
  background: linear-gradient(
    105deg,
    rgba(8,8,8,0.92) 0%,
    rgba(8,8,8,0.7) 50%,
    rgba(8,8,8,0.3) 100%
  );
}
.hero-grain {
  position:absolute; inset:0;
  opacity:0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 180px;
  pointer-events:none;
}

.hero-content {
  position:relative; z-index:2;
  padding: 0 4%;
  max-width: 780px;
  padding-top: 8rem;
}
.hero-eyebrow {
  display:flex;
  align-items:center;
  gap:12px;
  font-family: var(--fc);
  font-size: 0.7rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2rem;
  opacity:0;
  animation: fadeUp 0.8s 1.5s forwards;
}
.dot-pulse {
  width:8px; height:8px;
  background:var(--gold);
  border-radius:50%;
  animation: pulse 2s infinite;
}

.hero-title {
  display:flex;
  flex-direction:column;
  gap:0;
  margin-bottom: 1.8rem;
}
.hero-title .line {
  font-family: var(--fd);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -1px;
  opacity:0;
  overflow:hidden;
}
.l1 {
  font-size: clamp(4rem, 9vw, 9rem);
  color: var(--ivory);
  animation: slideRight 0.9s 1.7s forwards;
}
.l2 {
  font-size: clamp(5rem, 12vw, 13rem);
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
  animation: slideRight 0.9s 1.9s forwards;
  margin-left: -4px;
}
.l3 {
  font-size: clamp(3rem, 7vw, 7.5rem);
  font-weight: 700;
  color: var(--ivory);
  letter-spacing: 6px;
  animation: slideRight 0.9s 2.1s forwards;
}

.hero-body {
  font-family: var(--fb);
  font-weight: 300;
  font-size: 1rem;
  color: rgba(242,237,228,0.6);
  line-height: 1.8;
  margin-bottom: 2.5rem;
  opacity:0;
  animation: fadeUp 0.8s 2.3s forwards;
}

.hero-cta-wrap {
  display:flex;
  gap:1.2rem;
  flex-wrap:wrap;
  opacity:0;
  animation: fadeUp 0.8s 2.5s forwards;
}
.cta-gold {
  display:inline-flex;
  align-items:center;
  gap:12px;
  background: var(--gold);
  color: var(--black);
  padding: 15px 34px;
  font-family: var(--fc);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  transition: var(--t);
  position:relative;
  overflow:hidden;
}
.cta-gold::before {
  content:'';
  position:absolute; inset:0;
  background: var(--gold-light);
  transform:translateX(-100%);
  transition:transform 0.4s var(--ease);
}
.cta-gold:hover::before { transform:translateX(0); }
.cta-gold span, .cta-gold i { position:relative; z-index:1; }
.cta-gold:hover { box-shadow: 0 12px 40px rgba(201,168,76,0.4); }

.cta-ghost {
  display:inline-flex;
  align-items:center;
  gap:10px;
  color: var(--ivory);
  padding: 15px 28px;
  font-family: var(--fc);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid rgba(242,237,228,0.25);
  transition: var(--t);
}
.cta-ghost:hover { border-color:var(--gold); color:var(--gold); }

/* HERO SIDEBAR */
.hero-sidebar {
  position:absolute;
  right:4%;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:1.5rem;
  opacity:0;
  animation: fadeIn 1s 2.7s forwards;
}
.hs-item { text-align:right; }
.hs-num {
  font-family: var(--fd);
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--ivory);
  display:block;
  line-height:1;
}
.hs-num sup { font-size:0.6em; color:var(--gold); }
.hs-label {
  font-family: var(--fc);
  font-size: 0.65rem;
  letter-spacing: 2.5px;
  text-transform:uppercase;
  color: rgba(242,237,228,0.45);
}
.hs-sep {
  width:1px; height:40px;
  background: rgba(201,168,76,0.3);
  align-self:flex-end;
}

/* SCROLL HINT */
.hero-scroll {
  position:absolute;
  bottom:2.5rem;
  left:4%;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  opacity:0;
  animation: fadeIn 1s 3s forwards;
}
.scroll-line {
  width:1px; height:50px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollPulse 2s infinite;
}
.hero-scroll span {
  font-family: var(--fc);
  font-size:0.6rem;
  letter-spacing:3px;
  text-transform:uppercase;
  color: rgba(242,237,228,0.4);
  writing-mode:vertical-lr;
}

/* FEATURED CARD */
.hero-featured-car {
  position:absolute;
  bottom:3rem;
  right:4%;
  z-index:2;
  background: rgba(8,8,8,0.7);
  backdrop-filter:blur(20px);
  border:1px solid rgba(201,168,76,0.2);
  padding: 1.4rem 2rem;
  min-width:240px;
  opacity:0;
  animation: fadeUp 0.8s 2.8s forwards;
}
.hfc-label {
  font-family: var(--fc);
  font-size:0.6rem;
  letter-spacing:3px;
  color:var(--gold);
  margin-bottom:0.5rem;
}
.hfc-name {
  font-family: var(--fd);
  font-size:1.4rem;
  font-weight:600;
  color:var(--ivory);
  margin-bottom:0.2rem;
}
.hfc-price {
  font-family: var(--fc);
  font-size:0.85rem;
  color:var(--gold);
  letter-spacing:1px;
  margin-bottom:1rem;
}
.hfc-link {
  font-family: var(--fc);
  font-size:0.68rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--ivory);
  display:flex;
  align-items:center;
  gap:8px;
  transition: color 0.2s, gap 0.2s;
}
.hfc-link:hover { color:var(--gold); gap:14px; }

/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  overflow:hidden;
  background: var(--gold);
  padding:0.75rem 0;
  white-space:nowrap;
}
.ticker-track {
  display:inline-flex;
  gap:2.5rem;
  align-items:center;
  animation: ticker 25s linear infinite;
}
.ticker-track span {
  font-family: var(--fc);
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:4px;
  color: var(--black);
}
.ticker-track .bull {
  font-size:0.45rem;
  opacity:0.5;
}

/* ============================================================
   COLLECTION
   ============================================================ */
.collection {
  padding: 7rem 4%;
  background: var(--black2);
}
.col-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:3rem;
  margin-bottom:3rem;
  flex-wrap:wrap;
}
.col-header-right p {
  font-size:0.9rem;
  color:var(--gray-light);
  max-width:400px;
  line-height:1.7;
  margin-bottom:1.5rem;
  font-weight:300;
}
.col-filters {
  display:flex;
  gap:0.5rem;
  flex-wrap:wrap;
}
.cf {
  font-family: var(--fc);
  font-size:0.68rem;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gray-light);
  padding:8px 18px;
  border:1px solid rgba(255,255,255,0.1);
  transition: var(--t);
  cursor:pointer;
}
.cf:hover { border-color:var(--gold); color:var(--gold); }
.cf.active { background:var(--gold); color:var(--black); border-color:var(--gold); }

/* EYEBROW */
.eyebrow {
  font-family: var(--fc);
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:0.8rem;
  display:block;
}
.section-heading {
  font-family: var(--fd);
  font-size: clamp(2.5rem,5vw,4.5rem);
  font-weight:300;
  line-height:1.05;
  color:var(--ivory);
  letter-spacing:-0.5px;
}
.section-heading em {
  font-style:italic;
  color:var(--gold);
}

/* CARS GRID */
.cars-grid {
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:1.5px;
  margin-bottom:3rem;
  background: rgba(201,168,76,0.08);
}
.car-card {
  background: var(--black3);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  opacity:0;
  animation: fadeIn 0.6s forwards;
  transition: var(--t);
  aspect-ratio:4/3;
}
.car-card:hover { z-index:2; }
.car-card:hover .cc-img { transform:scale(1.07); }
.car-card:hover .cc-overlay { opacity:1; }
.car-card:hover .cc-info { transform:translateY(0); opacity:1; }
.car-card:hover .cc-cta { opacity:1; transform:translateY(0); }

.cc-img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 0.7s var(--ease);
  display:block;
}
.cc-overlay {
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(8,8,8,0.95) 0%, rgba(8,8,8,0.4) 50%, transparent 100%);
  opacity:0.6;
  transition:opacity 0.4s;
}
.cc-top {
  position:absolute;
  top:16px; left:16px;
  display:flex;
  gap:8px;
  z-index:2;
}
.cc-badge {
  font-family:var(--fc);
  font-size:0.58rem;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:5px 12px;
}
.cc-badge.new-badge { background:var(--gold); color:var(--black); }
.cc-badge.used-badge { background:rgba(255,255,255,0.12); color:var(--ivory); border:1px solid rgba(255,255,255,0.15); }

.cc-fav {
  position:absolute;
  top:14px; right:14px;
  width:34px; height:34px;
  background:rgba(8,8,8,0.5);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.1);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,0.5);
  font-size:0.85rem;
  transition: var(--t);
  z-index:3;
  cursor:pointer;
}
.cc-fav:hover { color:#EF4444; border-color:#EF4444; background:rgba(239,68,68,0.15); }
.cc-fav.active { color:#EF4444; border-color:#EF4444; }

.cc-info {
  position:absolute;
  bottom:0; left:0; right:0;
  padding:1.5rem;
  z-index:3;
  transform:translateY(8px);
  opacity:0.85;
  transition: transform 0.4s var(--ease), opacity 0.4s;
}
.cc-type {
  font-family:var(--fc);
  font-size:0.6rem;
  letter-spacing:3px;
  color:var(--gold);
  margin-bottom:4px;
  text-transform:uppercase;
}
.cc-name {
  font-family:var(--fd);
  font-size:1.4rem;
  font-weight:600;
  color:var(--white);
  margin-bottom:10px;
  line-height:1.1;
}
.cc-meta {
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}
.cc-meta span {
  font-family:var(--fc);
  font-size:0.62rem;
  letter-spacing:1.5px;
  color:rgba(242,237,228,0.5);
  display:flex;
  align-items:center;
  gap:5px;
}
.cc-meta i { color:var(--gold); font-size:0.6rem; }
.cc-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.cc-price {
  font-family:var(--fd);
  font-size:1.6rem;
  font-weight:600;
  color:var(--gold);
  line-height:1;
}
.cc-price small {
  display:block;
  font-family:var(--fc);
  font-size:0.55rem;
  letter-spacing:2px;
  color:rgba(201,168,76,0.6);
  font-weight:500;
}
.cc-cta {
  font-family:var(--fc);
  font-size:0.62rem;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--black);
  background:var(--gold);
  padding:9px 18px;
  display:flex;
  align-items:center;
  gap:7px;
  opacity:0;
  transform:translateY(6px);
  transition:opacity 0.4s, transform 0.4s var(--ease), background 0.2s;
  cursor:pointer;
  border:none;
}
.cc-cta:hover { background:var(--gold-light); }

.col-footer { text-align:center; }
.btn-more {
  font-family:var(--fc);
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--gold);
  padding:14px 40px;
  border:1px solid rgba(201,168,76,0.35);
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition: var(--t);
  cursor:pointer;
}
.btn-more:hover { background:var(--gold); color:var(--black); }

/* ============================================================
   EDITORIAL
   ============================================================ */
.editorial {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:90vh;
  background:var(--black);
}
.ed-left { position:relative; overflow:hidden; }
.ed-img { width:100%; height:100%; object-fit:cover; }
.ed-img-caption {
  position:absolute;
  bottom:2rem; right:2rem;
  background:rgba(8,8,8,0.8);
  backdrop-filter:blur(10px);
  border:1px solid rgba(201,168,76,0.2);
  padding:10px 18px;
  font-family:var(--fc);
  font-size:0.65rem;
  letter-spacing:2px;
  color:var(--gold);
  text-transform:uppercase;
}
.ed-right {
  padding:6rem 5%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background: var(--black2);
}
.ed-body {
  font-weight:300;
  font-size:1rem;
  color:var(--gray-light);
  line-height:1.85;
  margin-top:1.5rem;
  max-width:440px;
}
.ed-stats {
  margin-top:3rem;
  display:flex;
  flex-direction:column;
  gap:1.4rem;
}
.estat {
  display:flex;
  align-items:flex-start;
  gap:1.2rem;
  opacity:0;
  transform:translateX(-16px);
  transition: opacity 0.6s, transform 0.6s var(--ease);
}
.estat.visible { opacity:1; transform:translateX(0); }
.estat > i {
  font-size:1.1rem;
  color:var(--gold);
  margin-top:3px;
  width:20px;
  flex-shrink:0;
}
.estat strong {
  display:block;
  font-size:0.9rem;
  font-weight:600;
  color:var(--ivory);
  margin-bottom:3px;
}
.estat span { font-size:0.82rem; color:var(--gray); font-weight:300; line-height:1.5; }

/* ============================================================
   SHOWROOM
   ============================================================ */
.showroom {
  padding:7rem 4%;
  background:var(--black3);
}
.sr-top { margin-bottom:3rem; }
.sr-grid {
  display:grid;
  grid-template-columns:1.6fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:1.5px;
  height:580px;
  margin-bottom:2.5rem;
  background:rgba(201,168,76,0.08);
}
.sr-card {
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.sr-card.big { grid-row:span 2; }
.sr-card img { width:100%; height:100%; object-fit:cover; transition:transform 0.7s var(--ease); }
.sr-card:hover img { transform:scale(1.06); }
.sr-card-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(8,8,8,0.85) 0%, transparent 60%);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:1.5rem 1.8rem;
  transition:background 0.3s;
}
.sr-card:hover .sr-card-overlay { background:linear-gradient(to top, rgba(8,8,8,0.95) 0%, rgba(8,8,8,0.3) 60%); }
.sr-card-overlay span {
  font-family:var(--fc);
  font-size:0.6rem;
  letter-spacing:2.5px;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:4px;
}
.sr-card-overlay h3 {
  font-family:var(--fd);
  font-size:1.4rem;
  font-weight:600;
  color:var(--ivory);
}

.sr-info {
  display:flex;
  gap:2rem;
  flex-wrap:wrap;
}
.sri {
  display:flex;
  align-items:center;
  gap:14px;
  padding:1.2rem 1.8rem;
  background:var(--black4);
  border:1px solid rgba(201,168,76,0.1);
  flex:1;
  min-width:220px;
  transition: var(--t);
}
.sri:hover { border-color:var(--gold); background:rgba(201,168,76,0.05); }
.sri > i { font-size:1rem; color:var(--gold); flex-shrink:0; }
.sri strong { display:block; font-size:0.82rem; font-weight:600; color:var(--ivory); margin-bottom:3px; }
.sri span { font-size:0.8rem; color:var(--gray); font-weight:300; }

/* ============================================================
   HERITAGE
   ============================================================ */
.heritage {
  padding:7rem 4%;
  background:var(--black);
}
.heritage-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6rem;
  align-items:center;
}
.heritage-body {
  font-size:0.95rem;
  color:var(--gray-light);
  line-height:1.85;
  margin-top:1.2rem;
  font-weight:300;
  max-width:440px;
}
.heritage-timeline {
  display:flex;
  flex-direction:column;
  gap:0;
  position:relative;
}
.heritage-timeline::before {
  content:'';
  position:absolute;
  left:calc(4.5rem + 0px);
  top:12px; bottom:12px;
  width:1px;
  background:linear-gradient(to bottom, var(--gold), rgba(201,168,76,0.1));
}
.tl-item {
  display:grid;
  grid-template-columns:4.5rem 1px 1fr;
  gap:0 1.5rem;
  padding:1.5rem 0;
  align-items:start;
  opacity:0;
  transform:translateX(20px);
  transition:opacity 0.6s, transform 0.6s var(--ease);
}
.tl-item.visible { opacity:1; transform:translateX(0); }
.tl-year {
  font-family:var(--fd);
  font-size:1.1rem;
  font-weight:600;
  color:var(--gold);
  text-align:right;
  line-height:1;
  padding-top:2px;
}
.tl-dot {
  width:10px; height:10px;
  background:var(--black);
  border:2px solid rgba(201,168,76,0.4);
  border-radius:50%;
  margin-top:4px;
  justify-self:center;
  position:relative;
}
.tl-dot.active { background:var(--gold); border-color:var(--gold); box-shadow:0 0 12px rgba(201,168,76,0.6); }
.tl-content strong { display:block; font-size:0.92rem; font-weight:600; color:var(--ivory); margin-bottom:5px; }
.tl-content p { font-size:0.82rem; color:var(--gray); font-weight:300; line-height:1.6; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials {
  padding:7rem 4%;
  background: var(--black2);
}
.t-header { margin-bottom:3.5rem; }
.t-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5px;
  background:rgba(201,168,76,0.07);
}
.tq {
  background:var(--black3);
  padding:2.5rem;
  transition: var(--t);
}
.tq:hover { background:var(--black4); }
.tq-gold { background:var(--gold); }
.tq-gold:hover { background:var(--gold-light); }
.tq-icon {
  font-size:1.5rem;
  color:rgba(201,168,76,0.3);
  margin-bottom:1.5rem;
  display:block;
}
.tq-gold .tq-icon { color:rgba(8,8,8,0.2); }
.tq > p {
  font-family:var(--fd);
  font-size:1.15rem;
  font-weight:300;
  font-style:italic;
  color:var(--ivory);
  line-height:1.7;
  margin-bottom:2rem;
}
.tq-gold > p { color:var(--black); }
.tq-author { display:flex; align-items:center; gap:14px; }
.tq-av {
  width:44px; height:44px;
  background:rgba(201,168,76,0.15);
  border:1px solid rgba(201,168,76,0.3);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--fc);
  font-size:0.75rem;
  font-weight:700;
  color:var(--gold);
  flex-shrink:0;
}
.tq-gold .tq-av { background:rgba(8,8,8,0.2); border-color:rgba(8,8,8,0.15); color:var(--black); }
.tq-author strong { display:block; font-size:0.88rem; font-weight:600; color:var(--ivory); }
.tq-gold .tq-author strong { color:var(--black); }
.tq-author span { font-family:var(--fc); font-size:0.65rem; letter-spacing:1.5px; color:var(--gold); text-transform:uppercase; }
.tq-gold .tq-author span { color:rgba(8,8,8,0.6); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  position:relative;
  overflow:hidden;
}
.contact-bg { position:absolute; inset:0; }
.contact-bg img { width:100%; height:100%; object-fit:cover; }
.contact-bg-overlay {
  position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(8,8,8,0.97) 0%, rgba(8,8,8,0.88) 50%, rgba(8,8,8,0.75) 100%);
}
.contact-inner {
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:5rem;
  padding:7rem 4%;
  align-items:flex-start;
}
.contact-details {
  margin-top:2.5rem;
  display:flex;
  flex-direction:column;
  gap:0.8rem;
}
.cd {
  display:flex;
  align-items:center;
  gap:14px;
  font-size:0.88rem;
  color:rgba(242,237,228,0.65);
  transition:color 0.2s;
}
.cd:hover { color:var(--gold); }
.cd > i { color:var(--gold); font-size:0.85rem; width:16px; }
.contact-social {
  display:flex;
  gap:0.7rem;
  margin-top:2rem;
}
.contact-social a {
  width:38px; height:38px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(201,168,76,0.15);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(242,237,228,0.45);
  font-size:0.85rem;
  transition: var(--t);
}
.contact-social a:hover { background:var(--gold); color:var(--black); border-color:var(--gold); }

.enquiry-form {
  background:rgba(22,22,22,0.9);
  backdrop-filter:blur(20px);
  border:1px solid rgba(201,168,76,0.12);
  padding:2.5rem;
}
.ef-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.ef-group {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:1.2rem;
}
.ef-group label {
  font-family:var(--fc);
  font-size:0.62rem;
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:rgba(201,168,76,0.7);
}
.ef-group input,
.ef-group select,
.ef-group textarea {
  background:rgba(255,255,255,0.03);
  border:none;
  border-bottom:1px solid rgba(255,255,255,0.1);
  color:var(--ivory);
  padding:12px 0;
  font-size:0.9rem;
  font-weight:300;
  transition:border-color 0.25s;
  resize:vertical;
}
.ef-group input:focus,
.ef-group select:focus,
.ef-group textarea:focus { border-bottom-color:var(--gold); }
.ef-group input::placeholder,
.ef-group textarea::placeholder { color:rgba(255,255,255,0.2); }
.ef-group select option { background:var(--black3); }

.ef-submit {
  width:100%;
  background:var(--gold);
  color:var(--black);
  padding:16px;
  font-family:var(--fc);
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  transition: var(--t);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  border:none;
}
.ef-submit::before {
  content:'';
  position:absolute; inset:0;
  background:var(--gold-light);
  transform:translateX(-100%);
  transition:transform 0.4s var(--ease);
}
.ef-submit:hover::before { transform:translateX(0); }
.ef-submit span, .ef-submit i { position:relative; z-index:1; }
.ef-submit:hover { box-shadow:0 12px 40px rgba(201,168,76,0.35); }

.ef-success {
  display:none;
  align-items:center;
  gap:10px;
  background:rgba(201,168,76,0.1);
  border:1px solid rgba(201,168,76,0.3);
  color:var(--gold);
  padding:12px 18px;
  font-family:var(--fc);
  font-size:0.7rem;
  letter-spacing:1.5px;
  margin-top:1rem;
}
.ef-success i { font-size:1rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background:var(--black); }
.footer-top {
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:3rem;
  padding:5rem 4%;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.footer-logo {
  font-family:var(--fc);
  font-size:2rem;
  font-weight:800;
  letter-spacing:10px;
  color:var(--gold);
  margin-bottom:1rem;
}
.ft-brand p {
  font-size:0.85rem;
  color:var(--gray);
  font-weight:300;
  line-height:1.7;
  max-width:260px;
}
.ft-social {
  display:flex;
  gap:0.6rem;
  margin-top:1.8rem;
}
.ft-social a {
  width:34px; height:34px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.07);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gray);
  font-size:0.8rem;
  transition: var(--t);
}
.ft-social a:hover { background:var(--gold); color:var(--black); border-color:var(--gold); }
.ft-col h4 {
  font-family:var(--fc);
  font-size:0.65rem;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--ivory);
  margin-bottom:1.5rem;
}
.ft-col a {
  display:block;
  font-size:0.85rem;
  color:var(--gray);
  font-weight:300;
  margin-bottom:0.65rem;
  transition:color 0.2s;
}
.ft-col a:hover { color:var(--gold); }
.footer-bottom {
  padding:1.5rem 4%;
  display:flex;
  justify-content:space-between;
  font-family:var(--fc);
  font-size:0.62rem;
  letter-spacing:2px;
  color:rgba(255,255,255,0.2);
  text-transform:uppercase;
  flex-wrap:wrap;
  gap:0.5rem;
}

/* ============================================================
   BACK TO TOP
   ============================================================ */
.btt {
  position:fixed;
  bottom:2rem; right:2rem;
  width:44px; height:44px;
  background:var(--gold);
  color:var(--black);
  font-size:0.8rem;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:500;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition: var(--t);
  cursor:pointer;
  border:none;
}
.btt.show { opacity:1; transform:translateY(0); pointer-events:all; }
.btt:hover { background:var(--gold-light); box-shadow:0 8px 24px rgba(201,168,76,0.4); }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.9);
  backdrop-filter:blur(16px);
  z-index:2000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:2rem;
}
.modal-overlay.open { display:flex; }
.modal-box {
  background:var(--black2);
  border:1px solid rgba(201,168,76,0.15);
  max-width:700px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  position:relative;
  animation:modalIn 0.35s var(--ease);
}
.modal-close-btn {
  position:absolute;
  top:14px; right:14px;
  width:34px; height:34px;
  background:rgba(255,255,255,0.05);
  color:var(--ivory);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.9rem;
  z-index:2;
  transition: var(--t);
  border:1px solid rgba(255,255,255,0.08);
  cursor:pointer;
}
.modal-close-btn:hover { background:var(--gold); color:var(--black); border-color:var(--gold); }
.modal-img { width:100%; height:280px; object-fit:cover; }
.modal-body-inner { padding:2rem 2.2rem 2.5rem; }
.modal-make {
  font-family:var(--fc);
  font-size:0.62rem;
  letter-spacing:3px;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:6px;
}
.modal-car-name {
  font-family:var(--fd);
  font-size:2.2rem;
  font-weight:600;
  color:var(--ivory);
  margin-bottom:1.5rem;
  line-height:1.05;
}
.modal-specs {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(201,168,76,0.08);
  margin-bottom:1.5rem;
}
.ms {
  background:var(--black3);
  padding:1rem 1.2rem;
  text-align:center;
}
.ms-icon { color:var(--gold); font-size:1rem; margin-bottom:6px; }
.ms-val { font-family:var(--fd); font-size:1.2rem; color:var(--ivory); display:block; }
.ms-key { font-family:var(--fc); font-size:0.58rem; letter-spacing:2px; color:var(--gray); text-transform:uppercase; }
.modal-desc { font-size:0.88rem; font-weight:300; color:var(--gray-light); line-height:1.8; margin-bottom:1.8rem; }
.modal-footer-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,0.06);
  gap:1rem;
}
.modal-price-num {
  font-family:var(--fd);
  font-size:2.5rem;
  font-weight:600;
  color:var(--gold);
  line-height:1;
}
.modal-price-label {
  font-family:var(--fc);
  font-size:0.6rem;
  letter-spacing:2px;
  color:rgba(201,168,76,0.5);
  text-transform:uppercase;
}
.modal-actions { display:flex; gap:0.75rem; }

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes fadeUp  { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }
@keyframes heroZoom { from{transform:scale(1.08)} to{transform:scale(1)} }
@keyframes ticker  { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes pulse   { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }
@keyframes scrollPulse { 0%,100%{opacity:0.6;transform:scaleY(1)} 50%{opacity:1;transform:scaleY(0.7)} }
@keyframes modalIn { from{opacity:0;transform:scale(0.97) translateY(16px)} to{opacity:1;transform:scale(1) translateY(0)} }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px) {
  .cars-grid { grid-template-columns:repeat(2,1fr); }
  .editorial { grid-template-columns:1fr; }
  .ed-left { height:50vh; }
  .heritage-inner { grid-template-columns:1fr; gap:4rem; }
  .footer-top { grid-template-columns:1fr 1fr; gap:2.5rem; }
  .contact-inner { grid-template-columns:1fr; gap:3rem; }
}
@media(max-width:900px) {
  .hero-sidebar { display:none; }
  .t-grid { grid-template-columns:1fr; gap:1.5px; }
  .sr-grid { grid-template-columns:1fr; grid-template-rows:auto; height:auto; }
  .sr-card { height:250px; }
  .sr-card.big { height:320px; grid-row:span 1; }
}
@media(max-width:768px) {
  .nav-menu { display:none; flex-direction:column; gap:0.5rem; }
  .nav-menu.open {
    display:flex;
    position:fixed; top:0; left:0; right:0; bottom:0;
    background:rgba(8,8,8,0.99);
    align-items:center; justify-content:center;
    z-index:999;
    font-size:1.3rem;
  }
  .nav-menu.open a { font-size:0.9rem; padding:16px 32px; letter-spacing:3px; }
  .nav-tel { display:none; }
  .nav-line { display:none; }
  .nav-burger { display:flex; }
  .cars-grid { grid-template-columns:1fr; }
  .ef-row { grid-template-columns:1fr; }
  .modal-specs { grid-template-columns:repeat(2,1fr); }
  .footer-top { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; gap:0.4rem; text-align:center; }
  .hero-featured-car { display:none; }
  .cursor, .cursor-trail { display:none; }
  body { cursor:auto; }
  button { cursor:pointer; }
}
@media(max-width:480px) {
  .section-heading { font-size:2.4rem; }
  .l1 { font-size:3rem; }
  .l2 { font-size:4rem; }
  .l3 { font-size:2.5rem; }
  .col-header { flex-direction:column; align-items:flex-start; }
}
