/*SERVICE AREAS REVAMP*/

/* ---------- 1. DESIGN TOKENS (Scoped to Wrapper) ---------- */
.char-wrapper {
  --char-color-primary: #8EC055;
  --char-color-primary-dark: #74A93F;
  --char-color-star: #F5A623;

  --char-bg-dark-main: #101828;
  --char-bg-dark-surface: #221F1F;
  --char-bg-light: #F5F7FA;
  --char-bg-grey: #E8EAED;
  --char-bg-offwhite: #EEEEEE;
  --char-bg-white: #FFFFFF;

  --char-text-dark: #221F1F;
  --char-text-body: #444444;
  --char-text-muted: #8A8C8F;
  --char-border: #E5E7EB;

  --char-white-8: rgba(255, 255, 255, 0.08);
  --char-white-15: rgba(255, 255, 255, 0.15);
  --char-white-40: rgba(255, 255, 255, 0.40);
  --char-white-60: rgba(255, 255, 255, 0.60);
  --char-white-70: rgba(255, 255, 255, 0.70);
  --char-white-75: rgba(255, 255, 255, 0.75);
  --char-white-80: rgba(255, 255, 255, 0.80);

  --char-font-display: 'Manrope', sans-serif;
  --char-font-body: 'Inter', sans-serif;

  --char-radius-sm: 8px;
  --char-radius-md: 14px;
  --char-radius-lg: 20px;
  --char-radius-pill: 999px;

  --char-shadow: 0 4px 20px rgba(16, 24, 40, 0.06);
  --char-shadow-hover: 0 12px 28px rgba(16, 24, 40, 0.12);
  --char-container-width: 1180px;
}

/* ---------- 2. BASE SCOPED RESET ---------- */
.char-wrapper * {
  box-sizing: border-box;
}

.char-wrapper img {
  max-width: 100%;
  display: block;
}

.char-wrapper a {
  color: inherit;
  text-decoration: none;
}

.char-wrapper ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.char-wrapper h1,
.char-wrapper h2,
.char-wrapper h3 {
  font-family: var(--char-font-display);
  color: var(--char-text-dark);
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
}

/* ---------- 3. SHARED CONTAINERS & ICONS ---------- */
.char-wrapper .char-hero__container,
.char-wrapper .char-trustbar__container,
.char-wrapper .char-serving__container,
.char-wrapper .char-services__container,
.char-wrapper .char-process__container,
.char-wrapper .char-feature__container,
.char-wrapper .char-reviews__container,
.char-wrapper .char-quote__container,
.char-wrapper .char-footer__container {
  max-width: var(--char-container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.char-wrapper .char-hero__btn svg,
.char-wrapper .char-feature__btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.char-wrapper .char-trustbar__icon img,
.char-wrapper .char-services__icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* ---------- 4. HERO SECTION (FLEXBOX) ---------- */
/* The photo layer is painted by #char-hero__bg (a plain element the template
   points at the image via a regular inline style="background-image: url(...)"
   attribute, not a CSS custom property) rather than by --char-hero-bg here,
   because a url() assigned to a custom property resolves relative to the
   STYLESHEET (shared/css/style.css), not the HTML document — so a
   page-relative path that's correct for output/pages/ (e.g.
   "../../images/x.jpg") breaks once consumed via var() here. A literal
   url() in the HTML's own inline style resolves against that HTML file
   instead, exactly like an <img src="..."> does. */
.char-wrapper #char-hero {
  position: relative;
  padding: 80px 0 64px;
  font-family: var(--char-font-body);
}

.char-wrapper #char-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.char-wrapper #char-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(16, 24, 40, .92) 0%, rgba(16, 24, 40, .72) 46%, rgba(16, 24, 40, .35) 100%);
}

.char-wrapper #char-hero > *:not(#char-hero__bg) {
  position: relative;
  z-index: 1;
}

.char-wrapper .char-hero__grid {
  display: flex;
  gap: 48px;
  align-items: center;
}

.char-wrapper .char-hero__copy {
  flex: 1.2;
}

