/* ===== RESET ===== */
* { margin:0; padding:0; box-sizing:border-box; }

/* ===== BASE ===== */
html,body{
  font-family:'Raleway',sans-serif;
  background:#f7f4ee;
  color:#2a2a2a;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}

/* ===== LENIS ===== */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
.lenis.lenis-stopped{overflow:hidden}

/* ===== HEADER ===== */
.header{
  position:absolute;
  top:0;
  width:100%;
  padding:24px 60px;
  display:flex;
  justify-content:space-between;
  z-index:10
}

.logo{
  font-size:13px;
  letter-spacing:.12em
}

.nav{
  display:flex;
  gap:28px
}

.nav a{
  text-decoration:none;
  color:inherit;
  font-size:13px;
  opacity:.7
}

.socials{
  display:flex;
  gap:14px
}

/* ===== PAGE SYSTEM ===== */
.page{
  min-height:100vh;
  display:flex
}

/* ===== HERO ===== */
.hero{
  display:flex
}

.hero-left{
  flex:1;
  background:#e9e5df;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:100px
}

.hero-right{
  flex:1;
  position:relative;
  overflow:hidden
}

.hero-right img{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:75% center
}

.hero-left h1{
  font-size:72px;
  font-weight:200;
  letter-spacing:.04em
}

.hero-left p{
  margin-top:20px;
  font-size:18px;
  letter-spacing:.05em;
  font-weight:400;
  opacity:.85
}

/* ===== SPLIT ===== */
.split{
  display:flex
}

.split.reverse{
  flex-direction:row-reverse
}

.split-image{
  flex:1;
  min-height:100vh;
  position:relative
}

.split-image img{
  width:100%;
  height:100%;
  object-fit:cover
}

.split-text{
  flex:1;
  background:#f7f4ee;
  position:relative
}

/* ===== TEXT ===== */
.inner{
  position:relative;
  top:auto;
  left:auto;
  width:auto;
  padding:40px 28px
}

.inner h2{
  font-size:22px;
  letter-spacing:.18em;
  font-weight:300;
  margin-top:-120px;
  margin-bottom:200px
}

.inner ul{
  list-style:none
}

.inner li{
  display:flex;
  justify-content:space-between;
  margin-bottom:24px;
  font-size:16px
}

.inner a{
  font-size:13px;
  opacity:.5;
  transition:.3s;
  text-decoration:none;
  color:inherit
}

.inner a:hover{
  opacity:1;
  font-style:italic;
  letter-spacing:.05em
}

.inner em{
  font-style:italic;
  opacity:.6;
  margin-right:6px
}

/* ===== POPUP ===== */
.popup{
  position:fixed;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
  z-index:100
}

.popup.active{
  opacity:1;
  pointer-events:all
}

.popup::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.25);
  opacity:0;
  transition:opacity .4s ease
}

.popup.active::before{
  opacity:1
}

.popup-content{
  position:relative;
  width:80%;
  padding:30px;
  background:rgba(255,255,255,.2);
  backdrop-filter:blur(20px);
  border-radius:12px;
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  transform:translateY(20px) scale(.96);
  opacity:0;
  transition:all .4s ease;
  box-shadow:0 20px 60px rgba(0,0,0,.2)
}

.popup.active .popup-content{
  transform:translateY(0) scale(1);
  opacity:1
}

.popup-text{
  font-size:15px;
  line-height:1.6
}

.popup-close{
  position:absolute;
  top:10px;
  right:15px;
  cursor:pointer;
  font-size:18px
}

/* ===== INLINE EXPAND ===== */
.inline-expand{
  display:flex;
  flex-direction:column;
  gap:0;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(-10px);
  transition:all .4s ease
}

.inline-expand.active{
  max-height:800px;
  opacity:1;
  transform:translateY(0);
  margin-bottom:24px
}

.expand-content{
  font-size:14px;
  line-height:1.6
}

.expand-action{
  margin-top:24px;
  display:flex;
  justify-content:flex-end
}

