/* ═══════════════════════════════════════════════════════════════
   VELOURA SKIN STUDIO — ELEVATION LAYER
   Loaded after style.css. Warm-clinical precision: a gold "spine"
   as the brand's visual centre, dusty-teal precision accent,
   italic-gold value props, count-up proof, and tactile depth.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Refined accent system */
  --gold:        #BE9A63;
  --gold-soft:   #D8BD8C;
  --gold-line:   rgba(190, 154, 99, 0.42);
  --teal:        #6E8C84;   /* clinical precision */
  --teal-deep:   #54695F;
  --rose:        #C9A9A0;
  --espresso:    #3A2C20;

  --color-gold: var(--gold);

  /* Elevation — warm, soft */
  --shadow-xs: 0 1px 3px rgba(58, 44, 32, 0.05);
  --shadow-sm: 0 6px 20px rgba(58, 44, 32, 0.07);
  --shadow-md: 0 18px 46px rgba(58, 44, 32, 0.12);
  --shadow-gold: 0 22px 50px rgba(150, 118, 70, 0.18);

  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --section-pad: clamp(4.5rem, 9vw, 9rem);
}

::selection { background: var(--gold); color: #fff; }

/* ─── 1. Tactile grain (injected) ───────────────────────── */
.vl-grain {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: 0.035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px;
}

/* ─── 2. Typography — italic-gold value props ───────────── */
.hero__title em, .display-md em, .display-lg em, h1 em, h2 em, .booking-cta__title em {
  font-style: italic; font-weight: 500; color: var(--gold);
}
.section--dark .hero__title em, .section--dark .display-md em, .booking-cta em { color: var(--gold-soft); }

/* eyebrow gains a gold tick — part of the spine language */
.eyebrow { color: var(--gold); display: inline-flex; align-items: center; gap: 0.6rem; letter-spacing: 0.2em; }
.eyebrow::before { content: ""; width: 16px; height: 1px; background: var(--gold); opacity: 0.7; }
.section-header--center .eyebrow { justify-content: center; }
.section--dark .eyebrow { color: var(--gold-soft); }

/* ─── 3. Divider — gold gradient w/ glow ────────────────── */
.divider {
  height: 2px; width: 54px; border: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-line));
  box-shadow: 0 0 10px rgba(190, 154, 99, 0.25);
}

/* ─── 4. THE SPINE — gold vertical accent on key sections ─ */
@media (min-width: 880px) {
  .split__content { position: relative; padding-left: clamp(1.75rem, 3vw, 2.75rem); }
  .split__content::before {
    content: ""; position: absolute; left: 0; top: 0.4rem; bottom: 0.4rem; width: 2px;
    background: linear-gradient(180deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
    transform: scaleY(0); transform-origin: top;
    transition: transform 1s var(--ease-soft);
  }
  .split.reveal--visible .split__content::before,
  .split--reverse.reveal--visible .split__content::before { transform: scaleY(1); }
}

/* ─── 5. HERO — depth, focal radial, noise, spine ──────── */
.hero__bg img { filter: brightness(0.96) contrast(1.05) saturate(1.02); }
.hero__overlay {
  background:
    radial-gradient(70% 60% at 32% 48%, rgba(58,44,32,0.22), transparent 70%),
    linear-gradient(100deg, rgba(40,30,22,0.72) 0%, rgba(40,30,22,0.34) 46%, rgba(40,30,22,0.12) 72%),
    linear-gradient(0deg, rgba(40,30,22,0.5), transparent 55%);
}
.hero__content { position: relative; }
.hero__content::before {
  content: ""; position: absolute; left: -2px; top: 0.4rem; bottom: 0.4rem; width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold-soft) 20%, var(--gold-soft) 80%, transparent);
  opacity: 0; animation: vlSpine 1.2s var(--ease-soft) 0.6s forwards;
}
@keyframes vlSpine { to { opacity: 0.9; } }
@media (max-width: 880px) { .hero__content::before { display: none; } }
.hero__title { letter-spacing: -0.022em; }
/* staggered hero entrance */
.hero__eyebrow, .hero__title, .hero__subtitle, .hero__actions, .hero__supporting {
  opacity: 0; transform: translateY(20px); animation: vlRise 1s var(--ease-soft) forwards;
}
.hero__eyebrow { animation-delay: 0.3s; }
.hero__title { animation-delay: 0.45s; }
.hero__subtitle { animation-delay: 0.62s; }
.hero__actions { animation-delay: 0.78s; }
.hero__supporting { animation-delay: 0.92s; }
@keyframes vlRise { to { opacity: 1; transform: none; } }

/* ─── 6. Buttons — magnetic, lit edge ──────────────────── */
.btn { transition: background var(--t,0.3s) var(--ease-soft), color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft), transform 0.35s var(--ease-soft); will-change: transform; }
.btn[data-magnetic] { transform: translate(var(--mx,0), var(--my,0)); }
.btn--primary:hover, .btn--secondary:hover { transform: translateY(-3px); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.18); }
.btn--light:hover { transform: translateY(-3px); box-shadow: var(--shadow-gold); }
.btn:active { transform: translateY(0) scale(0.99); }

