/* Fixed scene: only the reflections inside the sphere rotate in the video.
   Keep the top of the source below the floating navigation at wide sizes. */
.hero-film{top:85px;height:calc(100% - 85px);object-position:right top;object-fit:cover;mask-image:linear-gradient(to bottom,transparent,#000 45px);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 45px)}
.hero{background:#14231b}
.hero-shade{background:linear-gradient(90deg,rgba(9,23,17,.7),rgba(9,23,17,.24) 50%,transparent 76%),linear-gradient(0deg,rgba(10,24,18,.65),transparent 22%)}
.hero .floating-note{animation:none;translate:none}
.hero .note-one{top:auto;bottom:185px;right:5%;transform:none}
.hero .note-two{top:auto;bottom:92px;right:3%}
@media(max-width:1100px) and (min-width:581px){
  .hero-film{object-fit:contain;object-position:right 95px;top:0;height:100%;width:100%}
  .hero .note-one{bottom:170px}
  .hero-content{max-width:620px}
}
@media(max-width:580px){
  .hero{min-height:1070px;background:#14231b}
  .hero-content{padding-top:135px;padding-bottom:510px}
  .hero-film{top:540px;left:auto;right:0;width:100%;height:475px;object-fit:cover;object-position:right top}
  .hero-shade{background:linear-gradient(180deg,#14231b 0%,#14231b 46%,transparent 57%,transparent 85%,#14231b 100%)}
  .hero .note-one{right:22px;bottom:120px;max-width:calc(100% - 44px);padding:11px 13px}
  .hero .note-two{display:none}
  .hero-note{max-width:100%;line-height:1.7}
}
@media(prefers-reduced-motion:reduce){
  .hero-film{visibility:visible}
  .hero{background-image:none}
}