/* Homepage hero alternatives (Tweaks: Hero treatment → Film / Columns).
   Class names mirror hero-alt.html so the two stay in step. */
.alt-hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:grid;align-items:center}
.alt-hero__inner{position:relative;z-index:2}
.alt-cta{display:flex;gap:12px;flex-wrap:wrap}
.film{background:#0f0e14;align-items:end}
.film__stack{position:absolute;inset:-12% 0;z-index:0;will-change:transform}
.film__frame{position:absolute;inset:0;opacity:0;transition:opacity 1400ms ease}
.film__frame img{width:100%;height:100%;object-fit:cover;display:block}
.film__frame:nth-child(2) img,.film__frame:nth-child(5) img{object-position:50% calc(50% + 150px)}
.film__frame.is-on{opacity:1}
.film__shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,14,20,.5) 0%,rgba(15,14,20,.3) 45%,rgba(15,14,20,.72) 100%)}
.film__meta{position:absolute;left:0;right:0;bottom:32px;z-index:2}
.film__dots{display:flex;gap:8px}
.film__dot{width:36px;height:2px;background:rgba(255,255,255,.28);overflow:hidden}
.film__dot i{display:block;height:100%;width:100%;background:#fff;transform:translateX(-100%)}
.film__dot.is-done i{transform:none}
.film__dot.is-on i{animation:dotFill 5200ms linear forwards}
@keyframes dotFill{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.film .alt-hero__inner{padding-block:140px 72px}
.film__text{display:flex;flex-direction:column;gap:24px;max-width:880px}
.film .fa-eyebrow{color:var(--fa-mint,#8ff0c8)}
.film .fa-h1{color:#fff}
.film .fa-body{color:rgba(255,255,255,.86)}
.film .fa-btn--outline{color:#fff!important;box-shadow:inset 0 0 0 1.5px #fff!important}
.film .fa-btn--outline:hover{background:#fff!important;color:#0f0e14!important}
.cols{background:#fff;min-height:0;height:calc(100vh - 84px);height:calc(100svh - 84px)}
.cols .alt-hero__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:120px 0}
.cols__text{display:flex;flex-direction:column;gap:24px;max-width:600px}
.cols__stage{position:relative;height:calc(100vh - 204px);height:calc(100svh - 204px);min-height:460px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.cols__col{display:flex;flex-direction:column;gap:16px;padding-bottom:16px;will-change:transform}
.cols__col--up{animation:colUp 46s linear infinite}
.cols__col--down{animation:colDown 58s linear infinite}
.cols__col--up2{animation:colUp 52s linear infinite}
.cols__col img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:#eee}
.cols__col img.wide{aspect-ratio:4/5}
.cols__col img.tall{aspect-ratio:2/3}
@keyframes colUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes colDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.cols__stage:hover .cols__col{animation-play-state:paused}
@media (max-width:1023px){.cols .alt-hero__inner{grid-template-columns:1fr;padding-block:104px 0}.cols__stage{height:56vh;min-height:420px}.cols__text{max-width:none}}
@media (max-width:599px){.cols__stage{grid-template-columns:repeat(2,1fr)}.cols__col--up2{display:none}}

/* ---- Film hero: header sits over photography, so never blend/invert — plain white nav ---- */
.fa-page[data-hero="film"] .fa-header.header--blend{mix-blend-mode:normal!important;--text-primary:var(--fa-white)}
.fa-page[data-hero="film"] .fa-header.header--blend .fa-nav a,.fa-page[data-hero="film"] .fa-header.header--blend .fa-nav button{color:var(--fa-white)}

/* ---- Glass header (Film / Columns heroes, after scrolling) ---- */
.fa-page.is-glass .fa-header{mix-blend-mode:normal!important;backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:inset 0 -1px 0 rgba(255,255,255,.14);transition:background 250ms ease,box-shadow 250ms ease}
.fa-page.is-glass .fa-header[data-theme="dark"]{background:rgba(5,14,30,.58)}
.fa-page.is-glass .fa-header[data-theme="light"]{background:rgba(255,255,255,.72);box-shadow:inset 0 -1px 0 rgba(5,14,30,.08)}
.fa-page.is-glass .fa-header[data-theme="light"].header--blend{--text-primary:var(--fa-ink)}
.fa-page.is-glass .fa-header[data-theme="light"].header--blend .fa-logo__cut--light{opacity:1}
.fa-page.is-glass .fa-header[data-theme="light"].header--blend .fa-logo__cut--dark{opacity:0}

.fa-page[data-motion="still"] .reveal{opacity:1!important;transform:none!important;transition:none!important}
.fa-page[data-motion="still"] .film__frame,.fa-page[data-motion="still"] .film__frame img,.fa-page[data-motion="still"] .fa-page[data-motion="still"] .cols__col{animation:none!important}
.fa-page[data-motion="still"] 
.fa-page[data-motion="still"] 
.fa-page[data-motion="still"] .fa-hero__tile{opacity:1!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.film__frame,.film__frame img,.cols__col{animation:none!important}}