/* ============================================================
   1. DESIGN TOKENS  — ตรงกับ Figma Variables 1:1
   ============================================================ */
:root{
  /* Color */
  --c-bg:#FFFFFF;
  --c-surface:#F7F8F9;
  --c-border:#E3E6E9;
  --c-text:#14181C;
  --c-text-muted:#5C6670;
  --c-accent:#2BAF8E;        /* Primary / Teal */
  --c-accent-soft:#E3F5F0;
  --c-accent-strong:#1F8F73;

  /* Dark section (Header / Hero) — ตัดกับเนื้อหาส่วนกลางสีอ่อน */
  --c-bg-dark:#12161C;
  --c-border-dark:rgba(255,255,255,.12);
  --c-text-inverse:#F5F7F8;
  --c-text-inverse-muted:#98A2AC;

  /* Spacing — 8pt grid */
  --s-1:8px;  --s-2:16px; --s-3:24px; --s-4:32px;
  --s-5:40px; --s-6:48px; --s-8:64px; --s-12:96px; --s-16:128px;

  /* Radius */
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-full:999px;

  /* Type scale */
  /* Fluid type — ขนาดยืดตามความกว้างจอ อ่านรู้เรื่องทั้งตอนย่อจอและบนมือถือ */
  --t-display:clamp(28px, 3.2vw, 52px);
  --t-h1:clamp(23px, 2.3vw, 38px);
  --t-h2:clamp(20px, 1.8vw, 30px);
  --t-h3:clamp(17px, 1.25vw, 21px);
  --t-body:clamp(15px, 1.0vw, 17px);
  --t-small:clamp(13.5px, .92vw, 15px);
  --t-caption:clamp(11px, .78vw, 13px);

  /* Motion */
  --dur:240ms; --ease:cubic-bezier(.22,.61,.36,1);
  /* ---- ปรับจังหวะ Slide ของ Header/Overlay ได้ที่นี่ที่เดียว ----
     dur   = ใช้เวลากี่มิลลิวินาทีในการเลื่อนจนสุด
     delay = รอกี่มิลลิวินาทีก่อน "เริ่ม" เลื่อน (0 = เริ่มทันที)          */
  --dur-slide:320ms;                  /* ขอบบนของช่วง 150–320ms — เกินนี้ผู้ใช้รู้สึกหน่วง (Audit #4) */
  --delay-hide:0ms;                   /* เริ่มเลื่อนซ่อนทันที ไม่หน่วง */
  --delay-show:0ms;                   /* เริ่มเลื่อนกลับมาโชว์ทันที ไม่หน่วง */
  --ease-slide:cubic-bezier(.22,.61,.36,1);

  /* Layout */
  --header-h:72px;
  --sidebar-w:248px;
  --container:1440px;
}

/* ============================================================
   2. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + var(--s-3))}
body{
  margin:0;background:var(--c-bg);color:var(--c-text);min-width:320px;
  font-family:"IBM Plex Sans Thai","Noto Sans Thai",system-ui,-apple-system,sans-serif;
  font-size:var(--t-body);line-height:1.7;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.3;margin:0;font-weight:600;letter-spacing:-.01em}
p{margin:0}
/* จัดกึ่งกลางเสมอทุก viewport รวมถึงจอกว้าง ≥1600px (เดิมเคยยึดขอบซ้ายที่ช่วงนี้ ยกเลิกแล้ว) */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--s-3)}
@media (min-width:1600px){
  :root{--sidebar-w:280px}
}
.eyebrow{font-size:var(--t-caption);letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-accent);font-weight:600}

/* ============================================================
   3. COMPONENT / BUTTON
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-1);
  height:48px;padding-inline:var(--s-3);border-radius:var(--r-md);
  font-size:var(--t-small);font-weight:600;border:1px solid transparent;
  cursor:pointer;transition:background var(--dur) var(--ease),
    color var(--dur) var(--ease),transform var(--dur) var(--ease);
  white-space:nowrap;
}
.btn--primary{background:var(--c-accent);color:#fff}
.btn--primary:hover{background:var(--c-accent-strong);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--c-text);border-color:var(--c-border)}
.btn--ghost:hover{background:var(--c-surface)}
.btn--sm{height:40px;padding-inline:var(--s-2)}

/* ============================================================
   4. COMPONENT / HEADER  (Smart Sticky)
   ============================================================ */
