/* =====================================================================
   FIT U ACADEMY — "Aman feel" in FIT U colours
   ===================================================================== */

/* =====================================================================
   KANIT (Thai) — self-hosted Thai subset (OFL). Two families so we can tune
   weight & size against the Latin fonts they sit next to:
   • 'Kanit Body' — paired with Avenir: CSS 400 → Kanit Light 300, 500 → Kanit 400
   • 'Kanit Head' — paired with Cormorant Garamond headings: 400 → Kanit Light 300
   size-adjust balances Thai glyph size against the Latin font on the same line.
   ===================================================================== */
@font-face { font-family: 'Kanit Body'; src: url('/assets/fonts/kanit-thai-200.woff2') format('woff2'); font-weight: 300; font-display: swap; unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; size-adjust: 94%; }
@font-face { font-family: 'Kanit Body'; src: url('/assets/fonts/kanit-thai-300.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; size-adjust: 94%; }
@font-face { font-family: 'Kanit Body'; src: url('/assets/fonts/kanit-thai-400.woff2') format('woff2'); font-weight: 500 700; font-display: swap; unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; size-adjust: 94%; }
@font-face { font-family: 'Kanit Head'; src: url('/assets/fonts/kanit-thai-200.woff2') format('woff2'); font-weight: 300; font-display: swap; unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; size-adjust: 103%; }
@font-face { font-family: 'Kanit Head'; src: url('/assets/fonts/kanit-thai-300.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; size-adjust: 103%; }
@font-face { font-family: 'Kanit Head'; src: url('/assets/fonts/kanit-thai-400.woff2') format('woff2'); font-weight: 500 700; font-display: swap; unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; size-adjust: 103%; }

/* หัวข้อ (HEAD FONT): ตัวอังกฤษ Cormorant ย่อ 20% (size-adjust 80%) — ไฟล์เดียวกับที่ Google Fonts โหลดอยู่แล้ว (cache ร่วมกัน)
   ตัวไทย Kanit Head ขยาย 20% (86% → 103%) · ข้อความเล็ก (label, ตัวเลข, คำโปรย ≤ ~22px) ใช้ --f-*-sm ขนาดเดิม เพื่อให้ยังอ่านง่าย */
@font-face { font-family: 'Cormorant Head'; font-style: normal; font-weight: 300 500; font-display: swap; src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtKky2F7g.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; size-adjust: 80%; }
@font-face { font-family: 'Cormorant Head'; font-style: normal; font-weight: 300 500; font-display: swap; src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKky2F7i6C.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; size-adjust: 80%; }
@font-face { font-family: 'Cormorant Head'; font-style: italic; font-weight: 300 500; font-display: swap; src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSqn7B6D.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; size-adjust: 80%; }
@font-face { font-family: 'Cormorant Head'; font-style: italic; font-weight: 300 500; font-display: swap; src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtGmSqn7B6DxjY.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; size-adjust: 80%; }

:root {
  --forest: #33382C;
  --forest-2: #4A5240;
  --forest-deep: #272B21;
  --gold: #B8995A;
  --gold-soft: #CDB88A;
  --gold-ink: #725B2C;      /* gold text on light backgrounds (AA) */
  --gold-text: #C4A767;     /* small gold text on dark backgrounds (AA) */
  --ivory: #F4EFE6;
  --stone: #E7E0D3;
  --paper: #FBF8F2;
  --ink: #23261F;
  --mist: #8C8F84;          /* secondary text on dark */
  --mist-ink: #5A5D53;      /* secondary text on light (AA) */
  --line-light: rgba(35, 38, 31, .14);
  --line-dark: rgba(205, 184, 138, .28);
  --error: #9B3B2E;

  --f-latin-display: 'Cormorant Head', 'Kanit Head', Georgia, serif;
  --f-display: 'Cormorant Head', Georgia, serif;
  --f-latin-display-sm: 'Cormorant Garamond', 'Kanit Head', Georgia, serif;
  --f-display-sm: 'Cormorant Garamond', Georgia, serif;
  /* Body: Avenir (มีในเครื่อง Mac/iPhone) → Nunito Sans (Google Fonts, หน้าตาใกล้ Avenir) → Kanit Body (ตัวไทย, self-hosted ดูด้านบน)
     ถ้าซื้อ license Avenir webfont (Monotype) แล้ว: ใส่ไฟล์ใน assets/fonts/ แล้วเพิ่ม @font-face ในบล็อก
     "AVENIR WEBFONT" ด้านล่าง (ตั้งชื่อ font-family ว่า 'Avenir Next') — ไม่ต้องแก้ส่วนอื่น */
  --f-body: 'Avenir Next', 'Avenir', 'Nunito Sans', 'Kanit Body', 'Helvetica Neue', Arial, sans-serif;
  --f-ui: var(--f-body);
  --lh-body: 1.7;
  --lh-head: 1.15;
  --track-caps: .28em;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --slow: 1000ms;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(96px, 12vw, 168px);
  --nav-h: 84px;
}

html[lang="th"] {
  /* หน้าไทย: หัวข้อ/ประโยคที่มีไทยปนอังกฤษ ใช้ตัวอังกฤษแบบ sans (Avenir) คู่กับ Kanit ให้เส้นและขนาดกลมกลืนกัน
     ส่วนที่เป็นอังกฤษล้วน (มี lang="en") ยังเป็น Cormorant ตามเดิม ดูกฎ html[lang="th"] [lang="en"] ด้านล่าง */
  --f-display: 'Avenir Next', 'Avenir', 'Nunito Sans', 'Kanit Head', 'Helvetica Neue', sans-serif;
  --f-display-sm: 'Avenir Next', 'Avenir', 'Nunito Sans', 'Kanit Head', 'Helvetica Neue', sans-serif;
  --f-body: 'Avenir Next', 'Avenir', 'Nunito Sans', 'Kanit Body', 'Helvetica Neue', sans-serif;
  --lh-body: 1.8;
  --lh-head: 1.45;
  --track-caps: .06em;
}
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3, html[lang="th"] h4 { letter-spacing: .01em; }
html[lang="th"] [lang="en"] { --f-display: 'Cormorant Head', Georgia, serif; --f-display-sm: 'Cormorant Garamond', Georgia, serif; }
/* ตัวเลขแบบ lining ในหัวข้อ serif (1:1 ไม่ให้ดูเป็น ı:ı) */
h1, h2, h3, h4, .latin, [lang="en"] { font-variant-numeric: lining-nums; }
.nw { white-space: nowrap; }
html[lang="th"] body { font-synthesis: none; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 17px;
  line-height: var(--lh-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
button { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; line-height: var(--lh-head); margin: 0; letter-spacing: .005em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.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; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--gold); color: var(--forest-deep); padding: 10px 18px; transition: top .3s; }
.skip:focus { top: 16px; }

.todo { color: #C0392B !important; background: rgba(192, 57, 43, .08); font-weight: 500; font-family: var(--f-ui); font-size: .8em; letter-spacing: 0; text-transform: none; font-style: normal; padding: 0 .3em; }

/* ---------- layout helpers ---------- */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 820px; }
.section { padding: var(--section-y) 0; position: relative; }
.bg-forest { background: var(--forest); color: var(--ivory); }
.bg-forest-deep { background: var(--forest-deep); color: var(--ivory); }
.bg-ivory { background: var(--ivory); }
.bg-stone { background: var(--stone); }
.center { text-align: center; }

.eyebrow {
  display: block;
  font-family: var(--f-ui);
  font-size: clamp(13.5px, 1.1vw, 15px); font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 28px;
}
.bg-forest .eyebrow, .bg-forest-deep .eyebrow, .threep .eyebrow { color: var(--gold-text); }
.h2 { font-size: clamp(32px, 4.6vw, 58px); }
html[lang="th"] .h2 { font-size: clamp(28px, 3.8vw, 48px); }
.h3 { font-size: clamp(24px, 2.4vw, 32px); }
.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--mist-ink); max-width: 640px; }
.bg-forest .lead, .bg-forest-deep .lead { color: rgba(244, 239, 230, .78); }
.section-head { margin-bottom: clamp(56px, 7vw, 96px); }
.section-head.center .lead { margin-left: auto; margin-right: auto; }
.section-head .h2 { margin-bottom: 24px; }
.pre { white-space: pre-line; }
.latin { font-family: var(--f-latin-display); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 14px 34px;
  border: 1px solid var(--gold); background: transparent; color: inherit;
  font-family: var(--f-ui); font-size: 12px; font-weight: 400;
  letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: background-color 600ms var(--ease), color 600ms var(--ease), border-color 600ms var(--ease);
}
html[lang="th"] .btn { font-size: 14px; }
.btn:hover { background: var(--gold); color: var(--forest-deep); }
.btn--solid { background: var(--gold); color: var(--forest-deep); }
.btn--solid:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
.btn--ink { border-color: var(--ink); }
.btn--ink:hover { background: var(--ink); color: var(--ivory); }
.btn[disabled] { opacity: .5; cursor: progress; }
.link-btn {
  display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; padding: 8px 0; cursor: pointer;
  font-family: var(--f-ui); font-size: 12px; letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--gold-ink); text-decoration: none;
}
html[lang="th"] .link-btn { font-size: 14px; }
.bg-forest .link-btn, .bg-forest-deep .link-btn { color: var(--gold-soft); }
.link-btn::after { content: ''; width: 28px; height: 1px; background: currentColor; transition: width 600ms var(--ease); }
.link-btn:hover::after { width: 44px; }

/* ---------- butterfly divider ---------- */
.divider { display: flex; align-items: center; justify-content: center; gap: 24px; color: var(--gold-text); padding: 0 var(--gutter); }
.divider::before, .divider::after { content: ''; height: 1px; width: min(120px, 22vw); background: currentColor; opacity: .5; }
.divider svg { width: 84px; height: 52px; flex: none; }
.divider--space { margin: clamp(56px, 7vw, 96px) 0; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1100ms var(--ease), transform 1100ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 120ms; }
.reveal[data-delay="2"] { transition-delay: 240ms; }
.reveal[data-delay="3"] { transition-delay: 360ms; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* =====================================================================
   NAV
   ===================================================================== */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h); color: var(--ivory); transition: background-color 700ms var(--ease), height 700ms var(--ease), box-shadow 700ms var(--ease); }
.site-header.is-scrolled { background: rgba(39, 43, 33, .96); height: 68px; box-shadow: 0 1px 0 var(--line-dark); }
@supports (backdrop-filter: blur(8px)) { .site-header.is-scrolled { background: rgba(39, 43, 33, .88); backdrop-filter: blur(10px); } }
.nav { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
.nav__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.nav__logo img { height: 42px; width: auto; transition: height 700ms var(--ease); }
.is-scrolled .nav__logo img { height: 34px; }
.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.nav__links a { font-family: var(--f-ui); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: rgba(244, 239, 230, .86); padding: 8px 0; position: relative; white-space: nowrap; }
.nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease); }
html[lang="th"] .nav__links a { letter-spacing: .02em; font-size: 14px; text-transform: none; }
.nav__links a:hover::after, .nav__links a[aria-current="true"]::after { transform: scaleX(1); }
.nav__right { display: flex; align-items: center; gap: 22px; }
.nav__cta { min-height: 40px; padding: 8px 20px; font-size: 11px; }
.lang { display: flex; align-items: center; gap: 8px; font-family: var(--f-ui); font-size: 12px; letter-spacing: .2em; }
.lang button { background: none; border: 0; padding: 6px 2px; cursor: pointer; color: rgba(244, 239, 230, .72); letter-spacing: .2em; font-weight: 300; }
.lang button[aria-pressed="true"] { color: var(--gold-soft); }
.lang button:hover { color: var(--ivory); }
.lang span { opacity: .4; }
.nav__burger { display: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; position: relative; }
.nav__burger span { position: absolute; left: 10px; right: 10px; height: 1px; background: var(--ivory); transition: transform 500ms var(--ease), opacity 400ms; }
.nav__burger span:nth-child(1) { top: 17px; }
.nav__burger span:nth-child(2) { top: 26px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

.drawer { position: fixed; inset: 0; z-index: 90; background: var(--forest-deep); color: var(--ivory); padding: calc(var(--nav-h) + 24px) var(--gutter) 40px; display: flex; flex-direction: column; gap: 8px; opacity: 0; visibility: hidden; transition: opacity 600ms var(--ease), visibility 600ms; overflow-y: auto; }
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer a.drawer__link { font-family: var(--f-display); font-size: 30px; text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--line-dark); }
.drawer .btn { margin-top: 28px; }
.drawer .lang { margin-top: 24px; font-size: 14px; }

