:root{
  /* === RENT A CAR WM BALANCED PALETTE === */
  /* Sophisticated Dark Grays (Less Intense) */
  --bg:#f7f9fc;
  --bg-soft: #ffffff;
  --card:#c7e2ff;
  --black: #111827; /* now used as base text on light */
  --black-soft: #334155;
  /* Artistic background controls */
  --mesh-red-alpha: 0.20;   /* Corporate Mode: lower color wash */
  --mesh-blue-alpha: 0.18;
  --mesh-white-alpha: 0.03;
  --grain-alpha: 0.02;
  --line-alpha: 0.035;
  
  /* WM Red (refined to match logo) */
  --red: #E10600;
  --red-dark: #9b0a07;
  --red-light: #ff554f;
  --red-accent: #ffb3b0;
  
  /* ACE Blue */
  --blue: #0054A6;
  --blue-dark: #003c7d;
  --blue-light: #4A8FD8;
  --blue-accent: #B3D4FF;

  /* Back-compat: ACE Blue mapped into former "orange" tokens */
  --orange: var(--blue);            /* Primary ACE Blue (legacy alias) */
  --orange-dark: var(--blue-dark);  /* Dark ACE Blue (legacy alias) */
  --orange-light: var(--blue-light);/* Light ACE Blue (legacy alias) */
  --orange-accent: var(--blue-accent);/* Accent ACE Blue (legacy alias) */

  /* True Orange for highlights */
  --orange-real: #FF6A00;
  --orange-real-dark: #C25100;
  --orange-real-light: #FFA366;
  --orange-real-accent: #FFD1B3;
  
  /* Pure White & Balanced Grays (Light mode text) */
  --white: #ffffff;
  --white-soft: #f8fafc;
  --text: #1f2937; /* slate-800 */
  --text-muted: #000000; /* slate-600 */
  --muted: #000000; /* slate-500 */
  --text-warm: #374151;
  
  /* Brand Combinations */
  --primary: var(--blue);        /* ACE Blue as primary */
  --primary-600: var(--blue-dark);
  --secondary: var(--red);       /* WM Red as secondary */
  --accent: var(--orange-real);  /* True orange accents */
  
  /* Enhanced Shadows with Brand Colors */
  --ring: 0 0 0 3px color-mix(in oklab, var(--blue) 32%, transparent);
  --radius: 14px;
  --shadow-sm: 0 6px 18px rgba(0,84,166,.12);
  --shadow: 0 10px 24px rgba(0,84,166,.18);
  --shadow-xl: 0 18px 50px rgba(0,84,166,.22);
  --shadow-red: 0 8px 25px rgba(225,6,0,.35);
  --shadow-blue: 0 8px 25px rgba(0,84,166,.3);
  --shadow-orange: 0 8px 25px rgba(255,106,0,.28);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; font-size:16px}
body{
  margin:0;
  color:var(--text);
  background:
    /* Light mesh gradient base */
    radial-gradient(1200px 700px at 80% -10%, rgba(225,6,0,0.06) 8%, transparent 60%),
    radial-gradient(1000px 600px at 0% 10%, rgba(0,84,166,0.08) 6%, transparent 55%),
    linear-gradient(180deg, var(--white-soft), var(--bg) 60%, var(--white) 100%);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height:1.6;
  position: relative;
  overflow-x: hidden;
}

/* WM Luxury Automotive Background */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background:
    /* Specular sweep */
    conic-gradient(from 210deg at 70% 10%, rgba(255,255,255,0.7), transparent 20% 80%, rgba(255,255,255,0.5)),
    /* Top glows */
    radial-gradient(ellipse 900px 420px at 65% -5%, rgba(225,6,0,0.08), transparent 70%),
    radial-gradient(ellipse 700px 340px at -15% 15%, rgba(0,84,166,0.08), transparent 70%),
    /* Side vignettes to add depth in light mode */
    radial-gradient(ellipse 600px 800px at -10% 50%, rgba(0,84,166,0.08), transparent 70%),
    radial-gradient(ellipse 600px 800px at 110% 50%, rgba(225,6,0,0.07), transparent 70%),
    /* Soft vertical gradient */
    linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0) 35%, rgba(255,255,255,0.6));
  animation: luxuryFlow 40s ease-in-out infinite; /* slower, calmer */
  will-change: transform, opacity;
}

