/* ==========================================================================
   LANDING PAGE — approved handover, frozen 16 Sep 2026.
   Built to SPEC-landing.md. Values are taken from the spec, not invented.

   NEW FILE: public/css/landing.css

   Loaded ONLY by resources/views/portal/landing.blade.php, which only the
   public landing page uses. That is how SPEC §13's "scope the landing page's
   CSS so it cannot leak into the authenticated portal" is satisfied — by the
   file never being served on another page, rather than by naming discipline.
   Every class is additionally prefixed .lz- so nothing can collide even if the
   two are ever loaded together.
   ========================================================================== */

.lz {
  --navy:        #001f44;
  --navy-hover:  #0A2E5C;
  --page-grey:   #F0F1F3;
  --hairline:    #C6C9CF;
  --body-ink:    #3D4450;
  --muted-ink:   #585855;
  --tick-grey:   #b9bbbb;
  --white:       #FFFFFF;
  --white-hover: #DBDAD9;
  --measure:     1180px;
}

.lz *, .lz *::before, .lz *::after { box-sizing: border-box; }

.lz {
  margin: 0;
  background: var(--page-grey);
  color: var(--body-ink);
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Arabic companion stays scoped. It must never enter the Latin stack — it
   renders Arabic-Indic numerals for Latin content. */
.lz[lang="ar"], .lz[dir="rtl"] {
  font-family: 'GE SS Two', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}

.lz :focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.lz-hero :focus-visible,
.lz-header :focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

.lz-sr {
  position: absolute; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Header (SPEC §2) ---------- */

.lz-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--navy);
  min-block-size: 60px;
}
.lz-header__inner {
  max-inline-size: var(--measure);
  margin-inline: auto;
  padding: 10px 20px;
  min-block-size: 60px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.lz-header__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.lz-header__mark  { block-size: 52px; inline-size: auto; display: block; }
.lz-header__rule  { inline-size: 1px; block-size: 22px; background: rgba(255,255,255,.22); }
.lz-header__lockup {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--white);
  white-space: nowrap;
}
.lz-header__actions { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }

/* Never shrink, never wrap — SPEC §2. */
.lz-header__actions > * { flex: 0 0 auto; white-space: nowrap; }

.lz-hbtn-ghost,
.lz-hbtn-solid {
  display: inline-flex;
  align-items: center;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13.5px;
  text-decoration: none;
}
.lz-hbtn-ghost {
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.3);
  color: var(--white);
  font-weight: 500;
}
.lz-hbtn-ghost:hover { border-color: rgba(255,255,255,.6); }
.lz-hbtn-solid {
  padding: 10px 15px;
  background: var(--white);
  color: var(--navy);
  font-weight: 700;
  border: 0;
}
.lz-hbtn-solid:hover { background: var(--white-hover); }

/* ---------- Hero shell (SPEC §3) ---------- */

.lz-hero {
  position: relative;
  display: flex;
  background: var(--navy);           /* never blank or white while images decode */
  overflow: hidden;
  min-block-size: clamp(540px, 80vh, 780px);
}

/* Scene region — layer 0 */
.lz-scenes {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inset-inline-start: clamp(300px, 46%, 600px);
  display: grid;
  grid-template-columns: 1.9fr .5fr .5fr .5fr;
  transition: grid-template-columns 1700ms cubic-bezier(.4, 0, .2, 1);
}
.lz-hero[data-scene="1"] .lz-scenes { grid-template-columns: .5fr 1.9fr .5fr .5fr; }
.lz-hero[data-scene="2"] .lz-scenes { grid-template-columns: .5fr .5fr 1.9fr .5fr; }
.lz-hero[data-scene="3"] .lz-scenes { grid-template-columns: .5fr .5fr .5fr 1.9fr; }