@media (max-width: 1080px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
  :root { --nav-h: 68px; }
  .nav__logo img { height: 34px; }
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero { position: relative; min-height: 100vh; min-height: 100svh; background: var(--forest); color: var(--ivory); overflow: hidden; isolation: isolate; }
/* A — Ken Burns slideshow of people in the room */
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.kb { position: absolute; inset: 0; opacity: 0; transition: opacity 2000ms var(--ease); overflow: hidden; }
.kb.is-active { opacity: 1; z-index: 1; }
.kb.is-leaving { z-index: 0; }
.kb img { width: 100%; height: 100%; object-fit: cover; transform-origin: 30% 40%; }
.kb.is-active img { animation: kenburns 10s ease-out forwards; }
.kb:nth-child(even).is-active img { transform-origin: 70% 60%; animation-name: kenburns-b; }
@keyframes kenburns { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); } }
@keyframes kenburns-b { from { transform: scale(1.12) translate3d(1%, 1%, 0); } to { transform: scale(1.02) translate3d(0, 0, 0); } }
/* B — slow horizontal collage strip behind the founder */
.hero__strip { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 52%; z-index: -2; overflow: hidden; }
.strip__track { display: flex; gap: 14px; height: 100%; width: max-content; animation: strip 140s linear infinite; }
.strip__item { height: 100%; aspect-ratio: 4 / 3; flex: none; overflow: hidden; }
.strip__item img { width: 100%; height: 100%; object-fit: cover; }
@keyframes strip { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.hero--b .hero__veil { background: linear-gradient(90deg, rgba(51, 56, 44, .92) 0%, rgba(51, 56, 44, .72) 40%, rgba(51, 56, 44, .55) 100%), linear-gradient(0deg, var(--forest) 0%, rgba(51, 56, 44, 0) 28%, rgba(51, 56, 44, 0) 72%, var(--forest) 100%); }
.hero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(51, 56, 44, .9) 0%, rgba(51, 56, 44, .74) 45%, rgba(51, 56, 44, .64) 100%), linear-gradient(0deg, rgba(39, 43, 33, .7) 0%, rgba(39, 43, 33, 0) 35%); }
/* founder in front */
.hero__founder { position: absolute; right: max(2vw, calc((100vw - 1440px) / 2)); bottom: 0; height: min(92%, 900px); aspect-ratio: 900 / 1352; z-index: 1; pointer-events: none; }
.hero__founder::before { content: ''; position: absolute; left: -20%; right: -20%; top: 10%; bottom: -10%; background: radial-gradient(closest-side, rgba(205, 184, 138, .22), rgba(205, 184, 138, 0)); z-index: -1; }
.hero__founder img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .35)); }
/* butterflies drifting from the people toward her */
.hero__flies { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: var(--gold-soft); }
.fly { position: absolute; left: -60px; width: 34px; opacity: 0; animation: fly 46s linear infinite; }
.fly svg { width: 100%; height: auto; animation: flap 3.6s ease-in-out infinite; transform-origin: center; }
.fly--1 { top: 64%; animation-delay: 0s; }
.fly--2 { top: 38%; width: 24px; animation-delay: 15s; animation-duration: 54s; }
.fly--3 { top: 76%; width: 20px; animation-delay: 30s; animation-duration: 60s; }
@keyframes fly { 0% { transform: translate3d(0, 0, 0) rotate(8deg); opacity: 0; } 10% { opacity: .38; } 50% { transform: translate3d(42vw, -9vh, 0) rotate(-6deg); } 88% { opacity: .32; } 100% { transform: translate3d(74vw, -20vh, 0) rotate(6deg); opacity: 0; } }
@keyframes flap { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.7); } }
.hero__content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; min-height: 100svh; padding: calc(var(--nav-h) + 24px) var(--gutter) 88px; max-width: 1440px; width: 100%; margin: 0 auto; }
.hero__inner { max-width: 640px; }
.hero__title { font-family: var(--f-latin-display); font-weight: 300; font-size: clamp(46px, 5.6vw, 88px); line-height: 1.02; letter-spacing: -.005em; margin-bottom: 36px; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.hero__title em { font-style: italic; color: var(--gold-soft); }
.hero__sub { font-size: clamp(16px, 1.3vw, 18px); color: rgba(244, 239, 230, .88); max-width: 520px; margin-bottom: 48px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.hero__ctas .link-btn { color: var(--ivory); }
@media (prefers-reduced-motion: reduce) {
  .kb.is-active img, .strip__track, .fly, .fly svg { animation: none; }
  .hero__flies { display: none; }
}
@media (max-width: 1080px) and (min-width: 861px) { .hero__inner { max-width: 52%; } }
@media (max-width: 860px) {
  /* มือถือ: รูป อ.ตอย ชิดมุมขวาเหมือน desktop · ขอบล่างจางเข้ากับพื้น (ไม่ลอย) · ข้อความวางทับช่วงล่างซ้าย */
  .hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; }
  .hero__founder { position: absolute; top: calc(var(--nav-h) + 4px); right: -7%; bottom: auto; height: min(58svh, 640px); width: auto; aspect-ratio: 900 / 1352; margin: 0; }
  .hero__founder::before { display: none; }
  .hero__founder img { object-position: bottom right; filter: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0,0,0,.55) 80%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 62%, rgba(0,0,0,.55) 80%, transparent 100%); }
  .hero__veil { background: linear-gradient(180deg, rgba(51, 56, 44, .62) 0%, rgba(51, 56, 44, .72) 50%, var(--forest) 78%); }
  .hero--b .hero__veil { background: linear-gradient(180deg, rgba(51, 56, 44, .5) 0%, rgba(51, 56, 44, .7) 55%, var(--forest) 78%); }
  .hero__strip { top: calc(var(--nav-h) + 12%); height: 34%; transform: none; }
  .hero__content { min-height: 0; margin-top: 0; padding: 44svh var(--gutter) 56px; }
  .hero__content::before { content: ''; position: absolute; inset: 30svh 0 0 0; background: linear-gradient(180deg, rgba(51,56,44,0) 0%, rgba(51,56,44,.78) 30%, var(--forest) 62%); z-index: -1; pointer-events: none; }
  .fly--1 { top: 30%; } .fly--2 { top: 18%; } .fly--3 { top: 48%; }
}

/* =====================================================================
   VISION
   ===================================================================== */
.vision { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 8vw, 120px); }
.vision__label { font-family: var(--f-latin-display-sm); font-size: clamp(18px, 1.6vw, 21px); font-weight: 500; letter-spacing: .3em; color: var(--gold-ink); margin-bottom: 22px; display: block; }
.vision p { font-family: var(--f-display); font-size: clamp(22px, 2.3vw, 30px); line-height: 1.45; margin: 0; }
html[lang="th"] .vision p { font-size: clamp(19px, 1.75vw, 24px); line-height: 1.75; color: rgba(35, 38, 31, .88); }
@media (max-width: 760px) { .vision { grid-template-columns: 1fr; } }

/* =====================================================================
   PROBLEMS
   ===================================================================== */
.problems { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line-light); }
.problem { padding: 44px 36px 48px 0; border-bottom: 1px solid var(--line-light); }
.problem:not(:nth-child(3n+1)) { padding-left: 36px; border-left: 1px solid var(--line-light); }
.problem__n { font-family: var(--f-latin-display-sm); font-size: 15px; color: var(--gold-ink); letter-spacing: .16em; display: block; margin-bottom: 20px; }
.problem h3 { font-size: 26px; margin-bottom: 6px; }
html[lang="th"] .problem h3 { font-size: 22px; }
.problem__en { font-family: var(--f-ui); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--mist-ink); display: block; margin-bottom: 16px; }
.problem p { color: var(--mist-ink); margin: 0; }
.problem q { display: block; margin-top: 14px; font-family: var(--f-display-sm); font-style: italic; color: var(--ink); quotes: none; }
.problems__closing { margin-top: clamp(72px, 9vw, 120px); font-family: var(--f-display); font-style: italic; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.4; text-align: center; }
html[lang="th"] .problems__closing { font-style: normal; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.7; }
@media (max-width: 960px) {
  .problems { grid-template-columns: 1fr 1fr; }
  .problem, .problem:not(:nth-child(3n+1)) { padding: 36px 24px 40px 0; border-left: 0; }
  .problem:nth-child(2n) { padding-left: 24px; border-left: 1px solid var(--line-light); }
}
@media (max-width: 600px) {
  .problems { grid-template-columns: 1fr; }
  .problem, .problem:nth-child(2n), .problem:not(:nth-child(3n+1)) { padding: 32px 0; border-left: 0; }
}

/* =====================================================================
   METHOD
   ===================================================================== */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; margin-bottom: clamp(72px, 8vw, 112px); }
.timeline::before { content: ''; position: absolute; left: 7px; right: 0; top: 7px; height: 1px; background: linear-gradient(90deg, var(--gold), rgba(184, 153, 90, .3)); }
.tl-step { position: relative; padding-top: 48px; }
.tl-step::before { content: ''; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border: 1px solid var(--gold); border-radius: 50%; background: var(--forest); }
.tl-step::after { content: ''; position: absolute; left: 5px; top: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.tl-step__n { font-family: var(--f-ui); font-size: 11px; letter-spacing: .3em; color: var(--gold-text); display: block; margin-bottom: 10px; }
.tl-step h3 { font-family: var(--f-latin-display); font-size: clamp(32px, 3vw, 42px); font-weight: 400; margin-bottom: 10px; }
.tl-step p { color: rgba(244, 239, 230, .75); margin: 0; max-width: 240px; }
@media (max-width: 860px) {
  .timeline { grid-template-columns: 1fr; gap: 40px; padding-left: 40px; }
  .timeline::before { left: 7px; right: auto; top: 7px; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, var(--gold), rgba(184, 153, 90, .3)); }
  .tl-step { padding-top: 0; }
  .tl-step::before { left: -40px; }
  .tl-step::after { left: -35px; }
}

.outcomes-label { font-family: var(--f-ui); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-text); display: block; margin-bottom: 24px; }
html[lang="th"] .outcomes-label { letter-spacing: .06em; font-size: 14px; }
.outcomes { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); margin-bottom: clamp(72px, 8vw, 112px); }
.outcome { padding: 28px 24px 30px 0; }
.outcome + .outcome { padding-left: 24px; border-left: 1px solid var(--line-dark); }
.outcome h4 { font-family: var(--f-latin-display); font-size: 24px; color: var(--gold-soft); margin-bottom: 4px; }
.outcome p { margin: 0; font-size: 15px; color: rgba(244, 239, 230, .75); }
@media (max-width: 860px) {
  .outcomes { grid-template-columns: 1fr 1fr; }
  .outcome, .outcome + .outcome { padding: 24px 16px 24px 0; border-left: 0; }
  .outcome:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--line-dark); }
  .outcome:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
}

.whatwedo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); margin-bottom: clamp(88px, 10vw, 140px); }
.whatwedo h3 { font-family: var(--f-latin-display); font-size: clamp(28px, 2.6vw, 36px); margin-bottom: 14px; }
.whatwedo p { color: rgba(244, 239, 230, .78); margin: 0; }
@media (max-width: 760px) { .whatwedo { grid-template-columns: 1fr; } }

.pillars-head { text-align: center; margin-bottom: 56px; }
.pillars-head .h2 { font-family: var(--f-latin-display); letter-spacing: .06em; text-transform: uppercase; font-size: clamp(26px, 3.4vw, 42px); margin-bottom: 12px; }
.pillars-head p { color: rgba(244, 239, 230, .7); margin: 0; }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pillar { background: var(--paper); color: var(--ink); padding: 48px 24px 44px; text-align: center; }
.pillar svg { width: 56px; height: 56px; color: var(--gold-text); margin: 0 auto 24px; }
.pillar h3 { font-family: var(--f-latin-display-sm); font-size: 17px; letter-spacing: .42em; text-transform: uppercase; margin-bottom: 22px; color: var(--gold-ink); padding-left: .42em; }
.pillar li { font-size: 15px; color: var(--mist-ink); line-height: 1.6; padding: 4px 0; }
@media (max-width: 960px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pillars { grid-template-columns: 1fr; } }

.closing-quote { text-align: center; margin-top: clamp(88px, 10vw, 140px); }
.closing-quote p { font-family: var(--f-latin-display); font-style: italic; font-size: clamp(28px, 3.6vw, 48px); line-height: 1.3; margin: 0 0 18px; white-space: pre-line; }
.closing-quote small { display: block; color: rgba(244, 239, 230, .7); font-size: 16px; max-width: 560px; margin: 0 auto; }

/* =====================================================================
   PATH (ladder)
   ===================================================================== */
