/*
 * AutoVINChecks — Premium homepage presentation layer (v39)
 * ---------------------------------------------------------------------------
 * PRESENTATION ONLY. This file contains no behaviour.
 *
 * It does not touch, and cannot touch:
 *   VIN validation · VIN lookup · geo/IP detection · currency detection or
 *   switching · pricing · checkout · payments · email · orders · REST/AJAX ·
 *   SEO · meta · schema · sitemap · navigation destinations · forms.
 *
 * Scope: .site-header and .avc-hero only. Every other section is untouched.
 *
 * WHY THIS FILE EXISTS
 * The hero is styled by seven stylesheets that override each other with
 * !important (style, showroom, avtovita, mobile, hero3d, mobile-clean). Six of
 * them define .avc-hero-overlay. Rather than edit six files — which is where
 * things break — this layer loads last and owns the hero's presentation.
 * Deleting this file and its enqueue reverts the redesign completely.
 *
 * SPECIFICITY
 * Existing rules reach (0,3,1) — e.g. `.av3d-static .avc-hero.av3d::before` —
 * and use !important throughout. To outrank them without adding a body class
 * (which would mean editing markup), `.avc-hero` is repeated: 
 *
 *     html body .avc-hero.avc-hero.avc-hero   ->  (0,3,2)
 *
 * This matches the same single element, needs no markup change, and wins
 * whether or not avc-hero3d.js has added its `av3d` class yet.
 * ---------------------------------------------------------------------------
 */

:root{
  /* Greys sampled directly from assets/hero-grey-showroom-4k.jpg, so the CSS
     background and the photograph are the same material. */
  --avcp-wall-deep:#242424;
  --avcp-wall:#3D3D3D;
  --avcp-wall-lit:#5E5E5E;
  --avcp-floor:#2E2E2E;
  --avcp-void:#161616;

  --avcp-seam:rgba(255,255,255,.055);
  --avcp-seam-lit:rgba(255,255,255,.085);

  /* Existing brand red — read from avc-avtovita.css, not redefined. */
  --avcp-red:#e01f26;
  --avcp-red-dark:#b8171d;

  --avcp-ink:#ffffff;
  --avcp-ink-dim:#c9cbcd;
  --avcp-ink-faint:rgba(255,255,255,.52);

  --avcp-head:72px;                 /* single source of truth for header height */
  --avcp-gutter:clamp(20px,4vw,64px);
  --avcp-ease:cubic-bezier(.22,.61,.36,1);
}

/* ===========================================================================
   1. HEADER — desktop
   Sticky, so it occupies flow and can never overlap the hero.
   Destinations, nav markup and the currency element are untouched.
   =========================================================================== */
html body .site-header.site-header{
  position:sticky!important;top:0!important;z-index:120!important;
  background:linear-gradient(180deg,rgba(16,16,17,.92) 0%,rgba(16,16,17,.55) 62%,rgba(16,16,17,0) 100%)!important;
  border-bottom:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  transition:background .28s var(--avcp-ease)!important;
}
html body .site-header.site-header .header-inner{
  width:100%!important;max-width:1560px!important;
  min-height:var(--avcp-head)!important;height:var(--avcp-head)!important;
  margin:0 auto!important;
  display:flex!important;align-items:center!important;
  gap:clamp(16px,2vw,34px)!important;
  padding:0 var(--avcp-gutter)!important;
}

