/* ==========================================================================
   NBRH — The Neuro-Behavioral Repatterning & Hypnotherapy Center
   Shared design system. "Compassionate Expertise" — warm minimalism,
   library / thoughtful-study atmosphere. Bilingual TH / EN.
   ========================================================================== */

:root{
  /* — Warm neutral ground — */
  --bg:        #F7F3EA;   /* soft off-white, warm        */
  --bg-2:      #EFE7D7;   /* warm beige                  */
  --bg-3:      #E7DCC6;   /* deeper sand / wood-light    */
  --paper:     #FCFAF4;   /* raised cards                */

  --ink:       #2E2A20;   /* warm near-black text        */
  --ink-2:     #574F3E;   /* secondary text              */
  --muted:     #8C8068;   /* tertiary / captions         */
  --line:      rgba(46,42,32,.13);
  --line-soft: rgba(46,42,32,.07);

  /* — Accent (overwritten by the colour-emphasis tweak) — */
  --accent:      #8C6F4A;  /* soft wood brown */
  --accent-deep: #6A5436;
  --accent-soft: #EFE7D8;

  /* — Type (overwritten by the font tweak) — */
  --font-display: 'Spectral', 'Noto Serif Thai', Georgia, serif;
  --font-body:    'IBM Plex Sans', 'IBM Plex Sans Thai', sans-serif;

  /* — Rhythm (overwritten by the spacing tweak) — */
  --section-pad: 116px;
  --tex-opacity: 0.5;

  --maxw: 1200px;
  --radius: 4px;
  --radius-lg: 10px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ 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;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.72;
  color:var(--ink-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Paper / linen grain — intensity driven by the texture tweak ------------- */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:calc(var(--tex-opacity) * 0.085);
  mix-blend-mode:multiply;
}
/* faint woven linen lines layered under the grain */
body::after{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(46,42,32,.018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,  rgba(46,42,32,.018) 0 1px, transparent 1px 3px);
  opacity:calc(var(--tex-opacity) * 0.9);
}
.site, footer, .topbar{ position:relative; z-index:1; }

/* ── Typography ──────────────────────────────────────────────────────────── */
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-0.01em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.6rem, 5.4vw, 4.5rem); font-weight:400; }
h2{ font-size:clamp(1.95rem, 3.4vw, 2.9rem); font-weight:400; }
h3{ font-size:clamp(1.3rem, 2vw, 1.6rem); }
p{ margin:0 0 1.1em; text-wrap:pretty; }
a{ color:var(--accent-deep); text-decoration:none; }
:lang(th), .th{ line-height:1.92; }

.eyebrow{
  font-family:var(--font-body);
  font-size:.78rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-deep);
  display:inline-flex; align-items:center; gap:.7em;
  margin:0 0 1.3em;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--accent);
  display:inline-block; opacity:.7;
}
.lead{ font-size:clamp(1.12rem,1.5vw,1.32rem); color:var(--ink-2); line-height:1.7; }
.serif-quote{ font-family:var(--font-display); font-weight:300; font-style:italic; }

/* ── Layout primitives ──────────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.wrap-narrow{ max-width:760px; }
section{ padding:var(--section-pad) 0; position:relative; }
.section-tight{ padding:calc(var(--section-pad) * .62) 0; }
.bg-2{ background:var(--bg-2); }
.bg-3{ background:var(--bg-3); }
.bg-ink{ background:#26221a; color:#E9E2D2; }
.bg-ink h1,.bg-ink h2,.bg-ink h3{ color:#FBF7EC; }
.bg-ink .eyebrow{ color:#CDBE9C; }
.bg-ink .eyebrow::before{ background:#CDBE9C; }

.grid{ display:grid; gap:64px; }
.cols-2{ grid-template-columns:1fr 1fr; align-items:center; }
.cols-3{ grid-template-columns:repeat(3,1fr); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-body); font-size:.96rem; font-weight:600;
  letter-spacing:.01em; line-height:1;
  padding:1.02em 1.7em; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
  text-align:center; white-space:nowrap;
}
.btn .arr{ transition:transform .3s var(--ease); line-height:1; display:inline-flex; align-items:center; }
.btn:hover .arr{ transform:translateX(4px); }
.btn-primary{
  background:var(--accent); color:#FBF7EC;
  box-shadow:0 1px 2px rgba(46,42,32,.18);
}
.btn-primary:hover{ background:var(--accent-deep); transform:translateY(-2px); box-shadow:0 10px 26px -10px rgba(46,42,32,.5); }
.btn-ghost{ background:var(--bg-3); color:var(--ink); border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(46,42,32,.06); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent-deep); background:color-mix(in srgb, var(--accent) 18%, var(--bg-3)); transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 9px 22px -12px rgba(46,42,32,.45); }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent); }
.btn-block{ width:100%; justify-content:center; }
.bg-ink .btn-ghost{ color:#F4EEE0; border-color:rgba(255,255,255,.28); }
.bg-ink .btn-ghost:hover{ border-color:#CDBE9C; color:#fff; background:rgba(255,255,255,.06); }

/* ── Top navigation ─────────────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.topbar.scrolled{ border-color:var(--line-soft); box-shadow:0 1px 24px -16px rgba(46,42,32,.6); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:78px; }
.brand{ display:flex; align-items:center; gap:13px; color:var(--ink); }
.brand .mark{
  width:38px; height:38px; flex:none; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, var(--accent), var(--accent-deep));
  position:relative; box-shadow:inset 0 1px 1px rgba(255,255,255,.25);
}
.brand .mark::after{
  content:""; position:absolute; inset:11px; border-radius:50%;
  border:1.5px solid rgba(251,247,236,.85);
}
.brand .name{ font-family:var(--font-display); font-size:1.02rem; font-weight:500; color:var(--ink); line-height:1.14; letter-spacing:-.005em; display:block; max-width:248px; text-wrap:balance; }
.brand .sub{ font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.brand-logo{ height:60px; width:auto; display:block; }
.brand-mark{ height:34px; width:auto; display:block; }
/* very small phones: keep the header CTA + burger inside the viewport */
@media (max-width: 380px){
  .nav-cta{ gap:10px; }
  .topbar .nav-cta .btn{ font-size:.88rem; padding:.72em 1.05em; gap:.45em; }
}
@media (max-width: 600px){ .brand-logo{ height:48px; } .brand-mark{ height:29px; } }

