:root{--bg:#F7F5F2;--bg-alt:#ECE8E3;--text:#1C1C1C;--text-light:#7A756E;--text-muted:#B0ACA5;--bronze:#9A7A56;--bronze-light:rgba(154,122,86,0.15);--dark:#171717;--border:#D9D4CC;--gold:#C2A878;--font-serif:'Playfair Display',Georgia,serif;--font-sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'DM Mono',monospace;--ease:cubic-bezier(0.25,0.46,0.45,0.94);--ease-out:cubic-bezier(0.16,1,0.3,1)}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{font-family:var(--font-sans);background:var(--bg);color:var(--text);cursor:none;overflow-x:hidden}
a{text-decoration:none;color:inherit}::selection{background:var(--bronze);color:#fff}

/* Cursor */
.cursor{position:fixed;top:0;left:0;pointer-events:none;z-index:99999;mix-blend-mode:difference}
.cursor-ring{width:60px;height:60px;border:1.5px solid rgba(255,255,255,0.8);border-radius:50%;position:absolute;transform:translate(-50%,-50%);transition:width .4s var(--ease-out),height .4s var(--ease-out),border-color .4s;display:flex;align-items:center;justify-content:center}
.cursor-dot{width:2px;height:2px;background:#fff;border-radius:50%;position:absolute;transform:translate(-50%,-50%)}
.cursor-label{font-size:7px;letter-spacing:.2em;text-transform:uppercase;color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s}
.cursor.hover .cursor-ring{width:90px;height:90px}
.cursor.hover .cursor-label{opacity:1}
.cursor.hidden{opacity:0}
.cursor.magnetic .cursor-ring{width:70px;height:70px;border-color:var(--gold)}

/* Header */
.header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:28px 48px;transition:all .5s;mix-blend-mode:difference;color:#fff}
.header.scrolled{background:var(--bg);color:var(--text);mix-blend-mode:normal;box-shadow:0 1px 0 var(--border)}
.header-inner{display:flex;justify-content:space-between;align-items:center;max-width:1400px;margin:0 auto}
.logo{font-family:var(--font-serif);font-size:14px;font-weight:600;letter-spacing:.1em;line-height:1.2}
.nav{display:flex;gap:28px}
.nav-link{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:inherit;opacity:.7;position:relative;padding-bottom:2px;transition:opacity .3s}
.nav-link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--bronze);transition:width .4s var(--ease-out)}
.nav-link:hover{opacity:1}
.nav-link:hover::after{width:100%}
.nav-cta{padding:8px 20px;border:1px solid currentColor;border-radius:2px;opacity:1}
.nav-cta::after{display:none}
.nav-cta:hover{background:var(--bronze);border-color:var(--bronze);color:#fff}
.menu-btn{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer}
.menu-btn span{width:24px;height:1.5px;background:currentColor;border-radius:1px}

/* ============ SECTIONS ============ */
.section-header{padding:0 0 48px;max-width:1400px;margin:0 auto}
.section-num{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--bronze);margin-bottom:8px}
.section-label{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text-light);margin-bottom:12px}
.section-title{font-family:var(--font-serif);font-size:clamp(48px,7vw,96px);font-weight:500;line-height:1.0;letter-spacing:-.03em;margin-bottom:40px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-sans);font-size:13px;font-weight:500;letter-spacing:.02em;padding:16px 32px;border-radius:2px;border:none;cursor:pointer;transition:all .4s var(--ease-out);position:relative;overflow:hidden}
.btn-primary{background:var(--text);color:#fff}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.1)}
.btn-arrow{display:inline-block;transition:transform .4s var(--ease-out)}
.btn-primary:hover .btn-arrow{transform:translateX(4px)}
.btn-submit{padding:18px 36px;font-size:14px;width:100%}

/* ============ HERO ============ */
.hero{min-height:100vh;display:flex;align-items:center;padding:140px 48px 80px;position:relative;overflow:hidden;background:var(--bg)}
.hero-canvas{position:absolute;inset:0;z-index:0;display:block}
.hero-overlay{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-content{position:relative;z-index:2;max-width:760px}
.hero-badge{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;color:var(--bronze);margin-bottom:20px;padding:6px 14px;border:1px solid var(--bronze-light)}
.hero-title{font-family:var(--font-serif);font-size:clamp(52px,9vw,120px);font-weight:700;line-height:.95;letter-spacing:-.04em;margin-bottom:24px}
.hero-line{display:block;overflow:hidden}
.hero-line-ital{font-style:italic;font-weight:400;color:var(--bronze)}
.hero-desc{font-size:clamp(15px,1.2vw,18px);font-weight:300;line-height:1.7;color:var(--text-light);max-width:520px;margin-bottom:36px}
.hero-marquee{position:absolute;bottom:60px;left:0;right:0;display:flex;gap:48px;overflow:hidden;z-index:1;opacity:.03;pointer-events:none}
.hero-marquee span{font-family:var(--font-serif);font-size:80px;font-weight:700;white-space:nowrap;animation:marquee 20s linear infinite}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
.scroll-hint{position:absolute;bottom:32px;left:48px;z-index:2;display:flex;align-items:center;gap:12px}
.scroll-hint span{font-family:var(--font-mono);font-size:8px;letter-spacing:.3em;color:var(--text-muted)}
.scroll-line{width:32px;height:1px;background:var(--text-muted);animation:scrollAnim 2s ease-in-out infinite}
@keyframes scrollAnim{0%,100%{opacity:.2;width:20px}50%{opacity:.6;width:40px}}

/* ============ PROJECTS ============ */
.projects{background:var(--bg-alt);padding:120px 48px}
.categories{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:40px;max-width:1400px;margin-left:auto;margin-right:auto}
.cat-btn{padding:10px 20px;font-family:var(--font-sans);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--border);background:transparent;cursor:pointer;transition:all .4s var(--ease-out);border-radius:20px;color:var(--text-light)}
.cat-btn:hover{border-color:var(--bronze);color:var(--bronze)}
.cat-btn.active{background:var(--text);color:#fff;border-color:var(--text)}
.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px;max-width:1400px;margin:0 auto}
.project-card{background:#fff;border:1px solid var(--border);border-radius:2px;overflow:hidden;cursor:pointer;transition:all .5s var(--ease-out);will-change:transform}
.project-card:hover{transform:translateY(-8px);box-shadow:0 24px 48px rgba(0,0,0,.06);border-color:var(--bronze-light)}
.project-visual{height:240px;position:relative;overflow:hidden}
.project-visual svg{width:100%;height:100%;padding:20px}
.project-overlay-card{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;transition:opacity .5s}
.project-card:hover .project-overlay-card{opacity:1}
.project-overlay-card span{color:#fff;font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;transform:translateY(10px);transition:transform .5s var(--ease-out)}
.project-card:hover .project-overlay-card span{transform:translateY(0)}
.project-info{padding:24px}
.project-cat{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;color:var(--bronze);margin-bottom:6px}
.project-card h3{font-family:var(--font-serif);font-size:18px;font-weight:500;margin-bottom:4px}
.project-location{font-size:12px;color:var(--text-light)}
.project-year{font-size:11px;color:var(--text-muted);margin-top:8px}

/* Project Modal */
.project-overlay{position:fixed;inset:0;z-index:9998;display:none}
.project-overlay.open{display:block}
.po-bg{position:absolute;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(4px)}
.po-content{position:absolute;inset:40px;background:var(--bg);overflow-y:auto;max-width:1000px;margin:0 auto;padding:0}
.po-close{position:absolute;top:20px;right:20px;z-index:10;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--bg);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s}
.po-close:hover{background:var(--text);color:#fff;border-color:var(--text)}
.po-hero{height:400px;background:var(--bg-alt);display:flex;align-items:center;justify-content:center}
.po-body{padding:48px}
.po-meta{display:flex;gap:16px;margin-bottom:16px;font-size:12px;color:var(--bronze)}
.po-body h2{font-family:var(--font-serif);font-size:36px;font-weight:500;margin-bottom:20px}
.po-overview{font-size:15px;line-height:1.8;color:var(--text-light);margin-bottom:32px}
.po-details{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin-bottom:32px}
.po-detail h4{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--bronze);margin-bottom:8px}
.po-detail p{font-size:13px;line-height:1.6;color:var(--text-light)}
.po-nav{display:flex;justify-content:space-between;border-top:1px solid var(--border);padding-top:24px}
.po-nav button{background:none;border:none;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;color:var(--text);transition:color .3s}
.po-nav button:hover{color:var(--bronze)}

/* ============ PROCESS ============ */
.process{background:var(--bg);padding:120px 48px;overflow:hidden}
.process-track{position:relative;max-width:1400px;margin:0 auto;padding:60px 0}
.process-svg{width:100%;height:400px}
.process-stations{position:absolute;inset:0;pointer-events:none}
.process-station{position:absolute;text-align:center;pointer-events:auto;cursor:pointer;transition:all .3s var(--ease-out)}
.process-station:hover{transform:translateY(-4px)}
.ps-circle{width:60px;height:60px;border-radius:50%;border:2px solid var(--bronze);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-family:var(--font-serif);font-size:18px;color:var(--bronze);transition:all .4s var(--ease-out)}
.process-station:hover .ps-circle{border-color:var(--text);color:var(--text);background:var(--text);color:#fff}
.ps-title{font-family:var(--font-serif);font-size:14px;font-weight:500;margin-bottom:4px}
.ps-desc{font-size:11px;color:var(--text-light);max-width:140px;margin:0 auto;line-height:1.5}
.ps-detail{max-height:0;overflow:hidden;transition:max-height .5s var(--ease-out);font-size:12px;color:var(--text-light);line-height:1.6;margin-top:4px}
.process-station:hover .ps-detail{max-height:100px}

/* ============ SERVICES ============ */
.services{background:var(--bg-alt);padding:120px 48px}
.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;max-width:1400px;margin:0 auto}
.service-card{background:#fff;border:1px solid var(--border);padding:40px;position:relative;overflow:hidden;cursor:pointer;transition:all .4s var(--ease-out)}
.service-card:hover{border-color:var(--bronze);transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,.04)}
.service-svg-wrap{width:100px;height:100px;margin-bottom:24px;position:relative}
.service-svg-wrap svg{width:100%;height:100%}
.service-card h3{font-family:var(--font-serif);font-size:18px;font-weight:500;margin-bottom:8px}
.service-card p{font-size:13px;color:var(--text-light);line-height:1.6}
.service-hover{position:absolute;inset:0;background:var(--text);color:#fff;display:flex;align-items:center;justify-content:center;padding:40px;opacity:0;transition:opacity .4s;font-size:12px;line-height:1.6}
.service-card:hover .service-hover{opacity:1}

/* ============ STUDIO ============ */
.studio{background:var(--bg);padding:120px 48px}
.studio-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1400px;margin:0 auto}
.studio-visual{position:relative;min-height:500px;border:1px solid var(--border);border-radius:2px;overflow:hidden}
.studio-canvas{position:absolute;inset:0;width:100%;height:100%}
.studio-floating{position:absolute;inset:0;pointer-events:none}
.float-item{position:absolute;font-family:var(--font-serif);font-size:12px;font-style:italic;color:var(--bronze);opacity:.4;padding:8px 12px;background:rgba(255,255,255,.8);border:1px solid var(--bronze-light)}
.float-item.material{width:40px;height:40px;background:var(--bronze);opacity:.08}
.float-item.blueprint{width:80px;height:60px;border:1px solid var(--bronze-light);opacity:.12}
.studio-text{padding:40px 0}
.studio-text p{font-size:14px;line-height:1.8;color:var(--text-light);margin-bottom:16px}
.studio-team{display:flex;flex-direction:column;gap:12px;margin-top:32px}
.team-card{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);transition:all .3s}
.team-card:hover{border-color:var(--bronze)}
.tc-init{font-family:var(--font-serif);font-size:20px;color:var(--bronze);width:32px}
.team-card strong{font-size:13px;font-weight:500}
.team-card span{font-size:11px;color:var(--text-light);margin-left:auto}

/* ============ STATS ============ */
.stats{background:var(--bg-alt);padding:120px 48px}
.stats-layout{position:relative;max-width:1400px;margin:0 auto}
.stats-canvas{width:100%;height:400px;display:block}
.stats-items{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;max-width:1000px;margin:0 auto;position:relative;z-index:2}
.stat-item{text-align:center}
.stat-tower{width:30px;height:120px;margin:0 auto 16px;display:flex;align-items:flex-end;justify-content:center;background:var(--border);position:relative}
.stat-tower-bar{width:100%;background:var(--bronze);min-height:0;transition:height .05s}
.stat-val{font-family:var(--font-serif);font-size:36px;font-weight:500;color:var(--text);line-height:1;margin-bottom:6px}
.stat-lbl{font-size:12px;color:var(--text-light)}

/* ============ TESTIMONIALS ============ */
.testimonials{background:var(--dark);color:#fff}
.testimonials-container{display:grid;grid-template-columns:6fr 4fr;min-height:70vh}
.testimonial-image{position:relative;background:var(--bg-alt);overflow:hidden}
.testimonial-image svg{width:100%;height:100%;padding:40px;opacity:.3}
.testimonial-content{padding:80px 60px;display:flex;flex-direction:column;justify-content:center}
.testimonial-quote{font-family:var(--font-serif);font-size:120px;line-height:.8;color:var(--bronze);margin-bottom:20px}
.testimonial-text{font-family:var(--font-serif);font-size:clamp(18px,2.5vw,28px);line-height:1.5;margin-bottom:32px;font-style:italic}
.testimonial-meta{margin-bottom:40px}
.testimonial-name{font-size:14px;font-weight:500;display:block;margin-bottom:4px}
.testimonial-role{font-size:12px;color:rgba(255,255,255,.4)}
.testimonial-controls{display:flex;gap:16px;align-items:center;margin-top:auto}
.test-prev,.test-next{background:none;border:none;color:rgba(255,255,255,.4);font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:8px 0;transition:color .3s}
.test-prev:hover,.test-next:hover{color:var(--gold)}
.test-dots{display:flex;gap:6px}
.test-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2);cursor:pointer;transition:all .3s}
.test-dots span.active{background:var(--bronze);transform:scale(1.5)}