/* ─── 7. Service cards — depth + image clip reveal ─────── */
.service-card { border-radius: 4px; overflow: hidden; transition: transform 0.5s var(--ease-soft), box-shadow 0.5s var(--ease-soft); box-shadow: var(--shadow-xs); }
.service-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-md); }
.service-card__image { position: relative; overflow: hidden; }
.service-card__image::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(190,154,99,0.18), transparent 60%);
  opacity: 0; transition: opacity 0.5s var(--ease-soft);
}
.service-card:hover .service-card__image::after { opacity: 1; }
.service-card__meta { color: var(--gold); }
.service-card__meta span:last-child { color: var(--color-warm-gray); }

/* ─── 8. Feature cards — teal precision accent ─────────── */
.feature { transition: transform 0.4s var(--ease-soft); }
.feature__icon { color: var(--teal); transition: transform 0.5s var(--ease-spring), color 0.4s; }
.feature:hover .feature__icon { transform: translateY(-3px) scale(1.06); color: var(--gold); }

/* ─── 9. Stats — refined, count-up, gold rule ──────────── */
.stat { position: relative; }
.stat + .stat::before {
  content: ""; position: absolute; left: -0.5px; top: 18%; bottom: 18%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.14), transparent);
}
.stat__number { font-variant-numeric: oldstyle-nums proportional-nums; color: var(--color-cream); }
.stat__number .stat__suffix { color: var(--gold-soft); }

/* ─── 10. Testimonials — watermark + hover bloom ───────── */
.testimonial-card { position: relative; overflow: hidden; border-radius: 6px; transition: transform 0.5s var(--ease-soft), box-shadow 0.5s var(--ease-soft), background 0.5s var(--ease-soft) !important; }
.testimonial-card::before {
  content: "\201C"; position: absolute; top: -1.2rem; right: 0.5rem;
  font-family: var(--ff-display); font-size: 6rem; line-height: 1;
  color: var(--gold); opacity: 0.12; pointer-events: none; z-index: 0;
}
.testimonial-card > * { position: relative; z-index: 1; }
.testimonial-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.testimonial-card__stars { color: var(--gold-soft); letter-spacing: 0.15em; }
.review-bar__score { color: var(--gold-soft) !important; }
.review-bar__stars { color: var(--gold-soft); }

/* ─── 11. Steps — gold numeral circles ─────────────────── */
.steps { counter-reset: step; }
.step { position: relative; padding-top: 3.5rem; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  font-family: var(--ff-display); font-size: 0.95rem; color: var(--gold);
  border: 1px solid var(--gold-line); border-radius: 50%;
  background: rgba(190,154,99,0.06);
}

/* ─── 12. Proof items — seal badges ────────────────────── */
.proof-item { transition: transform 0.4s var(--ease-soft); }
.proof-item:hover { transform: translateY(-3px); }
.proof-item__icon {
  color: var(--gold); display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; margin: 0 auto;
  border: 1px solid var(--gold-line); border-radius: 50%;
  font-size: 0.7rem;
}

/* ─── 13. FAQ — rotate + gold on open ──────────────────── */
.faq-item__trigger:hover { color: var(--gold); }
.faq-item__icon { transition: transform 0.4s var(--ease-soft), color 0.3s; }
.faq-item[aria-expanded="true"] .faq-item__icon,
.faq-item--open .faq-item__icon,
.faq-item__trigger[aria-expanded="true"] .faq-item__icon { transform: rotate(45deg); color: var(--gold); }

/* ─── 14. Section dark — depth ─────────────────────────── */
.section--dark { background: linear-gradient(170deg, var(--color-espresso), #2A2018); }

/* ─── 15. Final CTA — warm glow ────────────────────────── */
.booking-cta { position: relative; overflow: hidden; }
.booking-cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 50% 0%, rgba(190,154,99,0.10), transparent 60%);
}

/* ─── 15b. Membership tiers — featured differentiation ─── */
.membership-card {
  border-radius: 6px;
  transition: transform 0.5s var(--ease-soft), box-shadow 0.5s var(--ease-soft), border-color 0.5s var(--ease-soft);
}
.membership-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.membership-card--featured {
  position: relative; border-color: var(--gold) !important;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(190,154,99,0.12), transparent 60%),
    linear-gradient(180deg, rgba(190,154,99,0.06), var(--color-white)) !important;
  box-shadow: 0 0 0 1px var(--gold-line), var(--shadow-sm);
}
.membership-card--featured::after {
  content: ""; position: absolute; inset: 0; border-radius: 6px; pointer-events: none;
  box-shadow: inset 0 0 24px rgba(190,154,99,0.12);
}
.membership-card--featured:hover { box-shadow: 0 0 0 1px var(--gold), var(--shadow-gold); }
.membership-card__badge { background: var(--gold) !important; color: #fff !important; letter-spacing: 0.14em; }
.membership-card__price { color: var(--espresso); }
.membership-card__benefit::before,
.membership-card__benefit > span:first-child { color: var(--gold) !important; }

/* ─── 16. Reveal stagger refinement ────────────────────── */
.stagger > * { transition-timing-function: var(--ease-soft); }

@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow, .hero__title, .hero__subtitle, .hero__actions, .hero__supporting,
  .hero__content::before { opacity: 1; transform: none; animation: none; }
  .split__content::before { transform: scaleY(1); }
}