/* Studio M homepage sections. Loaded only on index.php. */

/* ---------- Cinematic Hero — full-bleed, minimal copy ---------- */
.hero { position: relative; overflow: hidden; height: 100svh; min-height: 560px; max-height: 980px; display: flex; align-items: flex-end; background: var(--charcoal); }
.hero-media { position: absolute; inset: -3%; z-index: 0; transition: transform 0.5s var(--ease-luxury); will-change: transform; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease-soft); }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
/* Animation only applies while a slide is active, so toggling .is-active on/off each
   rotation (in home.js) removes and re-adds it — restarting the zoom fresh every time
   instead of resuming a paused animation partway through. Duration matches the 6s
   rotation interval so the zoom reads as a deliberate sweep, not a stall. */
.hero-slide.is-active img { animation: heroZoom 6s ease-out forwards; }
@keyframes heroZoom {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.14) translate(-1.5%, -1.5%); }
}
@media (prefers-reduced-motion: reduce) { .hero-slide.is-active img { animation: none; } }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--ink-veil) 0%, rgba(43,40,37,0.22) 42%, rgba(43,40,37,0.1) 65%, transparent 85%),
    linear-gradient(to right, rgba(43,40,37,0.55) 0%, rgba(43,40,37,0.15) 48%, transparent 70%);
}
.hero-media .atmosphere { mix-blend-mode: screen; opacity: 0.6; }

.hero-inner { position: relative; z-index: 2; width: 100%; padding: 0 0 88px; }
.hero-copy { max-width: 34rem; color: var(--ivory); }
.hero-copy .eyebrow { color: var(--champagne); text-shadow: 0 1px 12px rgba(0,0,0,0.5); }
.hero-copy h1 {
  margin-top: 14px;
  font-weight: 500;
  font-size: clamp(2.8rem, 6.6vw, 5.1rem);
  letter-spacing: -0.025em;
  line-height: 1.02;
  min-height: 2.1em;
  color: #fff;
  /* The scrim alone can't guarantee contrast for every rotating photo — a bright element
     (e.g. a white towel) can land right behind the headline on some slides/crops. A soft
     shadow keeps the text readable regardless of what's behind it, on any slide. */
  text-shadow: 0 2px 20px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.5);
}
/* Morphing typography — each word masks in on its own delay (js/home.js) instead of the
   title just swapping text on each slide change. */
.morph-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.morph-word-inner { display: inline-block; transform: translateY(115%); transition: transform 0.75s var(--ease-luxury); }
.morph-word-inner.is-in { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .morph-word-inner { transition: none; transform: none; } }
.hero-body { margin-top: 16px; max-width: 30rem; font-size: 1.08rem; color: rgba(250,247,242,0.85); text-shadow: 0 1px 12px rgba(0,0,0,0.5); }
.hero-actions { margin-top: 34px; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 640px) { .hero-actions { flex-direction: row; } }
.btn-ghost-light { color: var(--ivory); border-color: rgba(250,247,242,0.35); }
.btn-ghost-light:hover { border-color: var(--champagne); background: rgba(250,247,242,0.08); }
.hero-dots { position: absolute; z-index: 2; left: 24px; bottom: 28px; display: flex; align-items: center; gap: 8px; }
@media (min-width: 640px) { .hero-dots { left: calc((100% - min(100% - 48px, var(--max-content))) / 2); } }
.hero-dot { position: relative; height: 3px; width: 30px; border-radius: 999px; background: rgba(250,247,242,0.25); border: none; cursor: pointer; overflow: hidden; padding: 0; }
.hero-dot-fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--champagne); border-radius: 999px; }
.hero-dot.is-active .hero-dot-fill { width: 100%; transition: width 5s linear; }
.hero-dot.is-past .hero-dot-fill { width: 100%; transition: none; }

