/* ==========================================================================
   Chaibuilder Groups — Design System v2 "Light Editorial"
   ทิศทาง: พื้นสว่างโปร่ง ตัวอักษรใหญ่ ภาพเป็นพระเอก โมโนโครม + กรมท่า
   อ้างอิงความรู้สึก: tostemthailand.com (ญี่ปุ่น มินิมอล สว่าง)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@200;300;400;500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+Thai:wght@300;400;700&display=swap');

/* --------------------------------------------------------------- tokens -- */
:root {
  /* canvas & ink */
  --paper:    #FCFCFC;
  --paper-2:  #F4F5F6;
  --paper-3:  #ECEEEF;
  --ink:      #111315;
  --ink-2:    #565C63;
  --ink-3:    #969CA3;
  --line:     #E4E6E8;
  --line-2:   #F0F1F2;

  /* brand */
  --navy:     #16324F;
  --navy-2:   #24486B;
  --brass:    #A8814A;
  --dark:     #0F1214;

  /* type */
  --font:      'Anuphan', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-en:   'Inter', 'Anuphan', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* ฟอนต์ทางการของ TOSTEM — ใช้เฉพาะข้อความที่อยู่ติดกับโลโก้ TOSTEM เท่านั้น
     (TOSTEM Brand Guideline for Dealer 2026, หน้า 20–21)
     Helvetica เป็นฟอนต์ลิขสิทธิ์ จึงเรียกจากเครื่องผู้ใช้ก่อน แล้ว fallback เป็น Arial
     ซึ่งมี metric เดียวกัน — ดู README หัวข้อ "ฟอนต์ TOSTEM" */
  --font-tostem-en: Helvetica, 'Helvetica Neue', Arial, sans-serif;
  --font-tostem-th: 'Noto Sans Thai', 'Helvetica Neue', Arial, sans-serif;

  --fs-mega: clamp(2.9rem, 12.5vw, 12rem);
  --fs-d1:   clamp(2.1rem, 5vw, 4.4rem);
  --fs-d2:   clamp(1.7rem, 3.3vw, 3rem);
  --fs-d3:   clamp(1.3rem, 2vw, 1.9rem);
  --fs-lead: clamp(1.02rem, 1.2vw, 1.28rem);
  --fs-body: clamp(0.95rem, 1vw, 1.05rem);
  --fs-sm:   0.875rem;
  --fs-xs:   0.7rem;

  /* layout */
  --pad:  clamp(1.25rem, 5vw, 5rem);
  --maxw: 1560px;
  --sec:  clamp(5.5rem, 11vw, 11rem);
  --hdr:  84px;

  /* motion — ease เดียวกันทั้งเว็บ ทำให้จังหวะรู้สึกต่อเนื่อง */
  --ease:  cubic-bezier(.16, 1, .3, 1);
  --ease2: cubic-bezier(.4, 0, .2, 1);
}

/* ----------------------------------------------------------------- base -- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* ----------------------------------------------------------- typography -- */
/* ไทย: line-height สูง ไม่บีบตัวอักษร (สระ-วรรณยุกต์จะชนกัน)
   อังกฤษ/ตัวเลข: บีบได้ ใช้คลาส .en */
h1, h2, h3, h4 { font-weight: 500; line-height: 1.34; letter-spacing: 0; color: var(--ink); }

.en { font-family: var(--font-en); letter-spacing: -0.035em; line-height: 1.02; }

/* ป้ายกำกับเล็ก — โมโนสเปซ ตัวพิมพ์ใหญ่ ระยะห่างกว้าง */
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.label b { color: var(--ink); font-weight: 500; }
/* เลขกำกับ section [ 01 ] … [ 07 ] — ทองบรอนซ์ ใช้เป็นสีอุ่นจุดเดียวของหน้า
   ให้เข้าชุดกับจุดทองหน้าป้าย TOSTEM Certified Dealer ใน hero */
.label i.n { font-style: normal; color: var(--brass); }
.label--light { color: rgba(255,255,255,.6); }
.label--light b { color: #fff; }
/* บนพื้นเข้ม ทองบรอนซ์คอนทราสต์ต่ำเกินอ่าน — ใช้สีของ label เดิมแทน */
.label--light i.n { color: inherit; }

.lead { font-size: var(--fs-lead); font-weight: 300; line-height: 1.8; color: var(--ink-2); }

/* ---------------------------------------------------------------- layout -- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--sec); position: relative; }
.section--tight { padding-block: clamp(3.5rem, 7vw, 7rem); }
/* พื้นสลับโทน — ใช้ --paper-2 ที่ประกาศไว้แล้ว ทำให้การเลื่อนมีจังหวะ
   section ที่ติดกันจะรวมเป็นแถบเดียว ไม่มีเส้นคั่นซ้อนตรงรอยต่อ */
.section--alt { background: var(--paper-2); border-block: 1px solid var(--line); }
.section--alt + .section--alt { border-top: 0; }
.section--alt:has(+ .section--alt) { border-bottom: 0; }
.rule { height: 1px; background: var(--line); border: 0; }

/* หัวข้อ section: เลขกำกับ + หัวเรื่องใหญ่ + คำโปรย */
.head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.head__top { display: flex; align-items: baseline; gap: 1rem; margin-bottom: clamp(1.2rem, 2vw, 2rem); }
.head h2 { font-size: var(--fs-d2); font-weight: 400; line-height: 1.3; max-width: min(100%, 26rem); }
.head__row { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,.8fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
.head .lead { max-width: min(100%, 27rem); padding-bottom: .3rem; }

/* --------------------------------------------------------------- buttons -- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.8rem;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 500;
  overflow: hidden;
  isolation: isolate;
  /* ปุ่มหลักเป็นสีแบรนด์ ไม่ใช่สีดำ — เดิมกรมท่าโผล่เฉพาะตอน hover
     ซึ่งผู้ใช้มือถือไม่มีทางเห็นเลย ตอน hover สลับไปเป็นดำแทน */
  background: var(--navy);
  color: var(--paper);
  transition: color .6s var(--ease);
}
.btn::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform .7s var(--ease);
}
.btn:hover::after { transform: translateY(0); }
.btn svg { width: 15px; height: 15px; transition: transform .6s var(--ease); }
.btn:hover svg { transform: translateX(5px); }

