/* ═══ BENAA v2 — HOMEPAGE ONLY ═══
   The video hero and the two homepage-specific blocks (hero stats, client
   names). Tokens, chrome, typography, sections, items, CTAs and the reveal
   all come from v2.css. Spec: _build/HOMEPAGE-REDESIGN-SPEC.md
   ════════════════════════════════════ */

/* ── hero ─────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:grid; align-content:end;
  padding:calc(var(--navh) + 3rem) var(--gutter) clamp(4.5rem,11vh,7rem);
  background:var(--plum-deep); overflow:hidden; isolation:isolate;
}
/* The poster is a real <img>: it paints first and it is the LCP element.
   The video sits on top, invisible until it is actually playing. */
.hero-poster,.hero-video{
  position:absolute; inset:0; z-index:var(--z-bg);
  width:100%; height:100%; object-fit:cover; display:block;
}
.hero-video{ opacity:0; transition:opacity 900ms ease }
.hero.playing .hero-video{ opacity:1 }

/* One static scrim. The old per-frame grade curve is retired. */
.hero-grade{
  position:absolute; inset:0; z-index:var(--z-grade); pointer-events:none;
  background:
    linear-gradient(104deg, rgba(26,12,30,.72) 0%, rgba(26,12,30,.34) 52%, rgba(26,12,30,.10) 84%),
    linear-gradient(180deg, rgba(26,12,30,.62) 0%, rgba(26,12,30,.12) 30%,
                            rgba(26,12,30,.38) 64%, rgba(26,12,30,.94) 100%);
}
[dir="rtl"] .hero-grade{
  background:
    linear-gradient(256deg, rgba(26,12,30,.72) 0%, rgba(26,12,30,.34) 52%, rgba(26,12,30,.10) 84%),
    linear-gradient(180deg, rgba(26,12,30,.62) 0%, rgba(26,12,30,.12) 30%,
                            rgba(26,12,30,.38) 64%, rgba(26,12,30,.94) 100%);
}
.hero-in{ position:relative; z-index:var(--z-copy); width:100%; max-width:var(--maxw); margin:0 auto }

/* the thin gold rule that hands the hero over to the page (same as .phero) */
.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:var(--z-copy);
  background:linear-gradient(90deg,transparent,var(--gold),var(--gold),transparent);
}

.hero-figs{ display:flex; flex-wrap:wrap; gap:1.1rem clamp(2rem,5vw,4.5rem); margin-top:.6rem }
.hero-fig .v{
  display:block; font-family:var(--display); line-height:1;
  font-size:clamp(2rem,4vw,3.4rem); color:var(--gold);
  text-shadow:0 0 22px rgba(244,182,81,.35), 0 2px 18px rgba(26,12,30,.8);
}
.hero-fig .l{
  display:block; margin-top:.5rem; font-size:.72rem; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(255,255,255,.9);
  text-shadow:0 1px 12px rgba(26,12,30,.9);
}
[dir="rtl"] .hero-fig .l{ letter-spacing:0; font-size:.86rem }

.hero-cue{
  position:absolute; z-index:var(--z-copy); left:50%; bottom:1.5rem; transform:translateX(-50%);
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.72); text-decoration:none;
}
.hero-cue:hover,.hero-cue:focus-visible{ color:var(--gold) }
[dir="rtl"] .hero-cue{ letter-spacing:0; font-size:.82rem }

/* ── the large logo mark (phones and portrait tablets) ───────
   On a tall screen the bottom-aligned copy leaves the top half of the
   hero empty, and the bar's mark is too small to register. The brand
   mark fills that band. It is a CSS background inside the media query,
   so desktop visitors never download it. */
.hero-mark{ display:none }
/* The mark takes ONLY the space the copy leaves free: its row is the
   hero's leftover height (it has no intrinsic height of its own), and the
   artwork is drawn at min(250px, that row). It can never push the
   headline, stats or quote button below the fold. Short phones have no
   free band at all, so it is not shown there. */
@media (max-width:768px) and (min-height:701px){
  /* A column flexbox, not grid: a 1fr grid row does not grow into a
     container that only has a min-height (measured: it collapsed to 0),
     a flexed item does. */
  .hero{ display:flex; flex-direction:column }
  .hero-in{ flex:none }
  .hero-mark{
    display:block; position:relative; z-index:var(--z-copy);
    flex:1 1 0; min-height:0; margin:.5rem 0 1.25rem;
    background:url('/assets/images/logo-mark.webp') center / auto min(250px,100%) no-repeat;
    filter:drop-shadow(0 0 18px rgba(26,12,30,.55)) drop-shadow(0 0 34px rgba(244,182,81,.22));
  }
}

/* ── Home Care band (the annual packages) ─────────────────────
   The Financial Harbour aerial from the Home Care deck, held well
   down under a plum grade so the copy reads like every other band. */
.home-hc{ position:relative; isolation:isolate; overflow:hidden }
.home-hc::before{ content:''; position:absolute; inset:0; z-index:-1;
  background:url('/assets/images/home-care/hc-band.webp') center/cover no-repeat; opacity:.55 }
.home-hc::after{ content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(8,6,16,.92) 0%, rgba(26,12,30,.72) 55%, rgba(26,12,30,.45) 100%) }
[dir="rtl"] .home-hc::after{
  background:linear-gradient(260deg, rgba(8,6,16,.92) 0%, rgba(26,12,30,.72) 55%, rgba(26,12,30,.45) 100%) }

/* ── trusted by: client names, typographic, frameless ─────── */
.p-home .names{ display:flex; flex-wrap:wrap; gap:1rem clamp(2rem,4vw,3.6rem); margin-top:.6rem }
.p-home .name{
  font-family:var(--display); font-size:clamp(1.35rem,2.6vw,2.2rem);
  line-height:1.15; color:var(--plum);
}

@media (max-width:620px){
  .hero{ padding-bottom:5.5rem }
  .hero-figs{ gap:1rem 1.8rem }
}
@media (prefers-reduced-motion:reduce){
  .hero-video{ display:none }
}