.header{
  position:fixed;inset:0 0 auto 0;height:var(--header-h);z-index:100;
  background:rgba(18,22,28,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--c-border-dark);
  transform:translateY(0);pointer-events:auto;
  transition:transform var(--dur-slide) var(--ease-slide) var(--delay-show),
             box-shadow var(--dur) var(--ease);
  will-change:transform;
}
/* Hide on scroll down — transform คือกลไกเดียวที่ใช้ซ่อน/แสดง ไม่มี opacity fallback */
.header[data-hidden="true"]{
  transform:translateY(-100%);pointer-events:none;
  transition-delay:var(--delay-hide);
}
.header[data-scrolled="true"]{box-shadow:0 1px 12px rgba(0,0,0,.24)}
/* max-width/margin/padding มาจาก .container ที่แปะคู่กันใน HTML — เลิก duplicate ค่าที่นี่
   เพื่อไม่ให้ header กับเนื้อหาเพี้ยนจากกันถ้าแก้ .container แล้วลืมแก้ที่นี่ */
.header__inner{height:100%;display:flex;align-items:center;gap:var(--s-4)}
.logo{font-size:var(--t-h3);font-weight:700;letter-spacing:-.02em;color:var(--c-text-inverse)}
.logo span{color:var(--c-accent)}
.nav{margin-left:auto;display:flex;align-items:center;gap:var(--s-1)}
.nav__link{
  position:relative;padding:var(--s-1) var(--s-2);border-radius:var(--r-sm);
  font-size:var(--t-small);font-weight:500;color:var(--c-text-inverse-muted);
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.nav__link:hover,.nav__link[aria-current="true"]{color:var(--c-text-inverse);background:rgba(255,255,255,.08)}

/* Dropdown : ผลงาน */
.nav__item{position:relative}
.nav__panel{
  position:absolute;top:calc(100% + var(--s-1));left:0;min-width:260px;
  background:var(--c-bg-dark);border:1px solid var(--c-border-dark);border-radius:var(--r-md);
  box-shadow:0 12px 32px rgba(0,0,0,.32);padding:var(--s-1);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
}
.nav__item:hover .nav__panel,
.nav__item:focus-within .nav__panel{opacity:1;visibility:visible;transform:translateY(0)}
.nav__panel a{display:block;padding:var(--s-1) var(--s-2);border-radius:var(--r-sm);
  font-size:var(--t-small);color:var(--c-text-inverse-muted)}
.nav__panel a:hover{background:rgba(255,255,255,.08);color:var(--c-accent)}

/* Mobile menu toggle */
.burger{display:none;width:40px;height:40px;border:1px solid var(--c-border-dark);
  background:none;border-radius:var(--r-sm);cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:2px;background:var(--c-text-inverse);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--c-text-inverse)}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* ============================================================
   5. HERO  — ตอบ 3 คำถามใน 10 วินาที
   ============================================================ */
.hero{padding-top:calc(var(--header-h) + var(--s-12));padding-bottom:var(--s-12);
  background:var(--c-bg-dark);color:var(--c-text-inverse)}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-8);align-items:center}
.hero h1{font-size:var(--t-display);margin-block:var(--s-2) var(--s-3);color:var(--c-text-inverse);
  text-wrap:balance}
.hero p{color:var(--c-text-inverse-muted);max-width:46ch;margin-bottom:var(--s-4)}
.hero__actions{display:flex;gap:var(--s-2);flex-wrap:wrap}
.hero .btn--ghost{color:var(--c-text-inverse);border-color:var(--c-border-dark)}
.hero .btn--ghost:hover{background:rgba(255,255,255,.08)}
.hero__visual{aspect-ratio:4/3;background:rgba(255,255,255,.04);border:1px solid var(--c-border-dark);
  border-radius:var(--r-lg);display:grid;place-items:center;color:var(--c-text-inverse-muted);
  font-size:var(--t-small)}
.stats{display:flex;gap:var(--s-6);margin-top:var(--s-6);padding-top:var(--s-4);
  border-top:1px solid var(--c-border-dark)}
