@charset "UTF-8";
/* ==========================================================================
   ThaiExpatWorkPermit — single stylesheet.
   Brand colours are lifted from the existing logo: indigo #363062 and
   orange #f99417. The indigo is dark enough to be AA text as-is, which gives
   this site the most corporate voice of the four; orange is decoration and
   carries dark ink wherever it backs a label.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts */
/* Both families are variable fonts, so one file per subset covers every
   weight from 100 to 900+ instead of a separate file per weight.

   Afacad Flux carries no Thai subset, which matters more than it first looks:
   English pages still render Thai in the language switcher ("ไทย") and use the
   baht sign (U+0E3F, inside the Thai block) in the figures on the homepage.
   Noto Sans Thai therefore sits in the English stack as well — the browser only
   fetches it when one of those glyphs actually appears, and the file is shared
   with the Thai pages. */

@font-face {
  font-family: "Afacad Flux"; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url("../fonts/afacad-flux-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Afacad Flux"; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url("../fonts/afacad-flux-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Noto Sans Thai"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/noto-sans-thai-thai.woff2") format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "Noto Sans Thai"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/noto-sans-thai-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Sans Thai"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/noto-sans-thai-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------- tokens */
:root {
  --brand:      #453f75;
  --brand-300:  #a29ac9;
  --brand-100:  #eeecf6;
  --brand-600:  #3d3670;
  --brand-700:  #363062;
  --brand-900:  #1f1b3a;

  --accent:     #f99417;
  --accent-600: #f28c0e;
  --accent-700: #9a5b0e;
  --accent-100: #fdf0dd;
  --accent-ink: #4d2e07;

  --ink:        #221f38;
  --body:       #46425c;
  --muted:      #6b6880;
  --line:       #e3e1ec;
  --line-soft:  #efeef5;
  --bg:         #ffffff;
  --tint:       #f7f6fb;
  --line-green: #06c755;
  --danger:     #c0332e;
  --danger-bg:  #fdf1f0;

  --radius:     14px;
  --radius-lg:  22px;
  --radius-sm:  9px;
  --shadow:     0 1px 2px rgba(31, 27, 58, .05), 0 12px 28px -12px rgba(31, 27, 58, .16);
  --shadow-lg:  0 2px 6px rgba(31, 27, 58, .06), 0 26px 50px -18px rgba(31, 27, 58, .24);
  --gutter:     clamp(1rem, 4vw, 2rem);
  --section-y:  clamp(3rem, 7vw, 5.5rem);
  --maxw:       1180px;
  --maxw-narrow: 860px;

  /* Noto Sans Thai trails the English stack to cover Thai glyphs and the baht
     sign, which Afacad Flux does not include. */
  --font-en: "Afacad Flux", "Noto Sans Thai", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-th: "Noto Sans Thai", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ----------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

/* Both families draw a small x-height for their nominal size — Afacad Flux
   measures 0.42 and Noto Sans Thai 0.45, against roughly 0.52 for Arial. Left at
   a 16px root, body copy would read about 19% smaller than it did before, which
   is the wrong direction for an audience aged 50 and over. Lifting the root once
   scales type and spacing together and lands both languages at an x-height of
   roughly 8px. Breakpoints and --maxw are in px, so responsive behaviour is
   untouched. */
html {
  font-size: 112.5%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-en);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
/* Noto Sans Thai runs smaller and taller than Afacad Flux at the same nominal
   size, so the Thai pages get a nudge up plus the extra leading Thai tone marks
   and vowels need to stay clear of the line above. */
body.lang-th {
  font-family: var(--font-th);
  font-size: 1rem;
  line-height: 1.9;
}

h1, h2, h3, h4 { color: var(--ink); font-weight: 600; line-height: 1.25; margin: 0 0 .6em; }
body.lang-th h1, body.lang-th h2, body.lang-th h3, body.lang-th h4 { line-height: 1.4; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-600); }

img, svg, iframe { max-width: 100%; }
img { height: auto; display: block; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; }
li { margin-bottom: .45em; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: 50%; top: -60px; z-index: 200;
  transform: translateX(-50%);
  background: var(--brand-900); color: #fff;
  padding: .7rem 1.4rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none; transition: top .18s;
}
.skip-link:focus { top: 0; color: #fff; }

/* --------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--maxw-narrow); }

.section { padding-block: var(--section-y); }
.section--tall { padding-block: clamp(4rem, 10vw, 8rem); }
.section--tint { background: var(--tint); }
.section--brand {
  background: linear-gradient(140deg, var(--brand-900) 0%, var(--brand-700) 55%, var(--brand-600) 100%);
  color: #e6e3f4;
}
.section--brand h2, .section--brand h3 { color: #fff; }

/* Fluid type note: a plain `clamp(min, Nvw, max)` stops scaling as soon as Nvw
   drops below min, so on a 320px screen everything froze at its largest floor
   value. Pairing a rem base with a smaller vw slope keeps these genuinely fluid
   all the way down to 320px while landing on the same size at desktop. */
.section__title { font-size: clamp(1.35rem, .95rem + 2vw, 2.3rem); }
.section__title--center { text-align: center; max-width: 34ch; margin-inline: auto; }
.section__subtitle { font-size: clamp(1.12rem, .95rem + .9vw, 1.45rem); margin-top: 2.2rem; }
.section__subtitle--center { text-align: center; }
.section__lead { font-size: 1.09rem; color: var(--body); }
.section__lead--center { text-align: center; max-width: 68ch; margin-inline: auto; margin-bottom: 2.6rem; }
.section__note { font-size: .93rem; color: var(--muted); margin-top: 1.1rem; text-align: center; }

.section__split {
  display: grid; gap: clamp(1.8rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .section__split { grid-template-columns: 1.15fr .85fr; }
  .section__split--reverse { grid-template-columns: .85fr 1.15fr; }
  .section__split--reverse .section__body { order: 2; }
  .section__split--tight { grid-template-columns: 1fr 320px; align-items: start; }
}
.section__figure { margin: 0; }
.section__figure img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
@media (min-width: 900px) { .section__figure--sticky { position: sticky; top: 6rem; } }

/* --------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--brand-700);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .72rem 1.35rem;
  font: inherit; font-weight: 600; line-height: 1.35;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 2px solid var(--btn-bd);
  border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn--sm { padding: .5rem 1.05rem; font-size: .93rem; }
.btn--lg { padding: .92rem 1.85rem; font-size: 1.06rem; }
.btn--block { width: 100%; }

.btn--primary { --btn-bg: var(--brand-700); }
.btn--primary:hover { --btn-bg: var(--brand-600); }

/* Primary CTA carries the orange identity with dark ink text — white on this
   orange only reaches 2.26, while #4d2e07 clears 4.99 on every gradient stop. */
.btn--accent {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  background: linear-gradient(135deg, #ffa72e 0%, var(--accent) 55%, var(--accent-600) 100%);
}
.btn--accent:hover { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-600) 100%); }

.btn--glass {
  --btn-bg: rgba(255, 255, 255, .14);
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .55);
  backdrop-filter: blur(6px);
}
.btn--glass:hover { --btn-bg: rgba(255, 255, 255, .26); }

.btn--ghost { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .6); }
.btn--ghost:hover { --btn-bg: rgba(255, 255, 255, .14); }

.btn--line { --btn-bg: var(--line-green); --btn-fg: #fff; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; pointer-events: none; }

.icon { width: 1.5rem; height: 1.5rem; flex: none; }
.icon--sm { width: 1.1rem; height: 1.1rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px;
  font-weight: 600; text-decoration: none;
}
.link-arrow .icon { transition: transform .16s ease; }
.link-arrow:hover .icon { transform: translateX(4px); }
.link-arrow--sm { font-size: .93rem; }

/* ---------------------------------------------------------------- topbar */
.topbar {
  background: var(--brand-900); color: #cdc8e5;
  font-size: .875rem;
}
.topbar__inner {
  display: flex; flex-wrap: wrap; gap: .35rem 1.6rem;
  align-items: center; justify-content: center;
  padding-block: .5rem;
}
@media (min-width: 860px) { .topbar__inner { justify-content: flex-end; } }
.topbar__item {
  display: inline-flex; align-items: center; gap: .4rem;
  color: inherit; text-decoration: none;
}
.topbar__item:hover { color: #fff; }
.topbar__item .icon { color: var(--brand-300); }
.topbar__item--hours { display: none; }
@media (min-width: 620px) { .topbar__item--hours { display: inline-flex; } }

/* On a phone the bar wrapped to two rows of 24px-tall links — cramped, and well
   under the 44px tap minimum. The sticky bottom bar already offers Call and
   Contact, and the header keeps the consultation CTA, so the whole strip is
   redundant here. Hiding it gives the logo and hero the room they need. */
@media (max-width: 639px) { .topbar { display: none; } }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header.is-stuck { box-shadow: 0 6px 22px -12px rgba(31, 27, 58, .3); }
.site-header__inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: 68px;
}
.brand { flex: none; display: block; line-height: 0; }
.brand__logo { width: clamp(150px, 30vw, 196px); height: auto; }

.nav-toggle {
  margin-left: auto; flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--brand-100); color: var(--brand-700);
  border: 0; border-radius: 12px; cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 4px; width: 20px; }
.nav-toggle__bars span {
  display: block; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 1000px) { .nav-toggle { display: none; } }

/* Off-canvas drawer.
   `display: none` while closed is load-bearing, not cosmetic: a position:fixed
   panel parked at translateX(100%) still counts toward document scroll width,
   which gave every page ~322px of phantom horizontal scroll on phones. Ancestor
   `overflow: hidden/clip` cannot clip a fixed element, so removing it from
   rendering is the only reliable fix.
   The open panel's resting position is plain `transform: none` — the slide is a
   decoration layered on top, never the thing that positions it. That matters:
   the reduced-motion reset below collapses animation durations, which pins a
   filled animation to its first keyframe, and an animation that carried the
   layout would leave the menu stranded off-screen for those users. */
.nav {
  position: fixed; inset: 0 0 0 auto;
  width: min(340px, 86vw);
  padding: 5.5rem 1.5rem 2rem;
  background: #fff;
  box-shadow: -18px 0 44px -18px rgba(31, 27, 58, .35);
  display: none;
  overflow-y: auto;
  z-index: 110;
}
.nav.is-open { display: block; }

@media (prefers-reduced-motion: no-preference) {
  /* No fill-mode: once it finishes, the element falls back to its own styles. */
  .nav.is-open { animation: nav-slide-in .24s ease; }
}

@keyframes nav-slide-in {
  from { transform: translateX(100%); }
  to   { transform: none; }
}
.nav__list { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.nav__item { margin: 0; border-bottom: 1px solid var(--line-soft); }
.nav__link {
  display: block; padding: .85rem .25rem;
  color: var(--ink); font-weight: 500; text-decoration: none;
}
.nav__link:hover, .nav__link.is-current { color: var(--brand-700); }
.nav__actions { display: flex; flex-direction: column; gap: .8rem; }

.lang-switch {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .5rem 1rem;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); font-size: .9rem; font-weight: 600; text-decoration: none;
}
.lang-switch:hover { border-color: var(--brand-300); background: var(--brand-100); color: var(--brand-700); }
.lang-switch .icon { color: var(--brand); }

@media (min-width: 1000px) {
  .nav {
    position: static; width: auto; padding: 0;
    display: flex; align-items: center; gap: 1.5rem;
    margin-left: auto;
    background: none; box-shadow: none; overflow: visible;
    transform: none; animation: none;
  }
  .nav__list { display: flex; gap: .35rem; margin: 0; }
  .nav__item { border: 0; }
  .nav__link { padding: .5rem .7rem; border-radius: 8px; font-size: .98rem; }
  .nav__link.is-current { background: var(--brand-100); }
  .nav__actions { flex-direction: row; align-items: center; }
}

.nav-backdrop {
  position: fixed; inset: 0; z-index: 105;
  background: rgba(31, 27, 58, .45);
  opacity: 0; pointer-events: none; transition: opacity .24s ease;
}
.nav-backdrop.is-visible { opacity: 1; pointer-events: auto; }
@media (min-width: 1000px) { .nav-backdrop { display: none; } }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; isolation: isolate; color: #fff; }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(24, 20, 46, .93) 0%, rgba(24, 20, 46, .78) 46%, rgba(54, 48, 98, .42) 100%);
}
.hero__inner { padding-block: clamp(3.2rem, 9vw, 6.5rem); }
.hero__content { max-width: 40rem; }
.hero__eyebrow {
  display: inline-block; margin: 0 0 1rem;
  padding: .34rem .95rem;
  background: rgba(249, 148, 23, .22);
  border: 1px solid rgba(249, 148, 23, .5);
  border-radius: 999px;
  color: #ffd9a3; font-size: .875rem; font-weight: 500;
}
.hero__title {
  color: #fff;
  font-size: clamp(1.75rem, 1.05rem + 3.5vw, 3.35rem);
  font-weight: 700; letter-spacing: -.01em;
  margin-bottom: .7em;
}
.hero__lead { font-size: clamp(.98rem, .92rem + .3vw, 1.15rem); color: #d9d5ec; }
.hero__points { list-style: none; margin: 1.6rem 0; padding: 0; display: grid; gap: .6rem; }
.hero__points li { display: flex; gap: .6rem; align-items: flex-start; margin: 0; color: #efedf8; }
.hero__points .icon { color: var(--accent); margin-top: .34em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* ----------------------------------------------------------------- facts */
.facts { background: var(--brand-900); }
.facts__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, .12);
  border-radius: 0;
}
@media (min-width: 780px) { .facts__grid { grid-template-columns: repeat(4, 1fr); } }
.fact { background: var(--brand-900); padding: 1.6rem 1.1rem; text-align: center; }
.fact__value {
  margin: 0 0 .2rem;
  font-size: clamp(1.3rem, .9rem + 2vw, 2.1rem); font-weight: 700;
  color: var(--accent); letter-spacing: -.01em; line-height: 1.2;
}
.fact__label { margin: 0; font-size: .9rem; color: #c9c4e2; line-height: 1.5; }

/* ------------------------------------------------------------ card grids */
.card-grid { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); }
/* Grid items default to min-width:auto, which lets wide content push a track
   past its share and overflow the page. Opting out keeps cards inside them. */
.card-grid > * { min-width: 0; }
.card-grid--2 { grid-template-columns: 1fr; }
.card-grid--3 { grid-template-columns: 1fr; }
.card-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 940px) {
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.35rem;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card--center { text-align: center; }
.card__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; margin-bottom: 1rem;
  border-radius: 13px;
  background: var(--brand-100); color: var(--brand-700);
}
.card--center .card__icon { margin-inline: auto; }
.card__icon--lg { width: 58px; height: 58px; }
.card__icon--lg .icon { width: 1.8rem; height: 1.8rem; }
.card__title { font-size: 1.08rem; margin-bottom: .4em; }
.card__text { margin: 0; font-size: .97rem; }

.card--on-brand {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: none;
  color: #dedaf0;
}
.card--on-brand:hover { background: rgba(255, 255, 255, .12); box-shadow: none; }
.card--on-brand .card__icon { background: rgba(249, 148, 23, .18); color: var(--accent); }

.feature { display: flex; gap: 1rem; align-items: flex-start; }
.feature__icon {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent-100); color: var(--accent-700);
}
.feature__title { font-size: 1.05rem; margin-bottom: .25em; }
.feature__text { margin: 0; font-size: .96rem; }

