/* ============================================================
   CUPPING & MASSAGE STUDIO  —  Luxury Black & Gold
   by Hfz Zubair & Khadijah · Robertsham, Johannesburg
   Hand-built static site · Restore • Rebalance • Recover
   ============================================================ */

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
body,h1,h2,h3,h4,h5,p,figure,blockquote,ul,ol,dd{ margin:0; }
ul[role="list"]{ list-style:none; padding:0; }
img,picture,svg,video{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--gold-core); outline-offset:3px; border-radius:6px; }

/* ---------- Tokens ---------- */
:root{
  --bg:#0a0908;
  --bg-2:#100e0c;
  --bg-3:#15120e;
  --panel:rgba(255,255,255,.022);
  --panel-2:rgba(255,255,255,.045);
  --line:rgba(212,175,55,.18);
  --line-soft:rgba(255,255,255,.075);

  --gold-hi:#fbf2b0;
  --gold:#dcb964;
  --gold-core:#d4af37;
  --gold-deep:#a87a1e;

  --gold-grad:linear-gradient(135deg,#bf953f 0%,#fcf6ba 28%,#d4af37 52%,#fbf5b7 70%,#aa771c 100%);
  --gold-text:linear-gradient(180deg,#fbf2b0 0%,#e7c65c 44%,#b8860b 100%);
  --gold-sheen:linear-gradient(120deg,rgba(251,242,176,0) 30%,rgba(251,242,176,.7) 50%,rgba(251,242,176,0) 70%);

  --text:#efe9da;
  --muted:#a8a08e;
  --faint:#736b5d;

  --wa:#25d366; --wa-dk:#0e7a3c;

  --maxw:1240px;
  --radius:18px;
  --radius-lg:26px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-gold:0 18px 50px -22px rgba(212,175,55,.45);
  --shadow-card:0 34px 70px -34px rgba(0,0,0,.9);

  --font-display:"Playfair Display",Georgia,serif;
  --font-brand:"Plus Jakarta Sans",system-ui,sans-serif;
  --font-body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------- Base ---------- */
body{
  font-family:var(--font-body); font-weight:300; color:var(--text);
  background:var(--bg); line-height:1.72; letter-spacing:.01em; overflow-x:clip;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body::before{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 720px at 80% -12%,rgba(212,175,55,.11),transparent 60%),
    radial-gradient(900px 700px at -10% 14%,rgba(212,175,55,.05),transparent 55%),
    radial-gradient(1200px 900px at 50% 122%,rgba(168,122,30,.08),transparent 60%),
    var(--bg); }
body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.022'/%3E%3C/svg%3E"); }
.skip-link{ position:fixed; left:1rem; top:.7rem; z-index:500; transform:translateY(-160%); background:var(--gold-grad); color:#1c1505; padding:.7rem 1.1rem; border-radius:10px; font-weight:600; transition:transform .25s var(--ease); }
.skip-link:focus{ transform:none; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-left:clamp(20px,5vw,40px); padding-right:clamp(20px,5vw,40px); }
.container-wide{ max-width:1360px; }
.section{ padding-top:clamp(70px,11vw,140px); padding-bottom:clamp(70px,11vw,140px); position:relative; }
.section-tight{ padding-top:clamp(52px,7vw,90px); padding-bottom:clamp(52px,7vw,90px); }
.gold-text{ background:var(--gold-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hairline{ height:1px; border:0; background:linear-gradient(90deg,transparent,var(--line),transparent); }

/* ---------- Typography ---------- */
.eyebrow{ font-family:var(--font-brand); font-weight:600; font-size:.72rem; letter-spacing:.4em; text-transform:uppercase; color:var(--gold-core); display:inline-flex; align-items:center; gap:.85em; flex-wrap:wrap; max-width:100%; }
.eyebrow::before{ content:""; width:32px; height:1px; background:linear-gradient(90deg,transparent,var(--gold-core)); }
.eyebrow.center::after{ content:""; width:32px; height:1px; background:linear-gradient(90deg,var(--gold-core),transparent); }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.06; letter-spacing:.004em; }
.display{ font-size:clamp(2.8rem,7vw,5.4rem); line-height:1.01; }
.h-xl{ font-size:clamp(2.2rem,4.8vw,3.7rem); }
.h-lg{ font-size:clamp(1.8rem,3.4vw,2.7rem); }
.h-md{ font-size:clamp(1.4rem,2.4vw,1.95rem); }
.lead{ font-size:clamp(1.05rem,1.5vw,1.22rem); color:var(--muted); font-weight:300; max-width:62ch; }
.muted{ color:var(--muted); } .faint{ color:var(--faint); }
.tiny{ font-size:.82rem; letter-spacing:.04em; }
.section-head{ max-width:760px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head .eyebrow{ margin-bottom:1.4rem; }
.section-head h2{ margin-top:0; }
.section-head p{ margin-top:1.3rem; }

/* ---------- Buttons ---------- */
.btn{ --pad:1.02em 1.85em; display:inline-flex; align-items:center; justify-content:center; gap:.6em; padding:var(--pad);
  border-radius:100px; cursor:pointer; border:1px solid transparent; font-family:var(--font-body); font-weight:500;
  font-size:.86rem; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; position:relative; overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .4s,color .4s,border-color .4s; }
.btn svg{ width:1.1em; height:1.1em; stroke:currentColor; fill:none; }
.btn-gold{ background:var(--gold-grad); color:#1c1505; box-shadow:var(--shadow-gold); border-color:rgba(251,242,176,.4); }
.btn-gold:hover{ transform:translateY(-3px); box-shadow:0 24px 60px -18px rgba(212,175,55,.6); }
.btn-gold::after{ content:""; position:absolute; inset:0; background:var(--gold-sheen); transform:translateX(-130%); transition:transform .85s var(--ease); }
.btn-gold:hover::after{ transform:translateX(130%); }
.btn-ghost{ background:rgba(212,175,55,.04); border-color:var(--line); color:var(--gold); }
.btn-ghost:hover{ border-color:var(--gold-core); color:var(--gold-hi); transform:translateY(-3px); background:rgba(212,175,55,.09); }
.btn-wa{ background:var(--wa); color:#04230f; border-color:rgba(255,255,255,.18); box-shadow:0 18px 44px -18px rgba(37,211,102,.6); }
.btn-wa:hover{ transform:translateY(-3px); background:#2ee06f; box-shadow:0 24px 54px -16px rgba(37,211,102,.75); }
.btn-sm{ --pad:.74em 1.25em; font-size:.74rem; }
.btn-lg{ --pad:1.16em 2.2em; font-size:.92rem; }
.btn-block{ width:100%; }

/* ---------- Header / Nav ---------- */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:100; transition:background .5s var(--ease),backdrop-filter .5s,border-color .5s; border-bottom:1px solid transparent; }
.site-header .bar{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:86px; transition:height .4s var(--ease); }
.site-header.scrolled{ background:rgba(9,8,7,.84); backdrop-filter:blur(16px) saturate(140%); border-bottom-color:var(--line); }
.site-header.scrolled .bar{ height:70px; }
.brand{ display:flex; align-items:center; gap:.8rem; }
.brand .mark{ width:48px; height:48px; flex:none; }
.brand .mark img{ width:100%; height:100%; object-fit:contain; display:block; }
.frame img.fit-contain{ object-fit:contain; background:#0d0b08; }
.brand .name b{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.08rem; letter-spacing:.01em; line-height:1; }
.brand .name span{ display:block; font-family:var(--font-body); font-weight:300; font-size:.58rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold-core); margin-top:.45em; }
.nav{ display:flex; align-items:center; gap:1.55rem; }
.nav a{ font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); position:relative; padding:.4em 0; transition:color .35s; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--gold-grad); transition:width .4s var(--ease); }
.nav a:hover,.nav a.active{ color:var(--gold-hi); }
.nav a:hover::after,.nav a.active::after{ width:100%; }
.header-cta{ display:flex; align-items:center; gap:1rem; }
.menu-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:12px; width:46px; height:46px; align-items:center; justify-content:center; cursor:pointer; }
.menu-toggle span{ display:block; width:20px; height:2px; background:var(--gold); position:relative; transition:.35s; }
.menu-toggle span::before,.menu-toggle span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--gold); transition:.35s; }
.menu-toggle span::before{ top:-6px; } .menu-toggle span::after{ top:6px; }
body.menu-open .menu-toggle span{ background:transparent; }
body.menu-open .menu-toggle span::before{ top:0; transform:rotate(45deg); }
body.menu-open .menu-toggle span::after{ top:0; transform:rotate(-45deg); }
.mobile-menu{ position:fixed; inset:0; z-index:99; background:rgba(7,6,5,.97); backdrop-filter:blur(8px); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.2rem; opacity:0; visibility:hidden; transform:translateY(-12px); transition:.5s var(--ease); }
body.menu-open .mobile-menu{ opacity:1; visibility:visible; transform:none; }
.mobile-menu a{ font-family:var(--font-display); font-size:1.9rem; color:var(--text); padding:.3rem 1rem; transition:color .3s; }
.mobile-menu a:hover,.mobile-menu a.active{ color:var(--gold-hi); }
.mobile-menu .mm-cta{ margin-top:1.8rem; display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding-top:130px; padding-bottom:130px; overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.3s ease; }
.hero-media img.loaded{ opacity:.5; }
.hero-media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(9,8,7,.72),rgba(9,8,7,.5) 38%,var(--bg) 97%),
            radial-gradient(900px 600px at 78% 22%,rgba(212,175,55,.18),transparent 60%); }
.hero .container{ position:relative; z-index:2; }
.hero-inner{ max-width:900px; }
.hero h1{ margin-top:1.6rem; }
.hero .lead{ margin-top:1.8rem; }
.hero-actions{ margin-top:2.6rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.hero-tags{ margin-top:3rem; display:flex; flex-wrap:wrap; gap:.7rem; }
.scroll-cue{ position:absolute; bottom:140px; left:50%; transform:translateX(-50%); z-index:2; color:var(--faint); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.scroll-cue i{ display:block; width:1px; height:38px; background:linear-gradient(var(--gold-core),transparent); animation:cue 2.4s var(--ease) infinite; }
@keyframes cue{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ---------- Hero overlapping info cards (spa-ref device) ---------- */
.hero-info-wrap{ position:relative; z-index:5; margin-top:-72px; }
.hero-info{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-card); }
.hero-info .cell{ background:rgba(16,14,12,.92); backdrop-filter:blur(10px); padding:1.7rem 1.8rem; display:flex; gap:1.05rem; align-items:flex-start; transition:background .4s; }
.hero-info .cell:hover{ background:rgba(24,20,15,.95); }
.hero-info .ic{ width:44px; height:44px; flex:none; border-radius:12px; display:grid; place-items:center; background:radial-gradient(circle at 30% 25%,rgba(212,175,55,.3),rgba(212,175,55,.05)); border:1px solid var(--line); }
.hero-info .ic svg{ width:21px; height:21px; stroke:var(--gold-hi); fill:none; }
.hero-info b{ display:block; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-core); margin-bottom:.35rem; font-weight:500; }
.hero-info p,.hero-info a{ font-size:.95rem; color:var(--text); line-height:1.5; }
.hero-info a:hover{ color:var(--gold-hi); }

/* ---------- Trust strip ---------- */
.strip{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:1.05rem 0; overflow:hidden; background:rgba(255,255,255,.012); }
.strip .track{ display:flex; gap:3.5rem; white-space:nowrap; animation:marq 34s linear infinite; width:max-content; }
.strip .track span{ font-family:var(--font-brand); font-size:.8rem; letter-spacing:.32em; text-transform:uppercase; color:var(--muted); display:inline-flex; gap:3.5rem; align-items:center; }
.strip .track span::after{ content:"✦"; color:var(--gold-core); }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ---------- Image frame (auto-swap placeholder) ---------- */
.frame{ position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); display:grid; place-items:center; isolation:isolate;
  background:radial-gradient(120% 100% at 30% 0%,rgba(212,175,55,.1),transparent 55%),linear-gradient(160deg,#16130d,#0c0b09 70%); }
.frame::before{ content:""; position:absolute; inset:0; opacity:.13; z-index:0;
  background:center/60px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='1'%3E%3Cpath d='M7 3h10v3a5 5 0 0 1-5 5 5 5 0 0 1-5-5V3Z'/%3E%3Cpath d='M11 11v7'/%3E%3Cpath d='M9 21h6'/%3E%3C/svg%3E"); }
.frame .ph-label{ position:relative; z-index:1; text-align:center; padding:1.2rem; }
.frame .ph-label b{ font-family:var(--font-brand); display:block; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-core); }
.frame .ph-label span{ font-size:.66rem; color:var(--faint); letter-spacing:.16em; text-transform:uppercase; margin-top:.5em; display:block; }
.frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; opacity:0; transition:opacity .85s ease; }
.frame img.loaded{ opacity:1; }
.frame.is-4-3{ aspect-ratio:4/3; } .frame.is-3-4{ aspect-ratio:3/4; } .frame.is-1-1{ aspect-ratio:1/1; }
.frame.is-16-9{ aspect-ratio:16/9; } .frame.is-3-2{ aspect-ratio:3/2; } .frame.is-5-4{ aspect-ratio:5/4; }
.frame-glow{ box-shadow:var(--shadow-card); }

/* ---------- Grids ---------- */
.grid{ display:grid; gap:clamp(20px,2.4vw,32px); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* ---------- Card base ---------- */
.card{ position:relative; border-radius:var(--radius-lg); border:1px solid var(--line-soft); overflow:hidden;
  background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.013));
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s,background .5s; }
.card::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(160deg,rgba(212,175,55,.55),transparent 42%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .5s; }
.card:hover{ transform:translateY(-8px); border-color:transparent; box-shadow:var(--shadow-card); background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.02)); }
.card:hover::before{ opacity:1; }
.card-pad{ padding:clamp(1.6rem,2.6vw,2.3rem); }

