/* =========================================================
   SanDiegoEscortsxx — Global Styles (final consolidated CSS)
   ========================================================= */

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

/* Tokens */
:root{
  --rose:#e91e63;
  --rose-700:#c2185b;
  --ink:#16161a;
  --ink-2:#22232a;
  --paper:#ffffff;
  --wash:#f5f5f7;
  --muted:#8a8f98;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.14);
  --shadow-sm:0 6px 18px rgba(0,0,0,.10);
  --container:1280px; /* compact + a touch wider */
}

/* Base */
body{
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}
.container{width:min(var(--container),94%);margin-inline:auto}
.center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(22,22,26,.88);backdrop-filter:saturate(120%) blur(10px);color:#fff}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand__mark{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--rose),#ff6f91);display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.brand__mark svg{width:20px;height:20px;fill:#fff}
.brand__name{font-weight:700;letter-spacing:.2px}
nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0}
nav a{color:#fff;opacity:.9}
nav a:hover{opacity:1}
.menu-toggle{display:none;background:transparent;border:0;color:#fff}
.cta-btn{background:var(--rose);color:#fff;padding:10px 16px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;box-shadow:var(--shadow-sm)}
.cta-btn:hover{background:var(--rose-700)}

/* Announcement bar */
.announce{background:#0e0e10;color:#cbd5e1;text-align:center;font-size:14px;padding:8px 12px}

/* Mobile nav */
@media(max-width:960px){
  nav{position:fixed;inset:auto 0 0 0;transform:translateY(102%);transition:transform .28s ease;background:#111;padding:18px 0}
  nav.open{transform:translateY(0)}
  nav ul{flex-direction:column;gap:14px;align-items:center}
  .menu-toggle{display:grid;place-items:center}
}

/* Hero (compact full-screen) */
.hero{position:relative;background:#000;color:#fff;overflow:hidden;min-height:52vh}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 120% at 70% 10%,rgba(233,30,99,.5),transparent 70%),linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.7))
}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:center 35%;filter:grayscale(.2) contrast(1.05) brightness(.9)}
.hero__inner{position:relative;z-index:1;padding:9vh 0 7vh}
.hero h1{font-size:clamp(32px,4vw,56px);line-height:1.1;max-width:20ch;margin:0}
.hero p{max-width:55ch;opacity:.88}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.3);color:#fff}
.btn.primary{background:var(--rose);border-color:transparent}
.btn.primary:hover{background:var(--rose-700)}
@media (max-width:720px){
  .hero{min-height:44vh}
  .hero__inner{padding:7vh 0}
}

/* Pills */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}
.pill{border:1px solid #eee;padding:8px 12px;border-radius:999px;background:#fff}

/* Sections (compact rhythm) */
section{padding:32px 0;margin:0}
.section-title{font-size:clamp(22px,2.6vw,34px);margin:0 0 8px}
.section-sub{color:var(--muted);margin:0 0 16px}

/* 3-up grid cards */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:#fff;border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm);border:1px solid #eee}
.card h3{margin:6px 0 6px;font-size:18px}
.card p{margin:0}
@media(max-width:960px){.grid-3{grid-template-columns:1fr}}

/* Split blocks */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:center}
.split .panel{background:#111;color:#fff;border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.split .panel p{opacity:.9}
.media-frame{border-radius:var(--radius);overflow:hidden;box-shadow:none;border:2px solid #e5e7eb}
@media(max-width:960px){.split{grid-template-columns:1fr}}

/* Highlights / badges & service cards (smaller) */
.badges{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;align-items:center;justify-items:center;margin-top:10px
}
.badge-item{display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:600;font-size:14px}
.badge-item img{width:44px;height:44px;object-fit:contain;filter:saturate(.95) contrast(1.05)}
@media(max-width:720px){.badges{grid-template-columns:repeat(2,1fr)}}

.service-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px}
.svc{border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm);border:1px solid #eee}
.svc.dark{background:#141416;color:#fff}
.svc.light{background:#fff}
.svc h3{margin:0 0 4px}
.svc-link{display:inline-block;margin-top:8px;color:var(--rose)}
@media(max-width:960px){.service-cards{grid-template-columns:1fr}}

/* Alternating features */
.features{background:transparent}
.feature{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:center;padding:14px 0}
.feature.reverse{grid-template-columns:.9fr 1.1fr}
.feature.reverse .feature-media{order:2}
.feature.reverse .feature-copy{order:1}
.feature-copy ul{padding-left:18px;margin:10px 0}
.feature-copy li{margin:4px 0}
.feature-media img{border:2px solid #e5e7eb;border-radius:14px}
@media(max-width:960px){.feature,.feature.reverse{grid-template-columns:1fr}}

/* Gallery (Featured companions) — standardized 3:4 portrait with lift */
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:1100px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}

.tile{
  position:relative;
  aspect-ratio:3/4;
  border-radius:14px;
  overflow:hidden;
  background:#000;
  border:2px solid #e5e7eb;
  transition:transform .25s ease, box-shadow .25s ease;
  will-change:transform;
}
.tile img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  transition:transform .35s ease;
  filter:grayscale(.03);
}
.tile .meta{
  position:absolute;inset:auto 8px 8px 8px;
  background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.7));
  color:#fff;padding:8px 10px;border-radius:10px
}
.tile .meta strong{font-size:14px}
.tile .meta small{font-size:12px}

@media(hover:hover){
  .tile:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 28px rgba(0,0,0,.18);
  }
  .tile:hover img{ transform:scale(1.03); }
}

/* Stripe CTA */
.stripe{background:linear-gradient(135deg,var(--rose),#ff6f91);color:#fff;text-align:center}

/* Areas */
.areas{background:#0e0e10;color:#e5e7eb;padding:32px 0}
.areas .section-title{color:#fff}
.areas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.area{background:#16161a;border:1px solid #23232a;border-radius:14px;padding:16px;text-align:center}
@media(max-width:960px){.areas-grid{grid-template-columns:repeat(2,1fr)}}

/* Two CTAs */
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.call.small{border-radius:16px;padding:18px;background:#fff;box-shadow:var(--shadow-sm);border:1px solid #eee}
.call.small.dark{background:#111;color:#fff}
@media(max-width:960px){.two{grid-template-columns:1fr}}

/* Rates */
.rates{background:var(--wash)}
.pricing{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.price{background:#fff;border:1px solid #eee;border-radius:16px;padding:16px;text-align:center;box-shadow:var(--shadow-sm)}
.price .amt{font-size:28px;font-weight:800;margin:.2rem 0}
.price.popular{border:2px solid var(--rose)}
.fine{color:var(--muted);margin-top:10px}
@media(max-width:1100px){.pricing{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.pricing{grid-template-columns:repeat(2,1fr)}}

/* Testimonials */
.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.quote{background:#fff;border:1px solid #eee;border-radius:16px;padding:18px;box-shadow:var(--shadow-sm)}
.quote p{margin:0}
.quote footer{margin-top:10px;font-weight:600}
@media(max-width:960px){.testis{grid-template-columns:1fr}}

/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1100px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.blog-grid{grid-template-columns:1fr}}
.post{border:1px solid #eee;border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow-sm)}
.post__body{padding:16px}
.badge{display:inline-block;background:#111;color:#fff;border-radius:999px;padding:4px 10px;font-size:12px}

/* Contact */
.contact{background:var(--wash);border-radius:20px;padding:24px;box-shadow:var(--shadow-sm);border:1px solid #eee}
.contact form{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.contact label{font-size:14px;color:#333}
.contact input,.contact textarea,.contact select{border:1px solid #ddd;border-radius:12px;padding:12px;background:#fff;width:100%}
.contact textarea{min-height:120px;grid-column:span 2}
.contact .actions{grid-column:span 2}
@media(max-width:720px){.contact form{grid-template-columns:1fr}.contact textarea,.contact .actions{grid-column:1}}

/* Footer */
footer{background:#0e0e10;color:#cbd5e1;margin-top:32px}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px;padding:36px 0}
.foot h4{color:#fff;margin:0 0 10px}
.foot a{color:#cbd5e1}
.copyright{border-top:1px solid #1f2937;color:#94a3b8;font-size:14px;padding:14px 0}
@media(max-width:960px){.foot{grid-template-columns:1fr}}

/* ===== Scroll reveal (respects reduced motion) ===== */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(16px)}
  .reveal.in{opacity:1;transform:none;transition:opacity .5s ease, transform .5s ease}

  .reveal-img{opacity:0;transform:scale(.98)}
  .reveal-img.in{opacity:1;transform:scale(1);transition:opacity .6s ease, transform .6s ease}

  /* keep gallery hover gentle; lift handled above */
}
/* example: lift the subject up a bit */
.gallery .tile:nth-child(3) img{ object-position:center 20%; }

/* Erotic Massage section */
#erotic-massage .card{
  transition:transform .25s ease, box-shadow .25s ease;
}
#erotic-massage .card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 20px rgba(0,0,0,.12);
}
#erotic-massage h3 a{
  color:var(--rose);
}
#erotic-massage h3 a:hover{
  text-decoration:underline;
}

#erotic-massage .tile{
  aspect-ratio: 4 / 3; /* landscape feel for massages */
}

/* make whole tile clickable and keep your hover/lift */
.tile > a{
  display:block;
  height:100%;
  color:inherit;
}
.tile.lift:hover{ transform: translateY(-4px); } /* uses your lift pattern */
.tile.lift{ transition: transform .25s ease; }