.char-wrapper .char-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--char-color-primary);
  color: var(--char-text-dark);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 7px 16px;
  border-radius: var(--char-radius-pill);
  margin-bottom: 22px;
}

.char-wrapper .char-hero__title {
  color: var(--char-bg-white);
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  max-width: 600px;
  margin-bottom: 20px;
  text-align: left;
}

.char-wrapper .char-hero__lead {
  color: var(--char-white-75);
  font-size: 1.05rem;
  max-width: 480px;
  margin-bottom: 32px;
}

.char-wrapper .char-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.char-wrapper .char-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--char-radius-pill);
  font-weight: 700;
  font-size: .95rem;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}

.char-wrapper .char-hero__btn--primary {
  background: var(--char-color-primary);
  color: var(--char-text-dark);
  box-shadow: 0 6px 18px rgba(142, 192, 85, .35);
}

.char-wrapper .char-hero__btn--primary:hover {
  background: var(--char-color-primary-dark);
  transform: translateY(-2px);
}

.char-wrapper .char-hero__btn--outline {
  background: transparent;
  color: var(--char-bg-white);
  border: 1.5px solid var(--char-white-40);
}

.char-wrapper .char-hero__btn--outline:hover {
  border-color: var(--char-bg-white);
  background: var(--char-white-8);
}

.char-wrapper .char-hero__form-wrapper {
  flex: 1;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.char-wrapper .char-hero__form-wrapper iframe {
  width: 100%;
  max-width: 100%;
  display: block;
}

/* ---------- 5. TRUST BAR SECTION (FLEXBOX) ---------- */
.char-wrapper #char-trustbar {
  background: var(--char-bg-dark-surface);
  font-family: var(--char-font-body);
}

.char-wrapper .char-trustbar__inner {
  display: flex;
  gap: 24px;
  padding: 26px 0;
  justify-content: space-between;
}

.char-wrapper .char-trustbar__item {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.char-wrapper .char-trustbar__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--char-white-8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--char-color-primary);
  flex-shrink: 0;
}

.char-wrapper #char-trustbar strong {
  display: block;
  color: var(--char-bg-white);
  font-size: .88rem;
  font-weight: 700;
  line-height: normal;
}

.char-wrapper .char-feature__btn--primary {
  display: block;
  color: var(--char-bg-white);
  font-size: .88rem;
  font-weight: 700;
}

.char-wrapper .char-trustbar__subtitle {
  display: block;
  color: var(--char-white-60);
  font-size: .76rem;
  margin-top: 1px;
  line-height: normal;
}

/* ---------- 6. SERVING [CITY] SECTION (FLEXBOX) ---------- */
.char-wrapper .char-serving {
  padding: 96px 0;
  font-family: var(--char-font-body);
}

.char-wrapper .char-serving__grid {
  display: flex;
  gap: 56px;
  align-items: flex-start;
}

.char-wrapper .char-serving__copy {
  flex: 1;
}

.char-wrapper .char-serving__eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--char-color-primary-dark);
  margin-bottom: 12px;
}

.char-wrapper .char-serving__heading {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  margin-bottom: 20px;
  max-width: 460px;
}

.char-wrapper .char-serving__copy p {
  margin-bottom: 16px;
  color: var(--char-text-body);
}

.char-wrapper .char-serving__sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.char-wrapper .char-serving__map {
  width: 100%;
  height: 280px;
  border-radius: var(--char-radius-lg);
  overflow: hidden;
  background: var(--char-bg-grey);
  box-shadow: var(--char-shadow);
}

.char-wrapper .char-serving__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(8%);
}

.char-wrapper .char-serving__weather {
  width: 100%;
  border-radius: var(--char-radius-lg);
  overflow: hidden;
}

/* ---------- 7. SERVICES GRID SECTION (FLEXBOX) ---------- */
.char-wrapper .char-services {
  padding: 96px 0;
  font-family: var(--char-font-body);
}

.char-wrapper .char-services--bg-tint {
  background: var(--char-bg-light);
}

.char-wrapper .char-services__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}

