:root{
  --bg:#0a0a0a;
  --gold:#d4af6f;
  --text:#f5f5f5;
  --muted:rgba(245,245,245,.75);
  --muted2:rgba(245,245,245,.55);
  --stroke:rgba(255,255,255,.12);
  --stroke2:rgba(212,175,111,.35);
  --card:rgba(255,255,255,.04);
  --shadow:0 20px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05);
  --max:1200px;
  --r:20px;
}

*{box-sizing:border-box}
html{
  overflow-x:hidden;
  width:100%;
}
html,body{
  height:auto;
  min-height:100%;
}
body{
  margin:0;
  background:
    radial-gradient(1400px 900px at 55% -8%, rgba(212,175,111,.08), transparent 65%),
    radial-gradient(1000px 700px at 25% 0%, rgba(10,15,25,.5), transparent 60%),
    linear-gradient(180deg, #0a0a0a, #0d0d0d 50%, #0a0a0a);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  line-height:1.8;
  overflow-x:hidden;
  width:100%;
  position:relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
main{
  width:100%;
  position:relative;
}

a{color:inherit; text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
@media (max-width: 768px){
  .wrap{padding:0 20px}
  .section--split .wrap{padding:0 20px}
}
.serif{font-family:"Cormorant Garamond", serif; letter-spacing:.02em}
.kicker{
  color:rgba(212,175,111,.85);
  letter-spacing:.3em;
  text-transform:uppercase;
  font-size:11px;
  font-weight:500;
  margin-bottom:16px;
}
h2{
  margin:0 0 20px;
  font-size:clamp(32px, 4vw, 52px);
  line-height:1.15;
  font-weight:400;
  letter-spacing:-.01em;
}
p{margin:0 0 18px; color:var(--muted); line-height:1.85}

.noise{
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.15;
  mix-blend-mode: overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
}

/* HEADER */
.header{
  position:fixed; inset:0 0 auto 0;
  height:80px;
  z-index:60;
  display:flex; align-items:center;
  background: rgba(10,10,10,.4);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: all .3s ease;
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
}
.brand{
  display:flex; align-items:center; gap:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size:12px;
  font-weight:500;
  color:rgba(245,245,245,.92);
  transition: color .2s ease;
}
.brand:hover{color:rgba(245,245,245,1)}
.brand__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 12px rgba(212,175,111,.5);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%, 100%{opacity:1; transform:scale(1)}
  50%{opacity:.7; transform:scale(1.1)}
}
.nav{display:flex; gap:28px}
.nav a{
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:400;
  color:rgba(245,245,245,.7);
  padding:8px 0;
  position:relative;
  transition: color .25s ease;
}
.nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:4px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(212,175,111,.6), transparent);
  transform:scaleX(0);
  transition:transform .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav a:hover{color:rgba(245,245,245,.95)}
.nav a:hover::after{transform:scaleX(1)}
@media (max-width: 820px){ .nav{display:none} }

/* hamburger */
.navbtn{
  width:42px; height:42px;
  display:none;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.3);
  backdrop-filter: blur(12px);
  transition: all .25s ease;
}
.navbtn:hover{
  border-color:rgba(255,255,255,.15);
  background:rgba(0,0,0,.4);
}
.navbtn span{
  display:block;
  width:16px; height:1.5px;
  margin:0 auto;
  background:rgba(245,245,245,.9);
  transition:.25s ease;
  border-radius:1px;
}
.navbtn span+span{margin-top:5px}
@media (max-width: 820px){ .navbtn{display:inline-flex; align-items:center; justify-content:center} }

/* drawer */
.drawer{
  position:fixed; inset:0;
  background:rgba(0,0,0,.65);
  opacity:0;
  pointer-events:none;
  transition: opacity .3s ease;
  backdrop-filter: blur(4px);
}
.drawer.is-open{opacity:1; pointer-events:auto}
.drawer__panel{
  position:absolute; top:80px; right:20px; left:20px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(10,10,10,.85);
  backdrop-filter: blur(20px) saturate(180%);
  padding:20px;
  display:grid;
  gap:8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05);
}
.drawer__link{
  padding:16px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  color:rgba(245,245,245,.85);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:11px;
  font-weight:400;
  transition: all .2s ease;
}
.drawer__link:hover{
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
}
.drawer__cta{
  margin-top:8px;
  padding:16px 14px;
  border-radius:999px;
  border:1px solid rgba(212,175,111,.5);
  background:rgba(212,175,111,.12);
  text-align:center;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:11px;
  font-weight:500;
  color:rgba(245,245,245,.95);
  transition: all .2s ease;
}
.drawer__cta:hover{
  border-color:rgba(212,175,111,.65);
  background:rgba(212,175,111,.18);
}

