/* ============================================================
   RJCE — Industrial preview (โฟลเดอร์ preview/)
   เว็บหลายหน้าแนวบริษัทอาคารเหล็ก/PEB: เมนูย่อย, ภาพใหญ่, สถิติ,
   สเปกแบบกดเปิด, คำถามที่พบบ่อย, ประเภทอาคาร, ฟอร์มขอใบเสนอราคา
   โหลดต่อจาก reset / variables / typography / components
   ============================================================ */

:root {
  /* จานสี Modern Minimal: เทาอ่อน + แดงจากโลโก้ */
  --in-red: #E52D2D;          /* ปุ่ม CTA / จุดเน้น */
  --in-red-dk: #C42222;       /* hover */
  --in-red-lt: #FF7070;       /* ตัวอักษรเน้นบนพื้นเข้ม (คอนทราสต์พอ) */
  --in-bar: #E8ECEF;          /* แถบเมนูบน */
  --in-grey: #F0F2F5;         /* พื้น section / กล่องย่อย */
  --in-off: #F8F9FA;          /* พื้นช่องกรอก / กล่องอ่อน */
  --in-border: #DEE2E6;       /* เส้นกรอบ */
  --in-slate: #2C3E50;        /* section เข้ม / หัวข้อ / ปุ่มรอง */
  --in-deep: #212529;         /* footer */
  --in-ink: #333333;          /* ข้อความหลัก */
  --in-muted: #6C757D;        /* ข้อความรอง */
  --in-line: #DEE2E6;
  --in-ease: cubic-bezier(.22, .61, .36, 1);
  --in-py: clamp(72px, 8vw, 120px);
  --in-shadow: 0 18px 40px rgba(33, 37, 41, .08);

  /* ทับค่ากลางของ components.css เฉพาะหน้า preview */
  --c-navy: #2C3E50;
  --c-navy-soft: #34495E;
  --c-accent: #E52D2D;
}

body.ind { background: #fff; color: var(--in-ink); font-family: var(--font-body); }
body.ind h1, body.ind h2, body.ind h3, body.ind h4 { font-family: var(--font-body); }
.phrase { display: inline-block; }
.i-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- ป้าย "ตัวอย่าง" สำหรับข้อมูลจำลอง ---------- */
.ph {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  padding: 2px 8px; border: 1px dashed currentColor; border-radius: 99px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em; line-height: 1.4;
  color: #B4581E; background: rgba(255, 237, 213, .85);
}
.ph::before { content: '✎'; font-size: .7rem; }
.i-phnote { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-block: 40px; font-size: .875rem; color: var(--in-muted); }
.i-section .i-phnote { margin-bottom: 0; }

/* ---------- ตัวช่วยร่วม ---------- */
.i-section { padding-block: var(--in-py); position: relative; }
.i-section--grey { background: var(--in-grey); }
.i-section--navy { background: var(--in-slate); color: rgba(255,255,255,.82); }
.i-section--navy::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
}
.i-section--navy > .container { position: relative; }

.i-eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px;
  font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--in-red);
}
.i-eyebrow::before { content: ''; width: 24px; height: 3px; background: currentColor; }
.i-eyebrow--light { color: var(--in-red-lt); }
html[lang="th"] .i-eyebrow, html[lang="zh"] .i-eyebrow { letter-spacing: .06em; font-size: .875rem; }

