@charset "utf-8";
/* ==================================================================
   TAONGERN LAW FIRM — main.css
   Palette sampled from the supplied hero artwork.
   Display: Cormorant Garamond · Body: Inter · Thai: IBM Plex Sans Thai
   ================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */
:root {
  /* Colour */
  --navy-950: #001127;
  --navy-900: #04203d;
  --navy-800: #0a2c4f;
  --navy-600: #1c4671;
  --ivory:    #fbf8f2;
  --paper:    #ffffff;
  --sand:     #f2ece0;
  --rule:     #ded5c5;
  --rule-soft:#ebe4d7;
  --ink:      #262b31;
  --ink-soft: #5b6169;
  --ink-faint:#8b9099;
  --gold:     #d5a14b;
  --gold-deep:#a8762c;
  --gold-pale:#f0e0c4;

  /* Type */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-thai: "IBM Plex Sans Thai", "Noto Sans Thai", sans-serif;
  --font-zh: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  --font-zh-display: "Noto Serif SC", "Songti SC", "SimSun", serif;

  --fs-eyebrow: 0.6875rem;
  --fs-micro:   0.75rem;
  --fs-small:   0.875rem;
  --fs-body:    1rem;
  --fs-lead:    clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
  --fs-h4:      clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --fs-h3:      clamp(1.5rem, 1.28rem + 1vw, 2.125rem);
  --fs-h2:      clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
  --fs-h1:      clamp(2.5rem, 1.7rem + 3.4vw, 5rem);
  --fs-index:   clamp(1.75rem, 1.1rem + 2.9vw, 4rem);

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --wrap: 1280px;
  --wrap-narrow: 760px;
  --section-y: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --block-y: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);

  --header-h: 76px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.55s;
}

@media (max-width: 900px) { :root { --header-h: 64px; } }

/* ---------------------------------------------------------------- 2. Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
html[lang="th"] body { font-family: var(--font-thai); line-height: 1.85; }
html[lang="zh-Hans"] body { font-family: var(--font-zh); line-height: 1.9; letter-spacing: 0.01em; }

img, svg, picture, video { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, p, figure, blockquote { margin: 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

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

.skip-link {
  position: absolute; left: 0; top: 0; z-index: 999;
  transform: translateY(-110%);
  background: var(--navy-950); color: var(--ivory);
  padding: 0.75rem 1.25rem; font-size: var(--fs-small);
}
.skip-link:focus { transform: translateY(0); }

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

/* ---------------------------------------------------------------- 3. Type */
.display, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: var(--navy-900);
}
html[lang="th"] .display,
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3 {
  font-family: var(--font-thai);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
}
html[lang="zh-Hans"] .display,
html[lang="zh-Hans"] h1, html[lang="zh-Hans"] h2, html[lang="zh-Hans"] h3 {
  font-family: var(--font-zh-display);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.005em;
}
/* CJK sets tighter than Latin at display sizes */
html[lang="zh-Hans"] h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.75rem); }
html[lang="zh-Hans"] h2 { font-size: clamp(1.625rem, 1.25rem + 1.7vw, 2.75rem); }
html[lang="zh-Hans"] .index__title { font-family: var(--font-zh-display); font-size: clamp(1.25rem, 0.95rem + 1.4vw, 2.125rem); line-height: 1.3; font-weight: 600; }
html[lang="zh-Hans"] .stats__fig { font-family: var(--font-zh-display); }
html[lang="zh-Hans"] .lawyer-card__name { font-family: var(--font-zh-display); font-weight: 600; }
html[lang="zh-Hans"] .logo__name { font-family: var(--font-display); }

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 {
  font-family: var(--font-body); font-size: var(--fs-h4);
  font-weight: 600; line-height: 1.35; letter-spacing: -0.008em;
  color: var(--navy-900);
}
html[lang="th"] h4 { font-family: var(--font-thai); }
html[lang="zh-Hans"] h4 { font-family: var(--font-zh); font-weight: 600; }

.gold-em { color: var(--gold-deep); }
.on-dark .gold-em, .footer .gold-em { color: var(--gold); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-deep);
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: currentColor; flex: none;
}
.on-dark .eyebrow { color: var(--gold); }

.lead {
  font-size: var(--fs-lead); line-height: 1.6;
  color: var(--ink-soft); font-weight: 400;
}
.on-dark .lead { color: rgba(251, 248, 242, 0.74); }

.prose p { margin-bottom: 1.15em; color: var(--ink-soft); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- 4. Layout */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: var(--wrap-narrow); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--block-y); }
.section--dark { background: var(--navy-950); color: rgba(251,248,242,0.86); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--ivory); }
.section--sand { background: var(--sand); }
.section--paper { background: var(--paper); }
.section + .section--ivory { border-top: 1px solid var(--rule-soft); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Editorial two-column: sticky heading + content */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.split > * { min-width: 0; }
.split__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split__aside { position: static; }
}

/* Measure caps sit on the ELEMENTS, not on the container: a 62ch container cap
   is computed at the container's 1rem font (~500px), which squeezed display
   headings into a narrow column in every language. Heading caps are written in
   em so the line length scales with the type size and behaves the same for
   Latin, Thai and Chinese; body/lead text keeps a ch cap, which is the right
   unit for reading measure. */
.section-head { max-width: none; }
.section-head h2 { max-width: 19em; }
.section-head .lead { max-width: 62ch; }
.section-head .eyebrow { margin-bottom: 1.25rem; }
.section-head h2 + .lead { margin-top: 1.25rem; }

/* ---------------------------------------------------------------- 5. Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  font-family: var(--font-body);
  font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.03em;
  padding: 0.9375rem 1.75rem;
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform 0.25s var(--ease);
  will-change: transform;
}
html[lang="th"] .btn { font-family: var(--font-thai); }
html[lang="zh-Hans"] .btn { font-family: var(--font-zh); letter-spacing: 0.04em; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--navy-900); color: var(--ivory); }
.btn--primary:hover { background: var(--navy-800); }
.btn--gold { background: var(--gold); color: var(--navy-950); font-weight: 600; }
.btn--gold:hover { background: var(--gold-deep); color: var(--ivory); }
.btn--ghost { border-color: var(--rule); color: var(--navy-900); }
.btn--ghost:hover { border-color: var(--navy-900); background: var(--navy-900); color: var(--ivory); }
.on-dark .btn--ghost, .cta-band .btn--ghost, .drawer .btn--ghost { border-color: rgba(213,161,75,0.5); color: var(--ivory); }
.on-dark .btn--ghost:hover, .cta-band .btn--ghost:hover, .drawer .btn--ghost:hover { border-color: var(--gold); background: var(--gold); color: var(--navy-950); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.875rem; }

/* Text link with sweeping rule */
.link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--fs-small); font-weight: 500;
  color: var(--navy-900); position: relative;
  padding-bottom: 3px;
}
.link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.link:hover::after { transform: scaleX(1); }
.link .arw { transition: transform var(--dur) var(--ease); }
.link:hover .arw { transform: translateX(4px); }
.on-dark .link { color: var(--ivory); }

