:root{--bg:#0e0e0e;--fg:#ffffff;--accent:#ffd000;--gray:#222222;--syne:"Syne",sans-serif;--inter:"Inter",sans-serif}
*{margin:0;padding:0;box-sizing:border-box;cursor:crosshair}
html,body{overflow-x:hidden;max-width:100vw}
body{background-color:var(--bg);color:var(--fg);font-family:var(--inter);line-height:1.4}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--accent)}
.huge-type{font-family:var(--syne);font-weight:800;font-size:clamp(4rem,12vw,24rem);line-height:0.8;letter-spacing:-0.05em;text-transform:uppercase}
.outline-text{-webkit-text-stroke:1px var(--fg);color:transparent;opacity:0.15}
.container{width:100%;max-width:1200px;margin:0 auto;position:relative;padding:0 20px}
section{padding:60px 0;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
nav{position:fixed;top:0;width:100%;padding:20px 30px;display:flex;justify-content:center;align-items:center;z-index:1000;mix-blend-mode:difference}
.logo{font-family:var(--syne);font-weight:800;font-size:1.5rem;letter-spacing:-1px}
#hero{height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.hero-title-container{position:relative;z-index:10;text-align:center}
.parallax-text{display:block;will-change:transform}
.hero-img{position:absolute;width:80%;max-width:500px;height:auto;max-height:70vh;object-fit:contain;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;filter:grayscale(1) contrast(1.1);opacity:0.8}
.project-row{display:flex;gap:40px;margin-bottom:100px;position:relative;flex-wrap:wrap}
.project-info{flex:1;min-width:280px;padding-top:50px}
.project-media{flex:1;position:relative;z-index:10;min-width:200px}
.floating-label{position:absolute;bottom:-50px;right:-50px;z-index:20;pointer-events:none;opacity:0.08;transform-origin:center}
.scrolling-marquee{white-space:nowrap;overflow:hidden;padding:60px 0;border-top:1px solid var(--gray);border-bottom:1px solid var(--gray);width:100%}
.marquee-inner{display:inline-flex;animation:marquee 30s linear infinite;width:max-content}
.marquee-inner span{flex-shrink:0}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.composition{display:block;position:relative;min-height:auto}
.comp-item-3{max-width:500px;margin:40px auto}
.sticky-type{position:sticky;top:10%;font-size:clamp(4rem,15vw,15rem);line-height:0.7;opacity:0.05;z-index:0;pointer-events:none;font-family:var(--syne);font-weight:800}
footer{padding:60px 0;background:#000}
.footer-cta{font-size:clamp(2.5rem,10vw,12rem);line-height:0.8;font-family:var(--syne);text-align:center;padding:60px 0}
.footer-cta a{color:inherit;text-decoration:none;transition:color 0.3s}
.footer-cta a:hover{color:var(--accent)}
.blob{position:fixed;width:400px;height:400px;background:radial-gradient(circle,rgba(255,208,0,0.15) 0%,rgba(14,14,14,0) 70%);border-radius:50%;pointer-events:none;z-index:-1;transition:transform 0.1s ease-out}
.divider{height:1px;background:var(--gray);width:100%;margin:30px 0}
@media(max-width:768px){
.huge-type{font-size:clamp(3rem,14vw,6rem)}
.hero-img{width:85%;max-height:60vh}
.hero-title-container span[style*="padding-left"]{padding-left:0!important}
.project-row{flex-direction:column!important;gap:30px;margin-bottom:80px}
.project-info{padding-top:30px}
.project-info h3.huge-type{font-size:clamp(3.5rem,15vw,5rem)!important;margin:25px 0!important}
.project-info p{font-size:1.1rem!important;line-height:1.6!important;word-wrap:break-word}
.footer-cta{font-size:clamp(2.5rem,10vw,5rem);padding:50px 0}
.floating-label{display:none}
.sticky-type{font-size:clamp(4rem,18vw,8rem);opacity:0.08}
nav{padding:15px 20px}
section{padding:50px 0;min-height:auto}
#hero{height:100vh}
#about{padding:60px 0}
#about h2{font-size:clamp(2rem,7vw,3.5rem)!important;margin-bottom:30px!important}
#about p{font-size:clamp(1.1rem,4vw,1.5rem)!important;line-height:1.6!important}
.comp-item-3 div{padding:35px!important}
.comp-item-3 h4{font-size:2rem!important;margin-bottom:15px}
.comp-item-3 p{font-size:1.1rem!important;line-height:1.6!important}
.scrolling-marquee{padding:40px 0}
.blob{display:none}
.container{padding:0 25px}
}