.i-title {
  font-size: clamp(1.9rem, 3.3vw, 2.9rem); font-weight: 700; line-height: 1.18;
  letter-spacing: -.015em; color: var(--in-slate); text-wrap: balance;
}
.i-title--sm { font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
.i-section--navy .i-title, .i-cta .i-title { color: #fff; }
html[lang="th"] .i-title { line-height: 1.4; letter-spacing: 0; }
html[lang="zh"] .i-title { line-height: 1.35; letter-spacing: .02em; word-break: keep-all; overflow-wrap: anywhere; }

.i-lead { margin-top: 18px; font-size: clamp(1.02rem, 1.25vw, 1.15rem); line-height: 1.75; color: var(--in-muted); text-wrap: pretty; }
.i-section--navy .i-lead { color: rgba(255,255,255,.72); }
.i-subtitle { font-size: 1.25rem; font-weight: 700; color: var(--in-slate); margin-bottom: 16px; }
.i-note { margin-top: 16px; font-size: .9375rem; color: var(--in-muted); }

.i-head { max-width: 760px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.i-head--center { margin-inline: auto; text-align: center; }
.i-head--center .i-eyebrow { justify-content: center; }
.i-head--row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; }
.i-head--row .i-lead { max-width: 34em; margin-top: 0; }

.i-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 26px; border: 1.5px solid transparent; border-radius: 3px;
  font-size: .9375rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  transition: background .3s var(--in-ease), color .3s var(--in-ease), border-color .3s var(--in-ease), transform .3s var(--in-ease);
}
.i-btn .i-ico { transition: transform .3s var(--in-ease); }
.i-btn:hover .i-ico { transform: translateX(3px); }
.i-btn--primary { background: var(--in-red); color: #fff; }
.i-btn--primary:hover { background: var(--in-red-dk); }
.i-btn--navy { background: var(--in-slate); color: #fff; }
.i-btn--navy:hover { background: #34495E; }
.i-btn--ghost { border-color: rgba(255,255,255,.6); color: #fff; }
.i-btn--ghost:hover { background: #fff; color: var(--in-slate); }
.i-btn--line { border-color: rgba(255,255,255,.5); color: #fff; }
.i-btn--line:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.i-btn--outline { border-color: var(--in-slate); color: var(--in-slate); }
.i-btn--outline:hover { background: var(--in-slate); color: #fff; }

.i-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-weight: 700; color: var(--in-slate); }
.i-link .i-ico { color: var(--in-red); transition: transform .3s var(--in-ease); }
.i-link:hover .i-ico { transform: translateX(4px); }
.i-link--light { color: #fff; }

/* ---------- แถบบนสุด + Header ---------- */
.i-top { background: var(--in-deep); color: rgba(255,255,255,.72); font-size: .8125rem; }
.i-top__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; }
.i-top__inner > span, .i-top__right a { display: inline-flex; align-items: center; gap: 8px; }
.i-top__right { display: inline-flex; gap: 24px; }
.i-top a:hover { color: var(--in-red-lt); }
.i-top .i-ico { width: 15px; height: 15px; color: var(--in-red-lt); }

.i-header { box-shadow: 0 1px 0 var(--in-line); }
.i-header.is-scrolled { box-shadow: 0 8px 24px rgba(33,37,41,.08); }
.i-header .header__inner { gap: 24px; }
.i-header .logo__text strong { font-weight: 700; }

.i-nav__list { display: flex; align-items: center; gap: 4px; }
.i-dd { position: relative; }
.i-dd__link {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px;
  font-size: .9375rem; font-weight: 600; color: var(--in-slate); border-radius: 3px;
  transition: color .25s var(--in-ease), background .25s var(--in-ease);
}
.i-dd__chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .25s var(--in-ease); }
.i-dd:hover .i-dd__link, .i-dd:focus-within .i-dd__link { color: var(--in-red-dk); background: var(--in-grey); }
.i-dd:hover .i-dd__chev, .i-dd:focus-within .i-dd__chev { transform: rotate(180deg); }
.i-dd.is-page > .i-dd__link { color: var(--in-red-dk); box-shadow: inset 0 -3px 0 var(--in-red); border-radius: 0; }
.i-dd__menu {
  position: absolute; left: 0; top: calc(100% + 8px); min-width: 250px; padding: 8px;
  background: #fff; border-top: 3px solid var(--in-red); box-shadow: 0 18px 40px rgba(33,37,41,.14);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s var(--in-ease), transform .2s var(--in-ease), visibility .2s;
}
.i-dd__menu::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.i-dd:hover .i-dd__menu, .i-dd:focus-within .i-dd__menu { opacity: 1; visibility: visible; transform: none; }
.i-dd__menu a { display: block; padding: 10px 14px; font-size: .9375rem; color: var(--in-ink); border-radius: 2px; }
.i-dd__menu a:hover { background: var(--in-grey); color: var(--in-red-dk); }
.i-header__quote { min-height: 44px; padding: 0 20px; font-size: .875rem; }

.i-mlist > li > a { font-family: var(--font-body) !important; font-weight: 700; font-size: 1.375rem !important; color: var(--in-slate) !important; padding-bottom: 6px !important; }
.i-msub { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-bottom: 14px; }
.i-mlist > li > a { padding-top: 14px !important; }
.i-mlist .i-msub a { display: inline; padding: 0; font-family: var(--font-body); font-size: .9375rem; color: var(--in-muted); }
.mobile-menu__contact { display: flex; flex-direction: column; gap: 6px; }
.mobile-menu .i-btn { align-self: flex-start; }

/* ---------- HERO (หน้าแรก) ---------- */
.i-hero { position: relative; overflow: hidden; color: #fff; background: var(--in-deep); min-height: clamp(560px, 82vh, 860px); display: flex; align-items: center; }
.i-hero .hero__slides { position: absolute; inset: 0; }
.i-hero .hero__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.4s var(--in-ease); }
.i-hero .hero__slide.is-active { opacity: 1; }
.i-hero .hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.i-hero .hero__slide.is-active img { animation: in-zoom 8s linear both; }
@keyframes in-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.i-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(33,37,41,.88) 0%, rgba(33,37,41,.6) 50%, rgba(33,37,41,.2) 100%); }
.i-hero__content { position: relative; z-index: 2; padding-block: 96px 140px; }
.i-hero__title { color: #fff; max-width: 15em; font-size: clamp(2.3rem, 5vw, 4.4rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; animation: in-rise 1s var(--in-ease) .15s both; }
html[lang="th"] .i-hero__title { line-height: 1.32; letter-spacing: 0; font-size: clamp(2.1rem, 4.4vw, 3.8rem); }
html[lang="zh"] .i-hero__title { line-height: 1.25; letter-spacing: .02em; word-break: keep-all; overflow-wrap: anywhere; max-width: 12em; }
.i-hero__sub { margin-top: 22px; max-width: 36em; font-size: clamp(1rem, 1.35vw, 1.175rem); color: rgba(255,255,255,.82); animation: in-rise 1s var(--in-ease) .3s both; }
.i-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; animation: in-rise 1s var(--in-ease) .45s both; }
.i-hero .i-eyebrow { animation: in-rise 1s var(--in-ease) both; }
@keyframes in-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.i-hero__dots { display: flex; gap: 10px; margin-top: 48px; }
.i-hero__dots button { width: 44px; height: 18px; position: relative; }
.i-hero__dots button::before { content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 3px; background: rgba(255,255,255,.3); }
.i-hero__dots button[aria-selected="true"]::before { background: var(--in-red-lt); }

/* ---------- สถิติ ---------- */
.i-stats {
  position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: -72px; background: #fff; box-shadow: var(--in-shadow); border-top: 4px solid var(--in-red);
}
.i-stats li { position: relative; padding: 28px clamp(18px, 2.4vw, 36px); border-left: 1px solid var(--in-line); }
.i-stats li:first-child { border-left: 0; }
.i-stats strong { display: block; font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 700; line-height: 1.1; color: var(--in-slate); font-variant-numeric: tabular-nums; }
.i-stats span:not(.ph) { display: block; margin-top: 6px; font-size: .9375rem; color: var(--in-muted); }
.i-stats .ph { position: absolute; top: 12px; right: 12px; }
.i-stats--flat { margin-top: clamp(48px, 6vw, 80px); box-shadow: none; border: 1px solid var(--in-line); border-top: 4px solid var(--in-red); }

/* ---------- การ์ดบริการ ---------- */
.i-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.i-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--in-line); transition: box-shadow .35s var(--in-ease), transform .35s var(--in-ease); }
.i-card:hover { box-shadow: var(--in-shadow); transform: translateY(-4px); }
.i-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #E3E7EB; }
.i-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--in-ease); }
.i-card:hover .i-card__media img { transform: scale(1.06); }
.i-card__body { flex: 1; display: flex; flex-direction: column; padding: 24px; border-top: 3px solid transparent; transition: border-color .35s var(--in-ease); }
.i-card:hover .i-card__body { border-top-color: var(--in-red); }
.i-card__num { font-size: .8125rem; font-weight: 700; color: var(--in-red); }
.i-card h3 { margin-top: 6px; font-size: 1.2rem; font-weight: 700; color: var(--in-slate); line-height: 1.35; }
.i-card p { margin-top: 10px; color: var(--in-muted); font-size: .9375rem; line-height: 1.7; }
.i-card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; font-size: .875rem; font-weight: 700; color: var(--in-slate); }
.i-card__more .i-ico { color: var(--in-red); }