/* ============ BLOG ============ */
.blog{background:var(--bg);padding:120px 48px}
.blog-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;max-width:1400px;margin:0 auto}
.blog-card.featured{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:0;background:transparent;border:none}
.blog-card{background:#fff;border:1px solid var(--border);border-radius:2px;overflow:hidden;cursor:pointer;transition:all .4s var(--ease-out)}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.04)}
.blog-visual{height:200px;background:var(--bg-alt);display:flex;align-items:center;justify-content:center}
.blog-card.featured .blog-visual{height:400px}
.blog-meta{padding:20px}
.blog-cat{font-size:9px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--bronze);margin-bottom:6px}
.blog-card h3{font-family:var(--font-serif);font-size:16px;font-weight:500;margin-bottom:4px}
.blog-card.featured h3{font-size:28px}
.blog-excerpt{font-size:12px;color:var(--text-light);line-height:1.5;margin-top:4px}

/* ============ CONTACT ============ */
.contact{background:var(--bg-alt);padding:120px 48px}
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1400px;margin:0 auto}
.contact-visual{position:relative;min-height:500px;border:1px solid var(--border);border-radius:2px;overflow:hidden}
.contact-canvas{width:100%;height:100%;display:block}
.contact-form{padding:20px 0}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-field{margin-bottom:20px}
.form-field label{display:block;font-size:10px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--bronze);margin-bottom:6px}
.form-field input,.form-field select,.form-field textarea{width:100%;padding:14px 16px;font-family:var(--font-sans);font-size:14px;border:1px solid var(--border);background:transparent;outline:none;transition:all .3s;border-radius:0}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--bronze);background:#fff;transform:translateY(-2px)}
.form-field textarea{min-height:100px;resize:vertical}

