/* Chang Pile — homepage (static build, converted from ChangPile.dc.html) */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Sarabun','Sarabun',system-ui,sans-serif;color:#1C3450;background:#F6F1E8;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:'Kanit','Sarabun',sans-serif;margin:0;line-height:1.12;letter-spacing:-.01em}
p{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit}
::selection{background:#E87E2B;color:#fff}
@keyframes cpScan{0%{transform:translateY(0)}50%{transform:translateY(232px)}100%{transform:translateY(0)}}
@keyframes cpPulse{0%,100%{opacity:.35;r:4}50%{opacity:1}}
@keyframes cpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes cpDash{to{stroke-dashoffset:-40}}
@keyframes cpShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@keyframes cpWindBlow{0%{opacity:0;transform:translateX(-10px)}30%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translateX(14px)}}
@keyframes cpWave{0%,100%{stroke-dashoffset:0}50%{stroke-dashoffset:16}}
@keyframes cpSeismicScroll{from{transform:translateX(-340px)}to{transform:translateX(0)}}
@keyframes cpRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.cp-reveal{animation:cpRise .7s cubic-bezier(.2,.7,.3,1) both}
.cp-nav-link{position:relative}
.cp-nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:#E87E2B;transition:right .28s ease}
.cp-nav-link:hover::after{right:0}
.cp-svc{transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s}
.cp-svc:hover{transform:translateY(-6px);box-shadow:0 24px 50px -24px rgba(23,56,92,.4);border-color:#E6DCC8}
.cp-svc:hover .cp-svc-ico{background:#17385C;color:#fff}
.cp-svc:hover .cp-svc-arrow{transform:translateX(4px);color:#E87E2B}
.cp-proj{transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s}
.cp-proj:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(21,47,78,.55)}
.cp-proj:hover .cp-proj-img{transform:scale(1.06)}
.cp-btn-p{transition:transform .2s,box-shadow .25s,background .25s}
.cp-btn-p:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(232,126,43,.7)}
.cp-btn-g{transition:background .25s,border-color .25s,color .25s}
.cp-btn-g:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55)}
.cp-chip:hover{border-color:#E87E2B;color:#E87E2B}
.cp-client{transition:transform .3s,box-shadow .3s,border-color .3s;filter:grayscale(1);opacity:.72}
.cp-client:hover{transform:translateY(-4px);box-shadow:0 16px 30px -18px rgba(23,56,92,.4);filter:grayscale(0);opacity:1;border-color:#E6DCC8}
.cp-news:hover .cp-news-t{color:#E87E2B}
.cp-news:hover .cp-news-img{transform:scale(1.05)}
.cp-input:focus{outline:none;border-color:#17385C;box-shadow:0 0 0 4px rgba(23,56,92,.1)}
.cp-mlink:hover{color:#E87E2B}
.cp-aci-banner{transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s}
.cp-aci-banner:hover{transform:translateY(-4px);box-shadow:0 34px 66px -26px rgba(21,47,78,.7)}
.cp-aci-banner:hover .cp-aci-btn{transform:translateX(3px);box-shadow:0 12px 26px -10px rgba(0,0,0,.4)}
.cp-dropdown-item:hover{background:#F3ECDF}
.cp-top-btn{transition:opacity .3s,transform .3s,box-shadow .25s}
.cp-top-btn:hover{transform:translateY(-3px);box-shadow:0 18px 34px -12px rgba(232,126,43,.7)}
/* lang toggle buttons */
.cp-lang-btn{border:0;font:600 12px/1 'Sarabun',sans-serif;padding:5px 10px;border-radius:16px;cursor:pointer}
.cp-lang-btn.on{background:#E87E2B;color:#fff}
.cp-lang-btn.off{background:transparent;color:#E6DCC8}
@media(max-width:1220px){.cp-hero-grid{grid-template-columns:1fr!important}.cp-hero-art{display:none!important}.cp-2col{grid-template-columns:1fr!important}.cp-desktop-nav{display:none!important}.cp-burger{display:inline-flex!important}.cp-header-cta{margin-left:auto!important}.cp-h1{font-size:40px!important}.cp-contact-grid{grid-template-columns:1fr!important}}
@media(max-width:1024px){.cp-grid4{grid-template-columns:repeat(2,1fr)!important}.cp-grid6{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:820px){.cp-grid3{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:640px){.cp-sec{padding:64px 0!important}.cp-h1{font-size:33px!important}.cp-h2{font-size:28px!important}.cp-topbar-hide{display:none!important}.cp-header-cta{display:none!important}.cp-burger{margin-left:auto!important}}
@media(max-width:600px){.cp-grid3{grid-template-columns:1fr!important}.cp-grid4{grid-template-columns:repeat(2,1fr)!important}.cp-grid6{grid-template-columns:repeat(2,1fr)!important}.cp-2col{gap:34px!important}}
@media(max-width:400px){.cp-grid4{grid-template-columns:1fr!important}}

/* ---- custom select (ประเภทงาน) ---- */
.cp-sel{position:relative;font-family:'Sarabun',sans-serif}
.cp-sel-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
.cp-sel-trigger{width:100%;display:flex;align-items:center;gap:12px;border:1px solid #E2D8C8;border-radius:11px;padding:12px 14px;font-size:15px;font-family:inherit;background:#fff;color:#1C3450;cursor:pointer;text-align:left;transition:border-color .2s,box-shadow .2s}
.cp-sel-trigger:hover{border-color:#D2C4A8}
.cp-sel.open .cp-sel-trigger,.cp-sel-trigger:focus-visible{outline:none;border-color:#E87E2B;box-shadow:0 0 0 3px rgba(232,126,43,.16)}
.cp-sel-trigger>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-sel-chev{flex:none;transition:transform .25s ease;color:#B08A5E}
.cp-sel.open .cp-sel-chev{transform:rotate(180deg)}
.cp-sel-panel{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;background:#fff;border:1px solid #EADFCE;border-radius:14px;padding:6px;box-shadow:0 22px 46px -18px rgba(21,47,78,.42),0 4px 12px rgba(21,47,78,.08);max-height:326px;overflow:auto;opacity:0;transform:translateY(-6px) scale(.985);transform-origin:top center;pointer-events:none;transition:opacity .16s ease,transform .16s ease}
.cp-sel.open .cp-sel-panel{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.cp-sel-opt{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:9px;font-size:14.5px;color:#33475C;cursor:pointer;transition:background .13s,color .13s;line-height:1.35}
.cp-sel-opt:hover{background:#FBF3E9;color:#1C3450}
.cp-sel-opt .cp-sel-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#DCCBB0;transition:.13s}
.cp-sel-opt:hover .cp-sel-dot{background:#E8A05A}
.cp-sel-opt.sel{background:#FDEFE0;color:#B95F14;font-weight:600}
.cp-sel-opt.sel .cp-sel-dot{background:#E87E2B;box-shadow:0 0 0 3px rgba(232,126,43,.18)}
.cp-sel-opt .cp-sel-check{flex:none;margin-left:auto;opacity:0;color:#E87E2B;transition:opacity .13s}
.cp-sel-opt.sel .cp-sel-check{opacity:1}
.cp-sel-panel::-webkit-scrollbar{width:8px}
.cp-sel-panel::-webkit-scrollbar-thumb{background:#E4D8C2;border-radius:8px;border:2px solid #fff}