/* ---------- Treatment card (image-led, spa-ref) ---------- */
.treatment{ display:flex; flex-direction:column; }
.treatment .frame{ border-radius:0; border:0; border-bottom:1px solid var(--line-soft); }
.treatment .t-body{ padding:1.7rem 1.7rem 1.9rem; display:flex; flex-direction:column; flex:1; }
.treatment .t-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.treatment h3{ font-size:1.5rem; }
.treatment .price{ font-family:var(--font-display); font-size:1.5rem; color:var(--gold-hi); font-weight:600; white-space:nowrap; }
.treatment .price small{ display:block; font-family:var(--font-body); font-size:.66rem; color:var(--muted); letter-spacing:.04em; text-transform:none; font-weight:300; text-align:right; }
.treatment p{ color:var(--muted); margin-top:.85rem; font-size:.95rem; flex:1; }
.treatment .t-link{ margin-top:1.4rem; display:inline-flex; align-items:center; gap:.5em; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-core); transition:gap .35s,color .35s; }
.treatment .t-link svg{ width:1em; height:1em; stroke:currentColor; fill:none; }
.treatment:hover .t-link{ gap:.85em; color:var(--gold-hi); }

/* ---------- Simple icon service card ---------- */
.svc{ display:flex; flex-direction:column; }
.svc .ic{ width:54px; height:54px; border-radius:14px; display:grid; place-items:center; margin-bottom:1.3rem; background:radial-gradient(circle at 30% 25%,rgba(212,175,55,.28),rgba(212,175,55,.05)); border:1px solid var(--line); }
.svc .ic svg{ width:26px; height:26px; stroke:var(--gold-hi); fill:none; }
.svc h3{ font-size:1.4rem; }
.svc .price{ font-family:var(--font-display); font-size:1.45rem; color:var(--gold-hi); font-weight:600; margin-top:.2rem; }
.svc .price small{ font-family:var(--font-body); font-size:.72rem; color:var(--muted); letter-spacing:.03em; text-transform:none; font-weight:300; display:block; }
.svc p{ color:var(--muted); margin-top:.85rem; font-size:.94rem; flex:1; }
.svc .card-foot{ margin-top:1.5rem; display:flex; gap:.7rem; flex-wrap:wrap; }

