:root{--ink:#141312;--cream:#efe6d6;--oak:#b8894a;--oak2:#d9b47a}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--cream);font-family:Heebo,sans-serif;-webkit-font-smoothing:antialiased}
body.loading,body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:"Frank Ruhl Libre",serif;font-weight:400;line-height:1.02;letter-spacing:-.01em}
em{font-style:normal;color:var(--oak2)}
.k{font-size:13px;letter-spacing:.25em;color:var(--oak2);font-weight:600;margin-bottom:14px}
.l{font-size:clamp(16px,1.4vw,20px);line-height:1.55;max-width:34ch;opacity:.95;margin-top:18px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--oak);color:#1a1410;font-weight:800;padding:15px 24px;border-radius:999px;font-size:16px;transition:.25s}
.btn:hover{background:var(--oak2);transform:translateY(-2px)}.btn.ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(8px)}
.btn.sm{padding:9px 18px;font-size:14px}.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
#pre{position:fixed;inset:0;z-index:99;background:var(--ink);display:grid;place-items:center;transition:opacity .7s}
#pre.done{opacity:0;pointer-events:none}.pre-in{text-align:center}.pre-in b{font:900 48px "Frank Ruhl Libre";display:block}.pre-in span{opacity:.6;letter-spacing:.3em;font-size:12px}
.bar{width:220px;height:2px;background:#ffffff22;margin:24px auto 10px}.bar i{display:block;height:100%;width:0;background:var(--oak)}#prePct{font-style:normal;font-size:12px;opacity:.6}
.top{position:fixed;top:0;inset-inline:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(18px,4vw,48px);background:linear-gradient(#000a,#0000)}
.logo{font:900 24px "Frank Ruhl Libre";line-height:1}.logo small{display:block;font:400 11px Heebo;letter-spacing:.2em;opacity:.75;margin-top:4px}
.top nav{display:flex;gap:22px;align-items:center;font-size:15px}
#film{height:700vh;position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#cv{position:absolute;inset:0;width:100%;height:100%}
.vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,#0000 60%,#0006)}
.beat{position:absolute;inset-inline-start:clamp(18px,5vw,80px);bottom:clamp(90px,14vh,160px);max-width:640px;opacity:0;transform:translateY(30px);transition:opacity .5s,transform .6s;pointer-events:none;padding:30px 34px;border-radius:22px;
 background:radial-gradient(130% 120% at 70% 60%,rgba(20,18,16,.62),rgba(20,18,16,.35) 60%,rgba(20,18,16,0) 100%);text-shadow:0 2px 20px #0008}
.beat.on{opacity:1;transform:none;pointer-events:auto}
.beat h1,.beat h2{font-size:clamp(48px,7.6vw,118px);color:#fff}
.hint{margin-top:20px;font-size:13px;opacity:.8;letter-spacing:.1em;animation:b 1.6s infinite}@keyframes b{50%{transform:translateY(5px)}}
.rail{position:absolute;inset-inline-end:clamp(14px,3vw,40px);top:50%;transform:translateY(-50%);list-style:none;padding:10px 12px;display:flex;flex-direction:column;gap:12px;background:#0004;border-radius:16px;backdrop-filter:blur(6px)}
.rail li{display:flex;gap:10px;align-items:center;cursor:pointer;opacity:.55;font-size:13px;transition:.3s}.rail li i{font-style:normal;font-weight:800;width:22px}
.rail li.on{opacity:1;color:var(--oak2)}.rail li.on span{font-weight:700}
.prog{position:absolute;bottom:0;inset-inline:0;height:3px;background:#ffffff22}.prog i{display:block;height:100%;width:0;background:var(--oak);margin-inline-start:0}
section .wrap{padding:0 clamp(18px,5vw,80px)}section h2{font-size:clamp(42px,6vw,88px)}
#work{padding:110px 0 70px;background:linear-gradient(var(--ink),#221d18)}
.strip{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden!important;touch-action:pan-x pan-y;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:40px clamp(18px,5vw,80px) 20px;scrollbar-width:thin}
.strip button{flex:0 0 auto;width:clamp(240px,26vw,380px);aspect-ratio:3/4;border:0;padding:0;border-radius:18px;overflow:hidden;position:relative;cursor:pointer;scroll-snap-align:start;background:#222;color:#fff;text-align:right}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform .8s}.strip button:hover img{transform:scale(1.06)}
.strip b{position:absolute;bottom:0;inset-inline:0;padding:40px 18px 16px;background:linear-gradient(#0000,#000c);font:700 20px "Frank Ruhl Libre"}
.strip b small{display:block;font:400 12px Heebo;color:var(--oak2);letter-spacing:.15em}
#contact{padding:90px 0 40px;background:#221d18}.grid{display:grid;grid-template-columns:1.2fr 1fr;gap:50px;align-items:center}
.facts{list-style:none;padding:0;border-top:1px solid #ffffff22}.facts li{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid #ffffff22;font-size:17px}.facts span{opacity:.6}
.star{color:#f5c15a}footer{text-align:center;opacity:.5;font-size:13px;margin-top:70px}
.wa{position:fixed;bottom:20px;left:20px;z-index:30;width:58px;height:58px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 8px 24px #0006}
#modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px}#modal[hidden]{display:none}
.mbg{position:absolute;inset:0;background:#000c;backdrop-filter:blur(6px)}
.card{position:relative;background:#221d18;border-radius:22px;overflow:hidden;max-width:980px;width:100%;max-height:92vh;display:grid;grid-template-columns:1.3fr 1fr}
.card img{width:100%;height:100%;max-height:92vh;object-fit:cover}.mtx{padding:40px 30px;align-self:center}.mtx h3{font-size:40px;margin-bottom:14px}.mtx p{line-height:1.6;margin-bottom:24px}
.x{position:absolute;top:12px;left:12px;z-index:2;width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:#111;font-size:30px;line-height:1;cursor:pointer}
@media(max-width:760px){.top nav a:not(.btn){display:none}.rail{top:auto;bottom:16px;transform:none;flex-direction:row;inset-inline:12px;justify-content:space-between;gap:4px}.rail li span{display:none}
.beat{inset-inline:10px;bottom:80px;padding:22px 20px}.beat h1,.beat h2{font-size:clamp(46px,13vw,64px)}.grid{grid-template-columns:1fr}.card{grid-template-columns:1fr;overflow:auto}.card img{max-height:55vh}.mtx{padding:22px}.wa{bottom:78px}}
@media(max-width:760px){body.infilm .wa{opacity:0;pointer-events:none}}.wa{transition:opacity .3s}
/* ---- polish v3.1 ---- */
.vig{background:radial-gradient(130% 100% at 50% 45%,#0000 66%,#0000002e)}
.grain{position:absolute;inset:-50%;pointer-events:none;opacity:.07;mix-blend-mode:overlay;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 type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:gr 1s steps(4) infinite}
@keyframes gr{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}
.beat{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transform:translateY(24px) scale(.985)}
.beat .k,.beat .l,.beat .cta,.beat .hint{opacity:0;transform:translateY(14px);transition:opacity .6s,transform .8s cubic-bezier(.2,.7,.2,1)}
.beat h1,.beat h2{clip-path:inset(0 0 100% 0);transform:translateY(.25em);transition:clip-path 1s cubic-bezier(.7,0,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.beat.on{transform:none}.beat.on h1,.beat.on h2{clip-path:inset(-10% -5% -15% -5%);transform:none}
.beat.on .k{opacity:1;transform:none;transition-delay:.05s}.beat.on .l{opacity:.95;transform:none;transition-delay:.35s}.beat.on .cta{opacity:1;transform:none;transition-delay:.5s}.beat.on .hint{opacity:.8;transform:none;transition-delay:.7s}
.beat:not(.on) *{transition-delay:0s!important;transition-duration:.35s!important}
.rail li i{position:relative}.rail li i::after{content:"";position:absolute;inset-inline-start:-14px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:currentColor;opacity:.5;transition:.3s}
.rail li.on i::after{opacity:1;background:var(--oak2);box-shadow:0 0 0 0 var(--oak2);animation:pl 1.8s infinite}
@keyframes pl{0%{box-shadow:0 0 0 0 rgba(217,180,122,.7)}80%,100%{box-shadow:0 0 0 9px rgba(217,180,122,0)}}
.rail li{transition:opacity .3s,transform .3s}.rail li.on{transform:translateX(-4px)}
.prog{height:4px}.prog i{background:linear-gradient(90deg,var(--oak),var(--oak2));box-shadow:0 0 12px var(--oak2)}
.rv{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}.rv.in{opacity:1;transform:none}
.strip button{transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.strip button:hover,.strip button:focus-visible{box-shadow:0 0 0 2px var(--oak2),0 18px 50px -10px rgba(184,137,74,.55);transform:translateY(-6px)}
@media(prefers-reduced-motion:reduce){.grain,.rail li.on i::after{animation:none}.rv{opacity:1;transform:none}.beat h1,.beat h2{clip-path:none}}
/* balal identity */
.btn{border-radius:10px}.beat{border-radius:6px;border-inline-start:3px solid var(--oak)}
.k{letter-spacing:.18em}.beat em,section h2 em{color:var(--oak2);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em;text-decoration-color:#e6c98755}
.strip button{border-radius:8px;aspect-ratio:4/5}
.pre-in b{font-weight:400}

.beat h1,.beat h2{font-weight:900}.beat{border-inline-start:2px solid var(--oak);border-radius:4px 22px 22px 4px}.btn{border-radius:6px}