/* Logo — left, compact. */
html body .site-header.site-header .brand{
  width:auto!important;flex:0 0 auto!important;
  display:flex!important;align-items:center!important;
  height:auto!important;margin:0!important;
}
html body .site-header.site-header .avc-brandmark{
  display:inline-flex!important;align-items:center!important;
  width:auto!important;height:auto!important;flex:0 0 auto!important;
  background:none!important;border-radius:0!important;
  font-size:30px!important;line-height:1!important;letter-spacing:.01em!important;
  filter:none!important;
}
html body .site-header.site-header .avc-brandmark i{color:#fff!important}
html body .site-header.site-header .avc-brandmark i:last-child{color:var(--avcp-red)!important}
html body .site-header.site-header .avc-mobile-brandname{display:none!important}

/* Navigation — right aligned, quiet until hovered. */
html body .site-header.site-header .main-nav{
  flex:1 1 auto!important;
  display:flex!important;align-items:center!important;justify-content:flex-end!important;
  height:auto!important;
  gap:clamp(14px,1.7vw,30px)!important;
  font-size:12.5px!important;font-weight:700!important;letter-spacing:.11em!important;
}
html body .site-header.site-header .main-nav a{
  position:relative!important;
  display:inline-flex!important;align-items:center!important;
  height:auto!important;padding:6px 0!important;
  border-bottom:0!important;
  color:var(--avcp-ink-faint)!important;
  text-shadow:none!important;transform:none!important;
  transition:color .2s var(--avcp-ease)!important;
}
html body .site-header.site-header .main-nav a:hover,
html body .site-header.site-header .main-nav a.active{
  color:var(--avcp-ink)!important;border-color:transparent!important;text-shadow:none!important;
}
html body .site-header.site-header .main-nav a.active::after{
  content:""!important;position:absolute!important;
  left:0!important;right:0!important;bottom:-3px!important;
  height:2px!important;background:var(--avcp-red)!important;
}

/* Currency selector — appearance only. Content stays dynamic; #country-display
   keeps its id, data-region, data-country, aria-live and JS bindings. */
html body .site-header.site-header .country,
html body .site-header.site-header #country-display{
  flex:0 0 auto!important;
  min-width:0!important;
  height:40px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  margin:0 0 0 clamp(10px,1.2vw,22px)!important;
  padding:0 16px!important;
  font-size:12.5px!important;font-weight:700!important;letter-spacing:.04em!important;
  line-height:1!important;
  color:var(--avcp-ink)!important;
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:3px!important;
  white-space:nowrap!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:none!important;transform:none!important;
  transition:border-color .2s var(--avcp-ease),background .2s var(--avcp-ease)!important;
}
html body .site-header.site-header .country:hover,
html body .site-header.site-header #country-display:hover{
  background:rgba(255,255,255,.1)!important;
  border-color:rgba(255,255,255,.28)!important;
  box-shadow:none!important;
}
html body .site-header.site-header .avc-menu-toggle{display:none!important}

/* ===========================================================================
   2. HERO SHELL — desktop
   =========================================================================== */
html body .avc-hero.avc-hero.avc-hero{
  position:relative!important;
  height:auto!important;
  min-height:clamp(600px,88svh,860px)!important;
  margin-top:calc(var(--avcp-head) * -1)!important;  /* hero starts under the transparent header */
  padding:0!important;
  display:flex!important;align-items:center!important;
  overflow:hidden!important;
  background:var(--avcp-wall-deep)!important;
  filter:none!important;                              /* base sheet dimmed the whole hero */
}

/* --- 2a. The showroom photograph ---------------------------------------
   Kept on ::before so the existing scroll-parallax custom properties set by
   avc-hero3d.js keep working untouched. */
html body .avc-hero.avc-hero.avc-hero::before{
  content:""!important;
  position:absolute!important;inset:0!important;z-index:0!important;
  display:block!important;opacity:1!important;
  background-image:url("hero-grey-showroom-4k.jpg")!important;
  background-size:cover!important;
  background-position:68% center!important;
  background-repeat:no-repeat!important;
  background-attachment:scroll!important;
  transform:translate3d(var(--avc-hero-x,0px),var(--avc-hero-y,0px),0) scale(var(--avc-hero-scale,1.03))!important;
  transform-origin:center right!important;
  transition:transform .18s linear!important;
  will-change:transform;
}

/* --- 2b. Readability scrim ---------------------------------------------
   ONE gradient, weighted to the left where the text sits. It reaches zero
   opacity by 72%, so the car is never veiled. No blur, no backdrop-filter,
   no full-bleed sheet. */
html body .avc-hero.avc-hero.avc-hero .avc-hero-overlay{
  display:block!important;opacity:1!important;
  position:absolute!important;inset:0!important;z-index:1!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  background:linear-gradient(99deg,
    rgba(13,13,14,.93) 0%,
    rgba(13,13,14,.86) 18%,
    rgba(13,13,14,.62) 36%,
    rgba(13,13,14,.28) 54%,
    rgba(13,13,14,.06) 66%,
    rgba(13,13,14,0)   72%)!important;
}

