/* ==========================================================================
   Urban Massage & Spa — Global Stylesheet
   Theme: Premium Ivory / Olive Green / Dark Green
   ========================================================================== */

:root{
  --white:         #FFFFFF;
  --ivory:        #FAF6EC;
  --ivory-deep:    #F1E9D8;
  --ivory-card:    #FFFFFF;
  --olive:         #7C8B54;
  --olive-light:   #A9B47E;
  --olive-pale:    #E7E9D8;
  --green-dark:    #1F3B2C;
  --green-darker:  #142A1F;
  --gold:          #C9A24B;
  --text-main:     #2C2B22;
  --text-soft:     #5B5A4C;
  --text-invert:   #FBF8F0;
  --shadow:        0 10px 30px rgba(31, 59, 44, 0.12);
  --shadow-soft:   0 4px 16px rgba(31, 59, 44, 0.08);
  --radius:        18px;
  --radius-sm:     10px;
  --container:     1200px;
  --overlay-dark:  rgba(20, 42, 31, 0.74);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: 'Jost', 'Segoe UI', sans-serif;
  background: var(--white);
  color: var(--text-main);
  line-height: 1.65;
  overflow-x: hidden;
}
h1,h2,h3,h4{
  font-family: 'Playfair Display', 'Georgia', serif;
  color: var(--green-darker);
  margin: 0 0 .5em;
  line-height: 1.2;
  font-weight: 600;
}
p{ margin: 0 0 1em; color: var(--text-soft); }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
ul{ list-style: none; margin: 0; padding: 0; }
button{ font-family: inherit; cursor: pointer; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.section{ padding: 90px 0; position: relative; }
.section-tight{ padding: 60px 0; }
.section-alt{ background: var(--ivory); }
.section-dark{
  background: var(--green-dark);
  color: var(--text-invert);
}
.section-dark h2, .section-dark h3{ color: var(--text-invert); }
.section-dark p{ color: rgba(251,248,240,.78); }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Jost', sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--olive);
  font-weight: 600;
  margin-bottom: 14px;
}
.eyebrow::before{
  content: "";
  width: 30px; height: 1px;
  background: var(--gold);
  display: inline-block;
}
.section-head{
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}
.section-head.left{ text-align: left; margin: 0 0 40px; }
.section-head h2{ font-size: clamp(28px, 4vw, 40px); }
.section-head p{ font-size: 17px; }

/* ---------------- Buttons ---------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 34px;
  border-radius: 40px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .3px;
  border: 2px solid transparent;
  transition: all .3s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--green-dark);
  color: var(--text-invert);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover{
  background: var(--green-darker);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.btn-outline{
  background: transparent;
  border-color: var(--green-dark);
  color: var(--green-dark);
}
.btn-outline:hover{
  background: var(--green-dark);
  color: var(--text-invert);
  transform: translateY(-2px);
}
.btn-gold{
  background: var(--gold);
  color: var(--green-darker);
}
.btn-gold:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-light{
  background: var(--ivory);
  color: var(--green-dark);
}
.btn-light:hover{ background: #fff; transform: translateY(-2px); }
.btn-block{ width: 100%; }
.btn-lg{ padding: 18px 42px; font-size: 16px; }
.btn-whatsapp{ background:#25D366; color:#fff; }
.btn-whatsapp:hover{ background:#1EBE5A; transform: translateY(-2px); }
.btn-email{ background: var(--olive); color:#fff; }
.btn-email:hover{ background:#6b784a; transform: translateY(-2px); }

/* Pulsating booking button */
.pulse-btn{
  position: relative;
  background: var(--green-dark);
  color: var(--text-invert);
  padding: 13px 28px;
  border-radius: 40px;
  font-weight: 600;
  font-size: 14.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  animation: pulseGlow 2.2s infinite;
  box-shadow: 0 0 0 rgba(31,59,44,.5);
}
.pulse-btn:hover{ background: var(--green-darker); }
@keyframes pulseGlow{
  0%   { box-shadow: 0 0 0 0 rgba(31,59,44,.55); }
  70%  { box-shadow: 0 0 0 14px rgba(31,59,44,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,59,44,0); }
}
.book-cta-wrap{ display:flex; flex-direction: column; align-items:center; gap:4px; }
.book-cta-sub{
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--text-soft);
  text-transform: uppercase;
}
.header .book-cta-sub{ color: var(--olive); }

/* ---------------- Header ---------------- */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(31,59,44,0.08);
  transition: box-shadow .3s ease;
}
.site-header.scrolled{ box-shadow: 0 6px 24px rgba(31,59,44,.1); }
.header-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand{ display: flex; align-items: center; gap: 12px; }
.brand img{ height: 52px; width: 52px; object-fit: contain; }
.brand-text{ display: flex; flex-direction: column; line-height: 1.15; }
.brand-name{
  font-family: 'Playfair Display', serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--green-darker);
}
.brand-tag{
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--olive);
}
.main-nav{ display: flex; align-items: center; gap: 34px; }
/* Deliberately scoped to ".main-nav > a" only (direct plain links: Home,
   About, Blog, Contact) — the Services dropdown trigger is a separate
   element (".nav-item-dropdown > a") with its own hover/active treatment
   below, so the two never fight over the same ::after pseudo-element. */
