/* ================================================
   SATI SAMUI  |  สติสมุย
   Conscious Business Directory — Koh Samui
   ================================================ */

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

/* ── Reset & Base ──────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream:       #f5f0ea;
  --cream-dark:  #ede7de;
  --sage:        #4d7358;
  --sage-mid:    #3d5c48;
  --sage-light:  #6b9a78;
  --sage-pale:   #cfe0d5;
  --gold:        #c47d5a;
  --gold-light:  #d4956e;
  --dark:        #1a1613;
  --text:        #352b25;
  --muted:       #7a6a60;
  --border:      #ddd5cc;
  --card:        #faf7f4;
  --white:       #ffffff;

  --font-head: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-thai: 'Sarabun', -apple-system, sans-serif;

  --r:   12px;
  --r-s: 6px;
  --sh:  0 2px 24px rgba(26,22,19,.08);
  --sh2: 0 8px 48px rgba(26,22,19,.15);
  --dur: .3s;
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  background-color: var(--cream);
  color: var(--text);
  line-height: 1.7;
  min-height: 100vh;
}

body[data-lang="th"] { font-family: var(--font-thai); }

/* Language visibility */
body[data-lang="en"] .th { display: none !important; }
body[data-lang="th"] .en { display: none !important; }
body:not([data-lang="th"]) .th { display: none !important; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── Typography ─────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

body[data-lang="th"] h1,
body[data-lang="th"] h2,
body[data-lang="th"] h3,
body[data-lang="th"] h4 { font-family: var(--font-thai); font-weight: 400; }

h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.15rem; }
p  { font-weight: 300; }

/* ── Layout ─────────────────────────────────────── */
.container {
  width: min(1200px, 100% - 3rem);
  margin-inline: auto;
}

.section    { padding: 5rem 0; }
.section-sm { padding: 3rem 0; }

/* ── Navigation ─────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(245,240,234,.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--dur);
}
.nav.scrolled { box-shadow: var(--sh); }

.nav-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 68px;
  padding-inline: 1.5rem;
  max-width: 1200px;
  margin-inline: auto;
}

.logo {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  flex-shrink: 0;
  gap: 1px;
}
.logo-th {
  font-family: var(--font-thai);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--sage);
}
.logo-en {
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  gap: 0;
  margin-left: auto;
}
.nav-links a {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.03em;
  border-radius: var(--r-s);
  transition: color var(--dur), background var(--dur);
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active { color: var(--sage); background: var(--sage-pale); }
.nav-links .nav-icon { font-size: 0.9rem; }
body[data-lang="th"] .nav-links a { font-family: var(--font-thai); font-size: 0.86rem; }

/* Compress nav at mid-desktop so lang toggle never gets pushed off */
@media (min-width: 1081px) and (max-width: 1380px) {
  .nav-links a { padding: 0.35rem 0.5rem; font-size: 0.74rem; letter-spacing: 0.01em; gap: 0.2rem; }
  .nav-links .nav-icon { display: none; }
  body[data-lang="th"] .nav-links a { font-size: 0.78rem; }
}

/* Lang Toggle */
.lang-toggle {
  display: flex;
  align-items: center;
  background: var(--cream-dark);
  border-radius: 20px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.lang-toggle button {
  padding: 4px 11px;
  border-radius: 16px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--muted);
  transition: all var(--dur);
}
.lang-toggle button.active {
  background: var(--white);
  color: var(--sage);
  box-shadow: 0 1px 4px rgba(26,22,19,.1);
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  border-radius: var(--r-s);
  transition: background var(--dur);
}
.nav-hamburger:hover { background: var(--cream-dark); }
.nav-hamburger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: all var(--dur);
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile Drawer */
.nav-drawer {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid var(--border);
  background: rgba(245,240,234,.98);
  max-height: calc(100svh - 68px);
  overflow-y: auto;
}
.nav-drawer.open { display: flex; }
.nav-drawer a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  border-radius: var(--r-s);
  font-size: 0.9rem;
  color: var(--text);
  transition: background var(--dur), color var(--dur);
}
.nav-drawer a:hover,
.nav-drawer a.active { background: var(--sage-pale); color: var(--sage); }

body[data-lang="th"] .nav-drawer a { font-family: var(--font-thai); }