.ladder { display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch; }
.rung { position: relative; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); padding: 36px 28px 44px; }
.rung:nth-child(1) { margin-top: 216px; }
.rung:nth-child(2) { margin-top: 144px; }
.rung:nth-child(3) { margin-top: 72px; }
.rung:nth-child(4) { margin-top: 0; }
.rung__n { font-family: var(--f-ui); font-size: 11px; letter-spacing: .3em; color: var(--gold-ink); display: block; margin-bottom: 12px; }
.rung__stage { font-family: var(--f-latin-display); font-size: clamp(38px, 3.4vw, 52px); line-height: 1; display: block; margin-bottom: 18px; }
.rung h3 { font-family: var(--f-display-sm); font-size: 20px; margin-bottom: 14px; }
html[lang="th"] .rung h3 { font-size: 18px; }
.rung p { color: var(--mist-ink); font-size: 16px; }
.rung__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 12px; }
.badge { display: inline-block; font-family: var(--f-ui); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; border: 1px solid var(--gold); color: var(--gold-ink); padding: 5px 12px; margin-bottom: 16px; }
.bg-forest .badge { color: var(--gold-soft); }
@media (max-width: 960px) {
  .ladder { grid-template-columns: 1fr; }
  .rung, .rung:nth-child(n) { margin: 0 0 0 calc(var(--i) * 18px); border-top: 0; padding: 0 0 48px 28px; }
  .rung::before { content: ''; position: absolute; left: -4px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
}

/* =====================================================================
   PROGRAMS
   ===================================================================== */
.who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); margin-bottom: clamp(72px, 8vw, 104px); }
.who > div { padding: 32px 28px 34px 0; }
.who > div + div { padding-left: 28px; border-left: 1px solid var(--line-light); }
.who h3 { font-family: var(--f-latin-display); font-size: 26px; margin-bottom: 8px; }
.who p { margin: 0; color: var(--mist-ink); font-size: 16px; }
.who-label { margin-bottom: 18px; }
@media (max-width: 760px) {
  .who { grid-template-columns: 1fr; }
  .who > div, .who > div + div { padding: 24px 0; border-left: 0; }
  .who > div + div { border-top: 1px solid var(--line-light); }
}

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 48px; }
.chip { border: 1px solid var(--line-light); background: transparent; padding: 10px 20px; min-height: 44px; cursor: pointer; font-family: var(--f-ui); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; transition: all 500ms var(--ease); color: var(--ink); }
html[lang="th"] .chip { letter-spacing: .03em; font-size: 14px; }
.chip:hover { border-color: var(--forest); }
.chip[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--ivory); }
@media (max-width: 600px) {
  .chips { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
}

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 1000px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }
.card { position: relative; background: var(--paper); display: flex; flex-direction: column; transition: transform 800ms var(--ease), box-shadow 800ms var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -32px rgba(35, 38, 31, .45); }
.card[hidden] { display: none; }
.card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--forest-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1600ms var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--forest-2), var(--forest)); color: var(--gold-text); }
.placeholder svg { width: 54px; height: 34px; opacity: .8; }
.card__body { padding: 28px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.card__meta { font-family: var(--f-ui); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
html[lang="th"] .card__meta { letter-spacing: .06em; font-size: 12.5px; }
.card__title { font-family: var(--f-latin-display-sm); font-size: 25px; font-weight: 500; line-height: 1.25; letter-spacing: .005em; margin-bottom: 6px; }
.card__title button { all: unset; cursor: pointer; }
.card__title button::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.card__title button:focus-visible { outline: none; }
.card:has(.card__title button:focus-visible) { outline: 1px solid var(--gold); outline-offset: 4px; }
.card__sub { font-size: 14px; color: var(--mist-ink); margin-bottom: 12px; display: block; }
.card__tagline { font-family: var(--f-display-sm); font-size: 17px; line-height: 1.55; color: var(--ink); margin: 6px 0 4px; }
.acc__body p strong { color: var(--gold-soft); font-weight: 500; }
.card__for { font-size: 15px; color: var(--mist-ink); margin: 10px 0 18px; }
.ticks li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.6; margin-bottom: 8px; }
.ticks li::before { content: ''; position: absolute; left: 0; top: .8em; width: 14px; height: 1px; background: var(--gold); }
.card__foot { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line-light); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.card__foot .link-btn { position: relative; z-index: 2; }
.card__inv { font-size: 12.5px; color: var(--mist-ink); }
.cards__empty { color: var(--mist-ink); }

/* ---------- dialogs ---------- */
dialog { border: 0; padding: 0; max-width: min(960px, calc(100vw - 32px)); width: 100%; max-height: calc(100vh - 48px); background: var(--ivory); color: var(--ink); overflow: hidden; }
dialog::backdrop { background: rgba(28, 31, 24, .72); }
dialog[open] { animation: dialog-in 700ms var(--ease); }
dialog[open]::backdrop { animation: fade-in 700ms var(--ease); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog[open], dialog[open]::backdrop { animation: none; } }
.modal { display: grid; grid-template-columns: 5fr 7fr; max-height: calc(100vh - 48px); }
.modal__media { background: var(--forest-2); min-height: 100%; }
.modal__media img { width: 100%; height: 100%; object-fit: cover; }
.modal__body { padding: 56px 48px 48px; overflow-y: auto; max-height: calc(100vh - 48px); }
.modal__close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; background: var(--ivory); cursor: pointer; z-index: 3; }
.modal__close::before, .modal__close::after { content: ''; position: absolute; left: 12px; right: 12px; top: 50%; height: 1px; background: var(--ink); transform: rotate(45deg); }
.modal__close::after { transform: rotate(-45deg); }
.modal h2 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 6px; }
html[lang="th"] .modal h2 { font-size: clamp(24px, 2.6vw, 32px); }
.modal__desc { font-size: 17px; margin: 20px 0 28px; }
.modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }
.modal h3 { font-family: var(--f-ui); font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 10px; font-weight: 400; }
html[lang="th"] .modal h3 { letter-spacing: .05em; font-size: 13px; }
.modal__grid p { margin: 0; font-size: 15px; color: var(--mist-ink); }
.modal__block { margin-bottom: 28px; }
.modal__topics { display: flex; flex-wrap: wrap; gap: 8px; }
.modal__topics li { border: 1px solid var(--line-light); padding: 6px 14px; font-size: 14px; }
.modal__related li { font-family: var(--f-display-sm); font-size: 18px; padding: 6px 0; border-bottom: 1px solid var(--line-light); }
.modal__related button { all: unset; cursor: pointer; }
.modal__related button:hover, .modal__related button:focus-visible { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 4px; }
.modal__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding-top: 24px; border-top: 1px solid var(--line-light); }
.modal__foot small { color: var(--mist-ink); }
@media (max-width: 760px) {
  dialog { max-width: 100vw; max-height: 100svh; height: 100svh; margin: 0; }
  .modal { grid-template-columns: 1fr; max-height: 100svh; overflow-y: auto; }
  .modal__media { height: 34svh; min-height: 0; }
  .modal__body { padding: 36px var(--gutter) 48px; max-height: none; overflow: visible; }
  .modal__grid { grid-template-columns: 1fr; }
}
.privacy { padding: 56px 48px 44px; max-height: calc(100vh - 48px); overflow-y: auto; max-width: 640px; }
.privacy h2 { font-size: 28px; margin-bottom: 20px; }
.privacy li { margin-bottom: 12px; padding-left: 20px; position: relative; font-size: 15.5px; }
.privacy li::before { content: ''; position: absolute; left: 0; top: .85em; width: 10px; height: 1px; background: var(--gold); }
#privacy-modal { max-width: min(640px, calc(100vw - 32px)); }
@media (max-width: 760px) { .privacy { padding: 64px var(--gutter) 40px; max-height: 100svh; } }

/* =====================================================================
   FOUNDER
   ===================================================================== */
.founder-intro { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 7vw, 112px); align-items: center; margin-bottom: clamp(96px, 11vw, 160px); }
.founder-intro__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--forest-2); }
.founder-intro__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.spaced { font-family: var(--f-latin-display-sm); font-size: 18px; font-weight: 500; letter-spacing: .3em; color: var(--gold-text); display: block; margin-bottom: 26px; }
.founder-name { font-family: var(--f-latin-display); font-size: clamp(32px, 4vw, 54px); letter-spacing: .14em; line-height: 1.1; margin-bottom: 8px; }
.founder-nick { font-family: var(--f-latin-display-sm); font-size: 20px; letter-spacing: .3em; color: var(--gold-soft); display: block; margin-bottom: 22px; }
.founder-roles { font-family: var(--f-ui); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 34px; line-height: 2; }
.founder-quote { font-family: var(--f-display); font-style: italic; font-size: clamp(21px, 2.2vw, 28px); line-height: 1.5; margin: 0 0 30px; padding-left: 28px; border-left: 1px solid var(--gold); }
html[lang="th"] .founder-quote { font-style: normal; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.8; }
.founder-bio { color: rgba(244, 239, 230, .78); margin: 0; }
.founder-tagline { font-family: var(--f-display-sm); color: var(--gold-soft); margin-bottom: 14px; font-size: 18px; }
@media (max-width: 860px) { .founder-intro { grid-template-columns: 1fr; } .founder-intro__img { max-width: 440px; } }

.proofs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(48px, 5vw, 72px) clamp(24px, 3vw, 44px); margin-bottom: clamp(96px, 11vw, 160px); }
.proof { display: flex; flex-direction: column; }
.proof__logo { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #FFFDF8; padding: 12%; }
.proof__logo img { width: 48%; height: auto; max-height: 70%; object-fit: contain; }
.proof__img { aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 28px; background: var(--forest-2); }
.proof__img img { width: 100%; height: 100%; object-fit: cover; }
.proof__big { font-family: var(--f-latin-display); font-size: clamp(32px, 3.2vw, 46px); line-height: 1.08; display: block; margin-bottom: 14px; color: var(--ivory); }
.proof__t { font-family: var(--f-ui); font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-text); display: block; margin-bottom: 8px; }
.proof p { color: rgba(244, 239, 230, .75); margin: 0; font-size: 16px; }
@media (max-width: 1000px) { .proofs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .proofs { grid-template-columns: 1fr; gap: 56px; } .proof__img { aspect-ratio: 4 / 3; } }
/* การ์ดที่มี 2 รูปซ้อนบน-ล่าง (2 Years, 2 Podiums) ใช้กรอบ 4:5 ทุกขนาดจอ ไม่ให้รูปครึ่งล่างถูกตัด */
.proof__img.proof__img--stack { aspect-ratio: 4 / 5; }

.tabs { margin-bottom: clamp(96px, 11vw, 150px); }
.tablist { display: flex; flex-wrap: wrap; gap: 0 36px; border-bottom: 1px solid var(--line-dark); margin-bottom: 40px; }
.tab { background: none; border: 0; padding: 16px 0; cursor: pointer; font-family: var(--f-ui); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: rgba(244, 239, 230, .6); position: relative; min-height: 44px; }
.tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform 600ms var(--ease); }
.tab[aria-selected="true"] { color: var(--ivory); }
.tab[aria-selected="true"]::after { transform: scaleX(1); }
@media (max-width: 600px) {
  .tablist { flex-wrap: nowrap; overflow-x: auto; gap: 0 24px; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 0 var(--gutter); scrollbar-width: none; }
  .tablist::-webkit-scrollbar { display: none; }
  .tab { flex: none; }
}
.tabpanel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; }
.tabpanel[hidden] { display: none; }
.cred { display: flex; gap: 20px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--line-dark); }
.cred__logo { flex: none; width: 52px; height: 52px; background: var(--paper); display: flex; align-items: center; justify-content: center; padding: 6px; }
.cred__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cred__logo--icon { background: transparent; border: 1px solid var(--line-dark); color: var(--gold-text); padding: 12px; }
.cred__logo--icon svg { width: 100%; height: 100%; }
.cred h4 { font-family: var(--f-body); font-weight: 400; font-size: 16px; line-height: 1.5; margin-bottom: 2px; }
.cred p { margin: 0; font-size: 14.5px; color: rgba(244, 239, 230, .66); line-height: 1.55; }
.tabpanel__img { grid-column: 1 / -1; margin-top: 32px; max-width: 640px; }
@media (max-width: 760px) { .tabpanel { grid-template-columns: 1fr; } }

.logowall-band { background: var(--ivory); color: var(--ink); padding: clamp(72px, 9vw, 120px) 0; }
.logowall { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.logo-tile { aspect-ratio: 3 / 2; background: #FFFDF8; border: 1px solid rgba(35,38,31,.08); border-radius: 6px; display: flex; align-items: center; justify-content: center; padding: 16px; }
.logo-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-tile span { font-family: var(--f-latin-display-sm); font-size: 16px; color: var(--mist-ink); text-align: center; line-height: 1.25; }

.community { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-dark); }
.community a { padding: 32px 20px 32px 0; text-decoration: none; display: block; transition: color 600ms var(--ease); }
.community a + a { padding-left: 20px; border-left: 1px solid var(--line-dark); }
.community strong { display: block; font-family: var(--f-latin-display); font-weight: 400; font-size: clamp(40px, 4.4vw, 60px); line-height: 1; color: var(--ivory); margin-bottom: 10px; }
.community small { display: block; white-space: nowrap; color: var(--gold-text); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-family: var(--f-ui); }
.community span { display: block; color: rgba(244, 239, 230, .7); font-size: 14px; margin-top: 4px; }
.community a:hover strong { color: var(--gold-soft); }
@media (max-width: 760px) {
  .community { grid-template-columns: 1fr 1fr; }
  .community a, .community a + a { padding: 24px 12px 24px 0; border-left: 0; }
  .community a:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--line-dark); }
  .community a:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
}

/* =====================================================================
   STORIES
   ===================================================================== */
