/* ==========================================================================
   Dodo Logistics — design system
   Palette per brand sheet: deep purple primary, ink text/dark surfaces,
   off-white page, white cards, lavender tint, emerald/amber status.
   ========================================================================== */

/* Brand tokens now come from packages/ui/src/tokens/brand.ts via
 * assets/brand.generated.css, which each page loads BEFORE this file.
 * One source of colour for the marketing site and the platform both — change
 * brand.ts and run `pnpm generate`. Do not re-declare tokens here. */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: var(--purple); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.5rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; }
p  { margin: 0 0 1rem; color: var(--text-muted); }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--purple-lift);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -200px; z-index: 200;
  background: var(--surface); color: var(--purple); padding: 12px 18px;
  border-radius: var(--radius-sm); font-weight: 600; box-shadow: var(--shadow-md);
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section--tint { background: var(--bg-alt); }
/* a purple wash over the cream, not a cool lilac slab — keeps the band warm */
.section--lav  { background: linear-gradient(180deg, rgba(107,29,153,.085) 0%, rgba(107,29,153,0) 72%), var(--bg); }
.section--ink  { background: var(--ink-soft); color: var(--on-dark-muted); }
.section--ink h2, .section--ink h3 { color: var(--on-dark); }
.section--ink p { color: var(--on-dark-muted); }

.section-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { font-size: 1.07rem; margin-bottom: 0; }
/* A section intro may run to two paragraphs; without this they butt
   together into one block of text. The last keeps margin-bottom:0 so
   the gap to the content below stays the one .section-head sets. */
.section-head p + p { margin-top: 14px; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--purple); background: var(--lavender);
  padding: 6px 12px; border-radius: 999px; margin-bottom: 14px;
}
.section--ink .eyebrow { color: var(--lavender-2); background: rgba(233,213,255,.12); }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ---------- logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo svg { height: 46px; width: auto; display: block; }
.logo--header svg { color: var(--brand-ink); }
.logo--footer svg { color: var(--on-dark); height: 58px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: .97rem;
  padding: 13px 24px; border-radius: var(--radius-sm);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
  min-height: 48px;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--purple); color: var(--on-dark); box-shadow: var(--shadow-md); }
.btn--primary:hover { background: var(--purple-lift); }
.btn--ghost { background: transparent; color: var(--purple); border-color: var(--lavender-2); }
.btn--ghost:hover { background: var(--lavender); }
.btn--on-dark { background: rgba(255,255,255,.08); color: var(--on-dark); border-color: rgba(255,255,255,.22); }
.btn--on-dark:hover { background: rgba(255,255,255,.16); }
.btn--sm { padding: 10px 18px; font-size: .9rem; min-height: 42px; }
.btn--block { width: 100%; }

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(62,46,20,.05);
}
.header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--header-h);
}
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  position: relative;
  color: var(--text-muted); font-size: .95rem; font-weight: 500;
  padding: 9px 14px; border-radius: 8px; text-decoration: none;
}
.nav a:hover { color: var(--ink); background: var(--bg-alt); text-decoration: none; }
.nav a.is-active { color: var(--purple); }
.nav a.is-active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--purple);
}
.header__cta { display: flex; align-items: center; gap: 10px; }

/* grouped nav tabs — a <details> disclosure, same pattern as the language menu */
.navgroup { position: relative; display: inline-block; }
.navgroup > summary { list-style: none; cursor: pointer; }
.navgroup > summary::-webkit-details-marker { display: none; }
.navgroup__btn {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-muted); font-size: .95rem; font-weight: 500;
  padding: 9px 14px; border-radius: 8px; user-select: none;
}
.navgroup__btn:hover { color: var(--ink); background: var(--bg-alt); }
.navgroup > summary:focus-visible .navgroup__btn { outline: 2px solid var(--purple); outline-offset: 2px; }
.navgroup[open] .navgroup__btn { color: var(--ink); background: var(--bg-alt); }
.navgroup__chev { width: 12px; height: 12px; flex: none; transition: transform .18s ease; }
.navgroup[open] .navgroup__chev { transform: rotate(180deg); }
.navgroup__menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 215px; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
}
.navgroup__menu li { margin: 0; }
.nav .navgroup__menu a {
  display: block; padding: 10px 12px; border-radius: 6px;
  font-size: .92rem; white-space: nowrap;
}
.nav .navgroup__menu a:hover { color: var(--purple); background: var(--lavender); }
.nav .navgroup__menu a.is-active::after { display: none; }