/* full lockup in the hero — REMOVED; hero now leads with the practice name */
.hero-brandline{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:1.7em; }
.hero-practice{ font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.12rem,1.7vw,1.42rem); line-height:1.18; letter-spacing:.005em;
  color:var(--accent-deep); text-wrap:balance; }
.hero-since{ font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; position:relative; padding-left:18px; }
.hero-since::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:10px; height:1px; background:var(--accent); }
[data-hero="centered"] .hero-brandline{ justify-content:center; }

/* full lockup in the footer — sits on a warm tile against the dark ground */
.footer-logo{ display:inline-block; background:var(--paper); border-radius:12px;
  padding:16px 20px; box-shadow:0 14px 34px -20px rgba(0,0,0,.6); }
.footer-logo img{ width:176px; height:auto; display:block; }
.nav-links{ display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
.nav-links a{
  color:var(--ink-2); font-size:.92rem; font-weight:500;
  padding:.6em .85em; border-radius:var(--radius); position:relative;
  transition:color .2s;
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a.active{ color:var(--accent-deep); }
.nav-links a.active::after{
  content:""; position:absolute; left:.85em; right:.85em; bottom:.25em;
  height:1.5px; background:var(--accent); border-radius:2px;
}
.nav-cta{ display:flex; align-items:center; gap:16px; }
.nav-meta{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.nav-tel{ font-size:.9rem; font-weight:600; color:var(--ink); white-space:nowrap; }
.nav-tel span{ color:var(--muted); font-weight:400; }
.lang-switch{ display:flex; align-items:center; gap:8px; font-size:.8rem; font-weight:400; letter-spacing:.08em; }
.lang-switch a, .lang-switch span.l{ color:var(--muted); text-decoration:none; cursor:pointer; transition:color .2s ease; white-space:nowrap; }
.lang-switch a:hover{ color:var(--ink); }
.lang-switch .active{ color:var(--ink); font-weight:600; cursor:default; }
.lang-switch .sep{ color:var(--line); cursor:default; }
/* full language names exist for assistive tech only — the switcher reads "TH | EN" */
.vh{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

.burger{ display:none; flex-direction:column; gap:5px; width:42px; height:42px; align-items:center; justify-content:center; background:none; border:1px solid var(--line); border-radius:var(--radius); cursor:pointer; }
.burger i{ width:18px; height:1.6px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s; }
.burger.open i:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.burger.open i:nth-child(2){ opacity:0; }
.burger.open i:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

/* mobile menu sheet */
.mobile-menu{
  position:fixed; inset:0 0 0 auto; width:min(360px,86vw); z-index:55;
  background:var(--paper); box-shadow:-30px 0 80px -30px rgba(46,42,32,.5);
  transform:translateX(100%); transition:transform .42s var(--ease);
  padding:104px 36px 40px; display:flex; flex-direction:column; gap:6px;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu a{ color:var(--ink); font-family:var(--font-display); font-size:1.5rem; padding:.55em 0; border-bottom:1px solid var(--line-soft); }
/* Thai drawer labels use the approved Thai sans (no looped serif); English drawer keeps the display serif */
html[lang="th"] .mobile-menu a{ font-family:var(--font-body); }
.mobile-menu .btn{ margin-top:22px; }
/* language switcher mirrored into the drawer (see site.js) — reads as a control, not a nav link */
.mobile-menu .mm-lang{ margin:0 0 8px; padding-bottom:14px; border-bottom:1px solid var(--line); gap:14px; flex:0 0 auto; }
.mobile-menu .mm-lang a, .mobile-menu .mm-lang span.l{ font-family:var(--font-body); font-size:1rem; letter-spacing:.04em; padding:0; border-bottom:0; min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:flex-start; }
.mobile-menu .mm-lang a:hover{ color:var(--ink); }
.scrim{ position:fixed; inset:0; background:rgba(38,34,26,.34); opacity:0; visibility:hidden; transition:opacity .4s; z-index:54; }
.scrim.open{ opacity:1; visibility:visible; }

/* ── Hero (three layout variants via [data-hero]) ───────────────────────── */
.hero{ position:relative; overflow:hidden; padding:0; }
.hero .wrap{ position:relative; z-index:2; }
.hero-eyebrow{ margin-bottom:1.1em; }
.hero h1{ margin-bottom:.32em; }
.hero .lead{ max-width:46ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2.4em; }
.hero-th{ font-family:var(--font-body); color:var(--ink-2); font-size:1.05rem; line-height:1.95; max-width:50ch; margin-top:1.7em; }
.hero-th p{ margin:0 0 .9em; max-width:54ch; line-height:1.92; text-wrap:pretty; }
.hero-th p:last-child{ margin-bottom:0; }
.hero-meta{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:3.4em; }
.hero-meta > div{ padding-top:20px; border-top:1px solid var(--line); }
.hero-meta .k{ font-family:var(--font-body); font-weight:600; font-size:1.18rem; color:var(--ink); letter-spacing:-.01em; line-height:1.3; white-space:nowrap; }
.hero-meta .l{ font-size:.82rem; line-height:1.6; letter-spacing:.01em; color:var(--muted); margin-top:14px; text-wrap:pretty; white-space:normal; }

/* SPLIT (default) — top-aligned, editorial (not vertically centered) */
[data-hero="split"] .hero-inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:72px; align-items:start; padding:38px 0 84px; }
[data-hero="split"] .hero-art{ display:block; }

/* CENTERED */
[data-hero="centered"] .hero-inner{ display:block; text-align:center; padding:54px 0 92px; max-width:880px; margin:0 auto; }
[data-hero="centered"] .hero .lead, [data-hero="centered"] .hero-th{ margin-left:auto; margin-right:auto; }
[data-hero="centered"] .hero-cta{ justify-content:center; }
[data-hero="centered"] .hero-meta{ justify-content:center; }
[data-hero="centered"] .hero-eyebrow{ justify-content:center; }
[data-hero="centered"] .hero-art{ display:none; }
[data-hero="centered"] .hero-band{ display:block; }

/* EDITORIAL — text overlaps a tall image column */
[data-hero="editorial"] .hero-inner{ display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; min-height:74vh; }
[data-hero="editorial"] .hero-copy{ padding:96px 56px 96px 0; align-self:center; }
[data-hero="editorial"] .hero-art{ display:block; margin:0; border-radius:0; min-height:74vh; }
[data-hero="editorial"] .hero-band{ display:none; }

.hero-band{ display:none; position:absolute; inset:auto 0 0 0; height:46%; z-index:1;
  background:linear-gradient(180deg, transparent, var(--accent-soft)); opacity:.5; }

/* ── Image / texture placeholders ───────────────────────────────────────── */
.ph{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  background:
    repeating-linear-gradient(135deg, rgba(46,42,32,.05) 0 2px, transparent 2px 11px),
    linear-gradient(150deg, var(--bg-3), var(--bg-2));
  box-shadow:inset 0 0 0 1px rgba(46,42,32,.07);
  display:flex; align-items:flex-end; min-height:300px;
}
.ph::before{
  content:attr(data-label);
  font-family:'IBM Plex Mono', 'IBM Plex Sans Thai', ui-monospace, monospace;
  font-size:.72rem; letter-spacing:.06em; color:var(--muted);
  background:rgba(252,250,244,.82); border:1px solid var(--line);
  padding:.5em .8em; border-radius:3px; margin:16px;
  max-width:80%;
}
.ph-tall{ min-height:520px; }
.ph-warm{ background:
    repeating-linear-gradient(135deg, rgba(140,111,74,.08) 0 2px, transparent 2px 11px),
    linear-gradient(150deg, var(--accent-soft), var(--bg-2)); }
.hero-art.ph{ min-height:440px; }

/* abstract "clarity" composition — pure CSS, no clichés */
.abstract{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:340px;
  background:linear-gradient(155deg, var(--bg-2), var(--bg-3));
  box-shadow:inset 0 0 0 1px rgba(46,42,32,.06);
}
.abstract span{ position:absolute; border-radius:50%; }
.abstract .c1{ width:240px; height:240px; right:-40px; top:-50px; background:radial-gradient(circle at 35% 35%, var(--accent-soft), transparent 70%); opacity:.9; }
.abstract .c2{ width:140px; height:140px; left:34px; bottom:30px; border:1.5px solid var(--accent); opacity:.4; }
.abstract .c3{ width:64px; height:64px; left:50%; top:38%; background:var(--accent); opacity:.16; }
.abstract .ln{ position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line); }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:38px 34px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card.hover:hover{ transform:translateY(-4px); box-shadow:0 22px 48px -28px rgba(46,42,32,.45); border-color:color-mix(in srgb,var(--accent) 40%, var(--line)); }
.card .num{ font-family:var(--font-display); font-size:1.1rem; color:var(--accent-deep); }
.card h3{ margin:.5em 0 .35em; }
.card p{ font-size:.97rem; color:var(--ink-2); margin:0; }

.icon-dot{ width:46px; height:46px; border-radius:50%; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.icon-dot svg{ width:22px; height:22px; stroke:var(--accent-deep); fill:none; stroke-width:1.6; }

/* areas chips */
.area-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.area-list .item{ background:var(--paper); padding:26px 28px; display:flex; align-items:center; gap:16px; transition:background .25s; }
.area-list .item:hover{ background:var(--accent-soft); }
.area-list .item .n{ font-family:var(--font-display); font-size:.95rem; color:var(--accent-deep); opacity:.6; min-width:28px; }
.area-list .item .t{ color:var(--ink); font-weight:500; }
.area-list .item .t small{ display:block; color:var(--muted); font-weight:400; font-size:.82rem; margin-top:2px; }

/* return / explore-more soft nav card (area detail pages) — premium transition bridge */
.return-section{ padding:clamp(52px,7vw,80px) 0 0; }
.return-section + section{ padding-top:clamp(56px,6vw,72px); }
.return-card{ max-width:1000px; margin:0 auto; min-height:240px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:0;
  background:var(--paper); border:1px solid var(--line); border-radius:24px;
  padding:clamp(48px,5.6vw,72px) clamp(30px,5vw,72px);
  box-shadow:0 26px 64px -42px rgba(46,42,32,.46);
  text-decoration:none; color:inherit;
  transition:border-color .3s, background .3s, box-shadow .3s; }
.return-card .rc-text{ min-width:0; margin-bottom:40px; }
.return-card h3{ margin:0 0 24px; color:var(--ink); font-size:clamp(2.1rem,3.4vw,2.9rem); line-height:1.16; }
.return-card p{ margin:0 auto; color:var(--ink-2); font-size:clamp(1.2rem,1.55vw,1.35rem); line-height:1.65; max-width:660px; }
.return-card .rc-brk{ display:inline; }
.return-card .rc-link{ font-weight:600; color:var(--accent-deep); white-space:nowrap; font-size:clamp(1.32rem,1.8vw,1.45rem);
  display:inline-flex; align-items:center; gap:.5em; transition:color .25s; }
.return-card .rc-link .arr{ line-height:1; display:inline-block; transition:transform .3s var(--ease); }
.return-card .rc-link:hover{ color:var(--ink); }
.return-card .rc-link:hover .arr{ transform:translateX(-4px); }
@media (max-width:600px){ .return-card{ min-height:0; padding:38px 28px; border-radius:20px; } .return-card .rc-text{ margin-bottom:32px; } .return-card .rc-brk{ display:none; } }

/* ── Steps / process ────────────────────────────────────────────────────── */
.steps{ display:grid; gap:0; }
.step{ display:grid; grid-template-columns:120px 1fr; gap:40px; padding:42px 0; border-top:1px solid var(--line); }
.step:last-child{ border-bottom:1px solid var(--line); }
.step .idx{ font-family:var(--font-display); font-size:2.6rem; color:var(--accent); opacity:.55; line-height:1; }
.step h3{ margin-top:0; }
.step p{ margin:0; }

/* ── Quote / reviews ────────────────────────────────────────────────────── */
.quote-big{ font-family:var(--font-display); font-weight:300; font-size:clamp(1.6rem,3vw,2.5rem); line-height:1.42; color:var(--ink); text-wrap:balance; }
.quote-sans{ font-family:var(--font-body); font-weight:400; line-height:1.5; letter-spacing:-.005em; }
.quote-sans.th, :lang(th).quote-sans{ line-height:1.62; }

/* Brand philosophy statement (homepage) — modern sans, not a quotation */
.philosophy{ text-align:center; max-width:820px; }
.philosophy-lead{ font-family:var(--font-body); font-weight:600; font-size:clamp(1.5rem,2.9vw,2.2rem); line-height:1.3; letter-spacing:-.01em; color:var(--ink); margin:0 0 .5em; text-wrap:balance; }
.philosophy-body{ font-family:var(--font-body); font-weight:400; font-size:clamp(1.18rem,2vw,1.5rem); line-height:1.6; color:var(--ink-2); margin:0 auto; max-width:100%; text-wrap:pretty; }
.philosophy-en{ font-size:.95rem; letter-spacing:.01em; color:var(--muted); margin:2em auto 0; max-width:100%; text-wrap:pretty; }
.review{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px 32px; display:flex; flex-direction:column; gap:18px; height:100%; }
.review .stars{ color:var(--accent); letter-spacing:3px; font-size:.9rem; }
.review p{ font-family:var(--font-display); font-weight:300; font-style:italic; font-size:1.12rem; line-height:1.6; color:var(--ink); margin:0; }
.review .who{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.review .who .av{ width:38px; height:38px; border-radius:50%; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); color:var(--accent-deep); font-size:1rem; }
.review .who b{ color:var(--ink); font-size:.92rem; font-weight:600; display:block; }
.review .who small{ color:var(--muted); font-size:.8rem; }

/* ── Accordion (FAQ) ────────────────────────────────────────────────────── */
.acc{ border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-q{ width:100%; background:none; border:0; cursor:pointer; text-align:left; padding:26px 48px 26px 0; position:relative; font-family:var(--font-display); font-size:1.18rem; color:var(--ink); line-height:1.35; }
.acc-q::after{ content:""; position:absolute; right:6px; top:50%; width:13px; height:13px; transform:translateY(-50%); background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%238C6F4A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); transition:transform .3s var(--ease); }
.acc-item.open .acc-q::after{ transform:translateY(-50%) rotate(135deg); }
.acc-a{ overflow:hidden; max-height:0; transition:max-height .4s var(--ease); }
.acc-a > div{ padding:0 48px 28px 0; color:var(--ink-2); }
.acc-a p{ margin:0 0 .8em; }
.acc-a p:last-child{ margin:0; }
.acc-a ol, .acc-a ul{ margin:0 0 .8em; padding-left:1.4em; }
.acc-a li{ margin:0 0 .4em; padding-left:.2em; }
.acc-a li:last-child{ margin:0; }
.faq-placeholder{ color:var(--muted); font-style:italic; font-family:'IBM Plex Mono', 'IBM Plex Sans Thai', ui-monospace, monospace; font-size:.92rem; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.field{ margin-bottom:22px; }
.field label{ display:block; font-size:.86rem; font-weight:600; color:var(--ink); margin-bottom:8px; letter-spacing:.01em; }
.field .req{ color:var(--accent-deep); }
.field input, .field select, .field textarea{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:.85em 1em; transition:border-color .2s, box-shadow .2s, background .2s;
}
.field textarea{ min-height:130px; resize:vertical; line-height:1.7; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  background:#fff;
}
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:#B4503C; box-shadow:0 0 0 3px rgba(180,80,60,.13); }
.field .err{ display:none; color:#9B4030; font-size:.8rem; margin-top:6px; }
.field.invalid .err{ display:block; }
.form-note{ font-size:.82rem; color:var(--muted); }
.chips-input{ display:flex; flex-wrap:wrap; gap:10px; }
.chips-input label{ margin:0; }
.chips-input input{ position:absolute; opacity:0; width:0; height:0; }
.chip{ display:inline-block; padding:.6em 1.05em; border:1px solid var(--line); border-radius:999px; font-size:.88rem; color:var(--ink-2); cursor:pointer; transition:all .2s; user-select:none; }
.chips-input input:checked + .chip{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-deep); }
.form-ok{ display:none; background:var(--accent-soft); border:1px solid var(--accent); border-radius:var(--radius-lg); padding:34px; text-align:center; }
.form-ok.show{ display:block; }
.form-ok h3{ color:var(--accent-deep); }

/* ── Info / contact rows ────────────────────────────────────────────────── */
.info-row{ display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.info-row:last-child{ border-bottom:0; }
.info-row .ic{ width:42px; height:42px; flex:none; border-radius:50%; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; }
.info-row .ic svg{ width:19px; height:19px; stroke:var(--accent-deep); fill:none; stroke-width:1.6; }
.info-row .k{ font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.info-row .v{ color:var(--ink); font-weight:500; line-height:1.55; }
.info-row a.v:hover{ color:var(--accent-deep); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer{ background:#26221A; color:#C9BFA9; padding:84px 0 40px; }
footer .fcols{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:48px; }
footer h4{ color:#EFE7D2; font-family:var(--font-body); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; margin:0 0 18px; }
footer .brand .name{ color:#FBF7EC; }
footer .brand .sub{ color:#9C9078; }
footer a{ color:#C9BFA9; display:block; padding:5px 0; font-size:.94rem; }
footer a:hover{ color:#FBF7EC; }
footer p{ color:#A89E88; font-size:.92rem; line-height:1.7; }
footer .fbar{ margin-top:62px; padding-top:26px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:.84rem; color:#8E856F; }

/* ── Reveal on load ─────────────────────────────────────────────────────────
   Transform-only entrance (never hides via opacity) so content is always
   legible — even where CSS animation is paused at its first frame.          */
.reveal{ opacity:1; }
@media (prefers-reduced-motion: no-preference){
  .reveal{ animation:nbrhRise .82s var(--ease) both; }
  .reveal.d1{ animation-delay:.09s; } .reveal.d2{ animation-delay:.18s; }
  .reveal.d3{ animation-delay:.27s; } .reveal.d4{ animation-delay:.36s; }
}
@keyframes nbrhRise{ from{ transform:translateY(24px); } to{ transform:none; } }

/* ── Misc page bits ─────────────────────────────────────────────────────── */
.page-head{ padding:calc(var(--section-pad) * .8) 0 calc(var(--section-pad) * .5); }
.page-head h1{ font-size:clamp(2.3rem,4.4vw,3.6rem); }
.divider{ height:1px; background:var(--line); border:0; margin:0; }
.pill{ display:inline-block; padding:.45em .9em; background:var(--accent-soft); color:var(--accent-deep); border-radius:999px; font-size:.78rem; font-weight:600; letter-spacing:.04em; }
.price-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:42px 38px; display:flex; flex-direction:column; height:100%; }
.price-card.feature{ border-color:var(--accent); box-shadow:0 24px 60px -34px rgba(140,111,74,.6); position:relative; }
.price-card.feature .pill{ position:absolute; top:-14px; left:38px; }
.price-card .amt{ font-family:var(--font-display); font-size:2.7rem; color:var(--ink); line-height:1; margin:14px 0 4px; }
.price-card .per{ color:var(--muted); font-size:.9rem; }
.price-card ul{ list-style:none; padding:0; margin:26px 0 30px; display:flex; flex-direction:column; gap:13px; }
.price-card li{ display:flex; gap:11px; font-size:.95rem; color:var(--ink-2); }
.price-card li svg{ width:18px; height:18px; flex:none; margin-top:3px; stroke:var(--accent); fill:none; stroke-width:2; }
.price-card .btn{ margin-top:auto; }

.callout{ background:var(--accent-soft); border-radius:var(--radius-lg); padding:clamp(40px,5vw,72px); text-align:center; }

/* ── Areas of Focus — detail page (template) ───────────────────────────── */
.area-hero{ padding-top:40px; padding-bottom:calc(var(--section-pad) * .55); }
.crumb{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.8rem; letter-spacing:.04em; color:var(--muted); margin-bottom:2.4em; }
.crumb a, .crumb span{ white-space:nowrap; }
.crumb a{ color:var(--muted); }
.crumb a:hover{ color:var(--accent-deep); }
.crumb span{ color:var(--line); }
.crumb span:last-child{ color:var(--ink-2); }
.area-headline{ font-size:clamp(1.65rem,3vw,2.55rem); line-height:1.18; }
.area-hero-body{ padding-top:8px; }
.area-hero-body p{ font-size:1.06rem; line-height:1.75; color:var(--ink-2); margin:0 0 1.05em; }
.area-hero-body .area-hero-turn{ margin-top:1.5em; padding-top:1.5em; border-top:1px solid var(--line); color:var(--ink); font-weight:500; }

.experience-list{ list-style:none; padding:0; margin:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.experience-list li{ background:var(--paper); padding:20px 26px; color:var(--ink); font-size:1.02rem; line-height:1.5; display:flex; gap:16px; align-items:baseline; transition:background .25s; }
.experience-list li:hover{ background:var(--accent-soft); }
.experience-list li::before{ content:""; width:7px; height:7px; flex:none; border-radius:50%; background:var(--accent); transform:translateY(-2px); }

.prose{ margin-top:1.6em; }
.prose p{ font-size:1.12rem; line-height:1.8; color:var(--ink-2); margin:0 0 1.1em; text-wrap:pretty; }
.prose p:last-child{ margin-bottom:0; }
.prose-invert p{ color:#C9BFA9; }
.prose .prose-emphasis{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.3rem,2.2vw,1.7rem); line-height:1.45; color:var(--ink); margin-top:1.1em; }
.prose-invert .prose-emphasis{ color:#FBF7EC; }

.area-back{ font-size:.92rem; font-weight:600; color:var(--accent-deep); white-space:nowrap; }
.area-back:hover{ color:var(--accent); }
a.item{ text-decoration:none; }

/* Sans-serif headings scope (Areas detail pages) — contemporary, warm, calm */
.sans-head h1, .sans-head h2, .sans-head h3{ font-family:var(--font-body); font-weight:600; letter-spacing:-.01em; }
.sans-head .area-headline{ line-height:1.28; }
/* Knowledge-library article headlines run much longer than page titles, so on phones
   they scale down from the site's 2.3rem page-title size (which they meet again at 480px).
   Areas-of-Focus detail heroes (.area-hero) are excluded. */
@media (max-width: 480px){ .page-head:not(.area-hero) h1.area-headline{ font-size:clamp(1.75rem, 7.7vw, 2.3rem); } }
.sans-head h2{ line-height:1.3; }
.exp-head{ font-size:clamp(2.4rem,4.2vw,3.55rem); }
.sans-head .eyebrow{ font-size:.92rem; font-weight:700; }
.sans-head .prose .prose-emphasis{ font-family:var(--font-body); font-weight:600; letter-spacing:-.005em; line-height:1.5; }
.card-link{ text-decoration:none; display:flex; flex-direction:column; }
.card-link h3, .card-link p{ color:inherit; }
.card-more{ margin-top:18px; font-size:.9rem; font-weight:600; color:var(--accent-deep); display:inline-flex; align-items:center; gap:.5em; }
.card-link:hover .card-more{ color:var(--accent); }
.card-link .arr{ transition:transform .3s var(--ease); }
.card-link:hover .arr{ transform:translateX(4px); }
.callout h2{ margin-bottom:.4em; }
.callout .hero-cta{ justify-content:center; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 940px){
  .nav-links, .nav-meta{ display:none; }
  .burger{ display:flex; }
  .cols-2, .cols-3{ grid-template-columns:1fr; }
  .grid{ gap:44px; }
  [data-hero="split"] .hero-inner,
  [data-hero="editorial"] .hero-inner{ grid-template-columns:1fr; gap:40px; min-height:0; padding:30px 0 64px; }
  [data-hero="editorial"] .hero-copy{ padding:0; }
  [data-hero="editorial"] .hero-art{ min-height:340px; }
  .hero-art.ph{ min-height:300px; }
  .area-list{ grid-template-columns:1fr; }
  .step{ grid-template-columns:1fr; gap:8px; padding:32px 0; }
  .step .idx{ font-size:2rem; }
  footer .fcols{ grid-template-columns:1fr 1fr; gap:36px; }
}
/* very small phones: keep the header CTA + burger inside the viewport */
@media (max-width: 380px){
  .nav-cta{ gap:10px; }
  .topbar .nav-cta .btn{ font-size:.88rem; padding:.72em 1.05em; gap:.45em; }
}
@media (max-width: 600px){
  body{ font-size:16px; }
  .wrap{ padding:0 22px; }
  :root{ --section-pad: 78px; }
  footer .fcols{ grid-template-columns:1fr; }
  /* Trust signals: single calm column, let titles wrap instead of forcing unequal tracks */
  .hero-meta{ grid-template-columns:1fr; gap:0; }
  .hero-meta > div{ padding:16px 0; }
  .hero-meta > div + div{ border-top:1px solid var(--line); }
  .hero-meta .k{ white-space:normal; }
  /* CTAs: full-width, stacked, easy to tap */
  .hero-cta{ flex-direction:column; align-items:stretch; width:100%; gap:12px; }
  .hero-cta .btn{ width:100%; }
  /* Neutralize desktop-only forced line breaks on small screens */
  br.cta-brk{ display:none; }
}
@media print{
  .topbar, .burger, .mobile-menu, .scrim, .twk-panel, .hero-cta, footer .fbar{ display:none !important; }
  body::before, body::after{ display:none; }
  *{ box-shadow:none !important; }
}

/* ── Archive intro: two-column text + editorial image ───────────────────── */
.arch-intro{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center; }
.arch-intro .cat-head{ margin:0; }
.arch-intro-art.ph{ aspect-ratio:3/2; min-height:0; width:100%; }
.arch-intro-art.ph img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.arch-intro-art.ph:has(img)::before{ content:none; }
@media (max-width:820px){
  .arch-intro{ grid-template-columns:1fr; gap:32px; }
  .arch-intro .cat-head{ max-width:none !important; }
  .arch-intro-art.ph{ aspect-ratio:16/9; }
}

/* ── 320px QA: interior-page opening rhythm ─────────────────────────────────
   Match the approved articles.html opening (section-pad × .52) on the generic
   interior page heads. Pages with an inline page-head padding (articles,
   contact, article-* details) keep theirs; .about-hero / .area-hero excluded. */
@media (max-width:340.5px){
  main.site > section.page-head:not(.about-hero):not(.area-hero){ padding-top:calc(var(--section-pad) * .52); }
}

/* 320px QA: Areas-of-Focus detail hero — the stacked two-column grid's 64px row gap is
   what separates the H1 from the first body line; halve it at 320 only. */
@media (max-width:340.5px){
  main.site > section.area-hero .grid.cols-2{ row-gap:32px !important; } /* !important: the grid carries an inline gap:64px */
}

/* 320px QA: Areas-of-Focus detail — section 1 → section 2 boundary. Hero bottom −15%
   (63.8 → 54.23), next section top −50% (116 → 58). Only the section directly after the
   area hero is touched; internal rhythm untouched. */
@media (max-width:340.5px){
  main.site > section.area-hero{ padding-bottom:54.23px; }
  main.site > section.area-hero + section{ padding-top:58px; }
}

/* 320px QA: Areas-of-Focus detail — section 2 → section 3 boundary. Section 2
   padding-bottom −40% (116 → 69.6), section 3 padding-top −50% (116 → 58).
   Positional selectors: all 18 detail pages share hero → sec2 → sec3. */
@media (max-width:340.5px){
  main.site > section.area-hero + section{ padding-bottom:69.6px; }
  main.site > section.area-hero + section + section{ padding-top:58px; }
}

/* 320px QA: Areas-of-Focus detail — section 3 → section 4 (light → dark) boundary.
   Section 3 padding-bottom −50% (116 → 58), section 4 padding-top −40% (116 → 69.6). */
@media (max-width:340.5px){
  main.site > section.area-hero + section + section{ padding-bottom:58px; }
  main.site > section.area-hero + section + section + section{ padding-top:69.6px; }
}

/* 320px QA: Areas-of-Focus detail — section 4 → section 5 (dark → light) rebalance.
   Section 4 padding-bottom −25% then a further −10% (116 → 87 → 78.3), section 5 padding-top +50% (52 → 78).
   Section 4 padding-top (69.6, approved) untouched — longhand only. */
@media (max-width:340.5px){
  main.site > section.area-hero + section + section + section{ padding-bottom:78.3px; }
  main.site > section.area-hero + section + section + section + section{ padding-top:78px; }
}

/* 320px: drawer CTA "Start Your Journey" / "เริ่มต้นการเดินทาง" overflowed its 191.2px box
   (label needs up to 212.1px). Widen the button into the drawer's 36px padding. */
@media (max-width:340.5px){
  .mobile-menu .btn-block{ width:auto; margin-left:-20px; margin-right:-20px; padding-left:14px; padding-right:14px; justify-content:center; }
}

/* 360px QA (2026-08-25): article detail pages — gap between "Back to …" link and the CTA section
   was 116 + 71.92 = 187.92px; halved to 58 + 35.96 = 93.96px. Band-scoped so 320px and every other
   breakpoint stay inert; the :has() scope reaches article pages only (no other page has .article-foot). */
@media (min-width:341px) and (max-width:360.5px){
  main.site > section:has(.article-foot){ padding-bottom:58px }
  main.site > section:has(.article-foot) + section.section-tight{ padding-top:35.96px }
}

/* ═══════════════════════════════════════════════════════════════════════════
   375px MOBILE QA — SECTION BOUNDARIES (site-wide, TH + EN)   [OPEN / IN PROGRESS]
   Band: 361–375.5px only. Inert at 320 and 360 (both locked baselines) and at
   ≥376px. Method: the 320px boundary work is the reference for the RATIOS, then
   each family is eased back for 375px — every boundary here is deliberately
   LOOSER than its 320px counterpart, never tighter, and no 320px px value is
   copied verbatim.

   1) Base rhythm. Every full boundary on the site comes from --section-pad
      (section, .section-tight ×.62, .page-head ×.8/×.5, .area-hero pb ×.55).
      Reducing the token once fixes every page in both languages proportionally
      instead of 262 per-page overrides. 116 → 92.8px (−20%); theme.js writes the
      token inline on <html>, so !important is required to reach it. Side effect:
      the Tweaks "spacing" control is pinned inside this band only.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:361px) and (max-width:375.5px){
  :root{ --section-pad:92.8px !important }

  /* 2) Areas-of-Focus detail (18 pages) — the light/dark rhythm needs the same
        asymmetric shaping the 320px pass established, eased ~15%. Ratios of the
        116px base: s2 .575/.69 · s3 .575/.575 · s4 .69/.776 · s5 pt ×1.4 (52px
        clamp, not token-derived). Asymmetry is intentional — do not normalize.
        Positional selectors: all 18 pages share hero → s2 → s3 → s4 → s5. */
  main.site > section.area-hero + section{ padding-top:66.7px; padding-bottom:80px }
  main.site > section.area-hero + section + section{ padding-top:66.7px; padding-bottom:66.7px }
  main.site > section.area-hero + section + section + section{ padding-top:80px; padding-bottom:90px }
  main.site > section.area-hero + section + section + section + section{ padding-top:72.8px }

  /* 3) Approach — the session → final-CTA boundary is an inline clamp (44px each
        side), not the token, so it needs its own reduction: 44 → 35.2 (−20%). */
  main.site > section.session-sec{ padding-bottom:35.2px !important }
  main.site > section.session-sec + section.cta-sec{ padding-top:35.2px !important }

  /* 4) Article detail — "Back to …" link → CTA section. Token pass leaves
        92.8 + 57.54; shape it to 69.6 + 46 (−25% / −20%). */
  main.site > section:has(.article-foot){ padding-bottom:69.6px }
  main.site > section:has(.article-foot) + section.section-tight{ padding-top:46px }

  /* 5) CTA label centring — same root cause the 320px pass fixed, which the
        per-page ≤340.5px rules cannot reach here. `.btn` ships no
        justify-content (= normal) and `@media (max-width:600px)` stretches
        `.hero-cta .btn` to width:100%, so label + arrow sit hard against the
        left padding. One band-scoped rule centres every stacked CTA on every
        page, both languages — hero CTAs, final-callout CTAs, area-detail and
        article CTAs alike. Nothing else is touched: no width, height, padding,
        typography, label text or arrow. CTA types that are already centred
        (.topbar .nav-cta .btn · .mobile-menu .btn-block · .price-card
        .btn-block · .kc-cluster-foot .btn · .return-card .rc-link) inherit
        centring from .btn-block/their own rules and are deliberately left
        alone. */
  main.site .hero-cta .btn{ justify-content:center }

  /* 6) "Book a Pre-Talk Session →" on ONE line. The English sheet releases
        `.btn`'s nowrap for stacked CTAs at ≤380px
        (styles-en.css: `.lang-en .hero-cta .btn{white-space:normal}`), which
        375px still falls inside — so every English primary CTA broke the label
        onto a second line (48 → 67.9px tall) while the Thai pages, which never
        get that rule, stayed on one line. The box itself needs no widening: it
        is already full-width and identical to its ghost partner (251.2px), so
        the pair stays balanced. The label just needs room inside — at the stock
        26.11px side padding the inner box is 199px against a ~198px
        requirement, a 1px margin that any font-render difference would break.
        Restoring nowrap and easing the side padding to 16px gives 219.2px of
        inner width for a 192.8px label, comfortably one line in both languages.
        Untouched: box width, height, font, label text, arrow, gap, and the
        ghost button's own padding (both labels are centred, so the pair reads
        identical). */
  main.site .hero-cta .btn-primary{ white-space:nowrap; padding-left:16px; padding-right:16px }
}

/* ═══════════════════════════════════════════════════════════════════════════
   390px + 430px MOBILE — SECTION BOUNDARIES (site-wide, TH + EN)
   [PRE-STAGED / NOT APPROVED — awaiting each size's own QA phase]
   Same method as the 375px block: the 320px pass supplies the RATIOS, then each
   width is eased further as the screen grows, so the rhythm opens up gradually
   320 → 360 → 375 → 390 → 430 and never tightens. No px value is copied from a
   smaller viewport. Two narrow bands so 320/360/375 stay bit-for-bit inert, and
   ≥431px (tablet/desktop) is untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 390px band (iPhone 14 / 15) — base 116 → 96.28px (−17%) */
@media (min-width:375.6px) and (max-width:400.5px){
  :root{ --section-pad:96.28px !important }
  main.site > section.area-hero + section{ padding-top:69.6px; padding-bottom:83.5px }
  main.site > section.area-hero + section + section{ padding-top:69.6px; padding-bottom:69.6px }
  main.site > section.area-hero + section + section + section{ padding-top:83.5px; padding-bottom:94px }
  main.site > section.area-hero + section + section + section + section{ padding-top:75.4px }
  main.site > section.session-sec{ padding-bottom:36.96px !important }
  main.site > section.session-sec + section.cta-sec{ padding-top:36.96px !important }
  main.site > section:has(.article-foot){ padding-bottom:72.5px }
  main.site > section:has(.article-foot) + section.section-tight{ padding-top:48px }
}

/* 430px band (iPhone Pro Max) — base 116 → 101.5px (−12.5%) */
@media (min-width:400.6px) and (max-width:430.5px){
  :root{ --section-pad:101.5px !important }
  main.site > section.area-hero + section{ padding-top:73.1px; padding-bottom:87.7px }
  main.site > section.area-hero + section + section{ padding-top:73.1px; padding-bottom:73.1px }
  main.site > section.area-hero + section + section + section{ padding-top:87.7px; padding-bottom:98.6px }
  main.site > section.area-hero + section + section + section + section{ padding-top:79px }
  main.site > section.session-sec{ padding-bottom:38.5px !important }
  main.site > section.session-sec + section.cta-sec{ padding-top:38.5px !important }
  main.site > section:has(.article-foot){ padding-bottom:76px }
  main.site > section:has(.article-foot) + section.section-tight{ padding-top:50.5px }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STACKED CTA LABEL CENTRING — 375.6px → 600px (site-wide, TH + EN)
   Same root cause already fixed at ≤340.5px (per page) and in the 375px band:
   `.btn` ships no justify-content and `@media (max-width:600px)` stretches
   `.hero-cta .btn` to width:100%, so label + arrow sit hard against the left
   padding. This band covers the rest of the phone range the stretch rule
   applies to — 390px and 430px included — and stops at 600px, where the
   buttons return to their natural inline width. Lower bound 375.6px keeps the
   320 / 360 / 375 baselines bit-for-bit inert; ≥601px (tablet/desktop) audited
   clean and untouched. Nothing else changes: no width, height, padding,
   typography, label or arrow. CTA types that already centre themselves
   (.topbar .nav-cta .btn · .mobile-menu .btn-block · .price-card .btn-block ·
   .kc-cluster-foot .btn · .return-card .rc-link) are deliberately left alone.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:375.6px) and (max-width:600px){
  main.site .hero-cta .btn{ justify-content:center }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TH DESKTOP SCALE — width/margins + typography (Thai pages only)
   Scope: html[lang="th"] → zero effect on EN pages. ≥1360px only → ≤1280px untouched.
   Values = the Home TH prototype approved live (index.html keeps its identical
   local rules; same values, so nothing stacks). .wrap-narrow reading columns
   (article/area prose, FAQ, page heads) keep their width by design.
   Line-height rule is specificity 0,1,0: it only reaches unclassed p/li whose
   leading comes from the generic :lang(th) 1.92 — any component rule wins.
   Rollback = delete this block.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1360px){
  html[lang="th"] .wrap:not(.wrap-narrow){ max-width:1320px; padding:0 40px; }
  html[lang="th"] main.site{ font-size:18.5px; }
  html[lang="th"] .area-hero-body p{ font-size:18.5px; }
  html[lang="th"] .prose p{ font-size:1.2rem; }
  html[lang="th"] .prose .prose-h{ font-size:1.75rem; }
  html[lang="th"] .acc-q{ font-size:1.3rem; }
  html[lang="th"] .card p{ font-size:1.04rem; }
  html[lang="th"] .kc-card .art-excerpt{ font-size:1rem; }
  html[lang="th"] .price-card li{ font-size:1.02rem; }
  html[lang="th"] .experience-list li{ font-size:1.1rem; }
  html[lang="th"] .qual-list li{ font-size:1.1rem; }
  html[lang="th"] .cat-desc{ font-size:1.1rem; }
  html[lang="th"] .area-list .item .t small{ font-size:.88rem; }
  html[lang="th"] .ct-row .v{ font-size:17px; }
  html[lang="th"] .ct-note, html[lang="th"] .ct-sub{ font-size:16.5px; }
  html[lang="th"] .topbar .nav-links a{ font-size:18px; padding:.6em .62em; }
  html[lang="th"] .topbar .nav-tel{ font-size:1rem; }
  html[lang="th"] .topbar .lang-switch{ font-size:.88rem; }
}
@media (min-width:1600px){
  html[lang="th"] .wrap:not(.wrap-narrow){ max-width:1440px; padding:0 48px; }
  html[lang="th"] main.site{ font-size:19.5px; }
  html[lang="th"] .area-hero-body p{ font-size:19.5px; }
  html[lang="th"] .prose p{ font-size:20px; }
  html[lang="th"] .acc-q{ font-size:1.36rem; }
  html[lang="th"] .page-head .lead{ font-size:1.42rem; }
  html[lang="th"] .topbar .nav-links a{ padding:.6em .85em; }
  :where(html[lang="th"] main.site :is(p,li)):not([class]){ line-height:1.86; }
}