@import url("https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;500;600;700&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap");

/* ============================================================
   OG · DESIGN TOKENS · Bright brand system
   Import this first on every page.
   ============================================================ */

:root{
  /* -- Surfaces (bright, minimal) -- */
  --paper:        #ffffff;
  --paper-warm:   #fafafb;
  --paper-deep:   #f2f4f7;

  /* -- Ink scale (black + graphite) -- */
  --ink:          #111111;
  --ink-900:      #090909;
  --ink-800:      #1a1a1a;
  --ink-700:      #2a2d33;
  --ink-soft:     #4c505b;
  --ink-mute:     #8b909c;
  --ink-ghost:    #bcc1cd;

  /* -- Rules -- */
  --rule:         #e5e8ef;
  --rule-soft:    #f0f2f6;

  /* -- Accent · soft neutral pulled from brand mark -- */
  --accent:       #b39f9f;
  --accent-deep:  #897575;
  --accent-warm:  #d6c7c7;
  --accent-tint:  color-mix(in oklab, var(--accent) 14%, var(--paper));
  --tint-bg:      color-mix(in oklab, var(--accent) 8%, var(--paper));

  /* -- Semantic / secondaries -- */
  --teak:         #6f6767;
  --jade:         #4d8e69;
  --gold:         #e6dada;
  --danger:       #c25757;
  --danger-tint:  color-mix(in oklab, var(--danger) 14%, var(--paper));

  /* -- Type -- */
  --display: "Host Grotesk", "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
  --sans:    "Host Grotesk", "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
  --body:    "Host Grotesk", "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
  --serif:   "Host Grotesk", "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* -- Layout -- */
  --max: 1240px;
  --pad: clamp(20px, 4vw, 48px);

  /* -- Radii (rounded — 10–14px) -- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* -- A1 Rounded & Warm radius aliases -- */
  --radius-pill: 999px;
  --radius-card: 10px;
  --radius-sm:   8px;

  /* -- Space scale -- */
  --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px;
  --s-5: 32px; --s-6: 48px; --s-7: 72px; --s-8: 112px;

  /* -- Motion -- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-1: .15s; --dur-2: .28s; --dur-3: .55s;

  /* -- Shadows -- */
  --shadow-card: 0 1px 2px oklch(0.20 0.02 250 / 0.04), 0 8px 24px oklch(0.20 0.02 250 / 0.06);
  --shadow-lift: 0 2px 4px oklch(0.20 0.02 250 / 0.06), 0 20px 48px oklch(0.20 0.02 250 / 0.10);
}

/* ---- i18n · EN / TH switcher ----
   Show only elements whose lang attribute matches the html[lang] (or any child with an explicit lang).
   Apply on both html and body for safety. */
html[lang="en"] [lang="th"],
html[lang="th"] [lang="en"],
body[lang="en"] [lang="th"],
body[lang="th"] [lang="en"]{ display: none !important; }
/* Thai glyphs do not tolerate the tight tracking Latin display uses;
   relax letter-spacing and give slightly more leading so tone marks breathe */
html[lang="th"] .display,
html[lang="th"] h1,
html[lang="th"] h2,
html[lang="th"] h2.section-h,
html[lang="th"] h3,
html[lang="th"] h4{
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  word-spacing: 0.05em;
}
html[lang="th"] .lede,
html[lang="th"] .hero .sub,
html[lang="th"] .hero .lede{
  letter-spacing: 0;
  line-height: 1.55;
}

/* Language toggle pill */
/* Language toggle — inline text switch, saffron underline on active */
.lang-toggle{
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  background: transparent;
  border: 0;
  padding: 0;
}
.lang-toggle button{
  position: relative;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 8px 3px;
  color: var(--ink-mute);
  font: inherit;
  transition: color .15s ease;
}
.lang-toggle button + button{ margin-left: 14px; }
.lang-toggle button + button::before{
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 12px;
  background: var(--rule);
}
.lang-toggle button.on{ color: var(--ink); }
.lang-toggle button.on::after{
  content: "";
  position: absolute;
  left: 2px; right: 2px;
  bottom: 2px;
  height: 1.5px;
  background: var(--accent);
  border-radius: 2px;
}
.lang-toggle button:hover:not(.on){ color: var(--ink); }
.lang-toggle button:focus-visible{ outline-offset: 4px; }

/* ---- Focus ring · global ---- */
*:focus{ outline: none; }
*:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.ink-bg *:focus-visible,
.cta-band *:focus-visible,
footer *:focus-visible,
.other-pages *:focus-visible{
  outline-color: var(--gold);
}

