*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --black:#080808;--off:#111;--dark:#1a1a1a;--mid:#2e2e2e;
  --muted:#888;--subtle:#adadad;--light:#d8d8d8;--white:#f0ece4;
  --accent:#cc2a2a;--gold:#B01E1E;
}
html{scroll-behavior:smooth;}
body{background:var(--black);color:var(--white);font-family:'DM Sans',sans-serif;font-weight:300;overflow-x:hidden;cursor:default;}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;justify-content:space-between;align-items:center;padding:28px 48px;}
.nav-logo{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:0.15em;color:var(--white);text-decoration:none;}
.nav-tag{font-size:13px;letter-spacing:0.35em;color:var(--gold);text-transform:uppercase;font-weight:400;}
.nav-links{display:flex;gap:36px;list-style:none;}
.nav-links a{font-size:10px;letter-spacing:0.25em;text-transform:uppercase;color:var(--subtle);text-decoration:none;transition:color 0.3s;}
.nav-links a:hover{color:var(--white);}
.nav-back{font-size:10px;letter-spacing:0.25em;text-transform:uppercase;color:var(--subtle);background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:10px;transition:color 0.3s;padding:0;text-decoration:none;}
.nav-back:hover{color:var(--white);}

/* HERO */
.hero{height:100vh;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.hero-video-wrap{position:absolute;inset:0;z-index:0;}
.hero-video-wrap video{width:100%;height:100%;object-fit:cover;opacity:0.45;}
.hero-video-placeholder{width:100%;height:100%;background:linear-gradient(160deg,#0a1018 0%,#1a2030 40%,#0d1520 70%,#080808 100%);display:flex;align-items:center;justify-content:center;}
.hero-video-placeholder span{font-size:9px;letter-spacing:0.4em;text-transform:uppercase;color:var(--muted);}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(8,8,8,0.5) 0%,transparent 30%);z-index:1;}
.hero-content{position:relative;z-index:2;text-align:center;}
.hero-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(80px,13vw,180px);line-height:0.88;letter-spacing:0.03em;color:var(--white);opacity:0;animation:fadeUp 1.1s 0.4s forwards;}
.hero-title .outline{color:transparent;-webkit-text-stroke:1px rgba(240,236,228,0.4);}
.hero-sub{font-size:12px;letter-spacing:0.4em;text-transform:uppercase;color:var(--gold);margin-top:24px;opacity:0;animation:fadeUp 1s 0.7s forwards;}

/* SECTION */
.section{padding:100px 48px;}
.sec-label{font-size:11px;letter-spacing:0.45em;text-transform:uppercase;color:var(--gold);margin-bottom:48px;display:flex;align-items:center;gap:14px;}
.sec-label::before{content:'';display:block;width:22px;height:1px;background:var(--gold);}

/* WORK GRID */
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.work-card{position:relative;overflow:hidden;cursor:pointer;aspect-ratio:16/9;background:var(--off);}

