/* ===================================================================
   PEARL SPA — booking / how-to-book page (extends styles.css + services.css)
   Reuses .nav--solid + .cat-head + .svc-cta. Info first, call button last.
   =================================================================== */

/* ── HERO: the phone number IS the booking system ── */
.bookhero {
  background: var(--pearl); text-align: center;
  min-height: 92svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(7rem, 16vh, 11rem) var(--gutter) clamp(3.5rem, 8vh, 6rem);
}
.bookhero__eyebrow { color: var(--champagne-d); }
.bookhero__title {
  font-family: var(--font-display); font-weight: 330;
  font-size: clamp(2.6rem, 8vw, 6rem); line-height: 1; letter-spacing: -.03em; margin-top: .8rem;
}
.bookhero__title em { font-style: italic; color: var(--champagne-d); }
/* headline words start hidden below their mask, then rise on load (.is-revealed) */
.bookhero__title .m-word__in { transform: translateY(120%); transition: transform .9s var(--ease); }
.bookhero.is-revealed .m-word__in { transform: translateY(0); }
/* gentle cascade on the supporting lines after the headline */
.bookhero__lead[data-rd] { transition-delay: .5s; }
.bookhero__phone[data-rd] { transition-delay: .68s; }
.bookhero__or[data-rd] { transition-delay: .84s; }
@media (prefers-reduced-motion: reduce) {
  .bookhero__title .m-word__in { transform: none; }
}
.bookhero__lead {
  max-width: 40ch; margin: clamp(1.3rem, 3vw, 2rem) auto 0;
  font-family: var(--font-display); font-weight: 340;
  font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.4; color: var(--on-pearl-hi);
}
.bookhero__lead em { font-style: italic; color: var(--champagne-d); }
.bookhero__phone {
  display: inline-flex; flex-direction: column; align-items: center; gap: .45rem;
  margin: clamp(2.2rem, 5vw, 3.6rem) 0 1.4rem; text-decoration: none; color: var(--ink);
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.bookhero__phone:hover { color: var(--champagne-d); transform: translateY(-2px); }
.bookhero__phone-label { font-family: var(--font-body); font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--champagne-d); }
.bookhero__phone-num { font-family: var(--font-display); font-weight: 350; font-size: clamp(2.5rem, 9vw, 6.5rem); line-height: 1; letter-spacing: -.02em; }
.bookhero__or { color: var(--on-pearl-mid); font-size: clamp(.9rem, 1.5vw, 1.05rem); line-height: 1.7; }
.bookhero__or strong { color: var(--ink); font-weight: 600; }
.bookhero__rating { color: var(--champagne-d); white-space: nowrap; }

/* ── HOW IT WORKS — 3 steps, no screens ── */
.howto { background: var(--cream); padding: clamp(3.5rem, 8vw, 6rem) var(--gutter); }
.howto__head { text-align: center; max-width: none; margin: 0 auto clamp(2.4rem, 5vw, 3.8rem); padding: 0; }
.howto__head .eyebrow { color: var(--champagne-d); }
.howto__grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3.5vw, 3.5rem); }
.howto__step { text-align: center; }
.howto__no { display: block; font-family: var(--font-display); font-weight: 350; font-size: clamp(2rem, 4vw, 3rem); color: var(--champagne); line-height: 1; margin-bottom: 1rem; }
.howto__step h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -.01em; margin-bottom: .6rem; }
.howto__step p { color: var(--on-pearl-mid); font-size: clamp(.95rem, 1.4vw, 1.05rem); line-height: 1.6; max-width: 32ch; margin: 0 auto; }

.book-grid {
  background: var(--pearl);
  max-width: 1100px; margin-inline: auto;
  padding: 0 var(--gutter) clamp(3rem, 6vw, 5rem);
  display: grid; gap: clamp(1.6rem, 3vw, 2.6rem);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
}
.book-block h3 { font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--champagne-d); margin-bottom: .9rem; font-weight: 600; }
.book-block p { font-size: 1rem; line-height: 1.7; color: var(--ink); }
.book-block p .muted, .book-block .muted { color: var(--on-pearl-mid); }
.book-block ul.points { list-style: none; }
.book-block ul.points li { position: relative; padding-left: 1.1rem; margin-bottom: .7rem; font-size: 1rem; line-height: 1.55; }
.book-block ul.points li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--champagne); }
.book-block .hours { margin-top: .2rem; }
.book-block a.link-underline { margin-top: .9rem; display: inline-block; }

/* the one big call action */
.btn--call { font-size: clamp(1.05rem, 1.6vw, 1.3rem); padding: 1.5rem 3.4rem; letter-spacing: .02em; }
.btn--call::before { content: "\2706"; margin-right: .7rem; font-size: .95em; }

@media (max-width: 760px) {
  .howto__grid { grid-template-columns: 1fr; gap: clamp(1.8rem, 6vw, 2.6rem); }
}
@media (max-width: 560px) {
  .book-grid { grid-template-columns: 1fr; }
  .btn--call { width: 100%; padding: 1.5rem 1rem; }
}