/* ==============================================================
   MONZONE — HOME PAGE
   S1 Hero · S2 Why · S3 Solutions · S4 Services
   S5 Awards · S6 Client voice · S7 Contact (+ ฟอร์ม)
   อ้างอิงดีไซน์: Figma "2026_Home-page_Monzone-Group" node 23-311
   ============================================================== */

/* ==========================================================
   S1 — HERO
   ฉากหลัง (hero-stage) → ตัวอักษรยักษ์ → ไดคัท (hero-cut) → เนื้อหา
   ========================================================== */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--bg-deep); color:var(--ink-on-dark);
  /* mobile: ภาพรถอยู่บนสุด header ลอยทับ แล้วข้อความไหลตามลงมา */
  display:flex; flex-direction:column;
  padding-block:0;
}
@media (min-width:1024px){
  .hero{
    /* เต็มจอพอดี ไม่ให้เห็น section ถัดไปโผล่ขอบล่าง · svh กัน address bar บนมือถือแนวนอน */
    display:grid; align-content:center;
    min-height:100vh; min-height:100svh;
    padding-block:calc(var(--header-h) + var(--s7)) var(--s7);
  }
}

/* mobile: ฉากอยู่บนสุด · desktop: อยู่คอลัมน์ขวา ไม่ทับตัวหนังสือ
   min-height เผื่อความสูงของ header ที่ลอยทับอยู่ ตัวรถจะได้ไม่โดนโลโก้บัง */
.hero__scene{
  position:relative; order:1; margin:0;
  aspect-ratio:4/3; min-height:calc(var(--header-h) + 230px);
}
@media (min-width:1024px){
  .hero__scene{ position:absolute; inset:30px 0 56px 44%; margin:0; aspect-ratio:auto; min-height:0 }
}

.hero__stage,
.hero__cars{ position:absolute; inset:0; pointer-events:none }
.hero__stage img{ width:100%; height:100%; object-fit:cover; object-position:center bottom }

.hero__stage{ z-index:0 }
.hero__cars{ z-index:2 }

/* ไดคัทรถ — รางเลื่อนแนวนอน เลื่อนทีละคัน วนไม่รู้จบเหมือนโชว์สินค้า
   เลื่อน + เฟดพร้อมกัน คันที่ออกจะจางหายไป ไม่เห็นขอบภาพตัดกันกลางทาง */
.hero__cars{ overflow:hidden }
.hero__track{
  display:flex; height:100%;
  transition:transform 900ms var(--ease);
}
.hero__track.is-snapping,
.hero__track.is-snapping .hero__car{ transition:none }

.hero__car{
  position:relative; flex:0 0 100%; height:100%; margin:0;
  opacity:0;
  transition:opacity 900ms var(--ease);
}
.hero__car.is-on{ opacity:1 }

.hero__car img{
  /* พอดีกรอบ ไม่ล้นขอบขวา — ตัวรถจึงอยู่กลางพื้น floor ครบคัน ไม่โดนตัดท้าย */
  width:100%; height:100%; margin:0;
  object-fit:contain; object-position:center 70%;
}

/* ขอบภาพละลายเข้ากับพื้นหลัง — ซ้าย · บน · ล่าง */
.hero__fade{ position:absolute; pointer-events:none }
.hero__fade--left  { inset-block:0; inset-inline:0 0; background:var(--fade-deep-left) }
.hero__fade--top   { inset-block-start:0;  inset-inline:0; height:77px; background:var(--fade-deep-down); transform:scaleY(-1) }
.hero__fade--bottom{ inset-block-end:0; inset-inline:0; height:77px; background:var(--fade-deep-down) }

/* ตัวอักษรยักษ์ — ตกแต่ง ไม่ใช่หัวเรื่อง */
.hero__type{
  /* mobile: ลงมาพ้นแถบ header ที่ลอยทับอยู่ ไม่ให้ไปชนโลโก้ */
  position:absolute; z-index:1; inset-block-start:calc(var(--header-h) + var(--s2)); inset-inline-start:50%;
  width:100%; transform:translateX(-50%);
  font-family:var(--font-display); font-size:var(--fs-display); line-height:var(--lh-display);
  font-weight:700; text-align:center; white-space:nowrap;
  color:var(--line-dark);
  pointer-events:none; user-select:none;
  /* ทำตัวเป็นหน้ากาก — คำไหลขึ้นจากข้างล่างแล้วออกทางข้างบน
     padding + margin ติดลบ = เผื่อที่ให้หัวตัวอักษรไม่โดนขอบหน้ากากตัด */
  overflow:hidden; padding-block:.1em; margin-block:-.1em;
}
/* สลับคำ: ไหลขึ้น 450ms (ครึ่งหนึ่งของจังหวะเลื่อนรถ 900ms) แล้วใบใหม่ไหลขึ้นตาม */
.hero__type-line{
  display:block;
  transition:transform 450ms var(--ease), opacity 450ms var(--ease);
}
.hero__type-line.is-out  { transform:translateY(-110%); opacity:0 }
.hero__type-line.is-below{ transform:translateY(110%);  opacity:0; transition:none }
@media (min-width:1024px){
  /* จัดกึ่งกลางในกรอบฉาก เพื่อไม่ให้ล้ำเข้าไปในคอลัมน์ข้อความ */
  .hero__type{ inset-block-start:120px; inset-inline-start:50%; width:100% }
}

.hero__inner{ position:relative; z-index:3; order:2; padding-block:var(--s6) var(--s8) }
@media (min-width:1024px){
  /* จอกว้าง: ขยายกรอบเป็นแบบเดียวกับ .why__inner (สูงสุด 1600px) ข้อความเลยขยับไปทางซ้าย
     ไม่ให้คอลัมน์ข้อความไปเบียดภาพรถที่เริ่มที่ 44% ของจอ — ซ้ายขวาดูสมดุลกัน
     max() กันไว้ไม่ให้แคบกว่า --container จอ 1024–1440 จึงอยู่ตำแหน่งเดิม */
  .hero__inner{ padding-block:0; max-width:max(var(--container), min(1600px, 88vw)) }
}

.hero__eyebrow{ display:flex; align-items:center; gap:var(--s4) }
.hero__eyebrow .label{ color:var(--ink-label) }
/* จอแคบ (~360px) ป้าย + เส้น 120px ไม่พอดีบรรทัด — ให้เส้นหดแทน ป้ายจะได้ไม่ตกเป็นสองบรรทัด */
.hero__eyebrow .label{ white-space:nowrap }
.hero__rule{ width:120px; min-width:var(--s5); height:1px; background:var(--line); flex:0 1 auto }

.hero-h1{
  margin-block-start:var(--s5);
  font-family:var(--font-display); font-size:var(--fs-hero); line-height:var(--lh-hero); font-weight:700;
}
.hero-h1__lead{ color:var(--amber) }
.hero-h1__sub{ display:block; font-weight:300; color:var(--ink-muted) }

.hero__lead{ margin-block-start:var(--s5); max-width:510px; color:var(--ink-on-dark) }

/* ---------- พิมพ์ดีด — ข้อความนำใน hero โชว์ทีละตัวอักษร ---------- */
/* ตัวอักษรถูกวางครบทุกตัวตั้งแต่แรก แล้วซ่อนด้วย visibility
   กล่องข้อความจึงจองพื้นที่เท่าตอนพิมพ์จบ บรรทัดไม่ขยับระหว่างพิมพ์ */
.tw__c{ position:relative; visibility:hidden }
.tw__c.is-on{ visibility:visible }

/* caret วางแบบ absolute ในตัวอักษรล่าสุด จึงไม่กินพื้นที่และไม่ดันคำตก */
.tw__caret{
  position:absolute; inset-block-end:2px; inset-inline-end:-2px;
  width:2px; height:1em;
  background:var(--accent);
  animation:tw-blink 900ms steps(2,start) infinite;
}
@keyframes tw-blink{ 50%{ opacity:0 } }
.hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s5); margin-block-start:var(--s7) }

/* ---------- mobile (<768px) — จัดฉาก hero ให้อยู่ในกรอบจอ ----------
   1) ตัวอักษรยักษ์ย่อลง: คำยาวสุด PRIME MOVER ที่ 56px กว้าง 384px ล้นจอ 375px
      ที่ 40px เหลือ 274px — เหลือขอบเท่ากันสองข้างตั้งแต่จอ 320px ขึ้นไป
   2) ไดคัทรถเว้นขอบเท่า gutter ไม่ให้หัว/ท้ายรถชนขอบจอ
   3) CTA สองปุ่มอยู่แถวเดียวกัน — ย่อป้ายเป็น --fs-sm (วงลูกศร 40px อยู่แล้วทุกขนาดจอ)
      (ยังคง flex-wrap ไว้ ถ้าจอแคบกว่า ~340px ก็ตกบรรทัดเองตามเดิม) */
