/* =====================================================================
   Cozy Massage & Spa — styles.css
   Mobile-first. Warm, calm, premium aesthetic built on the terracotta brand.
   ===================================================================== */

:root{
  /* Brand palette (terracotta plumeria logo) */
  --terracotta:#a9694a;
  --terracotta-dk:#8f5439;
  --clay:#bd7f5d;
  --espresso:#33271f;
  --cocoa:#6a564a;
  --sand:#f4ebe1;      /* light section bg */
  --cream:#fbf7f1;     /* page bg / cards */
  --cream-2:#fdfaf6;
  --line:#e8dccd;
  --gold:#c19a5b;
  --white:#ffffff;

  --maxw:1200px;
  --gutter:20px;
  --radius:18px;
  --radius-sm:12px;
  --shadow-sm:0 2px 10px rgba(80,55,40,.06);
  --shadow:0 18px 50px -18px rgba(90,60,40,.28);
  --shadow-lg:0 30px 70px -24px rgba(80,50,35,.4);

  --serif:"Cormorant Garamond","Noto Serif Thai","Noto Sans SC",Georgia,serif;
  --sans:"Plus Jakarta Sans","Noto Sans Thai","Noto Sans SC",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* Language-specific body fonts */
html[lang="th"] body{ font-family:"Noto Sans Thai",var(--sans); }
html[lang="zh"] body{ font-family:"Noto Sans SC",var(--sans); }
html[lang="th"] .display{ font-family:"Noto Serif Thai","Cormorant Garamond",serif; font-weight:600; letter-spacing:0; }
html[lang="zh"] .display{ font-family:"Noto Sans SC",serif; font-weight:700; letter-spacing:0; }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  color:var(--espresso);
  background:var(--cream);
  line-height:1.65;
  font-size:16px;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.08;
  letter-spacing:.2px;
}

.skip-link{
  position:fixed; top:-100px; left:12px; z-index:200;
  background:var(--espresso); color:#fff; padding:10px 16px; border-radius:8px;
}
.skip-link:focus{ top:12px; }

