/* Masterpiece Beauty and Lashes — Static Bootstrap 5 Theme */

/* ===== Fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ===== Root variables ===== */
:root {
  --rose-gold: #D9A7A2;
  --rose-gold-dark: #c08a85;
  --rose-gold-light: #ecd5d2;
  --rose-gold-soft: #f6e8e6;
  --beige: #F8F4F2;
  --beige-dark: #ece2dc;
  --ink: #2B2B2B;
  --ink-soft: #6b6b6b;
  --ink-faint: #9a9a9a;
  --white: #ffffff;
  --font-display: 'Playfair Display', serif;
  --font-body: 'Poppins', sans-serif;
  --shadow-soft: 0 10px 40px -12px rgba(192, 138, 133, 0.25);
  --shadow-card: 0 20px 50px -20px rgba(43, 43, 43, 0.18);
  --shadow-lift: 0 30px 60px -25px rgba(192, 138, 133, 0.45);
  --radius-xl: 1.5rem;
  --radius-2xl: 1.75rem;
  --radius-3xl: 2rem;
}

/* ===== Base ===== */
* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: var(--font-display);
}

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

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--beige); }
::-webkit-scrollbar-thumb { background: var(--rose-gold-light); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--rose-gold); }

a { text-decoration: none; transition: color .3s ease; }

.text-rose-gold { color: var(--rose-gold) !important; }
.text-rose-gold-dark { color: var(--rose-gold-dark) !important; }
.text-rose-gold-light { color: var(--rose-gold-light) !important; }
.text-ink { color: var(--ink) !important; }
.text-ink-soft { color: var(--ink-soft) !important; }
.text-ink-faint { color: var(--ink-faint) !important; }

.bg-rose-gold { background-color: var(--rose-gold) !important; }
.bg-rose-gold-dark { background-color: var(--rose-gold-dark) !important; }
.bg-rose-gold-light { background-color: var(--rose-gold-light) !important; }
.bg-rose-gold-soft { background-color: var(--rose-gold-soft) !important; }
.bg-beige { background-color: var(--beige) !important; }
.bg-ink { background-color: var(--ink) !important; }

.text-balance { text-wrap: balance; }

