/* ================================================================
   LA SHINE BEAUTY — Cinematic Editorial Luxury Redesign
   Design language: Warm Minimalist · Fashion Editorial
   Fonts: Cormorant Garamond (display) · Inter (body)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&display=swap');

/* ── 1. Luxury design tokens ──────────────────────────────────── */
:root {
  --lux-parchment : #F9F6F1;
  --lux-sand      : #F1E9DF;
  --lux-white     : #FFFFFF;
  --lux-ink       : #1A1612;
  --lux-graphite  : #38302A;
  --lux-dust      : #8C7D73;
  --lux-rose      : #B5687C;
  --lux-plum      : #8A4060;
  --lux-gold      : #C4A060;
  --lux-cream     : #E8D8C4;
  --lux-noir      : #120F0D;
  --lux-border    : rgba(175,135,115,0.15);
  --lux-serif     : 'Cormorant Garamond','Playfair Display',Georgia,serif;
  --lux-sans      : 'Inter',system-ui,sans-serif;
  --lux-ease      : cubic-bezier(0.4,0,0.2,1);
  --lux-slow      : 0.7s;
  --lux-mid       : 0.45s;
  --lux-fast      : 0.22s;
  --lux-sh-sm     : 0 8px 32px rgba(25,15,8,0.06);
  --lux-sh-md     : 0 16px 52px rgba(25,15,8,0.09);
  --lux-sh-lg     : 0 28px 76px rgba(25,15,8,0.13);
}

/* Override existing theme tokens so all var() references pick up new palette */
:root {
  --bg        : var(--lux-parchment);
  --text      : var(--lux-ink);
  --muted     : var(--lux-dust);
  --rose      : var(--lux-rose);
  --rose-dark : var(--lux-plum);
  --gold      : var(--lux-gold);
  --cream     : var(--lux-sand);
  --dark      : var(--lux-noir);
  --shadow    : var(--lux-sh-lg);
  --radius    : 3px;
  --blush     : var(--lux-sand);
}

/* ── 2. Base ──────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family  : var(--lux-sans);
  font-weight  : 300;
  background   : var(--lux-parchment);
  color        : var(--lux-ink);
  /* Remove pink gradient from existing override */
  background-image : none !important;
  letter-spacing   : 0.01em;
  -webkit-font-smoothing  : antialiased;
  -moz-osx-font-smoothing : grayscale;
}

/* ── 3. Typography ────────────────────────────────────────────── */
h1,h2,h3,
.section-title h2,
.panel h2,
.booking h2,
.location-info h2,
.g5-content h2,
.about-mini h3,
.floating-card h3,
.team-card h3,
.menu-card h3,
.service-card h3 {
  font-family : var(--lux-serif);
  font-weight : 400;
}

h1 {
  font-family    : var(--lux-serif);
  font-size      : clamp(52px, 7.5vw, 112px);
  font-weight    : 300;
  letter-spacing : -0.04em;
  line-height    : 0.93;
  color          : var(--lux-ink);
}

h2,.section-title h2 {
  font-size      : clamp(38px, 5vw, 76px);
  font-weight    : 300;
  letter-spacing : -0.03em;
  line-height    : 0.96;
}

h3 {
  font-family    : var(--lux-serif);
  font-size      : clamp(20px, 2.2vw, 30px);
  font-weight    : 400;
  letter-spacing : -0.02em;
  line-height    : 1.1;
}

.lead {
  font-size      : clamp(15px, 1.2vw, 17px);
  font-weight    : 300;
  line-height    : 1.9;
  color          : var(--lux-dust);
  letter-spacing : 0.01em;
}

p { font-weight: 300; }

/* ── 4. Navigation ───────────────────────────────────────────── */
.topbar {
  background   : rgba(249,246,241,0.93);
  backdrop-filter        : blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom : 1px solid var(--lux-border);
  box-shadow    : none;
}

.nav { height: 80px; }

.navlinks a {
  font-family    : var(--lux-sans);
  font-size      : 10.5px;
  font-weight    : 500;
  letter-spacing : 0.15em;
  text-transform : uppercase;
  color          : var(--lux-dust);
  transition     : color var(--lux-fast) var(--lux-ease);
}
.navlinks a:hover { color: var(--lux-ink); }
.navlinks a:after { background: linear-gradient(90deg,var(--lux-gold),transparent); }

.lang-btn {
  border        : 1px solid var(--lux-border);
  background    : transparent;
  border-radius : 0;
  width         : 40px;
  height        : 40px;
  transition    : border-color var(--lux-fast) var(--lux-ease);
}
.lang-btn:hover { border-color: var(--lux-rose); }