/* HERO */
.hero{
  min-height:100vh;
  padding-top:80px;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:-10%;
  background-size:cover;
  background-position:center;
  transform:scale(1.08);
  will-change: transform;
  filter:saturate(.88) contrast(1.08) brightness(.95);
}
@media (max-width: 768px){
  .hero__bg{inset:0; transform:scale(1.05)}
}
.hero__shade{
  position:absolute; inset:0;
  background:
    radial-gradient(1000px 600px at 50% 20%, rgba(212,175,111,.08), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.6) 40%, rgba(0,0,0,.85));
}
.hero__content{
  position:relative;
  text-align:center;
  padding:80px 20px 50px;
  z-index:2;
}
.hero__logo{
  width:min(440px, 80vw);
  opacity:0;
  transform:translateY(16px);
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.7));
}
.hero__tagline{
  margin:28px 0 16px;
  font-size:clamp(28px, 3.5vw, 48px);
  letter-spacing:.04em;
  opacity:0;
  transform:translateY(14px);
  font-weight:400;
}
.hero__lead{
  margin:0 auto 32px;
  max-width:820px;
  color:rgba(245,245,245,.75);
  font-size:15px;
  line-height:1.9;
  opacity:0;
  transform:translateY(14px);
  letter-spacing:.02em;
}
.hero__cta{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  opacity:0;
  transform:translateY(14px);
}

/* Buttons */
.btn{
  height:50px;
  padding:0 24px;
  border-radius:999px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  border:1px solid rgba(212,175,111,.4);
  background:rgba(10,10,10,.5);
  color:rgba(245,245,245,.92);
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  display:inline-flex; align-items:center; justify-content:center;
  transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
}
.btn:hover{
  transform:translateY(-2px);
  border-color:rgba(212,175,111,.65);
  background:rgba(10,10,10,.7);
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.btn--primary{
  background:rgba(212,175,111,.15);
  border-color:rgba(212,175,111,.5);
}
.btn--primary:hover{
  background:rgba(212,175,111,.22);
  border-color:rgba(212,175,111,.7);
}

.scrollhint{
  position:absolute; bottom:24px; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(245,245,245,.5);
  font-weight:400;
  z-index:2;
}
@media (max-width: 768px){
  .scrollhint{bottom:20px}
  .hero__cta{margin-bottom:60px}
}
.mouse{
  width:20px; height:32px;
  border-radius:16px;
  border:1px solid rgba(212,175,111,.4);
  position:relative;
}
.mouse::after{
  content:"";
  position:absolute; left:50%; top:8px;
  width:2.5px; height:6px; border-radius:2px;
  transform:translateX(-50%);
  background:rgba(212,175,111,.7);
  animation: wheel 1.6s infinite;
}
@keyframes wheel{
  0%{opacity:0; transform:translate(-50%,-2px)}
  30%{opacity:1}
  100%{opacity:0; transform:translate(-50%,12px)}
}

/* Sections */
.section{padding:140px 0}
@media (max-width: 768px){ .section{padding:100px 0} }

/* Split parallax sections */
.section--split{
  position:relative;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.split__bg{
  position:absolute; inset:-12%;
  background-size:cover;
  background-position:center;
  transform:translateY(0) scale(1.14);
  will-change: transform;
  filter:saturate(.88) contrast(1.08) brightness(.92);
}
@media (max-width: 768px){
  .split__bg{inset:0; transform:translateY(0) scale(1.05)}
}
.split__shade{
  position:absolute; inset:0;
  background:
    radial-gradient(1000px 600px at 30% 35%, rgba(212,175,111,.06), transparent 70%),
    linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,.45) 55%, rgba(0,0,0,.88));
}
.split{
  position:relative;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:40px;
  align-items:center;
  padding:140px 0;
}
@media (max-width: 900px){
  .split{grid-template-columns:1fr; padding:100px 0; gap:32px}
  .split .reveal{
    padding-left:0;
    margin-left:0;
  }
}
.split--access{grid-template-columns: 1fr}

