/* ============================================================================
   WE NAILS — luxury skin for the inner marketing pages.
   Loaded by landing/_head.php ONLY when homepage_template = 'luxury', AFTER the
   classic stylesheet, so it re-skins the shared chrome (header, footer, base
   typography, buttons) while each page's own content styles keep working.
   The homepage has its own self-contained styles in index_luxury.php.
   ========================================================================== */

:root{
  --pk:#ff2d92; --pk2:#ff5ea8; --pk-dim:rgba(255,45,146,.16);
  --lux-bg:#050505; --lux-panel:#111114; --lux-line:rgba(255,255,255,.09);
  --lux-mut:#a8a8b0; --lux-mut2:#6e6e78;
  --lux-serif:'Cormorant Garamond',Georgia,serif;
  --lux-sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ── base ─────────────────────────────────────────────────── */
body.lux{
  background:var(--lux-bg);
  color:#fff;
  font-family:var(--lux-sans);
  font-weight:300;
  padding-top:126px;              /* clears the fixed header */
  -webkit-font-smoothing:antialiased;
}
body.lux h1,body.lux h2,body.lux h3,body.lux .sec-h,body.lux .page-title{
  font-family:var(--lux-serif);font-weight:600;letter-spacing:-.015em}
body.lux em{font-style:italic;color:var(--pk);font-family:var(--lux-serif)}
body.lux a{color:inherit}
body.lux .text-pink,body.lux .pk{color:var(--pk)}
body.lux .container{max-width:1240px}

/* ── fixed header ─────────────────────────────────────────── */
.site-head{position:fixed;top:0;left:0;right:0;z-index:100;transition:box-shadow .28s}
.site-head.stuck{background:rgba(6,6,8,.94);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--lux-line);box-shadow:0 8px 30px rgba(0,0,0,.5)}
.site-head .topbar{max-height:40px;overflow:hidden;transition:max-height .28s,opacity .2s}
.site-head.stuck .topbar{max-height:0;opacity:0;border-bottom:0}
.site-head.stuck .lux-nav .wrap{height:70px}
/* solid by default on inner pages — there is no hero artwork behind it */
.site-head{background:rgba(6,6,8,.94);backdrop-filter:blur(20px);border-bottom:1px solid var(--lux-line)}

.lux-wrap{max-width:1240px;margin:0 auto;padding:0 26px}

.topbar{position:relative;z-index:30;background:transparent;
  border-bottom:1px solid rgba(255,255,255,.07);font-size:.74rem;letter-spacing:.03em;color:var(--lux-mut)}
