/* Dharti Group — hero film
   ============================================================ */

/* ============================================================
   HERO — Mumbai skyline (local asset)
   ============================================================ */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding:0 var(--gutter); overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:0; background:var(--ink); }
/* two stacked layers, crossfaded, so the clips read as one stitched film */
.hero__video{ position:absolute; inset:0; overflow:hidden; }
.hv{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  transition:opacity 1.1s linear;
  will-change:opacity;
}
.hv.is-active{ opacity:1; }
/* The clips run bright, so the scrim has to carry the headline on its own.
   Heaviest on the left, where the copy sits. */
.hero__grade{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(6,13,28,.95) 0%, rgba(6,13,28,.82) 30%, rgba(6,13,28,.45) 62%, rgba(6,13,28,.28) 100%),
    linear-gradient(180deg, rgba(6,13,28,.7) 0%, rgba(6,13,28,.3) 30%, rgba(6,13,28,.5) 70%, rgba(6,13,28,.95) 100%);
}
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.08); } }

.hero__inner{ position:relative; z-index:2; max-width:40rem; }
.hero__title{
  font-weight:500; font-size:clamp(2.1rem,5vw,3.8rem);
  line-height:1.12; letter-spacing:-.025em; margin:1rem 0 1.1rem;
}
.hero__title span{ display:block; }
.hero__title em{ color:var(--gold-2); }
.hero__sub{ max-width:26rem; font-size:.98rem; color:var(--bone-dim); line-height:1.7; }
.hero__actions{ margin-top:1.8rem; }

.hero__scroll{
  position:absolute; left:50%; bottom:2rem; transform:translateX(-50%);
  width:1px; height:56px; background:var(--line); overflow:hidden; z-index:2;
}
.hero__scroll span{
  position:absolute; top:-40%; left:0; width:100%; height:40%;
  background:var(--gold); animation:scrolldot 2.4s var(--ease) infinite;
}
@keyframes scrolldot{ 0%{top:-40%;} 60%,100%{top:100%;} }