/* SornSa website styles. Tokens on :root, dark overrides on [data-theme="dark"].
   Brand: navy #1C2E45, coral #F04B2C (accent only), paper #F6F4EE, sand #DDDACC.
   Fonts: Anuphan (headings), IBM Plex Sans Thai (body). */

/* ---------- Tokens ---------- */
:root {
  --navy: #1C2E45;
  --coral: #F04B2C;
  --coral-strong: #D63D20;
  --white: #FFFFFF;

  --bg: #F6F4EE;
  --surface: #FFFFFF;
  --band: #DDDACC;
  --text: #1C2E45;
  --text-2: rgba(28, 46, 69, .78);
  --hair: rgba(28, 46, 69, .16);
  --rule: #1C2E45;
  --bar: rgba(28, 46, 69, .22);
  --ring: #1C2E45;
  --focus: #1C2E45;
  --header-bg: rgba(246, 244, 238, .94);
  --chip: #E3E7ED; /* Navy Tint: background for icon chips */

  /* Logo and icon colors used by the sprite */
  --la: #F04B2C;
  --lb: #1C2E45;
  --ia: #F04B2C;
  --ib: #1C2E45;

  --font-display: "Anuphan", "Leelawadee UI", "Thonburi", Tahoma, sans-serif;
  --font-body: "IBM Plex Sans Thai", "Leelawadee UI", "Thonburi", Tahoma, sans-serif;

  --radius: 4px;
  --radius-lg: 12px;
  --gutter: 16px;
  --header-h: 64px;
  --section-y: clamp(56px, 8vw, 112px);

  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #1C2E45;
  --surface: #22364F;
  --band: #15233A;
  --text: #FFFFFF;
  --text-2: rgba(255, 255, 255, .78);
  --hair: rgba(255, 255, 255, .16);
  --rule: rgba(255, 255, 255, .6);
  --bar: rgba(255, 255, 255, .28);
  --ring: #FFFFFF;
  --focus: #FFFFFF;
  --header-bg: rgba(28, 46, 69, .94);
  --chip: rgba(255, 255, 255, .08);
  --lb: #FFFFFF;
  --ib: #15233A;
  color-scheme: dark;
}

/* No JavaScript: follow the system setting. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #1C2E45;
    --surface: #22364F;
    --band: #15233A;
    --text: #FFFFFF;
    --text-2: rgba(255, 255, 255, .78);
    --hair: rgba(255, 255, 255, .16);
    --rule: rgba(255, 255, 255, .6);
    --bar: rgba(255, 255, 255, .28);
    --ring: #FFFFFF;
    --focus: #FFFFFF;
    --header-bg: rgba(28, 46, 69, .94);
    --chip: rgba(255, 255, 255, .08);
    --lb: #FFFFFF;
    --ib: #15233A;
    color-scheme: dark;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 768px) {
  body { font-size: 17px; }
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: clamp(2.125rem, 1.35rem + 3.3vw, 3.5rem); line-height: 1.12; letter-spacing: -.01em; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem); line-height: 1.18; letter-spacing: -.005em; }
h3 { font-size: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem); line-height: 1.3; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
[role="list"] { list-style: none; }

a { color: inherit; }
a:hover { text-decoration-color: var(--coral); }

svg { flex-shrink: 0; }

/* Phrase segments: Thai headings break only between these. */
.nb { display: inline-block; max-width: 100%; }
/* "{...}" in content: keep these words together on one line. */
.nw { white-space: nowrap; }

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

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

html:not(.js) .js-only { display: none !important; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--navy);
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}
.skip-link:focus { top: 12px; }

main:focus { outline: none; }

.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1280px) { :root { --gutter: 40px; } }

/* ---------- Brand graphics ---------- */
.wordmark {
  display: block;
  width: 141px; /* 22px tall at the 257.92 x 40.26 viewBox ratio */
  height: 22px;
}

/* "The Line": 1px navy rule with a 30x7 coral notch at the left end */
.the-line {
  position: relative;
  height: 7px;
  margin-bottom: 20px;
  max-width: 240px;
}
.the-line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  height: 1px;
  background: var(--rule);
}
.the-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 7px;
  background: var(--coral);
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}

.loop-ring {
  position: absolute;
  pointer-events: none;
  --la: var(--ring);
  opacity: .08; /* S3 ring pattern: 8 to 12% */
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 10px 22px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  max-width: 100%;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* White on coral is AA only for large text, so primary labels are large and bold. */
.btn-primary {
  background: var(--coral);
  color: #FFFFFF;
  font-size: 1.1875rem;
  font-weight: 700;
}
.btn-primary:hover { background: var(--coral-strong); }

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}
.btn-secondary:hover { background: var(--text); color: var(--bg); }

.btn-block { display: flex; width: 100%; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--text); }

