/* ===========================================================================
   Reference UI — long-form sales deck layout
   ---------------------------------------------------------------------------
   The supplied references are tall, editorial pages: black canvas, centered
   typography, angular media blocks, and generous vertical pacing. Keep the
   existing interaction model, but let the visual system follow that deck.
   =========================================================================== */
:root{
  --ref-max:960px;
  --ref-gutter:clamp(1.25rem,4vw,4rem);
  --ref-copy:#aaa7a4;
  --ref-placeholder:#777a7d;
  --ref-gap:clamp(2.75rem,7vw,6.5rem);
}

html,body{background:#000}
body{font-family:"DIN Pro","Prompt","Segoe UI","Leelawadee UI",system-ui,sans-serif}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(48rem 24rem at 50% -16%,rgba(255,255,255,.08),transparent 72%);
}
.glow{display:none}

/* Inner-page controls stay available without competing with the artwork.

   แถบอยู่บนจอ ไม่ใช่ล่าง — ตามที่ทีมสั่ง
   ไล่สีจึงต้องกลับหัวด้วย ทึบที่ขอบบนแล้วจางลงหาเนื้อหา ไม่งั้นขอบเข้มจะไป
   คาดกลางจอแทนที่จะรองตัวแถบ */
.navbar{
  top:0;bottom:auto;min-height:0;display:flex;align-items:center;gap:.75rem;
  padding:calc(.75rem + env(safe-area-inset-top,0px)) var(--ref-gutter) .75rem;
  border-top:0;border-bottom:0;
  background:linear-gradient(#000,rgba(0,0,0,.88) 58%,transparent);
  backdrop-filter:none;
}
/*
  เนื้อหาต้องเว้นที่ให้แถบด้านบนแทนด้านล่าง

  ไม่งั้นโลโก้หัวหน้าจะไปนอนอยู่ใต้แถบ แล้วหายไปครึ่งใบ ส่วนท้ายหน้าจะเหลือ
  ช่องว่างเปล่าเท่าความสูงแถบที่ไม่มีอะไรมาบัง
*/
#screen-unit>.wrap,
#screen-cat>.wrap,
#screen-work>.work{scroll-margin-top:var(--nav-h)}
.cats,.work{padding-bottom:clamp(2rem,5vh,4rem)}
.navbar__side{flex:none}
.navbar__side--end{flex:1;justify-content:flex-end}
.navbar__btn{
  min-height:44px;padding:.35rem .5rem;border-radius:0;color:#fff;
  font-family:var(--font-display);
  font-size:.9rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.navbar__btn:hover{background:rgba(255,255,255,.1);color:#fff}
/* ซ่อนป้ายชื่อแล้วเหลือแค่ไอคอน 20px บวก padding ได้กว้าง 36px
   ต่ำกว่าเกณฑ์นิ้วแตะ 44px ทั้งที่เป็นปุ่มหลักกลางแถบ — กำหนดความกว้างขั้นต่ำเหมือนความสูง */
.navbar__home{position:absolute;left:50%;transform:translateX(-50%);min-inline-size:44px}
.navbar__home span{display:none}
.navbar__home svg{width:20px;height:20px}
.rail{display:none!important}

/*
  แผ่นค้นหาออกมาจากด้านบน ทิศเดียวกับปุ่มที่กด

  เดิมแผ่นเลื่อนขึ้นมาจากขอบล่างเพราะแถบนำทางอยู่ล่าง พอย้ายแถบขึ้นบนแล้ว
  ช่องพิมพ์ยังไปโผล่ก้นจอ ห่างจากปุ่มที่นิ้วเพิ่งแตะเกือบเต็มจอ
  ส่วน column-reverse ของจอมือถือก็ต้องเลิกกลับทิศด้วยเหตุผลเดียวกัน
*/
.search{justify-content:flex-start}
.search__panel{
  flex-direction:column;
  border-top:0;border-bottom:1px solid var(--line-hi);
  padding-top:calc(1rem + env(safe-area-inset-top,0px));padding-bottom:1rem;
}
.search__status{margin:.875rem 0 0}
.search__results{margin-top:.75rem;margin-bottom:0}
@keyframes sheet{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}

.screen.is-active{animation:ref-rise .45s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes ref-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.wrap{max-width:var(--ref-max);padding-inline:var(--ref-gutter)}

/* ---- Home ---------------------------------------------------------------
   ห้าปุ่มต้องอยู่ในจอเดียว ไม่ต้องเลื่อน

   ปุ่มมีสัดส่วนตายตัว 912:243 ความสูงจึงถูกกำหนดโดยความกว้าง ไม่ใช่ตั้งเองได้
   ถ้าคุมด้วย vw อย่างเดิม จอยิ่งกว้างปุ่มยิ่งสูง ห้าใบรวมกันก็ยิ่งล้นจอ
   — บนจอโน้ตบุ๊กแนวนอนล้นหนักที่สุด ทั้งที่เป็นจอที่ใช้พรีเซนต์จริง

   จึงกลับด้านการคำนวณ: หาที่ว่างแนวตั้งที่เหลือก่อน แล้วค่อยถอยกลับเป็น
   ความกว้างสูงสุดที่ปุ่มมีได้ ความกว้างเลยเป็นผลลัพธ์ ไม่ใช่ตัวตั้ง

   --home-reserve คือทุกอย่างที่ไม่ใช่ตัวปุ่ม (ขอบบนล่าง โลโก้ หัวข้อ ระยะห่าง
   ช่องไฟระหว่างปุ่ม และเผื่ออีก 1rem) เขียนด้วย clamp ชุดเดียวกับที่ใช้จริง
   ข้างล่าง ถ้าแก้ค่าไหนต้องแก้ให้ตรงกันทั้งสองที่ ไม่งั้นตัวเลขจะโกหก */
.home{
  --home-pad:clamp(1rem,3vh,2.5rem);
  --home-logo-h:clamp(2.5rem,7.5vh,5.5rem);
  /* clear space ใต้โลโก้ ก่อนถึงหัวข้อ — ล็อกอัพนอน จึงใช้อัตราส่วน wide */
  --home-logo-clear:calc(var(--clear-ratio-wide) * var(--home-logo-h));
  --home-h1-size:clamp(1.05rem,2.8vh,2.25rem);
  --home-h1-top:clamp(.5rem,1.5vh,1rem);
  --home-h1-bottom:clamp(1rem,3vh,2.5rem);
  --units-gap:clamp(.5rem,1.7vh,1.75rem);
  --home-reserve:calc(
    2 * var(--home-pad)
    + var(--home-logo-h)
    + max(var(--home-h1-top),var(--home-logo-clear))
    + var(--home-h1-size) * 1.15
    + var(--home-h1-bottom)
    + 4 * var(--units-gap)
    + 1rem
  );

  max-width:1080px;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding-block:var(--home-pad);
}
/* คุมด้วยความสูง ไม่ใช่ความกว้าง — โลโก้จึงไม่กินที่ของปุ่มเมื่อจอเตี้ยลง */
.home__logo{
  width:auto;height:var(--home-logo-h);
  max-width:min(100%,440px);object-fit:contain;margin-inline:auto;
}
.home h1{
  /* ระยะจากโลโก้ต้องไม่น้อยกว่า clear space — ที่จอเล็กค่าออกแบบเดิมแคบกว่ากติกา */
  margin:max(var(--home-h1-top),var(--home-logo-clear)) 0 var(--home-h1-bottom);
  font-family:var(--font-display);
  font-size:var(--home-h1-size);font-weight:900;line-height:1.15;
  letter-spacing:.03em;text-transform:uppercase;color:#fff;
}
.units{
  /* 912/243 — สัดส่วนไฟล์การ์ด M1-M5 ต้องตรงกับ aspect-ratio ของ .tag--home */
  --card-ar:3.7531;
  display:flex;flex-direction:column;gap:var(--units-gap);
  width:min(100%,920px,calc((100dvh - var(--home-reserve)) * var(--card-ar) / 5));
  margin:0 auto;
}
.tag--home{
  width:100%;aspect-ratio:912/243;padding:0;background:none;clip-path:none;filter:none;
}
.tag--home:hover,.tag--home:focus-visible{transform:translateY(-4px);filter:drop-shadow(0 18px 28px rgba(255,255,255,.12))}
.tag__card{width:100%;height:100%;object-fit:contain}
.hints{display:none}

/* ---- Unit landing pages ----------------------------------------------- */
#screen-unit,#screen-cat,#screen-work{min-height:100dvh}
/*
  หัวหน้าต้องเว้นให้แถบนำทางอยู่นอก clear space ของโลโก้

  แถบนำทางเป็น position:fixed ลอยทับอยู่ข้างบน padding เดิม 5.5rem ลบความสูงแถบ
  4.5rem แล้วเหลือช่องว่างจริงแค่ 1rem ซึ่งน้อยกว่า clear space ที่กติกากำหนด
  — โลโก้เลยเหมือนถูกแถบกดทับทั้งที่ไม่ได้ซ้อนกันจริง
*/
:root{--page-top:max(clamp(5.5rem,10vw,8.5rem),calc(var(--nav-h) + var(--lockup-clear)))}
#screen-unit>.wrap{max-width:1080px;padding-block:var(--page-top) clamp(5rem,10vw,10rem)}
.unit-intro{text-align:center}
.unit-intro__title{
  margin:0;color:var(--unit-accent,#fff);font-family:var(--font-display);
  font-size:clamp(2rem,5vw,4rem);font-weight:900;line-height:.98;letter-spacing:.02em;text-transform:uppercase;
}
.unit-intro__tagline{margin:.45rem 0 0;color:#fff;font-size:clamp(1.2rem,2.5vw,2rem);line-height:1.1;letter-spacing:.02em}
/*
  ภาพหลักชนขอบตามเรฟ

  อาร์ตบอร์ดกว้าง 1080 เท่ากับ --ref-max พอดี ภาพในเรฟจึงกินเต็มความกว้างกรอบ
  ไม่ใช่เต็มความกว้างจอ — ดันออกด้วย margin ลบเท่า gutter ก็พอ ไม่ต้องใช้ 100vw
  ซึ่งจะนับความกว้างแถบเลื่อนเข้าไปด้วยแล้วทำให้หน้าเลื่อนข้างได้
*/
.unit-hero,
.work__media{
  align-self:stretch;
  width:auto;max-width:none;
  margin-inline:calc(-1 * var(--ref-gutter));
}
.unit-hero{margin-block:clamp(2rem,5vw,4.25rem) 0;overflow:hidden;background:#080808}
.unit-hero img{width:100%;height:auto;display:block;object-fit:cover}
.unit-section-head{margin:clamp(3rem,8vw,6.5rem) 0 1.75rem}
.unit-section-head h2{margin:0;color:#fff;font-family:var(--font-display);font-size:clamp(1.5rem,3.3vw,2.55rem);font-weight:900;line-height:1;text-transform:uppercase}
.unit-section-head p{margin:.65rem 0 0;color:var(--ref-copy);font-size:1rem}
/* ---- OUR EXPERTISE (หน่วย Verse) ---------------------------------------
   ภาพกับคำบรรยายเป็นคนละชิ้น จัดสลับซ้ายขวาตามอาร์ตเวิร์กเดิม
   บนมือถือเรียงลงเป็นภาพทับคำบรรยาย เพราะสองคอลัมน์ที่ 375px
   จะเหลือคอลัมน์ละ 160px ซึ่งแคบเกินกว่าจะอ่านย่อหน้าไทยได้ */
#cats.expertise-list{display:flex;flex-direction:column;gap:clamp(2.5rem,5vw,4.5rem);margin:0;padding:0}
.expertise-card{
  display:grid;gap:clamp(1rem,2.5vw,2rem);align-items:center;
  inline-size:100%;padding:0;border:0;background:none;text-align:left;
  font:inherit;color:inherit;
  transition:transform .3s ease,filter .3s ease;
}
button.expertise-card{cursor:pointer}
.expertise-card__media{
  display:block;overflow:hidden;min-inline-size:0;
  /* มุมตัดเดียวกับที่อาร์ตเวิร์กเดิมวาดไว้ในภาพ ย้ายมาทำด้วย CSS แทน
     รูปที่ครอปมาจึงเป็นสี่เหลี่ยมตรง ๆ ใช้ซ้ำที่อื่นได้ */
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
}
.expertise-card__media img{display:block;inline-size:100%;block-size:auto}
.expertise-card__body{display:block;min-inline-size:0}
.expertise-card__title{
  display:block;color:#fff;font-family:var(--font-display);
  font-size:clamp(1.15rem,2.2vw,1.7rem);font-weight:900;line-height:1.1;
  letter-spacing:.01em;text-transform:uppercase;text-wrap:balance;
}
.expertise-card__desc{
  display:block;max-inline-size:min(46ch,26rem);margin-top:.7rem;
  color:var(--ref-copy);font-size:clamp(.9rem,1.35vw,1rem);line-height:1.8;
  text-wrap:pretty;overflow-wrap:break-word;word-break:normal;hyphens:none;
}
.expertise-card__count{
  display:block;margin-top:.85rem;color:#fff;
  font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  opacity:.72;
}
.expertise-card:hover,.expertise-card:focus-visible{transform:translateY(-5px);filter:drop-shadow(0 15px 24px rgba(255,255,255,.1))}
div.expertise-card:hover{transform:none;filter:none}

@media (min-width:760px){
  .expertise-card{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  /* สลับฝั่งใบเว้น ตามจังหวะซ้าย-ขวาของอาร์ตเวิร์กเดิม */
  .expertise-card:nth-child(even) .expertise-card__media{order:2}
  .expertise-card:nth-child(even) .expertise-card__body{order:1}
  .expertise-card:nth-child(even){text-align:right}
  .expertise-card:nth-child(even) .expertise-card__desc{margin-inline-start:auto}
}
#cats.category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.5rem,6vw,5rem) clamp(1.5rem,4vw,3.5rem);margin:clamp(2.5rem,6vw,5rem) 0 0;padding:0}
.category-card{display:block;width:100%;padding:0;border:0;background:none;color:#fff;text-align:left;cursor:pointer;transition:transform .3s ease,filter .3s ease}
.category-card:hover,.category-card:focus-visible{transform:translateY(-5px);filter:drop-shadow(0 15px 24px rgba(255,255,255,.1))}
.category-card__media,.project-card__media{
  position:relative;display:block;overflow:hidden;aspect-ratio:1.55;background:var(--ref-placeholder);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)
}
.category-card__media img,.category-card__media video,.project-card__media img,.project-card__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.category-card__title,.project-card__title{display:block;margin-top:1rem;color:#fff;font-family:var(--font-display);font-size:clamp(1.05rem,2vw,1.55rem);font-weight:900;line-height:1.05;text-transform:uppercase}
.category-card__count{display:block;margin-top:.35rem;color:var(--ref-copy);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}

/* ---- Category / work index pages -------------------------------------- */
#screen-cat>.wrap{max-width:1080px;padding-block:var(--page-top) clamp(5rem,10vw,10rem)}
.category-intro{text-align:center}
.category-intro__logo{
  width:auto;height:var(--lockup-h);object-fit:contain;
  /* 1.7rem คือระยะที่ออกแบบไว้เดิม ใช้ต่อได้ถ้ามันกว้างกว่า clear space */
  margin:0 auto max(1.7rem,var(--lockup-clear));
}
.category-intro h1{margin:0;color:#fff;font-family:var(--font-display);font-size:clamp(2rem,5vw,4rem);font-weight:900;line-height:.98;text-transform:uppercase}
/* ประโยคเดียว จัดกลางได้ เพราะตาไม่ต้องหาจุดเริ่มบรรทัดถัดไป */
.category-intro__tagline{
  max-inline-size:min(40ch,26rem);margin:1.15rem auto 0;color:#fff;
  font-size:clamp(1.2rem,2.3vw,1.85rem);line-height:1.3;text-wrap:balance;
}
/*
  ย่อหน้าบรรยายจัดชิดซ้าย ไม่ใช่จัดกลาง

  เดิมจัดกลางทั้งย่อหน้า ซึ่งบนมือถือกลายเป็นสี่บรรทัดที่ขอบซ้ายไม่ตรงกันสักบรรทัด
  ตาต้องไล่หาจุดเริ่มใหม่ทุกครั้งที่ขึ้นบรรทัด ช้ากว่าการกวาดกลับไปที่ขอบเดิม
  — หัวข้อกับประโยคเดียวยังจัดกลางเหมือนเดิม ความสมมาตรของหัวหน้าไม่เสีย

  ความกว้างและระยะบรรทัดใช้ชุดเดียวกับย่อหน้าบรรยายในหน้าผลงาน
  ทั้งสองหน้าจึงอ่านเป็นจังหวะเดียวกัน
*/
.category-intro__description{
  max-inline-size:min(68ch,34rem);margin:1.25rem auto 0;color:var(--ref-copy);
  font-size:clamp(.95rem,1.5vw,1.075rem);line-height:1.8;
  text-align:left;text-wrap:pretty;
  overflow-wrap:break-word;word-break:normal;hyphens:none;
}
#works.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.5rem,6vw,5rem) clamp(1.5rem,4vw,3.5rem);margin:clamp(3rem,7vw,6.5rem) 0 0;padding:0}
.project-card{display:block;width:100%;padding:0;border:0;background:none;color:#fff;text-align:left;cursor:pointer;transition:transform .3s ease,filter .3s ease}
.project-card:hover,.project-card:focus-visible{transform:translateY(-5px);filter:drop-shadow(0 15px 24px rgba(255,255,255,.1))}
.project-card__media{aspect-ratio:1.55}
.project-card__reference{display:block;width:100%;height:auto;object-fit:contain}
.project-card__meta{padding-top:.95rem}
.project-card__label{display:block;color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.project-card__line{display:block;margin-top:.2rem;color:var(--ref-copy);font-size:.88rem;line-height:1.4}
.project-card__line strong{color:#fff;font-weight:700}
#c-active,.section-head{display:none}

/* ---- Work detail ------------------------------------------------------- */
#screen-work>.work{max-width:1080px;padding-block:var(--page-top) clamp(5rem,10vw,10rem)}
/* ใช้ขนาดและ clear space ชุดเดียวกับหน้าหน่วยและหน้าหมวด
   เดิมตั้งความสูงกับ margin เองคนละค่า ทำให้ทั้งสามหน้าเปิดไม่เหมือนกัน
   และระยะใต้โลโก้เหลือ 20px ซึ่งต่ำกว่า clear space ตามกติกาแบรนด์ */
.work__logo{width:auto;height:var(--lockup-h);margin:0 auto max(1.25rem,var(--lockup-clear))}
/* หัวหมวดเหนือภาพ — ตัวใหญ่สุดของหน้าตามเรฟ นำสายตาก่อนถึงภาพผลงาน */
.work__kicker{
  margin:0 0 clamp(1.25rem,3vw,2.25rem);color:#fff;
  font-family:var(--font-display);
  font-size:clamp(1.75rem,4.4vw,3.4rem);font-weight:900;line-height:1;
  letter-spacing:.02em;text-transform:uppercase;text-align:center;
}
/*
  ความยาวบรรทัดของเนื้อหาสองภาษา

  เดิมคุมด้วย 68ch อย่างเดียว ซึ่งคิดจากความกว้างตัว "0" ของ DIN Pro
  แต่เนื้อหาจริงเป็นไทยปนอังกฤษ ตัวไทยแคบกว่ามาก วัดจริงได้ 74 ตัวต่อบรรทัด
  และบางบรรทัดถึง 85 ซึ่งเกินช่วงที่อ่านสบาย (65-75)

  จึงคุมสองชั้น: ch กันไว้ตอนตัวอักษรถูกขยาย ส่วน rem เป็นเพดานจริงที่บีบอยู่
  ตอนนี้ — ได้ราว 65 ตัวต่อบรรทัด
*/
.work__title{
  text-align:center;max-inline-size:min(34ch,22rem);
  margin:clamp(1.75rem,4vw,3rem) auto 0;
  /*
    ขนาดไล่ตามสัดส่วนที่วัดจาก Project.png (เทียบกับย่อหน้าบรรยาย = 1.00)
      หัวหมวด 1.82  ชื่อผลงาน 1.77  คำขยาย 1.59  ประโยคเปิด 1.18
    ของเดิมชื่อผลงานอยู่ที่ 1.47 และคำขยาย 1.11 ซึ่งเล็กกว่าเรฟชัดเจน
    ชื่อผลงานเลยดูเป็นรองหัวหมวดมากเกินไป ทั้งที่ในเรฟสองอันนี้เกือบเท่ากัน
  */
  font-size:clamp(1.65rem,3.4vw,2.75rem);font-weight:900;line-height:1.08;
  /* ชื่อผลงานยาว ๆ เดิมตกบรรทัดเป็น 5 คำ + 1 คำ — balance เกลี่ยให้สองบรรทัดใกล้กัน */
  text-wrap:balance;
}
.work__subtitle{
  max-inline-size:min(44ch,28rem);margin:.55rem auto 0;color:#fff;
  font-size:clamp(1.5rem,2.6vw,2rem);font-weight:400;line-height:1.25;
  text-align:center;text-wrap:balance;
}
.work__quote,.work__desc{
  max-inline-size:min(68ch,34rem);margin-inline:auto;text-align:left;
  /*
    ไม่ใช้ overflow-wrap:anywhere กับเนื้อหาไทย

    ภาษาไทยไม่มีช่องว่างระหว่างคำ เบราว์เซอร์ตัดบรรทัดด้วยพจนานุกรมของมันเอง
    anywhere จะไปทับกลไกนั้นแล้วตัดกลางคำ — break-word พอสำหรับกันโทเคนยาว
    และไม่ไปยุ่งกับการตัดคำไทย
  */
  overflow-wrap:break-word;word-break:normal;hyphens:none;
}
/*
  ประโยคเปิดต้องอ่านเป็น "คำพูด" ไม่ใช่ย่อหน้าแรกของเนื้อหา

  เดิมต่างจากย่อหน้าบรรยายแค่สีขาวกับสีเทา ขนาดและระยะบรรทัดเท่ากันเป๊ะ
  ตาจึงอ่านรวมเป็นก้อนเดียว ขยับขนาดขึ้นและบีบระยะบรรทัดลง ความต่างจึงมาจาก
  รูปทรงของก้อนข้อความ ไม่ใช่จากสีอย่างเดียว
*/
.work__quote{
  margin-block:clamp(1.75rem,4vw,2.75rem) 0;color:#fff;
  font-size:clamp(1.12rem,2vw,1.35rem);line-height:1.6;
  text-wrap:pretty;
}
/*
  ย่อหน้าบรรยาย — ระยะบรรทัด 1.8 สูงกว่าที่ตำราภาษาอังกฤษแนะนำ (1.5-1.75)
  โดยตั้งใจ เพราะสระบนและวรรณยุกต์ของไทยกินพื้นที่เหนือบรรทัด ถ้าใช้ 1.6
  วรรณยุกต์ของบรรทัดล่างจะเกือบชนสระล่างของบรรทัดบน
*/
.work__desc{
  margin-top:clamp(1.15rem,2.5vw,1.5rem);color:var(--ref-copy);
  font-size:clamp(.95rem,1.5vw,1.075rem);line-height:1.8;
  text-wrap:pretty;
}
/* เรฟตัดมุมทิ้ง ภาพเป็นสี่เหลี่ยมเต็มใบ — เอา clip-path ออก ไม่ใช่แค่ลดขนาดมุม */
.work__media{aspect-ratio:16/9;border-radius:0;background:#111;clip-path:none}
/* ---- Social + contact footer (Project.png) ------------------------------
   เรฟวางเป็นแกนกลางคอลัมน์เดียว ไล่จากไอคอนโซเชียล ลงมาชื่อผู้ติดต่อ
   แล้วจบที่ QR ไม่ใช่การ์ดเทาที่วาง QR ไว้ข้างซ้ายแบบเดิม */
.social{
  display:flex;justify-content:center;gap:clamp(.75rem,2vw,1.25rem);
  /* เรฟเว้นก่อนแถวโซเชียล 20.5% ของความกว้างหน้า — ช่องว่างก้อนนี้คือสิ่งที่บอกว่า
     เนื้อหาจบแล้ว กำลังจะเข้าส่วนติดต่อ ถ้าแคบกว่านี้สองส่วนจะอ่านติดกัน */
  margin:clamp(4rem,11vw,7rem) 0 clamp(1rem,2.5vw,1.5rem);padding:0;list-style:none;
}
.social__link{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:#c7c7c7;color:#0a0a0a;
  transition:background .18s ease,transform .18s ease;
}
.social__link svg{width:26px;height:26px}
.social__link:hover{background:#fff;transform:translateY(-2px)}
.social__link:focus-visible{outline:3px solid #fff;outline-offset:3px}

.contact{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  /* กางเต็มความกว้างคอลัมน์ ไม่ใช่หดตามเนื้อหา — ไม่งั้นกล่องข้อความจะกว้างเท่า
     บรรทัดบทบาท (184px) แล้วชื่อกับเบอร์ที่รวมกัน 181px ตกบรรทัดทั้งที่พอดี */
  inline-size:100%;
  margin-top:0;padding:0;border:0;border-radius:0;background:none;
}
/*
  ชื่อกับเบอร์อยู่บรรทัดเดียวกันตามเรฟ — "K.Muay 098-326-2265"

  เดิมเรียงลงสามบรรทัด ทำให้ส่วนติดต่อสูงกว่าเรฟหนึ่งบรรทัดเต็ม ๆ
  ใช้ flex-wrap แทนการยัดสองค่าไว้ใน element เดียว เพราะเบอร์ต้องยังเป็นลิงก์
  ที่กดโทรออกได้และมีพื้นที่กดของตัวเอง ส่วนบรรทัดบทบาทบังคับขึ้นบรรทัดใหม่
  ด้วย flex-basis:100% ไม่ใช่ <br> ที่จะค้างอยู่แม้ตอนขึ้นบรรทัดเองได้พอดี
*/
.contact__text{
  /* ต้องสั่ง row ชัด — กฎพื้นของ .contact__text ตั้ง flex-direction:column ไว้
     ถ้าไม่เขียนทับ กล่องนี้จะเป็นคอลัมน์ที่ wrap ได้ ทุกชิ้นเลยได้บรรทัดของตัวเอง */
  display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:.1rem .5rem;text-align:center;
  /* .contact เป็น flex column + align-items:center ลูกจึงหดตามเนื้อหา
     ต้อง stretch เองไม่งั้นกล่องนี้กว้างเท่าบรรทัดบทบาทแล้วบรรทัดล่างตกอยู่ดี */
  align-self:stretch;
}
.contact__role{flex-basis:100%;color:#fff;font-size:clamp(.8rem,1.5vw,.95rem);letter-spacing:.06em}
.contact__name{font-size:clamp(1rem,1.9vw,1.2rem)}
.contact__tel{
  align-self:auto;margin:0;color:#fff;
  font-size:clamp(1rem,1.9vw,1.2rem);
}
.contact__tel:hover{background:rgba(255,255,255,.12)}
.qr{margin-top:clamp(1rem,2.5vw,1.5rem);--qr-size:clamp(104px,16vw,132px)}

@media (max-width:700px){
  .navbar{padding-inline:1rem}
  .navbar__btn{font-size:.75rem;letter-spacing:.05em}
  #cats.category-grid,#works.project-grid{grid-template-columns:1fr;gap:3rem}
  /* เดิมดันภาพออกนอกกรอบแค่เศษหนึ่งส่วนสี่ของ gutter แล้วขยายภาพ 125%
     ตอนนี้ .unit-hero ชนขอบกรอบอยู่แล้วทุกขนาดจอ กฎสองบรรทัดนั้นจึงเหลือแค่
     การขยายภาพเกินกรอบโดยไม่มีเหตุผล — ถอดออก */
}
@media (prefers-reduced-motion:reduce){
  .expertise-card,.category-card,.project-card,.tag--home{transition:none}
}