/* WM Brand Road Lines - Enhanced Visibility */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background:
    /* Minimalist motion line (single layer, toned down) */
    repeating-linear-gradient(
      8deg,
      transparent 0 140px,
      rgba(0,0,0,0.04) 141px,
      rgba(0,0,0,0.04) 142px,
      transparent 143px 280px
    ),
    /* Ultra-fine grain for material feel (reduced) */
    repeating-radial-gradient(
      circle at 20% 30%,
      rgba(0,0,0,var(--grain-alpha)) 0 0.8px,
      transparent 1px 12px
    );
  animation: roadFlow 48s linear infinite; /* slower */
  mix-blend-mode: normal;
  pointer-events: none;
}

@keyframes luxuryFlow {
  0%, 100% { 
    transform: translateX(0%) translateY(0%) scale(1); 
    opacity: 0.9;
  }
  25% { 
    transform: translateX(0.2%) translateY(-0.2%) scale(1.003);
    opacity: 1;
  }
  50% { 
    transform: translateX(0%) translateY(0.2%) scale(1.003);
    opacity: 0.95;
  }
  75% { 
    transform: translateX(-0.2%) translateY(-0.1%) scale(1.002); 
    opacity: 1;
  }
}

@keyframes roadFlow {
  0% { 
    transform: translateX(0px) translateY(0px); 
  }
  50% { 
    transform: translateX(-6px) translateY(-3px); 
  }
  100% { 
    transform: translateX(0px) translateY(0px); 
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  body::before, body::after{ animation: none !important }
}

/* Utilities */
.container{width:min(1120px, 92vw); margin-inline:auto}
.flex{display:flex}
.grid-2{display:grid; grid-template-columns: 1.1fr 0.9fr; gap:clamp(1rem, 2vw, 2rem)}
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:1.25rem}
.gap-1{gap:.75rem} .gap-2{gap:1rem} .gap-3{gap:1.5rem}
.center{justify-content:center; align-items:center}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.small{font-size:.9rem}
.muted{color:var(--muted)}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(8px);
  background: color-mix(in oklab, var(--white) 85%, var(--blue-accent) 15%);
  border-bottom: 1px solid rgba(30,41,59,.08);
}
.topbar .info-link{display:flex; align-items:center; gap:.5rem; color:var(--text); text-decoration:none; font-size:.95rem; padding:.5rem 0}
.topbar .info-link i{color:#25D366}

  /* Header / Navigation */
  .site-header{
  position:sticky; top:40px; z-index:60;
  background: linear-gradient(135deg, rgba(0, 84, 166, 0.12), rgba(0, 84, 166, 0.06)), rgba(255,255,255,0.75);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  border-bottom: 1px solid rgba(30,41,59,.08);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04) inset;
  overflow: hidden; /* allow glossy overlay clipping */
}
/* Crystalline gloss and metallic blue shine */
.site-header::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05) 35%, transparent 60%);
  pointer-events: none;
}
.site-header::after{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, rgba(0,84,166,0), rgba(0,84,166,0.55), rgba(0,84,166,0));
  background-size: 200% 100%;
  animation: metallicShine 6s ease infinite;
  opacity: .6;
  pointer-events: none;
}

/* Metallic shine keyframes (for subtle moving highlight) */
@keyframes metallicShine {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:.85rem 0}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text)}
.brand-logo{
  height: 50px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  transition: all 0.3s ease;
  filter: brightness(1.2) contrast(1.1);
}
.brand-logo img{
  height: 200px;
  width: 200px;
}

.brand-logo:hover{
  transform: scale(1.05);
  filter: brightness(1.2) contrast(1.1);
}
.brand-mark{
  display:inline-grid; place-items:center;
  width:40px; height:40px; border-radius:12px;
  background: linear-gradient(135deg, var(--red-dark), var(--red));
  color:var(--white); font-weight:700; font-size:1.1rem;
  box-shadow: var(--shadow-red);
}
.brand-text{font-weight:700; font-size:1.1rem}

