/* ===================================================================
   landing.css — YinD House landing page styles
   MAP: grep -n "§CSS:" landing.css   (อย่าอ่านทั้งไฟล์)
     TOKENS · NAVBAR · BUTTONS · HERO · STATS · SECTIONS · ABOUT
     SERVICES · MENU · PACKAGES · FAQ · CONTACT · MEMBERSHIP
     FOOTER · RESPONSIVE
   =================================================================== */
/* §CSS:TOKENS ── Design tokens (from .impeccable/design.json) */
:root{
  --ink:#2C1810;        /* deep-bark · text */
  --brown:#6B4226;      /* forest-floor · primary (≤15% surface) */
  --brown-hover:#8B5E3C;
  --muted:#8A6A47;      /* aged-wood · muted text + labels */
  --parchment:#FFF8F0;  /* bg */
  --surface:#FFFFFF;
  --line:#EDD9C0;       /* linen · border */
  --gold-surface:#F5E6D3; /* warm-gold-light · tinted surface */
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--brown);outline-offset:2px;border-radius:6px}
html{scroll-behavior:smooth;scroll-padding-top:72px;overscroll-behavior:none}
section,[id]{scroll-margin-top:72px}
body{font-family:'Sarabun',sans-serif;line-height:1.65;color:var(--ink);background:var(--surface)}
.container{max-width:1140px;margin:0 auto;padding:0 24px}
.lucide{stroke-width:2;width:26px;height:26px;flex-shrink:0}

/* eyebrow */
.eyebrow{display:inline-block;font-size:0.75rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);margin-bottom:14px}