/* ---------------------------------------------------------------- 6. Header */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.header__inner {
  height: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
/* Full-bleed header: the inset matches the 3.6% margin of the hero artwork's own logo */
.header .wrap, .mega .wrap { max-width: none; padding-inline: max(1.25rem, 3.6vw); }
.header--solid,
.header.is-stuck {
  background: rgba(251, 248, 242, 0.92);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--rule-soft);
}
.header--over { color: var(--ivory); }
.header--over.is-stuck { color: var(--ink); }

/* The hero artwork already carries the crest — reveal the header logo only on scroll */
.header--hidelogo .logo {
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
}
.header--hidelogo.is-stuck .logo { opacity: 1; visibility: visible; transform: none; }

/* Logo */
.logo { display: flex; align-items: center; gap: 0.75rem; flex: none; }
.logo__mark { width: 38px; height: 38px; flex: none; }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__name {
  font-family: var(--font-display); font-size: 1.3125rem; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: currentColor;
}
.logo__sub {
  font-size: 0.5625rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold-deep); margin-top: 4px; font-weight: 600;
}
.header--over:not(.is-stuck) .logo__sub { color: var(--gold); }
/* On the homepage top state the header sits over the artwork's own navy panel,
   which is where the old (pre-6 Aug) artwork carried a large crest. The header
   logo grows to fill that role and shrinks back the moment the header sticks,
   so interior pages and the scrolled state are untouched. The mark is allowed
   to overflow the header band — the band is transparent there. */
@media (min-width: 1101px) {
  /* The band keeps its normal 76px height so the nav, language switcher and
     CTA stay exactly where they sit on every other page. Growing the band
     (an earlier attempt) re-centred that whole row and dragged the nav down.
     Only the logo moves: it hangs DOWNWARD out of the transparent band, which
     also solves the crest being clipped above y=0. */
  .header--over:not(.is-stuck) .logo {
    gap: 1.1rem;
    transform: translateY(clamp(1.25rem, 2.6vw, 3rem));
    transform-origin: left center;
  }
  .header--over:not(.is-stuck) .logo__mark {
    width: clamp(64px, 5.4vw, 96px); height: clamp(64px, 5.4vw, 96px);
    transition: width var(--dur) var(--ease), height var(--dur) var(--ease);
  }
  .header--over:not(.is-stuck) .logo__name {
    font-size: clamp(1.4375rem, 1.7vw, 2.25rem); letter-spacing: 0.13em;
  }
  .header--over:not(.is-stuck) .logo__sub {
    font-size: clamp(0.625rem, 0.5vw, 0.8125rem); letter-spacing: 0.34em; margin-top: 7px;
  }
  /* Copy clears the taller band in this state. */
  /* Sits well below the dropped crest; the artwork's navy panel is tall
     enough that the block reads as vertically weighted rather than top-hung. */
  .hero__copy { top: calc(var(--header-h) + clamp(7rem, 17vh, 15rem)); }
}

@media (max-width: 480px) { .logo__name { font-size: 1.0625rem; } .logo__mark { width: 32px; height: 32px; } }

/* Desktop nav */
.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.25rem); margin-left: auto; }
.nav__link {
  font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.01em;
  position: relative; padding: 0.5rem 0; color: currentColor; white-space: nowrap;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after,
.nav__item.is-open .nav__link::after { transform: scaleX(1); }

.header__utils { display: flex; align-items: center; gap: 1.25rem; margin-left: clamp(1.5rem, 3vw, 2.75rem); }
.langswitch { display: flex; align-items: center; gap: 0.3125rem; font-size: var(--fs-micro); letter-spacing: 0.06em; white-space: nowrap; }
.langswitch a { opacity: 0.5; font-weight: 500; transition: opacity 0.3s; }
.langswitch a:hover { opacity: 1; }
.langswitch a[aria-current="true"] { opacity: 1; color: var(--gold-deep); font-weight: 600; }
.header--over:not(.is-stuck) .langswitch a[aria-current="true"] { color: var(--gold); }
.langswitch span { opacity: 0.3; }

@media (max-width: 1100px) {
  .nav, .header__utils .btn { display: none; }
  /* nav is gone, so the utils group no longer needs separating from it */
  .header__utils { margin-left: 0; gap: 0.75rem; }
}
@media (max-width: 420px) {
  .header .wrap { padding-inline: 1rem; }
  .header__utils { gap: 0.5rem; }
  .langswitch { gap: 0.25rem; font-size: 0.6875rem; letter-spacing: 0.02em; }
  .logo { gap: 0.5rem; }
}

/* Mega menu */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  box-shadow: 0 24px 48px -28px rgba(0, 17, 39, 0.28);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  color: var(--ink);
}
.nav__item.is-open .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega__inner { display: grid; gap: 2.5rem; padding-block: 2.75rem 3rem; }
.mega__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.mega__cols--2 { grid-template-columns: repeat(2, minmax(0, 22rem)); }
.mega__group-title {
  font-family: var(--font-display); font-size: 1.1875rem; color: var(--navy-900);
  padding-bottom: 0.75rem; margin-bottom: 0.875rem; border-bottom: 1px solid var(--rule-soft);
  display: block;
}
html[lang="th"] .mega__group-title { font-family: var(--font-thai); font-size: 1rem; font-weight: 600; }
html[lang="zh-Hans"] .mega__group-title { font-family: var(--font-zh-display); font-size: 1.0625rem; font-weight: 600; }
.mega__list li + li { margin-top: 0.4375rem; }
.mega__list a {
  font-size: var(--fs-small); color: var(--ink-soft);
  transition: color 0.25s; display: inline-block;
}
.mega__list a:hover { color: var(--gold-deep); }
.mega__foot {
  display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: center;
  padding-top: 1.75rem; border-top: 1px solid var(--rule-soft);
}
@media (max-width: 1100px) { .mega { display: none; } }

