/* =========================================================
   After-Lipo — stylesheet
   Palette derived from the existing gold logo mark:
   ivory ground, espresso text, bronze/gold accent (the logo's
   own tone), a warm blush for soft surfaces, and a quiet sage
   used only for the healing/benefit checkmarks.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Work+Sans:wght@400;500;600;700&display=swap');

:root {
  --ivory: #FBF6EE;
  --ivory-deep: #F4EBDA;
  --espresso: #2E2119;
  --espresso-soft: #5A4A3C;
  --bronze: #9C6B2E;
  --bronze-dark: #6E4A1E;
  --bronze-light: #C89A5C;
  --blush: #E2B9AC;
  --blush-soft: #F3DED6;
  --sage: #7C8F6C;
  --line: rgba(46, 33, 25, 0.12);
  --max: 1120px;
  --radius: 2px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--espresso);
  font-family: 'Work Sans', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  color: var(--espresso);
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.35rem; font-weight: 600; }

p { margin: 0 0 1em; }

a { color: var(--bronze-dark); text-decoration: none; }
a:hover { color: var(--bronze); }

img { max-width: 100%; display: block; }

.eyebrow {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 0.7em;
  display: inline-block;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 72px 0; }
@media (max-width: 700px) { section { padding: 52px 0; } }

/* ---------- flowing line divider (signature element,
   echoes the wave under the wordmark in the real logo) ---------- */
.flow-divider {
  width: 100%;
  height: 28px;
  margin: 0 auto;
  display: block;
}
.flow-divider path {
  fill: none;
  stroke: var(--bronze-light);
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* ---------- header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(251, 246, 238, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: var(--max);
  margin: 0 auto;
}
.logo-mark {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--bronze-dark);
  letter-spacing: 0.02em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.logo-mark span { color: var(--espresso); font-style: normal; font-weight: 500; }
.logo-img { height: 46px; width: auto; display: block; }
footer .logo-img { height: 52px; }

nav.primary-nav {
  display: flex;
  gap: 28px;
  align-items: center;
}
nav.primary-nav a {
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--espresso-soft);
}
nav.primary-nav a:hover, nav.primary-nav a.active { color: var(--bronze-dark); }

.nav-cta {
  background: var(--bronze);
  color: #fff !important;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-weight: 600 !important;
}
.nav-cta:hover { background: var(--bronze-dark); color: #fff !important; }

.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  color: var(--espresso);
  cursor: pointer;
}

@media (max-width: 860px) {
  nav.primary-nav {
    position: fixed;
    top: 61px;
    left: 0;
    right: 0;
    background: var(--ivory);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    border-bottom: 1px solid var(--line);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  nav.primary-nav.open { max-height: 520px; }
  nav.primary-nav a {
    width: 100%;
    padding: 14px 24px;
    border-top: 1px solid var(--line);
  }
  .nav-cta { margin: 14px 24px; display: inline-block; }
  .menu-toggle { display: block; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--bronze); color: #fff; }
.btn-primary:hover { background: var(--bronze-dark); color: #fff; }
.btn-ghost { border-color: var(--espresso); color: var(--espresso); }
.btn-ghost:hover { border-color: var(--bronze); color: var(--bronze-dark); }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- hero ---------- */
.hero {
  padding: 88px 0 56px;
  text-align: center;
  background: linear-gradient(180deg, var(--ivory) 0%, var(--ivory-deep) 100%);
}
.hero .eyebrow { display: block; }
.hero p.lead {
  max-width: 560px;
  margin: 0 auto 28px;
  font-size: 1.08rem;
  color: var(--espresso-soft);
}
.hero .btn-row { justify-content: center; }

/* ---------- benefit list ---------- */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 20px;
}
@media (max-width: 760px) { .benefit-grid { grid-template-columns: repeat(2, 1fr); } }
.benefit {
  background: #fff;
  border: 1px solid var(--line);
  padding: 22px 18px;
  border-radius: var(--radius);
  text-align: center;
}
.benefit .mark {
  width: 30px; height: 30px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--sage);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
}
.benefit p { margin: 0; font-size: 0.92rem; font-weight: 500; }

/* ---------- cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 760px) { .card-grid { grid-template-columns: 1fr; } }

.card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 30px;
  border-radius: var(--radius);
}
.card h3 { margin-bottom: 0.3em; }
.card .price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.9rem;
  color: var(--bronze-dark);
  margin: 6px 0 10px;
}
.card .packages {
  font-size: 0.88rem;
  color: var(--espresso-soft);
  border-top: 1px dashed var(--line);
  padding-top: 12px;
  margin-top: 12px;
}
.card .duration {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bronze);
  font-weight: 600;
}

/* ---------- photo placeholder (swap for real images later) ---------- */
.photo-placeholder {
  background: var(--blush-soft);
  border: 1px dashed var(--blush);
  border-radius: var(--radius);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--espresso-soft);
  font-size: 0.85rem;
  padding: 20px;
}

