/* KHT v15 (2026 redesign): shared styles for every page. Started from the approved mockup (Sandbox/khtcs-stageshow-mockup/site.css).
   The home page hero is .hero.full, because the old templates also use a plain .hero. */
:root {
  --hl: #ffc800; /* marker bar: first Kim's green (#71f93f, from his reference), then yellow to match the yellow hero
                   ("แถบสีเขียว แก้เป็นสีเหลืองให้สอดคล้องกับสี hero", 3 Nov 2026); #ffc800 is the middle of the hero's yellows */
  --bg: #ffffff;
  --stage: #f3f2ef;
  --card: #ffffff;
  --ink: #17171a;
  --ink-2: #55555c;
  --ink-3: #6b6b72;
  --line: #e2e0d9;
  --accent: #f2c200;
  --accent-ink: #6b5400;
  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 9px;
  --shadow: 0 1px 2px rgba(20,20,20,.05), 0 8px 24px -8px rgba(20,20,20,.14);
  --step: 3600ms;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.7 "IBM Plex Sans", "IBM Plex Sans Thai", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.eyebrow { font-size: 13px; font-weight: 400; color: var(--ink-3); letter-spacing: .02em; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; margin: 0; }
h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.3; }
h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.35; }
h3 { font-size: 17px; line-height: 1.5; }
p { margin: 0; color: var(--ink-2); }
section { padding-block: clamp(64px, 9vw, 120px); }

/* ---------- header: see-through over the hero, white once the page under it turns white ---------- */
header {
  position: fixed; inset: 0 0 auto; z-index: 20; height: 64px;
  color: #fff; transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
header.solid { background: #fff; color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; padding: 0 28px; }
.nav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; font-size: 12.5px; letter-spacing: .03em; }
.nav ul.right { justify-content: flex-end; }
.nav ul a:hover, .nav .right-mobile:hover { text-decoration: underline; text-underline-offset: 4px; }
.logo img { display: block; width: 190px; height: auto; transition: filter .3s ease; }
header.solid .logo img { filter: brightness(0); } /* white PNG turned black on the white bar */
.menu-btn { display: none; justify-self: start; background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: inherit; }
.nav .right-mobile { display: none; justify-self: end; font-size: 13px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 999px;
  font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: transform .15s ease, background .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #2c2c31; }
.btn-ghost { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px #cfccc3; }
.hero-actions { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }

/* ---------- hero: Kim's pictures full-bleed, one after another, a few small words at the bottom ---------- */
.hero.full { position: relative; height: 100svh; min-height: 560px; padding: 0; overflow: hidden; background: #2a2a2a; color: #fff; }
/* the incoming picture sits on top (.top) and fades in over the one still showing, so the change never dips to black */
.slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.8s ease-in-out; }
/* each picture arrives a touch closer and settles back while it shows (slow zoom); a slide stays 6 s, so 7.8 s outlasts its fade-out */
.slide.on { opacity: 1; animation: settle 7.8s cubic-bezier(.22,.61,.36,1) both; }
@keyframes settle { from { transform: scale(1.06); } to { transform: scale(1); } }
.slide.top { z-index: 1; }
.hero.full::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  /* shade only behind the menu and the words at the bottom, keep the middle clean */
  background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0) 16%, rgba(0,0,0,0) 74%, rgba(0,0,0,.45));
}
.hero-foot { position: absolute; left: 0; right: 0; bottom: 36px; z-index: 3; text-align: center; font-size: 12.5px; letter-spacing: .04em; line-height: 1.6; }
.slide-ctl { position: absolute; right: 28px; bottom: 36px; z-index: 3; display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .06em; }
.slide-ctl button { background: none; border: 0; padding: 4px; color: inherit; font: inherit; cursor: pointer; }
@media (max-width: 900px) { .slide-ctl { right: 16px; bottom: 16px; } }
.hero-foot h1 { font: inherit; font-weight: 600; }
.hero-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.chev { display: block; width: 7px; height: 7px; margin: 8px auto 0; border-right: 1px solid; border-bottom: 1px solid; transform: rotate(45deg); }
section[id] { scroll-margin-top: 72px; }

