/* ═══════════════════════════════════════════
   MarbeOne — Design System
   ═══════════════════════════════════════════ */

:root {
  --black:#0a0a0a; --dark:#1a1a1a; --charcoal:#2a2a2a;
  --gray:#666; --gray-light:#999; --silver:#ccc;
  --warm:#f5f3ef; --off-white:#faf9f7; --white:#fff;
  --accent:#8B7355; --accent-light:#a89275;
  --fd:'Cormorant Garamond',Georgia,serif;
  --fb:'Jost','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(0.16,1,0.3,1);
}

/* ── Reset ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--fb);font-weight:300;color:var(--dark);background:var(--white);line-height:1.7;letter-spacing:.01em;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* ── Typography ── */
h1,h2,h3{font-family:var(--fd);font-weight:400;line-height:1.2;letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,5vw,4.5rem);font-weight:300}
h2{font-size:clamp(1.9rem,3.2vw,3rem)}
h3{font-size:clamp(1.3rem,1.8vw,1.7rem);font-weight:500}
p{font-size:clamp(1rem,1.15vw,1.12rem);color:var(--gray);max-width:620px;line-height:1.75}

.label{font-family:var(--fb);font-weight:400;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);display:inline-block;margin-bottom:1.2rem}

/* ── Layout ── */
.container{width:100%;max-width:1280px;margin:0 auto;padding:0 clamp(24px,4vw,60px)}
.container--narrow{max-width:800px}
.sec{padding:clamp(80px,10vw,160px) 0}
.sec--dark{background:var(--black);color:var(--white)}
.sec--dark p{color:var(--silver)}
.sec--cream{background:var(--off-white)}

/* ── Header ── */
.hd{position:fixed;top:0;left:0;right:0;z-index:1000;height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,4vw,60px);background:rgba(10,10,10,0);transition:background .5s ease,backdrop-filter .5s ease}
.hd.scrolled{background:rgba(10,10,10,.92);backdrop-filter:blur(20px)}
.hd.solid{background:rgba(10,10,10,.95);backdrop-filter:blur(20px)}
.hd__right{display:flex;align-items:center;gap:2rem}

.logo{font-family:var(--fd);font-size:1.4rem;font-weight:600;color:var(--white);letter-spacing:.08em}

.nv{display:flex;align-items:center;gap:2.5rem;list-style:none}
.nv a{font-family:var(--fb);font-size:.78rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7);padding:4px 0;position:relative;transition:color .3s ease}
.nv a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--white);transition:width .4s var(--ease)}
.nv a:hover,.nv a.act{color:var(--white)}
.nv a:hover::after,.nv a.act::after{width:100%}

/* Language switcher */
.lang-switch{position:relative}
.lang-switch__btn{background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;display:flex;align-items:center;gap:6px;padding:4px 0;transition:color .3s ease}
.lang-switch__btn:hover{color:var(--white)}
.lang-switch__current{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;font-family:var(--fb)}
.lang-switch__dropdown{position:absolute;top:calc(100% + 12px);right:0;background:rgba(10,10,10,.95);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);list-style:none;min-width:140px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .3s var(--ease)}
.lang-switch:hover .lang-switch__dropdown,.lang-switch__dropdown:hover{opacity:1;visibility:visible;transform:translateY(0)}
.lang-switch__dropdown a{display:block;padding:10px 18px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);transition:all .3s ease}
.lang-switch__dropdown a:hover,.lang-switch__dropdown a.active{color:var(--white);background:rgba(255,255,255,.05)}

/* Mobile toggle */
.mt{display:none;background:none;border:none;cursor:pointer;width:28px;height:18px;position:relative;z-index:1001}
.mt span{display:block;width:100%;height:1px;background:var(--white);position:absolute;left:0;transition:all .3s ease}
.mt span:nth-child(1){top:0}.mt span:nth-child(2){top:50%}.mt span:nth-child(3){top:100%}

