html{overflow-y:scroll}
:root{--bg:#000;--fg:#fff;--muted:#a4a4a4;--font:Arial,Helvetica,sans-serif;--body:clamp(16px,1vw,20px);--nav:clamp(16px,1.1vw,22px);--footer:var(--body);--header:84px;--space:24px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:var(--body);line-height:1.65;min-height:100svh;display:flex;flex-direction:column}
main{flex:1}
a{color:inherit;text-decoration:none}
a:hover{color:#ddd}
button{font:inherit}
h1,h2,p{margin:0}
h1,h2{line-height:1.2}
header{height:var(--header);flex-shrink:0;position:relative;display:flex;align-items:center;padding:0 clamp(24px,3.5vw,56px);z-index:5;background:#000}
nav{display:flex;gap:clamp(20px,2.2vw,36px)}
nav a{font-size:var(--nav);line-height:1.2;font-weight:400}
nav a[aria-current]{font-weight:700}
.brand{position:absolute;left:50%;top:4px;transform:translateX(-50%);height:76px;width:90px}
.brand img{width:100%;height:100%;object-fit:contain}
.menu-btn{display:none;background:transparent;border:0;color:#fff;padding:8px;cursor:pointer;z-index:10;border-radius:4px;transition:opacity .2s}
.menu-btn:hover{opacity:0.8}
.hamburger-icon .line{transform-origin:center;transition:transform .25s ease, opacity .25s ease}
.menu-btn.open .line-top{transform:translateY(6px) rotate(45deg)}
.menu-btn.open .line-mid{opacity:0;transform:scale(0)}
.menu-btn.open .line-bot{transform:translateY(-6px) rotate(-45deg)}
.hero{height:calc(100svh - var(--header));min-height:500px;display:grid;place-items:center;position:relative;background:#000;text-align:center;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shade{position:absolute;inset:0;background:rgba(0,0,0,0.45);pointer-events:none}
.hero-content{position:relative;padding:24px;z-index:2}
.hero h1{font-size:clamp(44px,4.2vw,90px);line-height:1.1;letter-spacing:-.025em;text-shadow:0 3px 20px rgba(0,0,0,0.85)}
.hero p{font-size:clamp(24px,1.5vw,32px);font-weight:700;margin:24px 0 32px;text-shadow:0 3px 16px rgba(0,0,0,0.85)}
.button{display:inline-flex;justify-content:center;align-items:center;border:1px solid #fff;color:#fff;background:rgba(0,0,0,0.4);padding:8px 48px;min-height:48px;font-size:var(--nav);font-weight:600;cursor:pointer;backdrop-filter:blur(6px);transition:background .2s,color .2s}
.button:hover{background:#fff;color:#000}
.grid{display:grid;grid-template-columns:1fr 1fr}
.project{padding:0;border:0;background:#111;display:block;cursor:pointer;overflow:hidden}
.project img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:filter .2s, transform .25s ease}
.project:hover img{filter:brightness(.85);transform:scale(1.015)}
.project-detail{width:min(100%,1100px);margin:0 auto;padding:64px clamp(24px,4vw,64px) 96px;text-align:center}
.project-header{margin-bottom:48px}
.project-header .page-title{margin-bottom:20px}
.project-header .subtitle{color:var(--muted);font-size:var(--body);margin-bottom:36px}
.project-header .category{font-size:clamp(22px,1.4vw,28px);font-weight:700;letter-spacing:-.01em}
.video-wrapper{position:relative;width:100%;max-width:960px;margin:0 auto 48px;aspect-ratio:16/9;background:#000;border:1px solid #222;box-shadow:0 20px 50px rgba(0,0,0,0.8)}
.video-wrapper iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.credits{margin:48px 0}
.credits-role{font-weight:700;font-size:clamp(17px,1.1vw,20px);margin-bottom:6px}
.credits-name{color:var(--muted);font-size:var(--body)}
.back-nav{margin-top:24px}
.content{width:min(100%,1010px);margin:auto;padding:64px clamp(24px,3.5vw,56px) 96px}
.page-title{text-align:center;font-size:clamp(30px,2.1vw,40px);margin-bottom:96px}
.content section+section{margin-top:48px}
.content h2{font-size:clamp(20px,1.2vw,24px);margin-bottom:24px}
.content p{color:var(--muted);line-height:1.85}
.content a:hover{text-decoration:underline}
.stand{margin-top:96px}
.footer{text-align:center;background:#000;padding:40px clamp(24px,3.5vw,56px);color:var(--muted)}
.socials{display:flex;justify-content:center;align-items:center;gap:clamp(32px,3vw,48px);margin-bottom:48px}
.social-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--muted);transition:color .2s, transform .2s;height:30px;width:30px}
.social-icon-youtube{width:38px}
.social-icon:hover{color:#fff;transform:translateY(-2px)}
.social-icon svg{display:block;width:100%;height:100%}
.footer p,.footer .legal-link{font-family:var(--font);font-size:var(--footer);font-weight:400;line-height:1.85;letter-spacing:0;color:var(--muted)}
.legal-link{display:inline-block;margin-top:24px;text-underline-offset:6px}
.legal-link:hover{text-decoration:underline;color:#fff}
.footer p{max-width:1200px;margin:auto}
a:focus-visible,button:focus-visible{outline:2px solid white;outline-offset:4px}
@media(max-width:1000px){.brand{left:auto;right:clamp(20px,3vw,40px);transform:none}}
@media(max-width:768px){
  :root{--header:74px}
  header{padding:0 24px}
  .brand{left:50%;right:auto;transform:translateX(-50%);height:66px;width:78px}
  .menu-btn{display:flex;align-items:center;justify-content:center}
  nav{display:none;position:absolute;top:var(--header);left:0;right:0;background:rgba(0,0,0,0.96);backdrop-filter:blur(16px);border-bottom:1px solid #222;padding:28px 24px;flex-direction:column;gap:22px;text-align:center;box-shadow:0 15px 30px rgba(0,0,0,0.8)}
  nav.open{display:flex}
  nav a{font-size:20px;padding:6px 0}
  .grid{grid-template-columns:1fr}
  .content, .project-detail{padding:48px 20px 64px}
  .page-title{margin-bottom:48px}
  .stand{margin-top:64px}
  .socials{gap:28px;margin-bottom:32px}
  .social-icon{height:26px;width:26px}
  .social-icon-youtube{width:34px}
  .footer{padding:32px 20px}
  .footer p{max-width:420px}
  .legal-link{margin-top:24px}
  .hero{min-height:470px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.hero-video{display:none}}