.ico { width: 22px; height: 22px; }
.ico-sun { display: none; }
[data-theme="dark"] .ico-sun { display: block; }
[data-theme="dark"] .ico-moon { display: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  border-bottom: 1px solid var(--hair);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  backdrop-filter: saturate(1.2) blur(8px);
}

.header-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
  text-decoration: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-desktop, .header-actions .btn-header, .header-actions .lang-header { display: none; }

.nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: 2px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }

.btn-header {
  min-height: 44px;
  padding: 6px 16px;
  white-space: nowrap;
}

/* No JavaScript means no menu button, so show the language switcher in the header. */
html:not(.js) .header-actions .lang-header { display: inline-flex; }

@media (min-width: 1024px) {
  .nav-desktop { display: block; margin-right: 8px; }
  .header-actions .btn-header { display: inline-flex; }
  .header-actions .lang-header { display: inline-flex; }
  .menu-toggle { display: none; }
  .brand { margin-right: auto; }
}

/* Hamburger */
.burger { position: relative; display: block; width: 20px; height: 14px; }
.burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 6px; }
.burger span:nth-child(3) { top: 12px; }
.menu-toggle[aria-expanded="true"] .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--hair);
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu-inner { padding-top: 8px; padding-bottom: 24px; display: grid; gap: 20px; }

.menu-list { list-style: none; }
.menu-list li { border-bottom: 1px solid var(--hair); }
.menu-link {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 8px 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  text-decoration: none;
}

@media (min-width: 1024px) {
  .mobile-menu { display: none !important; }
}

/* Language switcher: TH | EN */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9375rem;
}
.lang-sep { color: var(--text-2); padding: 0 2px; }
.lang-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 44px;
  padding: 0 6px;
  color: var(--text-2);
  text-decoration: none;
  letter-spacing: .04em;
}
.lang-link:hover { color: var(--text); }
.lang-link[aria-current="true"] { color: var(--text); }
.lang-link[aria-current="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 22px;
  height: 5px;
  margin-left: -11px;
  background: var(--coral);
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}
.lang-menu { font-size: 1.0625rem; }

/* ---------- Sections ---------- */
.section { padding-block: var(--section-y); scroll-margin-top: var(--header-h); }
.band { background: var(--band); }

.section-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 48px); }
.section-head h2 { margin-bottom: 0; }
.section-head .lede { margin-top: 16px; }

.overline {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-2);
}

.lede {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 62ch;
}
@media (min-width: 768px) { .lede { font-size: 1.1875rem; } }

/* ---------- Hero ---------- */
/* Full-bleed navy panel, like the contact panel: tokens re-scoped to the on-dark look.
   The bottom padding leaves room for the stats card that overlaps it. */
.hero {
  --bg: #1C2E45;
  --text: #FFFFFF;
  --text-2: rgba(255, 255, 255, .8);
  --hair: rgba(255, 255, 255, .16);
  --ring: #FFFFFF;
  --focus: #FFFFFF;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  padding-block: clamp(56px, 8vw, 120px) clamp(112px, 11vw, 168px);
}
[data-theme="dark"] .hero { --bg: #15233A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .hero { --bg: #15233A; }
}
/* Coral for the second half of the headline: large text only (S3: coral text at 24px+). */
.hero .hl { color: var(--coral); }
.hero-grid {
  display: grid;
  gap: 48px;
  align-items: center;
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; }
}
.hero-copy h1 { margin-bottom: 20px; }
.hero-lede { margin-bottom: 32px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 479px) {
  .cta-row .btn { width: 100%; }
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 24px 0;
}
.hero-ring {
  width: min(460px, 115%);
  aspect-ratio: 1;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-38%, -50%);
}

.report {
  --surface: #FFFFFF;
  --text: #1C2E45;
  --text-2: rgba(28, 46, 69, .78);
  --hair: rgba(28, 46, 69, .16);
  --bar: rgba(28, 46, 69, .22);
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 24px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -24px rgba(28, 46, 69, .35);
}
.report-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--hair);
  font-size: .875rem;
  color: var(--text-2);
}
.report-label { font-weight: 600; color: var(--text); }
.report-metric { font-weight: 500; color: var(--text-2); }
.report-values {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 4px 0 16px;
  font-family: var(--font-display);
}
.report-from {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: line-through;
  text-decoration-color: var(--text-2);
}
.report-arrow { font-size: 1.25rem; color: var(--text-2); }
.report-to {
  font-size: clamp(2.75rem, 2rem + 3vw, 3.75rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
}
.report-chart { display: block; width: 100%; height: 72px; margin-bottom: 16px; }
.report-chart .bar { fill: var(--bar); }
.report-chart .bar-now { fill: var(--coral); }
.report-chart .baseline { fill: var(--hair); }
.report-note {
  padding-top: 14px;
  border-top: 1px solid var(--hair);
  font-size: .9375rem;
  color: var(--text-2);
}

/* ---------- Photos ----------
   Unsplash photos, credited in the footer. Swap in real SornSa photos when they exist.
   .photo-tag is unused for now; kept for labelling an image again if needed. */
.photo { position: relative; margin: 0; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); }
.photo-tag {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 2px 8px;
  border-radius: 2px;
  background: rgba(28, 46, 69, .85);
  color: #FFFFFF;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.5;
}

