/* JPROD | Motion-first portfolio — original design, no framework */
:root{--ink:#07090b;--panel:#111417;--panel2:#191d20;--paper:#f3f0e9;--mist:#aaa9a4;--hair:rgba(255,255,255,.16);--warm:#e3a72a;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Manrope',system-ui,sans-serif;--wide:min(1460px,calc(100% - clamp(34px,7.5vw,144px)));color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);-webkit-font-smoothing:antialiased}body.lock{overflow:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}img{display:block;max-width:100%}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--warm);outline-offset:4px}::selection{background:var(--warm);color:#111}.wrap{width:var(--wide);margin-inline:auto}.mono,.eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.21em;line-height:1.65;text-transform:uppercase}.eyebrow{color:var(--warm)}.muted{color:var(--mist)}.nowrap{white-space:nowrap}
/* Navigation */
.topbar{height:82px;position:fixed;z-index:80;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding-inline:clamp(20px,5vw,86px);border-bottom:1px solid rgba(255,255,255,.12);background:rgba(7,9,11,.79);backdrop-filter:blur(21px);-webkit-backdrop-filter:blur(21px)}.brand{display:inline-flex;align-items:center;gap:13px;min-width:0}.brand img{width:158px;height:auto;max-height:51px;object-fit:contain}.brand-caption{font-size:.53rem;letter-spacing:.17em;text-transform:uppercase;color:var(--mist);border-left:1px solid var(--hair);padding-left:14px;line-height:1.6}.nav{display:flex;align-items:center;gap:clamp(18px,2.8vw,46px)}.nav a:not(.lang-link){font-size:.69rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:color .2s}.nav a:hover{color:var(--warm)}.lang-link{border:1px solid var(--hair);padding:9px 12px;font-size:.7rem;font-weight:700;letter-spacing:.1em}.nav-toggle{display:none;color:var(--paper);background:none;border:1px solid var(--hair);padding:9px 13px;font-size:.74rem;text-transform:uppercase;letter-spacing:.1em}
/* Hero */
.hero{min-height:min(930px,100svh);min-height:max(700px,100svh);display:grid;place-items:center;position:relative;overflow:hidden;isolation:isolate;padding:130px 0 94px}.hero-visual{position:absolute;inset:0 0 0 33%;z-index:-2;overflow:hidden}.hero-visual img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.85) brightness(.77);animation:slowpush 17s ease-out both}.hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,rgba(7,9,11,.87) 18%,rgba(7,9,11,.28) 61%,rgba(7,9,11,.16)),linear-gradient(0deg,var(--ink),transparent 40%)}.hero-shell{width:var(--wide);position:relative}.hero-vertical{position:absolute;right:0;top:30%;writing-mode:vertical-rl;font-size:.66rem;letter-spacing:.24em;color:#e9e9e0;text-transform:uppercase}.hero h1{font-weight:500;font-size:clamp(4.3rem,10vw,10.1rem);line-height:.9;letter-spacing:-.065em;max-width:980px;margin:20px 0 31px}.hero h1 span{display:block}.hero h1 i{font:italic 500 1.12em var(--serif);letter-spacing:-.05em;color:var(--warm)}.hero-description{max-width:500px;color:#dddcd6;font-size:clamp(.97rem,1.45vw,1.16rem);line-height:1.78}.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:31px}.action{display:inline-flex;justify-content:center;align-items:center;gap:30px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;font-size:.68rem;border:1px solid var(--paper);padding:18px 21px;background:var(--paper);color:var(--ink);transition:transform .23s,background .23s,color .23s,border-color .23s}.action:hover{transform:translateY(-3px)}.action.outline{background:transparent;color:var(--paper);border-color:rgba(255,255,255,.5)}.action.outline:hover{background:var(--paper);color:var(--ink)}.action.gold{background:var(--warm);border-color:var(--warm);color:var(--ink)}.action:disabled{opacity:.35;cursor:not-allowed}.hero-bottom{display:flex;align-items:end;justify-content:space-between;border-top:1px solid var(--hair);padding-top:17px;margin-top:clamp(65px,11vh,160px);gap:20px}.hero-bottom p{margin:0;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:#d0d0cb}.hero-bottom .hero-award{max-width:310px;text-align:right;color:var(--warm)}@keyframes slowpush{from{transform:scale(1.05)}to{transform:scale(1.13)}}
/* Editorial sections */
section{scroll-margin-top:82px}.section{padding:clamp(80px,10vw,150px) 0}.section-alt{background:#0e1113}.section-h{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:41px}.section-h h2{font-weight:500;font-size:clamp(2.8rem,6vw,6rem);line-height:1.02;letter-spacing:-.055em;margin:8px 0}.section-h h2 em{font:italic 500 1.12em var(--serif);color:var(--warm)}.section-h p:last-child{max-width:390px;color:var(--mist);font-size:.91rem;line-height:1.85}.section-index{color:#727877;font-size:.72rem;font-weight:600;letter-spacing:.11em}.rule{height:1px;background:var(--hair)}.marquee{padding:19px 0;border-block:1px solid var(--hair);text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(1.35rem,2.5vw,2.1rem);letter-spacing:.025em;color:#c4c0b6}.marquee b{color:var(--warm);font-weight:400;padding:0 2vw}
/* Featured production */
.featured{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr);background:var(--panel);border:1px solid var(--hair)}.feature-poster{position:relative;aspect-ratio:16/10;min-height:430px;border:0;padding:0;text-align:left;overflow:hidden;background:#1c1c1c}.feature-poster img{width:100%;height:100%;object-fit:cover;transition:transform .85s cubic-bezier(.2,.7,.1,1)}.feature-poster:hover img{transform:scale(1.055)}.feature-poster:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.3),transparent 50%)}.feature-copy{padding:clamp(30px,5vw,85px);display:flex;flex-direction:column;justify-content:center}.feature-copy h3{font-weight:500;font-size:clamp(3.5rem,7vw,7.4rem);letter-spacing:-.07em;line-height:.9;margin:20px 0 26px}.feature-copy p{color:var(--mist);line-height:1.85;font-size:.88rem}.laurel{border-left:2px solid var(--warm);padding:12px 0 12px 15px;color:var(--paper)!important;text-transform:uppercase;letter-spacing:.12em;font-size:.7rem!important;font-weight:700}.play-disc{position:absolute;top:50%;left:50%;translate:-50% -50%;width:78px;height:78px;border-radius:50%;border:1px solid rgba(255,255,255,.8);background:rgba(10,10,10,.45);display:grid;place-items:center;font-size:1.25rem;color:white;z-index:1;transition:background .25s,scale .25s}.feature-poster:hover .play-disc,.film-cover:hover .play-disc{background:var(--warm);color:var(--ink);scale:1.08}
/* Film cards */
.filter-bar{display:flex;flex-wrap:wrap;gap:9px;margin:27px 0 36px}.filter-btn{padding:10px 16px;border:1px solid #474746;background:none;color:#b9b8b3;font-size:.65rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;transition:all .2s}.filter-btn:hover,.filter-btn[aria-pressed=true]{background:var(--paper);border-color:var(--paper);color:var(--ink)}.film-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:22px;row-gap:52px}.film-item{min-width:0}.film-item[hidden],.visual-item[hidden]{display:none!important}.film-cover{border:0;padding:0;display:block;width:100%;position:relative;aspect-ratio:16/10;background:linear-gradient(130deg,#282825,#121316);overflow:hidden}.film-cover img{height:100%;width:100%;object-fit:cover;transition:transform .55s ease,filter .55s ease}.film-cover:hover img{transform:scale(1.045);filter:saturate(1.1)}.film-cover .play-disc{width:59px;height:59px;font-size:1rem;opacity:0;transition:opacity .2s,background .2s,scale .2s}.film-cover:hover .play-disc,.film-cover:focus-visible .play-disc{opacity:1}.film-info{display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--hair);margin-top:14px;padding-top:17px}.film-info h3{margin:0;font-weight:700;letter-spacing:-.018em;font-size:1.02rem;line-height:1.35}.film-info .tag{font-size:.63rem;color:var(--warm);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;padding-top:5px}.film-item p{font-size:.78rem;line-height:1.7;color:var(--mist);max-width:420px}.film-detail-link{font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;border-bottom:1px solid var(--warm);padding-bottom:5px;display:inline-flex;margin-top:5px}.film-detail-link:hover{color:var(--warm)}.featured-title-link{align-self:flex-start}
/* All original images. Distinguish stills vs photography vs design */
.visual-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:start}.visual-item{min-width:0;position:relative}.visual-card{width:100%;display:block;padding:0;border:0;background:#26282a;overflow:hidden;position:relative;text-align:left;aspect-ratio:4/5}.visual-item:nth-child(5n+2) .visual-card,.visual-item:nth-child(5n+4) .visual-card{aspect-ratio:1}.visual-item:nth-child(11n+8) .visual-card{aspect-ratio:3/4}.visual-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.1,1),filter .45s}.visual-card:hover img{transform:scale(1.09);filter:brightness(.88)}.visual-card:after{content:"";position:absolute;right:0;top:0;width:0;height:0;border-style:solid;border-width:0 0 0 0;border-color:transparent transparent transparent #e8d7a5;filter:drop-shadow(-2px 3px 6px rgba(0,0,0,.3));transition:all .3s}.visual-card:hover:after{border-width:0 42px 42px 0;border-color:transparent #d6b676 transparent transparent}.visual-caption{font-size:.67rem;line-height:1.5;padding:12px 2px;color:#c6c5bf}.visual-caption span{font-size:.56rem;color:var(--warm);letter-spacing:.13em;text-transform:uppercase;display:block;margin-bottom:2px}.gallery-note{margin-top:20px;color:var(--mist);font-size:.8rem;line-height:1.7}
/* Studio & contact */
.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--hair)}.service{display:grid;grid-template-columns:45px 1fr;gap:14px;padding:35px 32px 36px 0;border-bottom:1px solid var(--hair)}.service:nth-child(even){padding-left:28px}.service .number{font-family:var(--serif);font-size:1.8rem;color:var(--warm);font-style:italic}.service h3{font-weight:600;font-size:1.45rem;line-height:1.2;margin:5px 0 10px;letter-spacing:-.025em}.service p{font-size:.83rem;color:var(--mist);line-height:1.85;max-width:430px}.studio-layout{display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:center}.studio-layout h2{font-size:clamp(3.2rem,6vw,6.5rem);font-weight:500;line-height:1;letter-spacing:-.055em}.studio-layout h2 i{font-family:var(--serif);font-weight:500;color:var(--warm)}.studio-layout p{color:var(--mist);font-size:1rem;line-height:1.9}.contact-panel{border-top:1px solid var(--hair);padding:clamp(65px,8vw,110px) 0;background:radial-gradient(circle at 80% 20%,rgba(227,167,42,.08),transparent 50%)}.contact-panel h2{font-size:clamp(4rem,8.5vw,9rem);line-height:1;letter-spacing:-.065em;font-weight:500;margin:22px 0 35px}.contact-panel h2 i{font-family:var(--serif);font-weight:500;color:var(--warm)}.email{display:inline-block;font-size:clamp(.95rem,2.1vw,1.8rem);font-weight:600;border-bottom:1px solid var(--warm);padding-bottom:12px;overflow-wrap:anywhere}.contact-footer{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;margin-top:80px;padding-top:19px;border-top:1px solid var(--hair);font-size:.65rem;text-transform:uppercase;letter-spacing:.14em;color:var(--mist)}footer{padding:30px clamp(20px,5vw,86px);display:flex;justify-content:space-between;gap:25px;flex-wrap:wrap;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#777}
/* Full-bleed film / photo viewer */
.viewer{width:min(1400px,96vw);max-width:none;max-height:96dvh;margin:auto;padding:0;border:1px solid rgba(255,255,255,.25);background:#0b0d0e;color:var(--paper);box-shadow:0 25px 130px rgba(0,0,0,.8);overflow:hidden}.viewer::backdrop{background:rgba(0,0,0,.93);backdrop-filter:blur(18px)}.viewer-top{height:65px;display:flex;align-items:center;gap:20px;justify-content:space-between;padding:10px clamp(15px,2vw,33px);border-bottom:1px solid var(--hair)}.viewer-name{font-weight:700;font-size:.79rem;letter-spacing:.09em;line-height:1.3;text-transform:uppercase;max-width:65%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.viewer-controls{display:flex;gap:8px;align-items:center}.icon-button{color:var(--paper);background:#22272a;border:1px solid #45484b;min-width:38px;height:37px;display:grid;place-items:center;font-size:1rem;border-radius:0}.icon-button:hover{background:var(--warm);color:var(--ink)}.viewer-body{position:relative;height:min(77vh,780px);height:min(75dvh,780px);overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,#1c1f21,#090b0c 70%)}.viewer-body img{width:100%;height:100%;object-fit:contain;cursor:zoom-in;transform-origin:center;touch-action:none;user-select:none;-webkit-user-drag:none;will-change:transform}.viewer-body img.zoomed{cursor:grab}.viewer-body img.dragging{cursor:grabbing}.viewer-body iframe{width:100%;height:100%;border:0;aspect-ratio:16/9;max-height:100%}.viewer-bottom{min-height:63px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px clamp(15px,2vw,33px);border-top:1px solid var(--hair);color:#b2b2ac;font-size:.72rem;line-height:1.5}.viewer-bottom a{color:var(--warm);text-decoration:underline;text-underline-offset:3px}.viewer-bottom .kbd{font-size:.63rem;letter-spacing:.09em;text-transform:uppercase}.viewer-body .viewer-image-holder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.viewer-nav{position:absolute;top:50%;z-index:3;translate:0 -50%;width:43px;height:66px;border:1px solid var(--hair);color:var(--paper);background:rgba(8,10,11,.7);font-size:1.6rem;backdrop-filter:blur(5px)}.viewer-nav:hover{background:rgba(227,167,42,.9);color:#141414}.viewer-prev{left:10px}.viewer-next{right:10px}.viewer-counter{color:var(--warm);font-weight:700}.viewer-info{max-width:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.viewer-info small{color:var(--warm);padding-right:10px;text-transform:uppercase;letter-spacing:.1em}.viewer-body.is-flipping .viewer-image-holder{animation:photoFlip .53s ease both;transform-origin:left center;backface-visibility:hidden}@keyframes photoFlip{0%{transform:perspective(1400px) rotateY(0)}48%{transform:perspective(1400px) rotateY(-39deg);filter:brightness(.58)}100%{transform:perspective(1400px) rotateY(0);filter:brightness(1)}}
/* Cinematic page-turn sheet between tile and full-screen */
.page-turn{position:fixed;z-index:150;inset:0;pointer-events:none;opacity:0;perspective:1600px;overflow:hidden}.page-turn.turn{opacity:1}.page-turn .sheet{position:absolute;inset:-2%;transform-origin:right center;transform:rotateY(90deg);background:linear-gradient(103deg,rgba(244,241,228,.94),rgba(163,150,127,.94) 73%,rgba(255,255,255,.94));box-shadow:-22px 0 50px rgba(0,0,0,.5)}.page-turn.turn .sheet{animation:turnPage .7s cubic-bezier(.24,.75,.26,1) both}@keyframes turnPage{0%{transform:rotateY(90deg);opacity:.05}48%{transform:rotateY(0deg);opacity:1}100%{transform:rotateY(-90deg);opacity:0}}.page-turn span{position:absolute;left:50%;top:50%;translate:-50% -50%;font:italic 500 clamp(2rem,5vw,5rem) var(--serif);color:#111;opacity:0}.page-turn.turn span{animation:turnWord .7s ease both}@keyframes turnWord{0%,20%,80%,100%{opacity:0}42%,57%{opacity:1}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-visual img{animation:none}.page-turn.turn .sheet,.page-turn.turn span,.viewer-body.is-flipping .viewer-image-holder{animation:none}*,*:before,*:after{transition-duration:.01ms!important}}
/* Film detail pages */
.detail-hero{padding:180px 0 65px}.detail-hero h1{font-size:clamp(3.6rem,8vw,8rem);font-weight:500;letter-spacing:-.055em;line-height:.97;margin:14px 0 25px}.detail-copy{color:var(--mist);max-width:640px;line-height:1.9;font-size:.99rem}.detail-player{width:100%;aspect-ratio:16/9;background:#191b1b;position:relative;overflow:hidden;border:1px solid var(--hair)}.detail-player img{width:100%;height:100%;object-fit:cover}.detail-player button{position:absolute;inset:0;background:transparent;border:0;color:white}.detail-links{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;padding:30px 0 95px}
@media(max-width:1100px){.film-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.visual-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.featured{grid-template-columns:1fr}.feature-poster{min-height:370px}.feature-copy{padding:45px}.hero h1{font-size:clamp(4.2rem,9.5vw,8rem)}}
@media(max-width:740px){:root{--wide:calc(100% - 34px)}.topbar{height:71px;padding-inline:17px}.brand img{width:134px;max-height:42px}.brand-caption{display:none}.nav-toggle{display:block}.nav{display:none;position:absolute;top:71px;left:0;right:0;background:#0a0c0d;border-bottom:1px solid var(--hair);padding:23px 22px 30px;flex-direction:column;align-items:stretch;gap:27px}.nav.open{display:flex}.nav a:not(.lang-link){font-size:.83rem}.lang-link{align-self:flex-start}.hero{min-height:730px;min-height:100svh;padding:130px 0 48px}.hero-visual{left:12%}.hero-visual:after{background:linear-gradient(90deg,rgba(7,9,11,.78),rgba(7,9,11,.3)),linear-gradient(0deg,var(--ink),transparent 54%)}.hero-vertical{display:none}.hero h1{font-size:clamp(3.4rem,11.8vw,6rem);max-width:95%;letter-spacing:-.055em}.hero-description{font-size:.91rem;max-width:345px}.hero-bottom{margin-top:62px;display:block}.hero-bottom .hero-award{text-align:left;margin-top:13px}.action{gap:15px;padding:15px 15px}.section{padding:76px 0}.section-h{display:block}.section-h p:last-child{margin-top:15px}.section-h h2{font-size:clamp(2.7rem,10vw,5rem)}.feature-poster{min-height:0;aspect-ratio:16/10}.feature-copy{padding:29px}.feature-copy h3{font-size:4.3rem}.film-grid{grid-template-columns:1fr;row-gap:42px}.visual-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.visual-caption{font-size:.62rem}.services,.studio-layout{grid-template-columns:1fr}.service:nth-child(even){padding-left:0}.contact-panel h2{font-size:clamp(3.7rem,12vw,7rem)}.viewer{width:100vw;max-height:100dvh;min-height:0;border:0}.viewer-body{height:min(67dvh,760px)}.viewer-top{height:61px}.viewer-bottom{min-height:65px}.viewer-bottom .kbd{display:none}.viewer-prev{left:3px}.viewer-next{right:3px}.detail-hero{padding:135px 0 35px}.detail-hero h1{font-size:clamp(3.8rem,13vw,6rem)}}