.carousel { position: relative; }
.carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.carousel__track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: center; padding: 0 clamp(0px, 6vw, 96px); text-align: center; }
.slide blockquote { margin: 0 auto 40px; max-width: 900px; font-family: var(--f-display); font-weight: 300; font-size: clamp(24px, 3.1vw, 40px); line-height: 1.42; }
html[lang="th"] .slide blockquote { font-size: clamp(20px, 2.4vw, 30px); line-height: 1.75; font-weight: 400; }
.slide blockquote::before { content: '“'; display: block; font-family: var(--f-latin-display); font-size: 80px; line-height: .6; color: var(--gold-text); margin-bottom: 24px; }
.slide figcaption { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.avatar { width: 125px; height: 125px; border-radius: 50%; overflow: hidden; background: var(--gold); color: var(--forest-deep); display: flex; align-items: center; justify-content: center; font-family: var(--f-latin-display); font-size: 29px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.slide cite { font-style: normal; font-family: var(--f-display-sm); font-size: 20px; }
.slide .role { font-size: 14px; color: var(--mist-ink); max-width: 480px; }
.carousel__nav { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 48px; }
.arrow { width: 52px; height: 52px; border: 1px solid var(--line-light); background: transparent; cursor: pointer; position: relative; transition: border-color 500ms var(--ease); }
.arrow:hover { border-color: var(--gold-text); }
.arrow::before { content: ''; position: absolute; left: 16px; right: 16px; top: 50%; height: 1px; background: var(--ink); }
.arrow::after { content: ''; position: absolute; top: 50%; width: 8px; height: 8px; border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); }
.arrow--prev::after { left: 17px; transform: translateY(-50%) rotate(-135deg); }
.arrow--next::after { right: 17px; transform: translateY(-50%) rotate(45deg); }
.counter { font-family: var(--f-latin-display-sm); font-size: 18px; letter-spacing: .2em; min-width: 90px; text-align: center; }

.gallery-wrap { margin-top: clamp(64px, 8vw, 112px); display: block; }
.stories-videos { margin-top: clamp(96px, 11vw, 150px); display: grid; grid-template-columns: repeat(3, minmax(0, 320px)); justify-content: center; gap: clamp(20px, 3vw, 40px); }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 20px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gallery figcaption { font-family: var(--f-ui); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mist-ink); padding-top: 10px; }
.video-card { position: relative; }
.video-card__frame { box-shadow: 0 30px 60px -34px rgba(0,0,0,.45); }
.video-card__frame { position: relative; aspect-ratio: 9 / 16; background: var(--forest); overflow: hidden; }
.video-card__frame img, .video-card__frame video { width: 100%; height: 100%; object-fit: cover; }
.video-card__play { position: absolute; inset: 0; border: 0; background: rgba(35, 38, 31, .25); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 600ms var(--ease); }
.video-card__play:hover { background: rgba(35, 38, 31, .1); }
.video-card__play span { width: 76px; height: 76px; border: 1px solid var(--ivory); border-radius: 50%; position: relative; }
.video-card__play span::after { content: ''; position: absolute; left: 31px; top: 25px; border-left: 18px solid var(--ivory); border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.video-card p { font-size: 13px; color: var(--mist-ink); margin-top: 12px; }
.video-card .eyebrow { margin: 16px 0 0; }
@media (max-width: 860px) {
  .gallery-wrap { grid-template-columns: 1fr; }
  .video-card { position: relative; }
}
@media (max-width: 860px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .stories-videos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; justify-content: start; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 64px; margin-bottom: -32px; scroll-padding: 0 var(--gutter); scrollbar-width: none; } .stories-videos::-webkit-scrollbar { display: none; } .stories-videos .video-card { scroll-snap-align: center; } }
@media (max-width: 520px) { .gallery { grid-template-columns: 1fr; gap: 28px; } }

/* =====================================================================
   ORGANIZATIONS
   ===================================================================== */
.orgs-title-en { font-family: var(--f-latin-display-sm); font-style: italic; color: var(--gold-soft); font-size: 20px; margin-bottom: 20px; display: block; }
.pains { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-dark); margin-bottom: clamp(72px, 8vw, 112px); }
.pains > div { padding: 30px 24px 30px 0; }
.pains > div + div { padding-left: 24px; border-left: 1px solid var(--line-dark); }
.pains h3 { font-family: var(--f-latin-display); font-size: 26px; color: var(--gold-soft); margin-bottom: 6px; }
.pains p { margin: 0; color: rgba(244, 239, 230, .75); }
.formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: clamp(72px, 8vw, 112px); }
.format { border: 1px solid var(--line-dark); padding: 40px 32px 36px; }
.format h3 { font-family: var(--f-latin-display); font-size: 34px; margin-bottom: 4px; }
.format__dur { display: block; color: var(--gold-text); font-size: 14px; margin-bottom: 16px; }
.format p { margin: 0; color: rgba(244, 239, 230, .75); font-size: 16px; }
.topics { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); margin-bottom: clamp(72px, 8vw, 112px); }
.topics h3 { font-family: var(--f-ui); font-weight: 400; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 18px; }
html[lang="th"] .topics h3 { letter-spacing: .05em; font-size: 14px; }
.topics li { font-family: var(--f-latin-display-sm); font-size: 21px; padding: 9px 0; border-bottom: 1px solid var(--line-dark); }
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: clamp(64px, 7vw, 96px); }
.case__img { aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 22px; background: var(--forest-2); }
.case__img img { width: 100%; height: 100%; object-fit: cover; }
.case small { display: block; font-family: var(--f-ui); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 8px; }
.case h3 { font-family: var(--f-latin-display); font-size: 24px; font-style: italic; margin-bottom: 8px; }
.case p { margin: 0; color: rgba(244, 239, 230, .72); font-size: 15px; }
@media (max-width: 860px) {
  .pains, .formats, .cases, .topics { grid-template-columns: 1fr; }
  .pains > div, .pains > div + div { padding: 24px 0; border-left: 0; }
  .pains > div + div { border-top: 1px solid var(--line-dark); }
  .case__img { aspect-ratio: 4 / 3; }
}

/* =====================================================================
   PASSPORT
   ===================================================================== */
.passport { display: grid; grid-template-columns: 5fr 7fr; min-height: 80vh; background: var(--forest-deep); color: var(--ivory); }
.passport__text { display: flex; flex-direction: column; justify-content: center; padding: var(--section-y) var(--gutter); max-width: 620px; margin-left: auto; }
.passport__text h2 { font-family: var(--f-latin-display); font-size: clamp(34px, 4vw, 56px); margin-bottom: 14px; }
.passport__sub { font-family: var(--f-latin-display-sm); font-style: italic; color: var(--gold-soft); font-size: 21px; margin-bottom: 28px; display: block; }
.passport__text p { color: rgba(244, 239, 230, .8); margin: 0; }
.passport__img { position: relative; overflow: hidden; }
.passport__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .passport { grid-template-columns: 1fr; min-height: 0; }
  .passport__img { aspect-ratio: 3 / 2; order: -1; }
  .passport__text { padding: 64px var(--gutter) 88px; margin: 0; }
}

/* =====================================================================
   FORM
   ===================================================================== */
.apply { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(40px, 7vw, 112px); align-items: start; }
.apply__intro { position: sticky; top: 110px; }
.apply__intro p { color: var(--mist-ink); }
.apply__card { background: var(--paper); padding: clamp(28px, 4vw, 56px); }
@media (max-width: 960px) { .apply { grid-template-columns: 1fr; } .apply__intro { position: static; } }

.progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 44px; }
.progress li { font-family: var(--f-ui); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--mist-ink); padding-top: 14px; position: relative; }
html[lang="th"] .progress li { letter-spacing: .04em; font-size: 12px; }
.progress li::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-light); }
.progress li::after { content: ''; position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--gold); transition: width 900ms var(--ease); }
.progress li.is-done::after, .progress li.is-current::after { width: 100%; }
.progress li.is-current { color: var(--ink); }
.step-of { font-size: 13px; color: var(--mist-ink); margin-bottom: 8px; display: block; }
.fstep[hidden] { display: none; }
.fstep h3 { font-size: clamp(24px, 2.4vw, 30px); margin-bottom: 32px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 28px; }
.fgrid .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .fgrid { grid-template-columns: 1fr; } }
.field label, .field legend { display: block; font-size: 14px; color: var(--ink); margin-bottom: 8px; font-weight: 400; padding: 0; }
.field .req { color: var(--gold-ink); margin-left: 4px; }
.field .opt { color: var(--mist-ink); font-size: 12px; margin-left: 6px; }
.field .hint { display: block; font-size: 13px; color: var(--mist-ink); margin-top: 6px; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field input[type="number"], .field textarea, .field select {
  width: 100%; border: 0; border-bottom: 1px solid rgba(35, 38, 31, .35); background: transparent; padding: 10px 0; font: inherit; font-size: 17px; color: var(--ink); border-radius: 0; min-height: 44px; transition: border-color 500ms var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; border: 1px solid rgba(35, 38, 31, .25); padding: 12px 14px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold-text); box-shadow: 0 1px 0 var(--gold); }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--error); }
.err { display: block; color: var(--error); font-size: 13.5px; margin-top: 8px; min-height: 0; }
.err:empty { display: none; }
.opts { display: flex; flex-wrap: wrap; gap: 10px; }
.opt-pill { position: relative; }
.opt-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt-pill span { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 16px; border: 1px solid rgba(35, 38, 31, .22); font-size: 15px; cursor: pointer; transition: all 450ms var(--ease); line-height: 1.4; }
.opt-pill input:checked + span { background: var(--forest); border-color: var(--forest); color: var(--ivory); }
.opt-pill input:focus-visible + span { outline: 1px solid var(--gold); outline-offset: 3px; }
.opt-pill span:hover { border-color: var(--forest); }
.consent { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; }
.consent input { width: 20px; height: 20px; margin-top: 4px; flex: none; accent-color: var(--forest); }
.consent a, .consent button.linklike { color: var(--gold-ink); }
button.linklike { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; font-size: inherit; }
.corp-extra { grid-column: 1 / -1; border-top: 1px solid var(--line-light); padding-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.corp-extra[hidden] { display: none; }
.corp-extra .note { grid-column: 1 / -1; font-family: var(--f-ui); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); }
@media (max-width: 600px) { .corp-extra { grid-template-columns: 1fr; } }
.preselected { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; background: var(--stone); padding: 14px 18px; margin-bottom: 32px; font-size: 15px; }
.preselected[hidden] { display: none; }
.preselected strong { font-weight: 400; font-family: var(--f-display-sm); }
.factions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 44px; }
.factions .btn { min-width: 160px; }
.form-summary { color: var(--error); font-size: 14.5px; margin-top: 16px; }
.form-summary:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.result { text-align: center; padding: 24px 0; }
.result[hidden] { display: none; }
.result svg { width: 64px; height: 40px; color: var(--gold-text); margin: 0 auto 24px; }
.result h3 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 14px; }
.result p { color: var(--mist-ink); max-width: 420px; margin: 0 auto 32px; }
.result .btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 24px; align-items: center; }
.fail-box { border: 1px solid var(--error); padding: 22px 24px; margin-top: 28px; }
.fail-box[hidden] { display: none; }
.fail-code { font-size: 12px; color: var(--mist-ink); margin-top: -4px; }
.fail-code:empty { display: none; }
.fail-box h4 { font-family: var(--f-display-sm); font-size: 20px; color: var(--error); margin-bottom: 6px; }
.fail-box p { margin: 0 0 16px; color: var(--mist-ink); font-size: 15px; }
.fail-box .btns { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq details { border-top: 1px solid var(--line-light); }
.faq details:last-child { border-bottom: 1px solid var(--line-light); }
.faq summary { list-style: none; cursor: pointer; padding: 28px 56px 28px 0; position: relative; font-family: var(--f-display-sm); font-size: clamp(19px, 1.8vw, 23px); line-height: 1.5; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ''; position: absolute; right: 8px; top: 50%; width: 18px; height: 1px; background: var(--gold-ink); transition: transform 600ms var(--ease); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0); }
.faq .answer { padding: 0 56px 32px 0; color: var(--mist-ink); max-width: 760px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer { background: var(--forest-deep); color: var(--ivory); padding: var(--section-y) 0 40px; }
.footer__title { font-family: var(--f-latin-display); font-size: clamp(30px, 4.6vw, 64px); letter-spacing: .06em; line-height: 1.15; white-space: pre-line; margin-bottom: 28px; }
.footer__title em { color: var(--gold-soft); }
.footer__quote { font-family: var(--f-latin-display-sm); font-style: italic; font-size: clamp(19px, 1.8vw, 24px); color: rgba(244, 239, 230, .78); margin-bottom: clamp(64px, 8vw, 104px); max-width: 640px; }
.footer__cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; border-top: 1px solid var(--line-dark); padding-top: 48px; }
.footer__cols h3 { font-family: var(--f-latin-display-sm); font-size: 14px; letter-spacing: .32em; color: var(--gold-text); margin-bottom: 18px; }
.footer__cols li { margin-bottom: 8px; font-size: 15px; color: rgba(244, 239, 230, .82); }
.footer__cols a { text-decoration: none; }
.footer__cols a:hover { color: var(--gold-soft); text-decoration: underline; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--line-dark); font-size: 13px; color: rgba(244, 239, 230, .6); }
.footer__bottom img { height: 44px; width: auto; }
.footer__bottom button { background: none; border: 0; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; font-size: 13px; }
@media (max-width: 760px) { .footer__cols { grid-template-columns: 1fr; } }

/* =====================================================================
   STICKY MOBILE BAR + LANGUAGE PROMPT
   ===================================================================== */
.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(39, 43, 33, .96); border-top: 1px solid var(--line-dark); transform: translateY(110%); transition: transform 700ms var(--ease); }
.sticky-bar.is-visible { transform: none; }
.sticky-bar .btn { flex: 1; min-height: 48px; padding: 10px 14px; color: var(--forest-deep); }
.sticky-bar__line { flex: none; width: 52px; min-height: 48px; border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center; color: var(--gold-soft); }
.sticky-bar__line svg { width: 26px; height: 26px; }
@media (max-width: 1080px) {
  .sticky-bar { display: flex; }
  body { padding-bottom: 72px; }
}