.nav-drawer-lang {
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem 0.2rem;
  margin-top: 0.25rem;
  border-top: 1px solid var(--border);
}
.nav-drawer-lang button {
  flex: 1;
  padding: 0.5rem;
  border-radius: var(--r-s);
  border: 1px solid var(--border);
  background: transparent;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--dur);
}
.nav-drawer-lang button.active,
.nav-drawer-lang button:hover { background: var(--sage-pale); color: var(--sage); border-color: var(--sage); }

/* ── Hero ────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding-top: 68px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: url('../img/sati.jpg') center/cover no-repeat;
}
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.55) 100%);
}

.hero-lotus {
  position: absolute;
  width: min(560px, 80vw);
  height: min(560px, 80vw);
  opacity: 0.07;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 2rem 1.5rem;
  color: var(--white);
}

.eyebrow-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 1.5rem;
  padding: 0.3rem 1rem;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px;
}
body[data-lang="th"] .eyebrow-pill { font-family: var(--font-thai); letter-spacing: 0.06em; }

.hero-content h1 {
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 400;
  color: var(--white);
  margin-bottom: 1.25rem;
  text-shadow: 0 2px 24px rgba(0,0,0,.2);
}
body[data-lang="th"] .hero-content h1 {
  font-family: var(--font-thai);
  font-size: clamp(2rem, 5vw, 3.8rem);
}

.hero-content p {
  font-size: clamp(1rem, 2.5vw, 1.18rem);
  font-weight: 300;
  color: rgba(255,255,255,.78);
  margin-bottom: 2.5rem;
  line-height: 1.85;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--gold);
  color: var(--white);
  padding: 0.85rem 2.2rem;
  border-radius: 30px;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  transition: background var(--dur), transform var(--dur), box-shadow var(--dur);
}
.btn-primary:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(196,125,90,.4);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1.5px solid var(--sage);
  color: var(--sage);
  padding: 0.65rem 1.6rem;
  border-radius: 30px;
  font-size: 0.84rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  transition: all var(--dur);
}
.btn-outline:hover { background: var(--sage); color: var(--white); }

/* ── Page Hero (sub-pages) ───────────────────────── */
.page-hero {
  position: relative;
  padding: calc(68px + 4.5rem) 1.5rem 4.5rem;
  text-align: center;
  overflow: hidden;
}
.page-hero-bg { position: absolute; inset: 0; }

.page-hero-content {
  position: relative;
  z-index: 1;
  color: var(--white);
  max-width: 620px;
  margin-inline: auto;
}
.page-hero-content .pg-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 0.75rem;
}
body[data-lang="th"] .page-hero-content .pg-eyebrow { font-family: var(--font-thai); letter-spacing: 0.05em; }

.page-hero-content h1 {
  color: var(--white);
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 1rem;
}
body[data-lang="th"] .page-hero-content h1 {
  font-family: var(--font-thai);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}
.page-hero-content p {
  color: rgba(255,255,255,.75);
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.8;
}