/* --- 2c. Neutralise the 3D atmosphere layers -----------------------------
   avc-hero3d.js injects .av3d-back/light/floor/haze at inset:-6% -8%. Their
   edges are what produced the visible bands across the hero. They stay in the
   DOM (the JS keeps writing to them, nothing errors) but are reduced to a
   faint ambient wash, pinned to the hero box, with no transform. */
html body .avc-hero.avc-hero.avc-hero .av3d-layer{
  display:block!important;
  position:absolute!important;inset:0!important;
  opacity:.26!important;
  transform:none!important;
  mix-blend-mode:normal!important;
}
html body .avc-hero.avc-hero.avc-hero .av3d-back{z-index:0!important}
html body .avc-hero.avc-hero.avc-hero .av3d-light,
html body .avc-hero.avc-hero.avc-hero .av3d-floor,
html body .avc-hero.avc-hero.avc-hero .av3d-haze{z-index:1!important}

/* --- 2d. Giant outlined wordmark ---------------------------------------
   Uses the existing .avc-hero::after content, so no markup is added. As a
   pseudo-element it is invisible to screen readers and to search engines. */
html body .avc-hero.avc-hero.avc-hero::after{
  content:"AUTOVINCHECKS"!important;
  display:block!important;
  position:absolute!important;z-index:2!important;
  top:clamp(84px,13vh,150px)!important;
  left:var(--avcp-gutter)!important;
  right:auto!important;bottom:auto!important;
  transform:none!important;
  font-family:'Poppins',Arial,sans-serif!important;
  font-weight:700!important;
  font-size:clamp(52px,9.6vw,158px)!important;
  line-height:.92!important;letter-spacing:.005em!important;
  white-space:nowrap!important;
  color:transparent!important;
  -webkit-text-stroke:1px rgba(255,255,255,.12)!important;
  opacity:1!important;
  pointer-events:none!important;
  transition:none!important;
}

/* --- 2e. Hero content --------------------------------------------------- */
html body .avc-hero.avc-hero.avc-hero .avc-hero-inner{
  position:relative!important;z-index:4!important;
  width:100%!important;height:auto!important;min-height:0!important;
  max-width:1560px!important;margin:0 auto!important;
  padding:calc(var(--avcp-head) + 24px) var(--avcp-gutter) clamp(36px,5vh,64px)!important;
}
html body .avc-hero.avc-hero.avc-hero .avc-hero-copy{
  width:100%!important;max-width:640px!important;min-width:0!important;
}

/* Eyebrow */
html body .avc-hero.avc-hero.avc-hero .avc-welcome{
  display:flex!important;align-items:center!important;gap:13px!important;
  width:fit-content!important;
  margin:0 0 clamp(16px,2.2vh,26px)!important;
  padding:0!important;
  background:none!important;border:0!important;border-radius:0!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  font-size:12px!important;font-weight:600!important;
  letter-spacing:.18em!important;text-transform:uppercase!important;
  color:var(--avcp-ink-dim)!important;
}
html body .avc-hero.avc-hero.avc-hero .avc-welcome-icon{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  flex:0 0 28px!important;width:28px!important;height:28px!important;padding:0!important;
  border-radius:50%!important;
  background:rgba(224,31,38,.18)!important;
  border:1px solid var(--avcp-red)!important;
  color:#fff!important;font-size:12px!important;
}

/* --- 2f. H1 -------------------------------------------------------------
   The two spans are inline in the markup, so on desktop they render as
   "Auto VIN ChecksVehicle History…" with no space. Making them block-level
   fixes that in CSS alone — the H1 element, its text and its position in the
   document are unchanged, so SEO is unaffected. */
