/* ==================================================================
   film.css — the security film: its own page, and the pop-up player
   and poster card that feature it on Data Safety.

   Added 2026-09-25. Both surfaces are in the dark world, over the
   shared field. The film itself is the white Tercero field, so it is
   framed as a lit screen on the dark ground: a hairline plate, 8px
   radius, the brand's card elevation, and nothing laid over the
   picture once it is playing.

   Teal budget: the play disc is the one accent on the player. Its
   icon is dark on teal, never white (white on #00b894 is 2.54:1).
   ================================================================== */

/* ---- the play disc, shared by the page, the card and the pop-up --- */
.film-play{
  display:flex;align-items:center;justify-content:center;
  width:clamp(64px,8vw,92px);height:clamp(64px,8vw,92px);
  border-radius:50%;
  background:var(--teal);
  color:var(--deep);
  box-shadow:0 0 24px rgba(0,184,148,.5),0 12px 30px -10px rgba(0,0,0,.45);
  transition:transform .35s var(--e-out),box-shadow .35s var(--e-out);
  flex:none;
}
.film-play svg{width:38%;height:38%;margin-left:8%;fill:currentColor;}

/* the running time, on a dark chip so it reads over the white film */
.film-dur{
  font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.12em;
  color:var(--snow);background:rgba(14,26,36,.82);
  padding:.35em .6em;border-radius:3px;
}

/* ==================================================================
   1. the film page
   ================================================================== */

.film-hero{padding:clamp(6.2rem,11vw,8.4rem) 0 clamp(2rem,4vw,3rem);}

/* the stage: the heading plate and the screen are one component, so
   no text sits on bare field */