/* ---------- steps (real sequence -> numbering is meaningful) ---------- */
.steps {
  counter-reset: step;
  display: grid;
  gap: 18px;
}
.step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: start;
}
.step .num {
  counter-increment: step;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--bronze);
  color: var(--bronze-dark);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
}
.step .num::before { content: counter(step); }
.step h3 { margin-bottom: 2px; font-size: 1.05rem; }
.step p { margin: 0; color: var(--espresso-soft); font-size: 0.94rem; }

/* ---------- testimonial ---------- */
.testimonial {
  background: var(--ivory-deep);
  border-left: 3px solid var(--bronze);
  padding: 26px 30px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-style: italic;
  color: var(--espresso);
}
.testimonial cite {
  display: block;
  margin-top: 14px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bronze-dark);
}

.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}
.rating-badge .stars { color: var(--bronze); letter-spacing: 1px; }

/* ---------- FAQ ---------- */
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  cursor: pointer;
  padding: 20px 4px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--espresso);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.4rem;
  color: var(--bronze);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body {
  padding: 0 4px 22px;
  color: var(--espresso-soft);
  font-size: 0.96rem;
}
.faq-note {
  background: var(--blush-soft);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 0.9rem;
  margin-top: 24px;
}

/* ---------- section header ---------- */
.section-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 40px;
}

/* ---------- footer ---------- */
footer {
  background: var(--espresso);
  color: var(--ivory-deep);
  padding: 56px 0 28px;
}
footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
@media (max-width: 700px) { footer .wrap { grid-template-columns: 1fr; gap: 32px; } }
footer h4 {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze-light);
  margin: 0 0 14px;
}
footer a { color: var(--ivory-deep); }
footer a:hover { color: var(--bronze-light); }
footer .logo-mark { color: var(--bronze-light); }
footer .logo-mark span { color: var(--ivory-deep); }
footer p { color: rgba(251,246,238,0.75); font-size: 0.92rem; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin-bottom: 10px; font-size: 0.92rem; }
.footer-bottom {
  border-top: 1px solid rgba(251,246,238,0.15);
  margin-top: 40px;
  padding-top: 20px;
  text-align: center;
  font-size: 0.78rem;
  color: rgba(251,246,238,0.55);
}

/* ---------- WhatsApp floating button (fixed, never overlaps content) ---------- */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: #fff;
  padding: 13px 20px 13px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.88rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.wa-float:hover { background: #1EBE59; color: #fff; }
.wa-float svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Reserve space so the floating button never sits on top of footer content.
   Extra space is added to the footer itself (not body) so no gap of the
   page background shows below the dark footer. */
footer { padding-bottom: 96px; }
@media (min-width: 860px) { footer { padding-bottom: 56px; } }

/* ---------- misc page hero (non-home pages) ---------- */
.page-hero {
  padding: 56px 0 40px;
  text-align: center;
  background: var(--ivory-deep);
}
.page-hero p { max-width: 560px; margin: 0 auto; color: var(--espresso-soft); }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }

.check-list { list-style: none; padding: 0; margin: 20px 0; }
.check-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
  font-size: 0.96rem;
}
.check-list li::before {
  content: '✓';
  color: var(--sage);
  font-weight: 700;
  flex-shrink: 0;
}

table.price-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  background: #fff;
}
table.price-table th, table.price-table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 0.94rem;
}
table.price-table th {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bronze-dark);
}

.socials { display: flex; gap: 14px; margin-top: 14px; }
.socials a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--espresso);
}
.socials a:hover { border-color: var(--bronze); color: var(--bronze-dark); }

.contact-info li { margin-bottom: 14px; font-size: 0.98rem; }
.contact-info a { color: var(--espresso); font-weight: 500; }
.contact-info a:hover { color: var(--bronze-dark); }