/* Mobile menu */
.burger {
  display: none; width: 44px; height: 44px; margin-right: -10px;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.burger span { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform 0.3s var(--ease), opacity 0.2s; }
body.menu-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (max-width: 1100px) { .burger { display: flex; } }

.drawer {
  position: fixed; inset: 0; z-index: 95;
  background: var(--navy-950); color: var(--ivory);
  padding: calc(var(--header-h) + 1.5rem) 0 7rem;
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease), visibility 0.35s;
}
body.menu-open .drawer { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }
.drawer__item { border-bottom: 1px solid rgba(213,161,75,0.16); }
.drawer__top {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.125rem 0; text-align: left;
  font-family: var(--font-display); font-size: 1.5rem; color: var(--ivory);
}
html[lang="th"] .drawer__top { font-family: var(--font-thai); font-size: 1.125rem; font-weight: 500; }
html[lang="zh-Hans"] .drawer__top { font-family: var(--font-zh-display); font-size: 1.25rem; font-weight: 600; }
.drawer__top .plus { position: relative; width: 14px; height: 14px; flex: none; opacity: 0.7; }
.drawer__top .plus::before, .drawer__top .plus::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1px; background: var(--gold);
}
.drawer__top .plus::after { transform: rotate(90deg); transition: transform 0.3s var(--ease); }
.drawer__item.is-open .plus::after { transform: rotate(0deg); }
.drawer__panel { display: none; padding-bottom: 1.25rem; }
.drawer__item.is-open .drawer__panel { display: block; }
.drawer__panel h5 {
  font-size: var(--fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin: 1.125rem 0 0.625rem; font-weight: 600;
}
.drawer__panel a { display: block; padding: 0.375rem 0; font-size: 0.9375rem; color: rgba(251,248,242,0.72); }
.drawer__panel a:hover { color: var(--gold); }
.drawer__cta { margin-top: 2rem; display: grid; gap: 0.75rem; }
.drawer__lang { margin-top: 2rem; display: flex; gap: 0.75rem; font-size: var(--fs-micro); letter-spacing: 0.1em; }
.drawer__lang a { opacity: 0.55; } .drawer__lang a[aria-current="true"] { opacity: 1; color: var(--gold); }

/* ---------------------------------------------------------------- 7. Hero (home) */
/* The artwork runs edge to edge. Its height is capped so the photo is never
   scaled past its natural size, which keeps cropping to a few pixels at the
   bottom; the icon row that was baked into the source image is rebuilt below
   in HTML so it is always crisp, always visible, and actually clickable. */
.hero { position: relative; background: var(--navy-950); }

.hero__photo {
  --arw: 1672; --arh: 941;
  position: relative; width: 100%; overflow: hidden;
  height: calc(100vw * var(--arh) / var(--arw));
  height: min(calc(100svh - var(--strip-h)), calc(100vw * var(--arh) / var(--arw)));
}
.hero__photo > picture, .hero__art {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}

/* Headline block. The 6 Aug 2026 artwork carries no baked-in text, so every
   word here is real HTML: translatable, selectable, crawlable, and it scales
   with the viewport instead of shrinking with the photo. It sits in the navy
   panel the artwork leaves clear on the left (desktop) / top (portrait). */
.hero__copy {
  position: absolute; z-index: 2;
  /* Anchored below the enlarged logo rather than centred, so the block fills
     the navy panel top-to-bottom the way the pre-6 Aug artwork did. */
  left: 3.6%; top: calc(var(--header-h) + clamp(4rem, 12vh, 11rem));
  /* The artwork's uniform navy panel runs to x 42%; the copy column stops
     just short of it so no line ever crosses onto the bookshelf. */
  width: min(38%, 36rem);
  color: var(--ivory);
}
.hero__eyebrow {
  font-size: clamp(0.6875rem, 0.5vw + 0.36rem, 0.9375rem);
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  color: var(--gold); margin: 0 0 clamp(0.75rem, 1.4vh, 1.25rem);
}
/* IMPORTANT: the global `h1, h2, h3 { color: var(--navy-900) }` rule wins over
   the colour inherited from .hero__copy, which is what made the headline render
   dark navy on a navy panel. Every line below therefore sets its own colour.
   Palette is deliberately gold/white alternating only — no navy text on navy. */
.hero__title { margin: 0; font-weight: 400; color: var(--ivory); }
.hero__title-lead {
  display: block; font-family: var(--font-display);
  font-size: clamp(1.875rem, min(3.9vw, 8vh), 4.75rem);
  line-height: 1.06; letter-spacing: 0.005em;
  color: var(--ivory);
}
.hero__title-sub {
  display: block; margin-top: clamp(0.5rem, 1.2vh, 1rem);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, min(2.05vw, 4.2vh), 2.625rem);
  line-height: 1.22; font-weight: 400;
  color: var(--gold);
}
.hero__lede {
  margin: clamp(1.125rem, 2.6vh, 2rem) 0 0;
  font-size: clamp(0.875rem, min(0.78vw + 0.42rem, 2.3vh), 1.25rem);
  line-height: 1.6; color: rgba(251, 248, 242, 0.88);
  max-width: 34rem;
}
/* Thai sets much taller than Latin at the same font-size — the glyphs carry
   ascenders and descenders (วรรณยุกต์ / สระ) that need extra leading, and the
   headline wraps to more lines because Thai words are longer. At the shared
   sizes the block overflowed the artwork and pushed the buttons off the photo.
   Thai therefore gets its own, smaller scale and starts higher up. */
html[lang="th"] .hero__title-lead {
  font-size: clamp(1.5rem, min(2.85vw, 5.6vh), 3.375rem);
  line-height: 1.32;
}
html[lang="th"] .hero__title-sub {
  font-size: clamp(1rem, min(1.55vw, 3.1vh), 1.875rem);
  line-height: 1.5;
}
html[lang="th"] .hero__lede {
  font-size: clamp(0.8125rem, min(0.68vw + 0.38rem, 2vh), 1.0625rem);
  line-height: 1.7;
}
html[lang="th"] .hero__copy { top: calc(var(--header-h) + clamp(3.75rem, 11.5vh, 9.5rem)); }
@media (min-width: 1101px) {
  html[lang="th"] .hero__copy { top: calc(var(--header-h) + clamp(6rem, 15vh, 13rem)); }
}
html[lang="zh-Hans"] .hero__title-lead { letter-spacing: 0.04em; }
html[lang="zh-Hans"] .hero__title-sub { letter-spacing: 0.05em; }

/* Experience badge, restored from the pre-6 Aug artwork where it was baked into
   the image. As HTML it stays crisp, translates, and reads the years from the
   site config instead of being repainted whenever the number changes. */