.film-stage{
  border:1px solid var(--rule-d);
  border-radius:8px;
  background:#101d27;
  box-shadow:0 5px 16px rgba(0,0,0,.32);
  overflow:hidden;
}
.film-stage-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;
  padding:clamp(1.4rem,3vw,2.2rem) clamp(1.3rem,3vw,2.4rem);
  border-bottom:1px solid var(--rule-d);
}
.film-stage-head h1{
  color:var(--snow);
  font-size:clamp(1.9rem,1.2rem + 2.8vw,3.3rem);
  margin-top:.7rem;
}
.film-stage-head .film-back{
  font-size:.9rem;color:var(--snow-soft);
  display:inline-flex;align-items:center;gap:.45em;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.film-stage-head .film-back:hover,
.film-stage-head .film-back:focus-visible{color:var(--snow);border-bottom-color:var(--teal);}

.film-player{
  position:relative;
  aspect-ratio:16/9;
  background:#f3f7f8;
  scroll-margin-top:84px;
}
.film-player video{display:block;width:100%;height:100%;background:#f3f7f8;}

/* the cover button: a clear play affordance over the poster until the
   film starts. Without JS it never shows, and the native controls are
   the whole player. */
.film-cover{display:none;}
html.js .film-cover{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  border:0;padding:0;cursor:pointer;
  background:linear-gradient(180deg,rgba(14,26,36,0) 55%,rgba(14,26,36,.28));
  color:inherit;font:inherit;
}
html.js .film-player.is-playing .film-cover{display:none;}
.film-cover:hover .film-play,
.film-cover:focus-visible .film-play{transform:scale(1.06);}
.film-cover:focus-visible{outline:2px solid var(--teal);outline-offset:-4px;}
.film-cover .film-dur{font-size:.74rem;}

/* ---- about the film + what you'll see ---- */
.film-about{padding:0 0 clamp(2.4rem,5vw,3.6rem);}
.film-about-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:1px;
  background:var(--rule-d);
  border:1px solid var(--rule-d);
  border-radius:8px;
  overflow:hidden;
}
.film-about-grid > div{background:#101d27;padding:clamp(1.5rem,3vw,2.4rem);}
.film-about h2{
  color:var(--snow);
  font-size:clamp(1.25rem,1rem + 1vw,1.7rem);
  margin-top:.8rem;
}
.film-intro p{margin-top:1rem;color:var(--snow-soft);line-height:1.62;}
.film-line{
  margin-top:1.5rem;padding-left:1.2rem;
  border-left:2px solid color-mix(in srgb,var(--teal) 55%,transparent);
}
.film-line p{
  margin:0;color:var(--snow);
  font-family:var(--exp);font-stretch:125%;font-weight:600;
  font-size:clamp(1.02rem,.95rem + .35vw,1.2rem);line-height:1.38;letter-spacing:-.01em;
}
.film-line cite{
  display:block;margin-top:.7rem;font-style:normal;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--snow-soft);
}
.film-intro .film-more{
  display:inline-flex;align-items:center;gap:.45em;margin-top:1.5rem;
  font-size:.93rem;font-weight:600;color:var(--snow);
  border-bottom:1px solid var(--rule-d);padding-bottom:.15em;
  transition:border-color .2s;
}
.film-intro .film-more:hover,.film-intro .film-more:focus-visible{border-bottom-color:var(--teal);}

.film-see ol{list-style:none;margin-top:1.1rem;display:flex;flex-direction:column;}
.film-see li + li{border-top:1px solid var(--rule-d);}
.film-see button{
  width:100%;display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:.9rem;align-items:baseline;
  text-align:left;background:none;border:0;cursor:pointer;
  padding:.72rem .4rem;border-radius:3px;
  font:inherit;font-size:.95rem;line-height:1.5;color:var(--snow-soft);
  transition:color .2s,background .2s;
}
.film-see button:hover,.film-see button:focus-visible{color:var(--snow);background:rgba(255,255,255,.035);}
.film-see .t{
  font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;color:#7d909b;
}
.film-see button:hover .t,.film-see button:focus-visible .t{color:var(--teal);}
.film-see-note{margin-top:.9rem;font-size:.82rem;color:#7d909b;}

@media (max-width:900px){
  .film-about-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .film-stage-head{padding:1.2rem 1.1rem;}
  .film-see button{grid-template-columns:2.9rem minmax(0,1fr);padding:.7rem .2rem;}
}

/* ==================================================================
   2. Data Safety: the poster card that opens the pop-up
   ================================================================== */

.sec-film{padding:0 0 clamp(2.6rem,5vw,4rem);scroll-margin-top:84px;}
.sec-film-in{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  border:1px solid var(--rule-d);
  border-radius:8px;
  overflow:hidden;
  background:#101d27;
  box-shadow:0 5px 16px rgba(0,0,0,.32);
}
.sec-film-poster{
  position:relative;display:block;width:100%;aspect-ratio:16/9;
  border:0;padding:0;margin:0;cursor:pointer;background:#f3f7f8;
  align-self:stretch;
}
.sec-film-poster img{display:block;width:100%;height:100%;object-fit:cover;}
.sec-film-poster .film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.sec-film-poster:hover .film-play,
.sec-film-poster:focus-visible .film-play{transform:translate(-50%,-50%) scale(1.06);}
.sec-film-poster .film-dur{position:absolute;right:12px;bottom:12px;}
.sec-film-poster:focus-visible{outline:2px solid var(--teal);outline-offset:-4px;}

.sec-film-text{
  padding:clamp(1.5rem,3vw,2.4rem);
  display:flex;flex-direction:column;justify-content:center;
  border-left:1px solid var(--rule-d);
}
.sec-film-text h2{
  color:var(--snow);
  font-size:clamp(1.4rem,1rem + 1.5vw,2.1rem);
  margin-top:.8rem;
}
.sec-film-text p{margin-top:1rem;color:var(--snow-soft);line-height:1.6;}
.sec-film-acts{display:flex;align-items:center;flex-wrap:wrap;gap:1rem 1.4rem;margin-top:1.6rem;}
.sec-film-link{
  font-size:.93rem;font-weight:600;color:var(--snow);
  border-bottom:1px solid var(--rule-d);padding-bottom:.15em;transition:border-color .2s;
}
.sec-film-link:hover,.sec-film-link:focus-visible{border-bottom-color:var(--teal);}

@media (max-width:900px){
  .sec-film-in{grid-template-columns:1fr;}
  .sec-film-text{border-left:0;border-top:1px solid var(--rule-d);}
}

/* ==================================================================
   3. the pop-up player

   Built on the site's .modal base (scrim, fade, z-index, padding) so
   it opens and closes like the demo and booking pop-ups. The card is
   its own: a slim bar above the picture carries the title, the link
   to the film page and the close button, so nothing covers the film.
   ================================================================== */

.modal-film .film-card{
  position:relative;
  width:min(1200px,100%,calc((88vh - 56px) * 16 / 9));
  background:#0b141c;
  border:1px solid var(--rule-d);
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 50px 120px -40px rgba(0,0,0,.75);
  transform:translateY(18px) scale(.985);opacity:0;
  transition:transform .42s var(--e-out),opacity .42s var(--e-out);
}
.modal-film.open .film-card{transform:none;opacity:1;}
/* visibility flips at once on open (it still fades out on close), so
   the close button is focusable the moment the pop-up opens */
.modal-film.open{transition:opacity .3s var(--e-out),visibility 0s;}
.modal-film .film-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:56px;padding:.55rem .6rem .55rem 1.1rem;
  border-bottom:1px solid var(--rule-d);
}
.modal-film .film-bar-t{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--snow-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.modal-film .film-bar-acts{display:flex;align-items:center;gap:.5rem;flex:none;}
.modal-film .film-full{
  font-size:.8rem;font-weight:600;color:var(--snow);
  padding:.5em .85em;border:1px solid var(--rule-d);border-radius:6px;
  transition:border-color .2s,background .2s;
}
.modal-film .film-full:hover{border-color:var(--teal);background:rgba(255,255,255,.04);}
.modal-film .film-close{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--rule-d);border-radius:6px;
  color:var(--snow);font-size:1.25rem;line-height:1;cursor:pointer;
  transition:border-color .2s,background .2s;
}
.modal-film .film-close:hover{border-color:var(--teal);background:rgba(255,255,255,.04);}
.modal-film video{display:block;width:100%;aspect-ratio:16/9;background:#f3f7f8;}
.modal-film .film-player{scroll-margin-top:0;}

@media (max-width:560px){
  .modal-film{padding:10px;}
  .modal-film .film-bar-t{display:none;}
  .modal-film .film-bar{justify-content:flex-end;}
}

@media (prefers-reduced-motion:reduce){
  .film-play,.modal-film .film-card{transition:none!important;}
}