:root{--black:#000;--white:#fff;--off-white:#f0ede8;--grey:#888;--light-grey:#1a1a1a;--font-display:'Cormorant Garamond',serif;--font-body:'Montserrat',sans-serif}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--white);font-family:var(--font-body);font-weight:300;overflow-x:hidden}
.container{max-width:1200px;margin:0 auto;padding:0 40px}
section{padding:100px 0}
.section-tag{font-size:9px;letter-spacing:.4em;text-transform:uppercase;color:var(--grey);margin-bottom:60px;display:flex;align-items:center;gap:20px}
.section-tag::after{content:'';flex:1;height:1px;background:var(--light-grey)}
.btn{display:inline-block;padding:16px 32px;font-family:var(--font-body);font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;transition:all .3s ease;cursor:pointer;border:none}
.btn-white{background:var(--white);color:var(--black)}.btn-white:hover{background:var(--off-white)}
.btn-outline{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.4)}.btn-outline:hover{border-color:var(--white)}

/* BURGER */
.burger-btn{position:fixed;top:28px;right:28px;z-index:1000;background:none;border:none;cursor:pointer;width:36px;height:24px;display:flex;flex-direction:column;justify-content:space-between;padding:0}
.burger-btn span{display:block;width:100%;height:1px;background:var(--white);transition:all .4s ease;transform-origin:center}
.burger-btn.open span:nth-child(1){transform:translateY(11.5px) rotate(45deg)}
.burger-btn.open span:nth-child(2){opacity:0}
.burger-btn.open span:nth-child(3){transform:translateY(-11.5px) rotate(-45deg)}
.nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.97);z-index:999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s ease}
.nav-overlay.open{opacity:1;pointer-events:all}
.nav-links{list-style:none;text-align:center}
.nav-links li{margin:32px 0;overflow:hidden}
.nav-links a{font-family:var(--font-display);font-size:clamp(36px,8vw,72px);font-weight:300;color:var(--white);text-decoration:none;letter-spacing:.15em;text-transform:uppercase;display:inline-block;transform:translateY(100%);transition:transform .5s ease,color .3s ease}
.nav-overlay.open .nav-links a{transform:translateY(0)}
.nav-links li:nth-child(1) a{transition-delay:.05s}
.nav-links li:nth-child(2) a{transition-delay:.1s}
.nav-links li:nth-child(3) a{transition-delay:.15s}
.nav-links li:nth-child(4) a{transition-delay:.2s}
.nav-links a:hover{color:var(--grey)}

/* FOOTER */
footer{padding:60px 0;border-top:1px solid var(--light-grey)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:32px}
.footer-logo img{height:36px;width:auto;filter:brightness(10)}
.footer-socials{display:flex;gap:28px}
.footer-socials a{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);text-decoration:none;transition:color .3s ease}
.footer-socials a:hover{color:var(--white)}
.footer-copy{font-size:10px;color:var(--grey);letter-spacing:.1em}

/* MAILING */
.mailing-section{padding:80px 0;border-top:1px solid var(--light-grey);background:var(--light-grey)}
.mailing-inner{display:flex;align-items:center;justify-content:space-between;gap:60px}
.mailing-text h3{font-family:var(--font-display);font-size:clamp(28px,3vw,44px);font-weight:300;letter-spacing:-.01em;margin-bottom:8px}
.mailing-text p{font-size:11px;color:var(--grey);letter-spacing:.15em;text-transform:uppercase}
.mailing-form{display:flex;flex:1;max-width:500px}
.mailing-form input{flex:1;background:transparent;border:1px solid rgba(255,255,255,.2);border-right:none;color:var(--white);font-family:var(--font-body);font-size:12px;font-weight:300;letter-spacing:.1em;padding:16px 24px;outline:none}
.mailing-form input::placeholder{color:var(--grey)}
.mailing-form button{background:var(--white);color:var(--black);border:none;padding:16px 28px;font-family:var(--font-body);font-size:9px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;cursor:pointer;white-space:nowrap}

@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

@media(max-width:900px){
  .container{padding:0 24px}
  section{padding:70px 0}
  .mailing-inner{flex-direction:column;gap:32px}
  .mailing-form{max-width:100%;width:100%}
  .footer-inner{flex-direction:column;align-items:flex-start}
}