/* ==========================================================================
   hero.css, full-bleed homepage hero (brand film loop + poster fallback)
   ========================================================================== */
.vr-hero{
  position:relative; min-height:680px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center;
  /* Poster doubles as the background so the hero is never empty: it covers the
     video's load, and stands in permanently on reduced-motion / Save-Data. */
  background:url('../images/hero-poster.jpg') center 42%/cover no-repeat;
}
.vr-hero__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* Fades up once the first frame is decoded, so there is no flash of black
     between the poster background and playback starting. */
  opacity:0; transition:opacity .8s ease;
}
.vr-hero__video.is-playing{opacity:1;}
.vr-hero__overlay{position:absolute; inset:0; background:linear-gradient(180deg,rgba(31,42,46,.28),rgba(31,42,46,.5));}
/* Wide enough that the title's first line ("A boutique real estate agency")
   still fits on one line once the clamp below tops out at 4rem; at 760px it
   dropped "agency" onto a line of its own. The lede keeps its own narrower
   measure, so only the headline uses the extra width. */
.vr-hero__inner{position:relative; max-width:880px; padding:var(--vr-gutter); color:#fff;}
.vr-hero__title{
  /* Floor is 2.1rem rather than 2.4rem so "serving the Triad of NC" still
     holds one line on a 375px phone, instead of stranding "NC" on a fourth. */
  font-weight:500; font-size:clamp(2.1rem,5.5vw,4rem); line-height:1.08;
  letter-spacing:.01em; margin-bottom:1.1rem; text-shadow:0 1px 24px rgba(0,0,0,.25);
  /* Below ~550px the first line has to wrap anyway; balance splits it evenly
     instead of orphaning the last word. */
  text-wrap:balance;
}
.vr-hero__lede{
  font-size:clamp(1.05rem,2vw,1.3rem); max-width:560px; margin:0 auto 2rem;
  color:rgba(255,255,255,.94);
}
.vr-hero__cta{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;}

/* ---------- "Watch the full film", lower-right corner ---------- */
.vr-hero__film{
  position:absolute; right:clamp(20px,4vw,44px); bottom:clamp(20px,4vw,40px); z-index:2;
  display:flex; align-items:center; gap:.85rem;
  padding:.7rem 1.35rem .7rem .8rem; border-radius:999px;
  background:rgba(31,42,46,.42); border:1px solid rgba(255,255,255,.35);
  color:#fff; text-decoration:none; text-align:left;
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
  cursor:pointer;
}
.vr-hero__film:hover{background:rgba(31,42,46,.72); border-color:#fff; transform:translateY(-2px);}
.vr-hero__film-icon{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  background:var(--vr-peacock); display:grid; place-items:center;
}
/* CSS triangle, nudged right to sit optically centred in the circle */
.vr-hero__film-icon::before{
  content:''; border-style:solid; border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent #fff; margin-left:3px;
}
.vr-hero__film-label{
  display:block; font-family:var(--vr-ui); font-weight:500; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; line-height:1.3;
}
.vr-hero__film-meta{
  display:block; font-family:var(--vr-ui); font-weight:300; font-size:.64rem;
  letter-spacing:.12em; color:rgba(255,255,255,.72);
}

/* ---------- Film lightbox ---------- */
.vr-film{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; padding:clamp(16px,5vw,56px);
  background:rgba(15,20,22,.93);
}
.vr-film[open]{display:flex;}
.vr-film__frame{position:relative; width:100%; max-width:1180px; aspect-ratio:16/9; background:#000;}
.vr-film__frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.vr-film__close{
  position:absolute; top:-46px; right:0; width:38px; height:38px; padding:0;
  background:transparent; border:1px solid rgba(255,255,255,.4); border-radius:50%;
  color:#fff; font-size:1.1rem; line-height:1; cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.vr-film__close:hover{background:rgba(255,255,255,.14); border-color:#fff;}

@media (max-width:640px){
  /* The film button sat position:absolute at a fixed bottom offset, so on
     mobile it landed on top of the CTA row instead of below it. Drop it back
     into flow, stacked under the hero content, so it can never overlap. */
  .vr-hero{min-height:560px; flex-direction:column; gap:1.6rem; padding-block:48px 28px;}
  .vr-hero__film{
    position:static;
    padding:.6rem 1.1rem .6rem .65rem;
  }
  .vr-hero__film:hover{transform:translateY(-2px);}
  .vr-hero__film-icon{width:29px; height:29px;}
  .vr-film__close{top:auto; bottom:-46px; right:50%; transform:translateX(50%);}
}

/* Honour reduced motion: the poster background carries the hero on its own. */
@media (prefers-reduced-motion:reduce){
  .vr-hero__video{display:none;}
}