/* ==========================================================================
   Mewah Oils (Tianjin) — public site
   Palette is built from the brand orange sampled off the logo (#F0901A):
   amber for accent and warmth, deep roasted ink for weight, cream and sand
   for the reading surfaces. No web fonts — the type stacks resolve locally so
   the site loads identically inside and outside China.
   ========================================================================== */

:root {
  --amber-200: #ffe0a8;
  --amber-300: #ffc768;
  --amber-400: #f7a93b;
  --amber-500: #f0901a;
  --amber-600: #d2760c;
  --amber-700: #a85c08;
  --amber-800: #7c4306;

  /* The one red on the site, reserved for the 急聘 badge. It has to sit outside
     the amber family to register as urgent rather than as another accent, and
     both stops clear 4.5:1 against the white label they carry. */
  --hot-500: #d92e22;
  --hot-600: #a81109;

  --ink-900: #14100a;
  --ink-850: #191308;
  --ink-800: #201810;
  --ink-700: #2b2218;
  --ink-600: #3a2f21;

  --cream-50: #fdfaf4;
  --cream-100: #f8f2e7;
  --sand-100: #f3ead9;
  --sand-200: #e7dac2;

  --text: #241d14;
  --text-soft: #4c4032;
  --text-muted: #7a6a55;
  --on-ink: #f4ece0;
  --on-ink-soft: rgba(244, 236, 224, 0.72);
  --on-ink-muted: rgba(244, 236, 224, 0.5);

  --line-dark: rgba(36, 29, 20, 0.12);
  --line-dark-strong: rgba(36, 29, 20, 0.2);
  --line-light: rgba(244, 236, 224, 0.14);
  --line-light-strong: rgba(244, 236, 224, 0.26);

  --shell: 1220px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(76px, 9vw, 148px);
  --radius: 6px;
  --radius-lg: 14px;

  /* Header wordmark height. Only the first of these three is editable — 品牌标识
     → 标识高度 overrides it from an inline <style> in the page head; the scrolled
     and narrow-screen sizes are derived from it there, at the ratios below, so
     the shrink-on-scroll step survives whatever height is chosen.

     The header heights follow from the logo rather than being fixed, so a taller
     wordmark grows the bar instead of overflowing it. max() keeps the shipped
     84/68 for every logo up to the default. */
  --brand-logo-h: 34px;
  --brand-logo-h-stuck: 28px;
  --brand-logo-h-sm: 28px;
  /* The footer mark is independent: it sits on a dark ground with no
     shrink-on-scroll behaviour to preserve. */
  --foot-logo-h: 36px;
  --head-h: max(84px, calc(var(--brand-logo-h) + 34px));
  --head-h-stuck: max(68px, calc(var(--brand-logo-h-stuck) + 30px));

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Palatino Linotype", Palatino, Optima, Georgia, "Songti SC", "Source Han Serif SC",
    "Noto Serif SC", SimSun, serif;
  --font-num: "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  /* Every heading that uses --font-display takes its weight from here, so the
     two scripts can carry the weight each reads best at. */
  --display-weight: 400;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-card: 0 1px 2px rgba(36, 29, 20, 0.04), 0 12px 32px -18px rgba(36, 29, 20, 0.28);
  --shadow-lift: 0 2px 4px rgba(36, 29, 20, 0.05), 0 28px 56px -26px rgba(36, 29, 20, 0.42);
}

/* English headings match the Chinese: a semibold sans, set slightly tight.
   The light Palatino they used before read as thin and dated beside the bold
   Chinese headings, and wrapped short card titles onto two lines. Every system
   has a good UI sans, so this needs no web font either. Figures keep the
   Palatino numerals (--font-num) as the one serif accent. */
html[lang^="en"] {
  --font-display: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;
  --display-weight: 600;
}

/* Chinese headings are set bold in a Hei face, as the printed brochure is. A
   Song face was tried first, but Windows ships no display-quality Song — the
   stack fell through to SimSun, whose hairline strokes look dated at headline
   sizes. Every desktop and phone has a good Hei face, so this renders the same
   everywhere without a web font. */
html[lang^="zh"] {
  --font-display: "PingFang SC", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei",
    "Hiragino Sans GB", sans-serif;
  --display-weight: 700;

  /* Intro measure counted in characters, since a Chinese glyph is one em wide.
     40 lands inside the comfortable 35–45 band; the `ch` value these rules fall
     back to for Latin would only reach about 31 here. See .section-intro.

     Only the intros are re-measured. The longer bodies — .faq-a p,
     .article-body, .answer-lead — already sit near 39 characters a line in
     Chinese, and widening them would push past a comfortable measure rather
     than toward one. */
  --intro-measure: 40em;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets must clear the fixed header, which is now logo-sized. */
  scroll-padding-top: calc(var(--head-h, 84px) + 12px);
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--cream-50);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: 0.01em;
}

p {
  margin: 0;
}

ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--amber-500);
  outline-offset: 3px;
}

::selection {
  background: var(--amber-200);
  color: var(--ink-900);
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--ink-900);
  color: var(--on-ink);
  border-radius: var(--radius);
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.icon {
  width: 1.4em;
  height: 1.4em;
  flex: none;
}

/* ------------------------------------------------------------------ type */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  margin-bottom: 1.1rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--amber-600);
}

.kicker::before {
  content: "";
  width: clamp(28px, 4vw, 52px);
  height: 1px;
  background: linear-gradient(90deg, var(--amber-500), transparent);
}

.section-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.75rem, 3.3vw, 2.85rem);
  line-height: 1.3;
  letter-spacing: 0.005em;
  max-width: 22em;
  text-wrap: balance;
}

html[lang^="zh"] .section-title {
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  letter-spacing: 0.04em;
}

/* "A · B": the second phrase in the accent colour, as in the brochure. */
.t-sep {
  color: var(--amber-500);
  font-weight: 400;
}

.t-accent {
  color: var(--amber-600);
}

.section-ink .t-accent,
.hero .t-accent {
  color: var(--amber-400);
}

/* A short gold rule draws in under a section title once it scrolls into view.
   Without the reveal class (or with reduced motion) it is simply there. */
.section-head .section-title::after,
.split-head .section-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 0.55em;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--amber-500), var(--amber-300));
  transform-origin: left;
  transition: transform 0.9s var(--ease-out) 0.25s;
}

.section-head.reveal:not(.is-in) .section-title::after,
.split-head.reveal:not(.is-in) .section-title::after {
  transform: scaleX(0);
}

/*
 * Reading measure for the paragraph under a section title.
 *
 * `ch` is the width of the "0" glyph, so `62ch` holds roughly 62 Latin
 * characters — the measure it was picked for. A Chinese glyph is about twice as
 * wide, so the same declaration holds only about 31, which reads cramped and
 * leaves half the row empty above the full-width grid that follows. Chinese
 * wants 35–45 characters to a line, so the measure is set per locale in the
 * override below rather than once for both.
 */
.section-intro {
  margin-top: 1.5rem;
  max-width: var(--intro-measure, 62ch);
  font-size: clamp(0.97rem, 1.1vw, 1.06rem);
  color: var(--text-soft);
}

.section-head {
  margin-bottom: clamp(40px, 5vw, 72px);
}

.subhead {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  margin-bottom: 2rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line-dark);
}

.eyebrow-sm {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--amber-500);
  margin-bottom: 1.4rem;
}

.prose {
  color: var(--text-soft);
  font-size: clamp(0.97rem, 1.05vw, 1.04rem);
}

.prose + .prose {
  margin-top: 1.4rem;
}

/* --------------------------------------------------------------- buttons */

.btn {
  --btn-fg: var(--ink-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  padding: 0.95em 1.9em;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--btn-fg);
  white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.btn-icon {
  width: 1.05em;
  height: 1.05em;
  transition: transform 0.25s var(--ease);
}

.btn:hover .btn-icon {
  transform: translateX(4px);
}

.btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, var(--amber-400), var(--amber-500) 55%, var(--amber-600));
  box-shadow: 0 10px 26px -12px rgba(168, 92, 8, 0.75);
}

/* A band of light that crosses the button on hover. */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 246, 228, 0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.8s var(--ease-out);
}

.btn-primary:hover::after {
  transform: translateX(120%);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -14px rgba(168, 92, 8, 0.85);
}

.btn-line {
  color: var(--on-ink);
  border: 1px solid var(--line-light-strong);
}

.btn-line:hover {
  border-color: var(--amber-500);
  color: var(--amber-300);
}

.btn-ghost {
  border: 1px solid var(--line-light-strong);
  color: var(--on-ink);
}

.btn-ghost:hover {
  border-color: var(--amber-500);
  color: var(--amber-300);
}

.btn-sm {
  padding: 0.7em 1.35em;
  font-size: 0.82rem;
}

.btn-block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.55;
  pointer-events: none;
}

/* ---------------------------------------------------------------- header */

.site-head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
    backdrop-filter 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}

.site-head.is-stuck {
  background: rgba(20, 16, 10, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-light);
}

.head-inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  height: var(--head-h, 84px);
  transition: height 0.35s var(--ease);
}

.site-head.is-stuck .head-inner {
  height: var(--head-h-stuck, 68px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  /* Must be shrinkable: a non-shrinking brand block widens the whole document
     on narrow screens, which pushes every section off-screen horizontally. */
  flex: 0 1 auto;
  min-width: 0;
}

.brand-logo {
  width: auto;
  height: var(--brand-logo-h, 34px);
  transition: height 0.35s var(--ease);
}

.site-head.is-stuck .brand-logo {
  height: var(--brand-logo-h-stuck, 28px);
}

.brand-divider {
  width: 1px;
  height: 26px;
  background: var(--line-light-strong);
}

.brand-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--on-ink);
}

.brand-name,
.brand-latin {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.2;
}

.brand-latin {
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  color: var(--on-ink-muted);
  text-transform: uppercase;
}

.site-nav {
  margin-inline-start: auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 26px);
}

.nav-link {
  position: relative;
  display: block;
  padding: 6px 0;
  font-size: 0.88rem;
  /* Seven items sit in this bar; wrapping breaks them mid-word. */
  white-space: nowrap;
  color: var(--on-ink-soft);
  transition: color 0.25s var(--ease);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--amber-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--on-ink);
}

.nav-link:hover::after,
.nav-link.is-active::after {
  transform: scaleX(1);
}

.head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.lang-switch {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-light-strong);
  border-radius: 999px;
  padding: 3px;
}

.lang-btn {
  display: inline-block;
  min-width: 34px;
  text-align: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--on-ink-muted);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.lang-btn:hover {
  color: var(--on-ink);
}

.lang-btn.is-on {
  background: var(--amber-500);
  color: var(--ink-900);
}

.burger {
  display: none;
  width: 42px;
  height: 42px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line-light-strong);
  border-radius: var(--radius);
}

.burger span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--on-ink);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: var(--head-h, 84px) 0 0;
  z-index: 99;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 32px var(--gutter) 48px;
  background: rgba(20, 16, 10, 0.97);
  backdrop-filter: blur(16px);
  overflow-y: auto;
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav ul {
  display: grid;
  margin-bottom: 24px;
}

