/* ============================================================
   ช่างรับเหมาทาสีใกล้ฉัน · Premium Yellow Theme
   ============================================================ */
:root{
  --page-bg:#FFFDF5; --panel-bg:#FBF3DC; --ink:#1C1917; --muted:#78716C;
  --line:#EDE4CF; --gold:#EAB308; --gold-deep:#A16207; --amber:#F59E0B;
  --amber-deep:#B45309; --amber-light:#FCD34D;
}
*{ -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
body{
  background:var(--page-bg);
  font-family:'Poppins','Noto Sans Thai',sans-serif;
  color:var(--ink);
  position:relative;
  overflow-x:hidden;
}
/* decorative premium glow */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60rem 40rem at 85% -8%, rgba(245,158,11,.16), transparent 60%),
    radial-gradient(50rem 38rem at -10% 12%, rgba(234,179,8,.12), transparent 55%);
}

/* signature gradient */
.gx{ background:linear-gradient(135deg,#EAB308 0%,#F59E0B 50%,#D97706 100%); }
.gx-text{
  background:linear-gradient(135deg,#B45309,#F59E0B);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.glass{
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.6);
}
.text-balance{ text-wrap:balance; }
.sq{ aspect-ratio:1/1; object-fit:cover; }

/* shadows */
.shadow-glow{ box-shadow:0 10px 40px -10px rgba(245,158,11,0.45); }
.shadow-soft{ box-shadow:0 4px 30px rgba(28,25,23,0.08); }
.shadow-card{ box-shadow:0 8px 40px rgba(28,25,23,0.10); }

/* details / FAQ */
details>summary{ list-style:none; cursor:pointer; }
details>summary::-webkit-details-marker{ display:none; }

/* material symbols */
.ms{
  font-family:'Material Symbols Outlined'; font-weight:normal; font-style:normal;
  line-height:1; -webkit-font-feature-settings:'liga';
}

/* premium gold hairline accent under section eyebrows */
.eyebrow{ letter-spacing:.12em; }

/* hover lift for area chips */
.chip{ transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
.chip:hover{ transform:translateY(-2px); }

/* page-load reveal */
@keyframes rise{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none;} }
.reveal{ animation:rise .7s cubic-bezier(.22,.61,.36,1) both; }
.reveal.d1{ animation-delay:.08s; } .reveal.d2{ animation-delay:.16s; }
.reveal.d3{ animation-delay:.24s; } .reveal.d4{ animation-delay:.32s; }

img{ background:#FBEFC8; }
a{ text-decoration:none; }