/* The film — button at the head of the right-hand column + full-screen player.
   Additive and scoped; nothing in site.css is overridden. */

/* ── the button ────────────────────────────────────────────────────── */
.film-open{
  appearance:none;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  margin:0 0 22px;
  padding:15px 16px;
  border:1px solid rgba(94,234,212,.55);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(94,234,212,.20), rgba(94,234,212,.10));
  color:#eafffb;
  font:600 14px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 14px 34px rgba(94,234,212,.16), 0 1px 0 rgba(255,255,255,.08) inset;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.film-open:hover{
  transform:translateY(-2px);
  border-color:#5eead4;
  background:linear-gradient(180deg, rgba(94,234,212,.28), rgba(94,234,212,.14));
  box-shadow:0 20px 44px rgba(94,234,212,.26), 0 1px 0 rgba(255,255,255,.10) inset;
}
.film-open:focus-visible{outline:2px solid #5eead4;outline-offset:4px}

.fo-play{
  flex:none;
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#5eead4;
  color:#06121a;
  box-shadow:0 6px 18px rgba(94,234,212,.45);
}
.fo-play svg{margin-left:2px}
.fo-label{flex:1;text-align:left}
.fo-time{
  flex:none;
  font:600 11px/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.12em;
  color:rgba(234,255,251,.62);
}

/* ── player ────────────────────────────────────────────────────────── */
.film-wrap{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:4vh 4vw;
  background:rgba(5,9,16,.94);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.film-wrap.is-open{display:flex}
body.film-lock{overflow:hidden}

.film-inner{position:relative;width:min(1180px,94vw)}
.film-inner video{
  width:100%;
  display:block;
  border-radius:12px;
  background:#000;
  box-shadow:0 40px 90px rgba(0,0,0,.6);
}
.film-meta{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-top:14px;
  color:rgba(233,246,244,.62);
  font:500 12px/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.film-close{
  position:absolute;
  top:-44px;
  right:0;
  appearance:none;
  background:none;
  border:0;
  color:rgba(233,246,244,.75);
  font:600 13px/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  padding:8px 2px;
}
.film-close:hover{color:#5eead4}
.film-close:focus-visible{outline:2px solid #5eead4;outline-offset:4px}

@media (max-width:640px){
  .film-close{top:-38px}
  .film-open{padding:13px 14px}
  .fo-time{display:none}
}

/* ── one-screen landing ────────────────────────────────────────────────
   The header sits above a hero with min-height:100svh, so the document was
   always taller than the viewport by the header's own height and the page
   showed a scrollbar on load. Fit the two into the viewport instead. Scoped
   to wide screens: on phones the hero content is genuinely taller than the
   screen and should keep scrolling. */
@media (min-width: 900px) and (min-height: 720px) {
  body { display: flex; flex-direction: column; min-height: 100svh; }
  body > header.nav { flex: 0 0 auto; }
  body > main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .hero3 { flex: 1 1 auto; min-height: 0; }
}

/* short laptop screens: the hero's own padding is what pushes it past the
   viewport once the header is accounted for, so trim it there and nothing else */
@media (min-width: 900px) and (max-height: 790px) {
  .hero3 { padding-top: 26px; padding-bottom: 32px; }
}