/* Big photo with the report card floating over its lower left corner. */
.hero-visual { flex-direction: column; align-items: flex-start; width: 100%; max-width: 560px; justify-self: center; }
.hero-photo { width: 100%; aspect-ratio: 4 / 3; }
.hero-photo img { box-shadow: 0 28px 56px -28px rgba(0, 0, 0, .5); }
.hero-photo + .report { z-index: 1; width: min(360px, calc(100% - 24px)); margin: -88px 0 0 12px; }
@media (min-width: 960px) {
  .hero-photo { aspect-ratio: 1; }
  .hero-photo + .report { width: min(340px, 75%); margin: -136px 0 0 -32px; }
}

/* The Loop as a frame: the photo sits inside the symbol ring. */
.about-photo { width: min(240px, 70%); aspect-ratio: 1; margin-top: 32px; --la: var(--coral); }
.about-photo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.about-photo img { position: absolute; top: 14%; left: 14%; width: 72%; height: 72%; border-radius: 50%; }
.about-photo .photo-tag { left: auto; right: 0; top: auto; bottom: 4%; }

.contact-photo { max-width: 460px; aspect-ratio: 16 / 9; margin-top: 32px; }

/* Case cards: the photo runs edge to edge across the top of the card. */
.case-grid .card.case-card { padding-top: 0; overflow: hidden; }
.case-photo { aspect-ratio: 16 / 9; margin: 0 -24px 8px; overflow: hidden; }
.case-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.case-card:hover .case-photo img { transform: scale(1.04); }

/* Audience mosaic: one large photo and two small. Phones: large on top, two below. */
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: clamp(32px, 4vw, 48px); }
.mosaic figure { margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-lg); }
.mosaic .mosaic-main { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.mosaic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mosaic figure:hover img { transform: scale(1.04); }
@media (min-width: 768px) {
  .mosaic { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; height: clamp(340px, 38vw, 460px); }
  .mosaic figure { aspect-ratio: auto; }
  .mosaic .mosaic-main { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; }
}

/* Process: a wide banner under the four steps. */
.process-photo { margin: clamp(32px, 4vw, 48px) 0 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg); }
.process-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
@media (min-width: 768px) {
  .process-photo { aspect-ratio: 21 / 8; }
}

/* ---------- Stats ---------- */
/* One card pulled up over the bottom of the hero. */
.stats-band { position: relative; z-index: 2; margin-top: -72px; }
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 0 32px;
  padding: 4px clamp(20px, 3vw, 40px);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px -28px rgba(28, 46, 69, .45);
}

/* Phones: one compact row per stat, number beside its label. */
@media (max-width: 639px) {
  .stats .stat { flex-direction: row; align-items: center; gap: 16px; padding: 16px 0; }
  .stats .stat + .stat { border-top: 1px solid var(--hair); }
  .stats .stat-value { flex: 0 0 auto; font-size: 2rem; }
}

/* Platforms strip */
.platforms { padding-top: clamp(32px, 4vw, 48px); }
.platforms-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.platforms-label { font-family: var(--font-display); font-weight: 600; font-size: .9375rem; color: var(--text-2); }
.platform-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.platform-list li {
  padding: 6px 14px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.4;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 28px 0;
}
.stat-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
  line-height: 1.1;
}
.stat-label { font-size: .9375rem; color: var(--text-2); line-height: 1.45; }

/* ---------- Cards ---------- */
.card-grid, .case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
  list-style: none;
}
.case-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
}
.service-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.service-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 20px 40px -24px rgba(28, 46, 69, .45);
}
.service-card .card-icon { width: 52px; height: 52px; padding: 13px; border-radius: 12px; background: var(--chip); }
/* Seven services plus this card fill a 4 x 2 grid on desktop. */
@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cta-card {
  --bg: #1C2E45; /* button hover text color */
  --text: #FFFFFF;
  --text-2: rgba(255, 255, 255, .8);
  --focus: #FFFFFF;
  justify-content: center;
  background: var(--navy);
  border-color: var(--navy);
  color: var(--text);
}
.cta-card .btn { align-self: flex-start; margin-top: 8px; }
.cta-card p { color: var(--text-2); }
[data-theme="dark"] .cta-card { background: #15233A; border-color: var(--hair); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .cta-card { background: #15233A; border-color: var(--hair); }
}
.card p { color: var(--text-2); }