.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost:hover { color: var(--paper); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { color: var(--paper); }
.btn--outline { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }

/* ลิงก์ขีดเส้นใต้วิ่ง */
.ln {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--fs-sm); font-weight: 500;
  padding-bottom: 4px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .7s var(--ease);
}
.ln:hover { background-size: 100% 1px; }
.ln svg { width: 14px; height: 14px; transition: transform .6s var(--ease); }
.ln:hover svg { transform: translateX(4px); }

/* pill */
.pill {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .8rem;
  color: var(--ink-2);
  background: rgba(255,255,255,.6);
  transition: background-color .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
}
.pill:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pill svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- header -- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 90;
  height: var(--hdr);
  display: flex; align-items: center;
  transition: height .6s var(--ease), background-color .6s var(--ease), box-shadow .6s var(--ease);
}
.hdr__in {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.hdr.is-solid {
  height: 66px;
  background: rgba(252,252,252,.88);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 0 var(--line);
}

.logo { display: flex; align-items: center; gap: .65rem; }
.logo__mark { height: 32px; width: auto; color: var(--navy); transition: height .6s var(--ease), color .6s var(--ease); }
.logo__word {
  font-family: var(--font-en);
  font-size: .98rem; font-weight: 400; letter-spacing: .01em;
  line-height: 1; white-space: nowrap; color: var(--navy);
  transition: color .6s var(--ease);
  padding-top: 1px;
}
.hdr.is-solid .logo__mark { height: 28px; }

.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.2rem); }
.nav a {
  position: relative; font-size: var(--fs-sm); font-weight: 400;
  padding-block: .35rem; color: var(--ink);
  transition: color .5s var(--ease), opacity .5s var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .6s var(--ease);
}
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.hdr__cta { padding: .62rem 1.25rem; font-size: .8rem; }

.burger { display: none; width: 44px; height: 44px; position: relative; margin-right: -12px; }
.burger span { position: absolute; left: 11px; width: 22px; height: 1.5px; background: var(--ink); transition: .5s var(--ease); }
.burger span:nth-child(1) { top: 19px; }
.burger span:nth-child(2) { top: 25px; width: 14px; }
.burger:hover span:nth-child(2) { width: 22px; }
body.menu-open .burger span:nth-child(1) { top: 22px; transform: rotate(45deg); background: #fff; }
body.menu-open .burger span:nth-child(2) { top: 22px; width: 22px; transform: rotate(-45deg); background: #fff; }

/* menu overlay */
.menu {
  position: fixed; inset: 0; z-index: 80;
  background: var(--dark);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--hdr) var(--pad) 3rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .9s var(--ease);
  pointer-events: none;
}
body.menu-open .menu { clip-path: inset(0 0 0 0); pointer-events: auto; }
.menu a {
  font-size: clamp(1.6rem, 6.5vw, 2.4rem); font-weight: 300; color: #fff;
  padding-block: .5rem; border-bottom: 1px solid rgba(255,255,255,.09);
  display: flex; align-items: baseline; gap: 1.1rem;
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.menu a span { font-family: var(--font-mono); font-size: .68rem; color: rgba(255,255,255,.4); letter-spacing: .18em; }
body.menu-open .menu a { opacity: 1; transform: none; }
body.menu-open .menu a:nth-child(1) { transition-delay: .18s; }
body.menu-open .menu a:nth-child(2) { transition-delay: .25s; }
body.menu-open .menu a:nth-child(3) { transition-delay: .32s; }
body.menu-open .menu a:nth-child(4) { transition-delay: .39s; }
body.menu-open .menu a:nth-child(5) { transition-delay: .46s; }
.menu__foot { margin-top: 2.5rem; color: rgba(255,255,255,.55); font-size: var(--fs-sm); }
.menu__foot a { font-size: var(--fs-sm); border: 0; display: inline; color: #fff; opacity: 1; transform: none; }

/* header ตอนอยู่บนภาพ hero (ภาพสว่าง → ใช้หมึกเข้ม) */
.hdr:not(.is-solid) { background: linear-gradient(to bottom, rgba(252,252,252,.92), rgba(252,252,252,0)); }

/* ------------------------------------------------------------------ hero -- */
.hero {
  position: relative;
  height: 100svh; min-height: 620px;
  overflow: hidden;
  background: var(--paper-2);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08);
  opacity: 0;
  transition: opacity 1.6s var(--ease), transform 2.4s var(--ease);
  will-change: transform;
}
.hero.is-ready .hero__media img { opacity: 1; transform: scale(1); }
/* ฝ้าขาวคลุมภาพ hero — เดิมซ้อนสามชั้น (ล่าง .97 / ขวา .62 / บน .72)
   รวมกันแล้วกลบภาพบานกระจกจนเกือบหมด หน้าแรกเลยดูเป็นหมอก
   ชั้นล่างยังต้องทึบพอให้ CHAIBUILDER สีดำอ่านออก ที่เหลือลดลงให้เห็นภาพจริง
   ชั้นบนเหลือไว้บาง ๆ พอให้ป้าย TOSTEM Certified Dealer อ่านออก */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(252,252,252,.94) 0%, rgba(252,252,252,.72) 20%, rgba(252,252,252,.18) 44%, rgba(252,252,252,0) 66%),
    linear-gradient(to right, rgba(252,252,252,.38) 0%, rgba(252,252,252,0) 42%),
    linear-gradient(to bottom, rgba(252,252,252,.42) 0%, rgba(252,252,252,0) 18%);
}

