*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#101011;color:#f4f2ed;font:15px Arial,sans-serif}button,a{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}header{position:absolute;top:0;z-index:2;width:100%;padding:29px 5%;display:flex;align-items:center;gap:48px;background:linear-gradient(#0009,transparent)}.logo{font-size:25px;letter-spacing:7px;font-weight:900}nav{display:flex;gap:28px;color:#ddd;font-size:13px}.contact{margin-left:auto;border:1px solid #ffffff55;border-radius:4px;padding:11px 18px;font-size:12px}.hero{min-height:690px;height:82vh;display:flex;align-items:center;padding:100px 5% 70px;position:relative;background:linear-gradient(90deg,#08090beb 5%,#10101465 70%),linear-gradient(0deg,#101011,transparent 50%),url('https://images.unsplash.com/photo-1440404653325-ab127d49abc1?auto=format&fit=crop&w=2200&q=85') center/cover}.hero:after{content:'01 / 03';position:absolute;right:5%;bottom:100px;font-size:12px;letter-spacing:3px;color:#bbb}.eyebrow{font-size:11px;letter-spacing:3px;color:#d8b887;font-weight:bold;text-transform:uppercase}h1{font-size:clamp(55px,7vw,110px);letter-spacing:-4px;line-height:.94;margin:25px 0}h1 em{font-style:normal;color:#d8b887}.intro{max-width:440px;line-height:1.8;color:#c3c1c1}.meta{font-size:12px;color:#c9c6c0;margin:24px 0;letter-spacing:1px}.btn{border:0;border-radius:3px;padding:14px 23px;display:inline-flex;align-items:center;gap:12px;background:#f0ece3;color:#161616;font-weight:bold;font-size:13px}.btn.secondary{background:#ffffff19;color:white;margin-left:9px;border:1px solid #ffffff26}.section{padding:24px 5% 32px}h2{font-size:23px;margin:0;letter-spacing:-.5px}.sectionhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}.subtle{color:#999;font-size:12px}.filters{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0 30px}.filter{border:1px solid #ffffff25;color:#bbb;background:transparent;border-radius:30px;padding:9px 17px;font-size:12px}.filter.active{background:#ece7dd;color:#111}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:19px}.card{background:none;border:0;text-align:left;padding:0;color:inherit;min-width:0}.poster{aspect-ratio:16/10;position:relative;overflow:hidden;border-radius:5px;background:#222}.poster img{width:100%;height:100%;object-fit:cover;transition:.4s;filter:brightness(.68)}.card:hover img{transform:scale(1.055);filter:brightness(.9)}.poster:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent,#000c)}.poster strong{position:absolute;bottom:19px;left:19px;z-index:1;font-size:23px;letter-spacing:1px;max-width:85%}.tag{position:absolute;top:13px;left:13px;z-index:1;font-size:9px;background:#0009;padding:6px 8px;letter-spacing:1px}.card h3{font-size:13px;margin:13px 0 7px}.card p{font-size:11px;color:#97979d;margin:0;line-height:1.5}.feature{margin:35px 5% 50px;padding:58px;min-height:320px;background:linear-gradient(90deg,#182020,#18202066),url('https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=1500&q=80') center/cover;border-radius:5px}.feature h2{font-size:46px;margin:17px 0}.feature p{max-width:430px;color:#bebebe;line-height:1.7}.plans{padding:65px 5%;background:#171719}.plans>p{color:#999;line-height:1.7;max-width:540px}.plans h2{font-size:42px;margin:15px 0}.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:35px}.plan{padding:29px;border:1px solid #ffffff22;border-radius:5px}.plan.highlight{border-color:#c6a16b;background:#c6a16b09}.plan h3{font-size:23px}.plan p,.plan li{color:#aaa;font-size:13px;line-height:1.8}.plan ul{padding-left:17px;min-height:98px}.plan .price{font-size:17px;color:#ece5d9;margin:25px 0}.plan .btn{width:100%;justify-content:center}.about{padding:70px 5%;display:grid;grid-template-columns:1fr 1fr;gap:60px}.about h2{font-size:38px;max-width:390px}.about p{color:#aaa;line-height:1.9;margin-top:0}footer{padding:25px 5% 40px;border-top:1px solid #ffffff13;display:flex;justify-content:space-between;color:#888;font-size:11px}dialog{background:#1b1b1e;color:white;border:1px solid #ffffff30;border-radius:8px;width:min(620px,92vw);padding:35px}dialog::backdrop{background:#000c}dialog p{color:#b9b9bd;line-height:1.8}.close{float:right;background:none;border:0;color:white;font-size:25px}input,textarea{display:block;width:100%;margin:8px 0 18px;padding:12px;background:#101011;border:1px solid #555;color:white;border-radius:3px}label{font-size:12px}dialog .btn{margin:6px 0}.note{font-size:11px;color:#888}a:focus-visible,button:focus-visible{outline:2px solid #d8b887;outline-offset:4px}@media(max-width:800px){nav{display:none}.logo{font-size:20px;letter-spacing:4px}.hero{min-height:640px}.grid{grid-template-columns:repeat(2,1fr)}.pricing{grid-template-columns:1fr}.about{grid-template-columns:1fr;gap:20px}.feature{padding:30px}.feature h2{font-size:36px}.plans h2{font-size:34px}.hero:after{display:none}header{gap:10px}.contact{padding:10px;font-size:10px}.poster strong{font-size:17px;left:12px}.section{padding-top:20px}footer{gap:20px}.plan ul{min-height:0}}
body{background:#090909;color:#f5f5f5}header{position:absolute;background:linear-gradient(#000d,transparent);gap:35px}.logo{letter-spacing:6px}header button{margin-left:auto}.hero{background:radial-gradient(ellipse at 70% 35%,#454545,#181818 45%,#080808 80%);height:85vh;min-height:620px;overflow:hidden;padding:0;display:block}.hero video,.detailBanner video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.heroShade{position:absolute;inset:0;background:linear-gradient(90deg,#000d,transparent),linear-gradient(0deg,#090909,transparent 70%)}.hero:after{display:none}.heroCopy{position:absolute;left:5%;bottom:23%;max-width:620px}.hero h1{font-size:clamp(45px,7vw,100px);letter-spacing:-2px;line-height:1.02;margin:20px 0}.heroCopy p{color:#ccc;line-height:1.7;max-width:480px}.eyebrow{color:#bbb;letter-spacing:2px}.heroControls{position:absolute;bottom:65px;right:5%;display:flex;gap:10px}.artNote{position:absolute;bottom:25px;left:5%;font-size:10px;color:#777}button{border:1px solid #ffffff30;color:#eee;background:#ffffff13;padding:11px 18px;border-radius:4px}button:hover{background:#ffffff26}.primary{background:white;color:#111;font-weight:bold}.primary:hover{background:#ddd}.actions{display:flex;gap:12px}#browse{padding:35px 5% 65px}.browseHead{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}.browseHead h2{font-size:35px;margin-top:12px}.browseHead>span{color:#888;font-size:12px}.tools{display:flex;gap:20px;align-items:center;justify-content:space-between;margin-bottom:40px}#filters{display:flex;gap:8px;flex-wrap:wrap}#filters button{font-size:12px;border-radius:30px;padding:10px 14px}#filters .active{background:white;color:black}.search input{width:200px;margin:0;background:#151515}.shelf{margin-bottom:42px}.shelfhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.shelfhead h3{font-size:21px;margin:0}.shelfhead span{color:#777;font-size:12px}.rail{display:flex;gap:17px;overflow-x:auto;scroll-snap-type:x mandatory;padding:3px 2px 17px;scrollbar-color:#444 #111}.filmCard{flex:0 0 265px;scroll-snap-align:start;border:0;background:none;padding:0;text-align:left;transition:transform .2s}.filmCard:hover{background:none;transform:translateY(-3px)}.filmArt{height:157px;border:1px solid #ffffff18;border-radius:5px;position:relative;overflow:hidden;background:linear-gradient(135deg,#343434,#101010)}.filmArt img{width:100%;height:100%;object-fit:cover}.filmArt:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,#000a 70%,#000e);pointer-events:none;z-index:0}.filmArt strong{position:absolute;bottom:14px;left:14px;right:14px;z-index:1;font-size:14px;font-weight:500;letter-spacing:-.2px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;max-height:2.5em}.filmArt small{position:absolute;top:13px;left:14px;z-index:1;font-size:9px;letter-spacing:2px;color:#bbb}.filmArt .playMark{position:absolute;right:13px;top:12px;border:1px solid #777;border-radius:50%;padding:7px;font-size:10px}.filmCard h4{font-size:11px;font-weight:400;color:#777;margin:10px 0 4px;letter-spacing:0}.filmCard p{color:#b0b0b0;font-size:12px;font-weight:400;line-height:1.45;margin:0}.empty{padding:30px;color:#aaa}footer{display:block;text-align:center;padding:45px;border-top:1px solid #222}footer p{color:#888;font-size:12px}footer small{font-size:10px;color:#666}.plan.highlight{border-color:#aaa;background:#ffffff06}.plans h2{font-size:40px}.plan .btn{background:#eee}.plans{background:#131313}dialog{padding:0;width:min(960px,95vw);max-height:92vh;background:#111;border:1px solid #333;overflow:auto;border-radius:9px}dialog::backdrop{background:#000d;backdrop-filter:blur(5px)}.close{position:absolute;right:17px;top:17px;z-index:5;border-radius:50%;background:#111c;padding:5px 12px;font-size:25px}.detailBanner{height:430px;position:relative;background:linear-gradient(135deg,#484848,#111)}.detailCopy{position:absolute;bottom:40px;left:5%;right:5%}.detailCopy h2{font-size:clamp(32px,5vw,61px);margin:20px 0 12px}.detailCopy p{margin:15px 0;color:#bbb}.detailBody{padding:12px 5% 40px}.information{display:grid;grid-template-columns:2fr 1fr;gap:35px;margin-bottom:25px}.information p{font-size:14px;line-height:1.8}.information span{font-size:12px;color:#ccc}dl{font-size:12px;line-height:1.8}dt{color:#777}dd{margin:0 0 10px}.comments{border-top:1px solid #333;margin-top:25px;padding-top:20px}.muted{font-size:12px!important;color:#888!important}.comments label,#enquiry label{display:block;font-size:12px}.comments input,.comments textarea,#enquiry input,#enquiry textarea{background:#1b1b1b;border:1px solid #444;width:100%;color:white;padding:12px;margin:8px 0 17px}.comment{border-bottom:1px solid #292929;padding:17px 0}.comment p{white-space:pre-wrap;font-size:14px;margin:8px 0}.comment small{color:#777}.comment button{font-size:11px;padding:5px 9px;margin:7px}.reply{margin-left:22px;border-left:1px solid #444;padding-left:15px}#commentStatus{display:block;color:#999;font-size:12px;margin-top:12px}#playerDialog{width:min(1200px,97vw);background:black;padding:50px 20px 15px}#playerMount{aspect-ratio:16/9;display:grid;place-items:center}#playerMount iframe,#playerMount video{width:100%;height:100%;border:0}#playerMount .missing{text-align:center;max-width:500px;padding:20px}#playerLabel{font-size:12px;margin:15px 0}#enquiry{padding:35px;max-width:600px}#enquiry .close{top:10px;right:10px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}body.modalOpen{overflow:hidden}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid white;outline-offset:3px}@media(max-width:800px){.tools{display:block}.search input{width:100%;margin-top:17px}.heroCopy{bottom:25%;right:5%}.heroControls{bottom:65px;left:5%;right:auto}.hero{min-height:650px}.filmCard{flex-basis:230px}.filmArt{height:140px}.information{grid-template-columns:1fr;gap:0}.detailBanner{height:360px}.browseHead h2{font-size:27px}.browseHead>span{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.hero video,.detailBanner video{display:none}}
video[hidden]{display:none!important}
/* Dervinci v3: dedicated film page */
[hidden]{display:none!important}header{position:absolute;z-index:10;padding:28px 5%}.filmView header{position:absolute;border-bottom:1px solid #ffffff16;background:#0a0a0a}.filmView #filmDialog{display:block}#filmDialog{width:100%;margin:0;border:0;background:#080808;max-height:none;overflow:visible;border-radius:0;padding:128px 0 0}.filmTopbar{height:64px;padding:0 5%;display:flex;justify-content:space-between;align-items:center;background:#0c0c0c}.filmTopbar button{font-size:12px;border:0;background:none;padding:10px 0;color:#aaa}.filmTopbar>span{font-size:9px;letter-spacing:2px;color:#666}.detailBanner{height:560px;min-height:400px;overflow:hidden;border-bottom:1px solid #292929;background:radial-gradient(ellipse at 75% 25%,#4b4b4b,#171717 50%,#080808);background-size:cover;background-position:center}.titleArt{position:absolute;right:3%;top:10%;font-size:clamp(110px,25vw,350px);font-weight:900;letter-spacing:-20px;color:#ffffff0c;max-width:80%;white-space:nowrap;overflow:hidden}.detailBanner .heroShade{background:linear-gradient(90deg,#080808ed 10%,#08080855 75%),linear-gradient(0deg,#080808,transparent 90%)}.detailCopy{left:8%;bottom:85px;max-width:680px}.detailCopy h1{font-size:clamp(60px,9vw,126px);font-weight:900;letter-spacing:-5px;line-height:.95;margin:20px 0}.detailCopy #filmEdition{font-size:19px;color:#eee;letter-spacing:.3px;margin:20px 0}.detailCopy #bannerSynopsis{font-size:13px;color:#aaa;line-height:1.8;max-width:410px;margin:20px 0 25px}.detailCopy #filmTitle:focus{outline:none}.detailBanner .artNote{left:auto;right:5%;bottom:20px;font-size:9px;color:#666}.filmContent{max-width:1160px;margin:0 auto;padding:0 45px}.watchSection{margin-top:30px}.watchHeading{display:flex;gap:20px;align-items:center;margin:22px 0}.watchHeading .eyebrow{font-size:9px;color:#777}.watchHeading h2{font-size:23px;margin:0}.watchHeading>span:last-child{margin-left:auto;font-size:12px;color:#888}#playerShell{border:1px solid #333;box-shadow:0 20px 70px #0008;border-radius:7px;overflow:hidden;background:#000}#playerMount{width:100%;aspect-ratio:16/9;background:#080808}#playerShell:fullscreen{width:100vw;height:100vh;display:grid;place-items:center;border:0;border-radius:0}#playerShell:fullscreen #playerMount{max-height:100vh}.playerPoster{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px;background:radial-gradient(ellipse at center,#242424,#060606);background-size:cover;background-position:center}.bigPlay{width:75px;height:75px;border-radius:50%;border:1px solid #fff9;background:#ffffff10;backdrop-filter:blur(10px);font-size:23px;padding-left:22px}.playerPoster strong{font-size:23px;letter-spacing:3px}.playerPoster>span{font-size:11px;color:#aaa}.playerFooter{display:flex;align-items:center;justify-content:space-between;padding:15px 0;color:#888}.playerFooter span{font-size:11px}.playerFooter button{font-size:11px;border:0;background:none;color:#bbb;padding-right:0}.information{display:grid;grid-template-columns:2fr 1fr;gap:65px;margin:35px 0 38px;padding-top:30px;border-top:1px solid #262626}.filmMeta{display:flex;gap:9px;flex-wrap:wrap;font-size:10px;letter-spacing:.5px}.filmMeta span:empty{display:none}.filmMeta span{border:1px solid #333;padding:5px 9px;border-radius:3px;color:#bbb}.information h2{font-size:22px;margin:22px 0 14px}.information p{font-size:14px;line-height:1.9;color:#aaa;max-width:620px}.productionCredit{padding-top:8px}.productionCredit .eyebrow{display:block;font-size:9px;color:#666}.productionCredit strong{display:block;font-size:20px;letter-spacing:5px;margin:15px 0}.productionCredit p{font-size:11px;line-height:1.9;color:#777}#productionDetails{border-top:1px solid #292929;border-bottom:1px solid #292929;padding:0;margin-bottom:55px}#productionDetails summary{cursor:pointer;list-style:none;padding:23px 0;font-size:13px}
#productionDetails summary::-webkit-details-marker{display:none}
#productionDetails summary span{float:right;font-size:20px;color:#aaa}
#productionDetails[open] summary span{transform:rotate(45deg)}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}.productionDetailsBody{padding:0 0 25px;max-width:800px}.productionDetailsBody p{font-size:13px;line-height:1.9;color:#999}.productionDetailsBody dl{display:flex;gap:65px}.productionDetailsBody dt{font-size:10px;color:#666}.productionDetailsBody dd{font-size:12px;color:#ccc}.comments{border:0;margin:0;padding:0 0 50px}.sectionHeading{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.sectionHeading h2{font-size:27px;margin-top:10px}.sectionHeading .eyebrow{font-size:9px;color:#777}.sectionHeading>span{color:#666;font-size:11px}#commentForm{display:grid;grid-template-columns:1fr 2fr;gap:0 20px;background:#101010;border:1px solid #292929;border-radius:6px;padding:23px;margin:22px 0}#commentForm label{color:#888;font-size:10px}#commentForm textarea{min-height:80px}#commentForm input,#commentForm textarea{background:#151515;border-color:#333;font-size:13px;border-radius:3px}#commentForm button{justify-self:start;align-self:start;font-size:11px;padding:12px 15px}#commentStatus{font-size:11px;grid-column:1/-1}.relatedSection{padding:35px 0 50px;border-top:1px solid #292929}.relatedSection .filmCard{flex-basis:245px}.sectionHeading button{font-size:11px;background:none;border:0;color:#aaa}.filmEnd{padding:35px 0 65px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #292929}.filmEnd>span{font-size:10px;letter-spacing:2px;color:#777}.filmEnd button{font-size:12px}#mediaStatus:empty{display:none}.search input{font-family:inherit}#filmDialog .filmArt{background:radial-gradient(at top right,#424242,#171717)}@media(max-width:700px){.filmTopbar>span{display:none}.detailBanner{height:510px}.detailCopy{left:6%;right:6%;bottom:70px}.detailCopy h1{font-size:72px;letter-spacing:-3px}.detailCopy #filmEdition{font-size:15px}.filmContent{padding:0 6%}.information{grid-template-columns:1fr;gap:15px}.productionCredit{border-top:1px solid #222;padding-top:20px}.productionDetailsBody dl{gap:25px;flex-wrap:wrap}.watchHeading .eyebrow{display:none}.watchHeading h2{font-size:21px}.playerFooter span{max-width:60%;line-height:1.6}#commentForm{display:block}#commentForm textarea{width:100%}.sectionHeading h2{font-size:22px}.sectionHeading button{max-width:115px}.filmEnd{gap:20px}.filmEnd>span{max-width:130px;line-height:1.8}.titleArt{letter-spacing:-9px}.detailBanner .artNote{font-size:8px}.bigPlay{width:57px;height:57px;font-size:17px;padding-left:20px}.playerPoster strong{font-size:15px}.playerPoster>span{font-size:9px}}
.logo img{display:block;width:76px;height:64px;object-fit:contain} header .logo{display:flex;align-items:center} @media(max-width:600px){.logo img{width:60px;height:52px}}
.hero .previewAnim,.detailBanner .previewAnim{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.hero video,.detailBanner video,.hero .previewAnim,.detailBanner .previewAnim{z-index:0}
.heroShade{z-index:1}.heroCopy,.detailCopy,.heroControls,.artNote,.filmTopbar,.titleArt{z-index:2}
.detailBanner .titleArt{position:absolute;z-index:1}
.detailBanner .heroShade{z-index:1;position:absolute}
.detailCopy{z-index:2}
@media(prefers-reduced-motion:reduce){.hero .previewAnim,.detailBanner .previewAnim{display:none!important}}
/* Gallery typography + header clearance (2026-11-09) */
.filmArt strong{font-size:14px;font-weight:500;bottom:14px;left:14px;right:14px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.filmArt:after{background:linear-gradient(180deg,transparent 35%,#000a 70%,#000e)}
.filmCard h4{font-size:13px;font-weight:500;color:#f0f0f0;margin:10px 0 4px;line-height:1.3}
.filmCard p{color:#9a9a9a;font-size:12px;line-height:1.4;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.relatedSection .filmArt strong{font-size:14px;font-weight:500}
.relatedSection .filmCard h4{font-size:13px;font-weight:500;color:#f0f0f0}
.relatedSection .filmCard p{color:#9a9a9a;font-size:12px}
header{position:absolute;top:0;left:0;right:0;z-index:20}
/* Keep hero copy below the absolute header on short viewports */
.heroCopy{top:130px;bottom:23%;max-height:none;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
/* Detail view: clear absolute header (~120px) before topbar + titles */
#filmDialog{padding-top:128px;scroll-margin-top:128px}
.filmTopbar{position:relative;z-index:5}
.detailCopy h1,#filmTitle,.hero h1,#heroTitle{scroll-margin-top:128px}
@media(max-width:800px){
.filmArt strong{font-size:13px;bottom:12px;left:12px;right:12px}
.heroCopy{top:118px;bottom:20%}
#filmDialog{padding-top:128px;scroll-margin-top:128px}
}
@media(max-width:600px){
.filmArt strong{font-size:12px}
.heroCopy{top:108px}
#filmDialog{padding-top:120px}
}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
#enquiry select{display:block;width:100%;margin:8px 0 17px;padding:12px;background:#1b1b1b;border:1px solid #444;color:white;border-radius:3px}
.cf-turnstile{margin:12px 0}
/* ===== QA6: pure black + nav + layout + HLS preview ===== */
:root{
--bg:#000000;
--surface:#141414;
--surface-2:#181818;
--border:#ffffff18;
--text:#ffffff;
--muted:#b3b3b3;
}
html,body{background:var(--bg)!important;color:var(--text)}
body,#homeContent,#filmDialog,main,footer,.hero,.detailBanner,#browse,.plans,.relatedSection,.filmContent,#playerMount,#playerShell{
background-color:#000000;
}
.heroShade{
background:linear-gradient(90deg,#000e 8%,#0006 42%,transparent 70%),
linear-gradient(0deg,#000 0%,#000a 28%,transparent 62%)!important;
}
.detailBanner .heroShade{
background:linear-gradient(90deg,#000f 6%,#0008 40%,transparent 72%),
linear-gradient(0deg,#000 0%,#000b 30%,transparent 68%)!important;
}
.hero,.detailBanner{
background:#000!important;
background-image:none!important;
}
.detailBanner{
background-color:#000!important;
background-size:cover;
background-position:center;
aspect-ratio:16/9;
height:auto;
max-height:min(72vh,720px);
min-height:320px;
}
.hero{
height:auto;
min-height:min(85vh,820px);
max-height:900px;
aspect-ratio:16/9;
}
@media(min-width:1280px){
.hero{min-height:720px;max-height:860px}
.detailBanner{max-height:680px}
}
@media(max-width:1024px){
.hero{min-height:560px;max-height:720px;aspect-ratio:16/9}
.detailBanner{max-height:520px;min-height:300px}
}
@media(max-width:768px){
.hero{min-height:480px;max-height:640px;aspect-ratio:16/9}
.detailBanner{max-height:420px;min-height:280px}
}
@media(max-width:430px){
.hero{min-height:420px;max-height:560px}
.detailBanner{max-height:360px;min-height:240px}
}
/* media composition: cover without extreme crop */
.hero video,.detailBanner video,
.hero .previewAnim,.detailBanner .previewAnim{
object-fit:cover;
object-position:center center;
}
.hero video,.detailBanner video{
opacity:0;
transition:opacity .55s ease;
z-index:0;
}
.hero video.previewReady,.detailBanner video.previewReady{opacity:1}
.hero .previewAnim,.detailBanner .previewAnim{
z-index:0;
transition:opacity .55s ease;
}
.previewPoster.posterFaded{opacity:0}
/* titles */
#heroTitle,.hero h1{
font-size:clamp(28px,5.2vw,92px)!important;
letter-spacing:clamp(-2px,-.04em,-1px);
line-height:1.05;
max-width:min(920px,92%);
overflow-wrap:anywhere;
}
#filmTitle,.detailCopy h1{
font-size:clamp(30px,6vw,108px)!important;
letter-spacing:clamp(-3px,-.05em,-1px);
line-height:1.02;
max-width:min(900px,95%);
overflow-wrap:anywhere;
position:relative;
z-index:3;
}
/* hero copy / controls — keep inside viewport */
.heroCopy{
left:5%;
right:5%;
bottom:clamp(88px,14%,140px);
max-width:640px;
z-index:3;
position:absolute;
}
.heroControls{
position:absolute;
z-index:3;
left:auto;
right:5%;
bottom:clamp(18px,4%,40px);
display:flex;
flex-wrap:wrap;
gap:10px;
max-width:calc(100% - 10%);
justify-content:flex-end;
}
.heroControls button{
white-space:nowrap;
font-size:12px;
padding:10px 14px;
}
.artNote{left:5%;right:auto;bottom:18px;z-index:3;position:absolute;max-width:45%}
@media(max-width:800px){
.heroCopy{bottom:clamp(100px,18%,150px);left:5%;right:5%}
.heroControls{
left:5%!important;
right:5%!important;
bottom:clamp(16px,3.5%,28px);
justify-content:flex-start;
max-width:calc(100% - 10%);
}
.artNote{display:none}
}
/* detail page: clear the fixed/absolute header + topbar */
#filmDialog{
padding-top:0!important;
background:#000!important;
}
.filmView header{
position:absolute;
background:linear-gradient(#000e,#0000)!important;
border-bottom:1px solid #ffffff14;
}
.filmTopbar{
position:relative;
z-index:5;
height:auto;
min-height:56px;
padding:14px 5%;
background:#000!important;
border-bottom:1px solid #ffffff14;
margin-top:88px; /* clear absolute site header */
}
.detailBanner{
position:relative;
margin:0;
}
.detailCopy{
position:absolute;
left:5%;
right:5%;
bottom:clamp(28px,8%,72px);
max-width:720px;
z-index:3;
padding-top:12px;
}
.detailCopy .actions{flex-wrap:wrap}
.detailBanner .artNote{bottom:12px}
@media(max-width:700px){
.filmTopbar{margin-top:76px;padding:12px 5%}
.detailCopy{bottom:clamp(20px,7%,56px)}
.detailCopy h1{font-size:clamp(28px,10vw,64px)!important}
}
/* header nav — logo | centered cats | CTA+search */
header{
position:absolute;
top:0;left:0;right:0;
z-index:20;
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:16px 20px;
padding:18px 4%;
background:linear-gradient(#000c,#0000)!important;
}
header .logo{justify-self:start; z-index:2}
#siteNav{
display:flex;
flex-wrap:nowrap;
gap:6px 16px;
align-items:center;
justify-content:center;
color:#ddd;
font-size:12px;
min-width:0;
justify-self:center;
grid-column:2;
z-index:2;
}
#siteNav a{
white-space:nowrap;
opacity:.88;
border:1px solid transparent;
border-radius:999px;
padding:7px 10px;
transition:border-color .2s ease, box-shadow .2s ease, opacity .2s ease, background .2s ease;
}
#siteNav a:hover,
#siteNav a:focus-visible{
opacity:1;
border-color:rgba(255,255,255,.45);
box-shadow:0 0 18px rgba(255,255,255,.12);
background:rgba(255,255,255,.04);
}
.headerActions{
justify-self:end;
display:flex;
align-items:center;
gap:14px;
flex-shrink:0;
z-index:2;
grid-column:3;
}
.headerActions .navCta,
header .navCta{
border:1px solid #ffffff35;
border-radius:999px;
padding:8px 16px;
font-weight:600;
opacity:1;
white-space:nowrap;
transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.headerActions .navCta:hover,
.headerActions .navCta:focus-visible,
header .navCta:hover,
header .navCta:focus-visible{
border-color:rgba(255,255,255,.75);
box-shadow:0 0 22px rgba(255,255,255,.16);
background:rgba(255,255,255,.06);
}
#searchToggle{flex-shrink:0; margin-left:0}
.menuToggle{
display:none;
flex-shrink:0;
font-size:12px;
padding:9px 12px;
justify-self:end;
grid-column:3;
z-index:2;
}
.mobileMenu{
position:fixed;
top:0;left:0;right:0;
z-index:30;
background:#141414;
border-bottom:1px solid #ffffff18;
padding:88px 5% 24px;
box-shadow:0 24px 60px #000a;
}
.mobileMenu nav{
display:flex;
flex-direction:column;
gap:4px;
}
.mobileMenu a{
display:block;
padding:14px 4px;
border-bottom:1px solid #ffffff10;
font-size:15px;
}
.mobileMenu a:last-child{
margin-top:10px;
border:1px solid #ffffff30;
border-radius:999px;
text-align:center;
padding:14px;
border-bottom-color:#ffffff30;
font-weight:600;
}
/* Header → mobile menu: raised to 1320px after Studio nav item (7 links) */
@media(max-width:1320px){
#siteNav, .headerActions{display:none}
.menuToggle{display:inline-flex}
header{grid-template-columns:1fr auto}
}
@media(min-width:1321px){
.mobileMenu{display:none!important}
}
/* Cursor-following soft glow */
.pointerGlow{
position:fixed;
inset:0;
pointer-events:none;
z-index:1;
opacity:0;
transition:opacity .35s ease;
background:radial-gradient(circle 380px at var(--glow-x,50%) var(--glow-y,50%), rgba(255,255,255,.055), transparent 70%);
mix-blend-mode:screen;
}
.pointerGlow.isOn{opacity:1}
.browseHead, .tools, #rows, .plans, footer, #enquiry, .mobileMenu{
position:relative;
z-index:2;
}
.heroCopy, .detailCopy, .heroControls, .artNote, .titleArt{z-index:3}
.filmTopbar{z-index:4}
header{z-index:20}
@media (hover:none), (pointer:coarse){
.pointerGlow{display:none!important}
}
@media (prefers-reduced-motion:reduce){
.pointerGlow{display:none!important}
}
/* anthracite surfaces only */
#enquiry,dialog,#commentForm,.mobileMenu{
background:#151515!important;
color:#fff;
}
#enquiry input,#enquiry textarea,#enquiry select,
#commentForm input,#commentForm textarea,
.search input{
background:#111!important;
border-color:#333!important;
color:#fff;
}
.plans,.plan{
background:#000;
}
.plan{
border:1px solid #ffffff18;
background:#0a0a0a;
}
.plan.highlight{background:#111}
footer{
background:#000!important;
border-top:1px solid #1a1a1a;
color:#999;
}
.rail{scrollbar-color:#333 #000}
.filmArt{border-color:#ffffff14;background:#0a0a0a}
#playerShell{background:#000;border-color:#222}
.playerPoster{background:#000}
.information,.comments,.relatedSection,.filmEnd,#productionDetails{
border-color:#1f1f1f;
}
button{
border-color:#ffffff28;
background:#ffffff12;
color:#eee;
}
button.primary,.primary{
background:#fff;
color:#111;
border-color:#fff;
}
/* secondary text contrast ~ #b3b3b3 on #000 = 9.4:1 */
.muted,#heroEdition,#heroSynopsis,#bannerSynopsis,#filmEdition,
.filmCard p,.filmCard h4,.browseHead>span,.shelfhead span,footer p,footer small{
color:#b3b3b3;
}
.eyebrow{color:#cfcfcf}
/* do not filter/overlay film media beyond readability gradients already set */
.hero video,.detailBanner video,.hero .previewAnim,.detailBanner .previewAnim,
.filmArt img{filter:none!important}
/* gallery cards: keep current styling; ensure black page behind */
#browse{background:#000}
/* ===== QA6b layout hardening ===== */
.heroCopy{
left:5% !important;
right:5% !important;
width:auto !important;
max-width:min(640px, calc(100% - 10%)) !important;
bottom:clamp(96px, 16%, 150px) !important;
top:auto !important;
max-height:calc(100% - 120px);
overflow:hidden;
box-sizing:border-box;
}
#heroTitle,.hero h1{
font-size:clamp(26px, 6vw, 88px) !important;
max-width:100% !important;
}
.heroControls{
left:5% !important;
right:5% !important;
width:auto !important;
max-width:calc(100% - 10%) !important;
box-sizing:border-box;
flex-wrap:wrap !important;
justify-content:flex-start !important;
}
@media(min-width:801px){
.heroControls{ left:auto !important; right:5% !important; justify-content:flex-end !important; max-width:min(480px, calc(100% - 10%)) !important; }
}
.heroControls button{ max-width:100%; }
/* keep hero title below header on small screens */
@media(max-width:800px){
.hero{ padding-top:0; }
.heroCopy{
bottom:clamp(88px, 15%, 130px) !important;
padding-top:0;
}
#heroTitle,.hero h1{ font-size:clamp(24px, 8.5vw, 44px) !important; margin:10px 0 !important; }
.hero .actions{ flex-wrap:wrap; gap:8px; }
.hero .actions .primary, .hero .actions button{ margin-left:0 !important; }
}
/* detail title clear of header/topbar */
.filmTopbar{ margin-top:92px !important; }
@media(max-width:700px){
.filmTopbar{ margin-top:80px !important; }
.detailCopy{
left:5% !important; right:5% !important;
width:auto !important;
max-width:none !important;
bottom:clamp(24px, 8%, 64px) !important;
}
#filmTitle,.detailCopy h1{ font-size:clamp(26px, 9vw, 56px) !important; max-width:100% !important; }
}
/* ===== QA6c: force hero chrome inside viewport ===== */
.heroCopy{
left:5vw !important;
right:5vw !important;
width:90vw !important;
max-width:90vw !important;
box-sizing:border-box !important;
}
#heroTitle,.hero h1{
width:100% !important;
max-width:100% !important;
overflow-wrap:anywhere !important;
word-break:break-word !important;
letter-spacing:clamp(-1.5px,-.02em,0px) !important;
}
.heroControls{
left:5vw !important;
right:5vw !important;
width:90vw !important;
max-width:90vw !important;
box-sizing:border-box !important;
display:flex !important;
flex-wrap:wrap !important;
gap:8px !important;
justify-content:flex-start !important;
}
@media(min-width:901px){
.heroControls{
left:auto !important;
right:5vw !important;
width:auto !important;
max-width:min(420px,90vw) !important;
justify-content:flex-end !important;
}
}
.heroControls button{
flex:0 1 auto;
white-space:normal;
}
.detailCopy{
left:5vw !important;
right:5vw !important;
width:90vw !important;
max-width:90vw !important;
box-sizing:border-box !important;
}
#filmTitle,.detailCopy h1{
width:100% !important;
max-width:100% !important;
overflow-wrap:anywhere !important;
}
/* ===== QA7: full-bleed hero/detail banners (no side black strip) =====
aspect-ratio + max-height was shrinking used width. Keep width:100% and
derive height from viewport: 16:9 of width, capped by max-height. Media
uses object-fit:cover so only minor top/bottom crop when capped. */
.hero,
.detailBanner{
width:100% !important;
max-width:100vw !important;
margin-left:0 !important;
margin-right:0 !important;
aspect-ratio:auto !important;
height:min(56.25vw, 85vh) !important;
max-height:85vh !important;
min-height:280px !important;
overflow:hidden !important;
position:relative !important;
background:#000 !important;
}
@media(min-width:1280px){
.hero{ height:min(56.25vw, 82vh) !important; max-height:82vh !important; min-height:520px !important; }
.detailBanner{ height:min(56.25vw, 78vh) !important; max-height:78vh !important; min-height:420px !important; }
}
@media(max-width:768px){
.hero{ height:min(56.25vw, 70vh) !important; max-height:70vh !important; min-height:320px !important; }
.detailBanner{ height:min(56.25vw, 62vh) !important; max-height:62vh !important; min-height:260px !important; }
}
/* Media always fills the banner box edge-to-edge */
.hero video,
.detailBanner video,
.hero .previewAnim,
.detailBanner .previewAnim{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center center !important;
}
.heroShade{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
}
/* Soft left readability gradient only — no hard side edge on media */
.hero .heroShade{
background:
linear-gradient(90deg, #000e 0%, #0008 28%, #0000 55%),
linear-gradient(0deg, #000 0%, #000a 22%, #0000 55%) !important;
}
.detailBanner .heroShade{
background:
linear-gradient(90deg, #000f 0%, #0009 30%, #0000 58%),
linear-gradient(0deg, #000 0%, #000b 24%, #0000 58%) !important;
}
/* QA7b: keep mobile hero title below absolute header */
@media(max-width:800px){
.heroCopy{
bottom:clamp(72px, 14%, 110px) !important;
top:auto !important;
padding-top:0 !important;
max-height:calc(100% - 96px) !important;
}
#heroTitle,.hero h1{
margin-top:0 !important;
font-size:clamp(22px, 7.2vw, 36px) !important;
}
.hero .eyebrow{ margin-top:0; }
/* ensure first line clears header */
.heroCopy{ padding-top:8px; }
}
@media(max-width:800px){
.hero{ min-height:360px !important; }
.heroCopy{
bottom:clamp(64px,12%,96px) !important;
max-height:calc(100% - 110px) !important;
padding-top:12px !important;
}
#heroTitle,.hero h1{ font-size:clamp(20px,6.5vw,32px) !important; line-height:1.1 !important; }
}
.mobileMenu[hidden]{ display:none !important; }
/* ===== QA7: guided enquiry + card hover ===== */
.enquiryDialog{
width:min(560px,96vw)!important;
max-height:min(92vh,900px)!important;
overflow:auto!important;
background:#141414!important;
color:#fff!important;
border:1px solid #ffffff22!important;
border-radius:14px!important;
padding:28px 22px 22px!important;
opacity:1!important;
}
.enquiryDialog::backdrop{background:#000e!important; backdrop-filter:none!important;}
.enquiryDialog .eyebrow{letter-spacing:2px;font-size:10px;color:#bbb}
.ewPricing{margin:6px 0 0;font-size:12px;color:#b3b3b3}
#enquiryWizard{margin-top:10px}
.ewProgress{height:3px;background:#222;border-radius:99px;overflow:hidden;margin:12px 0 8px}
.ewProgress>span{display:block;height:100%;background:#fff;border-radius:99px;transition:width .25s}
.ewStepLabel{font-size:11px;color:#888;margin:0}
.ewTitle{font-size:clamp(22px,4vw,30px)!important;margin:8px 0 14px!important;letter-spacing:-.5px}
.ewLead{color:#ccc;font-size:14px;line-height:1.5;margin:0 0 14px}
.ewNote{font-size:12px;color:#9a9a9a;line-height:1.5;margin:10px 0}
.ewOffers{display:grid;gap:10px}
.ewOffer{
text-align:left;border:1px solid #ffffff28;background:#111;border-radius:12px;
padding:14px 16px;color:#eee;display:flex;flex-direction:column;gap:4px;
}
.ewOffer.on,.ewOffer[aria-pressed="true"]{border-color:#fff;background:#1a1a1a}
.ewOffer strong{font-size:15px}
.ewOffer span{font-size:12px;color:#999}
.ewField{border:0;margin:0 0 14px;padding:0}
.ewField legend{font-size:12px;color:#bbb;margin-bottom:8px}
.ewChips{display:flex;flex-wrap:wrap;gap:8px}
.ewChip{
border:1px solid #ffffff30;background:#0c0c0c;color:#eee;border-radius:999px;
padding:8px 12px;font-size:12px;
}
.ewChip.on,.ewChip[aria-pressed="true"]{background:#fff;color:#111;border-color:#fff}
.ewLabel{display:block;font-size:12px;color:#bbb;margin:10px 0}
.ewOpt{color:#777;font-weight:400}
.ewInput,.ewText,#enquiryWizard input,#enquiryWizard textarea{
display:block;width:100%;margin-top:6px;padding:12px 14px;border-radius:10px;
background:#0a0a0a!important;border:1px solid #333!important;color:#fff!important;font:inherit;
}
.ewNav{display:flex;justify-content:space-between;gap:12px;margin-top:18px}
.ewBack,.ewNext,.ewEdit{
border-radius:999px;padding:11px 16px;font-size:13px;
}
.ewBack{background:transparent;border:1px solid #444;color:#ccc}
.ewBack:disabled{opacity:.35}
.ewNext.primary,.enquiryDialog .primary{background:#fff;color:#111;border:0;font-weight:700}
.ewSummary{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.ewSumRow{
display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
background:#111;border:1px solid #2a2a2a;border-radius:12px;padding:12px 14px;
}
.ewSumRow p{margin:4px 0 0;color:#ccc;font-size:13px;line-height:1.45}
.ewEdit{background:transparent;border:1px solid #555;color:#ddd;font-size:11px;padding:7px 10px;flex-shrink:0}
#enquiryStatus{font-size:12px;color:#bbb;min-height:1.2em}
/* Cards interactive */
.rail{
padding:12px 8px 22px!important;
margin:0 -4px;
}
.filmCard{
position:relative;
transform:translateZ(0);
transition:transform .25s ease, box-shadow .25s ease;
transform-origin:center center;
will-change:transform;
}
.filmCard:hover,
.filmCard.isFocus,
.filmCard:focus-visible{
transform:scale(1.035) translateY(-4px);
z-index:3;
}
.filmCard:focus-visible{outline:none}
.filmArt{
transition:border-color .25s ease, box-shadow .25s ease;
border:1px solid transparent!important;
background:#0a0a0a;
}
.filmCard:hover .filmArt,
.filmCard.isFocus .filmArt,
.filmCard:focus-visible .filmArt,
.filmCard.isPreviewing .filmArt{
border-color:rgba(255,255,255,.8)!important;
box-shadow:0 14px 40px #000c, 0 0 0 1px rgba(255,255,255,.15);
}
.cardPreviewVid{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
opacity:0;transition:opacity .35s ease;
}
.cardPreviewVid.previewReady{opacity:1}
.filmArt .cardPoster{position:relative;z-index:0;transition:opacity .35s ease}
.filmArt .cardPoster.posterFaded{opacity:0}
.shelf .rail .filmCard:first-child{transform-origin:left center}
.shelf .rail .filmCard:last-child{transform-origin:right center}
.shelf .rail .filmCard:first-child:hover,
.shelf .rail .filmCard:first-child.isFocus{transform:scale(1.035) translateY(-4px)}
.shelf .rail .filmCard:last-child:hover,
.shelf .rail .filmCard:last-child.isFocus{transform:scale(1.035) translateY(-4px)}
.playerFooterActions{display:flex;gap:12px;align-items:center}
#repeatToggle{font-size:11px;border:1px solid #ffffff30;background:#ffffff12;border-radius:999px;padding:8px 12px}
@media (hover:none),(pointer:coarse){
.filmCard:hover{transform:none;box-shadow:none}
.filmCard:hover .filmArt{border-color:transparent!important;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
.filmCard,.filmArt,.cardPreviewVid{transition:none!important}
.filmCard:hover,.filmCard.isFocus,.filmCard:focus-visible{transform:none!important}
.cardPreviewVid{display:none!important}
}
/* qa9b-fix */
/* ===== QA9: restore banner copy bottom-left + header backdrop ===== */
header{
background:linear-gradient(180deg, #000 0%, #000e 55%, #0000 100%) !important;
/* solid enough that scrolling content cannot read through */
-webkit-backdrop-filter:none;
backdrop-filter:none;
}
header::before{
content:"";
position:absolute;
inset:0;
z-index:-1;
pointer-events:none;
background:linear-gradient(180deg, #000 0%, rgba(0,0,0,.92) 42%, rgba(0,0,0,.55) 72%, transparent 100%);
}
.filmView header{
background:#0a0a0a !important;
border-bottom:1px solid #ffffff16;
}
.filmView header::before{display:none}
.heroCopy{
position:absolute !important;
left:5% !important;
right:auto !important;
width:auto !important;
max-width:min(640px, 90%) !important;
bottom:clamp(72px, 16%, 150px) !important;
top:auto !important;
z-index:3 !important;
display:flex !important;
flex-direction:column !important;
justify-content:flex-end !important;
overflow:visible !important;
max-height:none !important;
padding-top:0 !important;
box-sizing:border-box !important;
}
.heroCopy .eyebrow,
#hero .eyebrow{
display:block !important;
visibility:visible !important;
opacity:1 !important;
position:relative !important;
z-index:3 !important;
margin:0 0 8px !important;
}
#heroTitle{
position:relative !important;
z-index:3 !important;
margin-top:8px !important;
}
.heroControls{
position:absolute !important;
bottom:65px !important;
right:5% !important;
left:auto !important;
z-index:3 !important;
}
.hero .artNote,
#hero .artNote{
position:absolute !important;
bottom:22px !important;
left:5% !important;
z-index:3 !important;
}
.detailBanner{
position:relative !important;
overflow:hidden !important;
}
.detailCopy{
position:absolute !important;
left:5% !important;
right:5% !important;
width:auto !important;
max-width:min(720px, 90%) !important;
bottom:clamp(36px, 9%, 88px) !important;
top:auto !important;
z-index:3 !important;
padding-top:0 !important;
box-sizing:border-box !important;
display:flex !important;
flex-direction:column !important;
justify-content:flex-end !important;
}
.detailCopy .eyebrow,
#filmCategory{
display:block !important;
visibility:visible !important;
opacity:1 !important;
position:relative !important;
z-index:3 !important;
margin:0 0 10px !important;
}
#filmTitle{
position:relative !important;
z-index:3 !important;
margin-top:4px !important;
}
.filmTopbar{
position:relative !important; /* sits in flow under header, not over banner copy */
z-index:4 !important;
margin-top:88px !important; /* clear absolute site header */
}
.titleArt{
position:absolute !important;
z-index:1 !important;
pointer-events:none !important;
}
@media(max-width:800px){
.heroCopy{
left:5% !important;
right:5% !important;
max-width:none !important;
bottom:clamp(64px, 14%, 110px) !important;
}
.detailCopy{
left:6% !important;
right:6% !important;
bottom:clamp(28px, 8%, 64px) !important;
}
.filmTopbar{margin-top:76px !important}
.heroControls{bottom:56px !important; left:5% !important; right:auto !important}
}
@media(max-width:480px){
.heroCopy{bottom:clamp(56px, 12%, 96px) !important}
.detailCopy{bottom:clamp(24px, 7%, 52px) !important}
}
/* ===== QA9b: fit detail/hero copy inside short banners ===== */
@media(max-width:700px){
.detailBanner{height:min(72vh, 520px) !important; min-height:360px !important}
.detailCopy{
bottom:clamp(20px, 6%, 40px) !important;
max-height:calc(100% - 16px) !important;
overflow:hidden !important;
}
.detailCopy .eyebrow,
#filmCategory{
font-size:10px !important;
margin:0 0 6px !important;
letter-spacing:1.5px !important;
}
#filmTitle, .detailCopy h1{
font-size:clamp(28px, 11vw, 48px) !important;
line-height:1.05 !important;
margin:4px 0 8px !important;
letter-spacing:-1px !important;
}
#filmEdition{font-size:14px !important; margin:0 0 10px !important}
#bannerSynopsis{display:block !important; font-size:13px !important; max-width:100% !important; line-height:1.55 !important}
.detailCopy .actions{gap:8px !important; margin-top:4px !important}
.detailCopy .actions .primary,
.detailCopy .actions button{padding:10px 14px !important; font-size:12px !important}
.heroCopy{
max-height:calc(100% - 24px) !important;
overflow:hidden !important;
}
#heroTitle, .hero h1{
font-size:clamp(28px, 10vw, 44px) !important;
margin:6px 0 8px !important;
}
#heroSynopsis{display:block !important; font-size:13px !important; max-width:100% !important}
}
@media(max-width:420px){
.detailBanner{height:min(68vh, 420px) !important; min-height:320px !important}
#filmTitle, .detailCopy h1{font-size:clamp(26px, 10.5vw, 40px) !important}
.filmTopbar{margin-top:72px !important; padding:10px 5% !important}
}
/* ===== QA10: banner near-black #0B0B0B + sound toggle ===== */
:root{
--banner-near-black:#0B0B0B;
--banner-near-black-rgb:11,11,11;
}
.hero,
.detailBanner{
background:#0B0B0B !important;
background-color:#0B0B0B !important;
}
.heroShade{
background:
linear-gradient(90deg, rgba(11,11,11,.93) 0%, rgba(11,11,11,.55) 28%, rgba(11,11,11,0) 55%),
linear-gradient(0deg, rgb(11,11,11) 0%, rgba(11,11,11,.67) 22%, rgba(11,11,11,0) 55%) !important;
}
.detailBanner .heroShade,
.hero .heroShade{
background:
linear-gradient(90deg, rgb(11,11,11) 0%, rgba(11,11,11,.60) 30%, rgba(11,11,11,0) 58%),
linear-gradient(0deg, rgb(11,11,11) 0%, rgba(11,11,11,.73) 24%, rgba(11,11,11,0) 58%) !important;
}
.filmTopbar{
background:#0B0B0B !important;
}
.filmView header{
background:#0B0B0B !important;
}
header{
background:linear-gradient(180deg, #0B0B0B 0%, rgba(11,11,11,.93) 55%, rgba(11,11,11,0) 100%) !important;
}
header::before{
background:linear-gradient(180deg, #0B0B0B 0%, rgba(11,11,11,.92) 42%, rgba(11,11,11,.55) 72%, transparent 100%) !important;
}
.filmView header::before{display:none !important}
#filmDialog{
background:#0B0B0B !important;
}
/* letterbox / empty media areas inside banners */
.hero video,
.detailBanner video,
.hero .previewAnim,
.detailBanner .previewAnim{
background-color:#0B0B0B !important;
}
#playerMount{
background:#0B0B0B !important;
}
/* soft seam into page body #000 if banner sits above black page */
.hero::after{
content:"" !important;
display:block !important;
position:absolute !important;
left:0;right:0;bottom:0;
height:48px;
pointer-events:none;
z-index:1;
font-size:0 !important;
color:transparent !important;
background:linear-gradient(0deg, #000 0%, rgba(11,11,11,0) 100%) !important;
}
.detailBanner{
border-bottom-color:#0B0B0B !important;
}
/* Sound toggle — match Pause / Next controls */
.soundToggle{
display:inline-flex;
align-items:center;
gap:8px;
border:1px solid #ffffff30;
color:#eee;
background:#ffffff13;
padding:11px 18px;
border-radius:4px;
font-size:12px;
line-height:1.2;
white-space:nowrap;
}
.soundToggle:hover{background:#ffffff26}
.soundToggle:focus-visible{
outline:2px solid #fff;
outline-offset:3px;
}
.soundToggle[aria-pressed="true"]{
border-color:#ffffff55;
background:#ffffff1f;
}
.soundToggle[hidden]{display:none !important}
.heroControls .soundToggle,
.detailCopy .actions .soundToggle{
flex:0 0 auto;
}
@media(max-width:600px){
.soundToggle{padding:10px 14px;font-size:11px}
}
/* ===== QA11: detail page unify to site near-black / pure black ===== */
/* Cause: #filmDialog was painted #0B0B0B end-to-end (reads charcoal vs homepage #000),
filmTopbar/detailBanner still inherited older gray borders (#292929 / #0c0c0c chrome).
Keep banner/letterbox/back-bar at #0B0B0B; page body under the banner matches homepage #000. */
#filmDialog{
background:#000000 !important;
background-color:#000000 !important;
}
.filmContent,
.watchSection,
.information,
.comments,
.relatedSection,
.filmEnd,
#productionDetails{
background:#000000 !important;
background-color:#000000 !important;
}
.filmTopbar{
background:#0B0B0B !important;
background-color:#0B0B0B !important;
border-bottom-color:rgba(255,255,255,.08) !important;
}
.detailBanner{
background:#0B0B0B !important;
background-color:#0B0B0B !important;
background-image:none !important;
border-bottom:1px solid #0B0B0B !important;
}
.detailBanner video,
.detailBanner .previewAnim{
background-color:#0B0B0B !important;
}
.filmView header{
background:#0B0B0B !important;
border-bottom-color:rgba(255,255,255,.08) !important;
}
#playerMount,
#playerShell{
background:#000000 !important;
}
/* ===== QA11b: content fields (tagline + behind HTML) ===== */
.tagline,#heroTagline,#bannerTagline{
font-size:15px;
letter-spacing:.2px;
color:#ddd;
margin:8px 0 10px;
max-width:520px;
line-height:1.45;
}
#extendedInfo h3{
font-size:14px;
letter-spacing:.4px;
margin:18px 0 8px;
color:#ccc;
font-weight:700;
}
#extendedInfo p{
font-size:13px;
line-height:1.9;
color:#999;
margin:0 0 12px;
max-width:800px;
}
#aboutProductionWrap h2{font-size:22px;margin:22px 0 14px}
#aboutProduction{font-size:14px;line-height:1.9;color:#aaa;max-width:620px;white-space:pre-wrap}
#filmSynopsis{white-space:pre-wrap}
/* ===== THE STUDIO (#studio) — text-only capabilities page ===== */
#studioPage{
display:block;
min-height:100vh;
background:#000;
color:#e8e8e8;
padding-top:128px;
scroll-margin-top:128px;
}
#studioPage[hidden]{display:none!important}
.studioView #homeContent,
.studioView #filmDialog{display:none!important}
.studioView header{
position:fixed;
background:#000 !important;
border-bottom:1px solid #ffffff12;
}
.studioView header::before{
display:none !important;
}
.studioInner{
max-width:1280px;
margin:0 auto;
padding:0 4% 80px;
position:relative;
z-index:2;
}
.studioHero{
padding:48px 0 72px;
max-width:none;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(220px,380px);
gap:clamp(48px,8vw,120px);
align-items:center;
}
.studioHeroCopy{
max-width:720px;
min-width:0;
}
.studioHeroMark{
justify-self:center;
align-self:center;
width:100%;
max-width:340px;
pointer-events:none;
user-select:none;
}
.studioHeroMark img{
display:block;
width:100%;
height:auto;
object-fit:contain;
filter:brightness(1.05);
}
.studioEyebrow{
display:block;
font-size:11px;
letter-spacing:.18em;
text-transform:uppercase;
color:#9a9a9a;
margin-bottom:22px;
}
#studioHeading:focus,
#studioHeading:focus-visible,
.studioHero h1:focus,
.studioHero h1:focus-visible{outline:none!important; box-shadow:none!important}
.studioHero h1{
font-size:clamp(42px,6.5vw,72px);
font-weight:700;
letter-spacing:-.02em;
line-height:1.05;
color:#fff;
margin:0 0 18px;
}
.studioTagline{
font-size:clamp(16px,2vw,22px);
color:#bdbdbd;
margin:0 0 36px;
line-height:1.45;
}
.studioIntro p{
font-size:15px;
line-height:1.85;
color:#a8a8a8;
margin:0 0 14px;
max-width:680px;
}
.studioCloseHero{
margin-top:28px!important;
color:#ddd!important;
font-weight:600;
letter-spacing:.02em;
}
.studioSectionHead{
margin:24px 0 28px;
}
.studioSectionHead .eyebrow{
font-size:11px;
letter-spacing:.16em;
color:#888;
}
.studioSectionHead h2{
font-size:clamp(22px,3vw,32px);
color:#fff;
margin:12px 0 10px;
letter-spacing:.04em;
}
.studioSectionHead p{
color:#999;
font-size:14px;
line-height:1.7;
max-width:640px;
}
.studioGrid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:16px;
align-items:stretch;
}
.studioCard{
background:#0B0B0B;
border:1px solid #2a2a2a;
border-radius:14px;
min-height:168px;
display:flex;
flex-direction:column;
transition:border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.studioCard:hover,
.studioCard:focus-within{
border-color:#4a4a4a;
box-shadow:0 0 0 1px #ffffff10, 0 18px 40px #0008;
}
.studioCard[open]{
border-color:#5a5a5a;
background:#0f0f0f;
grid-column:span 1;
}
.studioCard summary{
list-style:none;
cursor:pointer;
padding:22px 20px 20px;
display:flex;
flex-direction:column;
gap:12px;
flex:1;
position:relative;
min-height:168px;
box-sizing:border-box;
}
.studioCard summary::-webkit-details-marker{display:none}
.studioCardLabel{
font-size:10px;
letter-spacing:.14em;
text-transform:uppercase;
color:#7a7a7a;
}
.studioCardTitle{
font-size:18px;
font-weight:650;
color:#fff;
line-height:1.25;
letter-spacing:.01em;
}
.studioCardShort{
font-size:13px;
line-height:1.55;
color:#9c9c9c;
margin-top:auto;
padding-right:18px;
}
.studioCardChevron{
position:absolute;
right:18px;
bottom:18px;
width:10px;height:10px;
border-right:1.5px solid #888;
border-bottom:1.5px solid #888;
transform:rotate(45deg);
transition:transform .25s ease;
opacity:.7;
}
.studioCard[open] .studioCardChevron{
transform:rotate(225deg);
bottom:22px;
}
.studioCardBody{
padding:0 20px 22px;
border-top:1px solid #222;
margin-top:-4px;
}
.studioCardOfficial{
font-size:11px;
letter-spacing:.08em;
text-transform:uppercase;
color:#888;
margin:16px 0 8px;
}
.studioCardSubtitle{
font-size:16px;
color:#eee;
margin:8px 0 12px;
font-weight:600;
line-height:1.35;
}
.studioCardDesc{
font-size:13.5px;
line-height:1.75;
color:#a3a3a3;
margin:0 0 16px;
}
.studioCardExpertise{
font-size:12px;
line-height:1.7;
color:#bbb;
margin:0;
padding-top:12px;
border-top:1px solid #222;
}
.studioCardExpertise span{
display:block;
font-size:10px;
letter-spacing:.12em;
text-transform:uppercase;
color:#777;
margin-bottom:6px;
}
.studioProcess{
margin-top:88px;
padding-top:48px;
border-top:1px solid #1e1e1e;
}
.studioStages{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px 20px;
margin-top:8px;
}
.studioStage{
background:#0B0B0B;
border:1px solid #262626;
border-radius:12px;
padding:22px 20px;
}
.studioStageNum{
display:block;
font-size:10px;
letter-spacing:.16em;
color:#777;
margin-bottom:10px;
}
.studioStage h3{
font-size:20px;
color:#fff;
margin:0 0 10px;
letter-spacing:.02em;
}
.studioStage p{
font-size:13.5px;
line-height:1.7;
color:#9a9a9a;
margin:0;
}
.studioClosing{
margin-top:96px;
padding:56px 0 40px;
border-top:1px solid #1e1e1e;
max-width:760px;
}
.studioClosing h2{
font-size:clamp(22px,3vw,30px);
color:#fff;
letter-spacing:.04em;
margin:0 0 22px;
line-height:1.3;
}
.studioClosingBody{
font-size:15px;
line-height:1.85;
color:#a8a8a8;
margin:0 0 28px;
}
.studioCloseLine{
font-size:clamp(16px,2.2vw,22px);
font-weight:650;
color:#f0f0f0;
letter-spacing:.04em;
margin:0 0 6px;
line-height:1.35;
}
.studioSignature{
margin:28px 0 36px;
font-size:12px;
letter-spacing:.14em;
text-transform:uppercase;
color:#888;
}
.studioCtas{
display:flex;
flex-wrap:wrap;
gap:14px 18px;
align-items:center;
}
.studioCta{
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 22px;
border-radius:999px;
border:1px solid #ffffff35;
color:#eee;
font-size:13px;
font-weight:600;
background:transparent;
text-decoration:none;
cursor:pointer;
transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.studioCta:hover,
.studioCta:focus-visible{
border-color:rgba(255,255,255,.75);
background:rgba(255,255,255,.06);
box-shadow:0 0 22px rgba(255,255,255,.14);
}
.studioCta.primary{
background:#fff;
color:#0a0a0a;
border-color:#fff;
}
.studioCta.primary:hover,
.studioCta.primary:focus-visible{
background:#f2f2f2;
color:#000;
}
.studioFooter{
border-top:1px solid #1a1a1a;
padding:40px 4% 56px;
text-align:center;
color:#777;
}
.studioFooter .logo{display:inline-flex;justify-content:center;margin-bottom:12px}
.studioFooter p{font-size:13px;margin:8px 0}
.studioFooter small{font-size:11px;color:#555}
/* Studio responsive grid */
@media(max-width:1100px){
.studioGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.studioStages{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
.studioHero{
grid-template-columns:1fr;
gap:36px;
justify-items:stretch;
}
.studioHeroMark{
order:-1;
max-width:200px;
justify-self:center;
}
}
@media(max-width:768px){
#studioPage{padding-top:112px}
.studioGrid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.studioHero{padding:28px 0 48px}
.studioHeroMark{max-width:180px}
.studioProcess{margin-top:64px}
.studioClosing{margin-top:72px;padding-top:40px}
}
@media(max-width:520px){
.studioGrid{grid-template-columns:1fr}
.studioStages{grid-template-columns:1fr}
.studioCard summary{min-height:148px}
.studioCtas{flex-direction:column;align-items:stretch}
.studioCta{width:100%}
}
@media(prefers-reduced-motion:reduce){
.studioCard,
.studioCardChevron,
.studioCta{
transition:none!important;
}
}
/* Nav collapse handled above at 1320px (Studio + six categories). */
/* Unify: hero/banner copy width + clamp like Momentum / Golden Circle */
.heroCopy{
max-width:min(560px, 92vw) !important;
}
.heroCopy #heroSynopsis,
.detailCopy #bannerSynopsis{
max-width:410px;
line-height:1.65;
}
.heroCopy #heroTitle,
.detailCopy #filmTitle{
max-width:100%;
}
.heroCopy .tagline,
.detailCopy .tagline,
#heroTagline,
#bannerTagline{
max-width:480px;
line-height:1.4;
}
.heroCopy .actions,
.detailCopy .actions{
margin-top:8px;
}
@media(max-width:768px){
.heroCopy #heroSynopsis,
.detailCopy #bannerSynopsis{
max-width:100%;
}
}
/* ===== Banner 1 match: detail page = homepage hero architecture ===== */
.filmView header{
position:absolute !important;
background:linear-gradient(#000c,#0000) !important;
border-bottom:0 !important;
}
.filmView header::before{display:none !important}
#filmDialog{
padding-top:0 !important;
background:#000 !important;
}
.detailBanner{
position:relative !important;
height:85vh !important;
min-height:620px !important;
margin:0 !important;
overflow:hidden !important;
border-bottom:0 !important;
background:#000 !important;
background-size:cover !important;
background-position:center !important;
}
.detailBanner video,
.detailBanner .previewAnim{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
}
.detailBanner .heroShade{
position:absolute !important;
inset:0 !important;
z-index:1 !important;
background:linear-gradient(90deg,#000d,transparent),linear-gradient(0deg,#090909,transparent 70%) !important;
}
.detailBanner .titleArt,
#titleArt{display:none !important}
.filmTopbar{
position:absolute !important;
top:100px !important;
left:0 !important;
right:0 !important;
z-index:5 !important;
height:auto !important;
min-height:0 !important;
margin:0 !important;
padding:0 5% !important;
display:flex !important;
justify-content:space-between !important;
align-items:center !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
pointer-events:none;
}
.filmTopbar button,
.filmTopbar > span{
pointer-events:auto;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
.filmTopbar button{
font-size:12px !important;
color:#ccc !important;
padding:8px 0 !important;
}
.filmTopbar > span{
font-size:9px !important;
letter-spacing:2px !important;
color:#999 !important;
}
.detailCopy{
position:absolute !important;
left:5% !important;
right:5% !important;
bottom:clamp(88px,14%,140px) !important;
top:auto !important;
max-width:640px !important;
z-index:3 !important;
padding:0 !important;
display:flex;
flex-direction:column;
justify-content:flex-end;
}
.detailCopy .eyebrow{
font-size:11px;
letter-spacing:2px;
color:#bbb;
text-transform:uppercase;
}
.detailCopy h1,
#filmTitle{
font-size:clamp(45px,7vw,100px) !important;
letter-spacing:-2px !important;
line-height:1.02 !important;
font-weight:700 !important;
margin:20px 0 !important;
max-width:100% !important;
}
.detailCopy #filmEdition{
font-size:16px !important;
color:#eee !important;
margin:0 0 8px !important;
letter-spacing:.2px !important;
}
.detailCopy .tagline{
font-size:14px;
color:#bbb;
margin:0 0 18px;
max-width:480px;
}
.detailCopy #bannerSynopsis{
display:block !important;
font-size:15px !important;
color:#ddd !important;
line-height:1.65 !important;
max-width:520px !important;
margin:0 0 22px !important;
white-space:normal !important;
overflow:visible !important;
-webkit-line-clamp:unset !important;
line-clamp:unset !important;
text-overflow:clip !important;
}
.detailCopy .actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:8px;
}
.detailControls{
position:absolute !important;
z-index:3 !important;
left:auto !important;
right:5% !important;
bottom:clamp(18px,4%,40px) !important;
display:flex !important;
flex-wrap:wrap;
gap:10px;
max-width:calc(100% - 10%);
justify-content:flex-end;
}
.detailControls button{
white-space:nowrap;
font-size:12px;
padding:10px 14px;
}
.detailBanner .artNote{
left:5% !important;
right:auto !important;
bottom:18px !important;
z-index:3;
}
/* Netflix 1–2 line blurb directly under banner */
.filmShortBlurb,.filmShortBlurb[hidden]{display:none!important}/*retired under-banner blurb*/.filmShortBlurb-retired{
max-width:1160px;
margin:0 auto;
padding:22px 45px 8px;
font-size:15px;
line-height:1.55;
color:#cfcfcf;
letter-spacing:.01em;
}
.filmShortBlurb[hidden]{display:none !important}
.filmContent{padding-top:10px}
@media(max-width:800px){
.detailBanner{min-height:650px !important; height:85vh !important}
.filmTopbar{top:88px !important}
.detailCopy{bottom:clamp(100px,18%,150px) !important}
.detailControls{
left:5% !important;
right:5% !important;
bottom:clamp(16px,3.5%,28px) !important;
justify-content:flex-start !important;
}
.detailBanner .artNote{display:none !important}
.filmShortBlurb{padding:18px 6% 6px; font-size:14px}
}
@media(max-width:700px){
.filmTopbar > span{display:none}
.detailCopy h1,#filmTitle{font-size:clamp(36px,10vw,64px) !important}
}
/* Standardize: hero description visible in banner (Image 1), no under-banner blurb */
#heroSynopsis{
display:block !important;
font-size:15px !important;
color:#ddd !important;
line-height:1.65 !important;
max-width:520px !important;
margin:0 0 18px !important;
white-space:normal !important;
overflow:visible !important;
-webkit-line-clamp:unset !important;
line-clamp:unset !important;
}
.filmShortBlurb{display:none !important}
.watchSection{margin-top:28px}
/* Keep Back to productions clear of the category eyebrow */
.detailCopy{
top:152px !important;
bottom:clamp(88px,14%,140px) !important;
justify-content:flex-end !important;
min-height:0 !important;
}
.detailCopy .eyebrow,
#filmCategory{
margin-top:0 !important;
padding-top:0 !important;
}
@media(max-width:800px){
.detailCopy{top:136px !important}
}
/* Golden Circle: keep the large title below Back to productions */
#filmTitle.is-long-title,
.detailCopy h1.is-long-title{
font-size:clamp(36px,5.2vw,68px) !important;
letter-spacing:-1px !important;
line-height:1.05 !important;
margin:12px 0 16px !important;
max-width:100% !important;
}
/* Production cards: title lives on the cover only; under-card shows the short subtitle/edition line */
.filmCard h4{display:none !important}
.filmCard p{margin-top:10px !important}
/* Music video cards: song on cover, artist as a small muted caption underneath */
.filmCard.is-music p.cardCaption{font-size:11px !important;font-weight:400 !important;color:#9a9a9a !important;letter-spacing:.2px;line-height:1.35 !important;margin-top:10px !important}
/* card mark: no shadow, 70% opacity */
.filmArt small{text-shadow:none !important;opacity:.7}
/* Enquiry wizard: Referral code first screen — Skip link */
.ewSkip{display:inline-block;background:none;border:0;padding:6px 0;margin-top:2px;color:#bbb;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ewSkip:hover,.ewSkip:focus-visible{color:#fff;background:none}
/* Header: category menu centered on wide screens — desktop only; logo and CTA/search unchanged */
@media(min-width:1321px){
header{grid-template-columns:1fr auto 1fr}
}
/* Mobile music-video banner: title and artist sit under the image, not over it */
@media (max-width: 800px) {
#filmDialog.is-music .detailBanner{
height: auto !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: auto !important;
display: flex !important;
flex-direction: column !important;
overflow: visible !important;
position: relative !important;
background: #000 !important;
border-bottom: 0 !important;
}
#filmDialog.is-music .detailBanner::before{
content: "";
display: block;
width: 100%;
margin-top: 88px;
aspect-ratio: 16 / 9;
flex: 0 0 auto;
background: #000;
}
#filmDialog.is-music .detailBanner > video,
#filmDialog.is-music .detailBanner > img,
#filmDialog.is-music .detailBanner > .heroShade{
position: absolute !important;
top: 88px !important;
left: 0 !important;
right: 0 !important;
bottom: auto !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: 16 / 9 !important;
object-fit: cover !important;
object-position: center center !important;
inset: 88px 0 auto 0 !important;
}
#filmDialog.is-music .heroShade{
background: transparent !important;
pointer-events: none !important;
}
#filmDialog.is-music .filmTopbar{
position: absolute !important;
top: 88px !important;
left: 0 !important;
right: 0 !important;
margin-top: 0 !important;
height: auto !important;
min-height: 0 !important;
padding: 10px 5% !important;
background: linear-gradient(180deg, rgba(0,0,0,.55), transparent) !important;
border-bottom: 0 !important;
z-index: 5 !important;
}
#filmDialog.is-music .detailCopy{
position: relative !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
width: 100% !important;
max-width: none !important;
padding: 22px 6% 8px !important;
margin: 0 !important;
overflow: visible !important;
max-height: none !important;
justify-content: flex-start !important;
background: #000 !important;
z-index: 3 !important;
}
#filmDialog.is-music #filmCategory{
margin: 0 0 10px !important;
}
#filmDialog.is-music #filmTitle{
font-size: clamp(28px, 8.5vw, 40px) !important;
line-height: 1.08 !important;
margin: 0 0 8px !important;
}
#filmDialog.is-music #filmEdition{
margin: 0 0 18px !important;
}
#filmDialog.is-music .detailCopy .actions{
margin-top: 4px !important;
}
#filmDialog.is-music .detailControls{
position: relative !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
width: 100% !important;
max-width: none !important;
padding: 4px 6% 20px !important;
justify-content: flex-start !important;
background: #000 !important;
z-index: 3 !important;
}
#filmDialog.is-music .artNote{ display: none !important; }
}
@media (max-width: 480px) {
#filmDialog.is-music .detailCopy{
top: auto !important;
bottom: auto !important;
padding: 18px 6% 8px !important;
}
}
/* Icon-only banner sound controls, all breakpoints */
.soundToggle{
width:44px !important;
height:44px !important;
min-width:44px !important;
padding:0 !important;
border-radius:50% !important;
justify-content:center !important;
gap:0 !important;
font-size:18px !important;
line-height:1 !important;
}
/* Mobile music-video banner + more-info spacing; hide music card play marks */
@media (max-width: 800px) {
#filmDialog.is-music #detailPlay{
width:48px !important;
height:48px !important;
min-width:48px !important;
padding:0 !important;
border-radius:50% !important;
font-size:0 !important;
line-height:0 !important;
letter-spacing:0 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
}
#filmDialog.is-music #detailPlay::before{
content:"▶";
font-size:16px;
line-height:1;
margin-left:2px;
}
#filmDialog .detailCopy{
top:88px !important;
bottom:64px !important;
left:5% !important;
right:5% !important;
max-height:none !important;
overflow:hidden !important;
}
#filmDialog .detailControls{
left:5% !important;
right:5% !important;
bottom:12px !important;
justify-content:flex-start !important;
}
#filmDialog.is-music #filmEdition{
margin:0 0 16px !important;
}
#filmDialog.is-music .detailCopy .actions{
gap:12px !important;
margin-top:10px !important;
align-items:center !important;
}
.filmCard.is-music .playMark{ display:none !important; }
#filmDialog .filmContent{ padding:28px 6% 48px !important; }
#filmDialog .watchSection{ margin-top:16px !important; }
#filmDialog .watchHeading{ margin:16px 0 20px !important; gap:16px !important; }
#filmDialog .information{
display:grid !important;
grid-template-columns:1fr !important;
gap:28px !important;
margin:28px 0 36px !important;
padding-top:28px !important;
}
#filmDialog .filmMeta{ gap:10px !important; margin-bottom:8px !important; }
#filmDialog .information h2,
#filmDialog #filmSynopsisHeading,
#filmDialog #aboutProductionWrap h2{ margin:8px 0 14px !important; }
#filmDialog #filmSynopsis,
#filmDialog #aboutProduction{ margin:0 !important; line-height:1.8 !important; }
#filmDialog .productionCredit{ padding-top:8px !important; }
#filmDialog #productionDetails{ margin:24px 0 40px !important; }
#filmDialog .comments{ padding:8px 0 40px !important; }
#filmDialog .sectionHeading{ margin-bottom:20px !important; }
#filmDialog .relatedSection{ padding:28px 0 40px !important; }
}
@media (max-width: 480px) {
#filmDialog .detailCopy{ top:80px !important; bottom:58px !important; }
.soundToggle{ width:40px !important; height:40px !important; font-size:16px !important; }
}
/* Mobile home hero: keep Watch/More info clear of Pause/Sound, and copy clear of the header */
@media (max-width: 800px) {
.heroControls {
left: 5% !important;
right: 5% !important;
bottom: 14px !important;
top: auto !important;
width: auto !important;
max-width: 90% !important;
justify-content: flex-start !important;
z-index: 4 !important;
gap: 8px !important;
}
.heroControls button {
padding: 8px 12px !important;
font-size: 12px !important;
}
.heroCopy {
left: 5% !important;
right: 5% !important;
width: auto !important;
max-width: none !important;
top: 88px !important;
bottom: 64px !important;
max-height: none !important;
overflow: hidden !important;
padding-top: 0 !important;
}
#heroTitle, .hero h1 {
font-size: clamp(28px, 9vw, 40px) !important;
line-height: 1.08 !important;
margin: 6px 0 8px !important;
}
.heroCopy .eyebrow,
#hero .eyebrow {
margin: 0 0 6px !important;
position: relative !important;
}
.hero .artNote,
#hero .artNote {
display: none !important;
}
}
@media (max-width: 480px) {
.heroControls { bottom: 12px !important; }
.heroCopy { top: 80px !important; bottom: 58px !important; }
}
/* Mobile banners: title and short description sit under a clear video */
@media (max-width: 800px) {
#hero.hero,
section.hero#hero{
height: auto !important;
min-height: 0 !important;
max-height: none !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
padding: 0 !important;
overflow: visible !important;
position: relative !important;
background: #000 !important;
}
#hero::after{ display: none !important; }
#hero::before{
content: "";
display: block;
width: 100%;
margin-top: 88px;
aspect-ratio: 16 / 9;
flex: 0 0 auto;
background: #000;
}
#hero > video,
#hero > img,
#hero > .heroShade{
position: absolute !important;
top: 88px !important;
left: 0 !important;
right: 0 !important;
bottom: auto !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: 16 / 9 !important;
object-fit: cover !important;
object-position: center center !important;
inset: 88px 0 auto 0 !important;
}
#hero > .heroShade{
background: transparent !important;
pointer-events: none !important;
}
#hero .heroCopy{
position: relative !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
width: 100% !important;
max-width: none !important;
padding: 22px 6% 8px !important;
margin: 0 !important;
overflow: visible !important;
max-height: none !important;
background: #000 !important;
z-index: 3 !important;
}
#hero .heroCopy .eyebrow,
#hero .eyebrow{
margin: 0 0 10px !important;
position: relative !important;
}
#heroTitle, #hero h1, .hero h1{
font-size: clamp(28px, 8.5vw, 40px) !important;
line-height: 1.08 !important;
letter-spacing: -.5px !important;
margin: 0 0 8px !important;
}
#heroEdition{
margin: 0 0 12px !important;
}
#heroTagline,
#heroSynopsis{
max-width: none !important;
max-height: none !important;
overflow: visible !important;
display: block !important;
margin: 0 0 16px !important;
font-size: 14px !important;
line-height: 1.6 !important;
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
}
#hero .actions{
margin-top: 4px !important;
}
#hero .heroControls{
position: relative !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
width: 100% !important;
max-width: none !important;
padding: 4px 6% 20px !important;
justify-content: flex-start !important;
background: #000 !important;
z-index: 3 !important;
}
#hero .artNote{ display: none !important; }
#filmDialog .detailBanner{
height: auto !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: auto !important;
display: flex !important;
flex-direction: column !important;
overflow: visible !important;
position: relative !important;
background: #000 !important;
border-bottom: 0 !important;
}
#filmDialog .detailBanner::before{
content: "";
display: block;
width: 100%;
margin-top: 88px;
aspect-ratio: 16 / 9;
flex: 0 0 auto;
background: #000;
}
#filmDialog .detailBanner > video,
#filmDialog .detailBanner > img,
#filmDialog .detailBanner > .heroShade{
position: absolute !important;
top: 88px !important;
left: 0 !important;
right: 0 !important;
bottom: auto !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: 16 / 9 !important;
object-fit: cover !important;
object-position: center center !important;
inset: 88px 0 auto 0 !important;
}
#filmDialog .detailBanner > .heroShade{
background: transparent !important;
pointer-events: none !important;
}
#filmDialog .filmTopbar{
position: absolute !important;
top: 88px !important;
left: 0 !important;
right: 0 !important;
margin-top: 0 !important;
height: auto !important;
min-height: 0 !important;
padding: 10px 5% !important;
background: linear-gradient(180deg, rgba(0,0,0,.55), transparent) !important;
border-bottom: 0 !important;
z-index: 5 !important;
}
#filmDialog .detailCopy{
position: relative !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
width: 100% !important;
max-width: none !important;
padding: 22px 6% 8px !important;
margin: 0 !important;
overflow: visible !important;
max-height: none !important;
justify-content: flex-start !important;
background: #000 !important;
z-index: 3 !important;
}
#filmDialog #filmCategory{
margin: 0 0 10px !important;
}
#filmDialog #filmTitle{
font-size: clamp(28px, 8.5vw, 40px) !important;
line-height: 1.08 !important;
letter-spacing: -.5px !important;
margin: 0 0 8px !important;
}
#filmDialog #filmEdition{
margin: 0 0 12px !important;
}
#filmDialog #bannerTagline,
#filmDialog #bannerSynopsis{
max-width: none !important;
max-height: none !important;
overflow: visible !important;
margin: 0 0 16px !important;
font-size: 14px !important;
line-height: 1.6 !important;
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
}
#filmDialog .detailCopy .actions{
margin-top: 4px !important;
}
#filmDialog .detailControls{
position: relative !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
width: 100% !important;
max-width: none !important;
padding: 4px 6% 20px !important;
justify-content: flex-start !important;
background: #000 !important;
z-index: 3 !important;
}
#filmDialog .artNote{ display: none !important; }
}
@media (max-width: 480px) {
#hero .heroCopy,
#filmDialog .detailCopy{
top: auto !important;
bottom: auto !important;
padding: 18px 6% 8px !important;
}
}
/* Mobile video cards: no play icon on the card */
@media (max-width: 800px) {
.filmCard .playMark{ display:none !important; }
}
/* Mobile review fixes: pinned menu, clear film banner, consistent Watch, shelf heading */
@media (max-width: 1320px) {
header, .filmView header{
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 40 !important;
background: #000 !important;
background-image: none !important;
border-bottom: 1px solid #ffffff14;
}
header::before, .filmView header::before{
display: none !important;
}
#mobileMenu, .mobileMenu{
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
z-index: 35 !important;
}
}
@media (max-width: 800px) {
#filmDialog .filmTopbar,
#filmDialog.is-music .filmTopbar{
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
margin-top: 0 !important;
height: auto !important;
min-height: 0 !important;
padding: 12px 6% 0 !important;
background: #000 !important;
border-bottom: 0 !important;
z-index: 3 !important;
}
#hero .actions .primary,
#hero .actions button,
#filmDialog .detailCopy .actions .primary,
#filmDialog .detailCopy .actions button,
#filmDialog.is-music #detailPlay{
width: auto !important;
height: auto !important;
min-width: 0 !important;
padding: 11px 18px !important;
border-radius: 4px !important;
font-size: 13px !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
#filmDialog.is-music #detailPlay::before{
content: none !important;
display: none !important;
}
.shelfhead{
flex-wrap: wrap !important;
align-items: baseline !important;
gap: 2px 12px !important;
}
.shelfhead h3{
white-space: nowrap !important;
flex: 0 1 auto !important;
font-size: 18px !important;
}
.shelfhead span{
flex: 1 1 100% !important;
margin-top: 2px !important;
}
.filmCard{
-webkit-touch-callout: none;
}
}
/* Language switcher */
.langSwitch{
position:relative;
flex-shrink:0;
z-index:45;
}
.langSwitchBtn{
width:40px;
height:40px;
min-width:40px;
padding:0;
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
background:transparent;
border:1px solid #ffffff28;
color:#eee;
line-height:1;
}
.langSwitchBtn:hover,
.langSwitchBtn:focus-visible{
border-color:rgba(255,255,255,.7);
background:rgba(255,255,255,.06);
box-shadow:0 0 16px rgba(255,255,255,.12);
}
.langSwitchBtn svg{
width:18px;
height:18px;
display:block;
}
.langSwitchList{
position:absolute;
top:calc(100% + 8px);
right:0;
left:auto;
min-width:168px;
margin:0;
padding:6px;
list-style:none;
background:#141414;
border:1px solid #ffffff18;
border-radius:10px;
box-shadow:0 16px 40px #000c;
z-index:50;
}
html[dir="rtl"] .langSwitchList{
right:auto;
left:0;
}
.langSwitchList[hidden]{display:none !important;}
.langSwitchList button{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
text-align:start;
gap:12px;
padding:9px 10px;
border:0;
border-radius:7px;
background:transparent;
color:#eee;
font-size:13px;
white-space:nowrap;
}
.langSwitchList button[aria-selected="true"]{
background:rgba(255,255,255,.08);
}
.langSwitchList button:hover,
.langSwitchList button:focus-visible{
background:rgba(255,255,255,.12);
}
.langSwitchList button[aria-selected="true"]::after{
content:"✓";
font-size:12px;
opacity:.85;
}
@media (max-width: 1320px){
header, .filmView header{
grid-template-columns: 1fr auto auto !important;
}
.headerActions{
display:flex !important;
grid-column:2 !important;
justify-self:end !important;
gap:8px !important;
}
.headerActions .navCta,
.headerActions #searchToggle{
display:none !important;
}
.menuToggle{
grid-column:3 !important;
}
}
html[dir="rtl"] body{direction:rtl;}
html[lang="ar"] body{
font-family:"Noto Naskh Arabic","Noto Sans Arabic","Segoe UI",Arial,sans-serif;
}
html[lang="zh"] body{
font-family:"PingFang SC","Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
}
/* Official copy RTL isolate: keep untranslated English from flipping punctuation */
html[dir="rtl"] #heroTitle,
html[dir="rtl"] #heroEdition,
html[dir="rtl"] #heroTagline,
html[dir="rtl"] #heroSynopsis,
html[dir="rtl"] #filmTitle,
html[dir="rtl"] #filmEdition,
html[dir="rtl"] #bannerTagline,
html[dir="rtl"] #bannerSynopsis,
html[dir="rtl"] #filmSynopsis,
html[dir="rtl"] #aboutProduction,
html[dir="rtl"] #extendedInfo,
html[dir="rtl"] .filmArt h3,
html[dir="rtl"] .cardCaption,
html[dir="rtl"] #playerLabel,
html[dir="rtl"] .playerPoster h3,
html[dir="rtl"] .playerPoster p {
direction: ltr;
unicode-bidi: isolate;
text-align: start;
}
/* Language switcher: centered names, darker menu */
.langSwitchList{
background:#050505 !important;
border-color:#ffffff10 !important;
max-height:min(70vh, 420px);
}
.langSwitchList button{
display:flex !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
position:relative;
padding-left:22px;
padding-right:22px;
gap:0.55em;
}
.langSwitchList .langFlag{
flex:0 0 auto;
line-height:1;
font-size:1.15em;
}
.langSwitchList button[aria-selected="true"]::after{
position:absolute;
right:10px;
left:auto;
top:50%;
transform:translateY(-50%);
content:"✓";
}
html[dir="rtl"] .langSwitchList button[aria-selected="true"]::after{
right:auto;
left:10px;
}
html[lang="am"] body{
font-family:"Noto Sans Ethiopic","Nyala","Abyssinica SIL",Arial,sans-serif;
}
html[lang="vi"] body,
html[lang="tr"] body,
html[lang="pl"] body,
html[lang="nl"] body,
html[lang="id"] body,
html[lang="sw"] body,
html[lang="ha"] body,
html[lang="yo"] body,
html[lang="zu"] body,
html[lang="ff"] body,
html[lang="wes"] body,
html[lang="uk"] body{
font-family:"Noto Sans","Segoe UI","Helvetica Neue",Arial,sans-serif;
}
#filmDialog.has-film-i18n #filmTitle,
#filmDialog.has-film-i18n #filmEdition,
#filmDialog.has-film-i18n #bannerTagline,
#filmDialog.has-film-i18n #bannerSynopsis,
#filmDialog.has-film-i18n #filmSynopsis,
#filmDialog.has-film-i18n #aboutProduction,
#filmDialog.has-film-i18n #extendedInfo,
#filmDialog.has-film-i18n .filmArt strong,
#filmDialog.has-film-i18n .cardCaption{
direction:inherit;
unicode-bidi:normal;
text-align:start;
}
/* Language switcher: twelve languages, keep the list compact */
.langSwitchList{
max-height:min(70vh, 380px);
overflow-y:auto;
overscroll-behavior:contain;
scrollbar-width:thin;
scrollbar-color:#ffffff33 transparent;
}
html[lang="ja"] body{
font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Arial,sans-serif;
}
html[lang="ko"] body{
font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",Arial,sans-serif;
}
html[lang="ru"] body{
font-family:"Segoe UI","Noto Sans","Helvetica Neue",Arial,sans-serif;
}
html[lang="hi"] body{
font-family:"Noto Sans Devanagari","Noto Sans","Segoe UI",Arial,sans-serif;
}
html[lang="bn"] body{
font-family:"Noto Sans Bengali","Vrinda","Noto Sans","Segoe UI",Arial,sans-serif;
}
/* Mobile menu: centered text, darker background */
#mobileMenu, .mobileMenu{
background:#070707 !important;
}
#mobileMenu a, .mobileMenu a,
#mobileMenu nav, .mobileMenu nav{
text-align:center !important;
}
/* early-ai-gen-tag */
.filmArt .earlyGenTag{
position:absolute;
top:28px;
left:14px;
right:48px;
z-index:1;
font-size:8px;
letter-spacing:1.2px;
color:#bbb;
opacity:.7;
text-shadow:none !important;
text-transform:uppercase;
font-weight:400;
line-height:1.2;
pointer-events:none;
text-align:left;
}
.earlyGenTag--page{
display:block;
margin:6px 0 10px;
font-size:11px;
letter-spacing:1.6px;
color:#bbb;
opacity:.8;
text-transform:uppercase;
text-shadow:none !important;
font-weight:400;
}
.earlyGenTag--page[hidden]{display:none !important}
/* carbon-floor-bg */
html{
background-color:#000 !important;
}
body{
background-color:#000 !important;
background-image:url("/assets/bg-carbon-1920.webp");
background-size:cover;
background-position:center bottom;
background-repeat:no-repeat;
background-attachment:fixed;
}
@media (max-width:800px){
body{
background-image:url("/assets/bg-carbon-828.webp");
}
}
/* iOS: background-attachment:fixed is unreliable; use a pinned layer instead */
@supports (-webkit-touch-callout: none){
body{
background-image:none !important;
background-attachment:scroll !important;
}
html{
isolation:isolate;
}
html::before{
content:"";
position:fixed;
inset:0;
z-index:-1;
pointer-events:none;
background-color:#000;
background-image:url("/assets/bg-carbon-1920.webp");
background-size:cover;
background-position:center bottom;
background-repeat:no-repeat;
}
@media (max-width:800px){
html::before{background-image:url("/assets/bg-carbon-828.webp")}
}
}
/* Reveal the floor: lift solid black page sections, keep banner videos opaque */
body,
#homeContent,
main,
footer,
#browse,
.plans,
.relatedSection,
.filmContent,
#studioPage,
#filmDialog,
.watchSection,
.information,
.comments,
.filmEnd,
#productionDetails,
.studioView header{
background-color:transparent !important;
background-image:none !important;
}
#studioPage,
.plans{
background:transparent !important;
}
footer{border-top-color:#ffffff14 !important}
/* Cards, player and chrome keep contrast */
.plan{
background:rgba(8,8,8,.72) !important;
}
.plan.highlight{
background:rgba(20,20,20,.78) !important;
}
.search input{background:#151515 !important}
#playerMount,
#playerShell{
background:#000 !important;
}
/* Hero and film banners stay black so the floor never sits behind or over the video */
.hero,
#hero.hero,
section.hero#hero,
.detailBanner,
#filmDialog .detailBanner,
#filmDialog.is-music .detailBanner{
background:#000 !important;
background-color:#000 !important;
background-image:none !important;
}
.hero video,
.detailBanner video,
.hero .previewAnim,
.detailBanner .previewAnim,
#hero video,
#filmDialog .detailBanner > video,
#filmDialog .detailBanner > img{
background-color:#000 !important;
}
/* Mobile: only the 16:9 video stage stays black; copy under the video reveals the floor */
@media (max-width:800px){
#hero.hero,
section.hero#hero,
#filmDialog .detailBanner,
#filmDialog.is-music .detailBanner{
background:transparent !important;
background-color:transparent !important;
background-image:none !important;
}
#hero::before,
#filmDialog .detailBanner::before{
background:#000 !important;
background-color:#000 !important;
}
#hero .heroCopy,
#hero .heroControls,
#filmDialog .detailCopy,
#filmDialog .detailControls,
#filmDialog .filmTopbar,
#filmDialog.is-music .filmTopbar,
#filmDialog.is-music .detailCopy,
#filmDialog.is-music .detailControls{
background:transparent !important;
background-color:transparent !important;
background-image:none !important;
}
}
@media (max-width:1320px){
header,
.filmView header,
.studioView header{
background:rgba(0,0,0,.82) !important;
background-image:none !important;
}
}