.mobile-menu {
  background    : rgba(249,246,241,0.97);
  border-radius : 0 0 4px 4px;
  border        : 1px solid var(--lux-border);
  box-shadow    : var(--lux-sh-md);
}
.mobile-menu a {
  font-size      : 11px;
  letter-spacing : 0.14em;
  text-transform : uppercase;
  font-weight    : 500;
  border-radius  : 0;
  color          : var(--lux-dust);
}
.mobile-menu a:hover { background: var(--lux-sand); color: var(--lux-ink); }

/* ── 5. Eyebrow Labels ───────────────────────────────────────── */
.eyebrow {
  font-family    : var(--lux-sans);
  font-size      : 10px;
  font-weight    : 500;
  letter-spacing : 0.22em;
  text-transform : uppercase;
  color          : var(--lux-dust);
  background     : transparent;
  border         : 1px solid var(--lux-border);
  border-radius  : 0;
  padding        : 8px 14px;
  box-shadow     : none;
}

/* ── 6. Buttons ─────────────────────────────────────────────── */
.cta {
  font-family    : var(--lux-sans);
  font-size      : 10.5px;
  font-weight    : 500;
  letter-spacing : 0.2em;
  text-transform : uppercase;
  padding        : 16px 38px;
  border-radius  : 0;
  background     : var(--lux-plum);
  border         : 1.5px solid var(--lux-plum);
  color          : #ffffff;
  box-shadow     : none;
  gap            : 10px;
  transition     : background var(--lux-mid) var(--lux-ease),
                   color var(--lux-mid) var(--lux-ease),
                   border-color var(--lux-mid) var(--lux-ease),
                   transform var(--lux-fast) var(--lux-ease);
}
.cta:hover {
  background   : transparent;
  color        : var(--lux-plum);
  transform    : none;
  box-shadow   : none;
}

/* WhatsApp icon inherits button state */
.cta[href*="wa.me"]:before {
  background : #ffffff;
  width      : 17px;
  height     : 17px;
  flex-shrink: 0;
  transition : background var(--lux-mid) var(--lux-ease);
}
.cta[href*="wa.me"]:hover:before { background: var(--lux-plum); }

/* Ghost / secondary */
.cta.ghost,a.cta.ghost {
  background   : transparent;
  border       : 1.5px solid var(--lux-border);
  color        : var(--lux-dust);
  box-shadow   : none;
}
.cta.ghost:hover {
  border-color : var(--lux-plum);
  color        : var(--lux-plum);
  background   : transparent;
}
.cta.ghost:before { background: var(--lux-plum); }

