/*
Theme Name: MPT Glass Machinery
Theme URI: https://mptglass.com/
Author: MPT Glass Machinery
Description: Custom bilingual (EN/TH) theme for MPT Glass Machinery Co., Ltd. — glass processing machinery importer in Thailand. Includes Products catalogue (via the MPT Products plugin), News, After-Sales and Contact pages.
Version: 1.13.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mpt-glass
*/

/* ============================================================
   MPT Glass Machinery — shared stylesheet (light industrial)
   ============================================================ */
:root {
  /* dark surfaces (hero, header, footer, division panels) */
  --bg: #0b1526;
  --bg-2: #101d31;
  --bg-3: #142441;
  --line-dark: rgba(255, 255, 255, 0.1);

  /* light surfaces (content sections) */
  --paper: #ffffff;
  --paper-2: #f3f5f9;
  --line: #e3e8f0;

  /* ink */
  --ink: #13202e;
  --ink-muted: #5b6b80;
  --text: #e9eef7;
  --muted: #96a3ba;

  --amber: #ffb400;
  --amber-dark: #e09a00;
  --radius: 14px;
  --shadow: 0 14px 40px rgba(16, 30, 54, 0.1);
  --shadow-dark: 0 18px 45px rgba(0, 0, 0, 0.4);
  --font-display: "IBM Plex Sans Thai", "IBM Plex Sans", sans-serif;
  --font-body: "IBM Plex Sans Thai", "IBM Plex Sans", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container { width: min(1180px, 92%); margin-inline: auto; }

/* ---------- typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; }
.display { font-size: clamp(2.6rem, 6.5vw, 4.6rem); text-transform: uppercase; }
.h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); text-transform: uppercase; }
.h3 { font-size: 1.25rem; }
.accent { color: var(--amber); }
.lead { color: var(--ink-muted); font-size: 1.08rem; max-width: 60ch; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--amber-dark); font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; font-size: 0.78rem; margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--amber); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.9rem 1.7rem; font-weight: 700; font-size: 0.86rem;
  letter-spacing: 0.1em; text-transform: uppercase; border-radius: 8px;
  border: 1px solid transparent; cursor: pointer; transition: all 0.25s ease;
  font-family: var(--font-body);
}
.btn-primary { background: var(--amber); color: #101724; }
.btn-primary:hover { background: var(--amber-dark); transform: translateY(-2px); }
.btn-ghost { border-color: rgba(255, 255, 255, 0.3); color: var(--text); }
.btn-ghost:hover { border-color: var(--amber); color: var(--amber); }
.section .btn-ghost { border-color: #c9d2e0; color: var(--ink); }
.section .btn-ghost:hover { border-color: var(--amber-dark); color: var(--amber-dark); }

/* ---------- header (dark) ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(9, 17, 31, 0.88); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-dark);
  color: var(--text);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.brand { display: flex; align-items: center; gap: 0.75rem; }
.brand img { height: 48px; width: auto; }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1.1; }
.brand-name small { display: block; color: var(--amber); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; }

.main-nav { display: flex; align-items: center; gap: 1.9rem; }
.main-nav a {
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); padding: 0.4rem 0;
  transition: color 0.2s;
}
.main-nav a:hover { color: var(--text); }
.main-nav a.active { color: var(--amber); }

.nav-actions { display: flex; align-items: center; gap: 1rem; }
.lang-toggle { display: flex; border: 1px solid var(--line-dark); border-radius: 999px; overflow: hidden; }
.lang-toggle button {
  background: none; border: 0; color: var(--muted); font-weight: 700;
  font-size: 0.75rem; padding: 0.42rem 0.85rem; cursor: pointer;
  font-family: var(--font-body); transition: all 0.2s;
}
.lang-toggle button.on { background: var(--amber); color: #101724; }

.nav-burger { display: none; background: none; border: 0; cursor: pointer; width: 42px; height: 42px; position: relative; }
.nav-burger span, .nav-burger span::before, .nav-burger span::after {
  content: ""; position: absolute; left: 8px; width: 26px; height: 2px;
  background: var(--text); transition: all 0.25s;
}
.nav-burger span { top: 20px; }
.nav-burger span::before { top: -8px; left: 0; }
.nav-burger span::after { top: 8px; left: 0; }

/* ---------- hero (dark) ---------- */
.hero {
  position: relative; min-height: 92vh; display: flex; align-items: center;
  padding: 150px 0 90px; overflow: hidden; color: var(--text); background: var(--bg);
}
.hero .lead { color: var(--muted); }
.hero .eyebrow { color: var(--amber); }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(0.9); }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(8, 15, 28, 0.95) 25%, rgba(8, 15, 28, 0.55) 65%, rgba(8, 15, 28, 0.35));
}
.hero .container { position: relative; z-index: 2; }
.hero-cta { display: flex; gap: 1rem; margin-top: 2.2rem; flex-wrap: wrap; }

.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: var(--radius);
  overflow: hidden; margin-top: 4rem; max-width: 900px;
}
.stat { background: rgba(13, 24, 43, 0.85); padding: 1.4rem 1.6rem; }
.stat b { font-family: var(--font-display); font-size: 2rem; color: var(--amber); display: block; }
.stat span { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- sections (light by default) ---------- */
.section { padding: 96px 0; background: var(--paper); }
.section-alt { background: var(--paper-2); }
.section-dark { background: var(--bg); color: var(--text); }
.section-dark .lead { color: var(--muted); }
.section-dark .eyebrow { color: var(--amber); }
.section-head { margin-bottom: 3rem; max-width: 720px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .lead { margin-inline: auto; }

/* ---------- brand strip (light) ---------- */
.brand-strip { padding: 44px 0; border-block: 1px solid var(--line); background: var(--paper); overflow: hidden; }
.marquee { display: flex; gap: 3.5rem; align-items: center; width: max-content; animation: scroll 38s linear infinite; }
.marquee img { height: 46px; width: auto; opacity: 0.85; filter: grayscale(35%); transition: all 0.25s; border-radius: 6px; }
.marquee img:hover { opacity: 1; filter: none; transform: scale(1.06); }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ============================================================
   Division panels (tall interactive tiles)
   ============================================================ */
.panels {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line-dark); border: 1px solid var(--line-dark);
}
.panel {
  position: relative; min-height: 560px; overflow: hidden;
  background: var(--bg-2); color: var(--text);
  display: flex; flex-direction: column; justify-content: center;
  padding: 3.2rem 2.6rem 4rem; isolation: isolate;
}
.panel-bg {
  position: absolute; inset: 0; z-index: -1; opacity: 0;
  transition: opacity 0.7s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  transform: scale(1.06);
}
.panel-bg img { width: 100%; height: 100%; object-fit: cover; }
.panel-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 17, 31, 0.72), rgba(9, 17, 31, 0.88)); }
.panel:hover .panel-bg, .panel.open .panel-bg { opacity: 1; transform: scale(1); }

.panel .tick { position: absolute; top: 3rem; left: 2.6rem; width: 34px; height: 4px; background: var(--amber); }

