/* ============================================
   FLEET PAGE
   ============================================ */

.page-header{
  padding: 64px 0 40px;
  border-bottom: 1px solid var(--line-soft);
}
.page-header .eyebrow{
  font-size: 13px; font-weight: 700; color: var(--gold);
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.page-header .eyebrow::before{ content:''; width:26px; height:1px; background:var(--gold); }
.page-header h1{ font-size: clamp(32px, 4.4vw, 52px); max-width: 640px; }
.page-header p{ margin-top:16px; color:var(--muted); font-size:16px; max-width:520px; line-height:1.65; }

/* ============================================
   BROWSE VIEW — 5 separate boxes, shopping-style
   ============================================ */

.fleet-browse-section{ padding: 56px 0 100px; }

.fleet-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.fleet-grid > .fleet-box:nth-child(4),
.fleet-grid > .fleet-box:nth-child(5){
  grid-column: span 1;
}
@media (min-width: 981px){
  .fleet-grid{ grid-template-columns: repeat(6, 1fr); }
  .fleet-box{ grid-column: span 2; }
  .fleet-grid > .fleet-box:nth-child(4){ grid-column: 2 / span 2; }
  .fleet-grid > .fleet-box:nth-child(5){ grid-column: 4 / span 2; }
}

.fleet-box{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
  display: flex;
  flex-direction: column;
}
.fleet-box:hover{ border-color: var(--gold-soft); transform: translateY(-4px); }

.fleet-box-img{
  position: relative;
  height: 190px;
  background: radial-gradient(ellipse at center 62%, #1c1c20 0%, #0a0a0b 80%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 14px;
}
.fleet-box-img img{ max-width: 92%; max-height: 78%; object-fit: contain; position: relative; z-index: 2; }
.fleet-box-img .reflect-copy{ max-width: 92%; max-height: 78%; }

.fleet-box-tag{
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  background: var(--gold);
  color: #17130a;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 5px 11px;
  border-radius: 999px;
}

.fleet-box-body{ padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; }
.fleet-box-body h3{ font-size: 19px; margin-bottom: 8px; }
.fleet-box-body .blurb{ font-size: 13px; color: var(--muted); line-height: 1.55; flex: 1; }

.fleet-box-meta{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.fleet-box-meta .cap{ font-size: 12.5px; color: var(--muted); }
.fleet-box-meta .price{ font-family: var(--display); font-size: 19px; color: var(--gold); }

.fleet-box-select{
  margin-top: 16px;
  width: 100%;
  justify-content: center;
}

@media (max-width: 980px){
  .fleet-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  .fleet-grid{ grid-template-columns: 1fr; }
}

/* ============================================
   GARAGE / STAGE VIEW — appears only after selecting a vehicle
   ============================================ */

.fleet-stage-section{ padding: 40px 0 100px; }

.back-to-fleet{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--ivory-dim);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-bottom: 28px;
  transition: color 0.18s var(--ease);
}
.back-to-fleet:hover{ color: var(--gold); }
.back-to-fleet svg{ width: 16px; height: 16px; }

.stage-area{
  display:grid;
  grid-template-columns: 1fr 260px;
  gap: 20px;
}

.stage{
  position:relative;
  border-radius: var(--radius-md);
  overflow:hidden;
  height: 460px;
  border: 1px solid var(--line);
  background: radial-gradient(ellipse at center 58%, #1c1c20 0%, #08080a 80%);
  perspective: 900px;
}
.stage .floor-glow{
  position:absolute; bottom:60px; left:50%; transform:translateX(-50%);
  width:58%; height:24px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55), transparent 70%);
  filter: blur(2px);
}
.stage-badge{
  position:absolute; top:20px; left:20px; z-index:5;
  background: var(--gold); color:#17130a;
  font-size: 11.5px; font-weight:800; letter-spacing:0.03em;
  padding:6px 14px; border-radius: 999px;
}
.stage-car-wrap{ position:absolute; inset:0; }
.stage-car-img{
  position:absolute; top:52%; left:50%; width:78%; max-width:600px;
  transform: translate(-50%, -55%);
}
.stage-car-img.drive-away{ animation: stageDriveAway 0.5s cubic-bezier(.5,0,.9,.3) forwards; }
.stage-car-img.drive-in{ animation: stageDriveIn 0.75s cubic-bezier(.2,.7,.25,1) forwards; }
@keyframes stageDriveAway{
  0%{ transform: translate(-50%, -55%) scale(1); opacity:1; }
  100%{ transform: translate(-50%, 40%) scale(2.1); opacity:0; }
}
@keyframes stageDriveIn{
  0%{ transform: translate(-50%, -82%) scale(0.15); opacity:0; }
  15%{ opacity:1; }
  70%{ transform: translate(-50%, -57%) scale(1.04); opacity:1; }
  100%{ transform: translate(-50%, -55%) scale(1); opacity:1; }
}
.stage-info{ position:absolute; bottom:22px; left:24px; right:24px; z-index:5; display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.stage-info h2{ font-size: 26px; }
.stage-info .meta{ font-size:13.5px; color:var(--muted); margin-top:6px; }
.stage-info .price{ font-family: var(--display); font-size: 22px; color: var(--gold); }

.stage-sidebar{ display:flex; flex-direction:column; gap:10px; }
.stage-sidebar-title{ font-size:11px; font-weight:700; letter-spacing:0.03em; color:var(--muted); margin-bottom:2px; }
.stage-option{
  display:flex; align-items:center; gap:10px;
  background: var(--panel); border:1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px; cursor:pointer;
  transition: border-color 0.18s var(--ease), transform 0.15s var(--ease);
}
.stage-option:hover{ border-color: var(--gold-soft); transform: translateX(-2px); }
.stage-option.active{ border-color: var(--gold); background:#1d1a10; }
.stage-option img{ width:64px; height:40px; object-fit:contain; }
.stage-option .opt-name{ font-size:13px; font-weight:700; }
.stage-option .opt-price{ font-size:11.5px; color:var(--muted); }

@media (max-width: 900px){
  .stage-area{ grid-template-columns: 1fr; }
  .stage{ height: 360px; }
  .stage-sidebar{ flex-direction:row; flex-wrap:wrap; }
  .stage-option{ flex: 1 1 45%; }
}

/* ---------- dynamic details panel (below stage) ---------- */

.stage-details{
  margin-top: 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 30px 32px;
}
.details-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
}
.details-features h4, .details-policies h4{
  font-size: 12px; font-weight:700; letter-spacing:0.02em; color:var(--muted); margin-bottom:14px;
}
.feature-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.feature-list li{
  font-size: 14px; color: var(--ivory-dim);
  display:flex; align-items:flex-start; gap:8px;
}
.feature-list li::before{
  content:''; width:5px; height:5px; border-radius:50%;
  background: var(--gold); margin-top:7px; flex-shrink:0;
}
.policy-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.policy-list li{ font-size:13.5px; color:var(--muted); line-height:1.55; }
.policy-list strong{ color:var(--ivory-dim); font-weight:700; }

.stage-book-btn{ margin-top: 24px; }

@media (max-width: 900px){
  .details-grid{ grid-template-columns: 1fr; gap: 24px; }
  .feature-list{ grid-template-columns: 1fr; }
  .stage-details{ padding: 24px; }
}