html body .avc-hero.avc-hero.avc-hero h1{
  margin:0 0 clamp(16px,2.2vh,24px)!important;
  font-size:clamp(34px,4.2vw,62px)!important;
  line-height:1.04!important;font-weight:800!important;
  letter-spacing:-.022em!important;
  text-shadow:none!important;
  text-wrap:balance;
}
html body .avc-hero.avc-hero.avc-hero h1 .avc-mobile-title-main,
html body .avc-hero.avc-hero.avc-hero h1 .avc-mobile-title-sub{display:block!important}
html body .avc-hero.avc-hero.avc-hero h1 .avc-mobile-title-main{color:var(--avcp-ink)!important}
html body .avc-hero.avc-hero.avc-hero h1 .avc-mobile-title-sub{
  margin-top:.3em!important;
  font-size:.58em!important;font-weight:600!important;
  letter-spacing:-.008em!important;
  color:var(--avcp-ink-dim)!important;
}

html body .avc-hero.avc-hero.avc-hero .avc-subtitle{
  max-width:50ch!important;
  margin:0 0 clamp(24px,3.2vh,34px)!important;
  font-size:clamp(15px,1.05vw,17px)!important;line-height:1.66!important;
  color:var(--avcp-ink-dim)!important;
  text-shadow:none!important;
}

/* --- 2g. VIN form — appearance only -------------------------------------
   The <form>, its id, novalidate, the input's id/name/maxlength/required and
   the submit button's id are all untouched. Only paint changes. */
html body .avc-hero.avc-hero.avc-hero .avc-vin-form{width:100%!important;max-width:600px!important;margin:0!important}
html body .avc-hero.avc-hero.avc-hero .avc-vin-row{
  display:flex!important;flex-direction:row!important;
  height:62px!important;
  background:rgba(16,17,18,.9)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:3px!important;
  overflow:hidden!important;
  box-shadow:0 22px 48px rgba(0,0,0,.42)!important;
  transition:border-color .22s var(--avcp-ease),box-shadow .22s var(--avcp-ease)!important;
}
html body .avc-hero.avc-hero.avc-hero .avc-vin-row:focus-within{
  border-color:rgba(224,31,38,.65)!important;
  box-shadow:0 22px 48px rgba(0,0,0,.42),0 0 0 3px rgba(224,31,38,.16)!important;
}
html body .avc-hero.avc-hero.avc-hero .avc-vin-input{
  flex:1 1 auto!important;min-width:0!important;
  height:100%!important;padding:0 20px!important;
  background:transparent!important;border:0!important;outline:0!important;
  color:var(--avcp-ink)!important;
  font-size:15px!important;font-weight:500!important;letter-spacing:.04em!important;
}
html body .avc-hero.avc-hero.avc-hero .avc-vin-input::placeholder{
  color:rgba(255,255,255,.36)!important;letter-spacing:.02em!important;font-weight:400!important;
}
html body .avc-hero.avc-hero.avc-hero .avc-vin-btn{
  flex:0 0 auto!important;
  width:auto!important;min-width:186px!important;height:100%!important;
  padding:0 32px!important;
  border:0!important;border-radius:0!important;
  background:linear-gradient(180deg,var(--avcp-red) 0%,var(--avcp-red-dark) 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)!important;
  color:#fff!important;
  font-size:13px!important;font-weight:800!important;letter-spacing:.13em!important;
  cursor:pointer!important;
  transition:filter .2s var(--avcp-ease)!important;
}
html body .avc-hero.avc-hero.avc-hero .avc-vin-btn:hover{filter:brightness(1.1)!important}
html body .avc-hero.avc-hero.avc-hero .avc-vin-btn:active{transform:translateY(1px)!important}
html body .avc-hero.avc-hero.avc-hero .avc-vin-btn:disabled{opacity:.6!important;cursor:wait!important;filter:none!important}

/* Help row — kept, quieted. */
html body .avc-hero.avc-hero.avc-hero .avc-help-row{
  display:flex!important;flex-wrap:wrap!important;
  gap:10px clamp(20px,2.4vw,34px)!important;
  margin-top:clamp(14px,2vh,22px)!important;
  font-size:13.5px!important;
  color:var(--avcp-ink-dim)!important;
}
html body .avc-hero.avc-hero.avc-hero .avc-notice{margin-top:14px!important;font-size:13.5px!important}

