@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@300;400;500;600&display=swap');

*{
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

html,
body{
  margin:0;
  padding:0;
  width:100%;
  overflow-x:hidden;
}

body{
  font-family:'Inter',sans-serif;
  color:#5f6b5f;

  background:
    linear-gradient(
      rgba(245,238,226,.68),
      rgba(245,238,226,.78)
    ),
    url("cover.png");

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;

  min-height:100vh;

  display:flex;
  justify-content:center;
  align-items:flex-start;

  padding:28px 12px;

  position:relative;
  overflow-x:hidden;
}

/* grain texture */

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;

  background-image:
    radial-gradient(circle at 20% 20%, rgba(0,0,0,.18) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 40%, rgba(0,0,0,.12) 0 1px, transparent 1px);

  background-size:
    24px 24px,
    36px 36px;

  opacity:.035;
  mix-blend-mode:soft-light;

  z-index:-1;
}

/* hero */

.hero{
  width:100%;
  max-width:760px;
  position:relative;
}

/* floating ambient light */

.ambient{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  pointer-events:none;
}

.ambient-one{
  width:260px;
  height:260px;

  background:
    rgba(255,227,186,.42);

  top:-80px;
  left:-120px;
}

.ambient-two{
  width:220px;
  height:220px;

  background:
    rgba(255,255,255,.34);

  top:180px;
  right:-80px;
}

.ambient-three{
  width:260px;
  height:260px;

  background:
    rgba(171,183,160,.16);

  bottom:80px;
  left:-120px;
}

/* glass card */

.overlay{
  position:relative;

  background:
    rgba(247,243,236,.54);

  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);

  border:
    1px solid rgba(255,255,255,.42);

  border-radius:36px;

  padding:
    54px 34px 42px;

  box-shadow:
    0 20px 80px rgba(92,78,56,.12);

  overflow:hidden;
}

/* soft rainbow glow */

.overlay::before{
  content:"";

  position:absolute;

  inset:-20%;

  background:
    radial-gradient(
      circle at 80% 18%,
      rgba(255,220,165,.38),
      transparent 24%
    ),
    radial-gradient(
      circle at 30% 0%,
      rgba(255,255,255,.65),
      transparent 30%
    );

  pointer-events:none;
}

/* tree shadow */

.overlay::after{
  content:"";

  position:absolute;

  width:340px;
  height:340px;

  left:-90px;
  top:-40px;

  opacity:.11;

  filter:blur(2px);

  background:
    radial-gradient(circle at 40% 40%, rgba(0,0,0,.35) 0 6%, transparent 7%),
    radial-gradient(circle at 60% 20%, rgba(0,0,0,.28) 0 5%, transparent 6%),
    radial-gradient(circle at 55% 60%, rgba(0,0,0,.22) 0 5%, transparent 6%);

  transform:
    rotate(-12deg);

  pointer-events:none;
}

/* typography */

.eyebrow{
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;

  color:#9b917d;

  text-align:center;

  margin-bottom:22px;
}

h1{
  font-family:
    'Cormorant Garamond',
    serif;

  font-size:82px;
  font-weight:500;
  line-height:.95;

  letter-spacing:-.03em;

  color:#7f8661;

  text-align:center;

  margin:0;
}

.byline{
  text-align:center;

  text-transform:uppercase;

  letter-spacing:.22em;

  font-size:13px;

  color:#b1a28f;

  margin-top:14px;
}

.tagline{
  font-family:
    'Cormorant Garamond',
    serif;

  font-size:54px;
  line-height:1.1;

  color:#a78f67;

  text-align:center;

  margin:
    36px 0 22px;
}

.subtitle{
  max-width:520px;

  margin:
    0 auto 38px;

  text-align:center;

  line-height:1.8;

  font-size:17px;

  color:#7d887d;
}

/* cards */

.mood-card,
.scent-card,
.live-clock,
.studio-status,
.booking-summary{
  background:
    rgba(255,255,255,.48);

  border:
    1px solid rgba(255,255,255,.42);

  border-radius:24px;

  padding:22px;

  backdrop-filter:blur(10px);

  margin-bottom:18px;

  box-shadow:
    0 8px 26px rgba(0,0,0,.04);
}