@media (max-width:767px){
  .hero__type{ font-size:36px; line-height:44px }

  /* เว้นขอบข้างให้ไดคัทแบบไม่เท่ากัน ซ้าย 24 / ขวา 48 —
     ภาพต้นทางจัดตัวรถชิดขอบขวาของเฟรมและเหลือที่ว่างทางซ้าย
     ถ้าเว้นเท่ากันท้ายรถจะไปจ่อขอบจอ (ยิ่งในพรีวิวที่มีแถบเลื่อนทับอีก ~15px)
     ดันกรอบมาทางซ้ายแทน ตัวรถเลยมาอยู่กลางจอจริง ๆ และมีที่หายใจฝั่งขวา */
  .hero__car img{ padding-inline:var(--s5) var(--s7) }

  .hero__actions{ gap:var(--s3) }
  .hero__actions .btn{ padding-inline:var(--s4); font-size:var(--fs-sm) }
  .hero__actions .btn__icon{ width:16px; height:16px }
  .hero__actions .btn-circle{ font-size:var(--fs-sm); gap:var(--s2) }
}

/* ---------- มือถือ/แท็บเล็ต (<1024px) — hero ต้องจบใน 1 หน้าจอ ----------
   ทั้งก้อนสูงเท่าจอพอดี (svh = ไม่นับแถบ address bar) แล้วให้ฉากรถยืด/หดกินที่ที่เหลือ
   แทนสัดส่วน 4:3 ตายตัว — จอสูงรถได้ที่เยอะขึ้น · จอเตี้ยรถหดลง (ไม่ต่ำกว่า header + 112px
   ซึ่งพอดีจอเล็กสุดที่ทดสอบ 360×640) */
@media (max-width:1023px){
  /* + --s7 เพราะ section ถัดไป (.why) ดึงขึ้นมาทับขอบล่าง hero 48px (margin ติดลบ)
     ส่วนที่มองเห็นจริงจึงเท่าจอพอดี */
  .hero{ min-height:calc(100vh + var(--s7)); min-height:calc(100svh + var(--s7)) }
  .hero__scene{ flex:1 1 auto; aspect-ratio:auto; min-height:calc(var(--header-h) + 112px) }
  /* ล่าง = ส่วนที่ .why ทับขึ้นมา 48 + ระยะเว้นที่มองเห็นจริงระหว่างปุ่มกับเส้นขอบ section ถัดไป 48 */
  .hero__inner{ padding-block-end:calc(var(--s7) * 2) }
}
/* มือถือ: บีบช่องไฟและขนาดตัวอักษรให้ข้อความทั้งก้อนเหลือ ~410px
   (เดิม 551px — รวมฉากรถแล้วสูง 853px เกินจอ 667px ไปเกือบ 200px) */
@media (max-width:767px){
  .hero__inner{ padding-block-start:var(--s4) }
  .hero-h1{ margin-block-start:var(--s4); font-size:32px; line-height:40px }
  .hero__lead{ margin-block-start:var(--s4); font-size:var(--fs-sm); line-height:var(--lh-sm) }
  .hero__actions{ margin-block-start:var(--s5) }

  /* จัดกึ่งกลางทั้งก้อน (ลูกค้าขอ) — ให้ตรงแกนเดียวกับรถที่อยู่กลางจอด้านบน
     ป้าย COLD CHAIN SOLUTIONS มีเส้นทั้งสองข้าง (เส้นซ้ายเป็น ::before หน้าตาเดียวกับ .hero__rule)
     ไม่งั้นเส้นข้างเดียวจะดันป้ายเยื้องไปซ้าย */
  .hero__inner{ text-align:center }
  .hero__eyebrow{ justify-content:center }
  .hero__eyebrow::before{ content:""; width:120px; min-width:var(--s5); height:1px; background:var(--line); flex:0 1 auto }
  .hero__lead{ margin-inline:auto }
  .hero__actions{ justify-content:center }
}

@media (min-width:1024px){
  /* คอลัมน์ข้อความกว้างไม่เกิน 46% ของ viewport — ชนขอบซ้ายของกรอบฉากพอดี */
  .hero__copy{ max-width:calc(44vw - var(--gutter) - var(--s6)) }
}
@media (min-width:1440px){
  .hero__copy{ max-width:560px }
}

/* ==========================================================
   S2 — WHY MONZONE (พื้นเข้ม · ภาพถนนด้านซ้าย)
   ========================================================== */
.why{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--bg-dark); color:var(--ink-on-dark);
  padding-block:var(--s8);
  margin-block-start:calc(var(--s7) * -1);
}
@media (min-width:1024px){
  /* เต็มจอเหมือน hero · จัดเนื้อหากึ่งกลางแนวตั้ง จะได้ไม่ลอยติดบน */
  .why{
    display:grid; align-content:center;
    min-height:100vh; min-height:100svh;
    padding-block:var(--s9);
  }
}

/* กินเต็มความกว้าง แล้วให้ scrim ไล่จนทึบเองที่ ~84%
   ถ้าตัดกรอบภาพไว้ที่ 84.3% แบบเดิม fade บน-ล่างจะคลุมไม่ถึงขอบขวา เกิดเป็นรอยสี่เหลี่ยม */
.why__media{ position:absolute; z-index:0; inset:0; pointer-events:none }
/* วิดีโอ about.mp4 (รถบรรทุกบนถนน) — ครอปเต็มกรอบเหมือนภาพ */
.why__video{ display:block; width:100%; height:100%; object-fit:cover }
/* มือถือข้อความกินเต็มกว้าง จะใช้ไล่ซ้าย→ขวาไม่ได้ ต้องคลุมม่านเท่ากันทั้งแผ่น */
.why__scrim{ position:absolute; inset:0; background:var(--scrim-veil) }
@media (min-width:1024px){ .why__scrim{ background:var(--scrim-right) } }
.why__fade{ position:absolute; inset-inline:0; height:120px; background:var(--fade-deep-solid) }
.why__fade--top{ inset-block-start:0; transform:scaleY(-1) }
.why__fade--bottom{ inset-block-end:0 }
@media (min-width:1024px){ .why__fade{ height:120px } }   /* เดิม 182px กินภาพบน-ล่างจนมืด */

/* จอกว้างกว่า 1440 ปล่อยให้คอนเทนต์ขยายตาม ไม่งั้นขอบขวาจะเหลือพื้นดำว่างเป็นแถบใหญ่
   (ฝั่งซ้ายมีภาพถนนเต็มพื้น แต่ฝั่งขวาไม่มีอะไร ภาพรวมเลยเอียง) */
.why__inner{ position:relative; z-index:1 }
@media (min-width:1024px){ .why__inner{ max-width:min(1600px, 88vw) } }

.why__grid{ display:grid; gap:var(--s8) }
@media (min-width:1024px){
  .why__grid{ grid-template-columns:minmax(0,1fr) 300px; gap:var(--s9); margin-inline-start:30%; align-items:start }
}

/* ขยับคอลัมน์ข้อความออกจากขอบม่านเพิ่มเฉพาะจอกว้าง
   ต่ำกว่า 1440 ดันไม่ได้ เพราะหักคอลัมน์สถิติ 300px กับช่องไฟแล้ว
   คอลัมน์ข้อความจะแคบจนหัวข้อเหตุผลขึ้นสามบรรทัด */
@media (min-width:1440px){ .why__grid{ margin-inline-start:34% } }

.why .sec-head__title{ color:var(--amber) }

.reasons{ margin-block-start:var(--s7); display:grid; gap:var(--s5) }
.reason{
  display:flex; align-items:flex-start; gap:var(--s4);
  padding-block-start:var(--s4); border-block-start:1px solid var(--line-dark);
}
.reason > div{ flex:1 1 auto; min-width:0 }
.reason__icon{ width:24px; height:24px; flex:none; margin-block-start:2px; color:var(--ink-on-dark) }
.reason__title{ font-size:var(--fs-body); line-height:var(--lh-body); font-weight:600; color:var(--ink-on-dark) }
.reason__note{ margin-block-start:var(--s1); font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--ink-on-dark-muted) }

.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--s5) }
@media (min-width:1024px){ .stats{ grid-template-columns:1fr } }
.stat{ padding-block:var(--s5); padding-inline-end:var(--s5); border-block-start:1px solid var(--line-dark) }
.stat__value{ color:var(--ink-on-dark) }
.stat__value.is-amber{ color:var(--amber) }
.stat__label{ margin-block-start:var(--s2); font-size:var(--fs-mono); line-height:var(--lh-mono); color:var(--ink-on-dark-muted) }

/* มือถือ/แท็บเล็ต — ตัวเลขกับคำอธิบายจัดกึ่งกลางในช่องของตัวเอง
   padding-inline-end ของชุดเดสก์ท็อปต้องปลดออก ไม่งั้นแกนกลางจะเบี้ยวไปทางซ้าย 24px
   (ตั้งแต่ 1024px ขึ้นไป .stats เป็นคอลัมน์เดียวในแถบข้าง ยังชิดซ้ายตามดีไซน์เดิม) */