.hero__body { position: relative; z-index: 3; width: 100%; max-width: var(--maxw); margin-inline: auto; padding: 0 var(--pad) clamp(1.6rem, 3vw, 2.6rem); }

/* ตัวหนังสือยักษ์ — ตัวอักษรไล่กันขึ้นมาตอนโหลด */
.mega {
  font-family: var(--font-en);
  font-size: var(--fs-mega);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: .86;
  color: var(--ink);
  display: flex; flex-wrap: nowrap;
  margin-left: -.02em;
}
.mega i { display: inline-block; font-style: normal; overflow: hidden; }
.mega i > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.25s var(--ease);
}
.hero.is-ready .mega i > span { transform: translateY(0); }

.hero__meta {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end; gap: 1.5rem;
  margin-top: clamp(1rem, 2vw, 1.6rem);
  padding-top: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid rgba(17,19,21,.14);
}
.hero__meta p { font-size: var(--fs-sm); color: var(--ink-2); max-width: min(100%, 24rem); font-weight: 300; }
.hero__top {
  position: absolute; z-index: 3; left: 0; right: 0;
  top: calc(var(--hdr) + clamp(1rem, 4vh, 3rem));
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem;
}
.hero__badge { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink-2); }
.hero__badge i { width: 5px; height: 5px; border-radius: 50%; background: var(--brass); }
.hero__badge2 { color: var(--ink-2); text-align: right; }
@media (max-width: 720px) { .hero__badge2 { display: none; } }

.hero__scroll {
  position: absolute; z-index: 3; right: var(--pad); bottom: clamp(1.6rem, 3vw, 2.6rem);
  display: flex; align-items: center; gap: .8rem;
}
.hero__scroll i { width: 46px; height: 1px; background: var(--ink-3); position: relative; overflow: hidden; }
.hero__scroll i::after {
  content: ''; position: absolute; inset: 0; background: var(--ink);
  transform: translateX(-100%);
  animation: scrollcue 2.6s var(--ease) infinite;
}
@keyframes scrollcue {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* ------------------------------------------------------------- statement -- */
.stmt { text-align: center; max-width: min(100%, 48rem); margin-inline: auto; }
.stmt h2 { font-size: var(--fs-d1); font-weight: 300; line-height: 1.28; letter-spacing: -0.005em; }
.stmt h2 b { font-weight: 500; }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: clamp(2rem, 4vw, 3rem); }

