:root{
  --o:#F26A0F;--o-d:#C24E00;--o-l:#FFF1E6;--o-m:#FFD9BD;
  --ink:#231B16;--mut:#6B5E55;--bg:#FFFFFF;--line:#F0E3D8;
  --r:16px;--sh:0 10px 30px rgba(194,78,0,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Prompt','Noto Sans Thai',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.75;font-size:16px}
img{max-width:100%;display:block}
a{color:var(--o-d);text-decoration:none}
a:hover{color:var(--o)}
.wrap{width:min(1160px,92%);margin-inline:auto}
h1,h2,h3{line-height:1.3;font-weight:600}
h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:.6rem}
h3{font-size:1.15rem;margin-bottom:.4rem}
p{color:var(--mut)}
section{padding:72px 0}
.alt{background:var(--o-l)}
.eyebrow{display:inline-block;color:var(--o-d);font-weight:600;font-size:.9rem;letter-spacing:.04em;margin-bottom:.5rem}
.head{max-width:680px;margin-bottom:40px}
.head.center{margin-inline:auto;text-align:center}

/* header */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;font-size:1.2rem}
.logo i{font-style:normal;background:var(--o);color:#fff;border-radius:10px;padding:2px 10px;letter-spacing:.02em}
.logo:hover{color:var(--ink)}
nav.main ul{display:flex;gap:6px;list-style:none}
nav.main a{display:block;padding:8px 16px;border-radius:999px;color:var(--ink);font-weight:500}
nav.main a:hover{background:var(--o-l);color:var(--o-d)}
nav.main a.on{background:var(--o);color:#fff}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--ink);margin:6px 10px;transition:.25s}

/* hero */
.hero{position:relative;color:#fff;padding:120px 0 110px;background:linear-gradient(135deg,#C24E00,#F26A0F)}
.hero::before{content:"";position:absolute;inset:0;background:var(--hero) center/cover no-repeat;opacity:.55}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(35,15,0,.82) 10%,rgba(194,78,0,.45) 100%)}
.hero .wrap{position:relative;z-index:2;max-width:1160px}
.hero h1{font-size:clamp(2rem,5vw,3.4rem);max-width:760px;margin-bottom:1rem}
.hero p{color:#FFE9D6;font-size:1.1rem;max-width:620px;margin-bottom:2rem}
.hero.small{padding:80px 0 70px}
.hero.small h1{font-size:clamp(1.8rem,4vw,2.6rem)}
.btn{display:inline-block;padding:13px 28px;border-radius:999px;font-weight:600;border:2px solid var(--o);background:var(--o);color:#fff;cursor:pointer;font-family:inherit;font-size:1rem;transition:.2s}
.btn:hover{background:var(--o-d);border-color:var(--o-d);color:#fff;transform:translateY(-2px)}
.btn.ghost{background:transparent;border-color:#fff;color:#fff;margin-left:10px}
.btn.ghost:hover{background:#fff;color:var(--o-d)}

/* grids */
.grid{display:grid;gap:24px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);transition:.25s}
.card:hover{transform:translateY(-4px)}
.card .ph{aspect-ratio:16/10;background:linear-gradient(135deg,var(--o-m),var(--o))}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .body{padding:22px}
.feat{padding:26px;background:#fff;border-radius:var(--r);border:1px solid var(--line)}
.ico{width:48px;height:48px;border-radius:12px;background:var(--o-l);color:var(--o);display:grid;place-items:center;font-size:1.4rem;margin-bottom:14px}
.alt .feat{border-color:var(--o-m)}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split .pic{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);aspect-ratio:4/3;background:linear-gradient(135deg,var(--o-m),var(--o))}
.split .pic img{width:100%;height:100%;object-fit:cover}
.ticks{list-style:none;margin-top:14px}
.ticks li{padding-left:30px;position:relative;margin-bottom:8px;color:var(--mut)}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:#fff;background:var(--o);width:20px;height:20px;border-radius:50%;font-size:.75rem;display:grid;place-items:center;top:5px}

/* steps */
.step{position:relative;padding:26px;background:#fff;border-radius:var(--r);border:1px solid var(--o-m)}
.step b{display:block;font-size:2.2rem;color:var(--o);line-height:1;margin-bottom:10px}

/* cta */
.cta{background:linear-gradient(120deg,var(--o-d),var(--o));color:#fff;text-align:center;padding:64px 0}
.cta p{color:#FFE9D6;margin:0 auto 1.6rem;max-width:560px}
.cta .btn{background:#fff;color:var(--o-d);border-color:#fff}
.cta .btn:hover{background:var(--o-l)}

/* contact */
.cinfo{display:flex;gap:16px;align-items:flex-start;padding:20px;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.cinfo .ico{margin:0;flex:none}
.cinfo h3{margin:0 0 2px;font-size:1rem}
.cinfo p,.cinfo a{font-size:.98rem}
form.f{display:grid;gap:14px;background:#fff;padding:28px;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh)}
form.f label{font-weight:500;font-size:.95rem}
form.f input,form.f textarea{width:100%;padding:12px 14px;border:1px solid #E4D3C5;border-radius:10px;font:inherit;margin-top:4px}
form.f input:focus,form.f textarea:focus{outline:2px solid var(--o);border-color:var(--o)}
.map{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);margin-top:40px}
.map iframe{width:100%;height:380px;border:0;display:block}

/* privacy */
.doc{max-width:860px}
.doc h2{font-size:1.35rem;margin:2rem 0 .5rem;color:var(--o-d)}
.doc p,.doc li{margin-bottom:.6rem}
.doc ul{padding-left:1.4rem;color:var(--mut)}

/* footer */
footer.site{background:#2A1D14;color:#E9D9CB;padding:56px 0 0}
footer.site h4{color:#fff;margin-bottom:12px;font-weight:600}
footer.site p,footer.site a{color:#E9D9CB;font-size:.95rem}
footer.site a:hover{color:var(--o-m)}
footer.site ul{list-style:none}
footer.site li{margin-bottom:6px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1.4fr;gap:40px;padding-bottom:40px}
.copy{border-top:1px solid #4a372a;padding:18px 0;text-align:center;font-size:.9rem;color:#BFA996}

@media(max-width:900px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .split,.fgrid{grid-template-columns:1fr}
  .split{gap:28px}
}
@media(max-width:680px){
  section{padding:52px 0}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .burger{display:block}
  nav.main{position:absolute;left:0;right:0;top:70px;background:#fff;border-bottom:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .3s}
  nav.main.open{max-height:320px}
  nav.main ul{flex-direction:column;padding:12px 4%}
  .hero{padding:80px 0 70px}
  .btn.ghost{margin:10px 0 0}
}