/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --cream:        #D3CFC7;   /* page background */
  --cream-warm:   #CFC7B3;   /* alt section background */
  --paper:        #EFEDE7;   /* card / light surface */
  --ink:          #0D1416;   /* primary text / dark */
  --slate:        #475154;   /* secondary text */
  --beige:        #C6B9A3;   /* soft accent / borders */
  --sand:         #A39076;   /* muted gold */
  --bronze:       #916A54;   /* primary accent / CTA */

  --radius:       22px;
  --radius-sm:    14px;
  --maxw:         1200px;

  --shadow-soft:  0 6px 28px rgba(13,20,22,.07);
  --shadow-lg:    0 20px 60px rgba(13,20,22,.16);
  --line:         1px solid rgba(13,20,22,.10);

  --ease:         cubic-bezier(.22,1,.36,1);
}

/* ============================================================
   BASELINE / RESET  (HR-1: no horizontal scroll)
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
/* กันเลื่อนซ้าย-ขวา: ต้องใส่ทั้ง html และ body (ใส่แค่ html ไม่ clip จริงบน iOS Safari)
   clip ดีกว่า hidden เพราะไม่สร้าง scroll container จึงไม่ทำให้ sticky header เพี้ยน
   บรรทัดแรกเป็น fallback สำหรับ Safari < 16 ที่ยังไม่รู้จักค่า clip */