.mobile-nav a.nav-link {
  padding: 18px 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--on-ink);
  border-bottom: 1px solid var(--line-light);
}

.mobile-nav a.nav-link::after {
  display: none;
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  display: grid;
  align-content: center;
  gap: clamp(40px, 5vw, 68px);
  min-height: min(100svh, 940px);
  padding: clamp(128px, 15vh, 176px) 0 clamp(72px, 9vh, 108px);
  background: var(--ink-900);
  color: var(--on-ink);
  overflow: hidden;
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero-glow {
  position: absolute;
  top: -22%;
  right: -12%;
  width: min(880px, 92vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(240, 144, 26, 0.3),
    rgba(240, 144, 26, 0.1) 42%,
    transparent 68%
  );
  filter: blur(12px);
  animation: glow-breathe 9s ease-in-out infinite;
}

@keyframes glow-breathe {
  50% {
    opacity: 0.7;
    scale: 1.06;
  }
}

.hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: linear-gradient(var(--line-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-light) 1px, transparent 1px);
  background-size: clamp(64px, 8vw, 104px) clamp(64px, 8vw, 104px);
  mask-image: radial-gradient(ellipse 90% 70% at 30% 40%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 30% 40%, #000 25%, transparent 78%);
}

.hero-inner {
  display: grid;
  /* Copy column sized so the Chinese headline fits on one line — a single
     orphaned character reads as a mistake in a display serif. */
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.7fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.hero-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--amber-400);
}

.hero-title {
  margin-top: 1.6rem;
  display: grid;
  gap: 0.2em;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: 1.14;
  text-wrap: balance;
}

.hero-title-lead {
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  color: var(--on-ink-soft);
  letter-spacing: 0.06em;
}

.hero-title-main {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  padding-bottom: 0.08em;
  color: var(--amber-400);
}

/* In Chinese the two lines are a short pair (烘焙油脂 / 专业服务商), so both
   are set large, the first in cream and the second in gold, as on the
   brochure cover. */
html[lang^="zh"] .hero-title-lead {
  font-size: clamp(2.2rem, 4.6vw, 3.7rem);
  color: var(--on-ink);
  letter-spacing: 0.08em;
}

html[lang^="zh"] .hero-title-main {
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  letter-spacing: 0.08em;
}

/* Gradient wordmark where it is supported; a solid amber fallback where not,
   so the headline can never render as invisible transparent text. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero-title-main {
    background: linear-gradient(100deg, var(--amber-200), var(--amber-400) 42%, var(--amber-600));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.hero-lead {
  margin-top: 1.8rem;
  max-width: min(100%, 30em);
  text-wrap: pretty;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--on-ink);
}

.hero-desc {
  margin-top: 0.7rem;
  max-width: min(100%, 32em);
  text-wrap: pretty;
  color: var(--on-ink-muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 2.4rem;
}

.hero-notes {
  display: grid;
  gap: 0.6rem;
  margin-top: 2.4rem;
}

.hero-notes li {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  font-size: 0.88rem;
  color: var(--on-ink-muted);
}

.note-icon {
  width: 1em;
  height: 1em;
  margin-top: 0.42em;
  color: var(--amber-500);
}

.hero-aside {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  justify-items: center;
}

.hero-location {
  width: 100%;
  max-width: 320px;
  padding: 20px 22px;
  border: 1px solid var(--line-light);
  border-left: 2px solid var(--amber-500);
  background: rgba(244, 236, 224, 0.03);
  border-radius: var(--radius);
}

.hero-location-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--amber-400);
  margin-bottom: 0.5rem;
}

.hero-location-value {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--on-ink-soft);
}

/* ------------------------------------------------------------ showcase */

/* The display stand: products on a turning ring over a lit podium. Layout is
   all CSS — each card is turned to its place on the ring by --k of --n and
   pushed out by --r; site.js sets --r from the card width and turns the
   ring through --angle. */
.hero-inner:has(.hero-aside.has-showcase) {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.hero-aside.has-showcase {
  justify-items: center;
  gap: clamp(14px, 2vw, 24px);
}

/* --stage-scale comes from Hero → 舞台大小 as an inline style; 1 is the
   shipped stand. Everything else is sized from --card-w, so scaling the card
   scales the ring, the podium and the emblem with it. */
.showcase {
  --stage-scale: 1;
  --card-w: clamp(calc(180px * var(--stage-scale)), calc(16vw * var(--stage-scale)), calc(236px * var(--stage-scale)));
  --r: 260px;
  --angle: 0deg;
  position: relative;
  width: min(100%, calc(520px * var(--stage-scale)));
  outline: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* Vertical swipes still scroll the page; horizontal ones turn the stand. */
  touch-action: pan-y;
}

.showcase.is-dragging {
  cursor: grabbing;
}

.showcase:focus-visible .podium-top {
  box-shadow: 0 0 0 2px var(--amber-400), 0 0 40px rgba(240, 144, 26, 0.35);
}

/* A soft cone of light falling on the stand from above. */
.showcase-beam {
  position: absolute;
  top: -14%;
  left: 50%;
  width: 78%;
  height: 92%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 220, 160, 0.2), rgba(255, 200, 120, 0.05) 70%, transparent);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  filter: blur(18px);
  opacity: 0.8;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 38%);
  mask-image: linear-gradient(180deg, transparent, #000 38%);
  pointer-events: none;
  animation: beam-breathe 7s ease-in-out infinite;
}

@keyframes beam-breathe {
  50% {
    opacity: 0.5;
  }
}

.showcase-stage {
  position: relative;
  z-index: 1;
  height: calc(var(--card-w) * 1.18);
  perspective: 900px;
  perspective-origin: 50% 12%;
}

.showcase-ring {
  position: absolute;
  top: 6%;
  left: 50%;
  width: var(--card-w);
  height: calc(var(--card-w) * 0.8);
  margin-left: calc(var(--card-w) / -2);
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--r) * -1)) rotateX(-4deg) rotateY(var(--angle));
}

.showcase-item {
  position: absolute;
  inset: 0;
  margin: 0;
  transform: rotateY(calc(var(--k) * 360deg / var(--n))) translateZ(var(--r));
  transition: opacity 0.25s linear;
}

/* Before the script measures the ring, show only the front product, so a
   slow load never flashes a stack of overlapping cards. */
.showcase:not(.is-live) .showcase-item:not([data-k="0"]) {
  opacity: 0;
}

.showcase-card {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ink-800);
  border: 1px solid rgba(255, 199, 104, 0.2);
  box-shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.9);
  animation: card-float 6s ease-in-out infinite;
  animation-delay: calc(var(--k) * -1.3s);
  -webkit-box-reflect: below 14px linear-gradient(transparent 64%, rgba(255, 255, 255, 0.2));
  transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.showcase-item.is-front .showcase-card {
  border-color: rgba(255, 199, 104, 0.75);
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.9), 0 0 36px -6px rgba(240, 144, 26, 0.55);
}

@keyframes card-float {
  50% {
    transform: translateY(-8px);
  }
}

.showcase-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* The podium: a lit disc with a dark rim beneath it for thickness, a pool of
   light around it, and a gold highlight sweeping round its edge. */
.showcase-podium {
  position: relative;
  width: 88%;
  aspect-ratio: 5 / 1;
  margin: calc(var(--card-w) * -0.34) auto 0;
}

.podium-glow {
  position: absolute;
  inset: -60% -18%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(240, 144, 26, 0.32), transparent 62%);
  filter: blur(14px);
}

.podium-top {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 38%, rgba(255, 214, 150, 0.42), rgba(168, 92, 8, 0.35) 46%, rgba(20, 16, 10, 0.95) 74%);
  border: 1px solid rgba(255, 199, 104, 0.5);
  box-shadow: 0 0 40px rgba(240, 144, 26, 0.3), inset 0 -10px 24px rgba(0, 0, 0, 0.55);
}

.podium-top::before {
  content: "";
  position: absolute;
  inset: 16% -0.5% -18%;
  z-index: -1;
  border-radius: 50%;
  background: linear-gradient(180deg, #4a3417, #120d07 70%);
  box-shadow: 0 24px 40px -10px rgba(0, 0, 0, 0.8);
}

@property --sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.podium-orbit {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(from var(--sweep), transparent 0 72%, rgba(255, 226, 170, 0.95) 86%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: podium-sweep 5s linear infinite;
}

@keyframes podium-sweep {
  to {
    --sweep: 360deg;
  }
}

/* The brand emblem inlaid in the podium: laid flat by tilting it back in
   perspective to the same angle the disc is seen at, lit gold, and breathing
   slowly. It sits at the exact centre of the disc, sized so the front
   product's base stops short of it. */
.podium-emblem {
  position: absolute;
  z-index: 2; /* over the front product's reflection */
  left: 50%;
  /* 46%, not 50%: tilting it back draws the near half larger than the far
     half, which drops its visual centre below the box's. This puts the
     emblem's visible middle on the disc's middle. */
  top: 46%;
  width: 24%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) perspective(320px) rotateX(58deg);
  pointer-events: none;
}

.podium-emblem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255, 190, 90, 0.75)) drop-shadow(0 0 18px rgba(240, 144, 26, 0.45));
  opacity: 0.92;
  animation: emblem-glow 4.5s ease-in-out infinite;
}

@keyframes emblem-glow {
  50% {
    opacity: 0.7;
    filter: drop-shadow(0 0 3px rgba(255, 190, 90, 0.5)) drop-shadow(0 0 10px rgba(240, 144, 26, 0.3));
  }
}

/* Upright mode needs headroom above the ring for the emblem to rise into.
   The ring, the vanishing point and the gap down to the podium keep the same
   distances from one another as the shipped stand; only the top grows. */
.showcase.is-upright .showcase-stage {
  height: calc(var(--card-w) * 1.5);
  perspective-origin: 50% 31%;
  /* A larger (垂直徽标大小) or raised (垂直徽标上下位置) emblem reaches above the
     shipped headroom; the extra goes on as a top margin so the ring, the
     vanishing point and the podium inside the stage stay where they are.
     0.78 is the perspective's shrink at the ring's centre (900 / (900 + 260)),
     so the margin matches how far the emblem rises on screen. */
  margin-top: calc(var(--card-w) * max(0, (var(--emblem-h, 1) - 1 + var(--emblem-y, 0)) * 0.78));
}

.showcase.is-upright .showcase-ring {
  top: 26%;
}

/* The upright emblem (Hero → 徽标摆放方式 → 垂直): it stands at the centre of
   the ring, inside the ring's 3D space so the front product passes in front
   of it and the back ones behind, and turns against the ring so it always
   faces the viewer. It stands tall enough to rise over the front product.
   --emblem-h (垂直徽标大小) and --emblem-y (垂直徽标上下位置, in card widths,
   up is positive) come from Hero as inline styles; 1 and 0 are the shipped
   stand. Raised about half a card width, its base clears the front product. */