.card-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
  color: var(--text);
}

/* ---------- Process ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 20px;
  list-style: none;
}
.step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.step-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: var(--coral);
}
.step p { color: var(--text-2); }

/* ---------- Audience ---------- */
.audience-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 20px 48px;
}
.audience-group h3 { margin-bottom: 16px; }

.notch-list { list-style: none; }
.notch-list li {
  position: relative;
  padding: 12px 0 12px 28px;
  border-bottom: 1px solid var(--hair);
}
.notch-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(12px + .8em - 3px);
  width: 14px;
  height: 6px;
  background: var(--coral);
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}

/* ---------- Work ---------- */
.work-note {
  margin-top: 16px;
  padding: 10px 14px;
  border-left: 3px solid var(--coral);
  background: var(--surface);
  font-size: .9375rem;
  color: var(--text);
}
.case-card { position: relative; }
.badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 10px;
  border: 1px solid var(--hair);
  border-radius: 2px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
}
/* Placeholder status tag: dashed so it reads as a note to the editor, not part of the design. */
.badge-placeholder { border: 1px dashed var(--text-2); }
.badge::before {
  content: "";
  width: 14px;
  height: 6px;
  background: var(--coral);
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}
.case-sector { font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.3125rem); }
.case-channels { font-size: .9375rem; }
.case-value {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.625rem);
  line-height: 1.1;
  color: var(--text) !important;
}
.case-metric { font-weight: 500; color: var(--text) !important; }
.case-body { padding-top: 12px; border-top: 1px solid var(--hair); }

/* ---------- Testimonials (#reviews) ----------
   Its own band so it separates from Work and About: white in light mode (cards on paper),
   the darker navy band in dark mode. */
.reviews {
  background: #FFFFFF;
  border-block: 1px solid var(--hair);
}
.reviews .card { background: var(--bg); }
[data-theme="dark"] .reviews { background: var(--band); }
[data-theme="dark"] .reviews .card { background: var(--surface); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .reviews { background: var(--band); }
  :root:not([data-theme]) .reviews .card { background: var(--surface); }
}
.section-note { margin-top: 12px; font-size: .9375rem; color: var(--text-2); max-width: 62ch; }
.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 20px;
}
@media (min-width: 1024px) {
  .quote-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.quote-card { margin: 0; gap: 8px; }
.quote-mark {
  display: block;
  height: 40px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--coral);
  user-select: none;
}
.quote { margin: 0 0 8px; }
.card .quote p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
}
@media (min-width: 768px) { .card .quote p { font-size: 1.125rem; } }
.quote-by {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
}
.quote-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1C2E45;
  border: 1px solid var(--hair);
  --la: #F04B2C;
}
.quote-avatar svg { width: 22px; height: 22px; }
.quote-person { display: flex; flex-direction: column; min-width: 0; }
.quote-who { font-family: var(--font-display); font-weight: 600; line-height: 1.35; }
.quote-place { font-size: .9375rem; line-height: 1.4; color: var(--text-2); }

/* Review deck (JS only; without JS the grid above stays).
   All cards share one grid cell, so the deck is as tall as the tallest card. site.js sets
   data-pos on each card: 0 = top, 1 and 2 = visible layers behind, back = hidden. */
.reviews { overflow: hidden; }
html.js .reviews-layout { display: grid; gap: 8px; }
@media (min-width: 1024px) {
  html.js .reviews-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 64px; align-items: center; }
}
html.js .deck { width: min(100%, 560px); margin-inline: auto; }
html.js .deck-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: 8px 32px;
  outline: none;
}
/* A dealt pile: the top card sits straight, the two behind it tilt left and right so their
   edges show, and the rest hide under the third. Only the top card shows its words.
   Poses for data-pos 0 and 1 are repeated in site.js (POSE_TOP, POSE_NEXT); keep them in step.
   Motion is a spring (about 8% overshoot); the cubic-bezier line is the fallback for browsers
   without linear() easing. */
