/* Full-bleed hero: footage reaches both viewport edges; content stays on the site grid. */
.hero {
  width: 100%;
  min-height: 605px;
  /* Replace the original two-column grid; this hero is an overlay composition. */
  display: block;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0;
  padding: 0;
}

.hero-inner {
  min-height: 605px;
  /* Absolute staging prevents RTL grid placement from collapsing the composition. */
  display: block;
  width: 100%;
  max-width: none;
  position: relative;
  padding: 0;
}

.hero-copy {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(560px, calc(100vw - 3rem));
  max-width: none;
  padding: 1.4rem 1.6rem;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
}

.hero-copy .hero-lede {
  margin-inline: auto;
}

.hero-copy .promise-list {
  justify-content: center;
}

/* A conversion hero must fit its headline, offer, and CTA in one desktop screen. */
.hero h1 {
  max-width: 540px;
  margin-inline: auto;
  margin-bottom: .8rem;
  font-size: clamp(2.25rem, 3.7vw, 3.55rem);
  line-height: 1.13;
}

.hero-copy .hero-lede {
  font-size: .92rem;
  line-height: 1.85;
  margin-bottom: 1rem;
}

.hero-copy .promise-list { margin-bottom: 1.15rem; }
.hero-copy .microcopy { margin-top: .55rem; }

.hero-art {
  position: absolute;
  /* Physical left positioning intentionally ignores RTL logical-edge reversal. */
  left: max(1.5rem, calc(50% - 535px));
  top: 50%;
  width: min(360px, 31vw);
  min-height: 0;
  height: 390px;
  transform: translateY(-50%);
  pointer-events: none;
}

.hero-art::before { display: none; }

.hero-art .hero-product { width: min(350px, 100%); }
.hero-art .floating-note { display: none; }

/* The entrance animation has higher selector specificity; retain our staging once visible. */
.hero-copy.reveal.is-visible { transform: translate(-50%, -50%); }
.hero-art.reveal.is-visible { transform: translateY(-50%); }

/* Wider, softer overlay keeps Arabic copy legible over every video frame. */
.hero-video-shade {
  background: linear-gradient(90deg, rgba(248,244,236,.97) 0%, rgba(248,244,236,.9) 36%, rgba(248,244,236,.57) 56%, rgba(9,39,28,.2) 100%);
}

@media (max-width: 760px) {
  .hero, .hero-inner { min-height: 700px; }
  .hero-inner { display: grid; grid-template-columns: 1fr; padding-top: 1.5rem; padding-bottom: 2rem; gap: 1rem; }
  .hero-copy { position: relative; top: auto; left: auto; width: auto; max-width: none; padding: 1rem; transform: none; }
  .hero-art { position: relative; left: auto; top: auto; width: 100%; height: auto; min-height: 300px; transform: none; }
  .hero-art::before { display: block; }
  .hero-art .hero-product { width: min(350px, 82vw); }
  .hero-art .floating-note { display: flex; }
  .hero-copy.reveal.is-visible,
  .hero-art.reveal.is-visible { transform: none; }
  .hero-video-shade { background: linear-gradient(180deg, rgba(248,244,236,.94), rgba(248,244,236,.82) 50%, rgba(9,39,28,.38)); }
}