.lz-panel {
  position: relative;
  overflow: hidden;
  clip-path: polygon(9% 0%, 100% 0%, 91% 100%, 0% 100%);
  margin-inline-start: -4.5%;
  opacity: .72;
  filter: saturate(.62) brightness(.66);
  transition: opacity 1600ms cubic-bezier(.4, 0, .2, 1),
              filter  1600ms cubic-bezier(.4, 0, .2, 1);
}
.lz-hero[data-scene="0"] .lz-panel:nth-child(1),
.lz-hero[data-scene="1"] .lz-panel:nth-child(2),
.lz-hero[data-scene="2"] .lz-panel:nth-child(3),
.lz-hero[data-scene="3"] .lz-panel:nth-child(4) {
  opacity: 1;
  filter: saturate(1.04) brightness(1);
}

.lz-panel__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Poster state (SPEC §9): held scale keeps the composition cropped inside the
     clip-path. An unscaled image reveals the panel edges. */
  transform: scale(1.08);
  will-change: transform;
}

/* Road-speed streaks — bottom 22% of each panel */
.lz-road {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 22%;
  overflow: hidden;
  opacity: .22;
  pointer-events: none;
}
.lz-hero[data-scene="0"] .lz-panel:nth-child(1) .lz-road,
.lz-hero[data-scene="1"] .lz-panel:nth-child(2) .lz-road,
.lz-hero[data-scene="2"] .lz-panel:nth-child(3) .lz-road { opacity: .5; }

.lz-road__inner {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 200%;
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,.22) 0 42px, transparent 42px 150px);
  filter: blur(3px);
}

/* Atmosphere */
.lz-haze {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 42%);
  opacity: .16;
  pointer-events: none;
}

/* Per-panel durations — the three scenes must never march in step (SPEC §6). */
.lz-panel:nth-child(1) .lz-panel__img { animation: az-travel 19s cubic-bezier(.45,0,.55,1) infinite alternate; }
.lz-panel:nth-child(2) .lz-panel__img { animation: az-travel 23s cubic-bezier(.45,0,.55,1) infinite alternate; }
.lz-panel:nth-child(3) .lz-panel__img { animation: az-travel 21s cubic-bezier(.45,0,.55,1) infinite alternate; }
.lz-panel:nth-child(4) .lz-panel__img { animation: az-travel 25s cubic-bezier(.45,0,.55,1) infinite alternate; }
.lz-panel:nth-child(1) .lz-road__inner { animation: az-road 2.6s linear infinite; }
.lz-panel:nth-child(2) .lz-road__inner { animation: az-road 3.1s linear infinite; }
.lz-panel:nth-child(3) .lz-road__inner { animation: az-road 2.9s linear infinite; }
.lz-haze { animation: az-haze 14s ease-in-out infinite alternate; }

@keyframes az-travel {
  from { transform: scale(1.14) translate3d(2.5%, 0, 0); }
  to   { transform: scale(1.14) translate3d(-2.5%, 0, 0); }
}
@keyframes az-road {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes az-haze {
  from { opacity: .16; transform: translateX(-4%); }
  to   { opacity: .34; transform: translateX(4%); }
}
@keyframes az-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Light sweep — layer 1. The −11° skew matches the panel diagonal, which is
   what makes the change travel along the boundary rather than read as a wipe. */
.lz-sweep {
  position: absolute;
  inset-block: -12%;
  inset-inline-start: clamp(300px, 46%, 600px);
  inline-size: 52%;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-70%) skewX(-11deg);
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(214,228,246,.34) 42%,
    rgba(255,255,255,.5) 52%,
    rgba(214,228,246,.28) 62%,
    transparent 100%);
  filter: blur(14px);
  transition: transform 1500ms cubic-bezier(.32, 0, .24, 1), opacity 1500ms ease;
}
.lz-sweep.is-travelling { opacity: .85; transform: translateX(150%) skewX(-11deg); }
.lz-sweep.is-resetting  { transition: none; opacity: 0; transform: translateX(-70%) skewX(-11deg); }

/* Readability veils — layer 2. These values guarantee contrast over bright
   frames. Do not reduce them. */
