/* ==========================================================================
   hero.css — conversion-first home hero (v2)
   ==========================================================================

   Loaded AFTER css/styles.min.css so it wins on specificity ties without
   touching the minified bundle. Nothing here is minified, and nothing here
   should ever be run through a hand-rolled minifier — the clamp() calls below
   are exactly the construct that broke a sibling project when its operators
   got welded together.

   Everything is scoped to .hero-v2 so the other thirteen sections are
   untouched. Logical properties (inline-start/end) throughout, so the single
   file serves the RTL Arabic page and the LTR English mirror unchanged.
   ========================================================================== */

.hero-v2 {
  /* Near-black, tinted toward the brand teal rather than neutral grey.
     Dark ground is not a style choice here: the product is gloss, and
     specular highlight only reads against dark. */
  --h-ground: #0b1512;
  --h-ground-2: #101f1b;
  --h-brand: #00c0a9;
  --h-brand-light: #4fe3cd;
  --h-brand-dim: #00a693;
  --h-action: #f5a30b;
  --h-action-hi: #ffb92e;
  --h-text: #f2f7f5;
  --h-muted: #93a8a2;
  --h-hairline: rgba(0, 192, 169, 0.22);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--h-ground);
  color: var(--h-text);
  padding: 0;
}

/* Depth: a teal glow low on the inline-start side, and a vignette so the
   photograph can dissolve into the ground instead of sitting in a box. */
