/* ====== CSS Reset (trimmed) ====== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}

/* ====== Tokens ====== */
:root{
  --bg:#1a1a1a;          /* page background */
  --panel:#232323;       /* card/panel background */
  --text:#eaeaea;        /* body text */
  --muted:#b7b7b7;       /* secondary text */
  --gold:#c69c5e;        /* accent */
  --gold-2:#d7b27e;      /* hover accent */
  --shadow:0 10px 25px rgba(0,0,0,.25);
  --radius:16px;
  --max:1200px;
}

/* ====== Base ====== */
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  line-height:1.55
}
.container{width:min(92%,var(--max));margin-inline:auto}
.stack{display:grid;gap:clamp(10px,1.6vw,18px)}
.section{padding:clamp(24px,4.2vw,48px) 0}
.eyebrow{letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-size:.78rem}
h1,h2,h3{line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(28px,4.5vw,44px)}
h2{font-size:clamp(22px,3.2vw,32px)}
h3{font-size:clamp(18px,2.4vw,22px)}
p{margin:0 0 1em;color:var(--text)}
.muted{color:var(--muted)}

/* ====== Header ====== */
header{position:sticky;top:0;z-index:50;background:rgba(17,17,17,.7);backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid #2b2b2b}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:36px;height:36px;border-radius:50%;background:radial-gradient(100% 100% at 30% 20%,#f4e3c2 0%,#bf9053 35%,#7a5528 100%);box-shadow:0 1px 0 rgba(255,255,255,.2) inset}
.brand strong{font-weight:700;letter-spacing:.3px}
.links{display:flex;gap:18px;align-items:center}
.links a{color:#dcdcdc;font-size:.98rem}
.links a:hover{color:#fff}
.cta{background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#111;padding:10px 16px;border-radius:999px;font-weight:600;box-shadow:var(--shadow)}
.menu-btn{display:none;border:1px solid #3b3b3b;background:#161616;border-radius:10px;padding:8px 10px}

@media (max-width:900px){
  .links{display:none}
  .menu-btn{display:inline-grid;place-items:center}
  .mobile-panel{position:fixed;inset:56px 0 auto 0;background:#121212;border-top:1px solid #2a2a2a;padding:14px 20px;display:none}
  .mobile-panel a{display:block;padding:12px 0;border-bottom:1px solid #222;color:#ddd}
  .mobile-panel .cta{display:inline-block;margin-top:12px}
  body.nav-open{overflow:hidden}
  body.nav-open .mobile-panel{display:block}
}

/* ====== Hero ====== */
.hero{position:relative;min-height:64vh;display:grid;place-items:center}
@supports (height: 1svh){ .hero{min-height:56svh} }
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.55)),
             url('https://images.unsplash.com/photo-1519741497674-611481863552?q=80&w=2000&auto=format&fit=crop') center/cover no-repeat;
  filter:saturate(95%)
}
.hero > .container{position:relative;z-index:2}
.hero-card{max-width:820px;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(6px);border-radius:var(--radius);padding:clamp(16px,3vw,24px);box-shadow:var(--shadow)}
.hero .kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:8px}
.play{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:999px;background:radial-gradient(100% 100% at 30% 25%,#ffeccb,#caa36d);color:#111;font-weight:700}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid #3a3a3a;background:#161616;color:#f1f1f1}
.btn:hover{border-color:#555}
.btn.primary{background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#111;border:none}

/* ====== Girls grid ====== */
/* Featured companions: 5-up grid, larger tiles */
.tiles-5{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  margin-bottom:12px; /* spacing between the two rows */
}
@media (max-width:1200px){ .tiles-5{grid-template-columns:repeat(4,1fr)} }
@media (max-width:900px){  .tiles-5{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){  .tiles-5{grid-template-columns:repeat(2,1fr)} }

/* Tile (link) */
.tile{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  background:#2a2a2a;
  border:1px solid #2c2c2c;
  display:block;
  isolation:isolate;
  box-shadow:var(--shadow);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.tile img{
  width:100%;
  height:auto;
  aspect-ratio:3/4;            /* taller = larger visual impact */
  object-fit:cover;
  transform:scale(1);
  transition:transform .5s ease;
  filter:saturate(95%);
}

/* Hover animation: zoom image + lift + subtle glow */
.tile::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
  opacity:.8; transition:opacity .35s ease;
  z-index:1;
}
.tile:hover{ transform:translateY(-4px); box-shadow:0 16px 30px rgba(0,0,0,.38); border-color:#3a3a3a }
.tile:hover img{ transform:scale(1.06) }
.tile:hover::after{ opacity:.95 }

/* Label with age + location that slides up on hover */
.tile .label{
  position:absolute;
  left:8px; right:8px; bottom:8px;
  z-index:2;
  background:rgba(0,0,0,.55);
  backdrop-filter:saturate(130%) blur(2px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:8px 10px;
  transform:translateY(8px);
  opacity:.96;
  transition:transform .35s ease, opacity .35s ease;
  display:flex; flex-direction:column; gap:2px;
}
.tile .label strong{font-weight:700}
.tile .label span{font-size:.88rem;color:var(--muted)}
.tile:hover .label{ transform:translateY(0); opacity:1 }

/* Keyboard focus */
.tile:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

/* ====== Two column feature ====== */
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:center}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid #2c2c2c;border-radius:var(--radius);padding:clamp(14px,2.4vw,20px);box-shadow:var(--shadow)}

/* ====== Services ====== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid #2c2c2c;border-radius:16px;overflow:hidden;display:grid;transition:transform .35s ease, box-shadow .35s ease}
.card img{aspect-ratio:16/9;object-fit:cover;filter:saturate(92%)}
.card-content{padding:14px}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 26px rgba(0,0,0,.35)}

/* ====== Reasons row ====== */
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.reasons{grid-template-columns:1fr}}
.reason{background:#1f1f1f;border:1px solid #2a2a2a;padding:16px;border-radius:14px}

/* ====== CTA stripe ====== */
.stripe{background:linear-gradient(180deg,#262626,#1b1b1b);border-top:1px solid #2b2b2b;border-bottom:1px solid #2b2b2b}

/* ====== Footer ====== */
footer{background:#111;border-top:1px solid #2b2b2b}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:16px}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot small{color:#9d9d9d}
.foot a:hover{color:#fff}
.copyright{border-top:1px solid #2b2b2b;margin-top:14px;padding-top:10px;color:#8a8a8a;font-size:.9rem}

/* ===== Utilities ===== */
.center{text-align:center}
.tag{display:inline-block;border:1px solid #3a3a3a;border-radius:999px;padding:4px 10px;font-size:.82rem;color:#cdc9c4}
.spacer{height:20px}

/* ===== Minimal motion ===== */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
}

/* ===== Scroll-driven reveal (used on some panels) ===== */
@supports (scroll-timeline: auto) {
  @scroll-timeline pageScroll { source: auto; }
  .reveal{
    opacity:0; transform:translateY(14px);
    animation: revealUp 1 both;
    animation-timeline: pageScroll;
    animation-range: entry 25% cover 30%;
  }
  @keyframes revealUp{to{opacity:1; transform:translateY(0)}}
}

/* ===== Erotic Massage: cell/grid layout ===== */
.cells{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
@media (max-width:1100px){ .cells{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .cells{grid-template-columns:1fr} }

.cell{
  background:var(--panel);
  border:1px solid #2c2c2c;
  border-radius:16px;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr;
  transition:transform .35s ease, box-shadow .35s ease;
}
.cell:hover{ transform:translateY(-4px); box-shadow:0 14px 26px rgba(0,0,0,.35) }

.cell-media img{
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  filter:saturate(95%);
  display:block;
}

.cell-content{ padding:14px }

/* ===== Profile Page ===== */
.profile-toolbar .container{
  display:flex;align-items:center;justify-content:space-between
}
.back-link{color:#dcdcdc}
.back-link:hover{color:#fff}

.profile-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:start
}
@media (max-width:1000px){
  .profile-grid{grid-template-columns:1fr}
}

/* Media */
.profile-media{position:relative}
.media-stage{position:relative;border-radius:14px;overflow:hidden;border:1px solid #2c2c2c;background:#111}
.media-image{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;filter:saturate(96%)}
.media-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  border:1px solid #3a3a3a;background:#161616;border-radius:999px;width:34px;height:34px;
  display:grid;place-items:center;color:#eaeaea;opacity:.9
}
.media-nav:hover{border-color:#555}
.media-nav.prev{left:10px}
.media-nav.next{right:10px}

.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.thumbs .thumb{border:1px solid #2c2c2c;border-radius:10px;overflow:hidden;background:#1a1a1a;cursor:pointer;padding:0}
.thumbs .thumb img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;filter:saturate(92%);opacity:.9;transition:opacity .25s ease, transform .25s ease}
.thumbs .thumb:hover img{opacity:1;transform:scale(1.02)}
.thumbs .thumb.is-active{outline:2px solid var(--gold);outline-offset:2px}

/* Header on right */
.profile-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px
}
.profile-name{margin:0 0 4px;font-size:clamp(22px,3.2vw,30px)}
.profile-cta{display:flex;gap:8px;flex-wrap:wrap}

/* Accordions */
.accordion summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  font-weight:700
}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"▾";color:#bbb;transition:transform .2s ease}
details[open].accordion summary::after{transform:rotate(180deg)}
.acc-body{margin-top:10px}

/* Rates table */
.rates{width:100%;border-collapse:collapse}
.rates thead th{background:#1e1e1e;color:#eaeaea}
.rates th,.rates td{border:1px solid #2a2a2a;padding:10px 12px;text-align:left}
.rates tbody tr:hover{background:#1a1a1a}

/* Stats grid */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:560px){.stats{grid-template-columns:1fr}}
.stats > div{display:flex;align-items:center;justify-content:space-between;border:1px solid #2a2a2a;background:#1b1b1b;border-radius:10px;padding:8px 10px}
.stats > div span{color:#aaa}

/* --- Services card heading visibility & stacking fix --- */
.card img{
  display:block;               /* removes any stray line-gap */
}

.card-content{
  position:relative;           /* ensure it paints above the image */
  z-index:1;                   /* avoids any accidental overlap */
  background:transparent;      /* keep dark theme intact */
}

.card-content h3{
  margin:0 0 .45em;
  color:#fff;                  /* stronger than body text */
  font-weight:700;
  line-height:1.2;
  font-size:clamp(18px,2.2vw,20px);
  letter-spacing:.2px;
}

/* optional: balance spacing in that section */
#services .cards{ gap:16px }
#services .card-content p{ margin:0 }

/* --- Erotic Massage grid: tidy image layout & overlay badge --- */
.cells-massage{ align-items:start }              /* prevents uneven row baselines */
.cells-massage .cell{
  grid-template-rows:auto 1fr;
  border-radius:14px;
}

.cells-massage .cell-media{
  position:relative;
  overflow:hidden;
  background:#111;
}
.cells-massage .cell-media img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/3;          /* consistent tile height */
  object-fit:cover;
  transform:scale(1);
  transition:transform .45s ease;
  filter:saturate(96%);
}
.cells-massage .cell:hover .cell-media img{ transform:scale(1.04) }

.cell-badge{
  position:absolute; left:10px; bottom:10px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.08);
  color:#fff; font-size:.85rem; font-weight:700;
  backdrop-filter:saturate(130%) blur(2px);
}

.cells-massage .cell-content h3{
  margin:0 0 .35em;
  font-weight:700;
  color:#fff;
}
.cells-massage .cell-content p{ margin:0 }