:root {
  color-scheme: dark;
  --gold: #efc480;
  --cream: #f8efe2;
  --dark: #17100c;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--dark);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.coming-soon {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: var(--dark);
  background-image:
    linear-gradient(90deg, rgba(8,5,4,.06), rgba(8,5,4,.05) 26%, rgba(9,6,4,.21) 42%, rgba(9,6,4,.19) 72%, rgba(8,5,4,.08)),
    url("./salon-background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 75px 24px 115px;
  color: var(--cream);
  text-align: center;
}
.content {
  position: relative;
  z-index: 1;
  width: min(100%, 720px);
  margin: 0 auto;
  transform: translateY(-8px);
  text-shadow: 0 1px 8px rgba(0,0,0,.14);
}
.eyebrow {
  color: var(--cream);
  font-weight: 400;
  letter-spacing: .47em;
  text-transform: uppercase;
  font-size: clamp(.76rem, 1.2vw, 1.02rem);
  line-height: 1.5;
  margin: 0 0 22px;
}
h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.052em;
  font-size: clamp(3.25rem, 6.1vw, 6.25rem);
  line-height: 1.13;
  color: var(--gold);
  margin: 0 0 17px;
}
.salon-type {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  font-size: clamp(.79rem, 1.18vw, 1.04rem);
  text-transform: uppercase;
  letter-spacing: .49em;
  color: var(--gold);
  white-space: nowrap;
}
.type-rule { width: 70px; height: 1px; background: rgba(239,196,128,.72); flex: 0 1 70px; }
.message {
  color: var(--cream);
  font: 400 clamp(1.18rem, 1.8vw, 1.47rem)/1.5 Georgia, "Times New Roman", serif;
  margin: 45px 0 43px;
  text-wrap: balance;
}
.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  max-width: 590px;
  margin: 0 auto;
}
.service { display: flex; flex-direction: column; align-items: center; gap: 13px; }
.service-icon {
  border: 1px solid rgba(239,196,128,.83);
  border-radius: 9999px;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  color: var(--gold);
}
.service-icon svg { width: 43px; height: 43px; }
.service-label { font-size: clamp(.8rem, 1.3vw, .96rem); line-height: 1.3; color: var(--cream); }
@media (max-width: 640px) {
  .coming-soon {
    padding: 56px 18px 77px;
    background-position: center center;
    background-image:
      linear-gradient(90deg, rgba(7,4,3,.38), rgba(10,6,4,.18) 17%, rgba(12,8,5,.45) 48%, rgba(11,8,5,.38) 80%, rgba(7,4,3,.35)),
      url("./salon-background.jpg");
  }
  .content { transform: none; }
  .eyebrow { letter-spacing: .33em; font-size: .76rem; margin-bottom: 23px; }
  h1 { font-size: clamp(3rem, 12.3vw, 4.7rem); margin-bottom: 20px; letter-spacing: -.055em; }
  .salon-type { gap: 12px; font-size: .73rem; letter-spacing: .32em; }
  .type-rule { flex-basis: 37px; }
  .message { margin: 33px auto 35px; max-width: 360px; font-size: clamp(1.13rem, 4.3vw, 1.3rem); line-height: 1.5; }
  .desktop-break { display: none; }
  .services { gap: 10px; }
  .service-icon { width: 67px; height: 67px; }
  .service-icon svg { width: 35px; height: 35px; }
  .service-label { font-size: .77rem; }
}
@media (max-width: 365px) {
  h1 { font-size: 2.93rem; }
  .salon-type { letter-spacing: .21em; }
  .service-icon { width: 58px; height: 58px; }
  .service-icon svg { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: no-preference) {
  /* All motion intentionally omitted: calm, immediately readable, no layout shifts. */
}