.hero-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 15% 100%, rgba(0, 166, 147, 0.20), transparent 60%),
    radial-gradient(80% 70% at 85% 0%, rgba(0, 192, 169, 0.10), transparent 65%),
    linear-gradient(180deg, var(--h-ground-2) 0%, var(--h-ground) 55%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Photograph
   Bled into the ground from the inline-end edge. The mask does the work that
   a rounded card would otherwise do badly — no hard edge, no floating box.
   -------------------------------------------------------------------------- */
.hero-v2__media {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(58%, 900px);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* The mask lives on the wrapper, not the image, so the image underneath is
   free to be scaled without dragging the fade along with it.
   Physical axis, so it is spelled out per direction: RTL puts the media on the
   left of the viewport, so it stays opaque at the left edge and dissolves
   toward the copy on the right. LTR is the mirror. */
html[dir="rtl"] .hero-v2__media {
  -webkit-mask-image: linear-gradient(to right, #000 38%, transparent 96%);
          mask-image: linear-gradient(to right, #000 38%, transparent 96%);
}

html[dir="ltr"] .hero-v2__media {
  -webkit-mask-image: linear-gradient(to left, #000 38%, transparent 96%);
          mask-image: linear-gradient(to left, #000 38%, transparent 96%);
}

.hero-v2__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The source is a wide cabin shot (1800x982) and this panel is taller than
     it is wide, so cover crops on the HORIZONTAL — the opposite axis to the
     portrait sources this hero used before. Anchoring at 32% keeps the
     steering wheel, instrument binnacle and centre stack in the panel and
     pushes the empty passenger side out toward the mask, which is fading to
     transparent there anyway. */
  object-position: 32% 50%;
  /* Graded harder than a dark source needs: this frame is mostly white leather
     and blown-out window, and left ungraded it fights the copy instead of
     sitting behind it. */
  filter: saturate(0.88) contrast(1.05) brightness(0.62);
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.hero-v2 .nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.15rem;
}

/* Wordmark rather than the logo file. images/logo-original.webp is black art
   on an opaque white field, so it renders as a white card punched into the
   dark ground; it also reads "Pose fore" while the site brands itself
   Wash & Polish / واش اند بوليش. Text sidesteps both problems. */
.hero-v2__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--h-text);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.hero-v2__brand svg {
  inline-size: 1.65rem;
  block-size: 1.65rem;
  color: var(--h-brand);
  flex-shrink: 0;
}

.hero-v2__brand:hover { color: var(--h-brand); }

.hero-v2 .nav__link {
  color: var(--h-muted);
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.hero-v2 .nav__link:hover,
.hero-v2 .nav__link.active-link {
  color: var(--h-text);
}

.hero-v2 .nav__link.lang-toggle {
  color: var(--h-brand);
}

/* --------------------------------------------------------------------------
   Content column
   -------------------------------------------------------------------------- */
.hero-v2__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.6rem;
  max-width: 46rem;
  padding-block: clamp(2.5rem, 6vh, 5rem);
}

/* Eyebrow — a hairline rule plus one short line of positioning copy. */
.hero-v2__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--h-brand);
  margin: 0;
}

/* The rule sits on the leading side of the text and fades away from it, so it
   reads as a lead-in rather than a floating dash. Physical axis again. */
.hero-v2__eyebrow::before {
  content: "";
  inline-size: 2.25rem;
  block-size: 2px;
  border-radius: 2px;
}

html[dir="rtl"] .hero-v2__eyebrow::before {
  background: linear-gradient(to right, var(--h-brand), transparent);
}

html[dir="ltr"] .hero-v2__eyebrow::before {
  background: linear-gradient(to left, var(--h-brand), transparent);
}

/* Headline.
   NOTE: no negative letter-spacing. The source video tightens its Latin
   display face to -10, but Arabic is a connected script — negative tracking
   collides the joins and degrades legibility. Scale and weight carry it. */
.hero-v2__title {
  margin: 0;
  font-size: clamp(2.15rem, 5.6vw, 4.25rem);
  font-weight: 900;
  line-height: 1.18;
  color: var(--h-text);
  text-wrap: balance;
}

html[lang="en"] .hero-v2__title {
  line-height: 1.06;
  letter-spacing: -0.02em;
}

/* The one word that carries the promise, lit in brand teal with a slow
   specular sweep across it. The product is shine; the headline shines. */
.hero-v2__gloss {
  position: relative;
  color: var(--h-brand);
  background-image: linear-gradient(
    100deg,
    var(--h-brand) 0%,
    var(--h-brand) 40%,
    #ffffff 50%,
    var(--h-brand) 60%,
    var(--h-brand) 100%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hero-gloss-sweep 7s ease-in-out 1.2s infinite;
}

@keyframes hero-gloss-sweep {
  0%, 55%  { background-position: 100% 0; }
  85%,100% { background-position: 0% 0; }
}

.hero-v2__sub {
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.85;
  color: var(--h-muted);
  max-width: 34rem;
}

.hero-v2__price {
  color: var(--h-text);
  font-weight: 700;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Actions — one primary, one quiet secondary.
   Amber is reserved for the single primary action and appears nowhere else on
   the page, so the eye has exactly one place to go.
   -------------------------------------------------------------------------- */
.hero-v2__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
}

.hero-v2__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.05rem 2rem;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.hero-v2__cta--primary {
  background: var(--h-action);
  color: #1b1200;
  box-shadow: 0 10px 30px -8px rgba(245, 163, 11, 0.55);
}

.hero-v2__cta--primary:hover {
  background: var(--h-action-hi);
  transform: translateY(-2px);
  box-shadow: 0 16px 38px -8px rgba(245, 163, 11, 0.65);
}

/* Teal rather than a colourless outline. As a bare ghost button this read as
   disabled next to the amber, which is the wrong signal for the second of only
   two ways to get in touch — plenty of people would rather call than message.
   Teal is the brand and it is nowhere else above the fold, so the two actions
   are now clearly both live and still clearly ranked: amber is filled, teal is
   outlined. */
.hero-v2__cta--ghost {
  background: rgba(0, 192, 169, 0.1);
  border-color: rgba(0, 192, 169, 0.55);
  color: var(--h-brand-light);
}

.hero-v2__cta--ghost:hover {
  border-color: var(--h-brand);
  color: var(--h-brand);
  transform: translateY(-2px);
}

.hero-v2__cta svg {
  inline-size: 1.15em;
  block-size: 1.15em;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Trust row — sits directly under the button on purpose.
   That half-second before committing is where doubt spikes; this is the spot
   where answering it moves conversion more than anything else on the page.
   No invented counts: every claim here is one the site can already stand behind.
   -------------------------------------------------------------------------- */
.hero-v2__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin: 0;
  padding: 1.1rem 0 0;
  list-style: none;
  border-top: 1px solid var(--h-hairline);
}

.hero-v2__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--h-muted);
}

.hero-v2__trust svg {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  color: var(--h-brand);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 968px) {
  /* Full bleed. On a phone the photograph IS the ground — it covers the whole
     section rather than occupying a band pinned to the bottom half, which is
     what made the old mobile hero read as two stacked panels with a seam
     across the middle. 99% of this site's traffic sees only this branch. */
  .hero-v2__media {
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
  }

  /* No mask here. A mask would eat the image exactly where the headline sits;
     a top-down scrim below does the legibility work instead, and it can be
     tuned independently of the image. Both directions share this — there is no
     horizontal split to mirror. */
  html[dir="rtl"] .hero-v2__media,
  html[dir="ltr"] .hero-v2__media {
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* The scrim. Near-opaque at the top where the nav, eyebrow and headline sit,
     easing off down the frame so the specular highlights survive at the bottom
     — those highlights are the entire reason this photograph is here. */
  .hero-v2__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(6, 15, 13, 0.97) 0%,
      rgba(6, 15, 13, 0.93) 22%,
      rgba(7, 17, 14, 0.87) 48%,
      rgba(9, 20, 17, 0.78) 74%,
      rgba(11, 21, 18, 0.70) 100%
    );
  }

  .hero-v2__media img {
    /* A 1.83:1 source in a ~0.5:1 viewport is the worst case for cover: only
       about a quarter of the frame's width survives. 30% picks the quarter
       worth keeping — steering wheel, binnacle and centre stack — rather than
       an anonymous slab of seat.
       If this crop ever feels too tight, the fix is a second portrait-framed
       render of the same scene, not a different object-position. */
    object-position: 30% 45%;
    transform: none;
    /* The scrim carries a higher floor here than it did over a dark source,
       so the image is graded less hard and the two together land in the same
       place. */
    filter: saturate(0.88) contrast(1.04) brightness(0.72);
  }

  .hero-v2__inner {
    max-width: none;
    /* Neither extreme worked. Centring left 128px dead at the foot; anchoring
       to the foot just moved that void to the top. The copy is centred again
       but breathes into the column — a larger gap between the five blocks
       spends the slack evenly instead of pooling it at one end. */
    justify-content: center;
    gap: clamp(1.5rem, 4.2vh, 2.6rem);
    padding-block: 1.5rem clamp(1.75rem, 5vh, 2.75rem);
  }

  .hero-v2__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-v2__cta {
    inline-size: 100%;
  }
}

