/* ==========================================================================
   TPM Consulting — Industrial Corporate Design System
   Palette: navy / steel / grey / safety amber
   Type: Source Serif 4 (display) + Inter (UI & body)
   ========================================================================== */

:root {
  /* Industrial navy with the logo's gold as the accent. The dark surfaces are
     blue; gold stays exactly as sampled from the logo (#F9AF03) and is the
     only warm colour on the page, which is what makes it read as an accent. */
  --navy-900: #071A2F;
  --navy-800: #0E2A47;
  --navy-700: #1A3D61;
  --steel-600: #40607F;
  --steel-400: #7793B0;
  --grey-050: #F6F8FA;
  --grey-100: #EDF1F5;
  --grey-200: #DDE5EC;
  --grey-300: #C4D0DB;
  --card-line: #C4D0DB;  /* resting card outline — visible without hover */
  --grey-500: #4E5D6E;   /* body copy inside cards — 6.7:1 on white */
  --grey-450: #647486;   /* de-emphasised meta only — 4.8:1 */
  --ink: #14212E;

  /* Logo gold. --amber is the graphic fill; --amber-text is the darkened
     version used wherever gold would sit as text on white. */
  --amber: #F9AF03;
  --amber-dark: #D69400;
  --amber-text: #8A5F00;
  --white: #FFFFFF;

  --font-display: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --maxw: 1240px;
  --gutter: 32px;
  --radius: 2px;
  --shadow-card: 0 1px 2px rgba(7, 26, 47, .06), 0 8px 24px rgba(7, 26, 47, .08);
  --shadow-lift: 0 2px 4px rgba(7, 26, 47, .08), 0 18px 40px rgba(7, 26, 47, .16);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--navy-800); text-decoration: none; }
button { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy-900);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.18;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.35rem, 4.4vw, 3.7rem); }
h2 { font-size: clamp(1.85rem, 3vw, 2.6rem); }
h3 { font-size: 1.28rem; line-height: 1.3; }
h4 { font-size: 1.05rem; }
p  { margin: 0 0 1.1em; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 840px; }
.section { padding: 96px 0; }
.section--tight { padding: 68px 0; }
.section--grey { background: var(--grey-050); border-top: 1px solid var(--grey-200); border-bottom: 1px solid var(--grey-200); }
.section--navy { background: var(--navy-800); color: #DCE5EE; }
.section--navy h2, .section--navy h3 { color: #fff; }

.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Eyebrow / section heads ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber-text);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--amber);
  flex: none;
}
.section--navy .eyebrow { color: var(--amber); }
.section--navy .eyebrow::before { background: var(--amber); }

.section-head {
  max-width: 760px;
  margin-bottom: 46px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--grey-200);
}
.section--navy .section-head { border-bottom-color: rgba(255,255,255,.18); }
.section-head h2 { margin-bottom: 12px; }
.section-head p { color: var(--grey-500); font-size: 1.08rem; margin-bottom: 0; }
.section--navy .section-head p { color: #A9BBCE; }
.lead { font-size: 1.15rem; color: var(--steel-600); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px;
  font-size: .93rem; font-weight: 600; letter-spacing: .01em;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn--primary { background: var(--amber); color: var(--navy-900); border-color: var(--amber); }
.btn--primary:hover { background: var(--amber-dark); border-color: var(--amber-dark); color: var(--navy-900); }
.btn--navy { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.btn--navy:hover { background: var(--navy-900); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.btn--outline { background: transparent; color: var(--navy-800); border-color: var(--grey-300); }
.btn--outline:hover { border-color: var(--navy-800); background: var(--grey-050); }
.btn--block { width: 100%; justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .88rem; font-weight: 600; color: var(--navy-800);
  border-bottom: 1px solid var(--grey-300);
  padding-bottom: 3px;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.link-arrow::after { content: "\2192"; transition: transform .18s var(--ease); }
.link-arrow:hover { color: var(--amber-text); border-color: var(--amber); }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- Top bar + header ---------- */
.topbar {
  background: var(--navy-900);
  color: #A3B6C9;
  font-size: .78rem;
  letter-spacing: .04em;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; height: 38px; }
.topbar a { color: #B9C9D9; }
.topbar a:hover { color: #fff; }
.topbar-links { display: flex; gap: 24px; }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(160%) blur(6px);
  border-bottom: 1px solid var(--grey-200);
}
.site-header .container { display: flex; align-items: center; gap: 40px; height: 78px; }

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
/* The registered mark is a raster with its own gold field — sized so the
   'TPM' reads cleanly, and never stretched. */
.brand { align-items: center; }
.brand picture { flex: none; display: block; line-height: 0; }
.brand-logo {
  height: 50px; width: auto; flex: none; display: block;
  border: 1px solid rgba(0,0,0,.08);
}
.site-footer .brand-logo { height: 54px; border-color: rgba(255,255,255,.14); }
@media (max-width: 720px) {
  .brand-logo { height: 40px; }
  /* .brand-sub is decided in the header block at the end of this file, so that
     one rule governs it at every width instead of three racing on source order. */
}
.brand-text { line-height: 1.05; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.24rem; font-weight: 700; color: var(--navy-900);
  letter-spacing: -.02em;
}
.brand-sub {
  display: block;
  font-size: .62rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--grey-500); margin-top: 2px;
}

.nav { display: flex; gap: 30px; margin-left: auto; }
.nav a {
  font-size: .92rem; font-weight: 500; color: var(--navy-800);
  padding: 6px 0; position: relative;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--amber); transition: right .2s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.header-cta { flex: none; }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--navy-800); margin: 4px 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--navy-900);
  color: #fff;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%;
  opacity: .42;
  filter: saturate(.55) contrast(1.06) brightness(.92);
}
/* two layers: a flat blue wash that tints the photograph, then the gradient
   that keeps the left side dark enough for the headline to sit on */
.hero-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: #0E2A47; mix-blend-mode: color; opacity: .72;
}
.hero-media::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(100deg,
    rgba(7,26,47,.95) 0%, rgba(7,26,47,.88) 38%, rgba(7,26,47,.55) 72%, rgba(14,42,71,.40) 100%);
}
.hero-inner { position: relative; z-index: 2; padding: 104px 0 96px; max-width: 780px; }
.hero h1 { color: #fff; margin-bottom: 22px; }
.hero-sub { font-size: 1.16rem; color: #BCCBDA; max-width: 640px; margin-bottom: 34px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 46px; }
.hero-stats {
  display: flex; flex-wrap: wrap; gap: 48px;
  padding-top: 32px; border-top: 1px solid rgba(255,255,255,.16);
}
.hero-stat .num {
  font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; color: #fff; line-height: 1;
}
.hero-stat .lbl {
  display: block; margin-top: 8px;
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: #8FA5BC;
}

/* Trust strip */
.trustbar { background: var(--grey-050); border-bottom: 1px solid var(--grey-200); padding: 26px 0; }
.trustbar .container { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.trustbar .label {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--grey-500); font-weight: 700;
}
.trustbar ul { list-style: none; display: flex; flex-wrap: wrap; gap: 34px; margin: 0; padding: 0; }
.trustbar li {
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 600;
  color: var(--steel-600); letter-spacing: .02em;
}

/* ---------- Challenge cards ---------- */
.challenge-grid { border-top: 1px solid var(--grey-200); border-left: 1px solid var(--grey-200); }
.challenge {
  padding: 34px 30px;
  border-right: 1px solid var(--grey-200);
  border-bottom: 1px solid var(--grey-200);
  background: #fff;
  transition: background .2s var(--ease);
}
.challenge:hover { background: var(--grey-050); }
.challenge .idx {
  font-family: var(--font-display); font-size: .95rem; color: var(--amber-text);
  font-weight: 700; letter-spacing: .06em; margin-bottom: 14px; display: block;
}
.challenge h3 { font-size: 1.12rem; margin-bottom: 10px; }
.challenge p { font-size: .95rem; line-height: 1.65; color: var(--grey-500); margin: 0; }

.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.split img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.figure-frame { position: relative; }
.figure-frame::before {
  content: ""; position: absolute; left: -14px; top: -14px; width: 92px; height: 92px;
  border-left: 3px solid var(--amber); border-top: 3px solid var(--amber);
}

/* ---------- Service cards ---------- */
.svc-card {
  background: #fff;
  border: 1px solid var(--grey-200);
  border-top: 3px solid var(--navy-800);
  padding: 34px 30px 30px;
  display: flex; flex-direction: column;
  transition: box-shadow .22s var(--ease), transform .22s var(--ease), border-top-color .22s var(--ease);
}
.svc-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); border-top-color: var(--amber); }
.svc-icon {
  width: 46px; height: 46px; margin-bottom: 20px;
  display: grid; place-items: center;
  background: var(--grey-100); color: var(--navy-800); border-radius: var(--radius);
}
.svc-icon svg { width: 24px; height: 24px; }
.svc-card h3 { margin-bottom: 10px; }
.svc-card > p { font-size: .95rem; line-height: 1.68; color: var(--grey-500); }
.svc-list { list-style: none; margin: 6px 0 24px; padding: 0; }
.svc-list li {
  position: relative; padding-left: 20px; margin-bottom: 9px;
  font-size: .92rem; color: var(--ink);
}
.svc-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 2px; background: var(--amber);
}
.svc-card .link-arrow { margin-top: auto; align-self: flex-start; }

/* ---------- Framework ---------- */
.framework-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 8px; }
.fw-step {
  position: relative;
  padding: 34px 28px 30px;
  border-left: 1px solid rgba(255,255,255,.16);
}
.fw-step:first-child { border-left: 0; padding-left: 0; }
.fw-num {
  font-family: var(--font-display); font-size: .8rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 12px;
}
.fw-step h3 { font-size: 1.5rem; margin-bottom: 14px; }
.fw-step ul { list-style: none; margin: 0; padding: 0; }
.fw-step li {
  font-size: .92rem; color: #AEC0D2; padding: 9px 0;
  border-top: 1px solid rgba(255,255,255,.1);
}
.fw-rail {
  height: 3px; background: rgba(255,255,255,.14); position: relative; margin: 44px 0 0;
}
.fw-rail::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 26%; background: var(--amber); }