.nav{position:relative}
.nav-toggle{
  display:none; background:transparent; border:none; color:var(--text); font-size:1.6rem
}
.nav-list{display:flex; gap:1rem; list-style:none; margin:0; padding:0}
.nav-link{
  color:var(--text); text-decoration:none; padding:.55rem .85rem; border-radius:8px;
  transition:.25s ease;
}
.nav-link:hover{background: rgba(0,0,0,.05); color: var(--red)}
.nav-link.active{background: color-mix(in oklab, var(--primary) 20%, transparent); outline: var(--ring)}

/* Titles */
.title{margin:.25rem 0 .75rem}
.title.xl{font-size: clamp(2rem, 4vw, 3rem); line-height:1.1}
.title.lg{font-size: clamp(1.6rem, 2.8vw, 2.2rem)}
.title.sm{font-size:1.05rem; margin-bottom: 1rem;}

/* WM Brand Text Gradients Enhanced */
.text-gradient-primary{
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip:text; color:transparent;
  font-weight: 700;
  text-shadow: 0 0 20px rgba(225,6,0,0.25);
  animation: metallicShine 4s ease-in-out infinite;
}
.text-gradient-secondary{
  background: linear-gradient(135deg, var(--orange-real), var(--orange-real-dark));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip:text; color:transparent;
  font-weight: 600;
  animation: gradientShift 3s ease infinite;
}
.text-gradient-fire{
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  background-size: 300% auto;
  -webkit-background-clip: text; background-clip:text; color:transparent;
  font-weight: 700;
  animation: gradientShift 2.5s ease infinite;
  filter: drop-shadow(0 0 10px rgba(225,6,0,0.25));
}

/* Sections */
.section{padding: clamp(3rem, 7vw, 5rem) 0}
.section.alt{background: linear-gradient(180deg, rgba(0,0,0,.02), transparent); border-top:1px solid rgba(30,41,59,.06); border-bottom:1px solid rgba(30,41,59,.06)}
.section-head{margin-bottom:1.25rem; text-align:center}
.section.has-bg{position:relative; z-index: 1; overflow: hidden;}
.section-bg{position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.15; mask-image: linear-gradient(180deg, #000 25%, transparent 90%);}
.section-bg img{width:100%; height:100%; object-fit:cover; filter:saturate(1.1) contrast(1.05)}

/* Hero */
.hero{position:relative; overflow:clip}
.hero-copy .lead{color:var(--blue); font-size:1.05rem}
.hero-badges{display:flex; gap:.6rem; flex-wrap:wrap; padding:0; margin:1rem 0 0; list-style:none}
.badge{
  display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .6rem;
  border-radius:999px; font-size:.92rem; color:var(--text);
  background: rgba(0,84,166,.08); border: 1px solid rgba(0,84,166,.20)
}
.hero-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.25;
  mask-image: linear-gradient(180deg, #000 25%, transparent 90%);
}
.hero-img{width:100%; height:100%; object-fit:cover; filter:saturate(1.1) contrast(1.05)}

.card{
  position: relative;
  background:
    linear-gradient(135deg, rgba(0,84,166,.10), rgba(0,84,166,.05)),
    rgba(255,255,255,.60); /* glassy */
  border: 1px solid rgba(0,84,166,.18);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  overflow: hidden;
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
}
/* Metallic blue top shimmer for all cards */
.card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--blue-light) 80%, transparent), color-mix(in oklab, var(--blue-dark) 80%, transparent));
  opacity: .35; /* subtle base shimmer */
  animation: metallicShine 10s ease infinite;
  pointer-events: none;
}
/* Subtle diagonal gloss overlay */
.card::after{
  content: '';
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 55%;
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,0));
  mix-blend-mode: screen;
  pointer-events: none;
}
.card:hover::before{ opacity: .8 }
.card:hover::after{ background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0)) }
.card-elevated{box-shadow: var(--shadow)}
.card-elevated:hover{
  box-shadow:
    var(--shadow-xl),
    0 0 0 1px rgba(0,84,166,.18),
    0 0 28px rgba(0,84,166,.12),
    0 10px 30px rgba(0,84,166,.10);
}
.card-hover{transition:transform .3s ease, box-shadow .3s ease}
.card-hover:hover{transform: translateY(-6px); box-shadow: var(--shadow-xl)}