html.js .deck-stage > .quote-card {
  grid-area: 1 / 1;
  transform-origin: 50% 60%;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
  transition: transform .6s linear(0, 0.045, 0.157, 0.303, 0.461, 0.612, 0.746, 0.858, 0.945, 1.008, 1.049, 1.073, 1.083, 1.082, 1.075, 1.063, 1.051, 1.038, 1.026, 1.016, 1.007, 1.001, 0.997, 0.995, 0.993, 0.993, 0.993, 0.994, 0.995, 0.996, 1), box-shadow .3s ease;
  box-shadow: 0 18px 36px -24px rgba(28, 46, 69, .5);
}
html.js .deck-stage > .quote-card > * { transition: opacity .25s ease; }
html.js .deck-stage > .quote-card[data-pos="0"] { z-index: 4; }
html.js .deck-stage > .quote-card[data-pos="1"] { z-index: 3; transform: translate(-12px, 8px) rotate(-6deg) scale(.94); }
html.js .deck-stage > .quote-card[data-pos="2"] { z-index: 2; transform: translate(12px, 16px) rotate(5deg) scale(.9); }
html.js .deck-stage > .quote-card[data-pos="back"] { z-index: 1; transform: translate(12px, 16px) rotate(5deg) scale(.9); box-shadow: none; }
html.js .deck-stage > .quote-card:not([data-pos="0"]) > * { opacity: var(--reveal, 0); }
html.js .deck-stage > .quote-card.is-pressed { transform: scale(.97); transition-duration: .2s; }
html.js .deck-stage > .quote-card.is-dragging { cursor: grabbing; transition: none; }
html.js .deck-stage > .quote-card.is-dragging > * { transition: none; }
html.js .deck-stage > .quote-card.is-flying { z-index: 5; transition: transform .28s cubic-bezier(.2, .7, .3, 1); }
html.js .deck-stage > .quote-card.is-flying > * { opacity: 1; }
html.js .deck-stage > .quote-card.no-anim { transition: none; }
.deck-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 4px; }
.deck-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--text);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.deck-btn:hover { background: var(--text); color: var(--bg); }
.deck-icon { width: 20px; height: 20px; }
.deck-icon-prev { transform: rotate(180deg); }
.deck-count { min-width: 6ch; text-align: center; font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.deck-hint { margin-top: 8px; text-align: center; font-size: .875rem; color: var(--text-2); }

/* ---------- About ---------- */
.about-grid {
  display: grid;
  gap: 40px;
}
@media (min-width: 960px) {
  .about-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 72px; align-items: start; }
}
.about-copy .section-head { margin-bottom: 24px; }
.about-body { max-width: 62ch; color: var(--text-2); }
.about-body + .about-body { margin-top: 16px; }

.points { list-style: none; display: grid; gap: 16px; }
.point {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
}
.point h3 { margin-bottom: 4px; }
.point p { color: var(--text-2); }
.point-icon { flex: 0 0 40px; width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: var(--chip); color: var(--text); }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: 8px; }
@media (min-width: 960px) {
  .faq-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
}
.faq-list { border-top: 1px solid var(--hair); }
.faq-item { border-bottom: 1px solid var(--hair); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { min-width: 0; }
.faq-icon {
  position: relative;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 2px;
  background: var(--text);
  transition: transform .2s ease;
}
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: rotate(0deg); }
.faq-a { padding: 0 0 20px; color: var(--text-2); max-width: 64ch; }

/* ---------- Contact ----------
   Full-bleed navy brand panel with a stack of large pill buttons. Tokens are re-scoped so shared
   parts (overline, the Line, the Loop ring) switch to their on-dark look. */
.contact {
  --bg: #1C2E45;
  --surface: #FFFFFF;
  --text: #FFFFFF;
  --text-2: rgba(255, 255, 255, .78);
  --hair: rgba(255, 255, 255, .16);
  --rule: rgba(255, 255, 255, .6);
  --ring: #FFFFFF;
  --focus: var(--coral);
  position: relative;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}
[data-theme="dark"] .contact { --bg: #15233A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .contact { --bg: #15233A; }
}
.contact :focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

.contact-ring {
  width: 520px;
  max-width: none;
  aspect-ratio: 1;
  height: auto;
  right: -180px;
  bottom: -200px;
}
.contact-grid { position: relative; display: grid; gap: 8px; }
.contact-stack { display: grid; gap: 12px; width: 100%; min-width: 0; }
@media (min-width: 960px) {
  .contact-grid { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: 64px; align-items: start; }
  .contact-stack { max-width: 460px; justify-self: end; }
}

html.js .no-js-only { display: none !important; }