.main-nav > a{
  font-size: 15px;
  font-weight: 500;
  color: var(--text-main);
  position: relative;
  padding: 6px 0;
}
.main-nav > a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:2px;
  background: var(--gold);
  transition: width .25s ease;
}
.main-nav > a:hover::after, .main-nav > a.active::after{ width: 100%; }
.main-nav > a.active{ color: var(--green-dark); font-weight: 600; }

/* ---------------- Services nav dropdown (mega-menu) ---------------- */
.nav-item-dropdown{ position: relative; }
.nav-item-dropdown > a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-main);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav-item-dropdown > a::after{
  content: "";
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .55;
}
.nav-item-dropdown > a:hover, .nav-item-dropdown > a.active,
.nav-item-dropdown:hover > a, .nav-item-dropdown:focus-within > a{
  color: var(--green-dark);
  font-weight: 600;
  border-bottom-color: var(--gold);
}
.nav-item-dropdown > a:hover::after, .nav-item-dropdown > a.active::after,
.nav-item-dropdown:hover > a::after, .nav-item-dropdown:focus-within > a::after{
  opacity: 1;
}
.nav-dropdown-panel{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  border: 1px solid rgba(124,139,84,.15);
  padding: 24px;
  width: 580px;
  max-width: calc(100vw - 40px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 28px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 1000;
}
.nav-item-dropdown:hover .nav-dropdown-panel,
.nav-item-dropdown:focus-within .nav-dropdown-panel{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-col{ display: flex; flex-direction: column; }
.nav-dropdown-panel a{
  display: block;
  padding: 7px 4px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-main);
  border-radius: 6px;
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.nav-dropdown-panel a:hover{ background: var(--ivory); color: var(--green-dark); padding-left: 9px; }
.nav-dropdown-panel a.view-all{
  grid-column: 1 / -1;
  text-align: center;
  color: var(--green-dark);
  font-weight: 600;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(124,139,84,.15);
  border-radius: 0;
}
@media (max-width: 1140px){
  .nav-dropdown-panel{ width: 480px; }
}

.header-right{ display: flex; align-items: center; gap: 22px; }
.hours-badge{
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--text-soft);
  text-align: right;
  line-height: 1.4;
}
.hours-badge strong{ color: var(--green-dark); font-size: 12.5px; }

.hamburger{
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
}
.hamburger span{
  width: 26px; height: 2px;
  background: var(--green-dark);
  transition: all .3s ease;
}
.hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity: 0; }
.hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display: none;
  position: fixed;
  top: 0; right: -100%;
  width: 82%; max-width: 340px; height: 100vh;
  background: var(--ivory);
  z-index: 1200;
  padding: 100px 32px 40px;
  box-shadow: -8px 0 30px rgba(0,0,0,.18);
  transition: right .35s ease;
  flex-direction: column;
  gap: 26px;
  overflow-y: auto;
}
.mobile-nav.open{ right: 0; }
.mobile-nav a{ font-size: 19px; font-weight: 500; color: var(--green-darker); }

/* Mobile Services accordion — hover-based dropdowns don't work on touch,
   so the mobile menu needs its own tap-to-expand equivalent. */