.panel-inner { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.panel:hover .panel-inner, .panel.open .panel-inner { transform: translateY(-26px); }

.panel h3 { font-size: clamp(1.9rem, 2.6vw, 2.5rem); line-height: 1.05; }
.panel .sub {
  display: block; margin-top: 0.8rem; font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.panel .desc {
  color: #c4cddc; font-size: 0.95rem; margin-top: 1.2rem; max-width: 42ch;
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity 0.55s ease 0.1s, max-height 0.55s ease;
}
.panel:hover .desc, .panel.open .desc { opacity: 1; max-height: 260px; }

.panel .go {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: var(--amber); color: #101724; text-align: center;
  font-weight: 700; font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 2.4rem 1rem 1.3rem;
  clip-path: polygon(0 42%, 100% 0, 100% 100%, 0 100%);
  transform: translateY(101%); transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.panel:hover .go, .panel.open .go { transform: translateY(0); }
.panel .go:hover { background: var(--amber-dark); }

/* ---------- cards / grids (light) ---------- */
.grid { display: grid; gap: 1.6rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.card:hover { transform: translateY(-6px); border-color: rgba(224, 154, 0, 0.55); box-shadow: var(--shadow); }
.card-media { aspect-ratio: 4/3; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.card-media img { max-height: 100%; object-fit: contain; }
.card-body { padding: 1.4rem 1.5rem 1.6rem; }
.card-tag { color: var(--amber-dark); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.card-body h3 { margin: 0.45rem 0 0.5rem; font-size: 1.08rem; color: var(--ink); }
.card-body p { color: var(--ink-muted); font-size: 0.92rem; }
.card-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--amber-dark); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 1rem; }
.card-link:hover { gap: 0.7rem; }

/* category tiles (light) */
.cat-tile {
  position: relative; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2rem 1.8rem; transition: all 0.3s;
}
.cat-tile:hover { border-color: var(--amber); transform: translateY(-5px); box-shadow: var(--shadow); }
.cat-tile .num { font-family: var(--font-display); font-weight: 800; color: var(--amber-dark); font-size: 1rem; letter-spacing: 0.1em; }
.cat-tile h3 { margin: 0.7rem 0 0.5rem; font-size: 1.12rem; text-transform: uppercase; color: var(--ink); }
.cat-tile p { color: var(--ink-muted); font-size: 0.92rem; }

/* ---------- numbered process (light) ---------- */
.steps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.step { display: grid; grid-template-columns: 120px 1fr; gap: 1.4rem; background: var(--paper); padding: 1.7rem 1.8rem; align-items: center; }
.step .step-media { width: 120px; height: 84px; border-radius: 8px; overflow: hidden; background: var(--paper-2); }
.step .step-media img { width: 100%; height: 100%; object-fit: cover; }
.step .n { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--amber-dark); }
.step h3 { font-size: 1.02rem; text-transform: uppercase; margin-bottom: 0.35rem; color: var(--ink); }
.step p { color: var(--ink-muted); font-size: 0.92rem; }

/* ---------- split ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 4rem; align-items: center; }
.split-media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.badge-years {
  position: absolute; left: 0; bottom: 2rem; background: var(--amber); color: #101724;
  padding: 1.1rem 1.5rem; font-family: var(--font-display); z-index: 2;
}
.badge-years b { font-size: 1.9rem; display: block; line-height: 1; }
.badge-years span { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }

/* ---------- checklist ---------- */
.checklist { display: grid; gap: 0.9rem; margin-top: 1.6rem; }
.checklist li { display: flex; gap: 0.8rem; align-items: flex-start; color: var(--ink); }
.checklist li::before {
  content: "✓"; flex: 0 0 22px; height: 22px; border-radius: 50%;
  background: rgba(255, 180, 0, 0.18); color: var(--amber-dark); font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; margin-top: 3px;
}

/* ---------- filter bar (light) ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2.4rem; }
.filter-bar button {
  background: var(--paper); color: var(--ink-muted); border: 1px solid #ccd4e0;
  padding: 0.55rem 1.15rem; border-radius: 999px; font-weight: 600; font-size: 0.82rem;
  cursor: pointer; font-family: var(--font-body); transition: all 0.2s;
}
.filter-bar button:hover { color: var(--ink); border-color: #9aa8bc; }
.filter-bar button.on { background: var(--amber); border-color: var(--amber); color: #101724; }

/* ---------- page hero (dark, inner pages) ---------- */
.page-hero {
  padding: 165px 0 70px; color: var(--text);
  background: linear-gradient(180deg, var(--bg-3), var(--bg));
  border-bottom: 4px solid var(--amber);
}
.page-hero .lead { color: var(--muted); }
.breadcrumb { color: var(--muted); font-size: 0.82rem; margin-bottom: 1rem; letter-spacing: 0.05em; }
.breadcrumb a:hover { color: var(--amber); }

/* ---------- timeline (light) ---------- */
.timeline { position: relative; margin-top: 2.5rem; padding-left: 2rem; border-left: 2px solid var(--line); display: grid; gap: 2.2rem; }
.tl-item { position: relative; }
.tl-item::before {
  content: ""; position: absolute; left: calc(-2rem - 7px); top: 6px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 0 5px rgba(255, 180, 0, 0.2);
}
.tl-item b { color: var(--amber-dark); font-family: var(--font-display); font-size: 1.05rem; }
.tl-item h3 { font-size: 1.05rem; margin: 0.25rem 0 0.3rem; color: var(--ink); }
.tl-item p { color: var(--ink-muted); font-size: 0.93rem; max-width: 60ch; }

/* ---------- spec table (light) ---------- */
.spec-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.spec-table th, .spec-table td { padding: 0.85rem 1.2rem; text-align: left; font-size: 0.93rem; border-bottom: 1px solid var(--line); }
.spec-table th { color: var(--ink-muted); font-weight: 600; width: 42%; background: var(--paper-2); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

/* ---------- accordion (light) ---------- */
.accordion { display: grid; gap: 0.8rem; }
.acc-item { border: 1px solid var(--line); border-radius: 10px; background: var(--paper); overflow: hidden; }
.acc-item summary {
  cursor: pointer; padding: 1.1rem 1.4rem; font-weight: 700; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--ink);
}
.acc-item summary::after { content: "+"; color: var(--amber-dark); font-size: 1.4rem; font-weight: 400; transition: transform 0.25s; }
.acc-item[open] summary::after { transform: rotate(45deg); }
.acc-item .acc-body { padding: 0 1.4rem 1.2rem; color: var(--ink-muted); font-size: 0.95rem; }

/* ---------- forms (light) ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.45rem; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--paper); border: 1px solid #ccd4e0; color: var(--ink);
  border-radius: 8px; padding: 0.85rem 1rem; font-family: var(--font-body); font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 180, 0, 0.18); }
.field textarea { min-height: 140px; resize: vertical; }

/* ---------- contact info (light) ---------- */
.info-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.7rem; transition: box-shadow 0.3s, border-color 0.3s; }
.info-card:hover { box-shadow: var(--shadow); border-color: rgba(224, 154, 0, 0.5); }
.info-card .ic { width: 44px; height: 44px; border-radius: 10px; background: rgba(255, 180, 0, 0.16); color: var(--amber-dark); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 1rem; }
.info-card h3 { font-size: 1rem; text-transform: uppercase; margin-bottom: 0.4rem; color: var(--ink); }
.info-card p, .info-card a { color: var(--ink-muted); font-size: 0.94rem; }
.info-card a:hover { color: var(--amber-dark); }

/* ---------- news ---------- */
.news-meta { display: flex; gap: 1rem; color: var(--ink-muted); font-size: 0.8rem; margin-bottom: 0.5rem; }
.news-meta .cat { color: var(--amber-dark); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(120deg, var(--amber), #ffcb47); color: #101724; border-radius: var(--radius); padding: 3.2rem 3rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; box-shadow: var(--shadow); }
.cta-band h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); text-transform: uppercase; }
.cta-band p { font-weight: 500; opacity: 0.85; }
.cta-band .btn { background: #101724; color: #fff; }
.cta-band .btn:hover { background: #1d2b45; }

/* ---------- footer (dark) ---------- */
.site-footer { background: #081020; color: var(--text); border-top: 1px solid var(--line-dark); padding: 70px 0 0; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 3rem; padding-bottom: 3rem; }
.footer-grid h4 { font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); margin-bottom: 1.1rem; }
.footer-grid a, .footer-grid p { color: var(--muted); font-size: 0.92rem; }
.footer-grid li { margin-bottom: 0.55rem; }
.footer-grid a:hover { color: var(--text); }
.footer-bottom { border-top: 1px solid var(--line-dark); padding: 1.4rem 0; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--muted); font-size: 0.82rem; }

/* ============================================================
   Motion & animation
   ============================================================ */

body { animation: pageIn 0.6s ease both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--amber), #ffd35c);
  z-index: 200; pointer-events: none;
}

.site-header { transition: background 0.35s ease, box-shadow 0.35s ease; }
.nav-wrap { transition: height 0.35s ease; }
.site-header.scrolled { background: rgba(7, 13, 24, 0.96); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.site-header.scrolled .nav-wrap { height: 60px; }
.brand img { transition: height 0.35s ease; }
.site-header.scrolled .brand img { height: 40px; }

.hero-bg { animation: kenburns 18s ease-out both; will-change: transform; }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }

.hero .eyebrow, .hero .display, .hero .lead, .hero-cta, .hero-stats {
  opacity: 0; transform: translateY(34px);
  animation: riseIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero .eyebrow { animation-delay: 0.15s; }
.hero .display { animation-delay: 0.3s; }
.hero .lead { animation-delay: 0.5s; }
.hero-cta { animation-delay: 0.65s; }
.hero-stats { animation-delay: 0.85s; }
@keyframes riseIn { to { opacity: 1; transform: none; } }

.scroll-hint {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: var(--muted); font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase;
  opacity: 0; animation: riseIn 0.9s ease 1.4s forwards;
}
.scroll-hint::after {
  content: ""; width: 1px; height: 44px;
  background: linear-gradient(180deg, var(--amber), transparent);
  animation: dropLine 1.8s ease-in-out infinite;
}
@keyframes dropLine { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 100% { transform: scaleY(0); transform-origin: bottom; } }

.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--d, 0s); }
.reveal-left { opacity: 0; transform: translateX(-44px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--d, 0s); }
.reveal-right { opacity: 0; transform: translateX(44px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--d, 0s); }
.reveal.visible, .reveal-left.visible, .reveal-right.visible { opacity: 1; transform: none; }
.section-head { opacity: 0; transform: translateY(30px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.section-head.visible { opacity: 1; transform: none; }

.card-media { overflow: hidden; }
.card-media img { transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.card:hover .card-media img { transform: scale(1.07); }
.split-media { overflow: hidden; }
.split-media img { transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); }
.split-media:hover img { transform: scale(1.05); }
.step .step-media img { transition: transform 0.7s ease; }
.step:hover .step-media img { transform: scale(1.1); }

.card { position: relative; }
.card::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg); transition: left 0.7s ease; pointer-events: none;
}
.card:hover::after { left: 130%; }

.card-link { transition: gap 0.3s ease, color 0.3s ease; }
.btn-primary:hover { box-shadow: 0 12px 30px rgba(255, 180, 0, 0.3); }

.main-nav a { position: relative; }
.main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
  background: var(--amber); transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); transform-origin: left; }

.eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform 0.8s ease 0.2s; }
.visible .eyebrow::before, .hero .eyebrow::before, .page-hero .eyebrow::before { transform: scaleX(1); }

.tl-item::before { transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s; }
.timeline:not(.visible) .tl-item::before { transform: scale(0); }
.timeline.visible .tl-item::before { transform: scale(1); }

.acc-item summary { transition: color 0.25s; }
.acc-item[open] summary { color: var(--amber-dark); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal-left, .reveal-right, .section-head { opacity: 1; transform: none; }
  .panel .desc { opacity: 1; max-height: none; }
  .panel .go { transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .panels { grid-template-columns: 1fr; }
  .panel { min-height: 420px; }
}
@media (max-width: 720px) {
  .main-nav {
    position: fixed; top: 74px; right: 0; bottom: 0; width: min(320px, 82vw);
    background: var(--bg-2); flex-direction: column; align-items: flex-start;
    padding: 2rem 1.8rem; gap: 1.3rem; transform: translateX(100%);
    transition: transform 0.3s ease; border-left: 1px solid var(--line-dark);
  }
  .main-nav.open { transform: none; }
  .nav-burger { display: block; }
  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; }
  .step .step-media { width: 100%; height: 150px; }
  .cta-band { padding: 2.2rem 1.6rem; }
  .section { padding: 64px 0; }
  .scroll-hint { display: none; }
  .panel { min-height: 0; padding-bottom: 6rem; }
  .panel .desc { opacity: 1; max-height: none; }
  .panel .go { transform: none; }
  .panel-inner { transform: none !important; }
}

/* ============================================================
   Panel language applied to all tiles & cards
   ============================================================ */

/* amber tick bar on tiles — draws in on reveal, sweeps across on hover */
.cat-tile, .info-card, .step, .acc-item { position: relative; overflow: hidden; }
.cat-tile::before, .info-card::before {
  content: ""; position: absolute; top: 0; left: 0; height: 4px; width: 34px;
  background: var(--amber); transform: scaleX(0); transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s, width 0.5s ease;
}
.cat-tile.visible::before, .info-card.visible::before, .info-card:hover::before, .cat-tile:hover::before { transform: scaleX(1); }
.cat-tile:hover::before, .info-card:hover::before { width: 100%; }

/* bottom amber sweep on product/news cards */
.card::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 3;
  background: var(--amber); transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover::before { transform: scaleX(1); }

/* steps: number slides + amber left edge on hover */
.step::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--amber); transform: scaleY(0); transform-origin: top;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.step:hover::before { transform: scaleY(1); }
.step .n { display: inline-block; transition: transform 0.4s ease; }
.step:hover .n { transform: translateX(6px); }

/* accordion left accent when open */
.acc-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--amber); transform: scaleY(0); transition: transform 0.4s ease;
}
.acc-item[open]::before { transform: scaleY(1); }

