/* ==========================================================================
   Xcaliber — Hotel Profitability Partner
   Design system + site styles
   --------------------------------------------------------------------------
   Palette : deep navy ink + Xcaliber gold on white / soft grey
   Type    : Inter (Latin) + Noto Sans Thai (Thai)
   ========================================================================== */

/* ---------- Tokens ------------------------------------------------------ */
:root{
  /* Gold sampled straight from the logo's gradient (#A68A50 → #E3C47C) */
  --gold:        #C9A961;
  --gold-dk:     #A68A50;
  --gold-lt:     #E3C47C;
  --gold-wash:   #FBF8F1;

  /* Neutral black scale — no colour cast */
  --ink:         #0A0A0A;
  --ink-2:       #1A1A1A;
  --ink-3:       #2E2E2E;

  --slate:       #5C5C5C;
  --slate-lt:    #8A8A8A;
  --line:        #E6E6E6;
  --line-soft:   #F1F1F1;
  --bg:          #FFFFFF;
  --bg-soft:     #F7F7F7;

  --ok:          #1F7A4D;
  --err:         #B3261E;

  --radius:      12px;
  --radius-sm:   8px;
  --radius-lg:   18px;

  --shadow-sm:   0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04);
  --shadow:      0 4px 12px rgba(0,0,0,.06), 0 14px 34px rgba(0,0,0,.07);
  --shadow-lg:   0 10px 24px rgba(0,0,0,.09), 0 30px 70px rgba(0,0,0,.12);

  --header-h:    78px;
  --maxw:        1200px;
  --ease:        cubic-bezier(.22,.61,.36,1);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-th: "Noto Sans Thai", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- Base -------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  color:var(--ink-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
html[lang="th"] body{ font-family:var(--font-th); line-height:1.8; }
/* Thai words inside otherwise-English copy still need the Thai face */
[lang="th"]{ font-family:var(--font-th); }

img{ max-width:100%; height:auto; display:block; border:0; }
a{ color:var(--ink); text-decoration:none; }
button{ font:inherit; color:inherit; }

h1,h2,h3,h4{ margin:0 0 .6em; color:var(--ink); font-weight:800; letter-spacing:-.022em; line-height:1.15; }
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3, html[lang="th"] h4{ letter-spacing:0; line-height:1.35; }
h1{ font-size:clamp(2.15rem, 1.35rem + 3.2vw, 3.9rem); }
h2{ font-size:clamp(1.75rem, 1.2rem + 2.1vw, 2.75rem); }
h3{ font-size:clamp(1.12rem, 1rem + .5vw, 1.4rem); font-weight:750; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
strong,b{ font-weight:700; color:var(--ink); }

::selection{ background:var(--gold-lt); color:var(--ink); }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:4px; }

.skip-link{
  position:absolute; left:12px; top:-100px; z-index:2000;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 8px 8px; font-weight:700;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:0; }

/* ---------- Layout ------------------------------------------------------ */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.wrap--narrow{ max-width:860px; }
.section{ padding:clamp(64px, 4vw + 44px, 112px) 0; }
.section--soft{ background:var(--bg-soft); }
.section--ink{ background:var(--ink); color:#D4D4D4; }
.section--ink h2,.section--ink h3{ color:#fff; }
.section--tight{ padding-top:clamp(44px,3vw + 28px,72px); }

.sec-head{ max-width:760px; margin:0 auto clamp(38px,3vw + 20px,62px); text-align:center; }
.sec-head--left{ margin-left:0; text-align:left; }
.sec-head p{ color:var(--slate); font-size:1.06rem; }
.section--ink .sec-head p{ color:#A0A0A0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.735rem; font-weight:750; letter-spacing:.15em; text-transform:uppercase;
  color:var(--gold-dk); margin-bottom:16px;
}
html[lang="th"] .eyebrow{ letter-spacing:.06em; }
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--gold); border-radius:2px; }
.eyebrow--center{ justify-content:center; }
.section--ink .eyebrow{ color:var(--gold); }
.eyebrow--light{ color:var(--gold-lt); }

.lead{ font-size:1.14rem; color:var(--slate); }

/* ---------- Buttons ----------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:999px; border:1.5px solid transparent;
  font-size:.985rem; font-weight:700; letter-spacing:.005em; text-align:center;
  cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .22s var(--ease), background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn svg{ flex:none; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--gold{ background:var(--gold); color:#0A0A0A; box-shadow:0 6px 18px rgba(201,169,97,.34); }
.btn--gold:hover{ background:var(--gold-dk); color:#fff; box-shadow:0 10px 26px rgba(168,135,74,.42); }

.btn--ink{ background:var(--ink); color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.22); }
.btn--ink:hover{ background:var(--ink-3); box-shadow:0 10px 26px rgba(0,0,0,.3); }

.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

.btn--outline{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--outline:hover{ border-color:var(--ink); background:var(--ink); color:#fff; }

/* Hotel Login — a bordered button so it reads as a way in, not a page link.
   Inverts with the header: light outline over the hero, dark once scrolled. */
.btn--login{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.btn--login:hover{ background:rgba(255,255,255,.14); border-color:#fff; }
.site-header.is-solid .btn--login,
body:not(.has-hero) .btn--login{ color:var(--ink); border-color:var(--line); }
.site-header.is-solid .btn--login:hover,
body:not(.has-hero) .btn--login:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

.btn--sm{ padding:11px 20px; font-size:.9rem; }
.btn--lg{ padding:18px 34px; font-size:1.05rem; }
.btn--block{ width:100%; }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }
.btn-row--center{ justify-content:center; }

.arrow-link{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:.95rem; color:var(--ink);
  border-bottom:2px solid var(--gold); padding-bottom:3px;
  transition:gap .2s var(--ease), color .2s var(--ease);
}
.arrow-link:hover{ gap:13px; color:var(--gold-dk); }

/* ---------- Header ------------------------------------------------------ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:900;
  height:var(--header-h);
  display:flex; align-items:center;
  background:transparent;
  transition:background-color .3s var(--ease), box-shadow .3s var(--ease), height .3s var(--ease);
}
.site-header .wrap{ display:flex; align-items:center; gap:20px; }

/* solid state: scrolled, or any page without a hero underlay */
.site-header.is-solid,
body:not(.has-hero) .site-header{
  background:rgba(255,255,255,.97);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  box-shadow:0 1px 0 var(--line), 0 6px 24px rgba(0,0,0,.06);
}

.brand{ display:flex; align-items:center; flex:none; margin-right:auto; }
.brand img{ height:34px; width:auto; transition:opacity .25s var(--ease); }
.brand .logo-dark{ display:none; }
.site-header.is-solid .brand .logo-dark,
body:not(.has-hero) .brand .logo-dark{ display:block; }
.site-header.is-solid .brand .logo-light,
body:not(.has-hero) .brand .logo-light{ display:none; }

.nav{ display:flex; align-items:center; gap:1px; }
.nav a{
  position:relative; padding:9px 11px; border-radius:8px; white-space:nowrap;
  font-size:.945rem; font-weight:650; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.45);
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.site-header.is-solid .nav a,
body:not(.has-hero) .nav a{ color:var(--ink-2); text-shadow:none; }
.nav a:hover{ color:var(--gold); }
.site-header.is-solid .nav a:hover,
body:not(.has-hero) .nav a:hover{ color:var(--gold-dk); background:var(--gold-wash); }
.nav a.is-active{ color:var(--gold); }
.site-header.is-solid .nav a.is-active,
body:not(.has-hero) .nav a.is-active{ color:var(--gold-dk); }
.nav a.is-active::after{
  content:""; position:absolute; left:11px; right:11px; bottom:2px; height:2px;
  background:var(--gold); border-radius:2px;
}

.header-tools{ display:flex; align-items:center; gap:12px; flex:none; }

/* language switch */
.lang{
  display:inline-flex; align-items:center; padding:3px;
  border-radius:999px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.1);
}
.site-header.is-solid .lang,
body:not(.has-hero) .lang{ border-color:var(--line); background:var(--bg-soft); }
.lang button{
  border:0; background:transparent; cursor:pointer; border-radius:999px;
  padding:5px 12px; font-size:.79rem; font-weight:750; letter-spacing:.04em;
  color:rgba(255,255,255,.85); transition:all .2s var(--ease);
}
.site-header.is-solid .lang button,
body:not(.has-hero) .lang button{ color:var(--slate); }
/* the Thai label needs the Thai face even while the page is in English */
.lang button[data-set-lang="th"]{ font-family:var(--font-th); font-size:.82rem; letter-spacing:0; }
.lang button[aria-pressed="true"]{ background:var(--gold); color:#0A0A0A; }
.lang button:not([aria-pressed="true"]):hover{ color:var(--gold); }

.login-link{
  font-size:.9rem; font-weight:650; color:rgba(255,255,255,.9);
  display:inline-flex; align-items:center; gap:7px; text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.site-header.is-solid .login-link,
body:not(.has-hero) .login-link{ color:var(--slate); text-shadow:none; }
.login-link:hover{ color:var(--gold); }

/* header CTA: full label on wide screens, a short one once space runs out */
.lbl-sm{ display:none; }

/* the drawer's own language switcher always uses the light styling */
.lang--drawer{ border-color:var(--line) !important; background:var(--bg-soft) !important; }
.lang--drawer button{ color:var(--slate) !important; }
.lang--drawer button[aria-pressed="true"]{ background:var(--gold) !important; color:#0A0A0A !important; }

/* Thai labels are longer than the English ones: tighten the bar so the
   desktop nav still fits before the hamburger breakpoint. */
html[lang="th"] .nav a{ font-size:.9rem; padding:9px 10px; }
html[lang="th"] .nav a.is-active::after{ left:10px; right:10px; }
html[lang="th"] .header-tools .btn--sm{ font-size:.83rem; padding:10px 16px; }
html[lang="th"] .login-link{ font-size:.85rem; }
html[lang="th"] .lang button{ padding:5px 10px; }
html[lang="th"] .brand img{ height:30px; }

/* hamburger */
.burger{
  display:none; width:44px; height:44px; padding:0; border:0; border-radius:10px;
  background:rgba(255,255,255,.12); cursor:pointer; position:relative; flex:none;
}
body:not(.has-hero) .burger,
.site-header.is-solid .burger{ background:var(--bg-soft); }
.burger span{
  position:absolute; left:12px; right:12px; height:2px; border-radius:2px; background:#fff;
  transition:transform .25s var(--ease), opacity .2s var(--ease), background-color .25s var(--ease);
}
body:not(.has-hero) .burger span,
.site-header.is-solid .burger span{ background:var(--ink); }
.burger span:nth-child(1){ top:15px; }
.burger span:nth-child(2){ top:21px; }
.burger span:nth-child(3){ top:27px; }
.burger[aria-expanded="true"] span{ background:var(--ink); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* mobile drawer */
.drawer{
  position:fixed; inset:var(--header-h) 0 0 0; z-index:880;
  background:#fff; padding:26px 24px 40px; overflow-y:auto;
  transform:translateY(-14px); opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.drawer.is-open{ opacity:1; transform:none; pointer-events:auto; }
.drawer a.drawer-link{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 4px; border-bottom:1px solid var(--line-soft);
  font-size:1.12rem; font-weight:700; color:var(--ink);
}
.drawer a.drawer-link.is-active{ color:var(--gold-dk); }
.drawer-cta{ margin-top:26px; display:grid; gap:12px; }
.drawer-meta{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line-soft); color:var(--slate); font-size:.92rem; }
.drawer-meta a{ color:var(--ink); font-weight:650; }
body.nav-open{ overflow:hidden; }

/* ---------- Hero -------------------------------------------------------- */
.hero{
  position:relative; display:flex; align-items:center;
  min-height:min(94vh, 880px); padding:calc(var(--header-h) + 60px) 0 76px;
  color:#fff; overflow:hidden; background:var(--ink);
}
.hero__slides{ position:absolute; inset:0; z-index:0; }
.hero__slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.06);
  transition:opacity 1.4s var(--ease), transform 7s linear;
}
.hero__slide.is-active{ opacity:1; transform:scale(1); }
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, rgba(0,0,0,.93) 0%, rgba(0,0,0,.84) 42%, rgba(0,0,0,.52) 72%, rgba(0,0,0,.38) 100%),
    linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 45%);
}
.hero .wrap{ position:relative; z-index:2; }
.hero__inner{ max-width:780px; }
.hero h1{ color:#fff; margin-bottom:22px; text-wrap:balance; }
.hero h1 .accent{ color:var(--gold); }
.hero__sub{
  font-size:clamp(1.02rem,.94rem + .4vw,1.22rem); line-height:1.7;
  color:#E2E2E2; max-width:640px; margin-bottom:34px;
}
.hero__sub strong{ color:#fff; }
.hero .btn-row{ margin-bottom:46px; }

.hero__trust{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 34px;
  padding-top:26px; border-top:1px solid rgba(255,255,255,.16);
}
.hero__trust-item{ display:flex; align-items:baseline; gap:9px; }
.hero__trust-item b{ color:var(--gold); font-size:1.34rem; font-weight:800; letter-spacing:-.02em; }
.hero__trust-item span{ font-size:.88rem; color:#ABABAB; }

.hero__dots{
  position:absolute; z-index:3; left:0; right:0; bottom:26px;
  display:flex; justify-content:center; gap:9px;
}
.hero__dots button{
  width:30px; height:4px; padding:0; border:0; border-radius:3px; cursor:pointer;
  background:rgba(255,255,255,.32); transition:background-color .25s var(--ease), width .25s var(--ease);
}
.hero__dots button[aria-current="true"]{ background:var(--gold); width:46px; }

/* ---------- Page header (inner pages) ----------------------------------- */
.page-head{
  position:relative; color:#fff; background:var(--ink);
  padding:calc(var(--header-h) + 74px) 0 78px; overflow:hidden;
}
.page-head__bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.36; }
.page-head::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.82) 55%, rgba(0,0,0,.6) 100%);
}
.page-head .wrap{ position:relative; z-index:2; }
.page-head h1{ color:#fff; max-width:16ch; margin-bottom:18px; text-wrap:balance; }
.page-head p{ color:#CFCFCF; max-width:58ch; font-size:1.09rem; }
.page-head .btn-row{ margin-top:32px; }

.crumbs{ font-size:.83rem; color:#9C9C9C; margin-bottom:18px; letter-spacing:.03em; }
.crumbs a{ color:#9C9C9C; }
.crumbs a:hover{ color:var(--gold); }
.crumbs span{ color:var(--gold); }

/* ---------- Cards / grids ----------------------------------------------- */
.grid{ display:grid; gap:24px; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 28px; box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--gold-lt); }
.card p{ color:var(--slate); font-size:.985rem; }
.card h3{ margin-bottom:.5em; }

/* numbered pillar card */
.pillar{ position:relative; padding-top:34px; }
.pillar__n{
  position:absolute; top:26px; right:26px;
  font-size:2.6rem; font-weight:800; line-height:1; color:var(--line-soft); letter-spacing:-.04em;
  transition:color .25s var(--ease);
}
.pillar:hover .pillar__n{ color:var(--gold-lt); }
.pillar__icon{
  width:52px; height:52px; border-radius:13px; margin-bottom:20px;
  display:grid; place-items:center; background:var(--gold-wash); color:var(--gold-dk);
  border:1px solid var(--gold-lt);
}
.pillar__icon svg{ width:26px; height:26px; }

/* solution card with PNG icon */
.solution{ display:flex; flex-direction:column; }
.solution__icon{
  width:64px; height:64px; margin-bottom:20px;
  display:grid; place-items:center;
  background:var(--bg-soft); border-radius:15px; border:1px solid var(--line);
}
.solution__icon img{ width:36px; height:36px; object-fit:contain; }
.solution .arrow-link{ margin-top:auto; padding-top:20px; align-self:flex-start; }
/* four-up solution cards: trim the icon so the copy keeps the room it needs */
.grid--4 .solution__icon{ width:54px; height:54px; border-radius:13px; margin-bottom:16px; }
.grid--4 .solution__icon img{ width:30px; height:30px; }
.grid--4 .solution h3{ font-size:1.06rem; }
.grid--4 .solution p{ font-size:.93rem; }

/* ---------- Pricing cards ------------------------------------------------ */
.price-card__n{
  font-size:.72rem; font-weight:800; letter-spacing:.18em; color:var(--gold-dk);
  margin-bottom:12px;
}
html[lang="th"] .price-card__n{ letter-spacing:.1em; }

/* ---------- FAQ accordion ------------------------------------------------ */
/* <details> rather than scripted tabs: the answers stay in the DOM and stay
   readable with JavaScript off, which is how most AI crawlers fetch a page. */
.faq{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-weight:700; font-size:1.02rem; color:var(--ink); line-height:1.45;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  margin-top:-7px; border-right:2px solid var(--gold-dk); border-bottom:2px solid var(--gold-dk);
  transform:rotate(45deg); transition:transform .22s ease;
}
.faq__item[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; }
.faq__item summary:hover{ color:var(--gold-dk); }
.faq__item summary:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }
.faq__item p{ margin:0; padding:0 44px 26px 0; color:var(--slate); font-size:.95rem; }

/* ---------- Domain & hosting panel --------------------------------------- */
/* Deliberately illustrative rather than a screenshot: managed hosting has no
   guest-facing screen worth photographing, and the hotel-website shot that used
   to sit here read as "web design". Built in markup, not as an image, so it
   stays sharp at any DPI, uses the site fonts and translates with everything
   else. The domain is a placeholder so it can never read as a real customer's
   control panel. */
.dns{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); overflow:hidden;
}
.dns__row{ padding:22px 24px; border-bottom:1px solid var(--line-soft); }
.dns__row:last-child{ border-bottom:0; }
.mini-label,
.dns__label{
  font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate-lt); margin:0 0 12px;
}
html[lang="th"] .mini-label,
html[lang="th"] .dns__label{ letter-spacing:.06em; }
.dns__head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dns__domain{
  font-size:clamp(1.12rem, .8vw + .95rem, 1.42rem); font-weight:750;
  color:var(--ink); letter-spacing:-.01em; margin:0;
}
.dns__domain b{ font-weight:750; color:var(--gold-dk); }
.dns__meta{ margin:10px 0 0; font-size:.84rem; color:var(--slate); }
.dns__pill{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  font-size:.71rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#2C6B3F; background:#EFF7F1; border:1px solid #D3E8DA;
  border-radius:999px; padding:5px 12px; white-space:nowrap;
}
html[lang="th"] .dns__pill{ letter-spacing:0; text-transform:none; font-weight:700; }
.dns__dot{ width:7px; height:7px; border-radius:50%; background:#3E9159; flex:none; }
.dns__line{ display:flex; align-items:center; gap:14px; }
.dns__ico{
  flex:none; width:40px; height:40px; border-radius:11px;
  background:var(--gold-wash); border:1px solid #F0E6D2;
  display:grid; place-items:center; color:var(--gold-dk);
}
.dns__ico svg{ width:19px; height:19px; }
.dns__t{ font-weight:700; font-size:.97rem; color:var(--ink); margin:0; }
.dns__b{ font-size:.83rem; color:var(--slate); margin:3px 0 0; }
.dns__chips{ display:flex; flex-wrap:wrap; gap:8px; background:var(--bg-soft); }
.dns__chip{
  font-size:.76rem; font-weight:650; color:var(--slate);
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 13px;
}

/* ---------- Website sample card ----------------------------------------- */
.sample{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.sample img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top center; display:block; border-bottom:1px solid var(--line); }

/* Design demos ship as 1200x558 screenshots. Forcing them into the 16/10 card
   crops a quarter off the bottom — the booking bar, which is the whole point.
   Match the source ratio so each shot is shown complete. */
.sample--shot img{
  aspect-ratio:1200 / 558; object-fit:contain; object-position:center;
  background:#fff; padding:10px; border-bottom:1px solid var(--line);
}
.sample__body{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.sample__body h3{ margin-bottom:.25em; font-size:1.06rem; }
.sample__body p{ color:var(--slate); font-size:.9rem; margin-bottom:16px; }
.sample .arrow-link{ margin-top:auto; align-self:flex-start; }

/* ---------- Split media/copy block -------------------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,4vw,72px); align-items:center; }
.split--flip .split__media{ order:2; }
.split__media img{ border-radius:var(--radius-lg); box-shadow:var(--shadow); width:100%; }
.split__media{ position:relative; }
.split__badge{
  position:absolute; right:-14px; bottom:-18px;
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:18px 22px; border:1px solid var(--line); min-width:160px;
}
.split__badge b{ display:block; font-size:1.75rem; color:var(--gold-dk); letter-spacing:-.03em; line-height:1.1; }
.split__badge span{ font-size:.82rem; color:var(--slate); }

/* ---------- Product screenshots ----------------------------------------- */
.shot{ margin:0; }
.shot img{
  width:100%; border-radius:var(--radius); border:1px solid var(--line);
  box-shadow:var(--shadow); background:#fff;
}
.shot--flat img{ box-shadow:var(--shadow-sm); }
.shot figcaption{ margin-top:14px; font-size:.85rem; color:var(--slate-lt); line-height:1.6; }

/* ---------- Booking flow (three screenshots in sequence) ----------------- */
.flow{ display:grid; gap:clamp(26px, 2vw + 16px, 44px); counter-reset:flowstep; }
.flow__step{ display:grid; grid-template-columns:270px 1fr; gap:clamp(20px, 2vw, 38px); align-items:start; }
.flow__meta{ position:sticky; top:calc(var(--header-h) + 28px); }
.flow__n{
  counter-increment:flowstep; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; margin-bottom:14px;
  background:var(--ink); color:var(--gold); font-weight:800; font-size:.9rem;
  font-variant-numeric:tabular-nums;
}
.flow__n::before{ content:"0" counter(flowstep); }
.flow__meta h3{ margin-bottom:.4em; }
.flow__meta p{ color:var(--slate); font-size:.94rem; }
.flow__shot img{
  width:100%; border-radius:var(--radius); border:1px solid var(--line);
  box-shadow:var(--shadow); background:#fff; display:block;
}
@media (max-width:900px){
  .flow__step{ grid-template-columns:1fr; }
  .flow__meta{ position:static; }
}

/* ---------- Checklist --------------------------------------------------- */
.checks{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.checks li{ position:relative; padding-left:36px; color:var(--slate); }
.checks li strong{ display:block; color:var(--ink); margin-bottom:2px; }
.checks li::before{
  content:""; position:absolute; left:0; top:4px; width:22px; height:22px; border-radius:50%;
  background:var(--gold-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8874A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
  border:1px solid var(--gold-lt);
}
.section--ink .checks li{ color:#ABABAB; }
.section--ink .checks li strong{ color:#fff; }

/* ---------- Stats ------------------------------------------------------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.stat{ text-align:center; padding:30px 18px; border-radius:var(--radius); background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1); }
.stat b{
  display:block; font-size:clamp(2rem,1.4rem + 2vw,3.1rem); font-weight:800; color:var(--gold);
  letter-spacing:-.035em; line-height:1.05; margin-bottom:8px;
}
.stat span{ font-size:.92rem; color:#A0A0A0; display:block; }

/* ---------- Method steps ------------------------------------------------ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:step; }
.step{ position:relative; padding:32px 26px 30px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.step::before{
  counter-increment:step; content:"0" counter(step);
  display:block; font-size:.8rem; font-weight:800; letter-spacing:.16em; color:var(--gold-dk); margin-bottom:14px;
}
.step h3{ margin-bottom:.45em; }
.step p{ color:var(--slate); font-size:.96rem; }
.step__th{ display:block; font-size:.85rem; font-weight:650; color:var(--slate-lt); margin-top:2px; }
.steps--connected .step:not(:last-child)::after{
  content:""; position:absolute; top:44px; right:-14px; width:12px; height:2px; background:var(--gold-lt);
}

/* ---------- Logo marquee ------------------------------------------------ */
.marquee{ position:relative; overflow:hidden; padding:8px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ display:flex; width:max-content; gap:14px; align-items:center; animation:marquee 52s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee--rev .marquee__track{ animation-direction:reverse; animation-duration:62s; }
@keyframes marquee{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; } }

.logo-tile{
  flex:none; width:172px; height:96px; overflow:hidden; display:grid; place-items:center;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px;
}
.logo-tile img{
  /* a concrete height keeps oversized source logos inside the tile —
     percentage max-heights don't resolve reliably inside a grid item */
  width:100%; height:64px; object-fit:contain;
  /* Muted wall, but light wordmarks (Stripe, Maybank) disappear at .62 with no
     contrast help — these values keep every mark legible before hover. */
  filter:grayscale(1) contrast(1.12); opacity:.76;
  transition:filter .25s var(--ease), opacity .25s var(--ease);
}
.logo-tile:hover img{ filter:none; opacity:1; }

.logo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; }
.logo-grid .logo-tile{ width:auto; }

/* ---------- Channel comparison table ------------------------------------ */
.ctable-wrap{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius); border:1px solid var(--line); background:#fff; }
.ctable{ width:100%; min-width:660px; border-collapse:collapse; font-size:.93rem; font-variant-numeric:tabular-nums; }
.ctable caption{ caption-side:top; text-align:left; padding:20px 22px 4px; font-weight:750; color:var(--ink); font-size:1rem; }
.ctable th, .ctable td{ padding:13px 16px; text-align:right; border-bottom:1px solid var(--line-soft); }
.ctable th:first-child, .ctable td:first-child{ text-align:left; }
.ctable thead th{
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate-lt);
  font-weight:750; border-bottom:1px solid var(--line); white-space:nowrap;
}
html[lang="th"] .ctable thead th{ letter-spacing:.03em; }
.ctable tbody th{ font-weight:650; color:var(--ink-2); white-space:nowrap; }
.ctable td{ color:var(--slate); }
.ctable .is-direct{ background:var(--gold-wash); }
.ctable .is-direct th, .ctable .is-direct td{ color:var(--ink); font-weight:700; }
.ctable tfoot th, .ctable tfoot td{ border-bottom:0; border-top:1.5px solid var(--ink); color:var(--ink); font-weight:800; }
.ctable .delta{ color:var(--gold-dk); font-weight:750; }

.model-tables{ display:grid; gap:22px; }
/* a grid item defaults to min-width:auto, which lets the 660px-wide table push
   the whole page sideways on mobile instead of scrolling inside its own box */
.model-tables > *{ min-width:0; }
.model-note{ font-size:.83rem; color:var(--slate-lt); margin-top:14px; }
.model-result{
  display:grid; grid-template-columns:auto 1fr; gap:6px 22px; align-items:center;
  background:var(--ink); color:#fff; border-radius:var(--radius); padding:26px 30px; margin-top:22px;
}
.model-result b{ font-size:clamp(2rem,1.5rem + 2vw,3rem); color:var(--gold); line-height:1; letter-spacing:-.03em; }
.model-result span{ color:#ABABAB; font-size:.97rem; }
.model-result em{ grid-column:1 / -1; font-style:normal; color:#D4D4D4; font-size:.95rem; padding-top:6px; }
@media (max-width:640px){
  .model-result{ grid-template-columns:1fr; gap:4px; }
  .ctable caption{ padding:16px 16px 4px; }
}

/* Two exceptions to the muted logo wall, so we never mangle a partner's mark:
   --dark  : the artwork is white-only, so it needs a dark tile behind it
   --color : the mark sits on its own coloured plate and greyscale turns it to mud */
.logo-tile--dark{ background:var(--ink); border-color:var(--ink); }
.logo-tile--dark img{ filter:none; opacity:.9; }
.logo-tile--dark:hover img{ opacity:1; }
.logo-tile--color img{ filter:none; opacity:.92; }
.logo-tile--color:hover img{ opacity:1; }

/* ---------- Client logos ------------------------------------------------- */
/* Client logos stay in colour — several have a coloured lock-up baked into the
   artwork, and greyscale turns those to mud. Partner logos keep the greyscale
   treatment below. */
.logo-tile--client img{ filter:none; opacity:1; }
.logo-tile--client{ height:104px; }
/* tighter cells so a full brand list fits beside a column of copy */
.logo-grid--tight{ grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:12px; }
.logo-grid--tight .logo-tile{ height:78px; padding:12px; }

.logo-grid--clients{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:14px; }

/* ---------- Customer reference list ------------------------------------- */
.clients{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:0 32px;
}
.client{
  position:relative; padding:14px 0 14px 22px;
  border-bottom:1px solid var(--line-soft);
  font-size:.97rem; font-weight:600; color:var(--ink-2);
}
.client::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--gold);
}
.section--ink .client{ color:#E2E2E2; border-bottom-color:rgba(255,255,255,.1); }

.client-chip{
  flex:none; display:inline-flex; align-items:center; height:44px; padding:0 22px;
  border:1px solid var(--line); border-radius:999px; background:#fff;
  font-size:.9rem; font-weight:650; color:var(--slate); white-space:nowrap;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.client-chip:hover{ color:var(--ink); border-color:var(--gold-lt); }
.section--ink .client-chip{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); color:#C9C9C9;
}

/* ---------- Quote ------------------------------------------------------- */
.quote{
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--gold);
  border-radius:var(--radius); padding:34px 32px; box-shadow:var(--shadow-sm);
}
.quote p{ font-size:1.08rem; color:var(--ink-2); font-style:italic; }
.quote footer{ margin-top:18px; font-size:.9rem; color:var(--slate); font-style:normal; }
.quote footer b{ display:block; color:var(--ink); font-style:normal; }

/* ---------- CTA band ---------------------------------------------------- */
.cta-band{
  position:relative; overflow:hidden; color:#fff;
  background:var(--ink);
  padding:clamp(56px,4vw + 34px,92px) 0;
}
.cta-band::before{
  content:""; position:absolute; right:-140px; top:-120px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,169,97,.22), transparent 70%);
}
.cta-band .wrap{ position:relative; z-index:2; text-align:center; }
.cta-band h2{ color:#fff; max-width:20ch; margin:0 auto .5em; text-wrap:balance; }
.cta-band p{ color:#D0D0D0; max-width:62ch; margin:0 auto 34px; font-size:1.08rem; }

/* ---------- Forms ------------------------------------------------------- */
.form-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(26px,2vw + 18px,44px); box-shadow:var(--shadow);
}
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field--full{ grid-column:1 / -1; }
.field label{ font-size:.855rem; font-weight:700; color:var(--ink); letter-spacing:.005em; }
.field .req{ color:var(--gold-dk); }
.field input,.field select,.field textarea{
  font:inherit; font-size:.97rem; color:var(--ink);
  padding:13px 15px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  background:#fff; width:100%; transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea{ min-height:118px; resize:vertical; }
.field select{
  appearance:none; cursor:pointer; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B7D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--gold); box-shadow:0 0 0 4px rgba(201,169,97,.18);
}
.field input::placeholder,.field textarea::placeholder{ color:#A6A6A6; }
.form-note{ font-size:.83rem; color:var(--slate-lt); margin-top:16px; }
.form-note a{ color:var(--slate); text-decoration:underline; }

.form-msg{ display:none; padding:15px 18px; border-radius:var(--radius-sm); margin-top:18px; font-size:.94rem; font-weight:600; }
.form-msg.is-on{ display:block; }
.form-msg--ok{ background:#EAF7F0; color:var(--ok); border:1px solid #BEE5D2; }
.form-msg--err{ background:#FDEDEB; color:var(--err); border:1px solid #F5C6C0; }

.hp{ position:absolute !important; left:-9999px !important; opacity:0 !important; height:0 !important; width:0 !important; }

/* ---------- Contact info panel ------------------------------------------ */
.info-list{ list-style:none; margin:0; padding:0; display:grid; gap:22px; }
.info-list li{ display:flex; gap:16px; }
.info-ico{
  flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--gold-wash); border:1px solid var(--gold-lt); color:var(--gold-dk);
}
.info-ico svg{ width:20px; height:20px; }
.info-list h3{ font-size:.95rem; margin:0 0 3px; }
.info-list p,.info-list a{ font-size:.97rem; color:var(--slate); margin:0; }
.info-list a:hover{ color:var(--gold-dk); }

.chat-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:8px; }
.chat-card{
  display:flex; align-items:center; gap:13px; padding:16px 18px;
  border:1px solid var(--line); border-radius:var(--radius); background:#fff;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.chat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--gold-lt); }
.chat-card__ico{ flex:none; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:#fff; }
.chat-card__ico svg{ width:21px; height:21px; }
.chat-card__ico--msg{ background:linear-gradient(45deg,#0695FF,#A334FA); }
.chat-card__ico--line{ background:#06C755; }
.chat-card b{ display:block; font-size:.95rem; line-height:1.3; }
.chat-card span{ font-size:.82rem; color:var(--slate); }

.office h3{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.office__tag{
  font-size:.66rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-dk); background:var(--gold-wash); border:1px solid var(--gold-lt);
  border-radius:999px; padding:3px 9px;
}
html[lang="th"] .office__tag{ letter-spacing:.03em; }
.office address{ font-style:normal; color:var(--slate); font-size:.96rem; line-height:1.65; }
.office__tel{ display:inline-block; margin-top:12px; font-weight:700; color:var(--ink); font-size:.95rem; }
.office__tel:hover{ color:var(--gold-dk); }

.map-embed{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.map-embed iframe{ display:block; width:100%; height:380px; border:0; }

/* ---------- Footer ------------------------------------------------------ */
.site-footer{ background:var(--ink); color:#9C9C9C; padding:72px 0 0; font-size:.94rem; }
.footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:52px; }
.site-footer h4{ color:#fff; font-size:.79rem; letter-spacing:.15em; text-transform:uppercase; margin-bottom:20px; font-weight:750; }
html[lang="th"] .site-footer h4{ letter-spacing:.05em; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.site-footer a{ color:#9C9C9C; transition:color .2s var(--ease); }
.site-footer a:hover{ color:var(--gold); }
.footer-brand img{ height:32px; margin-bottom:20px; }
.footer-brand p{ font-size:.92rem; line-height:1.7; max-width:34ch; }
.footer-addr{ font-style:normal; line-height:1.75; }
.footer-addr a{ display:inline-block; }

.socials{ display:flex; gap:10px; margin-top:22px; }
.socials a{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); color:#D4D4D4;
  transition:all .2s var(--ease);
}
.socials a svg{ width:18px; height:18px; }
.socials a:hover{ background:var(--gold); border-color:var(--gold); color:#0A0A0A; transform:translateY(-2px); }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); padding:24px 0 30px;
  display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; justify-content:space-between;
  font-size:.85rem; color:#7A7A7A;
}
.footer-bottom nav{ display:flex; flex-wrap:wrap; gap:8px 22px; }

/* buttons inside the footer must keep their own colours, not the footer link colour */
.site-footer .btn--gold{ color:#0A0A0A; }
.site-footer .btn--gold:hover{ color:#fff; }
.site-footer .btn--ink,
.site-footer .btn--ghost{ color:#fff; }
.site-footer .btn--outline{ color:#fff; border-color:rgba(255,255,255,.35); }
.site-footer .btn--outline:hover{ background:#fff; color:var(--ink); border-color:#fff; }

/* ---------- Floating chat dock ------------------------------------------ */
.chat-dock{ position:fixed; right:20px; bottom:20px; z-index:860; display:flex; flex-direction:column-reverse; align-items:flex-end; gap:12px; }
.chat-toggle{
  width:58px; height:58px; border-radius:50%; border:0; cursor:pointer; color:#fff;
  background:linear-gradient(140deg,#0A84FF,#7B2FF7);
  box-shadow:0 8px 26px rgba(0,0,0,.3);
  display:grid; place-items:center;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.chat-toggle:hover{ transform:scale(1.07); box-shadow:0 12px 32px rgba(0,0,0,.38); }
.chat-toggle svg{ width:28px; height:28px; }
.chat-toggle .ico-close{ display:none; }
.chat-dock.is-open .chat-toggle{ background:var(--ink); }
.chat-dock.is-open .chat-toggle .ico-chat{ display:none; }
.chat-dock.is-open .chat-toggle .ico-close{ display:block; }

.chat-options{
  display:grid; gap:10px;
  opacity:0; transform:translateY(10px) scale(.96); pointer-events:none; transform-origin:bottom right;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.chat-dock.is-open .chat-options{ opacity:1; transform:none; pointer-events:auto; }
.chat-opt{
  display:flex; align-items:center; gap:11px; padding:11px 18px 11px 13px;
  background:#fff; border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow);
  font-size:.92rem; font-weight:700; color:var(--ink); white-space:nowrap;
  transition:transform .18s var(--ease);
}
.chat-opt:hover{ transform:translateX(-4px); }
.chat-opt i{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:#fff; flex:none; }
.chat-opt i svg{ width:18px; height:18px; }
.chat-opt--msg i{ background:linear-gradient(45deg,#0695FF,#A334FA); }
.chat-opt--line i{ background:#06C755; }
.chat-opt--phone i{ background:var(--ink); }

/* keep the dock clear of the Meta chat plugin bubble when it loads */
body.fb-chat-live .chat-dock{ bottom:96px; }

/* ---------- Long-form prose (legal pages) -------------------------------- */
.prose{ max-width:78ch; }
.prose h2{ font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem); margin-top:2.2em; padding-top:1.6em; border-top:1px solid var(--line); }
.prose h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.prose h3{ font-size:1.06rem; margin-top:1.9em; }
.prose p, .prose li{ color:var(--slate); }
.prose ul{ padding-left:1.15em; display:grid; gap:.5em; margin:0 0 1.1em; }
.prose a{ color:var(--gold-dk); text-decoration:underline; text-underline-offset:2px; }
.prose .updated{ font-size:.87rem; color:var(--slate-lt); }

/* ---------- Reveal on scroll -------------------------------------------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- Language visibility ----------------------------------------- */
[data-lang-only]{ display:none; }
html[lang="en"] [data-lang-only="en"],
html[lang="th"] [data-lang-only="th"]{ display:revert; }

/* ---------- Responsive -------------------------------------------------- */
@media (max-width:1240px){
  .nav, .header-tools .login-link, .header-tools .btn--login{ display:none; }
  .burger{ display:block; }
  .header-tools{ gap:10px; }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .steps--connected .step::after{ display:none; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:34px; }
}
@media (max-width:1400px){
  /* the bar also carries a Hotel Login button — shorten the CTA before it collides */
  .lbl-lg{ display:none; }
  .lbl-sm{ display:inline; }
}
@media (max-width:900px){
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; }
  .split--flip .split__media{ order:0; }
  .split__badge{ right:16px; bottom:-16px; }
  .stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  /* not enough room for logo + language + CTA + burger — the drawer carries
     the language switcher below this width */
  .site-header .header-tools > .lang{ display:none; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  :root{ --header-h:66px; }
  .wrap{ padding:0 18px; }
  .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .chat-cards{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; gap:32px; }
  .hero{ min-height:auto; padding:calc(var(--header-h) + 52px) 0 64px; }
  .hero .btn-row .btn{ width:100%; }
  .hero__trust{ gap:12px 22px; }
  .hero__trust-item b{ font-size:1.15rem; }
  .cta-band .btn{ width:100%; }
  .chat-dock{ right:14px; bottom:14px; }
  .btn--lg{ padding:16px 26px; font-size:1rem; }
  .brand img{ height:28px; }
}

/* ==========================================================================
   ROI Calculator (/roi-calculator.html)
   ========================================================================== */
.calc{ display:grid; grid-template-columns:390px 1fr; gap:28px; align-items:start; }

/* ---- inputs panel ---- */
.calc-panel{
  position:sticky; top:calc(var(--header-h) + 20px);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px 26px; box-shadow:var(--shadow);
}
.calc-panel__head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; }
.calc-panel__head h2{ font-size:1.15rem; margin:0; }
.calc-panel__head span{ font-size:.78rem; color:var(--slate-lt); }
.calc-panel hr{ border:0; border-top:1px solid var(--line-soft); margin:24px 0; }

.calc-group{
  font-size:.7rem; font-weight:750; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-dk); margin-bottom:16px;
}
html[lang="th"] .calc-group{ letter-spacing:.04em; }

.calc-field{ margin-top:20px; }
.calc-field:first-of-type{ margin-top:0; }
.calc-field__row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:9px; }
.calc-field__label{ font-size:.9rem; font-weight:650; color:var(--ink); }
.calc-field__val{ font-size:.95rem; font-weight:750; color:var(--ink); font-variant-numeric:tabular-nums; }
.calc-field__val.is-lift{ color:var(--gold-dk); }
.calc-help{ font-size:.79rem; color:var(--slate-lt); margin-top:8px; line-height:1.5; }
.calc-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* number input with currency prefix */
.calc-input{ position:relative; display:flex; align-items:center; }
.calc-input__prefix{
  position:absolute; left:14px; font-size:.9rem; font-weight:650; color:var(--slate); pointer-events:none;
}
.calc-input input{
  font:inherit; font-size:1rem; font-weight:650; color:var(--ink); width:100%;
  padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:#fff;
  font-variant-numeric:tabular-nums;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.calc-input input.has-prefix{ padding-left:38px; }
.calc-input input:focus{ outline:0; border-color:var(--gold); box-shadow:0 0 0 4px rgba(201,169,97,.18); }

/* range slider — same look in both engines */
.calc-slider{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px; cursor:pointer;
  background:linear-gradient(to right, var(--gold) 0 var(--fill,50%), var(--line) var(--fill,50%) 100%);
}
.calc-slider:focus-visible{ outline:3px solid var(--gold); outline-offset:4px; }
.calc-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--ink); border:3px solid #fff; box-shadow:0 1px 6px rgba(0,0,0,.28); cursor:grab;
}
.calc-slider::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; border:3px solid #fff;
  background:var(--ink); box-shadow:0 1px 6px rgba(0,0,0,.28); cursor:grab;
}

/* chips + currency switch */
.chips{ display:inline-flex; gap:4px; padding:4px; background:var(--bg-soft); border:1px solid var(--line); border-radius:999px; }
.chips button{
  border:0; background:transparent; cursor:pointer; border-radius:999px; white-space:nowrap;
  padding:7px 15px; font-size:.83rem; font-weight:700; color:var(--slate);
  transition:background-color .18s var(--ease), color .18s var(--ease);
}
.chips button[aria-pressed="true"]{ background:var(--ink); color:#fff; }
.chips button:not([aria-pressed="true"]):hover{ color:var(--ink); }
.chips--block{ display:flex; }
.chips--block button{ flex:1; }

/* ---- headline result ---- */
.calc-results{ display:grid; gap:22px; min-width:0; }
.uplift{
  position:relative; overflow:hidden; color:#fff; background:var(--ink);
  border-radius:var(--radius-lg); padding:34px 34px 30px;
}
.uplift::before{
  content:""; position:absolute; right:-120px; top:-130px; width:440px; height:440px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,169,97,.24), transparent 70%);
}
.uplift > *{ position:relative; z-index:1; }
.uplift__over{
  display:inline-flex; align-items:center; gap:9px; font-size:.73rem; font-weight:750;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-lt); margin-bottom:18px;
}
html[lang="th"] .uplift__over{ letter-spacing:.04em; }
.uplift__over i{ width:7px; height:7px; border-radius:50%; background:var(--gold); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.45; transform:scale(.75);} }
@media (prefers-reduced-motion:reduce){ .uplift__over i{ animation:none; } }

.uplift__grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:30px; align-items:center; }
.uplift__num{ display:flex; align-items:baseline; gap:4px; color:var(--gold); letter-spacing:-.035em; line-height:1; }
.uplift__cur{ font-size:clamp(1.3rem, 1rem + 1.2vw, 1.9rem); font-weight:700; }
.uplift__val{ font-size:clamp(2.4rem, 1.4rem + 3.6vw, 4.2rem); font-weight:800; font-variant-numeric:tabular-nums; }
.uplift__label{ color:#D4D4D4; font-size:.97rem; margin-top:14px; max-width:38ch; }
.uplift__deltas{ display:grid; gap:14px; }
.uplift__delta{ border-left:2px solid rgba(201,169,97,.5); padding-left:16px; }
.uplift__delta .k{ font-size:.78rem; color:#A0A0A0; margin-bottom:3px; }
.uplift__delta .v{ font-size:1.28rem; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

/* ---- today vs Xcaliber ---- */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.compare__col{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.compare__col.is-x{ border-color:var(--gold-lt); background:var(--gold-wash); }
.compare__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.compare__head .t{ font-weight:800; color:var(--ink); font-size:1.02rem; }
.compare__pill{
  font-size:.66rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; background:var(--bg-soft); color:var(--slate); border:1px solid var(--line);
}
html[lang="th"] .compare__pill{ letter-spacing:.03em; }
.compare__col.is-x .compare__pill{ background:var(--ink); color:var(--gold-lt); border-color:var(--ink); }
.compare__stat{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line-soft); }
.compare__stat:last-of-type{ border-bottom:0; }
.compare__stat .k{ font-size:.87rem; color:var(--slate); }
.compare__stat .v{ font-size:.98rem; font-weight:750; color:var(--ink); font-variant-numeric:tabular-nums; }
.gauge{ margin-top:18px; }
.gauge__track{ height:8px; border-radius:99px; background:var(--line); overflow:hidden; }
.gauge__fill{ height:100%; border-radius:99px; background:var(--slate-lt); transition:width .5s var(--ease); }
.compare__col.is-x .gauge__fill{ background:var(--gold); }
.gauge__cap{ font-size:.76rem; color:var(--slate-lt); margin-top:7px; }

/* ---- channel bars ---- */
.calc-bars{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; }
.calc-bars h3{ margin-bottom:4px; font-size:1.05rem; }
.calc-bars .sub{ font-size:.9rem; color:var(--slate); margin-bottom:20px; }
.bar-row{ display:grid; grid-template-columns:150px 1fr 110px; gap:14px; align-items:center; padding:7px 0; }
.bar-row .k{ font-size:.86rem; color:var(--slate); }
.bar-row .v{ font-size:.88rem; font-weight:700; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; }
.bar{ height:9px; border-radius:99px; background:var(--line-soft); overflow:hidden; }
.bar > i{ display:block; height:100%; border-radius:99px; background:var(--gold); transition:width .5s var(--ease); }
.bar.is-muted > i{ background:var(--slate-lt); }

/* ---- method note ---- */
.calc-note{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:0 24px; }
.calc-note summary{ cursor:pointer; padding:18px 0; font-weight:700; color:var(--ink); font-size:.95rem; list-style:none; display:flex; align-items:center; gap:10px; }
.calc-note summary::-webkit-details-marker{ display:none; }
.calc-note summary::before{ content:"+"; color:var(--gold-dk); font-weight:800; font-size:1.1rem; width:14px; }
.calc-note[open] summary::before{ content:"–"; }
.calc-note__body{ padding-bottom:22px; font-size:.9rem; color:var(--slate); }
.calc-note__body ul{ margin:10px 0 0; padding-left:18px; line-height:1.9; }
.calc-note__body code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.85em;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:5px; padding:2px 7px; color:var(--ink);
}

@media (max-width:1060px){
  .calc{ grid-template-columns:1fr; }
  .calc-panel{ position:static; }
}
@media (max-width:720px){
  /* six currency chips don't fit a phone — let the row scroll instead of
     bleeding past the page gutter */
  .chips{ max-width:100%; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .chips::-webkit-scrollbar{ display:none; }
  .uplift__grid{ grid-template-columns:1fr; gap:24px; }
  .compare{ grid-template-columns:1fr; }
  .bar-row{ grid-template-columns:1fr 90px; }
  .bar-row .bar{ grid-column:1 / -1; order:3; }
  .uplift{ padding:26px 22px 24px; }
}