/* ---------- ทำไมต้องเรา ---------- */
.i-why { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.i-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.i-pillars li { padding: 32px 26px; background: rgba(255,255,255,.05); border-top: 3px solid var(--in-red-lt); transition: background .35s var(--in-ease); }
.i-pillars li:hover { background: rgba(255,255,255,.09); }
.i-pillar__ico { width: 40px; height: 40px; fill: none; stroke: var(--in-red-lt); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 20px; }
.i-pillars h3 { font-size: 1.15rem; font-weight: 700; color: #fff; margin-bottom: 10px; }
.i-pillars p { font-size: .9375rem; line-height: 1.7; color: rgba(255,255,255,.7); }

/* ---------- ประเภทอาคาร ---------- */
.i-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.i-type { position: relative; display: block; aspect-ratio: 4 / 3.2; overflow: hidden; background: #E3E7EB; }
.i-type img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--in-ease); }
.i-type::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(33,37,41,.85) 0%, rgba(33,37,41,.15) 55%, rgba(33,37,41,0) 75%); transition: background .4s var(--in-ease); }
.i-type:hover img { transform: scale(1.07); }
.i-type:hover::after { background: linear-gradient(0deg, rgba(44,62,80,.92) 0%, rgba(44,62,80,.45) 70%); }
.i-type__label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; font-weight: 700; color: #fff; line-height: 1.35; }
.i-type__label .i-ico { color: var(--in-red-lt); flex: none; transition: transform .3s var(--in-ease); }
.i-type:hover .i-type__label .i-ico { transform: translateX(4px); }