.animate-in{animation: fadeUp .6s ease both .1s}
@keyframes fadeUp{from{opacity:0; transform: translateY(10px)} to{opacity:1; transform:none}}

/* Fields & Buttons */
.field{display:grid; gap:.5rem; margin:1rem 0}
.field input, .field select{
  appearance:none; width:100%;
  background: #ffffff;
  color:var(--text);
  border: 1px solid rgba(30,41,59,.18);
  padding:1rem 1.1rem; border-radius:10px;
  font-size: 0.95rem;
  transition:border-color .2s ease, box-shadow .2s ease, transform .06s ease;
}
.field input:focus, .field select:focus{outline:none; border-color: color-mix(in oklab, var(--primary) 65%, transparent); box-shadow: var(--ring)}
.field span{font-size:.85rem; color:var(--muted); margin-top: 0.25rem;}

.btn{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  padding:1rem 1.25rem; border-radius:12px; border:1px solid transparent;
  font-weight:600; font-size: 0.95rem; text-decoration:none; transition: transform .12s ease, box-shadow .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
}
.btn:active{transform: translateY(1px)}
.btn-primary{
  color:var(--white);
  background: linear-gradient(135deg, var(--red-dark), var(--red));
  box-shadow: var(--shadow);
  border: 1px solid color-mix(in oklab, var(--primary) 35%, transparent);
}
.btn-primary:hover{
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.btn-ghost{
  color:var(--text);
  background: transparent;
  border-color: rgba(148,163,184,.24)
}
.btn-ghost:hover{background: rgba(148,163,184,.08)}

/* Icons circle */
.icon-circle{
  display:grid; place-items:center; width:54px; height:54px; border-radius:16px;
  color:var(--bg); font-size:1.3rem; margin-bottom:.25rem;
  background: linear-gradient(135deg, var(--blue-light), var(--blue-dark));
  box-shadow: var(--shadow-sm);
}
/* WM Brand Icon Gradients */
.gradient-red{background: linear-gradient(135deg, var(--red), var(--red-dark))}
.gradient-orange{background: linear-gradient(135deg, var(--orange-real), var(--orange-real-dark))}
.gradient-fire{background: linear-gradient(135deg, var(--blue-light), var(--blue-dark))}
.gradient-white{background: linear-gradient(135deg, var(--white), var(--text-muted)); color: var(--black);}

/* Force icons to be blue regardless of utility gradient class */
.icon-circle.gradient-red,
.icon-circle.gradient-orange,
.icon-circle.gradient-fire,
.icon-circle.gradient-white{
  background: linear-gradient(135deg, var(--blue-light), var(--blue-dark));
  color: var(--bg);
  box-shadow: var(--shadow-sm);
}

/* Lists */
.list{list-style:none; padding:0; margin:.75rem 0 0}
.list li{display:flex; align-items:center; gap:.5rem; color:var(--muted)}
.list i{color:var(--primary)}
.requirements{list-style:none; padding:0; margin:0}
.requirements > li{padding:.55rem 0; border-bottom:1px dashed rgba(30,41,59,.15); color:var(--text)}
.requirements > li:last-child{border-bottom:none}
.sublist{list-style:none; padding-left:1.5rem; margin:.5rem 0 0}
.sublist li{color:var(--muted); padding:.25rem 0}

/* About */
.about{align-items:center}
.about-media{position:relative}
.media{width:100%; height:auto; display:block; box-shadow: var(--shadow); transition:transform .35s ease, box-shadow .35s ease}
.media:hover{transform: translateY(-6px); box-shadow: var(--shadow-xl)}
.media.rounded{border-radius: clamp(14px, 2.4vw, 22px)}
.glass{
  position:absolute; bottom:12px; left:12px;
  display:flex; gap:.5rem; align-items:center;
  background: rgba(255,255,255, .7); border:1px solid rgba(30,41,59,.2);
  backdrop-filter: blur(6px);
  padding:.5rem .75rem; border-radius: 12px
}
.glass strong{font-size:1.1rem; color:var(--red)}

/* Accordion (details) */
.accord{border:1px solid rgba(30,41,59,.12); border-radius:12px; padding:.6rem .8rem; margin:.6rem 0; background:#ffffff}
.accord summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:.6rem; font-weight:600}
.accord summary::-webkit-details-marker{display:none}
.accord summary span{
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px;
  background: color-mix(in oklab, var(--primary) 25%, transparent); color:var(--text); font-size:.9rem
}
.accord > div{color:var(--muted); padding:.5rem .1rem .1rem}

/* Carousel - Modern Design */
.carousel-container{
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 600px;
  margin: 0 auto;
}

.carousel{
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255,255,255,.6);
  padding: 0;
  box-shadow: 0 20px 60px rgba(0,84,166,.15);
  border: 1px solid rgba(0,84,166,.1);
  transition: box-shadow .3s ease;
  width: 100%;
  height: 100%;
}