/* the in-sheet CTA is for the mobile menu only */
@media (min-width: 901px) { .nav > .btn { display: none; } }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 10px;
  background: var(--bg-alt); border: 1px solid var(--line);
  color: var(--ink); cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .header__cta .btn { display: none; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--header-bg); padding: 18px var(--gutter) 40px;
    overflow-y: auto;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: 16px 14px; font-size: 1.08rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav a.is-active::after { display: none; }
  .nav .btn { margin-top: 20px; }
  .navgroup { display: block; }
  .navgroup__btn {
    display: flex; justify-content: space-between; width: 100%;
    padding: 16px 14px; font-size: 1.08rem;
    border-bottom: 1px solid var(--line); border-radius: 0;
  }
  .navgroup[open] .navgroup__btn { background: transparent; }
  .navgroup__menu {
    position: static; min-width: 0; padding: 0 0 0 14px;
    background: transparent; border: 0; box-shadow: none;
  }
  .nav .navgroup__menu a { font-size: 1rem; white-space: normal; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 460px at 88% -12%, rgba(107,29,153,.13), transparent 62%),
    radial-gradient(620px 420px at 2% 108%, rgba(94,23,139,.09), transparent 60%),
    var(--bg);
  padding: clamp(56px, 8vw, 96px) 0 clamp(44px, 6vw, 72px);
}
.hero__inner { display: grid; gap: clamp(32px, 5vw, 56px); grid-template-columns: 1fr; align-items: center; }
.hero h1 span { color: var(--purple); }
.hero__lead { font-size: clamp(1.05rem, 2vw, 1.2rem); max-width: 56ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero__note { margin-top: 20px; font-size: .92rem; color: var(--text-faint); }

.stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin-top: clamp(36px, 5vw, 56px);
}
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--surface); padding: 22px 18px; text-align: center; }
.stat dt { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; color: var(--purple); line-height: 1.1; }
.stat dd { margin: 6px 0 0; font-size: .88rem; color: var(--text-faint); }

/* industries served — compact, because the list is the point, not the prose */
.sub-head { margin-top: 36px; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.industries { margin-top: 14px; }
.ind { padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ind .ind__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; border-radius: 9px;
  background: var(--lavender); color: var(--purple);
  margin: 0 0 11px;
}
.ind .ind__icon svg { width: 19px; height: 19px; }
.ind b { display: block; font-size: .98rem; font-weight: 600; color: var(--ink); }
.ind span { display: block; margin-top: 6px; font-size: .88rem; color: var(--text-muted); }

/* a quiet closing line under a section's cards */
.note {
  margin-top: 28px; max-width: 72ch; font-size: .97rem; color: var(--text-muted);
  border-left: 3px solid var(--line); padding-left: 16px;
}

/* fleet silhouettes
   Width is proportional to body length and the wheel count matches the class
   name, so the drawing carries the same information as the row rather than
   decorating it. Purely visual, so aria-hidden in the markup. */
.truck { display: block; width: 100%; max-width: 108px; height: auto; color: var(--purple); margin-bottom: 6px; }
@media (max-width: 760px) { .truck { max-width: 92px; } }

/* ---------- badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .74rem; font-weight: 600; letter-spacing: .02em;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--ok   { color: var(--ok-strong); background: var(--ok-tint);   border: 1px solid rgba(16,185,129,.24); }
.badge--warn { color: var(--warn-text); background: var(--warn-tint); border: 1px solid rgba(245,158,11,.26); }
.badge--info { color: var(--purple); background: var(--lavender); border: 1px solid var(--lavender-2); }

/* ---------- cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  height: 100%;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--lavender-2); }
.card p:last-child { margin-bottom: 0; }
.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 13px;
  background: var(--lavender); color: var(--purple); margin-bottom: 16px;
}
.card__icon svg { width: 26px; height: 26px; }
.card__icon.step-num {
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1;
}
.card--ink { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); box-shadow: none; }
.card--ink:hover { border-color: rgba(233,213,255,.35); }
.card--ink .card__icon { background: rgba(233,213,255,.14); color: var(--lavender-2); }

.ticks { margin-top: 16px; display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 26px; font-size: .94rem; color: var(--text-muted); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 14px; height: 8px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}
.section--ink .ticks li { color: var(--on-dark-muted); }

/* ---------- fleet table ---------- */
.fleet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.fleet table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.fleet thead th {
  text-align: left; font-family: var(--font-display); font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark); background: var(--ink-soft);
  padding: 14px 18px; white-space: nowrap;
}
.fleet tbody td { padding: 16px 18px; border-top: 1px solid var(--line-soft); color: var(--text-muted); vertical-align: top; }
.fleet tbody tr:hover { background: var(--lavender); }
.fleet .cls { font-family: var(--font-display); font-weight: 700; color: var(--ink); white-space: nowrap; }
.fleet .cls small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .8rem; color: var(--text-faint); letter-spacing: 0; }
.fleet .pay { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; white-space: nowrap; }