.stage {
  position: relative;
  margin-top: clamp(40px, 6vw, 64px);
  background: var(--stage);
  border-radius: var(--r-lg);
  padding: clamp(14px, 2.4vw, 28px);
}

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.about p { font-size: 17px; margin-top: 18px; }
.pillars { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pillars li { display: grid; grid-template-columns: 36px 1fr; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.pillars em { font-style: normal; color: var(--ink-3); font-family: "IBM Plex Sans", sans-serif; font-size: 13px; padding-top: 2px; }

/* ---------- workflow ---------- */
.flow-head { display: flex; justify-content: space-between; gap: 32px; align-items: end; flex-wrap: wrap; }
.flow-head p { max-width: 460px; }
.flow-stage { margin-top: 40px; }
.flow-frame { position: relative; overflow: hidden; border-radius: var(--r-md); aspect-ratio: 16 / 7.5; background: #ddd; }
.flow-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04);
  transition: opacity .7s ease, transform 4s ease;
}
.flow-frame img.on { opacity: 1; transform: scale(1); }
.flow-caption {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  background: var(--card); border-radius: var(--r-sm); box-shadow: var(--shadow);
  padding: 8px 12px; font-size: 13px; color: var(--ink-2);
}
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.step {
  position: relative; text-align: left; cursor: pointer;
  background: var(--card); border: 0; border-radius: var(--r-sm);
  padding: 14px 16px 18px; font: inherit; color: var(--ink-3);
  transition: color .2s ease, box-shadow .2s ease;
}
.step b { display: block; font-weight: 500; font-size: 15px; color: inherit; }
.step small { font-size: 12px; font-family: "IBM Plex Sans", sans-serif; }
.step::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 8px; height: 2px; border-radius: 2px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
}
.step.done::after { transform: scaleX(1); background: var(--line); }
.step.on { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.step.on::after { animation: fill var(--step) linear forwards; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- products ---------- */
.grid-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.product { display: block; }
.product .ph { overflow: hidden; border-radius: var(--r-md); aspect-ratio: 4 / 3; background: var(--stage); }
.product img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.product:hover img { transform: scale(1.035); }
.product .meta { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 2px 0; }
.product .en { font-size: 12px; color: var(--ink-3); font-family: "IBM Plex Sans", sans-serif; }
.arrow { transition: transform .2s ease; color: var(--ink-3); }
.product:hover .arrow, .row:hover .arrow { transform: translateX(3px); color: var(--ink); }

/* ---------- solutions ---------- */
.solutions { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 6vw, 96px); }
.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.row em { font-style: normal; font-size: 13px; color: var(--ink-3); font-family: "IBM Plex Sans", sans-serif; }
.row p { font-size: 14px; margin-top: 2px; }

/* ---------- projects: one card = one photo set ---------- */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 28px; }
.chip {
  border: 0; font: inherit; font-size: 14px; cursor: pointer;
  height: 36px; padding: 0 14px; border-radius: 999px;
  background: var(--card); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line);
}
.chip span { color: var(--ink-3); font-family: "IBM Plex Sans", sans-serif; font-size: 12px; margin-left: 4px; }
.chip[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.chip[aria-selected="true"] span { color: #a9a9b0; }
.sets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.set { border: 0; padding: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.set .ph { position: relative; overflow: hidden; border-radius: var(--r-md); aspect-ratio: 3 / 2; background: var(--stage); }
.set .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.set:hover .ph img { transform: scale(1.035); }
.set .count {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--ink);
}
.set .meta { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 12px 2px 0; }
.set .yr { font-size: 13px; color: var(--ink-3); font-family: "IBM Plex Sans", sans-serif; flex: none; }
.sets-more { margin-top: 24px; }

/* set viewer: the clicked set opens on its own stage */
.viewer { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; }
.viewer::backdrop { background: rgba(23,23,26,.55); backdrop-filter: blur(6px); }
.viewer[open] { display: grid; place-items: center; animation: fadeIn .25s ease; }
.viewer-stage { width: min(1040px, 100% - 32px); background: var(--stage); border-radius: var(--r-lg); padding: clamp(12px, 2vw, 20px); }
.viewer-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 2px 4px 12px; }
.viewer-top small { color: var(--ink-3); font-size: 12px; }
/* height fits short screens so the thumbnail strip stays visible; contain keeps portrait shots whole */
.viewer-main {
  position: relative; border-radius: var(--r-md); overflow: hidden; background: #d9d7d0;
  height: min(calc(100dvh - 230px), calc((min(1040px, 100vw - 32px) - 40px) * .62));
}
.viewer-main img { width: 100%; height: 100%; object-fit: contain; }
.nav-btn {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.92); box-shadow: var(--shadow); font-size: 18px;
}
.nav-btn.prev { left: 12px; } .nav-btn.next { right: 12px; }
.close-btn { border: 0; background: var(--card); border-radius: 999px; height: 34px; padding: 0 14px; font: inherit; font-size: 13px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.thumbs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 10px; }
.thumbs button { border: 0; padding: 0; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 3 / 2; cursor: pointer; opacity: .55; transition: opacity .2s ease; background: var(--stage); }
.thumbs button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--ink); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- service centers (faux UI card) ---------- */
.centers { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.centers-stage { background: var(--stage); border-radius: var(--r-lg); padding: clamp(14px, 2.4vw, 28px); }
.app { background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow); display: grid; grid-template-columns: 180px 1fr; overflow: hidden; }
.tabs { border-right: 1px solid var(--line); padding: 10px; display: grid; gap: 2px; align-content: start; }
.tab {
  text-align: left; border: 0; background: none; font: inherit; font-size: 14px; color: var(--ink-2);
  padding: 9px 12px; border-radius: var(--r-sm); cursor: pointer;
}
.tab:hover { background: var(--bg); }
.tab[aria-selected="true"] { background: var(--bg); color: var(--ink); font-weight: 500; }
.panel { padding: 12px; }
.panel .ph { border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 16 / 9; background: var(--stage); }
.panel .ph img { width: 100%; height: 100%; object-fit: cover; }
.panel .info { padding: 14px 6px 6px; }
.panel .info small { color: var(--ink-3); font-size: 12px; }
.panel .info h3 { margin-top: 2px; }
.panel .info a { display: block; font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.panel .info a:hover { color: var(--ink); }
.fade { animation: fadeIn .35s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- cta + footer ---------- */
.cta { text-align: center; }
.cta p { margin: 14px auto 0; max-width: 460px; }
.cta .hero-actions { justify-content: center; }
footer { padding: 120px 0 64px; font-size: 12.5px; letter-spacing: .03em; line-height: 1.9; }
.foot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; width: min(1180px, 100% - 48px); margin: 0 auto; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.social { display: flex; justify-content: center; gap: 22px; margin-top: 112px; }
.social svg { display: block; width: 17px; height: 17px; }
.legal { margin-top: 24px; text-align: center; font-size: 11.5px; color: var(--ink-3); }
@media (max-width: 700px) { .foot { grid-template-columns: repeat(2, 1fr); row-gap: 40px; } }

/* reveal on scroll: content arrives as you reach it */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

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

@media (max-width: 900px) {
  .nav { padding: 0 16px; }
  .nav ul { display: none; }
  .menu-btn, .nav .right-mobile { display: block; }
  .logo img { width: 150px; }
  .about, .solutions, .centers { grid-template-columns: 1fr; }
  .products, .sets { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .products, .sets { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .thumbs { grid-template-columns: repeat(4, 1fr); }
  .flow-frame { aspect-ratio: 4 / 3; }
  .app { grid-template-columns: 1fr; }
  .tabs { border-right: 0; border-bottom: 1px solid var(--line); grid-auto-flow: column; overflow-x: auto; }
  .tab { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  /* a cross-fade has no movement, so it stays; only the zoom goes (the office PC reports reduced motion, 3 Nov 2026) */
  .slide { transition: opacity 1.8s ease-in-out !important; }
}

/* ---------- mobile menu panel (the "เมนู" button) ---------- */
.menu-panel { list-style: none; margin: 0; padding: 8px 16px 20px; background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); }
.menu-panel li a { display: block; padding: 12px 0; font-size: 15px; border-bottom: 1px solid var(--line); }
.menu-panel li:last-child a { border-bottom: 0; }
header.open { height: auto; }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 901px) { .menu-panel { display: none; } }

/* ---------- inner pages: white bar from the start, a quiet title block, the same airy rhythm as the home page ---------- */
.page-head { padding: calc(64px + clamp(56px, 8vw, 104px)) 0 clamp(32px, 5vw, 56px); }
.page-head .eyebrow { margin-bottom: 10px; }
.page-head h1 { font-size: clamp(28px, 4vw, 40px); }
.page-head p { margin-top: 14px; max-width: 620px; font-size: 16px; }
.crumbs { font-size: 13px; color: var(--ink-3); margin-bottom: 18px; }
.crumbs a:hover { color: var(--ink); }

/* ---------- product pages (products.html, product.html) ---------- */
.catalog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 20px; margin-top: 28px; }
.item { display: block; }
.item .ph { aspect-ratio: 1; background: #f4f4f2; border-radius: var(--r-md); overflow: hidden; }
.item .ph img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.item:hover .ph img { transform: scale(1.04); }
.item h3 { margin-top: 12px; font-size: 15px; }
.item p { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.detail .ph { position: relative; background: #f4f4f2; border-radius: var(--r-lg); aspect-ratio: 1; overflow: hidden; }
/* tall machines (stacked units) must fit whole: percentage heights do not resolve inside a grid cell, so pin the picture */
.detail .ph img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }
.detail h1 { font-size: clamp(28px, 3.6vw, 38px); }
.detail .sizes { margin-top: 6px; color: var(--ink-3); font-size: 14px; }
.detail .info { margin-top: 18px; font-size: 16px; }
.feat { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--line); font-size: 14px; }
.feat li { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.spec-wrap { margin-top: 24px; overflow-x: auto; border-top: 1px solid var(--ink); }
.spec { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.spec th, .spec td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; white-space: nowrap; }
.spec td:first-child { white-space: normal; min-width: 200px; }
.spec td:first-child small { display: block; color: var(--ink-3); font-size: 12px; }
.spec thead th { font-weight: 600; color: var(--ink); }
.spec .grp td { padding-top: 22px; font-weight: 600; color: var(--ink); border-bottom-color: var(--ink); }
.spec td.unit { color: var(--ink-3); }
.note { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 900px) {
  .catalog { grid-template-columns: repeat(2, 1fr); }
  .detail { grid-template-columns: 1fr; }
}

/* heading for screen readers only (keeps h1 > h2 > h3 when the visible list has no section title) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* home page: the four newest tips (tips.html opens each one) */
.home-tips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 28px; }
.home-tips a { display: block; }
.home-tips .ph { aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: var(--stage); }
.home-tips img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.home-tips a:hover img { transform: scale(1.035); }
.home-tips h3 { margin-top: 12px; font-size: 15px; line-height: 1.5; }
@media (max-width: 900px) { .home-tips { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

/* logo: on hover a slow white sheen glides across the letters, like light on glass (Kim, 3 Nov 2026: "เวลาเม้าไปชี้ให้ทำ motion",
   then "วิ่งเร็วเกินไป ทำเป็นแสงเงาสีขาวเหมือนกระจก ... วิ่งช้าๆ"). The logo is a PNG, so the sheen is a gradient masked by the logo's
   own shape and shows only inside the letters. The letters dim a little while the pointer is on them, so white light still reads
   on the white logo over the photo. */
.logo { position: relative; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.logo img { transition: opacity .8s ease, filter .3s ease; }
.logo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  -webkit-mask: url(img/logo2.png) center / 100% 100% no-repeat; mask: url(img/logo2.png) center / 100% 100% no-repeat;
  /* a soft glow with a thin bright line in its middle. The gradient is twice the logo's width, so its centre sits at
     x = W - W*p for background-position p: 125% puts it a quarter-width left of the logo, -25% a quarter-width right of it,
     and the light is on the letters for most of the 2.8 s instead of a third of it. */
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.35) 45%, rgba(255,255,255,.8) 49.3%, #fff 50%,
              rgba(255,255,255,.8) 50.7%, rgba(255,255,255,.35) 55%, transparent 60%) no-repeat;
  background-size: 200% 100%; background-position: 125% 0;
}
.logo:hover { transform: translateY(-1px); }
/* only the white logo over the photo dims; the black one on the white bar keeps its colour and shows the light as a pale streak */
header:not(.solid) .logo:hover img, header:not(.solid) .logo:focus-visible img { opacity: .6; }
.logo:hover::after, .logo:focus-visible::after { animation: gleam 2.8s cubic-bezier(.45,.05,.35,1) forwards; }
@keyframes gleam {
  0% { opacity: 0; background-position: 125% 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; background-position: -25% 0; }
}
/* the sheen only answers the pointer and moves inside the letters, so it stays on under reduced motion (the office PC reports it) */
@media (prefers-reduced-motion: reduce) {
  .logo:hover::after, .logo:focus-visible::after { animation: gleam 2.8s cubic-bezier(.45,.05,.35,1) forwards !important; }
  .logo img { transition: opacity .8s ease !important; }
}

/* Green marker bar under the big headings (Kim, 3 Nov 2026: "ใส่สไตล์แถบสีเขียวแบบนี้ให้เว็บดูมีสีสันทั้งเว็บ").
   site.js wraps the heading text in span.hl; the bar covers the lower half of the letters, starts a little in and runs past the
   end like his reference. Not box-decoration-break: clone: browsers then switch off text-wrap: balance, and the per-line
   padding is left out when an auto-width column is sized, so a line overflowed (met 3 Nov 2026). */
.hl { padding: 0 .55em .2em 0; margin-right: -.55em;
  background: linear-gradient(var(--hl), var(--hl)) no-repeat .4em 100% / 100% .85em; }
/* Thai lines break at the spaces between phrases, not inside them ("ให้คำ|ปรึกษา"): site.js puts each Thai run in span.nb;
   a run wider than its line gets "split" and breaks normally */
.nb { display: inline-block; }
.nb.split { display: inline; }
.nw { white-space: nowrap; }
/* even line lengths in headings (no lone "ซักรีด" on the last line), no one-word last line in paragraphs */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* TH / EN switch at the end of the menu (v16): set apart by a hairline, Latin face */
.nav .lang { padding-left: 18px; border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.nav .lang a, .menu-panel .lang a { font-family: "IBM Plex Sans", sans-serif; letter-spacing: .06em; }

/* Soft colour smoke behind the content. Kim, 3 Nov 2026, in steps: "ใส่สีฟุ้งอ่อนๆ แบบนี้ที่ BG ด้วย", "สีฟุ้งให้ปลิวเหมือนก้อนเมฆลอยไปทั่วเว็บ
   ซ้ายก้อนเล็ก ขวาก้อนใหญ่กว่านิดหน่อย", "สีฟุ้ง ม่วง กับ แดง แยกกัน รูปทรง Random เหมือนควัน ไม่ใช่ทรงกลม".
   Colours are the KHT Landing Preview's own (--sky-a blue rgba(21,101,192,.22), --sky-b red rgba(232,72,98,.16); Kim: "ปรับสีให้เหมือนเว็บ ...
   น่าจะสีน้ำเงิน+แดง"). Two blurred shapes fixed to the screen (so they show all the way down every page): blue on the left, smaller; red on the right,
   a little bigger. Each is three off-centre patches of its own colour, and its outline keeps changing shape (border-radius morph)
   while it turns and drifts, so it reads as smoke rather than a ball. Behind everything (z-index -1).
   Pale pastel at about half strength (Kim: "สีฟุ้งเข้มเกินไป ทำให้อ่อนเหมือนเว็บนี้" = his KHT Landing Preview, whose haze is at most ~50 off white),
   Size, after "ก้อนฟุ้งที่ผมเห็นกินพื้นที่ 30-40% ของหน้าเว็บเลย" made them small, then "ทำให้สีฟุ้งก้อนใหญ่ 1ใน3 ของเพจ สีอ่อนพอดีแล้ว":
   the big (right) one a third of the page width, then "ใหญ่กว่านี้อีกครับ": half the page, then "ใหญ่อีก": now 70% of the page width, the left one 54%; px caps only stop
   them growing on very wide screens. */
body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; filter: blur(36px); will-change: transform, border-radius; }
body::before { /* left: blue, smaller */
  width: clamp(420px, 54vw, 1160px); aspect-ratio: 4 / 3; left: -12vw; top: 30vh;
  background:
    radial-gradient(45% 55% at 30% 40%, rgb(21 101 192 / .20), transparent 70%),
    radial-gradient(40% 45% at 70% 65%, rgb(40 115 205 / .16), transparent 70%),
    radial-gradient(35% 40% at 55% 20%, rgb(21 101 192 / .13), transparent 70%);
  border-radius: 62% 38% 55% 45% / 45% 60% 40% 55%;
  animation: smoke-left 36s ease-in-out infinite alternate, smoke-shape-a 13s ease-in-out infinite alternate;
}
body::after { /* right: red, a little bigger */
  width: clamp(520px, 70vw, 1500px); aspect-ratio: 4 / 3; right: -14vw; top: -6vh;
  background:
    radial-gradient(45% 50% at 35% 45%, rgb(232 72 98 / .16), transparent 70%),
    radial-gradient(42% 48% at 68% 35%, rgb(240 95 115 / .13), transparent 70%),
    radial-gradient(38% 42% at 50% 75%, rgb(232 72 98 / .10), transparent 70%);
  border-radius: 40% 60% 35% 65% / 60% 40% 65% 35%;
  animation: smoke-right 44s ease-in-out infinite alternate, smoke-shape-b 17s ease-in-out infinite alternate;
}
@keyframes smoke-left {
  33% { transform: translate(10vw, -12vh) rotate(40deg) scale(1.12, .9); }
  66% { transform: translate(20vw, 10vh) rotate(-25deg) scale(.92, 1.1); }
  to { transform: translate(28vw, 24vh) rotate(70deg) scale(1.05); }
}
@keyframes smoke-right {
  33% { transform: translate(-12vw, 26vh) rotate(-35deg) scale(.9, 1.12); }
  66% { transform: translate(-22vw, 8vh) rotate(30deg) scale(1.1, .92); }
  to { transform: translate(-30vw, 30vh) rotate(-60deg) scale(1.04); }
}
@keyframes smoke-shape-a {
  50% { border-radius: 35% 65% 70% 30% / 55% 30% 70% 45%; }
  to { border-radius: 70% 30% 40% 60% / 35% 65% 35% 65%; }
}
@keyframes smoke-shape-b {
  50% { border-radius: 65% 35% 55% 45% / 35% 70% 30% 65%; }
  to { border-radius: 30% 70% 60% 40% / 70% 35% 60% 40%; }
}
/* the office PC reports reduced motion and this slow drift is the look Kim asked for, so it keeps moving there */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: smoke-left 36s ease-in-out infinite alternate, smoke-shape-a 13s ease-in-out infinite alternate !important; }
  body::after { animation: smoke-right 44s ease-in-out infinite alternate, smoke-shape-b 17s ease-in-out infinite alternate !important; }
}

/* The grey panels around the workflow card and the service centres become frosted glass (Kim, 3 Nov 2026: "การ์ดซ้อนด้านนอกที่ทึบ
   ปรับให้เป็นใสเหมือนกระจกขุ่นๆ มองทะลุเห็นสีด้านหลัง"): see-through white, the colour smoke behind blurred, a thin bright rim.
   Browsers without backdrop-filter get a slightly more solid white so the panel still reads. */
.stage, .centers-stage {
  background: rgb(255 255 255 / .55);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7), 0 18px 50px -24px rgb(40 40 90 / .18);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .stage, .centers-stage { background: rgb(255 255 255 / .3); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); }
}