/* ---------- Insights / articles ---------- */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 36px; padding-bottom: 22px; border-bottom: 1px solid var(--grey-200);
}
.chip {
  padding: 8px 16px; font-size: .84rem; font-weight: 600;
  border: 1px solid var(--grey-300); background: #fff; color: var(--steel-600);
  border-radius: 100px; cursor: pointer;
  transition: all .16s var(--ease);
}
.chip:hover { border-color: var(--navy-800); color: var(--navy-800); }
.chip.is-active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

.article-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--grey-200);
  transition: box-shadow .22s var(--ease), transform .22s var(--ease);
  height: 100%;
}
.article-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.article-card .thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--grey-100); }
.article-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.article-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.cat-tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber-text); margin-bottom: 12px;
}
.article-card h3 { font-size: 1.16rem; margin-bottom: 10px; }
.article-card p { font-size: .93rem; line-height: 1.65; color: var(--grey-500); }
.article-meta {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--grey-200);
  font-size: .78rem; color: var(--grey-450); display: flex; gap: 14px;
}

.feature-article {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
  border: 1px solid var(--grey-200); background: #fff; margin-bottom: 40px;
}
.feature-article .thumb { min-height: 340px; overflow: hidden; }
.feature-article .thumb img { width: 100%; height: 100%; object-fit: cover; }
.feature-article .fa-body { padding: 48px 52px; display: flex; flex-direction: column; justify-content: center; }
.feature-article h3 { font-size: 1.85rem; }

/* ---------- Case studies ---------- */
.case-card { border: 1px solid var(--grey-200); background: #fff; display: flex; flex-direction: column; height: 100%; }
.case-hero { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.case-hero img { width: 100%; height: 100%; object-fit: cover; }
.case-sector {
  position: absolute; left: 0; bottom: 0;
  background: var(--navy-800); color: #fff;
  font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  padding: 8px 16px;
}
.case-body { padding: 30px 30px 26px; flex: 1; display: flex; flex-direction: column; }
.case-body h3 { font-size: 1.3rem; }
.psr { margin: 18px 0 22px; }
.psr-row { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 11px 0; border-top: 1px solid var(--grey-200); }
.psr-row .k {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--grey-500); padding-top: 3px;
}
.psr-row .v { font-size: .92rem; color: var(--ink); }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: auto; }
.metric { background: var(--grey-050); border-left: 2px solid var(--amber); padding: 14px 14px; }
.metric .m-num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--navy-900); line-height: 1; }
.metric .m-lbl { font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--grey-500); margin-top: 6px; display: block; }

/* ---------- Gated download ---------- */
.gate {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--grey-200); background: #fff; box-shadow: var(--shadow-card);
}
.gate-visual {
  background: var(--navy-800); color: #fff; padding: 52px 52px;
  display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden;
}
.gate-visual::after {
  content: ""; position: absolute; right: -60px; bottom: -60px; width: 240px; height: 240px;
  border: 2px solid rgba(255,255,255,.08); border-radius: 50%;
}
.gate-visual h2 { color: #fff; font-size: 1.9rem; }
.gate-visual p { color: #A9BBCE; font-size: .98rem; }
.gate-list { list-style: none; margin: 20px 0 0; padding: 0; }
.gate-list li {
  font-size: .92rem; color: #CBD8E5; padding: 9px 0 9px 24px; position: relative;
}
.gate-list li::before {
  content: "\25B8"; position: absolute; left: 0; color: var(--amber);
}
.gate-form { padding: 48px 52px; }
.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: .76rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--steel-600); margin-bottom: 7px;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; font-size: .95rem; font-family: var(--font-sans);
  border: 1px solid var(--grey-300); border-radius: var(--radius); background: #fff; color: var(--ink);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy-800); box-shadow: 0 0 0 3px rgba(11,37,69,.09);
}
.field.has-error input, .field.has-error select { border-color: #B42318; }
.err { display: none; color: #B42318; font-size: .8rem; margin-top: 6px; }
.field.has-error .err { display: block; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: var(--grey-500); margin: 4px 0 20px; }
.consent input { width: 16px; height: 16px; margin-top: 3px; flex: none; }
.form-note { font-size: .78rem; color: var(--grey-450); margin-top: 14px; }
.gate-success { display: none; }
.gate-success.is-visible { display: block; }
.success-badge {
  width: 52px; height: 52px; border-radius: 50%; background: #E7F4EC; color: #157347;
  display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 18px;
}

/* ---------- About / credibility ---------- */
.cred-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--grey-200); }
.cred { padding: 30px 28px; border-right: 1px solid var(--grey-200); }
.cred:last-child { border-right: 0; }
.cred .c-num { font-family: var(--font-display); font-size: 2.3rem; font-weight: 700; color: var(--navy-900); line-height: 1; }
.cred .c-lbl { font-size: .84rem; color: var(--grey-500); margin-top: 10px; }

.pillar-list { list-style: none; margin: 0; padding: 0; }
.pillar-list li { padding: 18px 0; border-top: 1px solid var(--grey-200); display: grid; grid-template-columns: 30px 1fr; gap: 16px; }
.pillar-list .p-idx { font-family: var(--font-display); color: var(--amber-text); font-weight: 700; }
.pillar-list h4 { margin: 0 0 4px; }
.pillar-list p { margin: 0; font-size: .94rem; line-height: 1.65; color: var(--grey-500); }

.quote-block {
  border-left: 3px solid var(--amber); padding: 6px 0 6px 28px;
  font-family: var(--font-display); font-size: 1.4rem; line-height: 1.45; color: var(--navy-900);
}

/* ---------- Named step ----------
   His step sequences are a name and then an explanation, not bullets. The
   name is set as a heading so the sequence is still scannable, but smaller
   and lighter than an h2 so it does not compete with the section it sits in. */
.article-body-copy .step-name {
  margin: 1.7em 0 .35em;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  color: var(--navy-900); letter-spacing: .01em;
}
.article-body-copy .step-name + p { margin-top: 0; }
html[lang="th"] .article-body-copy .step-name { font-size: 1.12rem; line-height: 1.55; }

/* ---------- Worked example ----------
   His teaching pages state a definition and then immediately work a number
   through it. The calculation is the part a reader checks themselves, so the
   steps are set apart from the prose and given a tabular figure: the point of
   the block is that "48 − 6 = 42" lines up under "42 ÷ 50". */
.worked-example {
  margin: 26px 0; padding: 22px 26px;
  background: var(--tint-click);
  border: 1px solid #C9D9E8;
  border-left: 4px solid var(--navy-800);
  border-radius: 4px;
}
.worked-example__q { margin: 0; color: var(--navy-900); }
.worked-example__q > span {
  display: block; margin-bottom: 6px;
  font-family: var(--font-display); font-size: .78rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--amber-text);
}
.worked-example__steps {
  margin: 16px 0 0; padding: 16px 0 0; list-style: none;
  border-top: 1px solid #C9D9E8;
  font-variant-numeric: tabular-nums;
}
.worked-example__steps > li { margin: 0 0 8px; line-height: 1.7; }
.worked-example__steps > li:last-child {
  margin-bottom: 0; font-weight: 600; color: var(--navy-900);
}
html[lang="th"] .worked-example__steps > li { line-height: 1.9; }
@media (max-width: 600px) { .worked-example { padding: 18px; } }

