/* Homepage finishing layer. Existing section grids, copy and controls stay intact. */
.ht-main--home {
  --ht-home-line: #e2e6f0;
  --ht-home-tint: #f7f8fc;
}

/* Fine contour lines give the existing vehicle cutout a more deliberate stage. */
.ht-main--home .ht-hero__vehicle::after {
  content: '';
  position: absolute;
  width: 82%;
  aspect-ratio: 1;
  left: 9%;
  bottom: -7%;
  border: 1px solid #e0e5f0;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

/* Gentle angled surface at the service transition; cards retain their layout. */
.ht-main--home .ht-services {
  background: linear-gradient(166deg, #f4f6fb 0 67%, #edf0f7 67% 78%, #f4f6fb 78%);
}
.ht-main--home .ht-services__intro-description,
.ht-main--home .ht-reviews__intro-text {
  padding-top: 18px;
  background: linear-gradient(var(--ht-crimson), var(--ht-crimson)) left top / 38px 2px no-repeat;
}
.ht-main--home .ht-services__art::after {
  background: linear-gradient(180deg, rgb(14 17 34 / 32%), transparent 38% 75%, rgb(23 28 66 / 14%));
}

/* Expand the existing fleet circle with a quiet contour, not a new panel. */
.ht-main--home .ht-fleet__circle::after {
  content: '';
  position: absolute;
  inset: -22px;
  border: 1px solid var(--ht-home-line);
  border-radius: inherit;
  pointer-events: none;
}
.ht-main--home .ht-fleet__thumb img {
  /* Keep the complete passenger vehicle visible, including in the active state. */
  transform: none;
}
.ht-main--home .ht-fleet__showcase::after {
  content: '';
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d3dae9, transparent);
  pointer-events: none;
  z-index: -1;
}

.ht-main--home .ht-why__feature {
  background: rgb(255 255 255 / 5%);
}

/* Subtle photograph accents break up the About copy without adding content. */
.ht-main--home .ht-about {
  background: linear-gradient(100deg, var(--ht-home-tint), #fff 58%);
}
.ht-main--home .ht-about__visual {
  isolation: isolate;
}
.ht-main--home .ht-about__visual::after {
  content: '';
  position: absolute;
  width: 52px;
  height: 52px;
  right: 3%;
  bottom: 4%;
  border-right: 2px solid var(--ht-crimson);
  border-bottom: 2px solid var(--ht-crimson);
  border-bottom-right-radius: 16px;
  pointer-events: none;
}
.ht-main--home .ht-about__body p + p {
  padding-top: 17px;
  border-top: 1px solid var(--ht-home-line);
}

/* Location pin graphics make the coverage links scan as destinations. */
.ht-main--home .ht-service-areas {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: linear-gradient(180deg, #fff, #f8f9fc);
}
.ht-main--home .ht-service-areas::before {
  content: '';
  position: absolute;
  width: 420px;
  height: 240px;
  right: -70px;
  top: -35px;
  background: url('../../images/home/journey-route.svg') center / contain no-repeat;
  opacity: .55;
  pointer-events: none;
  z-index: -1;
}
.ht-main--home .ht-service-areas__intro p {
  background: rgb(255 255 255 / 88%);
}
.ht-main--home .ht-service-areas__grid a {
  justify-content: flex-start;
  background: #fff;
}
.ht-main--home .ht-service-areas__grid .ht-service-areas__pin {
  display: block;
  color: var(--ht-blue);
  flex: 0 0 22px;
}
.ht-main--home .ht-service-areas__grid a > svg:last-child {
  margin-left: auto;
}
.ht-main--home .ht-service-areas__grid a:hover,
.ht-main--home .ht-service-areas__grid a:focus-visible {
  background: #fff5f7;
}
.ht-main--home .ht-service-areas__grid a:hover .ht-service-areas__pin,
.ht-main--home .ht-service-areas__grid a:focus-visible .ht-service-areas__pin {
  color: var(--ht-crimson);
}
.ht-main--home .ht-faq {
  background: linear-gradient(145deg, #f1f3f9, #fafafc 55%);
  border-top: 1px solid var(--ht-home-line);
}
.ht-main--home .ht-faq__questions {
  position: relative;
}
.ht-main--home .ht-faq__questions::before {
  content: '';
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: -20px;
  width: 1px;
  background: linear-gradient(var(--ht-crimson), #dce1ee 40%, transparent);
  pointer-events: none;
}

@media (max-width: 1240px) {
  .ht-main--home .ht-service-areas__grid a { padding-inline: 16px; gap: 10px; }
  .ht-main--home .ht-service-areas__grid a > svg:last-child { display: none; }
}
@media (max-width: 700px) {
  .ht-main--home .ht-service-areas::before { opacity: .3; right: -140px; top: -55px; }
  .ht-main--home .ht-service-areas__grid a { padding-inline: 16px; gap: 8px; }
  .ht-main--home .ht-service-areas__grid .ht-service-areas__pin { display: none; }
  .ht-main--home .ht-about__visual::after { width: 34px; height: 34px; }
  .ht-main--home .ht-faq__questions::before { display: none; }
}