[x-cloak] { display: none !important; }

.btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 9999px; background: #1a1614; color: #fff;
  padding: .75rem 1.5rem; font-size: .875rem; font-weight: 600;
  transition: all .2s ease; box-shadow: 0 6px 20px -8px rgba(26,22,20,.5);
}
.btn-primary:hover { background: #a9623a; transform: translateY(-1px); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 9999px; border: 1px solid #1a1614; color: #1a1614;
  padding: .75rem 1.5rem; font-size: .875rem; font-weight: 600; transition: all .2s ease;
}
.btn-outline:hover { background: #1a1614; color: #fff; }
.btn-bronze {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 9999px; background: #c27a48; color: #fff;
  padding: .75rem 1.5rem; font-size: .875rem; font-weight: 600; transition: all .2s ease;
}
.btn-bronze:hover { background: #a9623a; }

.nav-link { position: relative; color: #3b332f; transition: color .2s; }
.nav-link:hover, .nav-link.active { color: #a9623a; }
.nav-link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: #c27a48; border-radius: 2px; }
.mobile-link { display: block; padding: .75rem 0; border-bottom: 1px solid #ece1d3; font-weight: 500; }
.footer-h { font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: #fff; font-weight: 600; }
.social { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; border: 1px solid #3b332f; font-size: .7rem; font-weight: 600; transition: all .2s; }
.social:hover { background: #c27a48; border-color: #c27a48; color: #fff; }

.eyebrow { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: #a9623a; }
.section-title { font-family: "Playfair Display", Georgia, serif; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; font-weight: 600; letter-spacing: -.01em; }

.card { background: #fff; border-radius: 1.5rem; border: 1px solid #f0e8de; box-shadow: 0 1px 2px rgba(26,22,20,.04); transition: all .3s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 50px -20px rgba(26,22,20,.25); }

.grad-1 { background: linear-gradient(135deg, #f4e6d7 0%, #dcae85 100%); }
.grad-2 { background: linear-gradient(135deg, #efe3ea 0%, #c9a3b4 100%); }
.grad-3 { background: linear-gradient(135deg, #e3ece6 0%, #9fbaa8 100%); }
.grad-4 { background: linear-gradient(135deg, #e6e4f0 0%, #a7a3c9 100%); }
.grad-5 { background: linear-gradient(135deg, #f3e9dc 0%, #c9a77f 100%); }
.grad-0 { background: linear-gradient(135deg, #ece1d3 0%, #b99b82 100%); }

.hero-blob { position: absolute; border-radius: 9999px; filter: blur(60px); opacity: .55; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }

.slot { border: 1px solid #e7ddd1; background: #fff; border-radius: .75rem; padding: .6rem .5rem; font-size: .85rem; font-weight: 500; transition: all .15s; }
.slot:hover { border-color: #c27a48; color: #a9623a; }
.slot.selected { background: #1a1614; border-color: #1a1614; color: #fff; }

.prose-salon p { margin-bottom: 1rem; line-height: 1.75; color: #57534e; }

.marquee { display: flex; gap: 3rem; animation: marquee 30s linear infinite; white-space: nowrap; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } .marquee { animation: none; } }

/* ---------- v2 modern touches ---------- */
.text-gradient { background: linear-gradient(120deg, #a9623a 0%, #dcae85 50%, #c27a48 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.glass { background: rgba(255,255,255,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.6); box-shadow: 0 20px 50px -20px rgba(26,22,20,.35); }
.feature-ico { display: grid; place-items: center; flex-shrink: 0; width: 3rem; height: 3rem; border-radius: 1rem; background: #f4e6d7; font-size: 1.25rem; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.fade-up { animation: fadeUp .9s cubic-bezier(.2,.7,.2,1) both; }
.fade-in { animation: fadeIn 1.4s cubic-bezier(.2,.7,.2,1) both; }
.delay-1 { animation-delay: .1s; } .delay-2 { animation-delay: .2s; } .delay-3 { animation-delay: .3s; } .delay-4 { animation-delay: .45s; }
.float-slow { animation: floaty 7s ease-in-out infinite; }
.float-fast { animation: floaty 5s ease-in-out infinite; animation-delay: -2s; }

.img-zoom img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.img-zoom:hover img { transform: scale(1.08); }

.wa-float { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 45; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 9999px; background: #22c55e; color: #fff; box-shadow: 0 12px 30px -8px rgba(34,197,94,.6); transition: transform .2s; }
.wa-float:hover { transform: scale(1.08); }
@media (max-width: 1023px) { .wa-float { bottom: 5.25rem; } }

::selection { background: #e9ccb0; color: #1a1614; }
@media (prefers-reduced-motion: reduce) { .fade-up, .fade-in, .float-slow, .float-fast { animation: none; } }

/* Transparent header over dark page banners */
body.dark-top header:not(.is-scrolled) .nav-link,
body.dark-top header:not(.is-scrolled) .brand-name,
body.dark-top header:not(.is-scrolled) .nav-burger { color: #fff; }
body.dark-top header:not(.is-scrolled) .nav-link:hover { color: #dcae85; }
body.dark-top header:not(.is-scrolled) .nav-link.active::after { background: #dcae85; }
body.dark-top header:not(.is-scrolled) .nav-cta { background: #fff; color: #1a1614; }
body.dark-top header:not(.is-scrolled) .nav-cta:hover { background: #dcae85; }
body.dark-top header:not(.is-scrolled) .nav-user { color: #fff; border-color: rgba(255,255,255,.4); }