@font-face{font-family:Montserrat;src:url(fonts/montserrat.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:EUR42;src:url(fonts/EUR42.woff) format("woff");font-display:swap}
:root{
  --bg:#000;--panel:#121212;--line:rgba(255,255,255,.13);--text:#fff;--dim:#a8a8a8;
  --gold:#d8b463;--gold-hi:#f2dfa6;--vanilla:#f6ecd0;
  --goldgrad:linear-gradient(120deg,#f6e7b4 0%,#d8b463 34%,#a8803a 62%,#ecd492 100%);
  --sans:Montserrat,Arial,Helvetica,sans-serif;--display:EUR42,Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);--gut:clamp(18px,5vw,72px);--max:1640px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:4px}
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
main,footer{position:relative;z-index:2}

/* bar */
.bar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px var(--gut);transition:background .4s,padding .4s var(--ease),box-shadow .4s}
.bar.solid{background:rgba(0,0,0,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding-block:11px;box-shadow:0 1px 0 var(--line)}
.mark{display:flex;align-items:center;gap:12px}
.mark img{width:38px;height:38px}
.mark span{font:400 18px/1.1 var(--display);letter-spacing:.05em;text-transform:uppercase}
.mark small{display:block;margin-top:3px;font:400 11px var(--sans);letter-spacing:.02em;text-transform:none;color:#d4d2cc}
#nav{display:flex;gap:4px;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
#nav a{padding:7px 13px;border-radius:99px;color:var(--dim);transition:color .25s,background .25s}
#nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.bar-right{display:flex;align-items:center;gap:10px}
#lang-btn{padding:6px 11px;border:2px solid #555;border-radius:12px;background:none;color:#fff;font:700 12px var(--sans);cursor:pointer;transition:border-color .25s}
#lang-btn:hover{border-color:var(--gold)}
.menu-btn{display:none;padding:6px 11px;border:2px solid #555;border-radius:12px;background:none;color:#fff;font:700 12px var(--sans);cursor:pointer}

/* shared */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
section{position:relative}
.sec{padding-block:clamp(44px,7vh,84px)}
.eyebrow{margin:0 0 18px;font:700 12px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.h2{margin:0 0 clamp(18px,3vh,34px);font:400 clamp(30px,min(3.6vw,6vh),56px)/1.05 var(--display);letter-spacing:.03em;text-transform:uppercase;background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lead{max-width:44em;color:#d9d6cf;font-size:clamp(16px,1.35vw,19px)}
.cta{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border:2px solid var(--gold);border-radius:14px;color:var(--gold);font:500 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;transition:background .3s,color .3s,border-color .3s,transform .4s var(--ease)}
.cta:hover{background:var(--goldgrad);border-color:transparent;color:#1a1408;transform:translateY(-2px)}
.cta.solid{background:var(--goldgrad);border-color:transparent;color:#1a1408}
.cta.solid:hover{filter:brightness(1.08)}

/* reveal + wipe */
.rv{opacity:0;translate:0 34px;transition:opacity 1.1s var(--ease),translate 1.2s var(--ease)}
.rv.in{opacity:1;translate:0 0}
.wipe img,.wipe video,.wipe .poster{clip-path:inset(0 100% 0 0);transition:clip-path 1.5s var(--ease) .1s}
.wipe.in img,.wipe.in video,.wipe.in .poster{clip-path:inset(0 0 0 0)}
.nojs .rv,.nojs .wipe img{opacity:1;translate:none;clip-path:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;translate:none;transition:none}.wipe img,.wipe video,.wipe .poster{clip-path:none;transition:none}html{scroll-behavior:auto}}

/* gold frame helper */
.frame{position:relative;border-radius:22px}
.frame::before{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;padding:2px;background:var(--goldgrad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none;opacity:.85;transition:opacity .4s}

/* hero */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:84px var(--gut) clamp(14px,2.4vh,28px);max-width:var(--max);margin:0 auto}
.hero h1{display:flex;flex-wrap:wrap;column-gap:.3em;margin:0;font:400 clamp(26px,min(3.5vw,6vh),60px)/1.05 var(--display);letter-spacing:.015em;text-transform:uppercase}
.hero .eyebrow{margin-bottom:clamp(6px,1.2vh,16px)}
.ov{display:grid;grid-template-columns:repeat(4,1fr);max-width:calc((100svh - 240px)*1.7778*2 + 60px);width:100%;margin-inline:auto;gap:clamp(12px,1.4vw,20px);margin-top:clamp(14px,2.6vh,30px);opacity:0;animation:fade 1.2s .9s forwards}
.ov .card{grid-column:auto;aspect-ratio:16/9}
#all-btn{padding:6px 14px;border:2px solid var(--gold);border-radius:12px;background:none;color:var(--gold);font:700 13px var(--sans);cursor:pointer;white-space:nowrap;transition:background .25s,color .25s}
#all-btn:hover,#all-btn[aria-expanded=true]{background:var(--goldgrad);border-color:transparent;color:#1a1408}
#allwork{position:fixed;top:0;right:0;bottom:0;z-index:19;width:min(340px,86vw);padding:84px 26px 30px;overflow-y:auto;background:rgba(10,10,10,.96);border-left:2px solid #333;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#allwork[hidden]{display:none}
#allwork h3,.idx h3{margin:0 0 8px;font:400 18px/1.2 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--gold)}
#allwork ul,.idx ul{list-style:none;margin:0;padding:0}
#allwork section{margin-bottom:22px}
#allwork a,.idx a{display:block;padding:4px 0;font-size:14px;color:#d4d2cc;transition:color .2s,transform .3s var(--ease)}
#allwork a:hover,.idx a:hover{color:var(--gold-hi);transform:translateX(4px)}
.idx{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(18px,2.4vw,40px);margin-bottom:clamp(30px,5vh,56px)}
@media (max-width:1040px){.idx{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.ov{grid-template-columns:repeat(2,1fr);max-width:none}.idx{grid-template-columns:1fr}.card .cap b{font-size:16px}}
.hero h1 .line{display:block;overflow:hidden;padding:.24em 0 .06em;margin-top:-.24em}
.hero h1 .line>span{display:block;transform:translateY(108%);animation:rise 1.4s var(--ease) forwards}
.hero h1 .line:nth-child(2)>span{animation-delay:.12s;padding-top:.24em;margin-top:-.24em;background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@keyframes rise{to{transform:none}}
.hero .sub{max-width:34em;margin:clamp(22px,4vh,40px) 0 0;font-size:clamp(17px,1.7vw,24px);line-height:1.5;color:#e4e1da;text-shadow:0 0 18px #000;opacity:0;animation:fade 1.2s .7s forwards}
.hero .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,4vh,44px);opacity:0;animation:fade 1.2s .95s forwards}
.facts{display:flex;gap:clamp(26px,5vw,72px);margin-top:clamp(34px,6vh,70px);padding-top:26px;border-top:1px solid var(--line);opacity:0;animation:fade 1.2s 1.1s forwards}
.fact b{display:block;font:400 clamp(30px,3.4vw,52px)/1 var(--display);background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fact span{display:block;margin-top:8px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
@keyframes fade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero h1 .line>span{transform:none;animation:none}.hero .sub,.hero .acts,.facts{opacity:1;animation:none}}
.solidbg{background:#0c0c0c;border-top:1px solid #2c2820}
.solidbg:nth-of-type(odd){background:#141413}

/* showreel */
.reel{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:22px;background:#000;box-shadow:0 50px 120px rgba(0,0,0,.7),0 0 120px rgba(216,180,99,.10)}
.reel .poster,.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel video{z-index:2;background:#000}
.reel button.play{position:absolute;inset:0;z-index:3;display:grid;place-items:end start;padding:clamp(18px,3vw,44px);border:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.55));cursor:pointer;color:#fff}
.reel .disc{display:grid;place-items:center;width:clamp(72px,8vw,112px);aspect-ratio:1;border-radius:50%;border:2px solid var(--gold-hi);background:rgba(0,0,0,.45);backdrop-filter:blur(6px);transition:transform .5s var(--ease),background .4s}
.reel button.play:hover .disc{transform:scale(1.08);background:rgba(216,180,99,.25)}
.reel .disc::after{content:"";margin-left:8%;border-left:22px solid var(--gold-hi);border-block:13px solid transparent}
.reel-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:22px}
.reel-meta p{margin:0;color:var(--dim);font-size:14px}

/* film wall */
#films .wrap{max-width:1640px}
.wall{display:grid;grid-template-columns:minmax(250px,350px) minmax(0,1fr);gap:clamp(18px,2.4vw,34px);align-items:stretch}
.left{min-width:0}
.rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.th{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;position:relative;display:block;padding:0;border:0;border-radius:12px;overflow:hidden;aspect-ratio:5/7;background:#111;cursor:pointer;opacity:.6;transition:opacity .4s,transform .7s var(--ease),box-shadow .5s;-webkit-appearance:none;appearance:none}
.th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.th::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:3px;background:var(--goldgrad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .35s;pointer-events:none}
.th::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(240px circle at var(--mx) var(--my),rgba(242,223,166,.28),transparent 62%)}
.th:hover,.th.on,.th:focus-visible{opacity:1}
.th.on::before,.th:hover::before{opacity:1}
.th:hover::after{opacity:1}
.th.on{box-shadow:0 16px 40px rgba(216,180,99,.25)}
.th.off{display:none}
@media (hover:hover) and (pointer:fine){.th:hover,.th.moving{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry))}.th.moving{transition:transform .12s linear,opacity .4s}}
.pager{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:20px;font-size:12px;letter-spacing:.22em;color:var(--dim)}
.pager button{width:42px;height:42px;border-radius:50%;border:2px solid #555;background:rgba(0,0,0,.6);color:#fff;font-size:18px;cursor:pointer;transition:border-color .25s,color .25s}
.pager button:hover{border-color:var(--gold);color:var(--gold)}
.stage{position:relative;display:grid;grid-template-columns:minmax(200px,330px) 1fr;gap:clamp(26px,4vw,72px);align-items:center;padding:clamp(28px,4vw,64px);border-radius:24px;overflow:hidden;isolation:isolate;background:#080808;border:2px solid transparent;background:linear-gradient(#080808,#080808) padding-box,var(--goldgrad) border-box}
.bgs{position:absolute;inset:0;z-index:-1;overflow:hidden}
.bgs img{position:absolute;left:-8%;top:-8%;width:116%;height:116%;object-fit:cover;filter:blur(46px) saturate(1.35) brightness(.5);opacity:0;transition:opacity 1s ease}
.bgs img.on{opacity:1}
.bgs::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 26% 50%,rgba(0,0,0,.05),rgba(0,0,0,.78) 80%)}
.hero-p{--rx:3deg;--ry:-7deg;--mx:50%;--my:50%;position:relative;display:block;width:100%;aspect-ratio:5/7;border:0;padding:0;border-radius:14px;overflow:hidden;background:#111;cursor:zoom-in;transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .9s var(--ease);box-shadow:0 50px 90px rgba(0,0,0,.65),0 0 0 1px rgba(242,223,166,.45),0 0 70px rgba(216,180,99,.2)}
.hero-p.moving{transition:transform .12s linear}
.hero-p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
.hero-p img.on{opacity:1}
.glint{position:absolute;inset:0;pointer-events:none;background:radial-gradient(360px circle at var(--mx) var(--my),rgba(255,240,200,.26),transparent 60%);opacity:0;transition:opacity .4s}
.hero-p:hover .glint{opacity:1}
.info{min-width:0;transition:opacity .2s,translate .2s}
.info.swap{opacity:0;translate:0 10px}
.kick{margin:0 0 14px;font:700 12px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.ftitle{margin:0 0 20px;font:400 clamp(28px,3.4vw,56px)/1.06 var(--display);letter-spacing:.03em;text-transform:uppercase;background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;overflow-wrap:break-word;hyphens:auto}
.ftitle.long{font-size:clamp(22px,2.4vw,40px)}
.role{display:block;width:fit-content;max-width:100%;margin:0 0 24px;padding:8px 18px;border-radius:12px;background:rgba(0,0,0,.6);border:1px solid rgba(216,180,99,.5);color:var(--gold-hi);font:400 clamp(13px,1.1vw,17px)/1.4 var(--display);letter-spacing:.07em}
.meta{margin:0 0 28px;padding:0;display:grid;gap:12px}
.meta div{display:grid;grid-template-columns:112px 1fr;gap:14px;font-size:15px;line-height:1.45}
.meta dt{margin:0;padding-top:3px;color:var(--dim);text-transform:uppercase;letter-spacing:.14em;font-size:11px}
.meta dd{margin:0;color:#ececec}
.count{margin:28px 0 0;font-size:12px;letter-spacing:.22em;color:#8c8c8c}

/* work cards */
.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.8vw,26px)}
.card{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;position:relative;display:block;grid-column:span 4;aspect-ratio:16/10;overflow:hidden;border-radius:20px;background:#0b0b0b;transition:transform .8s var(--ease),box-shadow .5s}
.card.w6{grid-column:span 6}
.card img,.card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease),filter .6s}
.card video{opacity:0;transition:opacity .6s}
.card.vid:hover video{opacity:1}
.card:hover img{transform:scale(1.04)}
.card::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(242,223,166,.2),transparent 62%),linear-gradient(transparent 45%,rgba(0,0,0,.82));opacity:1}
.card .cap{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:clamp(18px,2vw,30px);display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.card .cap b{font:500 clamp(20px,2.2vw,34px)/1 var(--sans);letter-spacing:.01em;text-transform:uppercase;text-shadow:0 2px 18px rgba(0,0,0,.8)}
.card .cap i{font-style:normal;padding:5px 12px;border-radius:99px;background:rgba(0,0,0,.6);color:var(--gold);font:400 13px var(--display);letter-spacing:.08em;white-space:nowrap}
.card.on-load::before{opacity:.35}
.card:hover::before{opacity:1}
@media (hover:hover) and (pointer:fine){.card:hover,.card.moving{transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));box-shadow:0 30px 70px rgba(0,0,0,.6)}.card.moving{transition:transform .12s linear,box-shadow .5s}}

/* about / services */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:start}
.about ul{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:0}
.about li{padding:15px 0;border-top:1px solid var(--line);font-size:17px;display:flex;gap:16px;align-items:baseline}
.about li:last-child{border-bottom:1px solid var(--line)}
.about li em{font:400 13px var(--display);color:var(--gold);font-style:normal;letter-spacing:.12em}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}
.sv{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;position:relative;padding:clamp(24px,2.4vw,40px);border-radius:20px;background:linear-gradient(160deg,#141414,#0a0a0a);border:2px solid #2a2a2a;overflow:hidden;transition:transform .8s var(--ease),border-color .4s}
.sv::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(360px circle at var(--mx) var(--my),rgba(242,223,166,.16),transparent 62%)}
.sv:hover{border-color:var(--gold)}.sv:hover::after{opacity:1}
.sv .n{font:400 14px var(--display);color:var(--gold);letter-spacing:.2em}
.sv h3{margin:14px 0 12px;font:700 15px/1.35 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.sv p{margin:0;color:#cfccc5;font-size:15px;line-height:1.7}
@media (hover:hover) and (pointer:fine){.sv:hover,.sv.moving{transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry))}.sv.moving{transition:transform .12s linear,border-color .4s}}

/* faq */
.faq{max-width:900px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font:700 17px/1.4 var(--sans);transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:300 28px/1 var(--sans);color:var(--gold);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--gold-hi)}
.faq details p{margin:0 0 26px;max-width:42em;color:#d0cdc6}

/* contact */
.contact{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px);margin-top:10px}
.ct{display:block;padding:clamp(24px,2.6vw,40px);border-radius:20px;border:2px solid #2a2a2a;background:#0b0b0b;transition:border-color .4s,transform .6s var(--ease)}
.ct:hover{border-color:var(--gold);transform:translateY(-4px)}
.ct small{display:block;font:700 11px var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.ct b{display:block;margin-top:12px;font:400 clamp(18px,1.8vw,26px)/1.25 var(--display);letter-spacing:.03em;overflow-wrap:anywhere}
.links{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}

footer{padding:50px var(--gut) 60px;border-top:1px solid var(--line);background:#000}
footer .in{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;font-size:13px;color:var(--dim)}
footer a:hover{color:var(--gold-hi)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.92);backdrop-filter:blur(8px)}
.lb.open{display:flex;animation:fade2 .35s}
@keyframes fade2{from{opacity:0}to{opacity:1}}
.lb img{max-height:92vh;max-width:min(92vw,1400px);border-radius:10px;box-shadow:0 0 0 2px rgba(216,180,99,.5),0 40px 120px #000}
.lb button{position:absolute;display:grid;place-items:center;width:48px;height:48px;border:2px solid #555;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:22px;cursor:pointer;transition:border-color .25s,color .25s}
.lb button:hover{border-color:var(--gold);color:var(--gold)}
.lb .x{top:20px;right:20px}.lb .pv{left:20px;top:50%}.lb .nx{right:20px;top:50%}
.lb .t{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:13px;color:#aaa;letter-spacing:.1em}

/* responsive */
@media (max-width:1100px){
  #nav{display:none}.menu-btn{display:block}
  #nav.open{display:flex;position:fixed;top:64px;left:12px;right:12px;flex-direction:column;padding:14px;border-radius:16px;background:rgba(10,10,10,.97);border:1px solid var(--line)}
  .wall{grid-template-columns:minmax(0,1fr)}
  .stage{order:-1}
  .pager{display:none}
  .rail{display:flex;overflow-x:auto;gap:10px;padding:4px 2px 14px;scroll-snap-type:x proximity;scrollbar-width:thin}
  .th{flex:0 0 34vw;max-width:170px;scroll-snap-align:start}
  .th.off{display:block}
  .svc{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr}
  .card,.card.w6{grid-column:span 6}
}
@media (max-width:760px){
  .stage{grid-template-columns:1fr;gap:22px;padding:24px 18px 28px;text-align:center}
  .hero-p{max-width:min(64vw,270px);margin:0 auto;transform:none}
  .role{margin-inline:auto}
  .meta div{grid-template-columns:1fr;gap:2px}
  .bgs img{filter:none;opacity:0}.bgs img.on{opacity:.2}
  .cards{grid-template-columns:1fr}.card,.card.w6{grid-column:auto}
  .svc{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .facts{gap:28px;flex-wrap:wrap}
  .hero{padding-top:110px}
  .mark small{display:none}
}

/* overview cards stand off the background */
.hero{justify-content:center;gap:0}
.hero .sub{margin-top:clamp(6px,1.2vh,14px);max-width:none;font-size:clamp(15px,1.25vw,19px)}
.ov .card{background:#1a1a1a;box-shadow:0 0 0 1px rgba(242,223,166,.28),0 22px 50px rgba(0,0,0,.75),0 0 46px rgba(216,180,99,.09)}
.ov .card.strip .posters{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;background:linear-gradient(160deg,#242018,#101010)}
.ov .card.strip .posters img{position:static;flex:0 1 auto;width:auto;height:100%;max-width:33%;object-fit:contain;border-radius:6px;box-shadow:0 8px 18px rgba(0,0,0,.6)}
.ov .card.strip:hover .posters img{transform:none}
.idx section{padding:clamp(14px,1.4vw,22px);border-radius:16px;background:#1b1a18;border:1px solid #33302a}

/* film wall: all credits at once, small detail panel */
.wall{--railw:min(62%,calc((100svh - 220px)*1.43));grid-template-columns:var(--railw) minmax(0,1fr)}
.rail{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.th{opacity:1;border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.th::before{padding:2px}
.pager{display:none}
.stage{grid-template-columns:minmax(90px,150px) minmax(0,1fr);gap:clamp(16px,2vw,30px);padding:clamp(18px,2vw,30px);align-content:center}
.hero-p{--rx:0deg;--ry:0deg}
@media (max-width:1100px){.wall{grid-template-columns:1fr}.rail{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:720px){.rail{grid-template-columns:repeat(3,minmax(0,1fr))}.stage{grid-template-columns:110px minmax(0,1fr);text-align:left}.hero-p{max-width:none}}

/* overview cards: picture first, quiet label, the motion happens on hover */
.ov .card::before{opacity:.22}
.ov .card:hover::before{opacity:1}
.ov .card::after{background:radial-gradient(340px circle at var(--mx) var(--my),rgba(242,223,166,.16),transparent 62%)}
.ov .card img,.ov .card video{transition:transform 1.4s var(--ease),filter .6s,opacity .6s}
.ov .card:hover img{transform:scale(1.06);filter:brightness(.82)}
.ov .card .cap{align-items:center;justify-content:flex-start;gap:10px;padding:34px 16px 12px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.66));transition:transform .6s var(--ease),opacity .4s}
.ov .card .cap b{position:relative;padding-bottom:5px;font:400 clamp(13px,1.02vw,16px)/1.15 var(--display);letter-spacing:.14em;color:#f1eee7;text-shadow:0 1px 8px rgba(0,0,0,.75)}
.ov .card .cap b::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--goldgrad);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.ov .card .cap::after{content:"→";margin-left:auto;color:var(--gold-hi);font-size:15px;opacity:0;transform:translateX(-10px);transition:opacity .35s,transform .6s var(--ease)}
.ov .card .cap i{padding:0;background:none;color:var(--gold-hi);font:400 11px var(--display);letter-spacing:.1em;opacity:0;transition:opacity .4s .08s}
.ov .card:hover .cap{transform:translateY(-3px)}
.ov .card:hover .cap b{color:#fff}
.ov .card:hover .cap b::after{transform:scaleX(1)}
.ov .card:hover .cap::after{opacity:1;transform:none}
.ov .card:hover .cap i{opacity:1}
.ov .card .cap.only-hover{opacity:0}
.ov .card:hover .cap.only-hover{opacity:1}
@media (hover:none){.ov .card .cap.only-hover{opacity:1}.ov .card .cap i{opacity:1}}

/* background sits further back, card titles readable */
#field{opacity:.38;-webkit-mask-image:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.55) 68%,#000 100%);mask-image:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.55) 68%,#000 100%)}
.ov .card .cap{padding:48px 16px 13px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55) 45%,rgba(0,0,0,.88))}
.ov .card .cap b{font-size:clamp(16px,1.3vw,21px);letter-spacing:.1em;color:#fff;text-shadow:0 1px 3px #000,0 2px 14px rgba(0,0,0,.9)}
.ov .card .cap i{font-size:13px}
@media (max-width:560px){.ov .card .cap b{font-size:14px;letter-spacing:.06em}}

/* gold text fades top to bottom, same as the tech page */
.h2,.ftitle,.hero h1 .line:nth-child(2)>span{background:linear-gradient(180deg,#f4e6bb 8%,#dcbb72 58%,#c6a257 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* first screen: who, what, proof and contact on the left, the work on the right */
.hero{display:grid;grid-template-columns:minmax(400px,1fr) minmax(0,calc((100svh - 150px)*1.3333));gap:clamp(24px,3vw,56px);align-items:center;justify-content:normal}
.intro{min-width:0}
.hero h1{display:block;font-size:clamp(23px,min(1.85vw,4.4vh),38px);line-height:1.16}
.hero .sub{max-width:30em;margin-top:clamp(10px,1.8vh,18px);font-size:clamp(15px,1.05vw,18px);line-height:1.5}
.skills{list-style:none;margin:clamp(12px,2.2vh,24px) 0 0;padding:0;font-size:clamp(14px,.95vw,16px);opacity:0;animation:fade 1.2s .8s forwards}
.skills li{padding:clamp(4px,.8vh,8px) 0;border-top:1px solid #2c2820;color:#e4e1da}
.skills li:last-child{border-bottom:1px solid #2c2820}
.hero .tools{margin:clamp(8px,1.4vh,14px) 0 0;font-size:clamp(13px,.85vw,15px);letter-spacing:.02em;color:var(--gold-hi);opacity:0;animation:fade 1.2s .95s forwards}
.hero .facts{margin-top:clamp(12px,2.2vh,24px);padding-top:0;border-top:0;gap:clamp(22px,3vw,44px)}
.hero .fact b{font-size:clamp(26px,2.4vw,40px)}
.hero .acts{margin-top:clamp(12px,2.2vh,24px)}
.profiles{display:flex;gap:18px;margin:clamp(10px,1.6vh,16px) 0 0;font-size:13px;opacity:0;animation:fade 1.2s 1.1s forwards}
.profiles a{color:var(--dim);transition:color .25s}
.profiles a:hover{color:var(--gold-hi)}
.ov{grid-template-columns:repeat(3,1fr);max-width:none;margin:0}

/* studios and brands */
.clients{position:relative;z-index:2;padding-block:clamp(22px,3.4vh,36px);background:#141413;border-top:1px solid #2c2820}
.cl-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;margin:0;font:400 clamp(13px,1vw,16px)/1.5 var(--display);letter-spacing:.06em;color:#d4d1ca}
.cl-row+.cl-row{margin-top:10px}
.cl-row b{min-width:80px;font:700 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* software */
.sw-h{margin:0 0 14px;font:400 clamp(20px,1.8vw,28px)/1.2 var(--display);letter-spacing:.05em;text-transform:uppercase;color:#e2c67f}
.sw{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.sw section{padding:16px 18px;border-radius:14px;background:#1b1a18;border:1px solid #33302a}
.sw h4{margin:0 0 10px;font:700 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.sw p{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.sw span{padding:4px 10px;border-radius:99px;background:#0e0e0d;border:1px solid #38342c;font-size:13px;color:#e4e1da}

@media (max-width:1100px){.hero{grid-template-columns:1fr;min-height:0;padding-top:96px}.hero h1{font-size:clamp(28px,5vw,44px)}}
@media (max-width:720px){.ov{grid-template-columns:repeat(2,1fr)}.sw{grid-template-columns:1fr}}
.hero .fact span{white-space:nowrap}
.hero .acts{flex-wrap:nowrap}
.hero .acts .cta{white-space:nowrap}

/* phone */
@media (max-width:720px){
  .menu-btn{display:none}
  .hero .acts{flex-wrap:wrap}
  .rail{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
  .th,.th.off{display:block;width:auto;flex:none}
}
.reel{max-width:min(100%,calc((100svh - 170px)*1.7778));margin-inline:auto}
.ct b{font-family:var(--sans);font-weight:400;letter-spacing:.02em;text-transform:none}
@media (max-width:720px){.hero .facts{flex-wrap:nowrap}.hero .fact span{white-space:normal}.mark span{white-space:nowrap;font-size:13px}}


/* detail text stays readable on small screens too */
.bgs img{filter:blur(46px) saturate(1.1) brightness(.32)}
.ftitle{background:none;-webkit-text-fill-color:#f1e3b8;color:#f1e3b8}
.role{color:#fff}

/* film wall: one large screen with an ambient glow in the picture's own colours, all posters beside it */
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){
  .wall{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(38%,calc((100svh - 300px)*1.3)));gap:clamp(24px,3vw,48px);align-items:start}
  .left{order:2;min-width:0}
  .rail{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  .th{opacity:1;border-radius:7px}
  .th:not(.on){filter:brightness(.82)}
  .th:hover{filter:none}
  .pager{display:none}
  .stage{order:1;position:relative;display:block;padding:0;overflow:visible;background:none;border:0;border-radius:0;isolation:auto}
  .bgs{display:none}
  .glow{position:absolute;left:-5%;right:-5%;top:-7%;aspect-ratio:16/9;z-index:0;pointer-events:none}
  .glow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(64px) saturate(1.6);transition:opacity 1.1s ease}
  .glow img.show{opacity:.72}
  .reel-film{position:relative;z-index:1;aspect-ratio:16/9;max-height:calc(100svh - 330px);width:100%;overflow:hidden;border-radius:14px;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
  .reel-film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
  .reel-film img.contain{object-fit:contain}
  .reel-film img.show{opacity:1;animation:kenburns 6s linear forwards}
  @keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.05)}}
  .ticket{position:relative;z-index:1;display:flex;align-items:center;gap:16px;margin-top:14px;padding:12px 16px;border-radius:14px;background:#161513;border:1px solid #33302a}
  .ticket .hero-p{flex:none;width:58px;border-radius:6px;transform:none;box-shadow:none}
  .ticket .info{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;align-items:center}
  .ticket .ftitle,.ticket .ftitle.long{grid-column:1;margin:0 0 3px;font-size:clamp(20px,1.6vw,27px);line-height:1.12}
  .ticket .role{grid-column:1;display:block;margin:0;padding:0;border:0;background:none;color:#fff;font:400 15px/1.35 var(--sans);letter-spacing:0;text-transform:none}
  .ticket .meta{grid-column:1;display:flex;flex-wrap:wrap;gap:0 16px;margin:2px 0 0}
  .ticket .meta div{display:flex;gap:6px;font-size:14px;line-height:1.4}
  .ticket .meta dt{color:#e2c67f;font-size:inherit;letter-spacing:0;text-transform:none}
  .ticket .meta dd{margin:0;color:#e4e1da}
  .ticket .cta{grid-column:2;grid-row:1/4;padding:9px 16px;font:500 13px var(--sans);letter-spacing:.02em;text-transform:none;white-space:nowrap}
  .ticket #fc{display:none}
}

/* the film plays on the screen of the cinema picture */
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){
  .hall{position:relative;aspect-ratio:1198/761;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
  .hall>img{display:block;width:100%;height:100%}
  .hall .reel-film{position:absolute;left:17.45%;top:16.56%;width:64.86%;height:49.80%;aspect-ratio:auto;max-height:none;border-radius:0;box-shadow:none}
}
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){
  .wall{grid-template-columns:minmax(0,calc((100svh - 330px)*1.574)) minmax(0,1fr)}
  .rail{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){
  .wall{grid-template-columns:minmax(0,1fr) minmax(0,calc((100svh - 375px)*1.574))}
  .left{order:1}.stage{order:2}
  .th.hit{filter:none;transform:scale(1.07);z-index:3;box-shadow:0 0 0 2px #f2dfa6,0 0 30px rgba(216,180,99,.75)}
  .lever{display:flex;align-items:center;gap:12px;margin:12px auto 0;padding:7px 18px 7px 12px;border:1px solid var(--gold);border-radius:14px;background:rgba(0,0,0,.6);color:#e2c67f;font:500 14px var(--sans);cursor:pointer;transition:background .25s,color .25s}
  .lever:hover{background:var(--goldgrad);color:#1a1408}
  .lever i{position:relative;display:block;width:8px;height:30px;border-radius:4px;background:linear-gradient(90deg,#8d7040,#f2dfa6,#8d7040);transform-origin:50% 100%;transition:transform .35s var(--ease)}
  .lever i::before{content:"";position:absolute;left:50%;top:-7px;width:15px;height:15px;margin-left:-7.5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3cf,#b8924a 65%)}
  .lever.pull i{transform:rotateX(150deg)}
}

/* about page */
.about-top{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center;max-width:var(--max);min-height:calc(100svh - 40px);margin:0 auto;padding:96px var(--gut) 32px;position:relative;z-index:2}
.about-top .me{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:18px;box-shadow:0 0 0 1px rgba(242,223,166,.4),0 30px 60px rgba(0,0,0,.7)}
.about-top h1{margin:0 0 14px;font:400 clamp(30px,3.6vw,56px)/1.08 var(--display);letter-spacing:.03em;text-transform:uppercase;background:linear-gradient(180deg,#f4e6bb 8%,#dcbb72 58%,#c6a257 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.about-top p{max-width:44em;margin:0 0 12px;color:#e4e1da;font-size:clamp(15px,1.1vw,18px);line-height:1.6}
.about-top .acts{margin-top:20px;opacity:1;animation:none;display:flex;flex-wrap:wrap;gap:12px}
.skill-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.skill-grid section{padding:20px;border-radius:16px;background:#1b1a18;border:1px solid #33302a;transition:border-color .3s,transform .5s var(--ease)}
.skill-grid section:hover{border-color:#d8b463;transform:translateY(-3px)}
.skill-grid h3{margin:0 0 12px;font:400 clamp(16px,1.2vw,20px)/1.2 var(--display);letter-spacing:.05em;text-transform:uppercase;color:#e2c67f}
.skill-grid ul{margin:0;padding:0;list-style:none}
.skill-grid li{padding:6px 0;border-top:1px solid #2c2820;color:#e4e1da;font-size:15px;line-height:1.4}
.about-sw{grid-template-columns:repeat(4,1fr)}
@media (max-width:1040px){.skill-grid,.about-sw{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.about-top{grid-template-columns:1fr;min-height:0}.about-top .me{max-width:240px}.skill-grid,.about-sw{grid-template-columns:1fr}}

/* the film always fills the cinema screen, poster-only films show their upper part */
.hall .reel-film{left:17.25%;top:16.3%;width:65.25%;height:50.3%}
.hall .reel-film img{object-position:50% 28%}

/* studios and brands as chips on the about page */
.cl-row{gap:8px;align-items:center;margin-bottom:14px}
.cl-row b{width:100%}
.cl-row span{padding:5px 13px;border-radius:99px;background:#1b1a18;border:1px solid #38342c;color:#e4e1da;font:400 14px var(--sans);letter-spacing:0;transition:border-color .25s,color .25s}
.cl-row span:hover{border-color:#d8b463;color:#f2dfa6}



/* realistic hall and rendered lever */
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){
  .hall{aspect-ratio:979/620}
  .hall .reel-film{left:17.21%;top:11.09%;width:65.67%;height:53.95%}
  .wall{grid-template-columns:minmax(0,1fr) minmax(0,min(calc(100% - 380px),calc((100svh - 375px)*1.579)))}
  .left{max-width:calc((100svh - 360px)*1.43);width:100%;justify-self:start}
  .lever{gap:14px;padding:0 6px;border:0;background:none;color:#e2c67f;font:400 clamp(15px,1.15vw,19px) var(--display);letter-spacing:.08em;text-transform:uppercase}
  .lever:hover{background:none;color:#f2dfa6}
  .lv{position:relative;display:block;width:66px;height:92px}
  .lv img{position:absolute;left:0;width:100%;height:auto}
  .lv .base{bottom:0;z-index:2}
  .lv .arm{bottom:15px;transform-origin:50% 100%;transition:transform .32s cubic-bezier(.3,1.4,.5,1);filter:drop-shadow(0 3px 5px rgba(0,0,0,.6))}
  .lever:hover .arm{transform:rotate(8deg)}
  .lever.pull .arm{transform:rotate(52deg)}
}

/* portrait stays small and true to the photo */
.about-top{grid-template-columns:minmax(150px,220px) minmax(0,1fr)}
.about-top .me{aspect-ratio:auto;height:auto;object-fit:initial;border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.14)}

/* the whole picture on a black screen, nothing cropped; plain button instead of the lever */
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){
  .hall .reel-film{background:#000;transform:scale(1.014)}
  .hall .reel-film img,.hall .reel-film img.contain{object-fit:contain;object-position:50% 50%}
  .hall .reel-film img.show{animation:none}
  .lever,.lever:hover{display:block;gap:0;margin:14px auto 0;padding:10px 24px;border:1px solid var(--gold);border-radius:14px;background:none;color:#e2c67f;font:500 14px var(--sans);letter-spacing:.02em;text-transform:none}
  .lever:hover{background:var(--goldgrad);color:#1a1408}
  .lever.pull{opacity:.6;pointer-events:none}
}
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){.hall .reel-film{height:56.8%;transform-origin:50% 0;transform:scale(1.014,1.006)}}

/* service cards use the same heading font as the rest of the page */
.sv h3{font:400 clamp(17px,1.35vw,22px)/1.25 var(--display);letter-spacing:.05em;text-transform:uppercase;color:#e2c67f}

/* film subpages */
.film-top{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:92px var(--gut) clamp(22px,4vh,40px)}
.film-back{display:inline-flex;gap:8px;margin-bottom:clamp(16px,3vh,28px);padding:6px 14px;border:1px solid var(--line);border-radius:99px;background:rgba(10,10,10,.7);color:#d4d2cc;font-size:13px;transition:border-color .25s,color .25s}
.film-back:hover{border-color:#d8b463;color:#f2dfa6}
.film-head{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.film-poster{width:100%;height:auto;border-radius:10px;box-shadow:0 0 0 1px rgba(242,223,166,.35),0 26px 50px rgba(0,0,0,.7)}
.film-head h1{margin:0 0 16px;font:400 clamp(28px,3.4vw,52px)/1.1 var(--display);letter-spacing:.03em;text-transform:uppercase;background:linear-gradient(180deg,#f4e6bb 8%,#dcbb72 58%,#c6a257 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.film-meta{margin:0;max-width:46em}
.film-meta div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:14px;padding:9px 0;border-top:1px solid #2c2820;font-size:clamp(15px,1.05vw,17px);line-height:1.45}
.film-meta div:last-child{border-bottom:1px solid #2c2820}
.film-meta dt{color:#e2c67f}
.film-meta dd{margin:0;color:#f1eee7}
.film-head p{max-width:44em;margin:14px 0 0;color:#e4e1da;line-height:1.6}
.fv{display:block;width:100%;aspect-ratio:16/9;margin-bottom:16px;border-radius:14px;background:#000}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,16px)}
.shot{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.08);transition:box-shadow .3s}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.shot span{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 9px;font-size:13px;line-height:1.3;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));opacity:0;transition:opacity .3s}
.shot:hover{box-shadow:0 0 0 2px #d8b463}
.shot:hover img{transform:scale(1.04)}
.shot:hover span{opacity:1}
.film-nav{display:flex;justify-content:space-between;gap:16px;margin-top:clamp(24px,4vh,40px)}
.film-nav a{padding:9px 16px;border:1px solid var(--gold);border-radius:14px;color:#e2c67f;font-size:14px;transition:background .25s,color .25s}
.film-nav a:hover{background:var(--goldgrad);color:#1a1408}
@media (hover:none){.shot span{opacity:1}}
@media (max-width:900px){.shots{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.film-head{grid-template-columns:1fr}.film-poster{max-width:200px}.shots{grid-template-columns:1fr}.film-meta div{grid-template-columns:100px minmax(0,1fr)}.film-nav{flex-direction:column}}
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){.hall .reel-film{left:16.5%;top:10.3%;width:67.2%;height:58.4%;transform:none}}

/* the screen lights the room in the picture's own colours and melts into it */
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){
  .hall .glow{position:absolute;left:3%;right:3%;top:0;bottom:4%;width:auto;aspect-ratio:auto;z-index:1;pointer-events:none;mix-blend-mode:screen}
  .hall .glow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(42px) saturate(1.35);transition:opacity 1.1s ease}
  .hall .glow img.show{opacity:.62}
  .hall .reel-film{z-index:2;box-shadow:0 0 34px rgba(255,240,215,.16)}
  .hall .reel-film::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 44px 8px rgba(0,0,0,.5);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 30%)}
}
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){
  .hall .glow{-webkit-mask-image:radial-gradient(62% 66% at 50% 38%,#000 55%,transparent 100%);mask-image:radial-gradient(62% 66% at 50% 38%,#000 55%,transparent 100%)}
  .hall .glow img.show{opacity:.3}
}
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){
  .hall .glow img.show{opacity:.15}
  .hall .reel-film{box-shadow:0 0 18px rgba(255,240,215,.08)}
}
.film-poster{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 16px 30px rgba(0,0,0,.6)}
/* no glow behind the screen; the picture sits in the room through a soft dark edge and slightly lower brightness */
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){
  .hall .glow{display:none}
  .hall .reel-film{box-shadow:none}
  .hall .reel-film img{filter:brightness(.9) contrast(.97)}
  .hall .reel-film::after{box-shadow:inset 0 0 26px 4px rgba(0,0,0,.42);background:none}
}
/* small halo from the current picture, lying over the dark gradient around the screen */
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){
  .hall .glow{display:block;left:14.6%;right:auto;top:7.6%;bottom:auto;width:71%;height:63.8%;-webkit-mask-image:none;mask-image:none;mix-blend-mode:screen}
  .hall .glow img{filter:blur(16px) saturate(1.2)}
  .hall .glow img.show{opacity:.34}
}
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){.hall .glow img{filter:blur(22px) saturate(1.2)}.hall .glow img.show{opacity:.24}}

/* assets page */
.asset-top{padding-bottom:clamp(16px,3vh,28px)}
.asset-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,calc((100svh - 260px)*1.7778));gap:clamp(24px,4vw,56px);align-items:center}
.asset-intro h1{margin:0;font:400 clamp(34px,4.4vw,68px)/1.05 var(--display);letter-spacing:.04em;text-transform:uppercase;background:linear-gradient(180deg,#f4e6bb 8%,#dcbb72 58%,#c6a257 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.asset-lead{margin:6px 0 20px;color:#e4e1da;font-size:clamp(16px,1.3vw,20px)}
.asset-chips{display:flex;flex-wrap:wrap;gap:7px}
.asset-chips a{padding:6px 13px;border:1px solid #38342c;border-radius:99px;background:#1b1a18;color:#e4e1da;font-size:13px;transition:border-color .25s,color .25s}
.asset-chips a:hover{border-color:#d8b463;color:#f2dfa6}
.asset-trailer{display:block;width:100%;aspect-ratio:16/9;border-radius:14px;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.asset-block{scroll-margin-top:60px}
.asset-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;margin-bottom:clamp(14px,2.4vh,24px)}
.asset-head .h2{margin:0}
.asset-head p{margin:0;color:#c9c6bf;font-size:clamp(14px,1.05vw,17px)}
.asset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.1vw,14px)}
.asset-shot{aspect-ratio:1/1;background:#111}
.asset-shot img{object-fit:contain}
.asset-video{display:block;grid-column:span 2;width:100%;aspect-ratio:16/9;align-self:center;border-radius:12px;background:#000}
@media (max-width:1100px){.asset-intro{grid-template-columns:1fr}.asset-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.asset-grid{grid-template-columns:1fr}.asset-video{grid-column:auto}}
/* no black bars: the picture's own colours fill the rest of the screen, soft and dim */
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){
  .hall .reel-film{background:#0b0a09}
  .hall .reel-film::before{content:"";position:absolute;inset:-40px;z-index:0;background:var(--shot) center/cover no-repeat;filter:blur(26px) saturate(1.25) brightness(.62);transition:background-image .8s}
  .hall .reel-film img{z-index:1}
  .hall .reel-film::after{box-shadow:inset 0 0 14px 1px rgba(0,0,0,.25)}
  .hall .glow img{filter:blur(24px) saturate(1.25)}
  .hall .glow img.show{opacity:.3}
}

/* footage on the screen, settled dust and a slight parallax in the hall */
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){
  .hall .reel-film .clip{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .6s;filter:brightness(.9) contrast(.97)}
  .hall .reel-film .clip.show{opacity:1}
  .hall{--hx:0px;--hy:0px;--dx:0px;--dy:0px}
  .hall-in{position:absolute;inset:0;transform:translate(var(--hx),var(--hy)) scale(1.035);transition:transform .9s var(--ease)}
  .hall-in>img{display:block;width:100%;height:100%}
  .room-dust{position:absolute;inset:-14px;z-index:3;width:calc(100% + 28px);height:calc(100% + 28px);pointer-events:none;mix-blend-mode:screen;transform:translate(var(--dx),var(--dy));transition:transform 1.1s var(--ease)}
}

/* calm hover: no tilt on posters, parallax is eased in the script */
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){
  .hall-in,.room-dust{transition:none;will-change:transform}
  .hall-in{transform:scale(1.035)}
  .room-dust{transform:none}
  .th,.th:hover,.th.moving{transform:none;transition:filter .3s,box-shadow .3s}
  .th.hit{transform:none}
}
/* room dimmed, foreground falls softly into the dark; the film stays bright */
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){
  .hall-in>img{filter:brightness(.72) saturate(.92)}
  .hall::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 12%,transparent 68%,rgba(0,0,0,.42) 84%,rgba(0,0,0,.72))}
}

/* cinema: brighter room, no halo, only the soft gradient */
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){
  .hall-in>img{filter:brightness(.92)}
  .hall .glow{display:none}
  .hall::after{background:linear-gradient(180deg,transparent 72%,rgba(0,0,0,.2) 86%,rgba(0,0,0,.42))}
}

/* rebuilt subpages */
.sub-top{padding-bottom:clamp(10px,2vh,20px)}
.sub-title{margin:0;font:400 clamp(30px,3.8vw,58px)/1.08 var(--display);letter-spacing:.03em;text-transform:uppercase;background:linear-gradient(180deg,#f4e6bb 8%,#dcbb72 58%,#c6a257 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.sub-block .h2{margin-bottom:12px}
.sub-text{max-width:62em;margin-bottom:clamp(14px,2.4vh,24px);color:#e4e1da;font-size:clamp(15px,1.08vw,17px);line-height:1.65}
.sub-text p{margin:0 0 8px}
.sub-text h3{margin:18px 0 6px;font:400 clamp(17px,1.4vw,22px)/1.25 var(--display);letter-spacing:.05em;text-transform:uppercase;color:#e2c67f}
.sub-text ul{margin:0 0 10px;padding-left:18px}
.sub-text li{margin:3px 0}
.sub-text a{color:#d8b463}
.sub-text a:hover{color:#f2dfa6}
.sub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,16px)}
.sub-shot{aspect-ratio:16/10;background:#111}
.sub-shot img{object-fit:contain}
.sub-grid .asset-video{grid-column:span 3}
@media (max-width:900px){.sub-grid{grid-template-columns:repeat(2,1fr)}.sub-grid .asset-video{grid-column:span 2}}
@media (max-width:560px){.sub-grid{grid-template-columns:1fr}.sub-grid .asset-video{grid-column:auto}}

/* faint reflection of the picture on the floor in front of the screen */
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){
  .hall .glow{display:block;left:16.5%;right:auto;top:68.9%;bottom:auto;width:67.2%;height:9.5%;mix-blend-mode:screen;transform:scaleY(-1);overflow:hidden;-webkit-mask-image:linear-gradient(0deg,#000,transparent 92%);mask-image:linear-gradient(0deg,#000,transparent 92%)}
  .hall .glow img{object-position:50% 100%;filter:blur(7px) saturate(1.1)}
  .hall .glow img.show{opacity:.3}
}
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){.hall .glow img.show{opacity:.46}}
@media (max-width:720px){.about-top{grid-template-columns:1fr}.about-top>*{min-width:0}}
/* floor: no mirrored picture, only a soft colour sheen */
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){
  .hall .glow{top:69.2%;height:6.5%;left:22%;width:56%;-webkit-mask-image:radial-gradient(50% 100% at 50% 0,#000,transparent);mask-image:radial-gradient(50% 100% at 50% 0,#000,transparent);transform:none}
  .hall .glow img{object-position:50% 100%;filter:blur(20px) saturate(1.15)}
  .hall .glow img.show{opacity:.26}
}
/* colour sheen only on the carpet of the aisle, nothing on the wall */
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){
  .hall .glow{left:38%;width:24%;top:90.5%;height:9.5%;-webkit-mask-image:none;mask-image:none;clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);transform:none}
  .hall .glow img{object-position:50% 100%;filter:blur(10px) saturate(1.2)}
  .hall .glow img.show{opacity:.55}
}

/* text beside its picture on rebuilt subpages */
.sub-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(20px,3vw,48px);align-items:center}
.sub-row .sub-text{margin:0}
.sub-media{display:grid;gap:12px;min-width:0}
.sub-media .asset-video{grid-column:auto}
.sub-lead{max-width:44em;margin:0 0 18px;color:#e4e1da;font-size:clamp(15px,1.15vw,18px)}
@media (max-width:900px){.sub-row{grid-template-columns:1fr}}

/* showreels page */
.reel-stage{max-width:calc((100svh - 300px)*1.58);margin:0 auto}
.reel-stage .hall{position:relative;overflow:hidden;border-radius:14px}
.reel-player{display:block;width:100%;aspect-ratio:16/9;border-radius:14px;background:#000}
.reel-player[hidden],#cine[hidden]{display:none}
.reel-picks{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:18px}
.reel-pick{display:grid;gap:3px;padding:11px 20px;border:1px solid #4a4030;border-radius:14px;background:#161513;color:#e2c67f;font:400 clamp(15px,1.2vw,19px) var(--display);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:border-color .25s,background .25s}
.reel-pick b{font-weight:400}
.reel-pick small{font:400 13px var(--sans);letter-spacing:0;text-transform:none;color:#d4d2cc}
.reel-pick:hover,.reel-pick.on{border-color:#d8b463;background:#1f1c16}
.reel-back{padding:9px 18px;border:1px solid var(--gold);border-radius:14px;background:none;color:#e2c67f;font:500 14px var(--sans);cursor:pointer}
.reel-back[hidden]{display:none}
.reel-back:hover{background:var(--goldgrad);color:#1a1408}
@media (max-width:1100px){#cine{display:none}.reel-player{display:block}.reel-player[hidden]{display:none}}

/* showreels fit one screen */
.reel-page{padding-block:clamp(14px,2.4vh,24px)}
.reel-stage{max-width:calc((100svh - 345px)*1.58)}
.reel-picks{margin-top:14px}
.reel-page .reel-player{max-height:calc(100svh - 300px)}
.reel-top .sub-title{text-align:center}

/* page titles are centred on every subpage */
.sub-title{text-align:center;margin-bottom:clamp(14px,2.6vh,26px)}
.about-top .sub-title{grid-column:1/-1;margin-bottom:0;background:linear-gradient(180deg,#f4e6bb 8%,#dcbb72 58%,#c6a257 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.about-top{align-content:center}

/* assets page: one cinematic opening, then every asset presented on its own */
.asset-hero{position:relative;z-index:2;height:min(74svh,760px);overflow:hidden;background:#000}
.asset-hero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
.asset-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 34%,rgba(0,0,0,.45) 62%,#0c0c0c)}
.asset-hero-in{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;height:100%;max-width:var(--max);margin:0 auto;padding:92px var(--gut) clamp(22px,4vh,40px)}
.asset-hero .film-back{align-self:flex-start;margin:0}
.asset-hero-text{text-align:center}
.asset-hero .sub-title{margin-bottom:6px;font-size:clamp(38px,5.4vw,84px)}
.asset-hero .asset-lead{margin:0 0 18px;color:#f1eee7}
.asset-hero .asset-chips{justify-content:center}
.asset-hero .asset-chips a{background:rgba(10,10,10,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cases{position:relative;z-index:2;background:#0c0c0c}
.case{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:clamp(28px,5vw,88px);align-items:center;max-width:var(--max);margin:0 auto;padding:clamp(40px,8vh,84px) var(--gut);scroll-margin-top:54px}
.case.flip .case-stage{order:2}
.case-stage{position:relative;min-width:0;height:min(68svh,720px);overflow:hidden;border-radius:6px;background:#050505}
.case-shot{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;box-shadow:none;background:none}
.case-shot[hidden]{display:none}
.case-shot img{width:100%;height:100%;object-fit:contain}
.case-shot:hover{box-shadow:none}
.case-shot:hover img{transform:none}
.case-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.case-side{min-width:0}
.case-no{margin:0 0 10px;font:400 14px var(--display);letter-spacing:.24em;color:#a8905a}
.case-side h2{margin:0 0 10px;font:400 clamp(26px,2.9vw,46px)/1.1 var(--display);letter-spacing:.03em;text-transform:uppercase;background:linear-gradient(180deg,#f4e6bb 8%,#dcbb72 58%,#c6a257 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.case-sub{margin:0 0 22px;color:#d4d1ca;font-size:clamp(15px,1.1vw,18px);line-height:1.5}
.case-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px}
.case-thumb{position:relative;aspect-ratio:1/1;padding:0;border:0;border-radius:3px;overflow:hidden;background:#1a1a1a;cursor:pointer;opacity:.55;transition:opacity .25s,box-shadow .25s}
.case-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.case-thumb:hover{opacity:1}
.case-thumb.on{opacity:1;box-shadow:0 0 0 1px #d8b463}
.case-thumb.is-video{display:grid;place-items:center;color:#e2c67f;font-size:15px}
@media (max-width:1000px){.case,.case.flip{grid-template-columns:1fr}.case.flip .case-stage{order:0}.case-stage{height:auto;aspect-ratio:1/1}}

/* shared motion for all subpages */
.sub-hero{height:min(64svh,640px)}
.sub-hero.plain{height:auto}
.sub-hero.plain::after{display:none}
.sub-hero.plain .asset-hero-in{height:auto;gap:18px;padding-bottom:18px}
.hero-drift{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;opacity:.66;animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1) translate3d(-1%,0,0)}to{transform:scale(1.07) translate3d(1%,-1%,0)}}
.asset-hero .sub-title{opacity:0;transform:translateY(18px);animation:heroin 1.2s .2s var(--ease) forwards}
@keyframes heroin{to{opacity:1;transform:none}}
.case-text{color:#e4e1da;font-size:clamp(15px,1.08vw,17px);line-height:1.65}
.case-text p{margin:0 0 8px}
.case-text h3{margin:16px 0 6px;font:400 clamp(16px,1.3vw,20px)/1.25 var(--display);letter-spacing:.05em;text-transform:uppercase;color:#e2c67f}
.case-text ul{margin:0 0 10px;padding-left:18px}
.case-text a{color:#d8b463}
.case-side .case-thumbs{margin-top:18px}
.case-plain{max-width:var(--max);margin:0 auto;padding:clamp(30px,6vh,60px) var(--gut)}
.case-plain h2{margin:0 0 14px;font:400 clamp(24px,2.6vw,40px)/1.12 var(--display);letter-spacing:.03em;text-transform:uppercase;background:linear-gradient(180deg,#f4e6bb 8%,#dcbb72 58%,#c6a257 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.case-plain .case-text{max-width:60em}
.mosaic-block{max-width:var(--max);margin:0 auto;padding:clamp(24px,5vh,50px) var(--gut)}
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(8px,.9vw,12px)}
.mosaic-shot{grid-column:span 4;aspect-ratio:16/10;border-radius:4px;background:#050505;box-shadow:none}
.mosaic-shot img{object-fit:cover}
.mosaic-shot.m0{grid-column:span 8;grid-row:span 2;aspect-ratio:auto}
.mosaic-shot.m3,.mosaic-shot.m4{grid-column:span 6}
.mosaic-shot:hover{box-shadow:0 0 0 1px #d8b463}
.mosaic-video{grid-column:span 12;width:100%;aspect-ratio:16/9;background:#000}
.mosaic-block .fv{margin-bottom:10px;border-radius:4px}
.film-brief{display:grid;grid-template-columns:minmax(140px,210px) minmax(0,1fr);gap:clamp(22px,4vw,56px);align-items:center;max-width:var(--max);margin:0 auto;padding:clamp(22px,4vh,44px) var(--gut) 0}
@media (max-width:900px){.mosaic-shot,.mosaic-shot.m0,.mosaic-shot.m3,.mosaic-shot.m4{grid-column:span 6;grid-row:auto;aspect-ratio:16/10}}
@media (max-width:560px){.mosaic{grid-template-columns:1fr}.mosaic-shot,.mosaic-shot.m0,.mosaic-shot.m3,.mosaic-shot.m4{grid-column:auto}.film-brief{grid-template-columns:1fr}.film-brief .film-poster{max-width:180px}}
@media (prefers-reduced-motion:reduce){.hero-drift{animation:none}.asset-hero .sub-title{opacity:1;transform:none;animation:none}}
.case-stage{background:none}
.case-video{background:none}

/* calm mosaic: two wide, three narrow, every row closes cleanly */
.mosaic-shot,.mosaic-shot.m0,.mosaic-shot.m1,.mosaic-shot.m2,.mosaic-shot.m3,.mosaic-shot.m4{grid-row:auto;aspect-ratio:16/9}
.mosaic-shot.m0,.mosaic-shot.m1{grid-column:span 6}
.mosaic-shot.m2,.mosaic-shot.m3,.mosaic-shot.m4{grid-column:span 4}
.mosaic-block{max-width:min(var(--max),1320px)}
@media (max-width:900px){.mosaic-shot.m0,.mosaic-shot.m1,.mosaic-shot.m2,.mosaic-shot.m3,.mosaic-shot.m4{grid-column:span 6}}
@media (max-width:560px){.mosaic-shot.m0,.mosaic-shot.m1,.mosaic-shot.m2,.mosaic-shot.m3,.mosaic-shot.m4{grid-column:auto}}

/* calmer openings, tighter and even distribution of the content */
.asset-hero,.sub-hero{height:min(42svh,400px)}
.asset-hero>video,.hero-drift{opacity:.34;filter:saturate(.85)}
.asset-hero::after{background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.28) 45%,#0c0c0c)}
.asset-hero-in{padding-top:80px;padding-bottom:18px}
.asset-hero .sub-title{font-size:clamp(28px,3.6vw,54px)}
.asset-hero .asset-lead{margin-bottom:12px}
.case,.case.flip{grid-template-columns:minmax(0,min(62%,calc(100svh - 170px))) minmax(0,1fr);gap:clamp(22px,3vw,44px);align-items:start;padding-block:clamp(22px,4vh,36px);border-top:1px solid #1f1c16}
.case.flip .case-stage{order:0}
.case-stage{height:auto;aspect-ratio:1/1;max-height:calc(100svh - 170px)}
.case-side{position:sticky;top:76px}
.case-no{margin-bottom:6px}
.case-sub{margin-bottom:16px}
.case-thumbs{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.cases>.case:first-child{border-top:0}
@media (max-width:1000px){.case,.case.flip{grid-template-columns:1fr}.case-side{position:static}}

/* services page */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:var(--max);margin:0 auto;padding:clamp(22px,4vh,40px) var(--gut) 0}
.service{padding:clamp(18px,1.8vw,28px);border-radius:16px;background:#161513;border:1px solid #2c2820;transition:border-color .3s,transform .5s var(--ease)}
.service:hover{border-color:#d8b463;transform:translateY(-3px)}
.service>span{display:block;margin-bottom:12px;font:400 13px var(--display);letter-spacing:.2em;color:#a8905a}
.service h2{margin:0 0 12px;font:400 clamp(17px,1.4vw,22px)/1.25 var(--display);letter-spacing:.04em;text-transform:uppercase;color:#e2c67f}
.service p{margin:0 0 10px;color:#d4d1ca;font-size:14px;line-height:1.5}
.service ul{margin:0;padding:0;list-style:none}
.service li{padding:7px 0;border-top:1px solid #2c2820;color:#e4e1da;font-size:14px;line-height:1.45}
.services-end{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,4vw,56px);max-width:var(--max);margin:0 auto;padding:clamp(28px,5vh,50px) var(--gut)}
.services-end h2{margin:0 0 12px;font:400 clamp(20px,2vw,30px)/1.2 var(--display);letter-spacing:.04em;text-transform:uppercase;color:#e2c67f}
.services-why p{margin:0 0 18px;max-width:40em;color:#e4e1da;line-height:1.6}
.sw-chips{display:flex;flex-wrap:wrap;gap:7px}
.sw-chips span{padding:5px 12px;border-radius:99px;background:#1b1a18;border:1px solid #38342c;font-size:13px;color:#e4e1da}
@media (max-width:1000px){.services-grid{grid-template-columns:repeat(2,1fr)}.services-end{grid-template-columns:1fr}}
@media (max-width:620px){.services-grid{grid-template-columns:1fr}}

/* film environments: one film per block, credits stay beside its pictures */
.env{display:grid;grid-template-columns:minmax(210px,270px) minmax(0,1fr);gap:clamp(22px,3.4vw,52px);align-items:start;max-width:var(--max);margin:0 auto;padding:clamp(26px,4.6vh,46px) var(--gut);border-top:1px solid #1f1c16}
.cases>.env:first-child{border-top:0}
.env-side{position:sticky;top:76px}
.env-poster{display:block;width:62%;height:auto;margin-bottom:14px;border-radius:6px;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.env-side h2{margin:0 0 12px;font:400 clamp(18px,1.6vw,25px)/1.2 var(--display);letter-spacing:.04em;text-transform:uppercase;color:#e2c67f}
.env-side dl{margin:0 0 14px}
.env-side dl div{padding:7px 0;border-top:1px solid #2c2820;font-size:13.5px;line-height:1.4}
.env-side dt{color:#a8905a;font-size:12px}
.env-side dd{margin:0;color:#e4e1da}
.env-link{color:#e2c67f;font-size:14px}
.env-link:hover{color:#f2dfa6}
.env-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-width:0}
.env-shot{aspect-ratio:16/9;border-radius:3px;background:#050505;box-shadow:none}
.env-shot img{object-fit:cover}
.env-shot.lead{grid-column:1/-1;aspect-ratio:21/9}
.env-shot:hover{box-shadow:0 0 0 1px #d8b463}
.env-note{max-width:var(--max);margin:0 auto;padding:18px var(--gut) 34px;color:#8f8b82;font-size:12.5px;line-height:1.5}
@media (max-width:900px){.env{grid-template-columns:1fr}.env-side{position:static}.env-poster{width:150px}.env-grid{grid-template-columns:repeat(2,1fr)}}
.env-shot.lead{width:100%;justify-self:stretch}
.env-shot.lead{max-width:none;margin:0}

/* pages that tell a story top to bottom: pictures keep their real shape and order */
.flow{max-width:min(var(--max),1280px);margin:0 auto;padding:clamp(24px,4.6vh,46px) var(--gut);border-top:1px solid #1f1c16}
.flow-lead{border-top:0;padding-bottom:6px;color:#e4e1da;font-size:clamp(15px,1.15vw,18px);line-height:1.65}
.flow-lead p{max-width:54em;margin:0 auto;text-align:center}
.flow>h2{margin:0 0 14px;font:400 clamp(24px,2.6vw,40px)/1.15 var(--display);letter-spacing:.03em;text-transform:uppercase;background:linear-gradient(180deg,#f4e6bb 8%,#dcbb72 58%,#c6a257 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.flow-sub{margin:20px 0 10px;font:400 clamp(16px,1.3vw,20px)/1.2 var(--display);letter-spacing:.05em;text-transform:uppercase;color:#e2c67f}
.flow-text{max-width:54em;margin:6px 0 12px;color:#e4e1da;font-size:clamp(15px,1.05vw,17px);line-height:1.6}
.flow-grid{display:grid;gap:10px;margin:10px 0;align-items:start}
.flow-grid.n1{grid-template-columns:minmax(0,1fr)}
.flow-grid.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.flow-grid.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.flow-shot{aspect-ratio:auto;border-radius:4px;background:none;box-shadow:none}
.flow-shot img{width:100%;height:auto;object-fit:initial}
.flow-grid.n1 .flow-shot img{max-height:78svh;width:auto;max-width:100%;margin:0 auto}
.flow-video{display:block;width:100%;max-height:78svh;margin:10px 0;border-radius:4px;background:#000}
@media (max-width:700px){.flow-grid.n2,.flow-grid.n3{grid-template-columns:1fr}}

/* each project stands on its own panel */
.env,.case,.case.flip{width:calc(100% - 2*var(--gut));max-width:calc(var(--max) - 2*var(--gut));margin:22px auto;padding:clamp(18px,2vw,30px);border:1px solid #2c2820;border-radius:16px;background:#141413;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.cases>.env:first-child,.cases>.case:first-child{border-top:1px solid #2c2820;margin-top:26px}
.env-side,.case-side{top:84px}
.env-note{margin-top:8px}

/* assets: same structure as film environments, every picture visible, no banner */
.asset-head-plain{text-align:center}
.asset-head-plain .film-back{display:flex;width:max-content;margin-bottom:6px}
.asset-head-plain .sub-title{margin-bottom:4px}
.asset-head-plain .asset-lead{margin:0 0 14px;text-align:center}
.asset-head-plain .asset-chips{justify-content:center}
.asset-env{scroll-margin-top:66px}
.asset-env .case-sub{margin-bottom:0}
.asset-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-width:0}
.asset-tile{aspect-ratio:1/1;border-radius:4px;background:#1a1a19;box-shadow:none}
.asset-tile img{width:100%;height:100%;object-fit:contain}
.asset-tile:hover{box-shadow:0 0 0 1px #d8b463}
.asset-tile:hover img{transform:none}
.asset-clip{grid-column:1/-1;display:block;width:100%;aspect-ratio:16/9;border-radius:4px;background:#000}
@media (max-width:900px){.asset-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.case-thumb{font-family:var(--sans)}

.resume-card{display:block;max-width:560px;text-align:center}
.resume-card h2{margin:0 0 8px;font:400 clamp(20px,2vw,30px)/1.2 var(--display);letter-spacing:.04em;text-transform:uppercase;color:#e2c67f}
.resume-card p{margin:0 0 18px;color:#d4d1ca}
/* film pages with cinema frames: one even size, baked-in black bars cropped (owner 2026-11-08 "images off in scale") */
.mosaic .mosaic-shot.scope{grid-column:span 6;grid-row:auto;aspect-ratio:2.39/1}
.mosaic .mosaic-shot.scope img{object-fit:cover}
@media (max-width:700px){.mosaic .mosaic-shot.scope{grid-column:1/-1}}
.credit-year{margin:-4px 0 6px;color:var(--gold);font-size:13px;letter-spacing:.12em}
/* concept art: the painting time-lapse on hover (concept-paint.js) */
.paint-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;border-radius:inherit}
/* resume page: the CV readable on the page + downloads (owner 2026-11-08) */
.cv{max-width:var(--max);margin:0 auto;padding:0 var(--gut) 80px}
.cv-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 48px;align-items:end;padding:28px 0 34px;border-bottom:1px solid var(--line)}
.cv-name{margin:0 0 10px;font:400 clamp(30px,3.6vw,54px)/1.05 var(--display);letter-spacing:.06em;text-transform:uppercase;background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cv-tag{margin:0 0 10px;max-width:62ch;color:#e8e4da;font-size:15px;line-height:1.55}
.cv-loc{margin:0;color:var(--dim);font-size:14px}
.cv-loc a,.cv-pr a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(216,180,99,.35)}
.cv-loc a:hover,.cv-pr a:hover{color:var(--gold-hi);border-bottom-color:var(--gold-hi)}
.cv-dl{display:grid;gap:10px;justify-items:start}
.cv-dl-h{margin:0 0 2px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.cv-dl-h span{color:var(--dim)}
.cv-dl-row{display:flex;flex-wrap:wrap;gap:10px}
.cv-dl-row .cta{padding:11px 20px}
.cv-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,340px);gap:clamp(28px,4vw,72px);padding-top:34px}
.cv-main h2,.cv-side h3{margin:0 0 16px;font:400 clamp(18px,1.6vw,24px)/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;color:#e2c67f}
.cv-main h2{margin-top:6px}
.cv-main h2+p{margin-top:0}
.cv-main p{max-width:72ch;margin:0 0 14px;color:#d8d4ca;font-size:15.5px;line-height:1.7}
.cv-main p:last-of-type{margin-bottom:38px}
.cv-jobs{list-style:none;margin:0;padding:0}
.cv-job{display:grid;grid-template-columns:86px minmax(0,1fr);gap:18px;padding:14px 0;border-top:1px solid var(--line)}
.cv-yr{color:var(--gold);font-size:13.5px;font-variant-numeric:tabular-nums;padding-top:2px}
.cv-job b{display:block;color:#fff;font-weight:600;font-size:15px;line-height:1.4}
.cv-co{display:block;color:#cfcac0;font-size:14px;margin-top:2px}
.cv-pr{display:block;color:var(--dim);font-size:14px;margin-top:2px}
.cv-side{display:grid;gap:30px;align-content:start;position:sticky;top:96px}
.cv-side ul{list-style:none;margin:0;padding:0}
.cv-side li{position:relative;padding:5px 0 5px 16px;color:#d8d4ca;font-size:14px;line-height:1.5}
.cv-side li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
@media (max-width:900px){.cv-head{grid-template-columns:1fr}.cv-body{grid-template-columns:1fr}.cv-side{position:static}}
@media (max-width:520px){.cv-job{grid-template-columns:1fr;gap:4px}}

.services-grid{padding-bottom:clamp(28px,5vh,50px)}
.service-why p{font-size:14.5px;color:#e4e1da;margin-bottom:16px}

/* project pages share the environments pattern */
.env-solo{display:block}
.env .case-text{font-size:14.5px;line-height:1.6}
.env .env-side>h2{margin-bottom:10px}
.env-media{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-width:0;align-items:start}
.env-pic{aspect-ratio:auto;border-radius:3px;background:none;box-shadow:none}
.env-pic img{display:block;width:100%;height:auto;object-fit:initial}
.env-pic.wide{grid-column:1/-1}
.env-pic:hover{box-shadow:0 0 0 1px #d8b463}
.env-pic:hover img{transform:none}
.env-video{grid-column:1/-1;display:block;width:100%;aspect-ratio:16/9;border-radius:3px;background:#000}
.credit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:var(--max);margin:0 auto;padding:clamp(18px,3vh,30px) var(--gut) clamp(30px,5vh,50px)}
.credit{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;align-items:center;padding:14px;border-radius:14px;background:#141413;border:1px solid #2c2820;transition:border-color .3s}
.credit:hover{border-color:#d8b463}
.credit-poster{aspect-ratio:5/7;border-radius:6px;background:#0a0a0a;box-shadow:none}
.credit-poster img{object-fit:cover}
.credit h2{margin:0 0 6px;font:400 clamp(16px,1.35vw,21px)/1.2 var(--display);letter-spacing:.04em;text-transform:uppercase;color:#e2c67f}
.credit p{margin:0 0 3px;color:#e4e1da;font-size:13.5px;line-height:1.4}
.credit strong{color:#c9c6bf;font-weight:400}
.credit-work{margin-top:6px!important;color:#e2c67f!important}
@media (max-width:820px){.credit-grid{grid-template-columns:1fr}.env-media{grid-template-columns:repeat(2,minmax(0,1fr))}}
.env:has(.case-text){grid-template-columns:minmax(280px,360px) minmax(0,1fr)}
@media (max-width:900px){.env:has(.case-text){grid-template-columns:1fr}}

/* the page steps aside a little while the work list is open */
main,footer{transition:transform .55s var(--ease)}
.drawer-open main,.drawer-open footer{transform:translateX(-36px)}
@media (max-width:720px){.drawer-open main,.drawer-open footer{transform:none}}
@media (prefers-reduced-motion:reduce){main,footer{transition:none}}

/* assets menu fixed under the top bar */
.asset-nav{position:sticky;top:53px;z-index:15;display:flex;flex-wrap:nowrap;justify-content:safe center;gap:6px;overflow-x:auto;scrollbar-width:none;padding:9px var(--gut);background:rgba(8,8,8,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-block:1px solid #1f1c16}
.asset-nav::-webkit-scrollbar{display:none}
.asset-nav a{flex:none;white-space:nowrap;background:none;transition:color .25s,border-color .25s,background .25s}
.asset-nav a.on{border-color:transparent;background:var(--goldgrad);color:#1a1408}
.asset-label{grid-column:1/-1;margin:12px 0 2px;font:400 clamp(15px,1.2vw,19px)/1.25 var(--display);letter-spacing:.05em;text-transform:uppercase;color:#e2c67f}
.asset-label+.asset-tile{grid-column:1/-1;aspect-ratio:auto;background:none}
.asset-label+.asset-tile img{height:auto}
.asset-note{grid-column:1/-1;margin:-2px 0 6px;max-width:70ch;color:#cfcac0;font-size:14.5px;line-height:1.6}

/* Hubert: chapters, a real film opening, sketch to key art slider */
.hb-hero{height:min(86svh,860px)}
.hb-hero .hero-drift{inset:0;width:100%;height:100%;opacity:.92;filter:none;animation:none}
.hb-hero::after{background:linear-gradient(180deg,rgba(0,0,0,.42),transparent 26%,transparent 54%,rgba(12,12,12,.82) 86%,#0c0c0c)}
.hb-hero .sub-title{font-size:clamp(40px,6.2vw,96px);margin-bottom:8px}
.hb-tagline{margin:0;color:#f1eee7;font:400 clamp(13px,1.15vw,18px)/1.3 var(--display);letter-spacing:.2em;text-transform:uppercase;opacity:0;animation:heroin 1.2s .55s var(--ease) forwards}
.hb-ch{border-top:0;padding-top:clamp(44px,9vh,96px);scroll-margin-top:110px}
.hb-head{display:flex;align-items:baseline;gap:clamp(12px,1.4vw,22px);margin-bottom:clamp(14px,2.6vh,26px);padding-bottom:12px;position:relative}
.hb-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,#d8b463,#3a342a 55%,transparent);transform:scaleX(0);transform-origin:left;transition:transform 1.5s var(--ease) .15s}
.hb-head.in::after{transform:scaleX(1)}
.hb-head span{color:#d8b463;font:400 clamp(13px,1vw,16px)/1 var(--display);letter-spacing:.16em}
.hb-head h2{margin:0;font:400 clamp(26px,3.2vw,50px)/1.1 var(--display);letter-spacing:.03em;text-transform:uppercase;background:linear-gradient(180deg,#f4e6bb 8%,#dcbb72 58%,#c6a257 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hb-ch .flow-sub{margin-top:clamp(26px,4.6vh,44px)}
.hb-ch .flow-grid{gap:12px}
.hb-ch .flow-shot{overflow:hidden;border-radius:8px}
.hb-ch .flow-shot img{transition:transform 1.4s var(--ease)}
.hb-ch .flow-shot:hover img{transform:scale(1.035)}
.hb-ch .flow-grid.n1 .flow-shot img{max-height:70svh;border-radius:8px}
.hb-ch .flow-video{border-radius:8px}
@media (prefers-reduced-motion:no-preference){
  .hb-ch .flow-grid.rv{opacity:1;translate:none}
  .hb-ch .flow-grid.rv>.flow-shot{clip-path:inset(0 0 100% 0);transform:translateY(26px);transition:clip-path 1.3s var(--ease),transform 1.3s var(--ease)}
  .hb-ch .flow-grid.rv.in>.flow-shot{clip-path:inset(0);transform:none}
  .hb-ch .flow-grid.rv.in>.flow-shot:nth-child(2){transition-delay:.14s}
  .hb-ch .flow-grid.rv.in>.flow-shot:nth-child(3){transition-delay:.28s}
}
.hb-stage{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:clamp(14px,2vw,28px);align-items:start}
.hb-side{display:grid;gap:12px;min-width:0}
.hb-side .flow-video{margin:0;max-height:none}
.hb-side .flow-text{margin:2px 0}
.hb-side .flow-shot img{max-height:46svh;width:auto;margin:0 auto;border-radius:8px}
.hb-compare{--x:50%;position:relative;aspect-ratio:2/3;max-height:84svh;margin:0 auto;width:100%;overflow:hidden;border-radius:10px;background:#111;touch-action:pan-y}
.hb-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hb-top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.hb-handle{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#e8cd8a;pointer-events:none}
.hb-handle::after{content:"↔";position:absolute;left:50%;top:50%;display:grid;place-items:center;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:#14130f;border:1px solid #d8b463;color:#e8cd8a;font-size:17px}
.hb-tag{position:absolute;top:12px;padding:4px 11px;border-radius:99px;background:rgba(10,10,10,.72);color:#f1eee7;font:400 12px var(--display);letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
.hb-tag.l{left:12px}.hb-tag.r{right:12px}
.hb-compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
@media (max-width:820px){.hb-stage{grid-template-columns:1fr}.hb-hero{height:min(56svh,460px)}}
@media (prefers-reduced-motion:reduce){.hb-tagline{opacity:1;animation:none}.hb-head::after{transform:none;transition:none}}

/* home: Film and Assets belts move only under the mouse and stop where they are */
.ov .card video{z-index:3}
.belt{position:absolute;inset:0;z-index:1;overflow:hidden;background:#141311;display:block}
.belt-run{position:absolute;top:6px;bottom:6px;left:0;display:flex;gap:6px;width:max-content;animation:beltrun var(--t,60s) linear infinite paused}
.ov .card .belt-run img{position:static;display:block;width:auto;height:100%;max-width:none;flex:none;border-radius:4px;object-fit:contain;transform:none;filter:none}
.ov .card:hover .belt-run{animation-play-state:running}
@keyframes beltrun{to{transform:translateX(-50%)}}

/* Hubert: videos run by themselves, silent, as tall as the sketch to key art frame */
.hb-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.hb-stage .hb-auto{width:100%;height:100%;max-height:84svh;margin:0;object-fit:cover;border-radius:10px}
.hb-auto.tall{width:auto;max-width:100%;height:84svh;margin:10px auto}
.hb-ch .flow-sub{margin-top:clamp(26px,5vh,48px)}
@media (max-width:820px){.hb-stage{grid-template-columns:minmax(0,1fr)}.hb-stage .hb-auto{height:auto}.hb-auto.tall{width:100%;height:auto}}

.hb-auto.tall{max-height:none}

/* Avalon: short facts, then the work at full size */
.av-lead,.av-film,.av-part{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.av-lead{padding-block:clamp(30px,6vh,60px) clamp(22px,4vh,40px)}
.av-lead h2{margin:0 0 14px;font:400 clamp(24px,2.6vw,40px)/1.12 var(--display);letter-spacing:.03em;text-transform:uppercase;color:#e8cd8a}
.av-lead p{max-width:44em;margin:0;font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:#d9d6cf}
.av-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,30px);margin-top:clamp(22px,4vh,38px);padding-top:clamp(16px,2.6vh,24px);border-top:1px solid #3a342a}
.av-facts b{display:block;margin-bottom:6px;font:400 13px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:#d8b463}
.av-facts span{display:block;font-size:15px;line-height:1.4;color:#efece6}
.av-film video,.av-loop{display:block;width:100%;aspect-ratio:16/9;border-radius:10px;background:#000;object-fit:cover}
.av-part{padding-top:clamp(44px,8vh,84px)}
.av-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.av-shot{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:#111}
.av-shot:first-child{grid-column:1/-1}
.av-shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.av-shot:hover img{transform:scale(1.03)}
@media (max-width:720px){.av-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.av-grid{grid-template-columns:minmax(0,1fr)}}

/* AI film: the film itself right under the intro */
.case-film{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.case-film video{display:block;width:100%;aspect-ratio:16/9;border-radius:10px;background:#000}

/* home: ribbon of work between the sections */
.ribbon{position:relative;z-index:2;display:grid;gap:8px;overflow:hidden;padding:clamp(18px,3.6vh,34px) 0;background:#0a0a09;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ribbon-run{display:flex;gap:8px;width:max-content;will-change:transform}
.ribbon-run img{display:block;flex:none;height:clamp(96px,17vh,168px);width:auto;aspect-ratio:16/9;border-radius:6px;object-fit:cover}
@media (max-width:720px){.ribbon-run img{height:84px}}

/* home: services show a piece of the work on hover */
.svc .sv{position:relative;overflow:hidden;isolation:isolate}
.svc .sv::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,13,11,.66),rgba(14,13,11,.9)),var(--pic,none) center/cover no-repeat;opacity:0;transform:scale(1.08);transition:opacity .7s,transform 1.6s var(--ease)}
.svc .sv:hover::before{opacity:1;transform:none}

/* Hubert: the banner already carries the title */
.hb-h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hb-tagline{color:#e8cd8a;font-size:clamp(15px,1.5vw,24px)}
.hb-ch .flow-grid{align-items:center}

/* portfolio subpages: character work, shot stills, AI look development (build-portfolio-pages.py) */
.pf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.pf-shot{display:block;position:relative;aspect-ratio:var(--ar,16/9);overflow:hidden;border-radius:10px;background:#0c0c0b}
.pf-shot.full{grid-column:1/-1}
.pf-shot img,.pf-shot video{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
a.pf-shot:hover img{transform:scale(1.03)}
.pf-grid[style*="2/1"] img{object-position:50% 34%}
.pf-shot b{position:absolute;left:12px;bottom:12px;padding:6px 10px;border-radius:6px;background:rgba(10,9,7,.72);color:#e8cd8a;font:400 11px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;pointer-events:none}
.av-lead p.pf-credit{margin:14px 0 0;color:#a79f8d;font-size:13px;letter-spacing:.04em}
.av-film.scope video{aspect-ratio:1280/550;object-fit:contain}
.ai-line{max-width:44em;margin:0 0 clamp(14px,2.4vh,24px);font-size:clamp(15px,1.2vw,18px);line-height:1.55;color:#d9d6cf}
.ai-tag{margin-left:auto;color:#8f8b82;font:400 11px/1 var(--display);font-style:normal;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.pf-still{display:block;margin-bottom:clamp(10px,1.2vw,18px);border-radius:10px;overflow:hidden}
.pf-still img{display:block;width:100%;height:auto}
.pf-more{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.pf-more p{margin:0;max-width:44em;color:#d9d6cf;line-height:1.55}
@media (max-width:720px){.pf-grid{grid-template-columns:minmax(0,1fr)}.ai-tag{margin-left:0;flex-basis:100%}.hb-head{flex-wrap:wrap}}

/* responsive fixes (audit): tablet and landscape phone posters, laptop cinema balance */
/* 721 to 1100 px: the poster rail was a one-row slider whose posters ran past the right edge; now all 18 sit in two tidy rows */
@media (min-width:721px) and (max-width:1100px){
  .rail{display:grid!important;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px;overflow:visible;padding:4px 0 8px;scroll-snap-type:none}
  .th,.th.off{display:block;flex:none;width:auto;max-width:none}
}
/* laptops (1280 to 1599 px wide): the cinema screen was 621 px beside a 568 px rail; the screen now takes the larger share,
   sized so screen, title bar and posters still fit on one laptop screen without scrolling */
@media (min-width:1280px) and (max-width:1599px) and (prefers-reduced-motion:no-preference){
  .wall{grid-template-columns:minmax(0,1fr) minmax(0,min(60%,calc((100svh - 340px)*1.579)))}
  .left{max-width:none}
}
/* wireframe comp on the asset page (build-assets-page.py, prep-asset-wire.py): a square loop over two grid columns */
.asset-wire{position:relative;grid-column:span 2;border-radius:10px;overflow:hidden;background:#000}.asset-wire video{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}.asset-wire b{position:absolute;left:12px;bottom:10px;font:600 11px Montserrat,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#d8b463;text-shadow:0 1px 8px #000}
@media (max-width:900px){.asset-wire{grid-column:1/-1}}
/* Donkey Kong: click-to-load Marmoset 3D viewer, same square tile as the wireframe loop */
.asset-3d{display:block;cursor:pointer;text-decoration:none}.asset-3d img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;opacity:.55;transition:opacity .3s}.asset-3d:hover img{opacity:.8}
.asset-3d-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font:600 13px Montserrat,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#f3e2b3;text-shadow:0 1px 10px #000}
.asset-3d-play:before{content:"";width:58px;height:58px;border:1px solid #d8b463;border-radius:50%;background:rgba(0,0,0,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8b463' stroke-width='1.5'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='M12 12l8-4.5M12 12v9M12 12L4 7.5'/%3E%3C/svg%3E") center/28px no-repeat}
.asset-wire.one{grid-column:span 1}
.asset-3d.one{min-height:100%}.asset-3d.one img{position:absolute;inset:0;height:100%;aspect-ratio:auto}.asset-3d.on{aspect-ratio:auto}
@media (max-width:900px){.asset-wire.one{grid-column:span 1}.asset-3d.one{grid-column:1/-1;aspect-ratio:1/1}}
.asset-3d-play small{font-size:10px;letter-spacing:.1em;color:#b9a77c;text-transform:none}
.asset-3d.on>div,.asset-3d.on canvas{max-width:100%}
.pf-grid.ad-logos{grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px}
.ad-logo{aspect-ratio:2/1;background:#fff;border-radius:10px;display:grid;place-items:center;padding:14px}.ad-logo img{max-width:100%;max-height:100%;object-fit:contain}
.ad-awards{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}.ad-awards img{height:64px;width:auto;background:#fff;border-radius:8px;padding:6px 12px}

/* Tarzan posters: one row of three, smaller (build-portfolio-pages.py) */
.pf-grid.posters3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:600px){.pf-grid.posters3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Marmoset viewer: only the channel view (owner 2026-11-09 "remove the marmoset icons etc and leave only the channel view").
   Hidden with CSS only - marmoset.js itself stays unmodified (its licence). Positions measured on the self-hosted build 2022-12-16. */
.asset-3d.on #marmosetUI>div:nth-child(6),.asset-3d.on #marmosetUI input[title="Full Screen"],.asset-3d.on #marmosetUI input[title="Help"]{display:none!important}

/* Server Racks kit/modules: 16:9 uncropped (build-assets-page.py) */
.asset-tile.r169{aspect-ratio:16/9}.asset-tile.r169 img{object-fit:cover}.asset-tile.r169.full{grid-column:1/-1}

/* Donkey Kong 3D viewer over the full width (owner 2026-11-09 "give the 3D turn option more space") */
.asset-3d.wide3d{grid-column:1/-1;aspect-ratio:16/9;max-height:calc(100svh - 150px)}.asset-3d.wide3d{background:radial-gradient(circle at 50% 45%,#40414a,#35373b 70%)}.asset-3d.wide3d img{position:absolute;inset:0;height:100%;aspect-ratio:auto;object-fit:contain}
@media (max-width:900px){.asset-3d.wide3d{aspect-ratio:4/5}}

/* video in the lightbox (film.js) and clickable video tiles on the assets page */
.lb .lb-video{max-height:92vh;max-width:min(92vw,1200px);border-radius:10px;background:#000;box-shadow:0 0 0 2px rgba(216,180,99,.5),0 40px 120px #000}
.lb img[hidden],.lb .lb-video[hidden]{display:none}
a.asset-wire.shot{display:block;aspect-ratio:auto;cursor:zoom-in}a.asset-wire.shot:hover{box-shadow:0 0 0 1px #d8b463}
.asset-tile{cursor:zoom-in}

/* Marmoset channel button: top-right corner, clear labelled pill instead of the faint stripes icon
   (owner 2026-11-09 "move the layer icon in a corner, change the icon to be more clear"). The viewer's own input stays
   on top, invisible, so the click still goes to Marmoset. */
.asset-3d.on #marmosetUI>div:nth-child(8){top:14px!important;right:14px!important;left:auto!important;width:132px!important;height:38px!important;
  border:1px solid #d8b463;border-radius:19px;background:rgba(10,10,10,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8b463' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 3 2.5 8 12 13l9.5-5z'/%3E%3Cpath d='m2.5 12 9.5 5 9.5-5'/%3E%3Cpath d='m2.5 16 9.5 5 9.5-5'/%3E%3C/svg%3E") 12px 50%/20px no-repeat;transition:background-color .2s}
.asset-3d.on #marmosetUI>div:nth-child(8):hover{background-color:rgba(40,32,14,.85)}
.asset-3d.on #marmosetUI>div:nth-child(8)::after{content:"Channels";position:absolute;left:40px;top:50%;transform:translateY(-50%);pointer-events:none;
  font:600 11px Montserrat,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#f3e2b3}
:lang(de) .asset-3d.on #marmosetUI>div:nth-child(8)::after{content:"Kanäle"}
.asset-3d.on #marmosetUI>div:nth-child(8)>div{width:100%!important;height:100%!important}
.asset-3d.on #marmosetUI input[title="Layer Views"]{left:0!important;top:0!important;bottom:auto!important;width:100%!important;height:100%!important;opacity:0!important;z-index:2}

/* scenes with an animation (Server Racks): hide play/pause, speed, timeline and camera list - only "Channels" stays */
.asset-3d.on #marmosetUI>div:nth-child(8)>div>*:not(input[title="Layer Views"]){display:none!important}
/* own three.js viewer (media/viewer3d/viewer.js): same tile as the Marmoset viewers, canvas fills it */
.asset-3d.own3d{position:relative}
.asset-3d.own3d canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;cursor:grab;touch-action:none}
.asset-3d.own3d canvas:active{cursor:grabbing}
.v3-status{position:absolute;inset:0;display:grid;place-items:center;font:600 12px Montserrat,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#d8b463}
.v3-ch{position:absolute;top:14px;right:14px;z-index:2}
.v3-ch-btn{position:relative;display:block;width:132px;height:38px;padding:0;border:1px solid #d8b463;border-radius:19px;background:rgba(10,10,10,.72);cursor:pointer;transition:background-color .2s}
.v3-ch-btn svg{position:absolute;left:12px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:#d8b463}
.v3-ch-btn span{position:absolute;left:40px;top:50%;transform:translateY(-50%);font:600 11px Montserrat,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#f3e2b3}
.v3-ch-btn:hover{background:rgba(40,32,14,.85)}
.v3-ch-list{position:absolute;top:44px;right:0;min-width:150px;padding:6px;border:1px solid rgba(216,180,99,.5);border-radius:10px;background:rgba(14,14,13,.92);backdrop-filter:blur(6px)}
.v3-ch-list[hidden]{display:none}
.v3-ch-list button{display:block;width:100%;padding:7px 10px;border:0;border-radius:6px;background:none;color:#ddd5c4;font:500 12.5px Montserrat,Arial,sans-serif;text-align:left;cursor:pointer}
.v3-ch-list button:hover{background:rgba(255,255,255,.07)}
.v3-ch-list button.on{color:#d8b463;background:rgba(216,180,99,.12)}
/* Assets: 6-column grid so every row is full (build-assets-page.py full_rows): s2 = 3 per row, s3 = 2 per row, s6 = full */
.asset-tiles.g6{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.asset-tiles.g6>.s2{grid-column:span 2}.asset-tiles.g6>.s3{grid-column:span 3}.asset-tiles.g6>.s6{grid-column:1/-1}
.asset-tiles.g6>.asset-tile{aspect-ratio:1/1}
.asset-tiles.g6>.asset-tile.wide{aspect-ratio:auto}.asset-tiles.g6>.asset-tile.r169{aspect-ratio:16/9}
.asset-tiles.g6>.asset-tile.wide img,.asset-tiles.g6>.asset-tile.r169 img{object-fit:cover}
.asset-tiles.g6>.asset-tile img{height:100%}
.asset-tiles.g6>.asset-label,.asset-tiles.g6>.asset-note{margin-top:14px}
@media (max-width:900px){.asset-tiles.g6>.s2,.asset-tiles.g6>.s3{grid-column:span 3}}
@media (max-width:560px){.asset-tiles.g6>.s2,.asset-tiles.g6>.s3{grid-column:1/-1}}
.asset-credit{margin-top:10px;font-size:13px;line-height:1.5;color:#a59f92;max-width:30ch}

/* one background behind every 3D viewer, Marmoset (transparentBackground) and own (alpha canvas) alike */
.asset-3d.wide3d,.asset-3d.on{background:#3b3b3a}

/* HDRI switch top left of our 3D viewers (owner 2026-11-09), same gold pill look as the Channels button */
.v3-env{position:absolute;top:14px;left:14px;z-index:2;display:flex;height:38px;padding:3px;border:1px solid #d8b463;border-radius:19px;background:rgba(10,10,10,.72)}
.v3-env button{padding:0 13px;border:0;border-radius:16px;background:none;color:#cfc4ad;font:600 11px Montserrat,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background-color .2s,color .2s}
.v3-env button:hover{color:#f3e2b3;background:rgba(255,255,255,.06)}
.v3-env button.on{color:#14110a;background:#d8b463}
@media (max-width:600px){.v3-env button{padding:0 9px;font-size:10px;letter-spacing:.08em}}

/* camera shots 1 2 3, top centre of our 3D viewers (owner 2026-11-09), same pill; below the HDRI switch on phones */
.v3-shots{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:2px;height:38px;padding:3px;border:1px solid #d8b463;border-radius:19px;background:rgba(10,10,10,.72)}
.v3-shots button{min-width:32px;padding:0 10px;border:0;border-radius:16px;background:none;color:#cfc4ad;font:600 12px Montserrat,Arial,sans-serif;letter-spacing:.06em;cursor:pointer;transition:background-color .2s,color .2s}
.v3-shots button:hover{color:#f3e2b3;background:rgba(255,255,255,.06)}
.v3-shots button.on{color:#14110a;background:#d8b463}
@media (max-width:760px){.v3-shots{left:14px;top:60px;transform:none}}
/* camera editor, only on his own machine with ?camedit (viewer.js) */
.v3-camedit{position:absolute;top:60px;left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:6px;padding:5px 6px 5px 14px;border:1px dashed #e0703a;border-radius:19px;background:rgba(10,10,10,.85);font:600 11px Montserrat,Arial,sans-serif;color:#f0b48f;letter-spacing:.06em}
.v3-camedit button{min-width:30px;height:28px;border:0;border-radius:14px;background:#e0703a;color:#140a05;font:700 12px Montserrat,Arial,sans-serif;cursor:pointer}
.v3-camedit button:hover{background:#f2905e}

/* shortcut line at the bottom of our 3D viewers (owner 2026-11-09) */
.v3-keys{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:2;display:flex;gap:16px;padding:6px 14px;border-radius:14px;background:rgba(10,10,10,.55);font:500 10.5px Montserrat,Arial,sans-serif;letter-spacing:.04em;color:#a99f8c;white-space:nowrap;pointer-events:none}
.asset-wire .v3-keys b{position:static;font:600 10.5px Montserrat,Arial,sans-serif;letter-spacing:.04em;text-transform:none;text-shadow:none;color:#d8b463}   /* undo the tile caption rule .asset-wire b */
@media (max-width:760px){.v3-keys{gap:10px;font-size:9.5px;padding:5px 10px}.asset-wire .v3-keys b{font-size:9.5px}}

/* ONE card look for every picture tile on every page (owner 2026-11-10: "all same card look"), modelled on the
   homepage overview cards: rounded, fine gold edge that lights up on hover, soft shadow, and only a slow zoom into the
   picture on hover. Last block in the file and !important on purpose: it has to win over the older per-page tile rules. */
main :is(.shot,.pf-shot,.credit-poster,.asset-wire){border-radius:14px!important;overflow:hidden;background:#1a1a1a;
  box-shadow:0 0 0 1px rgba(242,223,166,.28),0 18px 44px rgba(0,0,0,.7),0 0 40px rgba(216,180,99,.08)!important;transition:box-shadow .6s var(--ease)}
main :is(.shot,.pf-shot,.credit-poster,.asset-wire):hover{box-shadow:0 0 0 1px rgba(242,223,166,.85),0 18px 44px rgba(0,0,0,.7),0 0 40px rgba(216,180,99,.16)!important}
main a:is(.shot,.pf-shot,.credit-poster,.asset-wire) > img{transform:scale(1.001);transition:transform 6s cubic-bezier(.2,.6,.3,1)!important}
main a:is(.shot,.pf-shot,.credit-poster,.asset-wire):hover > img{transform:scale(1.08)!important}
main :is(.mosaic-video,.fv){border-radius:14px;box-shadow:0 0 0 1px rgba(242,223,166,.28),0 18px 44px rgba(0,0,0,.7)}
.mosaic.ca,.pf-grid,.mosaic{gap:clamp(12px,1.3vw,18px)}
@media (prefers-reduced-motion:reduce){main a:is(.shot,.pf-shot,.credit-poster,.asset-wire):hover > img{transform:none!important}}

/* tech cards "coming soon" window (owner 2026-11-10) */
dialog.soon{max-width:min(440px,calc(100vw - 32px));padding:clamp(26px,3vw,38px);border:0;border-radius:18px;background:#141311;color:#f1eee7;
  box-shadow:0 0 0 1px rgba(242,223,166,.45),0 30px 80px rgba(0,0,0,.8);text-align:center}
dialog.soon::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
dialog.soon h2{margin:0 0 12px;font:400 clamp(22px,2.2vw,30px)/1.1 var(--display);letter-spacing:.08em;color:var(--gold-hi);text-transform:uppercase}
dialog.soon p{margin:0 0 22px;line-height:1.6;color:#cfcac0}
.ov .card[data-soon] .cap i{color:var(--gold-hi)}

/* availability line (owner 2026-11-10: "let me set status easy"); set in the WordPress dashboard box "Verfuegbarkeit" */
.hero .status{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:clamp(12px,2vh,20px) 0 0;font-size:clamp(13px,.85vw,15px);color:var(--dim);opacity:0;animation:fade 1.2s 1s forwards}
.hero .status .dot{width:9px;height:9px;border-radius:50%;background:#6f6a60;flex:none}
.hero .status .st{color:#e4e1da;font-weight:600}
.hero .status .st:empty{display:none}
.hero .status .st:not(:empty)+.loc::before{content:"\00b7";margin-right:10px;color:var(--dim)}
.hero .status[data-mode="now"] .dot{background:#4cc26b;animation:stpulse 2.4s infinite}
.hero .status[data-mode="from"] .dot{background:#e0b25a}
.hero .status[data-mode="off"] .dot{display:none}
@keyframes stpulse{0%{box-shadow:0 0 0 0 rgba(76,194,107,.6)}70%,100%{box-shadow:0 0 0 7px rgba(76,194,107,0)}}
@media (prefers-reduced-motion:reduce){.hero .status[data-mode="now"] .dot{animation:none}}
/* location always on its own line under the status (long since Lower Saxony was added) */
.hero .status .loc{flex-basis:100%;padding-left:19px}.hero .status .st:not(:empty)+.loc::before{content:none}
.hero .status[data-mode="off"] .loc{padding-left:0}

/* owner 2026-11-10: the film reflection on the aisle carpet looked like a strange plane, removed */
.hall .glow{display:none!important}

/* film overview: link to the project page (2026-11-10) */
.credit .credit-link{display:inline-flex;gap:6px;margin-top:12px;font-size:13px;color:var(--gold);letter-spacing:.04em}
.credit .credit-link:hover{color:var(--gold-hi)}

/* old Orbit Fox cookie bar (white, fixed at the bottom on phones, owner 2026-11-10 "fat white bar"); consent is handled by Complianz */
#obfx-cookie-bar,.obfx-cookie-bar-container{display:none!important}