/* ---------- Badges / ticks ---------- */
.badge{ display:inline-flex; align-items:center; gap:.45em; font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-core); border:1px solid var(--line); border-radius:100px; padding:.5em .95em; background:rgba(212,175,55,.05); }
.badge svg{ width:.95em; height:.95em; stroke:currentColor; fill:none; }
.ticks{ list-style:none; padding:0; display:grid; gap:.7rem; }
.ticks li{ position:relative; padding-left:1.9rem; color:var(--muted); font-size:.95rem; }
.ticks li::before{ content:""; position:absolute; left:0; top:.4em; width:1.05rem; height:1.05rem;
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

/* ---------- Split feature ---------- */
.split{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(32px,5vw,72px); align-items:center; }
.split.rev{ direction:rtl; } .split.rev>*{ direction:ltr; }

/* ---------- Price menu list ---------- */
.menu-list{ display:grid; gap:.2rem; }
.menu-row{ display:flex; align-items:baseline; gap:1rem; padding:1.05rem 0; border-bottom:1px solid var(--line-soft); }
.menu-row:last-child{ border-bottom:0; }
.menu-row .mr-name{ font-family:var(--font-display); font-size:1.3rem; color:var(--text); }
.menu-row .mr-name small{ display:block; font-family:var(--font-body); font-size:.82rem; color:var(--muted); letter-spacing:.02em; margin-top:.1rem; font-weight:300; }
.menu-row .mr-dots{ flex:1; border-bottom:1px dotted rgba(212,175,55,.3); transform:translateY(-4px); }
.menu-row .mr-price{ font-family:var(--font-display); font-size:1.4rem; color:var(--gold-hi); font-weight:600; white-space:nowrap; }

/* ---------- Wet cupping tiers ---------- */
.tier{ text-align:center; height:100%; display:flex; flex-direction:column; }
.tier.feat{ background:linear-gradient(170deg,rgba(212,175,55,.13),rgba(212,175,55,.02)); border-color:var(--line); }
.tier .tier-tag{ font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-core); }
.tier .cups{ font-family:var(--font-display); font-size:3.4rem; line-height:1; color:var(--gold-hi); font-weight:700; margin-top:1rem; }
.tier .cups small{ display:block; font-family:var(--font-body); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-top:.4em; font-weight:300; }
.tier .tprice{ font-family:var(--font-display); font-size:2.2rem; color:var(--gold-hi); margin:1rem 0 1.4rem; font-weight:600; }
.tier .ticks{ text-align:left; margin:0 auto; max-width:230px; }
.tier .btn{ margin-top:auto; }
.tier .tier-spacer{ margin-top:1.6rem; }