.stat b{display:block;font-size:var(--t-h2);font-weight:700;letter-spacing:-.02em;color:var(--c-text-inverse)}
.stat span{font-size:var(--t-caption);color:var(--c-text-inverse-muted)}

/* ============================================================
   6. LAYOUT / SIDEBAR + CONTENT  (Scrollspy)
   ============================================================ */
/* เนื้อหาคอลัมน์เดียวเต็มความกว้าง container เท่า Hero — .sidebar เป็น position:fixed
   ลอยอิสระแล้ว ไม่ได้อยู่ใน grid flow นี้ จึงไม่ต้องเผื่อคอลัมน์ให้มันอีกต่อไป */
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-8);
  padding-block:var(--s-12)}
.sidebar{
  /* เกาะขอบจอจริง (viewport) ตายตัว — ไม่คำนวณจาก container เลย เพราะจอกว้างจะทำให้ลอยห่าง
     จากขอบจอจริงไปมาก (container กึ่งกลางแล้วมี margin เยอะ) ค่านี้คงที่ไม่ว่าซูมเข้า/ออกแค่ไหน
     เพราะ browser zoom ย่อ/ขยายทุกพิกเซลเป็นสัดส่วนเดียวกันอยู่แล้ว */
  position:fixed;top:50%;right:var(--s-4);
  width:var(--sidebar-w);
  transform:translateY(-50%);
  z-index:80;
}
/* .sidebar__panel : กลไกซ่อน/แสดงเพียงอย่างเดียวคือ transform ไม่มี opacity —
   ระยะ 100%-ของตัวเอง เพื่อให้พ้นกรอบจริง ๆ ไม่ใช่แค่ขยับนิดเดียวแล้วดูเหมือนไม่หาย
   (อยู่ฝั่งขวา จึงซ่อนโดยเลื่อนออกไปทางขวา = ค่าบวก) */
.sidebar__panel{
  transform:translateX(calc(100% + var(--s-6)));pointer-events:none;
  transition:transform var(--dur-slide) var(--ease-slide) var(--delay-show);
  will-change:transform;
}
/* โผล่เมื่อผู้ใช้เข้าสู่โซนเนื้อหา (ภาพรวมบริษัทเป็นต้นไป) — สไลด์เข้าจากขวาไปซ้าย */
.sidebar[data-visible="true"] .sidebar__panel{transform:translateX(0);pointer-events:auto}
.spy{list-style:none;margin:0;padding:0;border-right:2px solid var(--c-border)}
.spy a{
  display:block;padding:10px var(--s-2);margin-right:-2px;
  border-right:2px solid transparent;
  text-align:right;
  font-size:var(--t-small);font-weight:500;color:var(--c-text-muted);
  transform-origin:right center;
  /* ไม่ transition font-size / font-weight เพื่อไม่ให้เกิด reflow ตอน active */
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),
             transform var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.spy a:hover{color:var(--c-text)}
/* Active State : สว่างขึ้น + ใหญ่ขึ้นด้วย transform (ไม่กินพื้นที่เพิ่ม จึงไม่ทำให้แถวขยับ) */
.spy a[aria-current="true"]{
  color:var(--c-accent);border-right-color:var(--c-accent);
  transform:scale(1.06);
  text-shadow:0 0 .5px currentColor;   /* หนาขึ้นโดยความกว้างตัวอักษรไม่เปลี่ยน */
}

.section{scroll-margin-top:calc(var(--header-h) + var(--s-4));padding-bottom:var(--s-12)}
.section:last-child{padding-bottom:0}
.section__head{margin-bottom:var(--s-4)}
.section__head h2{font-size:var(--t-h1);margin-block:var(--s-1) var(--s-2)}
.section__head p{color:var(--c-text-muted);max-width:60ch}

/* ============================================================
   7. COMPONENT / CARD  (Hover = Progressive Disclosure)
   ============================================================ */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:var(--s-3)}