/* ----------------------------------------------------------------- stats -- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.stats > div { padding: clamp(1.6rem,3vw,2.6rem) clamp(1rem,2vw,2rem) clamp(1.6rem,3vw,2.4rem) 0; border-right: 1px solid var(--line); }
.stats > div:last-child { border-right: 0; }
.stats b {
  display: block; font-family: var(--font-en);
  font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 500; letter-spacing: -.04em;
  line-height: 1; margin-bottom: .8rem; color: var(--ink);
}
.stats strong { display: block; font-size: var(--fs-sm); font-weight: 500; }
.stats span { display: block; font-size: .8rem; color: var(--ink-3); line-height: 1.6; margin-top: .25rem; }

/* ----------------------------------------------------------------- about -- */
.about { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.about p + p { margin-top: 1.3rem; }
.about p { color: var(--ink-2); font-weight: 300; }
.about strong { color: var(--ink); font-weight: 500; }

.cert { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.cert b { display: block; font-size: var(--fs-body); font-weight: 500; }
.cert span { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 300; }

/* ==========================================================================
   TOSTEM Certified Dealer lockup
   บังคับตาม TOSTEM Brand Guideline for Dealer 2026 หน้า 10–15
   · โลโก้ TOSTEM ใช้ไฟล์ทางการตามเดิม ห้ามครอป เปลี่ยนสี บิด หมุน หรือใส่เอฟเฟกต์
   · หน่วยระยะห่าง (M) = ความกว้างตัวอักษร "M" ในคำว่า TOSTEM
     วัดจากไฟล์จริง: M = 471px จากไฟล์กว้าง 3414px → 0.138 ของความกว้างไฟล์
   · แนวนอน: [TOSTEM] — M — | เส้นแบ่ง | — M — [Chaibuilder Groups]
   · ขนาดต่ำสุด 10mm วัดที่ความกว้างคำว่า TOSTEM (= 0.757 ของความกว้างไฟล์)
     10mm ≈ 37.8px ที่ 96dpi → ไฟล์ต้องกว้างอย่างน้อย ~50px, ที่นี่ใช้ 150px ขึ้นไป
   ========================================================================== */
.lockup {
  --tostem-w: clamp(150px, 17vw, 186px);
  --m: calc(var(--tostem-w) * 0.138);        /* หนึ่งหน่วย M */
  display: inline-flex;
  align-items: center;
  gap: var(--m);                              /* M ทั้งสองข้างของเส้นแบ่ง */
  padding: var(--m);                          /* clear space รอบล็อกอัป */
  margin-left: calc(var(--m) * -1);           /* ชดเชยให้ขอบซ้ายตรงกับข้อความ */
}
.lockup__tostem {
  width: var(--tostem-w);
  height: auto;                               /* คงสัดส่วนเดิมเป๊ะ */
  flex: none;
  /* ล็อกไว้ชัดเจน: ห้ามมีเอฟเฟกต์ เงา การหมุน หรือ animation ใด ๆ กับโลโก้ TOSTEM */
  filter: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}
.lockup__div {
  width: 1px;
  height: calc(var(--tostem-w) / 1.9768 * 0.72);
  background: #C2C6CA;
  flex: none;
}
.lockup__cbg { display: flex; align-items: center; gap: .55rem; flex: none; }
.lockup__cbg svg { height: calc(var(--tostem-w) * 0.2); width: auto; color: var(--navy); }
.lockup__cbg span {
  font-family: var(--font-en);
  font-size: calc(var(--tostem-w) * 0.093);
  font-weight: 400; letter-spacing: .01em; line-height: 1;
  white-space: nowrap; color: var(--navy);
}

/* คำบรรยายที่อยู่ติดกับโลโก้ TOSTEM — ต้องใช้ฟอนต์ทางการของ TOSTEM */
.tostem-cap { font-family: var(--font-tostem-th); font-size: var(--fs-sm); font-weight: 300; color: var(--ink-2); line-height: 1.7; }
.tostem-cap b, .tostem-cap strong { font-family: var(--font-tostem-th); font-weight: 700; color: var(--ink); }
.tostem-cap .en { font-family: var(--font-tostem-en); letter-spacing: 0; }

/* บนพื้นเข้ม (footer) */
.lockup--dark .lockup__div { background: rgba(255,255,255,.22); }
.lockup--dark .lockup__cbg svg,
.lockup--dark .lockup__cbg span { color: #fff; }
.ftr .tostem-cap { color: rgba(255,255,255,.55); }
.ftr .tostem-cap b { color: #fff; }

/* จอแคบ: สลับไปใช้ "แนวตั้ง" ตามคู่มือหน้า 11–12
   (TOSTEM ด้านบน / เส้นแบ่ง / Chaibuilder Groups ด้านล่าง) ระยะ M เท่าเดิม */
@media (max-width: 620px) {
  .lockup {
    --tostem-w: 150px;
    flex-direction: column;
    align-items: flex-start;
  }
  .lockup__div { width: var(--tostem-w); height: 1px; }
}

.fig { position: relative; overflow: hidden; background: var(--paper-3); }
.fig img { width: 100%; height: 100%; object-fit: cover; }
.fig__cap { margin-top: .9rem; display: flex; justify-content: space-between; gap: 1rem; }
.fig__cap b { font-size: var(--fs-sm); font-weight: 500; }
.fig__cap span { font-size: .78rem; color: var(--ink-3); }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(3.5rem, 7vw, 6rem); }
.pillars > div { padding-top: 1.4rem; border-top: 1px solid var(--line); }
.pillars h3 { font-size: var(--fs-d3); font-weight: 500; margin: 1rem 0 .6rem; }
.pillars p { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 300; }

/* ---------------------------------------------------- series (chapters) -- */
.chap { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); border-top: 1px solid var(--line); }
.chap__stage {
  position: relative;
  border-right: 1px solid var(--line);
  min-height: clamp(380px, 46vw, 620px);
  display: grid; place-items: center;
  padding: clamp(1.5rem, 3vw, 3rem);
  background: var(--paper-2);
  overflow: hidden;
  transition: background-color 1s var(--ease);
}
.chap__pane { position: absolute; inset: 0; opacity: 0; transform: scale(.98); transition: opacity .9s var(--ease), transform 1.4s var(--ease); pointer-events: none; }
.chap__pane.is-on { opacity: 1; transform: none; }

/* ภาพประจำซีรีส์: key visual ทางการเต็มพื้นที่ หรือภาพจำลองบานแบบวาด */
.svis { position: absolute; inset: 0; }
.svis--photo { margin: 0; }
.svis--photo img { width: 100%; height: 100%; object-fit: cover; }
.svis--draw { display: grid; place-items: center; padding: clamp(1.5rem, 3vw, 3rem); }
.svis--draw .win { width: min(100%, 400px); height: auto; }

.chap__idx {
  position: absolute; z-index: 2;
  left: clamp(1.2rem,2vw,2rem); bottom: clamp(1.2rem,2vw,2rem);
  background: rgba(252,252,252,.92);
  padding: .35rem .75rem;
  border-radius: 999px;
}

.chap__list { display: flex; flex-direction: column; }
.crow {
  position: relative;
  display: grid; grid-template-columns: 2.8rem minmax(0,1fr) auto;
  align-items: center; gap: 1rem;
  padding: clamp(1.1rem, 2.1vw, 1.7rem) clamp(0rem, 1vw, 1.2rem);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  color: var(--ink-3);
  transition: color .7s var(--ease), padding-left .7s var(--ease), background-color .7s var(--ease);
}
.crow:last-child { border-bottom: 0; }
/* ในโซนพื้นเทา ให้ที่ว่างของ stage และแถวที่เลือกอยู่เป็นสีขาว
   ไม่งั้นทั้งสองอย่างจะกลืนไปกับพื้น section แล้วมองไม่ออกว่าเลือกอันไหนอยู่ */
.section--alt .chap__stage { background: var(--paper); }
.section--alt .crow.is-on { background: var(--paper); }
.crow:hover { color: var(--ink-2); }
.crow.is-on { color: var(--ink); background: var(--paper-2); padding-left: clamp(.9rem, 1.6vw, 1.6rem); }
.crow__n { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .1em; opacity: .7; }
.crow h3 { font-family: var(--font-en); font-size: clamp(1.2rem, 2vw, 1.85rem); font-weight: 500; letter-spacing: -.02em; color: inherit; line-height: 1.15; }
.crow p { font-size: var(--fs-sm); font-weight: 300; margin-top: .2rem; color: var(--ink-2); opacity: 0; max-height: 0; overflow: hidden; transition: opacity .7s var(--ease), max-height .7s var(--ease), margin-top .7s var(--ease); }
.crow.is-on p { opacity: 1; max-height: 3em; margin-top: .35rem; }
.crow__go { width: 30px; height: 30px; display: grid; place-items: center; opacity: 0; transform: translateX(-6px); transition: .7s var(--ease); }
.crow.is-on .crow__go { opacity: 1; transform: none; }
.crow__go svg { width: 15px; height: 15px; }
.chap__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1.4rem; }

/* ------------------------------------------------------ window rendering -- */
.win {
  --fc: #2A2B2D; --fw: 8px; --mw: 6px;
  position: relative;
  aspect-ratio: var(--ratio, 1.4);
  padding: var(--fw);
  border-radius: 2px;
  background:
    linear-gradient(103deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.12) 26%, rgba(0,0,0,.10) 52%, rgba(255,255,255,.2) 78%, rgba(0,0,0,.16) 100%),
    var(--fc);
  box-shadow: 0 0 0 1px rgba(0,0,0,.10), 0 40px 70px -40px rgba(17,19,21,.55), 0 6px 16px -10px rgba(17,19,21,.30);
}
.win__glass {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: linear-gradient(168deg, #C9D6DF 0%, #9FB4C4 50%, #7E97AB 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22);
}
.win__view {
  position: absolute; inset: -8%;
  background-size: 210%; background-position: center;
  filter: blur(2px) saturate(.9) brightness(1.02);
  opacity: .85;
}
.win__sheen {
  position: absolute; inset: 0;
  background:
    linear-gradient(112deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.14) 13%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 66%, rgba(255,255,255,.18) 77%, rgba(255,255,255,0) 90%),
    linear-gradient(200deg, rgba(255,255,255,.12), rgba(40,60,80,.12));
  pointer-events: none;
}
.win__mull i {
  position: absolute;
  background: linear-gradient(96deg, rgba(255,255,255,.42), rgba(255,255,255,.06) 42%, rgba(0,0,0,.22)), var(--fc);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.2);
}
.win__mull i.v { top: 0; bottom: 0; width: var(--mw); transform: translateX(-50%); }
.win__mull i.h { left: 0; right: 0; height: var(--mw); transform: translateY(-50%); }
.win__handle { position: absolute; border-radius: 2px; background: linear-gradient(100deg, #F2F4F5, #B4BABF 55%, #8A9196); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.win--slide .win__handle { width: 5px; height: 44px; top: 50%; transform: translateY(-50%); }
.win--door  .win__handle { width: 6px; height: 34%; top: 33%; right: 13%; }
.win--door .win__glass {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 1px, rgba(255,255,255,.04) 1px 9px),
    linear-gradient(168deg, #8A6244 0%, #6A472F 55%, #513524 100%);
}
.win--door .win__view { opacity: 0; }
.win--door .win__lite {
  position: absolute; left: 18%; right: 34%; top: 12%; bottom: 12%;
  background: linear-gradient(168deg, rgba(226,238,246,.9), rgba(150,180,200,.8));
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.2);
}

/* -------------------------------------------------------------- finishes -- */
.finishes { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(.6rem, 1.2vw, 1.1rem); }
.finish i {
  display: block; height: clamp(76px, 9vw, 116px); border-radius: 2px;
  background: linear-gradient(122deg, rgba(255,255,255,.42), rgba(255,255,255,0) 46%, rgba(0,0,0,.2)), var(--c);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.09);
  transition: transform .8s var(--ease);
}
.finish:hover i { transform: translateY(-6px); }
.finish b { display: block; font-size: var(--fs-sm); font-weight: 500; margin-top: .85rem; }
.finish span { font-size: .76rem; color: var(--ink-3); }