@media (max-width:1023px){
  .stat{ padding-inline-end:0; text-align:center }
}
.why__cta{ margin-block-start:var(--s6) }

/* มือถือ/แท็บเล็ต (<1024px) — คอลัมน์เดียว ปุ่มเดี่ยวชิดซ้ายใต้บล็อกตัวเลขแล้วดูหลุดสมดุล
   จึงจัดกึ่งกลาง · .btn เป็น inline-flex ต้องเปลี่ยนเป็น flex + width:fit-content ก่อน margin auto จึงทำงาน */
@media (max-width:1023px){
  .why__cta{ display:flex; width:fit-content; margin-inline:auto }
}

/* ---- แถบความไว้วางใจ — อยู่ในรอยบากมุมบนขวาของบล็อกเหลือง ---- */
.trust{ position:relative; z-index:1; padding-block:0 var(--s6) }
.trust__inner{ display:grid; gap:var(--s6) }   /* เดิม 16px — โลโก้ติดข้อความเกินไป */
@media (min-width:1024px){
  .trust{ padding-block:var(--s2) var(--s4) }
  .trust__inner{ justify-items:end }
  /* ต้องอยู่ในรอยบากฝั่งขวาเท่านั้น (ขอบเหลืองจบที่ 52% ของ 1440 = 750px)
     ไม่งั้นเกรเดียนขอบสีเข้มจะไปทับพื้นเหลือง กลายเป็นรอยตัด
     เว้นจากขอบเหลือง ~34px และเว้นจากขอบขวาของ container อีก 32px ให้ดูบาลานซ์ */
  .trust__text{ margin-inline-end:var(--s6); max-width:383px; text-align:end }
  /* แถบโลโก้ยื่นเลย container ออกไปชนขอบขวาของจอ (ลูกค้าขอ)
     margin-end ติดลบ = ระยะจากขอบ container ถึงขอบจอ (สูตร full-bleed: 50% - 50vw)
     กว้าง = ช่องรอยบาก 47.9vw (ขอบรอยบากอยู่ที่ 52.1% ของความกว้าง) หักเว้นห่างแนวทแยง s5
     → ขอบซ้ายไม่ล้ำเข้าพื้นเหลืองทุกขนาดจอ */
  /* .trust__inner > เพิ่มความเจาะจง — กฎ .trust__viewport{width:100%} ด้านล่างไฟล์จะทับไม่ได้ */
  .trust__inner > .trust__viewport{ width:calc(47.9vw - var(--s5)); margin-inline-end:calc(50% - 50vw) }
}
.trust__text{ font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--ink-muted) }

/* มือถือ/แท็บเล็ต — วางกึ่งกลางให้เข้าชุดกับแถบชื่อลูกค้าที่เลื่อนเต็มความกว้างข้างล่าง
   (ตั้งแต่ 1024px ขึ้นไปยังชิดขวาตามเดิม เพราะต้องอยู่ในรอยบากมุมบนขวา) */
@media (max-width:1023px){
  .trust__text{ text-align:center }
}

/* ขอบซ้าย-ขวาต้องไล่ไปหา --bg-deep (พื้นหลังของแถบนี้) ไม่ใช่ --bg-dark
   ไม่งั้นจะเห็นเป็นรอยตัดภาพ */
.trust__viewport{ position:relative; width:100%; overflow:hidden }
.trust__viewport::before,
.trust__viewport::after{
  content:""; position:absolute; z-index:2; inset-block:0; width:32px; pointer-events:none;   /* เดิม 64px โลโก้ริมขอบจางหายเกินไป */
  background:var(--fade-deep-side);
}
.trust__viewport::before{ inset-inline-start:0; transform:scaleX(-1); width:12px }   /* ซ้ายเฟดแค่ปลาย — โลโก้เลื่อนออกทางซ้าย ให้เห็นเต็มจนสุดขอบ */
.trust__viewport::after{ inset-inline-end:0; width:120px }   /* ขวายื่นถึงขอบจอ (ส่วนหนึ่งจมใต้ scrollbar) — เฟดยาวให้โลโก้ค่อย ๆ จางหายชัดเจน */

/* เลื่อนต่อเนื่องตลอด ไม่หยุดตอน hover */
.trust__track{ display:flex; align-items:center; gap:var(--s6); width:max-content; animation:trust-slide 44s linear infinite }
@keyframes trust-slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* 🔶 ตอนนี้เป็นภาพแทนชั่วคราว (*-mock.svg) ยังไม่มีโลโก้จริงจากลูกค้าสักราย
   รายละเอียดและวิธีสลับเป็นของจริงอยู่ใน assets/images/partners/README.md
   ของจริงขอเป็นแบบสีเดียว/ขาว เพราะแถบนี้อยู่บนพื้น --bg-deep */
/* ช่องโลโก้ขนาดคงที่ แล้วให้ภาพ contain อยู่ข้างใน
   โลโก้จริงมีทั้งแนวนอน (lockup ยาว) และแนวตั้ง (มาร์กซ้อนชื่อ)
   ถ้าล็อกแค่ความสูงเหมือนเดิม แบบแนวตั้งจะเล็กจนอ่านไม่ออก
   ช่อง 160x64 รองรับทั้งสองแบบให้มีน้ำหนักสายตาใกล้เคียงกัน
   และความกว้างเท่ากันทุกช่อง จังหวะการเลื่อนของแถบจึงสม่ำเสมอ */
.trust__item{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:160px; height:64px;
}
.trust__logo{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; opacity:.72 }

/* ==========================================================
   S3 — SOLUTIONS (บล็อกเหลืองเว้ารอยบาก)
   ========================================================== */
/* พื้นหลัง 2 ชั้น: แถบเข้มด้านบน (โผล่ตรงรอยบาก) + ขาวด้านล่าง (โผล่ใต้ขอบล่าง)
   รูปทรงเหลืองวางทับเป็น .solutions__shape */
.solutions{
  /* overflow-x:clip — แถบโลโก้ยื่นถึงขอบจอ (100vw รวมแถบ scrollbar) ไม่ให้เกิดเลื่อนซ้าย-ขวาทั้งหน้า */
  position:relative; z-index:2; color:var(--on-amber); overflow-x:clip;
  /* แถบเข้มต้องลงลึกอย่างน้อยถึงก้นรอยบากขวาบน (22.2% ของความสูงใน .chamfer-block)
     เดิมล็อก 220px — ส่วนนี้สูงเกิน ~990px เมื่อไร รอยบากจะเลยแถบเข้ม แล้วเห็นพื้นขาวเป็นเสี้ยน */
  background:linear-gradient(var(--bg-deep),var(--bg-deep)) 0 0 / 100% max(220px, 22.5%) no-repeat, var(--bg);
  padding-block:0 var(--s9);
}
.solutions__shape{ position:absolute; z-index:0; inset:0; background:var(--amber) }

/* มือถือ/แท็บเล็ต: แถบความไว้วางใจต้องอยู่บนพื้นเข้มล้วน
   (เดิมบล็อกเหลืองกินตั้งแต่บนสุด แถบเลยไปนั่งทับ แล้วเกรเดียนขอบสีเข้ม
    ของ .trust__viewport ที่ทำมาสำหรับพื้นเข้ม กลายเป็นกรอบดำบนพื้นเหลือง)

   วิธีแก้: จัด .solutions เป็นกริดสองแถว — แถว 1 แถบความไว้วางใจ แถว 2 เนื้อหา
   แล้วตรึงรูปทรงเหลืองไว้ "เฉพาะแถวที่ 2" (ช่องกริดกลายเป็น containing block
   ของ absolute ที่ระบุตำแหน่งกริดไว้) พื้นที่เข้มจึงยืดตามความสูงจริงของแถบ
   ไม่ต้องเดาเป็นตัวเลข ต่อให้ข้อความตัดบรรทัดเพิ่มก็ไม่หลุด */
@media (max-width:1023px){
  .solutions{
    display:grid; grid-template-columns:1fr;
    background:var(--bg-deep); padding-block:0;
  }
  /* เว้นพื้นที่เข้มรอบแถบให้หายใจ แล้วบล็อกเหลืองจึงเริ่มถัดจากนี้พอดี */
  .trust{ grid-area:1 / 1; padding-block:var(--s8) var(--s7) }
  /* รอยต่อเข้ม→เหลืองเป็นแนวตัดสีตรง ๆ เส้นเดียว — ไม่ไล่เฉด ไม่มีรอยบากทแยง
     (ปลด clip-path ของ .chamfer-block ออก ขอบบนจึงเป็นเส้นแนวนอนเต็มความกว้าง
      ตั้งแต่ 1024px ขึ้นไปรอยบากยังอยู่ครบตามสเปก) */
  .solutions__shape{ grid-area:2 / 1; inset:0; clip-path:none }
  .solutions__inner{ grid-area:2 / 1; padding-block:var(--s8) var(--s9) }
}
.solutions__inner{ position:relative; z-index:1; padding-block-start:var(--s8) }
@media (min-width:1024px){
  .solutions{ padding-block:0 var(--s10) }
  .solutions__inner{ padding-block-start:var(--s7) }
}
.solutions .sec-head__title{ color:var(--on-amber); max-width:612px }