.hero__badge {
  position: absolute; z-index: 2;
  /* Flush to the bottom-right corner of the artwork, as in the original
     design — bottom-anchored so a cropped photo can never float it up onto
     a face, and right-flush so it reads as part of the frame. */
  right: 0; bottom: 0;
  width: clamp(148px, 10.5vw, 200px);
  padding: clamp(1rem, 1.6vw, 1.75rem) clamp(0.75rem, 1vw, 1.125rem) clamp(1.125rem, 1.8vw, 1.875rem);
  border: 1px solid rgba(213, 161, 75, 0.5);
  border-right: 0; border-bottom: 0;
  border-top-left-radius: 4px;
  background: rgba(8, 22, 42, 0.66);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  text-align: center; color: var(--ivory);
}
.hero__badge-n {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.25rem, 3.2vw, 3.75rem); line-height: 0.92;
  letter-spacing: 0.01em; color: var(--gold);
}
.hero__badge-y {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.0625rem, 1.35vw, 1.5rem); line-height: 1.1;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
}
/* Hairline rules above and below the word, as in the original artwork */
.hero__badge-n::after,
.hero__badge-y::after {
  content: ''; display: block; width: 48%; height: 1px;
  margin: clamp(0.625rem, 1.2vh, 1rem) auto 0;
  background: rgba(213, 161, 75, 0.45);
}
.hero__badge-y { margin-top: clamp(0.625rem, 1.2vh, 1rem); }
.hero__badge-l {
  display: block; margin-top: clamp(0.625rem, 1.2vh, 1rem);
  font-size: clamp(0.5625rem, 0.48vw, 0.6875rem);
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.55;
  color: rgba(251, 248, 242, 0.9);
}
html[lang="th"] .hero__badge-y, html[lang="zh-Hans"] .hero__badge-y { letter-spacing: 0.04em; text-transform: none; }
html[lang="th"] .hero__badge-l, html[lang="zh-Hans"] .hero__badge-l {
  letter-spacing: 0.04em; text-transform: none; font-size: clamp(0.625rem, 0.52vw, 0.75rem);
}

.hero__cta {
  margin-top: clamp(1.125rem, 2.6vh, 2rem);
  display: flex; gap: clamp(0.5rem, 0.8vw, 0.875rem); flex-wrap: wrap;
}
.hero__cta .btn {
  font-size: clamp(0.6875rem, 0.4vw + 0.36rem, 0.8125rem);
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  padding: clamp(0.5rem, 1.1vh, 0.9375rem) clamp(0.9rem, 1.5vw, 1.85rem);
  white-space: nowrap;
}
.hero__cta .btn--ghost { border-color: rgba(213,161,75,0.75); color: var(--ivory); }
.hero__cta .btn--ghost:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-950); }

/* Practice-area rail — rebuilt from the artwork's icon row */
.hero {
  --strip-h: min(clamp(84px, 6.5vw, 132px), 15vh);
}
/* Nine hubs, nine columns. This was repeat(7) while the strip carried nine
   links, so two of them wrapped onto a second row that the fixed strip height
   then clipped. */
.hero__strip {
  height: var(--strip-h);
  border-top: 1px solid rgba(213,161,75,0.42);
  display: grid; grid-template-columns: repeat(9, 1fr);
  background: var(--navy-950);
}
.hero__strip a {
  display: grid; align-content: center; justify-items: center;
  gap: clamp(0.35rem, 0.7vh, 0.625rem);
  padding: 0.5rem clamp(0.25rem, 0.8vw, 1rem);
  text-align: center; color: var(--ivory);
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.hero__strip a + a { border-left: 1px solid rgba(213,161,75,0.22); }
.hero__strip a:hover { background: rgba(213,161,75,0.1); }
.hero__strip svg { color: var(--gold); width: clamp(20px, 1.4vw, 30px); height: auto; }
.hero__strip span {
  font-size: clamp(0.5rem, 0.34vw + 0.24rem, 0.6875rem);
  line-height: 1.35; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 500;
  color: rgba(251, 248, 242, 0.9);
}
html[lang="th"] .hero__strip span { letter-spacing: 0.02em; text-transform: none; }
html[lang="zh-Hans"] .hero__strip span { letter-spacing: 0.02em; text-transform: none; font-size: clamp(0.5625rem, 0.34vw + 0.28rem, 0.75rem); }

/* Buttons below the artwork on narrow screens */
.hero__cta-mobile { display: none; background: var(--navy-950); }
.hero__cta-mobile .wrap { padding-block: 1rem 1.125rem; display: grid; gap: 0.625rem; }
.hero__cta-mobile .btn { padding-block: 0.8125rem; }

/* Below ~1250px the navy panel is too narrow for a comfortable measure, so the
   copy widens and the lede tightens rather than wrapping into the portraits. */
@media (max-width: 1250px) {
  .hero__copy { width: min(42%, 30rem); top: calc(var(--header-h) + clamp(1.5rem, 5vh, 4rem)); }
  .hero__lede { font-size: clamp(0.8125rem, 0.5vw + 0.44rem, 0.9375rem); line-height: 1.55; }
}
@media (max-width: 1100px) {
  /* Three rows of three below this width; the strip height goes auto so nothing
     is ever clipped again, whatever the column count. */
  .hero__strip { grid-template-columns: repeat(3, 1fr); height: auto; }
  .hero { --strip-h: auto; }
  .hero__strip a:nth-child(3n+1) { border-left: 0; }
  .hero__strip a:nth-child(n+4) { border-top: 1px solid rgba(213,161,75,0.22); }
  .hero__photo { height: calc(100vw * var(--arh) / var(--arw)); }
  .hero__badge { display: none; }
}
@media (max-width: 900px) {
  /* Portrait artwork: the clear band is at the TOP, so the copy moves there and
     the buttons drop to their own bar under the photo. */
  .hero__copy {
    left: 5.5%; right: 5.5%; width: auto;
    top: calc(var(--header-h) + clamp(0.75rem, 2.5vw, 1.75rem)); transform: none;
  }
  .hero__cta { display: none; }
  .hero__cta-mobile { display: block; }
}
/* Portrait artwork on phones and on portrait tablets, where the landscape
   crop would render only ~380px tall and read as a letterbox strip. */
@media (max-width: 767px), (max-width: 900px) and (orientation: portrait) {
  .hero__photo { --arw: 941; --arh: 1672; }
}
@media (max-width: 767px) {
  .hero__strip { grid-template-columns: repeat(2, 1fr); }
  .hero__strip a { padding-block: 0.875rem; }
  .hero__strip a:nth-child(3n+1) { border-left: 1px solid rgba(213,161,75,0.22); }
  .hero__strip a:nth-child(n+3) { border-top: 1px solid rgba(213,161,75,0.22); }
  .hero__strip a:nth-child(odd) { border-left: 0; }
  .hero__strip a:nth-child(even) { border-left: 1px solid rgba(213,161,75,0.22); }
}
/* Tightest phones: the clear band above the portraits is ~300px, so the lede
   yields first — the headline and the practice rail carry the positioning. */
@media (max-width: 480px) {
  .hero__lede { display: none; }
  .hero__eyebrow { margin-bottom: 0.625rem; }
}

/* Page hero (interior) */
.pagehero { background: var(--navy-950); color: rgba(251,248,242,0.8); padding-block: calc(var(--header-h) + clamp(3rem, 6vw, 6rem)) clamp(3rem, 6vw, 6rem); position: relative; overflow: hidden; }
.pagehero::after {
  content: ""; position: absolute; right: -10%; top: -40%; width: 60vw; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(213,161,75,0.14), transparent 62%);
  pointer-events: none;
}
.pagehero h1 { color: var(--ivory); max-width: 15em; overflow-wrap: anywhere; }
.pagehero .lead { color: rgba(251,248,242,0.72); max-width: 58ch; margin-top: 1.5rem; }
.pagehero .eyebrow { color: var(--gold); margin-bottom: 1.5rem; }
.pagehero__grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: clamp(2rem,5vw,5rem); align-items: end; position: relative; z-index: 1; }
/* Only two pages pass an aside; everywhere else the second column was empty
   and the title was needlessly squeezed into 55% of the width. */
