/* ==========================================================================
   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);
}

/* ---------- 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; }

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 { display: none; }
  .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; }
  .brand-sub { display: block; }
}
@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) {
  .brand-sub { display: none; }      /* the only band where the row is tight */
}

@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; }