/* ---- Reveal on scroll (base) ---- */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in{ opacity: 1; transform: none; }

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

/* ---- Print ---- */
@media print{
  :root{
    --paper: #ffffff; --paper-warm: #ffffff;
    --ink: #000000; --ink-soft: #333333; --ink-mute: #555555;
    --rule: #cccccc; --rule-soft: #dddddd;
  }
  body{ background: #fff !important; color: #000 !important; }
  .nav, .mobile-nav, .mobile-menu, .tweaks, .hero-ticker,
  [data-slot], .op-grid, .other-pages{ display: none !important; }
  .ink-bg, .cta-band, footer{ background: #fff !important; color: #000 !important; border-top: 1px solid #000 !important; }
  .ink-bg *, .cta-band *, footer *{ color: #000 !important; }
  .reveal{ opacity: 1 !important; transform: none !important; }
  section{ page-break-inside: avoid; padding: 28px 0 !important; }
  details{ page-break-inside: avoid; }
  details > summary{ list-style: none; }
  details[open] + *, details > *{ display: block !important; }
  details > .a, details > div{ display: block !important; }
  a{ color: #000 !important; text-decoration: underline; }
  a[href^="http"]::after{ content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
  img, .deal-card{ page-break-inside: avoid; }
}

/* ---- Form states (shared) ---- */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"]{
  border-color: var(--danger) !important;
  background: var(--danger-tint);
}
button[aria-busy="true"],
button[disabled]{
  opacity: 0.6;
  cursor: wait;
  pointer-events: none;
}
button[aria-busy="true"] .arrow{
  animation: og-spin .8s linear infinite;
}
@keyframes og-spin{ to { transform: rotate(360deg); } }

.field-error{
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--danger);
  margin-top: 6px;
}
.field-success{
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--jade);
  margin-top: 6px;
}

/* ---- Mobile nav drawer (shared) ---- */
.mobile-toggle{
  display: none;
  background: none; border: 0; padding: 8px; cursor: pointer;
  color: var(--ink);
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: var(--r-md);
}
.mobile-toggle svg{ width: 22px; height: 22px; }
@media (max-width: 860px){
  .mobile-toggle{ display: inline-flex; }
  .nav-cta .btn:not(.mobile-toggle){ display: none; }
}

.mobile-menu{
  position: fixed; inset: 0;
  background: var(--paper);
  z-index: 100;
  opacity: 0; visibility: hidden;
  transition: opacity .2s var(--ease), visibility .2s;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.mobile-menu.open{ opacity: 1; visibility: visible; }
.mobile-menu-head{
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px var(--pad); border-bottom: 1px solid var(--rule);
}
.mobile-menu-body{ padding: 16px var(--pad) 48px; }
.mobile-menu-body > a{
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--rule-soft);
  font-family: var(--display); font-weight: 500; font-size: 22px;
  letter-spacing: -0.02em; color: var(--ink); text-decoration: none;
}
.mobile-menu-body > a::after{ content: "→"; font-family: var(--mono); color: var(--ink-mute); }
.mobile-menu-body details{
  border-bottom: 1px solid var(--rule-soft);
}
.mobile-menu-body details summary{
  list-style: none; cursor: pointer;
  padding: 18px 0;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--display); font-weight: 500; font-size: 22px;
  letter-spacing: -0.02em; color: var(--ink);
}
.mobile-menu-body details summary::-webkit-details-marker{ display:none; }
.mobile-menu-body details summary::after{
  content: "+"; font-family: var(--mono); color: var(--ink-mute); font-size: 24px; font-weight: 300;
  transition: transform .2s var(--ease);
}
.mobile-menu-body details[open] summary::after{ transform: rotate(45deg); color: var(--accent); }
.mobile-menu-body .mm-sub{
  padding: 0 0 20px;
}
.mobile-menu-body .mm-sub a{
  display: grid; grid-template-columns: 28px 1fr auto; gap: 12px;
  padding: 12px 0;
  color: var(--ink-soft); text-decoration: none;
  font-family: var(--sans); font-size: 15px;
  align-items: baseline;
}
.mobile-menu-body .mm-sub a .n{ font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--ink-mute); }
.mobile-menu-body .mm-sub a .t{ font-family: var(--display); font-weight: 500; font-size: 17px; letter-spacing: -0.02em; color: var(--ink); }
.mobile-menu-body .mm-sub a::after{ content: "→"; font-family: var(--mono); color: var(--ink-mute); align-self: center; }
.mobile-menu-body .mm-cta{
  margin-top: 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.mobile-menu-body .mm-cta .btn{ justify-content: space-between; }