.char-wrapper .char-services__eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--char-color-primary-dark);
  margin-bottom: 12px;
}

.char-wrapper .char-services__heading {
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
}

.char-wrapper .char-services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.char-wrapper .char-services__card {
  min-width: 0;
  background: var(--char-bg-white);
  border: 1px solid var(--char-border);
  border-radius: var(--char-radius-md);
  padding: 26px 22px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

@media (max-width: 1100px) {
  .char-wrapper .char-services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .char-wrapper .char-services__grid {
    grid-template-columns: 1fr;
  }
}

.char-wrapper .char-services__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--char-shadow-hover);
  border-color: transparent;
}

.char-wrapper .char-services__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--char-color-primary);
  color: var(--char-bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.char-wrapper .char-services__card-title {
  font-size: 1rem;
  margin-bottom: 8px;
}

.char-wrapper .char-services__card-text {
  font-size: .85rem;
  color: var(--char-text-muted);
  margin-bottom: 14px;
}

.char-wrapper .char-services__link {
  font-size: .82rem;
  font-weight: 700;
  color: var(--char-color-primary-dark);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.char-wrapper .char-services__link:hover {
  gap: 8px;
}

/* ---------- 8. HOW IT WORKS SECTION (FLEXBOX) ---------- */
.char-wrapper .char-process {
  padding: 96px 0;
  font-family: var(--char-font-body);
}

.char-wrapper .char-process__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}

.char-wrapper .char-process__eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--char-color-primary-dark);
  margin-bottom: 12px;
}

.char-wrapper .char-process__heading {
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
}

.char-wrapper .char-process__steps {
  display: flex;
  gap: 32px;
  position: relative;
}

.char-wrapper .char-process__steps::before {
  content: '';
  position: absolute;
  top: 26px;
  left: 16.5%;
  right: 16.5%;
  height: 2px;
  background: var(--char-border);
  z-index: 1;
}

.char-wrapper .char-process__step {
  flex: 1;
  text-align: center;
  position: relative;
}

.char-wrapper .char-process__circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--char-bg-offwhite);
  color: var(--char-text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--char-font-display);
  font-weight: 800;
  font-size: 1rem;
  margin: 0 auto 20px;
  position: relative;
  z-index: 2;
  border: 2px solid var(--char-border);
}

.char-wrapper .char-process__step--active .char-process__circle {
  background: var(--char-color-primary);
  color: var(--char-bg-white);
  border-color: var(--char-color-primary);
}

.char-wrapper .char-process__step-title {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.char-wrapper .char-process__step-text {
  font-size: .88rem;
  color: var(--char-text-muted);
  max-width: 260px;
  margin: 0 auto;
  text-align: center;
}

/* ---------- 9. FEATURE SPLIT SECTIONS (FLEXBOX) ---------- */
.char-wrapper .char-feature {
  padding: 96px 0;
  font-family: var(--char-font-body);
}

.char-wrapper .char-feature--bg-tint {
  background: var(--char-bg-light);
}

.char-wrapper .char-feature__grid {
  display: flex;
  gap: 56px;
  align-items: center;
}

.char-wrapper .char-feature__copy {
  flex: 1;
}

.char-wrapper .char-feature__media {
  flex: 1;
}

.char-wrapper .char-feature__eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--char-color-primary-dark);
  margin-bottom: 12px;
}

.char-wrapper .char-feature__heading {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  margin-bottom: 18px;
  max-width: 440px;
}

.char-wrapper .char-feature__copy p {
  margin-bottom: 16px;
  color: var(--char-text-body);
}

.char-wrapper .char-feature__checklist {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.char-wrapper .char-feature__checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .92rem;
  color: var(--char-text-dark);
  font-weight: 500;
}

.char-wrapper .char-feature__check-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(142, 192, 85, .15);
  color: var(--char-color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  flex-shrink: 0;
}

.char-wrapper .char-feature__actions {
  display: flex;
  gap: 14px;
  margin-top: 26px;
  flex-wrap: wrap;
}

