
.studio-film{position:relative;isolation:isolate;overflow:hidden;min-height:640px;display:grid;place-items:center;background:#111216;color:#f6f4ed;text-align:center;scroll-margin-top:30px}
.studio-film-video,.studio-film-shade{position:absolute;inset:0;width:100%;height:100%}.studio-film-video{object-fit:cover;filter:none;z-index:-3}.studio-film-shade{z-index:-2;background:linear-gradient(180deg,#11121655,#11121655 40%,#111216a6),linear-gradient(90deg,#0005,transparent 50%,#0005)}
.studio-film-copy{padding:100px 6%;width:100%;max-width:1200px;position:relative}.studio-film .eyebrow{justify-content:center;font-size:11px;letter-spacing:2.4px;margin:0 0 28px;color:#e4ece9}.studio-film h2{font-family:'Eranos Arcade',monospace;font-size:clamp(30px,4.3vw,62px);line-height:1.24;letter-spacing:-.04em;margin:0 0 30px;text-shadow:0 2px 12px #0007}.studio-film h2 span{display:table;margin:0 auto;padding:7px 15px}.studio-film .film-highlight{background:#efefe8;color:#111216;box-shadow:6px 6px 0 #32dfcf;text-shadow:none}.studio-film-copy>p:not(.eyebrow){font-size:18px;line-height:1.8;margin:28px auto 18px;max-width:620px;color:#f0f1ec;text-shadow:0 2px 8px #000}.studio-film-copy>strong{font-size:17px}.studio-film-edge{position:absolute;left:0;right:0;height:12px;background:#111216;z-index:2}.studio-film-edge-top{top:0}.studio-film-edge-bottom{bottom:0}.film-toggle{position:absolute;right:5%;bottom:30px;display:flex;align-items:center;gap:8px;padding:10px 15px;min-height:44px;border:1px solid #ffffff70;border-radius:30px;color:#fff;background:#111216a6;font:600 13px 'DM Sans',sans-serif;cursor:pointer}.film-toggle:hover{background:#203c39}.film-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.5}.film-toggle .film-pause{display:none}.film-toggle.is-playing .film-play{display:none}.film-toggle.is-playing .film-pause{display:block}
@media(max-width:800px){.studio-film{min-height:570px}.studio-film-copy{padding:85px 6% 100px}.studio-film .eyebrow{font-size:9px;letter-spacing:1.7px}.studio-film h2{font-size:clamp(24px,5.8vw,42px);letter-spacing:-.05em;line-height:1.35}.studio-film h2 span{padding:7px 6px}.studio-film-copy>p:not(.eyebrow){font-size:15px;line-height:1.8;max-width:330px}.studio-film-copy>strong{font-size:14px}.film-desktop-break{display:none}.studio-film-video{object-position:52% center}.film-toggle{bottom:28px;font-size:12px}}

.studio-film{margin-inline:-5.555556%;width:111.111112%}
/* Vintage nylon borders: transparent frayed fibers overlap the moving picture. */
.studio-film-edge{height:116px;background:transparent url('assets/frayed-checker-nylon-v1.png') repeat-x center 60% / auto 260px;filter:drop-shadow(0 3px 2px #0007);pointer-events:none}
.studio-film-edge-top{top:-8px}
.studio-film-edge-bottom{bottom:-8px;transform:rotate(180deg)}
.studio-film{min-height:730px}
.studio-film-copy{padding-top:140px;padding-bottom:140px}
.film-toggle{bottom:124px;z-index:3}
@media(max-width:800px){.studio-film{min-height:650px}.studio-film-edge{height:85px;background-size:auto 190px}.studio-film-copy{padding-top:112px;padding-bottom:125px}.film-toggle{bottom:94px}}
/* Four rows on the left taper to three on the right, without repeating the slope. */
.studio-film-edge{height:155px;background-image:url('assets/frayed-checker-nylon-v2.png');background-repeat:no-repeat;background-size:100% 280px;background-position:center -88px}
.studio-film-edge-bottom{transform:scaleY(-1)}
.film-toggle{bottom:150px}
@media(max-width:800px){.studio-film-edge{height:105px;background-size:100% 200px;background-position:center -63px}.film-toggle{bottom:110px}}

.studio-film-edge-bottom{transform:scale(-1,-1)}
/* Continue the fabric into the team section, fading it over the dark backdrop. */
.studio-film{overflow:visible;z-index:1}
.studio-film-video,.studio-film-shade{clip-path:inset(0)}
.studio-film-edge-bottom{bottom:-76px;height:230px;background-size:100% 400px;background-position:center -126px;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 75%);mask-image:linear-gradient(to bottom,transparent 0%,#000 75%)}
.studio-film + .home-team{padding-top:95px;margin-top:0;margin-bottom:35px;z-index:0}
.studio-film + .home-team:before{display:none}
@media(max-width:800px){.studio-film-edge-bottom{bottom:-55px;height:165px;background-size:100% 290px;background-position:center -91px}.studio-film + .home-team{padding-top:75px}}

/* Preserve square checks; opaque ink-to-black fade conceals the video boundary. */
.studio-film-edge-bottom{bottom:-90px;height:max(300px,32vw);transform:none;background-image:url('assets/frayed-checker-nylon-textured-v5.png');background-size:max(100%,1000px) auto;background-position:center top;mask-image:none;-webkit-mask-image:none;filter:none}
.studio-film-edge-bottom:after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 42%,#080a0c 92%)}
.studio-film + .home-team{padding-top:110px;background:#080a0c}
@media(max-width:800px){.studio-film-edge-bottom{bottom:-80px;height:265px;background-size:850px auto}.studio-film + .home-team{padding-top:100px}}


/* One proportional scale for both fabric strips; retain square checks. */
.studio-film-edge{background-size:100% auto}
.studio-film-edge-top{height:18.45vw;background-position:center -10.48vw}
.studio-film-edge-bottom{height:32vw;bottom:-9.6vw;background-size:100% auto;background-position:center top}
.studio-film + .home-team{padding-top:calc(9.6vw + 20px)}
/* Extended upper cloth: two more complete rows at the shared checker scale. */
.studio-film-edge-top{height:30.8vw;top:-1px;background-image:url('assets/frayed-checker-nylon-textured-v5.png');background-position:center top;background-size:100% auto;transform:rotate(180deg)}
.studio-film-copy{padding-top:max(140px,23vw)}
@media(max-width:800px){.studio-film-copy{padding-top:max(112px,23vw)}}
/* Original irregular fringe, framed to five rows left / four right. */
.studio-film-edge-top{height:22vw;top:-1px;background-image:url('assets/frayed-checker-original-five-v8.png');background-position:center -9.5vw;background-size:100% auto;transform:none}

/* Left-anchored punk label; keep the moving picture open on the right. */
.studio-film-copy{max-width:none;text-align:left;padding: max(165px,21vw) 0 max(160px,21vw)}
.studio-film .film-punk-heading{width:min(49vw,620px);margin:0 0 16px;line-height:0;text-shadow:none}
.film-punk-heading img{display:block;width:100%;height:auto}
.studio-film-copy>p:not(.eyebrow){margin:0 0 16px 3.5%;max-width:440px;font-size:17px;line-height:1.65}
.studio-film-copy>strong{display:block;margin-left:3.5%;max-width:440px;font-size:16px}
@media(max-width:800px){
.studio-film-copy{align-self:end;padding:140px 0 max(62px,14vw)}
.studio-film .film-punk-heading{width:min(88vw,520px);margin-bottom:4px}
.studio-film-copy>p:not(.eyebrow){margin:0 0 12px 3.5%;max-width:69%;font-size:13px;line-height:1.55}
.studio-film-copy>strong{margin-left:3.5%;max-width:92%;font-size:13px}
.film-toggle{bottom:75px}
}