/* ---------- CTA band ---------- */
.cta-band { background: var(--navy-800); color: #fff; padding: 72px 0; }
.cta-band .container { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; margin-bottom: 8px; }
.cta-band p { color: #A9BBCE; margin: 0; max-width: 620px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: #8FA5BC; padding: 72px 0 0; font-size: .9rem; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 52px; }
.site-footer h4 {
  color: #fff; font-family: var(--font-sans); font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 11px; }
.site-footer a { color: #A9BBCE; }
.site-footer a:hover { color: #fff; }
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-mark { background: #14304F; }
.footer-brand p { color: #9AACC0; font-size: .9rem; margin: 18px 0 0; max-width: 320px; }
.footer-sub {
  border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0; font-size: .8rem;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: #8CA0B5;
}
.footer-legal { display: flex; gap: 22px; }

/* ---------- Article page ---------- */
.article-hero { background: var(--navy-900); color: #fff; padding: 68px 0 60px; }
.article-hero .cat-tag { color: var(--amber); }
.article-hero h1 { color: #fff; font-size: clamp(2rem, 3.6vw, 3rem); max-width: 900px; }
.article-hero .dek { color: #BCCBDA; font-size: 1.1rem; max-width: 760px; }
.article-hero .meta { display: flex; gap: 22px; flex-wrap: wrap; font-size: .82rem; color: #8FA5BC; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); }
.breadcrumb { font-size: .8rem; color: var(--grey-450); padding: 18px 0; border-bottom: 1px solid var(--grey-200); }
.breadcrumb a { color: var(--grey-500); }
.breadcrumb a:hover { color: var(--navy-800); }

.article-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 64px; padding: 56px 0 88px; }
.article-body-copy { font-size: 1.07rem; line-height: 1.75; max-width: 760px; }
.article-body-copy > h2 {
  font-size: 1.8rem;
  margin-top: 2.4em;
  padding-top: 1.1em;
  border-top: 1px solid var(--grey-200);
}
.article-body-copy > h2:first-child, .article-body-copy .exec-summary h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.article-body-copy > h3 {
  font-size: 1.2rem;
  margin-top: 2em;
  padding-left: 14px;
  border-left: 3px solid var(--amber);
}
.article-body-copy ul, .article-body-copy ol { padding-left: 22px; margin-bottom: 1.2em; }
.article-body-copy li { margin-bottom: .5em; }
.article-body-copy figure { margin: 2.2em 0; }
.article-body-copy figcaption { font-size: .84rem; color: var(--grey-500); margin-top: 10px; border-left: 2px solid var(--grey-300); padding-left: 12px; }
.article-body-copy table { width: 100%; border-collapse: collapse; margin: 1.8em 0; font-size: .94rem; }
.article-body-copy th {
  text-align: left; background: var(--navy-800); color: #fff; font-weight: 600;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; padding: 12px 14px;
}
.article-body-copy td { padding: 12px 14px; border-bottom: 1px solid var(--grey-200); vertical-align: top; }
.article-body-copy tr:nth-child(even) td { background: var(--grey-050); }

.exec-summary {
  background: var(--grey-050); border-left: 3px solid var(--navy-800);
  padding: 28px 32px; margin-bottom: 40px;
}
.exec-summary h2 {
  font-family: var(--font-sans); font-size: .76rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--navy-800); margin: 0 0 14px;
}
.exec-summary ul { margin: 0; padding-left: 20px; }
.exec-summary li { font-size: .97rem; margin-bottom: 8px; }

.callout {
  border: 1px solid var(--grey-200); border-top: 3px solid var(--amber);
  background: #fff; padding: 26px 28px; margin: 2em 0;
}
.callout h4 {
  font-family: var(--font-sans); font-size: .74rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--amber-text); margin-bottom: 10px;
}
.callout p:last-child { margin-bottom: 0; }

.steps-list { list-style: none; counter-reset: st; padding: 0; margin: 1.6em 0; }
.steps-list li {
  counter-increment: st; position: relative; padding: 0 0 22px 56px;
  border-left: 1px solid var(--grey-200); margin-left: 16px;
}
.steps-list li::before {
  content: counter(st); position: absolute; left: -17px; top: 0;
  width: 34px; height: 34px; border-radius: 50%; background: var(--navy-800); color: #fff;
  display: grid; place-items: center; font-size: .88rem; font-weight: 700; font-family: var(--font-sans);
}
.steps-list li:last-child { border-left-color: transparent; }
.steps-list strong { display: block; margin-bottom: 4px; color: var(--navy-900); }

.aside-sticky { position: sticky; top: 100px; align-self: start; }
.aside-box { border: 1px solid var(--grey-200); padding: 24px; margin-bottom: 24px; background: #fff; }
.aside-box h4 { font-family: var(--font-sans); font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--grey-500); margin-bottom: 14px; }
.toc { list-style: none; margin: 0; padding: 0; }
.toc li { margin-bottom: 10px; }
.toc a { font-size: .9rem; color: var(--steel-600); }
.toc a:hover { color: var(--amber-text); }
.dl-list { list-style: none; margin: 0; padding: 0; }
.dl-list li { border-top: 1px solid var(--grey-200); padding: 12px 0; }
.dl-list li:first-child { border-top: 0; }
.dl-list a { font-size: .9rem; font-weight: 600; display: flex; gap: 10px; align-items: center; }
.dl-list .ext { font-size: .68rem; color: var(--grey-500); font-weight: 600; letter-spacing: .08em; }

/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  padding: 24px; background: rgba(6,21,39,.62);
}
.modal.is-open { display: flex; }
.modal-panel {
  background: #fff; max-width: 940px; width: 100%; max-height: 92vh; overflow: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,.35); position: relative;
}
.modal-close {
  position: absolute; right: 14px; top: 12px; z-index: 3;
  background: rgba(255,255,255,.18); border: 0; color: #fff; width: 34px; height: 34px;
  font-size: 1.3rem; line-height: 1; cursor: pointer; border-radius: var(--radius);
}
.modal-panel .gate { border: 0; box-shadow: none; }

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.hide { display: none !important; }
.divider { height: 1px; background: var(--grey-200); border: 0; margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  /* Header rules deliberately removed — every breakpoint that touches the
     header now lives in one place, at the end of this file. Three competing
     sets used to hide the nav at 1080, 1120 and 1150, which is why iPad and
     narrow-desktop widths behaved differently from each other. */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .framework-steps { grid-template-columns: repeat(2, 1fr); }
  .fw-step:nth-child(3) { border-left: 0; padding-left: 0; }
  .article-layout { grid-template-columns: 1fr; gap: 40px; }
  .aside-sticky { position: static; }
  .footer-top { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  body { font-size: 16px; }
  .section { padding: 64px 0; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 34px; }
  .feature-article { grid-template-columns: 1fr; }
  .feature-article .fa-body { padding: 32px 28px; }
  .gate { grid-template-columns: 1fr; }
  .gate-visual, .gate-form { padding: 34px 28px; }
  .cred-grid { grid-template-columns: repeat(2, 1fr); }
  .cred { border-bottom: 1px solid var(--grey-200); }
  .hero-inner { padding: 72px 0 64px; }
  .hero-stats { gap: 28px; }
  .topbar-links { display: none; }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
  .framework-steps { grid-template-columns: 1fr; }
  .fw-step { border-left: 0; padding-left: 0; }
  .metrics { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto; }
}

/* ==========================================================================
   BILINGUAL LAYER — Thai typography + language switch
   Thai pages are served at the site root, English under /en/.
   ========================================================================== */

:root {
  --font-display-th: "Noto Serif Thai", "Sarabun", "Source Serif 4", Georgia, serif;
  --font-sans-th: "IBM Plex Sans Thai", "Sarabun", "Inter", -apple-system, "Segoe UI", sans-serif;
}

html[lang="th"] body {
  font-family: var(--font-sans-th);
  font-size: 17px;
  line-height: 1.85;
  word-break: break-word;
  -webkit-font-feature-settings: "liga" 1;
}
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3, html[lang="th"] h4 {
  font-family: var(--font-display-th);
  line-height: 1.4;
  letter-spacing: 0;
}
html[lang="th"] h1 { font-size: clamp(1.95rem, 3.5vw, 2.95rem); }
html[lang="th"] h2 { font-size: clamp(1.55rem, 2.5vw, 2.15rem); }
html[lang="th"] h3 { font-size: 1.2rem; line-height: 1.5; }
html[lang="th"] .brand-name { font-family: var(--font-display-th); }
html[lang="th"] .eyebrow,
html[lang="th"] .cat-tag,
html[lang="th"] .fw-num,
html[lang="th"] .case-sector,
html[lang="th"] .m-lbl,
html[lang="th"] .field label,
html[lang="th"] .site-footer h4,
html[lang="th"] .exec-summary h2,
html[lang="th"] .callout h4,
html[lang="th"] .aside-box h4 { letter-spacing: .06em; }
html[lang="th"] .article-body-copy { font-size: 1.06rem; line-height: 1.95; }
html[lang="th"] .quote-block { font-size: 1.25rem; line-height: 1.7; }
html[lang="th"] .hero-stat .num,
html[lang="th"] .metric .m-num,
html[lang="th"] .cred .c-num { font-family: var(--font-display-th); }
html[lang="th"] .psr-row { grid-template-columns: 104px 1fr; }
html[lang="th"] .article-body-copy th { letter-spacing: .04em; }

/* Language switch ---------------------------------------------------------- */
.lang-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--grey-300);
  border-radius: 100px;
  overflow: hidden;
  flex: none;
  margin-left: 16px;
  background: #fff;
}
.lang-switch a {
  font-family: var(--font-sans);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 7px 13px;
  color: var(--grey-500);
  line-height: 1.4;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.lang-switch a:hover { color: var(--navy-800); background: var(--grey-050); }
.lang-switch a[aria-current="true"] { background: var(--navy-800); color: #fff; }
.topbar .lang-switch { border-color: rgba(255,255,255,.25); background: transparent; margin-left: 0; }
.topbar .lang-switch a { color: #B9C9D9; padding: 4px 11px; font-size: .7rem; }
.topbar .lang-switch a[aria-current="true"] { background: rgba(255,255,255,.14); color: #fff; }

@media (max-width: 1080px) {
  .lang-switch { margin-left: auto; margin-right: 8px; }
  .topbar-links { display: flex; }
  .topbar-links a:not(.lang-switch a) { display: none; }
}

/* Package / step cards used on the services page ---------------------------- */
.pkg-card {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) 300px;
  gap: 32px;
  padding: 34px 0;
  border-top: 1px solid var(--grey-200);
  align-items: start;
}
.pkg-card:last-child { border-bottom: 1px solid var(--grey-200); }
.pkg-num {
  font-family: var(--font-display);
  font-size: 2.4rem; font-weight: 700; color: var(--grey-300); line-height: 1;
}
.pkg-days {
  display: inline-block; margin-top: 10px;
  font-family: var(--font-sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--amber-text);
}
.pkg-deliverable {
  background: var(--grey-050); border-left: 2px solid var(--navy-800);
  padding: 16px 18px; font-size: .9rem; color: var(--steel-600);
}
.pkg-deliverable strong {
  display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--navy-800); margin-bottom: 6px; font-family: var(--font-sans);
}
@media (max-width: 1080px) { .pkg-card { grid-template-columns: 80px 1fr; } .pkg-deliverable { grid-column: 1 / -1; } }
@media (max-width: 560px) { .pkg-card { grid-template-columns: 1fr; gap: 16px; } }

/* Course cards -------------------------------------------------------------- */
.course {
  border: 1px solid var(--grey-200); border-left: 3px solid var(--navy-800);
  padding: 24px 26px; background: #fff; height: 100%;
  transition: border-left-color .2s var(--ease), box-shadow .2s var(--ease);
}
.course:hover { border-left-color: var(--amber); box-shadow: var(--shadow-card); }
.course .code {
  font-family: var(--font-sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; color: var(--grey-500);
}
.course .aud {
  float: right; font-family: var(--font-sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; color: var(--amber-text);
}
.course h3 { font-size: 1.08rem; margin: 12px 0 8px; }
.course p { font-size: .9rem; color: var(--grey-500); margin: 0; }

/* ==========================================================================
   RESULTS MARQUEE — looping client-results strip under the hero
   One slow, continuous translation; pauses on hover and focus, and becomes a
   plain scrollable row when the visitor prefers reduced motion.
   ========================================================================== */

.results {
  padding: 58px 0 62px;
  border-bottom: 1px solid var(--grey-200);
  background: #fff;
  overflow: hidden;
}
.results-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; flex-wrap: wrap; margin-bottom: 34px;
}
.results-head .copy { max-width: 620px; }
.results-head h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); margin-bottom: 10px; }
.results-head p { color: var(--grey-500); font-size: .95rem; margin: 0; }
.results-count {
  display: flex; align-items: baseline; gap: 14px; flex: none;
  border-left: 3px solid var(--amber); padding-left: 20px;
}
.results-count .n {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4vw, 3.4rem); font-weight: 700;
  color: var(--navy-900); line-height: .95;
}
.results-count .lbl {
  font-size: .8rem; color: var(--grey-500); max-width: 190px; line-height: 1.45;
}

.marquee { position: relative; display: grid; gap: 14px; }
.marquee-row {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.marquee-track {
  display: flex; gap: 14px; width: max-content;
  animation: tpm-marquee 150s linear infinite;
}
/* Three rows at different speeds, the middle one running the other way, so
   the strip shows far more of the client list without anything moving fast
   enough to be unreadable. */
.marquee-row:nth-child(1) .marquee-track { animation-duration: 150s; }
.marquee-row:nth-child(2) .marquee-track { animation-duration: 185s; animation-direction: reverse; }
.marquee-row:nth-child(3) .marquee-track { animation-duration: 165s; }
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes tpm-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.result-chip {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 24px 16px 20px;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-left: 3px solid var(--amber);
  white-space: nowrap; flex: none;
}
.result-chip .r-num {
  font-family: var(--font-display); font-size: 1.55rem; font-weight: 700;
  color: var(--navy-900); line-height: 1;
}
.result-chip .r-body { display: flex; flex-direction: column; gap: 3px; }
.result-chip .r-sector {
  font-size: .64rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--amber-text);
}
.result-chip .r-label { font-size: .88rem; color: var(--steel-600); }

html[lang="th"] .result-chip .r-num,
html[lang="th"] .results-count .n { font-family: var(--font-display-th); }
html[lang="th"] .result-chip .r-sector { letter-spacing: .06em; }

@media (max-width: 860px) {
  .results { padding: 44px 0 48px; }
  .results-head { margin-bottom: 26px; }
  .results-count { border-left: 0; padding-left: 0; }
  .marquee-row:nth-child(1) .marquee-track { animation-duration: 110s; }
  .marquee-row:nth-child(2) .marquee-track { animation-duration: 135s; }
  .marquee-row:nth-child(3) .marquee-track { animation-duration: 120s; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-row { overflow-x: auto; }
  .marquee-track { width: auto; animation: none; }
  .marquee-track > [aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   HERO — content-dense variant
   Written for plant and maintenance managers reading on a desktop in a
   factory office: larger type, higher contrast, more substance above the
   fold, and a side panel that answers "what actually happens first".
   ========================================================================== */

.hero-inner { max-width: none; padding: 76px 0 68px; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.hero h1 { font-size: clamp(2.1rem, 3.5vw, 3.15rem); margin-bottom: 20px; }
.hero-sub {
  font-size: 1.24rem; line-height: 1.6; color: #D3DEE9;
  max-width: 40em; margin-bottom: 18px;
}
.hero-lead2 {
  font-size: 1.04rem; line-height: 1.75; color: #A9BBCE;
  max-width: 42em; margin-bottom: 30px;
}

/* Four substantiated points, two columns */
.hero-points {
  list-style: none; margin: 0 0 32px; padding: 26px 0 0;
  border-top: 1px solid rgba(255,255,255,.16);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px;
}
.hero-points li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; }
.hero-points .tick {
  width: 22px; height: 22px; margin-top: 2px; flex: none;
  border: 1.5px solid #E8A25C; color: #E8A25C;
  display: grid; place-items: center; font-size: .8rem; line-height: 1;
}
.hero-points h3 { font-size: 1.02rem; color: #fff; margin: 0 0 5px; }
.hero-points p { font-size: .95rem; line-height: 1.65; color: #A9BBCE; margin: 0; }

.hero-actions { gap: 16px; margin-bottom: 28px; }
.hero .btn { padding: 17px 32px; font-size: 1rem; }

.hero-audience {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding-top: 26px; border-top: 1px solid rgba(255,255,255,.16);
}
.hero-audience .lbl {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #8FA5BC; margin-right: 6px;
}
.hero-audience span.chip-static {
  font-size: .88rem; color: #CBD8E5;
  border: 1px solid rgba(255,255,255,.24); border-radius: 100px; padding: 6px 14px;
}

/* Side panel: what the first six weeks actually contain */
.hero-panel {
  background: #fff; color: var(--ink);
  border-top: 4px solid var(--amber);
  padding: 32px 32px 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.hero-panel .eyebrow { margin-bottom: 10px; }
.hero-panel h2 { font-size: 1.32rem; line-height: 1.35; margin-bottom: 20px; }
.hero-panel dl { margin: 0 0 20px; }
.hero-panel dt {
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber-text); margin-bottom: 5px;
}
.hero-panel dd {
  margin: 0 0 18px; padding-bottom: 18px;
  border-bottom: 1px solid var(--grey-200);
  font-size: .95rem; line-height: 1.7; color: var(--steel-600);
}
.hero-panel dd:last-of-type { border-bottom: 0; padding-bottom: 0; margin-bottom: 16px; }
.hero-panel .panel-note {
  font-size: .88rem; color: var(--grey-500); margin: 0 0 20px;
  padding-left: 14px; border-left: 2px solid var(--grey-300);
}

.hero-stats { gap: 44px; margin-top: 40px; padding-top: 30px; }
.hero-stat .lbl { font-size: .8rem; color: #A9BBCE; max-width: 15em; }

html[lang="th"] .hero-sub { font-size: 1.2rem; line-height: 1.8; }
html[lang="th"] .hero-lead2 { line-height: 1.95; }
html[lang="th"] .hero-points p { line-height: 1.85; }
html[lang="th"] .hero-panel dd { line-height: 1.9; }
html[lang="th"] .hero-audience span.chip-static { font-size: .92rem; }

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-panel { max-width: 620px; }
}
@media (max-width: 720px) {
  .hero-inner { padding: 56px 0 52px; }
  .hero-points { grid-template-columns: 1fr; gap: 22px; }
  .hero-sub { font-size: 1.12rem; }
  .hero-panel { padding: 26px 24px 24px; }
}

/* ==========================================================================
   NAVIGATION — grouped menus with dropdowns
   The old site grouped its pages this way (Training & Seminar → Public /
   In-house / Package); with this much content that grouping is the only way
   the bar stays readable.
   ========================================================================== */

.nav { gap: 4px; align-items: center; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > a {
  font-size: .9rem; font-weight: 500; color: var(--navy-800);
  padding: 10px 12px; position: relative; white-space: nowrap;
}
.nav-item > a::after {
  content: ""; position: absolute; left: 12px; right: 100%; bottom: 4px; height: 2px;
  background: var(--amber); transition: right .2s var(--ease);
}
.nav-item > a:hover::after,
.nav-item > a[aria-current="page"]::after { right: 12px; }
.nav-item.has-children > a { padding-right: 22px; }
.nav-item .caret {
  position: absolute; right: 10px; top: 50%; margin-top: -2px;
  width: 6px; height: 6px; pointer-events: none;
  border-right: 1.5px solid var(--grey-500); border-bottom: 1.5px solid var(--grey-500);
  transform: rotate(45deg) translate(-1px, -1px);
  transition: border-color .16s var(--ease);
}
.nav-item.has-children:hover .caret { border-color: var(--amber); }

.submenu {
  position: absolute; top: 100%; left: 0; z-index: 70;
  min-width: 258px; margin: 0; padding: 8px 0;
  list-style: none; background: #fff;
  border: 1px solid var(--grey-200); border-top: 2px solid var(--amber);
  box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.nav-item.has-children:hover .submenu,
.nav-item.has-children:focus-within .submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.submenu li { margin: 0; }
.submenu a {
  display: block; padding: 9px 18px;
  font-size: .88rem; line-height: 1.45; color: var(--steel-600);
  border-left: 2px solid transparent;
}
.submenu a:hover, .submenu a:focus {
  background: var(--grey-050); color: var(--navy-900); border-left-color: var(--amber);
}
/* the last menus would otherwise run off the right edge */
.nav-item:nth-last-child(-n+3) .submenu { left: auto; right: 0; }

/* A menu long enough to run off the bottom of a laptop screen goes to two
   columns rather than scrolling. "What is TPM" carries 21 entries once the
   eight pillars are in it, and at one column that overflowed the viewport —
   the last few items were simply unreachable. Keyed off the count so it
   applies to any menu that grows past what one column holds. */
.submenu:has(li:nth-child(15)) {
  column-count: 2; column-gap: 0; min-width: 520px;
}
.submenu:has(li:nth-child(15)) li { break-inside: avoid; }

/* The pillars are a numbered set inside that menu, not eight unrelated
   entries. Setting the number apart makes the sequence readable at a glance,
   which is the whole reason for showing it. */
.submenu a .pnum {
  display: inline-block; min-width: 1.45em;
  font-family: var(--font-display); font-weight: 700;
  color: var(--amber-text);
}
.submenu a.is-pillar { padding-left: 18px; }

html[lang="th"] .nav-item > a { font-size: .93rem; }
html[lang="th"] .submenu a { font-size: .91rem; }

@media (max-width: 1240px) {
  .nav-item > a { padding: 10px 9px; font-size: .86rem; }
  html[lang="th"] .nav-item > a { font-size: .88rem; }
}

@media (max-width: 1080px) {
  .nav.is-open { padding: 12px 32px 24px; gap: 0; max-height: 78vh; overflow-y: auto; }
  .nav-item { display: block; width: 100%; }
  .nav-item > a { padding: 12px 0; font-size: 1rem; display: block; }
  .nav-item .caret { display: none; }
  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; border-left: 2px solid var(--grey-200); box-shadow: none;
    min-width: 0; padding: 0 0 8px; margin: 0 0 6px 4px;
  }
  .submenu a { padding: 8px 14px; }
}

/* ==========================================================================
   COMPACT PAGE HEADER
   Sub-pages get a short header band with the sibling links inside it, so the
   first screen carries content rather than three stacked introductions.
   ========================================================================== */

.article-hero--compact { padding: 34px 0 30px; }
.article-hero--compact .eyebrow { margin-bottom: 8px; }
.article-hero--compact h1 {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  margin-bottom: 8px; max-width: 22em;
}
.article-hero--compact .dek {
  font-size: 1rem; line-height: 1.55; color: #A9BBCE; max-width: 62em; margin-bottom: 0;
}
html[lang="th"] .article-hero--compact h1 { font-size: clamp(1.4rem, 2.2vw, 1.95rem); line-height: 1.35; }
html[lang="th"] .article-hero--compact .dek { line-height: 1.7; }

.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hero-chips a {
  font-size: .83rem; font-weight: 500; line-height: 1.3;
  padding: 7px 15px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.24); color: #CBD8E5;
  transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.hero-chips a:hover { border-color: rgba(255,255,255,.55); color: #fff; }
.hero-chips a.is-active {
  background: var(--amber); border-color: var(--amber); color: var(--navy-900); font-weight: 600;
}
html[lang="th"] .hero-chips a { font-size: .87rem; }

/* the body should start immediately under the band */
.article-layout { padding-top: 30px; }
.article-body-copy > h2:first-child,
.article-body-copy > p:first-child { margin-top: 0; }

@media (max-width: 720px) {
  .article-hero--compact { padding: 26px 0 24px; }
  .hero-chips { gap: 6px; margin-top: 14px; }
  .hero-chips a { font-size: .8rem; padding: 6px 12px; }
}

/* ==========================================================================
   TIGHTER HEADERS + COURSE CARDS
   The header band shrinks again so content clears the fold, and courses get a
   card where code, title, description and price each have their own zone —
   with the price given the strongest colour, because that is the question
   every visitor is actually asking.
   ========================================================================== */

.article-hero--compact { padding: 24px 0 22px; }
.article-hero--compact .eyebrow { margin-bottom: 6px; font-size: .68rem; }
.article-hero--compact .eyebrow::before { width: 20px; }
.article-hero--compact h1 { font-size: clamp(1.35rem, 1.9vw, 1.72rem); margin-bottom: 6px; }
.article-hero--compact .dek { font-size: .94rem; line-height: 1.5; }
html[lang="th"] .article-hero--compact h1 { font-size: clamp(1.28rem, 1.8vw, 1.62rem); line-height: 1.4; }
html[lang="th"] .article-hero--compact .dek { font-size: .95rem; line-height: 1.65; }
.hero-chips { margin-top: 13px; gap: 7px; }
.hero-chips a { font-size: .79rem; padding: 5px 13px; }
html[lang="th"] .hero-chips a { font-size: .83rem; }
.article-layout { padding-top: 22px; }
.article-body-copy > h2 { margin-top: 1.5em; font-size: 1.5rem; }
.article-body-copy > h2:first-child { margin-top: 0; }
html[lang="th"] .article-body-copy > h2 { font-size: 1.35rem; }

/* ---------- course card ---------- */
.course-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 234px;
  border: 1px solid var(--grey-200);
  border-left: 4px solid var(--navy-800);
  background: #fff;
  margin: 0 0 18px;
  transition: box-shadow .2s var(--ease), border-left-color .2s var(--ease);
}
.course-card:hover { box-shadow: var(--shadow-card); border-left-color: var(--amber); }

.cc-code {
  padding: 18px 0 18px 18px;
}
.cc-code .code {
  display: inline-block;
  font-family: var(--font-sans); font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  background: var(--navy-800); color: #fff; padding: 5px 10px; white-space: nowrap;
}
.cc-code .days {
  display: block; margin-top: 10px;
  font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; color: var(--navy-900); line-height: 1;
}
.cc-code .days-unit {
  display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--grey-500); margin-top: 3px;
}

.cc-body { padding: 18px 22px; }
.cc-body h3 { font-size: 1.08rem; margin: 0 0 6px; line-height: 1.35; }
.cc-body p { font-size: .93rem; line-height: 1.68; color: var(--grey-500); margin: 0; }
.cc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cc-tag {
  font-size: .7rem; font-weight: 600; letter-spacing: .04em;
  padding: 4px 10px; border: 1px solid var(--grey-300); color: var(--steel-600);
}
.cc-tag--new { background: var(--amber); border-color: var(--amber); color: var(--navy-900); font-weight: 700; }
.cc-tag--bonus { border-color: var(--amber); color: var(--amber-text); }

.cc-price {
  background: #FBF3E3;
  border-left: 1px solid var(--grey-200);
  padding: 18px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.cc-price .when {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber-text);
}
.cc-price .date { font-size: .92rem; color: var(--navy-900); font-weight: 600; margin-bottom: 8px; }
.cc-price .amount {
  font-family: var(--font-display); font-size: 1.75rem; font-weight: 700;
  color: var(--navy-900); line-height: 1;
}
.cc-price .unit { font-size: .76rem; color: var(--grey-500); margin-top: 4px; }
.cc-price .btn { margin-top: 12px; padding: 10px 14px; font-size: .82rem; justify-content: center; }

html[lang="th"] .cc-body h3 { font-size: 1.05rem; line-height: 1.5; }
html[lang="th"] .cc-body p { line-height: 1.75; }
html[lang="th"] .cc-price .amount { font-family: var(--font-display-th); }

@media (max-width: 900px) {
  .course-card { grid-template-columns: 84px minmax(0, 1fr); }
  .cc-price { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--grey-200);
              flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; }
  .cc-price .btn { margin-top: 0; margin-left: auto; }
}

/* ---------- schedule summary table ---------- */
.schedule { width: 100%; border-collapse: collapse; margin: 0 0 26px; font-size: .92rem; }
.schedule thead th {
  background: var(--navy-800); color: #fff; text-align: left;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: 11px 14px; font-weight: 600;
}
.schedule td { padding: 12px 14px; border-bottom: 1px solid var(--grey-200); vertical-align: middle; }
.schedule tr:hover td { background: var(--grey-050); }
.schedule .s-code { font-weight: 700; color: var(--navy-900); white-space: nowrap; }
.schedule .s-price { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--amber-text); white-space: nowrap; }
.schedule .s-date { white-space: nowrap; color: var(--steel-600); }

/* ==========================================================================
   HERO SIZING + QUIETER CLIENT STRIP
   Pages that do not show a price get a roomier header; the client strip drops
   its boxes and colour and becomes a plain running list of names.
   ========================================================================== */

.article-hero--roomy { padding: 54px 0 50px; }
.article-hero--roomy .eyebrow { margin-bottom: 10px; }
.article-hero--roomy h1 { font-size: clamp(1.55rem, 2.2vw, 2rem); margin-bottom: 10px; }
.article-hero--roomy .dek { font-size: 1rem; line-height: 1.6; }
.article-hero--roomy .hero-chips { margin-top: 20px; }
html[lang="th"] .article-hero--roomy h1 { font-size: clamp(1.45rem, 2vw, 1.85rem); }
@media (max-width: 720px) { .article-hero--roomy { padding: 36px 0 32px; } }

/* ---------- client strip ---------- */
.results { padding: 52px 0 54px; }
.results-head { margin-bottom: 30px; }

.client-run { display: flex; align-items: center; gap: 0; }
.client-name {
  position: relative;
  padding: 0 26px;
  font-size: 1.06rem;
  font-weight: 500;
  color: var(--steel-600);
  white-space: nowrap;
  letter-spacing: .005em;
  transition: color .18s var(--ease);
}
.client-name::after {
  content: "";
  position: absolute; right: -2px; top: 50%; margin-top: -2px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--grey-300);
}
.client-run:hover .client-name { color: var(--grey-500); }
.client-name:hover { color: var(--navy-900); }

.marquee { gap: 10px; }          /* exactly 10px between the three rows */
.marquee-row { padding: 0; }

html[lang="th"] .client-name { font-size: 1.08rem; }

@media (max-width: 720px) {
  .client-name { font-size: .96rem; padding: 0 18px; }
  .results { padding: 40px 0 42px; }
}

/* ==========================================================================
   HOMEPAGE HERO — vertical compression
   Same layout and content, roughly 150px shorter: tighter band, smaller gaps
   between the four points, and a shallower stats rail.
   ========================================================================== */

.hero-inner { padding: 58px 0 52px; }
.hero h1 { font-size: clamp(1.95rem, 2.9vw, 2.65rem); margin-bottom: 16px; }
.hero-sub { font-size: 1.14rem; line-height: 1.5; margin-bottom: 12px; }
.hero-lead2 { font-size: 1rem; line-height: 1.6; margin-bottom: 22px; }

.hero-points { padding-top: 20px; margin-bottom: 24px; gap: 18px 36px; }
.hero-points h3 { font-size: .98rem; margin-bottom: 3px; }
.hero-points p { font-size: .91rem; line-height: 1.5; }
.hero-points .tick { width: 20px; height: 20px; font-size: .74rem; }

.hero-actions { margin-bottom: 20px; gap: 12px; }
.hero .btn { padding: 14px 26px; font-size: .94rem; }

.hero-audience { padding-top: 18px; }
.hero-audience span.chip-static { padding: 5px 12px; font-size: .84rem; }

.hero-grid { gap: 48px; }
.hero-panel { padding: 24px 26px 22px; }
.hero-panel h2 { font-size: 1.18rem; margin-bottom: 14px; }
.hero-panel dd { margin-bottom: 13px; padding-bottom: 13px; font-size: .91rem; line-height: 1.55; }
.hero-panel .panel-note { font-size: .84rem; margin-bottom: 14px; }

.hero-stats { margin-top: 26px; padding-top: 22px; gap: 36px; }
.hero-stat .num { font-size: 1.8rem; }
.hero-stat .lbl { font-size: .76rem; margin-top: 6px; }

html[lang="th"] .hero-sub { font-size: 1.1rem; line-height: 1.7; }
html[lang="th"] .hero-lead2 { line-height: 1.75; }
html[lang="th"] .hero-points p { line-height: 1.7; }
html[lang="th"] .hero-panel dd { line-height: 1.7; }

@media (max-width: 720px) {
  .hero-inner { padding: 40px 0 38px; }
  .hero-stats { gap: 24px; margin-top: 20px; }
}

/* client strip: 15px between rows */
.marquee { gap: 15px; }

/* photo grid on the consultant page */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.photo-grid .ph { margin: 0; border: 1px solid var(--grey-200); background: #fff; }
.photo-grid .ph img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.photo-grid figcaption {
  font-size: .86rem; line-height: 1.5; color: var(--grey-500);
  padding: 12px 14px; border-top: 1px solid var(--grey-200);
}

/* --------------------------------------------------------------------------
   Photographs from the plants — homepage band, in-page strips, article figures
   -------------------------------------------------------------------------- */
.pb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.pb-grid--inline { grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 26px; }

.pb-tile { margin: 0; }
.pb-tile img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border: 1px solid var(--grey-200);
  background: #E8EDF2;
  filter: saturate(.88) contrast(1.03);
}
.pb-tile figcaption {
  margin-top: 9px;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--grey-500);
}
.photo-band .pb-cta { margin-top: 30px; }

.article-body .photo-figure,
figure.photo-figure { margin: 30px 0; }
figure.photo-figure img {
  width: 100%;
  display: block;
  border: 1px solid var(--grey-200);
  filter: saturate(.88) contrast(1.03);
}
figure.photo-figure figcaption {
  margin-top: 10px;
  font-size: .87rem;
  line-height: 1.65;
  color: var(--grey-500);
}

@media (max-width: 900px) {
  .pb-grid, .pb-grid--inline { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .pb-grid, .pb-grid--inline { grid-template-columns: 1fr; }
}

/* Mosaic variant of the photo grid — used on the experience page */
.pb-grid--mosaic { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pb-grid--mosaic .pb-tile--wide { grid-column: span 2; }
.pb-grid--mosaic .pb-tile--wide img { aspect-ratio: 16 / 9; }

@media (max-width: 900px) {
  .pb-grid--mosaic { grid-template-columns: repeat(2, 1fr); }
  .pb-grid--mosaic .pb-tile--wide { grid-column: span 2; }
}

/* Clearer separation between one idea and the next
   ------------------------------------------------ */
.article-body-copy > p + h2,
.article-body-copy > ul + h2,
.article-body-copy > ol + h2,
.article-body-copy > table + h2,
.article-body-copy > figure + h2 { margin-top: 2.6em; }

.article-body-copy > .callout + h2,
.article-body-copy > .quote-block + h2 { margin-top: 2.2em; }

/* Sub-page sibling sections read as separate blocks, not one wall */
.article-body-copy > table { margin: 1.6em 0 2.2em; }
.article-body-copy > .steps-list { margin: 1.8em 0 2.4em; }

/* Grid cards: a touch more air between them */
.grid { gap: 30px; }
.challenge-grid .challenge { padding: 32px 28px 30px; }

/* Consultant page: portrait and facts read as one dense card beside the bio,
   rather than a tall picture with dead air around it. */
.split--bio {
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.split--bio .bio-col { position: sticky; top: 96px; }
.split--bio .figure-frame img { width: 100%; display: block; }
.split--bio .psr { margin: 20px 0 0; }
.split--bio .psr-row { padding: 9px 0; }
.split--bio .psr-row .v { font-size: .9rem; }
.split--bio .article-body-copy > p:first-child { margin-top: 0; }
.split--bio .article-body-copy .lead { font-size: 1.1rem; }

@media (max-width: 900px) {
  .split--bio { grid-template-columns: 1fr; gap: 30px; }
  .split--bio .bio-col { position: static; display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: start; }
  .split--bio .psr { margin-top: 0; }
}
@media (max-width: 560px) {
  .split--bio .bio-col { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CLIENT STRIP — named chips
   Each company sits in its own pale-blue field with the sector underneath, so
   the strip reads as a list of engagements rather than a run of words.
   ========================================================================== */
.client-run { display: flex; align-items: stretch; gap: 15px; }

.client-chip {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 11px 20px;
  background: #EEF4FA;
  border: 1px solid #D3E0EC;
  border-left: 3px solid var(--steel-400);
  white-space: nowrap;
  flex: none;
  transition: background .18s var(--ease), border-left-color .18s var(--ease);
}
.client-chip:hover { background: #E4EEF7; border-left-color: var(--amber); }
.cn-name { font-size: 1.02rem; font-weight: 600; color: var(--navy-900); line-height: 1.25; }
.cn-sector {
  font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--steel-600); line-height: 1.3;
}
html[lang="th"] .cn-name { font-size: 1.04rem; }
html[lang="th"] .cn-sector { letter-spacing: .03em; text-transform: none; font-size: .78rem; }

.marquee { gap: 15px; }                 /* 15px between the three rows */
.marquee-track { gap: 15px; }

@media (max-width: 720px) {
  .client-chip { padding: 9px 15px; }
  .cn-name { font-size: .95rem; }
  .cn-sector { font-size: .7rem; }
}

/* ==========================================================================
   CARD SYSTEM — one hairline border, image flush to the edge
   Every card family now shares the same treatment: a single 1px rule, square
   corners, no coloured top bar, no lift on hover. Structure comes from the
   border and the padding, not from decoration.
   ========================================================================== */
.svc-card,
.article-card,
.case-card,
.course,
.course-card,
.aside-box,
.callout,
.photo-grid .ph,
.pb-tile,
.feature-article,
.gate,
.exec-summary {
  /* --card-line is a full shade darker than the old hairline, so the card is
     outlined at rest — the border is the structure, not a hover reward. */
  border: 1px solid var(--card-line);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
.svc-card { border-top: 1px solid var(--card-line); padding: 34px 32px 32px; }
.course { border-left: 1px solid var(--card-line); padding: 28px 30px; }
.callout { border-top: 1px solid var(--card-line); border-left: 3px solid var(--amber); }
.exec-summary { border-left: 3px solid var(--navy-800); }

/* Hover only deepens what is already there. */
.svc-card:hover,
.article-card:hover,
.case-card:hover,
.course:hover,
.course-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--steel-400);
}
.course:hover { border-left-color: var(--steel-400); }
.course-card:hover { border-left-color: var(--steel-400); }

/* Image sits flush against the top edge; the copy gets the padding. */
.article-card .thumb { margin: -1px -1px 0; }
.article-body { padding: 30px 30px 32px; }
.article-card h3 { font-size: 1.2rem; line-height: 1.35; margin-bottom: 12px; }
.case-body { padding: 32px 32px 30px; }
.photo-grid .ph img, .pb-tile img { border: 0; }
.pb-tile figcaption { margin: 0; padding: 12px 14px 14px; }

/* Course card: same hairline, and the enquiry panel replaces the old price */
.course-card { border-left: 1px solid var(--card-line); }
.cc-price { background: #F7FAFC; border-left: 1px solid var(--card-line); align-items: flex-start; }
.cc-price .ask-note {
  font-size: .86rem; line-height: 1.55; color: var(--grey-500); margin: 4px 0 14px;
  white-space: normal;
}
.cc-price .btn { margin-top: 0; width: 100%; }
.cc-price--plain { justify-content: center; }

/* Rules that separate content, at the same resting weight as the cards */
.section-head { border-bottom-color: var(--card-line); }
.pkg-card, .pkg-card:last-child,
.pillar-list li,
.cred-grid, .cred,
.challenge,
.psr-row,
.dl-list li,
.article-body-copy > h2,
.article-body-copy td,
.breadcrumb,
.article-meta,
.divider { border-color: var(--card-line); }
.divider { background: var(--card-line); }
.article-body-copy th { border-color: var(--card-line); }

/* ==========================================================================
   TWO CARD STATES — static versus clickable
   Static blocks are outlined in a heavier, deeper rule: they are containers,
   they do not move. Anything that takes the visitor somewhere keeps the
   thinner side rule but carries a 3px navy bar across the top, lifts slightly
   on hover, and turns that bar gold.
   ========================================================================== */
:root {
  --line-static: #A9BCCC;   /* 2px, static containers */
  --line-card:   #C4D0DB;   /* 1px sides, clickable cards */
}

/* ---- static containers --------------------------------------------------- */
.callout,
.exec-summary,
.aside-box,
.photo-grid .ph,
.pb-tile,
.challenge,
.client-chip,
.gate,
.pkg-deliverable,
.hero-panel {
  border-width: 2px;
  border-style: solid;
  border-color: var(--line-static);
}
.callout { border-left: 3px solid var(--amber); }
.exec-summary { border-left: 3px solid var(--navy-800); }
.client-chip { border-left: 3px solid var(--steel-400); }
.hero-panel { border-top: 4px solid var(--amber); }
.pkg-deliverable { border-left: 2px solid var(--navy-800); }

.challenge {
  border-width: 0 2px 2px 0;
  border-color: var(--line-static);
}
.section-head { border-bottom: 2px solid var(--line-static); }
.pillar-list li,
.psr-row,
.dl-list li,
.pkg-card { border-top-color: var(--line-static); }
.pkg-card:last-child { border-bottom-color: var(--line-static); }
.article-body-copy > h2 { border-top: 2px solid var(--line-static); }
.article-body-copy td { border-bottom-color: var(--line-static); }
.schedule td { border-bottom-color: var(--line-static); }

/* ---- clickable cards ----------------------------------------------------- */
.svc-card,
.article-card,
.case-card,
.course,
.course-card {
  border: 1px solid var(--line-card);
  border-top: 3px solid var(--navy-800);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              border-top-color .2s var(--ease), border-color .2s var(--ease);
}
.course { border-left: 1px solid var(--line-card); }
.course-card { border-left: 1px solid var(--line-card); }

.svc-card:hover,
.article-card:hover,
.case-card:hover,
.course:hover,
.course-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-top-color: var(--amber);
  border-color: var(--line-card);
}
.svc-card:hover, .article-card:hover, .case-card:hover,
.course:hover, .course-card:hover { border-top-color: var(--amber); }

/* the thumbnail must not cover the navy bar */
.article-card .thumb { margin: 0 -1px 0; }
.cc-price { border-left: 1px solid var(--line-card); }

/* Contact channels — every number tappable */
.channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.ch-row {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px;
  padding: 15px 0; border-top: 1px solid var(--line-static); align-items: baseline;
}
.ch-k {
  font-size: .74rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--grey-500);
}
.ch-v { font-size: 1.06rem; color: var(--navy-900); font-weight: 600; }
.ch-v a { color: var(--navy-900); border-bottom: 2px solid var(--amber); padding-bottom: 2px; }
.ch-v a:hover { color: var(--amber-text); }
html[lang="th"] .ch-k { letter-spacing: .04em; }
@media (max-width: 860px) {
  .channels { grid-template-columns: 1fr; }
  .ch-row { grid-template-columns: 140px minmax(0, 1fr); gap: 12px; }
}

/* Entry offer — homepage band and the published price on its page */
.offer-band { padding: 56px 0; }
.offer-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px; align-items: center;
}
.offer-inner h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 10px; }
.offer-inner > div > p { color: #BCCBDA; margin: 0; max-width: 56ch; }
.offer-cta { text-align: right; flex: none; }
.offer-note { font-size: .82rem; color: #8FA5BC; margin: 12px 0 0; max-width: 26ch; }

.offer-price {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  background: #FBF3E3; border-left: 3px solid var(--amber);
  padding: 20px 24px; margin: 26px 0;
}
.op-amount {
  font-family: var(--font-display); font-size: 2.1rem; font-weight: 700;
  color: var(--navy-900); line-height: 1;
}
.op-unit { font-size: .92rem; color: var(--grey-500); }
html[lang="th"] .op-amount { font-family: var(--font-display-th); }

@media (max-width: 860px) {
  .offer-inner { grid-template-columns: 1fr; gap: 24px; }
  .offer-cta { text-align: left; }
  .offer-note { max-width: none; }
}

/* ==========================================================================
   MOBILE DRAWER
   Header breakpoints live in the authoritative block at the end of this file;
   this only styles the drawer once it is open.
   ========================================================================== */
@media (max-width: 1120px) {
  .nav.is-open {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line-static);
    padding: 8px 24px 20px; max-height: 78vh; overflow-y: auto;
    box-shadow: var(--shadow-lift); z-index: 80;
  }
  .nav.is-open .nav-item { display: block; width: 100%; }
  .nav.is-open .nav-item > a {
    display: block; padding: 13px 0; font-size: 1rem;
    border-bottom: 1px solid var(--grey-100);
  }
  .nav.is-open .caret { display: none; }
  .nav.is-open .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; border-left: 2px solid var(--amber); box-shadow: none;
    min-width: 0; padding: 4px 0 10px; margin: 0 0 6px 2px; background: transparent;
  }
  .nav.is-open .submenu a { padding: 9px 14px; font-size: .93rem; }
}

/* ---- phones -------------------------------------------------------------- */
@media (max-width: 640px) {
  .topbar .container { height: auto; padding-top: 7px; padding-bottom: 7px; }
  .topbar span { display: none; }
  .topbar .container { justify-content: flex-end; }
  .site-header .container { height: 66px; gap: 12px; }
  .brand-logo { height: 36px; }
  .brand-name { font-size: 1.02rem; }
  .container { padding-left: 20px; padding-right: 20px; }

  .article-hero h1, .hero h1 { font-size: clamp(1.45rem, 6.4vw, 1.9rem); }
  .hero-inner { padding: 32px 0 30px; }
  .section { padding: 44px 0; }
  .section-head { margin-bottom: 28px; padding-bottom: 18px; }

  /* tables are the usual mobile overflow; let them scroll rather than squash */
  .article-body-copy table, .schedule { display: block; overflow-x: auto; white-space: nowrap; }
  .article-body-copy td, .article-body-copy th { white-space: normal; min-width: 8rem; }

  .offer-inner, .cta-band .container { grid-template-columns: 1fr; }
  .cta-band .container { display: block; }
  .cta-band .btn { margin-top: 16px; }
  .btn { width: 100%; justify-content: center; }
  .hero-actions .btn, .offer-cta .btn { width: 100%; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 26px; }
  .channels { grid-template-columns: 1fr; }
  .ch-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ==========================================================================
   HEADER — one authoritative layout
   Earlier rules were spread across three breakpoint blocks that disagreed
   with each other, and a min-width:0 on .nav let the links shrink under the
   CTA instead of pushing it, which is what produced the overlap.
   Everything about the header row is decided here and nowhere else.
   ========================================================================== */
.site-header .container {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 78px;
  flex-wrap: nowrap;
}

/* Nothing in the row may shrink below its content: a header that overflows is
   a bug, a header that drops a component at a known width is a decision. */
.brand       { flex: 0 0 auto; }
.nav         { flex: 0 1 auto; display: flex; gap: 2px; margin-left: auto; min-width: auto; }
.header-cta  { flex: 0 0 auto; white-space: nowrap; }
.nav-item > a { white-space: nowrap; }

/* Six dropdown groups in English need roughly 1300px once the logo lockup and
   the button are counted. The row gives things up in that order. */
@media (max-width: 1500px) {
  .site-header .container { gap: 20px; }
  .nav-item > a { padding: 10px 9px; font-size: .87rem; }
  html[lang="th"] .nav-item > a { font-size: .89rem; }
}
@media (max-width: 1380px) {
  /* .brand-sub is decided once, in the BRAND SUB-LINE block at the end. */
  .nav-item > a { padding: 10px 7px; font-size: .84rem; }
}
@media (max-width: 1300px) {
  /* The button is the first thing to go: the same call to action sits in the
     top bar and again in the hero, so nothing is actually lost. */
  .header-cta { display: none; }
}
@media (max-width: 1120px) {
  .nav { display: none; }
  .nav-toggle { display: block; margin-left: auto; }
}
@media (min-width: 1121px) {
  .nav-toggle { display: none; }
  .nav { display: flex; }
}

/* Build credit — one muted line, never competing with the company's own details */
.footer-credit { color: #7E93A9; font-size: .78rem; }
.footer-credit a { color: #9AACC0; border-bottom: 1px solid rgba(255,255,255,.18); }
.footer-credit a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.5); }
@media (max-width: 640px) { .footer-legal { flex-direction: column; align-items: flex-start; gap: 10px; } }

/* ==========================================================================
   BRAND SUB-LINE — one decision, every width
   "MANUFACTURING EXCELLENCE" is hidden only in the band where the full
   navigation and the logo lockup and the CTA are all competing for the same
   row. Once the burger takes over there is room for it again, so it comes
   back — including on phones, where it is part of how the company reads.
   ========================================================================== */
.brand-sub { display: block; }

@media (max-width: 1380px) and (min-width: 1121px) {
  /* The tight band: brand + six dropdowns, and above 1300px the CTA as well.
     The line used to be hidden here, which is most of the laptop range — the
     company's own strapline vanished on the most common screen there is.

     It is set smaller instead. "MANUFACTURING EXCELLENCE" is 24 characters
     against 14 in "TPM Consulting", so at the normal size it is the sub-line,
     not the name, that decides how wide the brand block is. At this size the
     two are about equal, so showing it costs the row no width at all and
     cannot push the navigation. */
  .brand-sub { font-size: .5rem; letter-spacing: .08em; }
}

@media (max-width: 460px) {
  /* Narrow phones: keep it, but stop the letter-spacing pushing it wide. */
  .brand-sub { font-size: .56rem; letter-spacing: .12em; }
  .brand-name { font-size: .98rem; }
}
@media (max-width: 340px) {
  .brand-sub { display: none; }      /* genuinely no room below this */
}

/* A page that is mostly full-width bands but carries a run of ordinary prose
   between them — the book landing pages. The prose still needs a measure, but
   there is no sidebar beside it, so the grid collapses to a single centred
   column rather than leaving a 300px gap where the rail would have been. */
.article-layout--solo { grid-template-columns: minmax(0, 760px); justify-content: center; padding: 48px 0 8px; }

/* WordPress emits class="custom-logo" from the Customizer and from its own
   previews. The header renders the mark itself so it always carries
   .brand-logo, but matching the core class too means a logo shown by any
   other route — the Customizer preview, a block — is the same size. */
.custom-logo { height: 50px; width: auto; flex: none; display: block; border: 1px solid rgba(0,0,0,.08); }
.site-footer .custom-logo { height: 54px; border-color: rgba(255,255,255,.14); }
@media (max-width: 720px) { .custom-logo { height: 40px; } }

/* Clickable diagram — the eight pillars.
   The site already has a convention for "this goes somewhere": a thick top
   border in gold, and a small lift on hover. The service cards use it, so the
   pillars use it too rather than inventing a second visual language.
   The cap and the chevron are drawn at rest, not on hover — a hover-only
   affordance does not exist on a touch screen, which is most of the traffic. */


svg .pillars a:hover .bar,

svg .pillars a:hover .cap,


@media (prefers-reduced-motion: reduce) { svg .pillars a:hover { transform: none; } }

/* ==========================================================================
   THE EIGHT PILLARS — a block of the site's own cards, not a diagram
   Replaces an SVG whose labels were set vertically and baked in English. The
   card is the same object used for services: gold top border because it links,
   a lift on hover, navy heading. Nothing here is specific to this block except
   the number badge and the two group labels.
   ========================================================================== */
/* The block is framed as one object.
   A gold top border alone does not mark something as clickable on this site —
   .callout carries the same edge and links nowhere — so a visitor meeting
   eight gold-topped cards beside a gold-topped callout has no way to tell
   which of them go anywhere. The frame groups the eight, separates them from
   whatever sits next to them, and keeps the "one figure" reading the diagram
   used to have. The tinted ground is the same one the diagrams sit on. */


/* ==========================================================================
   ONE TINT FOR "THIS GOES SOMEWHERE"
   A gold top border does not distinguish a link on this site — .callout wears
   the same edge and links nowhere. A card that is a link now also carries a
   pale blue ground, so the difference is visible at rest, at a glance, and
   without hovering. White stays the colour of something you only read.
   ========================================================================== */
:root {
  /* Two steps of the same blue. The paler one tints any card that links; the
     deeper one fills the pillars, where the block has to read as one object
     from across the page. Both were chosen by contrast, not by eye: #DFEAF6 is
     the darkest that keeps the gold numeral at 4.6:1, which is the first thing
     to fail as the ground darkens. */
  --tint-click: #E7EFF9;
  /* Back to a pale ground. A solid fill was tried and dropped: it reads as a
     block rather than a column, and it costs the gold — #8A5F00 is only 3.4:1
     on a saturated blue. Pale keeps the gold usable and lets the weight sit in
     the borders instead, which is what makes a column look built. */
  --pillar-fill: #E7EFF9;
}


.svc-card:has(.link-arrow),
.course-card:has(.btn),
.article-card:has(a),
.case-card:has(a) { background: var(--tint-click); }


          /* the Details link replaces the corner arrow */

/* The number, boxed, as it is on the service steps. */


/* A card that goes nowhere does not move.
   The lift was attached to .svc-card and friends outright, so the three
   explanatory cards on the homepage — Production TPM, Company-wide TPM, the
   tools that run alongside — rose under the cursor and promised a click that
   was not there. Hover feedback and the blue ground are now keyed to the same
   single condition: does this card contain a link. */
.svc-card:not(:has(a)):hover,
.article-card:not(:has(a)):hover,
.case-card:not(:has(a)):hover,
.course:not(:has(a)):hover,
.course-card:not(:has(a)):hover {
  transform: none;
  box-shadow: none;
  border-top-color: var(--navy-800);
  border-color: var(--line-card);
  cursor: default;
}

/* The problems section, set as prose rather than as a grid of tiles.
   Constrained to a reading measure and centred: a full-width paragraph on a
   1160px container runs to 140 characters a line, which is roughly twice what
   anyone reads comfortably. */
/* Left-aligned, not centred. .section-head is also 760px but has no auto
   margin, so centring these put the body text in a different column from the
   heading and the standfirst directly above it — the same measure, stepped
   sideways, which reads as a mistake rather than as a choice. */
.challenge-prose, .prose-block { max-width: 760px; margin: 0; }
.challenge-prose p, .prose-block p { font-size: 1.02rem; line-height: 1.85; color: var(--grey-600); margin: 0 0 20px; }
.challenge-prose strong, .prose-block strong { color: var(--navy-800); font-weight: 600; }
.challenge-close {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--grey-200);
  color: var(--navy-800);
}
@media (min-width: 1000px) { .challenge-prose .challenge-close { margin-top: 30px; } }

/* A wide prose block: one column, running the full container.
   This was two columns, which fills the page while keeping each line short —
   but it makes the reader's eye return to the left edge every few lines, and
   on a landing page nobody is settled in enough for that. One block reads
   straight down.
   The line does get long at 1160px, so the type is set a little larger and the
   leading opened up, which is what keeps a long measure readable: the eye
   finds the start of the next line by the gap between lines, and a wide
   measure needs a bigger gap. */
.prose-block--wide { max-width: none; }
@media (min-width: 1000px) {
  .prose-block--wide > p { font-size: 1.06rem; line-height: 1.95; }
}
.prose-block--wide h3 {
  margin: 26px 0 10px; font-size: 1.06rem; color: var(--navy-800);
  break-after: avoid;
}
.prose-block--wide > h3:first-child { margin-top: 0; }
.prose-block--wide .link-arrow { font-size: .92rem; }

/* ==========================================================================
   WHAT CHANGES, AT THREE LEVELS — bands, not a fourth card grid
   The audience goes on the left, what changes for them on the right, which is
   the shape of the statement. Rules instead of boxes, so the section has less
   chrome than the grids around it and fills the container.
   ========================================================================== */
.benefits-rows { border-top: 2px solid var(--navy-800); }
.benefit-row {
  display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 48px;
  padding: 34px 0 32px; border-bottom: 1px solid var(--grey-200); align-items: start;
}
/* The label column was a small number and a heading holding down 300px of
   empty space. The numeral is now set as display type — it is the one element
   in the section that can carry size without adding chrome — with a gold rule
   beside it, a line saying who this level actually means, and the count of
   what follows. */
.benefit-row__label { position: relative; padding-left: 20px; }
.benefit-row__label::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; background: var(--amber);
}
.benefit-row__no {
  display: block; font-family: var(--font-display); font-size: 2.4rem;
  line-height: 1; font-weight: 700; color: var(--amber); margin-bottom: 10px;
}
.benefit-row__label h3 {
  margin: 0 0 8px; font-size: 1.32rem; line-height: 1.3; color: var(--navy-800);
}
.benefit-row__label p {
  margin: 0 0 12px; font-size: .88rem; line-height: 1.55; color: var(--grey-500);
}
.benefit-row__count {
  display: inline-block; padding: 4px 9px; background: var(--tint-click);
  border: 1px solid var(--grey-200); border-radius: 2px;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--navy-800);
}
.benefit-row__items { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 44px; }
.benefit-row__items li {
  break-inside: avoid; position: relative; padding: 6px 0 6px 17px;
  font-size: .95rem; line-height: 1.62; color: var(--grey-600);
}
.benefit-row__items li::before {
  content: ""; position: absolute; left: 0; top: 15px;
  width: 9px; height: 2px; background: var(--amber);
}
@media (max-width: 900px) {
  .benefit-row { grid-template-columns: 1fr; gap: 12px; }
  .benefit-row__items { columns: 1; }
}

/* ==========================================================================
   THE EIGHT PILLARS — a colonnade, built as UI
   A beam, eight columns, a base split five and three, the foundation named
   underneath. The proportion is the metaphor: tall and narrow reads as a
   pillar, short and wide reads as a card, and this section is the one place
   on the site where the shape carries meaning.
   ========================================================================== */
.pillars-temple { margin: 8px 0 0; }

.temple-roof {
  background: var(--navy-800); color: #fff; text-align: center;
  padding: 14px 18px; font-weight: 700; font-size: .82rem; letter-spacing: .16em;
}

.temple-cols {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px; padding: 10px 0;
}

.temple-col {
  position: relative; display: flex; flex-direction: column; min-height: 320px;
  padding: 18px 13px 42px; text-decoration: none;
  background: var(--pillar-fill);
  /* The weight is in the edges, not the fill: a heavier outline all round, a
     deeper capital and a deeper plinth. */
  border: 2px solid var(--steel-400);
  border-top: 7px solid var(--amber);       /* the capital */
  border-bottom: 9px solid var(--navy-800); /* the plinth it stands on */
  transition: transform .16s ease, box-shadow .16s ease,
              background .16s ease, border-top-color .16s ease;
}
/* A hairline just inside the capital, the way a real one is stepped rather
   than a single slab. Small, but it is what stops the column reading as a
   rectangle with a coloured edge. */
.temple-col::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 1px; background: rgba(255,255,255,.65);
}
.temple-col:hover, .temple-col:focus-visible {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
  background: #fff;
  border-color: var(--navy-800);            /* the outline firms up */
  border-top-color: #FFC533;
}
.temple-col:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.tc-no {
  font-family: var(--font-display); font-size: 1.6rem; line-height: 1;
  font-weight: 700; color: var(--amber-text); margin-bottom: 10px;
}
.tc-title {
  font-size: .84rem; line-height: 1.38; font-weight: 600; color: var(--navy-800);
  margin-bottom: 8px;
}
html[lang="th"] .tc-title { font-size: .82rem; line-height: 1.55; }
.tc-desc { font-size: .73rem; line-height: 1.5; color: var(--grey-500); }
html[lang="th"] .tc-desc { font-size: .72rem; line-height: 1.62; }

/* "Learn more" at the foot of the column, where the eye finishes reading.
   The arrow alone assumed the reader knew what it meant; the words say it. */
.tc-go {
  position: absolute; left: 13px; bottom: 13px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  color: var(--navy-800); border-bottom: 2px solid var(--amber);
  padding-bottom: 2px;
  transition: color .16s ease, border-color .16s ease;
}
.tc-go span { color: var(--amber-text); transition: transform .16s ease; }
.temple-col:hover .tc-go span { transform: translateX(3px); }
html[lang="th"] .tc-go { font-size: .74rem; }

/* The base carries the split: five columns of production TPM, three added when
   it goes company-wide. The proportions match the columns above it. */
.temple-base { display: grid; grid-template-columns: 5fr 3fr; gap: 8px; }
.tb-seg {
  padding: 11px 14px; color: #fff; text-align: center;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
}
.tb-seg--prod { background: var(--navy-700, #1A3D61); }
.tb-seg--wide { background: #A96F00; }

.temple-foot { margin: 14px 0 0; font-size: .86rem; color: var(--grey-500); }

@media (max-width: 1080px) {
  .temple-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .temple-col { min-height: 250px; }
  .temple-base { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  /* Two across, and the columns stop being columns — at 150px wide with a
     description they would be a shaft of text. Shorter, and the proportion
     goes back to a card, which is the honest thing on a phone. */
  .temple-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .temple-col { min-height: 0; padding: 14px 13px 32px; }
  .temple-roof { letter-spacing: .1em; font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) { .temple-col:hover { transform: none; } }

/* Who owns a pillar and what it targets, set above the explanation.
   Two rows, label and value, on the pale ground the clickable cards use — it
   is reference rather than prose, and should not read as the first paragraph. */
.pillar-owner {
  margin: 0 0 26px; padding: 16px 18px;
  background: var(--tint-click); border-left: 3px solid var(--amber);
}
.pillar-owner > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; }
.pillar-owner > div + div { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--grey-200); }
.pillar-owner .k { font-size: .74rem; font-weight: 700; letter-spacing: .08em;
                   text-transform: uppercase; color: var(--amber-text); padding-top: 2px; }
.pillar-owner .v { font-size: .95rem; line-height: 1.6; color: var(--navy-800); }
/* The duties run longer than the owner or the target, so they get a little more
   air between lines — they are a sentence with middots, not a label. */
.pillar-owner > div:last-child .v { line-height: 1.75; }
html[lang="th"] .pillar-owner > div:last-child .v { line-height: 1.9; }
.course-card {
  margin: 0 0 18px; padding: 16px 18px;
  border: 1px solid var(--grey-200); border-left: 3px solid var(--amber);
  background: var(--tint-click);
}
.course-card h3 { margin: 0 0 8px; font-size: 1.02rem; line-height: 1.4; color: var(--navy-800); }
.course-card h3 .days {
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--amber-text); white-space: nowrap; margin-left: 6px;
}
.course-card p { margin: 0 0 8px; font-size: .93rem; line-height: 1.7; }
.course-card p.covers { margin-bottom: 0; color: var(--navy-800); font-weight: 500; }

.pillar-owner ul.v { margin: 0; padding-left: 17px; }
.pillar-owner ul.v li { margin: 0 0 5px; }
.pillar-owner ul.v li:last-child { margin-bottom: 0; }
@media (max-width: 620px) {
  .pillar-owner > div { grid-template-columns: 1fr; gap: 4px; }
}

/* Consultant credentials — his CV, restored from menu1_show.php?id=22 */
.creds { margin: 34px 0 0; padding: 22px 24px; background: var(--tint-click); border-left: 3px solid var(--amber); }
.creds h2 { margin: 0 0 14px; font-size: 1.15rem; }
.creds h3 { margin: 16px 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
            text-transform: uppercase; color: var(--amber-text); }
.creds h3:first-of-type { margin-top: 0; }
.creds ul { margin: 0; padding-left: 18px; }
.creds li { margin: 0 0 5px; font-size: .93rem; line-height: 1.6; }