/* Opening film: real people at their hustles, full screen, the words on a soft navy shade at the left */
.hf{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#fff url("../assets/img/hustle-poster.webp") center/cover;color:#0A1222}
.hf-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hf-shade{position:absolute;inset:0;background:linear-gradient(90deg, rgba(10,18,34,.78) 0%, rgba(10,18,34,.45) 38%, rgba(10,18,34,0) 66%), linear-gradient(0deg, rgba(10,18,34,.6) 0%, rgba(10,18,34,0) 38%), linear-gradient(180deg, rgba(10,18,34,.45) 0%, rgba(10,18,34,0) 18%)}
.hf-copy{position:absolute;z-index:2;left:var(--gl);bottom:clamp(48px, 12vh, 130px);max-width:min(640px, 52vw);padding-left:clamp(0px, 2vw, 40px)}
.hf .eyebrow{color:rgba(255,255,255,.75)}
.hf h1{margin-top:20px;font-size:clamp(46px, 6vw, 104px);line-height:.98;text-shadow:0 2px 30px rgba(10,18,34,.35)}
.hf h1 span{color:var(--gold-hi)}

/* The hustle on screen, named: the word slides up as each shot crossfades in */
.hf-word{display:flex;align-items:center;gap:14px;margin-top:22px;height:1.3em;overflow:hidden;font:500 clamp(20px, 1.8vw, 28px)/1.3 var(--display);letter-spacing:-.02em;color:#fff}
.hf-word i{flex:none;width:34px;height:2px;background:var(--gold-hi)}
.hf-w{display:block;transition:transform .55s cubic-bezier(.2,.7,.2,1), opacity .55s}
.hf-w.out{transform:translateY(-110%);opacity:0;transition-duration:.3s}
.hf-w.in{transform:translateY(110%);opacity:0;transition:none}

.hf .lede{margin-top:18px;max-width:30em;font-size:18px;color:rgba(255,255,255,.86)}
.hf .ctas{margin-top:30px}
.hf-cue{position:absolute;z-index:2;right:var(--gr);bottom:clamp(48px, 12vh, 130px);margin:0;display:flex;align-items:center;gap:12px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.hf-cue span{width:36px;height:1px;background:var(--gold-hi);transform-origin:left;animation:cue 2s ease-in-out infinite}

@media (max-width:820px){
  .hf-film{object-position:62% 50%}
  .hf-shade{background:linear-gradient(0deg, rgba(10,18,34,.88) 0%, rgba(10,18,34,.55) 45%, rgba(10,18,34,.15) 75%), linear-gradient(180deg, rgba(10,18,34,.5) 0%, rgba(10,18,34,0) 22%)}
  .hf-copy{left:var(--gl);right:var(--gr);max-width:none;padding:0;bottom:clamp(28px, 6vh, 56px)}
  .hf h1{font-size:clamp(40px, 11vw, 64px)}
  .hf .lede{font-size:16px}
  .hf-cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hf-cue span{animation:none}
}

/* Light opening: the film is bright, a soft white veil sits behind the words, and the words are navy */
.hf-shade{background:linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 16%), linear-gradient(90deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.62) 36%, rgba(255,255,255,0) 64%), linear-gradient(0deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 30%)}
.hf .eyebrow{color:#5E6677}
.hf h1{color:#0A1222;text-shadow:none}
.hf h1 span{color:#94650F}
.hf-word{color:#0A1222}
.hf-word i{background:#94650F}
.hf .lede{color:#2B3446}
.hf .btn-glass{background:#fff;border-color:rgba(10,18,34,.22);color:#0A1222;backdrop-filter:none;-webkit-backdrop-filter:none}
.hf .btn-glass:hover{background:#F3F1EC}
.hf-cue{color:#5E6677}
.hf-cue span{background:#94650F}
.site-head .brand,.site-head .nav a{color:#0A1222;text-shadow:none}
.site-head .nav a:hover{color:#94650F}
.site-head .menu-btn span{background:#0A1222}
@media (max-width:820px){
  .hf-shade{background:linear-gradient(0deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.8) 42%, rgba(255,255,255,0) 72%)}
}