/* ----------------------------------------------------------------- steps */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.4rem; counter-reset: step;
}
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps__item {
  position: relative; margin: 0;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2.4rem 1.4rem 1.5rem;
  box-shadow: var(--shadow); text-align: center;
}
.steps__num {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-700) 100%);
  color: #fff; font-weight: 700; font-size: 1.15rem;
  box-shadow: 0 6px 16px -6px rgba(54, 48, 98, .6);
}
.steps__title { font-size: 1.1rem; margin-bottom: .35em; }
.steps__text { margin: 0; font-size: .96rem; }

.stepline { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.stepline__item {
  position: relative; margin: 0;
  display: grid; grid-template-columns: 48px 1fr; gap: 1rem;
}
.stepline__num {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--brand-700); color: #fff;
  font-weight: 700; font-size: 1.15rem;
}
.stepline__item:not(:last-child)::before {
  content: ""; position: absolute; left: 23px; top: 52px; bottom: -1.6rem;
  width: 2px; background: linear-gradient(var(--brand-300), var(--line));
}
.stepline__body {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.35rem 1.4rem; box-shadow: var(--shadow);
}
.stepline__title { font-size: 1.12rem; margin-bottom: .2em; }
.stepline__sub {
  display: inline-block; margin: 0 0 1rem;
  padding: .2rem .7rem; border-radius: 999px;
  background: var(--accent-100); color: var(--accent-700);
  font-size: .84rem; font-weight: 600;
}