.lz-veil { position: absolute; inset: 0; pointer-events: none; }
.lz-veil--h {
  background: linear-gradient(94deg,
    rgba(0,20,44,.96) 0%, rgba(0,20,44,.88) 30%,
    rgba(0,20,44,.50) 58%, rgba(0,20,44,.34) 100%);
}
.lz-veil--v {
  background: linear-gradient(180deg,
    rgba(0,20,44,.45) 0%, rgba(0,20,44,0) 36%, rgba(0,20,44,.55) 100%);
}

/* Content column — layer 3. pointer-events none so the hero surface stays
   available to the layers beneath; only the copy block re-enables it. */
.lz-hero__content {
  position: relative;
  z-index: 3;
  inline-size: 100%;
  max-inline-size: var(--measure);
  margin-inline: auto;
  padding: 80px 24px 118px;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.lz-copy { max-inline-size: 40ch; pointer-events: auto; }

.lz-eyebrow {
  margin: 0 0 18px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--white);
}
.lz-headline {
  margin: 0;
  font-size: clamp(36px, 4.8vw, 62px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.02;
  color: var(--white);
  text-shadow: 0 2px 28px rgba(0,16,36,.45);
}
.lz-support {
  margin: 20px 0 0;
  max-inline-size: 36ch;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--white);
}

.lz-ctas {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-block-start: 38px;
  flex-wrap: wrap;
}
.lz-ctas > * { flex: 0 0 auto; white-space: nowrap; }

/* Radius 2px is deliberate — editorial, not app-like. Do not round further. */
.lz-cta-primary {
  padding: 17px 28px;
  border: 0;
  border-radius: 2px;
  background: var(--white);
  color: var(--navy);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
}
.lz-cta-primary:hover  { background: var(--white-hover); }
.lz-cta-primary:active { background: #C9C8C7; }

.lz-cta-secondary {
  padding: 6px 0;
  background: transparent;
  color: var(--white);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  border-block-end: 1px solid rgba(255,255,255,.45);
}
.lz-cta-secondary:hover { border-block-end-color: var(--white); }

/* Entrance — once per load, hero copy only. */
.lz-copy [data-motion="rise"] { opacity: 0; animation: az-rise both cubic-bezier(.16, 1, .3, 1); }
.lz-eyebrow  { animation-duration: 760ms; animation-delay: 220ms; }
.lz-headline { animation-duration: 900ms; animation-delay: 340ms; }
.lz-support  { animation-duration: 900ms; animation-delay: 460ms; }
.lz-ctas     { animation-duration: 900ms; animation-delay: 580ms; }

/* ---------- Identity plate and ticks — layer 4 (SPEC §5, §6) ---------- */

.lz-identity {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 4;
  max-inline-size: var(--measure);
  margin-inline: auto;
  padding: 0 24px 26px;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 18px;
  pointer-events: none;
}

.lz-plates { position: relative; inline-size: 150px; block-size: 46px; flex: 0 0 auto; }
.lz-plate {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 7px 10px;
  opacity: 0;
  transition: opacity 1400ms cubic-bezier(.4, 0, .2, 1);
}
.lz-plate img { max-inline-size: 100%; max-block-size: 100%; inline-size: auto; block-size: auto; }

/* White plates for the navy-on-transparent marks; a translucent navy plate for
   the white-on-transparent Zayani mark. The asymmetry is intentional. */
.lz-plate--first, .lz-plate--euro, .lz-plate--aloula { background: #fff; }
.lz-plate--zayani { background: rgba(0,16,36,.72); border: 1px solid rgba(255,255,255,.22); }

.lz-hero[data-scene="0"] .lz-plate--first,
.lz-hero[data-scene="1"] .lz-plate--zayani,
.lz-hero[data-scene="2"] .lz-plate--aloula,
.lz-hero[data-scene="3"] .lz-plate--euro { opacity: 1; }

.lz-marque {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--white);
  padding-block-end: 4px;
}

.lz-ticks { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; padding-block-end: 6px; }
.lz-tick {
  flex: 0 1 44px;
  block-size: 2px;
  border-radius: 99px;
  background: rgba(255,255,255,.26);
  overflow: hidden;
}
.lz-tick i { display: block; block-size: 100%; inline-size: 0; background: #fff; transition: width 900ms linear; }
.lz-hero[data-scene="0"] .lz-tick:nth-child(1) i,
.lz-hero[data-scene="1"] .lz-tick:nth-child(2) i,
.lz-hero[data-scene="2"] .lz-tick:nth-child(3) i,
.lz-hero[data-scene="3"] .lz-tick:nth-child(4) i { inline-size: 100%; }

/* ---------- Below the hero (SPEC §7) ---------- */

.lz-section { max-inline-size: var(--measure); margin-inline: auto; }

.lz-how { padding: 66px 24px 0; }
.lz-eyebrow--dark {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--muted-ink);
}
.lz-steps {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 26px 28px;
}
.lz-step {
  position: relative;
  border-block-start: 1px solid var(--hairline);
  padding-block-start: 24px;
}
.lz-step::before {
  content: "";
  position: absolute;
  top: -4.5px;
  inset-inline-start: 0;
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--navy);
}
.lz-step__num {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--tick-grey);
}
.lz-step__title {
  margin: 6px 0 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.2;
  color: var(--navy);
}