/* Pill buttons */
.pill {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  margin: 0;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.contact h3.pill { font-size: 1.125rem; line-height: 1.3; }
.pill-icon { flex: 0 0 26px; width: 26px; height: 26px; }
.pill-icon-sm { flex-basis: 20px; width: 20px; height: 20px; }
.pill-label { min-width: 0; }
.pill-end { flex: 0 0 22px; width: 22px; height: 22px; margin-left: auto; }

/* White on coral is AA only for large text, so the booking label is 19px bold. */
.pill-book { background: var(--coral); color: #FFFFFF; font-size: 1.1875rem; font-weight: 700; }
.pill-book:hover { background: var(--coral-strong); }

/* LINE green with navy text (white text on this green fails contrast). The logo stays white,
   LINE's official form: a white bubble with the green letters showing through. */
.pill-line { background: #06C755; color: #1C2E45; }
.pill-line .pill-icon { color: #FFFFFF; }
.pill-line:hover { background: #2DD472; }
.pill-static { cursor: default; }
.pill-static:hover { background: #06C755; }
.pill-chevron { transition: transform .22s ease; }
.pill-line[aria-expanded="true"] .pill-chevron { transform: rotate(180deg); }

.pill-fb { background: #FFFFFF; color: #1C2E45; }
.pill-fb:hover { background: #F6F4EE; }
.pill-fb .pill-icon { color: #0866FF; }
.pill-fb .pill-end { color: rgba(28, 46, 69, .7); }

.pill-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pill-out {
  justify-content: center;
  gap: 10px;
  padding-inline: 12px;
  border: 1.5px solid rgba(255, 255, 255, .55);
  background: transparent;
  color: #FFFFFF;
  font-size: 1.0625rem;
}
.pill-out:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .08); }

/* LINE team picker: grid rows 0fr -> 1fr. Without JS it is always open. Closed panels are
   also visibility: hidden so their links leave the tab order and the accessibility tree. */
.line-reveal { display: grid; grid-template-rows: 1fr; }
.line-reveal-inner { min-height: 0; overflow: hidden; margin: 0 -6px; }
html.js .line-reveal { transition: grid-template-rows .22s ease, visibility 0s linear .22s; }
html.js .line-reveal:not(.is-open) { grid-template-rows: 0fr; visibility: hidden; }
html.js .line-reveal.is-open { transition: grid-template-rows .22s ease, visibility 0s; }
.team-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 6px 6px; /* room for the focus ring inside the clipped panel */
}
.team-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: 12px 14px;
  border: 1.5px solid #06C755;
  border-radius: 14px;
  background: rgba(6, 199, 85, .14);
  color: #FFFFFF;
  text-decoration: none;
  transition: background-color .2s ease;
}
.team-card:hover { background: rgba(6, 199, 85, .26); }
.contact .team-card:focus-visible { outline-offset: 2px; }
.team-label { font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.35; }
.team-sub { font-size: .875rem; line-height: 1.45; color: rgba(255, 255, 255, .8); }

/* Email and phone as selectable text with text-only copy buttons */
.contact-facts {
  display: grid;
  gap: 2px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.fact { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; min-height: 44px; }
.fact-icon { flex: 0 0 18px; width: 18px; height: 18px; color: rgba(255, 255, 255, .7); }
.fact-value {
  min-width: 0;
  font-size: .9375rem;
  color: rgba(255, 255, 255, .88);
  overflow-wrap: anywhere;
  user-select: text;
}
.fact-value.is-selected { outline: 2px solid var(--coral); outline-offset: 2px; }
.copy-btn {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: #FFFFFF;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
}
/* Both labels share one grid cell so the button keeps its width when the text swaps.
   The underline is a border because text-decoration does not reach inline-grid children. */
.copy-text { display: inline-grid; }
.copy-idle, .copy-done { grid-area: 1 / 1; justify-self: end; line-height: 1.35; border-bottom: 2px solid var(--coral); }
.copy-done { visibility: hidden; }
.copy-btn.is-done .copy-idle { visibility: hidden; }
.copy-btn.is-done .copy-done { visibility: visible; }
/* Very narrow phones: drop the small row icon so the address and its copy button share one line. */
@media (max-width: 359px) {
  .fact-icon { display: none; }
  .fact-value { font-size: .875rem; }
}

/* ---------- Footer ----------
   Darker than the contact panel above it in both themes. */
.site-footer {
  --bg: #15233A;
  --surface: #22364F;
  --text: #FFFFFF;
  --text-2: rgba(255, 255, 255, .72);
  --hair: rgba(255, 255, 255, .12);
  --focus: #FFFFFF;
  --ring: #FFFFFF;
  --lb: #FFFFFF;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  padding-top: clamp(40px, 5vw, 64px);
}
[data-theme="dark"] .site-footer { --bg: #0E1828; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .site-footer { --bg: #0E1828; }
}
.footer-ring {
  width: 420px;
  max-width: none;
  aspect-ratio: 1;
  height: auto;
  right: -170px;
  top: -150px;
  opacity: .08;
}
.footer-inner { position: relative; }

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
}
.footer-brand .wordmark { width: 167px; height: 26px; margin-bottom: 12px; }
.footer-tagline { max-width: 40ch; font-size: .9375rem; color: var(--text-2); }

.footer-social { display: flex; flex-wrap: wrap; gap: 10px; }
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.social-btn:hover { transform: translateY(-2px); }
.social-icon { width: 22px; height: 22px; }
.social-line { background: #06C755; color: #FFFFFF; }
.social-fb { background: #0866FF; color: #FFFFFF; }
.social-out { border: 1.5px solid rgba(255, 255, 255, .55); color: #FFFFFF; }
.social-out:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .08); }

.footer-nav { margin-top: 28px; }
.footer-nav-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0 24px; }
.footer-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-size: .9375rem;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
}
.footer-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 2px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.footer-link:hover { color: #FFFFFF; }
.footer-link:hover::after, .footer-link:focus-visible::after { transform: scaleX(1); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 20px;
  padding: 16px 0 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.copyright { font-size: .875rem; color: var(--text-2); }
.footer-legal { display: grid; gap: 4px; }
.photo-credit { font-size: .8125rem; color: var(--text-2); }
.photo-credit a { color: inherit; }
html[lang="th"] .photo-tag,
html[lang="th"] .photo-credit { font-size: max(14px, .875rem); }
.footer-bottom-end { display: flex; align-items: center; gap: 12px; }

/* Language switcher as a segmented pill (same links and semantics as the header switcher) */
.lang-seg {
  gap: 0;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  font-size: .875rem;
}
.lang-seg .lang-sep { display: none; }
.lang-seg .lang-link {
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  color: #FFFFFF;
}
.lang-seg .lang-link:hover { background: rgba(255, 255, 255, .1); }
.lang-seg .lang-link[aria-current="true"] { background: #FFFFFF; color: #1C2E45; }
.lang-seg .lang-link[aria-current="true"]::after { display: none; }

.back-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  color: #FFFFFF;
  text-decoration: none;
}
.back-top:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .08); }
.back-top-icon { width: 20px; height: 20px; transform: rotate(-90deg); }

/* ---------- Motion (short and simple, none when reduced) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .mobile-menu:not([hidden]) { animation: sx-fade .2s ease-out both; }
}
@keyframes sx-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes sx-fade {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Entrance motion ----------
   Only under html.js-motion (set by the head script when JS runs and reduced motion is off)
   and only when the media query agrees, so without JS, with reduced motion and in print the page
   is complete at rest. Every transition and animation is 450ms or less. */
@media (prefers-reduced-motion: no-preference) {
  /* Scroll reveal: site.js adds .is-revealed (and a --rv-delay stagger) as each item enters view. */
  html.js-motion :is(.section-head > *, .about-body, .card-grid > li, .steps > li, .audience-group, .case-grid > li, .deck, .points > li, .faq-item, .contact-stack, .footer-top, .footer-nav, .footer-bottom, .stats, .platform-list > li, .about-photo, .contact-photo, .mosaic > figure, .process-photo):not(.is-revealed) {
    opacity: 0;
    transform: translateY(16px);
  }
  html.js-motion .is-revealed {
    transition: opacity .45s cubic-bezier(.22, 1, .36, 1) var(--rv-delay, 0ms), transform .45s cubic-bezier(.22, 1, .36, 1) var(--rv-delay, 0ms);
  }
  html.js-motion .is-revealed.rv-instant { transition: none; }

  /* Hero intro: overline, headline (per phrase in Thai), lede, buttons, then the report card. */
  html.js-motion .hero-copy > .overline,
  html.js-motion .hero h1,
  html.js-motion .hero-lede,
  html.js-motion .cta-row,
  html.js-motion .hero-visual .report { animation: sx-rise .42s cubic-bezier(.22, 1, .36, 1) backwards; }
  html.js-motion .hero h1 { animation-delay: 80ms; }
  html.js-motion[lang="th"] .hero h1 { animation: none; }
  html.js-motion[lang="th"] .hero h1 .nb { animation: sx-rise .42s cubic-bezier(.22, 1, .36, 1) backwards; }
  html.js-motion[lang="th"] .hero h1 .nb:nth-of-type(1) { animation-delay: 80ms; }
  html.js-motion[lang="th"] .hero h1 .nb:nth-of-type(2) { animation-delay: 160ms; }
  html.js-motion[lang="th"] .hero h1 .nb:nth-of-type(3) { animation-delay: 240ms; }
  html.js-motion[lang="th"] .hero h1 .nb:nth-of-type(n+4) { animation-delay: 320ms; }
  html.js-motion .hero-lede { animation-delay: 300ms; }
  html.js-motion[lang="th"] .hero-lede { animation-delay: 400ms; }
  html.js-motion .cta-row { animation-delay: 380ms; }
  html.js-motion[lang="th"] .cta-row { animation-delay: 480ms; }
  html.js-motion .hero-visual .report { animation-delay: 460ms; }
  html.js-motion[lang="th"] .hero-visual .report { animation-delay: 560ms; }
  /* Bars grow from the baseline, the coral bar last. */
  html.js-motion .report-chart .bar {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: sx-grow .45s cubic-bezier(.22, 1, .36, 1) both;
  }
  html.js-motion .report-chart .bar:nth-of-type(1) { animation-delay: 560ms; }
  html.js-motion .report-chart .bar:nth-of-type(2) { animation-delay: 620ms; }
  html.js-motion .report-chart .bar:nth-of-type(3) { animation-delay: 680ms; }
  html.js-motion .report-chart .bar:nth-of-type(4) { animation-delay: 740ms; }
  html.js-motion .report-chart .bar:nth-of-type(5) { animation-delay: 800ms; }
  html.js-motion .report-chart .bar:nth-of-type(6) { animation-delay: 860ms; }

  /* Photos rise and settle from a slightly smaller size. */
  html.js-motion .photo:is(.about-photo, .contact-photo):not(.is-revealed),
  html.js-motion .mosaic > figure:not(.is-revealed),
  html.js-motion section .process-photo:not(.is-revealed) { transform: translateY(16px) scale(.96); }
  /* The Line draws in from its coral notch once its heading is in view. */
  html.js-motion .the-line::before {
    transform-origin: left;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1) calc(var(--rv-delay, 0ms) + 120ms);
  }
  html.js-motion .the-line:not(.is-revealed)::before { transform: scaleX(0); }

  /* Scroll-linked effects driven by site.js: ring drift, header shadow, reading progress. */
  html.js-motion .loop-ring { translate: 0 var(--py, 0px); }
  .site-header { transition: box-shadow .2s ease; }
  .site-header.is-scrolled { box-shadow: 0 8px 24px -16px rgba(28, 46, 69, .35); }
  html.js-motion .site-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: var(--coral);
    transform-origin: left;
    transform: scaleX(var(--progress, 0));
  }
}
@keyframes sx-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@media print {
  html.js-motion :is(.section-head > *, .about-body, .card-grid > li, .steps > li, .audience-group, .case-grid > li, .deck, .points > li, .faq-item, .contact-stack, .footer-top, .footer-nav, .footer-bottom, .stats, .platform-list > li, .about-photo, .contact-photo, .mosaic > figure, .process-photo),
  html.js-motion :is(.hero-copy > .overline, .hero h1, .hero h1 .nb, .hero-lede, .cta-row, .report, .report-chart .bar) {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ---------- Thai typography ----------
   Thai needs taller lines for stacked vowels and tone marks, no tracking and no uppercase.
   Minimums at 375px: h1 30px, h2 26px, h3 19px, body 16px, small 14px. */
html[lang="th"] * { letter-spacing: 0; }

html[lang="th"] body { line-height: 1.75; }

html[lang="th"] h1 {
  font-size: clamp(1.875rem, 1.3rem + 2.9vw, 3.25rem);
  line-height: 1.35;
}
html[lang="th"] h2 {
  font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.4375rem);
  line-height: 1.4;
}
html[lang="th"] h3 {
  font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.3125rem);
  line-height: 1.45;
}
html[lang="th"] h4 { line-height: 1.45; }

html[lang="th"] .overline {
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
}

html[lang="th"] .lede { line-height: 1.75; }

html[lang="th"] .btn { line-height: 1.45; padding-block: 10px; }

html[lang="th"] .report-head,
html[lang="th"] .stat-label,
html[lang="th"] .case-channels,
html[lang="th"] .badge,
html[lang="th"] .team-sub,
html[lang="th"] .copyright,
html[lang="th"] .work-note,
html[lang="th"] .section-note,
html[lang="th"] .report-note {
  font-size: max(14px, .875rem);
  line-height: 1.65;
}
html[lang="th"] .stat-label,
html[lang="th"] .work-note,
html[lang="th"] .section-note,
html[lang="th"] .report-note { font-size: .9375rem; }
html[lang="th"] .card .quote p { line-height: 1.75; }
html[lang="th"] .quote-who,
html[lang="th"] .quote-place { line-height: 1.5; }

html[lang="th"] .faq-item summary { line-height: 1.55; }
html[lang="th"] .contact .pill { line-height: 1.45; }
html[lang="th"] .team-label { line-height: 1.5; }
html[lang="th"] .footer-link { line-height: 1.5; }
html[lang="th"] .menu-link,
html[lang="th"] .nav-link { line-height: 1.5; }
html[lang="th"] .report-to,
html[lang="th"] .stat-value,
html[lang="th"] .case-value { line-height: 1.25; }

/* Give Thai sections extra room rather than shrinking text. */
html[lang="th"] { --section-y: clamp(64px, 9vw, 128px); }
html[lang="th"] .card { padding-block: 32px; }
html[lang="th"] .section-head .lede { margin-top: 20px; }

/* Other-language snippets (for example the TH link on the English page) */
:lang(th) { letter-spacing: 0; }