/* ============ FOOTER ============ */
.footer{background:var(--dark);color:rgba(255,255,255,.5);padding:80px 48px 40px}
.footer-top{display:grid;grid-template-columns:1fr 2fr;gap:48px;max-width:1400px;margin:0 auto;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.06)}
.footer-brand{font-family:var(--font-serif);font-size:48px;font-weight:500;color:#fff;line-height:.9;letter-spacing:-.02em}
.footer-info{display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px}
.footer-col h4{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.footer-col p{font-size:13px;line-height:1.7;color:rgba(255,255,255,.4);margin-bottom:8px}
.footer-col a{display:block;font-size:13px;color:rgba(255,255,255,.4);margin-bottom:6px;transition:color .3s}
.footer-col a:hover{color:var(--gold)}
.footer-sub{display:flex;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-sub input{background:transparent;border:none;padding:10px 0;color:#fff;font-size:12px;outline:none;flex:1}
.footer-sub button{background:none;border:none;color:var(--gold);cursor:pointer;font-size:18px;padding:10px}
.footer-bottom{display:flex;gap:48px;max-width:1400px;margin:20px auto 0;font-size:11px;color:rgba(255,255,255,.2)}

/* Responsive */
@media(max-width:1024px){
  .testimonials-container{grid-template-columns:1fr}
  .testimonial-image{min-height:300px}
  .studio-layout{grid-template-columns:1fr}
  .contact-layout{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr 1fr}
  .blog-card.featured{grid-template-columns:1fr}
  .po-details{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .footer-info{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .hero{padding:120px 24px 60px}
  .projects,.process,.services,.studio,.stats,.blog,.contact{padding:80px 24px}
  .header{padding:20px 24px}
  .nav{gap:16px}
  .nav-link:not(.nav-cta):nth-child(n+4){display:none}
  .hero-title{font-size:42px}
  .hero-marquee span{font-size:40px}
  .projects-grid{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .stats-items{grid-template-columns:1fr 1fr}
  .blog-grid{grid-template-columns:1fr}
  .testimonial-content{padding:40px 24px}
  .po-content{inset:20px}
  .footer{padding:60px 24px 32px}
  .footer-info{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:8px}
  .cursor{display:none!important}
  body{cursor:auto}
}
@media(max-width:480px){
  .hero-title{font-size:32px}
  .section-title{font-size:36px}
  .form-row{grid-template-columns:1fr}
  .nav{display:none}
  .menu-btn{display:flex}
}