.solutions__grid{ margin-block-start:var(--s6); display:grid; gap:var(--s5) }
@media (min-width:768px){ .solutions__grid{ grid-template-columns:repeat(3,1fr) } }
.solutions .card__body{ background:var(--bg-alt) }

.solutions__foot{ margin-block-start:var(--s6); display:flex; justify-content:center }
/* ปุ่มนี้วางบนพื้นเหลือง --amber · ขอบ --line (เทาอ่อน) กลืนไปกับพื้น
   จึงใช้ขอบขาวแทน ส่วน hover ยังคืนเป็นขอบแดงเหมือนปุ่ม sweep ตัวอื่น */
.solutions__foot .btn--sweep{ border-color:var(--bg); color:var(--ink-on-dark) }
.solutions__foot .btn--sweep:hover,
.solutions__foot .btn--sweep:focus-visible{ border-color:var(--accent) }

/* ==========================================================
   S4 — SERVICES (bento: ใบเด่นสูงเต็มซ้าย + สองใบซ้อนขวา)
   ========================================================== */
.services{ background:var(--bg); padding-block:var(--s8) }
@media (min-width:1024px){ .services{ padding-block:var(--s9) } }

/* bento ตาม Figma — ใบเด่นสูงเต็มคอลัมน์ซ้าย · อีกสองใบซ้อนกันทางขวา
   ตำแหน่งคงที่ ไม่สลับที่ตอน hover */
.services__grid{ margin-block-start:var(--s7); display:grid; gap:var(--s5) }
@media (min-width:768px){
  /* ช่องไฟ 24px ทั้งแนวตั้งและแนวนอน เท่ากับการ์ดโซลูชันด้านบน (เดิม 28/40px ห่างเกินไป) */
  .services__grid{ grid-template-columns:506fr 705fr; gap:var(--s5) }
  .svc--feature{ grid-row:span 2 }
}

.svc{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:var(--bg-dark); isolation:isolate;
  min-height:278px;
  transition:box-shadow var(--dur) var(--ease);
}
.svc--feature{ min-height:420px }
@media (min-width:1024px){ .svc--feature{ min-height:584px } }

/* มือถือ (<768px): การ์ดเรียงแถวเดียว ปัดซ้าย-ขวาได้ (scroll-snap ของเบราว์เซอร์ ไม่ต้องใช้ JS)
   การ์ดกว้าง 85% ใบถัดไปโผล่มาให้เห็นว่าปัดต่อได้ · ยื่นแถวออกไปชนขอบจอทั้งสองข้าง
   แต่ยังหยุดการ์ดใบแรก/ใบสุดท้ายตรงแนว gutter เดิม (scroll-padding) · ทุกใบสูงเท่ากัน */
@media (max-width:767px){
  .services__grid{
    display:flex; gap:var(--s4);
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter);
    margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
    padding-block-end:var(--s2);   /* เผื่อเงาการ์ดตอนกด ไม่ให้โดนตัด */
    scrollbar-width:none;
  }
  .services__grid::-webkit-scrollbar{ display:none }
  .services__grid > .svc{ flex:0 0 85%; min-height:360px; scroll-snap-align:start }
  /* ในแถวปัด ไม่ใช้ลูกเล่นเฟดเข้าตอนเลื่อนถึง — ตอนวนกระโดดจากโคลนไปการ์ดจริง
     การ์ดจริงที่ยังไม่ได้เฟดจะกะพริบหาย จึงให้ทุกใบโชว์เต็มตั้งแต่แรก */
  .services__grid > .svc.reveal{ opacity:1; transform:none }
}
/* โคลนสำหรับวนลูป (JS สร้าง) ใช้แค่บนมือถือ */
@media (min-width:768px){ .services__grid > .is-clone{ display:none } }
/* ตัวบอกตำแหน่ง (JS สร้าง) — มีแค่บนมือถือ · ขีดเส้นบาง เข้าชุดกับเส้นบางทั้งเว็บ
   (เส้นข้างป้าย COLD CHAIN SOLUTIONS · เส้นขั้นบันไดใต้หัวข้อรางวัล)
   ขีดละ 24×2px ห่างกัน 8px · ใบที่เปิดอยู่เป็นสีแดงแบรนด์ ที่เหลือเทาอ่อน
   พื้นที่แตะสูง 24px — padding บน/ล่าง 11px + เส้น 2px */
.services__dots{ display:none }
@media (max-width:767px){
  .services__dots{ display:flex; justify-content:center; align-items:center; margin-block-start:var(--s5) }
  .services__dot{ display:flex; padding:11px var(--s1); background:none; border:0; cursor:pointer }
  .services__dot::before{
    content:""; width:24px; height:2px; background:var(--line);
    transition:background-color var(--dur) var(--ease);
  }
  .services__dot[aria-current="true"]::before{ background:var(--accent) }
  .services__dot:focus-visible{ outline:3px solid var(--focus); outline-offset:0; border-radius:var(--r) }
}

/* hover: ไม่ขยายการ์ด (เดิม scale 1.05 ใหญ่จนเบียดใบข้าง ๆ)
   เหลือแค่ยกเงา + ม่านจางลง + วงลูกศรเป็นสีแดง */
.svc:hover,
.svc:focus-within{ box-shadow:var(--shadow-pop) }

.svc__img{
  position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover;
  max-width:none;   /* ปลด max-width ของ reset เหมือน .card__media img */
  object-position:center center;
}

/* ม่านไล่เฉดจากบนลงล่าง ให้หัวข้ออ่านออก — hover แล้วจางลงเพื่อให้เห็นภาพชัดขึ้น */
.svc::before{
  content:""; position:absolute; z-index:1; inset:0;
  background:var(--scrim-card);
  transition:opacity 420ms var(--ease);
}
.svc:hover::before,
.svc:focus-within::before{ opacity:.62 }

/* ไม่จำกัดความกว้าง ให้คำอธิบายยาวได้เต็มการ์ด (การ์ดขวาจบใน 1 บรรทัด) */
.svc__body{ position:relative; z-index:2; padding:var(--s6) var(--s5) var(--s5) }
.svc__title{ font-family:var(--font-display); font-size:var(--fs-card); line-height:var(--lh-card); font-weight:600; color:var(--amber) }
.svc__desc{ margin-block-start:var(--s3); font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--ink-on-dark) }

.svc__arrow{
  position:absolute; z-index:2; inset-block-end:var(--s5); inset-inline-end:var(--s5);
  overflow:hidden;
  width:40px; height:40px; border-radius:var(--r-pill);
  display:grid; place-items:center; color:var(--ink-on-dark);
  background:transparent; border:1px solid var(--line);
  transition:border-color var(--dur) var(--ease);
}
.svc__arrow::before{
  content:""; position:absolute; z-index:-1; inset:0;
  background:var(--accent); transform:translateX(-101%);
  transition:transform var(--dur-enter) var(--ease);
}
.svc:hover .svc__arrow::before,
.svc:focus-within .svc__arrow::before{ transform:translateX(0) }
.svc:hover .svc__arrow,
.svc:focus-within .svc__arrow{ border-color:var(--accent) }

/* ==========================================================
   S5 — AWARDS
   hover แถวไหน แถวนั้นคลี่รายละเอียด + ไฮไลต์ครีม-เหลือง
   แถวที่ไม่ได้ hover หดกลับเป็นแถวย่อ (ปี + ตรา + ชื่อ)
   ========================================================== */
.awards{ background:var(--bg); padding-block:var(--s8) }
@media (min-width:1024px){ .awards{ padding-block:var(--s9) } }

/* แถวหัวข้อ + ปุ่ม "รางวัลทั้งหมด" ชิดขวา · เส้นขั้นบันไดผูกกับแถวนี้ จึงยาวเต็มความกว้างเหมือนเดิม */
.awards__head{
  position:relative; display:flex; flex-wrap:wrap;
  align-items:flex-end; justify-content:space-between; gap:var(--s5);
}
/* ปุ่มอยู่กึ่งกลางแนวตั้งของหัวข้อสองบรรทัด
   หัวข้อมีลูกเล่นไหลขึ้น (.lr) — บรรทัดสุดท้ายมีที่ว่างล่องหน .3em ใต้ตัวหนังสือ
   (เผื่อไม่ให้หัวตัวอักษรโดนตัดตอนเคลื่อนไหว) กล่องหัวข้อจึงสูงกว่าตัวหนังสือจริง
   ใส่ margin ล่างให้ปุ่มเท่าที่ว่างนั้น → จุดกึ่งกลางตรงกับกึ่งกลางตัวหนังสือพอดี
   เฉพาะตอนปุ่มอยู่แถวเดียวกับหัวข้อ — มือถือปุ่มตกลงบรรทัดใหม่ */