/* ===========================================================================
   3. FOCUS VISIBILITY (hero + header only)
   =========================================================================== */
html body .site-header a:focus-visible,
html body .site-header button:focus-visible,
html body .avc-hero a:focus-visible,
html body .avc-hero button:focus-visible,
html body .avc-hero input:focus-visible{
  outline:2px solid var(--avcp-red)!important;outline-offset:3px!important;
}

/* ===========================================================================
   4. TABLET — 821px to 1180px
   =========================================================================== */
@media (max-width:1180px) and (min-width:821px){
  html body .avc-hero.avc-hero.avc-hero::before{background-position:72% center!important}
  html body .avc-hero.avc-hero.avc-hero .avc-hero-copy{max-width:560px!important}
  html body .avc-hero.avc-hero.avc-hero .avc-hero-overlay{
    background:linear-gradient(99deg,
      rgba(13,13,14,.94) 0%,
      rgba(13,13,14,.88) 22%,
      rgba(13,13,14,.66) 42%,
      rgba(13,13,14,.24) 62%,
      rgba(13,13,14,0)   78%)!important;
  }
  html body .site-header.site-header .main-nav{gap:14px!important;font-size:11.5px!important;letter-spacing:.08em!important}
}

/* ===========================================================================
   5. MOBILE — 820px and below
   The hero is RECOMPOSED, not shrunk: text block on top, car photographed
   into the lower third, nothing absolutely positioned over anything else.
   =========================================================================== */