.meta-list { margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px dashed var(--line); display: grid; gap: .5rem; }
.meta-list__row { display: grid; gap: .1rem .8rem; }
@media (min-width: 560px) { .meta-list__row { grid-template-columns: 12rem minmax(0, 1fr); } }
.meta-list dt { color: var(--muted); font-size: .9rem; }
.meta-list dd { margin: 0; font-weight: 600; color: var(--ink); font-size: .95rem; }

/* ------------------------------------------------------------- routecard */
.route-card {
  background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--brand);
  border-radius: var(--radius); padding: 1.6rem 1.5rem; box-shadow: var(--shadow);
}
.route-card__icon {
  display: grid; place-items: center;
  width: 50px; height: 50px; margin-bottom: 1rem; border-radius: 14px;
  background: var(--brand-100); color: var(--brand-700);
}
.route-card__title { font-size: 1.18rem; }

/* ----------------------------------------------------------------- lists */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.check-list li { display: flex; gap: .75rem; align-items: flex-start; margin: 0; }
.check-list .icon { flex: none; margin-top: .38em; color: var(--accent-700); }
.check-list--info .icon { color: var(--brand-700); }
.check-list--tight { gap: .55rem; font-size: .97rem; }

.num-list { margin: 0; padding-left: 0; list-style: none; counter-reset: doc; display: grid; gap: .85rem; }
.num-list li {
  position: relative; margin: 0; padding-left: 2.4rem; counter-increment: doc;
}
.num-list li::before {
  content: counter(doc);
  position: absolute; left: 0; top: .18em;
  display: grid; place-items: center;
  width: 1.65rem; height: 1.65rem; border-radius: 50%;
  background: var(--brand-100); color: var(--brand-700);
  font-size: .82rem; font-weight: 700;
}