.ring-emblem {
  position: absolute;
  left: 50%;
  bottom: calc(52% + var(--emblem-y, 0) * var(--card-w));
  width: calc(var(--emblem-h, 1) * 100%);
  aspect-ratio: 1;
  transform: translateX(-50%) rotateY(calc(var(--angle) * -1));
  pointer-events: none;
}

.ring-emblem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255, 190, 90, 0.6)) drop-shadow(0 14px 22px rgba(0, 0, 0, 0.6));
}

/* An optional disc behind the emblem (徽标背景颜色 / 大小): a circle centred on
   it, --emblem-bg-size times its width. On the podium it is tilted with the
   emblem, so it reads as a coloured inlay. */
.podium-emblem.has-bg::before,
.ring-emblem.has-bg::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: calc(var(--emblem-bg-size, 1.3) * 100%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--emblem-bg);
  box-shadow: 0 0 24px -4px rgba(240, 144, 26, 0.45);
}

.podium-emblem.has-bg,
.ring-emblem.has-bg {
  isolation: isolate;
}

.showcase-meta {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: clamp(16px, 2vw, 24px);
  text-align: center;
}

/* Every name is in the markup; the front product's is the one shown. */
.showcase-names {
  display: grid;
  min-height: 1.6em;
}

.showcase-name {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  letter-spacing: 0.04em;
  color: var(--on-ink);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out), color 0.25s var(--ease);
}

.showcase-name.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

a.showcase-name:hover {
  color: var(--amber-300);
}

a.showcase-name .btn-icon {
  color: var(--amber-400);
}

a.showcase-name:hover .btn-icon {
  transform: translateX(4px);
}

.showcase-dots {
  display: flex;
  gap: 8px;
}

.showcase-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 999px;
  background: var(--line-light-strong);
  transition: width 0.4s var(--ease-out), background 0.3s var(--ease);
}

.showcase-dot:hover {
  background: var(--amber-300);
}

.showcase-dot.is-active {
  width: 24px;
  background: var(--amber-500);
}

.showcase-dot:focus-visible {
  outline: 2px solid var(--amber-300);
  outline-offset: 3px;
}

.showcase-hint {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--on-ink-muted);
}

.hero-aside.has-showcase .hero-location {
  max-width: 420px;
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .showcase-card,
  .showcase-beam,
  .podium-orbit,
  .podium-emblem img {
    animation: none;
  }
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(var(--amber-500), transparent);
}

/* ----------------------------------------------------------- stat strips */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line-light);
  border-block: 1px solid var(--line-light);
}

.stat {
  display: grid;
  gap: 0.45rem;
  padding: clamp(22px, 3vw, 34px) clamp(16px, 2.4vw, 30px);
  background: var(--ink-900);
}

.stat-value {
  font-family: var(--font-num);
  font-size: clamp(1.5rem, 2.9vw, 2.3rem);
  line-height: 1.1;
  color: var(--amber-400);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  color: var(--on-ink-muted);
}

/* Number large, unit small and gold, never broken across lines — "450万吨+"
   used to wrap as 450万 / 吨+ in a narrow column. */
.stat-value {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 0.12em;
  white-space: nowrap;
}

.stat-num {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.stat-num.is-word {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 0.86em;
  letter-spacing: 0.02em;
}

.stat-unit {
  font-family: var(--font-sans);
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--amber-500);
}

.stat-strip-cream .stat-unit {
  color: var(--amber-600);
}

.stat-n6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Over the hero the strip is drawn with hairline rules rather than a filled
   grid, so the ink background and its glow stay visible through it. */
.hero-stats {
  background: transparent;
  gap: 0;
}

.hero-stats .stat {
  background: transparent;
  border-left: 1px solid var(--line-light);
}

.hero-stats .stat:first-child {
  border-left: 0;
  padding-inline-start: 0;
}

.stat-strip-ink {
  margin-bottom: clamp(44px, 5vw, 72px);
  background: var(--line-light);
}

.stat-strip-ink .stat {
  background: var(--ink-900);
}

.stat-strip-cream {
  margin: clamp(48px, 6vw, 84px) 0;
  background: var(--line-dark);
  border-block-color: var(--line-dark);
}

.stat-strip-cream .stat {
  background: var(--cream-50);
}

.stat-strip-cream .stat-value {
  color: var(--amber-700);
}

.stat-strip-cream .stat-label {
  color: var(--text-muted);
}

/* -------------------------------------------------------------- sections */

.section {
  position: relative;
  padding: var(--section-y) 0;
  overflow: hidden;
}

.section-cream {
  background: var(--cream-50);
}

.section-sand {
  background: linear-gradient(180deg, var(--sand-100), var(--cream-100));
}

.section-ink {
  background: var(--ink-900);
  color: var(--on-ink);
}

/* Two ink sections in a row stack their padding into a dead band with no
   visual break. A hairline plus reduced top padding reads as one continuous
   dark passage with a deliberate divider. Applies however sections are
   reordered in the backend. */
.section-ink + .section-ink {
  padding-top: clamp(40px, 5vw, 76px);
  border-top: 1px solid var(--line-light);
}

.section-ink .section-title {
  color: var(--on-ink);
}

.section-ink .section-intro {
  color: var(--on-ink-muted);
}

.section-ink .kicker {
  color: var(--amber-400);
}

.ink-glow {
  position: absolute;
  top: -30%;
  left: -14%;
  width: min(720px, 80vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 144, 26, 0.16), transparent 66%);
  pointer-events: none;
}

.ink-glow-right {
  left: auto;
  right: -14%;
  top: auto;
  bottom: -30%;
}

.subhead-ink {
  color: var(--on-ink);
  border-bottom-color: var(--line-light);
}

/* ------------------------------------------------------------- group film */

/* The film opens The Group full-bleed, so the section's own top padding would
   only push it down the screen. `.section` has no inline padding — that lives
   on `.shell` — so the band is already edge to edge. */
.section.has-film {
  padding-top: 0;
}

.film-band {
  position: relative;
  height: 100vh;
  min-height: 460px;
  margin-bottom: var(--section-y);
  overflow: hidden;
  background: var(--ink-900);
}

/* svh tracks the viewport that mobile browser chrome leaves behind, so the
   band is one screen rather than one screen plus a scroll. */
@supports (height: 100svh) {
  .film-band {
    height: 100svh;
  }
}

/* Every page fills the band; only the active one is visible. A single page
   is simply always active, so the one-film band looks as it always did. */
.film-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s var(--ease), visibility 0s linear 0.9s;
}

.film-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s var(--ease), visibility 0s;
}

.film-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.film-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 10, 0.55) 0%, rgba(20, 16, 10, 0.25) 42%, rgba(20, 16, 10, 0.9) 100%);
}

.film-copy {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(48px, 8vh, 108px);
  transition: opacity 0.3s var(--ease);
}

.film-eyebrow {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--amber-400);
  margin-bottom: 0.8rem;
}

.film-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.9rem, 5vw, 3.6rem);
  line-height: 1.1;
  color: var(--on-ink);
  margin-bottom: 0.7rem;
}

.film-subtitle {
  max-width: 46ch;
  color: var(--on-ink-muted);
  font-size: clamp(0.95rem, 1.4vw, 1.08rem);
  line-height: 1.65;
}

.film-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: clamp(24px, 3.4vh, 40px);
}

.film-play {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 26px 12px 14px;
  border-radius: 999px;
  color: var(--ink-900);
  background: var(--amber-500);
  font-weight: 600;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.film-play:hover,
.film-play:focus-visible {
  background: var(--amber-400);
  transform: translateY(-2px);
}

/* Second and later buttons — another language cut, say — sit beside the
   primary one without competing with it. */
.film-play.is-alt {
  color: var(--on-ink);
  background: rgba(20, 16, 10, 0.4);
  box-shadow: inset 0 0 0 1px var(--line-light-strong);
}

.film-play.is-alt:hover,
.film-play.is-alt:focus-visible {
  color: var(--ink-900);
  background: var(--amber-400);
}

.film-play-icon {
  width: 22px;
  height: 22px;
  margin-inline-start: 6px;
}

.film-play-ring {
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(240, 144, 26, 0.55);
  border-radius: 999px;
  animation: pulse 2.6s ease-out infinite;
}

.film-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  object-fit: contain;
}

/* In real full screen the band must fill the screen, not one viewport height
   plus the margin it carries in the page. Kept as two rules: one unsupported
   selector would invalidate a combined list. */
.film-band:fullscreen {
  height: 100%;
  min-height: 0;
  margin-bottom: 0;
}

.film-band:-webkit-full-screen {
  height: 100%;
  min-height: 0;
  margin-bottom: 0;
}

/* Arrows and dots, bottom centre: the right-hand corner belongs to the
   floating chat launcher and back-to-top button. */
.film-nav {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 4vh, 44px);
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: opacity 0.3s var(--ease);
}

.film-arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--on-ink);
  background: rgba(20, 16, 10, 0.45);
  border: 1px solid var(--line-light-strong);
  transition: background 0.25s var(--ease);
}

.film-arrow:hover,
.film-arrow:focus-visible {
  background: rgba(20, 16, 10, 0.85);
}

.film-arrow svg {
  width: 20px;
  height: 20px;
}

.film-dots {
  display: flex;
  gap: 4px;
}

/* A 24px target around an 8px mark. */
.film-dot {
  position: relative;
  width: 24px;
  height: 24px;
}

.film-dot::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 999px;
  background: var(--on-ink-muted);
  opacity: 0.6;
  transition: background 0.3s var(--ease), opacity 0.3s var(--ease), inset 0.3s var(--ease);
}

.film-dot.is-active::after {
  inset: 8px 2px;
  background: var(--amber-500);
  opacity: 1;
}

/* The copy sits above the arrows on a phone rather than beside them. */
@media (max-width: 640px) {
  .film-band.is-carousel .film-copy {
    padding-bottom: 96px;
  }

  .film-nav {
    left: var(--gutter);
    transform: none;
  }
}

.film-band.is-playing .film-nav,
.film-band.is-playing .film-poster,
.film-band.is-playing .film-shade,
.film-band.is-playing .film-copy {
  opacity: 0;
  pointer-events: none;
}

.film-close {
  position: absolute;
  top: clamp(16px, 2.4vw, 28px);
  right: clamp(16px, 2.4vw, 28px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--on-ink);
  background: rgba(20, 16, 10, 0.62);
  border: 1px solid var(--line-light-strong);
  transition: background 0.25s var(--ease);
}

.film-close:hover,
.film-close:focus-visible {
  background: rgba(20, 16, 10, 0.9);
}

.film-close svg {
  width: 20px;
  height: 20px;
}

.film-error {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  margin: 0;
  padding: 1em 1.2em;
  font-size: 0.85rem;
  color: var(--on-ink);
  background: rgba(140, 39, 17, 0.92);
}

/* Motion here is the pulse and the crossfade between pages; with reduced
   motion the pages still turn, but cut rather than fade. */
@media (prefers-reduced-motion: reduce) {
  .film-play-ring {
    animation: none;
  }

  .film-slide,
  .film-slide.is-active {
    transition: none;
  }
}

/* ----------------------------------------------------------------- about */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