/* ===== Buttons ===== */
.btn-rose {
  background-color: var(--rose-gold);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: .85rem 2rem;
  font-size: .875rem;
  font-weight: 500;
  box-shadow: var(--shadow-soft);
  transition: all .3s ease;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.btn-rose:hover, .btn-rose:focus {
  background-color: var(--rose-gold-dark);
  color: #fff;
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.btn-outline-rose {
  background-color: transparent;
  color: var(--rose-gold-dark);
  border: 1px solid var(--rose-gold);
  border-radius: 999px;
  padding: .85rem 2rem;
  font-size: .875rem;
  font-weight: 500;
  transition: all .3s ease;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.btn-outline-rose:hover {
  background-color: var(--rose-gold);
  color: #fff;
}

.btn-dark-rose {
  background-color: var(--ink);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: .85rem 2rem;
  font-size: .875rem;
  font-weight: 500;
  transition: all .3s ease;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.btn-dark-rose:hover {
  background-color: var(--rose-gold-dark);
  color: #fff;
}

.btn-glass {
  background-color: rgba(255,255,255,.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  padding: .85rem 2rem;
  font-size: .875rem;
  font-weight: 500;
  backdrop-filter: blur(8px);
  transition: all .3s ease;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.btn-glass:hover {
  background-color: #fff;
  color: var(--ink);
}

/* ===== Glass ===== */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.glass-rose {
  background: rgba(246, 232, 230, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ===== Navbar ===== */
.mp-navbar {
  transition: all .5s ease;
  /*padding-top: 1.25rem;
  padding-bottom: 1.25rem;*/
  padding-top: 0px;
  padding-bottom: 0px;
  
}
.mp-navbar.scrolled {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 30px -12px rgba(192,138,133,.3);
  padding-top: .75rem;
  padding-bottom: .75rem;
}
.mp-navbar.transparent .nav-link,
.mp-navbar.transparent .navbar-brand .brand-name { color: rgba(255,255,255,.9); }
.mp-navbar.transparent .navbar-brand .brand-sub { color: rgba(255,255,255,.8); }
.mp-navbar.transparent .brand-badge {
  border-color: rgba(255,255,255,.6);
  color: #fff;
}
.mp-navbar.scrolled .nav-link { color: var(--ink-soft); }
.mp-navbar.scrolled .navbar-brand .brand-name { color: var(--ink); }
.mp-navbar.scrolled .navbar-brand .brand-sub { color: var(--rose-gold); }
.mp-navbar.scrolled .brand-badge {
  border-color: rgba(217,167,162,.4);
  color: var(--rose-gold);
}
.nav-link {
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .02em;
  position: relative;
  padding: .5rem 1.1rem !important;
  transition: color .3s ease;
}
.nav-link.active { color: var(--rose-gold) !important; }
.mp-navbar.transparent .nav-link.active { color: #D9A7A2  !important; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 1.1rem; right: 1.1rem; bottom: .1rem;
  height: 1px;
  background: var(--rose-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.mp-navbar.transparent .nav-link::after { background: #D9A7A2; }

.brand-badge {
  width: 2.5rem; height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid;
  transition: all .5s ease;
}
.brand-badge span { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
.brand-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; letter-spacing: .02em; transition: color .5s ease; }
.brand-sub { font-size: .62rem; text-transform: uppercase; letter-spacing: .25em; transition: color .5s ease; }

.navbar-toggler { border: 1px solid rgba(217,167,162,.3); border-radius: 999px; width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; }
.mp-navbar.transparent .navbar-toggler { border-color: rgba(255,255,255,.5); }
.navbar-toggler:focus { box-shadow: none; }

/* ===== Hero ===== */
.hero-section {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; animation: slow-zoom 18s ease-out forwards; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(43,43,43,.7), rgba(43,43,43,.4) 50%, transparent); }
.hero-overlay-bottom { position: absolute; inset: 0; background: linear-gradient(to top, rgba(43,43,43,.5), transparent 40%, rgba(43,43,43,.2)); }

@keyframes slow-zoom { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes float-soft { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.animate-float-soft { animation: float-soft 7s ease-in-out infinite; }

@keyframes fade-in-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in-up { animation: fade-in-up 1s cubic-bezier(.22,1,.36,1) both; }

@keyframes bounce-soft { 0%,100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(8px); opacity: 1; } }
.scroll-cue-inner { animation: bounce-soft 1.8s ease-in-out infinite; }

/* ===== Reveal on scroll ===== */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ===== Cards ===== */
.service-card, .feature-card, .why-card, .mv-card {
  border: 1px solid rgba(236,213,210,.5);
  background: #fff;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-soft);
  transition: all .5s ease;
  height: 100%;
}
.service-card:hover, .feature-card:hover, .why-card:hover, .mv-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(217,167,162,.4);
}
.service-card .card-img-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
.service-card .card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.service-card:hover .card-img-wrap img { transform: scale(1.1); }
.card-img-overlay-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(43,43,43,.4), transparent); }

.service-icon-badge {
  position: absolute; left: 1rem; top: 1rem;
  width: 2.75rem; height: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 1rem;
  /*color: var(--rose-gold);*/
}
.service-icon-badge svg { width: 1.25rem; height: 1.25rem; }

/* Feature icon */
.feature-icon, .why-icon, .mv-icon, .contact-icon {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 1rem;
  background: var(--rose-gold-soft);
  /*color: var(--rose-gold);*/
  transition: all .5s ease;
}
.feature-icon { width: 2.75rem; height: 2.75rem; }
.why-icon { width: 4rem; height: 4rem; }
.mv-icon { width: 3.5rem; height: 3.5rem; }
.contact-icon { width: 2.75rem; height: 2.75rem; }
.feature-card:hover .feature-icon, .why-card:hover .why-icon, .mv-card:hover .mv-icon {
  background: var(--rose-gold); color: #000; transform: scale(1.08);
}
.feature-icon svg, .why-icon svg, .mv-icon svg, .contact-icon svg { width: 1.25rem; height: 1.25rem; }
.why-icon svg { width: 1.75rem; height: 1.75rem; }
.contact-icon svg { width: 1.25rem; height: 1.25rem; }

/* ===== Section eyebrow ===== */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 999px;
  padding: .4rem 1rem;
  font-size: .75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--rose-gold-dark);
  background: var(--rose-gold-soft);
}
.eyebrow .dot { width: .375rem; height: .375rem; border-radius: 999px; background: var(--rose-gold); }
.eyebrow-light { background: rgba(255,255,255,.08); color: var(--rose-gold-light); border: 1px solid rgba(255,255,255,.15); }
.eyebrow-light .dot { background: var(--rose-gold); }
.eyebrow-white { background: #fff; color: var(--rose-gold-dark); box-shadow: var(--shadow-soft); }

/* ===== Testimonials ===== */
.testimonial-section { color: #fff; }
.testimonial-track { position: relative; min-height: 260px; }
.testimonial-item {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(16px);
  transition: all .7s ease;
  pointer-events: none;
}
.testimonial-item.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.testimonial-dot {
  border: none; border-radius: 999px;
  width: .5rem; height: .5rem;
  background: rgba(255,255,255,.3);
  padding: 0; cursor: pointer;
  transition: all .3s ease;
}
.testimonial-dot.active { width: 1.75rem; background: var(--rose-gold); }
.testimonial-arrow {
  width: 2.75rem; height: 2.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: transparent; color: rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .3s ease;
}
.testimonial-arrow:hover { border-color: var(--rose-gold); background: var(--rose-gold); color: #fff; }
.testimonial-arrow svg { width: 1.25rem; height: 1.25rem; }

/* ===== Gallery ===== */
.gallery-item { position: relative; overflow: hidden; border-radius: 1rem; box-shadow: var(--shadow-soft); aspect-ratio: 1; }
.gallery-item.tall { aspect-ratio: 1/2; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-item .gal-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(43,43,43,.6), transparent); opacity: 0; transition: opacity .5s ease; display: flex; align-items: flex-end; justify-content: flex-end; padding: 1rem; }
.gallery-item:hover .gal-overlay { opacity: 1; }
.gallery-item .gal-ig { width: 2.25rem; height: 2.25rem; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--rose-gold); display: flex; align-items: center; justify-content: center; transform: translateY(.5rem); transition: transform .5s ease; }
.gallery-item:hover .gal-ig { transform: translateY(0); }

/* ===== CTA banner ===== */
.cta-section { position: relative; overflow: hidden; background: var(--rose-gold-soft); }
.cta-blob-1 { position: absolute; left: -5rem; top: 0; width: 18rem; height: 18rem; border-radius: 999px; background: rgba(236,213,210,.5); filter: blur(60px); pointer-events: none; }
.cta-blob-2 { position: absolute; right: -4rem; bottom: 0; width: 20rem; height: 20rem; border-radius: 999px; background: rgba(217,167,162,.2); filter: blur(60px); pointer-events: none; }

/* ===== Page banner ===== */
.page-banner { position: relative; min-height: 62vh; min-height: 600px; display: flex; align-items: flex-end; overflow: hidden; }
.page-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: slow-zoom 18s ease-out forwards; }
.page-banner-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(43,43,43,.8), rgba(43,43,43,.4) 50%, rgba(43,43,43,.3)); }

/* ===== Forms ===== */
.form-control-rose, .form-select-rose {
  border: 1px solid rgba(236,213,210,.7);
  background: #fff;
  border-radius: 1rem;
  padding: .75rem 1rem;
  font-size: .875rem;
  color: var(--ink);
  transition: all .3s ease;
  width: 100%;
}
.form-control-rose:focus, .form-select-rose:focus {
  border-color: var(--rose-gold);
  box-shadow: 0 0 0 .25rem rgba(217,167,162,.3);
  outline: none;
}
.form-control-rose::placeholder { color: var(--ink-faint); }
.form-label-rose { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); font-weight: 500; margin-bottom: .5rem; display: block; }
.input-icon-wrap { position: relative; }
.input-icon-wrap svg { position: absolute; left: .875rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--rose-gold); pointer-events: none; }
.input-icon-wrap .form-control-rose { padding-left: 2.5rem; }
.input-icon-wrap textarea.form-control-rose { padding-left: 2.5rem; }
.input-icon-wrap textarea.form-control-rose + svg, .input-icon-wrap textarea ~ svg { top: 1rem; transform: none; }

/* ===== Map ===== */
.map-wrap { border: 1px solid rgba(236,213,210,.5); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-card); }
.map-wrap iframe { width: 100%; height: 380px; border: 0; display: block; }

/* ===== Social ===== */
.social-btn {
  width: 2.75rem; height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 1rem;
  border: 1px solid rgba(236,213,210,.7);
  color: var(--rose-gold);
  transition: all .3s ease;
}
.social-btn:hover { background: var(--rose-gold); color: #fff; border-color: var(--rose-gold); }
.social-btn svg { width: 1.25rem; height: 1.25rem; }

.social-btn-dark {
  border-color: rgba(255,255,255,.15);
  color: rgba(255,255,255,.7);
}
.social-btn-dark:hover { background: var(--rose-gold); color: #fff; border-color: var(--rose-gold); }

/* ===== Footer ===== */
.mp-footer { background: var(--ink); color: rgba(255,255,255,.7); position: relative; overflow: hidden; }
.mp-footer .footer-link { color: rgba(255,255,255,.7); transition: color .3s ease; display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; }
.mp-footer .footer-link:hover { color: var(--rose-gold); }
.mp-footer .footer-link .bar { width: .75rem; height: 1px; background: rgba(217,167,162,.5); }

/* ===== Decorative blobs ===== */
.blob { position: absolute; border-radius: 999px; filter: blur(60px); pointer-events: none; }

/* ===== Badge stat ===== */
.stat-badge {
  border-radius: var(--radius-2xl);
  padding: 1.25rem;
  text-align: center;
  color: #fff;
  box-shadow: var(--shadow-lift);
}
.stat-badge .num { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; }
.stat-badge .label { font-size: .6rem; text-transform: uppercase; letter-spacing: .15em; }

/* ===== Misc ===== */
.section-pad { padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width: 768px) { .section-pad { padding-top: 7rem; padding-bottom: 7rem; } }

.rounded-3xl { border-radius: var(--radius-3xl) !important; }
.rounded-2xl { border-radius: var(--radius-2xl) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }

.link-learn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .875rem; font-weight: 500;
  color: var(--rose-gold-dark); transition: color .3s ease;
}
.link-learn:hover { color: var(--rose-gold); }
.link-learn svg { width: 1rem; height: 1rem; transition: transform .3s ease; }
.link-learn:hover svg { transform: translateX(4px); }

.divider-rose { width: 3rem; height: 2px; background: var(--rose-gold); border: none; margin: 0; }

/* mobile menu panel */
.mobile-menu {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .5s ease, opacity .5s ease;
}
.mobile-menu.open { max-height: 500px; opacity: 1; }
.mobile-menu .panel { margin: .75rem .5rem 0; border-radius: var(--radius-2xl); padding: 1rem; }

.mp-navbar {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
}

.mp-navbar .nav-link {
    color: #333 !important;
    font-weight: 500;
}

.mp-navbar .nav-link:hover,
.mp-navbar .nav-link.active {
    color: var(--rose-gold) !important;
}

.booking-modal {
    border: 1px solid #f0d9d5;
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
}

.booking-modal .modal-header {
    padding: 30px 35px 15px;
}

.booking-modal .modal-body {
    padding: 10px 35px 35px;
}

.booking-modal .modal-title {
    font-family: Georgia, serif;
    font-size: 32px;
    color: #151515;
}

.booking-modal p {
    color: #666;
}

.booking-badge {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 30px;
    background: #f8e9e6;
    color: #c7837d;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
}

.booking-modal .btn-close {
    position: absolute;
    top: 25px;
    right: 25px;
}

.booking-modal .form-control-rose,
.booking-modal .form-select-rose {
    width: 100%;
}

@media (max-width: 576px) {
    .booking-modal .modal-header {
        padding: 25px 20px 15px;
    }

    .booking-modal .modal-body {
        padding: 10px 20px 25px;
    }

    .booking-modal .modal-title {
        font-size: 26px;
        padding-right: 25px;
    }
}