/* ---------------------------------------------------------------- tables */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); box-shadow: var(--shadow); }
.data-table {
  width: 100%; min-width: 34rem;
  border-collapse: collapse; background: #fff;
  font-size: .97rem;
}
.data-table th, .data-table td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
.data-table thead th {
  background: var(--brand-900); color: #fff; font-weight: 600;
  border-bottom: 0; white-space: nowrap;
}
.data-table tbody th { font-weight: 500; color: var(--ink); }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:nth-child(even) { background: var(--tint); }
.data-table .is-num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.data-table thead .is-num { color: #fff; }

/* Below 600px a 3-column comparison needs ~544px, which meant dragging the
   table sideways on a phone. Each row becomes its own small card instead, with
   the column name repeated from data-label so nothing loses its context.
   The element stays a real <table>, so screen readers keep the row/column
   relationships either way. */
@media (max-width: 599px) {
  .table-scroll { overflow-x: visible; box-shadow: none; background: none; }
  .data-table { min-width: 0; background: none; font-size: 1rem; }
  .data-table thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .data-table tbody tr {
    display: block; margin-bottom: .8rem;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius-sm); box-shadow: var(--shadow);
    overflow: hidden;
  }
  .data-table tbody tr:nth-child(even) { background: #fff; }
  .data-table tbody tr:last-child { margin-bottom: 0; }
  .data-table tbody th[scope="row"] {
    display: block; padding: .7rem .95rem;
    background: var(--brand-100); color: var(--brand-900);
    font-weight: 600; border-bottom: 0;
  }
  .data-table tbody td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .6rem .95rem;
    border-bottom: 1px solid var(--line-soft);
    text-align: right;
  }
  .data-table tbody td:last-child { border-bottom: 0; }
  .data-table tbody td::before {
    content: attr(data-label);
    color: var(--muted); font-weight: 500; text-align: left;
  }
}