.awards__head .btn{ flex:none }
@media (min-width:768px){
  .awards__head{ align-items:center }
  .awards__head .btn{ margin-block-end:calc(var(--fs-h2) * .3) }
}
/* เส้นขั้นบันไดตกแต่ง — เส้นล่างซ้าย → ทแยงลาดขึ้น → เส้นบนขวา
   หมายเหตุ: เส้นของ linear-gradient ตั้งฉากกับแกนเสมอ
   แกน to bottom right จึงได้เส้น "/" (ลาดขึ้นไปทางขวา)
   ถ้าใช้ to top right จะได้ "\\" ลาดลง แล้วปลายเส้นต่อกับเส้นตรงสองข้างไม่ติด */
@media (min-width:1024px){
  .awards__head::after{
    content:""; position:absolute; inset-inline:0; inset-block-start:calc(100% + var(--s5)); height:106px;
    pointer-events:none;
    background:
      linear-gradient(var(--line),var(--line)) 0 100% / 300px 1px no-repeat,
      linear-gradient(to bottom right, transparent calc(50% - 1px), var(--line) 50%, transparent calc(50% + 1px)) 300px 0 / 144px 106px no-repeat,
      linear-gradient(var(--line),var(--line)) 444px 0 / calc(100% - 444px) 1px no-repeat;
  }
}
/* เส้นเหลืองวิ่ง — ดาวหางวิ่งจากซ้ายไปขวาตามเส้นขั้นบันได (รวมช่วงทแยง) แล้วพักสั้น ๆ ค่อยวนใหม่
   วางตำแหน่งเดียวกับ ::after เป๊ะ · pathLength=100 ทำให้ความยาวขีดเป็น % ของเส้นทั้งเส้นทุกขนาดจอ
   หางไล่จาง = ซ้อน 3 เส้น (หางยาวจาง → กลาง → หัวสั้นสว่าง) ปลายหน้าทุกเส้นตรงกันเสมอ
   เพราะ offset เริ่มที่ --len ของแต่ละเส้น แล้วเลื่อนไปเท่ากันทุกเส้น (100 + หางยาวสุด 18) */
.awards__steps{ display:none }
@media (min-width:1024px){
  .awards__steps{
    display:block; position:absolute; inset-inline:0; inset-block-start:calc(100% + var(--s5));
    width:100%; height:106px; overflow:visible; pointer-events:none;
  }
  .awards__steps-run{
    --len:6px;
    fill:none; stroke:var(--amber); stroke-width:2; stroke-linecap:round;
    stroke-dasharray:var(--len) 200px;
    animation:steps-run 9s cubic-bezier(.65,0,.35,1) infinite;
  }
  /* หางไล่ทึบเป็นขั้น — ไม่ใช้ blur/เงา เพราะบนพื้นขาวจะดูเลอะ ไม่คม */
  .awards__steps-run--tail{ --len:18px; opacity:.28 }
  .awards__steps-run--mid { --len:11px; opacity:.6 }
  .awards__steps-run--head{ --len:5px;  stroke:#F2B600 }
}
/* 0–82% วิ่ง (ออกตัวนุ่ม ผ่อนก่อนถึงปลาย) · 82–100% พักนอกเส้นก่อนรอบใหม่ */
@keyframes steps-run{
  0%   { stroke-dashoffset:var(--len) }
  82%  { stroke-dashoffset:calc(var(--len) - 118px) }
  100% { stroke-dashoffset:calc(var(--len) - 118px) }
}
@media (prefers-reduced-motion:reduce){ .awards__steps{ display:none } }

.awards__grid{ margin-block-start:var(--s8); display:grid; gap:var(--s7) }
@media (min-width:1024px){
  .awards__grid{ margin-block-start:var(--s10); grid-template-columns:246px minmax(0,1fr); gap:var(--s9); align-items:start }
}

/* เวทีตรารางวัล — กล่องขนาดคงที่ สลับด้วย opacity/transform เท่านั้น ไม่แตะ layout */
.awards__badge{ position:relative; z-index:1; display:grid; place-items:center; min-height:200px }
@media (min-width:1024px){
  /* เส้นขั้นบันไดตกแต่งพาดอยู่เหนือกรอบนี้พอดี ถ้าปล่อยให้ตราจัดกลางในกรอบสูงคงที่
     ตราใบที่สูงสุด (โล่ TK 246x320) จะเต็มกรอบจนขอบบนไปทับเส้น
     และตราแต่ละใบสูงไม่เท่ากัน ขอบบนจึงขยับทุกครั้งที่สลับ
     แก้เป็น: ชิดบนทุกใบ (ขอบบนตรงกันเสมอ) + ปล่อยความสูงตามเนื้อหา
     + เว้นจากเส้น 32px ให้เป็นระยะที่ตั้งใจ ไม่ใช่เศษที่เหลือ */
  .awards__badge{
    align-items:start; justify-items:center;
    min-height:0; padding-block-start:var(--s6);
  }
}
/* มือถือ/แท็บเล็ต — ซ่อนตราใหญ่บนเวที: ซ้ำกับตราเล็กที่อยู่ในแต่ละแถวของลิสต์อยู่แล้ว
   และกินความสูงไป ~368px (ตรา 320 + ช่องไฟ 48) โดยไม่ได้บอกข้อมูลเพิ่ม
   ยังเก็บ DOM ไว้ เพราะ JS ผูกตรา↔แถวไว้ด้วยลำดับ (toBox คืน null เมื่อกรอบกว้าง 0 → ข้ามอนิเมชันเอง) */
@media (max-width:1023px){ .awards__badge{ display:none } }
/* ตราบนเวทีไม่ "วาร์ป" — JS จะวัดตำแหน่ง/ขนาดของตราเล็กในแถว
   แล้วสั่งให้ตราใหญ่เริ่มต้นทับตราเล็กพอดี ก่อนปล่อยกลับมาที่เดิม
   ผลคือตราค่อย ๆ ขยายและเลื่อนมาทางซ้าย · transform อย่างเดียว ไม่มีงาน layout
   transform จึงถูกคุมด้วย inline style จาก JS ห้ามใส่ค่า transform ตั้งต้นที่นี่ */
.award__logo{
  grid-area:1/1; width:100%; max-width:246px; height:auto;
  opacity:0; pointer-events:none; transform-origin:50% 50%; will-change:transform, opacity;
  transition:opacity var(--dur-travel) var(--ease), transform var(--dur-travel) var(--ease-move);
}
/* ขาเข้าโผล่เร็วกว่าเล็กน้อย จะได้เห็นตัวเองตอนกำลังเดินทาง
   ขาออกจางพร้อมกับที่ย่อลงไปนั่งที่แถวพอดี (ใช้ค่าเท่ากับ --dur-travel) */
.award__logo.is-on{ opacity:1; transition:opacity var(--dur-enter) var(--ease), transform var(--dur-travel) var(--ease-move) }

/* --- ลิสต์รางวัล ------------------------------------------------
   hover แถวไหน แถวนั้นกางรายละเอียดออก "ตรงตำแหน่งเดิม" ไม่ย้ายไปไหน
   แถวอื่นหดเป็นแถวย่อ เหลือ ปี + ตรา + ชื่อ

   ทำไมของใต้ลิสต์ถึงไม่ขยับ:
   มีแถวกางอยู่ "หนึ่งแถวเสมอ" ผลรวมจึงเท่ากับ กาง + ย่อ + ย่อ ตลอดเวลา
   ไม่ว่าแถวไหนจะเป็นคนกาง และกล่องรายละเอียดวาง position:absolute
   ความสูงแถวที่กางจึงเท่ากับ --award-row เป๊ะ ไม่ยืดตามความยาวข้อความ

   แถวที่ต้องเลื่อนขึ้น/ลงเพราะเพื่อนหดหรือกาง จะไหลด้วย transform ล้วน (FLIP ใน home.js)
   ⛔ ห้าม transition height / min-height / grid-template-* ในบล็อกนี้
   --------------------------------------------------------------- */
/* เส้นบนสุดอยู่ที่ตัวลิสต์ แล้วให้ทุกแถวมีเส้นล่างเส้นเดียวเท่ากัน
   ถ้าแถวสุดท้ายมีทั้งเส้นบนและเส้นล่าง มันจะสูงกว่าเพื่อน 1px
   แล้วผลรวมความสูงจะขยับ 1px เวลาแถวสุดท้ายเป็นคนกาง */
.awards__list{ display:grid; border-block-start:1px solid var(--line) }
.award{
  position:relative; isolation:isolate;
  display:grid; gap:var(--s3) var(--s5); align-items:center;
  padding-block:var(--s5); padding-inline:var(--s4);
  border-block-end:1px solid var(--line);
  background-color:var(--bg);   /* ทึบไว้ ตอนแถวไหลสลับกันจะได้ไม่ทะลุซ้อน */
  grid-template-columns:56px 96px minmax(0,1fr);
}
.award > *{ position:relative; z-index:1 }

/* ระหว่างไหลเข้าที่ แถวต้องอยู่เหนือเพื่อน · แถวที่กำลังกางอยู่บนสุด */
.award.is-flip{ z-index:2; will-change:transform; transition:transform var(--dur-move) var(--ease-move) }
.award.is-flip--lead{ z-index:3 }
@media (prefers-reduced-motion:reduce){ .award.is-flip{ transition:none } }

.award::after{
  content:""; position:absolute; z-index:0; inset:0; pointer-events:none;
  background-image:linear-gradient(to right, transparent, var(--tint-award));
  opacity:0; transition:opacity var(--dur-enter) var(--ease);
}
.award.is-active::after{ opacity:1 }
/* มือถือ/แท็บเล็ต — ปล่อยไฮไลต์วิ่งทะลุขอบขวาจอ ไม่ต้องจบคาอยู่ในกรอบ container
   (ยืดเฉพาะแผ่นเกรเดียน ตัวแถวยังอยู่ในกริดเดิม ข้อความจึงไม่ขยับ) */
@media (max-width:1023px){
  .award::after{ inset-inline-end:calc(var(--gutter) * -1) }
}

.award__hit{ position:absolute; inset:0; z-index:2; border-radius:var(--r) }

.award__year{
  font-family:var(--font-display); font-size:var(--fs-card); line-height:var(--lh-card);
  font-weight:600; color:var(--ink-body); text-align:center;
  transition:color var(--dur) var(--ease);
}
.award.is-active .award__year{ color:var(--ink) }

/* ตราในแถวที่กางอยู่จะจางหาย เพราะตัวใหญ่ไปอยู่บนเวทีซ้ายแล้ว
   height คงที่ + width:auto → เบราว์เซอร์คิดความกว้างจาก aspect-ratio
   ในแอตทริบิวต์ได้ตั้งแต่ก่อนรูปโหลดเสร็จ ถ้าปล่อย auto ทั้งคู่ กรอบจะเป็น 0x0
   แล้ว FLIP ของตราจะวัดจุดเริ่มต้นไม่ได้ */
.award__mark{
  display:grid; place-items:center; min-height:72px;
  transition:opacity var(--dur-enter) var(--ease);
}
.award__mark img{ max-width:120px; height:72px; width:auto; object-fit:contain }

.award__name{
  font-family:var(--font-display); font-size:var(--fs-card); line-height:var(--lh-card);
  font-weight:600; color:var(--ink-body);
  transition:color var(--dur) var(--ease);
}
.award.is-active .award__name{ color:var(--ink) }
.award__sub{ margin-block-start:var(--s2); font-size:var(--fs-body); line-height:var(--lh-body); font-weight:600; color:var(--ink-body) }
.award__note{ margin-block-start:var(--s3); font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--ink-body) }