/* ===== КНОПКА ===== */
.contact-btn{
  display:inline-block;
  padding:12px 26px;
  font-size:14px;
  letter-spacing:.06em;
  font-weight:300;
  color:#2a2a2a;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(0,0,0,.12);
  border-radius:30px;
  box-shadow:0 4px 10px rgba(0,0,0,.04);
  backdrop-filter:blur(6px);
  text-decoration:none;
  transition:all .25s ease
}

.contact-btn:hover{
  background:rgba(255,255,255,.90);
  border-color:rgba(0,0,0,.18);
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  transform:translateY(-1px)
}

.contact-btn:active{
  background:rgba(255,255,255,.82);
  border-color:rgba(0,0,0,.18);
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  transform:translateY(0)
}

/* ===== ABOUT IMG ===== */
.about-img{
  padding:0;
  background:#d9d2c7;
  display:flex;
  justify-content:center
}

.about-img img{
  width:100%;
  max-width:900px;
  height:auto;
  display:block
}

/* ===== MOBILE ===== */
@media (max-width:900px){

  .nav,
  .socials{
    display:none
  }

  .page{
    flex-direction:column
  }

  .hero{
    flex-direction:column;
    height:100vh
  }

  .hero-left,
  .hero-right{
    flex:none
  }

  .hero-right{
    height:70vh;
    order:-1
  }

  .hero-left{
    height:30vh;
    padding:30px 20px;
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center
  }

  .hero-right img{
    object-fit:cover;
    object-position:center 77%
  }

  .hero-left h1{
    font-size:32px
  }

  .hero-left p{
    font-size:13px
  }

  .split,
  .split.reverse{
    flex-direction:column
  }

  .split-image{
    order:-1;
    height:45vh;
    min-height:250px;
    overflow:hidden
  }

  .split-image img{
    width:100%;
    height:100%;
    object-fit:cover
  }

  .inner{
    padding:40px 20px
  }

  .inner h2{
    margin-top:0;
    margin-bottom:40px
  }

  .about-img img{
    max-width:100%
  }

  /* ===== MOBILE FOOTER ===== */
  .social-footer{
    gap:10px;
    padding:40px 10px;
  }

  .foot-btn{
    padding:12px 18px;
    font-size:13px;
  }

}

/* ===== FIX DIGIT ALIGN ===== */
.inner li span{
  display:flex;
  align-items:flex-start;
  gap:8px
}

.inner em{
  min-width:32px;
  flex-shrink:0
}

.expand-content p{
  margin:0 0 14px
}

.expand-content p:last-child{
  margin-bottom:0
}

/* ===== FADE-UP on scroll ===== */
.fade-up{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s ease, transform .8s ease;
}

.fade-up.in-view{
  opacity:1;
  transform:translateY(0);
}

/* задержка для картинок */
.split-image.fade-up{
  transition-delay:.25s;
}

/* ===== FOOTER SOCIAL BUTTONS ===== */
.social-footer{
  display:flex;
  justify-content:center;
  gap:32px;
  padding:60px 20px;
  background:#e9e5df;
}

.foot-btn{
  display:inline-block;
  padding:14px 34px;
  background:#f7f4ee;
  border:1px solid rgba(0,0,0,.12);
  border-radius:40px;
  font-size:15px;
  letter-spacing:.05em;
  color:#2a2a2a;
  text-decoration:none;
  transition:all .25s ease;
  box-shadow:0 4px 10px rgba(0,0,0,.04);
}

.foot-btn:hover{
  background:#ffffff;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  transform:translateY(-2px);
}

.foot-btn:active{
  transform:translateY(0);
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}

/* ===== MOBILE FOOTER ===== */
@media (max-width:900px){

  .social-footer{
    gap:8px;
    padding:36px 8px;
    overflow:hidden;
  }

  .foot-btn{
    padding:11px 15px;
    font-size:12px;
    letter-spacing:.03em;
    white-space:nowrap;
  }

}