/* Hero v3: one full-bleed photograph is the set. No cut-outs, no plinth, no CSS wall.
   The copy sits on the quiet left; a plaster scrim sits only behind it. The photo file is chosen at build time (hero.mjs). */
.hero{--hero-pos:62% 45%;position:relative;isolation:isolate;overflow:clip;background:var(--plaster);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(92svh,auto)}
.hero-media{grid-area:1/1;position:relative;z-index:0;overflow:clip;background:var(--plaster-2)}
.hero-photo{position:absolute;inset:0;display:block;transform-origin:50% 50%;will-change:transform}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos);display:block}
/* the scrim: a sibling block behind the copy only, about 58 percent of the width */
.hero-scrim{grid-area:1/1;z-index:1;width:58%;background:linear-gradient(90deg,rgba(243,236,223,.92) 0,rgba(243,236,223,.78) 55%,rgba(243,236,223,0) 100%);pointer-events:none}
/* the Arabic name, faint, inside the scrim area, under the calls (clear of the words) */
.hero-ar{grid-area:1/1;z-index:2;align-self:end;justify-self:start;margin:0 0 -.06em calc(var(--gutter) + 2vw);font-family:var(--font-arabic);font-size:clamp(120px,12vw,240px);line-height:1;color:var(--ink);opacity:.12;white-space:nowrap;pointer-events:none;user-select:none}
.hero-inner{grid-area:1/1;z-index:3;align-self:center;padding-block:clamp(40px,6vh,80px) clamp(96px,14vh,150px)}
.hero-copy{max-width:min(640px,46vw);will-change:transform}
.hero-label{margin-bottom:22px}
.hero h1{font-size:clamp(46px,6.67vw,96px);line-height:.98;font-weight:360;letter-spacing:-.025em}
.hero h1 .hl{display:block}
.hero h1 .accent{font-weight:360}
.hero-sent{margin-top:26px;font-size:20px;line-height:1.5;color:var(--ink-2);max-width:36ch}
.hero-ctas{margin-top:34px;display:flex;align-items:center;gap:14px 30px;flex-wrap:wrap}
.hero-ctas .link{padding-block:12px 2px}

/* phones: the photograph on top as a clean band (50svh, nothing laid over the products), then the label, the headline,
   the sentence and the calls on the plaster under it. Measured at 390x844: the headline and the button both sit above the phone bar. */
@media (max-width:760px){
  .hero{--hero-pos:60% 50%;grid-template-rows:50svh auto auto auto}
  .hero-media{grid-area:1/1}
  .hero-scrim{display:none}
  .hero-inner,.hero-copy{display:contents}
  .hero-head{grid-area:2/1;padding:18px var(--gutter) 0}
  .hero-label{margin-bottom:10px}
  .hero h1{font-size:clamp(40px,11.5vw,46px)}
  .hero-sent{grid-area:3/1;margin:0;padding:12px var(--gutter) 0;font-size:17px;line-height:1.48}
  .hero-ctas{grid-area:4/1;margin:0;padding:16px var(--gutter) 34px;gap:6px 22px}
  .hero-ar{grid-area:1/1;align-self:start;justify-self:end;margin:6px calc(var(--gutter) - 4px) 0 0;font-size:22vw;line-height:1;color:#fff;opacity:.16}
}
/* load: hidden only while the script plays it in; a failsafe shows everything after 2.4 s */
html.lx-live .hero [data-in]{opacity:0;animation:hero-failsafe .01s 2.4s forwards}
html.lx-live.hero-go .hero [data-in]{animation:none}
@keyframes hero-failsafe{to{opacity:1}}