/* จอเล็ก/จอสัมผัส: ไม่มี hover → ตั้งต้นพับทุกแถว เห็นแค่ ปี · ตรา · ชื่อ
   กดแถวไหน แถวนั้นขยายความสูงแล้วรายละเอียดค่อยจาง ๆ ขึ้นมา (คุมสถานะ is-active ด้วย home.js)

   ยืดด้วย grid-template-rows 0fr→1fr ไม่ใช่ max-height เพราะมันไหลไปหยุดที่
   "ความสูงจริง" ของเนื้อหาพอดี ไม่ต้องเดาตัวเลขเผื่อไว้ แล้วตอนพับก็ไม่มีช่วงหน่วงค้าง */
@media (max-width:767px){
  .award{ grid-template-columns:72px minmax(0,1fr); align-items:start }
  /* ปี · ชื่อ · รายละเอียด เรียงอยู่คอลัมน์เดียวกันทางขวา · ตราอยู่คอลัมน์ซ้าย
     ตราสแปนสองแถวแล้วจัดกึ่งกลางแนวตั้ง จะได้ไม่ลอยไปชนบรรทัดบน */
  .award__year{ grid-column:2; grid-row:1; text-align:start }
  .award__mark{ grid-column:1; grid-row:1 / span 2; align-self:center }
  .award__body{ grid-column:2; grid-row:2; display:grid; grid-template-rows:auto 0fr; transition:grid-template-rows var(--dur-enter) var(--ease) }
  .award.is-active .award__body{ grid-template-rows:auto 1fr }

  /* min-height:0 + overflow:hidden คือเงื่อนไขที่ทำให้ช่อง 0fr ยุบได้จริง */
  .award__more{
    overflow:hidden; min-height:0;
    opacity:0; transition:opacity var(--dur) var(--ease);
  }
  /* หน่วงให้ขอบแถวขยายก่อน แล้วตัวหนังสือค่อยโผล่ */
  .award.is-active .award__more{ opacity:1; transition-delay:120ms }

  @media (prefers-reduced-motion:reduce){
    .award__body, .award__more{ transition:none }
  }
}

@media (min-width:768px){
  .award{
    grid-template-columns:94px 140px minmax(0,1fr);
    align-items:start; min-height:var(--award-row-sm);
  }
  .award__mark{ align-self:center }
  .award.is-active{ min-height:var(--award-row) }
  .award.is-active .award__mark{ opacity:0 }
  /* ต้องระบุ grid-row:1 ด้วย ไม่งั้นช่องที่สแปนคอลัมน์ 2-3 จะชนกับช่องตรา
     แล้ว auto-placement จะดันทั้งก้อนไปอยู่กริดแถวที่สอง (ตราจางหายแล้วก็จริง
     แต่ยังกินที่อยู่) ข้อความจึงถูกดันลงไปล้นท้ายแถว */
  .award.is-active .award__body{ grid-column:2 / -1; grid-row:1 }
  .award.is-active .award__name{ font-size:var(--fs-h3); line-height:var(--lh-h3) }

  /* กล่องรายละเอียดลอยใต้ชื่อ ไม่คิดความสูงให้แถว
     ความสูงแถวที่กางจึงเท่ากับ --award-row เสมอ ไม่ว่าข้อความจะยาวแค่ไหน */
  .award__body{ position:relative }
  .award__more{
    position:absolute; inset-block-start:100%; inset-inline:0;
    opacity:0; pointer-events:none;
    transition:opacity var(--dur-enter) var(--ease);
  }
  /* หน่วงให้แถวไหลเข้าที่ก่อน แล้วรายละเอียดค่อยปรากฏ */
  .award.is-active .award__more{ opacity:1; transition-delay:160ms }
}

/* ⚠️ --award-row ต้องไม่น้อยกว่าความสูงเนื้อหาจริงของแถวที่กาง
   ไม่งั้นข้อความจะล้นลงไปทับแถวถัดไป (เพราะกล่องรายละเอียดเป็น absolute)
   วัดไว้แล้วทุก breakpoint: เนื้อหาสูงสุด 156px ที่ 1024 (ช่วงที่แคบที่สุด
   เพราะเสียคอลัมน์ซ้าย 246px ให้เวทีตรารางวัล) ค่า 184 จึงเหลือที่ว่าง 28px
   ถ้าแก้ข้อความ sub/note ให้ยาวขึ้น ต้องวัดใหม่แล้วขยับค่านี้ด้วย */


/* ==========================================================
   S6 — CLIENT VOICE (สไลด์เสียงลูกค้า)
   ========================================================== */
.voice{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--bg-dark); color:var(--ink-on-dark);
  /* ระยะบน = ระยะล่างที่ "มองเห็น" และทั้งส่วนต้องไม่สูงเกิน 1 หน้าจอ
     - ระยะ = ที่ว่างที่เหลือของจอหารครึ่ง · 620px ≈ header 72 + หัวข้อ/การ์ด/ปุ่ม ~540 + เผื่อ
       (ต่ำสุด 24 · สูงสุด 128) — จอเตี้ยระยะจะหดลงเอง ไม่ล้นจอ
     - ล่างบวกเพิ่ม 32px เพราะส่วนติดต่อเรา (.contact) ดึงขึ้นมาทับ 32px (margin-top ติดลบ) */
  --voice-pad:clamp(var(--s5), calc((100svh - 620px) / 2), var(--s10));
  padding-block:var(--voice-pad) calc(var(--voice-pad) + var(--s6));
}

.voice__media{ position:absolute; z-index:0; inset:0; opacity:.3; pointer-events:none }
.voice__media img{ width:100%; height:100%; object-fit:cover }