/* Hero BG gradients per page */
.yoga-bg { background: linear-gradient(148deg, #121e17 0%, #1c3228 30%, #2e5240 65%, #3a6850 100%); }
.food-bg { background: linear-gradient(148deg, #101a12 0%, #18301e 30%, #285030 65%, #326840 100%); }
.sauna-bg { background: linear-gradient(148deg, #1e1008 0%, #3a1e0e 30%, #5a3018 65%, #7a4a28 100%); }
.wellness-bg { background: linear-gradient(148deg, #101525 0%, #1a2338 30%, #263548 65%, #304558 100%); }

/* ── Section Header ─────────────────────────────── */
.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.section-header .eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
body[data-lang="th"] .section-header .eyebrow { font-family: var(--font-thai); letter-spacing: 0.04em; }
.section-header h2 { color: var(--dark); margin-bottom: 0.75rem; }
.section-header p { color: var(--muted); max-width: 520px; margin-inline: auto; font-size: 1rem; }

/* ── Category Cards ─────────────────────────────── */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.cat-card {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: pointer;
  transition: transform var(--dur), box-shadow var(--dur);
  display: block;
}
.cat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh2);
}

.cat-card-bg {
  position: absolute;
  inset: 0;
  transition: transform .5s ease;
}
.cat-card:hover .cat-card-bg { transform: scale(1.05); }

.cat-yoga  .cat-card-bg { background: linear-gradient(158deg, #1a3528 0%, #2d5540 45%, #3d7058 100%); }
.cat-food  .cat-card-bg { background: linear-gradient(158deg, #182c1a 0%, #285535 45%, #386845 100%); }
.cat-sauna .cat-card-bg { background: linear-gradient(158deg, #341808 0%, #5a2e14 45%, #8a5030 100%); }
.cat-spa   .cat-card-bg { background: linear-gradient(158deg, #1a1e32 0%, #2a3248 45%, #3a4860 100%); }

.cat-card-pattern {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.12;
  pointer-events: none;
}
.cat-card-pattern svg { width: 70%; height: 70%; }

.cat-card-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.1) 55%, transparent 100%);
  color: var(--white);
}
.cat-icon { font-size: 2.2rem; margin-bottom: 0.7rem; display: block; }
.cat-card h3 { font-size: 1.2rem; color: var(--white); margin-bottom: 0.4rem; }
body[data-lang="th"] .cat-card h3 { font-family: var(--font-thai); font-size: 1.05rem; }
.cat-card p { font-size: 0.82rem; color: rgba(255,255,255,.68); line-height: 1.55; margin-bottom: 1rem; }
.cat-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--gold-light);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body[data-lang="th"] .cat-arrow { font-family: var(--font-thai); letter-spacing: 0.02em; text-transform: none; }

/* ── About Section ──────────────────────────────── */
.about { background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}
.about-text .eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
body[data-lang="th"] .about-text .eyebrow { font-family: var(--font-thai); letter-spacing: 0.04em; }
.about-text h2 { margin-bottom: 1.1rem; }
.about-text p { color: var(--muted); margin-bottom: 1.25rem; }
.about-text p:last-of-type { margin-bottom: 1.75rem; }
.about-visual { display: flex; align-items: center; justify-content: center; }
.about-visual svg { width: 280px; height: 280px; color: var(--sage); opacity: 0.15; }

/* ── Quote ──────────────────────────────────────── */
.quote-section {
  padding: 5rem 0;
  background: var(--cream);
  text-align: center;
}
.quote-inner {
  max-width: 700px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.quote-mark { font-family: var(--font-head); font-size: 5rem; color: var(--sage-pale); line-height: 0.5; display: block; margin-bottom: 1.5rem; }
.quote-text {
  font-family: var(--font-head);
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 2rem);
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}
body[data-lang="th"] .quote-text { font-family: var(--font-thai); font-style: normal; font-size: clamp(1.1rem, 2.5vw, 1.65rem); }
.quote-attr { font-size: 0.8rem; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
body[data-lang="th"] .quote-attr { font-family: var(--font-thai); letter-spacing: 0.03em; text-transform: none; }

/* ── Features ───────────────────────────────────── */
.features-section { background: var(--sage); padding: 4rem 0; }
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
}
.feature-item .f-icon { font-size: 2rem; margin-bottom: 0.75rem; display: block; }
.feature-item h4 { font-family: var(--font-head); font-size: 1.2rem; margin-bottom: 0.4rem; color: var(--white); }
body[data-lang="th"] .feature-item h4 { font-family: var(--font-thai); font-size: 1.05rem; }
.feature-item p { font-size: 0.88rem; color: rgba(255,255,255,.7); }

/* ── Listings ───────────────────────────────────── */
.listings-section { padding: 5rem 0; }

.listings-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.listings-top h2 { margin: 0; }

.filter-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.filter-label {
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 0.25rem;
}
body[data-lang="th"] .filter-label { font-family: var(--font-thai); letter-spacing: 0.02em; text-transform: none; }

.filter-btn {
  padding: 0.38rem 0.9rem;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--muted);
  background: var(--white);
  border: 1px solid var(--border);
  transition: all var(--dur);
}
.filter-btn:hover,
.filter-btn.active { background: var(--sage); border-color: var(--sage); color: var(--white); }
body[data-lang="th"] .filter-btn { font-family: var(--font-thai); }

.listings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.75rem;
}

.listing-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform var(--dur), box-shadow var(--dur);
}
.listing-card:hover { transform: translateY(-4px); box-shadow: var(--sh2); }

.card-header {
  height: 175px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.card-header-icon { font-size: 3.8rem; opacity: 0.45; z-index: 1; }

/* Card header gradients */
.ch-yoga    { background: linear-gradient(135deg, #1e3a2e, #3d7058); }
.ch-food    { background: linear-gradient(135deg, #182c1a, #3a6840); }
.ch-sauna   { background: linear-gradient(135deg, #3a1e0e, #8a5030); }
.ch-wellness{ background: linear-gradient(135deg, #1e2535, #3a4a62); }

.card-header-lotus {
  position: absolute;
  width: 200px; height: 200px;
  opacity: 0.1;
  color: white;
}

.card-body { padding: 1.5rem; }

.card-area {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
body[data-lang="th"] .card-area { font-family: var(--font-thai); letter-spacing: 0.03em; text-transform: none; font-size: 0.78rem; }

.listing-card h3 { font-size: 1.35rem; margin-bottom: 0.65rem; color: var(--dark); }
body[data-lang="th"] .listing-card h3 { font-family: var(--font-thai); font-size: 1.15rem; }

.listing-card .desc { font-size: 0.88rem; color: var(--muted); margin-bottom: 1.25rem; line-height: 1.75; }

.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; }
.tag {
  padding: 0.22rem 0.65rem;
  background: var(--sage-pale);
  color: var(--sage-mid);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 400;
}
.tag.warm { background: #f5e6d8; color: #8a4e2a; }

.card-footer {
  display: flex;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  gap: 0.75rem;
}
.card-phone { font-size: 0.82rem; color: var(--sage); font-weight: 500; }
.card-more {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--muted);
  transition: color var(--dur);
}
.card-more:hover { color: var(--sage); }
body[data-lang="th"] .card-more { font-family: var(--font-thai); }

/* ── Divider ─────────────────────────────────────── */
.divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.5rem 0;
}
.divider::before,
.divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.divider-sym { color: var(--gold); font-size: 1.1rem; }

/* ── Footer ─────────────────────────────────────── */
.footer { background: var(--dark); padding: 4.5rem 0 2rem; }
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.footer-brand .f-logo-th {
  font-family: var(--font-thai);
  font-size: 1.35rem;
  font-weight: 500;
  color: rgba(255,255,255,.9);
  display: block;
  margin-bottom: 0.2rem;
}
.footer-brand .f-logo-en {
  font-family: var(--font-head);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  display: block;
  margin-bottom: 1.1rem;
}
.footer-brand p { font-size: 0.84rem; color: rgba(255,255,255,.42); line-height: 1.85; }
body[data-lang="th"] .footer-brand p { font-family: var(--font-thai); }

.footer-col h5 {
  font-family: var(--font-head);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 1.1rem;
}
body[data-lang="th"] .footer-col h5 { font-family: var(--font-thai); letter-spacing: 0.03em; text-transform: none; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col a { font-size: 0.84rem; color: rgba(255,255,255,.48); transition: color var(--dur); }
.footer-col a:hover { color: rgba(255,255,255,.9); }
body[data-lang="th"] .footer-col a { font-family: var(--font-thai); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-bottom p { font-size: 0.76rem; color: rgba(255,255,255,.28); }
body[data-lang="th"] .footer-bottom p { font-family: var(--font-thai); }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; margin-left: auto; }
  .lang-toggle { order: 3; }

  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .about-inner { gap: 3.5rem; }
  .about-inner { grid-template-columns: 1fr; }
  .about-visual { display: none; }
  .features-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .listings-top { flex-direction: column; }
  .listings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .cat-grid { grid-template-columns: 1fr; gap: 1rem; }
  .cat-card { aspect-ratio: 16/9; }
  .cat-card-content { padding: 1.2rem; }
}

/* ── Alchemy Page ────────────────────────────────── */
.alchemy-hero-bg {
  background:
    radial-gradient(ellipse at 50% 60%, rgba(200,162,72,.12) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 20%, rgba(160,80,30,.15) 0%, transparent 45%),
    linear-gradient(155deg, #060504 0%, #100c06 25%, #1a1208 50%, #0e0c0a 80%, #060504 100%);
}

/* Alchemy gold accents */
.text-alchemy-gold { color: #c8a248; }

/* Featured listing card (Alchemy link from wellness) */
.listing-card.card-featured {
  border-color: rgba(200,162,72,.35);
  background: linear-gradient(160deg, #faf7f0, #f5f0e8);
}
.listing-card.card-featured .card-header { background: linear-gradient(135deg, #1a1206, #3a2810, #5a3e1a); }
.card-featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a6820;
  background: rgba(200,162,72,.15);
  border: 1px solid rgba(200,162,72,.3);
  border-radius: 20px;
  padding: 0.2rem 0.65rem;
  margin-bottom: 0.5rem;
}
body[data-lang="th"] .card-featured-badge { font-family: var(--font-thai); letter-spacing: 0.03em; text-transform: none; }

/* Alchemy Philosophy intro */
.alchemy-intro { background: var(--white); }
.alchemy-intro-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: start;
}
.alchemy-mandala { opacity: 0.12; color: var(--dark); }

.philosophy-text .eyebrow { color: #c8a248; }
.philosophy-text h2 { margin-bottom: 1.1rem; }
.philosophy-text p { color: var(--muted); margin-bottom: 1.1rem; }

.elem-connection {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.elem-connection-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.85rem;
}
.elem-connection-row .ec-sym {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-top: 1px;
}
.elem-connection-row .ec-text { color: var(--muted); line-height: 1.55; }
.elem-connection-row .ec-text strong { color: var(--text); font-weight: 500; }
body[data-lang="th"] .elem-connection-row .ec-text { font-family: var(--font-thai); }

/* The Four Elements section */
.elements-section { background: #0a0906; }
.elements-section-header {
  text-align: center;
  padding: 4rem 1.5rem 3rem;
}
.elements-section-header .eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c8a248;
  display: block;
  margin-bottom: 0.7rem;
}
body[data-lang="th"] .elements-section-header .eyebrow { font-family: var(--font-thai); letter-spacing: 0.04em; text-transform: none; }
.elements-section-header h2 { color: rgba(255,255,255,.9); margin-bottom: 0.75rem; }
.elements-section-header p { color: rgba(255,255,255,.45); max-width: 520px; margin-inline: auto; }

.element-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.element-card {
  padding: 4rem 3.5rem;
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border: 1px solid rgba(255,255,255,.04);
}

.elem-earth { background: linear-gradient(155deg, #1e0e04 0%, #2e1808 45%, #3e2512 100%); }
.elem-water { background: linear-gradient(155deg, #040e1e 0%, #081828 45%, #102040 100%); }
.elem-fire  { background: linear-gradient(155deg, #1e0802 0%, #301204 45%, #481c08 100%); }
.elem-air   { background: linear-gradient(155deg, #080c18 0%, #101828 45%, #1c2840 100%); }

.elem-bg-glyph {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 260px;
  height: 260px;
  opacity: 0.06;
  pointer-events: none;
}

.elem-symbol-wrap {
  width: 64px;
  height: 64px;
  margin-bottom: 1.75rem;
}

.elem-earth-color { color: #c8824a; }
.elem-water-color { color: #4aaad4; }
.elem-fire-color  { color: #d86828; }
.elem-air-color   { color: #88aad4; }

.elem-title-en {
  font-family: var(--font-head);
  font-size: 2.4rem;
  font-weight: 400;
  color: rgba(255,255,255,.92);
  line-height: 1;
  margin-bottom: 0.2rem;
}
body[data-lang="th"] .elem-title-en { display: none !important; }

.elem-title-th {
  font-family: var(--font-thai);
  font-size: 2rem;
  font-weight: 400;
  color: rgba(255,255,255,.92);
  line-height: 1;
  margin-bottom: 0.2rem;
}
body[data-lang="en"] .elem-title-th { display: none !important; }

.elem-subtitle {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: 1.5rem;
}
body[data-lang="th"] .elem-subtitle { font-family: var(--font-thai); letter-spacing: 0.04em; text-transform: none; font-size: 0.8rem; }

.elem-tagline {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(255,255,255,.75);
  margin-bottom: 1.25rem;
  line-height: 1.4;
}
body[data-lang="th"] .elem-tagline { font-family: var(--font-thai); font-style: normal; font-size: 1rem; }

.elem-desc {
  font-size: 0.88rem;
  color: rgba(255,255,255,.58);
  line-height: 1.85;
  margin-bottom: 1.75rem;
  font-weight: 300;
}

.elem-for-label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  margin-bottom: 0.6rem;
  display: block;
}
body[data-lang="th"] .elem-for-label { font-family: var(--font-thai); letter-spacing: 0.03em; text-transform: none; font-size: 0.72rem; }

.elem-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.elem-tag {
  padding: 0.22rem 0.7rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 300;
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.5);
}
.elem-earth .elem-tag { border-color: rgba(200,130,74,.35); color: rgba(200,130,74,.8); }
.elem-water .elem-tag { border-color: rgba(74,170,212,.35); color: rgba(74,170,212,.8); }
.elem-fire  .elem-tag { border-color: rgba(216,104,40,.35); color: rgba(216,104,40,.8); }
.elem-air   .elem-tag { border-color: rgba(136,170,212,.35); color: rgba(136,170,212,.8); }

/* Experience section */
.experience-section {
  background: var(--cream);
  border-top: 1px solid var(--border);
}
.experience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
}
.exp-step { padding: 2rem 1.25rem; }
.exp-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid #c8a248;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.1rem;
  font-family: var(--font-head);
  font-size: 1.3rem;
  color: #c8a248;
}
.exp-step h4 { margin-bottom: 0.5rem; color: var(--dark); }
body[data-lang="th"] .exp-step h4 { font-family: var(--font-thai); }
.exp-step p { font-size: 0.86rem; color: var(--muted); }

/* Pricing / Booking */
.booking-section { background: #080706; padding: 5.5rem 0; text-align: center; }
.booking-inner { max-width: 680px; margin-inline: auto; padding-inline: 1.5rem; }
.booking-inner .eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c8a248;
  margin-bottom: 0.75rem;
}
body[data-lang="th"] .booking-inner .eyebrow { font-family: var(--font-thai); letter-spacing: 0.04em; text-transform: none; }
.booking-inner h2 { color: rgba(255,255,255,.88); margin-bottom: 0.75rem; }
.booking-inner > p { color: rgba(255,255,255,.45); margin-bottom: 2.5rem; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 3rem;
}
.price-card {
  padding: 1.75rem 1rem;
  border: 1px solid rgba(200,162,72,.22);
  border-radius: var(--r);
  background: rgba(200,162,72,.04);
}
.price-card h4 {
  font-size: 0.82rem;
  font-weight: 400;
  color: rgba(255,255,255,.55);
  margin-bottom: 0.6rem;
  line-height: 1.4;
}
body[data-lang="th"] .price-card h4 { font-family: var(--font-thai); }
.price-value {
  font-family: var(--font-head);
  font-size: 2rem;
  color: #c8a248;
  line-height: 1;
  margin-bottom: 0.3rem;
}
.price-unit { font-size: 0.7rem; color: rgba(255,255,255,.28); letter-spacing: 0.05em; }
body[data-lang="th"] .price-unit { font-family: var(--font-thai); }

.booking-contact {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: rgba(255,255,255,.45);
}
.contact-row strong { color: rgba(255,255,255,.78); }

.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #c8a248;
  color: #0c0a06;
  padding: 0.9rem 2.4rem;
  border-radius: 30px;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-bottom: 2rem;
  transition: background var(--dur), transform var(--dur), box-shadow var(--dur);
}
.btn-gold:hover {
  background: #e8bc5a;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(200,162,72,.3);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,.3);
  transition: color var(--dur);
  margin-top: 0.5rem;
}
.back-link:hover { color: rgba(255,255,255,.7); }
body[data-lang="th"] .back-link { font-family: var(--font-thai); }

@media (max-width: 900px) {
  .alchemy-intro-inner { grid-template-columns: 1fr; gap: 3rem; }
  .alchemy-mandala { display: none; }
}
@media (max-width: 768px) {
  .element-grid { grid-template-columns: 1fr; }
  .element-card { padding: 3rem 1.75rem; min-height: auto; }
  .experience-grid { grid-template-columns: 1fr; gap: 0.5rem; }
  .pricing-grid { grid-template-columns: 1fr; }
  .elem-bg-glyph { opacity: 0.04; }
}

/* ── Animations ──────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .65s ease forwards; }
.fade-d1 { animation-delay: .1s; opacity: 0; }
.fade-d2 { animation-delay: .22s; opacity: 0; }
.fade-d3 { animation-delay: .34s; opacity: 0; }
.fade-d4 { animation-delay: .46s; opacity: 0; }