/* Mobile nav */
.mobile-nav{position:fixed;inset:0;z-index:999;background:rgba(10,10,10,.97);backdrop-filter:blur(30px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;opacity:0;visibility:hidden;transition:all .4s var(--ease)}
.mobile-nav.open{opacity:1;visibility:visible}
.mobile-nav a{font-family:var(--fd);font-size:clamp(1.8rem,4vw,2.5rem);color:rgba(255,255,255,.7);transition:color .3s ease}
.mobile-nav a:hover,.mobile-nav a.act{color:var(--white)}
.mobile-nav__lang{display:flex;gap:1.5rem;margin-top:2rem}
.mobile-nav__lang a{font-family:var(--fb);font-size:.75rem;letter-spacing:.15em;text-transform:uppercase}

/* ── Hero ── */
.hero{position:relative;height:100vh;min-height:600px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--black)}
.hero--sub{height:65vh;min-height:450px}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img,.hero__bg .ph{width:100%;height:100%;object-fit:cover}
.hero__video{width:100%;height:100%;object-fit:cover}
.hero__ov{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.35) 40%,rgba(10,10,10,.7) 100%)}
.hero__ct{position:relative;z-index:2;text-align:center;color:var(--white);max-width:850px;padding:0 clamp(24px,4vw,60px)}
.hero__ct h1{margin-bottom:1.2rem;opacity:0;transform:translateY(35px);animation:fu 1s var(--ease) .3s forwards}
.hero__ct p{color:rgba(255,255,255,.7);font-size:clamp(.95rem,1.15vw,1.1rem);max-width:560px;margin:0 auto;opacity:0;transform:translateY(25px);animation:fu 1s var(--ease) .6s forwards}
.hero__ct .label{opacity:0;transform:translateY(20px);animation:fu .8s var(--ease) .15s forwards}
.hero__sc{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:fu 1s var(--ease) 1s forwards}
.hero__sc span{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.scl{width:1px;height:45px;background:rgba(255,255,255,.15);position:relative;overflow:hidden}
.scl::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:rgba(255,255,255,.5);animation:sa 2.2s ease-in-out infinite}

