*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Arial,Helvetica,sans-serif;background:#f4f3ee;color:#111;overflow-x:hidden}
body.loading{overflow:hidden}a{color:inherit;text-decoration:none}

.intro{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;background:#090909;color:#fff;z-index:99999;overflow:hidden}
.intro-bg{position:absolute;inset:-20%;background:radial-gradient(circle at 30% 40%,rgba(71,132,255,.16),transparent 30%),radial-gradient(circle at 75% 60%,rgba(255,255,255,.08),transparent 28%);animation:bgMove 6s ease-in-out infinite alternate}
.grid{position:absolute;inset:-100px;opacity:.25;background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:70px 70px;animation:gridMove 10s linear infinite}
.intro-top{position:absolute;top:28px;left:35px;right:35px;display:flex;justify-content:space-between;z-index:2;font-size:10px;letter-spacing:3px;text-transform:uppercase;opacity:0;animation:fadeUp .8s ease .2s forwards}
.intro-center{position:absolute;width:calc(100% - 70px);left:50%;top:50%;transform:translate(-50%,-50%);z-index:2}
.line{overflow:hidden}.line-inner{display:block;font-size:clamp(4rem,11vw,12rem);line-height:.82;font-weight:800;letter-spacing:-.075em;transform:translateY(120%);animation:revealText 1.15s cubic-bezier(.16,1,.3,1) forwards}
.line:nth-child(2) .line-inner{animation-delay:.14s;padding-left:8vw}.line:nth-child(3) .line-inner{animation-delay:.28s;color:transparent;-webkit-text-stroke:1.5px white}
.intro-symbol{position:absolute;right:4vw;top:50%;width:85px;height:85px;border:1px solid rgba(255,255,255,.4);border-radius:50%;display:grid;place-items:center;font-size:26px;animation:rotate 8s linear infinite}
.intro-bottom{position:absolute;left:35px;right:35px;bottom:28px;z-index:2}.loader-info{display:flex;justify-content:space-between;margin-bottom:12px;font-size:10px;letter-spacing:2px}.loader-line{width:100%;height:1px;background:rgba(255,255,255,.23);overflow:hidden}.loader-progress{width:0;height:100%;background:white}
.intro.exit{animation:introExit 1.3s cubic-bezier(.76,0,.24,1) forwards}

.website{opacity:0;transform:scale(1.035)}.website.show{animation:websiteReveal 1.2s ease forwards}
.navbar{height:100px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between}.logo{font-size:18px;font-weight:800;letter-spacing:-1px}.logo-dot{display:inline-block;width:7px;height:7px;background:#111;border-radius:50%;margin-left:3px}.nav-links{display:flex;gap:35px}.nav-links a{position:relative;font-size:11px;letter-spacing:1.5px;text-transform:uppercase}.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:1px;background:#111;transform:scaleX(0);transform-origin:right;transition:transform .4s ease}.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}

.hero{min-height:calc(100vh - 100px);padding:4vh 4vw 5vh;display:flex;flex-direction:column;justify-content:space-between}.hero-top{display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;text-transform:uppercase}.hero-title{margin-top:5vh;max-width:1500px;font-size:clamp(5rem,13.5vw,14rem);line-height:.78;letter-spacing:-.085em;font-weight:800}.hero-title span{display:block}.hero-title .thin{font-weight:300;margin-left:11vw}.hero-title .outline{color:transparent;-webkit-text-stroke:1.5px #111}.hero-bottom{margin-top:50px;display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:50px}.hero-description{max-width:350px;font-size:15px;line-height:1.55}.hero-number{font-size:11px;letter-spacing:2px}.explore-button{width:130px;height:130px;border:1px solid #111;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;font-size:10px;letter-spacing:1.5px;transition:.4s ease}.explore-button span{font-size:22px}.explore-button:hover{background:#111;color:white;transform:rotate(-8deg) scale(1.05)}

.about{min-height:100vh;padding:100px 4vw;background:#111;color:white;display:flex;flex-direction:column;justify-content:space-between}.section-label{font-size:10px;letter-spacing:2px;text-transform:uppercase}.about-text{max-width:1250px;font-size:clamp(3rem,8vw,9rem);line-height:.9;letter-spacing:-.06em}.about-bottom{display:flex;justify-content:space-between;align-items:end;margin-top:80px}.about-small{max-width:430px;font-size:14px;line-height:1.6;color:#aaa}

.projects{min-height:100vh;padding:110px 4vw;background:#f4f3ee}.section-header{display:flex;justify-content:space-between;align-items:end;padding-bottom:30px;border-bottom:1px solid #aaa}.section-header h2{font-size:clamp(4rem,9vw,9rem);line-height:.8;letter-spacing:-.07em}.project-item{display:grid;grid-template-columns:70px 1fr auto;gap:30px;align-items:center;padding:45px 0;border-bottom:1px solid #aaa;transition:.4s ease}.project-item:hover{padding-left:25px;padding-right:25px}.project-number{font-size:11px}.project-item h3{font-size:clamp(2rem,5vw,5rem);letter-spacing:-.05em}.project-arrow{font-size:35px;transition:transform .4s ease}.project-item:hover .project-arrow{transform:rotate(45deg)}

.contact{min-height:90vh;padding:100px 4vw;background:#111;color:white;display:flex;flex-direction:column;justify-content:space-between}.contact h2{max-width:1300px;font-size:clamp(4rem,10vw,11rem);line-height:.83;letter-spacing:-.07em}.contact-bottom{display:flex;justify-content:space-between;border-top:1px solid #444;padding-top:25px}.contact a{border-bottom:1px solid white;padding-bottom:5px}

@keyframes revealText{from{transform:translateY(120%)}to{transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes gridMove{from{transform:translate(0,0)}to{transform:translate(70px,70px)}}
@keyframes bgMove{from{transform:scale(1) translate(-2%,-2%)}to{transform:scale(1.2) translate(3%,3%)}}
@keyframes rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes introExit{0%{transform:translateY(0)}100%{transform:translateY(-100%);visibility:hidden}}
@keyframes websiteReveal{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}

@media(max-width:800px){.intro-top{left:20px;right:20px;top:20px}.intro-center{width:calc(100% - 40px)}.line-inner{font-size:clamp(3.2rem,17vw,7rem);line-height:.9}.line:nth-child(2) .line-inner{padding-left:0}.intro-symbol{display:none}.intro-bottom{left:20px;right:20px;bottom:20px}.navbar{padding:0 20px;height:80px}.nav-links{display:none}.hero{padding:4vh 20px 30px}.hero-title{font-size:clamp(4rem,19vw,8rem)}.hero-title .thin{margin-left:0}.hero-bottom{grid-template-columns:1fr auto;gap:20px}.hero-number{display:none}.hero-description{font-size:13px}.explore-button{width:90px;height:90px}.about,.projects,.contact{padding-left:20px;padding-right:20px}.project-item{grid-template-columns:40px 1fr auto;gap:12px}.contact-bottom{flex-direction:column;gap:25px}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}
