/* EK-SAMRAN — ระบบดีไซน์ (โทนม่วง-ทองตามโลโก้) */

:root{
  --ink:#1A1220; --ink-2:#574A63; --ink-3:#8A7E93;
  --bg:#FFFFFF; --bg-warm:#FAF7FB; --bg-deep:#241631;
  --line:#E9E3EE; --line-2:#D8CFE0;

  --brand:#8E2FC4; --brand-deep:#6B1E93; --brand-soft:#F5EBFB;
  --gold:#D9A441; --gold-deep:#B8862F; --gold-soft:#FBF4E4;

  --r-sm:6px; --r:10px; --r-lg:16px;
  --shadow:0 1px 2px rgba(26,18,32,.06), 0 4px 14px rgba(26,18,32,.05);
  --shadow-up:0 2px 6px rgba(26,18,32,.07), 0 12px 28px rgba(26,18,32,.10);
  --wrap:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Anuphan',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.65; font-weight:400;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand-deep); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.4; font-weight:700; margin:0 0 .5em; letter-spacing:-.01em}
h1{font-size:clamp(30px,6vw,56px)}
h2{font-size:clamp(26px,4.2vw,40px)}
h3{font-size:clamp(19px,2.4vw,24px)}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--brand); outline-offset:2px; border-radius:4px}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px}
.section{padding-block:clamp(52px,8vw,104px)}
.section--warm{background:var(--bg-warm)}
.section--deep{background:var(--bg-deep); color:#F2ECF6}
.section--deep h2{color:#fff}
.section--deep p{color:#CFC3D9}

.eyebrow{
  font-size:14px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand); margin:0 0 12px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--gold); flex:none}
.section--deep .eyebrow{color:var(--gold)}
.lead{font-size:clamp(17px,2vw,20px); color:var(--ink-2); max-width:62ch}
.head{max-width:66ch; margin-bottom:clamp(28px,4vw,48px)}

/* ── ปุ่ม ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:var(--r); font-weight:600; font-size:16px;
  border:1.5px solid transparent; cursor:pointer; text-decoration:none!important;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s;
  min-height:50px; line-height:1.45;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--brand); color:#fff; box-shadow:0 4px 14px rgba(142,47,196,.28)}
.btn--primary:hover{background:var(--brand-deep); box-shadow:0 8px 22px rgba(142,47,196,.34)}
.btn--line{background:#06C755; color:#fff; box-shadow:0 4px 14px rgba(6,199,85,.28)}
.btn--line:hover{background:#05a648}
.btn--ghost{border-color:var(--line-2); color:var(--ink); background:#fff}
.btn--ghost:hover{border-color:var(--brand); color:var(--brand-deep)}
.btn--onDark{background:#fff; color:var(--ink)}
.btn--gold{background:var(--gold); color:#3A2A08}
.btn--gold:hover{background:var(--gold-deep); color:#fff}
.btn-row{display:flex; flex-wrap:wrap; gap:12px}

.icon{width:20px; height:20px; stroke:currentColor; stroke-width:1.75; fill:none;
  stroke-linecap:round; stroke-linejoin:round; flex:none}
.icon--lg{width:28px; height:28px}

/* ── หัวเว็บ ── */
.hdr{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.hdr__in{display:flex; align-items:center; gap:16px; min-height:70px}
.hdr__logo{display:flex; align-items:center; gap:11px; font-weight:700; color:var(--ink);
  text-decoration:none!important; margin-right:auto}
.hdr__logo img{width:42px; height:42px; border-radius:8px}
.hdr__logo b{display:block; font-size:16.5px; line-height:1.4}
.hdr__logo span{display:block; font-size:14px; letter-spacing:.14em; color:var(--brand);
  font-weight:600; text-transform:uppercase}
.nav{display:flex; gap:4px}
.nav a{padding:9px 14px; border-radius:var(--r-sm); color:var(--ink-2); font-weight:500;
  font-size:16px; text-decoration:none!important; transition:.18s}
.nav a:hover{background:var(--brand-soft); color:var(--brand-deep)}
.nav a[aria-current="page"]{color:var(--brand-deep); font-weight:600; background:var(--brand-soft)}
.hdr__cta{display:none}
.burger{display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  border:1px solid var(--line-2); background:#fff; border-radius:var(--r-sm); cursor:pointer; color:var(--ink)}
@media (max-width:899px){
  .nav{position:fixed; inset:70px 0 auto; background:#fff; flex-direction:column; gap:0;
    padding:10px 20px 22px; border-bottom:1px solid var(--line); display:none; box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .nav a{padding:14px 12px; border-bottom:1px solid var(--line); font-size:17px}
}
@media (min-width:900px){ .burger{display:none} .hdr__cta{display:inline-flex} }

/* ── แบนเนอร์ ── */
.hero{position:relative; background:var(--bg-deep); overflow:hidden}
.hero__track{position:relative; height:min(70vh,560px)}
@media (min-width:900px){ .hero__track{height:min(78vh,660px)} }
.hero__slide{position:absolute; inset:0; opacity:0; transition:opacity .9s var(--ease)}
.hero__slide.on{opacity:1}
.hero__slide img{width:100%; height:100%; object-fit:cover; object-position:center 58%}
.hero__scrim{position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(23,10,33,.90) 0%,rgba(23,10,33,.66) 46%,rgba(23,10,33,.30) 100%)}
.hero__body{position:absolute; inset:0; display:flex; align-items:center}
.hero__body .wrap{width:100%}
.hero__txt{max-width:660px; color:#fff}
.hero__txt h1{color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.3); margin-bottom:.35em}
.hero__txt p{color:#E4D9EC; font-size:clamp(16px,2.1vw,20px); margin-bottom:1.5em; max-width:52ch}
.hero__kicker{display:inline-flex; align-items:center; gap:9px; background:rgba(217,164,65,.16);
  border:1px solid rgba(217,164,65,.45); color:var(--gold); padding:7px 15px; border-radius:999px;
  font-size:14px; font-weight:600; letter-spacing:.04em; margin-bottom:18px; line-height:1.5}
.hero__dots{position:absolute; left:0; right:0; bottom:20px; display:flex; gap:9px;
  justify-content:center; z-index:3}
.hero__dots button{width:44px; height:5px; border-radius:99px; border:0; padding:0; cursor:pointer;
  background:rgba(255,255,255,.36); transition:.25s}
.hero__dots button[aria-selected="true"]{width:60px}

/* ── ระบบคอลัมน์ตามมาตรฐาน ── */
.grid{display:grid; gap:10px}
@media (min-width:768px){ .grid{gap:18px} }
@media (min-width:1024px){ .grid{gap:22px} }
/* การ์ดบริการ 2 / 2 / 3 / 3 */
.grid--cards{grid-template-columns:repeat(2,1fr)}
@media (min-width:768px){ .grid--cards{grid-template-columns:repeat(3,1fr)} }
/* ไอคอนจุดเด่น 2 / 3 / 4 / 4 */
.grid--feat{grid-template-columns:repeat(2,1fr)}
@media (min-width:480px){ .grid--feat{grid-template-columns:repeat(3,1fr)} }
@media (min-width:768px){ .grid--feat{grid-template-columns:repeat(4,1fr)} }
/* ผลงาน 2 / 2 / 3 / 3 */
.grid--proj{grid-template-columns:repeat(2,1fr)}
@media (min-width:768px){ .grid--proj{grid-template-columns:repeat(3,1fr)} }
.grid--2{grid-template-columns:1fr}
@media (min-width:860px){ .grid--2{grid-template-columns:1fr 1fr; gap:44px} }

/* ── การ์ด ── */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px; transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
  display:flex; flex-direction:column; height:100%}
@media (min-width:768px){ .card{padding:26px} }
a.card{color:inherit; text-decoration:none!important}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-up); border-color:var(--line-2)}
.card__ico{width:46px; height:46px; border-radius:11px; background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center; margin-bottom:14px}
.card h3{margin-bottom:.35em; font-size:clamp(17px,2vw,21px)}
.card p{color:var(--ink-2); font-size:15.5px; margin:0}
@media (min-width:768px){ .card p{font-size:16px} }
.card__tag{font-size:14px; font-weight:600; color:var(--brand); letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:8px}
.card__more{margin-top:auto; padding-top:14px; color:var(--brand); font-weight:600; font-size:15px;
  display:inline-flex; align-items:center; gap:6px}

/* ── ผลงาน: ใช้สัดส่วนจริงของไฟล์ ไม่ครอป ไม่มีกรอบรอบรูป ── */
.proj{display:flex; flex-direction:column; gap:10px; color:inherit; text-decoration:none!important}
.proj__img{border-radius:var(--r); overflow:hidden; background:var(--bg-warm)}
.proj__img img{width:100%; height:auto; transition:transform .45s var(--ease)}
.proj:hover .proj__img img{transform:scale(1.035)}
.proj h3{font-size:clamp(15.5px,1.9vw,19px); margin:0}
.proj__meta{font-size:14px; color:var(--ink-3); display:flex; flex-wrap:wrap; gap:4px 10px}
.proj__budget{color:var(--gold-deep); font-weight:600; font-size:14px}

/* ── แกลเลอรี: masonry ความสูงไม่เท่ากัน ไม่ครอป ── */
.gal{columns:2; column-gap:10px}
@media (min-width:480px){ .gal{columns:3; column-gap:12px} }
@media (min-width:1024px){ .gal{columns:4; column-gap:18px} }
.gal figure{margin:0 0 10px; break-inside:avoid}
@media (min-width:1024px){ .gal figure{margin-bottom:18px} }
.gal img{width:100%; height:auto; border-radius:var(--r)}

/* ── รายการมีเครื่องหมายถูก ── */
.ticks{list-style:none; padding:0; margin:0; display:grid; gap:11px}
.ticks li{display:flex; gap:11px; align-items:flex-start; font-size:16px; color:var(--ink-2)}
.ticks .icon{color:var(--gold-deep); margin-top:4px; width:19px; height:19px}

/* ── ตารางข้อมูลบริษัท ── */
.facts{display:grid; gap:0; border-top:1px solid var(--line)}
.facts div{display:grid; grid-template-columns:1fr; gap:2px; padding:14px 0; border-bottom:1px solid var(--line)}
@media (min-width:560px){ .facts div{grid-template-columns:190px 1fr; gap:16px; align-items:baseline} }
.facts dt{color:var(--ink-3); font-size:15px}
.facts dd{margin:0; font-weight:500}

/* ── ติดต่อ ── */
.contact-row{display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line)}
.contact-row .icon{color:var(--brand); margin-top:2px}
.contact-row b{display:block; font-size:14.5px; color:var(--ink-3); font-weight:500}
.contact-row span,.contact-row a{font-size:17px; font-weight:600; color:var(--ink)}
.map{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--bg-warm)}
.map iframe{display:block; width:100%; height:380px; border:0}