/* ── Placeholders ── */
.ph{background:linear-gradient(145deg,#2a2622,#1a1816,#302c28);width:100%;height:100%;min-height:300px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.15);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase}
.ph--w{background:linear-gradient(145deg,#3a3530,#252220,#3d3835)}
.ph--b{background:linear-gradient(145deg,#40382e,#28221c,#38302a)}
.ph--d{background:linear-gradient(145deg,#2e2a26,#161412,#282420)}

/* ── Intro Grid ── */
.ig{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:start}
.ig h2{margin-bottom:1.2rem}
.ig p+p{margin-top:1rem}

/* ── Split Section ── */
.sp{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:550px}
.sp--r{direction:rtl}.sp--r>*{direction:ltr}
.sp__i{position:relative;overflow:hidden;min-height:400px}
.sp__i .ph{position:absolute;inset:0}
.sp__img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.sp__b{display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,6vw,90px)}
.sp__b h2{margin-bottom:1.2rem}
.sp__b p+p{margin-top:1rem}

.divider{width:55px;height:1px;background:var(--accent);margin:1.5rem 0}
.divider--c{margin-left:auto;margin-right:auto}

/* ── CTA Link ── */
.cta{display:inline-flex;align-items:center;gap:10px;font-family:var(--fb);font-size:.82rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;margin-top:2rem;cursor:pointer;transition:gap .3s var(--ease)}
.cta:hover{gap:16px}
.cta::after{content:'\2192';font-size:1rem}
.cta--l{color:var(--white)}

.statement{text-align:center;max-width:850px;margin:0 auto}
.statement h2{font-weight:300;font-style:italic;line-height:1.45}

/* ── Portfolio Grid ── */
.pg{display:grid;grid-template-columns:repeat(2,1fr);gap:2px}
.pc{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--charcoal);cursor:pointer;display:block}
.pc__cover{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .8s var(--ease)}
.pc .ph{transition:transform .8s var(--ease)}
.pc:hover .pc__cover,.pc:hover .ph{transform:scale(1.05)}
.pc__o{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 40%,rgba(10,10,10,.7) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(20px,3vw,40px);transition:background .5s ease}
.pc:hover .pc__o{background:linear-gradient(180deg,transparent 20%,rgba(10,10,10,.8) 100%)}
.pc__t{font-family:var(--fd);font-size:clamp(1.3rem,2vw,1.9rem);font-weight:400;color:var(--white);margin-bottom:.2rem}
.pc__m{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.pc__s{display:inline-block;padding:3px 10px;border:1px solid rgba(255,255,255,.25);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-top:.7rem;width:fit-content}
.pc.hidden{display:none}

/* ── Specs Grid ── */
.sg{display:grid;grid-template-columns:repeat(2,1fr);gap:2px}
.sc{position:relative;overflow:hidden;aspect-ratio:3/2}
.sc .ph{transition:transform .8s var(--ease)}
.sc:hover .ph{transform:scale(1.03)}
.sc__b{position:absolute;inset:0;z-index:1;background:rgba(10,10,10,.45);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(24px,3vw,50px);transition:background .5s ease}
.sc:hover .sc__b{background:rgba(10,10,10,.6)}
.sc__t{font-family:var(--fd);font-size:clamp(1.4rem,1.8vw,1.9rem);color:var(--white);margin-bottom:.6rem}
.sc__x{font-size:.88rem;color:rgba(255,255,255,.65);max-width:380px;line-height:1.6}

/* ── Filters ── */
.fl{display:flex;justify-content:center;gap:2rem;margin-bottom:clamp(30px,4vw,50px)}
.ftab{background:none;border:none;font-family:var(--fb);font-size:.78rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--gray-light);cursor:pointer;padding:6px 0;position:relative;transition:color .3s ease}
.ftab::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--dark);transition:width .4s var(--ease)}
.ftab.act,.ftab:hover{color:var(--dark)}.ftab.act::after{width:100%}

/* ── Values Grid ── */
.vg{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,4vw,60px);margin-top:clamp(40px,5vw,80px)}
.vi h3{margin-bottom:.8rem}.vi p{font-size:.94rem}

/* ── Image Band ── */
.ib{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.ib>*{aspect-ratio:3/4;min-height:350px;overflow:hidden}
.ib img{width:100%;height:100%;object-fit:cover}
.ib .ph{aspect-ratio:3/4;min-height:350px}

/* ── Contact ── */
.cg{display:grid;grid-template-columns:1fr 1fr;gap:clamp(60px,8vw,120px)}
.ci{margin-bottom:2rem}
.ci h4{font-family:var(--fb);font-weight:500;font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.ci p{font-size:.98rem;line-height:1.8}
.ci a:hover{color:var(--accent);transition:color .3s ease}
.cf{display:flex;flex-direction:column;gap:1.5rem}
.cf .rw{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.fg label{display:block;font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gray);margin-bottom:.5rem}
.fg input,.fg textarea,.fg select{width:100%;padding:12px 0;border:none;border-bottom:1px solid var(--silver);background:transparent;font-family:var(--fb);font-size:.98rem;font-weight:300;color:var(--dark);outline:none;transition:border-color .3s ease}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-bottom-color:var(--accent)}
.fg textarea{resize:vertical;min-height:100px}
.fg select{cursor:pointer}
.btn{align-self:flex-start;padding:15px 44px;background:var(--black);color:var(--white);border:1px solid var(--black);font-family:var(--fb);font-size:.82rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:all .4s ease;margin-top:.5rem}
.btn:hover{background:transparent;color:var(--black)}

/* ── Project Detail ── */
.project-details{margin-top:2rem;display:flex;flex-direction:column;gap:1rem}
.project-detail{display:flex;justify-content:space-between;padding-bottom:.8rem;border-bottom:1px solid rgba(0,0,0,.08)}
.project-detail__label{font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.project-detail__value{font-size:.98rem;color:var(--dark)}
.project-video{width:100%;max-width:960px;margin:0 auto;display:block;border-radius:2px}
.video-embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}
.video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%}
.project-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,2vw,24px)}
.project-gallery__item img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ── Footer ── */
.ftwrap{background:var(--black);color:var(--white);padding:clamp(60px,8vw,100px) 0}
.ftgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(30px,4vw,60px)}
.ftbrand p{font-size:.88rem;color:var(--gray);max-width:280px;line-height:1.7;margin-top:1.2rem}
.ftcol h4{font-family:var(--fb);font-weight:500;font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:1rem}
.ftcol ul{list-style:none}
.ftcol ul li{margin-bottom:.6rem;font-size:.88rem;color:var(--gray)}
.ftcol ul li a{font-size:.88rem;color:var(--gray);transition:color .3s ease}
.ftcol ul li a:hover{color:var(--white)}
.ftbot{margin-top:clamp(40px,5vw,70px);padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--gray)}