/* In the narrow heading column a "A · B" title breaks wherever it runs out of
   room, splitting the gold phrase across lines. Give the phrase its own line
   instead and drop the separator, which no longer separates anything. */
.split-head .t-sep {
  display: none;
}

.split-head .t-accent {
  display: block;
}

/* Sized to the heading column, so the gold line — eleven characters in the
   shipped title — sits on one line rather than breaking mid-word. */
html[lang^="zh"] .split-head .section-title {
  font-size: clamp(1.6rem, 2.55vw, 2.3rem);
}

/* The story column opens with a standfirst: the first paragraph a size up and
   in the full text colour, the rest in the softer body tone. A hairline gold
   rule ties it to the heading across the gap. */
.split-body {
  padding-top: clamp(34px, 3.4vw, 46px);
}

.split-body .prose {
  line-height: 1.95;
}

.split-body .prose:first-child {
  position: relative;
  font-size: clamp(1.06rem, 1.3vw, 1.18rem);
  line-height: 1.9;
  color: var(--text);
}

.split-body .prose:first-child::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin-bottom: 1.4rem;
  background: var(--amber-500);
}

.split-body .prose + .prose {
  margin-top: 1.3rem;
}

/* Chinese reads tidiest set flush on both sides; English gets hyphenation and
   balanced last lines instead, since justified English opens rivers. */
html[lang^="zh"] .split-body .prose,
html[lang^="zh"] .split-head .answer-lead {
  text-align: justify;
  text-justify: inter-ideograph;
}

html[lang^="en"] .split-body .prose,
html[lang^="en"] .split-head .answer-lead {
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}

.timeline {
  display: grid;
  gap: 0;
  border-left: 1px solid var(--line-dark);
}

.milestone {
  position: relative;
  display: grid;
  grid-template-columns: clamp(80px, 12vw, 132px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  align-items: baseline;
  padding: clamp(20px, 2.6vw, 30px) 0 clamp(20px, 2.6vw, 30px) clamp(24px, 3vw, 44px);
  border-bottom: 1px solid var(--line-dark);
}

.milestone:last-child {
  border-bottom: 0;
}

.milestone-dot {
  position: absolute;
  left: -4.5px;
  top: calc(clamp(20px, 2.6vw, 30px) + 0.7em);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber-500);
  box-shadow: 0 0 0 4px var(--cream-50);
}

.milestone-year {
  font-family: var(--font-num);
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  color: var(--amber-700);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.milestone-text {
  color: var(--text-soft);
  font-size: 0.97rem;
}

.milestone-year {
  font-weight: 600;
}

/* The dot rings outward once as its milestone scrolls in. */
.milestone.is-in .milestone-dot {
  animation: dot-ping 1.2s var(--ease-out) 0.2s;
}

@keyframes dot-ping {
  from {
    box-shadow: 0 0 0 4px var(--cream-50), 0 0 0 4px rgba(240, 144, 26, 0.6);
  }
  to {
    box-shadow: 0 0 0 4px var(--cream-50), 0 0 0 16px rgba(240, 144, 26, 0);
  }
}

.world-map {
  margin: clamp(36px, 4vw, 56px) 0 0;
  padding: clamp(14px, 2vw, 24px);
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.world-map img {
  width: 100%;
  border-radius: calc(var(--radius-lg) - 6px);
}

/* ---------------------------------------------- vision, mission and values */

/* Sits under the timeline in The Group, which is on --cream-50. */
.ethos-block {
  margin-top: clamp(52px, 6.5vw, 92px);
}

.ethos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}

/* Only when values follow, so an ethos-only block has no trailing gap. */
.ethos-grid:not(:last-child) {
  margin-bottom: clamp(44px, 5.5vw, 76px);
}

.ethos-card {
  position: relative;
  padding: clamp(24px, 2.9vw, 34px);
  background: linear-gradient(160deg, var(--cream-100), var(--cream-50) 62%);
  border: 1px solid var(--line-dark);
  /* The amber edge ties the block to the timeline dots above without competing
     with them. */
  border-top: 2px solid var(--amber-500);
  border-radius: var(--radius);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}

@media (hover: hover) {
  .ethos-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -28px rgba(36, 29, 20, 0.45);
  }
}

.ethos-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.05rem;
}

/*
 * The icon badge. A ring rather than a filled disc: the cards sit on cream and
 * a solid amber circle would out-shout the statement, which is the thing worth
 * reading.
 */
.ethos-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: var(--amber-600);
  background: var(--cream-50);
  border: 1px solid var(--amber-200);
  box-shadow: inset 0 0 0 4px rgba(240, 144, 26, 0.07);
}

.ethos-badge .icon {
  width: 22px;
  height: 22px;
}

.ethos-label {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.08rem, 1.6vw, 1.3rem);
  /* The head is a flex row, so the heading's own margin would offset it from
     the badge it is aligned with. */
  margin: 0;
}

.ethos-text {
  color: var(--text-soft);
  font-size: 0.97rem;
  line-height: 1.75;
}

/*
 * The five initials spell MEWAH. Each value is its word alone, left aligned,
 * with the capital first letter set larger and in amber, so the row reads
 * across as the company name without a separate "M" before "Motivation".
 *
 * A one-pixel gap over a dark background draws the dividing rules, so the row
 * reads as one object however many values there are and however they wrap.
 */
.value-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 176px), 1fr));
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  overflow: hidden;
}

.value {
  position: relative;
  display: grid;
  gap: 0.85rem;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--cream-50);
  overflow: hidden;
  transition: background 0.35s var(--ease);
}

@media (hover: hover) {
  .value:hover {
    background: var(--cream-100);
  }
}

.value-body {
  display: grid;
  justify-items: start;
  gap: 0.24rem;
  min-width: 0;
  text-align: left;
}

.value-word {
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/*
 * The capital that spells out MEWAH down the row, in the logo amber.
 * --value-cap comes from About → 价值观首字母大小 as an inline style.
 *
 * Inline-block so it can be transformed as it arrives; it still sits on the
 * word's baseline. The fill is the gradient down the logo's amber ramp,
 * painted through the glyph, resting on amber-500 — and the plain amber where
 * the glyph cannot be a clipping path.
 */
.value-cap {
  display: inline-block;
  font-family: var(--font-display);
  font-size: calc(var(--value-cap, 1.6) * 1em);
  line-height: 1;
  color: var(--amber-500);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .value-cap {
    background-image: linear-gradient(
      100deg,
      var(--amber-300) 0%,
      var(--amber-400) 30%,
      var(--amber-500) 58%,
      var(--amber-400) 78%,
      var(--amber-300) 100%
    );
    background-size: 220% 100%;
    background-position: 100% 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/*
 * The capital arrives after its cell has slid in: it drops into place out of
 * a blur, a little oversized, while the amber is poured across the glyph.
 * Staggered by column so the row spells M-E-W-A-H in order rather than
 * lighting up as one block — the five cells cross the viewport threshold in
 * the same frame. `backwards` holds the first frame through the delay and
 * then hands the letter back to the resting rule above.
 *
 * The delay is a variable so the hover rule below can restate the entrance
 * exactly as it is for that column.
 */
.value.is-in .value-cap {
  animation: value-cap-in 1s var(--ease-out) var(--cap-delay, 0.35s) backwards;
}

.value:nth-child(2) {
  --cap-delay: 0.47s;
}

.value:nth-child(3) {
  --cap-delay: 0.59s;
}

.value:nth-child(4) {
  --cap-delay: 0.71s;
}

.value:nth-child(5) {
  --cap-delay: 0.83s;
}

/*
 * Pointing at a capital gives it a beat of emphasis: it jumps and tips, glows,
 * the amber sweeps across it again, and it settles back with a small bounce.
 * It plays once each time the pointer arrives.
 *
 * The entrance stays first in the list, unchanged. An animation keeps running
 * while its name stays in place, so adding the emphasis after it — rather
 * than swapping one for the other — means leaving the letter does not replay
 * the entrance and drop it in all over again.
 */
@media (hover: hover) {
  .value.is-in .value-cap:hover {
    animation: value-cap-in 1s var(--ease-out) var(--cap-delay, 0.35s) backwards,
      value-cap-pop 0.75s var(--ease-out);
  }
}

@keyframes value-cap-pop {
  30% {
    transform: translateY(-0.2em) scale(1.3) rotate(-7deg);
    filter: drop-shadow(0 0 6px rgba(240, 144, 26, 0.65));
    background-position: 0% 0;
  }

  62% {
    transform: translateY(0.03em) scale(0.94) rotate(2deg);
    filter: drop-shadow(0 0 3px rgba(240, 144, 26, 0.35));
  }

  82% {
    transform: scale(1.04);
  }
}

@keyframes value-cap-in {
  from {
    opacity: 0;
    transform: translateY(-0.55em) scale(1.35);
    filter: blur(5px);
    background-position: 0% 0;
  }

  55% {
    opacity: 1;
    transform: translateY(0.04em) scale(0.97);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .value.is-in .value-cap,
  .value.is-in .value-cap:hover {
    animation: none;
  }
}

.value-gloss {
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------- factory */

/* The site banner opens like a shutter as it scrolls in, then drifts slowly
   closer while the pointer rests on it. */
.factory-banner {
  position: relative;
  margin: 0 0 clamp(40px, 5vw, 64px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
  clip-path: inset(0 round var(--radius-lg));
  transition: clip-path 1.4s var(--ease-out), opacity 0.6s var(--ease);
}

.factory-banner.reveal {
  transform: none;
}

.factory-banner.reveal:not(.is-in) {
  clip-path: inset(0 12% 0 12% round var(--radius-lg));
}

.factory-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 6s var(--ease-out);
}

.factory-banner:hover img {
  transform: scale(1.05);
}

.factory-banner figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 3vw, 36px) clamp(18px, 2.4vw, 28px);
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  letter-spacing: 0.08em;
  color: var(--on-ink);
  background: linear-gradient(180deg, transparent, rgba(20, 16, 10, 0.82));
}

.factory-banner figcaption::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  margin-right: 0.9em;
  vertical-align: middle;
  background: var(--amber-500);
}

.factory-facts {
  margin-bottom: clamp(48px, 6vw, 80px);
  padding: clamp(26px, 3.4vw, 40px);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  background: rgba(244, 236, 224, 0.025);
}

.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
}

.fact dt {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
  margin-bottom: 0.4rem;
}

.fact dd {
  font-family: var(--font-display);
  font-size: 1.06rem;
  color: var(--on-ink);
}

.line-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.line-card {
  position: relative;
  padding: clamp(26px, 3vw, 34px);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(244, 236, 224, 0.05), transparent 70%);
  overflow: hidden;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease),
    background 0.35s var(--ease);
}

.line-card:hover {
  transform: translateY(-4px);
  border-color: rgba(240, 144, 26, 0.5);
  background: linear-gradient(160deg, rgba(240, 144, 26, 0.1), transparent 72%);
}

.line-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1.4rem;
  border: 1px solid rgba(240, 144, 26, 0.45);
  border-radius: 50%;
  color: var(--amber-400);
}

/* Stands in for .line-icon when a thumbnail is uploaded. A production line is
   photographed wide, and a photo shrunk into the 46px icon circle would show
   nothing, so it takes the full width of the card and crops to a 16:9 band. */