.card{
  border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;
  background:var(--c-bg);cursor:pointer;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.card:hover,.card:focus-within{transform:translateY(-4px);border-color:var(--c-accent);
  box-shadow:0 12px 28px rgba(20,24,28,.08)}
.card__media{aspect-ratio:16/10;background:var(--c-surface);display:grid;place-items:center;
  color:var(--c-text-muted);font-size:var(--t-caption);border-bottom:1px solid var(--c-border)}
.card__body{padding:var(--s-2)}
.card__body h3{font-size:var(--t-h3)}
.card__meta{font-size:var(--t-caption);color:var(--c-text-muted);margin-top:4px}
/* รายละเอียดที่เผยตอน hover — มี fallback สำหรับจอสัมผัส */
.card__reveal{
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height var(--dur) var(--ease),opacity var(--dur) var(--ease),
             margin-top var(--dur) var(--ease);
}
.card:hover .card__reveal,.card:focus-within .card__reveal{max-height:160px;opacity:1;margin-top:var(--s-2)}
.card__reveal p{font-size:var(--t-small);color:var(--c-text-muted)}
@media (hover:none){ /* จอสัมผัสไม่มี hover → แสดงถาวร */
  .card__reveal{max-height:none;opacity:1;margin-top:var(--s-2)}
}

/* ============================================================
   8. CONTACT
   ============================================================ */
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.info{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.info li{display:grid;grid-template-columns:96px 1fr;gap:var(--s-2);
  padding-bottom:var(--s-2);border-bottom:1px solid var(--c-border);font-size:var(--t-small)}
.info dt,.info b{color:var(--c-text-muted);font-weight:500}
.map{aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--c-border);
  background:var(--c-surface)}
.map iframe{width:100%;height:100%;border:0;display:block}

/* ============================================================
   9. PERSISTENT CTA  (Conditional label)
   ============================================================ */
.fab{
  position:fixed;right:var(--s-3);bottom:var(--s-3);z-index:90;
  box-shadow:0 8px 24px rgba(43,175,142,.32);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.fab[data-visible="true"]{opacity:1;transform:translateY(0);pointer-events:auto}

/* ============================================================
   10. FOOTER
   ============================================================ */
.footer{border-top:1px solid var(--c-border);padding-block:var(--s-4);
  font-size:var(--t-caption);color:var(--c-text-muted);
  display:flex;justify-content:space-between;gap:var(--s-2);flex-wrap:wrap}

/* ============================================================
   11. RESPONSIVE — 1440 / 768 / 375
   ============================================================ */
@media (max-width:1024px){
  /* minmax(0,1fr) : กัน grid track ถูกดันกว้างตามเมนูที่ nowrap */
  .layout{gap:var(--s-2)}
  .layout > *{min-width:0}

  /* จอแคบ / มือถือ : ตัด Overlay ออกทั้งหมด ให้เหลือแต่เนื้อหางาน */
  .sidebar{display:none}

  .hero__grid,.contact__grid{grid-template-columns:1fr}
}
@media (max-width:768px){
  :root{--header-h:64px}
  .nav{display:none}
  .nav[data-open="true"]{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:var(--header-h);left:0;right:0;background:var(--c-bg-dark);
    border-bottom:1px solid var(--c-border-dark);padding:var(--s-2);
  }
  .nav[data-open="true"] .nav__panel{position:static;opacity:1;visibility:visible;
    transform:none;box-shadow:none;border:0;padding-left:var(--s-2)}
  .burger{display:flex}
  .hero{padding-top:calc(var(--header-h) + var(--s-6));padding-bottom:var(--s-8)}
  /* ปล่อยให้ตัดบรรทัดเอง ไม่บังคับ <br> เดิม กันข้อความล้นขอบจอแคบ */
  .hero h1{max-width:none}
  .hero h1 br{display:none}
  .stats{gap:var(--s-3);flex-wrap:wrap}
  .layout{padding-block:var(--s-6)}
  .section{padding-bottom:var(--s-8)}
  .fab{left:var(--s-3);right:var(--s-3)}   /* Thumb zone */
  .fab .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  /* ทุก transition ทั่วเว็บตัดเหลือใกล้ 0 ไว้ก่อนเป็นค่าเริ่มต้น (safety net) —
     ยกเว้น header / sidebar / nav dropdown ที่ยังให้ "สไลด์" เหมือนผู้ใช้ทั่วไป
     แค่ย่นเวลาให้สั้นลง (120ms) เพราะระยะเลื่อนเล็ก ความเสี่ยงต่อการเวียนหัวต่ำ */
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .header,
  .sidebar__panel,
  .nav__panel{
    transition-duration:120ms !important;
  }
  html{scroll-behavior:auto}
}