/* ===========================
   Lido Massage — Base Styles
   =========================== */
:root{
  --bg: #f7fbf9;          /* subtle green tint */
  --ink: #1f2a37;
  --muted: #5b6275;
  --border: #e6eaee;

  --primary: #0a7b64;      /* Lido green */
  --primary-weak: #e9f4f1; /* soft mint */
  --accent: #f8fbfa;

  --radius: 14px;
  --shadow: 0 8px 24px rgba(16,24,40,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
  line-height:1.55;
}

/* Links */
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}

/* Containers & Sections */
.container{max-width:1100px; margin:0 auto; padding:0 20px}
.section{padding:48px 0}
.section--tight{padding:28px 0}

/* Spacing utilities */
.mt-0{margin-top:0}
.mt-1{margin-top:8px}
.mt-2{margin-top:12px}
.mt-3{margin-top:18px}
.mt-4{margin-top:24px}
.center{text-align:center}
.note{color:var(--muted)}

/* Headings */
h1,h2,h3,h4{line-height:1.2; margin:0 0 6px}
.h2{font-size:1.6rem; margin:0}

/* Header / Nav */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--border);
  backdrop-filter:saturate(140%) blur(8px);
}
.nav{display:flex; align-items:center; gap:18px; padding:14px 0;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.1rem; color:var(--ink)}
.brand-mark{height:36px; width:auto; display:block}
.nav-links{margin-left:auto; display:flex; gap:16px; flex-wrap:wrap}
.nav-links a{color:#3b4151; padding:6px 6px; border-radius:8px}
.nav-links a.active{color:var(--primary); font-weight:700}

/* Hero */
.hero{
  padding:56px 0 44px;
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--primary-weak), #ffffff);
  border-bottom:1px solid var(--border);
}
.hero-inner{max-width:820px; margin:0 auto}
.lead{color:#3b4151; font-size:1.1rem}

/* Hero logo (responsive size) */
.hero .hero-logo{
  width: clamp(300px, 38vw, 520px);
  max-width: 90%;
  margin: 0 auto 10px;
  display: block;
  height: auto;
}

/* Badges / Pills */
.badge-soft{
  display:inline-block; background:#eef4f1; color:#223;
  padding:6px 10px; border-radius:999px; font-size:12px
}
.pill{
  display:inline-block; background:var(--primary);
  color:#fff; padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:600;
}

/* Buttons */
.btn{
  display:inline-block; padding:12px 16px;
  border-radius:10px; border:1px solid var(--primary);
  background:var(--primary); color:#fff; font-weight:700;
  text-decoration:none; transition:transform .04s ease, box-shadow .2s ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); box-shadow:var(--shadow) }
.btn:active{ transform:translateY(0) }

.btn-outline{
  display:inline-block; padding:12px 16px;
  border-radius:10px; border:1px solid var(--primary);
  background:transparent; color:var(--primary); font-weight:700;
}
.btn-outline:hover{ background:var(--primary-weak); text-decoration:none }

/* Cards / Panels */
.card{
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); padding:18px; box-shadow:0 1px 0 rgba(16,24,40,.02);
}

/* Offer band */
.offer{
  background: linear-gradient(90deg, var(--primary-weak), #f3faf8);
  border:1px solid #d9ebe6; border-radius:var(--radius);
  padding:14px 16px; display:flex; gap:12px; align-items:center; justify-content:space-between;
}
.offer .note{color:var(--muted); font-size:14px}

/* Grids */
.grid{display:grid; gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}

/* Media helpers */
.circle{width:220px; height:220px; border-radius:50%; object-fit:cover; display:block; margin:auto}
@media (max-width:840px){ .circle{width:180px; height:180px} }

/* Price cards */
.price-card h4{margin:0 0 8px}
.price-card .line{
  display:flex; justify-content:space-between; gap:12px;
  padding:10px 0; border-bottom:1px dashed #e6e6e6;
}
.price-card .line:last-child{border-bottom:none}
.price-card .amt{font-weight:700}

/* Gallery cards */
.gallery img{width:100%; height:220px; object-fit:cover; border-radius:12px}
.gallery .card{padding:0; overflow:hidden}
.gallery .card h4{margin:12px 14px 6px}
.gallery .card p{margin:0 14px 14px; color:#445}

/* Address line */
.address{line-height:1.5}

/* Footer */
.site-footer{
  border-top:1px solid var(--border); background:#fff; color:#3b4151;
  padding:26px 0; margin-top:20px;
}

/* Safety */
img{max-width:100%; height:auto; display:block}

/* Specials list */
.specials{ list-style:none; margin:0; padding:0 }
.specials li{
  display:flex; gap:12px; align-items:center;
  background:#fff; border:1px solid var(--border);
  border-radius: var(--radius); padding:12px 14px; margin-top:10px;
}
.specials .tag{
  display:inline-block; min-width:74px; text-align:center;
  background: var(--primary); color:#fff; font-weight:700;
  padding:6px 10px; border-radius: 999px;
}

/* Video grid (responsive) */
.video-grid{ display:grid; gap:18px; grid-template-columns:repeat(3,1fr) }
@media (max-width:900px){ .video-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:680px){ .video-grid{ grid-template-columns:1fr } }
.video{ position:relative; width:100%; padding-bottom:56.25%; border-radius: var(--radius); overflow:hidden; background:#0001; border:1px solid var(--border) }
.video iframe{ position:absolute; inset:0; width:100%; height:100% }