/* TOTALFIT campaign film. Scoped to the home page. */
.hero.hero-film {
  display: block; position: relative; isolation: isolate; color: #fff;
  width: 100%; max-width: none; height: max(510px,42.1875vw);
  min-height: 0; padding: 0; margin: 0; overflow: hidden; background: #151515;
}
.hero-film-media { position: absolute; inset: 0; overflow: hidden; background: #e6e5df; }
.hero-film-poster, .hero-film-poster img, .hero-film-video {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; pointer-events: none;
}
.hero-film-video { opacity: 0; transition: opacity .8s ease; }
.hero-film.has-frame .hero-film-video { opacity: 1; }
.hero-film-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,rgba(8,10,12,.68),rgba(8,10,12,.42) 29%,transparent 61%),
    linear-gradient(0deg,rgba(8,10,12,.49),transparent 45%),linear-gradient(180deg,rgba(8,10,12,.25),transparent 22%);
}
.hero-film-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .055; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.8' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-film-topline {
  position: absolute; z-index: 2; top: 30px; left: clamp(24px,5.6vw,92px); right: clamp(24px,5.6vw,92px);
  display: flex; justify-content: space-between; gap: 20px; align-items: center; color: #fff;
  font-size: .59rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.hero-film-topline>span:first-child { display: flex; gap: 14px; align-items: center; }