/* ---------- Eyebrow / section heads ---------- */
.eyebrow{
  font-size:.74rem; letter-spacing:.28em; text-transform:uppercase;
  font-weight:600; color:var(--terracotta); margin-bottom:14px;
}
.eyebrow-light{ color:#f3ddd0; }
html[lang="th"] .eyebrow, html[lang="zh"] .eyebrow{ letter-spacing:.18em; }

.section{ padding:72px 0; }
.section-head{ max-width:640px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2, .about-text h2, .visit-info h2{ font-size:clamp(2rem,7vw,3rem); }
.section-note{ margin-top:14px; color:var(--cocoa); font-size:.95rem; font-style:italic; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-weight:600; font-size:.95rem;
  padding:14px 26px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .25s var(--ease), background .25s, box-shadow .25s, color .25s;
  white-space:nowrap; line-height:1;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--terracotta); color:#fff; box-shadow:0 10px 24px -10px rgba(169,105,74,.7); }
.btn-primary:hover{ background:var(--terracotta-dk); transform:translateY(-2px); }
.btn-light{ background:#fff; color:var(--terracotta-dk); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-ghost-light{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.55); backdrop-filter:blur(4px); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.22); }
.btn-sm{ padding:10px 18px; font-size:.85rem; }
.btn-lg{ padding:17px 38px; font-size:1.02rem; }

.text-link{ color:var(--terracotta); font-weight:600; font-size:.92rem; display:inline-block; margin-top:8px; }
.text-link:hover{ color:var(--terracotta-dk); }

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:90;
  transition:background .35s var(--ease), box-shadow .35s, padding .35s;
  padding:14px 0;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.brand-logo{ height:32px; width:auto; transition:filter .35s, height .35s; }
.site-header.scrolled .brand-logo{ height:28px; }
.footer-logo{ height:50px; }

.site-header.scrolled{
  background:rgba(251,247,241,.92);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 1px 0 rgba(0,0,0,.05), var(--shadow-sm);
  padding:9px 0;
}
.site-header.at-top:not(.scrolled) .brand-logo{ filter:brightness(0) invert(1); }
.site-header.at-top:not(.scrolled) .nav-desktop a{ color:#fff; }
.site-header.at-top:not(.scrolled) .lang-switch button{ color:rgba(255,255,255,.85); }
.site-header.at-top:not(.scrolled) .lang-switch button.active{ color:#fff; }
.site-header.at-top:not(.scrolled) .lang-switch{ border-color:rgba(255,255,255,.4); }
.site-header.at-top:not(.scrolled) .menu-toggle span{ background:#fff; }

.nav-desktop{ display:none; }
.nav-desktop a{ color:var(--espresso); font-weight:500; font-size:.95rem; position:relative; padding:6px 2px; transition:color .2s; }
.nav-desktop a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--terracotta); transition:width .25s var(--ease); }
.nav-desktop a:hover::after{ width:100%; }
.nav-desktop a:hover{ color:var(--terracotta); }

.header-actions{ display:flex; align-items:center; gap:10px; }
.header-book{ display:none; }

/* Language switch */
.lang-switch{ display:flex; align-items:center; gap:2px; border:1px solid var(--line); border-radius:999px; padding:3px; }
.lang-switch button{
  font-family:var(--sans); font-size:.76rem; font-weight:600; letter-spacing:.02em;
  border:0; background:transparent; color:var(--cocoa); cursor:pointer;
  padding:5px 9px; border-radius:999px; transition:background .2s, color .2s; line-height:1;
}
.lang-switch button.active{ background:var(--terracotta); color:#fff; }

/* Hamburger */
.menu-toggle{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:42px; height:38px; border:0; background:transparent; cursor:pointer; padding:8px; }
.menu-toggle span{ display:block; height:2px; width:100%; background:var(--espresso); border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
body.nav-open .menu-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.nav-open .menu-toggle span:nth-child(2){ opacity:0; }
body.nav-open .menu-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer */
.mobile-nav{
  position:fixed; top:0; right:0; z-index:95; height:100dvh; width:min(82vw,340px);
  background:var(--cream-2); box-shadow:var(--shadow-lg);
  transform:translateX(100%); transition:transform .4s var(--ease);
  display:flex; flex-direction:column; gap:6px; padding:90px 28px 28px;
}
body.nav-open .mobile-nav{ transform:translateX(0); }
.mobile-nav nav{ display:flex; flex-direction:column; }
.mobile-nav nav a{ font-family:var(--serif); font-size:1.7rem; font-weight:500; padding:12px 0; border-bottom:1px solid var(--line); color:var(--espresso); }
html[lang="th"] .mobile-nav nav a, html[lang="zh"] .mobile-nav nav a{ font-family:var(--sans); font-size:1.25rem; font-weight:600; }
.mobile-nav-langs{ margin:22px 0 8px; align-self:flex-start; }
.mobile-book{ margin-top:auto; }
.nav-backdrop{ position:fixed; inset:0; z-index:94; background:rgba(40,28,22,.45); opacity:0; transition:opacity .35s; }
body.nav-open .nav-backdrop{ opacity:1; }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; color:#fff; overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:-1; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(30,18,12,.5) 0%, rgba(30,18,12,.12) 22%, rgba(30,18,12,0) 40%),
    linear-gradient(0deg, rgba(24,14,9,.92) 0%, rgba(24,14,9,.8) 22%, rgba(24,14,9,.56) 44%, rgba(24,14,9,.3) 64%, rgba(24,14,9,.1) 82%, transparent 96%);
}
.hero-content{ padding-bottom:84px; padding-top:120px; }
.hero .eyebrow-light{ text-shadow:0 1px 14px rgba(0,0,0,.45); }
.hero-title{ font-size:clamp(2.6rem,11vw,5.2rem); max-width:14ch; margin:6px 0 18px; text-shadow:0 2px 34px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.3); }
.hero-subtitle{ font-size:clamp(1rem,4.4vw,1.2rem); max-width:46ch; color:rgba(255,255,255,.94); margin-bottom:30px; font-weight:300; text-shadow:0 1px 16px rgba(0,0,0,.45); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; }
.scroll-cue{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); width:26px; height:42px; border:2px solid rgba(255,255,255,.6); border-radius:14px; display:none; }
.scroll-cue span{ position:absolute; left:50%; top:8px; width:4px; height:8px; background:#fff; border-radius:2px; transform:translateX(-50%); animation:scrollcue 1.8s infinite; }
@keyframes scrollcue{ 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 80%{opacity:0;transform:translate(-50%,14px)} }

/* ---------- About ---------- */
.about{ background:var(--cream); padding-top:64px; }
.about-grid{ display:grid; gap:36px; }
.about-media{ position:relative; }
.about-media img{ width:100%; border-radius:var(--radius); box-shadow:var(--shadow); object-fit:cover; aspect-ratio:4/5; }
.about-media-2{ display:none; }
.about-text .lead{ font-size:1.08rem; color:var(--cocoa); margin:18px 0 28px; max-width:52ch; }
.features{ display:grid; gap:20px; }
.features li{ display:flex; gap:14px; align-items:flex-start; }
.feat-icon{
  flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--sand); color:var(--terracotta); font-size:.9rem;
}
.features h3{ font-size:1.02rem; font-weight:600; margin-bottom:2px; }
.features p{ font-size:.92rem; color:var(--cocoa); line-height:1.5; }

/* ---------- Services ---------- */
.services{ background:linear-gradient(180deg,var(--sand),var(--cream-2)); }
.service-grid{ display:grid; gap:22px; margin-top:44px; }
.service-card{
  background:var(--cream-2); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s;
  display:flex; flex-direction:column;
}
.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.service-img{ aspect-ratio:16/11; overflow:hidden; }
.service-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.service-card:hover .service-img img{ transform:scale(1.06); }
.service-body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.service-body h3{ font-family:var(--serif); font-size:1.5rem; font-weight:600; }
html[lang="th"] .service-body h3, html[lang="zh"] .service-body h3{ font-family:var(--sans); font-size:1.2rem; }
.service-body>p{ color:var(--cocoa); font-size:.92rem; margin:6px 0 16px; flex:1; }
.price-list{ display:flex; flex-direction:column; gap:8px; border-top:1px dashed var(--line); padding-top:14px; }
.price-list li{ display:flex; justify-content:space-between; align-items:baseline; font-size:.92rem; color:var(--cocoa); }
.price-list .price{ font-weight:700; color:var(--terracotta-dk); font-size:1rem; }

/* ---------- Signature band ---------- */
.signature{ position:relative; color:#fff; overflow:hidden; }
.signature-media{ position:absolute; inset:0; z-index:-1; }
.signature-media img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.signature-scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(30,18,12,.86) 0%, rgba(30,18,12,.55) 55%, rgba(30,18,12,.25) 100%); }
.signature-inner{ padding:96px var(--gutter); }
.signature-text{ max-width:520px; }
.signature-text h2{ font-size:clamp(1.9rem,6.5vw,2.8rem); margin:4px 0 16px; }
.signature-text p{ color:rgba(255,255,255,.9); font-weight:300; margin-bottom:26px; font-size:1.05rem; }

/* ---------- Gallery ---------- */
.gallery{ background:var(--cream); }
.gallery-grid{ columns:2; column-gap:10px; padding:38px var(--gutter) 0; max-width:var(--maxw); margin-inline:auto; }
.gallery-grid .gallery-item{ break-inside:avoid; margin:0 0 10px; border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; position:relative; background:var(--sand); }
.gallery-grid img{ width:100%; transition:transform .6s var(--ease), opacity .6s; }
.gallery-grid .gallery-item::after{ content:"⤢"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:1.4rem; background:rgba(40,26,18,.0); opacity:0; transition:.3s; }
.gallery-grid .gallery-item:hover img{ transform:scale(1.05); }
.gallery-grid .gallery-item:hover::after{ background:rgba(40,26,18,.28); opacity:1; }

/* ---------- Visit ---------- */
.visit{ background:linear-gradient(180deg,var(--cream-2),var(--sand)); }
.visit-grid{ display:grid; gap:36px; }
.visit-list{ display:grid; gap:26px; margin-top:28px; }
.visit-list li{ display:flex; gap:14px; align-items:flex-start; }
.visit-ico{ flex:none; font-size:1.3rem; width:44px; height:44px; display:grid; place-items:center; background:#fff; border-radius:12px; box-shadow:var(--shadow-sm); }
.visit-list h3{ font-size:1.05rem; font-weight:600; margin-bottom:3px; }
.visit-list p{ color:var(--cocoa); font-size:.96rem; }
.contact-lines{ display:flex; flex-direction:column; }
.contact-lines a{ color:var(--terracotta-dk); font-weight:500; }
.contact-lines a:hover{ text-decoration:underline; }
.visit-channels{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.chip{ font-size:.82rem; font-weight:600; padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--espresso); transition:.2s; }
.chip:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.chip-wa{ border-color:#cfe8d6; color:#1c8a4b; }
.chip-fb{ border-color:#cfe0f6; color:#1262c4; }
.chip-gw{ border-color:#f0d9c7; color:var(--terracotta-dk); }
.visit-map{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); min-height:300px; border:1px solid var(--line); background:var(--sand); }
.visit-map iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--terracotta); color:#fff; text-align:center; }
.cta-inner{ padding:70px var(--gutter); }
.cta-band h2{ font-size:clamp(2rem,7vw,3rem); }
.cta-band p{ font-size:1.1rem; margin:10px 0 26px; color:rgba(255,255,255,.92); font-weight:300; }
.cta-band .btn-primary{ background:#fff; color:var(--terracotta-dk); }
.cta-band .btn-primary:hover{ background:var(--cream); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--espresso); color:rgba(255,255,255,.78); padding:56px 0 0; }
.footer-grid{ display:grid; gap:34px; grid-template-columns:1fr; }
.footer-logo{ filter:brightness(0) invert(1); opacity:.95; margin-bottom:14px; }
.footer-brand p{ font-size:.92rem; max-width:30ch; }
.footer-col h4{ font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:#e8c6b3; margin-bottom:14px; font-weight:600; }
.footer-col a, .footer-hours{ display:block; color:rgba(255,255,255,.78); font-size:.94rem; padding:5px 0; transition:color .2s; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:44px; padding-block:22px; }
.footer-bottom p{ font-size:.84rem; color:rgba(255,255,255,.6); text-align:center; }

/* ---------- Sticky mobile contact bar ---------- */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:grid; grid-template-columns:repeat(3,1fr);
  background:var(--cream-2); border-top:1px solid var(--line);
  box-shadow:0 -8px 24px -12px rgba(60,40,30,.35);
  padding-bottom:env(safe-area-inset-bottom);
  transition:transform .35s var(--ease);
}
.mb-item{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:9px 4px; font-size:.74rem; font-weight:600; color:var(--espresso); border-right:1px solid var(--line); }
.mb-item:last-child{ border-right:0; }
.mb-ico{ font-size:1.15rem; }
.mb-wa{ color:#1c8a4b; }

/* ---------- Lightbox ---------- */
.lightbox{ position:fixed; inset:0; z-index:120; background:rgba(28,18,12,.94); display:none; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; }
.lightbox.open{ display:flex; opacity:1; }
.lb-img{ max-width:92vw; max-height:86vh; border-radius:8px; box-shadow:var(--shadow-lg); animation:lbin .35s var(--ease); }
@keyframes lbin{ from{ transform:scale(.94); opacity:0 } to{ transform:scale(1); opacity:1 } }
.lb-close,.lb-prev,.lb-next{ position:absolute; background:rgba(255,255,255,.12); border:0; color:#fff; cursor:pointer; backdrop-filter:blur(4px); transition:background .2s; }
.lb-close{ top:18px; right:18px; width:46px; height:46px; border-radius:50%; font-size:1.6rem; line-height:1; }
.lb-prev,.lb-next{ top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; font-size:2rem; line-height:1; }
.lb-prev{ left:14px; } .lb-next{ right:14px; }
.lb-close:hover,.lb-prev:hover,.lb-next:hover{ background:rgba(255,255,255,.28); }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (min-width:560px){
  .gallery-grid{ columns:3; }
  .hero-cta .btn{ font-size:1rem; }
}

@media (min-width:768px){
  :root{ --gutter:32px; }
  .section{ padding:96px 0; }
  .about-grid{ grid-template-columns:1fr 1fr; align-items:center; gap:54px; }
  .about-media{ display:grid; grid-template-columns:1.3fr 1fr; gap:14px; align-items:end; }
  .about-media-2{ display:block; aspect-ratio:3/4; }
  .about-media img:first-child{ aspect-ratio:3/4; }
  .service-grid{ grid-template-columns:repeat(2,1fr); gap:26px; }
  .visit-grid{ grid-template-columns:1fr 1fr; align-items:stretch; gap:46px; }
  .footer-grid{ grid-template-columns:2fr 1fr 1.4fr 1fr; }
  .gallery-grid{ columns:4; }
  .scroll-cue{ display:block; }
}

@media (min-width:992px){
  .nav-desktop{ display:flex; gap:30px; }
  .menu-toggle{ display:none; }
  .header-book{ display:inline-flex; }
  .mobile-bar{ display:none; }
  .brand-logo{ height:40px; }
  .site-header.scrolled .brand-logo{ height:36px; }
  body{ padding-bottom:0 !important; }
  .service-grid{ grid-template-columns:repeat(3,1fr); }
  .hero-content{ padding-bottom:96px; }
  .section-head h2{ font-size:3.2rem; }
}

/* Add bottom padding on mobile so sticky bar doesn't cover content */
@media (max-width:991px){
  body{ padding-bottom:62px; }
  /* declutter mobile header: language lives in the menu drawer instead */
  .header-actions .lang-switch{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* =====================================================================
   ADDITIONS — loader, full menu, brand motif, polish
   ===================================================================== */

/* ---------- Brand flower motif above eyebrows ---------- */
.eyebrow::before{
  content:""; display:block; width:30px; height:30px; margin:0 0 12px;
  background:url(../assets/logo/logo-mark.png) center/contain no-repeat; opacity:.85;
}
.section-head.center .eyebrow::before{ margin-left:auto; margin-right:auto; }

/* ---------- Hero subtle Ken Burns ---------- */
.hero-media img{ animation:kenburns 22s ease-in-out infinite alternate; }
@keyframes kenburns{ from{ transform:scale(1) } to{ transform:scale(1.07) } }

/* ---------- Richer primary button ---------- */
.btn-primary{ background:linear-gradient(135deg, var(--clay) 0%, var(--terracotta) 52%, var(--terracotta-dk) 100%); }
.btn-primary:hover{ background:linear-gradient(135deg, var(--terracotta) 0%, var(--terracotta-dk) 100%); }

/* ---------- Full menu: tabs ---------- */
.menu-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:40px auto 0; max-width:700px; }
.menu-tab{
  font-family:var(--sans); font-weight:600; font-size:.9rem; padding:11px 22px; border-radius:999px;
  border:1px solid var(--line); background:var(--cream-2); color:var(--cocoa); cursor:pointer;
  transition:background .25s, color .25s, border-color .25s, transform .15s;
}
.menu-tab:hover{ color:var(--terracotta-dk); border-color:var(--clay); }
.menu-tab:active{ transform:scale(.97); }
.menu-tab.active{ background:var(--terracotta); color:#fff; border-color:var(--terracotta); box-shadow:0 10px 22px -12px rgba(169,105,74,.85); }

.menu-mount{ max-width:920px; margin:28px auto 0; }
.menu-panel{ animation:menuFade .5s var(--ease); }
@keyframes menuFade{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

/* à la carte table */
.menu-head{ display:flex; justify-content:flex-end; gap:8px; padding:0 4px 10px; border-bottom:2px solid var(--clay); }
.menu-head .m-h{ width:96px; text-align:right; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--terracotta-dk); font-weight:700; }
.m-row{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px 4px; border-bottom:1px solid var(--line); transition:background .2s; }
.m-row:hover{ background:rgba(169,105,74,.05); }
.m-name{ flex:1; min-width:0; }
.m-title{ font-family:var(--serif); font-size:1.32rem; font-weight:600; color:var(--espresso); display:block; line-height:1.18; }
html[lang="th"] .m-title, html[lang="zh"] .m-title{ font-family:var(--sans); font-size:1.06rem; font-weight:600; }
.m-cells{ display:flex; gap:8px; }
.m-cell{ width:96px; text-align:right; }
.m-lab{ display:none; }
.m-val{ font-weight:700; color:var(--terracotta-dk); font-size:1.04rem; }
.m-cell.is-na .m-val{ color:#d9cab8; }

/* packages */
.pkg-grid{ display:grid; gap:20px; grid-template-columns:1fr; }
.pkg{ background:var(--cream-2); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s; }
.pkg:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.pkg-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.pkg h3{ font-family:var(--serif); font-size:1.55rem; font-weight:600; line-height:1.12; }
.pkg-dur{ flex:none; font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--terracotta-dk); background:var(--sand); padding:6px 12px; border-radius:999px; white-space:nowrap; }
.pkg-list{ margin:16px 0 20px; display:flex; flex-direction:column; gap:9px; flex:1; }
.pkg-list li{ position:relative; padding-left:22px; font-size:.92rem; color:var(--cocoa); line-height:1.45; }
.pkg-list li::before{ content:""; position:absolute; left:0; top:6px; width:11px; height:11px; background:url(../assets/logo/logo-mark.png) center/contain no-repeat; opacity:.8; }
.pkg-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px dashed var(--line); padding-top:16px; }
.pkg-price{ font-family:var(--serif); font-size:1.75rem; font-weight:600; color:var(--terracotta-dk); }

/* ---------- CTA band flower watermark ---------- */
.cta-band{ position:relative; overflow:hidden; }
.cta-band::before, .cta-band::after{
  content:""; position:absolute; width:300px; height:300px; pointer-events:none;
  background:url(../assets/logo/logo-mark.png) center/contain no-repeat;
  filter:brightness(0) invert(1); opacity:.08;
}
.cta-band::before{ top:-70px; left:-58px; }
.cta-band::after{ bottom:-80px; right:-58px; transform:rotate(35deg); }
.cta-inner{ position:relative; z-index:1; }

/* ---------- Mobile bar icons (SVG) ---------- */
.mb-ico{ width:22px; height:22px; fill:currentColor; display:block; }
.mb-dir{ color:var(--terracotta-dk); }

@media (min-width:760px){ .pkg-grid{ grid-template-columns:1fr 1fr; gap:24px; } }

@media (max-width:560px){
  .menu-head{ display:none; }
  .m-row{ flex-direction:column; align-items:stretch; gap:11px; padding:18px 2px; }
  .m-cells{ gap:8px; }
  .m-cell{ flex:1; width:auto; text-align:center; background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:9px 4px; }
  .m-cell.is-na{ display:none; }
  .m-lab{ display:block; font-size:.64rem; letter-spacing:.05em; color:var(--cocoa); text-transform:uppercase; margin-bottom:3px; }
  .pkg h3{ font-size:1.35rem; }
}

@media (prefers-reduced-motion:reduce){
  .petal, .petal-core, .loader-word{ opacity:1 !important; }
  .hero-media img{ transform:none !important; }
}

/* Customer actions and readable prices, within the original Cozy design. */
html[lang="zh"] .hero-title{white-space:pre-line}
.gallery-grid img{height:auto}
.brand{flex:none}@media(max-width:991px){.brand-logo{width:158px}}html{scroll-padding-top:90px}
[hidden]{display:none!important}:focus-visible{outline:3px solid #c89452;outline-offset:5px}.action-icon{width:20px;height:20px;flex:none}.btn{min-height:50px}.btn-primary{background:linear-gradient(135deg,#a16648,#87482e)}.btn-outline{border-color:var(--terracotta);color:var(--terracotta-dk);background:transparent}.hero-price{font-size:.92rem;font-weight:500;color:#fff;margin:0 0 18px;text-shadow:0 1px 12px #0008}.hero-menu-link{display:inline-flex;align-items:center;gap:12px;min-height:48px;margin-top:10px;font-size:.93rem;font-weight:600;color:white;text-decoration:underline;text-underline-offset:5px}.hero-cta{gap:12px}.hero .scroll-cue{display:none}.hero-content{padding-bottom:90px}.hero-subtitle{margin-bottom:22px}.reveal,.reveal.in{opacity:1;transform:none;transition:none}.menu-panel{animation:none}.menu-tabs{scroll-margin-top:95px}.menu-tab{min-height:48px}.menu-mount{scroll-margin-top:95px}.gallery-item{display:block;width:100%;padding:0;border:0}.gallery-grid .gallery-item::after{pointer-events:none}.visit-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.visit-actions .btn{flex:1;min-width:135px}.chip{min-height:44px;display:inline-flex;align-items:center}.mobile-language{display:none}.drawer-close{position:absolute;right:22px;top:22px;width:48px;height:48px;background:transparent;border:1px solid var(--line);border-radius:50%;font-size:28px;color:var(--espresso)}.menu-toggle{width:48px;height:48px}.mobile-nav{visibility:hidden}.nav-open .mobile-nav{visibility:visible}.nav-open,.gallery-open{overflow:hidden}.mobile-nav .lang-switch button{min-height:44px;min-width:48px}.mb-item{min-height:68px}.mb-dir{background:var(--terracotta-dk);color:white}.footer-col h3{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:#e8c6b3;margin-bottom:14px;font-weight:600}.pkg-foot .btn{white-space:normal;text-align:center;line-height:1.4}.pkg-top{flex-wrap:wrap}.m-cell.is-na .m-val{color:var(--cocoa)}
dialog.lightbox{padding:0;margin:0;max-width:none;max-height:none;width:100%;height:100%;border:0;background:transparent;opacity:1}dialog.lightbox[open]{display:flex}dialog.lightbox::backdrop{background:rgba(28,18,12,.96)}.lb-img{width:auto;height:auto}.lb-close{width:48px;height:48px}.lb-counter{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);color:white;font:500 .85rem var(--sans)}
@media(max-width:991px){body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}.mobile-language{display:block;width:74px;min-height:44px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(30,20,14,.35);color:#fff;padding:7px 10px;font:500 .8rem var(--sans)}.site-header.scrolled .mobile-language{color:var(--espresso);background:var(--cream);border-color:var(--line)}.mobile-language option{background:var(--cream);color:var(--espresso)}.header-actions{gap:8px}.header-inner{gap:10px}.brand-logo{max-width:158px;height:auto!important;max-height:36px}.header-call,.header-map{display:none}.hero-title{font-size:clamp(2.6rem,9.7vw,4.6rem)}.hero-content{padding-top:120px;padding-bottom:90px}.hero-subtitle{font-size:1rem;line-height:1.65;max-width:46ch}.hero-cta .btn{min-width:135px}.hero-price{font-size:.87rem}.hero-menu-link{font-size:.87rem}}
@media(max-width:559px){.menu-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.menu-tab{padding:11px 8px}.hero-title{max-width:15ch}.hero-content{padding-top:110px}.hero-cta .btn{padding-inline:20px;font-size:.88rem}.hero-price{line-height:1.5}.lb-img{max-width:94vw;max-height:78dvh}.lb-prev,.lb-next{top:auto;bottom:12px;transform:none}.lb-counter{bottom:28px}}
@media(max-width:359px){:root{--gutter:16px}.brand-logo{max-width:128px}.header-actions{gap:6px}.hero-title{font-size:2.5rem}.hero-cta .btn{padding-inline:15px;min-width:130px}.m-val{font-size:.96rem}.visit-actions .btn{min-width:125px}.pkg{padding:20px 16px}}
@media(min-width:560px){.m-cell{position:relative}.m-lab{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media(min-width:992px){.header-call{color:var(--terracotta-dk);background:var(--cream);border-color:var(--line)}.site-header.at-top:not(.scrolled) .header-call{color:white;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}.header-inner{gap:14px}.nav-desktop{gap:18px}.nav-desktop a{min-height:44px;display:inline-flex;align-items:center}.header-actions .lang-switch button{min-height:44px}.header-book{padding-inline:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* A real treatment scene: keep the people clear on the right. */
.hero-media img{object-position:70% 45%;animation:none}
.hero-scrim{background:linear-gradient(90deg,rgba(20,14,10,.83) 0%,rgba(20,14,10,.66) 32%,rgba(20,14,10,.20) 60%,rgba(20,14,10,.04) 100%),linear-gradient(0deg,rgba(20,14,10,.55),transparent 60%),linear-gradient(180deg,rgba(20,14,10,.25),transparent 25%)}
@media(max-width:600px){.hero-media img{object-position:74% center}.hero-scrim{background:linear-gradient(0deg,rgba(20,14,10,.94) 0%,rgba(20,14,10,.78) 28%,rgba(20,14,10,.23) 65%,rgba(20,14,10,.12) 100%)}.hero-title{text-shadow:0 2px 24px rgba(0,0,0,.45)}}