.hero-scroll-cue { position: absolute; z-index: 2; right: 28px; bottom: 34px; width: 1px; height: 46px; display: none; }
@media (min-width: 640px) { .hero-scroll-cue { display: block; } }
.hero-scroll-cue::before { content: ''; position: absolute; inset: 0; background: rgba(250,247,242,0.25); }
.hero-scroll-cue span { position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: var(--champagne); animation: scrollCue 2.6s ease-in-out infinite; }
@keyframes scrollCue {
  0% { transform: translateY(-100%); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateY(250%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero-scroll-cue span { animation: none; opacity: 0.6; } }

.hero::after {
  content: '';
  position: absolute; z-index: 1;
  left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(to top, var(--ivory), transparent);
  pointer-events: none;
}
.trust-strip { position: relative; background: var(--ivory); }
.trust-grid { display: flex; gap: 10px; padding: 20px 20px; text-align: center; justify-content: center; }
@media (min-width: 640px) { .trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); max-width: 420px; margin: 0 auto; gap: 24px; padding: 32px 0; } }
.trust-grid > div {
  flex: 1;
  background: rgba(250, 247, 242, 0.6);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 12px 6px;
  box-shadow: inset 0 1px 0 var(--glass-tint);
}
@media (min-width: 640px) { .trust-grid > div { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; padding: 0; box-shadow: none; } }
.trust-grid .num { font-family: var(--font-serif); font-size: 1.3rem; }
@media (min-width: 640px) { .trust-grid .num { font-size: 1.6rem; } }
.trust-grid .label { margin-top: 4px; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--graphite); }
@media (min-width: 640px) { .trust-grid .label { font-size: 0.72rem; letter-spacing: 0.05em; } }

/* ---------- What We Do — simple category cards (replaces the old Editorial Strip,
   Treatment Stream marquee, Showcase scroller and Concern Discovery sections: one plain,
   scannable grid instead of four separate photo-heavy mechanisms doing overlapping jobs). ---------- */
.what-we-do-section { background: var(--ivory); padding: 96px 0; }
.what-we-do-heading { text-align: center; max-width: 640px; margin: 0 auto; }
.what-we-do-grid { margin-top: 48px; display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .what-we-do-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .what-we-do-grid { grid-template-columns: repeat(4, 1fr); } }
.what-we-do-card {
  display: block;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: #fff;
  transition: border-color 0.3s ease, box-shadow 0.4s var(--ease-luxury), transform 0.4s var(--ease-luxury);
}
.what-we-do-card:hover { border-color: var(--champagne-dark); box-shadow: var(--shadow-card); transform: translateY(-3px); }
.what-we-do-media { position: relative; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-card); }
.what-we-do-media img { width: 100%; height: 100%; object-fit: cover; }
.what-we-do-icon {
  position: absolute; right: -4px; bottom: -4px;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-card);
  color: var(--champagne-dark);
  display: flex; align-items: center; justify-content: center;
}
.what-we-do-icon svg { width: 14px; height: 14px; }
.what-we-do-body { padding: 30px 24px 26px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.what-we-do-card h3 { margin-top: 16px; font-size: 1.1rem; font-weight: 500; }
.what-we-do-card p { margin-top: 10px; font-size: 0.88rem; flex: 1; }
.what-we-do-link { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--champagne-dark); }

/* ---------- Treatment Journey ---------- */
.journey-section { background: var(--ivory); padding: 96px 0; }
.journey-track { position: relative; margin-top: 56px; }
.journey-line { position: absolute; left: 0; right: 0; top: 18px; height: 1px; background: var(--hairline); display: none; }
@media (min-width: 640px) { .journey-line { display: block; } }
.journey-line-fill { position: relative; height: 100%; background: var(--champagne-dark); transition: width 0.55s var(--ease-luxury); }
.journey-line-fill::after {
  content: ''; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; border-radius: 50%;
  background: var(--champagne); transform: translateY(-50%); box-shadow: 0 0 0 4px rgba(201,168,118,0.25);
  animation: journeyPulse 2.2s ease-in-out infinite;
}
@keyframes journeyPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(201,168,118,0.25); }
  50% { box-shadow: 0 0 0 9px rgba(201,168,118,0.08); }
}
.journey-steps { display: flex; gap: 24px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
@media (min-width: 640px) { .journey-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; overflow: visible; } }
.journey-step { flex-shrink: 0; width: 70vw; scroll-snap-align: start; }
@media (min-width: 640px) { .journey-step { width: auto; } }
.journey-badge { margin: 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(43,40,37,0.15); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: var(--graphite); transition: all 0.3s var(--ease-luxury); }
.journey-step.is-reached .journey-badge { background: var(--champagne-dark); border-color: var(--champagne-dark); color: var(--ivory); box-shadow: 0 0 0 5px rgba(169,135,90,0.15); }
.journey-frame { position: relative; margin-top: 18px; aspect-ratio: 3/4; width: 100%; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.journey-frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 0.6s var(--ease-luxury); }
.journey-step.is-reached .journey-frame img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .journey-line-fill::after { animation: none; } }
.journey-step h3 { margin-top: 16px; text-align: center; font-size: 1.2rem; }
.journey-step p { margin-top: 8px; text-align: center; font-size: 0.88rem; }