/* ---------- floating quick-contact buttons ---------- */
.fab-stack {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 150;
  display: flex; flex-direction: column; gap: 0.7rem;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.fab-stack.show { opacity: 1; transform: none; pointer-events: auto; }
.fab {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.72rem; letter-spacing: 0.02em;
  box-shadow: 0 10px 26px rgba(10, 20, 40, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fab:hover { transform: translateY(-4px) scale(1.06); }
.fab-line { background: #06c755; color: #fff; }
.fab-call { background: var(--amber); color: #101724; font-size: 1.25rem; }
@media (max-width: 720px) { .fab-stack { right: 1rem; bottom: 1rem; } }

/* failsafe: if JS doesn't run, never hide content */
html:not(.js) .reveal, html:not(.js) .reveal-left, html:not(.js) .reveal-right,
html:not(.js) .section-head { opacity: 1 !important; transform: none !important; }

/* ---------- hero background video ---------- */
.hero-bg video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero-bg::after { z-index: 1; }

/* ============================================================
   WordPress content areas (post/page bodies, editor output)
   Added for the WordPress theme port — keeps native WP content
   consistent with the MPT design system.
   ============================================================ */
.entry-content { color: var(--ink); font-size: 1.02rem; line-height: 1.8; }
.entry-content > * + * { margin-top: 1.1rem; }
.entry-content h2 { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); margin-top: 2rem; }
.entry-content h3 { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); margin-top: 1.6rem; }
.entry-content a { color: var(--amber-dark); text-decoration: underline; }
.entry-content ul, .entry-content ol { padding-left: 1.3rem; }
.entry-content li { margin-top: 0.4rem; }
.entry-content img { max-width: 100%; height: auto; border-radius: var(--radius); }
.entry-content blockquote {
  border-left: 3px solid var(--amber); padding-left: 1.1rem;
  color: var(--ink-muted); font-style: italic;
}
.entry-content table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.entry-content table th, .entry-content table td {
  border: 1px solid var(--line); padding: 0.7rem 0.9rem; text-align: left;
}
.entry-content table th { background: #f5f7fb; }
.entry-content .wp-block-image { margin: 1.4rem 0; }
.alignwide { max-width: 1100px; }
.aligncenter { text-align: center; margin-left: auto; margin-right: auto; }

/* pagination (news list) */
.pagination, .nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.pagination .page-numbers, .nav-links .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 0.7rem;
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); text-decoration: none; font-weight: 600;
}
.pagination .page-numbers.current { background: var(--bg); color: #fff; border-color: var(--bg); }
.pagination .page-numbers:hover { border-color: var(--amber); }

/* ---------- v1.2: hero video sharpness ---------- */
/* the ken-burns zoom was scaling the video and blurring it — disable when a video is present */
.hero-bg:has(video) { animation: none; transform: none; }
.hero-bg.has-video { animation: none; transform: none; } /* JS fallback for older browsers */
.hero-bg video { filter: none; }

/* ---------- v1.2: Yinrui hero product section ---------- */
.hero-product { background: var(--bg); color: var(--text); position: relative; overflow: hidden; }
.hero-product .eyebrow { color: var(--amber); }
.hero-product .h2 { color: #fff; }
.hero-product .lead { color: var(--muted); }
.hp-head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: end; margin-bottom: 2.6rem; }
.hp-kicker { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); font-weight: 700; }
.hp-kicker::before { content: ""; width: 34px; height: 2px; background: var(--amber); }
.hp-display { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.05; color: #fff; margin-top: 0.8rem; }
.hp-display .accent { color: var(--amber); }
.hp-videos { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.2rem; align-items: start; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #060b16; border: 1px solid var(--line-dark); box-shadow: var(--shadow-dark); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-frame .vf-label { position: absolute; left: 0.9rem; bottom: 0.7rem; z-index: 2; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.85); background: rgba(6,11,22,0.65); padding: 0.3rem 0.65rem; border-radius: 6px; pointer-events: none; }
.hp-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; margin-top: 2.4rem; }
.hp-point { background: rgba(255, 255, 255, 0.03); padding: 1.4rem 1.5rem; }
.hp-point b { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--amber); }
.hp-point span { display: block; margin-top: 0.35rem; color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
.hp-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.4rem; }
@media (max-width: 1020px) {
  .hp-head { grid-template-columns: 1fr; gap: 1.2rem; }
  .hp-videos { grid-template-columns: 1fr; }
  .hp-points { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .hp-points { grid-template-columns: 1fr; }
}

/* ============================================================
   v1.3 — Mobile hardening
   ============================================================ */

/* never allow sideways scroll from any stray element */
html, body { overflow-x: clip; }

/* kill 300ms tap delay + accidental double-tap zoom on all controls */
a, button, .btn, .filter-bar button, .lang-toggle button { touch-action: manipulation; -webkit-tap-highlight-color: rgba(255, 180, 0, 0.18); }

/* WordPress admin bar: keep our fixed header (and slide-out menu) below it */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
  body.admin-bar .main-nav { top: 120px; } /* 46 admin + 74 header */
}

/* comfortable touch targets everywhere */
.btn { min-height: 48px; }
.lang-toggle button { min-height: 40px; padding: 0.42rem 1rem; }
.filter-bar button { min-height: 44px; padding: 0.55rem 1.25rem; font-size: 0.86rem; }

@media (max-width: 720px) {
  /* tighter rhythm on phones */
  .hero { padding: 118px 0 64px; min-height: 0; }
  .page-hero { padding: 128px 0 52px; }
  .hero-stats { margin-top: 2.6rem; }
  .hero-stats b { font-size: 1.5rem; }

  /* off-canvas menu: scrollable, roomy tap rows, safe-area aware */
  .main-nav { overflow-y: auto; padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
  .main-nav a { display: block; width: 100%; padding: 0.65rem 0; font-size: 1.02rem; }

  /* filter chips: one swipeable row instead of a 4-row pile */
  .filter-bar {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin-inline: -4%; padding-inline: 4%;
    scroll-padding-inline: 4%;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-bar button { flex: 0 0 auto; white-space: nowrap; }

  /* CTA rows stack into full-width, thumb-friendly buttons */
  .hero-cta .btn, .hp-cta .btn, .cta-band .btn { width: 100%; justify-content: center; }
  .cta-band { flex-direction: column; align-items: stretch; text-align: center; }

  /* Yinrui panel points: single column with tighter padding */
  .hp-point { padding: 1.1rem 1.2rem; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: 0.4rem; text-align: center; }
}

/* aspect-ratio fallback for older phone browsers (video frames) */
@supports not (aspect-ratio: 16 / 9) {
  .video-frame { height: 0; padding-top: 56.25%; }
}

/* ============================================================
   v1.4 — Style B hazard buttons, nav fixes, page transitions
   ============================================================ */

/* ---------- Style B: hazard-stripe buttons (chosen design) ---------- */
.btn-primary, .btn-ghost {
  position: relative; overflow: hidden; padding-left: 2.15rem; border-radius: 6px;
}
.btn-primary::before, .btn-ghost::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px;
}
.btn-primary { background: var(--amber); color: #101724; font-weight: 800; }
.btn-primary::before { background: repeating-linear-gradient(45deg, #101724 0 6px, var(--amber) 6px 12px); }
.btn-primary:hover { background: #ffc23a; transform: translateY(-2px); }
.btn-primary:active { transform: scale(0.97); }
.btn-ghost { border: 2px solid var(--amber); color: var(--amber); font-weight: 800; }
.btn-ghost::before { background: repeating-linear-gradient(45deg, var(--amber) 0 6px, transparent 6px 12px); }
.btn-ghost:hover { background: rgba(255, 180, 0, 0.12); border-color: var(--amber); color: var(--amber); }
.section .btn-ghost { border-color: var(--amber-dark); color: var(--amber-dark); }
.section .btn-ghost::before { background: repeating-linear-gradient(45deg, var(--amber-dark) 0 6px, transparent 6px 12px); }
.section .btn-ghost:hover { background: rgba(224, 154, 0, 0.1); border-color: var(--amber-dark); color: var(--amber-dark); }
.cta-band .btn { padding-left: 2.15rem; border-radius: 6px; position: relative; overflow: hidden; }
.cta-band .btn::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px;
  background: repeating-linear-gradient(45deg, var(--amber) 0 6px, #101724 6px 12px);
}

/* ---------- nav: burger from 1020px down (links were overflowing 721–1020) ---------- */
@media (max-width: 1020px) {
  .main-nav {
    position: fixed; top: 74px; right: 0; bottom: 0; width: min(320px, 82vw);
    background: var(--bg-2); flex-direction: column; align-items: flex-start;
    padding: 2rem 1.8rem; gap: 1.3rem; transform: translateX(100%);
    transition: transform 0.3s ease; border-left: 1px solid var(--line-dark);
    overflow-y: auto;
  }
  .main-nav.open { transform: none; }
  .nav-burger { display: block; }
  .main-nav a { display: block; width: 100%; padding: 0.5rem 0; font-size: 1.02rem; }
  body.admin-bar .main-nav { top: 120px; }
}
@media (min-width: 1021px) and (max-width: 1200px) {
  .main-nav { gap: 1.35rem; }
  .main-nav a { font-size: 0.86rem; }
}

/* ---------- nav: sliding indicator line (desktop) ---------- */
@media (min-width: 1081px) {
  .main-nav { position: relative; }
  .nav-line {
    position: absolute; bottom: -6px; height: 2px; background: var(--amber);
    left: 0; width: 0; opacity: 0;
    transition: left 0.32s cubic-bezier(0.65, 0, 0.35, 1), width 0.32s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s;
  }
  .main-nav.has-line a::after { display: none; }
}

/* ---------- page transition: navy curtain + content rise ---------- */
.page-curtain {
  position: fixed; inset: 0; z-index: 99999; background: var(--bg);
  transform: translateY(103%); pointer-events: none;
  transition: transform 0.42s cubic-bezier(0.65, 0, 0.35, 1);
}
.page-curtain::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--amber);
}
.page-curtain.on { transform: none; }
html.js body { animation: pageRise 0.55s ease both; }
@keyframes pageRise { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .page-curtain { display: none; }
  html.js body { animation: none; }
}

/* ============================================================
   v1.5 — stats band below hero, wider burger range, page reveal
   ============================================================ */

/* stats band: its own navy strip under the hero (no longer covering the video) */
.stats-band { background: var(--bg); padding: 0 0 56px; border-bottom: 1px solid var(--line-dark); }
.stats-in-band { margin-top: 0; max-width: none; }
.hero { min-height: 78vh; }
.hero .scroll-hint { display: none; }

/* Thai menu labels are wide — use the burger up to 1080px, compress up to 1440px */
@media (max-width: 1080px) {
  .main-nav {
    position: fixed; top: 74px; right: 0; bottom: 0; width: min(320px, 82vw);
    background: var(--bg-2); flex-direction: column; align-items: flex-start;
    padding: 2rem 1.8rem; gap: 1.3rem; transform: translateX(100%);
    transition: transform 0.3s ease; border-left: 1px solid var(--line-dark);
    overflow-y: auto;
  }
  .main-nav.open { transform: none; }
  .nav-burger { display: block; }
  .main-nav a { display: block; width: 100%; padding: 0.5rem 0; font-size: 1.02rem; }
  body.admin-bar .main-nav { top: 120px; }
}
@media (min-width: 1081px) and (max-width: 1440px) {
  .main-nav { gap: 1.15rem; }
  .main-nav a { font-size: 0.84rem; letter-spacing: 0; }
}

/* page entrance: curtain starts covering, then lifts away (works on the home page too) */
.page-curtain.boot { transition: none; }

/* ============================================================
   v1.6 — drawer menu (all screen sizes) + clean video hero
   ============================================================ */

/* ---------- header actions ---------- */
.nav-tel { color: var(--text); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em; }
.nav-tel:hover { color: var(--amber); }
@media (max-width: 640px) { .nav-tel { display: none; } }

.menu-btn {
  display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer;
  background: transparent; border: 2px solid var(--amber); border-radius: 6px;
  color: var(--amber); padding: 0.5rem 1rem; min-height: 44px;
  font-family: var(--font-body); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.12em;
  transition: background 0.2s;
}
.menu-btn:hover { background: rgba(255, 180, 0, 0.12); }
.menu-icon { display: inline-flex; flex-direction: column; gap: 4px; }
.menu-icon i { display: block; width: 18px; height: 2px; background: var(--amber); transition: transform 0.25s, opacity 0.25s; }
body.nav-open .menu-icon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .menu-icon i:nth-child(2) { opacity: 0; }
body.nav-open .menu-icon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-burger { display: none !important; } /* replaced by .menu-btn */

/* ---------- drawer (one pattern for every screen size) ---------- */
.nav-backdrop {
  position: fixed; inset: 0; z-index: 998; background: rgba(4, 9, 18, 0.6);
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

.main-nav {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 999;
  width: min(400px, 90vw); background: var(--bg-2);
  display: flex; flex-direction: column; gap: 0;
  padding: 5rem 2.4rem max(2rem, env(safe-area-inset-bottom));
  transform: translateX(102%); transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  border-left: 1px solid var(--line-dark); overflow-y: auto;
}
body.nav-open .main-nav { transform: none; box-shadow: -30px 0 70px rgba(0, 0, 0, 0.45); }

.drawer-close {
  position: absolute; top: 1.3rem; right: 1.4rem; cursor: pointer;
  background: transparent; border: 1px solid var(--line-dark); border-radius: 8px;
  color: var(--muted); width: 44px; height: 44px; font-size: 1rem;
}
.drawer-close:hover { color: var(--amber); border-color: var(--amber); }

.drawer-links { display: flex; flex-direction: column; }
.drawer-links a {
  color: var(--text); text-decoration: none; font-family: var(--font-display);
  font-weight: 700; font-size: 1.35rem; padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-dark); position: relative;
  transition: color 0.2s, padding-left 0.25s;
}
.drawer-links a:hover { color: var(--amber); padding-left: 0.6rem; }
.drawer-links a.active { color: var(--amber); }
.drawer-links a.active::before { content: "— "; }
.drawer-links a::after { display: none; }

.drawer-foot { margin-top: auto; padding-top: 2rem; display: flex; flex-direction: column; gap: 1.2rem; }
.drawer-foot .btn { justify-content: center; }
.drawer-contact { display: flex; flex-direction: column; gap: 0.4rem; }
.drawer-contact a { color: var(--muted); text-decoration: none; font-size: 0.9rem; }
.drawer-contact a:hover { color: var(--amber); }

/* neutralise old nav patterns that no longer apply */
.main-nav .nav-line { display: none; }
@media (max-width: 1080px) { .main-nav { top: 0; } body.admin-bar .main-nav { top: 0; } }
body.admin-bar .main-nav { top: 0; }

/* ---------- clean hero: video only, content below ---------- */
.hero-clean { min-height: min(86vh, 720px); padding: 0; }
.hero-clean .hero-bg::after {
  background: linear-gradient(180deg, rgba(8, 15, 28, 0.35) 0%, rgba(8, 15, 28, 0) 30%, rgba(8, 15, 28, 0) 70%, rgba(8, 15, 28, 0.5) 100%);
}
@media (max-width: 720px) { .hero-clean { min-height: 58vh; } }

.hero-intro { background: var(--bg); color: var(--text); padding: 4.5rem 0 4rem; }
.hero-intro .display { color: #fff; font-size: clamp(2.2rem, 5vw, 3.8rem); margin-top: 1rem; }
.hero-intro .lead { color: var(--muted); max-width: 720px; margin-top: 1.4rem; }
.hero-intro .hero-cta { margin-top: 2.2rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.stats-band { padding: 0 0 56px; }
@media (max-width: 720px) {
  .hero-intro { padding: 3rem 0 2.6rem; }
  .hero-intro .hero-cta .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   v1.7 — creex-style hero overlay + edge-to-edge header
   ============================================================ */

/* header: full-bleed so the logo hugs the top-left corner (creex-style);
   transparent over the hero, solid after scroll */
.site-header {
  background: linear-gradient(180deg, rgba(7, 13, 24, 0.55), rgba(7, 13, 24, 0));
  border-bottom: 0; backdrop-filter: none;
}
.site-header .container { max-width: none; padding: 0 clamp(16px, 2.2vw, 36px); }
.site-header.scrolled {
  background: rgba(7, 13, 24, 0.96); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-dark);
}

/* hero: overlay content sits ON the video */
.hero-clean { min-height: min(92vh, 900px); display: flex; align-items: stretch; }
.hero-clean .hero-bg::after {
  background: linear-gradient(180deg,
    rgba(8, 15, 28, 0.5) 0%, rgba(8, 15, 28, 0.06) 32%,
    rgba(8, 15, 28, 0.1) 58%, rgba(8, 15, 28, 0.78) 100%);
}
.hero-overlay {
  position: relative; z-index: 2; width: 100%;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem;
  padding: 120px clamp(20px, 4vw, 56px) clamp(30px, 5vh, 54px);
}
.ho-main { max-width: 780px; }
.ho-display {
  font-family: var(--font-display); font-weight: 800; color: #fff;
  font-size: clamp(2.3rem, 5.6vw, 4.4rem); line-height: 1.06; margin-top: 0.9rem;
  text-shadow: 0 4px 30px rgba(4, 9, 18, 0.55);
}
.ho-fade {
  background: linear-gradient(92deg, #fff 0%, var(--amber) 85%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--amber);
}
.ho-social { display: flex; gap: 0.7rem; margin-top: 1.9rem; flex-wrap: wrap; }
.ho-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45); color: #fff;
  background: rgba(8, 15, 28, 0.28); backdrop-filter: blur(4px);
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
}
.ho-social a svg { width: 18px; height: 18px; fill: currentColor; }
.ho-social .ho-line { font-weight: 800; font-size: 0.58rem; letter-spacing: 0.03em; }
.ho-social a:hover { border-color: var(--amber); color: var(--amber); transform: translateY(-3px); }

.ho-side { flex: 0 0 auto; padding-bottom: 0.4rem; }
.ho-label {
  display: block; color: #fff; font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.7rem;
  text-shadow: 0 2px 18px rgba(4, 9, 18, 0.6);
}
.ho-list { list-style: none; margin: 0; padding: 0; }
.ho-list li {
  color: rgba(255, 255, 255, 0.88); font-weight: 600; font-size: 0.92rem;
  line-height: 1.95; text-shadow: 0 2px 14px rgba(4, 9, 18, 0.6);
}
.ho-list li::before { content: "— "; color: var(--amber); }

/* entrance animation (reuses riseIn) */
.ho-display, .ho-social, .ho-side {
  opacity: 0; transform: translateY(34px);
  animation: riseIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.ho-display { animation-delay: 0.3s; }
.ho-social { animation-delay: 0.55s; }
.ho-side { animation-delay: 0.7s; }
@media (prefers-reduced-motion: reduce) {
  .ho-display, .ho-social, .ho-side { animation: none; opacity: 1; transform: none; }
}

/* hero-intro slimmer now that the H1 lives on the video */
.hero-intro { padding: 3.4rem 0 3.4rem; }
.hero-intro .lead { margin-top: 0; }

@media (max-width: 900px) {
  .hero-clean { min-height: 76vh; }
  .hero-overlay { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 1.4rem; padding-top: 100px; }
  .ho-side { display: none; } /* keep the mobile hero clean */
}
@media (max-width: 720px) {
  .hero-clean { min-height: 68vh; }
  .ho-display { font-size: clamp(2rem, 8.5vw, 2.6rem); }
  .ho-social a { width: 42px; height: 42px; }
}


/* ============================================================
   v1.7.2 — minimal header controls (creex-style)
   ============================================================ */

/* logo hugs the corner a little tighter */
.site-header .container { padding: 0 clamp(12px, 1.6vw, 26px); }

/* menu button: just two parallel lines, no box, no label */
.menu-btn { border: 0; background: transparent; padding: 0.5rem; min-height: 0; }
.menu-btn:hover { background: transparent; }
.menu-icon { gap: 7px; }
.menu-icon i { width: 30px; height: 2px; background: #fff; }
.menu-btn:hover .menu-icon i { background: var(--amber); }
body.nav-open .menu-icon i:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
body.nav-open .menu-icon i:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); opacity: 1; }

/* language toggle: minimal text, no pill */
.lang-toggle { border: 0; border-radius: 0; gap: 0.2rem; }
.lang-toggle button {
  background: none; color: rgba(255, 255, 255, 0.55);
  font-size: 0.8rem; letter-spacing: 0.06em; padding: 0.3rem 0.35rem;
  border-bottom: 2px solid transparent; border-radius: 0;
}
.lang-toggle button.on { background: none; color: #fff; border-bottom-color: var(--amber); }
.lang-toggle button:hover { color: var(--amber); }

/* hero service list: two compact columns (11 items) */
.ho-list-2col {
  display: grid; grid-template-columns: repeat(2, auto);
  column-gap: 1.8rem; row-gap: 0.1rem;
}
.ho-list-2col li { line-height: 1.75; font-size: 0.88rem; white-space: nowrap; }

/* keep header controls compact on small screens */
@media (max-width: 640px) {
  .menu-icon i { width: 26px; }
}


/* ---------- v1.7.2: stats as creex-style cards (thin border, line icon, divider) ---------- */
.stats-cards {
  background: none; border: 0; border-radius: 0; overflow: visible;
  gap: 1.1rem; max-width: none;
}
.stats-cards .stat {
  background: rgba(13, 24, 43, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0;
  padding: 1.9rem 1.7rem 1.7rem;
  transition: border-color 0.25s, transform 0.25s;
}
.stats-cards .stat:hover { border-color: var(--amber); transform: translateY(-4px); }
.stat-icon { display: block; color: #fff; margin-bottom: 1.15rem; }
.stat-icon svg {
  width: 27px; height: 27px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.stat-divider { display: block; height: 1px; background: rgba(255, 255, 255, 0.16); margin-bottom: 1.2rem; }
.stats-cards .stat b { margin-bottom: 0.15rem; }
@media (max-width: 720px) {
  .stats-cards { gap: 0.8rem; }
  .stats-cards .stat { padding: 1.3rem 1.1rem 1.1rem; }
}


/* ============================================================
   v1.7.3 — solid frozen header bar, square buttons, mobile hero fixes
   ============================================================ */

/* header: solid bar at all times (Feltech-style), stays frozen on scroll */
.site-header {
  background: rgba(9, 17, 31, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-dark);
}

/* all rounded-rectangle buttons -> sharp rectangles */
.btn, .drawer-close, .menu-btn, .filter-bar button, .stat, .video-frame { border-radius: 0; }

/* hero video: never show the native play button overlay */
.hero-video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.hero-video::-webkit-media-controls { display: none !important; }
.hero-bg.video-blocked video { opacity: 0; transition: opacity 0.4s; }

/* mobile: remove dead space above/below the hero content */
@media (max-width: 720px) {
  .hero-clean { min-height: 62vh; }
  .hero-overlay { padding-top: 84px; padding-bottom: 18px; }
  .hero-intro { padding: 2.2rem 0 2.2rem; }
  .stats-band { padding-bottom: 40px; }
}


/* ============================================================
   v1.7.4 — Our Services heading, visible panel photos, compact panel button
   ============================================================ */

.services-section { padding: 76px 0 0; }
.services-head { margin-bottom: 2.6rem; }
.services-head .h2 { color: #fff; }

/* panel background photos always visible (not only on hover) */
.panel-bg { opacity: 1; transform: scale(1.02); }
.panel:hover .panel-bg { transform: scale(1.06); }
.panel-bg::after { background: linear-gradient(180deg, rgba(9, 17, 31, 0.78), rgba(9, 17, 31, 0.9)); }

/* panel button: small sharp rectangle instead of the full-width slanted band */
.panel .go {
  left: 2.6rem; right: auto; bottom: 2rem;
  clip-path: none; transform: none;
  display: inline-block; width: max-content;
  padding: 0.7rem 1.3rem; font-size: 0.78rem; letter-spacing: 0.12em;
}
.panel:hover .go { transform: none; }
@media (max-width: 900px) {
  .panel { padding-bottom: 5.4rem; }
  .panel .go { left: 1.6rem; bottom: 1.5rem; }
  .panel .tick { left: 1.6rem; }
}

/* smooth-scroll target lands below the fixed header */
#yinrui { scroll-margin-top: 84px; }


/* ============================================================
   v1.7.5 — clickable partner logos -> brand product pages
   ============================================================ */
.brand-card { transition: transform 0.25s, box-shadow 0.25s; }
.brand-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.marquee a { display: inline-flex; }


/* ============================================================
   v1.7.6 — products filter by type AND brand
   ============================================================ */
.filter-group { margin-bottom: 1.4rem; }
.filter-group .filter-bar { margin-bottom: 0; }
.filter-label {
  display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.6rem;
}
.filter-label::before { content: "— "; color: var(--amber); }
.filter-group + .filter-group { margin-bottom: 2.4rem; }


/* ============================================================
   v1.8.0 — Vectr-style white wipe hover on menu links
   (white box sweeps in from the left, text flips dark,
    sweeps out to the right on mouse-leave)
   ============================================================ */

.drawer-links a,
.site-footer .footer-grid ul li a {
  position: relative; z-index: 1; overflow: hidden; display: block;
  transition: color 0.28s ease;
}
.drawer-links a::before,
.site-footer .footer-grid ul li a::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #fff;
  transform: scaleX(0); transform-origin: right center;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.drawer-links a:hover::before,
.site-footer .footer-grid ul li a:hover::before {
  transform: scaleX(1); transform-origin: left center;
}
.drawer-links a:hover,
.site-footer .footer-grid ul li a:hover {
  color: var(--bg);
}

/* drawer specifics: keep spacing, drop old amber hover shift */
.drawer-links a { padding-left: 0.4rem; padding-right: 0.4rem; }
.drawer-links a:hover { padding-left: 0.4rem; }
.drawer-links a.active { color: var(--amber); }
.drawer-links a.active:hover { color: var(--bg); }

/* footer link padding so the white box has some breathing room */
.site-footer .footer-grid ul li a { padding: 0.15rem 0.4rem; margin-left: -0.4rem; width: max-content; }

@media (prefers-reduced-motion: reduce) {
  .drawer-links a::before,
  .site-footer .footer-grid ul li a::before { transition: none; }
}


/* ============================================================
   v1.8.1 — stacked scrolling sections on the landing page
   (hero pins, each following section slides up over the last)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .hero-clean { position: sticky; top: 0; z-index: 1; }
  .hero-intro { position: sticky; top: 0; z-index: 2; }
  .stats-band { position: sticky; top: 0; z-index: 3; }
  .services-section, .hero-product, .front-sections-rest { position: relative; z-index: 4; }

  /* soft edge where a section overlaps the one pinned beneath it */
  .hero-intro, .stats-band, .services-section {
    box-shadow: 0 -26px 60px rgba(4, 9, 18, 0.4);
  }

  /* sections after the stack scroll normally but must cover what is pinned */
  .hero-product ~ section, .hero-product ~ div { position: relative; z-index: 4; }
}


/* ============================================================
   v1.8.3 — product spec table styling
   ============================================================ */
.entry-content .spec-table { width: 100%; border-collapse: collapse; margin: 0.6rem 0 1rem; font-size: 0.92rem; }
.entry-content .spec-table td { border: 1px solid var(--line); padding: 0.55rem 0.85rem; vertical-align: top; }
.entry-content .spec-table td:first-child { background: var(--paper-2); font-weight: 600; width: 42%; }
.entry-content h3 { margin-top: 1.6rem; font-size: 1.05rem; }
.entry-content p { margin-bottom: 0.6rem; }


/* ============================================================
   v1.8.6 — keep footer above the pinned (sticky) landing sections
   ============================================================ */
.site-footer { position: relative; z-index: 6; }
.cta-band, .section-alt, .brand-strip { position: relative; z-index: 5; }


/* ============================================================
   v1.8.7 — contain sticky stack, fix floating buttons, kill overflow
   ============================================================ */

/* the pinned hero/intro/stats only stack inside this zone — nothing
   from the stack can ever show through near the footer again */
.stack-zone { position: relative; }

/* bottom overscroll & any stray page end shows footer navy, not white */
html { background: #081020; }

/* nowrap lists / marquee can never create sideways scroll */
html, body { overflow-x: clip; }

/* floating LINE + call buttons: always pinned to the bottom-right */
.fab-stack { left: auto !important; right: 1.4rem; }
@media (max-width: 720px) { .fab-stack { right: 1rem; } }


/* ============================================================
   v1.8.8 — stacked scrolling for Services -> Yinrui -> Featured
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .stack-zone-2 { position: relative; }
  .stack-zone-2 > section {
    position: sticky;
    top: min(0px, calc(100vh - 100%)); /* tall sections show fully, then pin */
    box-shadow: 0 -26px 60px rgba(4, 9, 18, 0.4);
  }
  .stack-zone-2 > .services-section { z-index: 1; }
  .stack-zone-2 > .hero-product { z-index: 2; }
  .stack-zone-2 > .section-alt { z-index: 3; }
}


/* ============================================================
   Cookie consent bar (v1.9.0)
   Anchored bottom-left so it never covers the floating
   LINE / call buttons on the bottom-right.
   ============================================================ */
.cookie-bar{
  position:fixed; left:1.2rem; bottom:1.2rem; right:auto;
  width:min(420px, calc(100vw - 2.4rem));
  z-index:9998;
  background:var(--bg,#0b1526);
  color:#e8edf5;
  border:1px solid rgba(255,180,0,.35);
  border-top:3px solid var(--amber,#ffb400);
  border-radius:0;
  box-shadow:0 18px 44px rgba(0,0,0,.45);
  opacity:0; transform:translateY(14px);
  transition:opacity .32s ease, transform .32s ease;
}
.cookie-bar.is-in{opacity:1; transform:translateY(0);}
.cookie-bar[hidden]{display:none;}
.cookie-bar-body{padding:1.15rem 1.25rem 1.25rem;}
.cookie-bar h4{
  margin:0 0 .45rem; font-size:1rem; letter-spacing:.01em;
  color:#fff; font-weight:700;
}
.cookie-bar p{
  margin:0 0 1rem; font-size:.855rem; line-height:1.6;
  color:rgba(232,237,245,.82);
}
.cookie-bar p a{color:var(--amber,#ffb400); text-decoration:underline;}
.cookie-bar-actions{display:flex; gap:.6rem; flex-wrap:wrap;}
.cookie-bar .c-btn{
  flex:1 1 auto; white-space:nowrap; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.62rem 1.05rem;
  font-family:var(--font-body); font-size:.78rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
  border-radius:0; border:2px solid var(--amber,#ffb400);
  background:var(--amber,#ffb400); color:#101724;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.cookie-bar .c-btn:hover{background:var(--amber-dark,#e09a00); border-color:var(--amber-dark,#e09a00);}
.cookie-bar .c-btn-alt{
  background:transparent; color:rgba(232,237,245,.9);
  border-color:rgba(255,255,255,.32);
}
.cookie-bar .c-btn-alt:hover{
  background:rgba(255,180,0,.12); color:var(--amber,#ffb400);
  border-color:var(--amber,#ffb400);
}
.cookie-bar .c-btn:focus-visible{outline:2px solid #fff; outline-offset:2px;}
@media (max-width:720px){
  /* clear the floating action buttons on small screens */
  .cookie-bar{left:1rem; right:1rem; bottom:6.2rem; width:auto;}
}
@media (prefers-reduced-motion:reduce){
  .cookie-bar{transition:none; transform:none;}
}


/* ============================================================
   FAQ accordion (v1.9.1) — About page
   ============================================================ */
.faq-list{max-width:920px; margin:0 auto; border-top:1px solid #dfe5ee;}
.faq-item{border-bottom:1px solid #dfe5ee;}
.faq-item summary{
  list-style:none; cursor:pointer; position:relative;
  padding:1.15rem 2.6rem 1.15rem 0;
  font-family:inherit;
  font-size:1.02rem; font-weight:700; color:var(--ink,#101724);
  transition:color .2s ease;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--amber-dark,#e09a00);}
.faq-item summary::after{
  content:""; position:absolute; right:.55rem; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:2px solid var(--amber-dark,#e09a00);
  border-bottom:2px solid var(--amber-dark,#e09a00);
  transform:rotate(45deg); transition:transform .25s ease;
}
.faq-item[open] summary::after{transform:rotate(-135deg); margin-top:-3px;}
.faq-item[open] summary{color:var(--amber-dark,#e09a00);}
.faq-item p{
  margin:0; padding:0 2.6rem 1.35rem 0;
  font-size:.95rem; line-height:1.75; color:var(--ink-muted,#516179);
}
.faq-item summary:focus-visible{outline:2px solid var(--amber,#ffb400); outline-offset:3px;}
@media (max-width:640px){
  .faq-item summary{font-size:.96rem; padding-right:2.2rem;}
  .faq-item p{font-size:.9rem; padding-right:0;}
}

/* ============================================================
   v1.10.0 — IBM Plex Sans Thai
   Plex tops out at 700, so anything previously set to 800 would be
   faux-bolded by the browser. Clamp those to 700 instead.
   ============================================================ */
h1, h2, h3, h4,
.ho-display, .brand-name, .stat b, .cat-tile .num,
.step .n, .tl-item b, .display, .h2 { font-weight: 700; }
body { font-synthesis-weight: none; }

/* ------------------------------------------------------------
   Thai typography rules
   Thai stacks vowel and tone marks above and below the consonant:
   letter-spacing pulls those marks away from their base glyph, and
   uppercase does nothing since Thai has no case. Both are switched
   off whenever the page language is Thai, and headings get the extra
   leading the stacked marks need.
   ------------------------------------------------------------ */
html[lang="th"] :is(h1, h2, h3, h4, .display, .h2, .ho-display, .eyebrow,
                    .btn, .c-btn, .card-tag, .card-link, .ho-label, .ho-line,
                    .stat span, .cat-tile .num, .tl-item b, .badge-years span,
                    summary, .breadcrumb, .footer-bottom, th) {
  letter-spacing: normal;
  text-transform: none;
}
html[lang="th"] :is(h1, h2, h3, h4, .display, .h2, .ho-display) { line-height: 1.35; }
html[lang="th"] :is(p, li, .lead, .faq-item p) { line-height: 1.8; }
html[lang="th"] .spec-table td { line-height: 1.7; }

/* ============================================================
   v1.10.0 — clickable stat cards + anchor offset
   ============================================================ */
a.stat { display: block; text-decoration: none; color: inherit; cursor: pointer; }
a.stat:hover b { color: #ffc633; }
a.stat:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
a.stat::after {
  content: "\2192"; display: inline-block; margin-left: .4rem;
  color: var(--amber); opacity: 0; transform: translateX(-4px);
  transition: opacity .25s ease, transform .25s ease;
  font-size: .8rem; vertical-align: 1px;
}
a.stat:hover::after { opacity: 1; transform: translateX(0); }

/* fixed header would otherwise sit on top of the jumped-to heading */
#timeline, #partners, #yinrui, #how-it-works { scroll-margin-top: 104px; }
@media (max-width: 720px) { #timeline, #partners, #yinrui, #how-it-works { scroll-margin-top: 78px; } }

/* ============================================================
   v1.11.0 — layout corrections
   ============================================================ */

/* Our Services panels sat full-bleed and read as if they ran off the
   page. Inside .container they line up with the Yinrui block below. */
.services-section .container > .panels { border-radius: var(--radius); overflow: hidden; }

/* A .step with no .step-media was being squeezed into the 120px media
   column, which is what wrapped the after-sales copy into a narrow
   left-hand strip. Let a lone block span the whole row. */
.step > div:only-child { grid-column: 1 / -1; }

/* phone numbers, LINE ids and model codes must never break mid-token */
.nowrap { white-space: nowrap; }

@media (max-width: 900px) {
  .panels { grid-template-columns: 1fr; }
  .panel { min-height: 380px; padding: 2.4rem 1.9rem 2.8rem; }
}

/* ============================================================
   v1.12.0 — mask rise reveal for headings (creex-style)
   Text slides up from behind a clipping line instead of fading in.
   The padding/margin pair on .rise-line is deliberate: overflow
   hidden would otherwise shear the Thai tone marks and lower
   vowels that sit outside the Latin em box.
   ============================================================ */
.rise-line {
  display: block;
  overflow: hidden;
  padding: 0.22em 0.06em 0.18em;
  margin: -0.22em -0.06em -0.18em;
}
.rise-line > .rise-i {
  display: block;
  transform: translateY(112%);
  transition: transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--rd, 0s);
  will-change: transform;
}
.rise.in .rise-line > .rise-i { transform: none; }

/* the wrapper's own fade would fight the mask — switch it off */
.section-head.has-rise,
.reveal.has-rise, .reveal-left.has-rise, .reveal-right.has-rise { opacity: 1; transform: none; transition: none; }
.rise.reveal, .rise.section-head { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rise-line > .rise-i { transform: none; transition: none; }
  .rise-line { overflow: visible; }
}

/* ============================================================
   v1.13.0 — engineer team band (After Sales)
   Was a flat JPG with the copy baked in; now real markup so it
   translates, selects, and can be read by search engines.
   ============================================================ */
.eng-band { position: relative; overflow: hidden; }
.eng-band::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: -8%;
  width: 46%; background: rgba(255, 180, 0, 0.05);
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.eng-band > .container { position: relative; z-index: 1; }

.eng-lead { max-width: 640px; }
.eng-lead .h2 { color: #fff; margin-bottom: 1.1rem; }
.eng-sub {
  font-weight: 700; font-size: clamp(1rem, 2vw, 1.24rem);
  color: #fff; padding-bottom: 0.9rem; margin-bottom: 1.1rem;
  border-bottom: 3px solid var(--amber); display: inline-block;
}
.eng-desc { color: var(--muted); max-width: 30rem; margin-bottom: 1.9rem; line-height: 1.85; }

.eng-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; margin-top: 4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 2.6rem;
}
.eng-item { padding: 0 1.7rem; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.eng-item:first-child { border-left: 0; padding-left: 0; }
.eng-ic { display: block; color: var(--amber); margin-bottom: 1rem; }
.eng-ic svg {
  width: 34px; height: 34px; fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.eng-item h3 { color: #fff; font-size: 1rem; margin-bottom: 0.45rem; }
.eng-item p { color: var(--muted); font-size: 0.88rem; line-height: 1.7; }

@media (max-width: 1020px) {
  .eng-grid { grid-template-columns: repeat(2, 1fr); row-gap: 2.4rem; }
  .eng-item:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 620px) {
  .eng-band::before { display: none; }
  .eng-grid { grid-template-columns: 1fr; }
  .eng-item { border-left: 0; padding: 0; }
}