.line-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 1.4rem;
  border: 1px solid var(--line-light);
  border-radius: calc(var(--radius) - 4px);
  background: rgba(244, 236, 224, 0.06);
}

.line-name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
}

.line-text {
  font-size: 0.9rem;
  color: var(--on-ink-muted);
}

.line-index {
  position: absolute;
  right: 14px;
  bottom: -8px;
  font-family: var(--font-num);
  font-size: 3.6rem;
  line-height: 1;
  color: rgba(244, 236, 224, 0.05);
  pointer-events: none;
}

/* -------------------------------------------------------------- products */

.product-grid {
  display: grid;
  /* A wide minimum keeps this at two columns on desktop, so a four-product
     range reads as a balanced 2x2 rather than a row of three and an orphan. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}

.product-card {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.2vw, 40px);
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.product-card:hover {
  transform: translateY(-5px);
  border-color: rgba(240, 144, 26, 0.4);
  box-shadow: 0 22px 44px -28px rgba(36, 29, 20, 0.4);
}

.product-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.6rem;
}

.product-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--amber-600);
  background: linear-gradient(150deg, var(--sand-100), var(--cream-100));
  border: 1px solid var(--line-dark);
}

.product-index {
  font-family: var(--font-num);
  font-size: 1.4rem;
  color: var(--sand-200);
  letter-spacing: 0.06em;
}

.product-name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  margin-bottom: 0.85rem;
}

.product-text {
  font-size: 0.93rem;
  color: var(--text-soft);
  margin-bottom: 1.6rem;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.tag {
  padding: 0.4em 0.9em;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--amber-800);
  background: var(--sand-100);
  border: 1px solid var(--sand-200);
  border-radius: 999px;
}

/* --------------------------------------------------------------- quality */

.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.cert-card {
  padding: clamp(26px, 3vw, 34px);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line-dark);
  border-top: 2px solid var(--amber-500);
  border-radius: var(--radius);
  transition: transform 0.35s var(--ease), background 0.35s var(--ease);
}

.cert-card:hover {
  transform: translateY(-4px);
  background: #fff;
}

.cert-seal {
  display: block;
  color: var(--amber-600);
  margin-bottom: 1.1rem;
}

.cert-seal .icon {
  width: 2rem;
  height: 2rem;
}

/* Stands in for .cert-seal when a thumbnail is uploaded. A certifying body's
   mark has proportions of its own and is unreadable cropped, so this one is
   contained in a fixed band and keeps its aspect ratio. */
.cert-thumb {
  display: block;
  height: 56px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 1.1rem;
}

.cert-name {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.7rem;
}

.cert-text {
  font-size: 0.9rem;
  color: var(--text-soft);
}

.commitment {
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(28px, 3.6vw, 44px);
  background: var(--ink-900);
  color: var(--on-ink);
  border-left: 3px solid var(--amber-500);
  border-radius: var(--radius);
}

.commitment-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--amber-400);
  margin-bottom: 1rem;
}

.commitment-text {
  max-width: 78ch;
  color: var(--on-ink-soft);
  font-size: 0.98rem;
}

/* ------------------------------------------------------------ advantages */

.adv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
  gap: 1px;
  background: var(--line-light);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
}

.adv-card {
  position: relative;
  padding: clamp(28px, 3.4vw, 42px);
  background: var(--ink-900);
  transition: background 0.35s var(--ease);
}

.adv-card:hover {
  background: var(--ink-800);
}

.adv-num {
  display: block;
  font-family: var(--font-num);
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  color: var(--amber-500);
  margin-bottom: 1.3rem;
}

.adv-num::after {
  content: "";
  display: block;
  width: 26px;
  height: 1px;
  margin-top: 0.9rem;
  background: rgba(240, 144, 26, 0.45);
}

.adv-name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.16rem;
  margin-bottom: 0.85rem;
}

.adv-text {
  font-size: 0.9rem;
  color: var(--on-ink-muted);
}

/* --------------------------------------------------------------- contact */

.contact-tagline {
  margin-top: 1rem;
  font-family: var(--font-num);
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--amber-700);
  letter-spacing: 0.03em;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  overflow: hidden;
}

.channel {
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--cream-50);
  transition: background 0.3s var(--ease);
}

.channel-link:hover {
  background: #fff;
}

.channel-icon {
  display: block;
  color: var(--amber-600);
  margin-bottom: 1rem;
}

.channel-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.channel-value {
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--text);
  word-break: break-word;
}

.channel-link .channel-value {
  color: var(--amber-800);
}

/* A mailbox or web address is one unbreakable string; given a half-width
   cell it wraps mid-word (COMMERCIAL.MOTJ@M / EWAHGROUP.COM). Each takes a
   full row beneath the address and telephone instead. */
.channel-link[href^="mailto:"],
.channel-link[href^="http"] {
  grid-column: 1 / -1;
}

.channel-link[href^="mailto:"] .channel-value,
.channel-link[href^="http"] .channel-value {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ form */

.enquiry {
  padding: clamp(26px, 3.4vw, 44px);
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -46px rgba(36, 29, 20, 0.5);
}

.enquiry-head {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.28rem;
}

.enquiry-intro {
  margin: 0.6rem 0 2rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 18px;
}

.field {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1.15rem;
}

.field label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-soft);
}

.field.is-required label::after {
  content: "*";
  margin-inline-start: 0.3em;
  color: var(--amber-600);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.85em 1em;
  font: inherit;
  font-size: 0.94rem;
  color: var(--text);
  background: var(--cream-50);
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--radius);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}

.field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.65;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  background: #fff;
  border-color: var(--amber-500);
  box-shadow: 0 0 0 3px rgba(240, 144, 26, 0.16);
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(122, 106, 85, 0.65);
}

.select-wrap {
  position: relative;
  display: block;
}

.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 2.6em;
  cursor: pointer;
}

.select-chevron {
  position: absolute;
  right: 0.9em;
  top: 50%;
  transform: translateY(-50%);
  width: 1.15em;
  height: 1.15em;
  color: var(--text-muted);
  pointer-events: none;
}

.field-error {
  min-height: 1.1em;
  font-size: 0.76rem;
  color: #b3341a;
}

.field.has-error input,
.field.has-error textarea {
  border-color: #b3341a;
  background: #fff8f6;
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.enquiry-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  margin-top: 0.6rem;
}

.privacy-note {
  flex: 1 1 220px;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.form-status {
  margin-top: 1.2rem;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1.65;
}

.form-status.is-ok,
.form-status.is-error {
  padding: 0.9em 1.1em;
  border-radius: var(--radius);
}

.form-status.is-ok {
  color: #1f6a3f;
  background: #eff8f2;
  border: 1px solid #cae5d6;
}

.form-status.is-error {
  color: #8f2a13;
  background: #fdf3f0;
  border: 1px solid #f0d2c9;
}

/* ---------------------------------------------------------------- footer */

.site-foot {
  position: relative;
  background: var(--ink-850);
  color: var(--on-ink);
  padding-top: clamp(56px, 7vw, 92px);
  border-top: 1px solid var(--line-light);
}

.foot-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 64px);
}

.foot-logo {
  height: var(--foot-logo-h, 36px);
  width: auto;
  margin-bottom: 1.4rem;
}

.foot-name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.02rem;
  margin-bottom: 0.5rem;
}

.foot-tagline {
  font-size: 0.85rem;
  color: var(--on-ink-muted);
  max-width: 32ch;
}

.foot-title {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--amber-400);
  margin-bottom: 1.3rem;
}

.foot-list {
  display: grid;
  gap: 0.75rem;
  font-size: 0.88rem;
}

.foot-list a,
.foot-list-contact li {
  color: var(--on-ink-muted);
  transition: color 0.25s var(--ease);
}

.foot-list a:hover {
  color: var(--amber-300);
}

.foot-base {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 24px 28px;
  border-top: 1px solid var(--line-light);
  font-size: 0.78rem;
  color: var(--on-ink-muted);
}

.foot-legal {
  max-width: 60ch;
}

.to-top {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: var(--ink-900);
  background: var(--amber-500);
  box-shadow: 0 12px 26px -12px rgba(124, 67, 6, 0.8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}

.to-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  background: var(--amber-400);
}

/* ---------------------------------------------------------------- reveal */

/* Content rises out of a soft focus as it enters, so a section settles into
   place rather than snapping. The blur is small and gone within the second. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity 0.9s var(--ease-out) var(--reveal-delay, 0ms),
    transform 0.9s var(--ease-out) var(--reveal-delay, 0ms),
    filter 0.9s var(--ease-out) var(--reveal-delay, 0ms);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1080px) {
  .hero-inner,
  .split,
  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-aside {
    justify-items: start;
  }

  .hero-inner:has(.hero-aside.has-showcase) {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-aside.has-showcase {
    justify-items: center;
  }

  .stat-n6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .foot-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .site-nav {
    display: none;
  }

  .burger {
    display: flex;
  }

  html {
    scroll-padding-top: calc(var(--head-h, 84px) - 4px);
  }
}

@media (max-width: 620px) {
  body {
    font-size: 15px;
  }

  .head-inner {
    height: 72px;
  }

  .mobile-nav {
    inset-block-start: 72px;
  }

  .hero {
    padding-top: 120px;
  }

  /* The hero runs taller than the screen here, so the hint would sit on top
     of the key figures rather than below the fold line it points at. */
  .scroll-hint {
    display: none;
  }

  /* Three hero figures stay on one row; two-and-one left the third stranded. */
  .hero-stats.stat-n3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-stats .stat {
    padding-inline: 12px 4px;
  }

  .hero-stats .stat-value {
    font-size: 1.35rem;
  }

  .factory-banner {
    aspect-ratio: 4 / 3;
  }

  .showcase {
    --card-w: min(calc(clamp(132px, 40vw, 168px) * var(--stage-scale)), 46vw);
  }

  /* Reclaim just enough width for the full company name to sit beside the
     wordmark without truncating. */
  .brand {
    gap: 10px;
  }

  .brand-logo {
    height: var(--brand-logo-h-sm, 28px);
  }

  .brand-divider,
  .brand-latin {
    display: none;
  }

  .milestone {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .foot-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .factory-banner.reveal:not(.is-in) {
    clip-path: inset(0 round var(--radius-lg));
  }
}

/* ==========================================================================
   Product Centre, News Centre, Careers, video, gallery and FAQ
   ========================================================================== */

.shell-narrow {
  max-width: 820px;
}

.section-tight {
  padding-block: clamp(44px, 5vw, 72px);
}

/* The filter bar closes the ink page head, so the grid below needs less air. */
.page-head + .section-tight {
  padding-top: clamp(36px, 4vw, 56px);
}

.section-cta {
  margin-top: clamp(32px, 4vw, 52px);
  text-align: center;
}

.btn-dark {
  color: var(--text);
  border-color: var(--line-dark-strong);
}

.btn-dark:hover {
  border-color: var(--amber-600);
  color: var(--amber-800);
}

/* --------------------------------------------------------- scroll progress */