.lz-fee { padding: 54px 24px 76px; }
.lz-fee__row {
  border-block-start: 1px solid var(--hairline);
  padding-block-start: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px 40px;
}
.lz-fee__amountline { display: flex; align-items: baseline; gap: 12px; flex: 0 0 auto; white-space: nowrap; }
.lz-fee__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--muted-ink);
}
.lz-fee__amount {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--navy);
}
.lz-fee__after { font-size: 13px; color: var(--muted-ink); }
.lz-fee__note { margin: 0; max-inline-size: 56ch; font-size: 14px; line-height: 1.6; }

/* ---------- Footer ---------- */

.lz-footer { border-block-start: 1px solid var(--hairline); background: var(--page-grey); }
.lz-footer__inner {
  max-inline-size: var(--measure);
  margin-inline: auto;
  padding: 40px 24px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: flex-start;
}
.lz-footer__mark { block-size: 30px; inline-size: auto; display: block; }
.lz-footer__unit { margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--navy); }
.lz-footer__meta { margin: 4px 0 0; font-size: 13px; color: var(--muted-ink); }
.lz-footer__links { margin-inline-start: auto; display: flex; gap: 22px; font-size: 13px; }
.lz-footer__links a, .lz-footer__links span { color: var(--muted-ink); text-decoration: none; }
.lz-footer__links a:hover { color: var(--navy); }
.lz-footer__legal {
  max-inline-size: var(--measure);
  margin-inline: auto;
  padding: 16px 24px 28px;
  font-size: 12px;
  color: var(--muted-ink);
}

/* ---------- Responsive (SPEC §8) ---------- */

@media (max-width: 1023px) {
  .lz-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .lz-hero__content { padding: 64px 20px 104px; }
  .lz-identity      { padding: 0 20px 22px; }
  .lz-steps         { grid-template-columns: 1fr; }
  .lz-fee__row      { flex-direction: column; }
  .lz-footer__links { margin-inline-start: 0; }
}

/* ---------- prefers-reduced-motion (SPEC §10) — a hard requirement ---------- */

@media (prefers-reduced-motion: reduce) {
  .lz [data-motion] { animation: none !important; opacity: 1 !important; transform: none !important; }
  .lz [data-motion="scene"] { opacity: unset !important; }
  .lz img[data-motion="scene"] { transform: scale(1.08) !important; }
  .lz-sweep { display: none !important; }
  .lz-scenes, .lz-panel, .lz-plate, .lz-tick i { transition: none !important; }
}

