/* Full-bleed portfolio film; copy stays readable at every screen width. */
.hero.hero-film{position:relative;isolation:isolate;display:block;overflow:hidden;background:#182e25;color:#fff;padding:0;min-height:650px}
.hero-media{position:absolute;inset:0;z-index:-3;overflow:hidden}
.hero-media video,.hero-media .hero-poster img{display:block;width:100%;height:100%;object-fit:cover;object-position:70% center}
.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(10,28,21,.97) 0%,rgba(10,28,21,.90) 27%,rgba(10,28,21,.35) 58%,rgba(10,28,21,.04) 100%)}
.hero-inner{position:relative;min-height:650px;display:flex;align-items:center;padding-block:72px 100px}
.hero-film .hero-copy{max-width:560px}
.hero-film h1{font-size:clamp(3.8rem,5.6vw,5.6rem);letter-spacing:-3px;line-height:1.03;margin:24px 0}
.hero-film h1 em{color:#dfedbd;margin-top:8px}
.hero-film .hero-copy>p{color:#e2eadd;font-size:1.125rem;max-width:380px;line-height:1.65}
.hero-film .eyebrow{color:#d8e6cc;font-size:.75rem;letter-spacing:1.7px}
.hero-film .text-button{color:#fff;font-size:.9375rem}
.hero-film .hero-note{display:block;color:#b7cbb2;font-size:.8125rem;margin-top:32px}
.hero-film-caption{position:absolute;bottom:24px;right:48px;left:48px;display:flex;align-items:center;justify-content:flex-end;gap:18px;flex-wrap:wrap}
.film-project,.film-toggle{color:#fff;background:#132f26da;border:1px solid #b9ccb455;border-radius:28px;padding:10px 16px;min-height:44px;font-size:.75rem;letter-spacing:.7px}
.film-project span{margin-left:12px}.film-toggle{min-width:104px;font-size:.875rem;letter-spacing:0}
.film-project:hover,.film-toggle:hover{background:#285443}
.website-count{position:absolute;top:16px;left:16px;border-radius:20px;padding:7px 12px;background:#163e32;color:white;font-size:.8125rem}
.website-card .card-art{aspect-ratio:4/3}
@media(max-width:959px){
 .hero.hero-film{min-height:790px}.hero-inner{min-height:790px;align-items:flex-start;padding-block:42px 350px}
 .hero-media{top:290px}.hero-media video,.hero-media .hero-poster img{object-position:64% center}
 .hero-shade{background:linear-gradient(180deg,#132b21 0%,#132b21 30%,rgba(19,43,33,.75) 42%,rgba(19,43,33,0) 65%,rgba(19,43,33,.30) 100%)}
 .hero-film h1{font-size:clamp(3.3rem,8vw,4.9rem);letter-spacing:-2px}
 .hero-film .hero-copy>p{max-width:480px;font-size:1rem}.hero-film .hero-note{display:none}
 .hero-film-caption{left:32px;right:32px;bottom:20px;justify-content:space-between;gap:8px}
}
@media(max-width:599px){
 .hero.hero-film{min-height:780px}.hero-inner{min-height:780px;padding-block:34px 365px}
 .hero-film h1{font-size:clamp(3rem,12.8vw,4.6rem);line-height:1.05;margin:18px 0;letter-spacing:-2px}
 .hero-film .eyebrow{font-size:.75rem;letter-spacing:1px}.hero-film .hero-copy>p{max-width:350px}
 .hero-film .hero-actions{margin-top:22px;gap:12px 18px}.hero-film .hero-actions .button{padding:13px 17px}
 .hero-film .text-button{font-size:.875rem}.hero-media{top:355px;bottom:15px;mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 88%,transparent)}
 .hero-media video,.hero-media .hero-poster img{object-fit:contain;object-position:center}
 .hero-shade{background:linear-gradient(180deg,#132b21 0%,#132b21 39%,rgba(19,43,33,.55) 51%,transparent 67%,rgba(19,43,33,.45) 100%)}
 .hero-film-caption{left:20px;right:20px;bottom:18px}.film-project{font-size:.625rem;padding-inline:11px;letter-spacing:.4px}.film-toggle{font-size:.8125rem;min-width:88px;padding-inline:10px}
}
@media(max-width:359px){.hero-film .hero-actions{gap:8px}.hero-film-caption{left:16px;right:16px;gap:6px}.film-project span{margin-left:5px}}
@media(prefers-reduced-motion:reduce){.hero-media video,.hero-media .hero-poster img{animation:none}}

.hero-poster{position:absolute;inset:0;display:block}.hero-media video{position:relative;opacity:0}.hero-media video.is-playing{opacity:1}