.char-wrapper .char-feature__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--char-radius-pill);
  font-weight: 700;
  font-size: .95rem;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}

.char-wrapper .char-feature__btn--primary {
  background: var(--char-color-primary);
  color: var(--char-text-dark);
  box-shadow: 0 6px 18px rgba(142, 192, 85, .35);
}

.char-wrapper .char-feature__btn--primary:hover {
  background: var(--char-color-primary-dark);
  transform: translateY(-2px);
}

.char-wrapper .char-feature__btn--outline-dark {
  background: transparent;
  color: var(--char-text-dark);
  border: 1.5px solid var(--char-border);
}

.char-wrapper .char-feature__btn--outline-dark:hover {
  border-color: var(--char-text-dark);
}

.char-wrapper .char-feature__media img {
  border-radius: var(--char-radius-lg);
  width: 100%;
  height: 320px;
  object-fit: cover;
  box-shadow: var(--char-shadow);
}

/* ---------- 10. TESTIMONIALS SECTION (FLEXBOX) ---------- */
.char-wrapper .char-reviews {
  padding: 96px 0;
  font-family: var(--char-font-body);
}

.char-wrapper .char-reviews--bg-tint {
  background: var(--char-bg-light);
}

.char-wrapper .char-reviews__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.char-wrapper .char-reviews__eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--char-color-primary-dark);
  margin-bottom: 12px;
}

.char-wrapper .char-reviews__heading {
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
}

.char-wrapper .char-reviews__rating-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  margin-bottom: 48px;
}

.char-wrapper .char-reviews__stars {
  color: var(--char-color-star);
  letter-spacing: 2px;
  font-size: .95rem;
}

.char-wrapper .char-reviews__avg {
  color: var(--char-text-muted);
  font-size: .85rem;
}

.char-wrapper .char-reviews__grid {
  display: flex;
  gap: 20px;
}

.char-wrapper .char-reviews__card {
  flex: 1;
  background: var(--char-bg-white);
  border-radius: var(--char-radius-md);
  padding: 24px;
  box-shadow: var(--char-shadow);
}

.char-wrapper .char-reviews__quote {
  font-size: .9rem;
  color: var(--char-text-body);
  margin: 12px 0 16px 0;
  font-style: italic;
}

.char-wrapper .char-reviews__author strong {
  display: block;
  font-size: .88rem;
  color: var(--char-text-dark);
}

.char-wrapper .char-reviews__author span {
  display: block;
  font-size: .78rem;
  color: var(--char-text-muted);
}

/* ---------- 11. QUOTE FORM SECTION (FLEXBOX) ---------- */
.char-wrapper .char-quote {
  padding: 96px 0;
  background: var(--char-bg-dark-main);
  color: var(--char-bg-white);
  font-family: var(--char-font-body);
}

.char-wrapper .char-quote__grid {
  display: flex;
  gap: 64px;
  align-items: flex-start;
}

.char-wrapper .char-quote__copy {
  flex: 1;
}

.char-wrapper .char-quote__eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--char-color-primary);
  margin-bottom: 12px;
}

.char-wrapper .char-quote__heading {
  color: var(--char-bg-white);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  margin-bottom: 18px;
  max-width: 460px;
}

.char-wrapper .char-quote__subtext {
  color: var(--char-white-70);
  margin-bottom: 22px;
  max-width: 440px;
}

.char-wrapper .char-quote__checklist {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.char-wrapper .char-quote__checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .92rem;
  color: var(--char-white-80);
  font-weight: 500;
}

.char-wrapper .char-quote__check-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(142, 192, 85, .2);
  color: var(--char-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  flex-shrink: 0;
}

