:root{
  --paper:#FBF7F2; --paper-2:#F4EEE6; --ink:#1A1A1A; --ink-60:#5A5651;
  --gold:#C2A04E; --gold-dark:#8A6D1F; --sage:#7A8B7F; --line:#E5DCD0;
  --line-strong:#D4C7B6; --line-green:#06C755;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'IBM Plex Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.72; -webkit-font-smoothing:antialiased;
}
/* Thai needs more line height than Latin or the tone marks collide. */
html[lang="th"] body{line-height:1.86}
/* height:auto is load-bearing. With width/height attributes set and only
   max-width constrained, the width shrinks while the height attribute holds,
   which squashes every image. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.3;text-wrap:balance;margin:0 0 .5em}
h1{font-size:clamp(28px,5vw,46px);font-weight:700;letter-spacing:-.02em}
h2{font-size:clamp(22px,3.4vw,32px);font-weight:700;letter-spacing:-.015em}
h3{font-size:17px;font-weight:600}
p{margin:0 0 1em;max-width:62ch}
.lede{font-size:clamp(16px,2vw,19px);color:var(--ink-60)}
.eyebrow{
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-dark);margin-bottom:10px
}
section{padding:clamp(48px,7vw,84px) 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:0}

/* ── nav ─────────────────────────────────────────────── */
header{
  position:sticky;top:0;z-index:50;background:rgba(251,247,242,.92);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top,0px)
}
.nav{display:flex;align-items:center;gap:14px;height:62px}
.logo{font-weight:700;font-size:19px;letter-spacing:-.02em;text-decoration:none}
.logo span{color:var(--gold-dark)}
.nav-links{display:none;gap:22px;margin-left:18px;font-size:14px}
.nav-links a{text-decoration:none;color:var(--ink-60)}
.nav-links a:hover{color:var(--ink)}
@media(min-width:860px){.nav-links{display:flex}}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.langtog{display:flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden}
.langtog button{
  font:inherit;font-size:12px;font-weight:600;padding:5px 10px;border:0;cursor:pointer;
  background:transparent;color:var(--ink-60)
}
.langtog button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.btn{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-weight:600;font-size:14.5px;padding:11px 18px;border-radius:10px;
  border:1px solid transparent;white-space:nowrap
}
.btn-line{background:var(--line-green);color:#fff}
.btn-line:hover{filter:brightness(.94)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{background:var(--paper-2)}
.btn-sm{padding:8px 13px;font-size:13.5px}

/* ── hero ────────────────────────────────────────────── */
.hero{display:grid;gap:34px;align-items:center}
@media(min-width:900px){.hero{grid-template-columns:1.05fr .95fr;gap:52px}}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hero-note{font-size:13px;color:var(--ink-60);margin-top:14px}
.hero-media{display:flex;justify-content:center}
.hero img{border-radius:16px;border:1px solid var(--line);max-width:420px;width:100%}
@media(min-width:900px){.hero img{max-width:460px}}
.inline-art{max-width:400px;width:100%;margin:0 auto;border-radius:14px;border:1px solid var(--line)}

/* ── bits ────────────────────────────────────────────── */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
@media(min-width:720px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.card p{margin-bottom:0;font-size:15px;color:var(--ink-60)}
.card h3{margin-bottom:6px}
.num{
  font-family:'Instrument Serif',Georgia,serif;font-size:40px;line-height:1;
  color:var(--gold-dark);margin-bottom:6px
}
.steps{counter-reset:s;display:grid;gap:14px}
.step{display:flex;gap:14px;align-items:flex-start}
.step::before{
  counter-increment:s;content:counter(s);
  flex:0 0 30px;height:30px;border-radius:50%;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:700;
  margin-top:2px
}
.step p{margin:0;font-size:15px;color:var(--ink-60)}
.step strong{color:var(--ink);display:block;font-size:15.5px;font-weight:600}
.quote{
  border-left:3px solid var(--gold);padding:4px 0 4px 18px;
  font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-size:clamp(18px,2.4vw,22px);line-height:1.5;color:var(--ink);max-width:56ch
}
details{border-bottom:1px solid var(--line);padding:15px 0}
summary{cursor:pointer;font-weight:600;font-size:15.5px;list-style:none;display:flex;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';margin-left:auto;color:var(--gold-dark);font-weight:400;font-size:20px}
details[open] summary::after{content:'−'}
details p{margin:10px 0 0;font-size:15px;color:var(--ink-60)}
.pill{
  display:inline-block;background:var(--paper-2);border:1px solid var(--line);
  border-radius:999px;padding:6px 13px;font-size:13.5px;margin:0 6px 8px 0
}
.contact{background:var(--ink);color:var(--paper);border-radius:18px;padding:clamp(26px,4vw,44px)}
.contact h2{color:var(--paper)}
.contact p{color:#CFC8BF}
.line-block{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:20px}
/* White plate behind the code: a QR printed straight onto the dark panel does
   not scan, because the quiet zone has to be lighter than the modules. */
.qr{width:132px;height:132px;background:#fff;border-radius:12px;padding:8px}
.qr-hint{font-size:13px;color:#CFC8BF;margin:10px 0 0}
footer{padding:34px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-60)}
.en{display:none}
html[lang="en"] .th{display:none}
html[lang="en"] .en{display:inline}
html[lang="en"] p.en,html[lang="en"] div.en,html[lang="en"] li.en,
html[lang="en"] h1.en,html[lang="en"] h2.en,html[lang="en"] h3.en,
html[lang="en"] span.en,html[lang="en"] strong.en{display:revert}
html[lang="en"] body{font-family:system-ui,-apple-system,'Segoe UI',sans-serif}

/* ── industries dropdown ─────────────────────────────── */
/* Hover opens it on desktop; .open is added on tap, because most of this
   traffic is a phone and a hover-only menu is an unreachable menu there. */
.drop{position:relative}
.drop-btn{
  font:inherit;font-size:14px;color:var(--ink-60);background:transparent;border:0;
  cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:5px
}
.drop-btn:hover{color:var(--ink)}
.caret{font-size:10px;color:var(--gold-dark)}
.drop-menu{
  display:none;position:absolute;top:calc(100% + 14px);left:-14px;min-width:240px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;
  box-shadow:0 12px 30px rgba(26,26,26,.09);flex-direction:column;gap:2px
}
.drop:hover .drop-menu,.drop.open .drop-menu{display:flex}
.drop-menu a{padding:8px 12px;border-radius:8px;font-size:14px}
.drop-menu a:hover{background:var(--paper-2);color:var(--ink)}

/* ── industry cards ──────────────────────────────────── */
.card-link{display:block;text-decoration:none;transition:border-color .15s,transform .15s}
.card-link:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.more{display:inline-block;margin-top:12px;font-size:13.5px;font-weight:600;color:var(--gold-dark)}
.big{font-size:16px!important;color:var(--ink)!important}
.muted{color:var(--ink-60);font-weight:400}
.link{color:var(--gold-dark);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line-strong)}
.link:hover{border-bottom-color:var(--gold-dark)}
.back{display:inline-block;font-size:13.5px;color:var(--ink-60);text-decoration:none;margin-bottom:20px}
.back:hover{color:var(--ink)}

/* ── channel strip ───────────────────────────────────── */
/* Monochrome and unlabelled on purpose. Brand-coloured logos in a row read as
   badges the vendor is claiming; grey ones read as a factual list of ports. */
.channels{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.channels-label{
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-60);margin-bottom:14px
}
.channels-row{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.ch{color:var(--ink-60);opacity:.6;display:inline-flex}
.ch:hover{opacity:1;color:var(--ink)}

/* ── footer ──────────────────────────────────────────── */
.foot-cols{display:grid;gap:22px;margin-top:20px}
@media(min-width:720px){.foot-cols{grid-template-columns:2fr 1fr}}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:8px}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--ink)}
.foot-head{
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);margin-bottom:8px
}
.foot-note{margin-top:20px;font-size:12.5px;color:var(--ink-60);opacity:.85}

/* ── legal pages ─────────────────────────────────────── */
.narrow{max-width:760px}
.legal h2{font-size:20px;margin-top:34px}
.legal h3{margin-top:22px}
.legal p,.legal li{font-size:15px;color:var(--ink-60);max-width:none}
.legal ul{padding-left:20px;margin:0 0 1em}
.legal li{margin-bottom:6px}
.updated{font-size:13px;color:var(--ink-60);margin-bottom:28px}
.legal-table{width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 1.2em}
.legal-table th,.legal-table td{
  text-align:left;padding:10px 12px;border:1px solid var(--line);vertical-align:top
}
.legal-table th{background:var(--paper-2);font-weight:600;font-size:13.5px}

/* ── case study ──────────────────────────────────────── */
/* The screenshot is wide (1400×577). Given a narrow right-hand column it went
   small while the prose column ran out of text, leaving a hole. Giving the
   image the wider track and letting the prose set the rhythm balances it, and
   the stats move out to a full-width band underneath. */
.case-split{display:grid;gap:30px;margin-top:22px}
@media(min-width:900px){.case-split{grid-template-columns:1fr 1.15fr;gap:48px;align-items:start}}
.shot{margin:0}
.shot img{
  width:100%;border-radius:14px;border:1px solid var(--line-strong);
  box-shadow:0 18px 40px rgba(26,26,26,.10)
}
.shot figcaption{margin-top:12px;font-size:13px;color:var(--ink-60);line-height:1.6}
.stat-strip{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:36px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden
}
@media(min-width:720px){.stat-strip{grid-template-columns:repeat(4,1fr)}}
.stat{background:#fff;padding:22px}
.stat p{margin:0;font-size:14px;color:var(--ink-60)}

/* ── sourced stats and estimates ─────────────────────── */
.src{
  display:block;margin-top:12px;font-size:11.5px;line-height:1.5;
  color:var(--ink-60);text-decoration:none;border-top:1px solid var(--line);padding-top:10px
}
.src:hover{color:var(--gold-dark)}
.caveat{font-size:13px;color:var(--ink-60);margin-top:18px;line-height:1.65}
.estimate{
  display:grid;gap:22px;margin-top:20px;background:#fff;
  border:1px solid var(--line);border-radius:16px;padding:clamp(20px,3vw,30px)
}
@media(min-width:760px){.estimate{grid-template-columns:auto 1fr;gap:34px;align-items:start}}
.estimate-figure{display:flex;flex-direction:column;gap:2px;white-space:nowrap}
.estimate-figure .num{font-size:clamp(34px,5vw,46px);margin:0}
.estimate-unit{font-size:13px;color:var(--ink-60)}
.estimate-math{font-size:14.5px;color:var(--ink-60);margin-bottom:10px}
.estimate-math:first-child{color:var(--ink)}

/* ── mobile nav ──────────────────────────────────────── */
/* Below 860px the desktop links are hidden. Without this panel the Industries
   pages are simply unreachable on a phone — and in this market the phone is
   most of the traffic. */
.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
  width:38px;height:34px;padding:0 8px;background:transparent;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:9px
}
.burger span{display:block;height:1.5px;background:var(--ink);border-radius:2px}
@media(min-width:860px){.burger{display:none}}
.mobile-menu{
  display:none;border-top:1px solid var(--line);background:var(--paper);
  padding:14px 20px calc(18px + env(safe-area-inset-bottom,0px));
  max-height:70vh;overflow-y:auto
}
.mobile-menu.open{display:block}
@media(min-width:860px){.mobile-menu,.mobile-menu.open{display:none}}
.mobile-menu a{display:block;padding:11px 0;text-decoration:none;font-size:15.5px;border-bottom:1px solid var(--line)}
.mobile-menu a:last-child{border-bottom:0}
.mm-head{
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-dark);margin:16px 0 2px
}
.mm-head:first-child{margin-top:0}

/* ── phone sizing ────────────────────────────────────── */
@media(max-width:560px){
  body{font-size:15.5px}
  .wrap{padding:0 16px}
  section{padding:40px 0}
  .nav{height:56px;gap:10px}
  .logo{font-size:17px}
  /* The LINE button in the header is the second CTA on the page and the
     language toggle sits beside it; at 360px both plus a burger do not fit. */
  .nav-right .btn-line{display:none}
  .hero-cta .btn{width:100%;justify-content:center}
  .card{padding:18px}
  .num{font-size:34px}
  .quote{font-size:17px;padding-left:14px}
  .line-block{gap:16px}
  .qr{width:116px;height:116px}
  .estimate-figure .num{font-size:32px}
  .legal-table{font-size:13.5px}
  .legal-table th,.legal-table td{padding:8px}
}
/* A table cannot reflow below a certain width, so it gets its own scroller
   rather than pushing the whole page sideways. */
.legal-table{display:block;overflow-x:auto;white-space:normal}
@media(min-width:700px){.legal-table{display:table}}

/* ── chat widget ─────────────────────────────────────── */
.rc{position:fixed;right:18px;bottom:18px;z-index:200;
    bottom:calc(18px + env(safe-area-inset-bottom,0px))}
.rc-launch{
  position:relative;width:60px;height:60px;padding:0;border-radius:50%;cursor:pointer;
  border:0;background:transparent;overflow:visible;
  box-shadow:0 10px 26px rgba(26,26,26,.24)
}
.rc-launch img{width:100%;height:100%;border-radius:50%;display:block}
.rc-launch:hover{transform:translateY(-2px)}
.rc-launch{transition:transform .15s}
/* Red, not the site's green. The badge has one job — "unread" — and red is the
   only colour that says it without being learned. The green belongs to the LINE
   buttons and to the glow, which mean "available", a different thing. */
.rc-dot{
  display:none;position:absolute;top:-4px;right:-4px;min-width:21px;height:21px;
  padding:0 5px;border-radius:11px;background:#E5484D;border:2px solid #fff;
  color:#fff;font-size:12px;font-weight:700;line-height:17px;text-align:center;
  box-shadow:0 2px 6px rgba(26,26,26,.25)
}
.rc-dot.on{display:block}
.rc-open .rc-launch{display:none}

/* The attention ring. A static halo carries it on its own so the widget still
   reads as "something arrived" for anyone who has animation turned off, and the
   expanding pulse rides on top for everyone else. Drawn on a pseudo-element so
   the ring can grow past the button without pushing the layout around. */
.rc-launch.pulse{box-shadow:0 10px 26px rgba(26,26,26,.24),0 0 0 3px rgba(6,199,85,.38)}
.rc-launch::before{
  content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none
}
.rc-launch.pulse::before{animation:rc-pulse 2.4s cubic-bezier(.3,0,.2,1) infinite}
@keyframes rc-pulse{
  0%   {box-shadow:0 0 0 0 rgba(6,199,85,.45)}
  70%  {box-shadow:0 0 0 18px rgba(6,199,85,0)}
  100% {box-shadow:0 0 0 0 rgba(6,199,85,0)}
}

/* The teaser: one message that arrives beside the avatar, the way a chat app
   would deliver it. Opening the whole panel unprompted takes over the screen the
   reader is using; a bubble asks the same question and costs them nothing. */
.rc-teaser{
  position:absolute;right:0;bottom:74px;width:min(268px,calc(100vw - 44px));
  background:#fff;border:1px solid var(--line);border-radius:16px;
  border-bottom-right-radius:6px;padding:14px 15px;text-align:left;
  box-shadow:0 14px 34px rgba(26,26,26,.18);cursor:pointer;
  font:inherit;font-size:14px;line-height:1.6;color:var(--ink);
  opacity:0;transform:translateY(8px) scale(.97);pointer-events:none;
  transition:opacity .28s ease,transform .28s cubic-bezier(.2,.8,.2,1)
}
.rc-teaser.show{opacity:1;transform:none;pointer-events:auto}
.rc-teaser-x{
  position:absolute;top:-9px;left:-9px;width:24px;height:24px;border-radius:50%;
  background:#fff;border:1px solid var(--line);color:var(--ink-60);
  font-size:15px;line-height:1;cursor:pointer;padding:0;
  box-shadow:0 3px 10px rgba(26,26,26,.14)
}
.rc-teaser-x:hover{color:var(--ink)}
.rc-open .rc-teaser{display:none}
@media(prefers-reduced-motion:reduce){
  .rc-launch.pulse::before{animation:none}
  .rc-teaser{transition:opacity .01s}
}

/* ⚠️ `display:flex` BEATS the browser's own `[hidden]{display:none}`, so the
   panel stayed visible with the `hidden` attribute set — the launcher avatar and
   the panel avatar both on screen at once. Any component styled with an explicit
   display and toggled via `hidden` needs this line. */
.rc-panel[hidden]{display:none}
.rc-panel{
  width:min(360px,calc(100vw - 32px));height:min(500px,calc(100vh - 110px));
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-strong);
  border-radius:18px;overflow:hidden;box-shadow:0 22px 60px rgba(26,26,26,.24)
}
.rc-head{display:flex;align-items:center;gap:11px;padding:13px 14px;background:var(--ink);color:var(--paper)}
.rc-face{width:40px;height:40px;border-radius:50%}
.rc-head-text{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.rc-title{font-size:15px}
.rc-sub{font-size:12px;color:#BDB6AD}
.rc-x{
  margin-left:auto;background:transparent;border:0;color:var(--paper);
  font-size:26px;line-height:1;cursor:pointer;padding:0 4px;opacity:.7
}
.rc-x:hover{opacity:1}

.rc-log{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:9px;background:var(--paper)}
.rc-msg{
  max-width:85%;padding:10px 13px;border-radius:14px;font-size:14.5px;line-height:1.6;
  white-space:pre-wrap;word-break:break-word
}
.rc-admin{background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;align-self:flex-start}
.rc-visitor{background:var(--ink);color:var(--paper);border-bottom-right-radius:5px;align-self:flex-end}

.rc-form{padding:11px 12px;border-top:1px solid var(--line);background:#fff}
.rc-name{
  width:100%;margin-bottom:8px;padding:8px 11px;font:inherit;font-size:13.5px;
  border:1px solid var(--line);border-radius:9px;background:var(--paper)
}
.rc-row{display:flex;gap:8px;align-items:flex-end}
.rc-input{
  flex:1;resize:none;padding:10px 12px;font:inherit;font-size:14.5px;line-height:1.5;
  border:1px solid var(--line-strong);border-radius:11px;background:var(--paper);
  max-height:110px;overflow-y:auto
}
.rc-input:focus,.rc-name:focus{outline:2px solid var(--gold);outline-offset:1px}
.rc-send{
  font:inherit;font-size:14px;font-weight:600;padding:10px 15px;border:0;border-radius:11px;
  background:var(--line-green);color:#fff;cursor:pointer;white-space:nowrap
}
.rc-send:hover{filter:brightness(.94)}
.rc-line{display:block;margin-top:9px;font-size:12.5px;color:var(--ink-60);text-decoration:none}
.rc-line:hover{color:var(--gold-dark)}

@media(max-width:560px){
  .rc{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .rc-panel{width:calc(100vw - 24px);height:min(72vh,520px)}
  .rc-launch{width:54px;height:54px}
}
@media(prefers-reduced-motion:reduce){.rc-launch{transition:none}}

/* ── /chat console ───────────────────────────────────── */
.console{display:grid;gap:0;height:calc(100vh - 62px);grid-template-columns:1fr}
@media(min-width:820px){.console{grid-template-columns:320px 1fr}}
.thread-list{border-right:1px solid var(--line);overflow-y:auto;background:var(--paper)}
.thread{
  display:block;width:100%;text-align:left;padding:14px 16px;border:0;cursor:pointer;
  border-bottom:1px solid var(--line);background:transparent;font:inherit
}
.thread:hover{background:var(--paper-2)}
.thread.active{background:#fff;box-shadow:inset 3px 0 0 var(--gold)}
.thread strong{display:block;font-size:14.5px}
.thread .prev{display:block;font-size:13px;color:var(--ink-60);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread .when{display:block;font-size:11.5px;color:var(--ink-60);margin-top:4px}
.thread-pane{display:flex;flex-direction:column;background:#fff;min-height:0}
.pane-head{padding:14px 18px;border-bottom:1px solid var(--line);font-size:14px}
.pane-log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.pane-form{display:flex;gap:9px;padding:13px 16px;border-top:1px solid var(--line);align-items:flex-end}
.pane-form textarea{
  flex:1;resize:none;font:inherit;font-size:15px;padding:11px 13px;max-height:140px;
  border:1px solid var(--line-strong);border-radius:11px;background:var(--paper)
}
.gate{max-width:340px;margin:12vh auto;text-align:center}
.gate input{
  width:100%;margin:14px 0;padding:12px 14px;font:inherit;font-size:16px;
  border:1px solid var(--line-strong);border-radius:11px;background:#fff
}
.empty{margin:auto;color:var(--ink-60);font-size:14.5px;padding:40px;text-align:center}