/* ── ท้ายเว็บ ── */
.ftr{background:var(--bg-deep); color:#CFC3D9; padding-block:52px 0; margin-top:0}
.ftr a{color:#E6DCEE}
.ftr__grid{display:grid; gap:32px; grid-template-columns:1fr}
@media (min-width:768px){ .ftr__grid{grid-template-columns:1.6fr 1fr 1fr} }
.ftr h4{color:#fff; font-size:16px; margin-bottom:14px}
.ftr ul{list-style:none; padding:0; margin:0; display:grid; gap:9px; font-size:15.5px}
.ftr__logo{display:flex; gap:12px; align-items:center; margin-bottom:14px}
.ftr__logo img{width:52px; height:52px; border-radius:9px}
.ftr__logo b{color:#fff; font-size:17px; display:block}
.ftr__logo span{font-size:14px; letter-spacing:.14em; color:var(--gold); text-transform:uppercase}
.ftr__bot{margin-top:40px; border-top:1px solid rgba(255,255,255,.12); padding-block:20px 22px;
  font-size:14px; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between}

/* ── ปุ่มลอยบนมือถือ: ไลน์ + โทร เท่านั้น ── */
.dock{position:fixed; left:0; right:0; bottom:0; z-index:60; display:grid; grid-template-columns:1fr 1fr;
  background:#fff; border-top:1px solid var(--line); box-shadow:0 -3px 14px rgba(26,18,32,.10)}
.dock a{display:flex; align-items:center; justify-content:center; gap:8px; height:58px;
  font-weight:600; font-size:16px; text-decoration:none!important; color:var(--ink)}
.dock a:first-child{background:#06C755; color:#fff}
.dock a:last-child{background:var(--brand); color:#fff}
@media (min-width:900px){ .dock{display:none} }
body{padding-bottom:58px}
@media (min-width:900px){ body{padding-bottom:0} }

/* ── ป้ายข้อมูลตัวอย่าง ── */
.ph-badge{display:inline-flex; align-items:center; gap:6px; background:var(--gold-soft); color:#7A5A15;
  border:1px solid #EBD6A4; border-radius:999px; padding:3px 10px; font-size:12.5px; font-weight:600}

/* ── อนิเมชัน: ขยับขึ้น 20px + จาง เล่นครั้งเดียว ── */
.rv{opacity:0; transform:translateY(20px); transition:opacity .55s var(--ease), transform .55s var(--ease)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important}
  .rv{opacity:1; transform:none}
  .hero__slide{transition:none}
}

.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:100; background:#fff; padding:12px 18px; border-radius:var(--r)}
.prose h3{margin-top:1.4em}
.prose ul{padding-left:1.25em; color:var(--ink-2)}
.prose li{margin-bottom:.4em}
.breadcrumb{font-size:14.5px; color:var(--ink-3); padding-top:22px}
.breadcrumb a{color:var(--ink-3)}

/* ── พื้นที่กดบนมือถือให้ใหญ่พอ (อย่างน้อย 44px) ── */
.ftr ul a{display:flex; align-items:center; min-height:44px}
.contact-row a{display:inline-flex; align-items:center; min-height:44px}
.hdr__logo{min-height:46px}
.breadcrumb a{display:inline-block; padding-block:10px}
.hero__dots button{height:44px; background:transparent; position:relative}
.hero__dots button::after{content:""; position:absolute; left:5px; right:5px; top:50%; height:5px;
  transform:translateY(-50%); border-radius:99px; background:rgba(255,255,255,.36); transition:.25s}
.hero__dots button[aria-selected="true"]::after{background:var(--gold)}