.langbar { position: fixed; z-index: 95; left: 16px; right: 16px; bottom: 88px; max-width: 420px; margin-left: auto; background: var(--paper); color: var(--ink); padding: 18px 20px; box-shadow: 0 20px 48px -20px rgba(0, 0, 0, .5); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-family: var(--f-ui); font-size: 15px; animation: dialog-in 800ms var(--ease); }
.langbar[hidden] { display: none; }
.langbar p { margin: 0; flex: 1 1 100%; }
.langbar .btn { min-height: 40px; padding: 8px 18px; }
.langbar .linklike { color: var(--mist-ink); font-size: 14px; }
@media (min-width: 1081px) { .langbar { bottom: 24px; } }

html[lang="th"] .community small { letter-spacing: .04em; font-size: 13px; }

/* =====================================================================
   AVENIR WEBFONT (ใส่เมื่อซื้อ license แล้ว)
   @font-face { font-family: 'Avenir Next'; src: url('/assets/fonts/AvenirNext-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
   @font-face { font-family: 'Avenir Next'; src: url('/assets/fonts/AvenirNext-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
   ===================================================================== */

/* ---------- misc ---------- */
.section--tight { padding: clamp(72px, 8vw, 112px) 0; }
.section-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.section-head--row .h2 { margin-bottom: 0; }
.btn--sm { min-height: 42px; padding: 8px 20px; font-size: 11px; }
html[lang="th"] .btn--sm { font-size: 13px; }
.btn .ico, .link-btn .ico { width: 20px; height: 20px; flex: none; }
.empty { text-align: center; padding: 48px 24px; border: 1px solid var(--line-light); }
.empty p { color: var(--mist-ink); margin-bottom: 20px; }
.empty-line { color: var(--mist-ink); }
.arrow-line { width: 48px; height: 12px; color: var(--gold); flex: none; }
.viewtoggle { display: inline-flex; gap: 0; border: 1px solid var(--line-light); margin-bottom: 40px; }
.viewtoggle .chip { border: 0; margin: 0; }
.chips--sm { margin-bottom: 14px; }
.chips--sm .chip { min-height: 38px; padding: 6px 16px; font-size: 12px; }

/* ---------- In the Room ---------- */
.room { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(40px, 7vw, 112px); align-items: center; }
.room__video { justify-self: center; width: min(100%, 440px); }
.room__video video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--forest); max-height: 82vh; }
@media (max-width: 860px) { .room { grid-template-columns: 1fr; } .room__video { width: 100%; max-width: 420px; } }
/* In the Room — 3 คลิปแนวตั้งเรียงกัน */
.room.room--trio { display: block; }
.room--trio .room__text { max-width: 760px; margin-bottom: clamp(36px, 4vw, 56px); }
.room__trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); max-width: calc(66vh * 9 / 16 * 3 + 56px); }
.room__clip { margin: 0; }
.room__frame { aspect-ratio: 9 / 16; overflow: hidden; background: var(--forest); }
.room__frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.room__clip figcaption { margin-top: 20px; color: var(--ink); display: flex; align-items: baseline; gap: 14px; }
.room__cap { display: grid; gap: 6px; }
.room__t { font-family: var(--f-latin-display-sm); font-size: clamp(21px, 1.8vw, 25px); font-weight: 500; line-height: 1.2; color: var(--ink); }
.room__d { font-size: 15px; line-height: 1.65; color: var(--mist-ink); }
.room__n { font-family: var(--f-ui); font-size: 11px; letter-spacing: .16em; color: var(--gold-ink); }
@media (max-width: 760px) {
  .room__trio { max-width: none; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .room__trio::-webkit-scrollbar { display: none; }
  .room__clip { scroll-snap-align: center; }
}

/* ---------- class cards (schedule / upcoming) ---------- */
.cc-list { display: grid; gap: 16px; }
.cc { display: grid; grid-template-columns: 110px 1fr auto; gap: 28px; align-items: center; background: var(--paper); padding: 28px 32px; border-left: 2px solid var(--gold); }
.cc--past { opacity: .55; border-left-color: var(--line-light); }
.cc__date { text-align: center; border-right: 1px solid var(--line-light); padding-right: 24px; }
.cc__date strong { display: block; font-family: var(--f-latin-display); font-weight: 400; font-size: 56px; line-height: 1; color: var(--ink); }
.cc__date span { display: block; font-size: 13px; color: var(--mist-ink); text-transform: uppercase; letter-spacing: .12em; }
.cc__fmt { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); }
html[lang="th"] .cc__fmt { letter-spacing: .05em; font-size: 12.5px; }
.cc__main h3 { font-size: clamp(22px, 2vw, 28px); margin: 4px 0 6px; }
.cc__main h3 a { text-decoration: none; }
.cc__main h3 a:hover { color: var(--gold-ink); }
.cc__main p { margin: 0; color: var(--mist-ink); font-size: 15.5px; }
.cc__side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; }
.cc__price strong { font-family: var(--f-latin-display); font-size: 24px; font-weight: 500; }
.cc__price s { color: var(--mist-ink); font-size: 14px; margin-left: 6px; }
.cc__btns { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 18px; }
.status { display: inline-block; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; border: 1px solid var(--gold); color: var(--gold-ink); }
html[lang="th"] .status { letter-spacing: .03em; font-size: 12.5px; }
.status--earlyBird { background: var(--gold); color: var(--forest-deep); }
.status--almost-full { border-color: var(--error); color: var(--error); }
.status--full, .status--past { border-color: var(--line-light); color: var(--mist-ink); }
.addcal { position: relative; font-size: 13px; }
.addcal summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--mist-ink); min-height: 40px; }
.addcal summary::-webkit-details-marker { display: none; }
.addcal summary svg { width: 18px; height: 18px; }
.addcal div { position: absolute; right: 0; top: 100%; z-index: 5; background: var(--paper); border: 1px solid var(--line-light); display: flex; flex-direction: column; min-width: 210px; box-shadow: 0 18px 40px -20px rgba(0,0,0,.35); }
.addcal div a, .addcal div button { padding: 12px 16px; text-align: left; background: none; border: 0; cursor: pointer; font-size: 14px; text-decoration: none; }
.addcal div a:hover, .addcal div button:hover { background: var(--stone); }
@media (max-width: 720px) {
  .cc { grid-template-columns: 72px 1fr; padding: 22px 20px; gap: 18px; }
  .cc__date { padding-right: 16px; }
  .cc__date strong { font-size: 40px; }
  .cc__side { grid-column: 1 / -1; align-items: flex-start; text-align: left; border-top: 1px solid var(--line-light); padding-top: 14px; }
  .cc__btns { justify-content: flex-start; }
  .addcal div { left: 0; right: auto; }
}

/* ---------- 3P ---------- */
.threep { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: center; background: var(--forest); color: var(--ivory); padding: clamp(40px, 6vw, 88px); margin-bottom: clamp(72px, 8vw, 112px); }
.threep__diagram { text-align: center; color: var(--gold); }
.venn { width: 100%; max-width: 380px; margin: 0 auto; }
.venn circle { stroke: var(--gold); opacity: .8; }
.venn text { fill: var(--ivory); stroke: none; font-family: var(--f-latin-display-sm); font-size: 21px; letter-spacing: .08em; }
.threep__note { font-size: 14px; color: rgba(244, 239, 230, .7); margin-top: 12px; }
.threep .h2 { margin-bottom: 10px; }
.threep__core { font-family: var(--f-latin-display); font-style: italic; color: var(--gold-soft); font-size: clamp(20px, 2vw, 26px); margin-bottom: 32px; }
.threep__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid var(--line-dark); padding-top: 24px; }
.threep__lead { margin: -8px 0 32px; max-width: 34em; }
.threep__lead-a { font-family: var(--f-display); font-size: clamp(21px, 1.9vw, 26px); line-height: 1.4; color: var(--ivory); margin-bottom: 8px; }
.threep__lead-b { font-size: 15.5px; line-height: 1.75; color: rgba(244, 239, 230, .78); }
.threep__cols { gap: clamp(20px, 2.4vw, 32px); }
.threep__col { border-top: 1px solid var(--gold); padding-top: 18px; }
.threep__cols { border-top: 0; padding-top: 0; }
.threep__col h4 { font-family: var(--f-latin-display); font-size: 26px; line-height: 1.1; color: var(--gold-soft); margin-bottom: 6px; }
.threep__def { font-size: 14.5px; line-height: 1.6; color: rgba(244, 239, 230, .72); margin-bottom: 18px; min-height: 3.2em; }
.threep__skills { list-style: none; display: grid; gap: 16px; }
.threep__skills li { display: grid; grid-template-columns: 26px 1fr; align-items: baseline; }
.threep__n { font-family: var(--f-ui); font-size: 11px; letter-spacing: .14em; color: var(--gold-text); }
.threep__sk { display: grid; gap: 3px; }
.threep__sk-th { font-size: 15.5px; line-height: 1.5; color: var(--ivory); }
.threep__sk-en { font-family: var(--f-latin-display-sm); font-style: italic; font-size: 15px; line-height: 1.35; color: var(--gold-soft); opacity: .85; }
/* Why it works — สถิติใต้ 3P */
.why { grid-column: 1 / -1; border-top: 1px solid var(--line-dark); padding-top: clamp(36px, 4vw, 56px); margin-top: clamp(8px, 2vw, 24px); }
.why > .eyebrow { display: block; margin-bottom: 28px; }
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.why__card { margin: 0; padding: clamp(26px, 2.6vw, 36px) clamp(22px, 2.2vw, 32px); border: 1px solid rgba(184, 153, 90, .38); background: rgba(255, 255, 255, .025); display: flex; flex-direction: column; }
.why__big { font-family: var(--f-latin-display); font-weight: 300; font-size: clamp(52px, 5vw, 72px); line-height: 1; color: var(--gold-soft); margin: 0 0 18px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; white-space: nowrap; }
.why__vs { font-style: italic; font-size: .4em; color: rgba(244, 239, 230, .6); letter-spacing: .04em; }
.why__big-b { font-size: .62em; color: rgba(205, 184, 138, .72); }
.why__d { font-size: 15px; line-height: 1.7; color: rgba(244, 239, 230, .82); margin: 0 0 22px; flex: 1; }
.why__src { font-size: 12px; letter-spacing: .06em; color: rgba(244, 239, 230, .55); border-top: 1px solid var(--line-dark); padding-top: 14px; }
.why__src a { color: var(--gold-text); text-decoration: none; border-bottom: 1px solid rgba(196, 167, 103, .45); transition: color 300ms var(--ease), border-color 300ms var(--ease); }
.why__src a:hover, .why__src a:focus-visible { color: var(--gold-soft); border-color: var(--gold-soft); }
.why__formula { margin: clamp(36px, 4vw, 52px) 0 0; text-align: center; font-family: var(--f-display); font-size: clamp(22px, 2.3vw, 30px); line-height: 1.5; color: var(--ivory); display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 18px; }
.why__term { white-space: nowrap; }
.why__term:last-child { color: var(--gold-soft); }
.why__op { font-family: var(--f-ui); font-weight: 300; color: var(--gold); font-size: 1.05em; }
@media (max-width: 960px) { .why__grid { grid-template-columns: 1fr; } .why__formula { flex-direction: column; align-items: center; gap: 2px; } .why__term { white-space: normal; } }
@media (max-width: 960px) { .threep__def { min-height: 0; } .threep__col + .threep__col { margin-top: 8px; } }
@media (max-width: 960px) { .threep { grid-template-columns: 1fr; } .threep__cols { grid-template-columns: 1fr; } }

/* ---------- program groups ---------- */
.pgroup { margin-bottom: clamp(56px, 6vw, 88px); }
.pgroup__head { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr auto; gap: 8px 32px; align-items: baseline; border-top: 1px solid var(--ink); padding-top: 18px; margin-bottom: 28px; }
.pgroup__head h3 { font-family: var(--f-latin-display); font-size: clamp(28px, 2.6vw, 36px); }
.pgroup__head p { margin: 0; color: var(--mist-ink); }
@media (max-width: 760px) { .pgroup__head { grid-template-columns: 1fr; } }
.card__link { text-decoration: none; }
.card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.card__title { font-size: 24px; margin-bottom: 4px; }
.card__proof { display: flex; gap: 12px; align-items: center; font-size: 14px; color: var(--mist-ink); margin-bottom: 16px; }
.card__proof small { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.card__proof .cred__logo { width: 44px; height: 44px; border: 1px solid var(--line-light); }
.placeholder .todo { position: absolute; bottom: 10px; left: 10px; }
.placeholder { position: relative; }

/* ---------- accordion topics ---------- */
.topics-acc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); margin-bottom: clamp(72px, 8vw, 112px); }
.acc__title { font-family: var(--f-latin-display); font-size: clamp(28px, 2.6vw, 36px); margin-bottom: 18px; color: var(--gold-soft); }
.acc__item { border-top: 1px solid var(--line-dark); }
.acc__item:last-child { border-bottom: 1px solid var(--line-dark); }
.acc__item summary { list-style: none; cursor: pointer; display: flex; gap: 16px; align-items: baseline; padding: 16px 40px 16px 0; position: relative; font-family: var(--f-latin-display-sm); font-size: 21px; line-height: 1.35; }
.acc__item summary::-webkit-details-marker { display: none; }
.acc__item summary::before, .acc__item summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 14px; height: 1px; background: var(--gold); transition: transform 600ms var(--ease); }
.acc__item summary::after { transform: rotate(90deg); }
.acc__item[open] summary::after { transform: rotate(0); }
.acc__n { font-family: var(--f-ui); font-size: 11px; letter-spacing: .2em; color: var(--gold-text); }
.acc__body { display: grid; grid-template-columns: auto 1fr; gap: 20px; padding: 0 0 22px 34px; }
.acc__body p { color: rgba(244, 239, 230, .82); font-size: 15.5px; margin-bottom: 8px; }
.acc__img { width: 120px; aspect-ratio: 4 / 3; overflow: hidden; }
.acc__img img { width: 100%; height: 100%; object-fit: cover; }
.acc__body > div:only-child { grid-column: 1 / -1; }
@media (max-width: 860px) { .topics-acc { grid-template-columns: 1fr; } .acc__body { grid-template-columns: 1fr; padding-left: 0; } .acc__img { width: 100%; max-width: 280px; } }