.card-bg{position:absolute;inset:0;}
.bg1{background:linear-gradient(135deg,#111 0%,#252525 50%,#111 100%);}
.bg2{background:linear-gradient(160deg,#141414 0%,#2a2a2a 60%,#141414 100%);}
.bg3{background:linear-gradient(135deg,#0e0e0e 0%,#222 60%,#0e0e0e 100%);}
.bg4{background:linear-gradient(135deg,#111 0%,#1e1e1e 60%,#111 100%);}

.card-video{position:absolute;inset:0;z-index:1;opacity:1;transition:opacity 0.6s ease;}
.card-video video{width:100%;height:100%;object-fit:cover;}
.card-video-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.3);}
.card-video-placeholder span{font-size:8px;letter-spacing:0.35em;text-transform:uppercase;color:rgba(200,200,200,0.35);}

.card-light{position:absolute;inset:0;z-index:2;background:radial-gradient(ellipse 55% 55% at 35% 40%,rgba(255,255,255,0.04) 0%,transparent 70%);}
.card-always{position:absolute;bottom:0;left:0;right:0;z-index:3;padding:20px 24px;background:linear-gradient(to top,rgba(8,8,8,0.75) 0%,transparent 100%);pointer-events:none;opacity:0;transition:opacity 0.4s;}
.work-card:hover .card-always{opacity:1;}
.card-tag{font-size:11px;letter-spacing:0.3em;text-transform:uppercase;color:var(--gold);margin-bottom:5px;}
.card-title{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:0.05em;color:var(--white);line-height:1;}
.card-sub{font-size:10px;color:var(--subtle);margin-top:3px;}
.card-type{position:absolute;top:18px;right:18px;z-index:4;font-size:9px;letter-spacing:0.25em;text-transform:uppercase;color:var(--subtle);background:rgba(8,8,8,0.55);padding:3px 9px;opacity:0;transition:opacity 0.4s}
.work-card:hover .card-type{opacity:1;}

.cs-label{font-size:9px;letter-spacing:0.4em;text-transform:uppercase;color:var(--muted);}
.cs-title{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:0.1em;color:var(--muted);}

/* ABOUT */
.about-wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;border-top:1px solid var(--mid);}
.manifesto{font-family:'Bebas Neue',sans-serif;font-size:clamp(38px,5vw,60px);line-height:1.0;letter-spacing:0.03em;color:var(--white);margin-bottom:36px;}
.manifesto .hl{color:var(--gold);}
.about-body{font-size:13px;line-height:1.85;color:var(--subtle);}
.about-body+.about-body{margin-top:14px;}
.stats{display:flex;flex-direction:column;}
.stat-row{padding:24px 0;border-bottom:1px solid var(--mid);display:flex;flex-direction:column;gap:4px;}
.stat-row:first-child{border-top:1px solid var(--mid);}
.stat-n{font-family:'Bebas Neue',sans-serif;font-size:52px;line-height:1;color:var(--white);letter-spacing:0.02em;}
.stat-l{font-size:9px;letter-spacing:0.3em;text-transform:uppercase;color:var(--muted);}

/* SERVICES */
.srv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--mid);margin-top:48px;}
.srv-item{background:var(--black);padding:40px 32px;transition:background 0.3s;}
.srv-item:hover{background:var(--off);}
.srv-num{font-family:'Bebas Neue',sans-serif;font-size:44px;color:var(--mid);line-height:1;margin-bottom:20px;}
.srv-title{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:0.05em;color:var(--white);margin-bottom:10px;}
.srv-desc{font-size:12px;line-height:1.75;color:var(--muted);}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px;}
.tag{font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);border:1px solid var(--mid);padding:4px 9px;}

/* CONTACT */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;border-top:1px solid var(--mid);padding-top:80px;}
.contact-big{font-family:'Bebas Neue',sans-serif;font-size:clamp(44px,6vw,88px);line-height:0.92;letter-spacing:0.02em;color:var(--white);margin-bottom:40px;}
.contact-big .outline{color:transparent;-webkit-text-stroke:1px var(--gold);}
.c-info{display:flex;flex-direction:column;gap:20px;margin-top:48px;}
.c-row-label{font-size:9px;letter-spacing:0.35em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
.c-row-val{font-size:14px;color:var(--light);}
.c-row-val a{color:var(--light);text-decoration:none;transition:color 0.3s;}
.c-row-val a:hover{color:var(--accent);}
.form-right{display:flex;flex-direction:column;justify-content:flex-end;}
.fg{margin-bottom:24px;}
.fg label{display:block;font-size:9px;letter-spacing:0.3em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.fg input,.fg textarea,.fg select{width:100%;background:transparent;border:none;border-bottom:1px solid var(--mid);padding:11px 0;color:var(--white);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:300;outline:none;transition:border-color 0.3s;}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-bottom-color:var(--gold);}
.fg input::placeholder,.fg textarea::placeholder{color:var(--muted);}
.fg textarea{resize:none;min-height:72px;}
.fg select{-webkit-appearance:none;color:var(--white);}
.fg select option{background:#1a1a1a;}
.btn-send{display:inline-flex;align-items:center;gap:14px;padding:15px 30px;background:var(--gold);color:var(--black);font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:0.25em;text-transform:uppercase;border:none;cursor:pointer;transition:background 0.3s;margin-top:8px;}
.btn-send:hover{background:var(--accent);}

footer{padding:36px 48px;border-top:1px solid var(--mid);display:flex;justify-content:space-between;align-items:center;}
.foot-brand{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:0.1em;color:var(--muted);}
.foot-copy{font-size:10px;color:var(--muted);letter-spacing:0.08em;}
.foot-links{display:flex;gap:24px;}
.foot-links a{font-size:9px;letter-spacing:0.3em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color 0.3s;}
.foot-links a:hover{color:var(--gold);}

/* PROJECT PAGES */
.proj-hero{padding:60px 48px 80px;border-bottom:1px solid var(--mid);}
.proj-meta-top{display:flex;align-items:center;gap:20px;margin-bottom:40px;}
.proj-client-tag{font-size:11px;letter-spacing:0.4em;text-transform:uppercase;color:var(--gold);}
.proj-spec{font-size:9px;letter-spacing:0.3em;text-transform:uppercase;color:var(--muted);border:1px solid var(--mid);padding:3px 10px;}
.proj-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(52px,8vw,110px);line-height:0.9;letter-spacing:0.02em;color:var(--white);margin-bottom:24px;}
.proj-title .outline{color:transparent;-webkit-text-stroke:1px rgba(240,236,228,0.3);}
.proj-tagline{font-size:14px;line-height:1.75;color:var(--subtle);max-width:560px;}
.proj-video-section{padding:64px 48px;}
.proj-video-wrap{width:100%;aspect-ratio:16/9;background:var(--off);overflow:hidden;}
.proj-video-wrap iframe{width:100%;height:100%;border:none;display:block;}
.proj-video-label{font-size:9px;letter-spacing:0.35em;text-transform:uppercase;color:var(--muted:#888);margin-bottom:12px;}
.proj-info{padding:0 48px 80px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border-top:1px solid var(--mid);}
.proj-info-cell{background:var(--black);padding:36px 28px;border-right:1px solid var(--mid);}
.proj-info-cell:last-child{border-right:none;}
.proj-info-label{font-size:11px;letter-spacing:0.3em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;}
.proj-info-val{font-size:15px;color:var(--white);line-height:1.6;font-weight:300;}
.proj-desc-section{padding:64px 48px;border-top:1px solid var(--mid);display:grid;grid-template-columns:1fr 2fr;gap:80px;}
.proj-desc-label{font-size:11px;letter-spacing:0.4em;text-transform:uppercase;color:var(--gold);padding-top:4px;}
.proj-desc-body{font-size:14px;line-height:1.85;color:var(--subtle);}
.proj-nav-bottom{padding:48px;border-top:1px solid var(--mid);display:flex;justify-content:space-between;align-items:center;}
.proj-nav-hint{font-size:9px;letter-spacing:0.3em;text-transform:uppercase;color:var(--muted);}
.btn-back-bottom{display:inline-flex;align-items:center;gap:12px;font-size:10px;letter-spacing:0.25em;text-transform:uppercase;color:var(--subtle);background:none;border:1px solid var(--mid);padding:12px 24px;cursor:pointer;transition:all 0.3s;text-decoration:none;}
.btn-back-bottom:hover{color:var(--white);border-color:var(--subtle);}

@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.fade{opacity:1;transform:none;}
.fade.animate{opacity:0;transform:translateY(18px);transition:opacity 0.85s ease,transform 0.85s ease;}
.fade.animate.on{opacity:1;transform:translateY(0);}

@media(max-width:768px){
  .card-video{display:none;}
  .hero{height:auto;aspect-ratio:16/9;}
  nav{padding:20px 24px;}
  .nav-tag{display:none;}
  .section{padding:72px 24px;}
  .work-grid{grid-template-columns:1fr;}
  .about-wrap,.contact-wrap{grid-template-columns:1fr;gap:48px;}
  .srv-grid{grid-template-columns:1fr;}
  footer{flex-direction:column;gap:14px;padding:28px 24px;text-align:center;}
  .proj-hero{padding:120px 24px 60px;}
  .proj-video-section{padding:40px 24px;}
  .proj-info{grid-template-columns:1fr;padding:0 24px 60px;}
  .proj-desc-section{grid-template-columns:1fr;gap:24px;padding:48px 24px;}
  .proj-nav-bottom{padding:32px 24px;flex-direction:column;gap:16px;}
}