/* ---------- Package card ---------- */
.pkg{ display:flex; flex-direction:column; height:100%; }
.pkg-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.pkg-no{ font-family:var(--font-display); font-size:2.6rem; line-height:1; color:rgba(212,175,55,.34); font-weight:700; }
.pkg h3{ font-size:1.45rem; margin-top:.3rem; }
.pkg .ideal{ margin-top:1.25rem; padding-top:1.15rem; border-top:1px solid var(--line-soft); }
.pkg .ideal b{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-core); font-weight:500; }
.pkg .ideal p{ font-size:.85rem; color:var(--muted); margin-top:.5rem; }
.pkg .pricing{ margin-top:auto; padding-top:1.5rem; display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap; }
.pkg .was{ color:var(--faint); text-decoration:line-through; font-size:1rem; }
.pkg .now{ font-family:var(--font-display); font-size:2rem; font-weight:600; color:var(--gold-hi); line-height:1; }
.pkg .save{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--wa); border:1px solid rgba(37,211,102,.35); border-radius:100px; padding:.35em .7em; }

/* ---------- Review card ---------- */
.review{ display:flex; flex-direction:column; gap:1.2rem; height:100%; }
.review .stars{ color:var(--gold-core); letter-spacing:.2em; font-size:.95rem; }
.review p{ font-family:var(--font-body); font-size:1.02rem; line-height:1.72; color:var(--text); font-weight:400; }
.review .who{ display:flex; align-items:center; gap:.85rem; margin-top:auto; }
.review .av{ width:42px; height:42px; border-radius:50%; background:var(--gold-grad); display:grid; place-items:center; color:#1c1505; font-family:var(--font-brand); font-weight:700; font-size:.95rem; flex:none; }
.review .who b{ display:block; font-weight:500; font-size:.95rem; }
.review .who span{ font-size:.78rem; color:var(--faint); }

/* ---------- Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; }
.stat{ background:var(--bg-2); padding:2rem 1.4rem; text-align:center; }
.stat b{ font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3rem); display:block; line-height:1; }
.stat span{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:.7rem; display:block; }

/* ---------- Instagram grid ---------- */
.ig-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.4vw,16px); }
.ig-grid a{ position:relative; display:block; }
.ig-grid .frame{ border-radius:var(--radius); }
.ig-grid a::after{ content:""; position:absolute; inset:0; z-index:3; border-radius:var(--radius); background:rgba(9,8,7,.5); opacity:0; transition:opacity .4s; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%23fbf2b0' stroke-width='1.6'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; }
.ig-grid a:hover::after{ opacity:1; }

/* ---------- Accordion (FAQ) ---------- */
.accordion{ border-top:1px solid var(--line-soft); }
.acc-item{ border-bottom:1px solid var(--line-soft); }
.acc-q{ width:100%; background:none; border:0; text-align:left; cursor:pointer; padding:1.6rem 3rem 1.6rem 0; position:relative; font-family:var(--font-display); font-size:clamp(1.15rem,2vw,1.42rem); color:var(--text); transition:color .3s; }
.acc-q:hover{ color:var(--gold-hi); }
.acc-q .pm{ position:absolute; right:.3rem; top:50%; transform:translateY(-50%); width:24px; height:24px; }
.acc-q .pm::before,.acc-q .pm::after{ content:""; position:absolute; background:var(--gold-core); transition:.4s var(--ease); }
.acc-q .pm::before{ left:0; top:11px; width:24px; height:2px; }
.acc-q .pm::after{ left:11px; top:0; width:2px; height:24px; }
.acc-item.open .pm::after{ transform:scaleY(0); }
.acc-item.open .acc-q{ color:var(--gold-hi); }
.acc-a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.acc-a-inner{ padding:0 0 1.7rem; color:var(--muted); max-width:74ch; }

/* ---------- Forms / booking ---------- */
.booking-card{ border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.013)); padding:clamp(1.6rem,3.5vw,2.8rem); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-core); }
.field input,.field select,.field textarea{ background:rgba(255,255,255,.03); border:1px solid var(--line-soft); border-radius:12px; padding:.92em 1.1em; color:var(--text); font-size:.95rem; transition:border-color .3s,background .3s; width:100%; }
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold-core); background:rgba(212,175,55,.05); }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; background-size:18px; padding-right:2.6rem; cursor:pointer; }
.field option,.field optgroup{ background:#15120e; color:var(--text); }
.field input::placeholder,.field textarea::placeholder{ color:var(--faint); }
.radio-row{ display:flex; gap:.8rem; flex-wrap:wrap; }
.radio-chip{ flex:1; min-width:150px; position:relative; }
.radio-chip input{ position:absolute; opacity:0; pointer-events:none; }
.radio-chip label{ display:block; cursor:pointer; border:1px solid var(--line-soft); border-radius:12px; padding:.92em 1.1em; transition:.3s; color:var(--muted); font-size:.92rem; }
.radio-chip input:checked + label{ border-color:var(--gold-core); background:rgba(212,175,55,.08); color:var(--gold-hi); }

/* ---------- Info cards ---------- */
.info-card{ display:flex; gap:1.1rem; align-items:flex-start; padding:1.4rem 1.5rem; border-radius:var(--radius); border:1px solid var(--line-soft); background:var(--panel); transition:.4s; }
.info-card:hover{ border-color:var(--line); background:var(--panel-2); }
.info-card .ic{ width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center; background:radial-gradient(circle at 30% 25%,rgba(212,175,55,.28),rgba(212,175,55,.05)); border:1px solid var(--line); }
.info-card .ic svg{ width:22px; height:22px; stroke:var(--gold-hi); fill:none; }
.info-card b{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-core); font-weight:500; }
.info-card a,.info-card p{ color:var(--text); display:block; margin-top:.35rem; font-size:1rem; }
.info-card a:hover{ color:var(--gold-hi); }