html,body{ overflow-x:hidden; }
html,body{ overflow-x:clip; }
body{ max-width:100%; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Noto Sans Thai","Prompt",sans-serif;
  font-weight:400;
  color:var(--ink);
  background:var(--cream);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video,iframe{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p{ margin:0; }
h1,h2,h3,h4{ font-family:"Prompt",sans-serif; font-weight:600; line-height:1.2; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

/* ---- Thai text fitting & line-breaking ----
   ภาษาไทยไม่มีช่องว่างระหว่างคำ ข้อความยาวจึงกลายเป็น "คำเดียว" ที่ตัดบรรทัดไม่ได้
   ห้ามใช้ word-break:keep-all กับภาษาไทย เพราะไปปิดระบบตัดคำไทยในตัวของ Safari/iOS
   ทำให้ min-content ของกล่องกว้างเกินจอ แล้วดันหน้าเว็บจนเลื่อนซ้าย-ขวาได้ */
p, li, h1, h2, h3, h4, .lbl, .vehicle-specs, .meta b{
  word-break:auto-phrase;            /* ตัดตามคำไทย (Chrome 119+/Edge) */
  overflow-wrap:anywhere;            /* ตาข่ายรองสุดท้าย: ลด min-content ได้จริง (break-word ลดไม่ได้) */
}
/* headings: เกลี่ยบรรทัดให้สมดุล | paragraphs: ไม่ให้เหลือคำโดดท้ายบรรทัด */
h1, h2, h3{ text-wrap:balance; }
p{ text-wrap:pretty; }

/* ลูกของ grid/flex มีค่าเริ่มต้น min-width:auto = หดต่ำกว่า min-content ไม่ได้
   ข้อความไทยก้อนยาวจึงดันคอลัมน์ให้กว้างเกินจอ — ปลดล็อกให้หดได้ */
.hero-grid > *, .why-grid > *, .why-features > *, .card-grid > *,
.portfolio-grid > *, .contact-grid > *, .contact-info > *,
.stat-strip > *, .vehicle-specs > *, .feature-wide > *{ min-width:0; }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
.section{ padding-block:88px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:"Prompt",sans-serif; font-weight:600;
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--bronze);
}
.eyebrow::before,
.eyebrow::after{ content:""; width:34px; height:1.5px; background:var(--bronze); display:inline-block; }
.section-head{ max-width:640px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{
  font-size:clamp(1.8rem,4.4vw,2.9rem);
  margin-top:18px; letter-spacing:-.01em; text-wrap:balance;
}
.section-head p{
  margin-top:16px; color:var(--slate); font-size:1.02rem;
  max-width:60ch; text-wrap:pretty;
}
.section-head.center p{ margin-inline:auto; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 28px; border-radius:999px;
  font-family:"Prompt",sans-serif; font-weight:500; font-size:.96rem;
  border:1.5px solid transparent; white-space:nowrap;
  transition:transform .25s var(--ease), background .25s var(--ease),
             box-shadow .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn svg{ width:18px; height:18px; flex-shrink:0; }
.btn-primary{ background:var(--bronze); color:#fff; box-shadow:var(--shadow-soft); }
.btn-primary:hover{ background:var(--ink); transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:var(--bronze); transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.btn-outline{ background:transparent; color:var(--ink); border-color:rgba(13,20,22,.22); }
.btn-outline:hover{ border-color:var(--ink); transform:translateY(-3px); }
.btn-light{ background:#fff; color:var(--ink); }
.btn-light:hover{ background:var(--beige); transform:translateY(-3px); }
.btn-ghost-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-3px); }
.btn-sm{ padding:10px 20px; font-size:.86rem; }

/* ============================================================
   HEADER / NAVBAR
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(211,207,199,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:74px; }
.brand{ display:flex; align-items:center; gap:11px; font-family:"Prompt",sans-serif; }
.brand-logo{ height:46px; width:auto; display:block; }
.nav-menu{ display:flex; align-items:center; gap:34px; }
.nav-menu a{
  font-size:.96rem; color:var(--slate); font-weight:500;
  position:relative; padding-block:6px; transition:color .2s var(--ease);
}
.nav-menu a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--bronze); transition:width .3s var(--ease);
}
.nav-menu a:hover{ color:var(--ink); }
.nav-menu a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:12px; }
.nav-toggle{
  display:none; width:46px; height:46px; border-radius:12px;
  border:var(--line); background:var(--paper); color:var(--ink);
  align-items:center; justify-content:center;
}
.nav-toggle svg{ width:24px; height:24px; }
.nav-toggle svg line{ transform-box:fill-box; transform-origin:center; transition:transform .28s var(--ease), opacity .2s var(--ease); }
.nav-toggle[aria-expanded="true"] svg line:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] svg line:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] svg line:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* ฉากหลังทับเนื้อหาตอนเปิดเมนูมือถือ */
.nav-backdrop{
  position:fixed; inset:0; z-index:48;
  background:rgba(28,26,23,.42); opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease);
}
.nav-backdrop.open{ opacity:1; pointer-events:auto; }
@media (min-width:769px){ .nav-backdrop{ display:none; } }

/* ไอคอนหน้าเมนู + ปุ่มโทร/ไลน์ = โชว์เฉพาะแผงเมนูมือถือ */
.nav-ico{ display:none; }
.nav-actions{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding-top:64px; padding-bottom:96px; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; }
.hero-copy .eyebrow{ margin-bottom:22px; }
.hero h1{
  font-size:clamp(2.1rem,5.4vw,3.7rem);
  letter-spacing:-.015em; text-wrap:balance;
}
.hero h1 em{ font-style:normal; color:var(--bronze); }
.hero-lead{
  margin-top:24px; color:var(--slate); font-size:1.08rem;
  max-width:46ch; text-wrap:pretty;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero-trust{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:34px;
  color:var(--slate); font-size:.9rem;
}
.hero-trust span{ display:inline-flex; align-items:center; gap:8px; }
.hero-trust svg{ width:18px; height:18px; color:var(--bronze); flex-shrink:0; }

/* hero visual */
.hero-visual{ position:relative; }
.hero-photo{
  position:relative; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-lg); aspect-ratio:4/5;
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; }
.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(13,20,22,0) 45%,rgba(13,20,22,.45) 100%);
}

/* floating stat cards */
.stat-card{
  position:absolute; z-index:2;
  background:rgba(239,237,231,.92); backdrop-filter:blur(8px);
  border:var(--line); border-radius:var(--radius-sm);
  padding:16px 20px; box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column; gap:2px;
}
.stat-card .num{ font-family:"Prompt",sans-serif; font-weight:600; font-size:1.5rem; color:var(--ink); line-height:1; }
.stat-card .lbl{ font-size:.78rem; color:var(--slate); }
.stat-1{ top:30px; left:-28px; }
.stat-2{ bottom:90px; right:-26px; }
.stat-3{
  bottom:24px; left:50%; transform:translateX(-50%);
  flex-direction:row; align-items:center; gap:10px; white-space:nowrap;
  max-width:calc(100% - 16px);
}
.stat-3 .dot{ width:9px; height:9px; border-radius:50%; background:#3a9d5d; box-shadow:0 0 0 4px rgba(58,157,93,.18); }
.stat-3 .lbl{ font-family:"Prompt",sans-serif; font-weight:500; color:var(--ink); font-size:.86rem; }

/* ============================================================
   SERVICES
   ============================================================ */
.section-services{ background:var(--cream-warm); }
.container-wide{ max-width:1800px; }
.card-grid{ display:grid; gap:24px; margin-top:54px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
/* การ์ดบริการ: รูปด้านบน + ไอคอน badge ซ้อนมุม + เนื้อหาด้านล่าง */
.service-card{
  background:var(--paper); border:var(--line); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.service-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.service-photo{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.service-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.service-card:hover .service-photo img{ transform:scale(1.06); }
.service-icon{
  position:absolute; left:18px; top:18px; z-index:2;
  width:52px; height:52px; border-radius:13px;
  background:rgba(239,237,231,.9); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:var(--bronze); border:1px solid rgba(255,255,255,.5);
  display:grid; place-items:center; box-shadow:var(--shadow-soft);
}
.service-icon svg{ width:26px; height:26px; }
.service-body{ padding:28px 28px 30px; display:flex; flex-direction:column; flex:1; }
.service-card h3{ font-size:1.2rem; letter-spacing:-.01em; }
.service-card p{ margin-top:10px; color:var(--slate); font-size:.96rem; text-wrap:pretty; flex:1; }
.service-card .more{
  align-self:flex-start; display:inline-flex; align-items:center; gap:7px; margin-top:18px;
  font-family:"Prompt",sans-serif; font-weight:500; font-size:.88rem; color:var(--bronze);
}
.service-card .more svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.service-card:hover .more svg{ transform:translateX(4px); }

/* สไลด์การ์ดบริการแบบป้ายโฆษณา (เลื่อนต่อเนื่องจากขวา → ซ้าย) */
.marquee{
  position:relative; width:100%; overflow:hidden; margin-top:48px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.marquee-track{
  display:flex; width:max-content; align-items:stretch;
  animation:marquee-scroll 45s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee .service-card{ flex:0 0 auto; width:clamp(264px,78vw,330px); margin-right:24px; }
/* ในสไลด์ การ์ดทุกใบต้องแสดงทันที (ไม่รอ scroll-reveal เพราะบางใบอยู่นอกจอ) */
.marquee [data-reveal]{ opacity:1 !important; transform:none !important; }
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){
  .marquee{ -webkit-mask-image:none; mask-image:none; }
  .marquee-track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; gap:24px; }
  .marquee .service-card{ margin-right:0; }
}

/* ============================================================
   VEHICLE TYPES
   ============================================================ */
.vehicle-card{
  background:var(--paper); border:var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.vehicle-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.vehicle-photo{ aspect-ratio:4/3; overflow:hidden; position:relative; }
.vehicle-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.vehicle-card:hover .vehicle-photo img{ transform:scale(1.06); }
.vehicle-tag{
  position:absolute; top:14px; left:14px; z-index:2;
  background:rgba(13,20,22,.82); color:#fff; backdrop-filter:blur(4px);
  font-family:"Prompt",sans-serif; font-weight:500; font-size:.76rem;
  padding:6px 14px; border-radius:999px;
}
.vehicle-body{ padding:24px 22px 26px; display:flex; flex-direction:column; flex:1; }
.vehicle-body h3{ font-size:clamp(1rem,1.02rem + .2vw,1.15rem); letter-spacing:-.01em; }
.vehicle-body p{ margin-top:9px; color:var(--slate); font-size:.92rem; flex:1; text-wrap:pretty; }
.vehicle-specs{ display:flex; gap:18px; margin-top:16px; padding-top:16px; border-top:var(--line); }
.vehicle-specs div{ font-size:.82rem; color:var(--slate); }
.vehicle-specs b{ display:block; font-family:"Prompt",sans-serif; color:var(--ink); font-weight:600; font-size:1rem; }
.vehicle-price{ margin-top:14px; font-size:.9rem; color:var(--slate); }
.vehicle-price b{ font-family:"Prompt",sans-serif; color:var(--bronze); font-weight:600; font-size:1.1rem; }
.vehicle-card .btn{ margin-top:20px; width:100%; }

/* ============================================================
   WHY CHOOSE US
   ============================================================ */
.section-why{
  background-color:var(--cream-warm);
  background-image:
    linear-gradient(rgba(207,199,179,.70), rgba(207,199,179,.64)),
    url(/images/why-bg.jpg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.why-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:56px; align-items:start; }

/* left text panel */
.why-side .why-title{
  font-size:clamp(1.8rem,4.2vw,2.7rem); margin-top:18px; letter-spacing:-.01em; text-wrap:balance;
}
.why-side .accent{ color:var(--bronze); }
.why-side .lead{
  margin-top:18px; color:var(--slate); font-size:1.04rem; max-width:46ch; text-wrap:pretty;
}
.stat-strip{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.stat-strip .stat{
  flex:1; min-width:120px;
  background:var(--paper); border:var(--line); border-radius:var(--radius-sm);
  padding:16px 18px;
}
.stat-strip .stat b{
  display:block; font-family:"Prompt",sans-serif; font-weight:600;
  font-size:1.3rem; color:var(--ink); line-height:1.1;
}
.stat-strip .stat span{ font-size:.84rem; color:var(--slate); }

/* right feature cards */
.why-features{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.feature{
  background:var(--paper); border:var(--line); border-radius:var(--radius-sm);
  padding:26px 24px; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.feature:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.feature .fi{
  width:50px; height:50px; border-radius:13px; margin-bottom:18px;
  background:var(--cream); color:var(--bronze); border:var(--line);
  display:grid; place-items:center;
}
.feature .fi svg{ width:25px; height:25px; }
.feature h4{ font-size:1.06rem; letter-spacing:-.01em; }
.feature p{ margin-top:8px; color:var(--slate); font-size:.93rem; text-wrap:pretty; }

.feature-wide{
  grid-column:1 / -1;
  display:flex; align-items:center; gap:24px;
  background:var(--ink); border:none;
}
.feature-wide .fi{
  margin-bottom:0; flex-shrink:0;
  background:rgba(255,255,255,.1); color:var(--beige); border-color:rgba(255,255,255,.16);
}
.feature-wide h4{ color:#fff; }
.feature-wide p{ margin-top:6px; color:rgba(255,255,255,.7); }
@media (max-width:640px){
  .feature-wide{ flex-direction:column; align-items:flex-start; gap:14px; }
}

/* ============================================================
   PORTFOLIO
   ============================================================ */
.portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:54px; }
.portfolio-item{
  margin:0; position:relative; border-radius:var(--radius-sm); overflow:hidden;
  aspect-ratio:1/1; box-shadow:var(--shadow-soft);
}
.portfolio-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.portfolio-item:hover img{ transform:scale(1.07); }
.portfolio-cap{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:22px; color:#fff; opacity:0; transition:opacity .35s var(--ease);
  background:linear-gradient(180deg,rgba(13,20,22,0) 40%,rgba(13,20,22,.78) 100%);
}
.portfolio-item:hover .portfolio-cap{ opacity:1; }
.portfolio-cap small{ font-family:"Prompt",sans-serif; font-weight:600; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--beige); }
.portfolio-cap span{ font-family:"Prompt",sans-serif; font-weight:500; font-size:1.05rem; margin-top:4px; }

/* ============================================================
   FAQ (accordion)
   ============================================================ */
.section-faq{ background:var(--cream-warm); }
.faq-list{ max-width:820px; margin:44px auto 0; display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background:var(--paper); border:var(--line); border-radius:var(--radius-sm);
  overflow:hidden; transition:box-shadow .2s var(--ease);
}
.faq-item[open]{ box-shadow:var(--shadow-soft); }
.faq-item summary{
  list-style:none; cursor:pointer; padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:"Prompt",sans-serif; font-weight:500; font-size:1.05rem; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:""; flex:none; width:11px; height:11px; margin-right:3px;
  border-right:2px solid var(--bronze); border-bottom:2px solid var(--bronze);
  transform:rotate(45deg); transition:transform .25s var(--ease);
}
.faq-item[open] summary::after{ transform:rotate(-135deg); }
.faq-item summary:hover{ color:var(--bronze); }
.faq-answer{ padding:0 24px 22px; }
.faq-answer p{ color:var(--slate); font-size:1rem; line-height:1.8; text-wrap:pretty; }

/* ============================================================
   CONTACT CTA
   ============================================================ */
.cta-section{ background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.cta-section::before{
  content:""; position:absolute; top:-120px; right:-100px; width:420px; height:420px;
  border-radius:50%; background:radial-gradient(circle,rgba(145,106,84,.45),transparent 68%);
}
.cta-section::after{
  content:""; position:absolute; bottom:-160px; left:-120px; width:460px; height:460px;
  border-radius:50%; background:radial-gradient(circle,rgba(163,144,118,.3),transparent 70%);
}
.cta-inner{ position:relative; z-index:2; text-align:center; max-width:760px; margin-inline:auto; }
.cta-inner .eyebrow{ color:var(--beige); }
.cta-inner .eyebrow::before{ background:var(--beige); }
.cta-inner h2{ font-size:clamp(1.9rem,5vw,3.1rem); margin-top:20px; text-wrap:balance; }
.cta-inner p{ margin-top:18px; color:rgba(255,255,255,.74); font-size:1.05rem; max-width:54ch; margin-inline:auto; text-wrap:pretty; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px; }
.cta-contacts{
  display:flex; flex-wrap:wrap; gap:14px 40px; justify-content:center;
  margin-top:42px; padding-top:34px; border-top:1px solid rgba(255,255,255,.14);
}
.cta-contacts a{ display:inline-flex; align-items:center; gap:12px; }
.cta-ico{
  width:46px; height:46px; border-radius:12px; flex-shrink:0;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  display:grid; place-items:center; color:var(--beige);
}
.cta-ico svg{ width:22px; height:22px; }
.cta-contacts .meta{ text-align:left; }
.cta-contacts .meta small{ display:block; font-size:.74rem; color:rgba(255,255,255,.55); letter-spacing:.1em; }
.cta-contacts .meta b{ font-family:"Prompt",sans-serif; font-weight:600; font-size:1.08rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--cream-warm); padding-top:10px; }
.footer-center{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:22px; padding-bottom:46px;
}
.footer-logo{ display:inline-block; line-height:0; }
.footer-logo img{ display:block; width:270px; max-width:74vw; height:auto; }
.footer-tagline{ color:var(--slate); font-size:1rem; line-height:1.85; max-width:56ch; text-wrap:pretty; }
.footer-social{ display:flex; gap:14px; justify-content:center; }
.footer-social a{
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ink); color:var(--paper);
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.footer-social a:hover{ background:var(--bronze); color:#fff; transform:translateY(-3px); }
.footer-social svg{ width:20px; height:20px; }
.footer-bottom{
  padding-block:24px; border-top:var(--line);
  text-align:center; color:var(--slate); font-size:.88rem;
}
.footer-bottom a{ color:var(--bronze); font-weight:500; text-decoration:underline; text-underline-offset:3px; }
.footer-bottom a:hover{ color:var(--ink); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .hero-grid{ grid-template-columns:1fr; gap:64px; }
  .hero-visual{ max-width:460px; margin-inline:auto; width:100%; }
  .stat-1{ left:-12px; }
  .stat-2{ right:-12px; }
  .why-grid{ grid-template-columns:1fr; gap:40px; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  .section{ padding-block:64px; }
  .nav-menu{
    position:fixed; inset:74px 0 auto 0; z-index:49;
    flex-direction:column; align-items:stretch; gap:4px;
    background:var(--cream); border-bottom:var(--line);
    box-shadow:var(--shadow-lg);
    padding:16px 18px 22px; transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease);
  }
  .nav-menu.open{ opacity:1; transform:none; pointer-events:auto; }
  /* แถวเมนูแต่ละอัน = ไอคอนชิป + ข้อความ */
  .nav-menu li a{
    display:flex; align-items:center; gap:14px;
    padding:11px 12px; border-radius:var(--radius-sm); font-size:1.04rem;
    color:var(--slate); transition:background .2s var(--ease), color .2s var(--ease);
  }
  .nav-menu a::after{ display:none; }
  .nav-menu li a:hover{ background:var(--paper); color:var(--ink); }
  .nav-ico{
    display:flex; align-items:center; justify-content:center; flex:none;
    width:40px; height:40px; border-radius:11px;
    background:var(--paper); color:var(--bronze);
    transition:background .2s var(--ease), color .2s var(--ease);
  }
  .nav-ico svg{ width:21px; height:21px; }
  .nav-txt{ font-weight:500; }
  /* สถานะหน้าปัจจุบัน */
  .nav-menu li a.active{ background:var(--paper); color:var(--ink); }
  .nav-menu li a.active .nav-ico{ background:var(--bronze); color:#fff; }
  .nav-menu li a.active .nav-txt{ font-weight:600; }
  /* ปุ่มโทร / ไลน์ */
  .nav-actions{
    display:flex; gap:12px; margin-top:12px; padding-top:16px;
    border-top:var(--line);
  }
  .nav-act{
    flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:13px 10px; border-radius:12px; font-weight:600; font-size:1rem;
    transition:transform .12s var(--ease), filter .2s var(--ease);
  }
  .nav-act:active{ transform:scale(.97); }
  .nav-act svg{ width:20px; height:20px; }
  .nav-act--call{ background:var(--bronze); color:#fff; }
  .nav-act--line{ background:#06C755; color:#fff; }
  .nav-cta .btn{ display:none; }
  .nav-toggle{ display:flex; }
  /* การ์ดสถิติ: ย้ายเข้ามาในกรอบรูป ไม่ให้ล้ำขอบจอจนเลื่อนซ้าย-ขวาได้ */
  .stat-1{ top:14px; left:8px; }
  .stat-2{ bottom:64px; right:8px; }
  /* stat-3: ออกจากการวางทับรูป มาอยู่ใต้รูปแทน และบังคับให้อยู่บรรทัดเดียว
     font-size แบบ clamp ย่อตามความกว้างจอ เพื่อให้ nowrap ไม่ดันกล่องเกินขอบ */
  .stat-3{
    position:static; transform:none;
    width:fit-content; max-width:100%;
    margin:14px auto 0;
    padding:12px 16px;
    white-space:nowrap;
    font-size:clamp(.72rem,3.4vw,.86rem);
  }
  .stat-3 .lbl{ font-size:inherit; }
  .grid-2{ grid-template-columns:1fr; }
  .why-features{ grid-template-columns:1fr 1fr; }
  .section-head h2{ text-align:center; }
  .section-head{ text-align:center; margin-inline:auto; }
  .section-head .eyebrow{ display:inline-flex; }
  .portfolio-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .portfolio-cap{ opacity:1; }
}
@media (max-width:520px){
  .container{ padding-inline:18px; }
  .brand-logo{ height:40px; }
  .grid-4{ grid-template-columns:1fr; }
  .why-features{ grid-template-columns:1fr; }
  .portfolio-grid{ grid-template-columns:1fr; gap:10px; }
  .hero-actions .btn{ flex:1; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1; transform:none; }
}

/* ============================================================
   INNER PAGES — active nav + page hero
   ============================================================ */
.nav-menu a.active{ color:var(--ink); }
.nav-menu a.active::after{ width:100%; }

.section-cta{ display:flex; justify-content:center; margin-top:44px; }

.page-hero{ padding-block:72px 8px; }
.breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px; margin-bottom:20px; font-size:.85rem; color:var(--slate);
}
.breadcrumb a{ color:var(--bronze); font-weight:500; }
.breadcrumb a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.breadcrumb .sep{ color:var(--sand); }
.breadcrumb [aria-current="page"]{ color:var(--ink); }
.page-hero .eyebrow{ margin-bottom:18px; }
.page-hero h1{ font-size:clamp(2rem,5vw,3.2rem); letter-spacing:-.015em; text-wrap:balance; }
.page-hero h1 em{ font-style:normal; color:var(--bronze); }
.page-hero p{ margin-top:16px; color:var(--slate); font-size:1.05rem; max-width:58ch; text-wrap:pretty; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:start; }
.contact-info{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.contact-card{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--paper); border:var(--line); border-radius:var(--radius-sm);
  padding:22px 24px;
}
.contact-card .ci{
  width:48px; height:48px; border-radius:13px; flex-shrink:0;
  background:var(--cream); color:var(--bronze); border:var(--line);
  display:grid; place-items:center;
}
.contact-card .ci svg{ width:23px; height:23px; }
.contact-card h3{ font-size:1.02rem; }
.contact-card p{ margin-top:4px; color:var(--slate); font-size:.95rem; }
.contact-card a{ color:var(--bronze); font-weight:500; }

.contact-map{ margin-top:32px; }
.contact-map .map-frame{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft);
}
.contact-map .map-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.contact-map .map-link{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; color:var(--bronze); font-weight:500; font-size:.92rem; }

@media (max-width:860px){
  .contact-grid{ grid-template-columns:1fr; gap:28px; }
  .contact-info{ grid-template-columns:1fr; }
}

/* ============================================================
   LEGAL (privacy policy) + ERROR PAGES
   ============================================================ */
.legal{ max-width:780px; }
.legal .updated{ color:var(--slate); font-size:.9rem; margin-bottom:8px; }
.legal h2{ font-size:1.28rem; margin-top:38px; }
.legal h2:first-of-type{ margin-top:0; }
.legal p{ margin-top:12px; color:var(--slate); }
.legal ul{ margin-top:12px; padding-left:22px; list-style:disc; color:var(--slate); display:grid; gap:8px; }
.legal a{ color:var(--bronze); font-weight:500; }

.error-page{ text-align:center; padding-block:120px; }
.error-code{
  font-family:"Prompt",sans-serif; font-weight:600; line-height:1;
  font-size:clamp(4.5rem,17vw,9.5rem); letter-spacing:-.03em; color:var(--bronze);
}
.error-page h1{ font-size:clamp(1.6rem,4.4vw,2.4rem); margin-top:6px; text-wrap:balance; }
.error-page p{ margin-top:14px; color:var(--slate); max-width:48ch; margin-inline:auto; text-wrap:pretty; }
.error-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:32px; }
@media (max-width:520px){ .error-page{ padding-block:84px; } }