.carousel:hover{
  box-shadow: 0 30px 80px rgba(0,84,166,.2);
}

.carousel-viewport{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 600px;
  gap: 0;
  overflow: hidden;
  scroll-snap-type: x mandatory;
  padding: 0;
  justify-content: start;
  width: 600px;
  height: 600px;
}

.slide{
  width: 600px;
  height: 600px;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  scroll-snap-align: start;
  flex-shrink: 0;
  transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1), opacity .5s ease, filter .3s ease;
  filter: saturate(1);
  opacity: 1;
  transform: scale(1);
}

.slide.active{
  animation: slideIn .6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.slide:hover{
  filter: saturate(1.08) brightness(1.05);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.carousel-btn{
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%);
  z-index: 10;
  width: 48px; 
  height: 48px; 
  border: none; 
  border-radius: 50%; 
  cursor: pointer;
  background: rgba(255,255,255,.9); 
  color: var(--primary); 
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid; 
  place-items: center; 
  transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 24px rgba(0,84,166,.2);
  border: 1px solid rgba(255,255,255,.8);
  font-size: 1.25rem;
}

.carousel-btn:hover{
  background: rgba(255,255,255,1);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 12px 32px rgba(0,84,166,.3);
}

.carousel-btn:active{
  transform: translateY(-50%) scale(0.95);
}

.carousel-btn.prev{
  left: 1rem;
}

.carousel-btn.next{
  right: 1rem;
}

/* Carousel Indicators */
.carousel-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 0 1rem;
  flex-wrap: wrap;
}

.carousel-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  background: transparent;
  cursor: pointer;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.5;
}

.carousel-indicator:hover {
  opacity: 0.8;
  transform: scale(1.15);
}

.carousel-indicator.active {
  background: var(--primary);
  opacity: 1;
  width: 32px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,84,166,.3);
}

/* Carousel Controls */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0 1rem;
}

.carousel-play-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  background: linear-gradient(135deg, rgba(0,84,166,.1), rgba(0,84,166,.05));
  color: var(--primary);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all .3s ease;
  font-size: 1rem;
  flex-shrink: 0;
}

.carousel-play-btn:hover {
  background: linear-gradient(135deg, rgba(0,84,166,.15), rgba(0,84,166,.08));
  transform: scale(1.08);
}

.carousel-play-btn.playing {
  background: linear-gradient(135deg, var(--primary), var(--blue-light));
  color: white;
  box-shadow: 0 6px 20px rgba(0,84,166,.3);
  border-color: var(--blue-light);
}

.carousel-play-btn.playing:hover {
  transform: scale(1.12);
}

.carousel-progress {
  flex: 1;
  height: 3px;
  background: rgba(0,84,166,.15);
  border-radius: 2px;
  overflow: hidden;
  max-width: 300px;
}

.carousel-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--blue-light));
  border-radius: 2px;
  width: 0;
  transition: width .1s linear;
}