.hero-film-topline>span:first-child:before { content: ""; width: 25px; height: 2px; background: var(--blue); }
.hero.hero-film .hero-copy {
  position: absolute; z-index: 3; left: clamp(24px,5.6vw,92px); bottom: 52px;
  width: min(570px,45%); display: block; margin: 0;
  transform: translate3d(0,var(--hero-copy-shift,0px),0);
}
.hero.hero-film .eyebrow {
  color: #e9e8e3; font-size: .58rem; letter-spacing: .18em; margin: 0 0 19px; animation: none;
}
.hero.hero-film h1 { font-size: clamp(4.5rem,7.6vw,8.6rem); line-height: .83; letter-spacing: -.075em; animation: none; margin: 0; text-wrap: initial; }
.hero.hero-film h1 em { font-size: .85em; line-height: 1.05; margin: .055em 0 0; letter-spacing: -.085em; transform: none; }
.hero-title-line { display: block; overflow: clip; padding: 0 .04em .06em 0; margin-right: -.04em; }
.hero-title-line>span { display: block; }
.hero.hero-film .hero-intro { max-width: 350px; font-size: .85rem; line-height: 1.55; margin: 16px 0 23px; color: #edece8; animation: none; }
.hero.hero-film .hero-actions { gap: 12px; animation: none; flex-wrap: nowrap; }
.hero.hero-film .hero-actions a { position: relative; overflow: hidden; min-width: 0; min-height: 50px; flex: 1 1 0; padding: 0 19px; font-size: .65rem; isolation: isolate; }
.hero.hero-film .hero-actions .pill { color: #fff; box-shadow: none; }
.hero.hero-film .hero-actions a:before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; transform: translateY(103%); transition: transform .45s cubic-bezier(.22,1,.36,1); pointer-events: none;
}
.hero.hero-film .hero-actions a:hover:before { transform: translateY(0); }
.hero.hero-film .hero-actions a:hover { background: transparent; color: #151515; transform: none; }
.hero.hero-film .hero-actions a>span { transition: transform .4s cubic-bezier(.22,1,.36,1); }
.hero.hero-film .hero-actions a:hover>span { transform: translate(3px,-3px); }
.hero-film-status { position: absolute; bottom: 17px; right: clamp(24px,5.6vw,92px); z-index: 4; display: flex; align-items: center; gap: 24px; }
.hero-film-scene { font-size: .55rem; font-weight: 700; letter-spacing: .14em; color: #fff; }
.hero-film-toggle {
  min-width: 95px; min-height: 44px; border: 1px solid rgba(255,255,255,.45);
  background: rgba(8,10,12,.32); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 0 12px; font: 600 .56rem "DM Sans",Arial,sans-serif; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; transition: background .25s,border-color .25s; -webkit-tap-highlight-color: transparent;
}
.hero-film-toggle[hidden] { display: none; }
.hero-film-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.hero-film-toggle:hover { background: rgba(8,10,12,.65); border-color: #fff; }
.hero-film-toggle:focus-visible, .hero.hero-film a:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.hero-film-progress { position: absolute; z-index: 4; bottom: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.18); pointer-events: none; }
.hero-film-progress>span { display: block; width: 100%; height: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .25s linear; }
.hero.hero-film .hero-scroll {
  bottom: 97px; right: clamp(24px,5.6vw,92px); gap: 12px; font-size: .56rem; z-index: 3;
  writing-mode: initial; transform: none; left: auto; display: flex; align-items: center;
}
.hero.hero-film .hero-scroll span { font: inherit; margin: 0; animation: none; }
.hero.hero-film .hero-scroll>svg { width: 22px; height: 22px; animation: hero-film-cue 3s ease-in-out infinite; }
@keyframes hero-film-cue { 0%,70%,100% { transform: translateY(0); } 82% { transform: translateY(5px); } }
@keyframes hero-film-line-in { from { opacity:0; filter:blur(2px); transform:translateY(8px); letter-spacing:-.035em; } to { opacity:1; filter:blur(0); transform:translateY(0); letter-spacing:inherit; } }
@keyframes hero-film-detail-in { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: translateY(0); } }
.hero.hero-film.is-enhanced .hero-title-line>span { animation: hero-film-line-in 1.6s .4s cubic-bezier(.22,1,.36,1) both; }
.hero.hero-film.is-enhanced h1 em>span { animation-delay: .55s; }
.hero.hero-film.is-enhanced .eyebrow { animation: hero-film-detail-in 1.2s .4s both; }
.hero.hero-film.is-enhanced .hero-intro { animation: hero-film-detail-in 1.2s .8s both; }
.hero.hero-film.is-enhanced .hero-actions { animation: hero-film-detail-in 1.2s .95s both; }
.hero.hero-film.is-enhanced .hero-film-topline { animation: hero-film-detail-in .9s .15s both; }
.hero.hero-film.is-paused .hero-scroll>svg { animation-play-state: paused; }
@media(max-width:1100px) {
  .hero.hero-film { height: auto; display: flex; flex-direction: column; color: #151515; background: var(--paper); overflow: hidden; }
  .hero-film-media { position: relative; width: 100%; aspect-ratio: 1920/810; }
  .hero-film-shade { background: linear-gradient(180deg,rgba(8,10,12,.3),transparent 25%),linear-gradient(0deg,rgba(8,10,12,.35),transparent 25%); }
  .hero.hero-film .hero-copy { position: relative; left: auto; bottom: auto; width: 100%; padding: 30px 32px 34px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; transform: none; }
  .hero.hero-film .eyebrow { color: #63635c; grid-column: 1; margin-bottom: 14px; }
  .hero.hero-film h1 { grid-column: 1; grid-row: 2/4; font-size: clamp(3.8rem,7.3vw,5.6rem); }
  .hero.hero-film .hero-intro { grid-column: 2; grid-row: 1/3; color: #53534c; max-width: 380px; margin: 0 0 18px; align-self: center; font-size: .86rem; }
  .hero.hero-film .hero-actions { grid-column: 2; grid-row: 3; align-self: end; }
  .hero.hero-film .hero-secondary { color: #151515; background: transparent; border-color: #92928a; }
  .hero.hero-film .hero-actions a:before { background: #151515; }
  .hero.hero-film .hero-actions a:hover { color: #fff; }
  .hero-film-topline { left: 24px; right: 24px; top: 22px; font-size: .54rem; }
  .hero-film-status { right: 20px; bottom: 14px; }
  .hero.hero-film .hero-scroll { display: none; }
  .hero-film-toggle:focus-visible { outline-color: #fff; }
  .hero.hero-film a:focus-visible { outline-color: #151515; }
}
@media(max-width:760px) {
  .hero-film-media { aspect-ratio: 3/4; }
  .hero-film-poster img { width: 100%; height: 100%; }
  .hero.hero-film .hero-copy { display: block; padding: 20px 20px 22px; }
  .hero.hero-film .eyebrow { font-size: .53rem; margin-bottom: 15px; display: none; }
  .hero.hero-film h1 { font-size: clamp(3.2rem,14vw,5.5rem); line-height: .84; }
  .hero.hero-film h1 em { font-size: .88em; margin-top: .025em; }
  .hero.hero-film .hero-intro { margin: 12px 0 18px; max-width: 420px; font-size: .8rem; line-height: 1.45; }
  .hero.hero-film .hero-actions { gap: 10px; }
  .hero.hero-film .hero-actions a { flex: 1 1 0; flex-basis: 0; min-width: 0; min-height: 48px; padding: 0 15px; font-size: .62rem; }
  .hero-film-topline { top: max(18px,env(safe-area-inset-top)); left: 18px; right: 18px; font-size: .49rem; letter-spacing: .11em; }
  .hero-film-topline>span:first-child { gap: 9px; }
  .hero-film-topline>span:first-child:before { width: 17px; }
  .hero-film-topline>span:last-child { display: none; }
  .hero-film-status { left: 18px; right: 18px; bottom: 14px; justify-content: space-between; gap: 14px; }
  .hero-film-scene { font-size: .54rem; }
  .hero-film-toggle { min-height: 44px; }
  .hero-film-grain { opacity: .035; }
}
@media(prefers-reduced-motion:reduce) {
  .hero.hero-film *, .hero.hero-film *:before { animation: none!important; transition: none!important; }
  .hero-film-media video,.hero-film-poster,.hero.hero-film .hero-copy { transform: none!important; }
}

/* Local contrast remains readable over white studio shots. */
.hero-film-topline>span { padding:8px 10px; background:rgba(8,10,12,.64); }
.hero-film-scene { padding:9px 10px; border-left:2px solid var(--blue); background:rgba(8,10,12,.64); }

@media(max-width:760px) { .hero-intro-extra { display:none; } }

/* Chosen treatment: cinema frame + breathing camera + a restrained light pass. */
.hero-film-video,.hero-film-poster { z-index:0; }
.hero-film-shade,.hero-film-grain { z-index:1; }
.hero-film-cinema .hero-title-line { overflow:visible; }
.hero-film-cinema-decor { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.hero-film-frame { position:absolute; inset:18px; width:calc(100% - 36px); height:calc(100% - 36px); fill:none; }
.hero-film-frame path { stroke:rgba(255,255,255,.66); stroke-width:1; vector-effect:non-scaling-stroke; stroke-dasharray:150; stroke-dashoffset:0; }
.hero-film-frame .hero-film-frame-accent { stroke:#ff4a22; stroke-width:2.1; }
.hero-film.is-enhanced .hero-film-frame path { animation:hero-film-frame-in 1.6s .1s cubic-bezier(.22,1,.36,1) both; }
@keyframes hero-film-frame-in { from { opacity:0; stroke-dashoffset:150; } to { opacity:1; stroke-dashoffset:0; } }
.hero-film-matte { position:absolute; left:0; width:100%; height:14%; background:#151515; }
.hero-film-matte-top { top:0; transform:translateY(-101%); }
.hero-film-matte-bottom { bottom:0; transform:translateY(101%); }
.hero-film.is-enhanced .hero-film-matte-top { animation:hero-film-open-top 1.6s cubic-bezier(.76,0,.24,1) both; }
.hero-film.is-enhanced .hero-film-matte-bottom { animation:hero-film-open-bottom 1.6s cubic-bezier(.76,0,.24,1) both; }
@keyframes hero-film-open-top { from { transform:translateY(0); } to { transform:translateY(-101%); } }
@keyframes hero-film-open-bottom { from { transform:translateY(0); } to { transform:translateY(101%); } }
.hero-film-cinema .hero-film-topline { top:41px; }
.hero-film-cinema .hero-film-status { bottom:29px; }
.hero-film-video {
 --camera-peak:1.08; --camera-mid:1.043; --camera-pan:12px;
 transform-origin:50% 8%; will-change:transform;
 animation:hero-film-camera 8s ease-in-out infinite; animation-play-state:paused;
}
@keyframes hero-film-camera {
 0%,100% { transform:translate3d(0,0,0) scale(1.005); }
 25% { transform:translate3d(calc(-1 * var(--camera-pan)),0,0) scale(var(--camera-mid)); }
 50% { transform:translate3d(0,0,0) scale(var(--camera-peak)); }
 75% { transform:translate3d(var(--camera-pan),0,0) scale(var(--camera-mid)); }
}
.hero-film-light {
 position:absolute; pointer-events:none; z-index:0; left:-70%; top:-50%; width:45%; height:200%;
 background:linear-gradient(90deg,transparent,rgba(255,232,201,.035) 22%,rgba(255,232,201,.23) 50%,rgba(255,251,241,.085) 69%,transparent);
 mix-blend-mode:screen; will-change:transform; opacity:0;
 animation:hero-film-light-pass 14s linear infinite; animation-play-state:paused;
}
@keyframes hero-film-light-pass {
 0%,14% { opacity:0; transform:translate3d(0,0,0) skewX(-23deg); }
 24% { opacity:.32; }
 58% { opacity:.32; }
 72%,100% { opacity:0; transform:translate3d(520%,0,0) skewX(-23deg); }
}
.hero-film.has-frame:not(.is-paused) .hero-film-video,
.hero-film.has-frame:not(.is-paused) .hero-film-light { animation-play-state:running; }
.hero-film.is-paused .hero-film-frame path,
.hero-film.is-paused .hero-film-matte,
.hero-film.is-paused .hero-title-line>span,
.hero-film.is-paused .eyebrow,
.hero-film.is-paused .hero-intro,
.hero-film.is-paused .hero-actions,
.hero-film.is-paused .hero-film-topline { animation-play-state:paused; }
@media(max-width:1100px) {
 .hero-film-cinema .hero-film-topline { top:34px; }
 .hero-film-cinema .hero-film-status { bottom:25px; }
}
@media(max-width:760px) {
 .hero-film-frame { inset:11px; width:calc(100% - 22px); height:calc(100% - 22px); }
 .hero-film-cinema .hero-film-topline { top:max(26px,env(safe-area-inset-top)); left:24px; right:24px; }
 .hero-film-cinema .hero-film-status { left:24px; right:24px; bottom:22px; }
 .hero-film-video { --camera-peak:1.045; --camera-mid:1.025; --camera-pan:2px; }
 .hero-film-light { animation-duration:16s; }
}
/* Keep mobile copy readable while scrolling; never animate tracking or blur. */
@keyframes hero-mobile-copy-in { from { opacity:.3; transform:translateY(4px); } to { opacity:1; transform:none; } }
@media(max-width:760px) and (prefers-reduced-motion:no-preference) {
 .hero.hero-film.is-enhanced .hero-title-line>span { animation:hero-mobile-copy-in .7s .08s ease-out both; }
 .hero.hero-film.is-enhanced h1 em>span { animation-delay:.16s; }
 .hero.hero-film.is-enhanced .hero-intro { animation:hero-mobile-copy-in .6s .2s ease-out both; }
 .hero.hero-film.is-enhanced .hero-actions { animation:hero-mobile-copy-in .6s .26s ease-out both; }
 .hero.hero-film.is-paused :is(.hero-title-line>span,.hero-intro,.hero-actions) { animation-play-state:running; }
}
@media(prefers-reduced-motion:reduce) {
 .hero-film-video { animation:none!important; transform:none!important; will-change:auto; }
 .hero-film-light,.hero-film-matte { display:none; }
 .hero-film-frame path { animation:none!important; stroke-dashoffset:0; }
}