/* ---------- Why Studio M ---------- */

.why-section { background: var(--ivory); padding: 96px 0; }
.editorial-statement {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  margin: 0 0 64px;
}
.editorial-num { color: var(--champagne-dark); }
.why-grid { display: grid; gap: 48px; }
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .why-grid > div { padding-left: 40px; border-left: 1px solid var(--hairline); } }
@media (min-width: 1024px) { .why-grid > div:first-child { padding-left: 0; border-left: none; } }
.why-grid h3 { font-size: 1.4rem; font-weight: 500; }
.why-grid p { margin-top: 14px; font-size: 0.95rem; }

/* ---------- Reviews (dark) ---------- */
.home-reviews { position: relative; background: var(--charcoal); color: var(--ivory); padding: 96px 0; overflow: hidden; }
.home-reviews::before, .home-reviews::after {
  content: ''; position: absolute; z-index: 1; left: 0; right: 0; height: 110px; pointer-events: none;
}
.home-reviews::before { top: 0; background: linear-gradient(to bottom, var(--cream), transparent); }
.home-reviews::after { bottom: 0; background: linear-gradient(to top, var(--ivory), transparent); }
.home-reviews .container { position: relative; z-index: 2; }
.home-reviews h2 { color: var(--ivory); }
.reviews-heading { max-width: 640px; margin: 0 auto; text-align: center; }
.reviews-editorial { margin-top: 64px; max-width: 44rem; margin-inline: auto; display: flex; flex-direction: column; }
.review-feature { position: relative; padding: 44px 0; border-top: 1px solid var(--hairline-on-dark); }
.review-feature:last-child { border-bottom: 1px solid var(--hairline-on-dark); }
.review-mark { display: block; font-family: var(--font-serif); font-size: 3.4rem; line-height: 1; color: var(--champagne-dark); opacity: 0.7; }
.review-feature p { margin-top: 4px; font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.45; letter-spacing: -0.005em; color: rgba(250,247,242,0.94); }
.review-feature footer { margin-top: 20px; font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--champagne); }
.review-feature footer span { opacity: 0.5; margin: 0 6px; }

.final-cta { padding: 56px 0; text-align: center; }
@media (min-width: 640px) { .final-cta { padding: 72px 0; } }
.final-cta p { margin: 12px auto 0; max-width: 28rem; }
.final-cta-actions { margin-top: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
@media (min-width: 640px) { .final-cta-actions { flex-direction: row; } }

/* Mobile: every homepage section carries full desktop padding (72-96px) regardless of
   viewport — on a 375px-wide screen that reads as sparse, empty scroll rather than calm
   luxury. Tighten it below the 640px breakpoint used throughout this stylesheet. */
@media (max-width: 639px) {
  .what-we-do-section, .journey-section, .why-section { padding: 56px 0; }
  .editorial-statement { margin-bottom: 40px; }

  /* The hero photo is shot wide for a desktop crop — at 100svh on a narrow phone,
     object-fit:cover has to zoom in hard (only ~30% of the photo's width fits), landing
     a tight, awkward crop under the headline. Shorter height shows much more of each
     photo and leaves the headline in the darker, well-scrimmed lower band instead of
     pushing it up into the lightly-scrimmed middle. */
  .hero { height: 80svh; min-height: 540px; }
  .hero-copy h1 { font-size: clamp(2rem, 8.5vw, 2.75rem); min-height: 0; }
  .hero-scrim {
    background:
      linear-gradient(to top, var(--ink-veil) 0%, rgba(43,40,37,0.65) 38%, rgba(43,40,37,0.3) 62%, transparent 85%),
      linear-gradient(to right, rgba(43,40,37,0.55) 0%, rgba(43,40,37,0.15) 48%, transparent 70%);
  }

}