/* -------------------------------------------------------------- services -- */
.svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3.2rem) clamp(1.5rem, 3vw, 3rem); }
.svc__item { padding-top: 1.4rem; border-top: 1px solid var(--line); transition: border-color .7s var(--ease); }
.svc__item:hover { border-color: var(--ink); }
.svc__item h3 { font-size: var(--fs-d3); font-weight: 500; margin: 1rem 0 .7rem; line-height: 1.4; }
.svc__item p { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 300; }
.svc__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.2rem; }
.svc__tags span { font-size: .72rem; color: var(--ink-3); padding: .2rem .65rem; border: 1px solid var(--line); border-radius: 999px; }

/* --------------------------------------------------- ขั้นตอน + รับประกัน -- */
.steps { display: grid; border-top: 1px solid var(--line); }
.step {
  display: grid;
  grid-template-columns: 3.2rem minmax(0,1fr) auto;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: baseline;
  padding: clamp(1.3rem, 2.4vw, 1.9rem) 0;
  border-bottom: 1px solid var(--line);
}
.step__n { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .1em; color: var(--ink-3); }
.step h3 { font-size: var(--fs-d3); font-weight: 500; }
.step p { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 300; margin-top: .3rem; }
.step__time {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .04em;
  color: var(--ink); white-space: nowrap; text-align: right;
  padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px;
}
.step__time:empty { border: 0; padding: 0; margin: 0; }
.steps__note {
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
  font-size: var(--fs-sm); color: var(--ink-2); font-weight: 300;
  line-height: 1.75; max-width: min(100%, 46rem);
  padding-left: clamp(.9rem, 1.6vw, 1.2rem);
  border-left: 2px solid var(--line);
}