/* Contact */
.contact-item{display:flex; gap:.75rem; align-items:flex-start; padding:.5rem 0}
.contact-item i{font-size:1.25rem; color:var(--primary)}
.map-wrap{min-height:100%}
.map{width:100%; height:100%; min-height:360px; border:1px solid rgba(148,163,184,.1)}

/* Footer */
.site-footer{position:relative; padding:2.5rem 0 3.5rem; border-top:1px solid rgba(30,41,59,.08); background: rgba(255,255,255,.85); backdrop-filter: blur(8px)}
.footer-grid{display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:1rem}
.foot-links{list-style:none; display:flex; gap:1rem; padding:0; margin:0}
.foot-links a{color:var(--text); text-decoration:none}
.foot-links a:hover{color:var(--red)}
.back-to-top{
  position:absolute; right:1rem; bottom:1rem; width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; text-decoration:none;
  background: linear-gradient(135deg, var(--red-dark), var(--red));
  color:var(--white); box-shadow: var(--shadow); opacity:.92; transform: translateY(0); transition: .25s ease;
  border: 1px solid color-mix(in oklab, var(--primary) 35%, transparent);
}
.back-to-top:hover{opacity:1; transform: translateY(-2px)}

/* Responsive */
@media (max-width: 980px){
  .grid-2{grid-template-columns: 1fr}
  .grid-3{grid-template-columns: repeat(2, 1fr)}
  .site-header{top:0}
  .topbar{display:none}
  .footer-grid{grid-template-columns: 1fr; text-align:center}
  
  .carousel-container {
    max-width: 450px;
    height: 450px;
  }
  
  .carousel {
    width: 100%;
    height: 100%;
  }
  
  .carousel-viewport {
    width: 450px;
    height: 450px;
    grid-auto-columns: 450px;
  }
  
  .slide {
    width: 450px;
    height: 450px;
  }
  
  .carousel-btn {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  .carousel-controls {
    gap: 0.75rem;
  }
  
  .carousel-progress {
    max-width: 200px;
  }
}
@media (max-width: 680px){
  .grid-3{grid-template-columns: 1fr}
  .nav-toggle{display:inline-grid}
  .nav-list{
    position: absolute; right:0; top:110%;
    background: rgba(255,255,255,.98);
    border:1px solid rgba(30,41,59,.15);
    border-radius:14px; padding:.4rem; min-width: 200px;
    transform-origin: top right; opacity:0; pointer-events:none; transform: scale(.98);
    flex-direction:column;
  }
  .nav-list.open{opacity:1; pointer-events:auto; transform: scale(1)}
  
  /* Carousel responsiveness */
  .carousel-container {
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  
  .carousel {
    width: 100%;
    height: 100%;
    border-radius: 16px;
  }
  
  .carousel-viewport {
    width: 100%;
    height: 100%;
    grid-auto-columns: 1fr;
  }
  
  .slide {
    width: 100%;
    height: 100%;
  }
  
  .carousel-btn {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }
  
  .carousel-btn.prev {
    left: 0.5rem;
  }
  
  .carousel-btn.next {
    right: 0.5rem;
  }
  
  .carousel-indicators {
    gap: 0.6rem;
    margin-top: 1rem;
  }
  
  .carousel-indicator {
    width: 10px;
    height: 10px;
  }
  
  .carousel-indicator.active {
    width: 24px;
  }
  
  .carousel-controls {
    gap: 0.5rem;
    margin-top: 0.75rem;
  }
  
  .carousel-play-btn {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }
  
  .carousel-progress {
    max-width: 150px;
  }
}

/* === WM SPECIAL EFFECTS === */

/* Engine Pulse Animation for CTAs */
@keyframes enginePulse {
  0%, 100% { 
    box-shadow: var(--shadow), 0 0 0 0 rgba(0,84,166,0.3);
    transform: scale(1);
  }
  50% { 
    box-shadow: var(--shadow), 0 0 0 6px rgba(0,84,166,0);
    transform: scale(1.02);
  }
}

.btn-primary.engine-pulse {
  animation: enginePulse 4s ease-in-out infinite; /* calmer CTA pulse */
}

/* Flame on Hover Effect */
@keyframes flameFlicker {
  0%, 100% { 
    background: linear-gradient(135deg, var(--red-dark), var(--red));
    box-shadow: var(--shadow-red);
  }
  25% { 
    background: linear-gradient(135deg, var(--red), var(--red-light));
    box-shadow: var(--shadow-red);
  }
  50% { 
    background: linear-gradient(135deg, var(--red-dark), var(--red));
    box-shadow: var(--shadow-red);
  }
  75% { 
    background: linear-gradient(135deg, var(--red), var(--red-light));
    box-shadow: var(--shadow-red);
  }
}

.btn-primary.flame-hover:hover {
  animation: flameFlicker 0.6s ease-in-out;
}

/* Metallic Text Animation */
@keyframes metallicShine {
  0% { 
    background-position: -200% center;
  }
  100% { 
    background-position: 200% center;
  }
}

.text-metallic {
  background: linear-gradient(90deg, var(--red), var(--red-dark));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  animation: metallicShine 3s linear infinite;
}

/* Premium Card Glow Effect */
@keyframes premiumGlow {
  0%, 100% { 
    box-shadow: var(--shadow), 0 0 0 1px rgba(0,84,166,0.1);
  }
  50% { 
    box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0,84,166,0.2), 0 0 20px rgba(0,84,166,0.1);
  }
}

.card.premium-glow:hover {
  animation: premiumGlow 2s ease-in-out infinite;
}

/* Speed Lines Background Effect */
@keyframes speedLines {
  0% { 
    transform: translateX(-100px);
    opacity: 0;
  }
  50% { 
    opacity: 0.3;
  }
  100% { 
    transform: translateX(100vw);
    opacity: 0;
  }
}

.speed-lines::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    repeating-linear-gradient(
      45deg,
      transparent 0px,
      transparent 2px,
      rgba(0,84,166,0.12) 3px,
      rgba(0,84,166,0.12) 4px,
      transparent 5px,
      transparent 15px
    );
  animation: speedLines 4s linear infinite;
  pointer-events: none;
}

