:root{
  --brand:#6f4e37;         /* warm brown */
  --brand-2:#8b5e3c;       /* lighter brown */
  --bg:#f7f1eb;            /* warm ivory */
  --ink:#2f2a26;
  --ok:#1f9d55;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Prompt',system-ui,Segoe UI,Roboto,Arial,'Noto Sans Thai',sans-serif;color:var(--ink);background:var(--bg)}
.wrap{min-height:100dvh;display:flex;flex-direction:column}
.hero{
  background: radial-gradient(1200px 500px at 70% -10%, #d7c4b4 0%, transparent 60%) , linear-gradient(180deg, #fff 0%, #f5eee7 100%);
  border-bottom:1px solid #ebdfd3;
}
.hero-inner{max-width:1100px;margin:0 auto;padding:48px 20px 28px}
.tag.th{letter-spacing:.5px;color:#8a6a53;font-weight:600}
h1{margin:.2rem 0 1rem;font-size:clamp(28px,5vw,44px);font-weight:800;color:var(--brand)}
.sub{color:#6a5a50;margin:0 0 1.25rem;font-size:clamp(14px,2.6vw,18px)}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:12px;font-weight:700;
  text-decoration:none;transition:.15s ease; border:2px solid transparent
}
.btn.tel{background:var(--brand);color:#fff}
.btn.tel.outline{background:#fff;color:var(--brand);border-color:var(--brand)}
.btn.line{background:#06c755;color:#fff}
.btn.msg{background:#1877f2;color:#fff}
.btn.msg.outline{background:#fff;color:#1877f2;border-color:#1877f2}
.btn.map{background:var(--brand-2);color:#fff}
.btn:hover{transform:translateY(-1px);filter:brightness(1.03)}
.content{flex:1}
.card{max-width:1100px;margin:28px auto;padding:22px;border-radius:18px;background:#fff;box-shadow:0 6px 28px rgba(0,0,0,.06)}
.card h2{margin:0 0 16px;color:var(--brand)}
.grid{display:grid;grid-template-columns:1.2fr 1fr;gap:22px}
.grid h3{margin:.2rem 0 10px;color:#584130}
.info{margin:0;padding:0 0 8px 18px;line-height:1.8}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pill{display:inline-flex;padding:8px 12px;border-radius:999px;background:#f1e6dc;color:#634b39;text-decoration:none;font-weight:700;border:1px solid #ead6c7}
.mapbox{border-radius:12px;height:220px;background:repeating-linear-gradient(45deg,#f3ebe4,#f3ebe4 10px,#efe5dc 10px,#efe5dc 20px);display:flex;align-items:center;justify-content:center;color:#715f52}
.foot{padding:24px 16px;text-align:center;color:#796a5d}
@media (max-width:840px){
  .grid{grid-template-columns:1fr}
}