/* -------------------------------------------------------------- callouts */
.callout {
  display: flex; flex-direction: column; gap: .5rem; align-items: flex-start;
  margin-top: 2rem;
  background: var(--brand-100);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem;
  font-size: .98rem;
}
.callout > .icon { flex: none; color: var(--brand-700); margin-top: .2em; }
.callout p { margin: 0; }
.callout p + p { margin-top: .4em; }
.callout__label { font-weight: 700; color: var(--brand-900); }
.callout--accent {
  flex-direction: row; gap: 1rem;
  background: var(--accent-100); border-left-color: var(--accent-600);
}
.callout--accent > .icon { color: var(--accent-700); }

/* ------------------------------------------------------------------- faq */
.faq { display: grid; gap: .7rem; }
.faq__item {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden;
}
.faq__item[open] { border-color: var(--brand-300); box-shadow: var(--shadow); }
.faq__q {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: 1.05rem 1.25rem;
  color: var(--ink); font-weight: 600; cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: ""; flex: none; margin-left: auto; margin-top: .45em;
  width: .6rem; height: .6rem;
  border-right: 2px solid var(--brand-700); border-bottom: 2px solid var(--brand-700);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); }
.faq__q:hover { color: var(--brand-700); }
.faq__a { padding: 0 1.25rem 1.15rem; font-size: .98rem; }