.pagehero__grid--single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .pagehero__grid { grid-template-columns: 1fr; } }

/* Breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: var(--fs-micro); color: var(--ink-faint); margin-bottom: 1.5rem; }
.crumbs a { color: inherit; } .crumbs a:hover { color: var(--gold-deep); }
.crumbs .sep { opacity: 0.5; }
.pagehero .crumbs { color: rgba(251,248,242,0.5); }
.pagehero .crumbs a:hover { color: var(--gold); }

/* ---------------------------------------------------------------- 8. Statement block */
.statement { text-align: left; }
.statement h2 { max-width: 19em; }
.statement__body { max-width: 46ch; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.statement__points { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.statement__point { padding: 1.75rem 1.75rem 1.75rem 0; border-bottom: 1px solid var(--rule); }
.statement__point:not(:nth-child(4n)) { border-right: 1px solid var(--rule); }
.statement__point:not(:nth-child(4n+1)) { padding-left: 1.75rem; }
.statement__point p { font-size: var(--fs-small); color: var(--ink-soft); margin: 0.5rem 0 0; }
@media (max-width: 1000px) {
  .statement__points { grid-template-columns: repeat(2, 1fr); }
  .statement__point { border-right: 0; padding-left: 0; }
  .statement__point:nth-child(odd) { border-right: 1px solid var(--rule); }
  .statement__point:nth-child(even) { padding-left: 1.75rem; }
}
@media (max-width: 700px) { .statement__points { grid-template-columns: 1fr; } .statement__point, .statement__point:nth-child(odd) { border-right: 0; } .statement__point:nth-child(even) { padding-left: 0; } }

/* ---------------------------------------------------------------- 9. Expertise index — SIGNATURE */
.index { border-top: 1px solid var(--rule); }
.index__row {
  display: block; position: relative;
  border-bottom: 1px solid var(--rule);
  padding: clamp(1.75rem, 3.2vw, 2.75rem) 0;
  transition: padding-left var(--dur) var(--ease);
  overflow: hidden;
}
.index__row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gold);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--dur) var(--ease);
}
.index__row:hover { padding-left: clamp(1rem, 2vw, 2rem); }
.index__row:hover::before { transform: scaleY(1); transform-origin: top; }
.index__grid {
  display: grid; grid-template-columns: 4.5rem minmax(0,1fr) minmax(0,0.85fr) 2.5rem;
  gap: clamp(1rem, 2.5vw, 2.5rem); align-items: baseline;
}
.index__num {
  font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: 0.12em; color: var(--gold-deep); padding-top: 0.55em;
}
.index__title {
  font-family: var(--font-display); font-size: var(--fs-index); line-height: 1.02;
  color: var(--navy-900); letter-spacing: -0.015em; transition: color var(--dur) var(--ease);
}
html[lang="th"] .index__title { font-family: var(--font-thai); font-size: clamp(1.25rem,0.9rem+1.4vw,2rem); line-height: 1.3; font-weight: 500; }
.index__row:hover .index__title { color: var(--gold-deep); }
.index__desc { font-size: var(--fs-small); color: var(--ink-soft); align-self: center; }
.index__arw { justify-self: end; align-self: center; color: var(--gold-deep); transition: transform var(--dur) var(--ease); }
.index__row:hover .index__arw { transform: translateX(6px); }
@media (max-width: 900px) {
  .index__grid { grid-template-columns: 3rem minmax(0,1fr) 1.75rem; }
  .index__desc { grid-column: 2 / -1; margin-top: 0.75rem; }
}

