:root{--yellow:#f7d000;--yellow-dim:#c9a900;--black:#000;--grey:#111;--grey2:#1a1a1a;--white:#fff;--muted:#666;}
body{background:var(--black);color:var(--white);font-family:'DM Sans',sans-serif;font-weight:300;overflow-x:hidden;cursor:none;}
a,button,input,label{cursor:none;}

/* NAV */
nav{position:fixed;top:0;left:0;width:100%;z-index:100;padding:22px 60px;display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,.95);border-bottom:1px solid #1a1a1a;}
.nav-logo{text-decoration:none;display:flex;align-items:center;}
.nav-logo img{height:36px;width:auto;filter:brightness(0) invert(1);transition:filter .25s ease;}
.nav-logo:hover img{filter:brightness(0) invert(78%) sepia(85%) saturate(1650%) hue-rotate(1deg) brightness(98%) !important;}
.nav-back{font-family:'Syne',sans-serif;font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-decoration:none;display:flex;align-items:center;gap:8px;transition:color .2s;}
.nav-back:hover{color:var(--yellow);}

/* PAGE HEADER */
.page-header{padding:160px 60px 80px;border-bottom:1px solid #1a1a1a;}
.page-tag{font-family:'Syne',sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:var(--yellow);display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.page-tag::before{content:'';width:30px;height:1px;background:var(--yellow);}
.page-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(4rem,10vw,10rem);line-height:.9;letter-spacing:.02em;}

/* FILTERS */
.filters{padding:40px 60px;display:flex;gap:12px;flex-wrap:wrap;border-bottom:1px solid #1a1a1a;}
.filter-btn{font-family:'Syne',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;padding:10px 20px;border:1px solid #333;background:transparent;color:var(--muted);cursor:none;transition:all .2s;}
.filter-btn:hover,.filter-btn.active{background:var(--yellow);color:var(--black);border-color:var(--yellow);}

/* GRID */
.projects-section{padding:60px;}
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;position:relative;}
.project-card{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--grey2);cursor:none;text-decoration:none;display:block;transition:opacity .4s ease,transform .4s ease;}
.project-card.wide{grid-column:span 2;aspect-ratio:2/1;}
.project-card.tall{grid-row:span 2;aspect-ratio:1/2;}
.project-card.hidden{opacity:0;transform:scale(0.95);pointer-events:none;position:absolute;visibility:hidden;}
.card-bg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;transition:transform .5s ease;position:relative;overflow:hidden;}
.card-bg picture{width:100%;height:100%;display:block;overflow:hidden;}
.card-bg img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.card-bg picture img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.project-card:hover .card-bg{transform:scale(1.05);}
.card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 60%);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:28px;transition:background .3s;}
.project-card:hover .card-overlay{background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.3) 100%);}
.card-cat{font-family:'Syne',sans-serif;font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);margin-bottom:8px;}
.card-name{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:.05em;color:var(--white);margin-bottom:6px;}
.card-client{font-size:.8rem;color:#aaa;}
.card-arrow{position:absolute;top:20px;right:20px;width:36px;height:36px;border:1px solid rgba(247,208,0,.4);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;}
.project-card:hover .card-arrow{opacity:1;}
.card-icon{font-family:'Bebas Neue',sans-serif;font-size:4.5rem;opacity:.1;color:var(--yellow);}
.bg1{background:radial-gradient(ellipse at 60% 40%,#2a1f00,#000);}
.bg2{background:radial-gradient(ellipse at 30% 60%,#1a0a00,#000);}
.bg3{background:radial-gradient(ellipse at 70% 30%,#0d1a0a,#000);}
.bg4{background:radial-gradient(ellipse at 40% 70%,#0a0d1a,#000);}
.bg5{background:radial-gradient(ellipse at 60% 40%,#1a0a12,#000);}
.bg6{background:radial-gradient(ellipse at 50% 50%,#1a1500,#000);}
.bg7{background:radial-gradient(ellipse at 30% 30%,#0a1a15,#000);}
.bg8{background:radial-gradient(ellipse at 70% 60%,#1a1000,#000);}
.bg9{background:radial-gradient(ellipse at 40% 50%,#0d0a1a,#000);}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* Scroll to top */
#scrollTop{position:fixed;bottom:100px;right:28px;width:42px;height:42px;background:var(--yellow);border:none;cursor:none;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s;z-index:500;}
#scrollTop.visible{opacity:1;transform:translateY(0);}
#scrollTop:hover{background:var(--yellow-dim);}

/* Footer */
footer{background:var(--black);border-top:1px solid #1a1a1a;padding:50px 60px;}
.footer-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:40px;}
.footer-logo img{height:22px;width:auto;filter:brightness(0) invert(1);transition:filter .25s ease;display:block;}
.footer-logo:hover img{filter:brightness(0) invert(78%) sepia(85%) saturate(1650%) hue-rotate(1deg) brightness(98%) !important;}
.footer-tagline{font-size:.85rem;color:var(--muted);margin-top:12px;max-width:260px;line-height:1.6;}
.footer-links{display:flex;flex-direction:column;gap:10px;}
.footer-links-title{font-family:'Syne',sans-serif;font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);margin-bottom:6px;}
.footer-links a{font-size:.85rem;color:var(--muted);text-decoration:none;transition:color .2s;}
.footer-links a:hover{color:var(--white);}
.footer-socials a{font-family:'Syne',sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s;display:block;margin-bottom:10px;}
.footer-socials a:hover{color:var(--yellow);}
.footer-bottom{border-top:1px solid #1a1a1a;padding-top:28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.footer-copy{font-size:.78rem;color:var(--muted);font-family:'Syne',sans-serif;letter-spacing:.08em;}
.footer-bottom-socials{display:flex;gap:20px;}
.footer-bottom-socials a{font-family:'Syne',sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s;}
.footer-bottom-socials a:hover{color:var(--yellow);}
.footer-emails a{font-size:.82rem;color:var(--muted);text-decoration:none;display:block;transition:color .2s;}
.footer-emails a:hover{color:var(--yellow);}

/* Mobile hamburger */
#navHamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;background:none;border:none;cursor:none;padding:4px;flex-shrink:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
#navHamburger span{display:block;width:22px;height:2px;background:var(--white);transition:transform .3s ease,opacity .2s ease;pointer-events:none;}
#navHamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
#navHamburger.open span:nth-child(2){opacity:0;}
#navHamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
#mobileMenu{display:none;position:fixed;top:60px;left:0;width:100%;background:rgba(0,0,0,.98);border-top:1px solid #1c1c1c;z-index:199;flex-direction:column;}
#mobileMenu.open{display:flex;}
#mobileMenu a{font-family:'Syne',sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:16px 20px;border-bottom:1px solid #1a1a1a;display:block;}
#mobileMenu a:last-child{border-bottom:none;}
#mobileMenu a:hover,#mobileMenu a.active{color:var(--yellow);}

@media(max-width:900px){
  nav{padding:0 16px !important;height:60px !important;position:fixed !important;top:0;left:0;width:100% !important;z-index:200;display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,.98) !important;box-sizing:border-box;}
  .nav-logo img{height:26px !important;}
  .nav-back{display:none !important;}
  #navHamburger{display:flex;}
  .page-header{padding:100px 20px 50px;}
  .filters{padding:16px 20px;gap:8px;flex-wrap:wrap;}
  .filter-btn{padding:7px 14px;font-size:.63rem;white-space:nowrap;}
  .projects-section{padding:20px;}
  .projects-grid{grid-template-columns:1fr;}
  .project-card.wide{grid-column:span 1;aspect-ratio:4/3;}
  .project-card.tall{grid-row:span 1;aspect-ratio:4/3;}
  .card-name{font-size:1.3rem;}
  .card-overlay{padding:20px;}
  footer{padding:40px 20px;}
  .footer-top{flex-direction:column;gap:32px;}
  .footer-bottom{flex-direction:column;text-align:center;gap:12px;}
  .footer-bottom-socials{flex-wrap:wrap;justify-content:center;}
}