/**
 * VighnahartaCarz design layer ("vc-") — sits on top of the template's
 * style.css and site-ui.css. Header, footer, breadcrumb banner and the
 * template's grid/typography are reused; every new section is built from the
 * components below so pages stay consistent.
 *
 * Tokens reuse the confirmed brand palette (BRAND.md). Orange is the CTA and
 * accent colour, navy/blue carry structure.
 */
:root {
  --vc-navy: #002b89;
  --vc-navy-deep: #001a5c;
  --vc-blue: #006ff5;
  --vc-sky: #e8f1ff;
  --vc-orange: #ff3f00; /* exact logo orange (VIGHNAHARTA Logo.pdf): hairlines, icons, large/graphic elements. White on it is 3.52:1, so it never sits behind small text */
  --vc-cta: #d93400; /* same hue, darkened for AA (white on it >= 4.5:1): fills and text that carry small copy (buttons, badges, tags, labels) */
  --vc-orange-dark: #b82b00; /* hover fill for orange buttons: white on it is 6.21:1 (AA) */
  --vc-blue-text: #005fd1; /* blue for small text on light/soft backgrounds: 5.45:1 on --vc-soft (#006ff5 is 4.22:1) */
  --vc-ink: #0b1b3f;
  --vc-body: #4b5673;
  --vc-line: #e3e9f5;
  --vc-soft: #f3f6fc;
  --vc-radius: 18px;
  --vc-shadow: 0 10px 30px rgba(0, 43, 137, 0.08);
  --vc-shadow-lg: 0 24px 54px rgba(0, 43, 137, 0.18);
  --vc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.vc-section { padding: 110px 0; position: relative; }
.vc-section.vc-soft { background: var(--vc-soft); }
.vc-section.vc-dark { background: var(--vc-navy); color: #fff; }
.vc-section.vc-tight { padding: 80px 0; }
@media (max-width: 991px) {
  .vc-section { padding: 72px 0; }
  .vc-section.vc-tight { padding: 56px 0; }
}

/* ---------- Section heading ---------- */
.vc-head { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.vc-head.vc-left { margin-left: 0; text-align: left; }
.vc-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--heading-font); font-weight: 700; font-size: 14px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--vc-blue-text);
  margin-bottom: 14px;
}
.vc-eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: var(--vc-orange); }
.vc-dark .vc-eyebrow { color: #9ec5ff; }
.vc-title {
  font-family: var(--heading-font); font-weight: 700; color: var(--vc-navy);
  font-size: clamp(30px, 4.2vw, 48px); line-height: 1.14; margin: 0 0 16px;
}
.vc-dark .vc-title { color: #fff; }
.vc-lead { font-size: 18px; line-height: 1.7; color: var(--vc-body); margin: 0; }
.vc-dark .vc-lead { color: rgba(255, 255, 255, 0.82); }

/* ---------- Buttons ---------- */
.vc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border-radius: 50px; border: 2px solid transparent;
  font-family: var(--heading-font); font-weight: 700; font-size: 15px;
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform 0.3s var(--vc-ease), box-shadow 0.3s var(--vc-ease), background-color 0.3s, color 0.3s, border-color 0.3s;
}
.vc-btn i { transition: transform 0.3s var(--vc-ease); }
.vc-btn:hover i { transform: translateX(5px); }
.vc-btn-primary { background: var(--vc-cta); color: #fff; box-shadow: 0 10px 24px rgba(217, 52, 0, 0.32); }
.vc-btn-primary:hover { background: var(--vc-orange-dark); color: #fff; transform: translateY(-3px); box-shadow: 0 16px 32px rgba(217, 52, 0, 0.4); }
.vc-btn-blue { background: var(--vc-blue); color: #fff; box-shadow: 0 10px 24px rgba(0, 111, 245, 0.28); }
.vc-btn-blue:hover { background: var(--vc-navy); color: #fff; transform: translateY(-3px); }
.vc-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.vc-btn-ghost:hover { background: #fff; color: var(--vc-navy); transform: translateY(-3px); }
.vc-btn-outline { background: transparent; color: var(--vc-navy); border-color: var(--vc-navy); }
.vc-btn-outline:hover { background: var(--vc-navy); color: #fff; transform: translateY(-3px); }
/* shine sweep */
.vc-btn-primary::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg); animation: vcShine 4.5s ease-in-out infinite;
}
@keyframes vcShine { 0%, 60% { left: -80%; } 100% { left: 140%; } }

/* =========================================================================
 * HERO
 * ====================================================================== */
.vc-hero {
  position: relative; min-height: 640px; display: flex; align-items: center;
  color: #fff; overflow: hidden; isolation: isolate; background: var(--vc-navy-deep);
  padding: 90px 0 150px;
}
.vc-hero-slides, .vc-hero-slides span { position: absolute; inset: 0; z-index: -2; }
.vc-hero-slides span {
  background-size: cover; background-position: center; opacity: 0;
  animation: vcSlide 24s infinite, vcZoom 24s infinite;
}
.vc-hero-slides span:nth-child(2) { animation-delay: 8s, 8s; }
.vc-hero-slides span:nth-child(3) { animation-delay: 16s, 16s; }
@keyframes vcSlide { 0% { opacity: 0; } 6% { opacity: 1; } 33% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } }
@keyframes vcZoom { 0% { transform: scale(1); } 40% { transform: scale(1.09); } 100% { transform: scale(1.09); } }
.vc-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(0, 20, 78, 0.94) 0%, rgba(0, 43, 137, 0.78) 48%, rgba(0, 43, 137, 0.25) 100%);
}
.vc-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; z-index: 1;
  background: linear-gradient(90deg, var(--vc-navy) 0 34%, var(--vc-orange) 34% 40%, var(--vc-blue) 40% 100%);
}
.vc-hero-inner { max-width: 1000px; }
.vc-hero-tag {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 40px;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 26px;
}
.vc-hero-tag i { color: #ffb199; }
.vc-hero h1 {
  font-family: var(--heading-font); font-weight: 800; color: #fff;
  font-size: clamp(36px, 4.8vw, 62px); line-height: 1.1; margin: 0 0 22px; letter-spacing: -0.01em;
}
.vc-hero h1 em { font-style: normal; color: #7db4ff; }
.vc-hero p.vc-hero-sub { font-size: 20px; line-height: 1.65; color: rgba(255, 255, 255, 0.9); margin: 0 0 34px; max-width: 640px; }
.vc-hero-cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.vc-hero-phone { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-family: var(--heading-font); font-weight: 700; font-size: 20px; }
.vc-hero-phone span.ic {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.35); font-size: 20px;
  animation: vcRing 2.6s ease-in-out infinite;
}
.vc-hero-phone small { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
@keyframes vcRing { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35); } 60% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); } }
.vc-hero-phone:hover { color: #fff; }

/* trust ribbon that overlaps the hero */
.vc-ribbon { position: relative; z-index: 5; margin-top: -78px; }
.vc-ribbon-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-radius: 22px;
  box-shadow: var(--vc-shadow-lg); overflow: hidden;
}
.vc-ribbon-item { padding: 26px 22px; display: flex; gap: 14px; align-items: center; border-right: 1px solid var(--vc-line); transition: background 0.3s; }
.vc-ribbon-item:last-child { border-right: 0; }
.vc-ribbon-item:hover { background: var(--vc-sky); }
.vc-ribbon-item i { font-size: 30px; color: var(--vc-blue); flex: none; transition: transform 0.4s var(--vc-ease); }
.vc-ribbon-item:hover i { transform: scale(1.15) rotate(-6deg); color: var(--vc-orange); }
.vc-ribbon-item strong { display: block; font-family: var(--heading-font); color: var(--vc-navy); font-size: 17px; line-height: 1.2; }
.vc-ribbon-item span { font-size: 13.5px; color: var(--vc-body); line-height: 1.35; display: block; margin-top: 3px; }
/* Five across: keep each heading on one line (e.g. "Uniformed chauffeurs"); tighten the cards at the narrow end so it still fits */
@media (min-width: 1200px) {
  .vc-ribbon-item strong { white-space: nowrap; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .vc-ribbon-item { padding: 24px 14px; gap: 10px; }
  .vc-ribbon-item i { font-size: 26px; }
  .vc-ribbon-item strong { font-size: 15.5px; }
}
@media (max-width: 1199px) { .vc-ribbon-grid { grid-template-columns: repeat(3, 1fr); } .vc-ribbon-item { border-bottom: 1px solid var(--vc-line); } }
@media (max-width: 767px) { .vc-ribbon { margin-top: -50px; } .vc-ribbon-grid { grid-template-columns: repeat(2, 1fr); } .vc-hero { padding-bottom: 110px; min-height: 0; } .vc-hero p.vc-hero-sub { font-size: 17px; } }
@media (max-width: 460px) { .vc-ribbon-grid { grid-template-columns: 1fr; } }

/* ---------- Page banner (inner pages) ---------- */
.cs_page_heading.vc-banner { position: relative; height: auto; min-height: 340px; display: flex; align-items: center; padding: 90px 0 70px; overflow: hidden; isolation: isolate; }
.cs_page_heading.vc-banner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(0, 20, 78, 0.92), rgba(0, 43, 137, 0.72) 60%, rgba(0, 43, 137, 0.4));
}
.cs_page_heading.vc-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--vc-navy) 0 34%, var(--vc-orange) 34% 40%, var(--vc-blue) 40% 100%); }
.cs_page_heading.vc-banner .container { position: relative; }
.cs_page_heading.vc-banner h1 { font-weight: 800; letter-spacing: -0.01em; margin-bottom: 14px; }
.vc-banner-sub { color: rgba(255, 255, 255, 0.86); font-size: 18px; max-width: 640px; margin: 0 auto 16px; }