/* ── Animations ── */
@keyframes fu{to{opacity:1;transform:translateY(0)}}
@keyframes sa{0%{top:-100%}50%{top:100%}100%{top:100%}}
.rv{opacity:0;transform:translateY(35px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.vis{opacity:1;transform:translateY(0)}
.rv-d1{transition-delay:.15s}.rv-d2{transition-delay:.25s}

/* ── Responsive ── */
@media(max-width:1024px){
  .ig,.sp,.cg{grid-template-columns:1fr}
  .sp{min-height:auto}.sp--r{direction:ltr}.sp__i{min-height:50vw}
  .pg,.sg{grid-template-columns:1fr}
  .vg{grid-template-columns:repeat(2,1fr)!important}
  .ftgrid{grid-template-columns:1fr 1fr;gap:40px}
  .hd__right .nv{display:none}
}
@media(max-width:768px){
  .hd__right>nav{display:none}
  .mt{display:block}
  .hd{height:65px}
  .hero{min-height:500px}.hero--sub{height:50vh;min-height:380px}
  .sp__b{padding:40px 24px}
  .ib{grid-template-columns:1fr}
  .cf .rw{grid-template-columns:1fr}
  .ftgrid{grid-template-columns:1fr}
  .ftbot{flex-direction:column;gap:.8rem;text-align:center}
  .vg{grid-template-columns:1fr!important}
  .project-gallery{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════
   Fullscreen Popup Menu (Variant B)
   ═══════════════════════════════════════════ */

/* Burger always visible in popup mode */
.menu-popup .mt--always {
  display: block;
}
.menu-popup .mt--always span {
  transition: all .4s var(--ease);
}
.menu-popup .mt--always.open span:nth-child(1) {
  top: 50%;
  transform: rotate(45deg);
}
.menu-popup .mt--always.open span:nth-child(2) {
  opacity: 0;
}
.menu-popup .mt--always.open span:nth-child(3) {
  top: 50%;
  transform: rotate(-45deg);
}

/* Fullscreen overlay */
.fm {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.fm.open {
  opacity: 1;
  visibility: visible;
}

.fm__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 120px 40px 60px;
}

.fm__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2rem);
  flex: 1;
  justify-content: center;
}

.fm__link {
  font-family: var(--fd);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 300;
  color: rgba(255, 255, 255, .4);
  letter-spacing: .02em;
  line-height: 1.2;
  position: relative;
  transition: color .4s var(--ease), transform .4s var(--ease);
}
.fm__link:hover,
.fm__link.act {
  color: var(--white);
  transform: translateX(8px);
}
.fm__link::before {
  content: '';
  position: absolute;
  left: -30px;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--accent);
  transform: translateY(-50%);
  transition: width .4s var(--ease);
}
.fm__link:hover::before,
.fm__link.act::before {
  width: 18px;
}

/* Staggered animation */
.fm.open .fm__link {
  opacity: 0;
  transform: translateY(30px);
  animation: fmIn .6s var(--ease) forwards;
}
.fm.open .fm__link:nth-child(1) { animation-delay: .1s; }
.fm.open .fm__link:nth-child(2) { animation-delay: .18s; }
.fm.open .fm__link:nth-child(3) { animation-delay: .26s; }
.fm.open .fm__link:nth-child(4) { animation-delay: .34s; }

@keyframes fmIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Footer area */
.fm__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  max-width: 600px;
  padding-top: 3rem;
}

.fm__contact {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.fm__contact span {
  font-family: var(--fb);
  font-size: .78rem;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .35);
}

.fm__lang {
  display: flex;
  gap: 1.2rem;
}
.fm__lang a {
  font-family: var(--fb);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
  transition: color .3s ease;
}
.fm__lang a:hover,
.fm__lang a.active {
  color: var(--white);
}

/* Hide inline nav on popup mode */
.menu-popup .hd__right > nav {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .fm__link {
    font-size: clamp(1.8rem, 8vw, 2.8rem);
  }
  .fm__footer {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  .fm__contact {
    align-items: center;
  }
}