/* ------------------------------------------------------------- cta band */
.cta-band {
  background: linear-gradient(120deg, var(--brand-900) 0%, var(--brand-700) 100%);
  color: #dedaf0;
}
.cta-band__inner {
  display: grid; gap: 1.6rem; align-items: center;
  padding-block: clamp(2.4rem, 6vw, 4rem);
}
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: 1.3fr auto; gap: 2.5rem; } }
.cta-band__title { color: #fff; font-size: clamp(1.28rem, .95rem + 1.6vw, 2rem); margin-bottom: .35em; }
.cta-band__body { margin: 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.cta-band__phone {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .3rem .1rem;
  color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.cta-band__phone .icon { color: var(--accent); }
.cta-band__phone:hover { color: var(--accent); }

/* ------------------------------------------------------------- page hero */
.page-hero {
  position: relative; isolation: isolate;
  padding-block: clamp(2.4rem, 7vw, 4.6rem);
  color: #fff;
  background-image: linear-gradient(100deg, rgba(24, 20, 46, .94), rgba(54, 48, 98, .62)), var(--page-hero-bg);
  background-size: cover; background-position: center;
}
.page-hero__eyebrow {
  margin: 0 0 .5rem; color: var(--accent);
  font-size: .9rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
body.lang-th .page-hero__eyebrow { text-transform: none; letter-spacing: normal; }
.page-hero__title { color: #fff; font-size: clamp(1.6rem, 1rem + 3vw, 2.85rem); font-weight: 700; margin-bottom: .5em; }
.page-hero__lead { margin: 0; max-width: 62ch; color: #d9d5ec; }

.breadcrumb { margin-bottom: 1.2rem; font-size: .875rem; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.breadcrumb li { margin: 0; color: #c9c4e2; }
.breadcrumb li + li::before { content: "/"; margin-right: .45rem; color: rgba(255, 255, 255, .4); }
.breadcrumb a { display: inline-block; padding: .25rem 0; color: #c9c4e2; text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------------- payment */
.bank {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow);
  /* The label/value split below keys off this card's own width, not the
     viewport's — the card is half-width inside a two-column grid, so a
     viewport media query gets the available space badly wrong. */
  container-type: inline-size;
}
.bank__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.bank__logo { width: 56px; height: 56px; object-fit: contain; flex: none; }
.bank__name { margin: 0; font-size: 1.1rem; }
.bank__rows { margin: 0; display: grid; gap: .55rem; }
.bank__row { display: grid; gap: .05rem .9rem; }
@container (min-width: 320px) {
  .bank__row { grid-template-columns: 9rem minmax(0, 1fr); align-items: baseline; }
}
.bank__rows dt { color: var(--muted); font-size: .92rem; }
.bank__rows dd { margin: 0; font-weight: 600; color: var(--ink); }
.bank__number { font-size: 1.12rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--brand-700) !important; }

.qr-card {
  margin: 0; padding: 1.4rem; text-align: center;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.qr-card img { width: 100%; max-width: 200px; margin-inline: auto; border-radius: var(--radius-sm); }
.qr-card figcaption {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  margin-top: .9rem; font-size: .88rem; color: var(--muted);
}
.payment__cards img { max-width: 200px; }

/* --------------------------------------------------------------- contact */
.contact { display: grid; gap: clamp(2rem, 5vw, 3.2rem); align-items: start; }
@media (min-width: 940px) { .contact { grid-template-columns: .85fr 1.15fr; } }

.contact__company { font-weight: 600; color: var(--ink); margin-bottom: 1.3rem; }
.contact__list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1.25rem; }
.contact__list li { display: flex; gap: 1rem; align-items: flex-start; margin: 0; }
.contact__ico {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--brand-100); color: var(--brand-700);
}
.contact__label {
  display: block; margin-bottom: .1rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted);
}
body.lang-th .contact__label { text-transform: none; letter-spacing: normal; }
.contact__strong { display: block; font-weight: 600; color: var(--ink); text-decoration: none; font-size: 1.05rem; }
a.contact__strong { padding: .35rem 0; }
a.contact__strong:hover { color: var(--brand-700); }
.contact__meta { font-size: .88rem; color: var(--muted); }
.contact__list address { font-style: normal; }

.line-card {
  display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap;
  background: var(--tint); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.3rem;
}
.line-card img { width: 108px; height: 108px; border-radius: var(--radius-sm); background: #fff; }
.line-card__title { display: flex; align-items: center; gap: .45rem; font-size: 1.02rem; margin-bottom: .3em; }
.line-card__title .icon { color: var(--line-green); }
.line-card__text { font-size: .93rem; margin-bottom: .9em; }

/* ------------------------------------------------------------------ form */
.form-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.4rem, 3.4vw, 2.2rem);
  box-shadow: var(--shadow-lg);
}
.form-card__title { font-size: clamp(1.22rem, 1rem + 1.1vw, 1.6rem); margin-bottom: .35em; }
.form-card__intro { color: var(--body); font-size: .98rem; margin-bottom: 1.6rem; }

.form__row { display: grid; gap: 1.1rem; }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form { display: grid; gap: 1.1rem; }

.field { display: grid; gap: .35rem; }
.field label { font-size: .93rem; font-weight: 600; color: var(--ink); }
.field .req { color: var(--danger); }
.field .opt { font-weight: 400; color: var(--muted); }

.field input, .field select, .field textarea {
  width: 100%;
  padding: .74rem .9rem;
  font: inherit; font-size: 1rem;
  color: var(--ink); background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 8rem; line-height: 1.65; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2300798a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .95rem center; background-size: .75rem;
  padding-right: 2.4rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(54, 48, 98, .16);
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.field__err { margin: 0; font-size: .88rem; color: var(--danger); }

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.form__trap {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.form__consent { margin: 0; font-size: .86rem; color: var(--muted); }
.form__status { min-height: 0; }
.form__status:empty { display: none; }

.alert {
  display: flex; gap: .7rem; align-items: flex-start;
  border-radius: var(--radius-sm); padding: .95rem 1.1rem;
  margin-bottom: 1.4rem; font-size: .97rem;
}
.alert p { margin: 0; }
.alert--ok { background: var(--accent-100); color: #23561b; border: 1px solid #bde39a; }
.alert--ok .icon { color: var(--accent-700); flex: none; margin-top: .2em; }
.alert--error { background: var(--danger-bg); color: #8f251f; border: 1px solid #f0bfbc; }

.map-embed {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  aspect-ratio: 16 / 9;
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 620px) { .map-embed { aspect-ratio: 4 / 3; } }

/* ------------------------------------------------------------ error page */
.error-page { text-align: center; }
.error-page__code {
  margin: 0; font-size: clamp(4rem, 14vw, 7rem); font-weight: 700; line-height: 1;
  color: var(--brand-100);
}
.error-page__title { margin-top: -.3em; font-size: clamp(1.5rem, 4vw, 2.1rem); }
.error-page__body { max-width: 46ch; margin-inline: auto; }
.error-page__links {
  list-style: none; margin: 2rem 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; justify-content: center;
}
.error-page__links li { margin: 0; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--brand-900); color: #c9c4e2; font-size: .96rem; }
.site-footer__grid {
  display: grid; gap: 2.2rem;
  padding-block: clamp(2.6rem, 6vw, 4rem);
}
@media (min-width: 780px) { .site-footer__grid { grid-template-columns: 1.4fr .7fr 1.1fr; gap: 2.6rem; } }
.site-footer__logo {
  width: 180px; margin-bottom: 1.1rem;
  background: #fff; padding: .55rem .8rem; border-radius: 10px;
}
.site-footer__about { margin: 0; font-size: .93rem; line-height: 1.75; }
.site-footer__heading { color: #fff; font-size: 1rem; margin-bottom: .9em; }
.site-footer__links, .site-footer__contact { list-style: none; margin: 0; padding: 0; }
.site-footer__links li { margin-bottom: .1em; }
/* Block + vertical padding gets these to a comfortable tap size on a phone
   without adding visible chrome. */
.site-footer__links a {
  display: block; padding: .5rem 0;
  color: #c9c4e2; text-decoration: none;
}
.site-footer__links a:hover { color: var(--accent); }
.site-footer__contact li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .95em; }
.site-footer__contact .icon { flex: none; margin-top: .28em; color: var(--brand-300); }
.site-footer__contact a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: #fff; text-decoration: none;
}
.site-footer__contact a:hover { color: var(--accent); }
.site-footer__note { display: block; font-size: .84rem; color: #9f99c2; }

.site-footer__disclaimer {
  padding-bottom: 1.6rem;
}
.site-footer__disclaimer p {
  margin: 0; padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .85rem; color: #9f99c2;
}
.site-footer__bar { background: rgba(0, 0, 0, .22); }
.site-footer__bar-inner {
  display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; justify-content: space-between;
  padding-block: 1rem; font-size: .86rem;
}
.site-footer__bar-inner p { margin: 0; }

/* ----------------------------------------------------------- sticky bar */
.sticky-bar {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 22px -14px rgba(31, 27, 58, .4);
  padding-bottom: env(safe-area-inset-bottom);
}
.sticky-bar__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  padding: .6rem .4rem;
  font-size: .78rem; font-weight: 600; text-decoration: none;
  color: var(--brand-900);
  border-right: 1px solid var(--line-soft);
}
.sticky-bar__btn:last-child { border-right: 0; }
.sticky-bar__btn .icon { color: var(--brand-700); }
.sticky-bar__btn--call .icon { color: var(--accent-700); }
.sticky-bar__btn--line .icon { color: var(--line-green); }
@media (min-width: 1000px) { .sticky-bar { display: none; } }
@media (max-width: 999px) { body { padding-bottom: 62px; } }

/* ----------------------------------------------------- narrow phone polish
   Small screens (320–419px) are where ragged, half-width buttons and generous
   desktop padding show up worst. Full-width actions read as a tidy stack and
   are far easier to hit one-handed. */
@media (max-width: 419px) {
  .hero__inner { padding-block: 2.6rem 2.9rem; }

  .hero__actions .btn,
  .cta-band__actions .btn,
  .error-page .btn {
    width: 100%;
  }
  .cta-band__actions { width: 100%; }
  .cta-band__phone { justify-content: center; width: 100%; }

  /* Give the eye a single alignment to follow rather than three. */
  .line-card { justify-content: center; text-align: center; }
  .line-card img { margin-inline: auto; }

  .form-card { padding: 1.25rem 1.1rem; border-radius: var(--radius); }
  .card, .bank, .route-card, .stepline__body { padding: 1.25rem 1.1rem; }
  .faq__q, .faq__a { padding-inline: 1rem; }

  /* 12px labels get hard to read; keep the sticky bar legible instead of tidy. */
  .sticky-bar__btn { font-size: .82rem; }
}

/* --------------------------------------------------------------- utility */
.is-hidden { display: none !important; }
body.nav-open { overflow: hidden; }

@media print {
  .topbar, .site-header, .sticky-bar, .cta-band, .map-embed, .nav-backdrop { display: none !important; }
  body { color: #000; }
  a { text-decoration: underline; }
}