/* Menu section hidden */
#menu{display:none}

.card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r);
  padding:28px;
  box-shadow:var(--shadow);
  backdrop-filter: blur(20px) saturate(180%);
}
.meta{display:grid; gap:12px; color:rgba(245,245,245,.8); font-size:14px; line-height:1.7}
.meta div{
  display:flex; justify-content:space-between; gap:16px;
  border-bottom:1px solid rgba(255,255,255,.1);
  padding:12px 0;
}
.meta div:last-child{border-bottom:none}
.meta span:first-child{color:rgba(245,245,245,.65); font-weight:400}
.meta span:last-child{color:rgba(245,245,245,.95)}

/* Menu */
.menu{
  margin-top:32px;
  display:grid;
  grid-template-columns: 7fr 5fr;
  gap:24px;
}
@media (max-width: 900px){ .menu{grid-template-columns:1fr; gap:20px} }

.menu__photo{
  min-height:420px;
  border-radius:var(--r);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  position:relative;
  box-shadow:var(--shadow);
  background:rgba(255,255,255,.02);
}
@media (max-width: 900px){ .menu__photo{min-height:340px} }

.menu__img{
  position:absolute; inset:-14%;
  background-size:cover;
  background-position:center;
  transform:scale(1.12);
  will-change: transform;
  filter:saturate(.88) contrast(1.08) brightness(.94);
}
@media (max-width: 768px){
  .menu__img{inset:0; transform:scale(1.05)}
}
.menu__glow{
  position:absolute; inset:0;
  background:
    radial-gradient(750px 400px at 30% 20%, rgba(212,175,111,.12), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.6));
  pointer-events:none;
}

.menu__panel{
  border-radius:var(--r);
  border:1px solid rgba(255,255,255,.1);
  background:rgba(10,10,10,.6);
  padding:24px;
  box-shadow:var(--shadow);
  backdrop-filter: blur(20px) saturate(180%);
}

.tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px}
.tab{
  cursor:pointer;
  padding:10px 16px;
  border-radius:999px;
  font-size:10px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  border:1px solid rgba(212,175,111,.3);
  color:rgba(245,245,245,.75);
  background:rgba(10,10,10,.4);
  transition:all .25s ease;
}
.tab:hover{
  border-color:rgba(212,175,111,.45);
  color:rgba(245,245,245,.9);
}
.tab.active{
  border-color:rgba(212,175,111,.65);
  background:rgba(212,175,111,.15);
  color:rgba(245,245,245,.98);
}

.menu__list{
  margin:0; padding:0; list-style:none;
  display:grid; gap:12px;
  color:rgba(245,245,245,.85);
  font-size:14px;
  line-height:1.7;
}
.menu__list li{
  display:flex; justify-content:space-between; gap:16px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.menu__list li:last-child{border-bottom:none}
.price{color:rgba(212,175,111,.9); font-weight:500}
.menu__note{margin-top:16px; color:var(--muted2); font-size:12px; line-height:1.6}

/* Map + Footer */
.map{
  width:100%;
  height:400px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.map--monochrome{
  filter: grayscale(100%) contrast(1.1) brightness(0.9);
  transition: filter .3s ease;
}
.map--monochrome:hover{
  filter: grayscale(80%) contrast(1.05) brightness(0.95);
}
.footer{
  padding:40px 0 60px;
  border-top:1px solid rgba(255,255,255,.1);
  color:rgba(245,245,245,.5);
  font-size:11px;
  letter-spacing:.12em;
  text-align:center;
}

/* Reveal initial */
.reveal{opacity:0; transform:translateY(18px)}

#concept p {
  letter-spacing: .04em;
  line-height: 1.9;
}

#concept em {
  font-style: normal;
  color: rgba(215,181,111,.95);
  letter-spacing: .12em;
}

#concept h2 {
  transform: translateX(-2px);
}