/* ---------- Map ---------- */
.map-frame{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); filter:grayscale(.3) contrast(1.05) brightness(.85); }
.map-frame iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; }

/* ---------- Page hero ---------- */
.page-hero{ position:relative; padding-top:170px; padding-bottom:clamp(46px,7vw,80px); overflow:hidden; }
.page-hero::after{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(800px 420px at 80% -20%,rgba(212,175,55,.13),transparent 60%); }
.breadcrumb{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:1.3rem; }
.breadcrumb a{ color:var(--gold-core); } .breadcrumb a:hover{ color:var(--gold-hi); }
.page-hero h1{ font-size:clamp(2.6rem,6vw,4.4rem); }
.page-hero p{ margin-top:1.3rem; }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; border-radius:var(--radius-lg); overflow:hidden; padding:clamp(2.6rem,5vw,4.6rem); text-align:center; background:linear-gradient(150deg,rgba(212,175,55,.15),rgba(212,175,55,.03)); border:1px solid var(--line); }
.cta-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 50% -30%,rgba(251,242,176,.18),transparent 60%); pointer-events:none; }
.cta-band>*{ position:relative; }
.cta-band .btns{ margin-top:2rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ---------- Footer ---------- */
.site-footer{ position:relative; border-top:1px solid var(--line); padding-top:clamp(54px,8vw,88px); padding-bottom:2.4rem; background:linear-gradient(180deg,transparent,rgba(0,0,0,.4)); }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:clamp(28px,4vw,56px); }
.footer-brand .name{ font-family:var(--font-display); font-weight:700; font-size:1.18rem; letter-spacing:.01em; }
.footer-brand p{ color:var(--muted); margin-top:1.1rem; font-size:.92rem; max-width:34ch; }
.foot-col h4{ font-family:var(--font-brand); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-core); margin-bottom:1.3rem; font-weight:600; }
.foot-col ul{ list-style:none; padding:0; display:grid; gap:.72rem; }
.foot-col a{ color:var(--muted); font-size:.92rem; transition:color .3s; }
.foot-col a:hover{ color:var(--gold-hi); }
.foot-contact div{ margin-bottom:1rem; }
.foot-contact b{ display:block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:.25rem; }
.foot-contact a,.foot-contact span{ color:var(--text); font-size:.95rem; }
.socials{ display:flex; gap:.7rem; margin-top:1.5rem; flex-wrap:wrap; }
.socials a{ width:42px; height:42px; border-radius:12px; border:1px solid var(--line-soft); display:grid; place-items:center; transition:.4s; color:var(--muted); }
.socials a:hover{ border-color:var(--gold-core); color:var(--gold-hi); transform:translateY(-3px); background:rgba(212,175,55,.06); }
.socials svg{ width:19px; height:19px; }
.footer-bottom{ margin-top:clamp(38px,6vw,66px); padding-top:1.8rem; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.footer-bottom p{ font-size:.8rem; color:var(--faint); }
.footer-bottom .tag{ font-family:var(--font-brand); letter-spacing:.24em; text-transform:uppercase; font-size:.7rem; color:var(--gold-core); }

/* ---------- Floating WhatsApp ---------- */
.float-wa{ position:fixed; right:20px; bottom:20px; z-index:90; width:58px; height:58px; border-radius:50%; background:var(--wa); display:grid; place-items:center; box-shadow:0 14px 36px -10px rgba(37,211,102,.7); transition:transform .4s var(--ease); }
.float-wa:hover{ transform:scale(1.08); }
.float-wa svg{ width:30px; height:30px; }
.float-wa::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--wa); animation:ping 2.6s var(--ease) infinite; }
@keyframes ping{ 0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.7);opacity:0} }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); filter:blur(9px); transition:opacity .9s var(--ease),transform .9s var(--ease),filter 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; filter:blur(0); }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s } .reveal.d3{ transition-delay:.24s } .reveal.d4{ transition-delay:.32s } .reveal.d5{ transition-delay:.4s }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; filter:none; transition:none } *{ animation:none !important } html{ scroll-behavior:auto } }