.mood-card span,
.scent-card span,
.live-clock span,
.booking-summary span{
  display:block;

  font-weight:600;

  margin-bottom:10px;

  color:#6d7561;
}

.mood-card p,
.scent-card p{
  margin:0;

  line-height:1.7;

  color:#7f887c;
}

.night-note{
  text-align:center;

  margin:
    28px 0;

  font-size:15px;

  color:#9c8b73;
}

.live-clock{
  text-align:center;
}

#clock{
  font-size:42px;

  font-family:
    'Cormorant Garamond',
    serif;

  margin-top:8px;

  color:#7f8661;
}

.studio-status{
  text-align:center;

  line-height:1.7;

  color:#7c867a;
}

/* buttons */

.service-buttons{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:14px;

  margin:
    34px 0;
}

.service-btn{
  border:none;

  border-radius:22px;

  padding:18px;

  background:
    rgba(255,255,255,.62);

  color:#6f745d;

  font-size:16px;
  font-weight:500;

  cursor:pointer;

  transition:.28s ease;

  backdrop-filter:blur(8px);
}

.service-btn:hover{
  transform:
    translateY(-3px);

  background:
    rgba(255,255,255,.88);

  box-shadow:
    0 10px 30px rgba(0,0,0,.08);
}

.service-btn.active{
  background:
    linear-gradient(
      135deg,
      #c7b089,
      #e3d0ad
    );

  color:white;
}

/* booking */

h3{
  text-align:center;

  margin:
    42px 0 24px;

  font-size:30px;

  font-family:
    'Cormorant Garamond',
    serif;

  color:#907c5e;
}

.date-buttons{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:18px;
  margin-bottom:20px;
  scrollbar-width:none;
}

.date-buttons::-webkit-scrollbar{
  display:none;
}

.time-buttons{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-bottom:20px;
}
.date-btn,
.time-btn{
  border:none;

  border-radius:18px;

  padding:16px 10px;

  background:
    rgba(255,255,255,.56);

  color:#727867;

  cursor:pointer;

  transition:.25s ease;

  font-size:14px;

  backdrop-filter:blur(8px);
}

.date-btn{
  flex:0 0 auto;
  min-width:128px;
}
.date-btn:hover,
.time-btn:hover{
  transform:
    translateY(-2px);

  background:
    rgba(255,255,255,.88);
}

.date-btn.active,
.time-btn.active{
  background:
    linear-gradient(
      135deg,
      #bba27a,
      #dbc59f
    );

  color:white;
}

.time-btn.booked{
  opacity:.35;
  cursor:not-allowed;
}

.booking-summary{
  text-align:center;
}

#summaryText{
  margin:0;

  line-height:1.7;

  color:#7d8574;
}

.hidden{
  display:none;
}

.confirm-note{
  text-align:center;

  margin:
    28px 0;

  color:#91856f;

  font-size:14px;
}

/* contact */

.contact-buttons{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:14px;

  margin-top:26px;
}

.book-btn{
  text-decoration:none;

  text-align:center;

  padding:18px;

  border-radius:22px;

  background:
    rgba(255,255,255,.66);

  color:#6f755f;

  font-weight:600;

  transition:.25s ease;

  backdrop-filter:blur(10px);
}

.book-btn:hover{
  transform:
    translateY(-3px);

  background:
    rgba(255,255,255,.92);

  box-shadow:
    0 10px 30px rgba(0,0,0,.08);
}

.note{
  text-align:center;

  margin-top:30px;

  font-size:14px;

  color:#a19482;
}

/* mobile */

@media(max-width:768px){

  body{
    padding:18px 10px;
  }

  .overlay{
    padding:
      42px 22px 30px;
  }

  h1{
    font-size:58px;
  }

  .tagline{
  font-size:38px;
}

.subtitle{
  font-size:15px;
}

.service-buttons,
.contact-buttons{
  grid-template-columns:1fr;
}

.time-buttons{
  grid-template-columns:1fr 1fr;
}

}