/* =====================================================================
   PROGRAM DETAIL PAGES
   ===================================================================== */
.pd-hero { position: relative; min-height: 88svh; display: flex; align-items: flex-end; color: var(--ivory); background: var(--forest); isolation: isolate; }
.pd-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.pd-hero__media img, .pd-hero__media .placeholder { width: 100%; height: 100%; object-fit: cover; }
.pd-hero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(39, 43, 33, .95) 0%, rgba(39, 43, 33, .7) 45%, rgba(39, 43, 33, .3) 100%); }
.pd-hero__content { padding-top: calc(var(--nav-h) + 48px); padding-bottom: clamp(56px, 8vw, 104px); }
.pd-back { display: inline-block; font-size: 13px; letter-spacing: .1em; text-decoration: none; color: rgba(244, 239, 230, .8); margin-bottom: 40px; }
.pd-hero__title { font-size: clamp(38px, 5.4vw, 80px); line-height: 1.12; max-width: 980px; margin-bottom: 20px; }
html[lang="th"] .pd-hero__title { font-size: clamp(32px, 4.4vw, 60px); line-height: 1.45; }
.pd-hero__sub { font-size: clamp(17px, 1.5vw, 21px); color: rgba(244, 239, 230, .88); max-width: 720px; margin-bottom: 14px; }
.pd-hero__meta { font-family: var(--f-ui); font-size: 14px; letter-spacing: .08em; color: var(--gold-soft); margin-bottom: 32px; }
.pd-ctas { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.pd-ctas .btn { color: inherit; }
.pd-ctas .btn--solid { color: var(--forest-deep); }
.bg-ivory .pd-ctas .btn:not(.btn--solid) { border-color: var(--ink); }
.share-btn { color: var(--gold-soft) !important; }
.share-btn::after { display: none; }
.pd-hook { padding: clamp(88px, 10vw, 144px) 0 clamp(40px, 5vw, 72px); }
.pd-hook__lead { font-family: var(--f-display); font-size: clamp(28px, 3.2vw, 42px); line-height: 1.35; margin-bottom: 36px; }
html[lang="th"] .pd-hook__lead { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.6; }
.pd-hook p:not(.pd-hook__lead) { color: var(--mist-ink); font-size: 18px; }
.pd-intro { padding: clamp(40px, 5vw, 72px) 0 clamp(88px, 10vw, 144px); }
.pd-intro__title { font-family: var(--f-latin-display); font-size: clamp(22px, 2.2vw, 30px); letter-spacing: .08em; margin-bottom: 20px; color: var(--gold-ink); }
html[lang="th"] .pd-intro__title { font-family: var(--f-display); letter-spacing: .02em; }
.pd-intro__body { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.8; }
.pd-intro--poster { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.pd-poster { margin: 0; box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); }
.pd-poster img { width: 100%; height: auto; display: block; }
.pd-intro__text { max-width: 760px; }
.pd-posters { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 32px); margin-top: clamp(40px, 5vw, 64px); }
.pd-posters .pd-poster img { aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 760px) {
  .pd-posters { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 48px; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .pd-posters::-webkit-scrollbar { display: none; }
  .pd-posters .pd-poster { scroll-snap-align: center; }
}
@media (max-width: 860px) { .pd-intro--poster { grid-template-columns: 1fr; } }
.pd-cards, .pd-steps, .pd-speakers, .pd-list, .pd-fromto, .pd-timeline, .pd-fornot, .pd-packages { padding: clamp(88px, 10vw, 144px) 0; }
.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tool { background: var(--paper); padding: 36px 30px 34px; }
.tool__n { font-family: var(--f-latin-display-sm); color: var(--gold-ink); font-size: 16px; letter-spacing: .14em; display: block; margin-bottom: 18px; }
.tool h3 { font-family: var(--f-latin-display); font-size: 26px; margin-bottom: 10px; }
.tool p { margin: 0; color: var(--mist-ink); font-size: 16px; }
.tool--img { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; padding: 0; }
.tool--img .tool__img { grid-row: span 3; }
.tool--img .tool__img img { width: 100%; height: 100%; object-fit: cover; }
.tool--img .tool__n { margin-top: 34px; }
.tool--img p { padding-right: 28px; padding-bottom: 30px; }
@media (max-width: 960px) { .tools { grid-template-columns: 1fr 1fr; } .tool--img { grid-column: 1 / -1; } }
@media (max-width: 600px) { .tools { grid-template-columns: 1fr; } .tool--img { grid-template-columns: 1fr; } .tool--img .tool__img { grid-row: auto; aspect-ratio: 3 / 2; } .tool--img > *:not(.tool__img) { padding-left: 28px; } }
.pd-closing { padding: clamp(88px, 10vw, 144px) 0; }
.pd-closing .divider { margin-bottom: 40px; }
.pd-closing p { font-size: 18px; color: var(--mist-ink); }
.pd-closing__em { font-family: var(--f-display); font-style: italic; font-size: clamp(28px, 3.4vw, 44px) !important; color: var(--ink) !important; margin-top: 24px; }
html[lang="th"] .pd-closing__em { font-style: normal; }
.pd-details { padding: clamp(72px, 8vw, 112px) 0; background: var(--forest); color: var(--ivory); }
.pd-dl { margin: 0 0 36px; border-top: 1px solid var(--line-dark); }
.pd-dl > div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line-dark); }
.pd-dl dt { color: var(--gold-text); font-size: 14px; letter-spacing: .08em; }
.pd-dl dd { margin: 0; font-size: 18px; }
.pd-dl dd strong { font-family: var(--f-latin-display); font-weight: 500; font-size: 30px; }
.price-eb { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.price-eb__tag { background: var(--gold); color: var(--forest-deep); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 4px 10px; }
.price-eb__until { font-size: 14px; color: var(--gold-soft); }
.price-reg { display: block; font-size: 14px; color: rgba(244, 239, 230, .7); margin-top: 6px; }
.pd-actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.pd-details .btn--ink { border-color: var(--gold); color: var(--ivory); }
.pd-details .btn--ink:hover { background: var(--gold); color: var(--forest-deep); }
.pd-details .addcal summary { color: var(--gold-soft); }
.pd-details .addcal div { color: var(--ink); }
.pd-details .status--earlyBird { color: var(--forest-deep); }
.pd-details .status--open { color: var(--gold-soft); }
.pd-closed { font-size: 18px; color: var(--gold-soft); margin-bottom: 20px; }
@media (max-width: 600px) { .pd-dl > div { grid-template-columns: 1fr; gap: 4px; } }
.speakers { display: grid; gap: 24px; }
.speakers--2 { grid-template-columns: 1fr 1fr; }
.speaker { display: grid; grid-template-columns: 120px 1fr; gap: 28px; align-items: center; background: var(--paper); padding: 28px; }
.speaker__img { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; }
.speaker__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.speaker h3 { font-size: 22px; margin-bottom: 4px; }
.speaker__role { display: block; font-size: 13px; letter-spacing: .08em; color: var(--gold-ink); margin-bottom: 8px; }
.speaker p { margin: 0; color: var(--mist-ink); font-size: 15.5px; }
.journey { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; font-family: var(--f-display); font-size: clamp(20px, 2vw, 26px); margin-bottom: 36px; }
@media (max-width: 860px) { .speakers--2 { grid-template-columns: 1fr; } .speaker { grid-template-columns: 88px 1fr; gap: 18px; padding: 22px; } .speaker__img { width: 88px; height: 88px; } }
.pd-cta { padding: clamp(88px, 10vw, 144px) 0; }
.pd-cta__text { font-family: var(--f-display); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.5; margin-bottom: 14px; }
.pd-cta__note { color: var(--gold-soft); letter-spacing: .12em; margin-bottom: 36px; }
.pd-cta .pd-ctas { justify-content: center; margin-top: 28px; }
.ticks--lg li { font-size: 18px; padding-left: 34px; margin-bottom: 16px; }
.ticks--lg li::before { width: 20px; }
.ticks--muted li { color: var(--mist-ink); }
.ticks--muted li::before { background: var(--mist); }
.steps { counter-reset: none; }
.steps li { display: grid; grid-template-columns: 72px 1fr; gap: 20px; padding: 26px 0; border-top: 1px solid var(--line-light); }
.steps__n { font-family: var(--f-latin-display); font-size: 56px; line-height: .9; color: var(--gold-ink); }
.steps h3 { font-size: 23px; margin-bottom: 6px; }
.steps p { margin: 0; color: var(--mist-ink); }
.shift-quote { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 48px; font-family: var(--f-display-sm); font-size: clamp(19px, 1.9vw, 24px); }
.shift-quote em { font-style: italic; }
.fromto { display: grid; gap: 14px; }
.fromto__row { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; gap: 20px; padding: 28px 0; border-top: 1px solid var(--line-light); }
.fromto__row .arrow-line { justify-self: center; }
.fromto small { display: block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--mist-ink); margin-bottom: 6px; }
.fromto__a p { margin: 0; color: var(--mist-ink); font-size: 18px; }
.fromto__b p { margin: 0; font-family: var(--f-display); font-size: clamp(20px, 2vw, 26px); }
.fromto__b small { color: var(--gold-ink); }
@media (max-width: 760px) { .fromto__row { grid-template-columns: 1fr; gap: 10px; } .fromto__row .arrow-line { justify-self: start; transform: rotate(90deg); margin: 4px 0 4px 8px; width: 28px; } }
.vtimeline { position: relative; padding-left: 36px; }
.vtimeline::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, var(--gold), rgba(184, 153, 90, .25)); }
.vtimeline li { position: relative; padding-bottom: 36px; }
.vtimeline li::before { content: ''; position: absolute; left: -36px; top: 8px; width: 13px; height: 13px; border: 1px solid var(--gold); border-radius: 50%; background: var(--forest); }
.vtimeline__n { font-size: 11px; letter-spacing: .3em; color: var(--gold-text); display: block; margin-bottom: 4px; }
.vtimeline h3 { font-family: var(--f-latin-display); font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 6px; }
.vtimeline p { margin: 0; color: rgba(244, 239, 230, .78); }
.fornot { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); }
.fornot .h3 { margin-bottom: 26px; }
.fornot__not { background: var(--stone); padding: 36px; }
@media (max-width: 860px) { .fornot { grid-template-columns: 1fr; } }
.pd-cred { padding: clamp(72px, 8vw, 112px) 0; background: var(--stone); }
.pd-cred__text { font-family: var(--f-display); font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 28px; }
.pd-cred__logos { display: flex; justify-content: center; gap: 16px; }
.pd-cred__logos .logo-tile { width: 160px; }

/* packages */
.pkg-table { display: grid; border-top: 1px solid var(--ink); margin-bottom: 18px; }
.pkg-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; border-bottom: 1px solid var(--line-light); }
.pkg-row > span { padding: 18px 20px; font-size: 15.5px; }
.pkg-row > span[role="rowheader"] { color: var(--mist-ink); font-size: 14px; letter-spacing: .05em; }
.pkg-row .is-rec { background: var(--forest); color: var(--ivory); }
.pkg-row--head > span { padding-top: 26px; font-family: var(--f-latin-display-sm); font-size: 22px; position: relative; }
.pkg-row--head strong { font-weight: 500; }
.pkg-price { font-family: 'Nunito Sans', 'Kanit Head', 'Helvetica Neue', sans-serif; font-weight: 300; font-size: 22px !important; font-variant-numeric: lining-nums tabular-nums; letter-spacing: .01em; }
.rec-badge { display: inline-block; font-style: normal; font-family: var(--f-ui); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; background: var(--gold); color: var(--forest-deep); padding: 4px 10px; margin-bottom: 10px; }
html[lang="th"] .rec-badge { letter-spacing: .04em; font-size: 12px; }
.pkg-row--head .rec-badge { display: block; width: max-content; }
.pkg-scope { font-size: 13.5px; color: var(--mist-ink); margin-bottom: 56px; }
.pkg-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.pkg { background: var(--paper); padding: 36px 30px; display: flex; flex-direction: column; }
.pkg--rec { background: var(--forest); color: var(--ivory); transform: translateY(-14px); box-shadow: 0 30px 60px -34px rgba(0,0,0,.55); }
.pkg--rec p, .pkg--rec li { color: rgba(244, 239, 230, .86); }
.pkg--rec h4 { color: var(--gold-text); }
.pkg h3 { font-family: var(--f-latin-display); font-size: 28px; margin-bottom: 6px; }
.pkg .pkg__price { font-family: 'Nunito Sans', 'Kanit Head', 'Helvetica Neue', sans-serif; font-weight: 300; font-size: 30px; font-variant-numeric: lining-nums tabular-nums; letter-spacing: .01em; margin-bottom: 8px; }
.pkg__tag { font-size: 13.5px; color: var(--mist-ink); }
.pkg__note { font-family: var(--f-display); font-style: italic; border-left: 1px solid var(--gold); padding-left: 16px; }
.pkg h4 { font-family: var(--f-ui); font-weight: 400; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); margin: 18px 0 8px; }
html[lang="th"] .pkg h4 { letter-spacing: .04em; font-size: 13px; }
.pkg p { font-size: 15.5px; }
.pkg .btn { margin-top: 20px; }
@media (max-width: 960px) {
  .pkg-table { display: none; }
  .pkg-cards { grid-template-columns: 1fr; }
  .pkg--rec { order: -1; transform: none; }
}

