/* ==========================================================================
   Design tokens — สกัดจาก Healtch kit (Home.png) ด้วยการ sample พิกเซลจริง
   ========================================================================== */

/* --- Fonts ------------------------------------------------------------------
   self-host ทั้งหมด ห้ามเรียก Google Fonts CDN — CDN เห็น IP ผู้ใช้ทุกคน (PDPA)
   และเพิ่ม DNS lookup + ไฟล์ที่บล็อกการ render

   ทั้งสองตัวเป็น variable font ไฟล์เดียวครอบคลุมทุกน้ำหนักในช่วงที่ประกาศไว้
   จึงไม่ต้องมีไฟล์แยกต่อน้ำหนัก — ประกาศ `font-weight: 400 600` เป็นช่วง
   ถ้าอนาคตต้องใช้น้ำหนักนอกช่วงนี้ ให้ขยายเลขตรงนี้ ไม่ต้องโหลดไฟล์เพิ่ม

   แยกไฟล์ไทย/ละติน เพราะ unicode-range ทำให้เบราว์เซอร์โหลดเฉพาะชุดที่หน้านั้นใช้จริง
   หน้าไทยล้วนจะไม่โหลดไฟล์ละตินเลย
--------------------------------------------------------------------------- */

/* Anuphan — หัวข้อ */
@font-face {
  font-family: "Anuphan";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/anuphan-thai.woff2") format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
  font-family: "Anuphan";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/anuphan-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Noto Sans Thai — เนื้อหา */
@font-face {
  font-family: "Noto Sans Thai";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/noto-sans-thai-thai.woff2") format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
  font-family: "Noto Sans Thai";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/noto-sans-thai-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Color -------------------------------------------------------------
     พาเลตต์: navy / bronze / cream (แทนที่ชุด blue-grey ของ Healtch)
       #132035  navy   — ink, ปุ่มหลัก, footer, section มืด
       #a37f53  bronze — ไอคอน, เส้นคั่น, ปุ่มรอง
       #efe6da  cream  — พื้นหลัง section สลับ
       #fbfaf8  paper  — พื้นหลังหลัก + พื้นการ์ด

     คอนทราสต์ที่วัดแล้ว (WCAG):
       navy บน paper .......... 15.7  ผ่าน AAA
       navy บน cream .......... 13.2  ผ่าน AAA
       bronze บน paper ........  3.5  ผ่านเฉพาะข้อความใหญ่/เส้น/ไอคอน ไม่ผ่านข้อความปกติ
       bronze บน navy .........  4.5  ผ่าน AA
     ดังนั้น bronze ที่เป็นตัวหนังสือเล็ก (eyebrow, caption) ต้องใช้ --c-accent-text

     **แก้สองค่าเมื่อ 28 ส.ค. 2569 ตาม design-fixes.md ข้อ 3**

     1. cream #f6f0e9 → #efe6da
        ค่าเดิมห่างจาก paper #fbfaf8 แค่ราว 4 ระดับ จังหวะแถบสลับที่เป็นหัวใจ
        ของดีไซน์นี้จึงแทบมองไม่เห็นบนจอทั่วไป — เลื่อนหน้าแล้วเหมือนพื้นเดียวยาว
        ค่าใหม่ห่างพอให้เห็นเส้นแบ่ง แต่ยังอยู่ในโทนครีมเดิม ไม่ได้เพิ่มสีใหม่

     2. bronze-text #846437 → #7a5c36
        ค่าเดิมพอดีเส้นเกณฑ์ AA บน cream (4.8) พอ cream เข้มขึ้นตามข้อ 1
        มันจะหล่นต่ำกว่า 4.5 ทันที ค่าใหม่ได้ 5.0 บน cream ใหม่ · 5.9 บน paper
        (ตาเปล่าแทบแยกไม่ออกจากค่าเดิม เข้มขึ้นครึ่งขั้น)

     **--c-line ตั้งใจไม่แตะ** design-fixes ข้อ 3 ระบุให้เปลี่ยนสองค่านี้เท่านั้น
     เส้นขอบบนพื้น cream ใหม่จะจางลงเล็กน้อย (1.23 → 1.13) ซึ่งยังเห็นอยู่
     ถ้าวันหลังรู้สึกว่าเส้นหาย ให้มาเข้มที่ตัวแปรนี้ ไม่ใช่ไปแก้ที่ component
  ------------------------------------------------------------------------ */
  --c-brand:        #132035;
  --c-brand-dark:   #0b1524;   /* hover */
  --c-accent:       #a37f53;   /* ใช้กับเส้น ไอคอน ขอบ ข้อความใหญ่เท่านั้น */
  --c-accent-text:  #7a5c36;   /* ตัวหนังสือเล็กสีทองแดง — 5.9 บน paper, 5.0 บน cream */
  --c-accent-light: #c4a67f;   /* ทองแดงบนพื้นเข้ม — 7.1 บน navy */
  --c-canvas:       #efe6da;
  --c-surface:      #fbfaf8;
  --c-ink:          #132035;
  --c-ink-soft:     #5c6675;
  --c-ink-invert:   #fbfaf8;
  --c-night:        #132035;
  --c-line:         #e3d9cb;
  --c-focus:        #a37f53;   /* เห็นได้ทั้งบน navy และ cream */

  /* --- Typography ---------------------------------------------------------
     ฟอนต์ต้นฉบับเป็น geometric sans แบบ Latin-only
     คู่ที่ใกล้ที่สุดและมี glyph ไทยครบ: Anuphan (display) + Noto Sans Thai (body)
     ทางเลือก display: LINE Seed Sans TH — เรขาคณิตจัดกว่า ใกล้ต้นฉบับกว่าเล็กน้อย
  ------------------------------------------------------------------------ */
  --font-display: "Anuphan", system-ui, sans-serif;
  --font-body:    "Noto Sans Thai", "Anuphan", system-ui, sans-serif;

  /* น้ำหนักหัวข้อ — เจ้าของสั่งให้หนาขึ้นทั้งเว็บ 1 ก.ย. 2569 (เดิม 400)
     **ขัดกับข้อห้ามเดิมใน Design.md ที่ว่า "หัวข้อเป็น bold"** ซึ่งเขียนไว้ตอนยึด
     ตามดีไซน์ต้นฉบับที่ใช้หัวข้อน้ำหนักบางเป็นเอกลักษณ์ — เจ้าของตัดสินใจเปลี่ยนเอง
     แก้ข้อห้ามใน Design.md ให้ตรงกับของจริงแล้ว

     **600 คือเพดานจริงของไฟล์ฟอนต์** Anuphan ที่ self-host ไว้ประกาศช่วงน้ำหนัก
     400–600 ตั้งเกินกว่านี้เบราว์เซอร์จะสังเคราะห์ตัวหนาเอง (ลากเส้นให้อ้วนขึ้น)
     ซึ่งทำให้สระกับวรรณยุกต์ไทยบวมจนชนกัน ต้องโหลดไฟล์ฟอนต์ช่วงกว้างกว่านี้ก่อน
     ถึงจะขึ้นไปได้จริง

     หัวข้อทุกตัวในเว็บ (h1 h2 h3 .mo-display) ดึงค่าจากตัวนี้ตัวเดียว */
  --fw-display: 600;
  --fw-body:    400;
  --fw-strong:  600;

  /* ยกมาจากสกิน v2 ให้ใช้ทั้งเว็บ 24 ก.ย. 2569 — เดิมค่านี้อยู่ในบล็อก .mo-v2
     จึงมีผลเฉพาะหน้าแรก ค่าเก่าเขียนกำกับไว้ท้ายบรรทัด เผื่อต้องย้อน */
  --fs-hero:  clamp(2.25rem, 1.4rem + 4vw, 3.875rem);   /* H1 62px ตามสเปก v2 · เดิม clamp(2.5rem, 1.5rem + 4.2vw, 4rem) = 64px */
  --fs-h2:    clamp(1.75rem, 1.3rem + 2vw, 2.5rem);     /* H2 40px ตามสเปก v2 · เดิม clamp(1.9rem, 1.35rem + 2.3vw, 2.75rem) = 44px */
  --fs-h3:    clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem);
  --fs-lead:  clamp(1.0625rem, 1rem + 0.45vw, 1.25rem);  /* ย่อหน้านำใต้หัวข้อใหญ่ */
  --fs-body:  1.0625rem;
  --fs-num:   clamp(2rem, 1.5rem + 1.6vw, 2.75rem);      /* ตัวเลขลำดับขั้นตอน */
  --fs-small: 0.9375rem;
  --fs-micro: 0.75rem;   /* ชิปแคปซูลในหัวเว็บ (.mo-chip--pill) */

  /* เมนูหัวเว็บบนจอ ≥769px (25 ก.ย. 2569 · ตอนเพิ่มเมนู "ติดต่อเรา" เป็นรายการที่ 7)
     เดิมเป็น --fs-lead (20px) + ระยะในแคปซูล 1.1em (22px) ตายตัวทุกความกว้าง
     พอมี 7 รายการ เมนูตกสองบรรทัดตั้งแต่จอ 861 ถึง 1366px — โน้ตบุ๊กส่วนใหญ่
     → หดตามจอ แต่ **ถึงค่าเดิมพอดีที่ 1440px** จอใหญ่จึงหน้าตาเหมือนเดิมทุกพิกเซล
     วัดแล้วบรรทัดเดียวตั้งแต่ 1000px ขึ้นไป เหลือช่องห่างโลโก้ ≥42px
     ขั้นต่ำ 15px = ขนาดเมนูเดิมทั้งเว็บก่อน 23 ก.ย. 2569 (--fs-small) อ่านได้แน่
     **เพิ่มเมนูอีกรายการเมื่อไหร่ ต้องวัดใหม่** ช่องห่างที่ 1440 เหลือแค่ 43px */
  --fs-nav:  clamp(0.9375rem, 0.26rem + 1.1vw, 1.25rem);
  --nav-pad: clamp(0.25rem, -2.52rem + 4.33vw, 1.375rem);

  /* ป้ายอังกฤษเหนือหัวข้อของแต่ละ section (.mo-chip)
     เดิมฝังไว้ที่ component เป็น 0.875rem — ย้ายออกมาเป็น token เมื่อ 26 ส.ค. 2569
     ตอนเจ้าของขอให้ตัวใหญ่ขึ้น จะได้ปรับที่เดียวแล้วเปลี่ยนครบทุกหน้า

     **ค่าเดิม 0.875rem ไม่เคยถูกใช้จริง** กฎ .mo-head p ทับอยู่ ป้ายจึงขึ้นด้วย
     --fs-lead มาตลอด (20px บนเดสก์ท็อป · 17px บนมือถือ) เจ้าของเห็นเลขนั้นอยู่
     ค่าใหม่จึงต้องเทียบกับ --fs-lead ไม่ใช่เทียบกับ 0.875rem
     ตั้งเป็น clamp เพื่อให้ใหญ่ขึ้นทั้งจอเล็กจอใหญ่ (มือถือ 18px · เดสก์ท็อป 22px)
     ถ้าตั้งเป็นค่าคงที่ จอมือถือจะกระโดดขึ้นแรงกว่าจอใหญ่ */
  --fs-eyebrow: clamp(1.125rem, 1rem + 0.55vw, 1.375rem);

  /* สามค่าล่างยกมาจากสกิน v2 ให้ใช้ทั้งเว็บ 24 ก.ย. 2569
     --lh-tight กับ --ls-tight เป็นเรื่องภาษาไทยโดยตรง ไม่ใช่แค่รสนิยม
     สเปก v2 กำหนดหัวข้อไม่ต่ำกว่า 1.34 และ tracking ติดลบไม่เกิน -0.01em
     ซึ่ง**ตรงกับข้อบังคับเรื่องภาษาไทยใน Design.md** ที่ว่าสระบน-ล่างต้องมีที่หายใจ
     ค่าเดิม 1.28 / -0.015em แน่นกว่าเกณฑ์ทั้งคู่ = ของใหม่ถูกกว่าของเดิม */
  --lh-tight: 1.34;      /* หัวข้อ · เดิม 1.28 ซึ่งต่ำกว่าเกณฑ์ไทย */
  --lh-body:  1.8;       /* ไทยต้องการมากกว่าอังกฤษ สระ+วรรณยุกต์ซ้อนสองชั้น */
  --ls-tight: -0.01em;   /* เดิม -0.015em แน่นเกินสำหรับตัวไทย */
  --ls-eyebrow: 0.28em;  /* ป้ายอังกฤษกางกว่าเดิมมาก · เดิม 0.12em */

  /* --- Spacing ------------------------------------------------------------ */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6rem;
  /* ระยะบน-ล่างของทุก section — คุมจังหวะของทั้งหน้าจากจุดเดียว
     ระวัง: section ที่อยู่ติดกันต่างก็มีระยะนี้ทั้งคู่ ช่องว่างที่ตาเห็นจริง
     จึงเป็นสองเท่าของตัวเลขนี้เสมอ (7.5rem เดิม = เห็นเป็นช่องว่าง 15rem = 240px)
     ลดเหลือ 5rem เมื่อ 25 ส.ค. 2569 เพราะเจ้าของบอกว่าห่างเกินไป
     ตาเห็นเป็น 160px ซึ่งยังแยก section ออกจากกันได้ชัดโดยไม่ต้องเลื่อนจอเยอะ */
  /* **ยกมาจากสกิน v2 ให้ใช้ทั้งเว็บ 24 ก.ย. 2569** สเปก v2 ระบุระยะ "ระหว่าง"
     section 104-110px เดสก์ท็อป / 64-72px มือถือ ค่านี้ให้ 54.4 ต่อด้าน
     = ห่างจริง 108.8 บนเดสก์ท็อป และ 36 = 72 บนมือถือ ตรงสเปกพอดี
     **อ่านสเปกให้ดี 104-110 คือระยะระหว่าง ไม่ใช่ต่อด้าน** เคยอ่านผิดมาแล้วรอบหนึ่ง
     ตั้ง 104 เป็นค่าต่อด้าน แล้วสอง section ติดกันห่างจริง 208px หน้ายาว 9904px
     เดิม clamp(3rem, 2rem + 3.5vw, 5rem) = 80 ต่อด้าน = ห่างจริง 160px */
  --section-y: clamp(2.25rem, 1.5rem + 2.6vw, 3.4rem);

  /* ระยะระหว่างป้ายอังกฤษกับหัวข้อไทยที่อยู่ใต้มัน
     **ตัวเลขนี้ไม่ใช่ช่องว่างที่ตาเห็น** ฟอนต์ไทยกันที่ว่างเหนือตัวอักษรไว้เยอะ
     สำหรับสระบนกับวรรณยุกต์ที่ซ้อนกันสองชั้น ช่องว่างจริงจึงบวกเพิ่มอีกราว 30px เสมอ
     ไม่ว่าจะตั้งค่านี้เท่าไหร่ → ปรับแล้วต้องวัดจากภาพเรนเดอร์ อย่าเชื่อตัวเลขในไฟล์

     ปรับสองรอบเมื่อ 26 ส.ค. 2569 · 1.15rem → 0.15rem → 1.2rem
     **รอบสองเลขเกือบกลับไปเท่าเดิม แต่ช่องว่างจริงลดจาก 48px เหลือ 19px**
     เพราะรอบนั้นแก้ที่ต้นเหตุ ไม่ได้แก้ที่ตัวเลข
     ตัวป้ายเคยถือระยะใต้ตัวเองอยู่ 33px (ระยะเริ่มต้นของย่อหน้าจากธีมแม่
     ซึ่งคิดเป็นเท่าของขนาดตัวอักษร) ค่าใน token นี้จึงถูกระยะก้อนนั้นกลบมาตลอด
     ตอนนี้สั่งให้ป้ายเป็นศูนย์แล้ว ค่านี้เลยเป็นตัวคุมจริงตัวเดียว
     ช่องว่างที่วัดได้ ~19px ที่หัวข้อ section (เดิม 48px)

     **ใช้กับ margin เท่านั้น ห้ามเอาไปใส่ใน `gap` ของ grid หรือ flex**
     ค่านี้อาจถูกปรับเป็นค่าติดลบวันหลัง ซึ่ง `gap` รับไม่ได้
     ใส่แล้วเบราว์เซอร์ทิ้งทั้งบรรทัด ระยะด้านอื่นในบรรทัดเดียวกันจะหายไปเงียบ ๆ ด้วย */
  --eyebrow-gap: 1.2rem;

  /* --- Shape & motion ----------------------------------------------------- */
  /* **ยกมาจากสกิน v2 ให้ใช้ทั้งเว็บ 24 ก.ย. 2569 — ชุดนี้เปลี่ยนหน้าตาแรงที่สุด**
     การ์ดจากมุมมน 20px เหลือเกือบเหลี่ยม 6px และปุ่มจากแคปซูลกลมเหลือ 6px ด้วย
     สเปก v2 เขียนไว้ว่า 2px แต่เจ้าของขอ "อีกนิดเดียวพอ" เมื่อ 3 ก.ย. จึงเป็น 6px
     ช่องเล็ก ๆ ใช้ 4px เพราะ 6px บนกล่องเล็กจะดูมนเกินสัดส่วน
     **ถ้าจะย้อนเฉพาะเรื่องมุมโค้ง แก้สี่บรรทัดนี้กลับพอ ไม่ต้องแตะค่าอื่น** */
  --radius-card: 6px;    /* เดิม 20px */
  --radius-img:  6px;    /* เดิม 14px */
  --radius-sm:   4px;    /* เดิม 8px  */
  --radius-pill: 6px;    /* เดิม 999px (แคปซูลกลม) */
  --shadow-card: 0 2px 4px rgba(19, 18, 24, .04), 0 14px 36px rgba(19, 18, 24, .08);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: 220ms;

  /* --- Layout -------------------------------------------------------------
     ความกว้างของเนื้อหาใน section มีแค่ **สองระดับ** ห้ามเพิ่มระดับที่สาม
     (design-fixes.md ข้อ 4 · ตั้งเมื่อ 28 ส.ค. 2569)

     ก่อนหน้านี้แต่ละ component ตั้งความกว้างของตัวเองแยกกัน จึงมีอยู่ 4 ค่า
     ในช่วง 800–1000px พร้อมกัน (62rem รีวิว · 54rem บทความ/ขั้นตอน · 52rem FAQ)
     เลื่อนหน้าลงมาแล้วขอบเนื้อหาขยับเข้าออกทีละนิดทุก section
     ตาอ่านว่า "หน้ายังจัดไม่เสร็จ" มากกว่าอ่านว่าตั้งใจให้ต่างกัน

       --wrap-wide    ตะแกรงการ์ดและรูป — ของที่กว้างแล้วยังอ่านออก
       --wrap-narrow  เนื้อหาที่เป็นข้อความล้วน — รายการ ขั้นตอน คำถามที่พบบ่อย

     --content-narrow (720px) **ไม่ใช่ระดับที่สาม** เป็นความยาวบรรทัดสำหรับ
     อ่านบทความยาว ๆ ใช้กับเนื้อความของโพสต์เท่านั้น ไม่ใช่กับ section ของหน้า
  ------------------------------------------------------------------------ */
  /* กรอบเนื้อหาและระยะขอบยกมาจากสกิน v2 ให้ใช้ทั้งเว็บ 24 ก.ย. 2569
     เดิม 1200px + ขอบ 24px · ของ v2 คือ 1240px + ขอบ 32px ตามสเปกข้อ 3 */
  --content-width: 1240px;   /* เดิม 1200px */
  --content-narrow: 720px;

  --wrap-wide:   var(--content-width);
  --wrap-narrow: 54rem;

  /* ระยะขอบซ้ายขวาของ .mo-wrap — **เดิมไม่เคยประกาศที่นี่เลย**
     `.mo-wrap` เขียนเป็น var(--wrap-pad, var(--sp-3)) คือถ้าไม่มีใครตั้งก็ใช้ 24px
     มีแต่บล็อก .mo-v2 ที่ตั้งเป็น 2rem หน้าแรกจึงเป็นหน้าเดียวที่ได้ 32px */
  --wrap-pad: 2rem;

  /* ความกว้างอีกสองระดับ ใช้สลับให้หน้าไม่กว้างเท่ากันหมดทุกช่วง
     **ไม่ได้สลับมั่ว** ความกว้างผูกกับชนิดเนื้อหา
     · แคบ  = ช่วงที่เป็นตัวหนังสือล้วน อ่านสบายกว่าเมื่อบรรทัดไม่ยาว
     · กว้าง = ช่วงที่เป็นภาพหรือการ์ด ได้ประโยชน์จากพื้นที่
     ย้ายมาจาก components.css เมื่อ 24 ก.ย. 2569 — เดิมประกาศผิดไฟล์
     ขัดกฎของโปรเจกต์เองที่ว่า "แก้สีหรือขนาด -> tokens.css ที่เดียว"
     ใช้ผ่านคลาส .mo-v2-wrap--narrow / --wide ที่พิมพ์ในหน้าจอแก้ไขเนื้อหา */
  --wrap-v2-narrow: 1040px;
  --wrap-v2-wide:   1480px;

  /* ความกว้างกล่องข้อความใน banner หน้าแรก — คิดเป็น % ของแถบเนื้อหา 1200px
     เพิ่มเลขแล้วกล่องกว้างขึ้น แต่เกินราว 66% ตัวหนังสือจะเริ่มไปทับรูปคนทางขวา
     มีผลเฉพาะจอ 861px ขึ้นไป จอแคบกว่านั้นภาพถูกปิด กล่องใช้เต็มความกว้างอยู่แล้ว */
  /* ลดจาก 62% เป็น 53% เมื่อ 27 ส.ค. 2569 — วัดจากภาพเรนเดอร์จริงแล้วว่าตัวคน
     ในภาพหัวเว็บใบใหม่เริ่มที่ราว x=790 แต่กล่องข้อความเดิมยาวถึง x=888
     บรรทัดท้ายของย่อหน้าจึงไปทับแขนนางแบบ อ่านยาก */
  --hero-text-width:  53%;
  --hero-text-narrow: 46%;   /* คลาส .mo-hero__text--narrow */
  --hero-text-wide:   76%;   /* คลาส .mo-hero__text--wide */

  /* ความยาวบรรทัดในฮีโร่หน้าบริการ (.mo-v2-hero--media · 24 ก.ย. 2569)
     กล่องข้อความเป็น 53% ของจอเหมือนหน้าแรก จอ 1920 จึงกว้างกว่า 900px
     ถ้าไม่คุม ย่อหน้ายาว 5 บรรทัดของหน้านี้จะยาวเกิน 100 ตัวอักษรต่อบรรทัด */
  --hero-measure: 42rem;

  /* ความสูงขั้นต่ำของฮีโร่หน้าบริการ (จอ ≥861px · 25 ก.ย. 2569)
     รูปในฮีโร่สูงได้เท่าที่แถบสูง หน้าที่ข้อความสั้น (หน้าบริการที่ยังรอเนื้อหา)
     แถบเตี้ยจนรูปเหลือ ~280px — ตั้งพื้นไว้ให้รูปใหญ่พอ หน้าที่สูงกว่านี้อยู่แล้วไม่เปลี่ยน */
  --hero-media-min: clamp(40rem, 30rem + 20vw, 52rem);

  /* เพดานความสูงรูปฮีโร่หน้าบริการบนจอแคบ (≤860px) ที่รูปลงมาอยู่ใต้ข้อความ
     รูปแนวตั้งกว้างเต็มจอ 768 สูงเกือบ 900px ต้องเลื่อนเกินหนึ่งจอกว่าจะพ้นรูป
     รูปแนวนอนไม่ถึงเพดานนี้ จึงยังกว้างเต็มจอเหมือนเดิม */
  --hero-media-img-max: 34rem;

  /* ความกว้างกล่องหัวข้อของแต่ละ section (แคปซูล + หัวข้อ + คำอธิบาย)
     หน่วย ch คือ "ยาวกี่ตัวอักษรต่อบรรทัด" — เลขมากขึ้น กล่องกว้างขึ้น
     ของเดิม 54ch แคบไป ขยับเป็น 66ch · เกิน 80ch สายตาจะหาต้นบรรทัดถัดไปไม่เจอ */
  --head-width: 66ch;
  --head-wide:  80ch;   /* คลาส .mo-head--wide */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0.01ms; }
}