/* 12g1: homepage hero — officer always head-to-boots in the viewport.
   Short laptops (1024x600, 1280x720, 1366x768, 1440x900, 1920x1080) use contain
   inside 100svh so the 4:3 frame is never cropped. Mobile portrait stays a 4:5 crop. */

/* Laptops / desktops / large tablets: full-bleed 4:3 frame (as in 12f2).
   The photo fills the width — no letterbox. Officer is complete in the 4:3
   frame (cover of a 4:3 image does not crop). Text card overlays the left
   and must stay off the officer. */
@media (min-width: 700px) {
  .x-hero.x-hero--v2 {
    min-height: 0 !important;
    height: calc(100vw * 3 / 4) !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background: #04060c;
    position: relative;
    overflow: hidden;
  }
  .x-hero.x-hero--v2 .x-hero__media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    z-index: 0;
    margin-top: 0 !important;
  }
  .x-hero.x-hero--v2 .x-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: 80% 50% !important;
    transform: none !important;
    animation: none !important;
  }
  /* Gradient only on the left, over the car / text, off the officer. */
  .x-hero.x-hero--v2::before {
    background: linear-gradient(
      90deg,
      rgba(4,6,12,.88) 0%,
      rgba(4,6,12,.62) 22%,
      rgba(4,6,12,.2) 42%,
      rgba(4,6,12,0) 58%
    ) !important;
  }
  .x-hero.x-hero--v2::after { display: none !important; }
  .x-hero.x-hero--v2 .x-hero__in {
    position: relative !important;
    z-index: 1;
    width: 100%;
    background: transparent !important;
    padding-top: calc(var(--x-nav-h) + 1rem) !important;
    padding-bottom: 1.25rem !important;
  }
  .x-hero.x-hero--v2 .x-hero__copy {
    max-width: min(32rem, 46vw);
    padding: 1.05rem 1.15rem 1.15rem;
    border-radius: 20px;
    background: rgba(4,6,12,.66);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .x-hero.x-hero--v2 .x-hero__sub { display: block !important; }
  .x-hero.x-hero--v2 .x-hero__ctas {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: .55rem !important;
  }
  .x-hero.x-hero--v2 .x-hero__ctas .x-btn {
    width: auto !important;
    flex: 0 0 auto !important;
  }
  .x-hero.x-hero--v2 .x-hero__meta { display: block !important; }
}

/* Phones: stacked 4:5 crop centred on the officer. Cap height so short screens still show boots. */
@media (max-width: 699px) {
  .x-hero.x-hero--v2 {
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: #04060c;
  }
  .x-hero.x-hero--v2 .x-hero__media {
    position: relative;
    inset: auto;
    z-index: 0;
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: calc(100svh - var(--x-nav-h, 72px) - 7.5rem);
  }
  .x-hero.x-hero--v2 .x-hero__media img {
    object-fit: cover !important;
    object-position: 86% 46% !important;
    transform: none !important;
    animation: none !important;
  }
  .x-hero.x-hero--v2::before,
  .x-hero.x-hero--v2::after { display: none !important; }
  .x-hero.x-hero--v2 .x-hero__in {
    position: relative;
    padding: 1.4rem var(--x-gutter) calc(1.4rem + env(safe-area-inset-bottom, 0px));
    background: #04060c;
  }
  .x-hero.x-hero--v2 .x-hero__copy { max-width: none; }
  .x-hero.x-hero--v2 .x-hero__caption { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .x-hero.x-hero--v2 .x-hero__media img { animation: none !important; transform: none !important; }
}

.x-fleetlead { margin: 1.5rem 0 1.2rem; }
.x-fleetlead img,
.x-fleetlead picture img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  object-position: 16% 50%;
  border-radius: 8px;
  display: block;
}
@media (max-width: 767px) {
  .x-fleetlead img,
  .x-fleetlead picture img {
    aspect-ratio: 4 / 3;
    object-position: 10% 42%;
  }
}
.x-fleetlead figcaption {
  margin: .5rem 0 0;
  font-size: .88rem;
  color: #4b5873;
}

/* 12g1 service picker + quote (no prices) */
.x-picker { margin: 0 0 1.25rem; }
.x-picker__label { margin: 0 0 .65rem; font-size: .95rem; color: var(--x-ink-200, #c9d3e3); }
.x-picker__btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.x-picker__btn {
  appearance: none; border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04); color: inherit;
  border-radius: 999px; padding: .45rem .9rem; font: inherit; font-size: .9rem;
  cursor: pointer;
}
.x-picker__btn:hover, .x-picker__btn:focus-visible {
  border-color: #2f7bff; background: rgba(47,123,255,.16);
}
.x-picker__btn.is-on { border-color: #2f7bff; background: #2f7bff; color: #fff; }
.x-form__next { margin: .85rem 0 0; font-size: .9rem; color: var(--x-ink-300, #9aa8c0); }