/* ===========================================================
   716 cinematic hero  -  ADD-ON ONLY
   Loaded after style.css. Edits nothing that already exists.
   Delete this file and the 3 injected snippets to revert.
   =========================================================== */

.film-bg{
  position:absolute !important;
  inset:0;
  z-index:0 !important;
  overflow:hidden;
  background:#0B2A36;
}
.film-bg video,
.film-bg .film-still{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 52%;
  display:block;
}
.film-bg .film-still{
  background-size:cover;
  background-position:center 52%;
}
/* no added drift. the walkthrough already moves, anything on top of it reads as lag. */

/* the site's own teal gradient, moved on top of the footage
   so every existing text colour still passes contrast */
.film-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(17,79,100,.70) 0%, rgba(2,58,91,.58) 100%),
    linear-gradient(180deg, rgba(3,26,38,.42) 0%, rgba(3,26,38,.10) 38%, rgba(3,26,38,.52) 100%);
}

/* lift the real content above the footage */
.has-film{ position:relative; }
.has-film > .container,
.has-film > .container-listings{ position:relative; z-index:2; }

/* listings page header needs the same lift plus its own padding,
   because it is a bare div, not a full-width section */
.compact-header.has-film{
  overflow:hidden;
  border-radius:8px;
  padding:0 24px;
  color:#fff;
  /* taller band so more of the room is on screen */
  min-height:clamp(460px, 62vh, 700px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.compact-header.has-film > *:not(.film-bg):not(.film-note){ position:relative; z-index:2; }
.compact-header.has-film h1,
.compact-header.has-film span,
.compact-header.has-film p,
.compact-header.has-film strong{ color:#fff; }

/* a quiet marker so it is obvious this is the demo layer */
.film-note{
  position:absolute;
  right:18px; bottom:14px;
  z-index:3;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}



/* on a phone the band does not need to eat the whole screen */
@media (max-width:760px){
  .compact-header.has-film{
    min-height:clamp(360px, 48vh, 500px);
    padding:0 18px;
  }
}


/* ---- homepage hero: taller band, framed so the face is in shot ---- */
.hero.has-film{
  min-height:clamp(760px, 92vh, 1040px);
  padding-top:96px;
  padding-bottom:72px;
}
.hero.has-film .film-bg video,
.hero.has-film .film-bg .film-still{
  object-position:center 34%;
  background-position:center 34%;
}
@media (max-width:760px){
  .hero.has-film{
    min-height:clamp(620px, 90vh, 900px);
    padding-top:72px;
    padding-bottom:56px;
  }
  .hero.has-film .film-bg video,
  .hero.has-film .film-bg .film-still{
    object-position:center 30%;
    background-position:center 30%;
  }
}