.topbar .lux-wrap{display:flex;align-items:center;gap:1.4rem;height:40px;flex-wrap:wrap}
.topbar i{color:var(--pk);margin-right:.4rem}
.topbar .sp{margin-left:auto;display:flex;align-items:center;gap:1.1rem}
.topbar .divi{width:1px;height:13px;background:var(--lux-line)}
.topbar a:hover{color:#fff}
@media(max-width:900px){.topbar .hide-sm{display:none}}

.lux-nav{position:relative;z-index:30;background:transparent;border-bottom:0}
.lux-nav .wrap{display:flex;align-items:center;gap:1.4rem;height:86px;max-width:1240px;margin:0 auto;padding:0 26px;
  transition:height .25s}
.brand{font-family:var(--lux-serif);font-size:1.85rem;font-weight:600;letter-spacing:-.02em;line-height:1;flex-shrink:0}
.brand span{color:var(--pk)}
.brand small{display:block;font-family:var(--lux-sans);font-size:.52rem;letter-spacing:.42em;
  color:var(--lux-mut2);font-weight:500;margin-top:.18rem}
.nlinks{display:flex;align-items:center;justify-content:center;gap:.2rem;flex:1;min-width:0}
.nact{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.nlink{padding:.5rem .8rem;font-size:.97rem;font-weight:400;color:#c9c9d2;border-radius:8px;
  transition:.18s;white-space:nowrap;text-decoration:none}
.nlink:hover{color:#fff}
.nlink.on{color:var(--pk)}
.nbook{background:var(--pk);color:#fff;padding:.72rem 1.35rem;border-radius:50px;font-size:.84rem;
  font-weight:600;display:inline-flex;align-items:center;gap:.5rem;transition:.2s;
  box-shadow:0 8px 26px rgba(255,45,146,.32);white-space:nowrap;text-decoration:none}
.nbook:hover{background:var(--pk2);color:#fff;transform:translateY(-1px)}
.burger{display:none;width:42px;height:42px;border:1px solid var(--lux-line);border-radius:11px;
  background:none;color:#fff;font-size:1rem;cursor:pointer}
@media(max-width:1180px){ .nlinks{display:none} .burger{display:block} }
@media(max-width:560px){ .acct-nm{display:none} .nbook .lbl{display:none} }

/* account dropdown */
.acct{position:relative}
.acct-btn{display:inline-flex;align-items:center;gap:.5rem;background:none;border:1px solid var(--lux-line);
  border-radius:50px;padding:.42rem .8rem .42rem .42rem;color:#fff;cursor:pointer;font-family:var(--lux-sans);
  font-size:.82rem;transition:.18s;white-space:nowrap}
.acct-btn:hover,.acct.open .acct-btn{border-color:var(--pk)}
.acct-av{width:26px;height:26px;border-radius:50%;background:var(--pk);color:#fff;display:grid;
  place-items:center;font-size:.74rem;font-weight:700;flex-shrink:0}
.acct-cv{font-size:.58rem;color:var(--lux-mut2);transition:transform .2s}
.acct.open .acct-cv{transform:rotate(180deg)}
.acct-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:212px;background:#111114;
  border:1px solid #333338;border-radius:14px;padding:.4rem;opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:.18s;box-shadow:0 18px 46px rgba(0,0,0,.6);z-index:70}
.acct.open .acct-menu{opacity:1;visibility:visible;transform:none}
.acct-head{padding:.6rem .75rem .5rem;font-size:.78rem;color:var(--lux-mut2);
  border-bottom:1px solid var(--lux-line);margin-bottom:.3rem}
.acct-menu a{display:flex;align-items:center;gap:.65rem;padding:.62rem .75rem;font-size:.84rem;
  color:#dcdce2;border-radius:9px;transition:.14s;text-decoration:none}
.acct-menu a i{width:15px;font-size:.78rem;color:var(--lux-mut2)}
.acct-menu a:hover{background:#1b1b20;color:#fff}
.acct-menu a:hover i{color:var(--pk)}
.acct-sep{height:1px;background:var(--lux-line);margin:.3rem 0}

/* mobile drawer */
.drawer{position:fixed;inset:0 0 0 auto;width:min(320px,86vw);background:#0a0a0c;z-index:120;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  padding:1.6rem;display:flex;flex-direction:column;gap:.2rem;border-left:1px solid var(--lux-line)}
.drawer.on{transform:none}
.drawer a{padding:.85rem .2rem;border-bottom:1px solid rgba(255,255,255,.05);font-size:.95rem;
  color:#fff;text-decoration:none}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:115;opacity:0;pointer-events:none;transition:.3s}
.scrim.on{opacity:1;pointer-events:auto}

/* ── shared section furniture ─────────────────────────────── */
body.lux .sec-eye{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1rem}
body.lux .sec-eye i{width:44px;height:1px;background:var(--lux-line);display:block}
body.lux .sec-eye span{font-size:.64rem;letter-spacing:.32em;color:var(--lux-mut2);text-transform:uppercase;font-weight:500}
body.lux .btn-pk{background:var(--pk);color:#fff;padding:1.05rem 2.1rem;border-radius:50px;font-size:.92rem;
  font-weight:600;display:inline-flex;align-items:center;gap:.65rem;transition:.22s;text-decoration:none;
  box-shadow:0 14px 40px rgba(255,45,146,.34);border:0}
body.lux .btn-pk:hover{background:var(--pk2);color:#fff;transform:translateY(-2px)}

/* ── footer ───────────────────────────────────────────────── */
.foot{background:#08080a;border-top:1px solid var(--lux-line);padding:3.6rem 0 1.6rem;margin-top:4rem}
.foot .lux-wrap{max-width:1240px;margin:0 auto;padding:0 26px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.4rem;margin-bottom:2.8rem}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot h4{font-size:.66rem;letter-spacing:.26em;color:var(--lux-mut2);text-transform:uppercase;
  margin-bottom:1.15rem;font-weight:600;font-family:var(--lux-sans)}
.foot a{display:block;padding:.32rem 0;font-size:.85rem;color:var(--lux-mut);transition:.16s;text-decoration:none}
.foot a:hover{color:var(--pk)}
.foot p{font-size:.85rem;color:var(--lux-mut);line-height:1.8;margin:0}
.foot-soc{display:flex;gap:.7rem;margin-top:1.15rem}
.foot-soc a{width:38px;height:38px;border:1px solid var(--lux-line);border-radius:50%;display:grid;
  place-items:center;padding:0;font-size:.85rem}
.foot-soc a:hover{border-color:var(--pk);color:var(--pk)}
.foot-bot{border-top:1px solid var(--lux-line);padding-top:1.5rem;display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;font-size:.76rem;color:var(--lux-mut2)}
.foot-bot a{display:inline;padding:0}

/* ── mobile floating bar ──────────────────────────────────── */
body.lux #mob-float{position:fixed;left:0;right:0;bottom:0;z-index:110;display:none;gap:.5rem;padding:.6rem;
  background:rgba(8,8,10,.95);backdrop-filter:blur(16px);border-top:1px solid var(--lux-line)}
body.lux #mob-float a{flex:1;text-align:center;padding:.8rem;border-radius:12px;font-size:.8rem;font-weight:500;
  border:1px solid var(--lux-line);color:#fff;text-decoration:none}
body.lux #mob-float .mf-book{background:var(--pk);border-color:var(--pk);font-weight:600}
@media(max-width:760px){
  body.lux #mob-float{display:flex}
  body.lux{padding-top:112px}
  body.lux .foot{padding-bottom:5.4rem}
}

/* ── neutralise leftover classic chrome if it ever renders ── */
body.lux #top-bar,body.lux #wn-nav,body.lux .nav-overlay,body.lux .wn-footer{display:none !important}

/* ── dark-mode reconciliation ────────────────────────────────
   The classic stylesheet paints these on white. Under the luxury skin the
   page text is light, so each of these needs a dark surface or it renders
   as invisible light-on-white. Extracted by scanning the classic CSS for
   every rule setting a white/near-white background. */
body.lux .about-sec,
body.lux .contact-sec,
body.lux .ig-sec,
body.lux .how-sec,
body.lux .services-sec,
body.lux .dr-section,
body.lux .rv-grid-sec,
body.lux .lux-ig-sec,
body.lux .sec-pad{background:var(--lux-bg) !important}

body.lux .hero-card,
body.lux .mini-card,
body.lux .svc-card,
body.lux .vip-tier,
body.lux .vip-tier:hover,
body.lux .vs-card,
body.lux .testi-card,
body.lux .about-floater,
body.lux .booking-frame-wrap,
body.lux .svc-tab,
body.lux .hc-chip,
body.lux .sv-trust-pill,
body.lux .svc-dur,
body.lux .trust-div{
  background:linear-gradient(140deg,#171719,#0d0d0f) !important;
  border:1px solid var(--lux-line) !important;
  color:#e6e6ea !important;
  box-shadow:none !important;
}
/* headings and body copy inside those cards */
body.lux .hero-card *,body.lux .mini-card *,body.lux .svc-card *,body.lux .vip-tier *,
body.lux .vs-card *,body.lux .testi-card *,body.lux .about-floater *{color:inherit}
body.lux .svc-card h3,body.lux .vip-tier h3,body.lux .vs-card h3,body.lux .testi-card h4,
body.lux .hero-card h3,body.lux .mini-card h3{color:#fff !important}
body.lux .svc-price,body.lux .vip-price,body.lux .price{color:var(--pk) !important}

/* active chip/tab keeps the brand fill */
body.lux .svc-tab.active,body.lux .svc-tab:hover{
  background:var(--pk) !important;border-color:var(--pk) !important;color:#fff !important}

/* white CTA button on dark hero bands */
body.lux .btn-cta-wht{background:var(--pk) !important;color:#fff !important}
body.lux .fsoc{background:transparent !important;border:1px solid var(--lux-line) !important;color:#fff !important}

/* generic safety: any leftover pure-white section under the skin */
body.lux section[style*="background:#fff"],
body.lux div[style*="background:#fff"]{background:var(--lux-bg) !important}

/* page-level light surfaces (found by scanning each page's own <style>) */
body.lux .cf-card,
body.lux .dr-card,
body.lux .dr-perk,
body.lux .legal-body,
body.lux .rv-search{
  background:linear-gradient(140deg,#171719,#0d0d0f) !important;
  border:1px solid var(--lux-line) !important;
  color:#dcdce2 !important;
  box-shadow:none !important;
}
body.lux .legal-body h2,body.lux .legal-body h3,
body.lux .dr-card h3,body.lux .cf-card h3{color:#fff !important}
body.lux .legal-body a{color:var(--pk) !important}

/* Form controls stay light — dark text on a white field is correct and
   readable. Only their surrounding cards get darkened. */
body.lux .cf-input,body.lux .rv-search input,
body.lux input[type=text],body.lux input[type=email],
body.lux input[type=tel],body.lux textarea,body.lux select{
  background:#fff !important;color:#1a1a1a !important;border:1px solid #d8d8de !important}
body.lux ::placeholder{color:#7a7a86 !important;opacity:1}
body.lux label,body.lux .cf-label{color:#c9c9d2 !important}

/* image wells sit behind photos — dark so a missing/slow image never flashes white */
body.lux .dr-card-img,body.lux .card-img,body.lux [class$="-img"]{background:#141417 !important}

/* ── tighten the top gap ─────────────────────────────────────
   These page headers were built for a STATIC nav, so they carry 7–9rem of
   top padding. With the fixed header adding its own clearance the two stacked
   up and pushed all the content below the fold. Trim them under the skin. */
body.lux .page-hero,
body.lux .gal-header,
body.lux .dr-hero,
body.lux .legal-hero,
body.lux .sc-hero,
body.lux .ar-hero{padding-top:2.4rem !important;padding-bottom:2.2rem !important}

body.lux .page-hero h1,
body.lux .gal-header h1,
body.lux .dr-hero h1,
body.lux .legal-hero h1,
body.lux .sc-hero h1,
body.lux .ar-hero h1{margin-bottom:.5rem}

/* breadcrumb sits tight under the header instead of floating mid-page */
body.lux .breadcrumb-wn,body.lux .gal-breadcrumb{margin-bottom:.9rem !important;font-size:.72rem}

/* first content section after a hero no longer needs a big run-up */
body.lux .sec-pad{padding-top:2.6rem !important}
body.lux .dr-section,body.lux .legal-body{padding-top:2.4rem !important}
body.lux .lux-ig-footer{padding-top:2.4rem !important}

@media(max-width:760px){
  body.lux .page-hero,body.lux .gal-header,body.lux .dr-hero,
  body.lux .legal-hero,body.lux .sc-hero,body.lux .ar-hero{
    padding-top:1.6rem !important;padding-bottom:1.4rem !important}
  body.lux .sec-pad{padding-top:1.8rem !important}
}

/* inner-page titles: smaller than the homepage hero and tighter rhythm, so the
   real content starts higher up the page */
body.lux .page-hero h1,
body.lux .gal-title,
body.lux .dr-hero h1,
body.lux .legal-hero h1,
body.lux .sc-hero h1,
body.lux .ar-hero h1{font-size:clamp(1.9rem,3.2vw,2.8rem) !important;margin-bottom:.35rem !important;line-height:1.1}
body.lux .gal-eyebrow,body.lux .ph-tag,body.lux .dr-eyebrow,body.lux .sc-eyebrow{margin-bottom:.5rem !important}
body.lux .gal-rule{margin-bottom:.7rem !important}
body.lux .gal-sub,body.lux .page-hero p,body.lux .dr-hero p,
body.lux .legal-hero p,body.lux .sc-hero p{margin-bottom:.25rem !important}

/* reviews page header (its own class, missed by the first sweep) */
body.lux .rv-header{padding-top:2.4rem !important;padding-bottom:2rem !important}
body.lux .rv-header h1,body.lux .rv-title{font-size:clamp(1.9rem,3.2vw,2.8rem) !important;margin-bottom:.35rem !important}
@media(max-width:760px){body.lux .rv-header{padding-top:1.6rem !important;padding-bottom:1.3rem !important}}

/* ════════════════════════════════════════════════════════════
   TEXT LEGIBILITY
   The classic palette is --drk:#000 on white pages. Under the dark skin
   those rules render black-on-black. Every selector below was found by
   scanning the shared and per-page CSS for dark colour declarations.
   ════════════════════════════════════════════════════════════ */
body.lux .section-title,
body.lux .step-title,
body.lux .al-txt strong,
body.lux .af-val,
body.lux .ci-val,
body.lux .ta-name,
body.lux .dr-card-name,
body.lux .dr-rules h2,
body.lux .legal-wrap h2,
body.lux .legal-wrap h3,
body.lux .cf-card h4,
body.lux .htime,
body.lux .hday{color:#fff !important}

body.lux .section-sub,
body.lux .step-desc,
body.lux .al-txt span,
body.lux .about-list li,
body.lux .af-label,body.lux .af-sub,
body.lux .ci-label,
body.lux .ta-meta,
body.lux .testi-quote{color:#b9b9c2 !important}

body.lux .af-val span,body.lux .section-title em{color:var(--pk) !important}
body.lux .about-list li{border-bottom-color:rgba(255,255,255,.07) !important}
body.lux .al-icon{background:rgba(255,45,146,.14) !important;color:var(--pk) !important}
body.lux .vip-join-btn,body.lux .vip-join-btn:hover{color:#1a1a1a !important}

/* ── ABOUT: the left column is a black card with white "floater" stat
   cards pinned to its corners. On a dark page the card vanished and the
   floaters collided with the copy. Give the card an edge, and let the
   floaters sit inside the padding instead of hanging off it. ── */
body.lux .about-img-wrap{
  background:linear-gradient(150deg,#1b0f18,#0d0a0f) !important;
  border:1px solid rgba(255,45,146,.22) !important;min-height:360px !important}
body.lux .about-img-inner{opacity:.10 !important}
body.lux .about-floater{
  background:rgba(14,14,17,.96) !important;border:1px solid rgba(255,45,146,.3) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.6) !important;padding:.8rem 1rem !important}
body.lux .af-left{bottom:.6rem !important;left:.4rem !important;min-width:140px !important}
body.lux .af-right{top:.6rem !important;right:.4rem !important;min-width:150px !important}
@media(max-width:991px){
  body.lux .about-floater{position:static !important;display:inline-block;margin:.5rem .5rem 0 0}
  body.lux .about-img-wrap{min-height:260px !important}
}

/* ── COMPACT: trim the generous white-page spacing ── */
body.lux .about-list{margin-top:1.1rem !important}
body.lux .about-list li{padding:.5rem 0 !important}
body.lux .section-sub{line-height:1.7 !important;margin-bottom:.6rem}
body.lux .row.g-5{--bs-gutter-y:1.75rem;--bs-gutter-x:1.75rem}
body.lux .about-sec .col-lg-5 > div,
body.lux .about-sec .col-lg-7 > div{padding:1rem !important}