.warranty { margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid var(--line); }
.warranty__head { margin-bottom: 1.4rem; }
.warranty__items { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1rem, 2vw, 2rem); max-width: 40rem; }
.warranty__items b { display: block; font-family: var(--font-en); font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.warranty__items span { display: block; font-size: var(--fs-sm); color: var(--ink-2); margin-top: .5rem; }
.warranty__note { margin-top: 1.6rem; font-size: .8rem; color: var(--ink-3); font-weight: 300; max-width: min(100%, 42rem); line-height: 1.7; }

@media (max-width: 620px) {
  .step { grid-template-columns: 2.4rem minmax(0,1fr); }
  .step__time { grid-column: 2; justify-self: start; margin-top: .7rem; text-align: left; }
  .warranty__items { grid-template-columns: 1fr; gap: 1.2rem; }
}

/* -------------------------------------------------------------- projects -- */
.proj { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(.8rem, 1.6vw, 1.6rem); }
.pcard { position: relative; grid-column: span 2; cursor: pointer; }
.pcard--wide { grid-column: span 4; }
.pcard--tall { grid-column: span 2; }
.pcard__box { position: relative; overflow: hidden; background: var(--paper-3); aspect-ratio: 4/3; }
.pcard--wide .pcard__box { aspect-ratio: 16/9; }
.pcard--tall .pcard__box { aspect-ratio: 3/4; }
.pcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.3s var(--ease); }
.pcard:hover img { transform: scale(1.07); }
.pcard__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); font-size: var(--fs-sm); background: var(--paper-3); }
.pcard__count {
  position: absolute; top: 0; right: 0; margin: clamp(.7rem,1.2vw,1.1rem);
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em;
  color: #fff; padding: .22rem .6rem; border: 1px solid rgba(255,255,255,.4); border-radius: 999px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.pcard:hover .pcard__count { opacity: 1; transform: none; }
.pcard__count[hidden] { display: none; }
.pcard__info { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 1rem; margin-top: .85rem; }
.pcard__info b { font-size: var(--fs-body); font-weight: 500; }
.pcard__info i { font-style: normal; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }

/* บรรทัดรุ่นที่ใช้ + สีอลูมิเนียมของโครงการนั้น */
.pcard__spec {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  align-items: baseline; gap: 1rem;
  margin-top: .3rem;
  padding-top: .45rem;
  border-top: 1px solid var(--line);
}
.pcard__series { font-size: .78rem; color: var(--ink-2); font-weight: 300; line-height: 1.55; }
.pcard__finish { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; color: var(--ink-3); white-space: nowrap; }
.pcard__finish em {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
  flex: none;
}
.pcard__finish em + em { margin-left: -.25rem; }

/* ตัวกรองผลงานแบบไม่ติดขอบบน */
.filterbar--plain {
  position: static; background: none; backdrop-filter: none;
  border-top: 0; padding-top: 0;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* marquee ชื่อโครงการ */
.marq { overflow: hidden; border-block: 1px solid var(--line); padding-block: clamp(1.1rem, 2vw, 1.6rem); }
.marq__track { display: flex; gap: 3.5rem; width: max-content; animation: marq 42s linear infinite; }
.marq:hover .marq__track { animation-play-state: paused; }
.marq span {
  font-family: var(--font-en); font-size: clamp(1rem, 1.5vw, 1.35rem);
  font-weight: 400; letter-spacing: -.01em; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 3.5rem; white-space: nowrap;
}
.marq span::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--line); }
@keyframes marq { to { transform: translateX(-50%); } }

