/* Reference patterns: Aceternity Apple Cards Carousel + Card Hover Effect;
   Motion Primitives Animated Background. Adapted to Privé in vanilla JS/GSAP.
   Reference decisions and source links: audit/fleet-redesign-2026-09-07.md. */
.fleet-showcase { padding: 86px 0 56px; background: #111f3a; color: #f7f2e8; }
.fleet-showcase .section-shell { width: calc(100% - 96px); max-width: 1280px; }
.fleet-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 38px; }
.fleet-eyebrow { margin: 0 0 18px; color: #d6bd89; font-size: 13px; letter-spacing: .035em; }
.fleet-heading h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 3.25vw, 48px); letter-spacing: -.035em; line-height: 1.18; }
.fleet-heading h2 em { color: #d9c295; font-weight: 400; }
.fleet-heading > p { margin: 0 0 4px; max-width: 290px; color: #c3c9d1; font-size: 15px; line-height: 1.8; }
.fleet-rail { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; padding: 7px; margin: -7px; border-radius: 24px; }
.fleet-rail:focus-visible { outline: 2px solid #d9c295; outline-offset: 4px; }
.fleet-active-surface { position: absolute; z-index: -1; top: 0; left: 0; background: #d9c295; border-radius: 23px; opacity: 0; pointer-events: none; }
.vehicle-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #e0dbd0; border-radius: 17px; background: #f5f1e8; color: #222923; }
.vehicle-intro { padding: 25px 23px 0; }
.vehicle-intro > p { margin: 0 0 9px; color: #746957; font-size: 12px; line-height: 1.5; }
.vehicle-card h3 { margin: 0; font-family: var(--font-display); font-size: clamp(23px, 2vw, 29px); line-height: 1.22; letter-spacing: -.03em; font-weight: 500; }
.vehicle-photo { height: 174px; margin: 12px 10px 10px; display: grid; place-items: center; }
.vehicle-photo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; filter: brightness(1.12) contrast(1.025); transition: transform 380ms cubic-bezier(.22,1,.36,1); }
.vehicle-link .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.vehicle-details { margin-top: auto; padding: 0 23px 18px; }
.vehicle-details dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 16px 0 18px; border-top: 1px solid #dcd6ca; }
.vehicle-details dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vehicle-details dl > div + div { padding-left: 12px; border-left: 1px solid #dcd6ca; }
.vehicle-details dt { color: #746957; font-size: 11px; }
.vehicle-details dd { margin: 0; color: #303b35; font-size: 14px; font-weight: 650; white-space: nowrap; }
.vehicle-link { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 650; min-height: 42px; color: #34433b; }
.vehicle-link::after { position: absolute; inset: 0; content: ''; border-radius: 17px; }
.vehicle-link > span[aria-hidden] { display: grid; place-items: center; border: 1px solid #ccc5b6; border-radius: 50%; height: 35px; width: 35px; font-size: 17px; transition: background 200ms, color 200ms, border-color 200ms; }
.vehicle-card:focus-within { outline: 3px solid #d9c295; outline-offset: 3px; }
.vehicle-link:focus { outline: none; }
.vehicle-card:focus-within .vehicle-link > span[aria-hidden] { background: #34433b; color: #fffaf0; border-color: #34433b; }
.fleet-footer { display: flex; justify-content: space-between; align-items: center; gap: 22px; margin-top: 27px; }
.fleet-footer > p { color: #c3c9d1; font-size: 12px; margin: 0; }
.fleet-footer > a { color: #f7f2e8; font-size: 13px; padding: 8px 0; border-bottom: 1px solid #a8adad; }
.fleet-footer > a span { margin-left: 15px; }
.fleet-controls { display: none; gap: 9px; }
.fleet-controls button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #687386; border-radius: 50%; background: transparent; color: #f7f2e8; font: inherit; font-size: 20px; cursor: pointer; }
.fleet-controls button:disabled { opacity: .3; cursor: default; }
.fleet-controls button:focus-visible { outline: 2px solid #d9c295; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .vehicle-card:hover .vehicle-photo img { transform: scale(1.035); }
  .vehicle-card:hover .vehicle-link > span[aria-hidden] { background: #34433b; color: #fffaf0; border-color: #34433b; }
}
@media (max-width: 1100px) and (min-width: 701px) {
  .fleet-rail { gap: 13px; }
  .vehicle-intro { padding: 21px 16px 0; }
  .vehicle-details { padding: 0 16px 14px; }
  .vehicle-photo { height: 145px; }
  .vehicle-details dl { gap: 6px; }
  .vehicle-details dl > div { display: block; }
  .vehicle-details dd { margin-top: 4px; }
}
@media (max-width: 700px) {
  .fleet-showcase { padding: 55px 0 36px; }
  .fleet-showcase .section-shell { width: calc(100% - 44px); }
  .fleet-heading { display: block; margin-bottom: 26px; }
  .fleet-heading h2 { font-size: clamp(29px,7.6vw,40px); }
  .fleet-heading > p { margin-top: 20px; font-size: 14px; }
  .fleet-eyebrow { margin-bottom: 14px; }
  .fleet-rail { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 5px 12px; margin: -6px -5px -12px; border-radius: 0; }
  .fleet-rail::-webkit-scrollbar { display: none; }
  .vehicle-card { flex: 0 0 min(82%,320px); scroll-snap-align: start; }
  .vehicle-card h3 { font-size: 27px; }
  .vehicle-photo { height: 160px; }
  .fleet-active-surface { display: none; }
  .fleet-footer { flex-wrap: wrap; gap: 17px; margin-top: 25px; }
  .fleet-footer > p { flex: 1 1 100%; font-size: 11px; }
  .fleet-controls { display: flex; }
  .fleet-footer > a { margin-left: auto; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .vehicle-photo img, .vehicle-link > span[aria-hidden] { transition: none; }
  .vehicle-card:hover .vehicle-photo img { transform: none; }
  .fleet-active-surface { display: none; }
}