/* ---------- Variables ---------- */
:root {
  --yellow: #ffd400;
  --black: #0b0b0b;
  --glass-bg: rgba(255,255,255,0.12);
  --glass-border: rgba(255,255,255,0.22);
  --container: 1300px;
  --card-radius: 16px;
  --shadow: 0 10px 30px rgba(2,6,23,0.08);
  --primary: #ffd400; /* Chariot blue */
  --accent: #222; /* Warm accent */
  --text-dark: #222;
  --text-light: #666;
  --bg-light: #f9fafb;
  --white: #fff;
}


.drive-header {
  background: var(--text-dark);
  color: var(--primary);
  padding: 4rem 2rem 5rem;
  text-align: center;
}

.drive-header h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.drive-header p {
  max-width: 600px;
  margin: 0 auto 1.5rem;
  font-size: 1.1rem;
}

.drive-header button {
  background: var(--accent);
  border: 2px solid var(--primary);
  color: var(--white);
  padding: 0.9rem 1.8rem;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s ease;
}

.drive-header button:hover {
  background: var(--primary);
  color: var(--text-dark);
  border: 2px solid var(--text-dark);
}

.section-container {
  max-width: 1200px;
  margin: -3rem auto 2rem;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 6px 25px rgba(0,0,0,0.1);
  overflow: hidden;
}

.requirements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  padding: 1rem;
}

.requirement {
  background: var(--bg-light);
  border-radius: 15px;
  padding: 2rem;
  transition: all 0.3s ease;
}

.requirement:hover {
  background: var(--primary);
  color: var(--text-dark);
  transform: translateY(-5px);
}

.requirement h3 {
  margin-bottom: 1rem;
  color: inherit;
}

ul {
  list-style-type: none;
  padding: 0;
}

ul li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 13px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin: 0 12px 2px 3px;
  color: var(--accent);
}


@media (max-width: 600px) {
  .drive-header h1 {
    font-size: 2rem;
  }
  .drive-header button {
    width: 100%;
  }
}



.ride-header {
  background: var(--text-dark);
  color: var(--primary);
  text-align: center;
  padding: 5rem 2rem 6rem;
}

.ride-header h1 {
  font-size: 2.6rem;
  margin-bottom: 0.5rem;
}

.ride-header p {
  max-width: 600px;
  margin: 0 auto 1.5rem;
  font-size: 1.1rem;
}

.store-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.store-buttons img {
  height: 55px;
  transition: transform 0.3s ease;
}

.store-buttons img:hover {
  transform: scale(1.05);
}

.section-container {
  max-width: 1000px;
  margin: -3rem auto 4rem;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 6px 25px rgba(0,0,0,0.1);
  overflow: hidden;
  padding: 3rem;
}

.info {
  text-align: center;
  margin-bottom: 3rem;
}

.info h2 {
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

.info p {
  color: var(--text-light);
  max-width: 700px;
  margin: 0 auto;
}

.ride-ride-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  text-align: center;
}

.ride-feature {
  background: var(--bg-light);
  border-radius: 15px;
  padding: 2rem 1.5rem;
  transition: all 0.3s ease;
}

.ride-feature:hover {
  background: var(--text-dark);
  color: var(--primary);
  transform: translateY(-5px);
}

.ride-feature h3 {
  margin-bottom: 0.8rem;
}


@media (max-width: 600px) {
  .ride-header h1 {
    font-size: 2rem;
  }
  .section-container {
    padding: 2rem;
  }
}

/* ---------- Base ---------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  color: var(--black);
  background: linear-gradient(180deg,#f7f8fb 0%, #eef2f7 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------- Container & Utilities ---------- */
.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 22px;
}

.row {
  display: flex;
  gap: 20px;
  align-items: center;
}

.muted-faq {
  color: rgba(0,0,0,0.6);
  font-size: 28px
}

h1,
h2,
h3 {
  margin: 0 10px;
  font-weight: normal;
}

p {
  margin: 0 0 12px 0;
}

/* ---------- Header ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 1200;
  backdrop-filter: blur(6px);
  background: linear-gradient(90deg,var(--yellow), #ffe066);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  margin-top: 5px;
  font-weight: 700;
  font-size: 20px;
}

.brand img {
  width: 200px;
  margin-top: 0px;
}

nav.desktop {
  display: flex;
  align-items: center;
}
nav{
  margin-top: 20px
}
 .desktop a {
  padding: 5px 8px;
  margin-right: 20px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 500;
  color: var(--black);
  transition: all .18s ease;
}

nav.desktop a.active,
nav.desktop a:hover {
  background: var(--black);
  color: #fff;
}

.cta {
  background: #fff;
  padding: 3px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
}

.mobile-toggle {
  display: none;
  font-size: 22px;
  cursor: pointer;
  background: transparent;
  border: 0;
}

/* ---------- Mobile nav overlay ---------- */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 64px 18px auto 18px;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.mobile-nav a {
  display: block;
  padding: 10px;
  border-radius: 8px;
  color: var(--black);
  text-decoration: none;
}

/* ---------- Hero ---------- */
main {
  padding: 28px 0 60px;
}

.hero {
  display: grid;
  grid-template-columns: 1fr 500px;
  gap: 36px;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 150px;
}

.headline {
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.2;
  font-weight: 400;
  font-style: italic;
  text-align: center;
}


/* Step 2: Use it wherever you want */
.accent {
  color: var(--yellow);
  font-family: 'Prometo', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
}


.hero-sub {
  margin-top: 14px;
  color: rgba(0,0,0,0.65);
}

.badges {
  display: flex;
  gap: 14px;
  margin-top: 20px;
  flex-wrap: wrap;
  margin-left: 150px
}

.btn-primary {
  background: var(--black);
  color: #fff;
  padding: 12px 16px;
  border-radius: 12px;
  border: 0;
  font-weight: 600;
  cursor: pointer;
}

.btn-outline {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 5px 14px;
  border-radius: 12px;
  cursor: pointer;
}

.btn-outline:hover {
  background: var(--black);
  color: white;
}

.mt-12,
.mt-16{
  font-weight: lighter;
  margin-bottom: 20px
}

.cta,
.mt-8 .chip{
  font-weight: lighter;
  text-decoration: none;
}

/* ---------- Hero Right Circles ---------- */
.hero-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
}

.circle {
  border-radius: 50%;
  overflow: hidden;
  border: 10px solid #fff;
  box-shadow: 0 18px 40px rgba(2,6,23,0.12);
  transition: transform .45s;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 30px
}

.circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.circle.big {
  width: 350px;
  height: 350px;
  margin-left: -150px
}

