:root{--black:#080808;--cream:#f1e7dc;--white:#f4f1ed;--gold:#c6b17a;--muted:#888}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--white);font-family:"DM Sans",sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.loader{position:fixed;inset:0;background:#080808;z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;transition:opacity .8s,visibility .8s}
.loader.hide{opacity:0;visibility:hidden}
.loader-number{font-family:Anton,sans-serif;font-size:38px}
.loader-circle{width:38px;height:38px;border:1px solid #777;border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cursor,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:9998;border-radius:50%;transform:translate(-50%,-50%)}
.cursor{width:34px;height:34px;border:1px solid #b9a77d;transition:width .3s,height .3s,background .3s}
.cursor-dot{width:4px;height:4px;background:var(--gold)}
.cursor.active{width:65px;height:65px;background:#c6b17a22}
.navigation{height:74px;position:absolute;z-index:50;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 4.5%;color:#111}
.logo{font-family:"Playfair Display",serif;font-style:italic;font-size:24px}
.logo span{color:#a48d5a}
.navigation nav{display:flex;gap:42px}
.navigation nav a{font-size:10px;font-weight:700;letter-spacing:.5px;position:relative}
.navigation nav a:after{content:"";position:absolute;bottom:-6px;left:0;width:0;height:1px;background:#111;transition:.3s}
.navigation nav a:hover:after{width:100%}
.menu-btn{display:none;background:none;border:0;font-size:22px}
.hero{height:100vh;min-height:650px;background:var(--cream);color:#080808;position:relative;display:flex;flex-direction:column;justify-content:center;padding:90px 2.5% 40px;overflow:hidden}
.hero-topline{position:absolute;top:100px;left:3%;right:3%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px}
.hero-center{text-align:center;position:relative;z-index:2}
.hello{font-family:"Playfair Display",serif;font-style:italic;font-size:clamp(25px,4vw,48px);margin-bottom:-12px;position:relative;z-index:2}
.hello span{color:#ad9667}
.creative{font-family:Anton,sans-serif;font-size:clamp(110px,25vw,350px);line-height:.88;letter-spacing:-5px;white-space:nowrap;transform:scaleY(1.08);transform-origin:center;filter:url(#wave)}
.hero-center h2{font-family:Anton,sans-serif;font-size:clamp(34px,6vw,76px);line-height:1;margin-top:5px}
.hero-tags{display:flex;align-items:center;justify-content:center;gap:25px;margin-top:20px;font-size:10px;font-weight:700}
.hero-tags i{font-style:normal}
.hero-bottom{position:absolute;bottom:32px;left:2.5%;right:2.5%;display:flex;justify-content:space-between;align-items:end;font-size:10px}
.hero-bottom em{font-family:"Playfair Display",serif}
.scroll-link{display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-link b{font-size:20px;font-weight:400}
.hero-location{text-align:right}
.round-stamp{position:absolute;right:5%;bottom:75px;width:90px;height:90px;border:1px solid #777;border-radius:50%;display:grid;place-items:center}
.round-stamp svg{position:absolute;width:100%;height:100%;animation:spin 14s linear infinite;fill:#111;font-size:8px;letter-spacing:2px}
.round-stamp span{font-size:25px}
.section-dark{background:var(--black);color:var(--white);position:relative;padding:100px 4.5%}
.section-index{font-size:9px;color:#8b8b8b;letter-spacing:2px;margin-bottom:35px}
.about-grid{display:grid;grid-template-columns:30% 1fr;gap:7%;align-items:center}
.portrait-card{height:450px;position:relative;border:1px solid #242424;overflow:hidden;background:#111}
.portrait-card img{width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(100%);transition:transform .8s,filter .8s}
.portrait-card:hover img{transform:scale(1.06);filter:grayscale(0%)}
.portrait-name,.portrait-caption{position:absolute;left:18px;font-size:10px;letter-spacing:1px}
.portrait-name{top:18px}.portrait-caption{bottom:18px;color:#aaa}
.eyebrow{font-size:9px;letter-spacing:3px;color:#999}
.about-content h2{font-size:clamp(30px,4vw,58px);line-height:1.04;letter-spacing:-2px;margin:20px 0}
.about-content h2 span{color:var(--gold)}
.about-copy{display:grid;grid-template-columns:1fr 1fr;gap:35px;font-size:11px;line-height:1.8;color:#aaa}
.about-facts{margin-top:45px;padding-top:20px;border-top:1px solid #292929;display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.about-facts div{display:flex;flex-direction:column;gap:9px}
.about-facts small{font-size:8px;letter-spacing:2px;color:#777}
.about-facts b{font-size:10px;font-weight:500}
.expertise{border-top:1px solid #181818;overflow:hidden}
.expertise-grid{display:grid;grid-template-columns:36% 1fr;gap:7%;align-items:center}
.expertise-intro h2{font-size:clamp(42px,6vw,75px);line-height:.9;letter-spacing:-3px}
.expertise-intro h2 span{color:#fff}
.expertise-intro>p{max-width:340px;font-size:16px;line-height:1.5;margin-top:30px}
.expertise-intro .small-copy{font-size:10px;color:#aaa;line-height:1.8;margin-top:25px}
.tech-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:25px}
.tech-tags span{font-size:7px;letter-spacing:1px;border:1px solid #333;padding:8px}
.expertise-list{border-top:1px solid #292929}
.skill-row{display:grid;grid-template-columns:30px 42px 1fr 20px;align-items:center;gap:15px;padding:22px 10px;border-bottom:1px solid #292929;transition:background .4s,padding .4s}
.skill-row:hover{background:#151515;padding-left:22px}
.skill-no{font-size:8px;color:#777}
.skill-icon{width:32px;height:32px;border:1px solid #393939;display:grid;place-items:center;color:var(--gold);font-size:17px;transition:.4s}
.skill-row:hover .skill-icon{background:var(--gold);color:#111;transform:rotate(45deg)}
.skill-row h3{font-size:16px;font-weight:500}
.skill-row p{font-size:10px;color:#888;margin-top:7px}
.skill-row small{font-size:7px;letter-spacing:1px;color:#777;display:block;margin-top:9px}
.skill-row> b{font-size:15px;color:#777;transition:.3s}
.skill-row:hover>b{color:var(--gold);transform:translate(4px,-4px)}
.floating-tech{position:absolute;font-family:Anton,sans-serif;font-size:30px;opacity:.85;pointer-events:none;animation:float 5s ease-in-out infinite}
.tech-one{color:#e9d900;top:30%;left:49%;transform:rotate(-12deg)}
.tech-two{color:#e34c26;top:70%;left:20%;animation-delay:-2s}
.tech-three{color:#54d5df;top:48%;right:8%;animation-delay:-3s}
@keyframes float{0%,100%{translate:0 0;rotate:-8deg}50%{translate:0 -25px;rotate:10deg}}
.work{border-top:1px solid #1a1a1a;padding-top:80px}
.work-heading{font-family:Anton,sans-serif;color:var(--gold);font-size:clamp(75px,15vw,190px);line-height:.9;text-align:center;margin:20px 0 65px}
.work-heading span{color:#eee}
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px}
.project-large{grid-column:1/-1}
.project-visual{height:330px;position:relative;overflow:hidden;padding:30px;display:flex;flex-direction:column;justify-content:center;transition:transform .6s}
.project-card:hover .project-visual{transform:scale(.985)}
.visual-one{background:#c5b9a9;color:#111}
.visual-two{background:#d5d0c5;color:#111}
.visual-three{background:#222;color:#eee}
.visual-kicker{position:absolute;top:25px;left:28px;font-size:8px;letter-spacing:2px}
.project-visual strong{font-family:Anton,sans-serif;font-size:clamp(48px,9vw,115px);line-height:.8;letter-spacing:-2px}
.visual-circle{position:absolute;right:8%;bottom:15%;width:90px;height:90px;border:1px solid #222;border-radius:50%;display:grid;place-items:center;font-size:30px;transition:.5s}
.project-card:hover .visual-circle{transform:rotate(45deg);background:#111;color:#fff}
.mock-product{position:absolute;right:10%;bottom:15%;width:130px;height:140px;background:#eee;display:grid;place-items:center;text-align:center;font-size:12px;box-shadow:0 20px 40px #0002}
.mock-window{position:absolute;right:10%;bottom:15%;padding:30px;background:#eee;color:#111;font-size:18px;box-shadow:0 20px 50px #0008}
.mock-window small{font-size:9px}
.project-info{display:flex;justify-content:space-between;align-items:center;padding:17px 2px;border-bottom:1px solid #333}
.project-info h3{font-size:14px;font-weight:500}
.project-info p{font-size:9px;color:#888;margin-top:6px}
.project-info>span{font-size:20px;transition:.3s}
.project-card:hover .project-info>span{color:var(--gold);transform:translate(5px,-5px)}
.journal{border-top:1px solid #1b1b1b}
.journal-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.journal-grid>h2{font-family:Anton,sans-serif;font-size:clamp(40px,7vw,90px);line-height:.95}
.journal-grid>h2 span{color:var(--gold)}
.journal-item{position:relative;padding:25px 35px;border-top:1px solid #333;transition:background .3s}
.journal-item:hover{background:#141414}
.journal-item>span{font-size:8px;letter-spacing:2px;color:#999}
.journal-item h3{font-size:20px;font-weight:400;line-height:1.3;margin-top:25px;max-width:400px}
.journal-item>b{position:absolute;right:20px;top:25px}
.contact{background:var(--cream);color:#111;padding:100px 4.5% 30px;min-height:650px;position:relative}
.contact .section-index{color:#777}
.contact h2{font-family:Anton,sans-serif;font-size:clamp(70px,14vw,170px);line-height:.85;margin:35px 0}
.contact h2 em{font-family:"Playfair Display",serif;font-weight:500}
.contact-mail{display:inline-block;border-bottom:1px solid #111;padding:12px 0;font-size:11px;letter-spacing:2px}
.contact-bottom{border-top:1px solid #b9afa5;margin-top:100px;padding-top:20px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px}
.contact-bottom div{display:flex;gap:25px}
.contact-bottom a:hover{color:#967b43}
@media(max-width:800px){
 .navigation{height:65px}.navigation nav{gap:15px}.navigation nav a{font-size:8px}
 .hero{min-height:600px}.hero-topline{top:90px;font-size:7px}
 .creative{font-size:23vw;letter-spacing:-3px}
 .about-grid{grid-template-columns:1fr;gap:40px}.portrait-card{height:400px;max-width:350px}
 .expertise-grid{grid-template-columns:1fr;gap:45px}
 .work-grid{gap:25px}.project-visual{height:250px}
}
@media(max-width:560px){
 .navigation nav{display:none;position:absolute;top:65px;left:0;width:100%;background:var(--cream);padding:25px;flex-direction:column}
 .navigation nav.open{display:flex}.navigation nav a{font-size:12px}
 .menu-btn{display:block}
 .hero{height:90vh;min-height:570px;padding-left:12px;padding-right:12px}
 .hero-topline{font-size:6px;top:85px}
 .creative{font-size:22vw;letter-spacing:-2px}
 .hero-center h2{font-size:11vw}
 .hero-tags{gap:12px;font-size:8px}
 .hero-bottom{font-size:8px;bottom:22px}
 .round-stamp{width:68px;height:68px;right:5%;bottom:80px}
 .section-dark{padding:75px 6%}
 .about-copy{grid-template-columns:1fr;gap:15px}
 .about-facts{grid-template-columns:1fr 1fr}
 .expertise-intro h2{font-size:60px}
 .skill-row{grid-template-columns:20px 32px 1fr 15px;gap:8px;padding:18px 0}
 .skill-row h3{font-size:13px}.skill-row p{font-size:9px}
 .floating-tech{font-size:22px}
 .work{padding-left:5%;padding-right:5%}
 .work-heading{font-size:24vw;margin-bottom:40px}
 .work-grid{grid-template-columns:1fr}
 .project-large{grid-column:auto}
 .project-visual{height:260px}
 .project-visual strong{font-size:70px}
 .journal-grid{grid-template-columns:1fr}
 .journal-grid>h2{margin-bottom:20px}
 .journal-item h3{font-size:17px}
 .contact{padding:75px 6% 25px;min-height:580px}
 .contact-bottom{flex-wrap:wrap;gap:20px;margin-top:75px}
 .contact-bottom div{order:3;width:100%}
 .cursor,.cursor-dot{display:none}
}