.scroll-progress {
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}

.scroll-progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--amber-600), var(--amber-300));
  transform: scaleX(0);
  transform-origin: left;
}

.nav-link.is-current {
  color: var(--on-ink);
}

.nav-link.is-current::after {
  transform: scaleX(1);
}

/* ------------------------------------------------------------ breadcrumbs */

.crumbs {
  background: var(--ink-900);
  padding-top: var(--head-h, 84px);
}

.crumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
  padding-block: 14px;
  font-size: 0.78rem;
  color: var(--on-ink-muted);
}

.crumb-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.crumb-list a:hover {
  color: var(--amber-300);
}

.crumb-list [aria-current="page"] {
  color: var(--on-ink);
}

.crumb-sep .icon {
  width: 0.9em;
  height: 0.9em;
  opacity: 0.55;
}

/* -------------------------------------------------------------- page head */

.page-head {
  position: relative;
  padding: clamp(40px, 5vw, 64px) 0 clamp(28px, 3.5vw, 44px);
  background: linear-gradient(180deg, var(--ink-900), var(--ink-850));
  color: var(--on-ink);
  overflow: hidden;
}

.page-products .crumbs,
.page-news .crumbs,
.page-careers .crumbs {
  padding-top: var(--head-h, 84px);
}

.page-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  max-width: 24em;
  margin-bottom: 1.2rem;
  text-wrap: balance;
}

/* Same measure problem as .section-intro, same per-locale fix. */
.page-intro {
  max-width: var(--intro-measure, 64ch);
  color: var(--on-ink-soft);
  font-size: clamp(0.97rem, 1.1vw, 1.06rem);
}

/* The answer-summary block: short, factual, self-contained — written to be
   quoted verbatim by answer engines and assistants. */
.answer-lead {
  margin-top: 1.4rem;
  padding: 1rem 1.2rem;
  max-width: 74ch;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text);
  background: var(--sand-100);
  border-left: 3px solid var(--amber-500);
  border-radius: var(--radius);
}

/* Under The Group's heading the plant at a glance is a card of its own: white
   on the cream page, a gold rule down its edge, set a step smaller than the
   story beside it so the two columns read in order. */
.split-head .answer-lead {
  margin-top: clamp(28px, 3vw, 40px);
  padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.4vw, 30px);
  max-width: none;
  font-size: 0.93rem;
  line-height: 1.9;
  color: var(--text-soft);
  background: #fff;
  border: 1px solid var(--line-dark);
  border-left: 3px solid var(--amber-500);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.answer-lead-ink,
.page-head .answer-lead {
  color: var(--on-ink);
  background: rgba(244, 236, 224, 0.06);
  border-left-color: var(--amber-400);
}

/* ------------------------------------------------------------- filter bar */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(20px, 3vw, 30px);
  border-top: 1px solid var(--line-light);
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-chip {
  padding: 0.5em 1.05em;
  font-size: 0.82rem;
  border: 1px solid var(--line-light-strong);
  border-radius: 999px;
  color: var(--on-ink-soft);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.filter-chip:hover {
  border-color: var(--amber-500);
  color: var(--amber-300);
}

.filter-chip.is-on {
  background: var(--amber-500);
  border-color: var(--amber-500);
  color: var(--ink-900);
  font-weight: 600;
}

.filter-search {
  position: relative;
  flex: 1 1 220px;
  max-width: 320px;
}

.filter-search input {
  width: 100%;
  padding: 0.6em 0.9em 0.6em 2.4em;
  font: inherit;
  font-size: 0.88rem;
  color: var(--on-ink);
  background: rgba(244, 236, 224, 0.06);
  border: 1px solid var(--line-light-strong);
  border-radius: 999px;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.filter-search input::placeholder {
  color: var(--on-ink-muted);
}

.filter-search input:focus {
  outline: none;
  border-color: var(--amber-500);
  background: rgba(244, 236, 224, 0.1);
}

.search-icon {
  position: absolute;
  left: 0.85em;
  top: 50%;
  transform: translateY(-50%);
  width: 1.05em;
  height: 1.05em;
  color: var(--on-ink-muted);
  pointer-events: none;
}

.filter-count {
  font-size: 0.78rem;
  color: var(--on-ink-muted);
  font-variant-numeric: tabular-nums;
}

.no-results {
  padding: clamp(36px, 5vw, 60px) 24px;
  text-align: center;
  color: var(--text-muted);
  background: #fff;
  border: 1px dashed var(--line-dark-strong);
  border-radius: var(--radius);
}

/* ------------------------------------------------------------ product card */

.product-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(24px, 3vw, 34px);
}

.product-card {
  padding: 0;
  overflow: hidden;
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.product-figure {
  display: block;
  margin: calc(clamp(24px, 3vw, 34px) * -1) calc(clamp(24px, 3vw, 34px) * -1) 1.5rem;
  aspect-ratio: 14 / 9;
  overflow: hidden;
  background: var(--sand-100);
}

.product-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.product-card:hover .product-figure img {
  transform: scale(1.05);
}

.product-cat {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber-700);
}

.product-more,
.news-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1.2rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--amber-800);
}

.product-more .icon,
.news-more .icon {
  transition: transform 0.25s var(--ease);
}

.product-card:hover .product-more .icon,
.news-card:hover .news-more .icon {
  transform: translateX(4px);
}

/* --------------------------------------------------------------- news card */

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}

.news-card {
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.news-card:hover {
  transform: translateY(-5px);
  border-color: rgba(240, 144, 26, 0.4);
  box-shadow: 0 22px 44px -28px rgba(36, 29, 20, 0.4);
}

.news-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.news-cover {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--sand-100);
}

.news-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.news-card:hover .news-cover img {
  transform: scale(1.05);
}

.news-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(20px, 2.6vw, 28px);
}

.news-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6em;
  margin-bottom: 0.9rem;
  font-size: 0.74rem;
}

.news-cat {
  padding: 0.2em 0.7em;
  color: var(--amber-800);
  background: var(--sand-100);
  border-radius: 999px;
  font-weight: 600;
}

.news-date {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.news-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.08rem, 1.5vw, 1.24rem);
  line-height: 1.35;
  margin-bottom: 0.7rem;
}

.news-summary {
  font-size: 0.9rem;
  color: var(--text-soft);
}

.news-more {
  margin-top: auto;
}

/* --------------------------------------------------------------- job cards */

.job-list {
  display: grid;
  gap: 1px;
  background: var(--line-light);
  border-block: 1px solid var(--line-light);
}

.job-row {
  background: var(--ink-900);
  transition: background 0.3s var(--ease);
}

.job-row:hover {
  background: var(--ink-800);
}

.job-row-link {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: clamp(18px, 2.4vw, 26px) clamp(4px, 1vw, 12px);
}

.job-row-main {
  flex: 1;
  min-width: 0;
}

.job-row-title {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  color: var(--on-ink);
  margin-bottom: 0.35rem;
}

.job-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  font-size: 0.82rem;
  color: var(--on-ink-muted);
}

.job-row-go {
  flex: none;
  color: var(--amber-500);
  transition: transform 0.25s var(--ease);
}

.job-row:hover .job-row-go {
  transform: translateX(5px);
}

/* 急聘. Reads on both the cream job cards and the ink teaser rows, which is why
   it carries its own ground rather than borrowing the surface colour. */
.badge-urgent {
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
  padding: 0.22em 0.62em 0.22em 0.5em;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(135deg, var(--hot-500), var(--hot-600));
  border-radius: 999px;
  box-shadow: 0 3px 12px -4px rgba(168, 17, 9, 0.75);
}

/* Beside a display-serif <h1> the badge needs a size of its own, or it reads as
   a footnote rather than as part of the heading. */
.badge-urgent-lg {
  font-size: 0.8rem;
  padding: 0.28em 0.78em 0.28em 0.62em;
  vertical-align: 0.28em;
}

/* The flame occupies only the middle half of its 24-unit box, so it is set
   larger than the cap height and pulled back into the padding — otherwise it
   reads as a speck beside the label rather than as a mark. */
.badge-urgent .icon {
  width: 1.35em;
  height: 1.35em;
  margin-left: -0.12em;
}

/* Amber on the red ground: a flame is lit from the inside, and the two-tone
   mark carries further down a column of otherwise identical cards. */
.badge-flame {
  color: var(--amber-300);
  transform-origin: 50% 88%;
  animation: flame-flicker 1.8s var(--ease) infinite;
}

@keyframes flame-flicker {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.16);
    opacity: 0.82;
  }
}

.job-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}

.job-card {
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.job-card:hover {
  transform: translateY(-5px);
  border-color: rgba(240, 144, 26, 0.4);
  box-shadow: 0 22px 44px -28px rgba(36, 29, 20, 0.4);
}

.job-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(24px, 3vw, 32px);
}

.job-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 1rem;
}

.job-dept {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber-700);
}

.job-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.1rem, 1.5vw, 1.28rem);
  margin-bottom: 0.7rem;
}

.job-summary {
  font-size: 0.9rem;
  color: var(--text-soft);
  margin-bottom: 1.2rem;
}

.job-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.job-facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.job-facts .icon {
  width: 1em;
  height: 1em;
  color: var(--amber-600);
}

/* ------------------------------------------------------------ video player */

.video-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 0.85fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

.video-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-800);
  border: 1px solid var(--line-light);
}

.video-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 10, 0.1) 0%, rgba(20, 16, 10, 0.85) 100%);
}

.video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.video-stage.is-playing .video-poster,
.video-stage.is-playing .video-shade,
.video-stage.is-playing .video-play,
.video-stage.is-playing .video-caption {
  opacity: 0;
  pointer-events: none;
}

.video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(66px, 8vw, 92px);
  height: clamp(66px, 8vw, 92px);
  border-radius: 50%;
  color: var(--ink-900);
  background: var(--amber-500);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), opacity 0.3s var(--ease);
}

.video-play:hover {
  background: var(--amber-400);
  transform: translate(-50%, -50%) scale(1.06);
}

.video-play-icon {
  width: 38%;
  height: 38%;
  margin-inline-start: 8%;
}

.video-play-ring {
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(240, 144, 26, 0.55);
  border-radius: 50%;
  animation: pulse 2.6s ease-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.92);
    opacity: 0.8;
  }
  70% {
    transform: scale(1.18);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.video-caption {
  position: absolute;
  inset: auto 0 0;
  padding: clamp(18px, 2.6vw, 30px);
  transition: opacity 0.3s var(--ease);
}

.video-now {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--amber-400);
  margin-bottom: 0.5rem;
}

.video-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  color: var(--on-ink);
  margin-bottom: 0.4rem;
}

.video-summary {
  max-width: 52ch;
  font-size: 0.88rem;
  color: var(--on-ink-soft);
}

.video-error {
  position: absolute;
  inset: auto 0 0;
  margin: 0;
  padding: 1em 1.2em;
  font-size: 0.85rem;
  color: var(--on-ink);
  background: rgba(140, 39, 17, 0.92);
}