/* -------------------------------------------------------------- lightbox -- */
.lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(252,252,252,.97);
  display: grid; place-items: center;
  padding: clamp(3.5rem, 6vw, 5rem) clamp(1rem, 5vw, 4rem);
  opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease), visibility .6s;
}
.lb.is-open { opacity: 1; visibility: visible; }
.lb img { max-width: 100%; max-height: 78vh; object-fit: contain; }
.lb__cap { text-align: center; margin-top: 1.1rem; font-size: var(--fs-sm); color: var(--ink-2); }
.lb__cap b { color: var(--ink); font-weight: 500; }
.lb__x, .lb__prev, .lb__next {
  position: absolute; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--ink);
  display: grid; place-items: center;
  transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.lb__x:hover, .lb__prev:hover, .lb__next:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.lb__x { top: clamp(1rem,3vw,2rem); right: clamp(1rem,3vw,2rem); }
.lb__prev { left: clamp(.6rem,3vw,2rem); top: 50%; transform: translateY(-50%); }
.lb__next { right: clamp(.6rem,3vw,2rem); top: 50%; transform: translateY(-50%); }
.lb svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------- contact -- */
/* section ติดต่อเป็นกรมท่า ส่วน footer ยังดำ — ท้ายเว็บจะไล่ สว่าง → กรมท่า → ดำ
   แทนที่จะเป็นบล็อกดำเดียวยาวสองจอ ซึ่งทำให้เว็บจบลงแบบหนัก */
.cta { background: var(--navy); color: rgba(255,255,255,.72); }
.cta h2 { color: #fff; font-size: var(--fs-d2); font-weight: 400; line-height: 1.3; margin: 1.2rem 0 1.3rem; }
.cta p { font-weight: 300; max-width: min(100%, 25rem); }
.cta__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.2rem; }

.clist { display: grid; }
.clist a, .clist div.ci {
  padding: 1.25rem 0;
  border-top: 1px solid rgba(255,255,255,.13);
  display: grid; grid-template-columns: 24px 1fr auto; gap: 1.1rem; align-items: center;
  transition: padding-left .7s var(--ease), border-color .7s var(--ease);
}
.clist a:hover { padding-left: .9rem; border-color: rgba(255,255,255,.4); }
.clist svg { width: 18px; height: 18px; color: rgba(255,255,255,.5); }
.clist i { font-style: normal; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); display: block; margin-bottom: .15rem; }
.clist b { font-weight: 400; color: #fff; font-size: var(--fs-body); }
.clist em { font-style: normal; font-weight: 300; color: rgba(255,255,255,.75); font-size: var(--fs-sm); line-height: 1.55; }
.clist .arr { color: rgba(255,255,255,.3); transition: transform .6s var(--ease), color .6s var(--ease); }
.clist a:hover .arr { color: #fff; transform: translateX(4px); }

/* ---------------------------------------------------------------- footer -- */
.ftr { background: var(--dark); color: rgba(255,255,255,.55); padding-block: clamp(2.5rem,5vw,4rem) 2rem; font-size: var(--fs-sm); border-top: 1px solid rgba(255,255,255,.1); }
.ftr__top { display: grid; grid-template-columns: minmax(0,1.5fr) repeat(2, minmax(0,1fr)); gap: 2.5rem; padding-bottom: 2.5rem; }
.ftr .logo__mark, .ftr .logo__word { color: #fff; }
.ftr__brand p { margin-top: 1.1rem; font-weight: 300; max-width: min(100%, 23rem); line-height: 1.7; }
.ftr h4 { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.38); font-weight: 400; margin-bottom: 1rem; }
.ftr li { margin-bottom: .55rem; font-weight: 300; }
.ftr a { transition: color .5s var(--ease); }
.ftr a:hover { color: #fff; }
.ftr__bot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.1); font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.35); }
.ftr__social { display: flex; gap: 1.4rem; }