.mobile-nav-item-dropdown{ display: flex; flex-direction: column; }
.mobile-dropdown-toggle{
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: none; border: none; padding: 0;
  font-family: 'Jost', sans-serif;
  font-size: 19px; font-weight: 500; color: var(--green-darker);
  text-align: left; cursor: pointer;
}
.mobile-chevron{ width: 18px; height: 18px; flex-shrink: 0; transition: transform .25s ease; }
.mobile-dropdown-toggle[aria-expanded="true"] .mobile-chevron{ transform: rotate(180deg); }
.mobile-dropdown-panel{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.mobile-dropdown-toggle[aria-expanded="true"] + .mobile-dropdown-panel{ grid-template-rows: 1fr; }
.mobile-dropdown-panel > div{ overflow: hidden; }
.mobile-dropdown-panel a{
  display: block;
  font-size: 15.5px; font-weight: 400; color: var(--text-soft);
  padding: 10px 0 10px 14px;
  border-left: 2px solid rgba(124,139,84,.25);
}
.mobile-dropdown-panel a.mobile-view-all{ color: var(--green-dark); font-weight: 600; grid-column: 1 / -1; }

/* Tablets get a wider drawer + 2-column massage list so the menu doesn't
   turn into one long scroll on iPad-sized screens. */
@media (min-width: 601px) and (max-width: 860px){
  .mobile-nav{ width: 60%; max-width: 460px; }
  .mobile-dropdown-panel > div{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
  }
}
.mobile-overlay{
  display: none;
  position: fixed; inset: 0;
  background: rgba(20,42,31,.45);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.mobile-overlay.open{ opacity: 1; pointer-events: auto; }
.mobile-close{
  position: absolute; top: 28px; right: 28px;
  background: none; border: none; font-size: 26px; color: var(--green-dark);
}
.mobile-nav .btn{ margin-top: 10px; color: var(--text-invert) !important; }

/* ---------------- Falling leaf / feather decorations ---------------- */
.floaters{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.floater{
  position: absolute;
  top: -12%;
  opacity: 0;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: top, transform, opacity;
}
.floater svg{ width: 100%; height: 100%; display:block; filter: drop-shadow(0 3px 4px rgba(20,42,31,.15)); }

/* Leaves fall in a broad zigzag with steady rotation, like real leaves catching air */
@keyframes leafFall{
  0%   { top: -12%;  transform: translateX(0)     rotate(-8deg)  rotateY(0deg);   opacity: 0; }
  6%   { opacity: .6; }
  22%  { top: 22%;   transform: translateX(34px)  rotate(95deg)  rotateY(60deg); }
  44%  { top: 46%;   transform: translateX(-26px) rotate(180deg) rotateY(0deg); }
  66%  { top: 70%;   transform: translateX(30px)  rotate(260deg) rotateY(60deg); }
  88%  { top: 96%;   transform: translateX(-16px) rotate(330deg) rotateY(0deg);  opacity: .55; }
  100% { top: 112%;  transform: translateX(0)     rotate(380deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .floater{ animation: none !important; top: 8%; opacity: .3; }
}

/* ---------------- Hero ---------------- */
/* Background photo is set per-page via inline style="background-image:url(...)" on the <section class="hero">.
   background-color is the fallback shown until/unless that photo exists. */
.hero{
  position: relative;
  background-color: var(--green-darker);
  background-size: cover;
  background-position: center;
  color: var(--text-invert);
  padding: 190px 0 120px;
  overflow: hidden;
  isolation: isolate;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: var(--overlay-dark);
  z-index: -1;
}
.hero-inner{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 50px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero .eyebrow{ color: var(--gold); }
.hero .eyebrow::before{ background: var(--olive-light); }
.hero h1{
  color: #fff;
  font-size: clamp(36px, 5.4vw, 58px);
  margin-bottom: 22px;
}
.hero h1 em{ color: var(--gold); font-style: normal; }
.hero p.lead{ color: rgba(251,248,240,.82); font-size: 18px; max-width: 480px; }
.hero-actions{ display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; align-items: center; }
.hero-stats{
  display: flex; gap: 34px; margin-top: 48px; flex-wrap: wrap;
}
.hero-stats div strong{
  display:block; font-family:'Playfair Display',serif; font-size: 28px; color:#fff;
}
.hero-stats div span{ font-size: 12.5px; color: rgba(251,248,240,.7); letter-spacing:.5px; text-transform: uppercase;}
/* Hero showcase — a single bestseller-focused photo (replacing the old
   logo-in-a-circle treatment) with a floating WhatsApp price-inquiry card,
   so the hero visual both sells the guest favourite AND gives a direct
   path to ask the price, rather than just repeating the logo. */
.hero-showcase{
  position: relative;
  aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center;
}
.showcase-ring{
  position: absolute; inset: 4%;
  border: 1px solid rgba(251,248,240,.2);
  border-radius: 50%;
  pointer-events: none;
}
.showcase-frame{
  position: relative;
  width: 80%; aspect-ratio: 4/5;
  transition: transform .4s ease;
  perspective: 1800px;
}
.hero-showcase:hover .showcase-frame{ transform: translateY(-4px); }

/* Click-to-flip card: two faces (Full Body / Ayurvedic) sharing one frame,
   swapped via a 3D rotateY flip rather than a plain crossfade so the
   interaction reads as "turning the card over" to reveal the other treatment. */
.showcase-flip-inner{
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.4,.15,.2,1);
}
.showcase-frame.is-flipped .showcase-flip-inner{ transform: rotateY(180deg); }
.showcase-face{
  position: absolute; inset: 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(0,0,0,.42);
  border: 5px solid rgba(251,248,240,.92);
  background: var(--olive);
  backface-visibility: hidden;
}
.showcase-face-back{ transform: rotateY(180deg); }
.showcase-face img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase-bestseller-tag{
  position: absolute; top: 18px; left: 18px;
  background: var(--gold);
  color: var(--green-darker);
  font-weight: 700; font-size: 12.5px;
  padding: 7px 16px;
  border-radius: 30px;
  letter-spacing: .3px;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
}
.showcase-frame-caption{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 34px 20px 18px;
  background: linear-gradient(to top, rgba(20,42,31,.88), transparent);
  color: #fff;
  line-height: 1.3;
}
.showcase-frame-caption strong{ display: block; font-family:'Playfair Display',serif; font-size: 19px; }
.showcase-frame-caption span{ font-size: 12.5px; color: rgba(251,248,240,.8); }

.showcase-swap-btn{
  position: absolute; top: 14px; right: 14px; z-index: 6;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,42,31,.55);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(251,248,240,.5);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, color .25s ease;
  animation: showcaseSwapHint 1.8s ease-in-out 1.4s 3;
}
.showcase-swap-btn svg{ width: 18px; height: 18px; }
.showcase-swap-btn:hover{ background: var(--gold); color: var(--green-darker); transform: scale(1.08) rotate(90deg); }
.showcase-swap-btn:active{ transform: scale(.94) rotate(150deg); }
@keyframes showcaseSwapHint{
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
.showcase-dots{
  position: absolute; top: 62px; right: 20px; z-index: 6;
  display: flex; flex-direction: column; gap: 6px;
}
.showcase-dot{
  width: 8px; height: 8px; padding: 0;
  border: none; border-radius: 50%;
  background: rgba(251,248,240,.5);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.showcase-dot.is-active{ background: var(--gold); transform: scale(1.35); }
.showcase-whatsapp-card{
  position: absolute;
  bottom: -6%; right: -6%;
  display: flex; align-items: center; gap: 12px;
  background: var(--white);
  padding: 14px 20px 14px 14px;
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(0,0,0,.3);
  z-index: 4;
  animation: showcaseFloat 4.5s ease-in-out infinite;
  transition: transform .25s ease, box-shadow .25s ease;
}
.showcase-whatsapp-card:hover{ transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0,0,0,.35); }
.showcase-whatsapp-icon{
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex-shrink: 0;
  background: #25D366;
  border-radius: 50%;
}
.showcase-whatsapp-icon svg{ width: 22px; height: 22px; color: #fff; }
.showcase-whatsapp-text{ line-height: 1.25; text-align: left; }
.showcase-whatsapp-text strong{ display: block; font-family:'Playfair Display',serif; font-size: 16px; color: var(--green-dark); }
.showcase-whatsapp-text span{ font-size: 11.5px; color: var(--text-soft); }
@keyframes showcaseFloat{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce){
  .showcase-whatsapp-card{ animation: none; }
  .showcase-swap-btn{ animation: none; }
  .showcase-flip-inner{ transition: none; }
}
@media (max-width: 1180px){
  .showcase-whatsapp-card{ right: -2%; padding: 12px 16px 12px 12px; }
  .showcase-whatsapp-icon{ width: 36px; height: 36px; }
  .showcase-whatsapp-icon svg{ width: 19px; height: 19px; }
  .showcase-whatsapp-text strong{ font-size: 14px; }
  .showcase-whatsapp-text span{ font-size: 10.5px; }
}

.page-hero{
  position: relative;
  background-color: var(--green-darker);
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 170px 0 90px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background: var(--overlay-dark);
  z-index: -1;
}
.page-hero .eyebrow{ color: var(--gold); justify-content:center; }
.page-hero .eyebrow::before{ background: var(--olive-light); }
.page-hero h1{ color: #fff; font-size: clamp(32px, 5vw, 48px); }
.page-hero p{ color: rgba(251,248,240,.8); max-width: 560px; margin: 0 auto; }
.breadcrumb{ font-size: 13px; color: rgba(251,248,240,.6); margin-top: 16px; letter-spacing:.5px; }
.breadcrumb a{ color: var(--gold); }

/* ---------------- Cards / Grids ---------------- */
.grid{ display: grid; gap: 30px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

.card{
  background: var(--white);
  border-radius: var(--radius);
  padding: 34px 28px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(124,139,84,.12);
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); }
.card-icon{
  width: 58px; height: 58px;
  border-radius: 16px;
  background: var(--olive-pale);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  color: var(--green-dark);
}
.card-icon svg{ width: 28px; height: 28px; }

/* Service card */
.service-card{
  position: relative;
  background: var(--ivory-card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(124,139,84,.12);
  transition: transform .3s ease, box-shadow .3s ease;
  display: flex; flex-direction: column;
}
.service-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); }
.service-media{
  height: 140px;
  background-color: var(--olive);
  position: relative;
  overflow: hidden;
}
.service-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.popular-tag{
  position:absolute; top: 14px; right: 14px;
  background: var(--gold);
  color: var(--green-darker);
  font-size: 11px; font-weight: 700;
  padding: 5px 12px;
  border-radius: 30px;
  letter-spacing: .3px;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.bestseller-tag{
  position:absolute; top: 14px; left: 14px;
  background: var(--green-darker);
  color: var(--gold);
  font-size: 11px; font-weight: 700;
  padding: 5px 12px;
  border-radius: 30px;
  letter-spacing: .3px;
  z-index: 2;
  border: 1px solid rgba(201,162,75,.6);
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.service-body{ padding: 22px 22px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.service-body h3{ font-size: 19px; margin: 0; }
.service-body p{ font-size: 14.5px; margin: 0; flex: 1; }
.service-foot{
  display:flex; align-items:center; justify-content:space-between;
  margin-top: 8px;
}
.service-price{ font-weight: 700; color: var(--green-dark); font-family:'Playfair Display',serif; font-size: 17px; }
.service-link{
  font-size: 13.5px; font-weight: 600; color: var(--olive);
  display:inline-flex; align-items:center; gap:5px;
}
.service-link:hover{ color: var(--green-dark); }

.know-price-btn{
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, var(--olive), #5f6b40);
  color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 7px 13px;
  border-radius: 30px;
  letter-spacing: .2px;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(124,139,84,.35);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: priceGlow 2.6s infinite;
}
.know-price-btn svg{ width: 13px; height: 13px; fill: #fff; flex-shrink: 0; }
.know-price-btn:hover{ transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 20px rgba(124,139,84,.55); }
@keyframes priceGlow{
  0%   { box-shadow: 0 0 0 0 rgba(124,139,84,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(124,139,84,0); }
  100% { box-shadow: 0 0 0 0 rgba(124,139,84,0); }
}

.service-group{ display: none; }
.service-group.active{ display: grid; }

/* Blog cards */
.blog-card{
  background: var(--ivory-card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(124,139,84,.12);
  transition: transform .3s ease, box-shadow .3s ease;
  display:flex; flex-direction:column;
}
.blog-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); }
.blog-media{
  height: 190px;
  background-color: var(--olive);
  position: relative; overflow:hidden;
}
.blog-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-cat{
  position:absolute; top:14px; left:14px;
  background: rgba(255,255,255,.92);
  color: var(--green-dark);
  font-size: 11px; font-weight:700;
  padding: 5px 12px; border-radius: 30px;
  letter-spacing:.3px;
}
.blog-body{ padding: 22px 22px 26px; display:flex; flex-direction:column; gap: 10px; flex:1; }
.blog-meta{ font-size: 12.5px; color: var(--olive); font-weight: 600; letter-spacing:.3px; }
.blog-body h3{ font-size: 19px; margin:0; }
.blog-body p{ font-size: 14.5px; margin:0; flex:1; }
.blog-readmore{ font-size: 13.5px; font-weight: 700; color: var(--green-dark); display:inline-flex; gap:6px; align-items:center; }
.blog-readmore:hover{ color: var(--olive); }

/* Testimonials */
.testi-card{
  background: var(--ivory-card);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(124,139,84,.12);
}
.stars{ color: var(--gold); font-size: 16px; margin-bottom: 12px; letter-spacing: 2px; }
.testi-name{ font-weight: 700; color: var(--green-dark); font-family:'Playfair Display',serif; }
.testi-role{ font-size: 12.5px; color: var(--text-soft); }
.testi-person{ display:flex; align-items:center; gap: 12px; margin-top: 16px; }
.avatar-ring{
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--olive-pale);
  display:flex; align-items:center; justify-content:center;
  color: var(--green-dark); font-family:'Playfair Display',serif; font-weight:700;
}

/* Why-us / feature rows */
.feature-row{ display:flex; gap: 18px; align-items:flex-start; margin-bottom: 30px; }
.feature-icon{
  flex-shrink:0;
  width: 50px; height: 50px; border-radius: 14px;
  background: var(--olive-pale);
  display:flex; align-items:center; justify-content:center;
  color: var(--green-dark);
}
.feature-icon svg{ width:24px; height:24px; }
.feature-row h4{ margin: 0 0 6px; font-size: 17px; }
.feature-row p{ margin:0; font-size: 14.5px; }

/* About */
.value-card{ text-align:center; }
.value-card .card-icon{ margin: 0 auto 18px; }

/* Contact */
.contact-info-card{
  background: var(--ivory-card);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(124,139,84,.12);
  display:flex; gap:16px; align-items:flex-start;
  min-width: 0;
}
.contact-info-card .card-icon{ margin: 0; flex-shrink: 0; }
/* Flex items default to min-width:auto, which stops long unbroken text
   (an address, an email) from wrapping below its own intrinsic width —
   the classic cause of a flex row quietly overflowing its container. */
.contact-info-card > div:not(.card-icon){ min-width: 0; flex: 1; }
.contact-info-card p, .contact-info-card a{ overflow-wrap: anywhere; }
.map-wrap{
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 6px solid #fff;
  line-height: 0;
}
.map-wrap iframe{ width: 100%; height: 420px; border:0; }

/* Forms */
.form-card{
  background: var(--ivory-card);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(124,139,84,.12);
  min-width: 0;
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group{ margin-bottom: 20px; }
.form-group label{
  display:block; font-size: 13.5px; font-weight: 600; color: var(--green-dark);
  margin-bottom: 8px; letter-spacing:.2px;
}
.form-group .req{ color: #b5482f; }
.form-group input,
.form-group select,
.form-group textarea{
  width: 100%;
  min-width: 0;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(124,139,84,.3);
  background: var(--ivory);
  font-family: inherit;
  font-size: 15px;
  color: var(--text-main);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline: none;
  border-color: var(--olive);
  box-shadow: 0 0 0 4px rgba(124,139,84,.15);
}
.form-group textarea{ resize: vertical; min-height: 100px; }
.radio-group{ display:flex; gap: 16px; flex-wrap: wrap; }
.radio-pill{
  display:flex; align-items:center; gap:8px;
  border: 1.5px solid rgba(124,139,84,.3);
  padding: 10px 18px; border-radius: 40px;
  font-size: 14px; cursor:pointer;
  background: var(--ivory);
}
.radio-pill input{ accent-color: var(--green-dark); }
.radio-pill.checked{ border-color: var(--green-dark); background: var(--olive-pale); }
.form-note{
  font-size: 13px; color: var(--text-soft);
  background: var(--olive-pale);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  margin-top: 8px;
  display:flex; gap: 10px; align-items:flex-start;
}
.form-actions{ display:flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.booking-side{
  background: var(--green-dark);
  border-radius: var(--radius);
  color: #fff;
  padding: 40px 34px;
  position: sticky; top: 110px;
  min-width: 0;
}
.booking-side h3{ color:#fff; }
.booking-side p{ color: rgba(251,248,240,.78); font-size: 14.5px; }
.booking-side .contact-line{ display:flex; gap:12px; align-items:center; margin: 18px 0; font-size:14.5px; min-width:0; }
.booking-side .contact-line svg{ width:20px; height:20px; color: var(--gold); flex-shrink:0; }
.booking-side .contact-line span{ min-width:0; }
.confirm-box{
  display:none;
  background: var(--olive-pale);
  border-radius: var(--radius-sm);
  padding: 20px;
  margin-top: 22px;
  font-size: 14px;
  color: var(--green-darker);
}
.confirm-box.show{ display:block; }

/* Blog post page */
.post-hero{
  position: relative;
  padding: 170px 0 140px;
  background-color: var(--green-darker);
  background-size: cover;
  background-position: center;
  color:#fff; text-align:center;
  isolation: isolate;
}
.post-hero::before{
  content:"";
  position:absolute; inset:0;
  background: var(--overlay-dark);
  z-index: -1;
}
.post-hero .eyebrow{ color: var(--gold); justify-content:center; }
.post-hero h1{ color:#fff; max-width: 780px; margin: 0 auto 14px; }
.post-meta{ color: rgba(251,248,240,.75); font-size: 13.5px; }
.post-body{ max-width: 760px; margin: 0 auto; padding: 70px 24px 40px; }
.post-body h2{ font-size: 26px; margin-top: 40px; }
.post-body h3{ font-size: 20px; margin-top: 28px; }
.post-body p, .post-body li{ font-size: 16.5px; color: var(--text-soft); }
.post-body li{ margin-bottom: 8px; }
.post-body ul{ list-style: disc; padding-left: 22px; margin-bottom: 1.2em; }
.post-cover{
  height: 280px;
  border-radius: var(--radius);
  background-color: var(--olive);
  margin: -110px auto 0;
  max-width: 900px;
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative; z-index: 2;
}
.post-cover img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.post-quote{
  border-left: 3px solid var(--gold);
  padding: 6px 0 6px 22px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: var(--green-dark);
  margin: 30px 0;
}
.post-cta{
  background: var(--olive-pale);
  border-radius: var(--radius);
  padding: 30px;
  text-align:center;
  margin-top: 50px;
}
.related-posts{ padding: 0 0 90px; }
.tag-pill{
  display:inline-block; background: var(--olive-pale); color: var(--green-dark);
  font-size: 12px; font-weight:600; padding: 5px 14px; border-radius: 30px; margin: 4px 6px 4px 0;
}

/* CTA band */
.cta-band{
  background: var(--green-dark);
  border-radius: var(--radius);
  padding: 60px 50px;
  display:flex; align-items:center; justify-content:space-between;
  gap: 30px; flex-wrap: wrap;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cta-band h2{ color:#fff; margin-bottom: 8px; }
.cta-band p{ color: rgba(251,248,240,.8); margin:0; }

/* ---------------- Footer ---------------- */
.site-footer{
  background: var(--green-darker);
  color: rgba(251,248,240,.82);
  padding: 80px 0 0;
  position: relative;
  overflow: hidden;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(251,248,240,.12);
}
.footer-brand{ display:flex; align-items:center; gap: 12px; margin-bottom: 16px; }
.footer-brand img{ height: 46px; width:46px; background:#fff; border-radius:50%; padding:4px; }
.footer-brand-name{ font-family:'Playfair Display',serif; font-size: 19px; color:#fff; }
.site-footer p{ color: rgba(251,248,240,.65); font-size: 14.5px; }
.site-footer h4{
  color: #fff; font-family:'Jost',sans-serif; font-size: 15px;
  text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 22px;
}
.footer-links li{ margin-bottom: 12px; }
.footer-links a{ font-size: 14.5px; color: rgba(251,248,240,.72); transition: color .2s; }
.footer-links a:hover{ color: var(--gold); }
.social-row{ display:flex; gap: 12px; margin-top: 20px; }
.social-row a{
  width: 38px; height:38px; border-radius:50%;
  background: rgba(251,248,240,.1);
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease, transform .2s ease;
}
.social-row a:hover{ background: var(--olive); transform: translateY(-3px); }
.social-row svg{ width:17px; height:17px; color:#fff; }
.footer-contact li{ display:flex; gap: 12px; align-items:flex-start; margin-bottom: 16px; font-size: 14.5px; color: rgba(251,248,240,.75); }
.footer-contact svg{ width: 18px; height: 18px; color: var(--gold); flex-shrink:0; margin-top:2px; }
.footer-bottom{
  padding: 24px 0;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap: wrap; gap: 10px;
  font-size: 13px;
  color: rgba(251,248,240,.55);
}
.footer-bottom a{ color: rgba(251,248,240,.55); margin-left: 18px; }
.footer-bottom a:hover{ color: var(--gold); }
.footer-bottom .dev-credit{ margin: 0; }
.footer-bottom .dev-credit a{ margin-left: 4px; font-weight: 600; }

/* WhatsApp + Call floating buttons */
.wa-float{
  position: fixed; bottom: 24px; right: 24px; z-index: 900;
  width: 58px; height:58px; border-radius: 50%;
  background: #25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  animation: pulseGlow 2.6s infinite;
}
.wa-float svg{ width: 28px; height:28px; fill:#fff; }
.call-float{
  position: fixed; bottom: 92px; right: 24px; z-index: 900;
  width: 58px; height:58px; border-radius: 50%;
  background: var(--green-dark);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  animation: pulseGlowGold 2.6s infinite;
}
.call-float svg{ width: 25px; height:25px; fill:#fff; }
.wa-float, .call-float{ transition: opacity .25s ease, transform .25s ease; }
.wa-float.float-hidden, .call-float.float-hidden{
  opacity: 0; transform: scale(.8); pointer-events: none;
}
@keyframes pulseGlowGold{
  0%   { box-shadow: 0 0 0 0 rgba(31,59,44,.5); }
  70%  { box-shadow: 0 0 0 14px rgba(31,59,44,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,59,44,0); }
}
@media (max-width: 500px){
  .wa-float, .call-float{ width: 50px; height:50px; }
  .wa-float{ bottom: 18px; right: 18px; }
  .call-float{ bottom: 78px; right: 18px; }
  .wa-float svg{ width:24px; height:24px; }
  .call-float svg{ width:21px; height:21px; }
  .post-cta{ padding: 24px 18px; }
  .post-cta .btn{ display:block; width:100%; box-sizing:border-box; }
}

/* Leaf-bullet list — reuses the same leaf shape as the falling-leaf
   decoration so bullet points tie back to the site's leaf motif instead of
   a plain browser dot. */
.leaf-list{
  list-style: none;
  padding-left: 0;
  margin: 0 0 28px;
  display: flex; flex-direction: column; gap: 12px;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.6;
}
.leaf-list li{ display: flex; align-items: flex-start; gap: 10px; }
.leaf-list li::before{
  content: "";
  flex-shrink: 0;
  width: 16px; height: 16px;
  margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 56C8 30 26 8 56 8C56 38 38 56 8 56Z' fill='%237C8B54'/%3E%3Cpath d='M10 54C24 40 34 30 54 10' stroke='%231F3B2C' stroke-width='2' opacity='0.4' fill='none'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Reveal-on-scroll */
.reveal{ opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity: 1; transform: translateY(0); }

/* ---------------- Responsive ---------------- */
@media (max-width: 1024px){
  .hero-inner{ grid-template-columns: 1fr; gap: 40px; }
  .hero-showcase{ display: none; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 860px){
  .main-nav{ display:none; }
  .hours-badge{ display:none; }
  .hamburger{ display:flex; }
  .mobile-nav, .mobile-overlay{ display:flex; }
  .form-row{ grid-template-columns: 1fr; }
  .booking-grid{ grid-template-columns: 1fr !important; }
  .booking-side{ position: static; }

  /* Header: logo + Book Now + hamburger were all sized for a wide desktop
     bar and looked oversized/uneven once main-nav disappears and the
     header-right group has to fit next to the brand on a narrow screen. */
  .header-inner{ padding: 10px 16px; gap: 10px; }
  .brand{ gap: 8px; }
  .brand img{ height: 38px; width: 38px; }
  .brand-name{ font-size: 15.5px; }
  .brand-tag{ font-size: 9px; letter-spacing: 1px; }
  .header-right{ gap: 10px; }
  .pulse-btn{ padding: 9px 16px; font-size: 12.5px; }
  .book-cta-sub{ font-size: 8.5px; letter-spacing: .3px; }
  .hamburger{ padding: 4px; }
  .hamburger span{ width: 22px; }
}
@media (max-width: 400px){
  /* Keep the name next to the logo and the "Pay at Spa" tagline under Book
     Now visible even at the narrowest widths — everything just scales
     down further so it stays on one row instead of wrapping unevenly. */
  .brand-tag{ display: none; }
  .header-inner{ padding: 8px 10px; gap: 6px; }
  .brand{ gap: 6px; }
  .brand img{ height: 32px; width: 32px; }
  .brand-name{ font-size: 12.5px; white-space: nowrap; }
  .header-right{ gap: 6px; }
  .pulse-btn{ padding: 7px 12px; font-size: 11px; }
  .book-cta-sub{ font-size: 7px; letter-spacing: .2px; white-space: nowrap; }
  .hamburger{ padding: 3px; }
  .hamburger span{ width: 18px; }
}
@media (max-width: 720px){
  .grid-2{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .contact-grid{ grid-template-columns: 1fr !important; }
  .cta-band{ flex-direction: column; text-align:center; padding: 40px 26px; }
  .post-cover{ height: 190px; margin-top: -70px; }
}
@media (max-width: 520px){
  .grid-4{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .hero{ padding: 130px 0 60px; }
  .hero-stats{ gap: 24px; margin-top: 34px; }
  .page-hero, .post-hero{ padding: 140px 0 70px; }
  .form-card{ padding: 26px; }
  .booking-side{ padding: 28px 22px; }
  .contact-info-card{ padding: 22px; gap: 12px; }
}

/* ==========================================================================
   Blog CMS additions — Table of Contents sidebar + FAQ accordion.
   Namespaced under .post-layout / .post-toc / .faq-accordion and appended
   at the end of the file (after .post-body etc.) so these new rules win
   any specificity tie against the existing single-column post styles
   without needing !important — the same fix already used once in this
   file for .mobile-nav .btn vs .btn-primary.

   IMPORTANT: .post-body alone (no .post-layout wrapper) is untouched by
   any of this and keeps its original single-column, max-width:760px
   behaviour — used whenever a post has fewer than 2 headings (no TOC). */

.post-layout{
  max-width: 980px;
  margin: 0 auto;
  padding: 70px 24px 40px;
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 50px;
  align-items: start;
}
.post-layout .post-body{
  max-width: none;
  margin: 0;
  padding: 0;
}
.post-toc{
  position: sticky;
  top: 100px;
  background: var(--ivory);
  border: 1px solid rgba(124,139,84,.18);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
}
.post-toc h4{
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--olive);
  margin: 0 0 14px;
}
.post-toc ol{
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: toc;
  display: flex; flex-direction: column; gap: 10px;
}
/* Scoped to .post-toc ol specifically (not the whole .post-toc container)
   so the numbered-counter styling doesn't leak into the "Shop Our Full
   Menu" sidebar list spliced in right below — that list has its own <li>
   and <a> elements inside the same .post-toc aside. */
.post-toc ol li{ counter-increment: toc; }
.post-toc ol a{
  display: flex; gap: 8px;
  font-size: 13.5px; line-height: 1.4;
  color: var(--text-soft);
}
.post-toc ol a::before{
  content: counter(toc);
  flex-shrink: 0;
  color: var(--gold);
  font-family: 'Playfair Display', serif;
  font-weight: 600;
}
.post-toc ol a:hover{ color: var(--green-dark); }

/* "Shop Our Full Menu" as a compact sidebar list next to the TOC on
   desktop — the full photo-card grid (.related-services-full) is what
   mobile keeps seeing; a 260px sidebar column has no room for cards. */
.post-toc-divider{ border: none; border-top: 1px solid rgba(124,139,84,.18); margin: 18px 0; }
.services-sidebar-list{ display: none; }
.services-sidebar-list ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.services-sidebar-list li{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(124,139,84,.1);
}
.services-sidebar-list li:last-child{ border-bottom: none; }
.sidebar-service-name{ font-size: 13px; line-height: 1.3; color: var(--text-main); }
.sidebar-service-name:hover{ color: var(--green-dark); }
.sidebar-know-price{
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0;
  background: #25D366;
  border-radius: 50%;
  transition: transform .2s ease;
}
.sidebar-know-price svg{ width: 13px; height: 13px; color: #fff; }
.sidebar-know-price:hover{ transform: scale(1.1); }
@media (min-width: 861px){
  .services-sidebar-list{ display: block; }
  .post-layout ~ .related-services-full{ display: none; }
}

/* Table cells inside sanitized post body content */
.post-body table{ width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.post-body th, .post-body td{ padding: 10px 14px; border: 1px solid rgba(124,139,84,.22); text-align: left; }
.post-body th{ background: var(--olive-pale); color: var(--green-darker); font-weight: 600; }

/* FAQ accordion */
.faq-accordion{ margin-top: 40px; display: flex; flex-direction: column; gap: 10px; }
.faq-item{
  background: var(--ivory);
  border: 1px solid rgba(124,139,84,.18);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.faq-question{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px;
  background: none; border: none; cursor: pointer;
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 600;
  color: var(--green-darker);
  text-align: left;
}
.faq-question .faq-icon{
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--olive-pale);
  color: var(--green-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  transition: transform .2s ease;
}
.faq-item[data-open="true"] .faq-icon{ transform: rotate(45deg); }
.faq-answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.faq-answer p{ padding: 0 20px 18px; margin: 0; font-size: 14.5px; color: var(--text-soft); }

@media (max-width: 860px){
  .post-layout{ grid-template-columns: 1fr; }
  .post-toc{ position: static; order: -1; }
}