/* ---------------------------
   Theme (premium, minimal)
---------------------------- */
:root{
  --bg: #fbfaf7;
  --ink: #1b1f23;
  --muted: #6b705c;
  --panel: #ffffff;
  --line: #ece9e0;
  --brand: #6bbf59;       /* herbal green */
  --brand-ink: #0f3a17;
  --accent: #f07a3f;      /* earthy orange */
  --shadow: 0 12px 30px rgba(20,20,20,.08);
  --radius: 16px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -5%, #eaf6ee 0%, transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, #fff2e9 0%, transparent 55%),
    url("../img/texture-noise.png");
  background-attachment: fixed, fixed, fixed;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{max-width:100%;display:block}

/* Containers */
.container{max-width:1120px;margin:0 auto;padding: clamp(20px,4vw,28px)}
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
  padding: clamp(18px,3vw,28px);
  margin-block: clamp(12px,3vw,22px);
}

/* Header */
.site-header{
  position: sticky; top:0; z-index:40;
  background: rgba(255,255,255,.7);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px clamp(16px,4vw,28px);
}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.brand-mark{width:26px;height:26px}
.brand-text{font-weight:800;letter-spacing:.2px}

.menu{display:flex;gap:22px;align-items:center}
.menu a{color:inherit;text-decoration:none;font-weight:600}
.menu a.cta{
  background:var(--ink); color:#fff; padding:10px 14px; border-radius:12px;
}
.menu-toggle{display:none; position:relative; width:34px; height:26px; border:0; background:transparent; cursor:pointer}
.menu-toggle span{position:absolute; left:0; right:0; height:2px; background:#0f172a; border-radius:2px; transition:.3s}
.menu-toggle span:nth-child(1){top:4px}
.menu-toggle span:nth-child(2){top:12px}
.menu-toggle span:nth-child(3){top:20px}

/* Mobile menu */
@media (max-width: 900px){
  .menu{position:fixed; inset:64px 16px 16px; background:var(--panel); border:1px solid var(--line);
        border-radius:20px; box-shadow:var(--shadow);
        padding:20px; display:grid; gap:14px; transform:translateY(-16px) scale(.98);
        opacity:0; pointer-events:none; transition:.28s ease}
  .menu.open{opacity:1; pointer-events:auto; transform:none}
  .menu a{padding:10px 12px; border-radius:12px}
  .menu a:hover{background:#f5f4ef}
  .menu-toggle{display:inline-block}
}

/* Hero */
.hero{
  max-width:1120px; margin:0 auto;
  display:grid; gap: clamp(20px,4vw,40px);
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  padding: clamp(20px,4vw,28px);
}
@media (max-width: 980px){ .hero{grid-template-columns:1fr} }

.eyebrow{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:0 0 8px}
.hero h1{
  font-family: "Playfair Display", serif;
  font-weight:700;
  font-size: clamp(30px, 4vw, 48px);
  line-height:1.1;
  margin:0 0 8px;
}
.hero h1 span{display:block}
.sub{color:#475569;margin:0 0 14px}

.trust{display:flex;flex-wrap:wrap;gap:8px 10px;margin:14px 0 22px;padding:0;list-style:none}
.trust li{
  font-size:12px; color:#334155; background:#ecf7ee;
  border:1px solid #e4f0e7; border-radius:999px; padding:6px 10px;
}

.cta-row{display:flex;gap:12px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; font-weight:800; border-radius:12px; transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary{background:var(--brand); color:#0b2914; padding:12px 16px; box-shadow:0 10px 20px rgba(107,191,89,.25)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 14px 28px rgba(107,191,89,.28)}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line); padding:12px 14px}
.btn-ghost:hover{background:#f7f6f2}

.hero-media .portrait{
  border-radius:28px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow);
  background: #fff;
}
.hero-media img{aspect-ratio: 4/5; object-fit:cover; width:100%}

/* About */
.about{display:grid; gap:24px; grid-template-columns: 160px 1fr}
@media (max-width: 720px){ .about{grid-template-columns: 1fr} }
.avatar-lg{width:160px; height:160px; object-fit:cover; border-radius:50%; border:4px solid #dff0df; box-shadow: var(--shadow)}

h2{font-size: clamp(22px, 3vw, 32px); margin:0 0 6px}
h3{font-size: clamp(18px, 2.2vw, 22px); margin:0 0 6px}
.muted{color:var(--muted)}
.bullets{margin:10px 0 0; padding:0 0 0 20px}

/* Services */
.section-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:8px}
.cards{display:grid; gap:16px; grid-template-columns: repeat(3, 1fr)}
@media (max-width: 980px){ .cards{grid-template-columns: 1fr 1fr} }
@media (max-width: 640px){ .cards{grid-template-columns: 1fr} }

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position:relative; overflow:hidden;
}
.card:hover{transform: translateY(-3px); box-shadow: 0 18px 40px rgba(15,23,42,.08); border-color:#e4e1d9}
.pill{
  position:absolute; top:14px; right:14px;
  background: rgba(56,189,248,.14); color:#0b6c9b;
  border:1px solid rgba(56,189,248,.28);
  padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700;
}
.price{font-weight:800; margin:.2rem 0 1rem}

/* Testimonials */
.quotes{display:grid; gap:14px; grid-template-columns: repeat(2, 1fr)}
@media (max-width: 800px){ .quotes{grid-template-columns: 1fr} }
blockquote{
  margin:0; padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow: var(--shadow);
}
blockquote cite{display:block; margin-top:6px; color:var(--muted); font-style:normal}

/* FAQ */
.faq details{
  border:1px solid var(--line);
  background:#fff; border-radius:14px; padding:14px 16px;
}
.faq details+details{margin-top:10px}
.faq summary{cursor:pointer; font-weight:700; list-style:none}
.faq summary::-webkit-details-marker{display:none}

/* Footer */
.site-footer{
  margin-top: 36px;
  border-top:1px solid var(--line);
  background:
    linear-gradient(to bottom, transparent, rgba(0,0,0,.02)),
    url("../img/texture-noise.png");
  padding: 26px clamp(16px,4vw,28px);
}
.footer-grid{max-width:1120px; margin:0 auto; display:grid; gap:16px; grid-template-columns: 1.3fr .7fr}
@media (max-width: 900px){ .footer-grid{grid-template-columns:1fr} }
.disclaimer{color:#4b5563; margin:0}
.copy{max-width:1120px; margin:8px auto 0; color:#6b7280}

/* WhatsApp FAB */
.whatsapp{
  position: fixed; right:18px; bottom:18px; z-index:50;
  display:inline-flex; align-items:center; gap:8px;
  font-weight:800; color:#fff; text-decoration:none;
  background:#25D366; padding:12px 14px; border-radius:999px;
  box-shadow: 0 10px 20px rgba(37,211,102,.35);
  transition: transform .18s ease;
}
.whatsapp:hover{transform: translateY(-1px)}

/* Popular pill */
.pill{
  position:absolute;
  top:12px;
  left:12px;                 /* or right:12px; if you want it on the right */
  display:inline-flex !important;
  align-items:center;
  height:26px;
  padding:0 10px;
  font-size:12px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  width:auto !important;     /* prevent full-width stretch */
  max-width:max-content;
  border-radius:999px;
  background:#e6f4ea;
  color:#2d6a4f;
  border:1px solid #cfead8;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
 
}


/* Horizontal scroll section */
.receive-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 10px 0;
}

.receive-scroll::-webkit-scrollbar {
  display: none; /* hide scrollbar for clean look */
}

.receive-item {
  flex: 0 0 260px; /* fixed width cards */
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  scroll-snap-align: start;
}

.receive-item h3 {
  font-size: 16px;
  color: var(--brand);
  margin-bottom: 8px;
}

.receive-item p {
  font-size: 14px;
  color: var(--muted);
}

.receive-item img {
  width: 100%;
  height: 140px;          /* same height for all */
  object-fit: cover;      /* crops neatly */
  border-radius: 12px;
  margin-bottom: 12px;
}

.footer-grid a {
  color: #2d2d2d;   /* match your theme */
  margin-right: 10px;
  text-decoration: none;
  font-weight: 500;
}

.footer-grid a i {
  margin-right: 6px;
  color: #8bc34a;   /* green Ayurvedic accent */
}



@media (max-width: 900px){
  .menu{
    position: fixed;
    inset: 64px 16px 16px;
    background: #fff;                 /* solid background */
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:var(--shadow);
    padding:20px;
    display:grid; gap:14px;
    transform: translateY(-16px) scale(.98);
    opacity: 0;
    pointer-events: none;
    transition:.28s ease;
    z-index: 9999;                    /* sit on top */
  }
  .menu.open{
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

.consult-line{
  margin: 6px 0 0;
  color:#334155;
  font-size: 14px;
}

/* Horizontal scroll for Concerns section */
.concerns-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 10px 0;
}

.concerns-scroll::-webkit-scrollbar {
  display: none; /* hide scrollbar */
}

.concern-item {
  flex: 0 0 260px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  scroll-snap-align: start;
}

.concern-item img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 12px;
}

.concern-item h3 {
  font-size: 16px;
  color: var(--brand);
  margin-bottom: 6px;
}

.concern-item p {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 6px;
}
.concern .hint{ color:#475569; font-size:13px; }

/* Services bullets under header */
.services-bullets{
  margin: 6px 0 14px 18px;
  color:#334155;
}
.services-bullets li{ margin: 4px 0; }

/* Reviews rail */
.reviews-rail{
  display:flex; gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding: 6px 2px 6px 2px;
  -webkit-overflow-scrolling: touch;
}
.reviews-rail::-webkit-scrollbar{ height:8px }
.reviews-rail::-webkit-scrollbar-thumb{ background:#e3e0d6; border-radius:999px }

.review{
  flex: 0 0 280px;                 /* fixed card width */
  scroll-snap-align:start;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: var(--shadow);
  padding:14px;
}
@media (min-width: 980px){
  .review{ flex-basis: 340px }
}
.review .stars{
  letter-spacing: 2px;
  font-weight: 800;
  color:#0a8f3a;                   /* subtle green star tone */
  margin-bottom:6px;
}
.review p{ margin:0; color:#1f2937 }
.review cite{ display:block; margin-top:8px; color:var(--muted); font-style:normal }

.review.more{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  text-decoration:none; color:inherit;
}
.review.more strong{ font-weight:800 }
.review.more:hover{ border-color:#dddace; transform:translateY(-1px); transition: .2s }


@media (max-width: 979px){
  /* give the page bottom padding so the bar doesn't cover content */
  body{ padding-bottom: 76px; }

  .sticky-cta{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(8px);
    border-top: 1px solid #e6e6e6;
    box-shadow: 0 -8px 20px rgba(0,0,0,.06);
    z-index: 999999;                  /* above everything */
  }
  .sticky-cta__text{ display:flex; flex-direction:column; line-height:1.2 }
  .sticky-cta__text strong{ font-weight:800; font-size:15px; color:#0b2914 }
  .sticky-cta__text span{ font-size:12px; color:#64748b }
}

/* hide on desktop */
@media (min-width: 980px){
  .sticky-cta{ display:none; }
}


@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,.4); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.btn.btn-primary {
  animation: pulse 2s infinite;
}

/* === FIXED TOP HEADER (Always visible) === */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100000; /* stay above everything */
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px clamp(16px, 4vw, 28px);
}

/* make sure body content doesn't go under header */
body {
  padding-top: 70px; /* adjust based on your header height */
}


@media (max-width: 900px){
  .menu{
    position: fixed;
    inset: 64px 16px 16px;
    background: #fff;
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow: var(--shadow);
    padding:20px;
    display:grid; gap:14px;
    transform: translateY(-16px) scale(.98);
    opacity: 0;
    pointer-events: none;         /* start non-clickable */
    transition:.28s ease;
    z-index: 100001;              /* above page content */
  }
  .menu.open{
    opacity: 1;
    pointer-events: auto;         /* become clickable when open */
    transform: none;
  }
  .menu-toggle{ display:inline-block; z-index:100002; }
}

/* Ratings + bookings */
.meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 6px;
}
.meta-row .stars {
  letter-spacing: 2px;
  font-weight: 800;
  color: #0a8f3a;
}
.meta-row .meta {
  color: #475569;
  font-size: 13px;
}

/* Discounted price styling */
.price {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0.4rem 0 1rem;
}
.price .old {
  color: #9aa1a8;
  text-decoration: line-through;
  font-weight: 700;
}
.price .new {
  color: var(--brand-ink);
  background: #eaf6ee;
  border: 1px solid #d6ecdc;
  padding: 4px 8px;
  border-radius: 10px;
  font-weight: 900;
}
.price .off {
  font-size: 12px;
  font-weight: 800;
  color: #b45309;
  background: #fff7ed;
  border: 1px solid #ffedd5;
  border-radius: 999px;
  padding: 3px 8px;
}



/* === Hero social proof (ratings + bookings) === */
.hero-proof{
  display:flex; align-items:center; gap:10px;
  margin: 8px 0 6px;
}
.hero-proof .stars{
  letter-spacing: 2px;
  font-weight: 800;
  color:#0a8f3a;                 /* subtle green to match theme */
}
.hero-proof .meta{
  color:#475569; font-size:13px;
}

/* === Hero mini-tabs (Services/Reviews/FAQ) === */
.hero-tabs{
  display:flex; gap:10px; flex-wrap:wrap;
  margin: 8px 0 10px;
}
.hero-tabs .tab{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:999px;
  text-decoration:none; font-weight:700; font-size:13px;
  border:1px solid var(--line); background:#fff; color:var(--ink);
}
.hero-tabs .tab.active{
  background:#f4f7f5; border-color:#e7efe6; color:#2f4f3a;
}

/* Mobile tighten */
@media (max-width:640px){
  .hero-proof .meta{ font-size:12px }
  .hero-tabs .tab{ padding:7px 10px; font-size:12px }
}

* Smooth anchor scroll (so no JS needed) */
html { scroll-behavior: smooth; }

/* Quick nav bar (below hero) */
.quick-nav{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.quick-nav__wrap{
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
}
.qtab{
  display:inline-flex; align-items:center; justify-content:center;
  height: 34px; padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff; color: var(--ink);
  text-decoration: none; font-weight: 700; font-size: 13px;
}
.qtab.active{
  background:#f4f7f5; border-color:#e7efe6; color:#2f4f3a;
}

/* Ensure anchored sections don't hide under the fixed header */
#services, #testimonials, #faq { scroll-margin-top: 84px; }

@media (max-width: 640px){
  .qtab{ height: 32px; padding: 0 12px; font-size: 12px; }
}

function gaEvent(name, params){
  if (typeof gtag === 'function') gtag('event', name, params || {});
}

// Track clicks on Zoho Bookings buttons (all services)
document.querySelectorAll('a.btn.btn-primary[href*="zohobookings"]').forEach(a => {
  a.addEventListener('click', () => {
    gaEvent('book_click', {
      link_text: a.textContent.trim(),
      service: a.closest('.card')?.querySelector('h3')?.textContent?.trim() || 'unknown',
      location: 'services_section'
    });
  });
});

// (Optional) quick-nav usage
document.querySelectorAll('.quick-nav .qtab').forEach(a=>{
  a.addEventListener('click', ()=> gaEvent('quicknav_click', { target: a.getAttribute('href') }));
});