/* LA Car Tint hero loop (Sep 26 2026). Decorative, silent, muted, seamless 27.5 s loop.
   Approved exception to the red-play-button rule (same pattern as the hub
   "Worth the Drive" hero): no play button, no watch text. It replaces only the
   hero picture inside .hero-banner-photo; the page H1, copy and buttons are
   untouched. 9:16 on phones (capped at 80svh so the call/text buttons stay
   close), 16:9 from 768px up. */
.hero-banner-photo.lct-hero{
  display:block;
  width:100%;
  line-height:0;
  background:#000;
}
.lct-hero__media{
  position:relative;
  overflow:hidden;
  width:100%;
  aspect-ratio:9 / 16;
  max-height:80svh;
  background:#000;
}
.lct-hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 55%;
  background:#000;
  pointer-events:none;
}
.lct-hero__video--desktop{ display:none; }
@media (min-width: 768px){
  .lct-hero__media{
    aspect-ratio:16 / 9;
    max-height:none;
    /* Full-bleed 16:9 at desktop viewport widths made the hero very tall,
       forcing a scroll before the content below was visible. Shrink to 2/3
       width, centered; the fixed aspect-ratio shrinks the height by the
       same factor, so it fits on screen without a scroll. */
    width:66.6667%;
    max-width:1280px;
    margin:0 auto;
  }
  .lct-hero__video{ object-position:center; }
  .lct-hero__video--mobile{ display:none; }
  .lct-hero__video--desktop{ display:block; }
}
/* Reduced motion: never play; the poster frame stands in. */
@media (prefers-reduced-motion: reduce){
  .lct-hero__video{ display:none !important; }
  .lct-hero__media{ background:#000 url("/assets/img/hero/lacartint-hero-0926-9x16-poster.jpg") center 55% / cover no-repeat; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 768px){
  .lct-hero__media{ background-image:url("/assets/img/hero/lacartint-hero-0926-16x9-poster.jpg"); background-position:center; }
}

/* Oct 2026 desktop-only tint promo (1920×720). Same file at both
   breakpoints — no 9:16 encode. Phone keeps the existing tall frame and
   object-fit:cover; object-position slides to the title side. Desktop
   uses the native 8:3 banner, full bleed. */
.hero-banner-photo.lct-hero[data-lct-hero="tint-worth-the-drive"] .lct-hero__video{
  object-position:left center;
}
@media (min-width: 768px){
  .hero-banner-photo.lct-hero[data-lct-hero="tint-worth-the-drive"] .lct-hero__media{
    aspect-ratio:8 / 3;
    width:100%;
    max-width:none;
    margin:0;
  }
  .hero-banner-photo.lct-hero[data-lct-hero="tint-worth-the-drive"] .lct-hero__video{
    object-position:center;
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-banner-photo.lct-hero[data-lct-hero="tint-worth-the-drive"] .lct-hero__media{
    background:#000 url("/assets/img/hero/tint-worth-the-drive-desktop-poster.jpg") left center / cover no-repeat;
  }
}
@media (prefers-reduced-motion: reduce) and (min-width: 768px){
  .hero-banner-photo.lct-hero[data-lct-hero="tint-worth-the-drive"] .lct-hero__media{
    background-image:url("/assets/img/hero/tint-worth-the-drive-desktop-poster.jpg");
    background-position:center;
  }
}

/* Oct 2026 LA Car Alarm banner. Real native cuts at both breakpoints —
   9:16 for phone (fits the default aspect-ratio box as-is, no crop bias
   needed) and 8:3 for desktop, full bleed, same pattern as the tint promo. */
@media (min-width: 768px){
  .hero-banner-photo.lct-hero[data-lct-hero="lacaralarm-banner"] .lct-hero__media{
    aspect-ratio:8 / 3;
    width:100%;
    max-width:none;
    margin:0;
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-banner-photo.lct-hero[data-lct-hero="lacaralarm-banner"] .lct-hero__media{
    background:#000 url("/assets/img/hero/lacaralarm-banner-1002-9x16-poster.jpg") center / cover no-repeat;
  }
}
@media (prefers-reduced-motion: reduce) and (min-width: 768px){
  .hero-banner-photo.lct-hero[data-lct-hero="lacaralarm-banner"] .lct-hero__media{
    background-image:url("/assets/img/hero/lacaralarm-banner-1002-desktop-poster.jpg");
    background-position:center;
  }
}

/* Oct 3 2026 Chat with Jessie stereo banner (hub /services/car-audio/).
   Same native cuts as the alarm banner: 9:16 phone, 8:3 desktop full bleed. */
@media (min-width: 768px){
  .hero-banner-photo.lct-hero[data-lct-hero="lacarstereo-banner"] .lct-hero__media{
    aspect-ratio:8 / 3;
    width:100%;
    max-width:none;
    margin:0;
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-banner-photo.lct-hero[data-lct-hero="lacarstereo-banner"] .lct-hero__media{
    background:#000 url("/assets/img/hero/lacarstereo-jessie-long-phone-1080x1920-poster.jpg") center / cover no-repeat;
  }
}
@media (prefers-reduced-motion: reduce) and (min-width: 768px){
  .hero-banner-photo.lct-hero[data-lct-hero="lacarstereo-banner"] .lct-hero__media{
    background-image:url("/assets/img/hero/lacarstereo-jessie-long-desktop-1920x720-poster.jpg");
    background-position:center;
  }
}

/* Oct 3 2026 Chat with Jessie tint LONG banner (lacartint.com home + hub
   /services/window-tinting/ only). Native cuts, same frame as before: 9:16
   phone (default box, centered), 8:3 desktop full bleed. */
.hero-banner-photo.lct-hero[data-lct-hero="tint-jessie-long"] .lct-hero__video{
  object-position:center;
}
@media (min-width: 768px){
  .hero-banner-photo.lct-hero[data-lct-hero="tint-jessie-long"] .lct-hero__media{
    aspect-ratio:8 / 3;
    width:100%;
    max-width:none;
    margin:0;
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-banner-photo.lct-hero[data-lct-hero="tint-jessie-long"] .lct-hero__media{
    background:#000 url("/assets/img/hero/lacartint-jessie-long-phone-1080x1920-poster.jpg") center / cover no-repeat;
  }
}
@media (prefers-reduced-motion: reduce) and (min-width: 768px){
  .hero-banner-photo.lct-hero[data-lct-hero="tint-jessie-long"] .lct-hero__media{
    background-image:url("/assets/img/hero/lacartint-banner-1003-jessie-long-desktop-poster.jpg");
    background-position:center;
  }
}

/* Oct 3 2026 Chat with Jessie alarm LONG banner (59.8 s silent loop;
   lacaralarm.com home + hub /services/auto-alarms/ + hub /alarm/). Native cuts,
   same frame as lacaralarm-banner: 9:16 phone (default box), 8:3 desktop full bleed. */
@media (min-width: 768px){
  .hero-banner-photo.lct-hero[data-lct-hero="lacaralarm-jessie-long"] .lct-hero__media{
    aspect-ratio:8 / 3;
    width:100%;
    max-width:none;
    margin:0;
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-banner-photo.lct-hero[data-lct-hero="lacaralarm-jessie-long"] .lct-hero__media{
    background:#000 url("/assets/img/hero/lacaralarm-banner-1003-jessie-long-9x16-poster.jpg") center / cover no-repeat;
  }
}
@media (prefers-reduced-motion: reduce) and (min-width: 768px){
  .hero-banner-photo.lct-hero[data-lct-hero="lacaralarm-jessie-long"] .lct-hero__media{
    background-image:url("/assets/img/hero/lacaralarm-banner-1003-jessie-long-desktop-poster.jpg");
    background-position:center;
  }
}