/* ---------- Modern polish (additive) ---------- */
.scroll-prog{ position:fixed; top:0; left:0; height:2px; width:0; z-index:200; background:var(--gold-grad); box-shadow:0 0 14px rgba(212,175,55,.6); transition:width .12s linear; }
.frame img{ transition:opacity .85s ease, transform .9s var(--ease); }
.card:hover .frame img.loaded, .treatment:hover .frame img.loaded, .ig-grid a:hover .frame img.loaded, .split .frame:hover img.loaded{ transform:scale(1.055); }
.card:hover{ box-shadow:var(--shadow-card), 0 24px 70px -34px rgba(212,175,55,.28); }
.hero-media img{ animation:kenburns 28s ease-in-out infinite alternate; transform-origin:62% 42%; }
@keyframes kenburns{ from{ transform:scale(1.04); } to{ transform:scale(1.13); } }

/* ---------- Utilities ---------- */
.center{ text-align:center; } .mx-auto{ margin-inline:auto; }
.mt-1{ margin-top:.5rem } .mt-2{ margin-top:1rem } .mt-3{ margin-top:1.6rem } .mt-4{ margin-top:2.2rem } .mt-6{ margin-top:3.4rem }
.note{ font-size:.84rem; color:var(--faint); }
.pill-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.area-pill{ font-size:.8rem; color:var(--muted); border:1px solid var(--line-soft); border-radius:100px; padding:.5em 1.05em; transition:.3s; }
.area-pill:hover{ border-color:var(--gold-core); color:var(--gold-hi); }
.disclaimer{ border:1px dashed var(--line); border-radius:var(--radius); padding:1.4rem 1.6rem; color:var(--muted); font-size:.86rem; background:rgba(212,175,55,.025); }
.kicker-row{ display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; align-items:center; }
.text-cols{ columns:2; column-gap:3rem; }

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .nav{ display:none; }
  .menu-toggle{ display:flex; }
  .header-cta .btn-desktop{ display:none; }
}
@media (max-width:1024px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .ig-grid{ grid-template-columns:repeat(4,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .split{ grid-template-columns:1fr; }
  .split.rev{ direction:ltr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .text-cols{ columns:1; }
}
@media (max-width:680px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .hero{ min-height:auto; padding-top:120px; padding-bottom:48px; }
  .hero h1{ margin-top:1.2rem; }
  .hero .lead{ margin-top:1.3rem; }
  .hero-tags{ margin-top:1.7rem; gap:.5rem; }
  .display{ font-size:clamp(2.5rem,9vw,3.3rem); }
  .eyebrow{ letter-spacing:.22em; font-size:.66rem; }
  .badge{ font-size:.6rem; padding:.5em .85em; }
  .hero-info{ grid-template-columns:1fr; }
  .hero-info-wrap{ margin-top:18px; }
  .hero-info .cell{ padding:1.25rem 1.35rem; }
  .page-hero{ padding-top:128px; }
  .form-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; text-align:center; }
  .ig-grid{ grid-template-columns:repeat(2,1fr); }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  .cta-band .btns{ flex-direction:column; }
  .cta-band .btns .btn{ width:100%; }
  .scroll-cue{ display:none; }
  .menu-row{ flex-wrap:wrap; }
  .menu-row .mr-dots{ display:none; }
  .menu-row .mr-price{ margin-left:auto; }
  .breadcrumb{ font-size:.68rem; }
  .time-grid{ grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); }
}

/* ---------- Booking calendar ---------- */
.cal{ border:1px solid var(--line-soft); border-radius:14px; padding:1rem 1.1rem; background:rgba(255,255,255,.02); }
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.85rem; }
.cal-head .cal-title{ font-family:var(--font-display); font-size:1.25rem; color:var(--gold-hi); }
.cal-nav{ display:flex; gap:.4rem; }
.cal-nav button{ width:34px; height:34px; border-radius:9px; border:1px solid var(--line-soft); background:rgba(255,255,255,.03); color:var(--gold); cursor:pointer; font-size:1.2rem; line-height:1; display:grid; place-items:center; transition:.3s; }
.cal-nav button:hover:not(:disabled){ border-color:var(--gold-core); color:var(--gold-hi); }
.cal-nav button:disabled{ opacity:.3; cursor:not-allowed; }
.cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:.28rem; margin-bottom:.4rem; }
.cal-dow span{ text-align:center; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:.28rem; }
.cal-day{ aspect-ratio:1; border:1px solid transparent; border-radius:9px; background:rgba(255,255,255,.025); color:var(--text); font-family:var(--font-body); font-size:.9rem; cursor:pointer; display:grid; place-items:center; transition:.2s; }
.cal-day:hover:not(.is-disabled):not(.is-empty){ border-color:var(--gold-core); color:var(--gold-hi); }
.cal-day.is-empty{ background:transparent; cursor:default; }
.cal-day.is-disabled{ color:var(--faint); opacity:.3; cursor:not-allowed; }
.cal-day.is-today{ border-color:var(--line); }
.cal-day.is-selected{ background:var(--gold-grad); color:#1c1505; font-weight:600; border-color:transparent; }
.time-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:.5rem; }
.time-chip{ border:1px solid var(--line-soft); border-radius:9px; background:rgba(255,255,255,.025); color:var(--muted); padding:.62em .4em; font-size:.82rem; cursor:pointer; text-align:center; transition:.2s; }
.time-chip:hover{ border-color:var(--gold-core); color:var(--gold-hi); }
.time-chip.is-selected{ background:var(--gold-grad); color:#1c1505; font-weight:600; border-color:transparent; }
.cal-selected-note{ font-size:.9rem; color:var(--muted); text-align:center; }
.cal-selected-note b{ color:var(--gold-hi); }
.booking-ok{ text-align:center; padding:2.4rem 1rem; }
.booking-ok .ok-ic{ width:66px; height:66px; border-radius:50%; background:radial-gradient(circle at 30% 25%,rgba(37,211,102,.35),rgba(37,211,102,.08)); border:1px solid rgba(37,211,102,.4); display:grid; place-items:center; margin:0 auto 1.3rem; }
.booking-ok .ok-ic svg{ width:30px; height:30px; stroke:var(--wa); fill:none; }