@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Inter:wght@500;600;700;800;900&display=swap');

:root{
  --gold:#d7b45f;
  --gold-light:#fff1bf;
  --cream:#fff8eb;
  --black:#030201;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;background:#000;color:#fff;overflow-x:hidden}
body{font-family:Inter,Arial,sans-serif}

.page{
  min-height:100vh;
  background:#000;
}

.header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:112px;
  z-index:40;
  display:grid;
  grid-template-columns:1.1fr auto 1.1fr;
  align-items:center;
  padding:0 4.2vw;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.98) 0%,rgba(0,0,0,.88) 58%,rgba(0,0,0,0) 100%);
}

.logo{
  font-family:Cinzel,Georgia,serif;
  font-weight:800;
  font-size:clamp(34px,3.1vw,58px);
  line-height:1;
  letter-spacing:-2.5px;
  color:var(--gold-light);
  text-decoration:none;
  text-shadow:
    0 2px 0 rgba(70,47,8,.55),
    0 0 26px rgba(215,180,95,.28);
}

.nav-links{
  display:flex;
  align-items:center;
  gap:48px;
}

.nav-links a{
  color:#fff6dd;
  text-decoration:none;
  font-weight:900;
  font-size:15px;
  letter-spacing:4px;
  padding:18px 0;
  opacity:.96;
}

.nav-links a.active{
  color:var(--gold-light);
  border-bottom:3px solid var(--gold);
}

.enquire{
  justify-self:end;
  color:#fff6dd;
  text-decoration:none;
  font-size:15px;
  font-weight:900;
  letter-spacing:4px;
  padding:22px 36px;
  border:1.5px solid rgba(215,180,95,.82);
  border-radius:999px;
  box-shadow:inset 0 0 24px rgba(215,180,95,.08),0 0 28px rgba(215,180,95,.12);
}

.hero{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  border-radius:0 0 54px 54px;
  isolation:isolate;
}

.image-layer{
  position:absolute;
  inset:-7vh -4vw -2vh -4vw;
  z-index:-5;
  background:url("mia-hero.png") no-repeat;
  background-size:cover;
  background-position:62% 63%;
  transform:scale(1.04);
}

/* premium dark finish over the screenshot */
.dark-layer{
  position:absolute;
  inset:0;
  z-index:-4;
  background:
    linear-gradient(90deg,rgba(0,0,0,.99) 0%,rgba(0,0,0,.96) 28%,rgba(0,0,0,.55) 51%,rgba(0,0,0,.08) 78%),
    linear-gradient(to bottom,rgba(0,0,0,.88) 0%,rgba(0,0,0,.22) 23%,rgba(0,0,0,.18) 68%,rgba(0,0,0,.62) 100%);
}

/* removes baked old text/faded ghost wording on the left */
.clean-left{
  position:absolute;
  left:0;
  top:112px;
  bottom:0;
  width:58vw;
  z-index:-3;
  background:
    radial-gradient(circle at 72% 42%,rgba(215,180,95,.13),transparent 34%),
    linear-gradient(90deg,#020201 0%,#020201 41%,rgba(2,2,1,.86) 67%,rgba(2,2,1,.18) 100%);
}

/* removes the embedded old menu/logo from the image */
.clean-top{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:118px;
  z-index:-2;
  background:#020201;
}

.hero-copy{
  position:relative;
  z-index:5;
  padding-left:4.2vw;
  padding-top:17vh;
  width:min(850px,58vw);
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:26px;
  font-family:Cinzel,Georgia,serif;
  color:var(--gold);
  font-size:14px;
  letter-spacing:7px;
  margin-bottom:34px;
  white-space:nowrap;
}

.eyebrow span{
  width:88px;
  height:2px;
  background:var(--gold);
  display:block;
}

.collection{
  font-family:Cinzel,Georgia,serif;
  color:var(--gold-light);
  font-size:26px;
  letter-spacing:16px;
  margin-bottom:24px;
}

h1{
  font-family:Cinzel,Georgia,serif;
  font-size:clamp(74px,8.4vw,138px);
  line-height:.9;
  font-weight:800;
  letter-spacing:-5px;
  color:var(--cream);
  text-transform:uppercase;
  text-shadow:0 16px 70px rgba(0,0,0,.96);
}

h1 em{
  color:var(--gold-light);
  font-style:italic;
  font-weight:600;
  white-space:nowrap;
}

.hero-copy p{
  width:min(690px,100%);
  margin-top:42px;
  color:#fff6e6;
  font-size:21px;
  line-height:1.78;
  font-weight:500;
  text-shadow:0 6px 26px #000;
}

.button{
  display:inline-flex;
  margin-top:34px;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:900;
  letter-spacing:3px;
  padding:19px 42px;
  border-radius:999px;
  border:1.5px solid rgba(255,226,148,.82);
  background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(215,180,95,.95));
  box-shadow:
    0 0 36px rgba(215,180,95,.28),
    inset 0 0 28px rgba(255,255,255,.14);
}

.cursor-light{
  position:fixed;
  width:340px;
  height:340px;
  border-radius:50%;
  pointer-events:none;
  left:-500px;
  top:-500px;
  z-index:999;
  transform:translate(-50%,-50%);
  mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,224,127,.34) 0%,rgba(215,180,95,.16) 30%,transparent 70%);
}

@media(max-width:1000px){
  .header{
    height:92px;
    display:flex;
    justify-content:space-between;
    padding:0 24px;
  }
  .nav-links{display:none}
  .enquire{font-size:12px;padding:15px 20px}
  .hero{border-radius:0 0 34px 34px}
  .image-layer{background-position:65% 58%}
  .clean-left{width:100vw;top:92px}
  .hero-copy{width:92vw;padding-left:24px;padding-top:16vh}
  h1{font-size:60px;letter-spacing:-2px}
  .hero-copy p{font-size:16px;width:92%}
  .eyebrow{font-size:11px;letter-spacing:4px;gap:14px}
  .eyebrow span{width:46px}
  .collection{font-size:18px;letter-spacing:10px}
}