/* imported brands above the footer links: IMAGE biggest and in colour, the other brands one grey picture */
.brands { max-width: 1120px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) 20px clamp(32px, 4vw, 48px); text-align: center; border-bottom: 1px solid var(--line); }
.brand-main { display: block; width: clamp(160px, 20vw, 260px); height: auto; margin: 0 auto; }
.brands p { margin-top: 22px; font-size: 12px; letter-spacing: .06em; color: var(--ink-3); }
/* the brand logos scroll (functions.php kht_v16_brand_list); spacing is padding, so the two copies are exactly half the track */
.brand-strip { overflow: hidden; margin: 20px calc(50% - 50vw) 0; /* full screen width, like the home page customer strip */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.brand-track { display: flex; width: max-content; animation: brands-run 55s linear infinite; }
.brand-strip:hover .brand-track { animation-play-state: paused; }
.brand-track ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.brand-track li { flex: none; padding-right: clamp(36px, 4.5vw, 64px); }
.brand-track img { display: block; height: 34px; width: auto; }
@keyframes brands-run { to { transform: translateX(-50%); } }
/* Kim's office PC reports reduced motion; like the customer strip, this one keeps moving there */
@media (prefers-reduced-motion: reduce) { .brand-track { animation: brands-run 55s linear infinite !important; } }
.brands + .foot { margin-top: 32px; }
/* on the home page the brands block sits between the service centres and the call to action: no rule under it */
main > .brands { border-bottom: 0; padding-bottom: clamp(56px, 7vw, 96px); }