.char-wrapper .char-quote__form-wrapper {
  flex: 0.95;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.char-wrapper .char-quote__form-wrapper iframe {
  width: 100%;
  max-width: 100%;
  display: block;
}

/* ---------- 12. FOOTER SECTION ---------- */
.char-wrapper .char-footer {
  padding: 64px 0;
  background: var(--char-bg-dark-surface);
  color: var(--char-bg-white);
  font-family: var(--char-font-body);
}

.char-wrapper .char-footer__description p {
  color: var(--char-white-75);
  font-size: .95rem;
  line-height: 1.6;
  margin-bottom: 16px;
}

.char-wrapper .char-footer__description strong {
  color: var(--char-bg-white);
}

.char-wrapper .char-footer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: var(--char-color-primary);
  color: var(--char-text-dark);
  font-weight: 800;
  font-size: .9rem;
  border-radius: var(--char-radius-pill);
  margin-top: 12px;
  transition: background .15s ease;
}

.char-wrapper .char-footer__cta:hover {
  background: var(--char-color-primary-dark);
}

/* ---------- 13. RESPONSIVE ---------- */
@media (max-width: 980px) {

  .char-wrapper .char-hero__grid,
  .char-wrapper .char-serving__grid,
  .char-wrapper .char-feature__grid,
  .char-wrapper .char-quote__grid {
    flex-direction: column;
  }

    .char-wrapper .char-trustbar__inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 26px 10px;
    align-items: start;
  }

  .char-wrapper .char-hero__form-wrapper,
  .char-wrapper .char-quote__form-wrapper,
  .char-wrapper .char-serving__sidebar {
    max-width: 100%;
  }

  .char-wrapper #char-trustbar__inner {
    flex-wrap: wrap;
  }

  .char-wrapper #char-trustbar__item {
    flex: 1 1 calc(50% - 12px);
  }

  .char-wrapper .char-services__card {
    flex: 1 1 calc(50% - 10px);
  }

  .char-wrapper .char-process__steps {
    flex-direction: column;
    gap: 40px;
  }

  .char-wrapper .char-process__steps::before {
    display: none;
  }

  .char-wrapper .char-reviews__grid {
    flex-direction: column;
  }
}

@media (max-width: 700px) {

  .char-wrapper #char-hero,
  .char-wrapper .char-serving,
  .char-wrapper .char-services,
  .char-wrapper .char-process,
  .char-wrapper .char-feature,
  .char-wrapper .char-reviews,
  .char-wrapper .char-quote,
  .char-wrapper .char-footer {
    padding: 48px 0;
  }

  .char-wrapper .char-hero__actions {
    flex-direction: column;
  }

  .char-wrapper .char-hero__btn {
    width: 100%;
  }

  .char-wrapper #char-trustbar__item,
  .char-wrapper .char-services__card {
    flex: 1 1 100%;
  }
}

/* ---------- MODEL LANDING PAGE ---------- */
#why-prolite .char-services__grid,
#services .char-services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

#why-prolite .char-services__card,
#services .char-services__card {
  min-width: 0;
}

#vehicle-technology {
  padding: 72px 0;
  background: var(--char-bg-light);
  font-family: var(--char-font-body);
}

#vehicle-technology > div,
#pricing > div {
  max-width: var(--char-container-width);
  margin: 0 auto;
  padding: 0 24px;
}

#vehicle-technology > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

#vehicle-technology .char-tech-media {
  min-height: 440px;
  border-radius: var(--char-radius-lg);
  box-shadow: var(--char-shadow-hover);
  overflow: hidden;
}

#vehicle-technology .char-tech-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 440px;
  object-fit: cover;
}

#vehicle-technology > div > div:last-child > span,
#pricing > div > div > span,
#faq > div > span {
  display: block;
  margin-bottom: 12px;
  color: var(--char-color-primary-dark);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#vehicle-technology h2,
#pricing h2,
#faq h2 {
  margin-bottom: 24px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}

#vehicle-technology article {
  padding: 18px 0;
  border-top: 1px solid var(--char-border);
}

#vehicle-technology article h3 {
  margin-bottom: 7px;
  font-size: 1rem;
}

#vehicle-technology article p,
#pricing p,
#faq p {
  margin: 0;
  color: var(--char-text-body);
  line-height: 1.65;
}

#pricing {
  padding: 72px 0;
  font-family: var(--char-font-body);
}

#pricing > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
  gap: 48px;
  align-items: center;
}