.voice__inner{ position:relative; z-index:1 }
.voice__title{ text-align:center; color:var(--ink-on-dark); padding-inline:var(--gutter) }

/* --per-view = จำนวนกล่องที่เห็นพร้อมกัน · JS อ่านค่านี้ไปคำนวณระยะเลื่อน */
/* ไม่ใช้ mask-image ไล่ขอบ เพราะ mask บน ancestor ทำให้ backdrop-filter ของการ์ด
   หลุดหายระหว่างที่รางกำลังเลื่อน (ทดสอบแล้วการ์ดหายทั้งแถบ)
   ใช้วิธีเฟดตัวการ์ดเองแทน — ดูหัวข้อ .quote ด้านล่าง */
.voice__viewport{
  --per-view:1; --gap:var(--s5);
  margin-block-start:var(--s7); overflow:hidden;
  width:100%; max-width:var(--container); margin-inline:auto;
  padding-inline:var(--gutter);
}
@media (min-width:768px){  .voice__viewport{ --per-view:2 } }
@media (min-width:1024px){ .voice__viewport{ --per-view:3; --gap:var(--s6) } }

.voice__track{
  display:flex; gap:var(--gap);
  transition:transform 600ms var(--ease);
}
/* ตอนตัดกลับไปต้นรอบต้องไม่มี transition ไม่งั้นจะเห็นภาพรูดย้อนกลับ */
.voice__track.is-snapping,
.voice__track.is-snapping .quote{ transition:none }
/* ลากปัด: แนวตั้งยังเลื่อนหน้าได้ · ระหว่างลากรางต้องตามนิ้วทันที (ไม่มี transition)
   แต่ความทึบของการ์ดยังเฟดตามปกติ */
.voice__viewport{ touch-action:pan-y; cursor:grab }
.voice__track{ user-select:none; -webkit-user-select:none }
.voice__track.is-dragging{ transition:none; cursor:grabbing }
.voice__track.is-dragging > .quote{ scale:1 }

/* กว้างพอดี --per-view ใบต่อหนึ่งหน้าจอ ไม่มีใบที่ 4 โผล่ครึ่งใบ
   เฉพาะใบที่อยู่ในกรอบเท่านั้นที่ทึบ — ใบที่กำลังเลื่อนออก/เข้าจะจางไปพร้อมกับการเลื่อน
   จึงไม่เห็นขอบภาพตัดกลางทาง (JS เป็นคนสลับ .is-on) */
.quote{
  position:relative; min-height:313px;
  flex:0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  padding:var(--s6);   /* เท่ากันทุกด้าน — เดิมบน 24 / ล่าง 32 ดูไม่สมดุล */
  border-radius:var(--r-card); background:var(--glass-card);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
/* ความทึบคุมด้วย inline style จาก slider() — slider เป็นเจ้าของการมองเห็นการ์ดชุดนี้
   ต้องเจาะจงกว่า .js .fade-in ของ scroll reveal ไม่งั้นจะโดนยืม transition-delay
   แบบ stagger มาใช้ แล้วจังหวะเฟดจะไม่ตรงกับจังหวะเลื่อน */
.voice__track > .quote{
  transition:opacity 600ms var(--ease), scale var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
  transition-delay:0s;
}
.voice__track > .quote:hover{ scale:1.012 }
/* ก้อนโปรไฟล์ — วงกลมตัวย่อชื่อ วางคู่กับชื่อ+ตำแหน่ง */
.quote__who{ display:flex; align-items:center; gap:var(--s3) }
/* การ์ดเรียงข้างกัน — จองความสูงชื่อ 1 บรรทัด + ตำแหน่งสูงสุด 3 บรรทัด
   เครื่องหมายคำพูดทุกใบจึงอยู่ระดับเดียวกัน ไม่ว่าตำแหน่งจะยาวกี่บรรทัด
   ชิดบนเพื่อให้ชื่อทุกใบอยู่แนวเดียวกันด้วย */
@media (min-width:768px){
  .quote__who{ align-items:flex-start; min-height:calc(var(--lh-body) + var(--s1) + 3 * var(--lh-mono-xs)) }
}
.quote__id{ min-width:0 }
.quote__avatar{
  width:48px; height:48px; flex:none;
  display:grid; place-items:center; border-radius:var(--r-pill);
  background:var(--glass-light); color:var(--ink);
  font-family:var(--font-mono); font-size:var(--fs-sm); line-height:var(--lh-sm);
  font-weight:500; letter-spacing:.06em;
}
/* ช่องรูปจริง — วางทับตัวย่อ · ไม่มีไฟล์ JS จะลบ <img> ทิ้ง ตัวย่อจึงโผล่แทน
   ดู assets/images/avatars/README.md */
.quote__avatar{ position:relative; overflow:hidden }
.quote__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit }
.quote__name{ font-size:var(--fs-body); line-height:var(--lh-body); font-weight:600; color:var(--ink-on-dark) }
.quote__org{ margin-block-start:var(--s1); color:var(--ink-on-dark); text-transform:uppercase }
.quote__mark{ width:20px; height:20px; margin-block-start:var(--s5); color:var(--accent) }
.quote__text{ margin-block-start:var(--s3); font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--ink-on-dark); text-align:justify }

/* มือถือ — ย่อกล่องลง: การ์ดกินเกือบเต็มจอเพราะ padding ชุดเดสก์ท็อป
   ลด padding รอบกล่อง (ข้อความได้ความกว้างคืน 16px เลยตัดบรรทัดน้อยลง)
   แล้วบีบระยะห่างระหว่างชื่อ → เครื่องหมายคำพูด → ข้อความให้กระชับขึ้น */
@media (max-width:767px){
  .quote{ min-height:0; padding:var(--s5) }
  .quote__mark{ margin-block-start:var(--s3) }
  /* 14/22 แทน 14/24 — ยังอ่านสบาย (1.57) แต่ย่อหน้ายาว 7 บรรทัดสั้นลงอีก 14px */
  .quote__text{ margin-block-start:var(--s2); line-height:22px }
}

/* ปุ่มเลื่อน — ใต้กรอบข้อความ แยกไปสุดมุมซ้ายและมุมขวา */
.voice__nav{
  position:relative; z-index:3;
  width:100%; max-width:var(--container); margin-inline:auto;
  margin-block-start:var(--s6); padding-inline:var(--gutter);
  /* ปุ่มย้อน/ถัดไปอยู่คู่กันกลางจอ ให้ตรงแกนเดียวกับหัวข้อที่จัดกลาง
     เดิม space-between ดันไปสุดสองข้าง ห่างกันเกือบเต็มความกว้าง container */
  display:flex; justify-content:center; gap:var(--s4);
}

/* ไม่ต้องมีเกรเดียนขอบแล้ว เพราะกล่องลงพอดีหน้าจอ ไม่มีใบโผล่ครึ่งใบให้ต้องกลืน */
.voice__viewport{ position:relative }

/* ==========================================================
   S7 — CONTACT (ไล่เฉดเหลือง → เข้ม ทับภาพ)
   ========================================================== */
.contact{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--amber); color:var(--on-amber);
  margin-block-start:calc(var(--s6) * -1);
  padding-block:var(--s8) var(--s9);
}
@media (min-width:1024px){ .contact{ padding-block:var(--s9) var(--s10) } }

.contact__media{ position:absolute; z-index:0; inset:0; pointer-events:none }
.contact__media img{ width:100%; height:100%; object-fit:cover }
.contact__wash{ position:absolute; inset:0; background:var(--wash-contact) }

/* เดิมดันทุกอย่างไปชิดขวาหมด น้ำหนักเลยเทไปข้างเดียว
   จัดใหม่เป็นสองคอลัมน์: หัวข้ออยู่ซ้าย ฟอร์มอยู่ขวา ตามจังหวะอสมมาตรของหน้าอื่น */
.contact__inner{ position:relative; z-index:1 }
/* สองคอลัมน์ตั้งแต่ 1024 ขึ้นไป (เดิมเริ่ม 1280 — จอ 1024-1279 เลยเรียงบนลงล่าง ฟอร์มยืดเต็มจอดูแปลก)
   1024-1279: แบ่งสัดส่วน 5:7 + ช่องไฟ 48 — ที่ 1024 หัวข้อได้ ~387px ฟอร์ม ~541px
   (ถ้าใช้ฟอร์ม 640 ตายตัวแบบจอใหญ่ หัวข้อจะเหลือแค่ ~225px ตัดบรรทัดเละ)
   1280 ขึ้นไป: ฟอร์มกว้างคงที่ 640 ช่องไฟ 96 ตามเดิม */
@media (min-width:1024px){
  .contact__inner{
    display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    gap:var(--s7);
    align-items:start;
  }
  .contact__inner > .form{ margin-block-start:0 }
}
@media (min-width:1280px){
  .contact__inner{ grid-template-columns:minmax(0,1fr) minmax(0,640px); gap:var(--s9) }
}