/* ---------------------------------------------------------------- 10. Cards */
.card {
  background: var(--paper); border: 1px solid var(--rule-soft);
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  display: flex; flex-direction: column; gap: 0.875rem;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.card:hover, .card--link:hover {
  border-color: var(--gold); transform: translateY(-3px);
  box-shadow: 0 22px 40px -30px rgba(0,17,39,0.4);
}
.card h4 + p, .card h3 + p { margin: 0; }
.card p { font-size: var(--fs-small); color: var(--ink-soft); margin: 0; }
.card__meta { font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; }
.card__foot { margin-top: auto; padding-top: 0.5rem; }
.card--flat { background: transparent; border: 0; border-top: 1px solid var(--rule); padding: 1.75rem 0 0; }

/* Bordered list grid (Who we help) */
.matrix { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.matrix__cell { padding: clamp(1.5rem, 2.4vw, 2.25rem); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.matrix__cell h4 { margin-bottom: 0.5rem; }
.matrix__cell p { font-size: var(--fs-small); color: var(--ink-soft); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- 11. Feature module (family law) */
.feature { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } }
.feature__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 2rem; border-top: 1px solid rgba(213,161,75,0.28); }
.feature__list li {
  padding: 0.9375rem 1rem 0.9375rem 0; border-bottom: 1px solid rgba(213,161,75,0.28);
  font-size: var(--fs-small);
}
.feature__list li:nth-child(odd) { border-right: 1px solid rgba(213,161,75,0.28); padding-right: 1rem; }
.feature__list li:nth-child(even) { padding-left: 1rem; }
@media (max-width: 520px) { .feature__list { grid-template-columns: 1fr; } .feature__list li:nth-child(odd) { border-right: 0; } .feature__list li:nth-child(even) { padding-left: 0; } }

.pillar { border-left: 2px solid var(--gold); padding-left: clamp(1.25rem, 2.5vw, 2rem); }

/* ---------------------------------------------------------------- 12. Lawyers */
.lawyer-card { display: grid; gap: 1.5rem; min-width: 0; }
.lawyer-card > * { min-width: 0; }
.lawyer-card__media {
  position: relative; aspect-ratio: 4 / 5; background: var(--navy-900);
  overflow: hidden;
}
.lawyer-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.lawyer-card__media picture { display: block; width: 100%; height: 100%; }
.lawyer-card__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.lawyer-card:hover .lawyer-card__media img { transform: scale(1.035); }
.lawyer-card__gen {
  position: absolute; left: 0; top: 0; z-index: 2;
  background: var(--gold); color: var(--navy-950);
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.5rem 0.875rem;
}
.portrait-placeholder {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: .75rem;
  background:
    repeating-linear-gradient(135deg, rgba(213,161,75,.055) 0 10px, transparent 10px 20px),
    linear-gradient(160deg, var(--navy-800), var(--navy-950));
  color: rgba(213,161,75,0.7); text-align: center; padding: 1.5rem;
  font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.9;
}
.portrait-placeholder::before {
  content: ""; width: 46px; height: 46px; border: 1px solid rgba(213,161,75,.45); border-radius: 50%;
  background:
    radial-gradient(circle at 50% 34%, rgba(213,161,75,.55) 0 22%, transparent 23%),
    radial-gradient(ellipse at 50% 100%, rgba(213,161,75,.55) 0 42%, transparent 43%);
}
.portrait-placeholder code {
  display: block; font-size: .625rem; letter-spacing: .04em; text-transform: none;
  color: rgba(251,248,242,.42);
}
.lawyer-card__role { font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; }
.lawyer-card__name { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--navy-900); margin-top: 0.375rem; overflow-wrap: anywhere; }
html[lang="th"] .lawyer-card__name { font-family: var(--font-thai); font-weight: 600; }
.lawyer-card__line { font-size: var(--fs-small); color: var(--ink-soft); margin-top: 0.75rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.125rem; }
.chip { font-size: var(--fs-micro); padding: 0.3125rem 0.75rem; border: 1px solid var(--rule); color: var(--ink-soft); max-width: 100%; overflow-wrap: anywhere; }
.on-dark .chip { border-color: rgba(213,161,75,0.35); color: rgba(251,248,242,0.75); }

/* Profile page */
.profile__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.profile__grid > * { min-width: 0; }
@media (max-width: 900px) { .profile__grid { grid-template-columns: 1fr; } }
.profile__media { position: sticky; top: calc(var(--header-h) + 2rem); }
@media (max-width: 900px) { .profile__media { position: static; } }
.factlist { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.factlist__row { display: grid; grid-template-columns: minmax(9rem, 0.4fr) minmax(0,1fr); gap: 1.5rem; padding: 1.125rem 0; border-bottom: 1px solid var(--rule); }
.factlist__k { font-size: var(--fs-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; padding-top: 0.2em; }
.factlist__v { font-size: var(--fs-small); color: var(--ink-soft); min-width: 0; overflow-wrap: anywhere; }
.factlist__v li + li { margin-top: 0.375rem; }
@media (max-width: 560px) { .factlist__row { grid-template-columns: 1fr; gap: 0.5rem; } }

/* ---------------------------------------------------------------- 13. Insights */
.article-card { display: grid; gap: 0.875rem; padding: clamp(1.5rem,2.4vw,2rem) 0; border-bottom: 1px solid var(--rule); transition: border-color var(--dur) var(--ease); }
.article-card:hover { border-color: var(--gold); }
.article-card h3 { font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem); transition: color var(--dur) var(--ease); }
.article-card:hover h3 { color: var(--gold-deep); }
.article-card__meta { display: flex; flex-wrap: wrap; gap: 0.875rem; align-items: center; font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.article-card__meta .cat { color: var(--gold-deep); font-weight: 600; }

.article-body { max-width: 68ch; }
.article-body h2 {
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  margin-top: 2.5em; margin-bottom: 0.6em;
}
.article-body h2:first-child { margin-top: 0; }
.article-body p { color: var(--ink-soft); margin-bottom: 1.15em; }
.article-body > p:first-of-type { font-size: var(--fs-lead); color: var(--ink); }

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filters button, .filters a {
  font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.5rem 1rem; border: 1px solid var(--rule); color: var(--ink-soft);
  transition: all 0.25s var(--ease);
}
.filters button:hover, .filters a:hover,
.filters button.is-active { border-color: var(--navy-900); background: var(--navy-900); color: var(--ivory); }

/* ---------------------------------------------------------------- 14. FAQ / accordion */
.acc { border-top: 1px solid var(--rule); }
.acc__item { border-bottom: 1px solid var(--rule); }
.acc__btn {
  width: 100%; display: flex; gap: 1.5rem; align-items: flex-start; justify-content: space-between;
  padding: 1.375rem 0; text-align: left;
  font-size: var(--fs-h4); font-weight: 500; color: var(--navy-900);
  font-family: var(--font-body);
}
html[lang="th"] .acc__btn { font-family: var(--font-thai); }
html[lang="zh-Hans"] .acc__btn { font-family: var(--font-zh); }
.acc__btn .plus { position: relative; width: 15px; height: 15px; flex: none; margin-top: 0.45em; }
.acc__btn .plus::before, .acc__btn .plus::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: var(--gold-deep); }
.acc__btn .plus::after { transform: rotate(90deg); transition: transform 0.35s var(--ease); }
.acc__item.is-open .plus::after { transform: rotate(0); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__inner > div { padding-bottom: 1.5rem; max-width: 68ch; color: var(--ink-soft); font-size: var(--fs-small); }
@media (prefers-reduced-motion: reduce) { .acc__panel { transition: none; } }

/* ---------------------------------------------------------------- 15. Process / steps */
.steps { counter-reset: step; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 3.5rem minmax(0,1fr); gap: 1.25rem;
  padding: 1.25rem 0; border-bottom: 1px solid var(--rule);
  font-size: var(--fs-small); color: var(--ink-soft);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.1em;
  color: var(--gold-deep); padding-top: 0.2em;
}
.ticks li { position: relative; padding-left: 1.75rem; font-size: var(--fs-small); color: var(--ink-soft); }
.ticks li + li { margin-top: 0.75rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px;
  border-left: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg);
}
.on-dark .ticks li { color: rgba(251,248,242,0.75); }

/* ---------------------------------------------------------------- 16. Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(213,161,75,0.3); }
.stats__item { padding: clamp(1.5rem,2.5vw,2.25rem) 1.25rem clamp(1.5rem,2.5vw,2.25rem) 0; border-bottom: 1px solid rgba(213,161,75,0.3); }
.stats__item:not(:nth-child(4n)) { border-right: 1px solid rgba(213,161,75,0.3); }
.stats__item:not(:nth-child(4n+1)) { padding-left: 1.25rem; }
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats__item { border-right: 0; padding-left: 0; }
  .stats__item:nth-child(odd) { border-right: 1px solid rgba(213,161,75,0.3); }
  .stats__item:nth-child(even) { padding-left: 1.25rem; }
}
.stats__fig { font-family: var(--font-display); font-size: clamp(2.5rem,1.8rem+2.6vw,4rem); line-height: 1; color: var(--gold); }
.stats__lbl { font-size: var(--fs-micro); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(251,248,242,0.6); margin-top: 0.75rem; }
.section:not(.section--dark) .stats__fig { color: var(--gold-deep); }
.section:not(.section--dark) .stats__lbl { color: var(--ink-faint); }
.section:not(.section--dark) .stats, .section:not(.section--dark) .stats__item { border-color: var(--rule); }

/* ---------------------------------------------------------------- 17. CTA band */
.cta-band { background: var(--navy-950); color: var(--ivory); position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; left: 50%; top: -60%; width: 70vw; aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(213,161,75,0.16), transparent 60%);
  pointer-events: none;
}
.cta-band__inner { position: relative; z-index: 1; text-align: center; display: grid; justify-items: center; gap: 2rem; }
.cta-band h2 { color: var(--ivory); max-width: 17em; }
.cta-band .btn-row { justify-content: center; }

/* ---------------------------------------------------------------- 18. Forms */
.form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: 0.5rem; }
.field label { font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--fs-small);
  padding: 0.875rem 1rem;
  background: var(--paper); border: 1px solid var(--rule); color: var(--ink);
  border-radius: 0; width: 100%;
  transition: border-color 0.25s var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); outline: none; }