/* ---------- schedule page ---------- */
.sched { padding-top: calc(var(--nav-h) + 64px); }
.sched__controls { margin-bottom: 36px; }
.month { margin-bottom: 56px; }
.month__title { font-family: var(--f-latin-display); font-size: clamp(30px, 3.4vw, 46px); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 20px; }
html[lang="th"] .month__title { font-family: var(--f-display); letter-spacing: .02em; text-transform: none; }
.month--past { margin-top: 72px; opacity: .8; }
.sched__private { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; border: 1px solid var(--line-light); padding: 28px 32px; margin: 32px 0; }
.sched__private p { margin: 0; font-family: var(--f-display-sm); font-size: 20px; }
.cal { background: var(--paper); padding: 28px; margin-bottom: 24px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.cal__head .month__title { margin: 0; font-size: clamp(22px, 2.4vw, 32px); }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__wk { text-align: center; font-size: 12px; color: var(--mist-ink); padding: 8px 0; }
.cal__cell { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 15px; color: var(--mist-ink); border: 0; background: none; position: relative; }
.cal__cell--has { cursor: pointer; color: var(--ink); background: var(--stone); font-weight: 500; }
.cal__cell--has i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-top: 4px; }
.cal__cell--has.is-sel { background: var(--forest); color: var(--ivory); }

/* sticky bar on sub pages is always available */
body[data-page="program"] .sticky-bar .btn, body[data-page="students"] .sticky-bar .btn { font-size: 13px; }

.is-thai { letter-spacing: .08em !important; text-transform: none !important; font-size: max(13px, 1em); }
.eyebrow.is-thai { font-size: clamp(15px, 1.25vw, 17px); }
.logo-tile--dark { background: var(--forest); }

/* ---------- Four Pillars: full-bleed media cards (Revision 3) ---------- */
.pillar--media { position: relative; overflow: hidden; aspect-ratio: 3 / 4; padding: 0; background: var(--forest-deep); color: var(--ivory); text-align: left; display: flex; align-items: flex-end; isolation: isolate; }
.pillar__bg { position: absolute; inset: 0; z-index: -2; transition: filter 900ms var(--ease); filter: brightness(.92) saturate(.94); }
.pillar__bg img, .pillar__bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pillar__bg--kb img { animation: pillar-kb 12s ease-in-out infinite alternate; }
@keyframes pillar-kb { from { transform: scale(1); } to { transform: scale(1.06); } }
.pillar--media::after { content: ''; position: absolute; inset: 0; z-index: -1; transition: opacity 900ms var(--ease);
  /* base from the brief, strengthened where the text sits — measured AA (≥ 5.3:1) on every video frame (tools: contrast check) */
  /* มืดขึ้นเล็กน้อยทั้งใบ + vignette ขอบ ให้ดูลึก น่าค้นหา · ช่วงล่างที่มีข้อความเข้มที่สุด */
  background:
    radial-gradient(120% 90% at 50% 28%, rgba(20, 22, 17, 0) 45%, rgba(20, 22, 17, .38) 100%),
    linear-gradient(to top, rgba(28, 31, 24, .96) 0%, rgba(28, 31, 24, .9) 34%, rgba(28, 31, 24, .72) 52%, rgba(28, 31, 24, .32) 70%, rgba(28, 31, 24, .18) 100%); }
.pillar__content { padding: 28px 26px 30px; transition: transform 900ms var(--ease); width: 100%; }
.pillar--media svg { width: 44px; height: 44px; color: var(--gold-soft); margin: 0 0 14px; }
.pillar--media h3 { color: var(--gold-soft); padding-left: 0; margin-bottom: 12px; text-align: left; }
.pillar--media li { color: var(--ivory); font-size: 14.5px; padding: 3px 0; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
html[lang="th"] .pillar--media li { font-size: 15px; }
.pillar--media:hover .pillar__bg, .pillar--media:focus-visible .pillar__bg { filter: brightness(.98) saturate(1); }
.pillar--media:hover::after, .pillar--media:focus-visible::after { opacity: .96; }
.pillar--media:hover .pillar__content, .pillar--media:focus-visible .pillar__content { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .pillar__bg--kb img { animation: none; } }
@media (max-width: 960px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .pillars { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 8px; scrollbar-width: none; }
  .pillars::-webkit-scrollbar { display: none; }
  .pillar--media { scroll-snap-align: start; }
}

/* ---------- 3P interaction (Revision 3) ---------- */
.threep { position: relative; overflow: visible; }
.threep__stage { position: relative; }
.venn .venn__core, .venn .venn__glow { fill: var(--gold); stroke: none; opacity: 0; transition: opacity 900ms var(--ease); }
.threep.is-lit .venn .venn__core { opacity: .35; }
.threep.is-lit .venn .venn__glow { opacity: .55; }
.venn .venn__hit { fill: #000; fill-opacity: 0; stroke: none; opacity: 1; cursor: pointer; outline: none; }
.venn .venn__hit:focus-visible { stroke: var(--gold-soft); stroke-width: 1.5; stroke-dasharray: 3 4; }
.venn__fly { transition: opacity 900ms var(--ease); }
.venn__fly.is-away { opacity: 0; transition-duration: 150ms; }
.venn__hint { position: absolute; left: 50%; top: 48%; transform: translate(-50%, 34px); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); opacity: .6; pointer-events: none; transition: opacity 900ms var(--ease); white-space: nowrap; animation: hint-pulse 2.8s ease-in-out infinite; }
html[lang="th"] .venn__hint { letter-spacing: .06em; font-size: 12.5px; text-transform: none; }
.venn__hint.is-gone { opacity: 0; animation: none; }
@keyframes hint-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .7; } }
.threep__note { position: relative; min-height: 1.6em; }
.threep__note-a, .threep__note-b { display: block; transition: opacity 1000ms var(--ease), transform 1000ms var(--ease); }
.threep__note-b { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transform: translateY(10px); font-family: var(--f-latin-display-sm); font-style: italic; font-size: 20px; color: var(--gold-soft); }
html[lang="th"] .threep__note-b { font-style: normal; font-family: var(--f-body); font-size: 16px; }
.threep.is-revealed .threep__note-a { opacity: 0; transform: translateY(-8px); }
.threep.is-revealed .threep__note-b { opacity: 1; transform: none; }
.flyer { position: absolute; left: 0; top: 0; width: 46px; z-index: 5; pointer-events: none; color: var(--gold-soft); will-change: transform, opacity; filter: drop-shadow(0 0 6px rgba(205, 184, 138, .55)); }
.flyer svg { width: 100%; height: auto; animation: flap 420ms ease-in-out infinite; }
.spark { position: absolute; left: 0; top: 0; width: 3px; height: 3px; border-radius: 50%; background: var(--gold-soft); box-shadow: 0 0 6px 1px rgba(205, 184, 138, .7); pointer-events: none; z-index: 4; animation: spark 1000ms ease-out forwards; }
@keyframes spark { from { opacity: .9; } to { opacity: 0; margin-top: 10px; } }
@media (prefers-reduced-motion: reduce) { .venn__hint { animation: none; } }

/* ---------- Who We Work With: rotating media cards ---------- */
.who--media { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 36px); border: 0; margin-bottom: clamp(72px, 8vw, 104px); }
.who--media > .who-card, .who--media > .who-card + .who-card { padding: 0; border: 0; }
.who-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--forest-2); }
.rot-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1200ms var(--ease); }
.rot-slide.is-active { opacity: 1; }
.rot-slide img, .rot-slide video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rot-dots { display: flex; gap: 2px; margin: 10px 0 14px -8px; }
.rot-dot { width: 26px; height: 26px; border: 0; background: none; cursor: pointer; position: relative; }
.rot-dot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--gold); transform: translate(-50%, -50%); transition: background 500ms var(--ease); }
.rot-dot[aria-pressed="true"]::after { background: var(--gold); }
.who-card:not(:has(.rot-dots)) .who-card__media { margin-bottom: 40px; }
.who-card h3 { font-family: var(--f-latin-display); font-size: clamp(22px, 2vw, 26px); margin-bottom: 8px; }
.who-card p { margin: 0; color: var(--mist-ink); font-size: 16px; }
@media (max-width: 760px) { .who--media { grid-template-columns: 1fr; gap: 48px; } }

/* ---------- Category navigator ---------- */
.catnav { margin-bottom: 48px; }
.catnav__group { margin-bottom: 22px; }
.catnav__label { display: block; font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 10px; }
html[lang="th"] .catnav__label { letter-spacing: .08em; font-size: 13px; text-transform: none; }
.catnav__row { display: grid; gap: 10px; }
.catnav__row--5 { grid-template-columns: repeat(5, 1fr); }
.catnav__row--3 { grid-template-columns: repeat(3, 1fr); }
.catbox { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 18px 18px 40px; background: var(--paper); border: 1px solid var(--line-light); text-decoration: none; transition: border-color 600ms var(--ease), transform 600ms var(--ease); min-height: 100%; }
.catbox:hover, .catbox:focus-visible { border-color: var(--gold); transform: translateY(-2px); }
.catbox__t { font-family: var(--f-latin-display-sm); font-size: 22px; line-height: 1.15; color: var(--ink); }
.catbox__th { font-size: 14px; color: var(--gold-ink); }
.catbox__d { font-size: 13.5px; color: var(--mist-ink); line-height: 1.5; margin-top: 6px; }
.catbox__n { position: absolute; left: 18px; bottom: 14px; font-size: 12px; letter-spacing: .08em; color: var(--gold-ink); }
.catbox .arrow-line { position: absolute; right: 16px; bottom: 18px; width: 32px; transition: transform 600ms var(--ease); }
.catbox:hover .arrow-line { transform: translateX(4px); }
.catnav__select { display: none; }
.catnav__select select { width: 100%; min-height: 50px; padding: 12px 40px 12px 16px; font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--gold); border-radius: 0; appearance: none; }
@media (max-width: 1100px) { .catnav__row--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .catnav__group { display: none; } .catnav__select { display: block; } }
.pgroup { scroll-margin-top: 140px; }

/* ---------- sticky sub-nav ---------- */
.subnav { position: fixed; left: 0; right: 0; top: 68px; z-index: 70; background: rgba(244, 239, 230, .96); border-bottom: 1px solid var(--line-light); transform: translateY(-110%); opacity: 0; transition: transform 600ms var(--ease), opacity 600ms var(--ease); pointer-events: none; }
@supports (backdrop-filter: blur(8px)) { .subnav { background: rgba(244, 239, 230, .86); backdrop-filter: blur(10px); } }
.subnav.is-visible { transform: none; opacity: 1; pointer-events: auto; }
.subnav__inner { display: flex; gap: 6px; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav a { flex: none; padding: 12px 14px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--mist-ink); border-bottom: 1px solid transparent; transition: color 400ms, border-color 400ms; }
.subnav a.is-active { color: var(--ink); border-bottom-color: var(--gold); }

/* ---------- corporate cases heading ---------- */
.cases-head { scroll-margin-top: 110px; margin-bottom: 28px; }
.cases-head .eyebrow { margin-bottom: 4px; }
.cases-head__en { display: block; font-size: 11.5px; letter-spacing: .24em; color: var(--gold-text); }
@media (min-width: 761px) { .who-card h3 { min-height: 2.5em; display: flex; align-items: flex-end; } }
.proof__img .proof__logo img { width: 48%; height: auto; max-height: 70%; object-fit: contain; }
.proof__img .proof__logo { padding: 0; }
.reveal--now { transition: none !important; }

/* Voices — testimonial video + images (หน้า Come Back to Yourself) */
.pd-voices { padding: clamp(72px, 9vw, 128px) 0; }
.voices__top, .voices__more { display: grid; gap: clamp(16px, 2vw, 28px); max-width: 960px; margin: 0 auto; }
.voices__top { grid-template-columns: 0.5625fr 0.8fr; align-items: stretch; }
.voices__more { grid-template-columns: 1fr 1fr; margin-top: clamp(16px, 2vw, 28px); }
.voices__video, .voices__img { margin: 0; box-shadow: 0 30px 60px -34px rgba(0,0,0,.45); background: var(--forest); }
.voices__video video { width: 100%; height: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; background: var(--forest); }
.voices__img img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
@media (max-width: 760px) {
  .voices__top { grid-template-columns: 1fr; }
  .voices__video { max-width: 420px; width: 100%; margin: 0 auto; }
  .voices__more { grid-template-columns: 1fr; }
}

/* ราคา: ตัวเลข serif แบบ lining + หน่วยเงินตัวเล็กกว่า ให้สมดุล */
strong.price { display: inline-flex; align-items: baseline; gap: .28em; font-weight: 500; white-space: nowrap; }
strong.price .amt { font-family: var(--f-latin-display-sm); font-variant-numeric: lining-nums tabular-nums; letter-spacing: .01em; }
strong.price .cur { font-family: var(--f-ui); font-size: .52em; font-weight: 400; letter-spacing: .06em; color: inherit; opacity: .8; }