.contact__title{
  font-family:var(--font-display); font-size:var(--fs-hero); line-height:var(--lh-hero);
  font-weight:700; color:var(--on-amber);
}
@media (min-width:1024px){
  .contact__title{
    max-width:460px;
    /* ตัดช่องว่างครึ่งบนของบรรทัดแรก (half-leading) ออก ยอดตัวอักษรจะได้เสมอ
       กับขอบบนของช่องกรอกแถวแรก ไม่ใช่ลอยต่ำลงมาตามกล่องบรรทัด
       คิดจากโทเคน ไม่ใส่ตัวเลขดิบ จะได้ขยับตามเองถ้าสเกลตัวอักษรเปลี่ยน */
    margin-block-start:calc((var(--lh-hero) - var(--fs-hero)) / -2);
  }
}
.contact__sub{
  display:block; margin-block-start:var(--s2);
  font-size:var(--fs-h2); line-height:var(--lh-h2); font-weight:300;
  /* เดิมเป็น --ink-body (เทา) ซึ่งจมหายบนช่วงที่พื้นเริ่มเข้ม
     ใช้โทนดำจาง ๆ บนพื้นเหลืองแทน — ตอนนี้ไล่เฉดคุมให้ช่วงนี้ยังเป็นเหลืองอยู่ */
  color:var(--ink-on-amber-muted);
}
/* มือถือ: 28px ใหญ่เกือบเท่าหัวข้อ (36px) แย่งสายตา — ลดเป็นขนาด h3 (20/28) */
@media (max-width:767px){ .contact__sub{ font-size:var(--fs-h3); line-height:var(--lh-h3) } }
/* เดสก์ท็อป: 40px ใหญ่ไปนิดเมื่อวางคู่หัวข้อ 62px — ลดเป็น 32/44 */
@media (min-width:1024px){ .contact__sub{ font-size:32px; line-height:44px } }
/* ไม่ให้ตัดกลางคำ "เส้นทาง" — วลีท้ายนี้ขึ้นบรรทัดใหม่ทั้งก้อนถ้าไม่พอ */
.contact__sub-keep{ white-space:nowrap }

/* ---- ฟอร์มกระจก ---- */
.form{ margin-block-start:var(--s7); display:grid; gap:var(--s6) var(--s5) }
@media (min-width:768px){
  .form{ grid-template-columns:repeat(2,1fr) }
  .form__field--full, .form__foot, .form__ok{ grid-column:1 / -1 }
}
.form__field{ position:relative; display:flex; flex-direction:column; gap:var(--s2) }
/* ช่องกรอกพาดอยู่ทั้งช่วงพื้นเหลืองและพื้นเข้ม ตัวอักษรสีเดียวจึงอ่านไม่ออกข้างใดข้างหนึ่ง
   แก้ด้วยการให้แผงเป็นกระจกสว่างแล้วใช้ตัวอักษรเข้ม — อ่านออกทั้งสองพื้น */
.form__input{
  width:100%; min-height:48px; padding:var(--s2) var(--s5);   /* ซ้าย-ขวา 24px (เดิม 32 ข้อความเยื้องเข้าไปลึกเกิน) */
  background:var(--glass-light); color:var(--on-amber);
  border:1px solid transparent; border-radius:var(--r-glass);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:var(--fs-lead); line-height:var(--lh-lead);
  transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
/* --ink-on-amber-muted (ดำ 64%) บนแผงครีมได้ contrast แค่ ~4.0 ไม่ถึงเกณฑ์ 4.5
   ใช้ --ink-body แทน ได้ ~6.2 และยังอ่านเป็นสีจาง ๆ แบบ placeholder อยู่ */
.form__input::placeholder{ color:var(--ink-body); opacity:1 }
.form__input:hover{ border-color:var(--on-amber) }
.form__input:focus-visible{ border-color:var(--on-amber) }
/* ปุ่มเติมข้อมูลอัตโนมัติของเบราว์เซอร์ (ไอคอนรูปคน + ลูกศร ที่โผล่ในช่องกรอก)
   ซ่อนทิ้ง — มันวางทับดีไซน์และปรับสีตามธีมไม่ได้
   ยังคงแอตทริบิวต์ autocomplete ไว้ครบ (WCAG 1.3.5 Identify Input Purpose)
   ผู้ใช้จึงยังเติมอัตโนมัติได้จากรายการที่เด้งขึ้นมาตอนพิมพ์ */
.form__input::-webkit-contacts-auto-fill-button,
.form__input::-webkit-credentials-auto-fill-button{
  visibility:hidden; pointer-events:none;
  position:absolute; inset-inline-end:0; width:0; height:0; margin:0;
}

/* appearance:none ถอดลูกศรของระบบไปด้วย ต้องวางลูกศรเองกลับเข้าไป
   ใช้ ic-chevron ตัวเดียวกับเมนูหลัก จะได้เป็นภาษาเดียวกันทั้งหน้า */
.form__select{ appearance:none; cursor:pointer; padding-inline-end:var(--s8) }
.form__caret{
  position:absolute; inset-block-start:14px; inset-inline-end:var(--s5);
  width:20px; height:20px; flex:none; pointer-events:none;
  /* ช่องกรอกเป็นแผงครีม ตัวอักษรสีดำ (--on-amber) ลูกศรจึงต้องเป็นโทนเข้ม
     ใช้ --ink-body ให้เท่ากับสี placeholder ที่อยู่ข้าง ๆ กัน */
  color:var(--ink-body);
}
/* จอแคบ: ขยับลูกศรชิดขอบขึ้น แล้วลดระยะเว้นท้ายช่องตาม คืนพื้นที่ให้ข้อความ 16px */
@media (max-width:767px){
  .form__caret{ inset-inline-end:var(--s4) }
  .form__select{ padding-inline-end:var(--s7) }
}
.form__select option{ color:var(--ink) }

/* ---- Custom select (JS สร้างปุ่ม + รายการ แทนรายการของระบบ) ----
   ปุ่มใช้หน้าตาเดียวกับช่องกรอก · ยังไม่เลือก = สีเดียวกับ placeholder
   รายการเป็นแผงขาวทึบ (ไม่ใช่กระจก) เพราะลอยทับช่องอื่น ต้องอ่านง่าย */
.form__select-btn{ display:flex; align-items:center; text-align:start }
.form__select-value{ min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
.form__select-btn.is-empty{ color:var(--ink-body) }
.form__caret{ transition:transform var(--dur) var(--ease) }
.form__field.is-open{ z-index:20 }
.form__field.is-open .form__select-btn{ border-color:var(--on-amber) }
.form__field.is-open .form__caret{ transform:rotate(180deg) }

.form__menu{
  position:absolute; z-index:20; inset-inline:0; inset-block-start:calc(100% + var(--s2));
  max-height:min(360px, 60vh); overflow-y:auto; overscroll-behavior:contain;
  padding:var(--s2);
  background:var(--bg); color:var(--on-amber);
  border:1px solid var(--line); border-radius:var(--r-glass);
  box-shadow:var(--shadow-pop);
  animation:menu-in var(--dur) var(--ease);
}
@keyframes menu-in{ from{ opacity:0; transform:translateY(-4px) } }
.form__option{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  min-height:44px; padding-inline:calc(var(--s5) - var(--s2)) var(--s4);   /* ตรงแนวตัวอักษรในช่องกรอก (24 = padding ของรายการ 8 + 16) */
  border-radius:calc(var(--r-glass) - var(--s2));
  font-size:var(--fs-body); line-height:var(--lh-body);
  cursor:pointer;
  transition:background-color var(--dur) var(--ease);
}
.form__option.is-active{ background:var(--hover-on-amber) }
.form__option[aria-selected="true"]{ font-weight:600 }
/* ตัวที่เลือกอยู่ — เครื่องหมายถูกสีแดงแบรนด์ แบบเดียวกับจุดแดงในป็อปอัพสายด่วน */
.form__option-check{ width:18px; height:18px; flex:none; color:var(--accent); visibility:hidden }
.form__option[aria-selected="true"] .form__option-check{ visibility:visible }
.form__textarea{ min-height:180px; padding-block:var(--s3); resize:vertical }

.form__err{ display:none; font-size:var(--fs-mono); line-height:var(--lh-mono); color:var(--accent) }
.form__field.is-bad .form__input{ border-color:var(--accent) }
.form__field.is-bad .form__err{ display:block }

.form__foot{ display:flex; justify-content:flex-end }
@media (max-width:1023px){ .form__foot{ justify-content:center } }
.form__ok{
  display:none; gap:var(--s3); align-items:center;
  padding:var(--s4); border-radius:var(--r-glass);
  background:var(--glass-light); color:var(--on-amber);
  font-size:var(--fs-sm); line-height:var(--lh-sm);
}
.form__ok.is-on{ display:flex }