@media (max-width: 860px) {
  .fleet { border: 0; background: transparent; box-shadow: none; }
  .fleet table, .fleet tbody, .fleet tr, .fleet td { display: block; width: 100%; }
  .fleet thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fleet tbody tr {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 6px 4px; margin-bottom: 14px; box-shadow: var(--shadow-sm);
  }
  .fleet tbody tr:hover { background: var(--surface); }
  .fleet tbody td { border-top: 0; padding: 7px 16px; display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: baseline; }
  .fleet tbody td::before { content: attr(data-label); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
  .fleet tbody td:first-child { padding-top: 14px; }
  .fleet tbody td:last-child { padding-bottom: 14px; }
  /* keep the Thai/secondary line and the badge in the value column */
  .fleet tbody td.cls small { grid-column: 2; }
  .fleet tbody td .badge { justify-self: start; }
}

/* ---------- about / split ---------- */
.split { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr .95fr; } }
.quote {
  border-left: 3px solid var(--purple); padding: 4px 0 4px 20px; margin: 24px 0 0;
  font-family: var(--font-display); font-size: 1.08rem; font-weight: 500; color: var(--ink); line-height: 1.5;
}

/* ---------- faq ---------- */
.faq { display: grid; gap: 12px; max-width: 880px; margin: 0 auto; }
.faq details {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0; overflow: hidden;
}
.faq details[open] { border-color: var(--lavender-2); box-shadow: var(--shadow-sm); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 54px 18px 20px; position: relative;
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%;
  width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--purple); border-bottom: 2px solid var(--purple);
  transform: rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq .faq__body { padding: 0 20px 20px; }
.faq .faq__body p:last-child { margin-bottom: 0; }

/* ---------- contact ---------- */
.contact { display: grid; gap: clamp(28px, 4vw, 44px); }
@media (min-width: 940px) { .contact { grid-template-columns: 1.15fr .85fr; } }
.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); box-shadow: var(--shadow-sm); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.field label .req { color: var(--purple); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: .97rem; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; min-height: 48px; transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--purple); box-shadow: 0 0 0 4px rgba(94,23,139,.12);
}
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.field .err { display: none; margin-top: 6px; font-size: .83rem; color: var(--danger-text); font-weight: 500; }
.field.has-error .err { display: block; }
.field-row { display: grid; gap: 0 18px; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }

.hint { display: block; margin-top: 6px; font-size: .82rem; color: var(--text-faint); }

/* THB amount, with the symbol sitting inside the control */
.money { position: relative; }
.money__sym {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: .97rem; color: var(--text-faint); pointer-events: none;
}
.field .money input { padding-left: 30px; font-variant-numeric: tabular-nums; }

/* consent and scope confirmations */
.field--check { margin-bottom: 14px; }
.check {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  font-size: .88rem; font-weight: 400; color: var(--text-muted);
  line-height: 1.5; margin-bottom: 0; cursor: pointer;
}
.field .check input[type="checkbox"] {
  width: 18px; height: 18px; min-height: 0; flex: none; margin: 2px 0 0;
  padding: 0; accent-color: var(--purple); cursor: pointer;
}
.field--check.has-error .check input[type="checkbox"] { outline: 2px solid var(--danger); outline-offset: 2px; }
.check .req { color: var(--purple); }

.form__note { font-size: .84rem; color: var(--text-faint); margin: 14px 0 0; }
.form__success {
  display: none; align-items: flex-start; gap: 12px;
  background: var(--ok-tint); border: 1px solid rgba(16,185,129,.3); color: var(--ok-text);
  border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 18px; font-size: .95rem;
}
.form__success.is-shown { display: flex; }
.form__success svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }

.contact-list { display: grid; gap: 14px; }
.contact-item {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px;
}
.contact-item__icon {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  background: var(--lavender); color: var(--purple);
  display: inline-flex; align-items: center; justify-content: center;
}
.contact-item__icon svg { width: 20px; height: 20px; }
.contact-item b { display: block; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.contact-item span, .contact-item a { font-size: 1rem; color: var(--ink); font-weight: 500; }
.contact-item a:hover { color: var(--purple); }

/* ---------- footer ---------- */
.footer { background: var(--ink-soft); color: var(--on-dark-muted); padding: clamp(44px, 6vw, 68px) 0 28px; }
.footer__grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.footer h4 { color: var(--on-dark); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.footer a { color: var(--on-dark-muted); font-size: .95rem; }
.footer a:hover { color: var(--on-dark); }
.footer li + li { margin-top: 9px; }
.footer__tag { max-width: 42ch; font-size: .95rem; color: var(--on-dark-muted); margin: 18px 0 0; }
.footer__keywords { margin-top: 14px; font-size: .82rem; color: rgba(201,195,214,.62); line-height: 1.7; }
.footer__bar {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between;
  font-size: .86rem; color: rgba(201,195,214,.78);
}

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Language variants
   ========================================================================== */

/* Thai: Kanit for display (geometric, closest to Poppins), Noto Sans Thai for body.
   Thai needs more leading than Latin — ascenders and descenders stack two deep. */
html[lang="th"] {
  --font-display: 'Kanit', 'Noto Sans Thai', 'Poppins', system-ui, sans-serif;
  --font-body: 'Noto Sans Thai', 'Sarabun', 'Inter', system-ui, sans-serif;
}
html[lang="th"] body { line-height: 1.85; }
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3, html[lang="th"] h4 { line-height: 1.4; letter-spacing: 0; }
html[lang="th"] .eyebrow { letter-spacing: .06em; }
html[lang="th"] .fleet thead th { letter-spacing: .04em; }
html[lang="th"] .stat dt { line-height: 1.25; }

/* Simplified Chinese: Noto Sans SC throughout; no letter-spacing tricks on Han. */
html[lang="zh-Hans"] {
  --font-display: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-body: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
}
html[lang="zh-Hans"] body { line-height: 1.8; }
html[lang="zh-Hans"] h1, html[lang="zh-Hans"] h2, html[lang="zh-Hans"] h3 { line-height: 1.35; letter-spacing: 0; }
html[lang="zh-Hans"] .eyebrow { letter-spacing: .08em; }
html[lang="zh-Hans"] .fleet thead th { letter-spacing: .06em; }

/* the wordmark stays Latin in every language */
.logo svg text { font-family: 'Poppins', 'Montserrat', 'Century Gothic', sans-serif; }

/* ---------- language switcher ---------- */
/* language dropdown — a <details> disclosure, so it still works with JS off */
.langs { position: relative; display: inline-block; }
.langs > summary { list-style: none; }
.langs > summary::-webkit-details-marker { display: none; }

.langs__btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body);
  font-size: .82rem; font-weight: 600; line-height: 1;
  color: var(--text-muted);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  transition: color .15s, background .15s, border-color .15s;
}
.langs__btn:hover { color: var(--ink); background: var(--surface); }
.langs__btn:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.langs[open] .langs__btn { color: var(--ink); background: var(--surface); border-color: var(--purple); }

.langs__globe { width: 15px; height: 15px; flex: none; opacity: .8; }
.langs__chev  { width: 12px; height: 12px; flex: none; transition: transform .18s ease; }
.langs[open] .langs__chev { transform: rotate(180deg); }
.langs__label[lang="th"]      { font-family: 'Noto Sans Thai', var(--font-body); }
.langs__label[lang="zh-Hans"] { font-family: 'Noto Sans SC', var(--font-body); }

.langs__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 170px; margin: 0; padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.langs__menu li { margin: 0; }
.langs__menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 10px; border-radius: 8px;
  font-size: .86rem; font-weight: 600; line-height: 1.2;
  color: var(--text-muted); text-decoration: none;
  white-space: nowrap;
}
.langs__menu a:hover { color: var(--purple); background: var(--lavender); text-decoration: none; }
.langs__menu a:focus-visible { outline: 2px solid var(--purple); outline-offset: -2px; }
.langs__menu a.is-current { color: var(--purple); background: var(--lavender); }
.langs__menu a.is-current::after { content: '\2713'; font-size: .82rem; line-height: 1; }
.langs__menu a[lang="th"]      { font-family: 'Noto Sans Thai', var(--font-body); }
.langs__menu a[lang="zh-Hans"] { font-family: 'Noto Sans SC', var(--font-body); }

@media (prefers-reduced-motion: reduce) { .langs__chev { transition: none; } }

@media (max-width: 420px) {
  .langs__btn { padding: 8px 10px; font-size: .78rem; gap: 5px; }
  .header__bar { gap: 8px; }
  .logo svg { height: 38px; }
}

/* footer variant */