/* ---------- ผลงาน (ข้อมูลจาก admin) ---------- */
.i-works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: work; }
.i-works--4 { grid-template-columns: repeat(4, 1fr); }
.i-works .project { counter-increment: work; min-width: 0; }
.i-works .project__btn { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid var(--in-line); transition: box-shadow .35s var(--in-ease); }
.i-works .project__btn:hover { box-shadow: var(--in-shadow); }
.i-works .project__media { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 0; }
.i-works .project__count { position: absolute; top: 12px; right: 12px; padding: 3px 9px; background: rgba(33,37,41,.65); color: #fff; font-size: .75rem; }
.i-works .project__meta { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-top: 3px solid var(--in-red); }
.i-works .project__meta::before { content: counter(work, decimal-leading-zero); font-size: .8125rem; font-weight: 700; color: var(--in-red); }
.i-works .project__meta::after { content: '→'; margin-left: auto; color: var(--in-red); transition: transform .3s var(--in-ease); }
.i-works .project__btn:hover .project__meta::after { transform: translateX(4px); }
.i-works .project__title { font-size: 1.05rem; font-weight: 700; color: var(--in-slate); }
.i-filters .filter { border-radius: 3px; font-weight: 600; }
.i-filters .filter.is-active { background: var(--in-slate); border-color: var(--in-slate); }
.projects__empty { margin-top: 32px; text-align: center; color: var(--in-muted); }

/* ---------- ใบรับรอง ---------- */
.i-certs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.i-cert { position: relative; padding: 36px 26px 30px; text-align: center; background: #fff; border: 1px dashed rgba(44,62,80,.25); }
.i-cert .ph { position: absolute; top: 12px; right: 12px; }
.i-cert__ico { width: 54px; height: 54px; margin: 0 auto 18px; padding: 12px; border-radius: 50%; background: var(--in-grey); fill: none; stroke: var(--in-red-dk); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.i-cert h3 { font-size: 1.075rem; font-weight: 700; color: var(--in-slate); }
.i-cert p { margin-top: 8px; font-size: .875rem; color: var(--in-muted); line-height: 1.6; }

/* ---------- ข้อความ + ภาพ ---------- */
.i-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.i-split--top { align-items: start; }
.i-split__text > p:not(.i-eyebrow):not(.i-lead) { margin-top: 16px; line-height: 1.8; color: var(--in-muted); }
.i-split__text .i-btn { margin-top: 30px; }
.i-split__media { position: relative; margin: 0; aspect-ratio: 5 / 4; overflow: hidden; background: #E3E7EB; }
.i-split__media::before { content: ''; position: absolute; left: 0; top: 0; width: 64px; height: 64px; z-index: 2; border-top: 4px solid var(--in-red); border-left: 4px solid var(--in-red); }
.i-split__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- แบนเนอร์หน้าใน ---------- */
.i-pagehero { position: relative; overflow: hidden; background: var(--in-deep); color: #fff; }
.i-pagehero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.i-pagehero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(33,37,41,.92) 0%, rgba(33,37,41,.55) 70%); }
.i-pagehero__inner { position: relative; z-index: 2; padding-block: clamp(64px, 9vw, 128px); }
.i-crumb { display: flex; flex-wrap: wrap; gap: 10px; font-size: .875rem; color: rgba(255,255,255,.6); margin-bottom: 18px; }
.i-crumb a:hover { color: var(--in-red-lt); }
.i-crumb span:last-child { color: var(--in-red-lt); }
.i-pagehero__title { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.6rem); font-weight: 700; line-height: 1.15; max-width: 18em; text-wrap: balance; animation: in-rise .9s var(--in-ease) both; }
html[lang="th"] .i-pagehero__title { line-height: 1.35; }
html[lang="zh"] .i-pagehero__title { word-break: keep-all; overflow-wrap: anywhere; }
.i-pagehero__sub { margin-top: 18px; max-width: 40em; font-size: clamp(1rem, 1.3vw, 1.15rem); color: rgba(255,255,255,.78); animation: in-rise .9s var(--in-ease) .12s both; }

/* ---------- ภาพตัดอาคาร PEB ---------- */
.i-anatomy { margin: 0; padding: clamp(20px, 3vw, 36px); background: var(--in-grey); border: 1px solid var(--in-line); }
.i-anatomy svg { display: block; width: 100%; height: auto; overflow: visible; }
.i-anatomy path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.i-anatomy .a-grid path { stroke: #9AA3B0; stroke-width: 2; }
.i-anatomy .a-frame path { stroke: var(--in-slate); stroke-width: 3; }
.i-anatomy .a-sheet path { stroke: #8D97A5; stroke-width: 6; }
.i-anatomy .a-sheet .a-thin { stroke-width: 1; stroke: #B7BEC8; }
.i-anatomy .a-purlin path, .i-anatomy .a-girt path { stroke: var(--in-red-dk); stroke-width: 4; }
.i-anatomy .a-brace path { stroke: #6B7684; stroke-width: 1.5; stroke-dasharray: 5 4; }
.i-anatomy .a-dim path { stroke: var(--in-red); stroke-width: 1.2; }
.i-anatomy .a-lead path { stroke: var(--in-ink); stroke-width: .8; }
.i-anatomy text { font-family: var(--font-body); font-size: 15px; font-weight: 600; fill: var(--in-slate); }
.i-anatomy .a-dimtxt { fill: var(--in-red-dk); font-size: 13px; }
.i-anatomy figcaption { margin-top: 14px; font-size: .875rem; color: var(--in-muted); }

/* ---------- Accordion (สเปก / FAQ) — ใช้ <details> ---------- */
.i-specs { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
.i-specs__head { position: sticky; top: calc(var(--header-h) + 32px); }
.i-specs__head .i-btn { margin-top: 28px; }
.i-acc { border-top: 1px solid var(--in-line); }
.i-acc__item { border-bottom: 1px solid var(--in-line); background: transparent; transition: background .3s var(--in-ease); }
.i-acc__item[open] { background: #fff; }
.i-section:not(.i-section--grey) .i-acc__item[open] { background: var(--in-grey); }
.i-acc summary {
  display: flex; align-items: center; gap: 18px; padding: 20px 22px; cursor: pointer; list-style: none;
  font-size: 1.075rem; font-weight: 700; color: var(--in-slate);
}
.i-acc summary::-webkit-details-marker { display: none; }
.i-acc summary:hover { color: var(--in-red-dk); }
.i-acc__num { font-size: .8125rem; color: var(--in-red); font-variant-numeric: tabular-nums; }
.i-acc summary i { position: relative; flex: none; width: 28px; height: 28px; margin-left: auto; border: 1px solid var(--in-line); border-radius: 50%; }
.i-acc summary i::before, .i-acc summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--in-slate); transform: translate(-50%, -50%); transition: transform .3s var(--in-ease); }
.i-acc summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.i-acc__item[open] summary i { background: var(--in-red); border-color: var(--in-red); }
.i-acc__item[open] summary i::before { background: #fff; }
.i-acc__item[open] summary i::after { background: #fff; transform: translate(-50%, -50%) rotate(0deg); }
.i-acc__item p { padding: 0 22px 22px 58px; line-height: 1.8; color: var(--in-muted); }
.i-acc--faq .i-acc__item p { padding-left: 22px; }

/* ---------- ตาราง ---------- */
.i-table { overflow-x: auto; border: 1px solid var(--in-line); background: #fff; }
.i-table table { width: 100%; min-width: 620px; border-collapse: collapse; }
.i-table th, .i-table td { padding: 18px 22px; text-align: left; vertical-align: top; font-size: .9375rem; line-height: 1.6; }
.i-table thead th { background: var(--in-slate); color: #fff; font-weight: 700; }
.i-table thead th.is-hl { background: var(--in-red); }
.i-table tbody tr + tr { border-top: 1px solid var(--in-line); }
.i-table tbody th { width: 24%; font-weight: 700; color: var(--in-slate); background: var(--in-grey); }
.i-table td.is-hl { background: rgba(229,45,45,.07); color: var(--in-ink); font-weight: 500; }

/* ---------- เกี่ยวกับเรา ---------- */
.i-mv { display: grid; grid-template-columns: 5fr 6fr; gap: 0; box-shadow: var(--in-shadow); }
.i-mv__vision { padding: clamp(32px, 4.5vw, 60px); background: var(--in-slate); color: #fff; }
.i-mv__label { font-size: 1.1rem; font-weight: 700; color: var(--in-red-lt); }
.i-mv__quote { margin-top: 16px; font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 600; line-height: 1.45; }
.i-mv__mission { padding: clamp(32px, 4.5vw, 60px); background: #fff; }
.i-checks { display: grid; gap: 14px; }
.i-checks li { position: relative; padding-left: 36px; line-height: 1.7; color: var(--in-ink); }
.i-checks li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--in-red); color: #fff; font-size: .75rem; font-weight: 700; }

.i-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.i-values li { padding: 30px 26px; background: rgba(255,255,255,.05); }
.i-values__letter { display: block; font-size: 3.5rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--in-red-lt); margin-bottom: 18px; }
.i-values h3 { font-size: 1.15rem; font-weight: 700; color: #fff; margin-bottom: 8px; }
.i-values p { font-size: .9375rem; color: rgba(255,255,255,.7); line-height: 1.7; }

.i-leaders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 980px; margin-inline: auto; }
.i-leader { position: relative; text-align: center; padding-bottom: 24px; background: #fff; border: 1px solid var(--in-line); }
.i-leader .ph { position: absolute; top: 12px; right: 12px; }
.i-leader__photo { display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 20px; background: linear-gradient(160deg, #EEF0F3, #D9DEE3); }
.i-leader__photo svg { width: 38%; height: auto; fill: none; stroke: #9AA3B0; stroke-width: 1.2; }
.i-leader h3 { font-size: 1.1rem; font-weight: 700; color: var(--in-slate); }
.i-leader p { margin-top: 4px; font-size: .9375rem; color: var(--in-red-dk); }

.i-ms { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.i-ms::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--in-line); }
.i-ms li { position: relative; padding: 40px 24px 0 0; }
.i-ms li::before { content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--in-red); }
.i-ms__year { display: block; font-size: 1.6rem; font-weight: 700; color: var(--in-slate); }
.i-ms p { margin-top: 6px; color: var(--in-muted); line-height: 1.6; }

/* ---------- บริการ ---------- */
.i-rows { display: grid; gap: clamp(64px, 8vw, 112px); }
.i-row { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(36px, 5vw, 80px); align-items: center; scroll-margin-top: calc(var(--header-h) + 24px); }
.i-row--flip .i-row__media { order: 2; }
.i-row__media { position: relative; margin: 0; aspect-ratio: 16 / 11; overflow: hidden; background: #E3E7EB; }
.i-row__media img { width: 100%; height: 100%; object-fit: cover; }
.i-row__num { display: block; font-size: 3rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--in-red); margin-bottom: 14px; }

.i-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; counter-reset: none; }
.i-steps li { padding: 28px 22px; background: rgba(255,255,255,.05); border-top: 3px solid var(--in-red-lt); }
.i-steps__num { display: block; font-size: 1.75rem; font-weight: 300; color: var(--in-red-lt); margin-bottom: 10px; }
.i-steps h3 { font-size: 1.075rem; font-weight: 700; color: #fff; }
.i-steps p { margin-top: 8px; font-size: .875rem; color: rgba(255,255,255,.66); line-height: 1.65; }

/* ---------- ติดต่อ / ขอใบเสนอราคา ---------- */
.i-contact { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(36px, 5vw, 72px); align-items: start; scroll-margin-top: calc(var(--header-h) + 24px); }
#rfq { scroll-margin-top: calc(var(--header-h) + 8px); }
.i-contact__form .i-lead { margin-bottom: 32px; }
.i-form { max-width: none; }
.i-form__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.i-form .field--full { grid-column: 1 / -1; }
.i-form .field input, .i-form .field select, .i-form .field textarea { border-radius: 3px; background: var(--in-grey); border-color: transparent; }
.i-form .field input:focus, .i-form .field select:focus, .i-form .field textarea:focus { background: #fff; border-color: var(--in-slate); }
.i-form .field.has-error input, .i-form .field.has-error textarea { border-color: var(--c-danger); }
.i-form .field label { font-weight: 600; color: var(--in-slate); }
.i-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.i-form__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.i-form__foot .i-btn[disabled] { opacity: .6; cursor: progress; }
.i-form .form__status { margin: 0; max-width: 46ch; }
.i-form .form__status[data-state="ok"] { color: #2E7D4F; }
.i-form .form__status[data-state="error"] { color: var(--c-danger); }
.i-form .form__status a { text-decoration: underline; text-underline-offset: 3px; }
.i-contact__side { display: grid; gap: 20px; }
.i-office, .i-career { padding: 28px; background: var(--in-slate); color: rgba(255,255,255,.82); }
.i-office h3, .i-career h3 { font-size: 1.15rem; font-weight: 700; color: #fff; margin-bottom: 16px; }
.i-career { background: var(--in-grey); color: var(--in-muted); scroll-margin-top: calc(var(--header-h) + 24px); }
.i-career h3 { color: var(--in-slate); }
.i-career .i-link { margin-top: 14px; overflow-wrap: anywhere; }
.i-map { aspect-ratio: 4 / 3; background: #E3E7EB; }
.i-map iframe { width: 100%; height: 100%; border: 0; }

/* ---------- CTA band ---------- */
.i-cta { position: relative; overflow: hidden; background: var(--in-slate); color: rgba(255,255,255,.8); }
.i-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .25; }
.i-cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(44,62,80,.96) 30%, rgba(44,62,80,.7)); }
.i-cta__inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 32px 64px; flex-wrap: wrap; padding-block: clamp(56px, 7vw, 96px); }
.i-cta__inner > div:first-child { max-width: 680px; }
.i-cta__title { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 700; color: #fff; line-height: 1.25; text-wrap: balance; }
html[lang="th"] .i-cta__title { line-height: 1.4; }
.i-cta p { margin-top: 14px; line-height: 1.75; }
.i-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Footer ---------- */
.i-footer { background: var(--in-deep); color: rgba(255,255,255,.66); font-size: .9375rem; }
.i-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1.5fr; gap: clamp(28px, 4vw, 56px); padding-block: clamp(56px, 7vw, 88px); }
.i-footer__brand p { margin-top: 18px; line-height: 1.75; }
.i-footer h3 { font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 18px; }
html[lang="th"] .i-footer h3, html[lang="zh"] .i-footer h3 { letter-spacing: .04em; font-size: .9375rem; }
.i-footer li + li { margin-top: 10px; }
.i-footer a:hover { color: var(--in-red-lt); }
.i-footer address { font-style: normal; }
.i-footer__row { display: flex; gap: 12px; align-items: flex-start; line-height: 1.6; overflow-wrap: anywhere; }
.i-footer__row + .i-footer__row { margin-top: 12px; }
.i-footer__row .i-ico { margin-top: 3px; color: var(--in-red-lt); }
.i-footer__legal { border-top: 1px solid rgba(255,255,255,.1); }
.i-footer__legal .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 24px; padding-block: 20px; font-size: .8125rem; }
.i-footer__legal p { margin: 0; }
.i-footer__legal p:last-child { color: var(--in-red-lt); }
.to-top { background: var(--in-red); border-radius: 3px; }
.to-top:hover { background: var(--in-red-dk); }
.scroll-progress span { background: var(--in-red); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .i-header__quote { display: none; }
  .i-dd__link { padding: 10px 10px; }
}
@media (max-width: 1024px) {
  .i-nav { display: none; }
  .burger { display: block; }
  .i-cards, .i-types, .i-certs, .i-works--4 { grid-template-columns: repeat(2, 1fr); }
  .i-why, .i-specs, .i-contact { grid-template-columns: 1fr; }
  .i-specs__head { position: static; }
  .i-values { grid-template-columns: 1fr 1fr; }
  .i-steps { grid-template-columns: repeat(3, 1fr); }
  .i-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .i-split, .i-row, .i-mv { grid-template-columns: 1fr; }
  .i-row--flip .i-row__media { order: 0; }
  .i-stats { grid-template-columns: 1fr 1fr; }
  .i-stats li:nth-child(3) { border-left: 0; }
  .i-stats li:nth-child(n+3) { border-top: 1px solid var(--in-line); }
  .i-works { grid-template-columns: 1fr 1fr; }
  .i-pillars { grid-template-columns: 1fr; }
  .i-leaders { grid-template-columns: 1fr 1fr; }
  .i-ms { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .i-ms::before { display: none; }
  .i-top__inner > span:first-child { display: none; }
  .i-top__inner { justify-content: center; }
}
@media (max-width: 600px) {
  .i-top { display: none; }
  .i-hero__content { padding-block: 72px 120px; }
  .i-hero__cta .i-btn { flex: 1 1 auto; }
  .i-cards, .i-types, .i-certs, .i-works, .i-works--4, .i-values, .i-leaders { grid-template-columns: 1fr; }
  .i-leader__photo { aspect-ratio: 16 / 9; }
  .i-steps { grid-template-columns: 1fr 1fr; }
  .i-form__grid { grid-template-columns: 1fr; }
  .i-footer__grid { grid-template-columns: 1fr; }
  .i-acc summary { padding: 18px 14px; gap: 12px; font-size: 1rem; }
  .i-acc__item p { padding: 0 14px 18px; }
  .i-cta__actions .i-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .i-hero .hero__slide.is-active img, .i-hero__title, .i-hero__sub, .i-hero__cta, .i-hero .i-eyebrow,
  .i-pagehero__title, .i-pagehero__sub { animation: none; }
}

/* ============================================================
   MODERN MINIMAL (ตามคำขอลูกค้า) — แถบเมนูเทาอ่อน, กล่องเส้นเทา + แถบแดงด้านบน,
   ไอคอนในวงกลมแดงบนพื้นเทาอ่อน, ไม่มีสีทอง
   ============================================================ */
body.ind { background: #fff; color: var(--in-ink); }
.i-section--navy { background: var(--in-slate); }

/* แถบบน + เมนู: เทาอ่อนอมฟ้า ตัวอักษรเทาเข้ม */
.i-top { background: var(--in-bar); color: var(--in-muted); border-bottom: 1px solid var(--in-border); }
.i-top a:hover { color: var(--in-red); }
.i-top .i-ico { color: var(--in-red); }
.i-header { background: var(--in-bar) !important; box-shadow: 0 1px 0 var(--in-border); }
.i-header.is-scrolled { box-shadow: 0 6px 20px rgba(33,37,41,.08); }
.i-header .lang__btn { background: #fff; border-color: var(--in-border); }
.i-dd:hover .i-dd__link, .i-dd:focus-within .i-dd__link { background: #fff; color: var(--in-red); }
.i-dd.is-page > .i-dd__link { color: var(--in-red); box-shadow: inset 0 -3px 0 var(--in-red); }

/* โลโก้จริงของบริษัท (รูปภาพ) */
.i-logo { display: inline-flex; align-items: center; flex: none; }
.i-logo img { display: block; height: 60px; width: auto; }
.i-footer .i-logo img { height: 56px; }
@media (max-width: 768px) { .i-logo img { height: 42px; } }

/* การ์ดบริการ: กรอบเทา + แถบแดงด้านบนเท่ากันทุกใบ */
.i-card { border: 1px solid var(--in-border); border-top: 3px solid var(--in-red); }
.i-card__body { border-top: 0; }
.i-card:hover .i-card__body { border-top-color: transparent; }

/* จุดเด่น 3 ช่อง (พื้นเข้ม): กรอบบาง + แถบแดงด้านบน + ไอคอนวงกลมแดง */
.i-pillars { gap: 16px; }
.i-pillars li { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-top: 3px solid var(--in-red); }
.i-pillar__ico { width: 56px; height: 56px; padding: 14px; border-radius: 50%; background: var(--in-red); stroke: #fff; }

/* ใบรับรอง: กล่องเทาอ่อน + ไอคอนวงกลมแดง */
.i-cert { background: var(--in-grey); border: 1px solid var(--in-border); border-top: 3px solid var(--in-red); }
.i-section--grey .i-cert { background: #fff; }
.i-cert__ico { background: var(--in-red); stroke: #fff; }

/* ค่านิยม / ขั้นตอน (พื้นเข้ม) */
.i-values { gap: 16px; }
.i-values li, .i-steps li { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.i-steps li { border-top: 3px solid var(--in-red); }
.i-steps { gap: 12px; }

/* ตาราง: หัวเทาเข้ม คอลัมน์เด่นแดง */
.i-table thead th { background: var(--in-deep); }
.i-table tbody th { background: var(--in-off); }

/* ฟอร์ม */
.i-form .field input, .i-form .field select, .i-form .field textarea { background: var(--in-off); border: 1px solid var(--in-border); }
.i-form .field input:focus, .i-form .field select:focus, .i-form .field textarea:focus { background: #fff; border-color: var(--in-slate); }
.i-office { background: var(--in-deep); }

/* ภาพตัดอาคาร PEB */
.i-anatomy { background: var(--in-off); border-color: var(--in-border); }
.i-anatomy .a-dim path { stroke: var(--in-muted); }
.i-anatomy .a-dimtxt { fill: var(--in-muted); }

.i-leader p { color: var(--in-muted); }

/* CTA / footer: เทาเข้มตัดดำ */
.i-cta { background: var(--in-slate); }
.i-cta::after { background: linear-gradient(90deg, rgba(44,62,80,.96) 30%, rgba(44,62,80,.78)); }
.i-footer { background: var(--in-deep); }
.i-footer__legal p:last-child { color: #ADB5BD; }
.i-filters .filter.is-active { background: var(--in-deep); border-color: var(--in-deep); }
.mobile-lang button.is-active { border-color: var(--in-red); color: var(--in-red); }

/* ============================================================
   GLASS MENU — แถบเมนูโปร่งแสง + เอฟเฟกต์แสงเมื่อชี้เมาส์
   - แถบหัวเป็นกระจกฝ้า มองเห็นเนื้อหาด้านหลังจาง ๆ ตอนเลื่อนหน้า
     (ใส่ blur ที่ ::before ไม่ใส่ที่ตัว header เพื่อให้เมนูย่อยเบลอฉากหลังได้ด้วย)
   - ชี้เมาส์ที่เมนู: พื้นกระจกใส + แสงวาบพาดผ่าน
   - เมนูย่อย: กระจกฝ้าโปร่งแสง
   ============================================================ */
.i-header { background: transparent !important; isolation: isolate; }
.i-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(232, 236, 239, .78);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  transition: background .35s var(--in-ease);
}
.i-header.is-scrolled::before { background: rgba(232, 236, 239, .66); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .i-header::before, .i-header.is-scrolled::before { background: var(--in-bar); }
}

/* ปุ่มเมนู: กระจกใส + เงาแสงขอบ + แสงวาบ */
.i-dd__link { position: relative; overflow: hidden; border: 1px solid transparent; border-radius: 6px; transition: color .25s var(--in-ease), background .3s var(--in-ease), border-color .3s var(--in-ease), box-shadow .3s var(--in-ease); }
.i-dd__link::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg); opacity: 0;
}
.i-dd:hover .i-dd__link, .i-dd:focus-within .i-dd__link {
  color: var(--in-red);
  background: rgba(255, 255, 255, .45);
  border-color: rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 18px rgba(33, 37, 41, .08);
}
.i-dd:hover .i-dd__link::after { animation: i-sheen .8s var(--in-ease) both; }
@keyframes i-sheen { 0% { left: -60%; opacity: 0; } 20% { opacity: 1; } 100% { left: 130%; opacity: 0; } }
.i-dd.is-page > .i-dd__link { border-radius: 6px 6px 0 0; }

/* เมนูย่อย: กระจกฝ้า */
.i-dd__menu {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .7); border-top: 3px solid var(--in-red); border-radius: 0 0 8px 8px;
  box-shadow: 0 20px 44px rgba(33, 37, 41, .16), inset 0 1px 0 rgba(255,255,255,.8);
}
.i-dd__menu a { border-radius: 4px; transition: background .25s var(--in-ease), color .25s var(--in-ease), padding-left .25s var(--in-ease); }
.i-dd__menu a:hover { background: rgba(255, 255, 255, .7); color: var(--in-red); padding-left: 20px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .i-dd__menu { background: #fff; }
}

/* ปุ่มขอใบเสนอราคาในแถบหัว: แสงวาบเมื่อชี้ */
.i-header__quote { position: relative; overflow: hidden; }
.i-header__quote::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  transform: skewX(-18deg); opacity: 0;
}
.i-header__quote:hover::after { animation: i-sheen .8s var(--in-ease) both; }

@media (prefers-reduced-motion: reduce) {
  .i-dd:hover .i-dd__link::after, .i-header__quote:hover::after { animation: none; }
}

/* ============================================================
   LAUNCH — ปรับตอนขึ้นเว็บจริง
   ============================================================ */
.i-cert { border-style: solid; border-color: var(--in-border); }
.i-team { grid-template-columns: repeat(3, 1fr); max-width: 1080px; margin-inline: auto; }
.i-ms .ph { margin-top: 8px; }
@media (max-width: 1024px) { .i-team { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .i-team { grid-template-columns: 1fr; max-width: 560px; } }