/* Hide vehicle marque wording; keep company logos and scene rotation */
.lz-marque { display: none !important; }

/* Compact How It Works */
.lz-how { padding-top: 36px; }
.lz-steps { margin-top: 20px; gap: 18px 24px; }
.lz-step { padding-block-start: 16px; }
.lz-step__num { font-size: 10px; }
.lz-step__title { margin-top: 4px; font-size: 15px; line-height: 1.3; }

/* Refine How It Works into a compact centered strip */
.lz-how { max-width: 1220px; padding: 24px 32px 20px; }
.lz-steps { margin-top: 16px; gap: 24px; }
.lz-step { padding-block-start: 12px; }
.lz-step__title { font-size: 14px; }

/* Landing CTA + company logo cleanup */
.lz-hero .lz-btn-primary { background: transparent !important; color: #fff !important; border: 0 !important; border-radius: 0 !important; padding: 10px 0 !important; box-shadow: none !important; border-bottom: 1px solid rgba(255,255,255,.55) !important; }
.lz-hero .lz-btn-primary:hover { background: transparent !important; border-bottom-color: #fff !important; }
.lz-plate--first, .lz-plate--zayani, .lz-plate--euro { background: transparent !important; border: 0 !important; padding: 0 !important; }
.lz-plate--first { position: absolute; }
.lz-plate--first {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.lz-first-icon {
  width: 46px;
  height: 46px;
  overflow: hidden;
  flex: 0 0 46px;
  display: block;
}
.lz-first-icon img {
  width: 129px;
  height: 46px;
  max-width: none;
  max-height: none;
  object-fit: fill;
  display: block;
}
.lz-first-name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  line-height: 1.05;
  white-space: nowrap;
  text-align: left;
}
.lz-first-name > span {
  font-size: 8px;
  font-weight: 600;
}
.lz-first-name strong {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 700;
}
.lz-header .lz-hbtn-solid {
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  font-weight: 500 !important;
  border-bottom: 1px solid rgba(255,255,255,.55) !important;
}
.lz-header .lz-hbtn-solid:hover {
  background: transparent !important;
  border-bottom-color: #fff !important;
}
.lz-header .lz-hbtn-ghost {
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  font-weight: 500 !important;
  border-bottom: 1px solid rgba(255,255,255,.55) !important;
}
.lz-header .lz-hbtn-ghost:hover {
  border-bottom-color: #fff !important;
}
/* Wide desktop layout — mobile/tablet unchanged */
@media (min-width: 1024px) {
  .lz {
    --measure: min(94vw, 1680px);
  }

  .lz-how {
    max-width: min(94vw, 1680px);
  }
}
/* Full-width desktop */
@media (min-width: 1024px) {
  .lz {
    --measure: 100%;
  }

  .lz-header__inner,
  .lz-hero__content,
  .lz-identity,
  .lz-section,
  .lz-footer__inner,
  .lz-footer__legal {
    max-inline-size: none !important;
    inline-size: 100%;
  }

  .lz-how {
    max-width: none !important;
    width: 100%;
  }
}
/* ==========================================================================
   BEGIN — Brand signature (19 Sep 2026, final)
   Append-only. Nothing above this line is modified.
   To revert: delete everything between BEGIN and END, and remove the
   .lz-sig markup from home.blade.php.

   The automotive brands of the active company, sitting at the RIGHT END of
   the identity row - under the vehicle photograph rather than beside the
   company plate, so they read as belonging to the panel above them.

   .lz-identity already spans the hero's full width at its bottom edge, and
   its right half is exactly the area under the car; the marks are held there
   with margin and order, and the window below clips them to it. They travel
   right to left and can never reach the headline, the CTAs or the company
   plate, because the window ends before that area begins.

   No road, no band, no boxes, and nothing that can add height: the row is
   absolutely positioned and the window has a fixed height.
   ========================================================================== */

.lz-sig {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* Generous horizontally, tight vertically: at eight marks Euro Motors wraps
     to a second row rather than shrinking, which is the arrangement approved
     for it. Four-brand companies never reach the limit. */
  /* THE WINDOW. Fixed width and height, overflow hidden: the travel is
     contained here and nowhere else, which is what keeps it out of the
     headline and off the company plate. A fixed height also means the
     absolutely positioned track cannot change the row's size. */
  inline-size: 46%;
  block-size: 30px;
  overflow: hidden;
  display: block;
  /* Last in the row, hard right. The company plate keeps its place at the
     far left and the ticks keep theirs between them. */
  order: 3;
  margin-inline-start: auto;
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;

  /* Softens both ends of the window so marks arrive and leave rather than
     being sliced by a hard edge. A mask, not a painted gradient: a painted
     fade would need a colour, and a colour here would be a band. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}

/* ---------- The track ---------- */

.lz-sig__track {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-inline-start: 34px;
  inline-size: max-content;
  block-size: 100%;
  /* Right to left, slowly. 52s across four copies reads as drift rather than
     as a ticker. */
  animation: az-sig 52s linear infinite;
  will-change: transform;
}

/* The set appears four times in the markup as two identical halves, so -50%
   lands on a frame identical to the start: no jump, no seam. */
@keyframes az-sig {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* A company with no displayable assets renders nothing, divider included.
   A hairline with empty space after it reads as a failed load. */
.lz-sig[hidden] { display: none !important; }

/* NO DIVIDER. The hairline existed to tie the marks to the company plate
   they sat beside. They no longer sit beside it, and a rule floating under
   the car would be a line drawn around nothing. */

/* Active company only, on the same data-scene switch the plates use. */
.lz-hero[data-scene="0"] .lz-sig--first,
.lz-hero[data-scene="1"] .lz-sig--zayani,
.lz-hero[data-scene="2"] .lz-sig--euro { opacity: 1; }

/* WIDTH AND HEIGHT COME FROM THE MARKUP, optically normalised by area so a
   square roundel and a long wordmark carry the same visual weight. Nothing
   here sizes them, so nothing here can stretch or crop one.

   screen lets light artwork sit on the photograph the way the plates do.
   The files are served exactly as supplied: no filter, no mask, no recolour. */
.lz-sig img {
  display: block;
  flex: 0 0 auto;
  mix-blend-mode: screen;

  /* SIZE COMES FROM THE MARKUP, at the full optically normalised dimensions.
     The previous scale() was a visual enlargement only - its layout box
     stayed at 15px, which an overflow:hidden window would have clipped. The
     attributes carry the real size now, so the window contains what it
     shows and no aspect ratio is touched. */

  /* Still secondary to the vehicle and to the company plate. */
  opacity: .72;
}

/* ---------- Mobile ----------
   .lz-identity already wraps; the signature drops onto its own line under the
   plate. The divider turns horizontal there, because a vertical rule against
   a wrapped row points at nothing. */
/* ---------- Mobile ----------
   The scene region is narrow and there is no right half to speak of, so the
   marks take their own line under the plate and stay right-aligned. */
@media (max-width: 767px) {
  .lz-sig {
    inline-size: 100%;
    flex-basis: 100%;
    margin-inline-start: 0;
    margin-block-start: 12px;
    block-size: 26px;
  }
  .lz-sig__track { gap: 26px; padding-inline-start: 26px; animation-duration: 40s; }
  .lz-sig img { opacity: .66; }
}

/* ---------- prefers-reduced-motion ----------
   The marks stay; only the travel stops. */
@media (prefers-reduced-motion: reduce) {
  .lz-sig__track { animation: none !important; transform: none !important; }
  .lz-sig { transition: none !important; }
}

/* ==========================================================================
   END — Brand signature
   ========================================================================== */
/* ==========================================================================
   BEGIN — Brand ticker (20 Sep 2026, readable)
   Append-only. Replaces the previous ticker block entirely.

   THREE CHANGES, AND THE FIRST IS THE CAUSE OF THE REST.

   1. mix-blend-mode: screen is gone. Screen makes dark pixels transparent by
      definition, so every dark mark was being half-dissolved into the
      photograph - that is the muddiness, and no amount of opacity fixes it.
      The marks now render as supplied: no blend, no filter, no recolour.

   2. ONE surface for the whole strip, not a card per logo. A single quiet
      light rail gives every mark the same backdrop, which is what makes
      sixteen assets of wildly different ink read consistently. It is 30px
      tall inside a panel that is hundreds of pixels tall - a rail, not a box,
      and it carries no gradient, blur or border beyond a single hairline.

   3. Perceived size normalised per mark. The width/height attributes already
      normalise by AREA, which handles a square emblem against a long
      wordmark; what area cannot see is that a 12px-tall wordmark reads
      lighter than a 26px emblem of the same area. The small per-brand scales
      at the bottom correct that by eye. Every one preserves aspect ratio -
      transform: scale() is uniform - and none touches the artwork.

   Everything else is untouched: right-to-left travel, per-panel speeds, the
   seamless -50% loop, the edge mask, active-panel-only, reduced motion,
   company mapping, panel layout, scene order.
   ========================================================================== */

.lz-ptick {
  position: absolute;
  inset-inline: 11%;
  inset-block-end: 6%;
  block-size: 30px;
  overflow: hidden;
  z-index: 2;
  opacity: 0;
  transition: opacity 700ms cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;

  /* THE RAIL. Near-white rather than pure, so it sits on the photograph
     instead of punching a hole in it, with one hairline and nothing else. */
  background: rgba(250, 251, 252, .93);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 6px;

  /* The panels are clipped at -11 degrees; the mask takes each mark out
     before it reaches the diagonal, and doubles as the entry and exit a
     ticker needs. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* Active company only, on the same data-scene switch the panels already use. */
.lz-hero[data-scene="0"] .lz-panel:nth-child(1) .lz-ptick,
.lz-hero[data-scene="1"] .lz-panel:nth-child(2) .lz-ptick,
.lz-hero[data-scene="2"] .lz-panel:nth-child(3) .lz-ptick,
.lz-hero[data-scene="3"] .lz-panel:nth-child(4) .lz-ptick { opacity: 1; }

/* ---------- The track ---------- */

.lz-ptick__track {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: flex;
  align-items: center;
  /* Wider than before: air is what stops a repeated sequence reading as a
     repeat, and it costs nothing here. */
  gap: 46px;
  padding-inline-start: 46px;
  inline-size: max-content;
  will-change: transform;
}

.lz-panel:nth-child(1) .lz-ptick__track { animation: az-ptick 46s linear infinite; }
.lz-panel:nth-child(2) .lz-ptick__track { animation: az-ptick 50s linear infinite; }
.lz-panel:nth-child(3) .lz-ptick__track { animation: az-ptick 54s linear infinite; }
.lz-panel:nth-child(4) .lz-ptick__track { animation: az-ptick 62s linear infinite; }

@keyframes az-ptick {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------- The marks ----------
   Rendered exactly as supplied. The max-height is a ceiling only - with
   inline-size auto the aspect ratio is the asset's own, so nothing can be
   stretched or cropped by this rule. */
.lz-ptick img {
  display: block;
  flex: 0 0 auto;
  inline-size: auto;
  max-block-size: 20px;
  opacity: .95;
}

/* ---------- Perceived size, per mark ----------
   Area normalisation cannot see that a long thin wordmark reads lighter than
   a compact emblem of the same area. These are small, uniform scales - aspect
   ratios are untouched - matched to each asset by its own filename, so the
   markup needs no change. */
.lz-ptick img[src$="riddara.png"]      { transform: scale(.90); }
.lz-ptick img[src$="genesis.png"]      { transform: scale(.94); }
.lz-ptick img[src$="bmw-motorrad.png"] { transform: scale(.94); }
.lz-ptick img[src$="maserati.png"]     { transform: scale(.96); }
.lz-ptick img[src$="jaguar.png"]       { transform: scale(.96); }

.lz-ptick img[src$="rolls-royce.png"]  { transform: scale(1.08); }
.lz-ptick img[src$="ferrari.png"]      { transform: scale(1.08); }
.lz-ptick img[src$="mitsubishi.png"]   { transform: scale(1.04); }
.lz-ptick img[src$="bmw.png"]          { transform: scale(1.04); }
.lz-ptick img[src$="mg.png"]           { transform: scale(1.02); }

/* Land Rover carries a strapline under the oval, so the mark it reads as is
   smaller than its box. */
.lz-ptick img[src$="land-rover.png"]   { transform: scale(1.06); }

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  .lz-ptick { inset-inline: 8%; block-size: 25px; inset-block-end: 5%; border-radius: 5px; }
  .lz-ptick__track { gap: 32px; padding-inline-start: 32px; }
  .lz-ptick img { max-block-size: 16px; }
  .lz-panel:nth-child(1) .lz-ptick__track { animation-duration: 34s; }
  .lz-panel:nth-child(2) .lz-ptick__track { animation-duration: 38s; }
  .lz-panel:nth-child(3) .lz-ptick__track { animation-duration: 42s; }
  .lz-panel:nth-child(4) .lz-ptick__track { animation-duration: 46s; }
}

/* ---------- prefers-reduced-motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .lz-ptick__track { animation-play-state: paused; }
  .lz-ptick { transition: none !important; }
}

/* ==========================================================================
   END — Brand ticker
   ========================================================================== */

/* Aloula Motors — compensate for transparent padding in official OM.png */
.lz-plate--aloula {
    overflow: hidden;
}

.lz-plate--aloula img {
    max-inline-size: none;
    max-block-size: none;
    inline-size: 250%;
    block-size: 250%;
    object-fit: contain;
}

/* Aloula Motors — transparent premium treatment */
.lz-plate--aloula {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.lz-plate--aloula img {
    max-inline-size: none !important;
    max-block-size: none !important;
    inline-size: 330% !important;
    block-size: 330% !important;
    object-fit: contain !important;
    opacity: 1 !important;
}

/* Brand ticker — slightly larger final sizing */
@media (min-width: 768px) {
    .lz-ptick {
        block-size: 36px;
    }

    .lz-ptick img {
        max-block-size: 24px;
    }
}

/* Genesis — improve readability only */
.lz-ptick img[src$="genesis.png"] {
    transform: scale(1.08) !important;
    filter: brightness(1.65) contrast(1.15) !important;
    opacity: 1 !important;
}

/* Genesis — improve readability only */
.lz-ptick img[src$="genesis.png"] {
    transform: scale(1.08) !important;
    filter: brightness(1.65) contrast(1.15) !important;
    opacity: 1 !important;
}

/* Genesis — make full official mark readable */
.lz-ptick img[src$="genesis.png"] {
    max-block-size: 30px !important;
    transform: scale(1.30) !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Brand ticker — transparent final treatment */
.lz-ptick {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

@media (min-width: 768px) {
    .lz-ptick {
        block-size: 42px !important;
    }

    .lz-ptick img {
        max-block-size: 28px !important;
        opacity: 1 !important;
    }

    .lz-ptick img[src$="genesis-black.png"] {
        max-block-size: 32px !important;
        transform: scale(1.12) !important;
        filter: none !important;
    }
}

/* Restore premium brand ticker rail */
.lz-ptick {
    background: rgba(250, 251, 252, .93) !important;
    border: 1px solid rgba(255,255,255,.5) !important;
    border-radius: 6px !important;
}

/* Genesis transparent — match Hyundai visual size */
.lz-ptick img[src$="genesis-transparent.png"] {
    max-block-size: 34px !important;
    transform: scale(1.45) !important;
    opacity: 1 !important;
    filter: none !important;
}