.circle.big img {
  object-position: 35% 30%;
}

.circle.small {
  width: 200px;
  height: 200px;
  position: absolute;
  right: 15%;
  bottom: -5%;
  border-width: 8px;
}

.circle.small img {
  object-position: 40% 20%;
}

.circle:hover {
  transform: scale(1.03);
}


/* ---------- Sections Base ---------- */
/*section {
  padding: 40px 0;
}*/

section .section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.visible {
  opacity: 1 !important;
  transform: none !important;
}

.reveal {
  /*opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;*/
  padding: 20px 0;
}

/* ---------- About / Features ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
}

.about-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border-radius: var(--card-radius);
  padding: 22px;
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.feature {
  padding: 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  text-align: center;
}

/* ---------- Reviews ---------- */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
  margin-top: 18px;
}

.review-card {
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
}

.stars {
  color: var(--yellow);
  font-weight: 700;
  margin-bottom: 8px;
}

/* ---------- FAQ ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.faq-item {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.03);
}

.faq-btn {
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-panel {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s ease;
}

.faq-open .faq-panel {
  padding-bottom: 16px;
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 550px;
  gap: 28px;
  align-items: start;
}

.form-row {
  display: flex;
  gap: 10px;
}

.input,
textarea {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
}

textarea {
  min-height: 140px;
  resize: vertical;
}

.info-card {
  margin-top: -25px;
  padding: 15px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
  border: 1px solid var(--glass-border);
}

.info-card a{
  text-decoration: none
}

.info-card h3{
  margin-left: 0px;
  margin-bottom: 10px
}
/* ---------- Footer ---------- */
footer {
  background: #0b0b0b;
  color: #e9e9e9;
  padding: 28px 0;
  margin-top: 36px;
}

footer .foot-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .features {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  /* Reverse the order of items */
 .contact-grid > *:first-child {
   order: 2;
 }

 .contact-grid > *:last-child {
   order: 1;
 }

  .btn-outline,
  .cta {
    display: none;
  }
}

@media (max-width: 780px) {
  nav.desktop {
    display: none;
  }

  .mobile-toggle {
    display: block;
    margin-top: -30px;
    font-size: 30px;
  }

  .mobile-nav {
    display: block;
    margin-top: 15px;
  }

  .accent {
    line-height: 2;
  }

  .brand {
    margin-top: 5px;
  }

  .btn-outline,
  .cta {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
    margin-top: -10px;
  }

  .circle.big {
    width: 320px;
    height: 320px;
    margin-left: 10px
  }

  .hero-decor{
    display: none;
  }

  .headline {
    font-size: clamp(28px, 4.2vw, 48px);
    line-height: 1.2;
    font-weight: 400;
    font-style: italic;
    text-align: center;
    margin-top: -50px;
    margin-bottom: 20px
  }

  .hero {
    margin-bottom: -120px
  }

  .badges {
    display: flex;
    gap: 14px;
    margin-top: 20px;
    flex-wrap: wrap;
    margin: auto;
  }

  .circle.small {
    width: 160px;
    height: 160px;
    right: 6%;
    bottom: -28px;
  }

  .reviews-grid {
    grid-template-columns: 1fr;
  }

  .faq-grid {
    grid-template-columns: 1fr;
  }

  .features {
    grid-template-columns: 1fr;
  }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .route {
    animation: none;
  }

  .btn-outline,
  .cta {
    display: none;
  }
}

/* ---------- Helpers ---------- */
.mt-8 {
  margin-top: 8px;
}

.mt-16 {
  margin-top: 16px;
}

.txt-center {
  text-align: center;
}

.chip {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  font-weight: 600;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  background: var(--black);
  color: #fff;
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}








/* ---------- Hero Decorative Background ---------- */
.hero {
  position: relative;
  overflow: hidden;
}

.hero-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Red map pins */
.pin {
  position: absolute;
}

.pin::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Position the pins similar to your image */
.pin1 { top: 5%; left: 15%; width: 5% }
.pin2 { top: 60%; left: 55%; width: 5% }
.pin4 { top: 2%; right: 13%; width: 5% }

/* Yellow dashed routes */
.path {
  position: absolute;
  stroke: #ffd400;
  stroke-width: 2;
  stroke-dasharray: 8;
  fill: none;
  opacity: 0.8;
}

/* Path positions */
.path1 { top: 50%; width: 40%; }
.path2 { top: -35%; right: -5%; width: 40%; }

/* Yellow outline circles */
.circle-decor {
  position: absolute;
  border: 2px solid #ffd400;
  border-radius: 50%;
}

.circle1 { width: 150px; height: 150px; bottom: -10%; right: 25%; }
.circle2 { width: 100px; height: 100px; top: 8%; left: -4%; }

/* Gray X marks */
.x-mark {
  position: absolute;
  color: #aaa;
  font-size: 24px;
  font-weight: bold;
  opacity: 0.8;
}

.x1 { top: 2%; left: 40%; width: 3%}
.x2 { top: 50%; left: 45%; width: 3%}
.x4 { bottom: 15%; right: 20%; width: 3%}







  .other-pages-header {
    background: #000;
    padding: 3rem 2rem;
    color: #fff;
    text-align: center;
  }
  .other-pages-header header h1 {
    margin: 0;
    font-size: 2.4rem;
    font-weight: 600;
  }
  .updated {
    margin-top: .8rem;
    font-size: 0.95rem;
    opacity: 0.9;
  }
  .other-pages-container {
    max-width: 900px;
    margin: 2rem auto;
    padding: 2rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 5px 22px rgba(0,0,0,0.08);
  }
  h2 {
    margin-top: 2rem;
    color: #000;
    font-size: 1.4rem;
    font-weight: 600;
  }
  ul {
    padding-left: 1.2rem;
  }
  li {
    margin-bottom: 0.4rem;
  }


