/* =========================
   Velvet Amber — Full Site CSS
   Premium, warm, moody theme
   ========================= */

/* === Tokens === */
:root{
  /* Theme */
  --bg:#0e0f14;           /* page background */
  --paper:#171923;        /* cards/panels */
  --ink:#eef1f6;          /* main text */
  --muted:#adb4c2;        /* secondary 

text */
  --line:#242734;         /* borders/dividers */
  --gold:#e0b068;         /* accent */
  --gold-2:#c99a58;       /* hover/active */
  --shadow:0 12px 34px rgba(0,0,0,.35);

  /* Layout */
  --wrap:1240px;          /* slightly wider for premium feel */
  --radius:14px;

  /* Page hero image (override per page if needed) */
  --hero-image:url("img/hero-bed.webp");

  /* Offers helper */
  --blush-100:#f3e6df;
  --ink-40:rgba(20,20,20,.45);
}

/* === Base === */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
img{display:block;max-width:100%;height:auto}
body{
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,Segoe 

UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
}
a{text-decoration:none;color:inherit}
.fx-wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.fx-center{text-align:center}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}

/* === Header / Nav === */
.fx-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(18,19,28,.92), rgba(18,19,28,.84));
  backdrop-filter:blur(8px);
border-bottom:1px solid #1c1f2b;
  box-shadow:var(--shadow);
}
.fx-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}
.fx-logo 