.video-empty {
  max-width: 60ch;
  padding: clamp(26px, 3.4vw, 40px);
  color: var(--on-ink-muted);
  background: rgba(244, 236, 224, 0.03);
  border: 1px dashed var(--line-light-strong);
  border-radius: var(--radius);
}

.playlist-list {
  display: grid;
  gap: 8px;
}

.playlist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px;
  text-align: start;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.playlist-item:hover {
  background: rgba(244, 236, 224, 0.05);
}

.playlist-item.is-on {
  background: rgba(240, 144, 26, 0.1);
  border-color: rgba(240, 144, 26, 0.45);
}

.playlist-thumb {
  position: relative;
  flex: none;
  width: 92px;
  aspect-ratio: 16 / 10;
  border-radius: 2px;
  overflow: hidden;
  background: var(--ink-800);
}

.playlist-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.playlist-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22%;
  height: 22%;
  color: var(--cream-50);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

.playlist-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.playlist-title {
  font-size: 0.86rem;
  color: var(--on-ink);
  line-height: 1.4;
}

.playlist-time {
  font-size: 0.72rem;
  color: var(--on-ink-muted);
  font-variant-numeric: tabular-nums;
}

.transcript {
  margin-top: clamp(20px, 3vw, 32px);
  padding: 0 1.2em;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
}

.transcript summary {
  padding: 0.9em 0;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--amber-400);
}

.transcript-body {
  padding-bottom: 1.2em;
  font-size: 0.9rem;
  color: var(--on-ink-muted);
  display: grid;
  gap: 0.8em;
}

/* ------------------------------------------------------------- tile gallery */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}

.tile {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line-dark);
}

.tile.is-wide {
  grid-column: span 2;
}

.tile-btn {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.tile.is-wide .tile-btn {
  aspect-ratio: 20 / 9;
}

.tile-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.tile-btn:hover img {
  transform: scale(1.06);
}

.tile-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--ink-900);
  background: rgba(240, 144, 26, 0.92);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.tile-btn:hover .tile-zoom,
.tile-btn:focus-visible .tile-zoom {
  opacity: 1;
  transform: none;
}

.tile-cap {
  display: grid;
  gap: 0.3rem;
  padding: 14px 16px 16px;
}

.tile-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 0.98rem;
}

.tile-note {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------- lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 2vw, 24px);
  padding: clamp(16px, 4vw, 48px);
  background: rgba(12, 9, 5, 0.94);
  backdrop-filter: blur(6px);
}

.lightbox[hidden] {
  display: none;
}

.lb-figure {
  margin: 0;
  display: grid;
  gap: 14px;
  justify-items: center;
  min-width: 0;
}

.lb-figure img {
  max-width: 100%;
  max-height: 74vh;
  width: auto;
  border-radius: var(--radius);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9);
}

.lb-figure figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.4em 1em;
  max-width: 70ch;
  text-align: center;
  font-size: 0.86rem;
  color: var(--on-ink-soft);
}

.lb-counter {
  font-size: 0.76rem;
  color: var(--on-ink-muted);
  font-variant-numeric: tabular-nums;
}

.lb-nav,
.lb-close {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: var(--on-ink);
  border: 1px solid var(--line-light-strong);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.lb-nav:hover,
.lb-close:hover {
  background: var(--amber-500);
  border-color: var(--amber-500);
  color: var(--ink-900);
}

.lb-close {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
}

.lightbox.is-single .lb-nav {
  visibility: hidden;
}

/* --------------------------------------------------------------------- faq */

.faq-list {
  display: grid;
  gap: 10px;
}

.faq-item {
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.faq-item[open] {
  border-color: rgba(240, 144, 26, 0.45);
  box-shadow: 0 18px 40px -34px rgba(36, 29, 20, 0.5);
}

.faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
  padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.4vw, 26px);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.45;
  list-style: none;
}

.faq-q::-webkit-details-marker {
  display: none;
}

.faq-mark {
  flex: none;
  margin-top: 0.2em;
  color: var(--amber-600);
  transition: transform 0.3s var(--ease);
}

.faq-item[open] .faq-mark {
  transform: rotate(180deg);
}

.faq-a {
  padding: 0 clamp(18px, 2.4vw, 26px) clamp(18px, 2.4vw, 24px);
}

.faq-a p {
  max-width: 78ch;
  font-size: 0.94rem;
  color: var(--text-soft);
}

/* --------------------------------------------------------------- key facts */

.facts {
  margin: clamp(36px, 5vw, 60px) 0;
  padding: clamp(24px, 3vw, 34px);
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
}

.fact-pairs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
}

.fact-pair dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.fact-pair dd {
  font-size: 0.95rem;
  color: var(--text);
}

/* ------------------------------------------------------------ detail pages */

.detail-head {
  position: relative;
  padding: clamp(112px, 14vh, 160px) 0 clamp(48px, 6vw, 80px);
  overflow: hidden;
}

.page-product .detail-head,
.page-job .detail-head {
  padding-top: clamp(48px, 6vw, 76px);
}

.detail-head-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.detail-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  color: var(--on-ink);
  margin-bottom: 1.1rem;
  text-wrap: balance;
}

.detail-lead {
  max-width: 56ch;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  color: var(--on-ink-soft);
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 2rem;
}

.detail-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.shot {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-light);
  background: var(--ink-800);
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.shot:hover img {
  transform: scale(1.06);
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}

.detail-body .subhead {
  margin-top: clamp(30px, 4vw, 44px);
}

.detail-body .subhead:first-child {
  margin-top: 0;
}

.check-list {
  display: grid;
  gap: 0.7rem;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  font-size: 0.95rem;
  color: var(--text-soft);
}

.check-list .note-icon {
  width: 1em;
  height: 1em;
  margin-top: 0.42em;
  color: var(--amber-600);
}

.spec-card {
  position: sticky;
  top: 104px;
  padding: clamp(22px, 2.8vw, 30px);
  background: #fff;
  border: 1px solid var(--line-dark);
  border-top: 2px solid var(--amber-500);
  border-radius: var(--radius);
}

.spec-head {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-700);
  margin-bottom: 1.2rem;
}

.spec-list,
.job-meta {
  display: grid;
  gap: 0;
}

.spec-row,
.job-meta-item {
  display: grid;
  gap: 0.2rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line-dark);
}

.spec-row:last-child,
.job-meta-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.spec-row dt,
.job-meta-label {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.job-meta-label .icon {
  width: 1em;
  height: 1em;
  color: var(--amber-600);
}

.spec-row dd,
.job-meta-value {
  font-size: 0.92rem;
  color: var(--text);
}

/* ---------------------------------------------------------------- article */

.article-head {
  padding: clamp(40px, 6vw, 72px) 0 0;
  background: var(--cream-50);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 1.2rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.article-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  line-height: 1.28;
  margin-bottom: 1.2rem;
  text-wrap: balance;
}

.article-lead {
  max-width: 68ch;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  color: var(--text-soft);
}

.article-cover {
  margin: clamp(32px, 4vw, 52px) 0 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sand-100);
}

.article-cover img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.article-body > * {
  max-width: 72ch;
}

.article-p {
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--text-soft);
  margin-bottom: 1.4rem;
}

.article-h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  margin: clamp(32px, 4vw, 48px) 0 1rem;
}

.article-quote {
  margin: clamp(28px, 3.4vw, 40px) 0;
  padding: 1.4em 1.6em;
  background: var(--sand-100);
  border-left: 3px solid var(--amber-500);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.65;
}

.article-list {
  display: grid;
  gap: 0.7rem;
  margin-bottom: 1.6rem;
  padding-inline-start: 1.2em;
  list-style: none;
}

.article-list li {
  position: relative;
  font-size: 0.98rem;
  color: var(--text-soft);
}

.article-list li::before {
  content: "";
  position: absolute;
  left: -1.1em;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber-500);
}

.article-figure {
  margin: clamp(28px, 3.4vw, 44px) 0;
  max-width: none;
}

.figure-btn {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sand-100);
}

.figure-btn img {
  width: 100%;
  height: auto;
  transition: transform 0.5s var(--ease);
}

.figure-btn:hover img {
  transform: scale(1.02);
}

.article-figure figcaption {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.article-tags {
  margin: clamp(28px, 3.4vw, 40px) 0;
}

.article-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-block: clamp(20px, 2.6vw, 28px);
  border-block: 1px solid var(--line-dark);
}

.share-label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.article-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: clamp(28px, 3.4vw, 40px) 0;
  max-width: none;
}

.article-nav-link {
  display: grid;
  gap: 0.4rem;
  padding: clamp(16px, 2vw, 22px);
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.article-nav-link:hover {
  border-color: rgba(240, 144, 26, 0.45);
  transform: translateY(-3px);
}

.article-nav-link.is-next {
  text-align: end;
}

.article-nav-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-700);
}

.article-nav-link.is-next .article-nav-label {
  justify-content: flex-end;
}

.article-nav-label .icon {
  width: 1em;
  height: 1em;
}

.article-nav-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 0.98rem;
  color: var(--text);
}

/* ------------------------------------------------------------- apply form */

.apply-form {
  max-width: none;
}

.field-file .file-drop {
  position: relative;
  display: block;
}

.file-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-face {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 1em 1.1em;
  font-size: 0.9rem;
  color: var(--text-soft);
  background: var(--cream-50);
  border: 1px dashed var(--line-dark-strong);
  border-radius: var(--radius);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.file-drop:hover .file-face,
.file-drop input:focus-visible + .file-face {
  border-color: var(--amber-500);
  background: #fff;
}

.file-face .icon {
  color: var(--amber-600);
}

.file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fld-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------- map */

.map-note {
  margin-top: 1.2rem;
  font-size: 0.86rem;
  color: var(--text-muted);
}

.map-wrap {
  margin-top: 1.2rem;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  overflow: hidden;
}

.map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.map-block {
  margin-top: 1.2rem;
}

.map-block .map-wrap {
  margin-top: 0;
}

/* "Open in Amap / Baidu / Tencent / Google". On a phone each one hands off to
   the installed app, which is how most visitors will actually navigate here,
   so they are given the same weight as the embedded map rather than hidden
   under it. */
.map-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin-top: 0.9rem;
  font-size: 0.86rem;
}

.map-actions-label {
  color: var(--text-muted);
}

.map-action {
  padding: 5px 12px;
  color: var(--ink-900);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.map-action:hover,
.map-action:focus-visible {
  color: var(--amber-700);
  background: var(--sand-100);
  border-color: var(--amber-500);
}

.contact-side {
  display: block;
}

/* ------------------------------------------------------ footer registration */

.foot-registration {
  padding-block: clamp(22px, 3vw, 32px);
  border-top: 1px solid var(--line-light);
}

.reg-heading {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--amber-400);
  margin-bottom: 0.8rem;
}

.reg-entity {
  font-size: 0.84rem;
  color: var(--on-ink-soft);
  margin-bottom: 0.7rem;
}

.reg-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  font-size: 0.78rem;
  color: var(--on-ink-muted);
}

.reg-item,
.reg-item a {
  display: inline-flex;
  align-items: center;
}

.reg-item a {
  transition: color 0.25s var(--ease);
}

.reg-badge {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  object-fit: contain;
  margin-inline-end: 0.4em;
}