@media (max-width:820px){
  :root{--avcp-head:64px;--avcp-gutter:22px;}

  html,body{overflow-x:hidden!important;}
  html body img,html body svg{max-width:100%}

  /* --- 5a. Header: compact, transparent, logo left / burger right ------- */
  html body .site-header.site-header{
    position:absolute!important;
    inset:0 0 auto 0!important;
    height:var(--avcp-head)!important;
    z-index:120!important;
    background:linear-gradient(180deg,rgba(16,16,17,.82) 0%,rgba(16,16,17,0) 100%)!important;
    border:0!important;box-shadow:none!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }
  html body .site-header.site-header .header-inner{
    position:relative!important;
    width:100%!important;max-width:none!important;
    height:var(--avcp-head)!important;min-height:var(--avcp-head)!important;
    display:flex!important;align-items:center!important;
    gap:12px!important;
    padding:0 var(--avcp-gutter)!important;margin:0!important;
  }
  html body .site-header.site-header .brand{
    position:static!important;
    flex:0 0 auto!important;width:auto!important;height:auto!important;
    display:flex!important;align-items:center!important;margin:0!important;
  }
  html body .site-header.site-header .avc-brandmark{
    display:inline-flex!important;align-items:center!important;
    width:auto!important;height:auto!important;flex:0 0 auto!important;
    background:none!important;border-radius:0!important;
    font-size:25px!important;line-height:1!important;letter-spacing:.01em!important;
  }
  html body .site-header.site-header .avc-brandmark i,
  html body .site-header.site-header .avc-brandmark i:first-child,
  html body .site-header.site-header .avc-brandmark i:nth-child(2){color:#fff!important}
  html body .site-header.site-header .avc-brandmark i:last-child{color:var(--avcp-red)!important}

  /* Currency: stays in the header bar, compact. Content remains dynamic. */
  html body .site-header.site-header .country,
  html body .site-header.site-header #country-display{
    position:static!important;
    order:2!important;
    flex:0 1 auto!important;
    max-width:46vw!important;min-width:0!important;
    height:32px!important;
    margin:0 0 0 auto!important;padding:0 11px!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    font-size:11px!important;font-weight:700!important;letter-spacing:.03em!important;
    line-height:1!important;
    color:var(--avcp-ink)!important;
    background:rgba(255,255,255,.07)!important;
    border:1px solid rgba(255,255,255,.16)!important;
    border-radius:3px!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }

  html body .site-header.site-header .avc-menu-toggle{
    position:static!important;
    order:3!important;flex:0 0 auto!important;
    display:flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:center!important;gap:5px!important;
    width:42px!important;height:42px!important;
    margin:0 -9px 0 4px!important;padding:0!important;
    background:transparent!important;border:0!important;color:#fff!important;
    cursor:pointer!important;z-index:4!important;
  }
  html body .site-header.site-header .avc-menu-toggle span{
    display:block!important;width:24px!important;height:2px!important;
    background:currentColor!important;
  }

  /* Drawer nav — presentation only; the existing avc-menu-open toggle in
     avc-mobile-clean.js continues to drive it. */
  html body .site-header.site-header .main-nav{
    position:fixed!important;
    inset:var(--avcp-head) 0 auto 0!important;
    z-index:118!important;
    width:100%!important;height:auto!important;min-height:0!important;
    max-height:calc(100svh - var(--avcp-head))!important;
    overflow-y:auto!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    padding:4px var(--avcp-gutter) 20px!important;margin:0!important;gap:0!important;
    background:rgba(15,15,16,.985)!important;
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    transform:translate3d(0,-10px,0)!important;
    transition:opacity .22s var(--avcp-ease),transform .22s var(--avcp-ease),visibility .22s!important;
  }
  html body.avc-menu-open .site-header.site-header .main-nav{
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;
    transform:none!important;
  }
  html body .site-header.site-header .main-nav a{
    width:100%!important;min-height:52px!important;
    display:flex!important;align-items:center!important;
    padding:14px 0!important;
    border:0!important;border-bottom:1px solid rgba(255,255,255,.1)!important;
    font-size:13px!important;font-weight:700!important;letter-spacing:.12em!important;
    color:#fff!important;
  }
  html body .site-header.site-header .main-nav a.active::after{display:none!important}

  /* --- 5b. Hero shell --------------------------------------------------- */
  html body .avc-hero.avc-hero.avc-hero{
    position:relative!important;
    display:block!important;
    height:auto!important;min-height:0!important;
    margin-top:0!important;padding:0!important;
    overflow:hidden!important;
    background:var(--avcp-wall-deep)!important;
    perspective:none!important;
  }

  /* Architectural wall, drawn in CSS, tuned to the photograph's own greys.
     No hairline at 50% — that was the visible line across the old hero. */
  html body .avc-hero.avc-hero.avc-hero::before{
    content:""!important;display:block!important;opacity:1!important;
    position:absolute!important;inset:0!important;z-index:0!important;
    background-image:
      linear-gradient(90deg,transparent 27.1%,var(--avcp-seam) 27.3%,var(--avcp-seam) 27.5%,transparent 27.7%),
      linear-gradient(90deg,transparent 73.2%,var(--avcp-seam) 73.4%,var(--avcp-seam) 73.6%,transparent 73.8%),
      linear-gradient(180deg,transparent 31%,var(--avcp-seam-lit) 31.2%,var(--avcp-seam-lit) 31.4%,transparent 31.6%),
      radial-gradient(88% 52% at 62% 20%,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 72%),
      linear-gradient(180deg,var(--avcp-wall) 0%,var(--avcp-wall-lit) 34%,var(--avcp-wall) 58%,var(--avcp-floor) 66%,var(--avcp-void) 100%)!important;
    background-size:auto!important;background-position:center!important;
    transform:none!important;transition:none!important;
  }

  /* The showroom photograph returns as a bottom-anchored band, masked at the
     top so it dissolves into the CSS wall with no seam. Same car as desktop. */
  html body .avc-hero.avc-hero.avc-hero .avc-hero-image{
    display:block!important;opacity:1!important;
    position:absolute!important;
    left:0!important;right:0!important;bottom:0!important;top:auto!important;
    width:auto!important;height:44%!important;z-index:1!important;
    background-image:url("hero-grey-showroom-4k.jpg")!important;
    background-size:134% auto!important;
    background-position:99% bottom!important;
    background-repeat:no-repeat!important;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 100%)!important;
    mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 100%)!important;
    transform:none!important;filter:none!important;
  }

  /* No scrim on mobile — the CSS wall is already dark enough for white text,
     and a scrim here is exactly what created the old "sheet" effect. */
  html body .avc-hero.avc-hero.avc-hero .avc-hero-overlay{display:none!important}
  html body .avc-hero.avc-hero.avc-hero .av3d-layer{display:none!important}

  /* The Dodge cut-out is retired on mobile: it is a different vehicle from the
     desktop hero, which broke the "one design" requirement. See notes.
     To restore it, delete this rule and the .avc-hero-image rule above. */
  html body .avc-hero.avc-hero.avc-hero .avc-m-stage{display:none!important}

  /* Outlined wordmark, scaled down and left-aligned. */
  html body .avc-hero.avc-hero.avc-hero::after{
    content:"AUTOVINCHECKS"!important;
    display:block!important;
    position:absolute!important;z-index:2!important;
    top:calc(var(--avcp-head) + 20px)!important;
    left:var(--avcp-gutter)!important;
    right:auto!important;bottom:auto!important;
    transform:none!important;
    font-family:'Poppins',Arial,sans-serif!important;
    font-weight:700!important;
    font-size:clamp(28px,8.8vw,42px)!important;
    line-height:1!important;letter-spacing:.005em!important;white-space:nowrap!important;
    color:transparent!important;
    -webkit-text-stroke:1px rgba(255,255,255,.18)!important;
    opacity:1!important;pointer-events:none!important;transition:none!important;
  }

  /* --- 5c. Hero content -------------------------------------------------
     padding-top is derived from --avcp-head, so the H1 can never slide under
     the header again regardless of how the header height changes. */
  html body .avc-hero.avc-hero.avc-hero .avc-hero-inner{
    position:relative!important;z-index:4!important;
    display:block!important;
    width:100%!important;max-width:none!important;
    height:auto!important;min-height:0!important;
    margin:0!important;
    padding:calc(var(--avcp-head) + 78px) var(--avcp-gutter) 0!important;
  }
  html body .avc-hero.avc-hero.avc-hero .avc-hero-copy{
    width:100%!important;max-width:none!important;min-width:0!important;
    transform:none!important;opacity:1!important;
  }

  html body .avc-hero.avc-hero.avc-hero .avc-welcome{
    display:flex!important;width:fit-content!important;
    margin:0 0 13px!important;padding:0!important;
    background:none!important;border:0!important;border-radius:0!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    font-size:10.5px!important;letter-spacing:.16em!important;
  }
  html body .avc-hero.avc-hero.avc-hero .avc-welcome-icon{
    flex:0 0 24px!important;width:24px!important;height:24px!important;
    padding:0!important;font-size:11px!important;
    border:1px solid var(--avcp-red)!important;
    background:rgba(224,31,38,.18)!important;border-radius:50%!important;
  }

  html body .avc-hero.avc-hero.avc-hero h1{
    max-width:100%!important;margin:0 0 13px!important;
    font-size:clamp(25px,7.2vw,33px)!important;
    line-height:1.1!important;font-weight:800!important;letter-spacing:-.015em!important;
    text-align:left!important;text-shadow:none!important;
  }
  html body .avc-hero.avc-hero.avc-hero h1 .avc-mobile-title-main{color:var(--avcp-ink)!important;white-space:normal!important}
  html body .avc-hero.avc-hero.avc-hero h1 .avc-mobile-title-sub{
    display:block!important;max-width:none!important;
    margin-top:6px!important;
    font-size:.6em!important;font-weight:600!important;
    color:var(--avcp-ink-dim)!important;
  }

  html body .avc-hero.avc-hero.avc-hero .avc-subtitle{
    max-width:42ch!important;margin:0 0 18px!important;
    font-size:13.5px!important;line-height:1.58!important;
    color:var(--avcp-ink-dim)!important;
  }

  /* VIN form — stacked, full width, thumb-sized targets. */
  html body .avc-hero.avc-hero.avc-hero .avc-vin-form{max-width:none!important}
  html body .avc-hero.avc-hero.avc-hero .avc-vin-row{
    display:flex!important;flex-direction:column!important;
    height:auto!important;
    background:transparent!important;border:0!important;border-radius:0!important;
    box-shadow:none!important;overflow:visible!important;
  }
  html body .avc-hero.avc-hero.avc-hero .avc-vin-row:focus-within{box-shadow:none!important;border:0!important}
  html body .avc-hero.avc-hero.avc-hero .avc-vin-input{
    width:100%!important;height:54px!important;min-height:54px!important;
    padding:0 16px!important;
    background:rgba(16,17,18,.92)!important;
    border:1px solid rgba(255,255,255,.2)!important;border-radius:3px!important;
    color:var(--avcp-ink)!important;
    font-size:16px!important;               /* 16px prevents iOS zoom-on-focus */
    font-weight:500!important;letter-spacing:.03em!important;
  }
  html body .avc-hero.avc-hero.avc-hero .avc-vin-input::placeholder{font-size:14px!important;color:rgba(255,255,255,.38)!important}
  html body .avc-hero.avc-hero.avc-hero .avc-vin-input:focus{border-color:rgba(224,31,38,.7)!important}
  html body .avc-hero.avc-hero.avc-hero .avc-vin-btn{
    width:100%!important;min-width:0!important;height:54px!important;
    margin-top:9px!important;padding:0!important;
    border-radius:3px!important;
    font-size:12.5px!important;letter-spacing:.13em!important;
  }

  html body .avc-hero.avc-hero.avc-hero .avc-help-row{
    display:flex!important;flex-direction:column!important;gap:9px!important;
    margin-top:15px!important;
    font-size:12.5px!important;
    color:var(--avcp-ink-dim)!important;
  }

  /* Clearance so the copy block never sits on top of the vehicle band. */
  html body .avc-hero.avc-hero.avc-hero .avc-hero-inner::after{
    content:""!important;display:block!important;
    height:clamp(250px,64vw,360px)!important;
  }
}