/* Turbo Button Effect */
.btn-turbo {
  position: relative;
  overflow: hidden;
}

.btn-turbo::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.btn-turbo:hover::before {
  left: 100%;
}

/* Enhanced Brand Mark with Rotation */
.brand-mark.rotating {
  animation: brandRotate 8s linear infinite;
}

@keyframes brandRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Gradient Text Animations */
@keyframes gradientShift {
  0%, 100% { 
    background-position: 0% 50%;
  }
  50% { 
    background-position: 100% 50%;
  }
}

.text-gradient-animated {
  background: linear-gradient(45deg, var(--red), var(--red-dark));
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  animation: gradientShift 4s ease infinite;
}

/* Premium Input Focus Effect */
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 
    var(--ring),
    0 0 0 3px rgba(0,84,166,0.1),
    inset 0 1px 0 rgba(255,255,255,0.1);
  transform: translateY(-1px);
}

/* Enhanced Hover States */
.nav-link:hover {
  background: linear-gradient(135deg, rgba(0,84,166,0.08), rgba(0,84,166,0.06));
  color: var(--primary);
  transform: translateY(-1px);
}

.card-hover:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    var(--shadow-xl),
    0 0 0 1px rgba(0,84,166,0.06),
    0 0 18px rgba(0,84,166,0.08);
}

/* Focus styles */
a, button, input, select{outline: none}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  box-shadow: var(--ring)
}

/* Global link colors (exclude button-like anchors and special nav) */
a:not(.btn):not(.nav-link):not(.back-to-top):not(.home-btn){ color: var(--primary); text-decoration: none; transition: color .2s ease }
a:not(.btn):not(.nav-link):not(.back-to-top):not(.home-btn):hover{ color: var(--red) }

/* Page-specific Backgrounds */
body.page-results {
    position: relative;
    z-index: 1;
    background-color: #0a0a0a; /* Dark fallback background */
}

body.page-results > .section-bg {
    position: fixed; /* Fixed so it doesn't scroll with content */
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.25; /* Increased visibility */
    mask-image: linear-gradient(180deg, #000 15%, transparent 80%);
}

body.page-results > .section-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.1) contrast(1.05);
}