/* SI LAKOS — cinematography. Immersive system: black canvas, Oswald, overlaid roll-out nav. */
:root{ --bg:#0b0b0b; --fg:#e6e6e6; --muted:#9a9a9a; --line:rgba(255,255,255,.14); --gap:14px; }
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:#cfcfcf;font-family:"Oswald",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:300;letter-spacing:.05em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.txt{text-shadow:0 1px 16px rgba(0,0,0,.6)}
img,video{display:block}

/* ---------- shared overlay nav ---------- */
.leftcol{z-index:20;width:440px;max-width:80vw;padding:30px 36px;display:flex;flex-direction:column;height:100%}
.leftcol--fixed{position:fixed;top:0;left:0}
.leftcol--abs{position:absolute;top:0;left:0;height:100vh}
.brand b{display:block;font-size:15px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.brand span{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:#d2d2d2}
.menu{position:relative;margin-top:18px;flex:1;display:flex;flex-direction:column}
.bars{position:relative;width:210px;height:14px;flex:0 0 auto}
.bars span{position:absolute;left:0;width:24px;height:1.5px;background:#fff;transition:transform .5s cubic-bezier(.2,.7,.2,1),width .5s cubic-bezier(.2,.7,.2,1),opacity .4s}
.bars span:nth-child(1){top:0}.bars span:nth-child(2){top:6px}.bars span:nth-child(3){top:12px}
.leftcol:hover .bars span{width:200px;opacity:.5}
.leftcol:hover .bars span:nth-child(1){transform:translateY(6px)}
.leftcol:hover .bars span:nth-child(3){transform:translateY(-6px)}
.menu-list{margin-top:18px;opacity:0;transform:translateX(-10px);pointer-events:none;transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.leftcol:hover .menu-list{opacity:1;transform:none;pointer-events:auto}
.tabs{margin-bottom:16px}
.tabs a{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#bdbdbd;margin-right:16px;cursor:pointer}
.tabs a.on{color:#fff}
.menu-list ul{list-style:none}
.menu-list li a{display:block;font-size:14px;font-weight:300;letter-spacing:.07em;text-transform:uppercase;color:#cbcbcb;padding:5px 0;white-space:nowrap;transition:color .25s,padding-left .25s}
.menu-list li a:hover,.menu-list li a.on{color:#fff;padding-left:8px}
.about-link{display:block;font-size:14px;font-weight:300;letter-spacing:.07em;text-transform:uppercase;color:#cbcbcb;padding:5px 0;margin-top:6px;transition:color .25s,padding-left .25s}
.about-link:hover{color:#fff;padding-left:8px}
.contact{margin-top:16px}
.contact a{display:inline-block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#aeaeae;margin-right:16px}
.contact a:hover{color:#fff}
.now{margin-top:auto}
.now h1{font-size:clamp(20px,2.4vw,34px);font-weight:200;letter-spacing:.03em;text-transform:uppercase;color:#fff;line-height:1.02}
.now a{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#e2e2e2}
.now a:hover{color:#fff}

/* ---------- home / section stage ---------- */
.stage{position:fixed;inset:0;background:#000}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
.stage video.show{opacity:1}
.stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,rgba(0,0,0,.5),rgba(0,0,0,.12) 34%,transparent 60%),linear-gradient(0deg,rgba(0,0,0,.45),transparent 26%)}

/* ---------- hero (project + about) ---------- */
.hero{position:relative;height:100vh;overflow:hidden;background:#000}
.hero>video,.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero>video.reel{opacity:0;transition:opacity .7s ease}
.hero>video.reel.show{opacity:1}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,rgba(0,0,0,.5),rgba(0,0,0,.1) 34%,transparent 60%),linear-gradient(0deg,rgba(0,0,0,.55),transparent 28%)}
.hero-cap{position:absolute;left:36px;bottom:36px;right:36px;z-index:10}
.hero-cap h1{font-size:clamp(26px,4vw,56px);font-weight:200;letter-spacing:.02em;text-transform:uppercase;color:#fff;line-height:1}
.hero-cap .sub{margin-top:10px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#d2d2d2}
.scroll-hint{margin-top:18px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#cfcfcf;display:inline-block;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ---------- project body ---------- */
.doc{max-width:1180px;margin:0 auto;padding:0 28px 90px}
.film{position:relative;width:100%;aspect-ratio:16/9;background:#000;margin-top:64px}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film-poster{position:absolute;inset:0;cursor:pointer}
.film-poster img{width:100%;height:100%;object-fit:cover}
.film-poster:after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28)}
.playbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;background:transparent;border:1px solid rgba(255,255,255,.65);color:#fff;font-family:inherit;font-weight:300;font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:14px 28px;cursor:pointer;transition:background .25s,color .25s}
.playbtn:hover{background:#fff;color:#000}
.pbar{display:flex;align-items:baseline;justify-content:space-between;padding:24px 0 10px;border-bottom:1px solid var(--line)}
.pbar h2{font-size:15px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.pbar a{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#9a9a9a}.pbar a:hover{color:#fff}
.pcredits{display:flex;flex-wrap:wrap;gap:6px 48px;margin:20px 0 0}
.pcredits p{font-size:10.5px;line-height:1.85;letter-spacing:.06em;text-transform:uppercase;color:#8a8a8a}
.pstills{display:flex;flex-direction:column;gap:14px;margin-top:46px}
.pstills img{width:100%}

/* ---------- about body ---------- */
.abody{max-width:1100px;margin:0 auto;padding:74px 28px 20px;display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:46px;align-items:start}
.aportrait img{width:100%;filter:grayscale(.1)}
.abody h2{font-size:12px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.abody .bio p{margin:0 0 16px;font-size:15px;font-weight:300;line-height:1.95;letter-spacing:.015em;color:var(--fg)}
.abody .acontact{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.abody .acontact a{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg);margin-bottom:7px}
.abody .acontact a:hover{color:#fff}
.astrip{max-width:1100px;margin:40px auto 0;padding:0 28px;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap)}
.astrip img{width:100%;aspect-ratio:3/4;object-fit:cover}
.acredits{max-width:1100px;margin:46px auto 0;padding:34px 28px 90px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.acredits h3{font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.acredits ul{list-style:none}
.acredits li{font-size:10.5px;line-height:1.75;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}

/* ---------- responsive ---------- */
@media(max-width:780px){
  .leftcol{width:100%;max-width:none;padding:22px 20px}
  .leftcol--abs{height:auto;position:relative}
  .leftcol--fixed .menu-list{opacity:1;transform:none;pointer-events:auto}
  .leftcol--fixed .bars{display:none}
  .menu-list li a{font-size:18px}
  .hero{height:78vh}.hero-cap{left:20px;right:20px}
  .abody{grid-template-columns:1fr;gap:24px;padding-top:30px}
  .astrip{grid-template-columns:repeat(2,1fr)}
  .acredits{grid-template-columns:1fr;gap:26px}
  .film{margin-top:34px}
}