#pricing aside {
  padding: 28px;
  border-left: 5px solid var(--char-color-primary);
  background: var(--char-bg-dark-main);
  color: var(--char-bg-white);
}

#pricing aside h3 {
  margin-bottom: 12px;
  color: var(--char-color-primary);
}

#pricing aside p {
  color: var(--char-white-75);
}

/* ---------- SERVICE AREAS (CITY LINK CHIPS) ---------- */
#service-areas {
  padding: 72px 0;
  font-family: var(--char-font-body);
}

#service-areas > div {
  max-width: var(--char-container-width);
  margin: 0 auto;
  padding: 0 24px;
}

#service-areas h2 {
  margin-bottom: 16px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  max-width: 720px;
}

#service-areas > div > p {
  max-width: 720px;
  margin: 0 0 28px;
  color: var(--char-text-body);
  line-height: 1.65;
}

#service-areas .char-areas__grid,
#services .char-areas__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#service-areas .char-areas__chip,
#services .char-areas__chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 1px solid var(--char-border);
  border-radius: var(--char-radius-pill);
  background: var(--char-bg-white);
  color: var(--char-text-dark);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

/* #services' chips are plain text (no model pages exist yet to link to),
   so only #service-areas' own chips (real <a> links) get the hover state. */
#service-areas .char-areas__chip:hover {
  border-color: var(--char-color-primary);
  background: var(--char-bg-light);
  color: var(--char-color-primary-dark);
}

#faq {
  padding: 72px 0;
  background: var(--char-bg-light);
  font-family: var(--char-font-body);
}

#faq > div {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
}

#faq > div > div {
  border-top: 1px solid var(--char-border);
}

#faq details {
  padding: 20px 0;
  border-bottom: 1px solid var(--char-border);
}

#faq summary {
  cursor: pointer;
  color: var(--char-text-dark);
  font-family: var(--char-font-display);
  font-weight: 800;
}

#faq details p {
  margin: 14px 28px 0 0;
}

@media (max-width: 800px) {
  #why-prolite .char-services__grid,
  #services .char-services__grid,
  #vehicle-technology > div,
  #pricing > div {
    grid-template-columns: 1fr;
  }

  #vehicle-technology .char-tech-media,
  #vehicle-technology .char-tech-media img {
    min-height: 300px;
  }
}

/* ---------- BREADCRUMB (VEHICLE SERVICE PAGES) ---------- */
/* Sits above the hero on model-hub and service pages, linking back up the
   brand -> model -> service hierarchy. Deliberately quiet (muted text,
   underline only on hover) so it reads as wayfinding, not a marketing
   element competing with the hero directly below it. */
.char-wrapper .char-breadcrumb {
  padding: 16px 0;
  font-family: var(--char-font-body);
  border-bottom: 1px solid var(--char-border);
}

.char-wrapper .char-breadcrumb__container {
  max-width: var(--char-container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.char-wrapper .char-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  padding-left: 0;
}

.char-wrapper .char-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--char-text-muted);
}

.char-wrapper .char-breadcrumb__link:hover {
  color: var(--char-color-primary-dark);
  text-decoration: underline;
}

.char-wrapper .char-breadcrumb__item--current {
  color: var(--char-text-dark);
  font-weight: 600;
}

/* Hero variant: transparent background, small white text, no border —
   sits directly on the dark hero image above the badge/title. */
#char-hero .char-breadcrumb {
  padding: 0 0 12px;
  border-bottom: none;
  background: transparent;
}

#char-hero .char-breadcrumb__container {
  max-width: none;
  margin: 0;
  padding: 0;
}

#char-hero .char-breadcrumb__list {
  font-size: .75rem;
}

#char-hero .char-breadcrumb__item {
  color: rgba(255, 255, 255, .7);
}

#char-hero .char-breadcrumb__link {
  color: rgba(255, 255, 255, .7);
}

#char-hero .char-breadcrumb__link:hover {
  color: #fff;
}

#char-hero .char-breadcrumb__item--current {
  color: #fff;
  font-weight: 600;
}