/* =========================================================================
 * CARDS
 * ====================================================================== */
.vc-grid { display: grid; gap: 28px; }
.vc-grid-3 { grid-template-columns: repeat(3, 1fr); }
.vc-grid-4 { grid-template-columns: repeat(4, 1fr); }
.vc-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1199px) { .vc-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991px) { .vc-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .vc-grid-3, .vc-grid-4, .vc-grid-2 { grid-template-columns: 1fr; } }

/* Service / image card */
.vc-card {
  background: #fff; border-radius: var(--vc-radius); overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--vc-shadow); border: 1px solid var(--vc-line); position: relative;
  transition: transform 0.4s var(--vc-ease), box-shadow 0.4s var(--vc-ease);
  text-decoration: none; color: inherit;
}
.vc-card:hover { transform: translateY(-10px); box-shadow: var(--vc-shadow-lg); }
.vc-card-media { position: relative; aspect-ratio: 16 / 10; }
.vc-card-img { position: absolute; inset: 0; overflow: hidden; }
.vc-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--vc-ease); }
.vc-card:hover .vc-card-img img { transform: scale(1.1); }
.vc-card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 20, 78, 0.55)); }
.vc-card-icon {
  position: absolute; left: 24px; bottom: -28px; z-index: 2; width: 62px; height: 62px; border-radius: 16px;
  display: grid; place-items: center; background: var(--vc-blue); color: #fff; font-size: 28px;
  box-shadow: 0 12px 24px rgba(0, 111, 245, 0.4); transition: transform 0.4s var(--vc-ease), background 0.3s;
}
.vc-card:hover .vc-card-icon { transform: translateY(-6px) rotate(-6deg); background: var(--vc-orange); }
.vc-card-body { padding: 44px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.vc-card-body h3 { font-family: var(--heading-font); font-weight: 700; font-size: 23px; color: var(--vc-navy); margin: 0 0 10px; }
.vc-card-body p { color: var(--vc-body); font-size: 16px; line-height: 1.65; margin: 0 0 18px; flex: 1; }
.vc-more { font-family: var(--heading-font); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vc-blue); display: inline-flex; gap: 8px; align-items: center; }
.vc-more i { transition: transform 0.3s var(--vc-ease); }
.vc-card:hover .vc-more i, .vc-more:hover i { transform: translateX(6px); }
.vc-more:hover { color: var(--vc-cta); }
.vc-card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 0; z-index: 3;
  background: linear-gradient(90deg, var(--vc-blue), var(--vc-orange)); transition: width 0.5s var(--vc-ease);
}
.vc-card:hover::before { width: 100%; }