/* Accessibility and clean icon helpers */
.skip-link {
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 5000;
  background: #0b0b0b;
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }
.menu-icon { width: 24px; height: 24px; display: block; }
.clean-icon { width: 22px; height: 22px; vertical-align: -4px; margin-right: 7px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.star-icon { width: 18px; height: 18px; margin-right: 3px; fill: currentColor; stroke: currentColor; vertical-align: -3px; }
.ride-feature h3 { display: flex; align-items: center; justify-content: center; gap: 4px; }
.requirements-note { margin: 0 2rem 2rem; color: var(--text-light); font-size: .92rem; line-height: 1.6; }
.form-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(11,11,11,.55); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* ===== FINAL PRODUCTION LAYER ===== */
/* Utilities replacing inline style attributes so CSP can disallow inline CSS. */
.nav-actions { margin-top: 40px; }
.is-initially-hidden { display: none; }
.footer-links { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.footer-link { color: #fff; text-decoration: none; }
.footer-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.faq-answer-pad { padding: 12px 0 8px; }
.text-small { font-size: 13px; }
.mt-12-only { margin-top: 12px; }
.mt-16-only { margin-top: 16px; }
.mt-18-only { margin-top: 18px; }
.mt-10-only { margin-top: 10px; }
.form-row-wide { display: flex; gap: 12px; }
.form-submit-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.store-badge-compact { height: 46px; width: auto; }
.rounded-shadow-img { border-radius: 12px; box-shadow: var(--shadow); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.text-link { text-decoration: underline; text-underline-offset: 3px; }

/* Mobile menu now toggles a class instead of writing inline styles. */
.mobile-nav { display: none; }
.mobile-nav.is-open { display: block; }

/* FAQ animation without JS-injected inline styles. */
.faq-panel { display: grid; grid-template-rows: 0fr; max-height: none; transition: grid-template-rows .28s ease; }
.faq-panel > div { overflow: hidden; }
.faq-open .faq-panel { grid-template-rows: 1fr; padding-bottom: 16px; }
.faq-marker { font-size: 24px; line-height: 1; font-weight: 400; transition: transform .2s ease; }
.faq-open .faq-marker { transform: rotate(45deg); }

/* Conversion content uses the same rounded, restrained Chariot visual system. */
.hero-sub-centered { text-align: center; max-width: 620px; margin: 14px auto 0; line-height: 1.65; }
.hero-secondary-action { display: block; width: max-content; max-width: 100%; margin: 14px auto 0; color: var(--black); text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }
.conversion-banner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; border-radius: var(--card-radius); background: var(--yellow); color: var(--black); box-shadow: var(--shadow); }
.conversion-banner h2 { margin: 0 0 8px; color: var(--black); }
.conversion-banner p { margin: 0; max-width: 760px; line-height: 1.6; }
.conversion-link { display: inline-block; text-decoration: none; white-space: nowrap; }
.service-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.service-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 14px; background: rgba(255,255,255,.74); border: 1px solid rgba(0,0,0,.08); box-shadow: var(--shadow); color: var(--black); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.service-card strong { font-size: 1.05rem; }
.service-card span { color: rgba(0,0,0,.67); line-height: 1.55; }
a.service-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(2,6,23,.12); }
.static-card { cursor: default; }
.center-cta { text-align: center; margin-top: 22px; }
.trust-card h3 { margin: 10px 0 8px; }
.trust-icon { width: 28px; height: 28px; color: var(--black); }
.compact-section { padding: 2.3rem; }

/* Local SEO landing pages use existing Chariot header/card styling. */
.landing-hero p { max-width: 760px; margin: 12px auto 20px; line-height: 1.65; color: #fff; }
.landing-container { line-height: 1.72; }
.landing-section { margin-bottom: 2.25rem; }
.landing-section h2, .landing-cta h2 { margin-left: 0; }
.landing-section p { color: rgba(0,0,0,.72); }
.landing-cta { margin: 2.5rem 0; padding: 24px; border-radius: 16px; background: var(--yellow); }
.landing-cta p { max-width: 720px; }
.landing-cta .store-buttons { justify-content: flex-start; margin-top: 14px; }
.inline-links { display: flex; flex-wrap: wrap; gap: 10px; }
.inline-links a { display: inline-block; padding: 8px 12px; border-radius: 999px; background: rgba(0,0,0,.06); text-decoration: none; }
.inline-links a:hover { background: var(--yellow); }

/* Blog/careers/article rules moved from page-level <style> blocks for strict CSP. */
.page-blogs { background: #f4f7fb; color: #222; }
.page-blogs > header { background: #1b75bc; padding: 4rem 2rem 5rem; text-align: center; color: #fff; }
.page-blogs > header h1 { font-size: 2.6rem; margin-bottom: .5rem; }
.page-blogs > header p { max-width: 650px; margin: 0 auto; font-size: 1.1rem; opacity: .9; }
.page-blogs .blogs-container { max-width: 1100px; margin: -3rem auto 3rem; padding: 1.5rem; }
.page-blogs .blogs-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 2rem; }
.page-blogs .blog-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,.1); transition: transform .3s ease; }
.page-blogs .blog-card:hover { transform: translateY(-5px); }
.page-blogs .blog-img { width: 100%; height: 180px; object-fit: cover; background: #ddd; }
.page-blogs .blog-content { padding: 1.5rem; }
.page-blogs .blog-content h3 { margin: 0 0 .7rem; color: #1b75bc; font-size: 1.25rem; }
.page-blogs .blog-content p { color: #555; font-size: .95rem; margin-bottom: 1rem; line-height: 1.5; }
.page-blogs .blog-card a { display: inline-block; padding: .5rem 1.3rem; background: #f5b400; border-radius: 30px; font-size: .9rem; font-weight: 600; color: #fff; text-decoration: none; }
.page-blogs .blog-card a:hover { background: #e2a600; }
.page-blogs > footer { text-align: center; padding: 2rem; background: #1b75bc; color: #fff; margin-top: 2rem; }

.page-careers { background: #f4f7fb; color: #222; }
.page-careers > header { background: #05528d; padding: 4rem 2rem 5rem; text-align: center; color: #fff; }
.page-careers > header h1 { font-size: 2.6rem; margin-bottom: .5rem; }
.page-careers > header p { max-width: 650px; margin: 0 auto; opacity: .95; font-size: 1.05rem; }
.page-careers .careers-container { max-width: 1100px; margin: -3rem auto 4rem; background: #fff; padding: 2rem; border-radius: 20px; box-shadow: 0 6px 25px rgba(0,0,0,.12); }
.page-careers .section { margin-bottom: 3rem; }
.page-careers .section h2 { color: #05528d; margin-bottom: .5rem; font-size: 1.8rem; }
.page-careers .section p { color: #666; max-width: 750px; line-height: 1.7; }
.page-careers .jobs-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 1.5rem; margin-top: 2rem; }
.page-careers .job-card { background: #f4f7fb; padding: 1.7rem; border-radius: 14px; transition: transform .25s ease, background .25s ease; border-left: 5px solid #05528d; }
.page-careers .job-card:hover { transform: translateY(-5px); background: #05528d; color: #fff; }
.page-careers .job-card h3 { margin: .3rem 0 .8rem; }
.page-careers .job-card p { margin: 0 0 1rem; font-size: .95rem; }
.page-careers .job-card a, .page-careers .apply-btn { display: inline-block; padding: .5rem 1.2rem; background: #f5b400; color: #fff; border-radius: 30px; font-size: .85rem; font-weight: 600; text-decoration: none; }
.page-careers .apply-btn { padding: .8rem 1.8rem; background: #05528d; margin-top: 1rem; }
.page-careers .apply-btn:hover { background: #1767a5; }
.page-careers > footer { text-align: center; background: #05528d; color: #fff; padding: 2rem; margin-top: 3rem; }

.page-show .hero { width: 100%; height: 320px; position: relative; overflow: hidden; }
.page-show .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-show .hero::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.page-show .hero-title { position: absolute; bottom: 20px; left: 30px; z-index: 2; color: #fff; font-size: 2.2rem; max-width: 80%; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,.3); }
.page-show .content-wrapper { max-width: 900px; margin: 2rem auto; background: #fff; padding: 2rem; border-radius: 16px; box-shadow: 0 5px 25px rgba(0,0,0,.12); line-height: 1.8; }
.page-show .content-wrapper p { margin: 1rem 0; color: #555; font-size: 1.05rem; }
.page-show .content-wrapper h2 { margin-top: 2rem; color: #1b75bc; }
.page-show .back-btn { display: inline-block; margin: 1rem 0 2rem; padding: .7rem 1.4rem; background: #1b75bc; color: #fff; text-decoration: none; border-radius: 30px; font-weight: 600; }
.page-show .back-btn:hover { background: #1767a5; }
.page-show > footer { text-align: center; padding: 2rem; background: #1b75bc; color: #fff; margin-top: 3rem; }

/* SMS page styles moved out of inline <style>. */
.sms-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.sms-card { border-radius: 18px; overflow: hidden; }
.sms-proof { width: 100%; max-width: 640px; border-radius: 16px; display: block; margin-top: 12px; }
.sms-note { margin-top: 10px; opacity: .88; font-size: 14px; line-height: 1.6; }
.sms-disclosure { margin-top: 10px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); overflow: visible; }
.sms-disclosure-title { margin-bottom: 8px; opacity: .92; }
.sms-disclosure-text { line-height: 1.8; white-space: normal; word-break: break-word; }
.sms-message-box { margin-top: 10px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.08); overflow: visible; }
.sms-message-text { line-height: 1.8; white-space: normal; word-break: break-word; font-weight: 700; }
.sms-message-text a { text-decoration: underline; }

/* Branded 404. */
.not-found { min-height: 62vh; display: grid; place-items: center; padding: 54px 22px; }
.not-found-card { max-width: 760px; text-align: center; background: #fff; border-radius: 20px; padding: 38px; box-shadow: var(--shadow); }
.error-code { font-size: clamp(64px,12vw,130px); line-height: .9; font-weight: 800; color: var(--yellow); }
.not-found-card h1 { margin: 18px 0 12px; font-size: clamp(28px,5vw,42px); }
.not-found-card p { color: rgba(0,0,0,.68); line-height: 1.65; }
.not-found-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.visible-outline { display: inline-block !important; text-decoration: none; padding: 11px 16px; }
.not-found-help { margin-top: 18px; }

@media (max-width: 900px) {
  .sms-grid-2 { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .conversion-banner { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 600px) {
  .service-grid { grid-template-columns: 1fr; }
  .form-row-wide { flex-direction: column; }
  .landing-cta .store-buttons { justify-content: center; }
  .page-show .hero-title { font-size: 1.8rem; }
}


/* ===== CORE CONVERSION PAGE EXPANSION ===== */
/* Keep the approved design, but allow Ride and Drive content to use the available desktop width. */
.page-ride main.wrap,
.page-drive main.wrap { max-width: 1440px; }
.page-ride .section-container,
.page-drive .section-container { max-width: none; width: 100%; }
.page-drive #why-drive { margin-top: 0; }
.page-ride #ride-options,
.page-ride #why-chariot,
.page-ride #faq,
.page-drive #onboarding-steps,
.page-drive #driver-faq,
.page-drive #contact { width: 100%; }

/* Helpful, people-first search content using the same Chariot card language. */
.seo-content-section {
  width: 100%;
  margin: 28px auto;
  padding: 30px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: var(--shadow);
}
.seo-content-section h2 { margin: 0 0 12px; color: var(--black); }
.seo-content-section h3 { margin: 0 0 8px; color: var(--black); }
.seo-content-section p { margin-bottom: 13px; color: rgba(0,0,0,.72); line-height: 1.75; }
.seo-content-section a { font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.seo-copy-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr); gap: 28px; align-items: start; }
.seo-info-card { padding: 22px; border-radius: 14px; background: var(--bg-light); border: 1px solid rgba(0,0,0,.06); }
.seo-info-card ul { margin: 12px 0 0; }
.seo-info-card li { margin: 9px 0; line-height: 1.55; }
.seo-step-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 20px; }
.seo-step { padding: 20px; border-radius: 14px; background: var(--bg-light); border: 1px solid rgba(0,0,0,.06); }
.seo-step strong { display: block; margin-bottom: 7px; font-size: 1.02rem; }
.seo-step p { margin: 0; }

/* FAQ: independent columns prevent one open answer from stretching an unrelated item. */
.faq-section-intro { max-width: 900px; margin: 8px auto 0; text-align: center; color: rgba(0,0,0,.68); line-height: 1.65; }
.faq-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; align-items: start; margin-top: 24px; }
.faq-column { display: grid; gap: 14px; align-content: start; }
.faq-grid { grid-template-columns: 1fr; max-width: 1120px; margin-left: auto; margin-right: auto; gap: 14px; }
.faq-item { border: 1px solid rgba(0,0,0,.10); background: #fff; box-shadow: 0 5px 18px rgba(2,6,23,.05); border-radius: 14px; }
.faq-btn { padding: 18px 20px; gap: 18px; font-size: 1rem; line-height: 1.45; color: var(--black); }
.faq-btn:hover { background: rgba(255,212,0,.10); }
.faq-btn:focus-visible { outline: 3px solid rgba(255,212,0,.85); outline-offset: -3px; }
.faq-panel { padding: 0 20px; }
.faq-answer-pad { padding: 2px 0 18px; line-height: 1.72; color: rgba(0,0,0,.72); }
.faq-marker, .muted-faq { flex: 0 0 auto; color: rgba(0,0,0,.60); font-size: 24px; line-height: 1; font-weight: 400; transition: transform .2s ease; }
.faq-open .muted-faq { transform: rotate(45deg); }

@media (max-width: 900px) {
  .seo-copy-grid { grid-template-columns: 1fr; }
  .seo-step-grid { grid-template-columns: 1fr; }
  .faq-columns { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .page-ride .section-container,
  .page-drive .section-container,
  .seo-content-section { padding: 1.5rem; }
  .seo-content-section { margin: 20px auto; }
  .faq-btn { padding: 16px; }
  .faq-panel { padding: 0 16px; }
  .faq-section-intro { text-align: left; }
}

/* ===== CHARIOT MOTION & CONVERSION EXPERIENCE — 2026-09-04 ===== */
/* Premium motion without layout shifts or external animation libraries. */
:root {
  --motion-ease: cubic-bezier(.2,.78,.24,1);
  --motion-ease-soft: cubic-bezier(.22,.61,.36,1);
  --motion-fast: 260ms;
  --motion-med: 620ms;
  --motion-slow: 880ms;
  --motion-shadow: 0 18px 45px rgba(2,6,23,.14);
}

::selection { background: var(--yellow); color: var(--black); }

/* Stronger hierarchy while retaining the existing typography and spacing system. */
.section-head h2,
.seo-content-section h2,
.landing-section h2,
.landing-cta h2,
.page-ride .info h2,
.page-drive .info h2 {
  font-weight: 720;
  letter-spacing: -.025em;
}

.hero .headline,
.ride-header h1,
.drive-header h1,
.landing-hero h1 {
  text-wrap: balance;
}

/* Ambient movement in dark conversion heroes. */
.ride-header,
.drive-header,
.other-pages-header.landing-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.ride-header::before,
.drive-header::before,
.other-pages-header.landing-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(520px,58vw);
  aspect-ratio: 1;
  border-radius: 50%;
  top: -58%;
  right: -7%;
  background: radial-gradient(circle, rgba(255,212,0,.25) 0%, rgba(255,212,0,.09) 35%, rgba(255,212,0,0) 72%);
  animation: chariot-ambient-orb 10s ease-in-out infinite alternate;
  pointer-events: none;
}

.ride-header::after,
.drive-header::after,
.other-pages-header.landing-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(360px,42vw);
  aspect-ratio: 1;
  border-radius: 50%;
  left: -8%;
  bottom: -70%;
  border: 1px solid rgba(255,212,0,.22);
  box-shadow: inset 0 0 60px rgba(255,212,0,.05);
  animation: chariot-ambient-ring 13s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes chariot-ambient-orb {
  0% { transform: translate3d(0,0,0) scale(.92); opacity: .72; }
  100% { transform: translate3d(-48px,34px,0) scale(1.12); opacity: 1; }
}

@keyframes chariot-ambient-ring {
  0% { transform: translate3d(0,0,0) scale(.92) rotate(-6deg); opacity: .45; }
  100% { transform: translate3d(54px,-20px,0) scale(1.12) rotate(7deg); opacity: .85; }
}

/* Scroll reveal system. Content remains visible when JS is unavailable. */
.motion-ready .motion-reveal {
  opacity: 0;
  transform: translate3d(0,30px,0) scale(.988);
  filter: blur(5px);
  transition:
    opacity var(--motion-med) var(--motion-ease),
    transform var(--motion-slow) var(--motion-ease),
    filter var(--motion-med) ease;
}

.motion-ready .motion-reveal.motion-from-left { transform: translate3d(-38px,12px,0) scale(.99); }
.motion-ready .motion-reveal.motion-from-right { transform: translate3d(38px,12px,0) scale(.99); }
.motion-ready .motion-reveal.motion-scale { transform: translate3d(0,18px,0) scale(.955); }
.motion-ready .motion-reveal.motion-visible {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0);
}
.motion-delay-1 { transition-delay: 60ms !important; }
.motion-delay-2 { transition-delay: 120ms !important; }
.motion-delay-3 { transition-delay: 180ms !important; }
.motion-delay-4 { transition-delay: 240ms !important; }
.motion-delay-5 { transition-delay: 300ms !important; }
.motion-delay-6 { transition-delay: 360ms !important; }
.motion-delay-7 { transition-delay: 420ms !important; }
.motion-delay-8 { transition-delay: 480ms !important; }

/* Homepage map/location artwork: clean swing, drift and route movement. */
.hero-decor .pin {
  transform-origin: 50% 100%;
  animation: chariot-pin-swing 4.8s ease-in-out infinite;
  will-change: transform;
}
.hero-decor .pin2 { animation-delay: -1.7s; animation-duration: 5.6s; }
.hero-decor .pin4 { animation-delay: -3.1s; animation-duration: 6.2s; }
.hero-decor .path {
  animation: chariot-route-float 7.5s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.hero-decor .path2 { animation-delay: -3.8s; }
.hero-decor .x-mark { animation: chariot-x-drift 8s ease-in-out infinite alternate; }
.hero-decor .x2 { animation-delay: -2.5s; }
.hero-decor .x4 { animation-delay: -5s; }
.hero-decor .circle-decor { animation: chariot-ring-breathe 8s ease-in-out infinite alternate; }
.hero-decor .circle2 { animation-delay: -4s; }

@keyframes chariot-pin-swing {
  0%,100% { transform: translate3d(0,0,0) rotate(-3deg); }
  50% { transform: translate3d(0,-9px,0) rotate(3.5deg); }
}
@keyframes chariot-route-float {
  0% { transform: translate3d(-5px,2px,0) rotate(-.8deg); opacity: .66; }
  100% { transform: translate3d(8px,-7px,0) rotate(.8deg); opacity: .92; }
}
@keyframes chariot-x-drift {
  0% { transform: translate3d(-3px,2px,0) rotate(-5deg); opacity: .54; }
  100% { transform: translate3d(7px,-8px,0) rotate(8deg); opacity: .86; }
}
@keyframes chariot-ring-breathe {
  0% { transform: scale(.93); opacity: .42; }
  100% { transform: scale(1.08); opacity: .82; }
}

/* Hero photography feels alive without moving layout boxes. */
.circle.big img { animation: chariot-photo-breathe 9s ease-in-out infinite alternate; }
.circle.small img { animation: chariot-photo-breathe 8s ease-in-out -3s infinite alternate-reverse; }
@keyframes chariot-photo-breathe {
  0% { transform: scale(1.015) translate3d(-1.5%,0,0); }
  100% { transform: scale(1.075) translate3d(1.5%,-1%,0); }
}

/* Image motion used across articles, trust sections, proof and service imagery. */
.motion-image {
  backface-visibility: hidden;
  transform-origin: center;
  transition: transform .7s var(--motion-ease), filter .55s ease, box-shadow .55s ease;
}
.motion-image:hover { transform: translateY(-6px) scale(1.018); filter: saturate(1.04) contrast(1.02); }
.rounded-shadow-img.motion-image:hover,
.sms-proof.motion-image:hover { box-shadow: 0 20px 48px rgba(2,6,23,.17); }

/* CSS scroll-linked movement where supported; graceful static fallback elsewhere. */
@supports (animation-timeline: view()) {
  .motion-scroll-float {
    animation: chariot-image-scroll linear both;
    animation-timeline: view();
    animation-range: entry -8% exit 108%;
  }
  @keyframes chariot-image-scroll {
    from { translate: 0 -13px; }
    50% { translate: 0 0; }
    to { translate: 0 13px; }
  }
}

/* Cards lift, gain depth and gently angle on fine-pointer devices. */
.motion-tilt {
  transform-style: preserve-3d;
  transition: transform .42s var(--motion-ease), box-shadow .42s ease, border-color .35s ease, background-color .35s ease;
}
@media (hover:hover) and (pointer:fine) {
  .motion-tilt:nth-child(odd):hover {
    transform: perspective(950px) translateY(-8px) rotateX(1.4deg) rotateY(-1.4deg);
    box-shadow: var(--motion-shadow);
  }
  .motion-tilt:nth-child(even):hover {
    transform: perspective(950px) translateY(-8px) rotateX(1.4deg) rotateY(1.4deg);
    box-shadow: var(--motion-shadow);
  }
}

/* Premium button/store interactions: persuasive without a permanent pulse. */
.btn-primary,
.conversion-link,
.store-buttons a,
.badges a,
.page-blogs .blog-card a,
.page-careers .apply-btn,
.page-careers .job-card a {
  transition: transform .24s var(--motion-ease), box-shadow .24s ease, filter .24s ease, background-color .24s ease, color .24s ease;
}
.btn-primary,
.conversion-link { position: relative; overflow: hidden; }
.btn-primary::after,
.conversion-link::after {
  content: "";
  position: absolute;
  inset: -35% auto -35% -45%;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-18deg) translateX(-220%);
  animation: chariot-cta-shine 6.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes chariot-cta-shine {
  0%,70% { transform: skewX(-18deg) translateX(-220%); opacity: 0; }
  76% { opacity: .95; }
  90%,100% { transform: skewX(-18deg) translateX(650%); opacity: 0; }
}
@media (hover:hover) and (pointer:fine) {
  .btn-primary:hover,
  .conversion-link:hover { transform: translateY(-3px); box-shadow: 0 11px 26px rgba(0,0,0,.22); }
  .store-buttons a:hover,
  .badges a:hover { transform: translateY(-4px) scale(1.025); filter: drop-shadow(0 10px 16px rgba(2,6,23,.13)); }
}
.store-buttons a:active,
.badges a:active,
.btn-primary:active,
.conversion-link:active { transform: translateY(0) scale(.98); }

/* FAQ now feels like a deliberate interactive component. */
.faq-item {
  transition: transform .28s var(--motion-ease), box-shadow .28s ease, border-color .28s ease, background-color .28s ease;
}
.faq-item:hover { border-color: rgba(255,212,0,.55); box-shadow: 0 10px 28px rgba(2,6,23,.08); }
.faq-item.faq-open { border-color: rgba(255,212,0,.9); box-shadow: 0 12px 30px rgba(2,6,23,.10); transform: translateY(-2px); }
.faq-open .faq-btn { background: rgba(255,212,0,.095); }
.faq-panel { transition: grid-template-rows .36s var(--motion-ease), padding-bottom .3s ease; }
.faq-marker,
.muted-faq { transition: transform .34s var(--motion-ease), color .28s ease; }
.faq-open .faq-marker,
.faq-open .muted-faq { color: var(--black); transform: rotate(45deg) scale(1.06); }

/* Inputs and contact panels become more reassuring and responsive. */
.input,
textarea {
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease, transform .25s ease;
  background: rgba(255,255,255,.94);
}
.input:focus,
textarea:focus {
  border-color: rgba(255,212,0,.95);
  box-shadow: 0 0 0 4px rgba(255,212,0,.16);
  transform: translateY(-1px);
}

/* Service chips/cards carry Chariot's yellow more confidently on interaction. */
.service-card:hover,
.seo-info-card:hover,
.seo-step:hover,
.ride-feature:hover,
.requirement:hover {
  border-color: rgba(255,212,0,.5);
}
.inline-links a { transition: transform .22s var(--motion-ease), background-color .22s ease, box-shadow .22s ease; }
.inline-links a:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(2,6,23,.08); }

/* Header gains depth only after the visitor starts moving. */
header,
.site-header { transition: box-shadow .3s ease, background-color .3s ease, backdrop-filter .3s ease; }
header.header-scrolled,
.site-header.header-scrolled { box-shadow: 0 12px 30px rgba(2,6,23,.12); backdrop-filter: blur(12px); }

/* Thin scroll progress accent; scroll-driven when the browser supports it. */
.chariot-scroll-progress {
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--black);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .chariot-scroll-progress {
    animation: chariot-progress linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes chariot-progress { to { transform: scaleX(1); } }
}

/* Floating emphasis for the main conversion banners, not for every element. */
.conversion-banner,
.landing-cta {
  position: relative;
  overflow: hidden;
}
.conversion-banner::before,
.landing-cta::before {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -70px;
  top: -95px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 0 0 24px rgba(255,255,255,.08), 0 0 0 48px rgba(255,255,255,.045);
  animation: chariot-cta-orbit 9s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes chariot-cta-orbit {
  from { transform: translate3d(0,0,0) rotate(-8deg); }
  to { transform: translate3d(-28px,24px,0) rotate(8deg); }
}

/* Blog/editorial imagery gets a cinematic, restrained zoom. */
.page-blogs .blog-card { overflow: hidden; }
.page-blogs .blog-img { transition: transform 1s var(--motion-ease), filter .6s ease; }
.page-blogs .blog-card:hover .blog-img { transform: scale(1.055); filter: saturate(1.05); }
.page-show .hero-media { animation: chariot-editorial-hero 14s ease-in-out infinite alternate; }
@keyframes chariot-editorial-hero {
  from { transform: scale(1.015) translate3d(-.6%,0,0); }
  to { transform: scale(1.07) translate3d(.8%,-.8%,0); }
}

/* Responsive tuning: less movement and no blur on smaller/less powerful screens. */
@media (max-width: 780px) {
  .motion-ready .motion-reveal { filter: none; transform: translate3d(0,20px,0); transition-duration: 520ms; }
  .motion-ready .motion-reveal.motion-from-left,
  .motion-ready .motion-reveal.motion-from-right { transform: translate3d(0,20px,0); }
  .hero-decor .pin { animation-duration: 6s; }
  .ride-header::before,
  .drive-header::before,
  .other-pages-header.landing-hero::before { opacity: .72; }
  .chariot-scroll-progress { height: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .motion-reveal,
  .motion-ready .motion-reveal.motion-from-left,
  .motion-ready .motion-reveal.motion-from-right,
  .motion-ready .motion-reveal.motion-scale {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .hero-decor .pin,
  .hero-decor .path,
  .hero-decor .x-mark,
  .hero-decor .circle-decor,
  .circle.big img,
  .circle.small img,
  .page-show .hero-media,
  .btn-primary::after,
  .conversion-link::after,
  .conversion-banner::before,
  .landing-cta::before,
  .ride-header::before,
  .drive-header::before,
  .other-pages-header.landing-hero::before,
  .ride-header::after,
  .drive-header::after,
  .other-pages-header.landing-hero::after,
  .chariot-scroll-progress {
    animation: none !important;
    transform: none !important;
  }
  .chariot-scroll-progress { display: none; }
}

/* First-view entrance: fast enough to feel immediate, polished enough to feel intentional. */
.motion-ready .page-index .hero > div:not(.hero-decor):not(.hero-right) {
  animation: chariot-hero-copy-in .82s var(--motion-ease) both;
}
.motion-ready .page-index .hero-right {
  animation: chariot-hero-media-in 1s var(--motion-ease) .12s both;
}
.motion-ready .ride-header h1,
.motion-ready .drive-header h1,
.motion-ready .landing-hero h1 {
  animation: chariot-hero-copy-in .72s var(--motion-ease) both;
}
.motion-ready .ride-header > p,
.motion-ready .drive-header > p,
.motion-ready .landing-hero > p {
  animation: chariot-hero-copy-in .72s var(--motion-ease) .10s both;
}
.motion-ready .ride-header .store-buttons,
.motion-ready .drive-header .store-buttons,
.motion-ready .landing-hero .store-buttons {
  animation: chariot-hero-copy-in .72s var(--motion-ease) .18s both;
}
@keyframes chariot-hero-copy-in {
  from { opacity: 0; transform: translate3d(0,22px,0); filter: blur(4px); }
  to { opacity: 1; transform: translate3d(0,0,0); filter: blur(0); }
}
@keyframes chariot-hero-media-in {
  from { opacity: 0; transform: translate3d(28px,12px,0) scale(.94); filter: blur(7px); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
}
@media (max-width:780px) {
  .motion-ready .page-index .hero > div:not(.hero-decor):not(.hero-right),
  .motion-ready .page-index .hero-right,
  .motion-ready .ride-header h1,
  .motion-ready .drive-header h1,
  .motion-ready .landing-hero h1,
  .motion-ready .ride-header > p,
  .motion-ready .drive-header > p,
  .motion-ready .landing-hero > p,
  .motion-ready .ride-header .store-buttons,
  .motion-ready .drive-header .store-buttons,
  .motion-ready .landing-hero .store-buttons { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready .page-index .hero > div:not(.hero-decor):not(.hero-right),
  .motion-ready .page-index .hero-right,
  .motion-ready .ride-header h1,
  .motion-ready .drive-header h1,
  .motion-ready .landing-hero h1,
  .motion-ready .ride-header > p,
  .motion-ready .drive-header > p,
  .motion-ready .landing-hero > p,
  .motion-ready .ride-header .store-buttons,
  .motion-ready .drive-header .store-buttons,
  .motion-ready .landing-hero .store-buttons { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* FAQ closed-state hardening: answers remain completely hidden until the + control is opened. */
.faq-panel {
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  padding-bottom: 0;
  transition: grid-template-rows .36s var(--motion-ease), opacity .18s ease;
}
.faq-panel > div {
  min-height: 0;
  overflow: hidden;
}
.faq-answer-pad {
  padding-top: 0;
  padding-bottom: 0;
  transition: padding .28s var(--motion-ease);
}
.faq-open .faq-panel {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  padding-bottom: 0;
  transition: grid-template-rows .36s var(--motion-ease), opacity .2s ease .05s;
}
.faq-open .faq-answer-pad {
  padding-top: 2px;
  padding-bottom: 18px;
}
@media (prefers-reduced-motion: reduce) {
  .faq-panel,
  .faq-answer-pad {
    transition: none !important;
  }
}

/* ===== SITE-WIDE CONTAINER STANDARDIZATION — 2026-09-04 ===== */
/* Secondary/link destinations now use the same desktop content rhythm as the main site. */
.other-pages-container,
.page-blogs .blogs-container,
.page-careers .careers-container,
.page-show .content-wrapper {
  width: calc(100% - 44px);
  max-width: var(--container);
}

/* Keep linked landing pages generous rather than visually squeezed. */
.landing-container {
  width: calc(100% - 44px);
  max-width: var(--container);
}

/* Let long-form copy breathe across the wider canvas without becoming an unreadable wall. */
.other-pages-container > p,
.other-pages-container > section > p,
.page-show .content-wrapper > p {
  max-width: 1080px;
}

/* Wider linked page grids use the extra room rather than leaving empty side gutters. */
.page-blogs .blogs-grid { grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); }
.page-careers .jobs-grid { grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); }

@media (max-width: 780px) {
  .other-pages-container,
  .landing-container,
  .page-blogs .blogs-container,
  .page-careers .careers-container,
  .page-show .content-wrapper {
    width: calc(100% - 28px);
    padding: 1.4rem;
  }
}


/* ===== UBER UGANDA TRANSITION LANDING — 2026-09-04 ===== */
.page-uber-transition { background: #f6f7f9; }
.transition-hero { position: relative; overflow: hidden; padding-top: 4.4rem; padding-bottom: 4.4rem; }
.transition-hero::before { content:""; position:absolute; width:380px; height:380px; border-radius:50%; border:1px solid rgba(255,212,0,.20); right:-130px; top:-210px; box-shadow:0 0 0 48px rgba(255,212,0,.05),0 0 0 96px rgba(255,212,0,.025); pointer-events:none; }
.transition-hero::after { content:""; position:absolute; width:210px; height:210px; border-radius:50%; border:1px solid rgba(255,212,0,.16); left:-90px; bottom:-130px; pointer-events:none; }
.transition-hero > * { position: relative; z-index:1; }
.transition-kicker,.eyebrow { display:block; margin:0 0 10px; color:#806900; text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; font-weight:800; }
.transition-hero .transition-kicker { color:var(--yellow); }
.transition-hero h1 { max-width:1000px; margin:0 auto; font-size:clamp(2.35rem,5vw,4.8rem); line-height:1.02; letter-spacing:-.045em; }
.transition-hero > p:not(.transition-kicker):not(.transition-independence) { max-width:900px; font-size:1.08rem; }
.transition-hero-actions,.transition-final-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:24px; }
.transition-main-btn,.transition-outline-btn,.transition-dark-btn { min-width:180px; text-align:center; text-decoration:none; }
.transition-outline-btn { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.45); }
.transition-outline-btn:hover { background:#fff; color:#000; }
.transition-independence { margin:22px auto 0 !important; max-width:780px !important; color:rgba(255,255,255,.68) !important; font-size:.86rem !important; line-height:1.55 !important; }
.transition-container { background:transparent; box-shadow:none; padding-top:1.5rem; }
.transition-fact-bar { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:-3.25rem 0 2.8rem; border-radius:18px; overflow:hidden; box-shadow:0 18px 50px rgba(2,6,23,.13); position:relative; z-index:10; background:rgba(0,0,0,.10); }
.transition-fact-bar > div { background:#fff; padding:22px; }
.transition-fact-bar strong { display:block; margin-bottom:7px; color:#111; }
.transition-fact-bar span { color:rgba(0,0,0,.65); line-height:1.55; }
.transition-intro { max-width:1080px; margin-left:auto; margin-right:auto; text-align:center; }
.transition-intro h2 { font-size:clamp(1.8rem,3vw,2.7rem); line-height:1.15; max-width:900px; margin-left:auto; margin-right:auto; }
.transition-intro p { max-width:980px !important; margin-left:auto; margin-right:auto; }
.transition-split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin:2.8rem 0; align-items:stretch; }
.transition-card { background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:20px; padding:30px; box-shadow:0 12px 36px rgba(2,6,23,.08); position:relative; overflow:hidden; }
.transition-card::after { content:""; position:absolute; width:180px; height:180px; border-radius:50%; background:rgba(255,212,0,.10); right:-70px; top:-85px; pointer-events:none; }
.transition-card > * { position:relative; z-index:1; }
.transition-card h2 { margin-top:4px; font-size:clamp(1.55rem,2.2vw,2.15rem); line-height:1.15; }
.transition-card p { color:rgba(0,0,0,.68); line-height:1.7; }
.transition-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:var(--yellow); margin-bottom:18px; }
.transition-icon .clean-icon { width:27px; height:27px; margin:0; }
.transition-checks { margin:20px 0 22px; }
.transition-checks li { color:rgba(0,0,0,.76); margin-bottom:9px; }
.transition-store-buttons { justify-content:flex-start; margin-top:18px; }
.transition-store-buttons img { max-height:48px; width:auto; }
.transition-secondary-link { font-size:.92rem; margin-top:16px; }
.transition-secondary-link a { color:#111; text-underline-offset:3px; }
.transition-proof-section,.transition-search-section,.transition-use-cases,.transition-source-section { padding:30px; background:#fff; border:1px solid rgba(0,0,0,.07); border-radius:20px; box-shadow:0 8px 28px rgba(2,6,23,.055); }
.transition-proof-section h2,.transition-search-section h2,.transition-use-cases h2,.transition-source-section h2 { margin-top:4px; font-size:clamp(1.55rem,2.5vw,2.25rem); }
.transition-benefit-grid,.transition-definition-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:20px; }
.transition-benefit-grid .seo-info-card,.transition-definition-grid > div { border:1px solid rgba(0,0,0,.08); border-radius:15px; padding:20px; background:#fbfbfb; }
.transition-benefit-grid h3,.transition-definition-grid h3 { margin:0 0 8px; font-size:1.05rem; }
.transition-benefit-grid p,.transition-definition-grid p { margin:0; color:rgba(0,0,0,.66); line-height:1.65; }
.transition-use-cases .service-grid { margin-top:18px; }
.source-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:18px; }
.source-card { display:flex; flex-direction:column; gap:7px; text-decoration:none; color:#111; padding:18px; border-radius:14px; background:#f7f7f7; border:1px solid rgba(0,0,0,.08); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.source-card span { color:rgba(0,0,0,.62); line-height:1.55; }
.source-card:hover { transform:translateY(-3px); border-color:rgba(255,212,0,.75); box-shadow:0 10px 24px rgba(2,6,23,.08); }
.transition-final-cta { padding:34px; }
.transition-final-cta .eyebrow { color:rgba(0,0,0,.62); }
.transition-final-cta h2 { font-size:clamp(1.75rem,3vw,2.55rem); margin-top:4px; }
.transition-final-actions { justify-content:flex-start; }
.transition-dark-btn { background:#111; color:#fff; }
.transition-trademark-note { max-width:1080px; margin:2rem auto 0; padding:16px 18px; border:1px solid rgba(0,0,0,.08); border-radius:13px; background:rgba(255,255,255,.70); }
.transition-trademark-note p { margin:0; color:rgba(0,0,0,.58); font-size:.82rem; line-height:1.6; }
.campaign-alert { max-width:var(--container); width:calc(100% - 44px); margin:18px auto 0; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:17px 20px; border-radius:15px; background:#111; color:#fff; box-shadow:0 10px 30px rgba(2,6,23,.12); }
.campaign-alert strong { color:var(--yellow); }
.campaign-alert p { margin:0; line-height:1.55; }
.campaign-alert a { flex:0 0 auto; display:inline-block; color:#111; background:var(--yellow); padding:10px 14px; border-radius:999px; font-weight:800; text-decoration:none; }
@media (max-width:900px) { .transition-fact-bar,.transition-split,.transition-benefit-grid,.transition-definition-grid,.source-grid { grid-template-columns:1fr; } .transition-fact-bar { gap:1px; } .transition-use-cases .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:780px) { .transition-hero { padding:3.3rem 1.2rem 4.5rem; } .transition-hero h1 { font-size:clamp(2.15rem,11vw,3.3rem); } .transition-container { width:calc(100% - 24px); padding-left:0; padding-right:0; } .transition-fact-bar { margin-top:-3.1rem; } .transition-card,.transition-proof-section,.transition-search-section,.transition-use-cases,.transition-source-section { padding:20px; } .transition-use-cases .service-grid { grid-template-columns:1fr; } .transition-store-buttons { justify-content:center; } .campaign-alert { width:calc(100% - 28px); flex-direction:column; align-items:flex-start; } }
@media (prefers-reduced-motion:reduce) { .transition-hero::before,.transition-hero::after { animation:none !important; } .source-card:hover { transform:none; } }