.field--half { grid-column: span 1; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.form__note { font-size: var(--fs-micro); color: var(--ink-faint); line-height: 1.6; }
.form__status { font-size: var(--fs-small); padding: 0.875rem 1rem; display: none; }
.form__status.is-ok { display: block; background: var(--gold-pale); color: var(--navy-900); }
.form__status.is-err { display: block; background: #f7e4e4; color: #7a2222; }
.checkbox { display: flex; gap: 0.75rem; align-items: flex-start; font-size: var(--fs-micro); color: var(--ink-soft); }
.checkbox input { width: 16px; height: 16px; margin-top: 3px; flex: none; accent-color: var(--gold-deep); }

/* Contact channels */
.channels { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.channel { display: grid; grid-template-columns: minmax(7rem,0.35fr) minmax(0,1fr); gap: 1.5rem; padding: 1.25rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.channel__k { font-size: var(--fs-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; }
.channel__v { font-size: var(--fs-body); color: var(--navy-900); min-width: 0; overflow-wrap: anywhere; }
.channel__v a:hover { color: var(--gold-deep); }
.channel__v small { display: block; font-size: var(--fs-micro); color: var(--ink-faint); margin-top: 0.25rem; }

/* ---------------------------------------------------------------- 19. Footer */
.footer { background: var(--navy-950); color: rgba(251,248,242,0.66); padding-block: clamp(3.5rem,5vw,5.5rem) 2rem; font-size: var(--fs-small); }
.footer a { color: inherit; transition: color 0.25s; }
.footer a:hover { color: var(--gold); }
.footer__top { display: grid; grid-template-columns: minmax(0,1.15fr) repeat(3, minmax(0,0.75fr)); gap: clamp(2rem,4vw,3.5rem); padding-bottom: clamp(2.5rem,4vw,4rem); }
@media (max-width: 980px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; gap: 2.25rem; } }
.footer h5 { font-size: var(--fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin: 0 0 1.125rem; font-weight: 600; }
.footer__links li { overflow-wrap: anywhere; }
.footer__links li + li { margin-top: 0.5rem; }
.footer__brand .logo__name { color: var(--ivory); }
.footer__tagline { margin-top: 1.25rem; max-width: 34ch; line-height: 1.7; }
.footer__bottom {
  border-top: 1px solid rgba(213,161,75,0.2); padding-top: 1.75rem;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center;
  font-size: var(--fs-micro); color: rgba(251,248,242,0.45);
}
.footer__disclaimer { max-width: 78ch; font-size: var(--fs-micro); color: rgba(251,248,242,0.42); line-height: 1.7; margin-top: 1.5rem; }

/* ---------------------------------------------------------------- 20. Mobile action bar */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; grid-template-columns: repeat(3, 1fr);
  background: var(--navy-950); border-top: 1px solid rgba(213,161,75,0.28);
  padding-bottom: env(safe-area-inset-bottom);
}
.actionbar a {
  display: grid; justify-items: center; gap: 0.25rem;
  padding: 0.75rem 0.5rem; color: var(--ivory);
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500;
}
.actionbar a + a { border-left: 1px solid rgba(213,161,75,0.2); }
.actionbar a:active { background: var(--navy-900); }
.actionbar svg { color: var(--gold); }
@media (max-width: 900px) {
  .actionbar { display: grid; }
  body { padding-bottom: 68px; }
  body.menu-open .actionbar { display: none; }
}

/* ---------------------------------------------------------------- 21. Notices */
.notice {
  border-left: 2px solid var(--gold);
  background: var(--gold-pale); color: var(--navy-900);
  padding: 0.875rem 1.125rem; font-size: var(--fs-micro); line-height: 1.6;
}
.section--dark .notice { background: rgba(213,161,75,0.12); color: rgba(251,248,242,0.8); }

/* Placeholder token highlighting — remove `.ph` styling once content is final */
.ph {
  background: rgba(213,161,75,0.16);
  border-bottom: 1px dashed rgba(168,118,44,0.55);
  padding: 0 0.2em; border-radius: 2px;
  font-style: normal; color: inherit;
  overflow-wrap: anywhere; word-break: break-word;
}

/* ---------------------------------------------------------------- 22. Reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; } .reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; } .reveal-d4 { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------------------------------------------------------------- 23. Utilities */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 0.75rem; } .mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.25rem; } .mt-4 { margin-top: 3rem; } .mt-5 { margin-top: clamp(3rem,5vw,4.5rem); }
.mb-2 { margin-bottom: 1.5rem; } .mb-3 { margin-bottom: 2.25rem; } .mb-4 { margin-bottom: 3rem; }
.text-center { text-align: center; }
.divider { border-top: 1px solid var(--rule); }

/* Print */
@media print {
  .header, .drawer, .actionbar, .cta-band, .btn { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
}

/* ---- Core-services cards (homepage) ---- */
.corecard {
  display: flex; flex-direction: column;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--paper, #fff);
  border: 1px solid var(--rule);
  text-decoration: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.corecard:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 18px 40px -24px rgba(4,32,61,.35);
}
.corecard__num {
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1;
  color: var(--gold-deep); letter-spacing: .04em;
}
.corecard__title {
  font-family: var(--font-display); font-size: var(--fs-h4, 1.3rem);
  color: var(--navy-900); margin-top: .75rem; font-weight: 500;
}
html[lang="th"] .corecard__title { font-family: var(--font-thai); font-weight: 600; }
.corecard__desc {
  font-size: var(--fs-small); color: var(--ink-soft);
  margin-top: .625rem; line-height: 1.7; flex: 1;
}
.corecard__link {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1.25rem; font-size: var(--fs-micro);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 600;
}
.corecard:hover .corecard__link { color: var(--navy-900); }
.corecard__link svg { transition: transform .3s var(--ease); }
.corecard:hover .corecard__link svg { transform: translateX(4px); }

/* ---- Event detail page ---- */
.event-hero img { display: block; width: 100%; height: auto; }
.event-layout {
  display: grid; grid-template-columns: 1fr 320px;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
}
.event-facts {
  background: var(--sand); border: 1px solid var(--rule);
  padding: 1.5rem 1.5rem 1.75rem; position: sticky; top: 96px;
}
.event-facts dl { margin: 0; }
.event-facts dl > div { padding: .625rem 0; border-bottom: 1px solid var(--rule); }
.event-facts dl > div:last-of-type { border-bottom: 0; }
.event-facts dt {
  font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 600;
}
.event-facts dd { margin: .25rem 0 0; font-size: var(--fs-small); color: var(--navy-900); }
@media (max-width: 900px) {
  .event-layout { grid-template-columns: 1fr; }
  .event-facts { position: static; }
}

/* Event gallery */
.event-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.75rem, 1.5vw, 1.25rem);
}
.event-gallery__item { margin: 0; overflow: hidden; aspect-ratio: 3 / 2; }
.event-gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.event-gallery__item:hover img { transform: scale(1.04); }
@media (max-width: 700px) { .event-gallery { grid-template-columns: repeat(2, 1fr); } }

/* Event card (on workshops index) */
.eventcard {
  display: flex; flex-direction: column; text-decoration: none;
  border: 1px solid var(--rule); background: #fff;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.eventcard:hover {
  transform: translateY(-4px); border-color: var(--gold);
  box-shadow: 0 18px 40px -24px rgba(4,32,61,.35);
}
.eventcard__media { aspect-ratio: 16 / 9; overflow: hidden; }
.eventcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.eventcard:hover .eventcard__media img { transform: scale(1.04); }
.eventcard__body { padding: 1.25rem 1.375rem 1.5rem; }
.eventcard__body h4 {
  font-family: var(--font-display); font-size: var(--fs-h4, 1.25rem);
  color: var(--navy-900); font-weight: 500;
}
html[lang="th"] .eventcard__body h4 { font-family: var(--font-thai); font-weight: 600; }

/* ----------------------------------------- 20. Display-heading line fitting
   Two mechanisms, driven by measurements build.mjs writes onto each heading:

   1. `--fitw` is the width (in em) of the longest run that must stay on one
      line — the whole heading for English/Thai, the longest clause for
      Chinese. The rules below shrink the heading just enough for that run to
      fit its container: container width ÷ run width, capped at the normal
      size and floored so a heading never turns small. English and Thai only
      carry --fitw when the heading is short enough for one line to be
      realistic; longer ones simply wrap at full size, at spaces.
   2. On zh pages each clause is additionally wrapped in a .zhseg span, so
      Chinese — which has no spaces — can only break at punctuation (断句).

   Falls back to the plain clamp sizes wherever :has() or container queries
   are unsupported.

   IMPORTANT: `container-type: inline-size` also applies inline-size
   containment, so the element's width is computed as if it had no content.
   On a shrink-to-fit box (a flex item, a float) that collapses the width to
   zero and the text renders one glyph per line. So the container is only
   turned on for boxes whose width comes from the layout: block-level
   elements and stretched grid items. Headings elsewhere keep their normal
   clamp size (cqi with no container resolves against the viewport, which
   min() caps back to the clamp). */
.pagehero__grid > div:has(> [data-fit]),
.split__aside:has(> [data-fit]),
.statement:has(> [data-fit]),
.section-head:has(> [data-fit]),
.cta-band__inner:has(> [data-fit]),
.wrap:has(> [data-fit]) { container-type: inline-size; }

h1[data-fit] { font-size: max(2.5rem,  min(var(--fs-h1), calc(92cqi / var(--fitw)))); }
h2[data-fit] { font-size: max(2rem,    min(var(--fs-h2), calc(92cqi / var(--fitw)))); }
h3[data-fit] { font-size: max(1.5rem,  min(var(--fs-h3), calc(92cqi / var(--fitw)))); }

html[lang="zh-Hans"] h1[data-fit] { font-size: max(1.75rem, min(clamp(2rem, 1.4rem + 2.6vw, 3.75rem), calc(92cqi / var(--fitw)))); }
html[lang="zh-Hans"] h2[data-fit] { font-size: max(1.5rem,  min(clamp(1.625rem, 1.25rem + 1.7vw, 2.75rem), calc(92cqi / var(--fitw)))); }
html[lang="zh-Hans"] h3[data-fit] { font-size: max(1.25rem, min(var(--fs-h3), calc(92cqi / var(--fitw)))); }
.zhseg { display: inline-block; }

/* Latin and Thai break at spaces; `balance` evens out the lines that remain
   instead of leaving a one-word last line. Not applied to zh, whose breaking
   is governed by the clause spans above. */
html:not([lang="zh-Hans"]) :is(h1, h2, h3) { text-wrap: balance; }

/* Caps written in ch would re-introduce the very problem this section fixes,
   so the zh display containers are uncapped and the fitting governs. */
html[lang="zh-Hans"] .statement h2,
html[lang="zh-Hans"] .pagehero h1,
html[lang="zh-Hans"] .cta-band h2,
html[lang="zh-Hans"] .section-head,
html[lang="zh-Hans"] .section-head h2 { max-width: none; }
html[lang="zh-Hans"] .section-head .lead { max-width: 88ch !important; }
/* Even 1fr/1fr on the split gives the aside more room for a full clause. */
html[lang="zh-Hans"] .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); }