/* §CSS:NAVBAR ── nav fixed, hide-on-scroll-down */
nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:transform 0.35s cubic-bezier(0.4,0,0.2,1)}
nav.nav-hidden{transform:translateY(-100%)}
.navbar{display:flex;justify-content:space-between;align-items:center;padding:14px 0}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-mark{display:block;flex-shrink:0;width:64px;height:33px;background-color:#fff;-webkit-mask:url(/assets/yindhouse-logo-white.png) left center/contain no-repeat;mask:url(/assets/yindhouse-logo-white.png) left center/contain no-repeat;filter:drop-shadow(0 1px 4px rgba(0,0,0,0.35))}
.logo-divider{width:1px;height:18px;background:rgba(255,255,255,0.4);flex-shrink:0}
.logo-text{font-size:0.95rem;font-weight:700;color:#fff;letter-spacing:0.1px;line-height:1;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,0.35)}
@media(max-width:480px){.logo-divider,.logo-text{display:none}}
.nav-links{display:flex;gap:1.9rem;list-style:none;align-items:center}
.nav-links a{text-decoration:none;color:rgba(255,255,255,0.9);font-weight:700;font-size:0.95rem}
.nav-links a:hover{color:#fff}
.lang-toggle{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.5);padding:7px 15px;border-radius:99px;cursor:pointer;font-weight:700;font-size:0.85rem;font-family:'Sarabun',sans-serif;transition:border-color 0.2s,background 0.2s}
.lang-toggle:hover{border-color:#fff;background:rgba(255,255,255,0.15)}
.menu-btn{display:none;background:none;border:none;cursor:pointer;padding:4px;color:#fff}
.nav-backdrop{display:none}
.nav-links .drawer-head{display:none} /* mobile-drawer chrome, hidden on desktop */
.lang-toggle .lang-globe{display:none} /* globe shows only inside the mobile drawer */

/* §CSS:BUTTONS ── btn variants (primary/cream/gold/outline) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 28px;border:1px solid transparent;border-radius:12px;font-size:1rem;font-weight:700;font-family:'Sarabun',sans-serif;cursor:pointer;text-decoration:none;transition:background 0.15s,border-color 0.15s,color 0.15s;white-space:nowrap}
.btn .lucide{width:19px;height:19px}
.btn-primary{background:var(--brown);color:#fff}
.btn-primary:hover{background:var(--brown-hover)}
.btn-primary:active{transform:translateY(1px)}
/* cream primary — for use on dark surfaces (hero / membership) */
.btn-cream{background:var(--parchment);color:var(--ink);position:relative;overflow:hidden}
.btn-cream::after{content:'';position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(to right,transparent,rgba(255,255,255,0.55),transparent);transform:skewX(-18deg);animation:shimmer-btn 2.8s ease-in-out infinite}
.btn-cream:hover{background:#fff}
.btn-cream:active{transform:translateY(1px)}
.btn-gold{background:linear-gradient(110deg,#b87428 0%,#d4952e 35%,#e8b84a 55%,#c8892a 100%);color:#fff;border:none;position:relative;overflow:hidden;box-shadow:0 4px 18px rgba(184,116,40,0.45)}
.btn-gold::after{content:'';position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(to right,transparent,rgba(255,255,255,0.32),transparent);transform:skewX(-18deg);animation:shimmer-btn 2.8s ease-in-out infinite}
.btn-gold:hover{box-shadow:0 6px 24px rgba(184,116,40,0.6);filter:brightness(1.06)}
@keyframes shimmer-btn{0%{left:-80%}100%{left:130%}}
/* outline on dark — readable, never looks disabled */
.btn-outline{background:rgba(255,255,255,0.08);color:#fff;border-color:rgba(255,248,240,0.45);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.btn-outline:hover{background:rgba(255,255,255,0.18);border-color:#fff}

/* §CSS:HERO ── hero, slides, overlay */
.hero{position:relative;color:#fff;text-align:center;padding:80px 24px 90px;overflow:hidden;min-height:78vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#241610}
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center 30%;opacity:0;transition:opacity 1.4s ease}
.hero-slide.active{opacity:1}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.82) 0%,rgba(0,0,0,0.55) 45%,rgba(0,0,0,0.45) 100%);z-index:1}
.hero>*:not(.hero-slides):not(.hero-overlay){position:relative;z-index:2}
.hero-logo{width:84px;height:84px;border-radius:50%;border:1px solid rgba(237,217,192,0.4);margin-bottom:22px;object-fit:cover}
.hero-logo-main{width:180px;height:auto;margin-bottom:18px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.25))}
.hero .eyebrow{color:#D9C2A4;text-shadow:0 1px 6px rgba(0,0,0,0.5)}
.hero h1{font-size:clamp(2.1rem,5.4vw,3.5rem);font-weight:800;line-height:1.18;margin-bottom:16px;letter-spacing:-0.5px;text-shadow:0 2px 12px rgba(0,0,0,0.55),0 1px 3px rgba(0,0,0,0.4)}
.hero-subtitle{font-size:clamp(1rem,2vw,1.15rem);max-width:580px;margin:0 auto 32px;color:rgba(255,248,240,0.82);line-height:1.7;text-shadow:0 1px 8px rgba(0,0,0,0.5)}
.cta-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* §CSS:STATS ── floating stats bar + stat-dash */
.stats-wrap{position:relative;margin-top:-52px;z-index:5;padding-bottom:8px}
.stats-bar{background:var(--surface);border:1px solid var(--line);border-radius:16px;display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,0.06)}
.stat{padding:26px 18px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat-num{font-size:1.85rem;font-weight:600;color:var(--brown);line-height:1;letter-spacing:-0.03em;white-space:nowrap;font-family:'Prompt','Sarabun',sans-serif}
.stat-label{font-size:0.85rem;color:var(--muted);margin-top:6px;font-weight:500;font-family:'Prompt','Sarabun',sans-serif}
.stat-dash{display:inline-block;width:12px;height:2px;background:currentColor;vertical-align:middle;margin:0 2px;border-radius:1px}

/* §CSS:SECTIONS ── section/section-head shared */
section{padding:76px 24px}
.section-head{text-align:center;max-width:640px;margin:0 auto 44px}
.section-head h2{font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:800;color:var(--ink);margin-bottom:10px;letter-spacing:-0.3px}
.section-head p{color:var(--muted);font-size:1.02rem;line-height:1.7}

/* icon tile — shared */
.tile{width:54px;height:54px;border-radius:14px;background:var(--gold-surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--brown)}
.tile .lucide{width:26px;height:26px}

/* §CSS:ABOUT ── why-cards + about split */
#about{background:var(--parchment);padding-top:20px;padding-bottom:80px}
.about-split{display:grid;grid-template-columns:55fr 45fr;gap:40px;align-items:stretch}
.about-split-img{border-radius:20px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.12)}
.about-split-img img{width:100%;height:100%;min-height:400px;object-fit:cover;display:block}
.about-split-content .eyebrow{display:block;margin-bottom:10px;text-align:left}
.about-split-content h2{font-size:clamp(1.8rem,3.2vw,2.5rem);font-weight:800;color:var(--ink);margin-bottom:12px;letter-spacing:-0.3px;text-align:left}
.about-split-content .about-description{color:var(--muted);font-size:1rem;line-height:1.75;text-align:left;margin-bottom:0}
.why-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.why-mini-grid .why-card:last-child:nth-child(odd){grid-column:1/-1}
.why-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 20px;text-align:left;transition:border-color 0.15s,opacity 0.5s ease,transform 0.5s ease;opacity:0;transform:translateY(24px)}
.why-card.visible{opacity:1;transform:translateY(0)}
.why-card:hover{border-color:var(--brown)}
.why-card .tile{margin-bottom:14px}
.why-card h3{font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:6px}
.why-card p{font-size:0.88rem;color:var(--muted);line-height:1.6}

/* §CSS:SERVICES ── service cards */
#services{background:var(--surface)}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color 0.15s,background 0.15s,opacity 0.5s ease,transform 0.5s ease;opacity:0;transform:translateY(24px)}
.service-card.visible{opacity:1;transform:translateY(0)}
.service-card-img-wrap{position:relative}
.service-card-img{width:100%;height:130px;object-fit:cover;display:block}
.service-card-img-wrap::after{content:'';position:absolute;bottom:0;left:0;right:0;height:56px;background:linear-gradient(to bottom,transparent,var(--surface))}
.service-card-tile{position:absolute;top:10px;left:10px;z-index:3;width:38px;height:38px;border-radius:10px;background:rgba(255,248,240,0.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 6px rgba(0,0,0,0.1)}
.service-card-tile .lucide{width:18px;height:18px;color:var(--brown)}
.service-card-body{padding:14px 22px 22px}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.service-card:hover{border-color:var(--brown)}
.service-card-body .tile{margin-bottom:14px}
.service-card h3{font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:6px}
.service-card p{color:var(--muted);font-size:0.89rem;line-height:1.6}

/* §CSS:MENU ── menu scroll cards */
#menu{background:var(--gold-surface);padding-top:56px;padding-bottom:60px}
#menu .section-head{margin-bottom:30px}
.menu-scroll{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 20px;margin:0 -4px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#D9C3A2 transparent;mask-image:linear-gradient(to right,transparent 0%,black 3%,black 97%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,black 3%,black 97%,transparent 100%)}
.menu-scroll::-webkit-scrollbar{height:7px}
.menu-scroll::-webkit-scrollbar-track{background:transparent}
.menu-scroll::-webkit-scrollbar-thumb{background:#D9C3A2;border-radius:99px}
.menu-card{position:relative;scroll-snap-align:start;flex:0 0 440px;max-width:440px;height:430px;display:block;border-radius:22px;overflow:hidden;box-shadow:0 10px 30px rgba(44,24,16,0.16);transition:box-shadow 0.2s,transform 0.2s;opacity:0;transform:translateY(18px)}
.menu-card.visible{opacity:1;transform:translateY(0);transition:opacity 0.55s ease,transform 0.55s ease}
.menu-card:hover{box-shadow:0 18px 44px rgba(44,24,16,0.28);transform:translateY(-4px)}
.menu-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--gold-surface);transition:transform 0.5s ease}
.menu-card:hover .menu-card-img{transform:scale(1.05)}
.menu-card::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(28,15,8,0.88) 0%,rgba(28,15,8,0.5) 32%,rgba(28,15,8,0.08) 60%,transparent 100%)}
.menu-card-body{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:baseline;gap:12px;padding:22px 24px}
.menu-card-name{font-size:1.5rem;font-weight:400;color:#fff;line-height:1.2;text-shadow:0 1px 8px rgba(0,0,0,0.45)}
.menu-hint{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:0.84rem;font-weight:600;margin-top:10px}
.menu-hint .lucide{width:16px;height:16px}
@media(max-width:600px){
  #menu{overflow-x:clip} /* clip any sub-pixel overshoot from the bleed below, keeps y shadows */
  .menu-scroll{margin-right:calc(-20px - 24px)} /* cancel section(20)+container(24) right padding → carousel bleeds to screen edge so next card peeks instead of dead gap */
  .menu-card{flex:0 0 86%;max-width:86%;height:360px}
  .menu-card-name{font-size:1.3rem}.menu-card-price{font-size:1.05rem}
}

/* §CSS:PACKAGES ── tabs + package cards */
#packages{background:var(--parchment)}
.package-tabs{display:flex;justify-content:center;gap:10px;margin-bottom:36px;flex-wrap:wrap}
.tab-btn{padding:10px 26px;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:99px;cursor:pointer;font-weight:700;font-size:0.92rem;font-family:'Sarabun',sans-serif;transition:all 0.15s}
.tab-btn:hover{border-color:var(--brown);color:var(--brown)}
.tab-btn.active{background:var(--brown);color:#fff;border-color:var(--brown)}
.packages-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.package-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color 0.15s,opacity 0.5s ease,transform 0.5s ease;display:flex;flex-direction:column;opacity:0;transform:translateY(24px)}
.package-card.visible{opacity:1;transform:translateY(0)}
.package-card:hover{border-color:var(--brown)}
.package-card--popular{position:relative;z-index:2;border:2px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(140deg,#F5D98A 0%,#D4952E 38%,#B87428 62%,#E8B84A 100%) border-box;box-shadow:0 20px 48px rgba(184,116,40,0.30),0 0 0 5px rgba(232,184,74,0.10)}
.package-card--popular:hover{border-color:transparent}
.package-card--popular.visible{transform:translateY(-22px) scale(1.015)!important}
.packages-grid{padding-top:24px}
.pkg-img{position:relative;height:158px;background:var(--gold-surface);flex-shrink:0}
.pkg-img img{width:100%;height:100%;object-fit:cover;display:block}
.pkg-img::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:62px;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--surface));pointer-events:none}
.pkg-body{padding:6px 24px 24px;display:flex;flex-direction:column;flex:1}
.package-type-badge{position:absolute;top:12px;left:12px;z-index:1;background:var(--gold-surface);color:var(--brown);padding:5px 14px;border-radius:99px;font-size:0.74rem;font-weight:700;letter-spacing:1px;box-shadow:0 1px 5px rgba(44,24,16,0.18)}
.package-type-badge.is-popular{left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#FCEFBE 0%,#F4D272 50%,#E3B04A 100%);color:#4A2E08;display:inline-flex;align-items:center;gap:5px;padding:6px 16px;font-weight:800;box-shadow:0 3px 12px rgba(212,149,46,0.38),inset 0 1px 0 rgba(255,255,255,0.55)}
.package-type-badge.is-popular .lucide{width:14px;height:14px;stroke-width:2.5}
.package-card h3{font-size:1.18rem;font-weight:700;color:var(--ink);margin-bottom:2px}
.package-price{font-size:1.7rem;font-weight:800;color:var(--brown);margin:12px 0;letter-spacing:-0.02em}
.package-price span{font-size:0.85rem;font-weight:500;color:var(--muted)}
.pkg-price-note{font-size:0.52rem;font-weight:600;color:var(--brown);background:rgba(139,94,60,0.1);border:1px solid rgba(139,94,60,0.25);border-radius:99px;padding:1px 6px;margin-left:6px;vertical-align:middle;white-space:nowrap}
.package-features{list-style:none;margin-bottom:22px;flex:1}
.package-features li{padding:7px 0;color:var(--ink);border-bottom:1px solid var(--line);font-size:0.9rem;display:flex;align-items:flex-start;gap:9px}
.package-features li:last-child{border-bottom:none}
.package-features li .lucide{width:16px;height:16px;color:var(--brown);margin-top:3px}
.pkg-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;background:var(--brown);color:#fff;border:none;border-radius:12px;font-size:0.93rem;font-weight:700;font-family:'Sarabun',sans-serif;cursor:pointer;text-decoration:none;transition:background 0.15s}
.pkg-btn:hover{background:var(--brown-hover)}
.pkg-btn .lucide{width:16px;height:16px}

/* §CSS:FAQ ── 2-col: sticky intro + CTA / editorial accordion */
#faq{background:var(--surface)}
.faq-layout{display:grid;grid-template-columns:minmax(260px,330px) 1fr;gap:clamp(36px,5vw,64px);align-items:start;max-width:1040px;margin:0 auto}
.faq-intro{position:sticky;top:96px}
.faq-intro .faq-title{font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:800;color:var(--ink);letter-spacing:-0.3px;text-align:left;margin-bottom:14px;text-wrap:balance}
.faq-intro-text{color:var(--muted);font-size:0.95rem;line-height:1.7;margin-bottom:26px;max-width:34ch}
.faq-contact-cta{display:flex;align-items:center;gap:14px;padding:18px 20px;background:var(--brown);border-radius:16px;text-decoration:none;box-shadow:0 6px 20px rgba(107,66,38,0.18);transition:background 0.15s,transform 0.2s cubic-bezier(0.22,1,0.36,1),box-shadow 0.2s}
.faq-contact-cta:hover{background:var(--brown-hover);transform:translateY(-2px);box-shadow:0 12px 30px rgba(107,66,38,0.28)}
.faq-cta-icon{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,0.14);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.faq-cta-icon .lucide{width:20px;height:20px}
.faq-cta-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.faq-cta-label{color:#fff;font-weight:700;font-size:0.98rem}
.faq-cta-sub{color:rgba(255,248,240,0.78);font-size:0.82rem}
.faq-cta-arrow{width:18px;height:18px;color:rgba(255,248,240,0.85);flex-shrink:0;transition:transform 0.2s cubic-bezier(0.22,1,0.36,1)}
.faq-contact-cta:hover .faq-cta-arrow{transform:translateX(4px)}
/* editorial list — hairline dividers, no cards.
   margin-top = eyebrow block height → first row aligns with the .faq-title, not the eyebrow */
.faq-items{margin-top:calc(0.75rem * 1.65 + 14px)}
.faq-item{border-bottom:1px solid var(--line);transition:opacity 0.5s ease,transform 0.5s ease;opacity:0;transform:translateY(16px)}
.faq-item.visible{opacity:1;transform:translateY(0)}
.faq-question{padding:20px 2px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:700;font-size:1.05rem;color:var(--ink);user-select:none;transition:color 0.15s}
.faq-item:first-child .faq-question{padding-top:0}
.faq-question:hover{color:var(--brown)}
.faq-item.open .faq-question{color:var(--brown)}
.faq-answer{padding:0 2px;color:var(--muted);font-size:0.93rem;line-height:1.75;max-height:0;overflow:hidden;transition:max-height 0.3s ease,padding 0.3s ease}
.faq-item.open .faq-answer{max-height:260px;padding:0 2px 20px}
.faq-toggle{width:32px;height:32px;border-radius:50%;background:var(--gold-surface);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--brown);transition:transform 0.3s cubic-bezier(0.22,1,0.36,1),background 0.2s}
.faq-toggle .lucide{width:16px;height:16px}
.faq-item.open .faq-toggle{transform:rotate(45deg);background:var(--brown);color:#fff}
@media(max-width:860px){
  .faq-layout{grid-template-columns:1fr;gap:32px}
  .faq-intro{position:static;text-align:center}
  .faq-intro .faq-title{text-align:center}
  .faq-intro-text{max-width:46ch;margin:0 auto 26px}
  .faq-contact-cta{max-width:420px;margin:0 auto}
  .faq-items{margin-top:0}
}
@media(prefers-reduced-motion:reduce){
  .faq-contact-cta,.faq-cta-arrow,.faq-toggle{transition:background 0.2s,color 0.2s}
}

/* §CSS:CONTACT ── map + contact actions */
#contact{background:var(--parchment)}
.contact-split{display:grid;grid-template-columns:1.05fr 0.95fr;gap:24px;max-width:1040px;margin:0 auto;align-items:stretch}
.contact-map{border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 6px 22px rgba(44,24,16,0.10);min-height:405px;background:var(--gold-surface)}
.contact-map iframe{width:100%;height:100%;min-height:405px;border:0;display:block}
.contact-actions{display:flex;flex-direction:column;gap:14px}
.contact-action{display:flex;align-items:center;gap:15px;padding:17px 19px;background:var(--surface);border:1px solid var(--line);border-radius:16px;text-decoration:none;transition:border-color 0.15s,transform 0.15s,box-shadow 0.15s}
.contact-action:not(.is-static):hover{border-color:var(--brown);transform:translateY(-2px);box-shadow:0 8px 20px rgba(107,66,38,0.14)}
.contact-action .tile{width:50px;height:50px;margin:0;flex-shrink:0}
.contact-action .ca-body{flex:1;text-align:left;min-width:0}
.contact-action .ca-label{font-size:0.7rem;font-weight:700;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:3px}
.contact-action .ca-value{font-size:1.12rem;font-weight:800;color:var(--brown);line-height:1.2}
.contact-action .ca-sub{font-size:0.8rem;color:var(--muted);margin-top:3px;line-height:1.4}
.contact-action .ca-arrow{width:20px;height:20px;color:var(--brown);flex-shrink:0;opacity:0.45;transition:transform 0.15s,opacity 0.15s}
.contact-action:hover .ca-arrow{transform:translateX(3px);opacity:1}
.contact-action.is-primary{background:var(--brown);border-color:var(--brown)}
.contact-action.is-primary .tile{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.22);color:#fff}
.contact-action.is-primary .ca-label{color:rgba(255,248,240,0.62)}
.contact-action.is-primary .ca-value,.contact-action.is-primary .ca-arrow{color:#fff;opacity:1}
.contact-action.is-primary .ca-sub{color:rgba(255,248,240,0.7)}
.contact-action.is-primary:hover{background:var(--brown-hover);border-color:var(--brown-hover);box-shadow:0 8px 22px rgba(107,66,38,0.32)}
.contact-action.is-static{cursor:default}
.contact-mini{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:auto}
.contact-mini .contact-action{flex-direction:column;align-items:flex-start;gap:11px}
.contact-mini .ca-value{font-size:0.98rem}

/* §CSS:MEMBERSHIP ── membership band */
.membership{position:relative;overflow:hidden;color:#fff;text-align:center;padding:76px 24px;background:
  radial-gradient(ellipse 70% 55% at 50% -8%, rgba(232,184,74,0.26), transparent 62%),
  radial-gradient(ellipse 48% 60% at 10% 18%, rgba(184,116,40,0.30), transparent 56%),
  radial-gradient(ellipse 52% 62% at 90% 28%, rgba(139,94,60,0.34), transparent 58%),
  radial-gradient(ellipse 60% 50% at 18% 102%, rgba(232,184,74,0.14), transparent 56%),
  radial-gradient(ellipse 54% 55% at 86% 96%, rgba(184,116,40,0.20), transparent 56%),
  #2C1810}
.membership::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.membership .container{position:relative;z-index:1}
.membership .eyebrow{color:#D9C2A4}
.membership h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;margin-bottom:10px;letter-spacing:-0.3px}
.membership p{color:rgba(255,248,240,0.8);margin:0 auto 28px;font-size:1.02rem;max-width:500px}
.membership-hint{font-size:0.78rem;color:rgba(255,248,240,0.45);margin:12px auto 0!important;letter-spacing:0.5px}
.social-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:34px}
.social-pill{display:inline-flex;align-items:center;gap:7px;padding:9px 17px;border-radius:99px;text-decoration:none;font-weight:700;font-size:0.86rem;background:rgba(255,248,240,0.08);border:1px solid rgba(255,248,240,0.16);color:#fff;transition:background 0.15s}
.social-pill:hover{background:rgba(255,248,240,0.16)}
.social-pill svg{width:17px;height:17px;flex-shrink:0}

/* §CSS:FOOTER ── footer */
footer{background:var(--ink);color:rgba(255,248,240,0.6);text-align:center;padding:30px 24px;font-size:0.86rem}
footer strong{color:var(--line)}
footer .foot-sub{margin-top:6px;font-size:0.8rem;opacity:0.8}

/* §CSS:RESPONSIVE ── @media breakpoints */
@media(max-width:900px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .about-split{grid-template-columns:1fr;gap:24px}
  .about-split-img{position:relative;top:0}
  .about-split-img img{height:300px}
  .why-mini-grid{grid-template-columns:1fr 1fr}
  .contact-split{grid-template-columns:1fr;gap:18px}
  .contact-map,.contact-map iframe{min-height:300px}
  .stats-bar{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:none}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}
}
@media(max-width:640px){
  section{padding:54px 20px}
  .services-grid,.packages-grid{grid-template-columns:1fr}
  .why-mini-grid{grid-template-columns:1fr}
  .why-mini-grid .why-card:last-child:nth-child(odd){grid-column:auto}
  .menu-btn{display:flex}
  body.menu-open{overflow:hidden}
  /* backdrop */
  .nav-backdrop{display:block;position:fixed;inset:0;z-index:1;background:rgba(28,15,8,0.5);opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s}
  body.menu-open .nav-backdrop{opacity:1;visibility:visible}
  /* slide-in drawer (right) */
  .nav-links{position:fixed;top:0;right:0;bottom:0;left:auto;z-index:2;width:min(84vw,340px);flex-direction:column;align-items:stretch;gap:0;padding:0;background:var(--parchment);box-shadow:-18px 0 44px rgba(28,15,8,0.24);transform:translateX(105%);visibility:hidden;transition:transform .4s cubic-bezier(.22,1,.36,1),visibility .4s;overflow-y:auto;overscroll-behavior:contain}
  body.menu-open .nav-links{transform:translateX(0);visibility:visible}
  .nav-links .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:19px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1;background:var(--parchment)}
  .drawer-brand{font-weight:800;font-size:1.05rem;color:var(--ink);letter-spacing:.2px}
  .drawer-close{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--surface);border:1px solid var(--line);border-radius:10px;color:var(--brown);cursor:pointer;transition:background .15s,border-color .15s}
  .drawer-close:hover{background:var(--gold-surface);border-color:var(--brown)}
  .drawer-close .lucide{width:20px;height:20px}
  .nav-links li{width:100%;padding:0}
  .nav-links a:not(.btn){display:flex;align-items:center;padding:16px 24px;color:var(--ink);font-size:1.08rem;font-weight:700;border-bottom:1px solid rgba(237,217,192,.55);transition:background .15s,color .15s}
  .nav-links a:not(.btn):hover,.nav-links a:not(.btn):active{color:var(--brown);background:var(--gold-surface)}
  .nav-links li:last-child{margin-top:auto;padding:14px 22px 26px} /* language toggle pinned to bottom */
  .nav-links .lang-toggle{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:13px;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:var(--ink);font-size:.98rem;font-weight:700}
  .nav-links .lang-toggle .lang-globe{display:inline-flex;width:18px;height:18px}
  .nav-links .lang-toggle:hover{border-color:var(--brown);background:var(--gold-surface);color:var(--brown)}
  .hero{padding:56px 22px 104px;min-height:60vh}
  .btn{width:100%;max-width:320px}
  .cta-buttons{flex-direction:column;align-items:center}
}
@media(prefers-reduced-motion:reduce){
  .nav-links,.nav-backdrop{transition:opacity .15s ease,visibility .15s}
}

/* §CSS:LINE-MODAL ── จองคิวผ่าน LINE popup */
.line-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px}
.line-modal[hidden]{display:none}
.line-modal-backdrop{position:absolute;inset:0;background:rgba(44,24,16,0.55);backdrop-filter:blur(3px);animation:lineFade 0.2s ease}
.line-modal-card{position:relative;z-index:1;width:100%;max-width:340px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px 24px 22px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.28);animation:linePop 0.22s cubic-bezier(.2,.8,.3,1)}
.line-modal-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border:none;background:var(--parchment);border-radius:50%;color:var(--brown);cursor:pointer;display:flex;align-items:center;justify-content:center}
.line-modal-close .lucide{width:18px;height:18px}
.line-modal-badge{width:52px;height:52px;margin:2px auto 12px;border-radius:16px;background:#06C755;display:flex;align-items:center;justify-content:center;color:#fff}
.line-modal-badge .lucide{width:26px;height:26px}
.line-modal-title{font-size:1.25rem;font-weight:800;color:var(--ink);margin-bottom:4px}
.line-modal-sub{font-size:0.9rem;color:#7A6A5A;margin-bottom:18px}
.line-qr{width:184px;height:184px;margin:0 auto 16px;background:#fff;border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.line-qr img,.line-qr canvas{display:block}
.line-qr.qr-failed::after{content:'QR โหลดไม่ได้ — กดเปิด LINE ด้านล่าง';font-size:0.8rem;color:#7A6A5A;padding:0 14px}
.line-id{display:inline-flex;align-items:center;gap:10px;margin:0 auto 14px;padding:9px 16px;background:var(--parchment);border:1px solid var(--line);border-radius:99px;cursor:pointer;font-family:inherit;transition:border-color 0.15s}
.line-id:hover{border-color:var(--brown)}
.line-id-val{font-weight:800;color:var(--brown);font-size:1rem;letter-spacing:0.3px}
.line-id-copy{display:inline-flex;align-items:center;gap:4px;font-size:0.8rem;font-weight:700;color:#7A6A5A}
.line-id-copy .lucide{width:14px;height:14px}
.line-open-btn{width:100%;background:#06C755;color:#fff;border:none}
.line-open-btn:hover{background:#05b34c}
.line-open-btn:active{transform:translateY(1px)}
@keyframes lineFade{from{opacity:0}to{opacity:1}}
@keyframes linePop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

/* §CSS:TO-TOP ── back-to-top floating button */
.to-top{position:fixed;right:20px;bottom:22px;z-index:90;width:46px;height:46px;border:none;border-radius:50%;background:var(--brown);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 20px rgba(44,24,16,0.28);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility .3s,background .15s}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--brown-hover)}
.to-top .lucide{width:22px;height:22px}
@media(prefers-reduced-motion:reduce){.to-top{transition:opacity .2s ease,visibility .2s}}