/* --- 5d. 430 / 414 / 390 / 375 / 360 ------------------------------------ */
@media (max-width:440px){
  :root{--avcp-gutter:20px}
  html body .site-header.site-header .avc-brandmark{font-size:23px!important}
  html body .site-header.site-header .country,
  html body .site-header.site-header #country-display{font-size:10px!important;padding:0 9px!important;max-width:42vw!important}
  html body .avc-hero.avc-hero.avc-hero h1{font-size:clamp(24px,7.2vw,29px)!important}
  html body .avc-hero.avc-hero.avc-hero::after{font-size:clamp(26px,8.4vw,36px)!important}
}

/* --- 5e. 320px — tightest supported width ------------------------------- */
@media (max-width:360px){
  :root{--avcp-gutter:16px}
  html body .site-header.site-header .avc-brandmark{font-size:21px!important}
  html body .site-header.site-header .country,
  html body .site-header.site-header #country-display{font-size:9.5px!important;max-width:38vw!important;padding:0 7px!important}
  html body .avc-hero.avc-hero.avc-hero h1{font-size:23px!important}
  html body .avc-hero.avc-hero.avc-hero .avc-subtitle{font-size:12.5px!important}
  html body .avc-hero.avc-hero.avc-hero::after{font-size:25px!important;letter-spacing:0!important}
  html body .avc-hero.avc-hero.avc-hero .avc-hero-inner::after{height:210px!important}
}

/* --- 5f. Short landscape phones ----------------------------------------- */
@media (max-height:520px) and (orientation:landscape) and (max-width:900px){
  html body .avc-hero.avc-hero.avc-hero .avc-hero-inner{padding-top:calc(var(--avcp-head) + 24px)!important}
  html body .avc-hero.avc-hero.avc-hero::after{display:none!important}
  html body .avc-hero.avc-hero.avc-hero .avc-hero-inner::after{height:150px!important}
}

/* ===========================================================================
   6. REDUCED MOTION
   =========================================================================== */
@media (prefers-reduced-motion:reduce){
  html body .avc-hero.avc-hero.avc-hero,
  html body .avc-hero.avc-hero.avc-hero *,
  html body .site-header.site-header,
  html body .site-header.site-header *{
    animation:none!important;
    transition:none!important;
  }
  html body .avc-hero.avc-hero.avc-hero::before,
  html body .avc-hero.avc-hero.avc-hero::after{transform:none!important}
}