:root{
  --green:#07150d;
  --green2:#102719;
  --green3:#172f1f;
  --gold:#b58a42;
  --gold2:#d5b56e;
  --cream:#efe2bf;
  --muted:#c9b98c;
  --dark:#030604;
  --border:rgba(213,181,110,.48);
  --display:'Cinzel',serif;
  --serif:'Cormorant Garamond',serif;
  --type:'Special Elite',serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--dark);
  color:var(--cream);
  font-family:var(--serif);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* Exact mockup hero */
.mockup-hero{
  position:relative;
  width:100%;
  min-height:100vh;
  background:#050806;
  overflow:hidden;
}
.mockup-image{
  width:100%;
  height:auto;
  min-height:100vh;
  object-fit:cover;
  object-position:center top;
}
.hotspot{
  position:absolute;
  z-index:4;
  font-size:0;
  color:transparent;
  background:rgba(255,255,255,0);
}
.hotspot:hover{
  outline:1px solid rgba(213,181,110,.7);
  background:rgba(213,181,110,.08);
}
.nav-hotspots{
  top:3.6%;
  left:32%;
  width:42%;
  height:4.4%;
  display:block;
}
.nav-hotspots a{
  position:absolute;
  top:0;
  height:100%;
  font-size:0;
}
.nav-home{left:0;width:13%}
.nav-services{left:14%;width:18%}
.nav-shop{left:33%;width:18%}
.nav-gallery{left:52%;width:16%}
.nav-about{left:69%;width:14%}
.nav-contact{left:84%;width:16%}

.book-top{
  top:3.6%;
  right:5.1%;
  width:15.8%;
  height:5.4%;
}
.book-chair{
  left:6.1%;
  top:62.2%;
  width:14.6%;
  height:5.1%;
}
.services-button{
  left:21.8%;
  top:62.2%;
  width:12.2%;
  height:5.1%;
}
.directions-button{
  right:5.8%;
  bottom:3.1%;
  width:17.2%;
  height:4.3%;
}

/* Sections below */
.section{
  padding:96px 6vw;
  background:
    radial-gradient(circle at 10% 0,rgba(181,138,66,.12),transparent 35%),
    linear-gradient(180deg,#07150d,#030604);
  border-top:1px solid rgba(213,181,110,.24);
}
.section-title{
  text-align:center;
  max-width:860px;
  margin:0 auto 46px;
}
.section-title p,.overline{
  margin:0 0 12px;
  color:var(--gold2);
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.22em;
}
.section-title h1,.content-split h1{
  margin:0;
  font-family:var(--type);
  text-transform:uppercase;
  color:#c9b98c;
  font-size:clamp(42px,6vw,82px);
  line-height:.95;
  text-shadow:0 10px 24px rgba(0,0,0,.55);
}
.service-grid{
  width:min(1160px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(12,31,19,.96),rgba(6,16,10,.96));
}
.service-grid article{
  padding:34px 26px;
  text-align:center;
  border-right:1px solid rgba(213,181,110,.25);
}
.service-grid article:last-child{border-right:0}
.service-grid span{
  display:block;
  color:var(--gold2);
  font-size:46px;
  margin-bottom:16px;
}
.service-grid h2,.contact-card h2{
  margin:0 0 12px;
  color:var(--gold2);
  font-family:var(--display);
  text-transform:uppercase;
  font-size:17px;
}
.service-grid p,.content-split p,.contact-card p{
  color:var(--cream);
  line-height:1.7;
  font-size:19px;
}
.service-grid strong{
  display:block;
  margin-top:18px;
  color:var(--gold2);
  font-family:var(--display);
  letter-spacing:.16em;
}

.content-split{
  width:min(1160px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:28px;
  align-items:center;
}
.content-split.reverse{
  grid-template-columns:.85fr 1.15fr;
}
.logo-card,.contact-card{
  background:rgba(10,28,17,.82);
  border:1px solid var(--border);
  padding:34px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.logo-card img{
  background:rgba(238,226,191,.96);
  border-radius:18px;
  padding:12px;
  margin:auto;
}

.gallery-grid{
  width:min(1160px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.gallery-grid div{
  min-height:190px;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  background:
    linear-gradient(135deg,rgba(181,138,66,.20),rgba(12,31,19,.92));
  color:var(--gold2);
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.14em;
}
.contact-grid{
  width:min(1160px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:28px;
}
.contact-grid iframe{
  width:100%;
  min-height:500px;
  border:1px solid var(--border);
  filter:sepia(.28) saturate(.75);
}
.gold-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:14px 24px;
  margin-top:10px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,#a97a36,#6e4a22);
  color:#fff3d0;
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.14em;
}
footer{
  padding:42px 6vw;
  text-align:center;
  background:#040805;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.08em;
}
footer img{
  width:160px;
  margin:0 auto 18px;
  background:rgba(238,226,191,.96);
  border-radius:12px;
  padding:6px;
}

@media(max-width:1000px){
  .mockup-hero{
    min-height:auto;
  }
  .mockup-image{
    min-height:0;
    height:auto;
  }
  .hotspot{display:none}
  .service-grid{
    grid-template-columns:1fr 1fr;
  }
  .content-split,.content-split.reverse,.contact-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:650px){
  .service-grid,.gallery-grid{
    grid-template-columns:1fr;
  }
  .service-grid article{
    border-right:0;
    border-bottom:1px solid rgba(213,181,110,.25);
  }
  .section{
    padding:72px 24px;
  }
}