/* ปุ่มเพลงประกอบ (มุมล่างซ้าย) */
.music-btn { position: fixed; left: 20px; bottom: 20px; z-index: 85; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 12px; border: 1px solid rgba(205, 184, 138, .55); border-radius: 999px; background: rgba(39, 43, 33, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--gold-soft); font-family: var(--f-ui); font-size: 12px; letter-spacing: .08em; cursor: pointer; transition: background 400ms var(--ease), border-color 400ms var(--ease); }
.music-btn:hover, .music-btn:focus-visible { background: rgba(39, 43, 33, .95); border-color: var(--gold-soft); }
.music-btn__icon { position: relative; display: inline-flex; width: 26px; height: 18px; }
.music-btn__icon svg { width: 26px; height: 17px; }
.music-btn__bars { position: absolute; right: -6px; bottom: -2px; display: flex; gap: 2px; align-items: flex-end; height: 10px; }
.music-btn__bars i { width: 2px; height: 3px; background: currentColor; border-radius: 1px; }
.music-btn.is-on .music-btn__bars i { animation: musicbar 1.1s ease-in-out infinite; }
.music-btn.is-on .music-btn__bars i:nth-child(2) { animation-delay: .25s; }
.music-btn.is-on .music-btn__bars i:nth-child(3) { animation-delay: .5s; }
@keyframes musicbar { 0%, 100% { height: 3px; } 50% { height: 10px; } }
@media (prefers-reduced-motion: reduce) { .music-btn.is-on .music-btn__bars i { animation: none; height: 7px; } }
@media (max-width: 1080px) { .music-btn { left: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); height: 40px; padding: 0 12px 0 10px; } .music-btn__label { display: none; } }
/* รอผู้ใช้แตะจอเพื่อเริ่มเพลง: ขอบทองกระพริบเบาๆ */
.music-btn.is-waiting { animation: musicwait 2.4s ease-in-out infinite; }
@keyframes musicwait { 0%, 100% { box-shadow: 0 0 0 0 rgba(205, 184, 138, .0); } 50% { box-shadow: 0 0 0 8px rgba(205, 184, 138, .22); } }
@media (prefers-reduced-motion: reduce) { .music-btn.is-waiting { animation: none; } }

/* ---------- Impact Counter (เหนือ Our Vision) ---------- */
.impact { text-align: center; margin: 0 auto clamp(56px, 7vw, 96px); max-width: 760px; }
.odo { --odo-h: 1.08em; margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: clamp(64px, 9vw, 120px); line-height: var(--odo-h); color: var(--gold-ink); font-variant-numeric: lining-nums tabular-nums; letter-spacing: .01em; }
.odo__inner { position: relative; display: inline-flex; align-items: flex-start; }
.odo__d { display: inline-block; height: var(--odo-h); overflow: hidden; }
.odo__strip { display: block; will-change: transform; filter: blur(0); }
.odo__strip > span { display: block; height: var(--odo-h); text-align: center; }
.odo__d.is-spinning .odo__strip { filter: blur(1px); }
.odo__sep { display: inline-block; height: var(--odo-h); }
.odo__plus { display: inline-block; height: var(--odo-h); opacity: 0; transform: translateY(.06em); transition: opacity 700ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1); margin-left: .02em; }
.odo.is-done .odo__plus { opacity: 1; transform: none; }
.odo.is-static .odo__plus { transition: none; }
/* ประกายทองวิ่งผ่าน 1 ครั้งหลังหยุด */
.odo__shine { position: absolute; inset: 0; white-space: nowrap; color: transparent; pointer-events: none; opacity: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 246, 214, .95) 50%, transparent 65%) no-repeat; background-size: 250% 100%; background-position: 140% 0;
  -webkit-background-clip: text; background-clip: text; }
.odo.is-done:not(.is-static) .odo__shine { animation: odoshine 1400ms ease-out 250ms 1 forwards; }
@keyframes odoshine { 0% { opacity: 1; background-position: 140% 0; } 85% { opacity: 1; } 100% { opacity: 0; background-position: -40% 0; } }
.impact__label { font-family: var(--f-display-sm); font-size: clamp(18px, 1.7vw, 22px); line-height: 1.6; color: var(--ink); margin: 14px auto 0; max-width: 34em; }
html[lang="th"] .impact__label { font-family: var(--f-body); }
.impact__rule { display: block; width: 120px; height: 1px; background: var(--gold); opacity: .7; margin: clamp(36px, 4vw, 52px) auto 0; }
@media (max-width: 760px) { .odo { font-size: 64px; } }
@media (prefers-reduced-motion: reduce) { .odo__strip { transition: none !important; filter: none !important; } }


/* ประโยคปิดท้าย "คุณแค่ยังไม่กลับมาเจอตัวเอง" — สีทอง ตัวเอียง (แบบเดียวกับ Awakening pulls something out.) */
.problems__closing em { display: inline-block; font-family: 'Cormorant Garamond', var(--f-display); font-style: italic; color: var(--gold-ink); font-synthesis: style; }
html[lang="th"] .problems__closing em { font-family: var(--f-display); font-synthesis: style; }

/* "Awakening pulls something out." — สีทอง */
.closing-quote p em { font-style: italic; color: var(--gold-soft); }

/* =====================================================================
   Butterfly Lifecycle (Your Path) — เส้นทอง single-line · วาดตัวเอง · idle · hover
   ===================================================================== */
.ladder { position: relative; }
.lc-link { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 0; fill: none; stroke: var(--gold); stroke-width: 1.35; stroke-linecap: round; }
.rung__art { position: relative; z-index: 1; width: 160px; height: 120px; margin: -10px 0 14px -8px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lc { width: 100%; height: 100%; overflow: visible; color: var(--gold); fill: none; stroke: var(--gold); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; transition: filter 900ms var(--ease); }
.lc *, .lc-link * { vector-effect: non-scaling-stroke; }
.lc .soft { stroke: var(--gold-soft); stroke-width: 1.25; }
.lc .dot { fill: var(--gold); }
.lc .egg { fill: rgba(184, 153, 90, .1); }
.lc .lf-a path:first-child, .lc .leaf path:first-child { fill: rgba(184, 153, 90, .08); }
.lc .egg-rock, .lc .sg, .lc .bf-in, .lc .cat-head, .lc .egg-hatch, .lc .fwl, .lc .fwr, .lc .shl, .lc .shr, .lc .spk-in { transform-box: fill-box; }

/* 1) วาดตัวเอง: ซ้าย→ขวา step ละ ~1.2s เหลื่อมกัน */
.lc-ready .ln { stroke-dasharray: 1; stroke-dashoffset: 1; }
.lc-ready .lc .dot, .lc-ready .lc .egg { fill-opacity: 0; }
.lc-ready.is-drawn .ln { stroke-dashoffset: 0; transition: stroke-dashoffset 1400ms cubic-bezier(.45, 0, .2, 1); }
.lc-ready.is-drawn .lc .dot, .lc-ready.is-drawn .lc .egg { fill-opacity: 1; transition: fill-opacity 800ms ease; }
.lc-ready.is-drawn .rung:nth-child(1) .ln { transition-delay: 0ms; }
.lc-ready.is-drawn .rung:nth-child(2) .ln { transition-delay: 1200ms; }
.lc-ready.is-drawn .rung:nth-child(3) .ln { transition-delay: 2400ms; }
.lc-ready.is-drawn .rung:nth-child(4) .ln { transition-delay: 3600ms; }
.lc-ready.is-drawn .lc-link .ln { transition: stroke-dashoffset 4800ms linear 300ms; }
.lc-ready.is-drawn .rung:nth-child(1) .lc .egg, .lc-ready.is-drawn .rung:nth-child(1) .dot { transition-delay: 900ms; }
.lc-ready.is-drawn .rung:nth-child(2) .dot { transition-delay: 2100ms; }
.lc-ready.is-drawn .rung:nth-child(4) .dot { transition-delay: 4500ms; }

/* 2) idle — ขยับเบาๆ ตลอดเวลา (2–4px / 3–5°, 3–5s) */
.lc .egg-rock { transform-origin: 50% 100%; animation: lc-rock 3.6s ease-in-out infinite; }
.lc .sg { animation: lc-wave 4s ease-in-out infinite; animation-delay: calc(var(--k) * -260ms); }
.lc .sway { transform-box: view-box; transform-origin: 80px 20px; animation: lc-sway 4.6s ease-in-out infinite; }
.lc .flapw { transform-box: fill-box; transform-origin: 50% 50%; }
.lc .big .flapw { animation: lc-flap 4s ease-in-out infinite; }
.lc .sm .bf-in { animation: lc-bob 3.8s ease-in-out infinite; animation-delay: calc(var(--k) * -1.1s); }
.lc .sm .flapw { animation: lc-flap 3s ease-in-out infinite; animation-delay: calc(var(--k) * -.7s); }
/* ผีเสื้อลายเดิม (sprite แบบเติมสี) ใช้ fade + ขยายเบาๆ แทนการวาดเส้น */
.lc-ready .lc .bf-art { opacity: 0; transform: scale(.85); transform-box: fill-box; transform-origin: center; }
.lc-ready.is-drawn .lc .bf-art { opacity: 1; transform: none; transition: opacity 1400ms ease 3700ms, transform 1600ms cubic-bezier(.2, .7, .2, 1) 3700ms; }
.lc .spk-in { opacity: 0; }
@keyframes lc-rock { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes lc-wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.2px); } }
@keyframes lc-sway { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
@keyframes lc-flap { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.82); } }
@keyframes lc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* 3) hover / tap — ช่วงเปลี่ยนแปลงของแต่ละ step + เรืองแสงทองนุ่มๆ */
.rung.is-active .lc { filter: drop-shadow(0 0 5px rgba(205, 184, 138, .45)); }
.lc .crack { opacity: 0; transition: opacity 600ms ease; }
.lc .egg-hatch { transition: transform 900ms var(--ease); transform-origin: 50% 100%; }
.lc .baby { transition: transform 1600ms cubic-bezier(.33, 0, .2, 1) 200ms; }
.rung.is-active .lc .crack { opacity: 1; }
.rung.is-active .lc .egg-hatch { transform: rotate(-8deg); }
.rung.is-active .lc .baby { transform: translate(7px, 6px); }
.lc .cat { transition: transform 1800ms cubic-bezier(.33, 0, .2, 1); }
.lc .cat-head { transform-origin: 30% 80%; }
.lc .lf-b { opacity: 0; transition: opacity 1200ms ease 800ms; }
.lc .lf-a { transition: opacity 1200ms ease 800ms; }
.rung.is-active .lc .cat { transform: translateX(4px); }
.rung.is-active .lc .cat-head { animation: lc-chew .7s ease-in-out 1.2s infinite; }
.rung.is-active .lc .lf-a { opacity: 0; }
.rung.is-active .lc .lf-b { opacity: 1; }
@keyframes lc-chew { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-9deg); } }
.lc .shl, .lc .shr { transition: transform 1400ms cubic-bezier(.3, 0, .2, 1); }
.lc .shl { transform-origin: 100% 0%; }
.lc .shr { transform-origin: 0% 0%; }
.lc .fwl { transform-origin: 100% 0%; transition: transform 1800ms cubic-bezier(.3, 0, .2, 1) 300ms; }
.lc .fwr { transform-origin: 0% 0%; transition: transform 1800ms cubic-bezier(.3, 0, .2, 1) 300ms; }
.rung.is-active .lc .shl { transform: translate(-3px, 2px) rotate(-22deg); }
.rung.is-active .lc .shr { transform: translate(3px, 2px) rotate(22deg); }
.rung.is-active .lc .fwl { transform: rotate(38deg) scale(1.15); }
.rung.is-active .lc .fwr { transform: rotate(-38deg) scale(1.15); }
.lc .flock { transition: transform 1600ms cubic-bezier(.3, 0, .2, 1); }
.rung.is-active .lc .flock { animation: lc-rise 3.2s cubic-bezier(.4, 0, .2, 1) infinite; }
.rung.is-active .lc .big .flapw { animation-duration: 1.4s; }
.rung.is-active .lc .sm .flapw { animation-duration: .9s; }
.rung.is-active .lc .spk-in { animation: lc-spark 3.2s ease-out infinite; animation-delay: calc(var(--k) * 180ms); }
@keyframes lc-rise { 0% { transform: translateY(0); } 45% { transform: translateY(-14px); } 70% { transform: translateY(-11px); } 100% { transform: translateY(0); } }
@keyframes lc-spark { 0%, 100% { opacity: 0; transform: translateY(4px) scale(.6); } 30% { opacity: 1; } 60% { opacity: .9; transform: translateY(-6px) scale(1); } 85% { opacity: 0; } }

@media (max-width: 960px) { .rung__art { width: 150px; height: 112px; margin: 0 0 12px -6px; } }
@media (prefers-reduced-motion: reduce) {
  .lc *, .lc { animation: none !important; transition: none !important; }
  .lc-ready .ln { stroke-dasharray: none; stroke-dashoffset: 0; }
}
/* ผีเสื้อลายเดิมในภาพ Belong: เพิ่มเส้นบางๆ ให้ตัวเล็กยังคมชัด */
.lc .bf-art { stroke: currentColor; stroke-width: .35; vector-effect: none; }
.lc .sm .bf-art { stroke-width: .4; }