/* Wide feature card (agreements) */
.vc-wide {
  grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--vc-navy); color: #fff;
  border-radius: var(--vc-radius); overflow: hidden; box-shadow: var(--vc-shadow-lg);
}
.vc-wide-body { padding: 44px 48px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; }
.vc-wide-body h3 { font-family: var(--heading-font); font-weight: 700; font-size: 32px; color: #fff; margin: 0 0 8px; }
.vc-wide-body p { color: rgba(255, 255, 255, 0.85); font-size: 17px; line-height: 1.7; margin: 0 0 22px; }
.vc-wide-media { position: relative; min-height: 280px; }
.vc-wide-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--vc-ease); }
.vc-wide:hover .vc-wide-media img { transform: scale(1.06); }
.vc-wide-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--vc-navy), transparent 45%); }
@media (max-width: 860px) { .vc-wide { grid-template-columns: 1fr; } .vc-wide-media { min-height: 220px; order: -1; } .vc-wide-media::after { background: linear-gradient(0deg, var(--vc-navy), transparent 60%); } .vc-wide-body { padding: 30px 26px; } }

/* Pillars (3 headline claims) */
.vc-pillar {
  background: #fff; border-radius: var(--vc-radius); padding: 36px 30px; border: 1px solid var(--vc-line);
  box-shadow: var(--vc-shadow); position: relative; overflow: hidden; transition: transform 0.4s var(--vc-ease), box-shadow 0.4s;
}
.vc-pillar:hover { transform: translateY(-8px); box-shadow: var(--vc-shadow-lg); }
.vc-pillar-num { position: absolute; right: 18px; top: 6px; font-family: var(--heading-font); font-weight: 800; font-size: 84px; line-height: 1; color: var(--vc-sky); transition: color 0.4s; }
.vc-pillar:hover .vc-pillar-num { color: #d4e5ff; }
.vc-pillar-icon { width: 68px; height: 68px; border-radius: 18px; display: grid; place-items: center; font-size: 32px; color: #fff; background: linear-gradient(135deg, var(--vc-navy), var(--vc-blue)); margin-bottom: 22px; position: relative; }
.vc-pillar h3 { font-family: var(--heading-font); font-weight: 700; font-size: 24px; color: var(--vc-navy); margin: 0 0 10px; position: relative; }
.vc-pillar p { margin: 0; color: var(--vc-body); font-size: 16px; line-height: 1.7; position: relative; }

/* Amenity chips */
.vc-amenities { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.vc-amenities li { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: #fff; border: 1px solid var(--vc-line); border-radius: 14px; font-weight: 600; color: var(--vc-ink); font-size: 15.5px; transition: transform 0.3s var(--vc-ease), border-color 0.3s, box-shadow 0.3s; }
.vc-amenities li:hover { transform: translateY(-3px); border-color: var(--vc-blue); box-shadow: var(--vc-shadow); }
.vc-amenities li i { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--vc-sky); color: var(--vc-blue); font-size: 18px; flex: none; }
.vc-amenities li.lux i { background: #fff1ec; color: var(--vc-orange); }
@media (max-width: 520px) { .vc-amenities { grid-template-columns: 1fr; } }

/* Split media block */
.vc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.vc-split.vc-rev .vc-split-media { order: 2; }
@media (max-width: 991px) { .vc-split { grid-template-columns: 1fr; gap: 40px; } .vc-split.vc-rev .vc-split-media { order: 0; } }
.vc-split-media { position: relative; }
.vc-split-media .main { border-radius: 24px; overflow: hidden; box-shadow: var(--vc-shadow-lg); aspect-ratio: 5 / 4; }
.vc-split-media .main img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--vc-ease); }
.vc-split-media:hover .main img { transform: scale(1.05); }
.vc-split-media::before { content: ""; position: absolute; left: -18px; top: -18px; width: 45%; height: 45%; border-radius: 24px; border: 3px solid var(--vc-blue); z-index: -1; opacity: 0.35; }
.vc-float-badge {
  position: absolute; right: -14px; bottom: 28px; background: var(--vc-cta); color: #fff; padding: 18px 24px; border-radius: 18px;
  box-shadow: 0 16px 34px rgba(217, 52, 0, 0.4); text-align: center; animation: vcFloat 4s ease-in-out infinite;
}
.vc-float-badge strong { display: block; font-family: var(--heading-font); font-size: 40px; line-height: 1; font-weight: 800; }
.vc-float-badge span { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
@keyframes vcFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 575px) { .vc-float-badge { right: 8px; } }

/* Check list */
.vc-checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.vc-checks li { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; line-height: 1.55; color: var(--vc-ink); font-weight: 500; }
.vc-checks li i { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--vc-blue); color: #fff; font-size: 14px; margin-top: 1px; }
.vc-dark .vc-checks li { color: #fff; }

/* Stats */
.vc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.vc-stat { text-align: center; padding: 34px 16px; border-radius: var(--vc-radius); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); transition: transform 0.4s var(--vc-ease), background 0.3s; }
.vc-stat:hover { transform: translateY(-6px); background: rgba(255, 255, 255, 0.13); }
.vc-stat strong { display: block; font-family: var(--heading-font); font-weight: 800; font-size: clamp(38px, 5vw, 58px); line-height: 1; color: #fff; }
.vc-stat strong sup { font-size: 0.5em; color: #ffb199; top: -0.7em; }
.vc-stat > span { display: block; margin-top: 10px; color: rgba(255, 255, 255, 0.82); font-size: 15px; font-weight: 500; letter-spacing: 0.02em; }
@media (max-width: 767px) { .vc-stats { grid-template-columns: repeat(2, 1fr); } }

/* Clients marquee */
.vc-marquee { overflow: hidden; position: relative; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.vc-marquee-track { display: flex; gap: 22px; width: max-content; animation: vcMarquee 34s linear infinite; }
.vc-marquee:hover .vc-marquee-track { animation-play-state: paused; }
.vc-client { display: flex; align-items: center; gap: 14px; padding: 20px 30px; border-radius: 16px; background: #fff; border: 1px solid var(--vc-line); box-shadow: var(--vc-shadow); font-family: var(--heading-font); font-weight: 700; font-size: 19px; color: var(--vc-navy); white-space: nowrap; }
.vc-client i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--vc-sky); color: var(--vc-blue); font-size: 22px; }
@keyframes vcMarquee { to { transform: translateX(calc(-50% - 11px)); } }

/* Steps */
.vc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; position: relative; counter-reset: vcs; }
.vc-steps.vc-3 { grid-template-columns: repeat(3, 1fr); }
.vc-steps::before { content: ""; position: absolute; top: 38px; left: 12%; right: 12%; border-top: 3px dashed #bcd3f7; z-index: 0; }
.vc-step { position: relative; z-index: 1; text-align: center; padding: 0 8px; }
.vc-step-num {
  width: 78px; height: 78px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: #fff; border: 3px solid var(--vc-blue); color: var(--vc-blue); font-size: 30px; box-shadow: 0 0 0 8px var(--vc-soft);
  transition: transform 0.4s var(--vc-ease), background 0.3s, color 0.3s, border-color 0.3s;
}
.vc-step:hover .vc-step-num { transform: scale(1.1) rotate(-8deg); background: var(--vc-blue); color: #fff; }
.vc-step-num b { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; border-radius: 50%; background: var(--vc-cta); color: #fff; font-size: 13px; display: grid; place-items: center; font-family: var(--heading-font); }
.vc-step h3 { font-family: var(--heading-font); font-weight: 700; font-size: 21px; color: var(--vc-navy); margin: 0 0 8px; }
.vc-step p { font-size: 15.5px; color: var(--vc-body); line-height: 1.65; margin: 0; }
@media (max-width: 991px) { .vc-steps, .vc-steps.vc-3 { grid-template-columns: repeat(2, 1fr); row-gap: 40px; } .vc-steps::before { display: none; } }
/* three-step rows stay on one line on tablets (no orphaned third step) */
@media (min-width: 576px) and (max-width: 991px) { .vc-steps.vc-3 { grid-template-columns: repeat(3, 1fr); gap: 16px; } .vc-steps.vc-3 .vc-step { padding: 0; } }
@media (max-width: 575px) { .vc-steps, .vc-steps.vc-3 { grid-template-columns: 1fr; } }

/* City tiles */
.vc-city {
  position: relative; border-radius: 16px; padding: 24px 22px; background: #fff; border: 1px solid var(--vc-line); overflow: hidden;
  display: flex; gap: 14px; align-items: center; transition: transform 0.35s var(--vc-ease), box-shadow 0.35s, border-color 0.3s;
}
.vc-city::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, var(--vc-navy), var(--vc-blue)); opacity: 0; transition: opacity 0.35s; }
.vc-city > * { position: relative; z-index: 1; transition: color 0.3s; }
.vc-city:hover { transform: translateY(-6px); box-shadow: var(--vc-shadow-lg); border-color: transparent; }
.vc-city:hover::after { opacity: 1; }
.vc-city i { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--vc-sky); color: var(--vc-blue); font-size: 21px; flex: none; transition: background 0.3s, color 0.3s; }
.vc-city:hover i { background: rgba(255, 255, 255, 0.18); color: #fff; }
.vc-city strong { display: block; font-family: var(--heading-font); font-size: 19px; color: var(--vc-navy); line-height: 1.2; }
.vc-city span { font-size: 14px; color: var(--vc-body); }
.vc-city:hover strong, .vc-city:hover span { color: #fff; }

/* Fleet cards */
.vc-car { background: #fff; border-radius: var(--vc-radius); overflow: hidden; border: 1px solid var(--vc-line); box-shadow: var(--vc-shadow); display: flex; flex-direction: column; transition: transform 0.4s var(--vc-ease), box-shadow 0.4s; }
.vc-car:hover { transform: translateY(-8px); box-shadow: var(--vc-shadow-lg); }
.vc-car-media { position: relative; background: linear-gradient(135deg, var(--vc-navy-deep), var(--vc-blue)); aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; }
.vc-car-media img { width: 88%; height: 88%; object-fit: contain; transition: transform 0.7s var(--vc-ease); filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.35)); }
.vc-car:hover .vc-car-media img { transform: scale(1.08) translateX(6px); }
.vc-car-tier { position: absolute; left: 16px; top: 16px; padding: 6px 14px; border-radius: 30px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(255, 255, 255, 0.95); color: var(--vc-navy); }
.vc-car-tier.lux { background: var(--vc-cta); color: #fff; }
.vc-car-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.vc-car-body h3 { font-family: var(--heading-font); font-weight: 700; font-size: 22px; color: var(--vc-navy); margin: 0 0 4px; }
.vc-car-body .type { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vc-blue); margin-bottom: 12px; }
.vc-car-body p { color: var(--vc-body); font-size: 15.5px; line-height: 1.65; margin: 0 0 18px; flex: 1; }
.vc-car-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.vc-car-tags span { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 30px; background: var(--vc-soft); font-size: 13px; font-weight: 600; color: var(--vc-navy); }
.vc-car-tags span i { color: var(--vc-blue); }

/* Tier photo banner */
.vc-tier { position: relative; border-radius: 26px; overflow: hidden; min-height: 320px; display: flex; align-items: flex-end; color: #fff; margin-bottom: 40px; isolation: isolate; box-shadow: var(--vc-shadow-lg); }
.vc-tier > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--vc-ease); }
.vc-tier:hover > img { transform: scale(1.05); }
.vc-tier::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 20, 78, 0.95), rgba(0, 20, 78, 0.78) 55%, rgba(0, 20, 78, 0.3)); }
.vc-tier-body { padding: 38px 42px; max-width: 760px; }
.vc-tier-body h2 { font-family: var(--heading-font); font-weight: 800; font-size: clamp(28px, 3.6vw, 42px); color: #fff; margin: 0 0 8px; }
.vc-tier-body p { margin: 0; color: rgba(255, 255, 255, 0.88); font-size: 17px; line-height: 1.65; }
.vc-note { font-size: 14px; color: var(--vc-body); font-style: italic; }

/* Comparison table */
.vc-table-wrap { overflow-x: auto; border-radius: var(--vc-radius); box-shadow: var(--vc-shadow); border: 1px solid var(--vc-line); background: #fff; }
.vc-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.vc-table th, .vc-table td { padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--vc-line); font-size: 16px; }
.vc-table thead th { background: var(--vc-navy); color: #fff; font-family: var(--heading-font); font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; border: 0; }
.vc-table thead th:last-child { background: var(--vc-cta); }
.vc-table td:not(:first-child), .vc-table th:not(:first-child) { text-align: center; width: 22%; }
.vc-table tbody tr:hover { background: var(--vc-sky); }
.vc-table .yes { color: var(--vc-blue); font-size: 22px; }
.vc-table .no { color: #b3bbcf; font-size: 20px; }

/* FAQ */
.vc-faq { max-width: 900px; margin: 0 auto; display: grid; gap: 14px; }
.vc-faq details { background: #fff; border: 1px solid var(--vc-line); border-radius: 16px; box-shadow: var(--vc-shadow); transition: border-color 0.3s, box-shadow 0.3s; }
.vc-faq details[open] { border-color: var(--vc-blue); box-shadow: var(--vc-shadow-lg); }
.vc-faq summary { list-style: none; cursor: pointer; padding: 22px 26px; font-family: var(--heading-font); font-weight: 700; font-size: 19px; color: var(--vc-navy); display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.vc-faq summary::-webkit-details-marker { display: none; }
.vc-faq summary::after { content: "+"; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--vc-sky); color: var(--vc-blue); font-size: 24px; line-height: 1; transition: transform 0.35s var(--vc-ease), background 0.3s, color 0.3s; }
.vc-faq details[open] summary::after { transform: rotate(45deg); background: var(--vc-orange); color: #fff; }
.vc-faq details p { margin: 0; padding: 0 26px 24px; color: var(--vc-body); font-size: 16.5px; line-height: 1.75; animation: vcFade 0.4s var(--vc-ease); }
@keyframes vcFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* CTA band */
.vc-cta { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--vc-navy-deep), var(--vc-navy) 50%, var(--vc-blue)); color: #fff; border-radius: 28px; padding: 64px 56px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center; box-shadow: var(--vc-shadow-lg); isolation: isolate; }
.vc-cta::before { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); z-index: -1; animation: vcFloat 7s ease-in-out infinite; }
.vc-cta::after { content: ""; position: absolute; right: 120px; bottom: -120px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255, 63, 0, 0.25); z-index: -1; animation: vcFloat 9s ease-in-out infinite reverse; }
.vc-cta h2 { font-family: var(--heading-font); font-weight: 800; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.15; color: #fff; margin: 0 0 14px; }
.vc-cta p { margin: 0; color: rgba(255, 255, 255, 0.86); font-size: 18px; line-height: 1.65; }
.vc-cta-actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.vc-cta-phone { font-family: var(--heading-font); font-weight: 700; font-size: 22px; color: #fff; text-decoration: none; display: inline-flex; gap: 10px; align-items: center; }
.vc-cta-phone:hover { color: #9ec5ff; }
@media (max-width: 860px) { .vc-cta { grid-template-columns: 1fr; padding: 44px 28px; } }

/* Quiet door for agreement clients */
.vc-quiet { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 22px 28px; border-radius: 16px; background: var(--vc-sky); border: 1px dashed #9ec5ff; margin-top: 28px; }
.vc-quiet i { font-size: 28px; color: var(--vc-blue); }
.vc-quiet div { flex: 1; min-width: 220px; color: var(--vc-ink); font-size: 16px; line-height: 1.55; }
.vc-quiet a { font-weight: 700; color: var(--vc-navy); text-decoration: underline; text-underline-offset: 3px; }

/* Forms */
.vc-form-card { background: #fff; border-radius: 24px; padding: 28px 30px; container-type: inline-size; box-shadow: var(--vc-shadow-lg); border: 1px solid var(--vc-line); position: relative; }
/* Top accent bar. The pseudo-element is tall enough to carry the card's full 24px corner curve
   (a 6px-tall box would shrink the radius), and the gradient paints only its top 6px. It extends
   over the 1px border so the bar and the card edge are one continuous curve. */
.vc-form-card::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 40px; border-radius: 25px 25px 0 0; pointer-events: none; background: linear-gradient(90deg, var(--vc-navy) 0 34%, var(--vc-orange) 34% 40%, var(--vc-blue) 40% 100%) top / 100% 7px no-repeat; }
.vc-form-card h3 { font-family: var(--heading-font); font-weight: 800; color: var(--vc-navy); font-size: 24px; margin: 0 0 4px; }
.vc-form-card > p { color: var(--vc-body); margin: 0 0 14px; font-size: 15px; line-height: 1.5; }
.vc-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 14px; }
.vc-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.vc-field.tp { grid-column: 1 / -1; }
.vc-field.full { grid-column: 1 / -1; }
.vc-field label { font-size: 13px; font-weight: 700; color: var(--vc-navy); letter-spacing: 0.04em; text-transform: uppercase; }
.vc-req { color: var(--vc-cta); }
.vc-req-note { margin: 0 0 10px; font-size: 13px; color: var(--vc-body); }
.vc-req-note span { color: var(--vc-cta); font-weight: 700; }

/* Control = bordered shell holding icon + input, so focus / error / valid states paint one consistent outline */
.vc-control { position: relative; display: flex; align-items: center; background: #fff; border: 1.5px solid #cfd8ec; border-radius: 14px; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; }
.vc-control:hover { border-color: #9fb3dc; }
.vc-control:focus-within { border-color: var(--vc-blue-text); box-shadow: 0 0 0 4px rgba(0, 111, 245, 0.16); }
.vc-ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--vc-blue-text); pointer-events: none; transition: color 0.2s; }
.vc-control-area .vc-ico { top: 14px; transform: none; }
.vc-control:focus-within .vc-ico { color: var(--vc-navy); }
.vc-control input, .vc-control select, .vc-control textarea {
  width: 100%; min-width: 0; border: 0; background: transparent; outline: 0; box-shadow: none; border-radius: 14px;
  font: inherit; font-size: 16px; color: var(--vc-ink); padding: 10px 14px 10px 44px; min-height: 46px;
}
.vc-control textarea { resize: vertical; min-height: 72px; padding-top: 12px; line-height: 1.5; }
.vc-control ::placeholder { color: #6b7592; opacity: 1; }
.vc-control select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 44px; }
.vc-control select:invalid { color: #6b7592; }
.vc-control select option { color: var(--vc-ink); }
.vc-chev { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--vc-body); pointer-events: none; }

/* Phone: country-code selector fused to the number field */
.vc-control-phone { padding: 0; }
.vc-control-phone .vc-cc { flex: 0 0 auto; display: flex; align-items: center; align-self: stretch; padding: 0 16px; user-select: none; border-right: 1.5px solid #e3e9f5; border-radius: 14px 0 0 14px; font-weight: 700; color: var(--vc-navy);
  background: var(--vc-soft); }
.vc-control-phone input { padding-left: 16px; letter-spacing: 0.04em; border-radius: 0 14px 14px 0; }

/* States */
.vc-field.is-invalid .vc-control { border-color: #c0261f; background: #fff8f7; }
.vc-field.is-invalid .vc-control:focus-within { box-shadow: 0 0 0 4px rgba(192, 38, 31, 0.16); }
.vc-field.is-invalid .vc-ico { color: #c0261f; }
.vc-field.is-valid .vc-control { border-color: #1a8a4f; }
.vc-field.is-valid .vc-control:not(.vc-control-select):not(.vc-control-area)::after { content: "\F26A"; font-family: "bootstrap-icons"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #1a8a4f; font-size: 18px; pointer-events: none; }
.vc-field.is-valid .vc-control input { padding-right: 42px; }
.vc-field-meta { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.vc-err { margin: 0; font-size: 13.5px; line-height: 1.4; color: #b3221b; font-weight: 600; display: flex; gap: 6px; align-items: flex-start; }
.vc-err::before { content: "\F332"; font-family: "bootstrap-icons"; font-weight: 400; line-height: 1.3; }
.vc-err[hidden] { display: none; }
.vc-count { margin-left: auto; font-size: 12.5px; color: var(--vc-body); white-space: nowrap; font-variant-numeric: tabular-nums; }

.vc-form-foot { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.vc-form-foot small { color: var(--vc-body); font-size: 13.5px; flex: 1; min-width: 200px; line-height: 1.55; }
.vc-form-foot .vc-btn { min-height: 48px; }
.vc-form-foot .vc-btn[disabled] { opacity: 0.8; cursor: progress; }
.vc-form-foot .vc-btn.is-loading i { display: none; }
.vc-form-foot .vc-btn.is-loading span::before { content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 10px; vertical-align: -2px; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; border-radius: 50%; animation: vc-spin 0.7s linear infinite; }
@keyframes vc-spin { to { transform: rotate(360deg); } }

/* Wide card: short fields sit three to a row so the whole form fits one screen */
@container (min-width: 600px) {
  .vc-fields { grid-template-columns: repeat(6, 1fr); }
  .vc-field { grid-column: span 2; }
  .vc-field.w3 { grid-column: span 3; }
  .vc-field.tp { grid-column: span 3; }
  .vc-field.full { grid-column: 1 / -1; }
}
.vc-form-card .vc-quiet { margin-top: 16px; padding: 12px 18px; gap: 12px; }
.vc-form-card .vc-quiet i { font-size: 22px; }
.vc-form-card .vc-quiet div { font-size: 14px; line-height: 1.45; }

/* Submit result panel */
.vc-form-state { margin-top: 22px; padding: 16px 18px; border-radius: 14px; font-size: 15px; line-height: 1.6; border: 1.5px solid; }
.vc-form-state p { margin: 0 0 8px; }
.vc-form-state p:last-child { margin-bottom: 0; }
.vc-form-state[data-tone="ok"] { background: #eefaf3; border-color: #9ad7b5; color: #0f5132; }
.vc-form-state[data-tone="error"] { background: #fff6e8; border-color: #f2c98a; color: #5c3a00; }
.vc-form-state a { font-weight: 700; color: var(--vc-navy); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 575px) {
  .vc-fields { grid-template-columns: 1fr; }
  .vc-form-card { padding: 22px 16px; }
  .vc-form-foot .vc-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .vc-form-foot .vc-btn.is-loading span::before { animation-duration: 2s; } }

/* Contact channel tiles */
.vc-channel { display: flex; gap: 18px; align-items: flex-start; padding: 26px; background: #fff; border: 1px solid var(--vc-line); border-radius: var(--vc-radius); box-shadow: var(--vc-shadow); transition: transform 0.35s var(--vc-ease), box-shadow 0.35s, border-color 0.3s; text-decoration: none; color: inherit; }
.vc-channel:hover { transform: translateY(-6px); box-shadow: var(--vc-shadow-lg); border-color: var(--vc-blue); }
.vc-channel > i { flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 25px; color: #fff; background: var(--vc-blue); transition: background 0.3s, transform 0.4s var(--vc-ease); }
.vc-channel:hover > i { background: var(--vc-orange); transform: rotate(-8deg) scale(1.06); }
.vc-channel small { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vc-blue); margin-bottom: 4px; }
.vc-channel strong { display: block; font-family: var(--heading-font); font-size: 20px; color: var(--vc-navy); line-height: 1.3; }
.vc-channel span { display: block; margin-top: 4px; color: var(--vc-body); font-size: 15px; line-height: 1.5; }

/* Blog cards */
.vc-post .vc-card-body { padding-top: 26px; }
.vc-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13.5px; color: var(--vc-body); margin-bottom: 10px; font-weight: 600; }
.vc-meta i { color: var(--vc-blue); margin-right: 5px; }

/* Value list on inner pages */
.vc-value { display: flex; gap: 20px; padding: 26px; border-radius: var(--vc-radius); background: #fff; border: 1px solid var(--vc-line); box-shadow: var(--vc-shadow); transition: transform 0.35s var(--vc-ease), box-shadow 0.35s; height: 100%; }
.vc-value:hover { transform: translateY(-6px); box-shadow: var(--vc-shadow-lg); }
.vc-value > i { flex: none; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; color: var(--vc-blue); background: var(--vc-sky); transition: all 0.4s var(--vc-ease); }
.vc-value:hover > i { background: var(--vc-blue); color: #fff; transform: rotate(-8deg); }
.vc-value h3 { font-family: var(--heading-font); font-weight: 700; font-size: 20px; color: var(--vc-navy); margin: 0 0 8px; }
.vc-value p { margin: 0; color: var(--vc-body); font-size: 16px; line-height: 1.65; }

/* Factory strip */
.vc-factory { display: grid; grid-template-columns: 1fr 1fr; border-radius: 26px; overflow: hidden; box-shadow: var(--vc-shadow-lg); background: #fff; border: 1px solid var(--vc-line); }
.vc-factory-media { position: relative; min-height: 340px; }
.vc-factory-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vc-factory-body { padding: 44px; }
@media (max-width: 860px) { .vc-factory { grid-template-columns: 1fr; } .vc-factory-body { padding: 30px 24px; } }

/* Prose (blog & details) */
.vc-prose { max-width: 820px; margin: 0 auto; font-size: 18px; line-height: 1.85; color: var(--vc-body); }
.vc-prose h2 { font-family: var(--heading-font); color: var(--vc-navy); font-weight: 700; font-size: 30px; margin: 44px 0 14px; }
.vc-prose h3 { font-family: var(--heading-font); color: var(--vc-navy); font-weight: 700; font-size: 23px; margin: 30px 0 10px; }
.vc-prose a { color: var(--vc-blue); font-weight: 600; }

/* Sticky mobile call bar */
.vc-callbar { display: none; }
@media (max-width: 767px) {
  .vc-callbar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; box-shadow: 0 -8px 24px rgba(0, 20, 78, 0.25); }
  .vc-callbar a { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 15px 8px; color: #fff; font-family: var(--heading-font); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; }
  .vc-callbar a:first-child { background: var(--vc-navy); }
  .vc-callbar a:last-child { background: var(--vc-cta); }
  body { padding-bottom: 54px; }
}

/* Hover-tilt utility */
.vc-reveal-stagger > * { transition-delay: calc(var(--i, 0) * 80ms); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vc-hero-slides span { animation: none; }
  .vc-hero-slides span:first-child { opacity: 1; }
  .vc-marquee-track, .vc-float-badge, .vc-btn-primary::after, .vc-hero-phone span.ic, .vc-cta::before, .vc-cta::after { animation: none; }
  .vc-card:hover, .vc-pillar:hover, .vc-car:hover, .vc-city:hover, .vc-channel:hover, .vc-value:hover { transform: none; }
}

/* ---- fixes from visual review ---- */
.vc-banner-sub { margin: 0 0 16px; }
.vc-wide .vc-checks li, .vc-checks.vc-dark li { color: #fff; }
.vc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1199px) { .vc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991px) { .vc-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vc-grid-3, .vc-grid-4, .vc-grid-2 { grid-template-columns: minmax(0, 1fr); } }
.vc-channel strong, .vc-channel span { overflow-wrap: anywhere; }
@media (max-width: 1100px) and (min-width: 992px) { .vc-grid-3 .vc-channel { flex-direction: column; } }
/* phones: stack icon above text so long email addresses don't break mid-word */
@media (max-width: 480px) {
  .vc-channel { flex-direction: column; gap: 14px; padding: 22px; }
  .vc-channel strong { font-size: 18px; overflow-wrap: break-word; }
}

/* client logo cards */
.vc-client-logo { flex-direction: column; gap: 14px; padding: 22px 30px 18px; min-width: 250px; text-align: center; justify-content: center; }
.vc-client-mark { display: flex; align-items: center; justify-content: center; width: 200px; height: 64px; }
.vc-client-mark img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vc-client-name { font-family: var(--heading-font); font-weight: 600; font-size: 14px; color: var(--vc-body); letter-spacing: 0.02em; }

/* official fleet photos */
.vc-car-media { background: #fff; border-bottom: 1px solid var(--vc-line); }
.vc-car-media img { width: 100%; height: 100%; object-fit: contain; filter: none; padding: 6px; }
.vc-car:hover .vc-car-media img { transform: scale(1.06); }

/* tier banners: show more of the car, keep text readable */
.vc-tier { min-height: 420px; }
.vc-tier > img { object-position: 50% 32%; }

/* footer logo: sits below the "About" heading */
.vc-has-logo { position: relative; }
.vc-footer-logo { display: block; margin: 16px 0 14px; }
.vc-footer-logo img { display: block; height: 88px; width: auto; transition: transform 0.35s var(--vc-ease); }
.vc-footer-logo:hover img { transform: scale(1.06); }

/* touch targets: 44px minimum on phones/tablets */
/* hamburger keeps the template's 30x27 box (bars are drawn relative to it, so
   it stays vertically centred); the tap area is enlarged with a pseudo-element */
.cs-munu_toggle::before { content: ""; position: absolute; inset: -10px -12px; }
/* the template offsets the bars 12px down for a <span>; a <button> already centres its content */
.header-area2 .cs-munu_toggle span { top: 0; }
/* phones/tablets: logo sits inside the 80px bar with breathing room */
@media (max-width: 1199px) {
  .header-area2 .cs_site_branding img { height: 56px; width: auto; display: block; }
}
@media (max-width: 575px) {
  .header-area2 .cs_site_branding img { height: 48px; }
}
@media (max-width: 991px) {
  .vc-cta-phone { min-height: 44px; }
}


/* =========================================================================
 * Accessibility pass (2026-09-30)
 * ====================================================================== */

/* Skip link: off-screen until focused, then the first thing on the page. */
.vc-skip-link {
  position: fixed; left: 12px; top: -80px; z-index: 100001; padding: 12px 20px;
  background: var(--vc-navy); color: #fff; font-family: var(--heading-font); font-weight: 700; font-size: 16px;
  border-radius: 8px; text-decoration: none; transition: top 0.15s ease;
}
.vc-skip-link:focus, .vc-skip-link:focus-visible { top: 12px; color: #fff; outline: 3px solid #fff; outline-offset: 0; box-shadow: 0 0 0 6px var(--vc-blue-text); }
main:focus { outline: 0; }

/* Nav hover: the template's amber (#e9a132) is 2.19:1 on white */
.cs_nav_list > li > a:hover, .cs_nav_list > li > a:focus-visible { color: var(--vc-blue-text); }

/* Focus rings: 3px, on light backgrounds #005fd1 (5.9:1 on white) */
.vc-btn:focus-visible, .vc-card:focus-visible, .vc-channel:focus-visible, .vc-more:focus-visible,
.cs_card:focus-visible, .cs_btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 3px solid var(--vc-blue-text); outline-offset: 3px;
}
/* Form fields: the .vc-control shell draws the focus ring (:focus-within), so the inner input has none */
.vc-faq summary:focus-visible { outline: 3px solid var(--vc-blue-text); outline-offset: -3px; border-radius: 16px; }
/* On navy/blue backgrounds the blue ring is 2.7:1 or worse, so use white (12.3:1 on navy) */
:is(.vc-dark, .vc-hero, .vc-cta, .vc-wide, .vc-tier, .cs_page_heading, .cs_footer) :is(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid #fff; outline-offset: 3px;
}
.cs_top_header :is(a, button):focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vc-callbar a:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

@media (min-width: 1200px) { .header-area2 .cs_site_branding img { height: auto; } }

@media (prefers-reduced-motion: reduce) {
  /* hover zooms / lifts / tilts */
  .vc-btn:hover, .vc-btn:hover i, .vc-card:hover, .vc-card:hover .vc-card-img img, .vc-card:hover .vc-card-icon,
  .vc-card:hover .vc-more i, .vc-more:hover i, .vc-wide:hover .vc-wide-media img, .vc-pillar:hover,
  .vc-split-media:hover .main img, .vc-stat:hover, .vc-amenities li:hover, .vc-ribbon-item:hover i,
  .vc-step:hover .vc-step-num, .vc-tier:hover > img, .vc-car:hover, .vc-car:hover .vc-car-media img,
  .vc-city:hover, .vc-channel:hover, .vc-channel:hover > i, .vc-value:hover, .vc-value:hover > i,
  .vc-footer-logo:hover img, .vc-btn-primary:hover, .cs_card.cs_style_1:hover {
    transform: none !important;
  }
  /* looping decorative motion */
  .vc-hero-slides span, .vc-marquee-track, .vc-float-badge, .vc-btn-primary::after, .vc-hero-phone span.ic,
  .vc-cta::before, .vc-cta::after, .vc-faq details p { animation: none !important; }
  .vc-hero-slides span:not(:first-child) { display: none; }
  .vc-hero-slides span:first-child { opacity: 1; transform: none; }
  .vc-btn-primary::after { display: none; }
  /* marquee no longer scrolls itself: let it be scrolled by hand so no logo is unreachable */
  .vc-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .vc-card-img img, .vc-car-media img, .vc-tier > img, .vc-wide-media img, .vc-split-media .main img { transition: none; }
}

/* email addresses stay on one line so they can be copied cleanly */
a[href^="mailto:"]:not(.vc-btn):not(.cs_heading_color):not(.vc-channel) { white-space: nowrap; }
@media (max-width: 575px) {
  /* give long email addresses the full card width so they fit on one line */
  .vc-channels .vc-channel { padding: 20px; }
  .vc-quiet { padding: 18px 14px; }
  .vc-quiet div { min-width: 100%; }
  .vc-quiet a { font-size: clamp(12px, 3.8vw, 16px); }
  p a[href^="mailto:"]:not(.vc-btn), li a[href^="mailto:"]:not(.vc-btn) { font-size: clamp(14px, 4.8vw, 18px); }
}

/* contact cards: each email is sized from its card so it always fits on one line.
   Under 1300px the three cards stack one per row (icon left); on phones the icon sits above the text. */
.vc-channels .vc-channel { container-type: inline-size; }
.vc-channels .vc-channel[href^="mailto:"] strong { white-space: nowrap; font-family: Roboto, sans-serif; font-weight: 700; font-size: min(20px, calc((100cqw - 74px) / 19.6)); }
.vc-channels .vc-channel[href^="mailto:"] span { white-space: normal; }
@media (max-width: 1299px) { .vc-channels.vc-grid-3 { grid-template-columns: 1fr; } }
@media (min-width: 1300px) {
  .vc-channels .vc-channel { flex-direction: column; align-items: stretch; gap: 14px; }
  .vc-channels .vc-channel[href^="mailto:"] strong { font-size: min(20px, 5.1cqw); }
}
@media (max-width: 575px) {
  .vc-channels .vc-channel { flex-direction: column; align-items: stretch; gap: 14px; }
  .vc-channels .vc-channel[href^="mailto:"] strong { font-size: min(20px, 5.1cqw); }
}

/* phone numbers stay on one line */
a[href^="tel:"]:not(.vc-channel):not(.vc-hero-phone), .vc-tel { white-space: nowrap; }

/* channel cards: icon above text, and the email is sized from the card width so it always fits on one line */
.vc-channel { flex-direction: column; align-items: stretch; gap: 14px; container-type: inline-size; }
.vc-channel strong { font-family: Roboto, sans-serif; font-weight: 700; font-size: min(20px, 5.1cqw); }

/* Enquiry modal (native <dialog>) */
.vc-modal { border: 0; padding: 0; background: transparent; width: 100%; max-width: min(760px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; border-radius: 24px; color: inherit; overscroll-behavior: contain; }
.vc-modal::backdrop { background: rgba(0, 20, 70, 0.62); backdrop-filter: blur(4px); }
.vc-modal[open] { animation: vc-modal-in 0.28s var(--vc-ease); }
.vc-modal[open]::backdrop { animation: vc-fade-in 0.28s ease; }
@keyframes vc-modal-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes vc-fade-in { from { opacity: 0; } to { opacity: 1; } }
.vc-modal .vc-form-card { box-shadow: none; border: 0; }
/* Slim, rounded scrollbar: floats over the card edge instead of a heavy grey gutter */
.vc-modal::-webkit-scrollbar { width: 8px; }
.vc-modal::-webkit-scrollbar-track { background: transparent; margin: 18px 0; }
.vc-modal::-webkit-scrollbar-thumb { background: rgba(0, 43, 137, 0.3); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
.vc-modal::-webkit-scrollbar-thumb:hover { background: var(--vc-blue); background-clip: content-box; }
.vc-modal .vc-form-card { padding-top: 24px; padding-bottom: 20px; }
.vc-modal .vc-form-foot { margin-top: 10px; }
.vc-modal .vc-form-card .vc-quiet { margin-top: 12px; padding: 10px 16px; }
.vc-modal .vc-form-card h3 { padding-right: 44px; }
.vc-modal-close { position: absolute; top: 18px; right: 18px; z-index: 2; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--vc-soft); color: var(--vc-navy); font-size: 16px; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.vc-modal-close:hover { background: var(--vc-navy); color: #fff; }
body:has(dialog[open]) { overflow: hidden; }
@media (max-width: 575px) { .vc-modal-close { top: 12px; right: 12px; } }
@media (prefers-reduced-motion: reduce) { .vc-modal[open], .vc-modal[open]::backdrop { animation: none; } }

/* Top-of-page content (page banner, homepage hero) shows immediately: no fade/slide-in after a menu click.
   Scroll reveals further down each page are unchanged. */
html.cs-reveal-ready :is(.cs_page_heading, .vc-hero) .wow:not(.cs-revealed) { opacity: 1; transform: none; will-change: auto; }
html.cs-reveal-ready :is(.cs_page_heading, .vc-hero) .wow.cs-revealed { animation: none; }

/* footer color logo: white card keeps navy "CARZ" readable on the dark footer */
.vc-footer-logo { display: inline-block; background: rgba(255, 255, 255, 0.95); border-radius: 12px; padding: 12px 16px; }
.vc-footer-logo img { height: 72px; }

/* Brand scrollbars (page + modal): slim, rounded, navy-to-blue thumb on a soft track.
   Chromium/Safari use the ::-webkit-scrollbar pieces; Firefox gets the standard properties
   (kept behind @supports because Chromium 121+ would otherwise let them override the gradient). */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--vc-soft); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--vc-navy), var(--vc-blue)); border-radius: 8px; border: 2px solid var(--vc-soft); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--vc-navy-deep), var(--vc-navy)); }
.vc-modal::-webkit-scrollbar-track { background: transparent; }
.vc-modal::-webkit-scrollbar-thumb { border-color: transparent; }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--vc-navy) var(--vc-soft); }
  .vc-modal { scrollbar-width: thin; scrollbar-color: var(--vc-navy) transparent; }
}