@media (max-width: 480px) {
  .hero-v2__title { font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
  .hero-v2__trust { gap: 0.55rem 1.1rem; }
  .hero-v2__trust li { font-size: 0.82rem; }
}

/* Respect the user's motion preference — the sweep is decoration, not content. */
@media (prefers-reduced-motion: reduce) {
  .hero-v2__gloss {
    animation: none;
    -webkit-text-fill-color: var(--h-brand);
  }
  .hero-v2__cta { transition: none; }
}

/* ==========================================================================
   Mobile hero — centred, and sized to fit the shortest phones
   ==========================================================================

   Measured before this change: at 477x950 the copy sat with a 90px gap above
   and 109px below — near-balanced, but both gaps large enough to read as
   slack. At 477x668 the hero was 685px tall inside a 668px viewport, so it
   OVERFLOWED: the trust list was cut off on any short phone.

   Two fixes. Everything is centred on the inline axis as well as the block
   axis, so the column reads as one composed unit rather than a left-aligned
   stack floating in the middle. And a short-viewport branch tightens the
   scale so the whole hero fits without spilling.
   ========================================================================== */

/* Centring the copy was tried and reverted: on a phone the left-aligned column
   reads better against the photograph than a centred block does. Only the
   full-width actions are kept from that attempt. */
@media (max-width: 968px) {
  .hero-v2__actions {
    inline-size: 100%;
    align-items: stretch;
  }
}

/* Short phones — anything under about 740px of viewport height, which covers
   the iPhone SE and every landscape-ish case. Nothing here is decorative; it
   is the difference between the trust list being visible and being cut off. */
@media (max-width: 968px) and (max-height: 740px) {
  .hero-v2__inner {
    gap: 0.9rem;
    padding-block: 0.75rem 1.25rem;
  }

  .hero-v2__title { font-size: clamp(1.7rem, 7vw, 2.1rem); }
  .hero-v2__sub { font-size: 0.9rem; line-height: 1.6; }
  .hero-v2__cta { padding-block: 0.8rem; font-size: 0.95rem; }
  .hero-v2__trust { gap: 0.4rem 1rem; font-size: 0.8rem; padding-block-start: 0.8rem; }
}

/* ==========================================================================
   Entrance
   ==========================================================================

   No loader, and no JavaScript. A loading screen hides content the visitor
   could already be reading and puts the whole first impression behind a
   script that might not run; this is pure CSS, so the markup is complete and
   indexable from the first byte and the animation is decoration on top of it.

   Two rules keep it from costing anything measurable:

   1. The photograph never animates its opacity. It is the largest element
      above the fold and therefore the likely LCP candidate, and LCP is only
      recorded once the element actually paints — fading it in would delay the
      score by exactly the length of the fade. It scales instead, from 1.06 to
      1, which is a compositor-only transform and paints immediately at full
      opacity.

   2. Every animation uses `both` fill and finishes inside 900ms. If the
      stylesheet somehow fails, nothing is left invisible — the elements just
      render, unanimated.
   ========================================================================== */

@keyframes heroRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroSettle {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

@keyframes heroWipe {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.hero-v2__media img {
  animation: heroSettle 1.4s cubic-bezier(0.16, 0.8, 0.24, 1) both;
}

/* Staggered, in reading order, so the eye is walked down to the buttons
   rather than shown everything at once. */
.hero-v2__eyebrow { animation: heroRise 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) 0.05s both; }
.hero-v2__title   { animation: heroRise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.14s both; }
.hero-v2__sub     { animation: heroRise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.24s both; }
.hero-v2__actions { animation: heroRise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.34s both; }
.hero-v2__trust   { animation: heroRise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.44s both; }

/* The eyebrow's leading rule draws itself along the reading direction. */
.hero-v2__eyebrow::before {
  animation: heroWipe 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.35s both;
}

html[dir="rtl"] .hero-v2__eyebrow::before { transform-origin: right center; }
html[dir="ltr"] .hero-v2__eyebrow::before { transform-origin: left center; }

/* The nav is chrome, not content — it arrives without ceremony. */
.hero-v2 .nav { animation: heroRise 0.5s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .hero-v2__media img,
  .hero-v2__eyebrow,
  .hero-v2__eyebrow::before,
  .hero-v2__title,
  .hero-v2__sub,
  .hero-v2__actions,
  .hero-v2__trust,
  .hero-v2 .nav {
    animation: none;
  }
}