/* ==========================================================================
   hero.css — "Hanan at work" hero as NATURALLY SCROLLING scenes.
   No pin/sticky: the page always moves as you scroll (never feels stuck).
   Wow comes from a gentle layered parallax: the image drifts slower than the
   text as each scene passes through the viewport (differential motion = depth).
   RTL: in each scene the text (first DOM child) sits on the RIGHT, image LEFT.
   ========================================================================== */

.hero2{position:relative}

.hero-scene{
  position:relative;display:grid;align-items:center;
  grid-template-columns:1.05fr .95fr;      /* text | media  (RTL => text right) */
  gap:clamp(24px,4vw,56px);
  min-height:82vh;padding:clamp(44px,7vh,90px) 0;
  overflow:hidden
}

/* text column */
.scene-text{padding:0 clamp(26px,5vw,72px);max-width:58ch}
.hero2 h1{font-size:clamp(2.6rem,6.6vw,5rem);line-height:1.06;text-wrap:balance}
.hero2 h2{font-size:clamp(2.2rem,5.4vw,4rem);line-height:1.08;text-wrap:balance}
.hero2 .sub{color:var(--muted,#5f646b);font-size:clamp(1rem,1.4vw,1.15rem);margin-top:18px;line-height:1.7}
.hero2 .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* media column: a fixed frame that clips a taller image; JS drifts the image */
.scene-media{position:relative;overflow:hidden;height:min(72vh,620px)}
.scene-media .ph{
  position:absolute;inset:-12% 0;                 /* taller than the frame */
  background-size:cover;background-position:50% 38%;
  transform:translate3d(0,0,0) scale(1.05);
  will-change:transform;backface-visibility:hidden
}

/* ==========================================================================
   Mobile: image on top, text below. Still scrolls naturally with parallax.
   ========================================================================== */
@media (max-width:860px){
  .hero-scene{grid-template-columns:1fr;min-height:auto;gap:0;padding:0 0 clamp(18px,6vw,34px)}
  .scene-media{order:-1;height:56vh}
  .scene-text{padding:clamp(22px,6vw,34px) var(--gutter,26px);max-width:100%}
  .hero2 h1{font-size:clamp(1.95rem,7.6vw,2.7rem)}
  .hero2 h2{font-size:clamp(1.75rem,6.6vw,2.35rem)}
}

/* reduced motion: hold every image still, page still scrolls normally */
@media (prefers-reduced-motion:reduce){
  .scene-media .ph{transform:none!important}
}