.reg-item a:hover {
  color: var(--amber-300);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.reg-label {
  margin-inline-end: 0.4em;
}

.reg-value {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- card finish */

/* One radius and one resting shadow for every card on the site, and one way of
   answering the pointer: the card lifts, a gold rule runs along its top edge,
   and its photograph drifts slowly closer. Collected here, after the sections
   that define the cards, so it wins over their individual radii. */
.product-card,
.cert-card,
.line-card,
.tile,
.news-card,
.factory-facts,
.commitment,
.adv-grid {
  border-radius: var(--radius-lg);
}

.product-card,
.cert-card,
.tile,
.news-card {
  position: relative;
  box-shadow: var(--shadow-card);
}

.product-card::before,
.cert-card::before,
.news-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 3px;
  background: linear-gradient(90deg, var(--amber-600), var(--amber-400), var(--amber-600));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
  pointer-events: none;
}

.product-card:hover::before,
.cert-card:hover::before,
.news-card:hover::before {
  transform: scaleX(1);
}

.product-card:hover,
.cert-card:hover,
.tile:hover,
.news-card:hover {
  box-shadow: var(--shadow-lift);
}

.tile {
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

.tile:hover {
  transform: translateY(-4px);
}

.product-figure img,
.tile-btn img,
.news-cover img {
  transition: transform 1.4s var(--ease-out);
}

.product-card:hover .product-figure img,
.tile-btn:hover img,
.news-card:hover .news-cover img {
  transform: scale(1.07);
}

/* The quality cards carry the certificate itself once one is uploaded, so the
   card centres on it, as the brochure lays them out. */
.cert-card {
  overflow: hidden;
}

.cert-card:has(.cert-thumb) {
  text-align: center;
}

.cert-card .cert-thumb {
  height: clamp(150px, 16vw, 200px);
  margin: 0 auto 1.4rem;
  object-position: center;
  border-radius: 4px;
  box-shadow: 0 12px 28px -14px rgba(36, 29, 20, 0.45);
  transition: transform 0.6s var(--ease-out);
}

.cert-card:hover .cert-thumb {
  transform: translateY(-4px) rotate(-1deg);
}

.line-card {
  border-top: 2px solid rgba(240, 144, 26, 0.55);
}

/* Body copy on the dark sections was set at half opacity, which is too faint
   to read comfortably in either script. */
.section-ink .section-intro,
.line-text,
.adv-text {
  color: var(--on-ink-soft);
}

/* ------------------------------------------------------- English typesetting */

/* Wide letter-spacing suits capitals and Chinese; on lower-case English it
   pulls words apart ("G r o u p  h e r i t a g e"). Kickers and other
   upper-case labels keep their tracking. */
html[lang^="en"] .stat-label,
html[lang^="en"] .field label,
html[lang^="en"] .chat-panel label,
html[lang^="en"] .btn,
html[lang^="en"] .hero-notes li,
html[lang^="en"] .tag,
html[lang^="en"] .showcase-hint {
  letter-spacing: 0.01em;
}

html[lang^="en"] .stat-label {
  font-size: 0.82rem;
}

html[lang^="en"] .section-title {
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  max-width: 20em;
}

html[lang^="en"] .hero-title {
  line-height: 1.06;
  letter-spacing: -0.02em;
}

html[lang^="en"] .hero-title-lead {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 500;
  letter-spacing: 0.01em;
}

html[lang^="en"] .hero-title-main {
  font-size: clamp(2.2rem, 4.6vw, 3.9rem);
  font-weight: 700;
}

html[lang^="en"] .subhead,
html[lang^="en"] .line-name,
html[lang^="en"] .adv-name,
html[lang^="en"] .product-name,
html[lang^="en"] .tile-title,
html[lang^="en"] .news-title,
html[lang^="en"] .faq-q {
  letter-spacing: -0.01em;
}

html[lang^="en"] .line-name,
html[lang^="en"] .adv-name {
  font-size: 1.1rem;
  line-height: 1.35;
}

html[lang^="en"] .stat-num.is-word {
  font-size: 0.8em;
  letter-spacing: -0.01em;
}

html[lang^="en"] .brand-name {
  font-weight: 600;
  letter-spacing: 0;
}

/* An English postal address runs to three lines; in a half-width cell it broke
   into six, and the telephone beside it left an empty cell. One per row. */
html[lang^="en"] .channel-grid {
  grid-template-columns: minmax(0, 1fr);
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .video-layout,
  .detail-head-inner,
  .detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .spec-card {
    position: static;
  }
}

@media (max-width: 620px) {
  .tile.is-wide {
    grid-column: span 1;
  }

  .tile.is-wide .tile-btn {
    aspect-ratio: 4 / 3;
  }

  .lightbox {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .lb-nav {
    position: static;
  }

  .lb-figure {
    grid-row: 1;
  }

  .lightbox .lb-prev {
    grid-column: 1;
    justify-self: start;
  }

  .lightbox .lb-next {
    grid-column: 1;
    justify-self: end;
    margin-top: -46px;
  }

  .playlist-thumb {
    width: 72px;
  }

  .article-nav-link.is-next {
    text-align: start;
  }

  .article-nav-link.is-next .article-nav-label {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-play-ring {
    animation: none;
  }

  [data-parallax] {
    transform: none !important;
  }

  [data-tilt] {
    transform: none !important;
  }
}

@media print {
  .filter-bar,
  .lightbox,
  .video-play,
  .playlist,
  .article-share,
  .article-nav,
  .apply-form,
  .scroll-progress {
    display: none !important;
  }

  .faq-item {
    break-inside: avoid;
  }

  .faq-a {
    display: block !important;
  }
}

@media print {
  .site-head,
  .mobile-nav,
  .to-top,
  .scroll-hint,
  .enquiry,
  .hero-bg {
    display: none !important;
  }

  body,
  .section-ink,
  .hero,
  .site-foot {
    background: #fff !important;
    color: #000 !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}





/* ====================================================================== */
/* Live chat                                                               */
/*                                                                         */
/* A launcher pill and a panel, both fixed to the bottom-right corner of    */
/* the home page. The form inside reuses the shared .field / .form-status   */
/* styling, so only the shell is defined here.                             */
/* ====================================================================== */

.chat-widget {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}

.chat-widget > * {
  pointer-events: auto;
}

/* Back-to-top would otherwise sit underneath the launcher. */
.has-chat .to-top {
  bottom: calc(clamp(16px, 3vw, 32px) + 60px);
}

/* ------------------------------------------------------------ launcher */

.chat-launcher {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.72em 1.25em 0.72em 1.05em;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-900);
  background: var(--amber-500);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 14px 30px -12px rgba(124, 67, 6, 0.85);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}

.chat-launcher:hover {
  background: var(--amber-400);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -12px rgba(124, 67, 6, 0.9);
}

.chat-launcher:focus-visible {
  outline: 2px solid var(--ink-900);
  outline-offset: 3px;
}

.chat-launcher-icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

/* Once the panel is open the launcher would only duplicate the close button. */
.chat-widget.is-open .chat-launcher {
  display: none;
}

/* --------------------------------------------------------------- panel */

.chat-panel {
  width: min(384px, calc(100vw - 2 * clamp(16px, 3vw, 32px)));
  max-height: min(78vh, 680px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cream-50);
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  box-shadow: 0 28px 60px -22px rgba(20, 16, 10, 0.55), 0 2px 8px -2px rgba(20, 16, 10, 0.18);
}

.chat-panel[hidden] {
  display: none;
}

.chat-widget.is-open .chat-panel {
  animation: chat-rise 0.28s var(--ease) both;
}

@keyframes chat-rise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-widget.is-open .chat-panel {
    animation: none;
  }
  .chat-launcher:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------- head */

.chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  background: var(--ink-850);
  color: var(--on-ink);
}

.chat-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  color: var(--ink-900);
  background: var(--amber-500);
}

.chat-avatar .icon {
  width: 20px;
  height: 20px;
}

.chat-head-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.chat-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.02rem;
  line-height: 1.25;
}

.chat-subtitle {
  font-size: 0.76rem;
  color: var(--on-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-close {
  margin-inline-start: auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  color: var(--on-ink-soft);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.chat-close:hover {
  color: var(--on-ink);
  background: rgba(244, 236, 224, 0.12);
}

.chat-close .icon {
  width: 17px;
  height: 17px;
}

/* ---------------------------------------------------------------- body */

.chat-body {
  padding: 18px 16px 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.chat-greeting {
  margin: 0 0 18px;
  padding: 12px 14px;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-soft);
  background: var(--sand-100);
  border-radius: 3px 12px 12px 12px;
}

.chat-form .field {
  margin-bottom: 0.85rem;
}

.chat-form .field label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.chat-form .field input,
.chat-form .field textarea,
.chat-form .field select {
  padding: 0.68em 0.85em;
  font-size: 0.9rem;
}

.chat-form .field textarea {
  min-height: 92px;
}

.chat-form .field-error {
  min-height: 0;
}

.chat-form .field.has-error .field-error {
  min-height: 1.1em;
  margin-top: 0.2rem;
}

.chat-form .field-row {
  gap: 0 12px;
}

.chat-privacy {
  margin: 0.85rem 0 0;
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.chat-form .form-status {
  margin-top: 0.85rem;
  font-size: 0.84rem;
}

/* ------------------------------------------------------- confirmation */

.chat-done {
  padding: 26px 8px 30px;
  text-align: center;
}

.chat-done[hidden] {
  display: none;
}

.chat-done-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  color: #1f6a3f;
  background: #eff8f2;
  border: 1px solid #cae5d6;
  border-radius: 50%;
}

.chat-done-mark .icon {
  width: 22px;
  height: 22px;
}

.chat-done-title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.1rem;
  color: var(--text);
}

.chat-done-body {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-soft);
}

/* ---------------------------------------------------------------- foot */

.chat-foot {
  margin: 0;
  padding: 10px 16px;
  font-size: 0.74rem;
  color: var(--text-muted);
  text-align: center;
  background: var(--cream-100);
  border-top: 1px solid var(--line-dark);
}

/* -------------------------------------------------------------- mobile */

@media (max-width: 520px) {
  .chat-widget {
    right: 12px;
    left: 12px;
    bottom: 12px;
    align-items: stretch;
  }

  .chat-launcher {
    align-self: flex-end;
  }

  .chat-panel {
    width: 100%;
    max-height: 82vh;
  }

  .has-chat .to-top {
    display: none;
  }
}

/* On a phone the tracked English eyebrow wrapped its last word ("ODM") onto a
   line of its own. Tighter tracking keeps it on one line. */
@media (max-width: 620px) {
  html[lang^="en"] .hero-eyebrow {
    letter-spacing: 0.14em;
  }
}

/* At phone width a justified Chinese line has too few characters to absorb the
   slack, and the gaps it opens are worse than a ragged edge. */
@media (max-width: 620px) {
  html[lang^="zh"] .split-body .prose,
  html[lang^="zh"] .split-head .answer-lead {
    text-align: left;
  }

  .split-body {
    padding-top: 0;
  }
}