img{height:38px;width:auto}
.fx-nav{display:flex;gap:18px;align-items:center}
.fx-nav a{padding:10px 8px;border-radius:10px;color:var(--ink);font-weight:700}
.fx-nav a:hover{background:#121521}

/* Buttons (unified) */
.fx-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:12px 18px;
  font-weight:800; letter-spacing:.2px;
  border-radius:999px; border:2px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease,border-color .2s ease;
}
.fx-btn--primary{background:var(--gold);border-color:var(--gold);color:#121212}
.fx-btn--primary:hover{background:#f0c781;border-

color:#f0c781;transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.28)}
.fx-btn--ghost{background:transparent;color:var(--gold);border-color:var(--gold)}
.fx-btn--ghost:hover{background:#121521;border-color:var(--gold-2)}
.fx-btn--gold{background:var(--gold);color:#121212;border-color:var(--gold)}
.fx-btn--gold:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.28);background:#f0c781;border-color:#f0c781}
.fx-btn--whatsapp{background:#25D366;color:#fff;border-color:#25D366}
.fx-btn--whatsapp:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.28);background:#1ccf5e;border-color:#1ccf5e}

@media (max-width:520px){
  .fx-hero__headline{font-size:clamp(24px,6vw,32px)}
  .fx-hero__cta .fx-btn{padding:10px 14px}
}

/* Mobile nav trigger + panel */
.fx-menu{display:none;border:1px solid var(--line);background:#0d1117;color:var(--ink);border-radius:10px;padding:8px 10px}
@media (max-width:960px){  .fx-nav{display:none}
.fx-menu{display:inline-block}
}
.fx-mnav{
  position:fixed; inset:0; z-index:60;
  display:grid; align-content:start; gap:0;
  background:rgba(10,12,18,.92);
  backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transform:translateY(-8px);
  transition:opacity .2s ease, transform .2s ease;
}
.fx-mnav.open{opacity:1; pointer-events:auto; transform:none}
.fx-mnav a{padding:14px 18px;border-top:1px solid var(--line);background:#131821;color:var(--ink)}

/* === Hero (Centered) === */
.fx-hero{position:relative;
  min-height:clamp(420px,56vh,660px);
  display:grid; place-items:center;
  text-align:center; overflow:hidden;
  background:var(--hero-image) 

center/cover no-repeat;
}
.fx-hero::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 50% at 30% 40%, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(9,10,14,.75) 0%, rgba(9,10,14,.35) 70%, rgba(9,10,14,.55) 100%);
  pointer-events:none;
}
.fx-hero__center{position:relative;z-index:1;display:grid;gap:16px;padding:16px}

/* Gradient headline */
.fx-hero__headline{
  background:linear-gradient(90deg,#fff3d2 0%, #f2c77f 40%, 

#e0b068 70%, #fff5dd 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  font-weight:900; letter-spacing:.3px; line-height:1.15;
  font-size:clamp(28px,5vw,44px);
}

/* CTA row */
.fx-hero__cta{
  display:flex; align-items:center; justify-content:center;
  gap:12px; 
flex-wrap:wrap; margin-top:8px;
}

/* Optional tag chip if used */
.fx-hero__tag{display:inline-block;background:rgba(0,0,0,.55);color:#fff;font-weight:900;
  letter-spacing:.2px;padding:10px 14px;border-radius:10px;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 24px rgba(0,0,0,.25);
  margin-bottom:10px; backdrop-filter:blur(2px);
}

/* === Section title pill + divider === */
.fx-title{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.fx-title span{
  position:relative; 
z-index:1;
  background:linear-gradient(90deg,#1b212b,#151a22);
  padding:6px 12px; border-radius:999px; border:1px solid var(--line);
  box-shadow:var(--shadow); font-weight:900; color:var(--ink);
}
.fx-title::before{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}

/* === Sections & 

Grids === */
.fx-section{padding:32px 0} /* compact rhythm */
.fx-grid{display:grid;gap:14px}
.fx-grid--cards{grid-template-columns:repeat(4, minmax(0, 1fr));gap:16px}
.fx-grid--3{grid-template-columns:repeat(3, 1fr)}
@media (max-width:1200px){.fx-grid--cards{grid-template-columns:repeat(3, 1fr)}}
@media (max-width:1024px){.fx-grid--3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.fx-grid--cards{grid-template-columns:repeat(2, 1fr)} .fx-grid--3{grid-template-columns:1fr}}

/* === Therapist Cards === */
.fx-card{background:var(--paper);border:1px solid #202332;border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.fx-card img{aspect-ratio:3/4;object-fit:cover;width:100%}
.fx-card__meta{display:flex;align-items:center;justify-content:space-between;padding:10px 12px}
.fx-stars{color:#f6c453}

/* === Specialty / Band === */
.fx-band{background:linear-gradient(180deg,#141a22,#12171f);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fx-band__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:center;padding:24px 0}
.fx-band__text h3{font-size:clamp(20px,3.2vw,28px);margin:0 0 8px}
.fx-band__text p{max-width:55ch;margin-bottom:12px;color:var(--muted)}
.fx-band__media img{width:100%;border-radius:12px;box-shadow:var(--shadow);aspect-

ratio:16/10;object-fit:cover}
@media (max-width:900px){.fx-band__grid{grid-template-columns:1fr}}

/* Full-background variant of the band */
.fx-band--cover{
position:relative;
  background:var(--band-image) center/cover no-repeat;
  border:0;
}
.fx-band--cover::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.45));
}
.fx-band--cover > .fx-wrap{position:relative;z-index:1}
.fx-band--cover .fx-band__grid{grid-template-columns:1fr;gap:0;padding:clamp(28px,6vw,56px) 0}
.fx-band--cover .fx-band__media{display:none}
.fx-band--cover .fx-band__text h3{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.fx-band--cover .fx-band__text p{color:#f1f1f1;max-width:60ch}
.fx-band--cover .fx-btn--primary{background:var(--gold);border-color:var(--gold);color:#000}

/* === Features (if used) === */
.fx-feature{text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.fx-circle{width:120px;height:120px;margin:0 auto 10px;border-radius:50%;overflow:hidden;border:6px solid rgba

(255,255,255,.06);box-shadow:var(--shadow)}
.fx-circle img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.fx-feature h4{margin:6px 0;font-size:1.05rem}
.fx-feature p{color:var(--muted)}

/* === Steps band (if used) === */
.fx-steps{background:linear-gradient(180deg,#141a22,#12171f);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fx-steps__grid{display:grid;grid-template-columns:1fr;gap:14px;padding:22px 0}
.fx-steps__text h3{font-size:clamp

(20px,3vw,26px);margin:0 0 8px}
.fx-steps__text p{color:var(--muted);margin-bottom:12px}

/* === Services / Rates cards (if used) === */
.fx-cards{margin-top:4px}
.fx-svc

{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.fx-svc img

{width:100%;aspect-ratio:16/10;object-fit:cover}
.fx-svc__body{padding:14px;display:grid;gap:10px}
.fx-svc__body h4{margin:0}
.fx-svc__body p{color:var(--muted)}
.fx-svc__row{display:grid;grid-template-columns:1fr 120px;gap:8px;align-items:center}
.fx-svc__row input{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#10141b;color:var(--ink)}

/* === Reviews strip === */
.fx-rev{background:linear-gradient(180deg,#141726,#0e101a);position:relative}
.fx-rev::before{content:"";position:absolute;inset:0;background:rgba(10,12,18,.6)}
.fx-rev .fx-wrap{position:relative}
.fx-title--light span{background:linear-gradient

(90deg,#1b212b,#1b212b);color:var(--ink)}
.fx-rev__row{display:grid;gap:14px;grid-template-columns:1fr 1fr;margin-top:8px}
.fx-rev blockquote{
  background:var(--paper); 

border-left:6px solid var(--gold); padding:14px;
  border-radius:10px; box-shadow:var(--shadow); color:#e9eef6;
}
@media (max-width:800px){.fx-rev__row{grid-template-columns:1fr}}

/* === Blog cards === */
.fx-post{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.fx-post img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fx-post__body{padding:14px;display:grid;gap:10px}
.fx-post__meta{font-weight:800;color:var(--gold);text-

transform:uppercase;font-size:.85rem}

/* === Footer === */
.fx-foot{background:#0c0e14;color:#cdd4e1;margin-top:24px;border-top:1px solid #10131b}
.fx-foot__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:18px 0}
.fx-foot h5{margin:0 0 6px;color:#fff}
.fx-copy{text-align:center;padding:10px 0;border-top:1px 

solid #1b2230;color:#a9b3c4;font-size:.9rem}
@media (max-width:720px){.fx-foot__grid{grid-template-columns:1fr}}

/* === Forms (dark-friendly) === */
input,textarea{background:#10141b;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
textarea{min-height:140px;resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--gold-2);outline-offset:2px}

/* === Offers section (cards + stats) === */
.fx-offers{
  background:linear-gradient

(180deg, var(--paper) 0%, #f9f4f1 100%);
  position:relative; padding:clamp(28px,5vw,48px) 0 0; overflow:hidden;
}
.fx-offers__title{
  font-size:clamp(22px,2.6vw,32px); 

line-height:1.4; font-weight:700;
  color:var(--ink); letter-spacing:.2px; max-width:42ch;
  margin:0 auto clamp(16px,3vw,22px);
}
/* slim center “link button” under the headline */
.fx-link-btn{
  display:inline-block; font-weight:800; letter-spacing:.15em; font-size:.85rem; color:var(--ink);
  border-top:1px solid rgba(0,0,0,.18); 

border-bottom:1px solid rgba(0,0,0,.18);
  padding:10px 18px; margin-bottom:clamp(20px,4vw,34px); text-transform:uppercase; opacity:.9;
}
.fx-offers__cards{

display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(14px,2vw,22px); align-items:end; margin-bottom:clamp(26px,5vw,44px);
}
.fx-offer{
background:var(--paper); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:clamp(18px,2.2vw,24px); text-align:center;
transition:transform .25s ease, box-shadow .25s ease;
}
.fx-offer:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.12)}
.fx-offer--raised {transform:translateY(-18px)}
@media (max-width:900px){.fx-offer--raised{transform:none}}
.fx-offer__icon{
  width:88px;height:88px;margin:0 auto 12px;display:grid;place-items:center;border-radius:50%;background:var(--paper);
}
.fx-offer__icon svg{width:64px;height:64px}
.fx-offer h3{margin:8px 0 6px;font-size:1.05rem;color:var(--ink);font-weight:800}
.fx-offer p{color:var(--muted);font-size:.95rem;line-height:1.55;max-width:36ch;margin:0 auto 8px}
.fx-offer__cta{display:inline-block;font-weight:800;color:var(--gold);margin-top:4px}

/* Stats strip */
.fx-stats{ position:relative; background:var(--stats-image, none) 

center/cover no-repeat; min-height:220px;
}
.fx-stats::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.55));
  backdrop-filter:blur(2px);
}
.fx-stats__row{
  position:relative; z-index:1; display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,2vw,24px); padding:clamp(26px,6vw,46px) 0; text-align:center;
}
.fx-stat__num{font-size:clamp(26px,4vw,40px);font-weight:900;color:#fff;letter-spacing:.5px}
.fx-stat__label{color:#f1f1f1;font-weight:700;line-height:1.35;margin-top:4px;opacity:.95}
@media (max-width:1024px){.fx-offers__cards{grid-template-columns:1fr}}
@media (max-width:720px){.fx-stats__row{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.fx-stats__row{grid-template-columns:1fr}}

/* === Full-bleed layout (opt-in) === */
.fullbleed .fx-wrap{max-width:100vw;padding-left:24px;padding-right:24px}

/* === Motion preferences === */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}

/* ===== Massage Services (mosaic) ===== */
.fx-services{
  background: radial-gradient(1200px 700px at 50% 0%, rgba(255,215,160,.04), transparent 60%),
              linear-gradient(180deg, #0e0e11, #111216 70%, #0e0e11 100%);
  padding: clamp(36px, 6vw, 64px) 0;
  color: #e9e9ec;
}
.fx-services__title{
  text-align: center;
  margin-bottom: 10px;
}
.fx-services__line{
  text-align: center;
  opacity: .85;
  font-weight: 700;
  letter-spacing: .2px;
}
.fx-services__intro{
  text-align: center;
  max-width: 78ch;
  margin: 14px auto 26px;
  color: #cfcfd7;
}

.fx-services__grid{
display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.4vw, 22px);
  margin-top: clamp(16px, 3vw, 24px);
}

.svc-card{
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: end;
  box-shadow: 0 14px 32px rgba(0,0,0,.45);
  border: 2px solid rgba(255,255,255,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.svc-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(0,0,0,.6);
}

/* framed glow colors (match site palette) */
.svc-card--amber{ box-shadow: 0 14px 32px rgba(0,0,0,.45), 0 0 0 2px rgba(202,161,94,.25) inset; }
.svc-card--rose { box-shadow: 0 14px 32px rgba(0,0,0,.45), 0 0 0 2px rgba(224,150,170,.25) inset; }
.svc-card--blue { box-shadow: 0 14px 32px rgba(0,0,0,.45), 0 0 0 2px rgba(120,170,255,.25) inset; }

/* image + overlay */
.svc-card__media img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: saturate(.92) contrast(.96) brightness(.9);
  transform: scale(1.02);
}
.svc-card__overlay{
  position: absolute; 

inset: 0;
  background:radial-gradient(70% 55% at 50% 38%, rgba(0,0,0,.05), rgba(0,0,0,.35) 70%), linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.15));
}

/* text block */
.svc-card__inner{
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 22px;
  text-align: center;
}
.svc-card__title{
  margin: 0 0 6px;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 900;
  letter-spacing: .3px;
  /* gold gradient title to match site */
  background: linear-gradient(90deg, var(--gold), 

#e1c17f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.svc-card__price{
  margin: 0;
  color: 

#eaeaea;
  opacity: .9;
  font-weight: 700;
}

/* responsive */
@media (max-width: 1024px){
  .fx-services__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 

640px){
  .fx-services__grid{ grid-template-columns: 1fr; }
  .svc-card{ aspect-ratio: 16 / 11; }
}
/* ===== Background image layer for Massage Services ===== */
.fx-

services.has-bg{
  position: relative;
  overflow: hidden;
}
.fx-services.has-bg::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--services-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(.95) contrast(.95) brightness(.9);
  z-index: 0;     /* sits under content */
}
.fx-services.has-bg::after{
  content:"";
  position:absolute; inset:0;
  /* soft dark vignette so text pops over busy photos */
  

background:radial-gradient(1200px 600px at 50% 0%, rgba(0,0,0,.25), transparent 60%), linear-gradient(180deg, rgba(10,10,12,.55), rgba(10,10,12,.75) 70%, rgba(10,10,12,.9));
z-index: 0;
}
.fx-services.has-bg > .fx-wrap,
.fx-services.has-bg *{ position: relative; z-index: 1; }

/* ===== Reviews: avatar-over-card replica ===== */
.fx-rev.fx-rev--cards{ position: relative; }
.fx-rev.fx-rev--cards .fx-title span{ /* keep your existing look */ }

/* grid: 4 on desktop, responsive down */
.reviews-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 18px;
}
@media (max-width: 1100px){
  .reviews-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .reviews-grid{ grid-template-columns: 1fr; }
}

/* card */
.review-card2{
  position: relative;
  background: rgba(34,34,36,.92);    

      /* dark, not pure black to match your site */
  border-radius: 12px;
  padding: 58px 18px 16px;                 /* extra top for the avatar overlap */
  color: #e6e6e6;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.06);
}

/* avatar ring overlapping the card */
.review-card2 .avatar-ring{
  

position:absolute;
  top:-46px; left:50%;
  transform: translateX(-50%);
  width: 96px; height: 96px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 6px 18px 
rgba(0,0,0,.35),
    inset 0 0 0 6px rgba(0,0,0,.35);       /* outer ring shadow */
  background: #1a1a1b;
}
.review-card2 .avatar-ring img{
  width:100%; height:100%; 
object-fit: cover;
}

/* title, text, stamp */
.review-card2 .r-name{
  text-align:center;
  color:#fff;
  font-weight: 800;
  letter-spacing:.8px;
  margin: 14px 0 8px;
}
.review-card2 .r-text{
  color:#d2d2d2;
  line-height:1.65;
  font-size:.97rem;
}
.review-card2 .r-stamp{
  display:block;
  margin-top:12px;
  color:#f0f0f0;
  font-weight:800;
  font-size:.92rem;
}

/* subtle bottom rule like the screenshot, using your brand gold for the lead-in */
.fx-rev__rule{
  height: 6px;
  margin: 18px 0 0;
  border-radius: 999px;
  background:linear-gradient(90deg,
      var(--gold, #caa15e) 0 22%,
      rgba(255,255,255,.1) 22% 100%);
  opacity: .8;
}


/* Wider container option */
:root{ --wrap-wide: 1480px; } /* stretch but still safe on ultra-wide screens */
.fx-wrap--wide{ max-width: var(--wrap-wide); }

/* Compact + stretched intro band */
.fx-intro{
  /* slightly tighter vertical rhythm */
  padding: clamp(28px, 5vw, 48px) 0;
  background:
    radial-gradient(1200px 420px at 50% -20%, rgba(255,255,255,.45), rgba(255,255,255,0)),
    linear-gradient(180deg, var(--bg), var(--bg));
}

.fx-intro__title{
  margin: 0 auto 8px;           /* tighter spacing */
  max-width: 36ch;              /* still readable */
  font-size: clamp(26px, 4vw, 38px); /* a touch smaller for compactness */
  line-height: 1.2;
}

.fx-intro__lead,
.fx-intro__body,
.fx-intro__note{
  /* stretch the readable line a bit so the section feels wider */
  max-width: 110ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}

.fx-intro__lead{ margin-top: 6px; }
.fx-intro__body{ margin-top: 10px; }
.fx-intro__note{
  margin-top: 12px;
  font-weight: 800;
  color: color-mix(in srgb, var(--ink) 70%, var(--gold));
}

/* On very small screens keep things tight but comfy */
@media (max-width: 560px){
  .fx-intro{ padding: 24px 0; }
  .fx-intro__title{ max-width: 28ch; }
  .fx-intro__lead, .fx-intro__body, .fx-intro__note{ max-width: 70ch; }
}

/* ===== UNIQUE SHOWCASE (staggered, premium) ===== */
.fx-showcase{
  position: relative;
  padding: clamp(28px, 5vw, 56px) 0;
  background:
    radial-gradient(70% 40% at 10% 10%, rgba(202,161,94,.09), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.08));
}
.fx-showcase__lead{
  max-width: 120ch;
  margin: 6px auto 12px;
  text-align: center;
  color: var(--muted);
}

.showcase-row{
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) 1.3fr;
  gap: clamp(18px, 3vw, 36px);
  align-items: center;
  max-width: 1600px;               /* stretch but keep readable */
  margin: clamp(14px, 3vw, 26px) auto;
  padding: 0 clamp(10px, 2vw, 18px);
}
.showcase-row--mirror{
  grid-template-columns: 1.3fr minmax(280px, 1.1fr);
}

/* Text block */
.showcase-copy{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: clamp(16px, 2.4vw, 24px);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.chip{
  display:inline-block;
  font-weight: 900;
  letter-spacing:.4px;
  color:#000;
  background: linear-gradient(135deg, var(--gold), #e1c17f);
  border: 1px solid rgba(0,0,0,.15);
  padding: 6px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.showcase-title{
  margin: 4px 0 8px;
  font-size: clamp(20px, 2.3vw, 28px);
  background: linear-gradient(90deg, #fff, #f0e5cf 60%, #d9c39a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.showcase-text{ color: #e8e8e8; opacity:.92; }

/* Image block with diagonal mask + hover luxe sheen */
.showcase-media{
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(0,0,0,.30);
  isolation: isolate;
}
.showcase-media img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transform: scale(1.02);
  transition: transform .5s ease;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);       /* subtle diagonal */
}
.showcase-media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35)),
    radial-gradient(120% 60% at 10% 10%, rgba(202,161,94,.18), transparent 50%);
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: opacity .35s ease;
}
.showcase-media:hover img{ transform: scale(1.05); }
.showcase-media:hover::after{ opacity: .85; }

/* Responsive */
@media (max-width: 980px){
  .showcase-row,
  .showcase-row--mirror{
    grid-template-columns: 1fr;
  }
  .showcase-media{ aspect-ratio: 16/11; }
}

/* === Reviews: Magazine Rail (uses your existing palette vars) === */
.fx-rev.fx-rev--rail{ position:relative; padding:clamp(28px,5vw,56px) 0; }
.fx-rev.fx-rev--rail .fx-title{ margin-bottom:clamp(12px,2vw,18px); }

/* Horizontal rail on mobile, 2x2 grid on desktop */
.rev-rail{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(2,1fr);
  align-items:start;
}
@media (max-width:960px){
  .rev-rail{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(280px,85vw);
    overflow-x:auto;
    padding:2px 0 8px;
    gap:14px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
}

/* Tile */
.rev-tile{
  position:relative;
  display:grid;
  grid-template-columns:76px 1fr;
  gap:12px;
  align-items:start;
  scroll-snap-align:center;
}

/* Avatar */
.rev-avatar{
  width:76px;height:76px;border-radius:999px;object-fit:cover;object-position:center;
  border:3px solid rgba(0,0,0,.45);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  background:#000;
}

/* Speech bubble card — translucent so it matches whatever bg you use */
.rev-bubble{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:12px 14px;
  color:#eee; /* keeps legible on your darker sections */
  box-shadow:0 16px 40px rgba(0,0,0,.28);
  position:relative;
}
.rev-bubble::after{
  content:"";
  position:absolute; left:-8px; top:22px;
  width:0;height:0;border:8px solid transparent;border-right-color:rgba(255,255,255,.12);
  filter:drop-shadow(-2px 2px 0 rgba(0,0,0,.15));
}

/* Headline row */
.rev-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px;
}
.rev-name{
  font-weight:900; letter-spacing:.6px; font-size:.98rem;
  background:linear-gradient(90deg,#fff,#f1e3c4 65%, var(--gold,#caa15e));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rev-stamp{ color:#d6d6d6; font-size:.86rem; opacity:.9; }

/* Text */
.rev-text{ color:#e8e8e8; line-height:1.65; }

/* Divider under section (kept from your theme) */
.fx-rev__rule{
  height:2px; margin-top:clamp(14px,2vw,18px);
  background:linear-gradient(90deg,transparent, rgba(210,170,109,.55), transparent);
  border-radius:999px;
}

/* Densify for very small screens */
@media (max-width:520px){
  .rev-tile{ grid-template-columns:68px 1fr; }
  .rev-avatar{ width:68px; height:68px; }
  .rev-bubble{ padding:10px 12px; }
}

/* ===== BLOG — Editorial Feature + Rail ===== */
.fx-blog .blog-editorial{
  display:grid; gap:18px;
  grid-template-columns: 1.3fr .7fr;
  align-items: stretch;
}
@media (max-width: 980px){
  .fx-blog .blog-editorial{ grid-template-columns:1fr; }
}

/* Featured lead */
.blog-lead{
  position:relative; border-radius:16px; overflow:hidden;
  box-shadow: var(--shadow);
  background: var(--paper);
  isolation:isolate;
}
.lead-link{ display:block; position:relative; height:100%; }
.lead-img{
  width:100%; height: clamp(260px, 42vw, 440px);
  object-fit: cover; transform: scale(1.02);
  transition: transform .6s ease;
  filter: contrast(.98) saturate(1.02);
}
.lead-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(90% 80% at 20% 20%, rgba(0,0,0,.15) 0%, transparent 70%),
    linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.2));
  mix-blend-mode: multiply; pointer-events:none;
}
.lead-inner{
  position:absolute; inset:auto 0 0 0; padding:18px 16px 16px;
  display:grid; gap:8px; color:#fff;
}
.lead-title{
  font-size: clamp(22px, 3.2vw, 34px);
  line-height:1.15; font-weight:900;
  letter-spacing:.2px;
  text-shadow:0 2px 16px rgba(0,0,0,.45);
}
.lead-sub{ color:#f1f1f1; max-width:70ch; }
.tag{
  display:inline-block; font-weight:800; font-size:.82rem;
  color:#000; background: var(--gold); padding:6px 10px; border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,.15);
}

/* Hover effect */
.blog-lead:hover .lead-img{ transform: scale(1.06); }

/* Right rail cards */
.blog-rail{ display:grid; gap:16px; grid-template-rows: 1fr 1fr; }
.rail-card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--line);
  border-radius:16px; overflow:hidden; display:grid;
  grid-template-columns: 1.1fr 1fr; align-items: stretch;
  box-shadow: var(--shadow);
}
@media (max-width: 640px){
  .rail-card{ grid-template-columns:1fr; }
}
.rail-link{ display:contents; }
.rail-img{
  width:100%; height:100%; object-fit:cover; min-height:180px;
  filter:contrast(.98) saturate(1.02);
}
.rail-body{ padding:12px 14px; display:grid; gap:6px; }
.rail-title{ margin:0; font-size:1.05rem; color:var(--ink); }
.rail-snippet{ color:var(--muted); }

/* Mini strip */
.blog-strip{
  display:grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr);
  gap:12px; margin-top:16px; overflow:auto; padding-bottom:6px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.mini{
  position:relative; border-radius:12px; overflow:hidden; scroll-snap-align:center;
  border:1px solid var(--line); background:var(--paper);
  box-shadow:var(--shadow);
}
.mini img{ width:100%; height:140px; object-fit:cover; display:block; }
.mini-title{
  position:absolute; left:10px; bottom:10px; right:10px;
  padding:6px 10px; font-weight:800; color:#fff;
  background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
  border-radius:999px; text-shadow:0 2px 8px rgba(0,0,0,.4);
}
.mini:hover img{ transform:scale(1.04); transition: transform .35s ease; }

/* ===== Edge-to-edge utility (full screen stretch) ===== */
.fx-bleed{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  /* keep section bg if any; inner content stays aligned via .fx-wrap */
}
.fx-bleed > .fx-wrap{
  max-width: min(1600px, 96vw);
  padding-left: clamp(12px, 3vw, 28px);
  padding-right: clamp(12px, 3vw, 28px);
}

/* ===== Compact spacing for these sections ===== */
.fx-rev.fx-rev--rail{ padding: clamp(20px, 3.8vw, 40px) 0; }
.fx-blog.fx-section{ padding: clamp(20px, 3.8vw, 40px) 0; }

/* Slightly tighter gaps to feel compact */
.rev-rail{ gap: 14px; }
.blog-strip{ gap: 10px; }
.fx-blog .blog-editorial{ gap: 16px; }
.rail-body{ padding: 10px 12px; }

/* Keep titles snug */
#reviews .fx-title,
#blog .fx-title{ margin-bottom: 10px; }

/* ===== Pricing page – matches site colors ===== */
body.pricing-page{ background: var(--bg); color: var(--ink); }

/* Top banner */
.headline{
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.15)),
              linear-gradient(90deg, rgba(0,0,0,.2), transparent 25%, transparent 75%, rgba(0,0,0,.2)),
              var(--bg);
  padding: 28px 0 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.headline h1{
  margin:0;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 900;
  letter-spacing:.2px;
  background: linear-gradient(90deg, #fff, #ffe7bf 55%, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.headline p{ color:#ddd; }

/* Currency tabs */
.price-tabs{ display:flex; gap:8px; margin:12px 0 16px; }
.price-tabs .tab{
  background:#0f0f10; color:#eaeaea; border:1px solid #2a2a2a;
  border-radius:999px; padding:8px 14px; font-weight:800;
}
.price-tabs .tab.is-active{ background: var(--gold); color:#000; border-color: var(--gold); }

/* Card grid */
.cards{
  display:grid; gap:18px;
  grid-template-columns: repeat(12, 1fr);
}
.cards .left{ grid-column: span 6; }
.cards .right{ grid-column: span 6; }
.cards .full{ grid-column: 1 / -1; }
@media (max-width: 980px){
  .cards .left, .cards .right{ grid-column: 1 / -1; }
}

/* Price boxes */
.pricing .card{
  background: #111; color:#fff; border:1px solid #222;
  border-radius: var(--radius); padding: 18px; box-shadow: 0 12px 38px rgba(0,0,0,.35);
}
.pricing .card.gold{ background: #181612; border-color:#2a2418; }
.pricing .card h3{
  margin:0 0 10px; text-align:center;
  font-size: clamp(18px, 2.4vw, 22px); color: var(--gold);
}

/* Table */
.price-table{ width:100%; border-collapse: collapse; }
.price-table td{
  padding: 12px 10px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.price-table td:last-child{ text-align: right; font-weight: 900; }

/* Button link */
.pill-cta{
  display:block; text-align:center; margin-top:12px; font-weight:800;
  background: var(--gold); color:#000; border-radius: 999px; padding: 10px 14px;
  text-decoration:none; box-shadow: 0 10px 22px rgba(0,0,0,.25);
}
.pill-cta:hover{ filter: brightness(1.05); }

/* Notes */
.note p{ margin: 8px 0; color:#ddd; }

/* Make the section edge-to-edge but compact (you already use fx-bleed) */
.pricing.fx-bleed > .fx-wrap{ max-width: min(1200px, 96vw); }

/* --- Card base stays the same --- */
.fx-card{ position:relative; border-radius:16px; overflow:hidden; outline:none; }
.fx-card img{ aspect-ratio:3/4; object-fit:cover; width:100%; transition:transform .35s ease; }

/* Always-visible tags band (no hover needed) */
.fx-card__tags{
  position:absolute; left:10px; right:10px; bottom:10px;
  display:flex; flex-wrap:wrap; gap:8px;
  padding:10px; border-radius:12px;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
}

/* Pills with subtle moving sheen */
.fx-chip{
  display:inline-block;
  font-weight:800; font-size:.85rem;
  color:#fff;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(90deg, rgba(224,176,104,.25), rgba(255,255,255,.10), rgba(224,176,104,.25));
  background-size:200% 100%;
  animation:fx-sheen 3.4s linear infinite;
  white-space:nowrap;
}

/* slightly vary timing across chips for a lively feel */
.fx-chip:nth-child(2){ animation-delay:.6s }
.fx-chip:nth-child(3){ animation-delay:1.2s }
.fx-chip:nth-child(4){ animation-delay:1.8s }

/* Keyframes for sheen */
@keyframes fx-sheen{
  0%   { background-position: 0% 0 }
  100% { background-position: 200% 0 }
}

/* Keep your meta strip readable over tags area */
.fx-card__meta{
  position:absolute; left:10px; top:10px; right:auto;
  background:rgba(0,0,0,.55);
  color:#fff; border-radius:10px; padding:6px 10px;
  border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; gap:10px;
}

/* Accessible focus (still visible, no hover dependence) */
.fx-card:focus-visible{
  box-shadow:0 0 0 3px rgba(224,176,104,.55), 0 12px 34px rgba(0,0,0,.35);
}

/* Center the last 3 cards in a 4-col layout (desktop) */
@media (min-width: 1200px){
  .fx-grid--cards.fx-grid--center-last3{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fx-grid--cards.fx-grid--center-last3 > .fx-card:nth-last-child(3){ grid-column: 2; }
}

/* tiny nudge for spacing before the centered row (optional) */
.fx-grid--cards.fx-grid--center-last3 > .fx-card:nth-last-child(3){
  margin-top: 4px;
}

/* default: keep ghost out */
.fx-card--ghost{ display:none; }

/* desktop 4-column only: make ghost occupy the first cell of the last row */
@media (min-width:1200px){
  .fx-grid--cards{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .fx-card--ghost{
    display:block;
    visibility:hidden;         /* takes space, not visible */
    pointer-events:none;
    border:0; box-shadow:none; /* ensure no visual footprint */
    height:0; padding:0;       /* no extra height; it just reserves the grid cell */
    margin:0;
  }
}

/* =========================
   PROFILE PAGE (model.html)
   Replica layout, Velvet-Amber colors
   ========================= */

/* breadcrumb */
.crumb{
  display:flex; gap:8px; align-items:center;
  font-weight:700; color:#cfd6e4; opacity:.9;
  padding:12px 0; font-size:.92rem;
}
.crumb a{ color:var(--ink); }
.crumb span{ opacity:.7 }

/* name band */
.p-hero{ padding:14px 0 8px; border-bottom:1px solid var(--line); }
.p-hero h1{
  margin:0; font-weight:900; letter-spacing:.2px;
  font-size:clamp(22px,2.8vw,28px);
  background:linear-gradient(90deg,#fff,#ffe7bf 55%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.p-sub{ margin-top:4px; color:var(--muted) }

/* main two-column grid */
.p-grid{
  display:grid; gap:18px; padding:14px 0 26px;
  grid-template-columns: 340px 1fr;
}
@media (max-width: 980px){ .p-grid{ grid-template-columns:1fr; } }

/* left column (sidebar) */
.p-side{ display:grid; gap:14px; align-content:start; }
.p-card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:12px; padding:14px; box-shadow:var(--shadow);
}
.p-title{
  margin:0 0 10px; font-size:1.02rem; color:var(--gold); font-weight:900;
}

/* sidebar buttons */
.btn-wide{
  display:block; text-align:center; width:100%;
  padding:12px 14px; border-radius:999px; font-weight:900;
  border:2px solid transparent; transition:.2s ease;
}
.btn-amber{ background:var(--gold); color:#121212; border-color:var(--gold) }
.btn-amber:hover{ filter:brightness(1.05); transform:translateY(-1px) }
.btn-ghost{
  margin-top:10px; background:transparent; color:var(--gold);
  border-color:var(--gold);
}
.btn-ghost:hover{ background:#121521; border-color:var(--gold-2) }

.p-note small{ color:#cfd3df; line-height:1.5 }

/* currency tabs + table (compact) */
.price-tabs.compact{ margin:8px 0 10px; }
.price-tabs.compact .tab{ padding:6px 12px; font-size:.85rem }
.price-table.small{ width:100%; border-collapse:collapse; }
.price-table.small td{
  padding:9px 8px; border-bottom:1px solid rgba(255,255,255,.08);
  font-size:.95rem;
}
.price-table.small td:last-child{ text-align:right; font-weight:900 }

/* right column */
.p-main{ display:grid; gap:14px }

/* top hero image */
.p-main-hero{
  margin:0; overflow:hidden; border-radius:12px;
  border:1px solid var(--line); box-shadow:var(--shadow)
}
.p-main-hero img{ width:100%; aspect-ratio:16/10; object-fit:cover }

/* spec table (two columns like reference) */
.p-specs{
  display:grid; grid-template-columns:1fr 1fr; gap:8px 16px;
}
.spec-row{
  display:grid; grid-template-columns:180px 1fr;
  gap:10px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.06);
}
.spec-row span{ color:#cfd3df }
.spec-row b{ color:#fff; font-weight:800 }

/* about + tags */
.p-card .p-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; list-style:none; padding:0 }
.p-card .p-tags li{
  font-weight:800; font-size:.86rem; color:#000;
  background:var(--gold); border-radius:999px; padding:6px 10px
}

/* gallery grid 3×2 like screenshot */
.p-gallery{
  display:grid; gap:12px;
  grid-template-columns:repeat(3,1fr);
}
.p-gallery img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:10px; border:1px solid var(--line); box-shadow:var(--shadow)
}
@media (max-width:900px){ .p-gallery{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .p-gallery{ grid-template-columns:1fr } }

/* page body background + keep header dark (already in your theme) */
body.profile-page{ background:var(--bg); color:var(--ink) }

/* ===== Profile Hero ===== */
.profile-hero{
  position:relative; isolation:isolate;
  background:
    radial-gradient(1200px 520px at 15% -10%, rgba(224,176,104,.18), transparent 60%),
    linear-gradient(180deg,#0f1117,#0d1016);
}
.profile-hero::before{
  content:""; position:absolute; inset:0;
  background: var(--ph-img) center/cover no-repeat;
  filter: saturate(.9) contrast(.95) brightness(.55);
  opacity:.35; z-index:0;
}
.profile-hero__grid{
  display:grid; gap:22px;
  grid-template-columns: 1.05fr .95fr;
  align-items:center;
  padding: clamp(28px,6vw,60px) 0;
}
@media (max-width: 980px){
  .profile-hero__grid{ grid-template-columns:1fr; }
}

/* Copy */
.ph-copy{ position:relative; z-index:1; }
.ph-name{
  margin:0 0 6px;
  font-weight:900; letter-spacing:.2px;
  font-size: clamp(26px,4vw,42px);
  background:linear-gradient(90deg,#fff,#ffe7bf 55%, var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ph-sub{ color:var(--muted); margin:4px 0 12px; }

/* Animated tags */
.ph-tags{ list-style:none; padding:0; margin:0 0 14px; display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  position:relative;
  display:inline-block; font-weight:900; font-size:.9rem;
  color:#000; background:var(--gold);
  padding:8px 12px; border-radius:999px;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  animation: chipIn .7s cubic-bezier(.2,.8,.2,1) both;
}
.chip::after{ /* subtle shimmer pass */
  content:""; position:absolute; inset:-2px;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  border-radius:inherit; transform:translateX(-120%);
  animation: shine 2.6s ease-in-out infinite .8s;
  pointer-events:none;
}
.ph-tags .chip:nth-child(1){ animation-delay:.0s }
.ph-tags .chip:nth-child(2){ animation-delay:.06s }
.ph-tags .chip:nth-child(3){ animation-delay:.12s }
.ph-tags .chip:nth-child(4){ animation-delay:.18s }
.ph-tags .chip:nth-child(5){ animation-delay:.24s }

@keyframes chipIn{
  from{ transform:translateY(10px) scale(.98); opacity:0 }
  to{   transform:none; opacity:1 }
}
@keyframes shine{
  0%,60%{ transform:translateX(-120%) }
  85%{   transform:translateX(120%) }
  100%{  transform:translateX(120%) }
}

.ph-cta{ display:flex; gap:10px; flex-wrap:wrap }

/* Portrait card with gentle drift + reveal */
.ph-portrait{
  position:relative; z-index:1; justify-self:end;
  border-radius:16px; overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow);
  transform: translateZ(0);
}
.ph-portrait img{
  display:block; width:min(520px, 90vw);
  aspect-ratio: 4/5; object-fit:cover; object-position:center;
  animation: reveal .7s ease-out both, drift 8s ease-in-out infinite .7s;
}
@keyframes reveal{
  from{ opacity:0; transform: scale(1.04) translateY(8px) }
  to{   opacity:1; transform:none }
}
@keyframes drift{
  0%,100%{ transform: translateY(0) }
  50%{    transform: translateY(-6px) }
}

/* moving highlight layer over portrait */
.ph-shine{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(60% 80% at 85% 15%, rgba(255,255,255,.14), transparent 60%),
              linear-gradient(0deg, rgba(0,0,0,.18), rgba(0,0,0,.0));
  mix-blend-mode: soft-light; opacity:.7;
  animation: glow 6s ease-in-out infinite;
}
@keyframes glow{
  0%,100%{ filter:brightness(1) }
  50%{    filter:brightness(1.15) }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .chip,.chip::after,.ph-portrait img,.ph-shine{ animation:none !important }
}
/* ===== Taller, more dramatic profile hero ===== */
.profile-hero{
  /* overall section height */
  min-height: clamp(520px, 78vh, 860px);
}

/* let columns stretch to that height */
.profile-hero__grid{
  align-items: stretch;
}

/* portrait card sits centered vertically */
.ph-portrait{
  align-self: center;
  /* allow the image to “breathe” slightly outside the card on big screens */
  margin-right: clamp(0px, 2vw, 18px);
  overflow: visible;
}

/* BIG, attractive model image */
.ph-portrait img{
  height: clamp(480px, 78vh, 820px); /* <- main height control */
  width: auto;                       /* keep natural width */
  max-width: min(560px, 44vw);       /* don’t get too wide */
  object-fit: cover;
  /* set the face focal point without cropping the top too much */
  object-position: var(--ph-focal, center 35%);
  border-radius: 18px;
  /* keep your gentle motion/reveal from before */
  animation: reveal .7s ease-out both, drift 8s ease-in-out infinite .7s;
}

/* copy column stays comfy alongside the tall portrait */
.ph-copy{
  display: grid;
  align-content: center;
  gap: 12px;
  padding-block: clamp(8px, 2vh, 18px);
}

/* OPTIONAL: if you want a slightly taller variant on certain pages */
.profile-hero--tall{ min-height: clamp(620px, 86vh, 960px); }
.profile-hero--tall .ph-portrait img{ height: clamp(560px, 86vh, 900px); }

/* ===== Mobile & tablet tweaks ===== */
@media (max-width: 980px){
  .profile-hero{ min-height: unset; }
  .ph-portrait{ justify-self: center; margin-right: 0; }
  .ph-portrait img{
    height: clamp(420px, 58vh, 640px);
    max-width: 92vw;
  }
  .ph-copy{ text-align: center; }
}

/* If you want to quickly nudge the face up/down on any model:
   .profile-hero { --ph-focal: center 25%; }  // higher
   .profile-hero { --ph-focal: center 45%; }  // lower
*/

/* ===== Cinematic profile hero ===== */
.profile-cinema{
  position:relative;
  min-height:clamp(640px, 88vh, 980px);     /* fills the screen on desktop */
  display:grid; place-items:center;
  background: var(--banner) center/cover no-repeat fixed; /* wide banner */
  isolation:isolate;
}
@media (max-width:1024px){
  .profile-cinema{ background-attachment:scroll; } /* iOS/Android fix */
}

/* Atmosphere overlays */
.profile-cinema::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(80% 60% at 15% 20%, rgba(0,0,0,.35), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.72) 70%, rgba(0,0,0,.82));
}
.profile-cinema::after{
  content:""; position:absolute; inset:-10% -5% -15% -5%; z-index:0;
  background:radial-gradient(60% 40% at 85% 20%, rgba(224,176,104,.14), transparent 60%);
  filter:blur(20px);
}

/* Layout inside */
.cinema-grid{
  position:relative; z-index:1;
  display:grid; gap:clamp(18px,3vw,36px);
  grid-template-columns: 1.05fr .95fr; align-items:center;
}
@media (max-width:980px){ .cinema-grid{ grid-template-columns:1fr; } }

/* Copy */
.cinema-copy{ color:#fff; display:grid; gap:12px; align-content:center; }
.cinema-title{
  font-size:clamp(32px,5vw,56px); line-height:1.05; margin:0;
  background:linear-gradient(90deg,#fff,#ffe6bc 55%, var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 6px 40px rgba(0,0,0,.5);
}
.cinema-sub{ color:#e9e9ef; opacity:.95; }

/* Animated service chips (always visible) */
.p-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:2px 0 8px; }
.p-tags li{
  font-weight:800; font-size:.9rem; color:#000;
  background:linear-gradient(135deg, var(--gold), #f0d49c);
  padding:8px 12px; border-radius:999px;
  box-shadow:0 10px 26px rgba(0,0,0,.25);
  transform: translateY(8px); opacity:0; animation:chipIn .7s ease forwards;
}
.p-tags li:nth-child(2){ animation-delay:.08s }
.p-tags li:nth-child(3){ animation-delay:.16s }
.p-tags li:nth-child(4){ animation-delay:.24s }
.p-tags li:nth-child(5){ animation-delay:.32s }

/* gentle float loop */
.p-tags--flow li{ animation: chipIn .7s ease forwards, bob 5.5s ease-in-out infinite; }
.p-tags--flow li:nth-child(odd){ animation-delay:.12s, .12s }

/* Portrait card */
.cinema-portrait{
  justify-self:end; align-self:center;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px; padding: clamp(8px,1.2vw,12px);
  box-shadow:0 28px 60px rgba(0,0,0,.45);
  transform: translateY(10px);
  animation: pop .7s ease-out .12s both;
}
.cinema-portrait img{
  display:block; width:min(520px, 40vw); height:auto;
  max-height:clamp(520px, 76vh, 860px);
  object-fit:cover; object-position:var(--focal, center 30%);
  border-radius:14px;
  transform: translateZ(0) scale(1.02);
  transition: transform .8s ease;
  filter:contrast(.98) saturate(1.02);
}
.cinema-portrait:hover img{ transform:scale(1.05); } /* luxe hover */

@media (max-width:980px){
  .cinema-portrait{ justify-self:center; }
  .cinema-portrait img{ width:min(92vw,560px); max-height:64vh; }
}

/* CTA row */
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }

/* Animations */
@keyframes chipIn{ to{ transform:translateY(0); opacity:1 } }
@keyframes bob{
  0%{ transform: translateY(0) }
  50%{ transform: translateY(-4px) }
  100%{ transform: translateY(0) }
}
@keyframes pop{
  0%{ transform: translateY(24px); opacity:.0 }
  100%{ transform: translateY(10px); opacity:1 }
}

.profile-cinema{ min-height:clamp(700px, 94vh, 1100px); }
.cinema-portrait img{ width:min(560px, 42vw); max-height:84vh; }


/* ===== Pricing replica (two panels with cell rows) ===== */
.rates-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  margin:16px 0 10px;
}
@media (max-width:980px){ .rates-grid{ grid-template-columns:1fr; } }

.rates-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.rates-head{
  text-align:center;
  font-weight:900;
  letter-spacing:.3px;
  padding:12px;
  color:var(--ink);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-bottom:1px solid var(--line);
}

.rates-rows{ list-style:none; margin:0; padding:10px 12px 12px; }
.rates-rows .r{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.06);
  border-left:0; border-right:0;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
}
.rates-rows .r + .r{ margin-top:8px; }
.rates-rows .r.sep{ margin-top:14px; }
.rates-rows .r span{ color:#dfe4ee; }
.rates-rows .r b{ font-weight:900; color:#fff; }

.rates-rows .note{
  grid-template-columns:1fr;
  color:#cfd3df;
  font-size:.92rem;
  background:transparent;
  border:0;
  padding:6px 12px 0;
}

.rates-cta{
  display:block;
  margin:12px;
  text-align:center;
  font-weight:800;
  padding:10px 12px;
  border-radius:999px;
  color:#000;
  background:var(--gold);
  box-shadow:0 10px 22px rgba(0,0,0,.25);
}
.rates-cta:hover{ filter:brightness(1.05); }

.rates-note{
  margin-top:16px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
  color:#cfd3df;
  box-shadow:var(--shadow);
}

/* === THERAPISTS — Mobile-first: show more photo, tags below image === */
@media (max-width: 640px){

  /* Card becomes a simple vertical stack */
  .fx-card{
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    overflow: hidden;
  }

  /* Make the model image taller and well framed */
  .fx-card img{
    aspect-ratio: 3 / 4;                /* taller image shows more body */
    object-fit: cover;
    object-position: var(--face, center 32%); /* per-card focal point if needed */
    filter: contrast(1) saturate(1.02) brightness(.99);
  }

  /* Keep a small name bar, less opaque so face isn’t hidden */
  .fx-card__meta{
    position: absolute;
    top: 10px; left: 10px;
    background: linear-gradient(180deg, rgba(0,0,0,.44), rgba(0,0,0,.28));
    padding: 6px 10px;
    font-size: .92rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
  }

  /* Move categories OUT of the photo area */
  .fx-card__tags{
    position: static;                /* was absolute bottom overlay */
    display: flex;
    flex-wrap: wrap;                 /* wrap to second row if needed */
    gap: 8px;
    padding: 10px 12px;
    background: transparent;         /* no glass over photo */
    border: 0;
    box-shadow: none;
  }

  /* Smaller, cleaner chips */
  .fx-chip{
    font-size: .88rem;               /* smaller text */
    padding: 8px 10px;               /* tighter pill */
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(135deg, rgba(224,176,104,.28), rgba(255,255,255,.08) 45%, rgba(224,176,104,.26));
    box-shadow: 0 8px 18px rgba(0,0,0,.22);
    animation: none;                 /* keep calm on mobile */
    white-space: nowrap;
  }
}

/* Small tablets: two columns, still keep tags below image and compact */
@media (min-width: 641px) and (max-width: 900px){
  .fx-grid--cards{ grid-template-columns: 1fr 1fr; gap: 18px; }
  .fx-card img{ aspect-ratio: 3 / 4; object-position: var(--face, center 30%); }
  .fx-card__tags{ position: static; padding: 10px 12px; gap: 8px; }
  .fx-chip{ font-size: .92rem; padding: 9px 12px; }
}

/* Optional: per-profile face tweak
   <article class="fx-card" style="--face:center 40%">…</article>
*/

/* === Profile hero: neat mobile stack (no overlap) === */
@media (max-width: 640px){
  /* 1) Stack: photo → text → chips → CTAs */
  .cinema-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .cinema-portrait{
    order: 1;
    justify-self: center;
    padding: 8px 10px;
    border-radius: 16px;
  }
  .cinema-portrait img{
    width: min(88vw, 520px);
    max-height: 58vh;
    height: auto;
    object-fit: cover;
    object-position: var(--focal, center 34%);
    border-radius: 14px;
    box-shadow: 0 18px 46px rgba(0,0,0,.35);
  }

  /* 2) Copy under the photo (no dark band across image) */
  .cinema-copy{
    order: 2;
    text-align: center;
    background: transparent;
    padding: 0;
  }
  .cinema-title{
    font-size: clamp(26px, 7.2vw, 34px);
    line-height: 1.05;
    margin: 0 0 2px;
  }
  .cinema-sub{
    font-size: .95rem;
    color: #eef1f6;
    opacity: .95;
  }

  /* 3) Chips become a compact grid BELOW the text */
  .p-tags{
    order: 3;
    margin: 6px auto 10px;
    padding: 0;
    max-width: 92vw;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));  /* 2-column grid */
    gap: 8px;
    overflow: visible; /* no horizontal scroll */
    white-space: normal;
  }
  .p-tags li{
    width: 100%;
    text-align: center;
    font-size: .9rem;
    padding: 10px 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,.22);
  }

  /* 4) CTAs centered and snug */
  .cta-row{
    order: 4;
    justify-content: center;
    gap: 10px;
  }
  .cta-row .fx-btn{
    min-height: 42px;
    padding: 10px 14px;
  }

  /* 5) Keep the banner subtle; all content sits below it now */
  .profile-cinema{
    min-height: auto;
    background-attachment: scroll;
  }
  .profile-cinema::before{
    background:
      radial-gradient(90% 70% at 20% 20%, rgba(0,0,0,.45), transparent 55%),
      linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.78) 65%, rgba(0,0,0,.85));
  }
}

/* Tiny phones: chips as a single column */
@media (max-width: 390px){
  .p-tags{ grid-template-columns: 1fr; }
}

/* ==== MOBILE NO-SCROLL PATCH ==== */
html, body { overflow-x: hidden; }

/* Turn off edge-to-edge bleed on small screens */
@media (max-width: 768px){
  .fx-bleed{
    left:auto; right:auto;
    margin-left:0; margin-right:0;
    width:100%;
  }
  .fx-bleed > .fx-wrap{
    max-width:100%;
    padding-left:16px; padding-right:16px;
  }

  /* General container safety */
  .fx-wrap{ padding-left:16px; padding-right:16px; }

  /* Profile cinema: prevent tiny overflow from transforms/backgrounds */
  .profile-cinema{ background-attachment:scroll; background-position:center; }
  .cinema-portrait{ transform:none; }                  /* remove translateY offset */
  .cinema-portrait img{ max-width:100%; height:auto; } /* keep within viewport */

  /* Keep the chips from pushing width */
  .p-tags{ overflow-x:hidden; }
  .p-tags li{ max-width:100%; }

  /* Therapist cards: ensure the tag band never exceeds card width */
  .fx-card{ margin:0; }
  .fx-card__tags{ left:8px; right:8px; bottom:8px; }

  /* One column on small phones to avoid overflow from shadows/borders */
  .fx-grid--cards{ grid-template-columns:1fr; }
}

/* Ultra-small phones */
@media (max-width: 390px){
  .p-tags{ grid-template-columns:1fr; }
}

/* ==== FINAL FIX PATCH ==== */

/* Card needs positioning context for meta/tags */
.fx-card{ position:relative; }

/* Ensure meta sits above image */
.fx-card__meta{ z-index:3; }

/* On phones: tags go UNDER the photo and never overlay it */
@media (max-width: 768px){
  .fx-card__tags{
    position: static !important;   /* <— critical to stop overlay */
    left:auto; right:auto; bottom:auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 10px 12px;
    z-index: 1;
  }

  /* One column = no horizontal push from shadows/pills */
  .fx-grid--cards{ grid-template-columns: 1fr; }
}

/* Prevent any accidental horizontal scroll globally */
html, body{ overflow-x: hidden; }

/* Profile cinema: never overflow or parallax on mobile */
@media (max-width: 640px){
  .profile-cinema{ background-attachment: scroll; }
  .cinema-portrait{ transform:none; }
  .cinema-portrait img{
    width: min(88vw, 520px);
    max-height: 58vh;
    height: auto;
    object-fit: cover;
    object-position: var(--focal, center 34%);
  }
}

/* Extra safety: card image always fills and behaves */
.fx-card img{
  display:block;          /* remove inline-gap */
  width:100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: var(--face, center 32%);
}

/* ===== MOBILE PROFILE ALIGNMENT PATCH ===== */

/* Reserve clear space under the sticky header for the hero */
@media (max-width: 640px){
  /* give the hero a safe top padding (approx header height) */
  .profile-cinema{
    padding-top: 72px;          /* <- move chips & name fully below header */
    padding-bottom: 16px;
    min-height: auto;           /* no forced tall section on phones */
    background-attachment: scroll;
  }

  /* clean, centered stacking: portrait -> text -> chips -> CTAs */
  .cinema-grid{
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 0 auto;
  }
  .cinema-portrait{ order: 1; justify-self: center; transform: none; }
  .cinema-portrait img{
    width: min(92vw, 520px);
    height: auto;
    max-height: 58vh;           /* big but never overflows */
    object-fit: cover;
    object-position: var(--focal, center 34%);
  }
  .cinema-copy{ order: 2; text-align: center; background: transparent; padding: 0; }
  .p-tags{ order: 3; margin: 6px auto 10px; }
  .cta-row{ order: 4; justify-content: center; gap: 10px; }
}

/* Breadcrumb sits neatly after the hero */
.crumb{ margin-top: 6px; }

/* Absolute-safety: no horizontal jiggle on any device */
html, body{ overflow-x: hidden; }

/* Therapist cards – make sure meta/tags can’t push width */
.fx-card{ position: relative; }
.fx-card__meta{ z-index: 3; }
@media (max-width: 768px){
  .fx-card__tags{
    position: static !important;
    left: auto; right: auto; bottom: auto;
    background: transparent; border: 0; box-shadow: none;
    padding: 10px 12px;
  }
  .fx-grid--cards{ grid-template-columns: 1fr; }
}


/* ========= MOBILE HARDENING: PROFILE PAGE ========= */

/* never allow horizontal jiggle anywhere */
html, body { overflow-x: hidden; max-width: 100vw; }

/* compute-safe padding under sticky header (fallback 64px) */
:root{ --headerH: 64px; }

/* HERO — no overlap with header, no side-bleed on phones */
@media (max-width: 768px){
  .profile-cinema{
    padding-top: calc(var(--headerH) + 12px);
    padding-bottom: 16px;
    min-height: auto;
    background-attachment: scroll;
    overflow: hidden;              /* stop after-layers from widening page */
  }
  .profile-cinema::before,
  .profile-cinema::after{ inset:0; } /* remove negative insets that caused scroll */
  .cinema-grid{
    grid-template-columns: 1fr;    /* strict single column */
    gap: 14px;
    margin: 0 auto;
  }
  .cinema-portrait{
    order: 1;
    justify-self: center;
    padding: 8px 10px;
    transform: none;               /* cancel any translate */
    max-width: 92vw;               /* keep inside viewport */
  }
  .cinema-portrait img{
    width: 100%;
    height: auto;
    max-height: 58vh;              /* big but never pushes layout */
    object-fit: cover;
    object-position: var(--focal, center 34%);
    border-radius: 14px;
  }
  .cinema-copy{ order: 2; text-align: center; padding: 0; background: transparent; }
  .cinema-title{ font-size: clamp(24px, 6.4vw, 32px); margin: 0; }
  .cinema-sub{ font-size: .95rem; opacity: .95; }

  /* chips = tidy grid; no horizontal scroll */
  .p-tags{
    order: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
    margin: 6px auto 10px;
    max-width: 92vw;
    overflow: visible;
  }
  .p-tags li{
    width: 100%;
    text-align: center;
    padding: 8px 10px;
    font-size: .88rem;
  }
  @media (max-width: 390px){ .p-tags{ grid-template-columns: 1fr; } }

  /* CTAs centered and compact */
  .cta-row{ order: 4; justify-content: center; gap: 10px; }
  .cta-row .fx-btn{ min-height: 42px; padding: 10px 14px; }

  /* breadcrumb and main grid spacing */
  .crumb{ margin-top: 6px; word-wrap: break-word; }

  /* sidebar buttons: full width, no overflow */
  .p-side .btn-wide{ width: 100%; padding: 12px 14px; border-radius: 14px; }

  /* pricing table rows behave like cells, never wider than screen */
  .price-table.small tr{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }
  .price-table.small td{ padding: 12px 8px; }
}

/* THERAPISTS CARDS on phones: tags BELOW image to avoid cover-up */
@media (max-width: 640px){
  .fx-card{ display:flex; flex-direction:column; border-radius:18px; overflow:hidden; }
  .fx-card img{ aspect-ratio:3/4; object-fit:cover; object-position: var(--face, center 32%); }
  .fx-card__meta{
    position:absolute; top:10px; left:10px; z-index:3;
    background:linear-gradient(180deg, rgba(0,0,0,.44), rgba(0,0,0,.28));
    padding:6px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  }
  .fx-card__tags{
    position: static !important;
    display:flex; flex-wrap:wrap; gap:8px;
    padding:10px 12px; background:transparent; border:0; box-shadow:none;
  }
  .fx-chip{ font-size:.86rem; padding:8px 10px; white-space:nowrap; }
  .fx-grid--cards{ grid-template-columns: 1fr; } /* one column = no side scroll */
}

/* extra guard: any “bleed” section turns normal on phones */
@media (max-width: 768px){
  .fx-bleed{ left:auto; right:auto; margin:0; width:100%; }
  .fx-bleed > .fx-wrap{ max-width:100%; padding-inline:16px; }
}

/* ===== SERVICES (alternating rows) ===== */
.services-page { background: var(--bg); color: var(--ink); }

.svc-alt{ padding: clamp(26px,5vw,48px) 0; }
.svc-row{
  display:grid; gap: clamp(16px,3vw,28px);
  grid-template-columns: .95fr 1.05fr; align-items:center;
  padding: clamp(10px,2vw,14px) 0;
}
.svc-row--mirror{ grid-template-columns: 1.05fr .95fr; }
.svc-row--mirror .svc-media{ order:2; }
.svc-row--mirror .svc-copy{ order:1; }

.svc-media{
  border-radius: 14px; overflow: hidden;
  border:1px solid var(--line); box-shadow: var(--shadow);
}
.svc-media img{
  width:100%; height: clamp(220px, 34vw, 360px);
  object-fit: cover; object-position: center;
  filter: contrast(.98) saturate(1.02);
}

.svc-copy h2{
  margin:0 0 8px; font-weight:900; letter-spacing:.2px;
  font-size: clamp(20px, 2.2vw, 26px);
  background: linear-gradient(90deg,#fff,#ffe7bf 55%, var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.svc-copy p{ margin:0 0 10px; color:#cfd3df; max-width: 58ch; }
.svc-more{
  display:inline-block; font-weight:800; letter-spacing:.2px;
  color: var(--gold); border-bottom:1px solid color-mix(in srgb, var(--gold) 60%, transparent);
  padding-bottom:2px;
}

@media (max-width: 960px){
  .svc-row, .svc-row--mirror{
    grid-template-columns: 1fr;    /* stack */
  }
  .svc-row--mirror .svc-media,
  .svc-row--mirror .svc-copy{ order: initial; }
  .svc-media img{ height: clamp(220px, 48vw, 340px); }
}

/* therapists strip */
.svc-strip{ padding: clamp(18px,4vw,28px) 0 8px; }
.svc-strip__grid{
  display:grid; gap: 14px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 920px){ .svc-strip__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .svc-strip__grid{ grid-template-columns: 1fr; } }

.svc-mini{
  display:grid; gap:8px; background: var(--paper);
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow: var(--shadow);
}
.svc-mini img{ width:100%; height: 220px; object-fit: cover; }
.svc-mini span{
  display:block; padding:10px 12px; text-align:center; font-weight:800;
}
.svc-mini em{ font-style:normal; color:#aeb6c6; font-weight:700; display:block; margin-top:2px; }

/* CTA band */
.svc-cta{
  position:relative;
  background: radial-gradient(1000px 420px at 15% 0%, rgba(224,176,104,.14), transparent 60%),
              linear-gradient(180deg,#141821,#10141b);
  border-top:1px solid var(--line);
}
.svc-cta__inner{
  display:grid; gap:10px; place-items:center; padding: clamp(24px,5vw,42px) 0;
}
.svc-cta h3{
  margin:0; font-weight:900; letter-spacing:.2px;
  font-size: clamp(20px, 2.2vw, 28px);
  background: linear-gradient(90deg,#fff,#ffe7bf 55%, var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* =========================
   PATCH — Mobile hardening for model profile
   Paste at END of styles.css
   ========================= */

/* 1) Never allow side-scroll (one time, final) */
html, body { overflow-x: hidden; max-width: 100vw; }

/* 2) Treat sticky header height as safe space on phones */
:root{ --headerH: 64px; }  /* adjust if your header is taller */

/* 3) Profile banner: stop parallax/bleed and stack cleanly */
@media (max-width: 768px){
  .profile-cinema{
    padding-top: calc(var(--headerH) + 12px);
    padding-bottom: 16px;
    min-height: auto;
    background-attachment: scroll !important;  /* iOS/Android fix */
    overflow: hidden;                           /* stop pseudo layer bleed */
  }
  .profile-cinema::before,
  .profile-cinema::after{
    inset: 0 !important;                        /* remove negative inset */
  }

  /* 4) Force single-column order: portrait → text → chips → CTAs */
  .cinema-grid{
    grid-template-columns: 1fr !important;
    gap: 14px;
    margin: 0 auto;
  }
  .cinema-portrait{
    order: 1;
    justify-self: center;
    padding: 8px 10px;
    transform: none !important;
    max-width: 92vw;
  }
  .cinema-portrait img{
    width: 100%;
    height: auto;
    max-height: 58vh;                            /* big but contained */
    object-fit: cover;
    object-position: var(--focal, center 34%);
    border-radius: 14px;
  }
  .cinema-copy{ order: 2; text-align: center; padding: 0; background: transparent; }
  .cinema-title{ font-size: clamp(24px, 6.4vw, 32px); margin: 0; }
  .cinema-sub{ font-size: .95rem; opacity: .95; }

  /* 5) Chips: compact grid, no horizontal scroll */
  .p-tags{
    order: 3;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
    margin: 6px auto 10px;
    max-width: 92vw;
    overflow: visible;
    white-space: normal;
  }
  .p-tags li{
    width: 100%;
    text-align: center;
    padding: 8px 10px;
    font-size: .88rem;
    box-shadow: 0 10px 20px rgba(0,0,0,.22);
  }
  @media (max-width: 390px){
    .p-tags{ grid-template-columns: 1fr; }
  }

  /* 6) CTAs centered and snug */
  .cta-row{ order: 4; justify-content: center; gap: 10px; }
  .cta-row .fx-btn{ min-height: 42px; padding: 10px 14px; }

  /* 7) Breadcrumb & main grid spacing on mobile */
  .crumb{ margin-top: 6px; word-wrap: break-word; }
  .p-grid{ gap: 14px; padding: 12px 0 22px; grid-template-columns: 1fr !important; }

  /* 8) Sidebar controls and pricing table behave like cells */
  .p-side .btn-wide{ width: 100%; padding: 12px 14px; border-radius: 14px; }
  .price-table.small tr{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }
  .price-table.small td{ padding: 12px 8px; }

  /* 9) Gallery: one column to avoid edge overflow */
  .p-gallery{ grid-template-columns: 1fr !important; }
}

/* 10) Therapist cards: keep name on photo, move tags BELOW on phones */
.fx-card{ position: relative; }
.fx-card__meta{ z-index: 3; }
@media (max-width: 640px){
  .fx-card{ display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; }
  .fx-card img{
    aspect-ratio: 3/4;
    object-fit: cover;
    object-position: var(--face, center 32%);
  }
  .fx-card__tags{
    position: static !important;   /* critical: no overlay on image */
    left: auto; right: auto; bottom: auto;
    background: transparent; border: 0; box-shadow: none;
    padding: 10px 12px;
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .fx-chip{ font-size: .86rem; padding: 8px 10px; white-space: nowrap; }
  .fx-grid--cards{ grid-template-columns: 1fr; } /* one column prevents side-scroll */
}

/* 11) Any full-bleed sections stop bleeding on phones */
@media (max-width: 768px){
  .fx-bleed{ left: auto; right: auto; margin: 0; width: 100%; }
  .fx-bleed > .fx-wrap{ max-width: 100%; padding-inline: 16px; }
}

/* 12) Spec rows: shrink label column on tiny screens to avoid overflow */
@media (max-width: 480px){
  .spec-row{ grid-template-columns: 140px 1fr; }
}
@media (max-width: 360px){
  .spec-row{ grid-template-columns: 120px 1fr; }
}
/* Mobile panel + overlay */
.fx-mnav{
  position: fixed; inset: 0 0 0 auto; /* right sheet */
  width: min(82vw, 360px);
  background: var(--paper, #171923);
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 1001;
  padding: 16px;
  display: grid;
  gap: 10px;
}
.fx-mnav[data-open="true"]{ transform: translateX(0); }
.fx-mnav__close{
  background: transparent; border: 0; font-size: 28px; line-height: 1;
  color: var(--ink, #eef1f6); margin-left: auto; cursor: pointer;
}

.fx-overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  backdrop-filter: blur(1px); z-index: 1000;
}
.fx-overlay[hidden]{ display: none; }

@media (min-width: 901px){
  .fx-menu{ display: none; }
  .fx-mnav, .fx-overlay{ display: none !important; }
}

/* Prevent background scroll when mobile menu is open */
.no-scroll{ overflow: hidden; }

.fx-mnav{ position: fixed; inset: 0 0 0 auto; width: min(82vw,360px); background: var(--paper,#171923);
  transform: translateX(100%); transition: transform .25s ease; z-index: 1001; padding: 16px; display: grid; gap: 10px; }
.fx-mnav[data-open="true"]{ transform: translateX(0); }

.fx-mnav__close{
  position: absolute; top: 10px; right: 10px;
  background: transparent; border: 0; font-size: 28px; line-height: 1;
  color: var(--ink,#eef1f6); cursor: pointer; z-index: 1002; pointer-events: auto;
}

.fx-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(1px); z-index: 1000; }
.fx-overlay[hidden]{ display: none; }
.no-scroll{ overflow: hidden; }

@media (min-width:901px){ .fx-menu{display:none}.fx-mnav,.fx-overlay{display:none!important} }

/* === MOBILE NAV — single source of truth (overrides older rules) === */

/* Kill any earlier full-screen/opacity version */
.fx-mnav { all: unset; }

/* Right-side sheet */
.fx-mnav{
  position: fixed; inset: 0 0 0 auto;      /* slide-in from right */
  width: min(82vw, 360px);
  background: var(--paper, #171923);
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 1001;
  padding: 16px;
  display: grid;
  gap: 10px;

  /* 2-column “tabular” layout for the links */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
}

/* Open state driven by data attribute (used by your JS) */
.fx-mnav[data-open="true"]{ transform: translateX(0); }

/* Put the X on top of the grid */
.fx-mnav__close{
  position: absolute; top: 10px; right: 10px;
  background: transparent; border: 0; font-size: 28px; line-height: 1;
  color: var(--ink, #eef1f6); cursor: pointer; z-index: 1002;
}

/* Make links look like neat tabs */
.fx-mnav a{
  display: block;
  padding: 12px 10px;
  font-weight: 800;
  text-align: center;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #131821;
  color: var(--ink);
}
.fx-mnav a:hover{ background:#0f141c; }

/* Make the tel CTA span full width on the last row if you like */
.fx-mnav a.fx-btn{ grid-column: 1 / -1; }

/* Overlay under the sheet */
.fx-overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  backdrop-filter: blur(1px); z-index: 1000;
}
.fx-overlay[hidden]{ display: none; }

/* Hide mobile UI on desktop */
@media (min-width:901px){
  .fx-menu{ display: none; }
  .fx-mnav, .fx-overlay{ display: none !important; }
}

/* Prevent background scroll when menu is open */
.no-scroll{ overflow: hidden; }

.fx-faq .faq-list{display:grid;gap:10px;max-width:900px;margin:0 auto}
.fx-faq details{background:rgba(255,255,255,.04);border:1px solid #1f2330;border-radius:10px;padding:10px 12px}
.fx-faq summary{cursor:pointer;font-weight:800;outline:none}
.fx-faq summary::-webkit-details-marker{display:none}
.fx-faq .faq-a{margin-top:8px;opacity:.95;line-height:1.6}

/* ===== Footer (replica) ===== */
.fx-foot--rich{
  background:#1d1d1d; color:#e8e8e8;
  border-top:1px solid #2a2a2a; margin-top:0;
}
.fx-foot--rich .foot-grid{
  display:grid; gap:28px;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  padding:26px 0 20px;
}
@media (max-width:980px){
  .fx-foot--rich .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .fx-foot--rich .foot-grid{ grid-template-columns:1fr; }
}

.fx-foot--rich .foot-head{
  margin:0 0 10px; font-weight:800; font-size:1.1rem; color:#fff;
}

.fx-foot--rich .foot-brand .foot-logo{ margin-bottom:8px; }
.fx-foot--rich .foot-brand img{ height:38px; width:auto; display:block; }
.fx-foot--rich .foot-wordmark{ font-weight:900; font-size:1.3rem; color:#f2f2f2; }
.fx-foot--rich .foot-blurb{ margin:8px 0 12px; color:#d0d0d0; line-height:1.6; }

.fx-foot--rich .foot-socials{ display:flex; gap:10px; }
.fx-foot--rich .foot-socials .soc{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border:1px solid #3a3a3a; border-radius:4px;
  color:#fff; background:transparent; transition:.2s;
}
.fx-foot--rich .foot-socials .soc:hover{ background:#2a2a2a; }

.fx-foot--rich .foot-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.fx-foot--rich .foot-list a{ color:#e6e6e6; text-decoration:none; }
.fx-foot--rich .foot-list a:hover{ text-decoration:underline; }

.fx-foot--rich .foot-hours .hours-table{
  width:100%; border-collapse:collapse; font-size:.98rem;
}
.fx-foot--rich .foot-hours th,
.fx-foot--rich .foot-hours td{
  padding:6px 0; border-bottom:1px solid #2e2e2e; text-align:left;
}
.fx-foot--rich .foot-hours th{ width:50%; font-weight:700; color:#f0f0f0; }
.fx-foot--rich .foot-hours tr:last-child th,
.fx-foot--rich .foot-hours tr:last-child td{ border-bottom:0; }

.fx-foot--rich .fx-copy{
  text-align:center; color:#cfcfcf; font-size:.95rem;
  border-top:1px solid #2a2a2a; padding:12px 0;
  background:#181818;
}

/* Mobile polish + cross-browser niceties */
.fx-foot--rich { -webkit-text-size-adjust: 100%; }
.fx-foot--rich img { max-width: 100%; height: auto; }
.fx-foot--rich .foot-socials .soc { min-width: 40px; min-height: 40px; } /* touch target */
@supports not (display: grid) { .fx-foot--rich .foot-grid { display:block; } } /* ultra-old fallback */
@media (max-width:600px){
  .fx-foot--rich .foot-head { font-size:1rem; }
  .fx-foot--rich .foot-list { gap:6px; }
}
@supports (padding: max(0px)) {
  .fx-foot--rich { padding-bottom: max(12px, env(safe-area-inset-bottom)); } /* iOS safe area */
}

/* =========================================
   Booking & Contact — Velvet Amber theme
   ========================================= */

/* Theme tokens */
.ema-form-surface{
  --bg:#0e0f14;
  --paper:#171923;
  --ink:#eef1f6;
  --muted:#adb4c2;
  --line:#242734;
  --gold:#e0b068;
  --gold-2:#c99a58;
  --shadow:0 14px 40px rgba(0,0,0,.38);

  color:var(--ink);
  background:var(--bg);
  padding:0 0 40px;
}

/* Wrap + headings */
.ema-wrap{max-width:980px;margin:0 auto;padding:18px 16px 28px;}
.ema-h1,.ema-wrap h2,.ema-wrap h3{
  margin:0 0 12px; font-weight:900;
  background:linear-gradient(90deg,#fff,#ffe6bc 55%,var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ema-contact-blurb p{color:var(--muted);margin:.4rem 0}
.ema-contact-blurb a{color:var(--gold);text-decoration:none}
.ema-contact-blurb a:hover{filter:brightness(1.1)}

/* Hero (shared with booking & contact) */
.ema-hero{
  position:relative; isolation:isolate;
  background:var(--hero, none) center/cover no-repeat fixed;
  min-height: clamp(240px, 42vh, 380px);
  display:grid; place-items:center;
}
@media (max-width:1024px){ .ema-hero{ background-attachment:scroll } }
.ema-hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(70% 55% at 20% 25%, rgba(0,0,0,.25), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.68) 65%, rgba(0,0,0,.78));
}
.ema-hero__inner{ position:relative; z-index:1; text-align:center; padding:24px 16px }
.ema-hero__title{ font-size: clamp(28px, 4.2vw, 48px); margin:0 0 6px }
.ema-hero__sub{ color:#e9e9ef; opacity:.95; margin:0 }

/* Form surface card */
.ema-grid, .ema-block{
  background:var(--paper); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow);
  padding:16px; margin-top:14px;
}

/* Grid layout */
.ema-row.two{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:760px){ .ema-row.two{ grid-template-columns:1fr } }

/* Labels & inputs */
.ema-grid label{ display:block; font-weight:800; color:var(--ink); margin:8px 0 }
.ema-grid label > span{ display:block; font-size:.92rem; color:var(--muted); margin-bottom:6px }

.ema-grid input[type="text"],
.ema-grid input[type="email"],
.ema-grid input[type="tel"],
.ema-grid input[type="datetime-local"],
.ema-grid input[type="number"],
.ema-grid select,
.ema-grid textarea{
  width:100%; border:1px solid var(--line); background:#0f1219;
  color:var(--ink); border-radius:10px; padding:12px 12px;
  outline:none; transition:border-color .15s, box-shadow .15s, background .15s;
}
.ema-grid textarea{ resize:vertical }
.ema-grid input::placeholder,
.ema-grid textarea::placeholder{ color:#98a3b5 }

.ema-grid input:focus,
.ema-grid select:focus,
.ema-grid textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(224,176,104,.22);
}

/* Radios/checkboxes (for booking options) */
.ema-choice{ display:flex; gap:16px; flex-wrap:wrap; margin:6px 0 8px }
.ema-choice label{ display:inline-flex; align-items:center; gap:8px; font-weight:800; color:var(--ink) }
.ema-choice input[type="radio"],
.ema-choice input[type="checkbox"]{ accent-color:var(--gold) }

/* Actions & buttons */
.ema-actions{ margin-top:10px; display:flex; gap:10px }
.fx-btn.fx-btn--gold{
  background:var(--gold); border:2px solid var(--gold); color:#121212;
  font-weight:900; padding:12px 18px; border-radius:999px; transition:.2s;
}
.fx-btn.fx-btn--gold:hover{ background:#f0c781; border-color:#f0c781; transform:translateY(-1px) }

/* Alerts */
.ema-alert{ border-radius:10px; padding:12px 14px; margin:12px 0; font-weight:800 }
.ema-alert.success{ background:rgba(60,166,120,.12); border:1px solid #2b8f6f; color:#d8ffef }
.ema-alert.error{ background:rgba(217,97,109,.12); border:1px solid #b6535f; color:#ffd9de }
.ema-alert ul{ margin:.4rem 0 0 1.1rem }

/* Honeypot (keep hidden) */
.ema-hp{ position:absolute !important; left:-99999px !important; opacity:0 !important }

/* Booking: small section headings */
.ema-section-title{
  margin:12px 0 8px; font-weight:900; color:var(--gold); font-size:1.02rem;
}

/* Tables (if you use hour grid) */
.ema-table{ width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--line); border-radius:12px; overflow:hidden }
.ema-table th,.ema-table td{ padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.06) }
.ema-table th{ color:var(--muted); text-align:left; font-weight:800 }
.ema-table tr:last-child td{ border-bottom:0 }

/* Compact on phones */
@media (max-width:760px){
  .ema-form-surface{ padding-bottom:30px }
  .ema-grid, .ema-block{ padding:12px }
  .ema-grid input, .ema-grid select, .ema-grid textarea{ font-size:16px } /* prevent iOS zoom */
}
/* Footer: visual + responsive polish (no layout changes) */
.fx-foot{background:#0c0e14;color:#cdd4e1;border-top:1px solid #10131b}
.fx-foot .fx-wrap{max-width:1240px;margin:0 auto;padding:0 16px}
.fx-foot__grid{gap:18px;padding:18px 0}
.fx-foot h5{margin:0 0 6px;color:#fff;font-weight:800}
.fx-foot p{margin:0;color:#cdd4e1;line-height:1.6}
.fx-foot a{color:#cdd4e1;text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.15)}
.fx-foot a:hover{color:#fff;border-bottom-color:transparent}
.fx-copy{ text-align:center;padding:12px 0;border-top:1px solid #1b2230;color:#a9b3c4;font-size:.9rem }

/* Small-screen tidiness */
@media (max-width:720px){
  .fx-foot__grid{row-gap:14px}
  .fx-foot h5{font-size:1rem}
  .fx-foot p, .fx-foot a{font-size:.95rem}
}

/* ===== Velvet Amber — Blog layout ===== */
.vamb-blog{ background:var(--bg); color:var(--ink); }
.vamb-wrap{ max-width:1240px; margin:0 auto; padding:24px 16px; }

.vamb-feature{
  display:grid; gap:12px; margin:0 0 26px;
}
.vamb-feature .vamb-cover{
  display:block; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 12px 34px rgba(0,0,0,.35);
}
.vamb-feature .vamb-cover img{
  width:100%; height:auto; display:block; object-fit:cover; max-height:520px;
}
.vamb-feature .vamb-meta{ text-align:center; max-width:880px; margin:0 auto; }
.vamb-title{ margin:10px 0 6px; font-size:1.35rem; font-weight:800; }
.vamb-title a{ color:var(--ink); }
.vamb-title a:hover{ color:var(--gold); }
.vamb-date{ font-size:.78rem; letter-spacing:.06em; opacity:.85; margin-bottom:8px; color:#cfd3df; }
.vamb-excerpt{ opacity:.95; color:#cfd3df; }

.vamb-tile{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start;
  margin:0 0 22px; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow);
}
.vamb-tile .vamb-thumb{ display:block; overflow:hidden; }
.vamb-tile .vamb-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.vamb-tile__body{ padding:10px 12px; }
.vamb-tile__title{ margin:6px 0 4px; font-size:1.05rem; font-weight:900; }
.vamb-tile__title a{ color:var(--ink); }
.vamb-tile__title a:hover{ color:var(--gold); }
.vamb-tile__date{ font-size:.72rem; letter-spacing:.06em; opacity:.85; margin-bottom:6px; color:#cfd3df; }
.vamb-tile__excerpt{ opacity:.95; color:#cfd3df; }

/* Two-up grid behavior for tiles: every non-feature sits as half width by default */
.vamb-wrap .vamb-tile{ }
@media (min-width:920px){
  /* Make tile pairs sit side-by-side by letting them share the row width */
  .vamb-wrap{ display:grid; grid-template-columns:1fr; }
  /* We'll rely on article widths to flow; constrain tiles to 2-column with CSS grid trick */
  .vamb-wrap .vamb-tile{ grid-template-columns: 1fr 1fr; }
  /* Create two-column row for consecutive tiles: we wrap them in rows implicitly by width */
  .vamb-feature{ grid-column: 1 / -1; }
}
@media (min-width:1040px){
  .vamb-tile{ grid-template-columns: 1.2fr 1fr; }
}

/* Mobile stack */
@media (max-width:720px){
  .vamb-feature .vamb-cover img{ max-height:360px; }
  .vamb-tile{ grid-template-columns:1fr; }
  .vamb-title{ font-size:1.2rem }
}

/* Pagination */
.vamb-paging{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:10px 0 24px }
.vamb-paging a, .vamb-paging span{
  display:inline-block; padding:8px 12px; border-radius:999px; border:1px solid var(--line);
  color:var(--ink); text-decoration:none; font-weight:800; background:#0f1219;
}
.vamb-paging .current{ background:var(--gold); color:#121212; border-color:var(--gold) }

.vamb-empty{ text-align:center; opacity:.9 }

/* Lead Post */
.blog-lead .lead-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
}
.blog-lead .lead-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Rail Posts */
.blog-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.rail-card .rail-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
}
.rail-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mini Strip */
.blog-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 30px;
}
.blog-strip .mini-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
}
.blog-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Blog wrapper */
.vamb-blog .vamb-wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 40px 20px;
}

.vamb-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

/* Feature (big full-width block) */
.vamb-feature .vamb-feature__img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--radius);
}
.vamb-feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vamb-feature__body {
  margin-top: 14px;
  text-align: center;
}
.vamb-feature__body h2 {
  font-size: 1.6rem;
  margin: 10px 0;
}
.vamb-feature__body .vamb-date {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 10px;
}

/* Half tiles (two side by side) */
.vamb-tile {
  display: flex;
  flex-direction: column;
}
.vamb-tile__img {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.vamb-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vamb-tile__body h3 {
  font-size: 1.2rem;
  margin: 6px 0;
}
.vamb-tile__body .vamb-date {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 6px;
}
.vamb-tile__body p {
  font-size: 0.9rem;
  color: var(--ink);
}

/* Layout: 2-column tiles after feature */
.vamb-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.vamb-tile { margin-bottom: 20px; }

/* Responsive */
@media (min-width: 768px) {
  .vamb-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .vamb-feature {
    grid-column: 1 / -1;
  }
}

.vamb-feature__img,
.vamb-tile__img {
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
}
.vamb-feature__img img,
.vamb-tile__img img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================
   Single Post — Scoped styles
   ========================= */
.vamb-single-scope{
  --banner-h: clamp(260px, 44vh, 420px);
}

.vamb-single-scope .single-hero{
  position: relative; isolation: isolate;
  background: var(--banner) center/cover no-repeat;
  min-height: var(--banner-h);
  display: grid; align-items: end;
}
.vamb-single-scope .single-hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(70% 55% at 15% 20%, rgba(0,0,0,.35), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.72) 70%, rgba(0,0,0,.86));
}
.vamb-single-scope .single-hero__inner{ position:relative; z-index:1; padding: clamp(18px, 4vw, 28px) 0; }
.vamb-single-scope .single-title{
  margin: 0 0 6px;
  font-weight: 900; letter-spacing: .2px;
  font-size: clamp(24px, 4vw, 40px);
  background: linear-gradient(90deg,#fff,#ffe7bf 55%, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 4px 28px rgba(0,0,0,.35);
}
.vamb-single-scope .single-meta{
  display: flex; flex-wrap: wrap; gap: 8px;
  color: #e9e9ef; opacity: .95;
}
.vamb-single-scope .single-meta .dot{ opacity:.6 }
.vamb-single-scope .single-meta a{ color: var(--gold); }
.vamb-single-scope .single-meta a:hover{ filter: brightness(1.1); }

/* Content area */
.vamb-single-scope .single-wrap{ padding: clamp(18px, 4vw, 34px) 16px; }
.vamb-single-scope .single-article{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: clamp(16px, 2.4vw, 22px);
}

/* Optional inline featured image figure */
.vamb-single-scope .single-figure{
  margin: 0 0 14px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.vamb-single-scope .single-figure img{ width: 100%; height: auto; display: block; }
.vamb-single-scope .single-figure figcaption{
  font-size: .9rem; color: #cfd3df; padding: 8px 10px; background: rgba(255,255,255,.03);
}

/* Typography inside post */
.vamb-single-scope .single-content :where(p, ul, ol, blockquote, pre, table, figure){ margin: 0 0 1rem; }
.vamb-single-scope .single-content h2{ font-size: clamp(20px, 2.4vw, 28px); margin: 1.2rem 0 .6rem; }
.vamb-single-scope .single-content h3{ font-size: clamp(18px, 2vw, 22px); margin: 1rem 0 .5rem; }
.vamb-single-scope .single-content p{ color:#dfe3ed; line-height:1.75; }
.vamb-single-scope .single-content a{ color: var(--gold); text-decoration: none; border-bottom: 1px dotted color-mix(in srgb, var(--gold) 60%, transparent); }
.vamb-single-scope .single-content a:hover{ border-bottom-color: transparent; }
.vamb-single-scope .single-content blockquote{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-left: 6px solid var(--gold);
  padding: 12px 14px; border-radius: 10px; color: #eef1f6;
}

/* Post tags */
.vamb-single-scope .single-tags{
  display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin: 14px 0 0;
}
.vamb-single-scope .single-tags a{
  display:inline-block; font-weight:800; color:#000;
  background: linear-gradient(135deg, var(--gold), #f0d49c);
  border: 1px solid rgba(0,0,0,.15);
  padding: 6px 10px; border-radius: 999px;
}

/* Pagination for multipage posts */
.vamb-single-scope .single-pages{ margin: 14px 0 0; font-weight: 800; }

/* Bottom nav */
.vamb-single-scope .single-nav{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items:center;
  margin: 16px 0 0;
}
.vamb-single-scope .single-nav__col{ min-height: 44px; display:flex; align-items:center; }
.vamb-single-scope .single-nav__prev{ justify-content:flex-start; }
.vamb-single-scope .single-nav__next{ justify-content:flex-end; }
.vamb-single-scope .single-nav a{
  display:inline-block;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #131821;
  color: var(--ink);
  font-weight: 800;
}
.vamb-single-scope .single-nav a:hover{ background:#0f141c; }
.vamb-single-scope .single-nav__all a{
  border-color: var(--gold); color:#000; background: var(--gold);
}

/* Comments wrapper if used */
.vamb-single-scope .single-comments{
  margin-top: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 14px;
}

/* Mobile */
@media (max-width: 640px){
  .vamb-single-scope .single-nav{
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .vamb-single-scope .single-nav__prev,
  .vamb-single-scope .single-nav__all,
  .vamb-single-scope .single-nav__next{
    justify-content: center;
  }
}
/* =========================
   Single — Prev/Next cells
   ========================= */
.vamb-single-scope .single-adj{
  margin-top: 18px;
}
.vamb-single-scope .adj-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Card */
.vamb-single-scope .adj{
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.vamb-single-scope .adj:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
}

/* Image: standard size */
.vamb-single-scope .adj__media{
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.vamb-single-scope .adj__media img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transform: scale(1.02);
  transition: transform .4s ease;
}
.vamb-single-scope .adj:hover .adj__media img{
  transform: scale(1.06);
}

/* Body */
.vamb-single-scope .adj__body{
  padding: 12px 12px 14px;
  display: grid; gap: 6px;
}
.vamb-single-scope .adj__tag{
  display: inline-block;
  font-weight: 800; font-size: .82rem; letter-spacing: .06em;
  color: #000; background: var(--gold);
  padding: 6px 10px; border-radius: 999px;
  width: fit-content;
}
.vamb-single-scope .adj__title{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--ink);
}

/* If only one neighbor exists, make it span full width */
.vamb-single-scope .adj-grid > .adj:only-child{
  grid-column: 1 / -1;
}

/* Mobile */
@media (max-width: 640px){
  .vamb-single-scope .adj-grid{ grid-template-columns: 1fr; }
}

/* === Single Post — Headings fix (dark theme) === */
.vamb-single-scope .single-content{
  /* easy tuning if you want later */
  --h1: clamp(28px, 4.6vw, 40px);
  --h2: clamp(22px, 3.2vw, 30px);
  --h3: clamp(20px, 2.6vw, 24px);
  --h4: clamp(18px, 2.2vw, 20px);
}

/* Force heading color to light inside the article */
.vamb-single-scope .single-content :where(h1,h2,h3,h4,h5,h6){
  color: var(--ink) !important;
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: .2px;
  margin: 1.25em 0 .55em;
}

/* Sizing (optional, keeps things consistent) */
.vamb-single-scope .single-content h1{ font-size: var(--h1); }
.vamb-single-scope .single-content h2{ font-size: var(--h2); }
.vamb-single-scope .single-content h3{ font-size: var(--h3); }
.vamb-single-scope .single-content h4{ font-size: var(--h4); }

/* Small underline on H2 for structure (can remove if you prefer flat) */
.vamb-single-scope .single-content h2{
  position: relative; padding-bottom: .25em;
}
.vamb-single-scope .single-content h2::after{
  content:""; display:block; height:2px; margin-top:.45em; width:72px; border-radius:999px;
  background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 40%, transparent));
}

/* Tighten spacing to the text that follows a heading */
.vamb-single-scope .single-content :where(h1,h2,h3,h4,h5,h6) + :where(p,ul,ol,pre,blockquote,figure){
  margin-top: .35em;
}

/* Gutenberg safety: ensure wp-block-heading isn’t black */
.vamb-single-scope .single-content .wp-block-heading{ color: var(--ink) !important; }

/* =========================
   Single — Prev/Next cells
   ========================= */
.vamb-single-scope .single-adj{
  margin-top: 18px;
}
.vamb-single-scope .adj-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Card */
.vamb-single-scope .adj{
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.vamb-single-scope .adj:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
}

/* Image: standard size */
.vamb-single-scope .adj__media{
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.vamb-single-scope .adj__media img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transform: scale(1.02);
  transition: transform .4s ease;
}
.vamb-single-scope .adj:hover .adj__media img{
  transform: scale(1.06);
}

/* Body */
.vamb-single-scope .adj__body{
  padding: 12px 12px 14px;
  display: grid; gap: 6px;
}
.vamb-single-scope .adj__tag{
  display: inline-block;
  font-weight: 800; font-size: .82rem; letter-spacing: .06em;
  color: #000; background: var(--gold);
  padding: 6px 10px; border-radius: 999px;
  width: fit-content;
}
.vamb-single-scope .adj__title{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--ink);
}

/* If only one neighbor exists, make it span full width */
.vamb-single-scope .adj-grid > .adj:only-child{
  grid-column: 1 / -1;
}

/* Mobile */
@media (max-width: 640px){
  .vamb-single-scope .adj-grid{ grid-template-columns: 1fr; }
}

/* Force headings to show on dark backgrounds in About/Services sections */
.about-page h3,
.services-page h3,
#massage-styles h3,
.fx-showcase h3 {
  color: var(--ink); /* usually your light text */
}