/* Booking section inverse buttons */
.booking .cta {
  background   : transparent;
  border-color : rgba(255,255,255,0.35);
  color        : #ffffff;
}
.booking .cta:hover {
  background   : rgba(255,255,255,0.10);
  border-color : rgba(255,255,255,0.65);
  color        : #ffffff;
}
.booking .cta[href*="wa.me"]:before { background: #ffffff; }
.booking .cta:hover[href*="wa.me"]:before { background: #ffffff; }

.hero-actions { gap: 12px; margin: 32px 0; }

/* ── 7. Hero ─────────────────────────────────────────────────── */
.hero {
  padding   : 148px 0 108px;
  overflow  : visible;
}
.hero:before { display: none; }

.hero-grid {
  grid-template-columns : 1.12fr 0.88fr;
  gap                   : 68px;
  align-items           : center;
}

/* Hero image card */
.photo-card {
  border-radius : 3px;
  box-shadow    : var(--lux-sh-lg);
  background    : var(--lux-cream);
  overflow      : hidden;
}
.photo-card:before {
  background: linear-gradient(to top, rgba(18,12,10,0.70), rgba(18,12,10,0.04) 54%);
}
.photo-card img {
  transition: transform 1.2s var(--lux-ease), filter 1.2s var(--lux-ease);
  filter: saturate(0.88);
}
.photo-card:hover img { transform: scale(1.04); filter: saturate(1); }

.floating-card {
  border-radius  : 0;
  background     : rgba(249,246,241,0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding        : 22px 26px;
  box-shadow     : none;
  border-top     : 1px solid var(--lux-border);
}
.floating-card h3 {
  font-size  : clamp(16px,1.6vw,22px);
  font-weight: 300;
  line-height: 1.2;
  margin     : 0 0 6px;
}
.floating-card p {
  font-size  : 13px;
  color      : var(--lux-dust);
  line-height: 1.65;
  margin     : 0;
}

/* ── 8. Stats ────────────────────────────────────────────────── */
.stats {
  grid-template-columns : repeat(3,1fr);
  gap                   : 0;
  background            : var(--lux-border);
  border                : 1px solid var(--lux-border);
  margin-top            : 44px;
  max-width             : none;
}
.stat {
  background    : var(--lux-parchment);
  border        : none;
  border-radius : 0;
  padding       : 22px 16px;
  box-shadow    : none;
  text-align    : center;
}
.stat b {
  font-family: var(--lux-serif);
  font-size  : 24px;
  font-weight: 400;
  color      : var(--lux-ink);
  display    : block;
}
.stat span {
  font-size      : 9.5px;
  letter-spacing : 0.14em;
  text-transform : uppercase;
  color          : var(--lux-dust);
  margin-top     : 4px;
}

/* ── 9. Section Titles ───────────────────────────────────────── */
section { padding: 100px 0; }

.section-title { margin: 0 auto 56px; position: relative; }
.section-title::after {
  content    : "";
  display    : block;
  width      : 32px;
  height     : 1px;
  background : var(--lux-gold);
  margin     : 16px auto 0;
}
.section-title p {
  font-size  : 15px;
  color      : var(--lux-dust);
  font-weight: 300;
  line-height: 1.85;
  max-width  : 560px;
  margin     : 14px auto 0;
}

/* ── 10. Service Cards ───────────────────────────────────────── */
.service-card {
  background    : var(--lux-white);
  border        : 1px solid var(--lux-border);
  border-radius : 3px;
  box-shadow    : none;
  padding       : 0;
  overflow      : hidden;
  transition    : box-shadow var(--lux-mid) var(--lux-ease),
                  transform  var(--lux-mid) var(--lux-ease);
}
.service-card:hover {
  box-shadow : var(--lux-sh-md);
  transform  : translateY(-4px);
}
.service-card img {
  border-radius : 0;
  margin-bottom : 0;
  height        : 200px;
  filter        : saturate(0.82);
  transition    : filter var(--lux-slow) var(--lux-ease),
                  transform var(--lux-slow) var(--lux-ease);
}
.service-card:hover img { filter: saturate(1.0); transform: scale(1.04); }

.service-card h3 {
  font-size  : clamp(18px,1.8vw,24px);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin     : 18px 18px 6px;
  padding    : 0;
}
.service-card p {
  font-size  : 13px;
  color      : var(--lux-dust);
  line-height: 1.65;
  margin     : 0 18px 12px;
  padding    : 0;
  font-weight: 300;
}
.service-card .price {
  margin : 0 18px 18px;
  display: inline-flex;
}

/* ── 11. Price Tags ──────────────────────────────────────────── */
.price {
  font-family    : var(--lux-sans);
  font-size      : 10.5px;
  font-weight    : 500;
  letter-spacing : 0.12em;
  text-transform : uppercase;
  background     : transparent;
  color          : var(--lux-dust);
  border         : 1px solid var(--lux-border);
  border-radius  : 0;
  padding        : 6px 12px;
}
.menu-tag {
  font-size      : 9.5px;
  letter-spacing : 0.18em;
  text-transform : uppercase;
  font-weight    : 500;
  color          : var(--lux-gold);
  background     : transparent;
  border         : 1px solid rgba(196,160,96,0.3);
  border-radius  : 0;
  padding        : 5px 10px;
}
.old-price {
  text-decoration: line-through;
  color          : var(--lux-dust);
  font-weight    : 300;
  opacity        : 0.55;
}

/* ── 12. Menu Cards ──────────────────────────────────────────── */
.menu-card {
  background    : var(--lux-white);
  border        : 1px solid var(--lux-border);
  border-radius : 3px;
  box-shadow    : none;
  padding       : 26px;
  transition    : box-shadow var(--lux-mid) var(--lux-ease),
                  transform  var(--lux-mid) var(--lux-ease);
}
.menu-card:hover {
  box-shadow : var(--lux-sh-sm);
  transform  : translateY(-2px);
}
.menu-card h3 {
  font-size  : clamp(18px,1.8vw,24px);
  font-weight: 400;
  margin     : 0 0 8px;
}
.menu-card p {
  font-size  : 13px;
  color      : var(--lux-dust);
  line-height: 1.68;
  margin     : 0 0 14px;
  font-weight: 300;
}
.menu-card .price { align-self: flex-start; margin-top: auto; }

/* ── 13. Info Panel (dark box) ───────────────────────────────── */
.panel {
  background    : var(--lux-noir);
  border-radius : 3px;
  padding       : 52px;
  box-shadow    : 0 28px 72px rgba(12,8,6,0.24);
}
.panel:before {
  width  : 280px;
  height : 280px;
  background: radial-gradient(circle,rgba(195,100,120,0.20),transparent 68%);
  right  : -80px;
  top    : -80px;
}
.panel h2 {
  font-size      : clamp(32px,4.2vw,52px);
  font-weight    : 300;
  letter-spacing : -0.03em;
  line-height    : 1.0;
}
.panel p { color: rgba(240,228,218,0.68); font-weight: 300; }
.check { color: rgba(240,228,218,0.88); }
.check i {
  background    : linear-gradient(135deg,var(--lux-rose),var(--lux-gold));
  border-radius : 50%;
  width  : 22px;
  height : 22px;
  font-size: 12px;
  flex-shrink: 0;
}

/* ── 14. G5 Section ──────────────────────────────────────────── */
.g5-wrap {
  background    : linear-gradient(135deg,var(--lux-white),var(--lux-sand));
  border        : 1px solid var(--lux-border);
  border-radius : 3px;
  padding       : 40px;
}
.g5-video {
  border-radius : 3px;
  border        : 8px solid rgba(255,255,255,0.88);
  box-shadow    : var(--lux-sh-md);
}
.g5-content h2 {
  font-size      : clamp(32px,4.5vw,62px);
  font-weight    : 300;
  letter-spacing : -0.03em;
  line-height    : 1.0;
}
.g5-benefits span {
  background    : var(--lux-white);
  border        : 1px solid var(--lux-border);
  border-radius : 0;
  font-size     : 12px;
  letter-spacing: 0.06em;
  font-weight   : 500;
  color         : var(--lux-graphite);
  padding       : 12px 14px;
  transition    : background var(--lux-mid) var(--lux-ease);
}
.g5-benefits span:hover { background: var(--lux-cream); }

/* ── 15. Gallery ─────────────────────────────────────────────── */
.gallery img {
  border-radius : 3px;
  filter        : saturate(0.78);
  transition    : filter var(--lux-slow) var(--lux-ease),
                  transform var(--lux-slow) var(--lux-ease);
}
.gallery img:hover { filter: saturate(1); transform: scale(1.02); }

/* ── 16. Reviews ─────────────────────────────────────────────── */
.reviews-section { overflow: hidden; }

.reviews-marquee:before {
  background: linear-gradient(90deg,var(--lux-parchment),transparent);
}
.reviews-marquee:after {
  background: linear-gradient(270deg,var(--lux-parchment),transparent);
}

.review-card {
  background    : var(--lux-white);
  border        : 1px solid var(--lux-border);
  border-radius : 3px;
  box-shadow    : none;
  padding       : 32px;
  transition    : box-shadow var(--lux-mid) var(--lux-ease);
}
.review-card:hover { box-shadow: var(--lux-sh-sm); }
.review-card:before {
  font-family : var(--lux-serif);
  font-size   : 110px;
  color       : rgba(181,104,124,0.09);
}

.stars { color: var(--lux-gold); letter-spacing: 3px; font-size: 13px; }

.review-card p {
  font-family : var(--lux-serif);
  font-size   : 17px;
  font-weight : 300;
  font-style  : italic;
  line-height : 1.78;
  color       : var(--lux-graphite);
  margin      : 0 0 18px;
}
.review-card b {
  font-family    : var(--lux-sans);
  font-size      : 10px;
  letter-spacing : 0.16em;
  text-transform : uppercase;
  font-weight    : 500;
  color          : var(--lux-dust);
}

.review-pill {
  font-family    : var(--lux-sans);
  font-size      : 10px;
  letter-spacing : 0.15em;
  text-transform : uppercase;
  font-weight    : 500;
  color          : var(--lux-dust);
  background     : transparent;
  border         : 1px solid var(--lux-border);
  border-radius  : 0;
  padding        : 12px 22px;
  box-shadow     : none;
  transition     : border-color var(--lux-fast) var(--lux-ease),
                   color        var(--lux-fast) var(--lux-ease);
}
.review-pill:hover { border-color: var(--lux-rose); color: var(--lux-rose); }

/* ── 17. About & Team ────────────────────────────────────────── */
.about-mini {
  background    : var(--lux-white);
  border        : 1px solid var(--lux-border);
  border-radius : 3px;
  box-shadow    : none;
  padding       : 38px;
}
.about-mini h3 {
  font-size      : clamp(24px,3vw,44px);
  font-weight    : 300;
  letter-spacing : -0.03em;
}
.about-mini p { font-size: 15px; font-weight: 300; color: var(--lux-dust); }

.inside-view {
  border-radius : 3px;
  border        : 1px solid var(--lux-border);
  box-shadow    : none;
}

.team-card {
  background    : var(--lux-white);
  border        : 1px solid var(--lux-border);
  border-radius : 3px;
  box-shadow    : none;
  padding       : 28px;
  transition    : box-shadow var(--lux-mid) var(--lux-ease),
                  transform  var(--lux-mid) var(--lux-ease);
}
.team-card:hover { box-shadow: var(--lux-sh-sm); transform: translateY(-2px); }
.team-card h3 {
  font-size  : clamp(22px,2.2vw,30px);
  font-weight: 400;
  margin     : 0 0 4px;
}
.team-card b {
  font-family    : var(--lux-sans);
  font-size      : 10px;
  letter-spacing : 0.15em;
  text-transform : uppercase;
  color          : var(--lux-rose);
}
.team-card p { font-size: 13px; color: var(--lux-dust); font-weight: 300; }

/* ── 18. Location ────────────────────────────────────────────── */
.location-card {
  border-radius : 3px;
  border        : 1px solid var(--lux-border);
  box-shadow    : none;
}
.location-info { padding: 48px; }
.location-info h2 {
  font-size      : clamp(30px,3.8vw,54px);
  font-weight    : 300;
  letter-spacing : -0.03em;
}
.info-row { font-size: 14px; color: var(--lux-dust); font-weight: 300; }
.info-row b { color: var(--lux-ink); font-weight: 500; }

/* ── 19. Booking CTA ─────────────────────────────────────────── */
.booking {
  background    : linear-gradient(135deg,var(--lux-noir),#1C1210);
  border-radius : 3px;
  padding       : 72px;
  overflow      : hidden;
  position      : relative;
  box-shadow    : 0 36px 88px rgba(12,8,6,0.24);
}
.booking:before {
  content    : "";
  position   : absolute;
  inset      : auto -80px -100px auto;
  width      : 380px;
  height     : 380px;
  background : radial-gradient(circle,rgba(181,104,124,0.28),transparent 68%);
}
.booking h2 {
  font-size      : clamp(34px,5vw,70px);
  font-weight    : 300;
  letter-spacing : -0.04em;
  line-height    : 0.95;
}
.booking p {
  color      : rgba(235,220,210,0.60);
  font-size  : 15px;
  font-weight: 300;
  line-height: 1.8;
}

/* ── 20. Footer ─────────────────────────────────────────────── */
footer {
  background : var(--lux-noir);
  padding    : 54px 0;
  margin-top : 104px;
}
.footer-links a {
  font-size      : 10.5px;
  letter-spacing : 0.13em;
  text-transform : uppercase;
  font-weight    : 500;
  color          : rgba(212,196,184,0.45);
  transition     : color var(--lux-fast) var(--lux-ease);
}
.footer-links a:hover { color: rgba(212,196,184,1); }
.copyright { font-size: 11px; color: rgba(212,196,184,0.28); margin-top: 14px; }
.crafted { color: rgba(212,196,184,0.22); font-size: 10.5px; }
.setaei-link { color: rgba(212,196,184,0.55); }
.setaei-link:hover { color: #fff; }

/* ── 21. WhatsApp Float ──────────────────────────────────────── */
.whatsapp-float {
  width         : 52px;
  height        : 52px;
  border-radius : 0;
  background    : var(--lux-plum);
  box-shadow    : 0 12px 36px rgba(138,64,96,0.32);
  font-size     : 0;
  transition    : background var(--lux-mid) var(--lux-ease),
                  transform  var(--lux-mid) var(--lux-ease),
                  box-shadow var(--lux-mid) var(--lux-ease);
}
.whatsapp-float:hover {
  background : var(--lux-rose);
  transform  : translateY(-3px);
  box-shadow : 0 18px 48px rgba(138,64,96,0.42);
}
.whatsapp-float:before { width: 26px; height: 26px; background: #ffffff; }

/* ── 22. Scroll Animations ───────────────────────────────────── */
[data-lux] {
  opacity   : 0;
  transform : translateY(28px);
  transition: opacity var(--lux-slow) var(--lux-ease),
              transform var(--lux-slow) var(--lux-ease);
}
[data-lux].lux-on { opacity: 1; transform: translateY(0); }

[data-lux="left"]           { transform: translateX(-22px); }
[data-lux="left"].lux-on    { transform: translateX(0); }
[data-lux="scale"]          { transform: scale(0.96) translateY(14px); }
[data-lux="scale"].lux-on   { transform: scale(1) translateY(0); }

/* Stagger delays */
[data-lux-d="1"] { transition-delay: 0.08s; }
[data-lux-d="2"] { transition-delay: 0.17s; }
[data-lux-d="3"] { transition-delay: 0.26s; }
[data-lux-d="4"] { transition-delay: 0.35s; }
[data-lux-d="5"] { transition-delay: 0.44s; }
[data-lux-d="6"] { transition-delay: 0.53s; }

/* ── 23. SEO appended sections ───────────────────────────────── */
section.container {
  border-top    : 1px solid var(--lux-border) !important;
  border-radius : 0 !important;
  background    : var(--lux-white) !important;
}
section.container h2 {
  font-family    : var(--lux-serif);
  font-size      : clamp(22px,2.8vw,36px);
  font-weight    : 300;
  letter-spacing : -0.02em;
}

/* ── 24. Hamburger ───────────────────────────────────────────── */
.hamburger {
  border        : 1px solid var(--lux-border);
  border-radius : 0;
  background    : var(--lux-parchment);
  box-shadow    : none;
}
.hamburger span { background: var(--lux-ink); }

/* ── 25. Responsive overrides ────────────────────────────────── */
@media (max-width: 900px) {
  .booking  { padding: 44px; }
  .panel    { padding: 36px; }
  .location-info { padding: 32px; }
}
@media (max-width: 768px) {
  section   { padding: 68px 0; }
  h1        { font-size: clamp(44px,13vw,70px) !important; }
  h2,.section-title h2 { font-size: clamp(32px,9vw,54px) !important; }
  .hero     { padding-top: 120px; padding-bottom: 64px; }
  .booking  { padding: 32px; }
  .panel    { padding: 26px; }
  .stats    { gap: 1px; }
}
@media (max-width: 480px) {
  .cta      { font-size: 9.5px; padding: 14px 26px; letter-spacing: 0.16em; }
  .booking  { padding: 22px; }
}


/* ================================================================
   SERVICE / LANDING PAGE STYLES
   (activated when <body class="lux-service"> is set)
   ================================================================ */

/* ── Body reset ─────────────────────────────────────────────── */
body.lux-service {
  max-width      : none !important;
  margin         : 0 !important;
  padding        : 0 !important;
  background     : var(--lux-parchment);
  font-family    : var(--lux-sans);
  font-weight    : 300;
  color          : var(--lux-ink);
}

/* ── Injected nav ────────────────────────────────────────────── */
.lux-nav {
  position   : fixed;
  top        : 0; left: 0; right: 0;
  z-index    : 60;
  height     : 72px;
  background : rgba(249,246,241,0.94);
  backdrop-filter        : blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-bottom : 1px solid var(--lux-border);
  display    : flex;
  align-items: center;
  justify-content: space-between;
  padding    : 0 clamp(24px,5vw,80px);
}
.lux-nav-logo img { height: 42px; width: auto; display: block; }
.lux-nav-links {
  display : flex;
  gap     : 28px;
  align-items: center;
}
.lux-nav-links a {
  font-size      : 10.5px;
  font-weight    : 500;
  letter-spacing : 0.15em;
  text-transform : uppercase;
  color          : var(--lux-dust);
  text-decoration: none;
  transition     : color var(--lux-fast) var(--lux-ease);
}
.lux-nav-links a:hover   { color: var(--lux-ink); }
.lux-nav-cta {
  font-size      : 10px;
  font-weight    : 500;
  letter-spacing : 0.18em;
  text-transform : uppercase;
  color          : var(--lux-plum) !important;
  border         : 1.5px solid var(--lux-plum);
  padding        : 9px 20px;
  text-decoration: none;
  transition     : background var(--lux-mid) var(--lux-ease),
                   color var(--lux-mid) var(--lux-ease);
}
.lux-nav-cta:hover { background: var(--lux-plum); color: #fff !important; }

/* ── Page content wrapper ────────────────────────────────────── */
.lux-page-content {
  max-width   : 880px;
  margin      : 0 auto;
  padding     : 130px clamp(24px,5vw,60px) 88px;
}

/* ── H1 editorial headline ───────────────────────────────────── */
body.lux-service .lux-page-content h1 {
  font-family    : var(--lux-serif);
  font-size      : clamp(48px,8vw,100px);
  font-weight    : 300;
  letter-spacing : -0.04em;
  line-height    : 0.92;
  color          : var(--lux-ink);
  margin         : 0 0 8px;
}

/* Thin gold rule under h1 */
body.lux-service .lux-page-content h1::after {
  content    : "";
  display    : block;
  width      : 40px;
  height     : 1px;
  background : var(--lux-gold);
  margin-top : 22px;
}

/* Lead paragraph */
body.lux-service .lux-page-content > p:first-of-type {
  font-size      : 17px;
  font-weight    : 300;
  color          : var(--lux-dust);
  line-height    : 1.90;
  margin         : 28px 0 40px;
  padding-bottom : 40px;
  border-bottom  : 1px solid var(--lux-border);
}

/* Logo image */
body.lux-service .lux-page-content img[src*="logo"] {
  max-width   : 150px;
  opacity     : 0.60;
  margin      : 0 0 36px;
  display     : block;
  filter      : saturate(0);
  transition  : opacity var(--lux-mid) var(--lux-ease);
}
body.lux-service .lux-page-content img[src*="logo"]:hover { opacity: 0.9; }

/* ── .box panels ─────────────────────────────────────────────── */
body.lux-service .box {
  background    : var(--lux-white);
  border        : 1px solid var(--lux-border);
  border-radius : 0;
  padding       : 30px 34px;
  margin        : 24px 0;
  box-shadow    : none;
  transition    : box-shadow var(--lux-mid) var(--lux-ease);
}
body.lux-service .box:hover { box-shadow: var(--lux-sh-sm); }

body.lux-service .box h2 {
  font-family    : var(--lux-serif);
  font-size      : clamp(20px,2.8vw,34px);
  font-weight    : 400;
  letter-spacing : -0.02em;
  line-height    : 1.1;
  margin         : 0 0 12px;
  color          : var(--lux-ink);
}
body.lux-service .box p {
  font-size  : 15px;
  font-weight: 300;
  color      : var(--lux-dust);
  line-height: 1.82;
  margin     : 0;
}

/* List items styled as editorial dashes */
body.lux-service .box ul {
  list-style : none;
  padding    : 0;
  margin     : 0;
}
body.lux-service .box li {
  font-size  : 14px;
  font-weight: 300;
  color      : var(--lux-dust);
  line-height: 1.75;
  padding    : 10px 0;
  border-bottom: 1px solid var(--lux-border);
  display    : flex;
  align-items: flex-start;
  gap        : 12px;
}
body.lux-service .box li::before {
  content     : "—";
  color       : var(--lux-gold);
  font-family : var(--lux-serif);
  font-weight : 300;
  flex-shrink : 0;
  margin-top  : 1px;
}
body.lux-service .box li:last-child { border-bottom: none; }
body.lux-service .box li strong {
  color      : var(--lux-ink);
  font-weight: 500;
}
body.lux-service .box a {
  color          : var(--lux-rose);
  text-decoration: none;
  border-bottom  : 1px solid transparent;
  transition     : border-color var(--lux-fast) var(--lux-ease);
}
body.lux-service .box a:hover { border-bottom-color: var(--lux-rose); }

/* Section.box spacer */
body.lux-service section.box {
  background    : var(--lux-white);
  border        : 1px solid var(--lux-border);
  border-radius : 0;
  padding       : 32px 34px;
  margin        : 24px 0;
}

/* ── CTA buttons on landing pages ────────────────────────────── */
body.lux-service p > .cta,
body.lux-service .cta {
  display        : inline-flex;
  align-items    : center;
  gap            : 10px;
  font-family    : var(--lux-sans);
  font-size      : 10.5px;
  font-weight    : 500;
  letter-spacing : 0.2em;
  text-transform : uppercase;
  padding        : 16px 38px;
  border-radius  : 0;
  background     : var(--lux-plum);
  border         : 1.5px solid var(--lux-plum);
  color          : #ffffff;
  text-decoration: none;
  box-shadow     : none;
  transition     : background var(--lux-mid) var(--lux-ease),
                   color var(--lux-mid) var(--lux-ease);
  margin         : 4px 0;
}
body.lux-service p > .cta:hover,
body.lux-service .cta:hover {
  background : transparent;
  color      : var(--lux-plum);
}

/* ── Injected footer ─────────────────────────────────────────── */
.lux-footer {
  background : var(--lux-noir);
  padding    : 46px clamp(24px,5vw,80px);
  margin-top : 80px;
  display    : flex;
  align-items: center;
  justify-content: space-between;
  gap        : 24px;
  flex-wrap  : wrap;
}
.lux-footer-logo { height: 38px; opacity: 0.55; display: block; }
.lux-footer-links {
  display : flex;
  gap     : 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.lux-footer-links a {
  font-size      : 10.5px;
  letter-spacing : 0.13em;
  text-transform : uppercase;
  font-weight    : 500;
  color          : rgba(212,196,184,0.40);
  text-decoration: none;
  transition     : color var(--lux-fast) var(--lux-ease);
}
.lux-footer-links a:hover { color: rgba(212,196,184,0.95); }
.lux-copyright {
  font-size  : 10.5px;
  color      : rgba(212,196,184,0.22);
  width      : 100%;
  text-align : center;
  margin-top : 16px;
  border-top : 1px solid rgba(255,255,255,0.05);
  padding-top: 16px;
}

/* ── Injected WhatsApp float ─────────────────────────────────── */
.lux-wa-float {
  position   : fixed;
  right      : 22px;
  bottom     : 22px;
  z-index    : 70;
  width      : 52px;
  height     : 52px;
  background : var(--lux-plum);
  display    : grid;
  place-items: center;
  border-radius: 0;
  box-shadow : 0 12px 36px rgba(138,64,96,0.32);
  transition : background var(--lux-mid) var(--lux-ease),
               transform  var(--lux-mid) var(--lux-ease);
  text-decoration: none;
  color: transparent;
  font-size: 0;
}
.lux-wa-float:hover { background: var(--lux-rose); transform: translateY(-3px); }
.lux-wa-float::before {
  content   : "";
  width     : 26px;
  height    : 26px;
  display   : block;
  background: #ffffff;
  mask      : url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16.01 3.2A12.67 12.67 0 0 0 5.3 22.62L3.7 28.8l6.32-1.56A12.66 12.66 0 1 0 16.01 3.2Zm0 2.2a10.47 10.47 0 1 1 0 20.94c-1.83 0-3.62-.48-5.2-1.39l-.37-.21-3.75.93.95-3.67-.24-.38A10.47 10.47 0 0 1 16.01 5.4Zm-4.1 5.44c-.24 0-.62.09-.94.44-.32.35-1.23 1.2-1.23 2.93s1.26 3.4 1.43 3.63c.18.23 2.43 3.9 6.02 5.31 2.98 1.17 3.59.94 4.24.88.65-.06 2.1-.86 2.4-1.69.29-.82.29-1.53.2-1.68-.09-.15-.32-.23-.67-.41-.35-.18-2.1-1.04-2.43-1.15-.32-.12-.56-.18-.79.17-.24.35-.91 1.15-1.12 1.38-.21.24-.41.27-.76.09-.35-.18-1.49-.55-2.84-1.75-1.05-.94-1.76-2.1-1.97-2.45-.2-.35-.02-.54.16-.71.16-.16.35-.41.53-.62.18-.2.24-.35.35-.58.12-.23.06-.44-.03-.62-.09-.18-.79-1.91-1.09-2.62-.29-.68-.58-.59-.8-.6h-.67Z"/></svg>') center/contain no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16.01 3.2A12.67 12.67 0 0 0 5.3 22.62L3.7 28.8l6.32-1.56A12.66 12.66 0 1 0 16.01 3.2Zm0 2.2a10.47 10.47 0 1 1 0 20.94c-1.83 0-3.62-.48-5.2-1.39l-.37-.21-3.75.93.95-3.67-.24-.38A10.47 10.47 0 0 1 16.01 5.4Zm-4.1 5.44c-.24 0-.62.09-.94.44-.32.35-1.23 1.2-1.23 2.93s1.26 3.4 1.43 3.63c.18.23 2.43 3.9 6.02 5.31 2.98 1.17 3.59.94 4.24.88.65-.06 2.1-.86 2.4-1.69.29-.82.29-1.53.2-1.68-.09-.15-.32-.23-.67-.41-.35-.18-2.1-1.04-2.43-1.15-.32-.12-.56-.18-.79.17-.24.35-.91 1.15-1.12 1.38-.21.24-.41.27-.76.09-.35-.18-1.49-.55-2.84-1.75-1.05-.94-1.76-2.1-1.97-2.45-.2-.35-.02-.54.16-.71.16-.16.35-.41.53-.62.18-.2.24-.35.35-.58.12-.23.06-.44-.03-.62-.09-.18-.79-1.91-1.09-2.62-.29-.68-.58-.59-.8-.6h-.67Z"/></svg>') center/contain no-repeat;
}

/* ── Landing page responsive ─────────────────────────────────── */
@media (max-width: 768px) {
  .lux-nav {
    height  : 64px;
    padding : 0 20px;
  }
  .lux-nav-logo img { height: 36px; }
  .lux-nav-links    { display: none; }
  .lux-nav-cta      { padding: 8px 14px; }
  .lux-page-content { padding: 104px 20px 64px; }
  .lux-footer { padding: 36px 20px; flex-direction: column; text-align: center; }
  .lux-footer-links { justify-content: center; }
  body.lux-service .lux-page-content h1 { font-size: clamp(40px,12vw,72px) !important; }
}