/* ==========================================================
   Harpenden Taxis — white hero v2
   Plain white canvas; responsive two-column composition.
   The supplied car is shown whole, with a one-time drive-in.
   ========================================================== */

.ht-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fff;
  color: var(--ht-navy, #171c42);
  border-bottom: 0;
}

/* Distinct 5px brand gradient between the hero and next section. */
.ht-hero::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: auto 0 0;
  height: 5px;
  background: linear-gradient(90deg, #2c3077 0%, #be2039 100%);
  pointer-events: none;
}

.ht-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  gap: clamp(14px, 2.2vw, 40px);
  min-height: clamp(490px, 35vw, 585px);
  padding-block: clamp(54px, 5.2vw, 82px) clamp(42px, 4.6vw, 68px);
}

.ht-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
}
.ht-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 21px;
  color: var(--ht-blue, #2c3077);
  font: 700 clamp(10px, .7vw, 12px)/1.45 var(--ht-font-body, "IBM Plex Sans", sans-serif);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ht-hero__eyebrow-mark {
  flex: 0 0 22px;
  width: 22px;
  height: 2px;
  background: var(--ht-crimson, #be2039);
}
.ht-hero .ht-hero__title {
  width: 100%;
  max-width: 790px;
  margin: 0;
  color: var(--ht-navy, #171c42);
  font-family: var(--ht-font-heading, Manrope, sans-serif);
  font-size: clamp(2.85rem, 3.95vw, 4.7rem);
  font-weight: 800;
  line-height: 1.085;
  letter-spacing: -.052em;
  text-wrap: balance;
}
.ht-hero__title span {
  display: block;
  color: var(--ht-crimson, #be2039);
  -webkit-text-fill-color: currentColor;
}
.ht-hero__description {
  max-width: 530px;
  margin: 23px 0 0;
  color: var(--ht-muted, #5b6070);
  font-size: clamp(.95rem, .32vw + .84rem, 1.08rem);
  line-height: 1.7;
}
.ht-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 25px;
}
.ht-hero__book {
  min-height: 51px;
  padding: 13px 22px;
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(190, 32, 57, .13);
}
.ht-hero__book svg { transition: transform 220ms ease; }
.ht-hero__book:hover svg { transform: translateX(4px); }
.ht-hero__phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  color: var(--ht-navy, #171c42);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease;
}
.ht-hero__phone svg { color: var(--ht-crimson, #be2039); }
.ht-hero__phone:hover,
.ht-hero__phone:focus-visible { color: var(--ht-crimson, #be2039); }

/* Three equal-sized trust cards; same icon frame and typography for every badge. */
.ht-hero__badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 690px;
  margin-top: 28px;
}
.ht-hero__reviews,
.ht-hero__availability,
.ht-hero__airports {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 78px;
  padding: 11px;
  margin: 0;
  border: 1.5px solid #bbc6d9;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(23, 28, 66, .12), 0 2px 5px rgba(23, 28, 66, .04);
}
.ht-hero__availability { border-color: #d9acb7; }
.ht-hero__airports { border-color: #b8c1df; }
.ht-hero__reviews-icon,
.ht-hero__availability-icon,
.ht-hero__airports-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border: 1.5px solid #aebbd1;
  border-radius: 10px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 2px 5px rgba(23, 28, 66, .05);
}
.ht-hero__availability-icon {
  color: var(--ht-crimson, #be2039);
  background: #fff0f3;
  border-color: #dda7b4;
}
.ht-hero__airports-icon {
  color: var(--ht-blue, #2c3077);
  background: #eef0fa;
  border-color: #b8c1df;
}
.ht-hero__reviews-icon img { width: 31px; height: 31px; object-fit: contain; }
.ht-hero__reviews-copy,
.ht-hero__availability-copy,
.ht-hero__airports-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 3px;
}
.ht-hero__reviews-copy strong,
.ht-hero__availability-copy strong,
.ht-hero__airports-copy strong {
  color: var(--ht-navy, #171c42);
  font: 800 22px/1.15 var(--ht-font-heading, Manrope, sans-serif);
}
.ht-hero__reviews-copy > span,
.ht-hero__availability-copy > span,
.ht-hero__airports-copy > span {
  color: var(--ht-muted, #5b6070);
  font-size: 11.5px;
  line-height: 1.4;
}

/* Vehicle is now part of the grid, so it cannot spill beyond viewport. */
.ht-hero__vehicle {
  position: relative;
  z-index: 1;
  align-self: end;
  width: calc(100% + clamp(10px, 4.3vw, 80px));
  max-width: none;
  margin: 0 0 12px clamp(-65px, -3.2vw, -22px);
  padding-bottom: 25px; /* breathing room for the floor shadow */
  pointer-events: none;
  isolation: isolate;
  --ht-hero-reveal-duration: 1.7s;
}
.ht-hero__vehicle::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 74%;
  aspect-ratio: 1;
  left: 13%;
  bottom: 0;
  border-radius: 50%;
  background: #e2e8f5;
  animation: ht-hero-circle-in var(--ht-hero-reveal-duration) cubic-bezier(.23,.77,.21,1) both;
}
.ht-hero__car {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  animation: ht-hero-drive-in var(--ht-hero-reveal-duration) cubic-bezier(.23,.77,.21,1) both;
}
@keyframes ht-hero-circle-in {
  from { opacity: 0; transform: scale(.82); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes ht-hero-drive-in {
  0%   { opacity: .65; transform: translate3d(115%, 0, 0) scale(.97); }
  74%  { opacity: 1; transform: translate3d(-1.6%, 0, 0) scale(1.006); }
  88%  { transform: translate3d(.55%, 0, 0) scale(.999); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Constrain car at shorter viewports, not just narrower screens. */
@media (min-width: 1061px) and (max-height: 750px) {
  .ht-hero__inner { min-height: 470px; padding-block: 45px; }
  .ht-hero .ht-hero__title { font-size: clamp(2.7rem, 3.35vw, 4rem); }
  .ht-hero__description { margin-top: 17px; }
  .ht-hero__badges { margin-top: 17px; }
}

/* Intermediate laptops keep a compact two-column layout. */
@media (min-width: 921px) and (max-width: 1120px) {
  .ht-hero__inner {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: 6px;
    min-height: 520px;
    padding-block: 48px;
  }
  .ht-hero .ht-hero__title {
    font-size: clamp(2.5rem, 3.9vw, 3.3rem);
    letter-spacing: -.045em;
  }
  .ht-hero__eyebrow { font-size: 10px; letter-spacing: .08em; }
  .ht-hero__description { font-size: .95rem; margin-top: 18px; }
  .ht-hero__actions { margin-top: 18px; }
  .ht-hero__badges { margin-top: 17px; }
  .ht-hero__vehicle {
    width: calc(100% + 45px);
    margin-left: -35px;
  }
}

/* Stack naturally on tablets and phones: car remains completely visible. */
@media (max-width: 920px) {
  .ht-hero__inner {
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: 0;
    padding-block: 56px 28px;
  }
  .ht-hero__content { max-width: 790px; }
  .ht-hero .ht-hero__title { max-width: 820px; font-size: clamp(3rem, 5.9vw, 4.65rem); }
  .ht-hero__vehicle {
    width: min(79vw, 760px);
    justify-self: end;
    margin: 0;
  }
}
@media (max-width: 700px) {
  .ht-hero__inner { gap: 22px; padding-block: 46px 20px; }
  .ht-hero__eyebrow { font-size: 10px; margin-bottom: 15px; letter-spacing: .075em; }
  .ht-hero .ht-hero__title { font-size: clamp(2.55rem, 8.1vw, 3.8rem); line-height: 1.11; letter-spacing: -.045em; }
  .ht-hero__description { margin-top: 17px; font-size: .95rem; }
  .ht-hero__actions { margin-top: 20px; }
  .ht-hero__book { min-height: 48px; padding: 11px 19px; }
  .ht-hero__badges { margin-top: 18px; }
  .ht-hero__vehicle { justify-self: center; width: min(100%, 610px); }
}
@media (max-width: 420px) {
  .ht-hero__eyebrow { letter-spacing: .04em; }
  .ht-hero .ht-hero__title { font-size: clamp(1.8rem, 8.6vw, 2.7rem); }
  .ht-hero__actions { flex-direction: column; align-items: flex-start; gap: 7px; }
  .ht-hero__phone { min-height: 40px; }


}
@media (prefers-reduced-motion: reduce) {
  .ht-hero__car, .ht-hero__vehicle::before { animation: none; }
  .ht-hero__book svg { transition: none; }
}

/* 2 columns on tablets/smaller laptops so badges don't squash. */
@media (max-width: 1360px) and (min-width: 921px) {
  .ht-hero__badges { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 470px; }
}
@media (max-width: 700px) {
  .ht-hero__badges { grid-template-columns: 1fr; max-width: none; gap: 10px; }
}
@media (max-width: 430px) {
  .ht-hero__badges { grid-template-columns: 1fr; max-width: none; }
}
@media (min-width: 701px) and (max-width: 920px) {
  .ht-hero__badges { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 480px; }
}