/* -------------------------------------------------------------- products -- */
.phead { padding-top: calc(var(--hdr) + clamp(3rem, 7vw, 6rem)); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.phead h1 { font-size: var(--fs-d1); font-weight: 300; line-height: 1.24; margin: 1.2rem 0 1.4rem; max-width: min(100%, 40rem); }
.crumb { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.crumb a:hover { color: var(--ink); }

.filterbar { display: flex; flex-wrap: wrap; gap: .5rem; padding-block: 1.1rem; border-top: 1px solid var(--line); position: sticky; top: 66px; background: rgba(252,252,252,.94); backdrop-filter: blur(14px); z-index: 40; }
.filterbar button { font-size: var(--fs-sm); padding: .45rem 1.1rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); transition: .6s var(--ease); }
.filterbar button:hover { border-color: var(--ink-3); color: var(--ink); }
.filterbar button.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.pdet { border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.pdet__grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.pdet__vis { background: var(--paper-2); aspect-ratio: 1/1; position: relative; overflow: hidden; }
.pdet__vis .svis--draw { padding: clamp(1.5rem,3vw,3rem); }
.pdet__vis .svis--draw .win { width: min(100%, 320px); }
.pdet__vis::after {
  content: attr(data-ghost); position: absolute; left: 50%; top: 5%; transform: translateX(-50%);
  font-family: var(--font-en); font-size: clamp(2.2rem,4.6vw,3.6rem); font-weight: 600;
  color: rgba(17,19,21,.05); letter-spacing: -.045em; white-space: nowrap;
}
.pdet h2 { font-family: var(--font-en); font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 500; letter-spacing: -.03em; }
.pdet__lead { font-size: var(--fs-lead); font-weight: 300; color: var(--ink-2); margin: 1rem 0 1.8rem; }
.spec { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.spec > div { background: var(--paper); padding: 1rem 1.2rem; }
.spec i { font-style: normal; display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .35rem; }
.spec b { font-family: var(--font-en); font-size: var(--fs-body); font-weight: 500; }
.spec em { display: block; font-style: normal; font-size: .72rem; color: var(--ink-3); line-height: 1.5; margin-top: .3rem; }
@media (max-width: 620px) { .spec { grid-template-columns: 1fr 1fr; } }
.pdet__hl { margin-top: 1.5rem; display: grid; gap: .5rem; }
.pdet__hl li { position: relative; padding-left: 1.4rem; font-size: var(--fs-sm); color: var(--ink-2); }
.pdet__hl li::before { content: ''; position: absolute; left: 0; top: .78em; width: 6px; height: 6px; border: 1px solid var(--navy); transform: rotate(45deg); }
.pdet__use { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1.5rem; }
.pdet__use em { font-style: normal; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-right: .3rem; }
.pdet__use span { font-size: .76rem; color: var(--ink-2); padding: .3rem .75rem; border: 1px solid var(--line); border-radius: 999px; }

/* --------------------------------------------------------------- reveals -- */
[data-rv] { opacity: 0; transform: translateY(30px); transition: opacity 1.15s var(--ease), transform 1.15s var(--ease); }
[data-rv].is-in { opacity: 1; transform: none; }
[data-rv-d="1"] { transition-delay: .10s; }
[data-rv-d="2"] { transition-delay: .20s; }
[data-rv-d="3"] { transition-delay: .30s; }
[data-rv-d="4"] { transition-delay: .40s; }
[data-rv-d="5"] { transition-delay: .50s; }

/* รูปทุกใบค่อย ๆ ปรากฏแทนการเด้งขึ้นมาทันที */
.imgfade { opacity: 0; transition: opacity 1.3s var(--ease); }
.imgfade.is-loaded { opacity: 1; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 1100px) {
  .chap { grid-template-columns: 1fr; }
  .chap__stage { border-right: 0; border-bottom: 1px solid var(--line); min-height: 340px; }
  .about { grid-template-columns: 1fr; }
  .cta__grid { grid-template-columns: 1fr; }
  .ftr__top { grid-template-columns: 1fr 1fr; }
  .svc { grid-template-columns: repeat(2, 1fr); }
  .pillars { grid-template-columns: 1fr; gap: 1.6rem; }
}

@media (max-width: 860px) {
  .nav, .hdr__cta { display: none; }
  .burger { display: block; }
  .head__row { grid-template-columns: 1fr; align-items: start; gap: 1.2rem; }
  .head h2 { max-width: none; }
  .stats { grid-template-columns: 1fr; }
  .stats > div { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; }
  .finishes { grid-template-columns: repeat(3, 1fr); }
  .proj { grid-template-columns: repeat(2, 1fr); }
  .pcard, .pcard--wide, .pcard--tall { grid-column: span 1; }
  .pcard__box, .pcard--wide .pcard__box, .pcard--tall .pcard__box { aspect-ratio: 1/1; }
  .pdet__grid { grid-template-columns: 1fr; }
  .hero__meta { grid-template-columns: 1fr; }
  .hero__scroll { display: none; }
}

@media (max-width: 620px) {
  .svc { grid-template-columns: 1fr; }
  .spec { grid-template-columns: 1fr; }
  .ftr__top { grid-template-columns: 1fr; }
  .finishes { grid-template-columns: repeat(2, 1fr); }
  .stmt { max-width: none; }
  .hero { height: 92svh; }
  .only-lg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  [data-rv], .imgfade { opacity: 1; transform: none; }
  .mega i > span { transform: none; }
}

/* ป้องกันการตัดคำไทยกลางคำในหัวข้อใหญ่ */
.nb { white-space: nowrap; }