@font-face { font-family: 'Inter Hero'; font-style: normal; font-weight: 300; src: url('../assets/inter-light.woff2') format('woff2'); font-display: swap; }
/* ==========================================================================
   MINGRUI — 正式模板（Crown 结构节奏 + 鸣瑞品牌系统）
   --------------------------------------------------------------------------
   结构/节奏/交互规格学习自 Crown 官网（仅学习布局系统，不含其任何素材）
   品牌色/字体/Logo/文案 = 鸣瑞自有
   图片与视频位 = 占位（用户补拍后放入）
   ========================================================================== */

/* ---------- 字体（本地 Barlow 家族） ---------- */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/barlow-latin-400-normal.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../assets/barlow-latin-500-normal.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../assets/barlow-latin-600-normal.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../assets/barlow-latin-700-normal.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 500;
  src: url("../assets/barlow-condensed-latin-500-normal.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  src: url("../assets/barlow-condensed-latin-600-normal.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  src: url("../assets/barlow-condensed-latin-700-normal.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* — 鸣瑞品牌系统（已确认规范） — */
  --navy: #16324F;        /* 深海军蓝：标题字（对应 Crown 深绿标题的角色） */
  --navy-deep: #0B1E30;   /* 深海蓝：色带/收尾带底 */
  --red: #E50013;         /* 鸣瑞红：按钮边框、hover */
  --gold: #C89B5A;        /* 金铜：激活态、点缀（呼应金色气雾罐） */
  --steel: #5A6472;       /* 蓝灰：次要文字 */
  --warm: #F3F1EC;        /* 暖灰：色带、footer、占位底 */
  --ink: #222222;
  --line: #d8d8d8;
  --wash: #f5f5f5;

  /* — 结构规格（与 Crown 同级） — */
  --container: 1600px;
  --gutter: 24px;
  --font-sans: "Barlow", helvetica, arial, sans-serif;
  --font-display: "Barlow Condensed", "Barlow", helvetica, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* keep the closed mega panel (right:-100%) from widening the page */
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

/* ---------- 容器与留白工具类（Crown Layout Builder 同级体系） ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.lpt-sm { padding-top: 22px; }
.lpt-md { padding-top: 44px; }
.lpt-lg { padding-top: 88px; }
.lpb-sm { padding-bottom: 24px; }
.lpb-md { padding-bottom: 48px; }
.lpb-lg { padding-bottom: 96px; }

/* ---------- 按钮规范：白底 + 3px 鸣瑞红边 + 圆角 4px，hover 红底白字 ---------- */
.btn {
  display: inline-block;
  background: #fff;
  border: 3px solid var(--red);
  border-radius: 4px;
  color: var(--ink);
  font: 700 16px/1.2 var(--font-sans);
  padding: 13px 24px 15px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.btn:hover, .btn:focus-visible { background: var(--red); color: #fff; }
.btn--dark { background: transparent; color: #fff; border-color: #fff; }
.btn--dark:hover { background: #fff; color: var(--navy-deep); }

/* 链接规范 */
.link {
  text-decoration: underline;
  text-decoration-thickness: .1em;
  text-underline-offset: .15em;
}
.link:hover { text-decoration-thickness: .2em; }

/* ---------- 占位媒体组件（照片/视频位，用户补拍后替换为 <img>/<video>） ---------- */
.ph-media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background:
    repeating-linear-gradient(135deg, rgba(22, 50, 79, .04) 0 2px, transparent 2px 22px),
    var(--warm);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--steel);
  font: 600 13px/1.6 var(--font-sans);
  letter-spacing: .04em;
}
.ph-media .ph-icon {
  width: 44px; height: 44px;
  margin: 0 auto 10px;
  border: 2px solid var(--steel);
  border-radius: 50%;
  position: relative;
}
.ph-media .ph-icon::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 2px solid var(--steel);
  border-radius: 50%;
}
.ph-media .ph-icon::after {
  content: "";
  position: absolute;
  right: -4px; top: -2px;
  width: 10px; height: 10px;
  border-radius: 2px;
  background: var(--gold);
}
.ph-media small { display: block; font-size: 11px; color: #9aa3ad; margin-top: 4px; }

/* ==========================================================================
   1. HEADER（白底；向下滚隐藏/向上滚出现）
   ========================================================================== */
.global-header {
  position: relative; /* Crown 同款：随页面滚走，不固定、不自动隐藏 */
  z-index: 100;
  background: transparent; /* 页面白底透出，同 Crown 无边框 */
}

/* utility 条 */
.utility {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 14px;
  padding: 6px 0;
  color: var(--steel);
}
.utility a { color: var(--ink); text-decoration: none; }
.utility a:hover { text-decoration: underline; }
.utility__links { display: flex; gap: 1.25rem; align-items: center; }

/* 主导航行 */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 96px;
  position: relative;
}
.nav__logo img { width: 184px; height: auto; }
.nav__items { display: flex; gap: 2rem; }
.nav__items > li > button, .nav__items > li > a {
  background: none; border: 0;
  font: 700 16px var(--font-sans);
  color: var(--ink);
  padding: .5rem 0;
  cursor: pointer;
  position: relative;
  text-decoration: none;
}
.nav__items > li > button::after, .nav__items > li > a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .2s;
}
.nav__items > li:hover > button::after, .nav__items > li:hover > a::after,
.nav__items > li.is-open > button::after { transform: scaleX(1); }

/* 汉堡（<1200px） */
.nav__burger {
  display: none;
  background: none; border: 0; cursor: pointer;
  font: 700 16px var(--font-sans); color: var(--ink);
  align-items: center; gap: .5rem; padding: .75rem 1rem;
}
.nav__burger svg { width: 24px; height: 24px; }

/* ==========================================================================
   2. MEGA MENU（导航下方局部下拉面板，Crown 同款：与容器同宽、浅灰底、点击展开）
   ========================================================================== */
.mega {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  width: min(var(--container), calc(100vw - 32px));
  background: #f5f5f5;
  z-index: 150;
  visibility: hidden; /* closed panel must not widen the page */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 48px clamp(24px, 5vw, 72px) 64px; /* 内容区与容器 gutter 对齐，同 Crown 面板规格 */
  transition: max-height .4s ease, opacity .3s ease, visibility 0s .4s;
}
.mega.is-open {
  visibility: visible;
  max-height: min(80vh, 720px);
  overflow-y: auto;
  opacity: 1;
  transition: max-height .4s ease, opacity .3s ease;
}
.mega__close {
  position: absolute; top: 16px; right: clamp(24px, 5vw, 72px);
  background: none; border: 0; cursor: pointer;
  font: 700 16px var(--font-sans); color: var(--ink);
  display: flex; align-items: center; gap: .5rem;
}
.mega__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
  max-width: var(--container);
  margin-inline: auto;
}
.mega__col h3 {
  font: 700 18px var(--font-sans);
  margin-bottom: 1rem;
  color: var(--navy);
}
.mega__col h3::after {
  content: ""; display: block;
  width: 28px; height: 2px; background: var(--gold);
  margin-top: 6px;
}
.mega__col a {
  display: block;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  padding: .35rem 0;
}
.mega__col a:hover { text-decoration: underline; }
.mega__col .mega__desc { font-size: 13px; color: var(--steel); padding: .35rem 0; }
.mega__cta { margin-top: 1.5rem; }

/* ==========================================================================
   3. HERO（整屏工厂大图背景 + 白字超大标题 + 底部 3 个玻璃信息块）
   ========================================================================== */
.hero { position: relative; }
.hero__media {
  position: relative;
  height: 76vh; /* Crown 式横幅比例：首屏不占满，底部露出下一区块 */
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  background: url(../assets/photos/hero-factory.jpg) center 62% / cover no-repeat;
}
/* 视频就位后使用：<video class="hero__bg hero__video" autoplay muted loop playsinline> */
.hero__video { object-fit: cover; width: 100%; height: 100%; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 30, 48, .74) 0%, rgba(11, 30, 48, .30) 32%, rgba(11, 30, 48, .16) 60%, rgba(11, 30, 48, .66) 100%),
    linear-gradient(90deg, rgba(11, 30, 48, .58) 0%, rgba(11, 30, 48, .06) 58%);
}
.hero__content { position: relative; z-index: 2; margin-top: -16vh; } /* 标题落在媒体上部约 1/3 处，同 Crown */
.hero__title {
  /* Crown Hero typography: locally hosted Inter Light, centered 2:1 scale. */
  text-align: center;
  font-family: "Inter Hero", Inter, Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(32px, 8vw, 128px);
  line-height: 1.1;
  letter-spacing: clamp(-4px, -.25vw, -1.6px);
  color: #fff;
  margin: 0;
  text-shadow: 0 12px 40px #000;
}
.hero__content.container { width: 100%; max-width: none; padding-inline: 24px; }
.hero__title-line { display: block; }
.hero__subline {
  display: block;
  font-size: clamp(20px, 4vw, 64px);
  line-height: 1.1;
  text-wrap: balance;
}
/* 底部 3 个玻璃信息块：与背景融为一体的半透明条 */
.hero__stats {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  background: rgba(11, 30, 48, .38);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.hero__stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero__stat { padding: 20px 24px 24px; }
.hero__stat + .hero__stat { border-left: 1px solid rgba(255, 255, 255, .14); }
.hero__stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 700;
  color: #fff;
  line-height: 1.05;
}
.hero__stat span {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
@media (max-width: 767.98px) {
  .hero__media { min-height: 540px; }
  .hero__stat { padding: 14px 12px 16px; }
  .hero__stat strong { font-size: clamp(17px, 5vw, 22px); }
  .hero__stat span { display: none; } /* 手机端只保留 3 个数字，简洁一行 */
}

/* ==========================================================================
   4. PRODUCT SHOWCASE（Crown Client Spotlight 式：顶部进度指示行 + 一行大引语 + 白描边胶囊按钮）
   Crown 实测：桌面高 920、指示器在顶部（4px 进度条 + 产品名）、引语 40px/600 左对齐宽 582、
   按钮 20px 1px 白边胶囊；平板 976 / 手机 766，引语 32px，指示器只剩进度条
   ========================================================================== */
.spotlight {
  position: relative;
  height: 766px; /* Crown 手机实测 */
  color: #fff;
  overflow: hidden;
}
.spotlight__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity .5s;
}
.spotlight__bg.is-active { opacity: 1; }
/* 顶部进度指示行：无底条，直接叠在背景上（Crown 实测 topRel 0） */
.spotlight__progress {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 3;
}
.spotlight__progress-inner {
  display: flex; align-items: center;
  gap: 1.5rem;
  padding-top: 2rem;
}
.spotlight__pause {
  flex: 0 0 auto;
  width: 34px; height: 24px; /* Crown 实测 34x24 */
  background: none; border: none; padding: 0;
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.spotlight__pause svg { width: 100%; height: 100%; }
.spotlight__pause svg + svg { display: none; }
.spotlight__pause[aria-pressed="true"] svg { display: none; }
.spotlight__pause[aria-pressed="true"] svg + svg { display: block; }
.spotlight__prog-item {
  flex: 1 1 0;
  background: none; border: none; padding: 0;
  cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: .6rem;
}
.spotlight__prog-bar {
  display: block; height: 4px;
  background: rgba(255,255,255,.35);
  overflow: hidden;
}
.spotlight__prog-bar i {
  display: block; height: 100%; width: 100%;
  background: #fff;
  transform: scaleX(0); transform-origin: left;
}
.spotlight__prog-item.is-active .spotlight__prog-bar i { transform: scaleX(1); }
.spotlight__prog-label {
  color: rgba(255,255,255,.85);
  font-size: 15px; font-weight: 600; letter-spacing: .01em;
}
.spotlight__prog-item.is-active .spotlight__prog-label { color: #fff; }
/* 引语 + 按钮 */
.spotlight__inner {
  position: relative; z-index: 2;
  padding-top: 8.5rem; /* 手机：指示器下方留白 */
}
.spotlight__quote {
  font-family: var(--font-sans);
  font-size: 32px; /* Crown 手机/平板实测 */
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 1.5rem;
  max-width: 582px; /* Crown 实测内容宽 */
}
.spotlight__cta {
  display: inline-flex; align-items: center; gap: 1rem;
  font-size: 20px; font-weight: 600;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 100px; /* Crown 实测胶囊 */
  padding: 16px 20px 16px 20px;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.spotlight__cta svg { width: 20px; height: 20px; }
.spotlight__cta:hover { background: #fff; color: var(--navy-deep); }
/* 手机/平板：Crown 实测指示器只剩 4px 进度条，无产品名 */
@media (max-width: 991.98px) {
  .spotlight__prog-label { display: none; }
}
/* 平板：Crown 实测高 976 */
@media (min-width: 768px) {
  .spotlight { height: 976px; }
}
/* 桌面：Crown 实测高 920、指示器行高 108、引语 40px、区块上部 292px 起 */
@media (min-width: 992px) {
  .spotlight { height: 920px; }
  .spotlight__progress-inner { gap: 1rem; padding-top: 1.75rem; }
  .spotlight__inner { padding-top: 292px; } /* Crown 实测引语顶部相对区块 292px */
  .spotlight__quote {
    font-size: 40px; /* Crown 实测 */
    line-height: 48px;
  }
  .spotlight__cta { padding: 16px 62px 16px 20px; } /* Crown 实测右侧大留白给箭头 */
}

/* ==========================================================================
   5. TICKER（暖灰色带 + 两行无限横滚大字）
   ========================================================================== */
.ticker {
  background: #E9D7BD; /* 用户确认恢复原有米色背景 */
  overflow: hidden;
  padding: 16px 0;
}
.ticker__track {
  display: flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  padding: 34px 0; /* 行间留白：每行净高约 132px，接近 Crown 141px 的比例 */
  font-size: clamp(34px, 4.2vw, 64px);
  white-space: nowrap;
  will-change: transform; /* 横移由 JS 滚动联动驱动（Crown 同款 scrub） */
}
.ticker__item {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--navy);
}
.ticker__icon { display: inline-flex; align-items: center; padding: 0 14px; color: var(--navy); }
.ticker__icon svg { height: .92em; width: auto; }

/* ==========================================================================
   6. 工序长滚动区（From Steel to Shelf — 滚动钉住动画）
   ========================================================================== */
.manufacturing { background: #0B1E30; color: #fff; padding: clamp(56px, 7vw, 104px) 0; }
.manufacturing__intro { display: grid; grid-template-columns: .85fr 1.35fr; align-items: center; gap: clamp(32px, 5vw, 80px); }
.manufacturing__eyebrow { color: #E9D7BD; font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 20px; }
.manufacturing h2 { font-family: var(--font-display); font-size: clamp(48px, 5.5vw, 80px); font-weight: 600; line-height: 1; text-transform: uppercase; margin: 0; }
.manufacturing__description { color: #CFD6DD; font-size: 18px; line-height: 1.65; max-width: 38ch; margin: 24px 0; }
.manufacturing__link { display: inline-flex; align-items: center; gap: 28px; min-height: 48px; color: #E9D7BD; border-bottom: 1px solid #E9D7BD; font-size: 17px; font-weight: 600; text-decoration: none; }
.manufacturing__link:hover { color: #fff; border-color: #fff; }
.manufacturing__link:focus-visible { outline: 2px solid #E9D7BD; outline-offset: 6px; }
.manufacturing__media { margin: 0; min-width: 0; }
.manufacturing__media video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #142C40; }
.manufacturing__media figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 14px; font-size: 14px; color: #CFD6DD; }
.manufacturing__media figcaption span { font-size: 11px; letter-spacing: .1em; }
.manufacturing__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; list-style: none; padding: 0; margin: 56px 0 0; }
.manufacturing__steps li { border-top: 1px solid #425364; padding-top: 18px; }
.manufacturing__steps li > span { color: #E9D7BD; font-size: 14px; }
.manufacturing__steps h3 { margin: 10px 0 6px; font-size: 23px; line-height: 1.2; font-weight: 600; }
.manufacturing__steps p { margin: 0; color: #CFD6DD; font-size: 16px; line-height: 1.5; }
@media (max-width: 767px) {
  .manufacturing__intro { grid-template-columns: 1fr; }
  .manufacturing__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; margin-top: 36px; }
  .manufacturing__media figcaption span { display: none; }
}
.process { position: relative; overflow: hidden; }
.process__stage {
  position: relative;
  min-height: 1700px;
}
.process__pin {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
  background:
    radial-gradient(60rem 40rem at 50% 110%, rgba(200, 155, 90, .16), transparent 70%),
    var(--navy-deep);
  color: #fff;
  overflow: hidden;
}
.process__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 100px);
  line-height: .95;
  font-weight: 600;
  text-transform: uppercase;
}
.process__sub {
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 500;
  margin-top: 1rem;
  color: rgba(255,255,255,.85);
  max-width: 56ch;
}
.process__step-label {
  position: absolute;
  top: 12%; left: 50%;
  transform: translateX(-50%);
  font: 600 13px/1.5 var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  z-index: 4;
  text-align: center;
}
/* 滚动驱动的钢卷/罐体占位物体（照片待补拍） */
.process__obj {
  position: absolute;
  left: 50%; top: 58%;
  width: 200px; height: 320px;
  margin-left: -100px;
  border-radius: 16px;
  background: linear-gradient(160deg, #8d97a6, #4a5568);
  will-change: transform;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.9);
  font-size: 12px; letter-spacing: .06em;
  text-align: center;
}
.process__bin {
  position: absolute;
  left: 50%; bottom: 8%;
  transform: translateX(-50%);
  width: 650px; max-width: 92vw; height: 180px;
  background: rgba(255,255,255,.06);
  border: 2px solid rgba(255,255,255,.25);
  border-radius: 6px;
  z-index: 3;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.55);
  font-size: 13px; letter-spacing: .08em;
}

/* 六边形 CTA（原创组件，替代 Crown 靶心） */
.hex-cta {
  position: absolute;
  width: 120px; height: 120px;
  z-index: 4;
  cursor: pointer;
  transition: transform .25s;
}
.hex-cta::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(255,255,255,.85);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.hex-cta::after {
  content: "";
  position: absolute; inset: 30px;
  background: var(--gold);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: transform .25s;
}
.hex-cta:hover { transform: scale(1.2); }
.hex-cta--1 { left: 42%; top: 12%; }
.hex-cta--2 { left: 50%; top: 46%; }
.hex-cta--3 { left: 44%; top: 76%; }

/* ==========================================================================
   7. 数据墙区（白底，标题左 + 4 大数字右）
   ========================================================================== */
.numbers { background: #fff; }
.numbers__grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 3rem;
}
.numbers__head h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.5vw, 40px);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.numbers__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.number-card { border-left: 3px solid var(--gold); padding-left: 1.25rem; }
.number-card__value {
  font-family: var(--font-display);
  font-size: clamp(44px, 4.5vw, 64px);
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
}
.number-card__value sup { font-size: .45em; color: var(--gold); }
.number-card__label { font-size: 15px; color: var(--steel); margin-top: .5rem; }

/* ==========================================================================
   8. 全幅色带区（深海蓝）
   ========================================================================== */
.customization { background: #B7C7C1; color: #17362F; }
.customization > .container { width: 88.6%; max-width: 1440px; padding-inline: 0; }
.customization__grid { display: grid; grid-template-columns: 44.8% 55.2%; }
.customization__menu { padding: clamp(48px, 5.2vw, 80px) 28px 64px 0; }
.customization__eyebrow { margin: 0 0 22px; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.customization h2 { font-family: var(--font-display); font-size: clamp(28px, 2.9vw, 44px); font-weight: 600; line-height: 1.2; }
.customization__tabs { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(30px, 3vw, 46px); margin-top: clamp(64px, 6.8vw, 104px); }
.customization__tabs button { position: relative; background: none; border: 0; border-bottom: 7px solid transparent; padding: 0 0 10px; color: #49635B; font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 5.2vw, 80px); letter-spacing: -.025em; line-height: 1.15; text-align: left; cursor: pointer; min-height: 44px; white-space: nowrap; }
.customization__tabs button[aria-selected="true"]::after { content: '→'; position: absolute; left: calc(100% + 12px); top: .08em; font-family: var(--font-sans); font-weight: 400; font-size: .65em; }
.customization__tabs button[aria-selected="true"] { color: #17362F; border-color: #17362F; }
.customization__tabs button:hover { color: #17362F; }
.customization__tabs button:focus-visible, .customization__cta:focus-visible, .customization__panel:focus-visible { outline: 2px solid #17362F; outline-offset: 6px; }
.customization__panel { position: relative; border-left: 2px solid #EFF3EE; padding: clamp(48px, 5.2vw, 80px) 0 24px clamp(38px, 5vw, 76px); min-width: 0; }
.customization__description { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.1vw, 47px); line-height: 1.08; margin-bottom: 24px; }
.customization__cta { display: inline-flex; align-items: center; gap: 22px; color: #17362F; text-decoration: none; border: 1px solid #17362F; border-radius: 999px; padding: 8px 10px 8px 20px; min-height: 46px; }
.customization__cta span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #EFF3EE; background: #17362F; }
.customization__visual { position: relative; margin: 12px -12px 0 -20px; }
.customization__visual img { display: block; width: 100%; height: clamp(460px, 44vw, 676px); object-fit: contain; }
.customization__visual figcaption { position: absolute; right: 0; bottom: 32px; text-align: right; font-size: 12px; letter-spacing: .08em; }
@media (max-width: 767px) {
  .customization__grid { grid-template-columns: 1fr; }
  .customization__menu { padding: 40px 0 28px; }
  .customization__tabs { margin-top: 28px; gap: 16px; }
  .customization__tabs button { font-size: 34px; }
  .customization__tabs button[aria-selected="true"]::after { left: calc(100% + 10px); }
  .customization__panel { border-left: 0; border-top: 2px solid #EFF3EE; padding: 28px 0; }
  .customization__description { min-height: 0; }
  .customization__visual img { height: 390px; }
  .customization__visual { margin: 20px 0 0; }
  .customization__visual figcaption { position: static; }
}
.band { background: var(--navy-deep); color: #fff; }
.customization__menu { padding: 42px 28px 40px 0; }
.customization__eyebrow { margin-bottom: 16px; }
.customization h2 { font-size: clamp(26px, 2.2vw, 34px); }
.customization__tabs { margin-top: 38px; gap: 20px; }
.customization__tabs button { font-size: clamp(34px, 4vw, 60px); border-bottom-width: 4px; padding-bottom: 7px; }
.customization__panel { padding-top: 42px; padding-bottom: 20px; }
.customization__description { font-family: var(--font-sans); font-size: clamp(17px, 1.4vw, 21px); font-weight: 500; line-height: 1.45; max-width: 42ch; margin-bottom: 18px; }
.customization__visual { margin-top: 8px; }
.customization__visual img { height: clamp(300px, 25vw, 400px); }
.customization__visual figcaption { bottom: 12px; }
@media (max-width: 767px) {
  .customization__menu { padding: 30px 0 24px; }
  .customization__tabs { margin-top: 24px; gap: 12px; }
  .customization__tabs button { font-size: 32px; }
  .customization__panel { padding: 24px 0; }
  .customization__visual img { height: 310px; }
}
.band__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  align-items: center;
  padding-block: 72px 120px;
}
.band h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.band p { font-size: 18px; margin-bottom: 2rem; max-width: 46ch; }
.band__media {
  min-height: 380px;
  background: rgba(0,0,0,.25);
}

/* ==========================================================================
   9. 产品线滑块 ↔ 手风琴（Six Product Lines 双形态组件）
   ========================================================================== */
.products-more { background: #fff; }
.products-more h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.5vw, 40px);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}
.pm__desktop { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 2.5rem; }
.pm__tabs { display: flex; flex-direction: column; gap: .75rem; }
.pm__tab {
  display: flex; align-items: center; gap: .75rem;
  background: none; border: 1px solid var(--line);
  border-radius: 4px;
  padding: .75rem 1rem;
  cursor: pointer;
  text-align: left;
  font: 700 15px var(--font-sans);
  transition: border-color .2s, box-shadow .2s;
}
.pm__tab.is-active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.pm__tab i {
  width: 44px; height: 44px; flex: none;
  border-radius: 4px;
  background: linear-gradient(135deg, #d8c9a8, var(--gold));
}
.pm__panel { display: none; padding: 1rem 0; }
.pm__panel.is-active { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.pm__panel h3 { font-size: 26px; margin-bottom: 1rem; color: var(--navy); }
.pm__panel p { color: var(--ink); margin-bottom: 1.5rem; }
.pm__panel-img { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
/* 移动端手风琴 */
.pm__accordion { display: none; }
.pm__acc-item { border-bottom: 1px solid var(--line); }
.pm__acc-item button {
  width: 100%;
  background: none; border: 0;
  display: flex; justify-content: space-between; align-items: center;
  font: 700 18px var(--font-sans);
  padding: 1.25rem 0;
  cursor: pointer;
}
.pm__acc-panel { display: none; padding-bottom: 1.5rem; }
.pm__acc-item.is-open .pm__acc-panel { display: block; }
.pm__acc-item.is-open button svg { transform: rotate(180deg); }

/* ==========================================================================
   10. 质量测试三卡
   ========================================================================== */
.delivery { background: #B4472F; color: #FFF8EF; padding: clamp(48px, 6vw, 88px) 0; }
.delivery__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.delivery__eyebrow, .delivery__label { font-size: 13px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
.delivery__eyebrow { margin: 0 0 24px; }
.delivery h2 { font-family: var(--font-display); font-size: clamp(32px, 3.1vw, 48px); line-height: 1.12; font-weight: 600; margin: 0; }
.delivery__description { font-size: 19px; line-height: 1.55; margin: 28px 0; max-width: 32ch; }
.delivery__cta { display: inline-flex; align-items: center; gap: 24px; min-height: 48px; border: 1px solid currentColor; border-radius: 999px; padding: 12px 22px; color: inherit; text-decoration: none; font-size: 17px; }
.delivery__cta:hover { background: #FFF8EF; color: #943822; }
.delivery__cta:focus-visible, .delivery video:focus-visible { outline: 3px solid #FFF8EF; outline-offset: 5px; }
.delivery__media { min-width: 0; margin: 0; }
.delivery__media video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #6B3024; }
.delivery__media figcaption { margin-top: 14px; font-size: 14px; letter-spacing: .06em; }
.delivery__details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; border-top: 1px solid #e6b7a6; margin-top: 48px; padding-top: 28px; }
.delivery__details > div + div { border-left: 1px solid #e6b7a6; padding-left: 28px; }
.delivery__details h3 { font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 38px); font-weight: 600; line-height: 1.15; margin: 12px 0; }
.delivery__details p { margin-bottom: 0; font-size: 16px; line-height: 1.5; }
.delivery__details .delivery__label { font-size: 13px; }
@media (max-width: 900px) {
  .delivery__grid { grid-template-columns: 1fr; }
  .delivery__description { max-width: 48ch; }
}
@media (max-width: 600px) {
  .delivery__details { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .delivery__details > div + div { border-left: 0; border-top: 1px solid #e6b7a6; padding-left: 0; padding-top: 24px; }
}
.benefits { background: #fff; }
.benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.benefit {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2rem;
}
.benefit__img {
  height: 150px;
  margin-bottom: 1.5rem;
}
.benefit h3 { font-size: 22px; margin-bottom: .75rem; color: var(--navy); }
.benefit p { color: var(--ink); }

/* ==========================================================================
   11. 出口能力区（巨型标题 + 两张照片位）
   ========================================================================== */
.career { background: #fff; }
.career h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 5rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .005em;
  max-width: 22ch;
  margin-bottom: 1.5rem;
}
.career p { font-size: 18px; max-width: 60ch; margin-bottom: 2rem; }
.career__photos { display: flex; gap: 4rem; margin-top: 3rem; }
.career__photo { flex: 1; max-width: 500px; }
.career__photo .photo-frame { aspect-ratio: 3 / 2; margin-bottom: 1rem; }
.career__photo figcaption { color: var(--steel); font-size: 14px; }

/* ==========================================================================
   12. 业绩数字 + 询盘收尾带（深海蓝，每页共享）
   ========================================================================== */
.accolades {
  margin-top: 88px;
  background: var(--navy-deep);
  position: relative;
}
.accolades__inner {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 8px;
  padding: 40px 0;
}
.accolades__panel {
  background: var(--navy-deep);
  color: #fff;
  padding: 2.5rem;
}
.accolades__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.accolade__eyebrow {
  font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.65);
  margin-bottom: .5rem;
}
.accolade__title {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  color: var(--gold);
}
.accolade__year { font-size: 14px; color: rgba(255,255,255,.7); margin-top: .25rem; }
.accolades__panel--form h3 { font-size: 24px; margin-bottom: 1.25rem; }
.accolades select {
  width: 100%;
  padding: .85rem .75rem;
  border: 1px solid rgba(255,255,255,.5);
  background: var(--navy-deep);
  color: #fff;
  font: 500 16px var(--font-sans);
  border-radius: 4px;
  margin-bottom: 1rem;
}
.accolades select option { background: #fff; color: var(--ink); }
.accolades .btn { width: 100%; }

/* ==========================================================================
   13. FOOTER（暖灰五列）
   ========================================================================== */
.footer {
  background: var(--warm);
  min-height: 500px;
  font-size: 16px;
  line-height: 25px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 3fr 1.2fr 1.4fr;
  gap: 3rem;
  padding-block: 60px;
}
.footer__logo img { width: 184px; height: auto; margin-bottom: 1.5rem; }
.footer h4 { font-size: 15px; font-weight: 700; margin-bottom: .75rem; color: var(--navy); }
.footer a { color: var(--ink); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__legal {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  border-top: 1px solid var(--line);
  padding-block: 1.25rem;
  font-size: 14px;
}
.footer__legal span { margin-left: auto; color: var(--steel); }

/* ==========================================================================
   14. 内页模板
   ========================================================================== */
.inner-hero { padding-top: 160px; }
.inner-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--navy);
  margin-bottom: 1rem;
}
.inner-hero .lead { font-size: 22px; color: var(--steel); max-width: 70ch; }
.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 1rem;
}

/* ==========================================================================
   15. 响应式（断点 576 / 768 / 992 / 1200 / 1600）
   ========================================================================== */
@media (min-width: 768px) {
  :root { --gutter: 48px; }
}
@media (min-width: 1600px) {
  :root { --gutter: 72px; }
}

@media (max-width: 1199.98px) {
  .nav__items { display: none; }
  .nav__burger { display: inline-flex; }
  .mega__grid { grid-template-columns: 1fr; }
}

@media (max-width: 991.98px) {
  .process__stage { min-height: auto; }
  .process__pin { position: relative; height: auto; min-height: 90vh; }
  .process__obj { top: 60%; }
  .pm__desktop { display: none; }
  .pm__accordion { display: block; }
  .band__grid { grid-template-columns: 1fr; }
  .band__media { min-height: 260px; }
  .accolades__inner { grid-template-columns: 1fr; }
  .career__photos { flex-direction: column; gap: 2rem; }
  .spotlight__inner { grid-template-columns: 1fr; }
  .spotlight__img { display: none; }
}

@media (max-width: 767.98px) {
  .numbers__grid { grid-template-columns: 1fr; }
  .numbers__cards { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
  .benefits__grid { grid-template-columns: 1fr; }
  .accolades__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .utility__links { display: none; }
  .ticker__track { padding: 18px 0; } /* 手机端行距收窄 */
  .pm__panel.is-active { grid-template-columns: 1fr; }
  .process__title { font-size: 40px; }
  .hex-cta { width: 84px; height: 84px; }
  .hex-cta::after { inset: 22px; }
}

/* 无障碍：prefers-reduced-motion 全站降级 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .process__pin { position: relative; height: auto; min-height: 90vh; }
  .process__stage { min-height: auto; }
  .process__obj { transform: rotate(12deg); top: 60%; }
}

/* 焦点可见性 */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ==========================================================================
   16. 内页组件（产品规格 / 流程 / 表单）
   ========================================================================== */
/* 产品详情区：每产品线一个区块，白/暖灰交替 */
.prod-sec { padding-block: 64px; }
.prod-sec--alt { background: var(--warm); }
.prod-sec__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 3rem;
  align-items: center;
}
.prod-sec h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 1rem;
}
.prod-sec h2 .idx { color: var(--gold); margin-right: .5em; }
.prod-sec p { font-size: 17px; margin-bottom: 1.5rem; max-width: 56ch; }
.spec-list { border-top: 1px solid var(--line); }
.spec-list div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.spec-list dt { color: var(--steel); flex: none; }
.spec-list dd { margin: 0; text-align: right; font-weight: 500; }
.prod-sec__img { aspect-ratio: 4 / 3; height: auto; min-height: 0; }

/* 7 步流程 */
.steps {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1rem;
  counter-reset: step;
}
.step {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.5rem 1rem;
  position: relative;
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--gold);
}
.step h3 { font-size: 16px; margin: .75rem 0 .5rem; color: var(--navy); }
.step p { font-size: 14px; color: var(--steel); }

/* 8 工序 grid */
.proc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.proc {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.5rem;
  background: #fff;
}
.proc__num {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--gold);
}
.proc h3 { font-size: 18px; margin: .5rem 0 .4rem; color: var(--navy); }
.proc p { font-size: 14px; color: var(--steel); }

/* 联系表单 */
.contact-form { max-width: 640px; }
.form-note { font-size: 13px; color: var(--steel); margin-top: .75rem; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-field { margin-bottom: 1rem; }
.form-field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: .4rem;
  color: var(--navy);
}
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  padding: .8rem .75rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: 500 16px var(--font-sans);
  color: var(--ink);
  background: #fff;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.contact-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}
.contact-card {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.5rem;
  background: #fff;
}
.contact-card h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--steel);
  margin-bottom: .6rem;
}
.contact-card a, .contact-card p { font-size: 15px; color: var(--ink); text-decoration: none; }
.contact-card a:hover { text-decoration: underline; }

@media (max-width: 991.98px) {
  .prod-sec__grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .proc-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .form-row { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: 1fr; }
}

/* Product specifications from the supplied catalogue. */
.product-jumps { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 30px; }
.product-jumps a { color: inherit; text-underline-offset: 5px; font-size: 16px; }
.prod-sec { background: #f7f6f3; border-top: 1px solid #e5e3de; }
.product-concept { margin: 0; align-self: center; min-width: 0; isolation: isolate; }
.product-concept img { display: block; width: 100%; max-width: 600px; height: auto; margin-inline: auto; object-fit: contain; mix-blend-mode: multiply; mask-image: linear-gradient(to right, transparent, #000 2%, #000 98%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent); mask-composite: intersect; }
.product-concept figcaption { margin-top: 14px; font-size: 12px; line-height: 1.5; color: #56616b; text-align: center; }
#aerosol .product-concept { overflow: hidden; }
#aerosol .product-concept img { width: 690px; max-width: none; height: 460px; margin-left: calc(50% - 497px); mask-image: linear-gradient(to right, transparent 25%, #000 48%, #000 89%, transparent 100%), linear-gradient(to bottom, transparent, #000 12%, #000 84%, transparent); }
@media (max-width: 991.98px) {
  .product-concept { width: 100%; max-width: 620px; margin-inline: auto; }
}
@media (max-width: 767.98px) {
  .product-concept img { height: auto; }
  #aerosol .product-concept img { width: 480px; height: 320px; margin-left: calc(50% - 346px); }
}
.product-concepts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-self: start; }
.product-specifications { grid-column: 1 / -1; min-width: 0; }
.product-specifications h3 { font-size: 25px; margin-bottom: 12px; }
.spec-table-wrap { overflow-x: auto; margin-top: 24px; }
.product-spec-table { width: 100%; border-collapse: collapse; font-size: 16px; text-align: left; }
.product-spec-table caption { text-align: left; font-size: 14px; color: #56616b; margin-bottom: 12px; }
.product-spec-table th, .product-spec-table td { padding: 16px 20px; border-bottom: 1px solid #d6dcd8; line-height: 1.5; vertical-align: top; }
.product-spec-table thead { background: #16324f; color: #fff; }
.product-spec-table tbody tr:nth-child(even) { background: rgba(22,50,79,.035); }
.spec-note { color: #56616b; font-size: 15px; margin-top: 18px; }
#beverage { scroll-margin-top: 120px; }
#food-beverage-specs { scroll-margin-top: 120px; }
.product-material-info { margin-block: 32px; }
.product-material-info summary { cursor: pointer; padding: 20px 0; font-size: 17px; color: var(--steel); border-top: 1px solid var(--line); }
.product-material-info[open] .prod-sec__grid { padding-block: 24px; }
@media (max-width: 767.98px) {
  .product-spec-table { min-width: 600px; }
  .product-spec-table th, .product-spec-table td { padding: 13px 14px; }
  .product-concepts { grid-template-columns: 1fr; }
}

/* V1.5: first product only — silver aerosol editorial showcase. */
/* Approved product concepts share the centred copy column with aerosol. */
.spotlight--approved { --product-ink: #344d3d; color: var(--product-ink); }
.spotlight--approved[data-active-product="2"] { --product-ink: #144b3b; }
.spotlight--approved[data-active-product="3"] { --product-ink: #684c2d; }
.spotlight--approved[data-active-product="4"] { --product-ink: #075c60; }
.spotlight__bg--beverage { background: #f7f8f5; }
.spotlight__bg--beverage img { mask-image: none; }
.spotlight__bg--approved { background: #f4f3ed; }
.spotlight__bg--butane { background: #eff2ec; }
.spotlight__bg--ends { background: #f6f1e8; }
.spotlight__bg--approved img { position: absolute; width: min(46vw, 640px); height: auto; left: calc(50% + min(16vw, 225px)); top: 50%; transform: translate(-50%, -50%); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent); mask-composite: intersect; }
.spotlight--approved .spotlight__pause,
.spotlight--approved .spotlight__prog-label,
.spotlight--approved .spotlight__prog-item.is-active .spotlight__prog-label,
.spotlight--approved .aerosol-story h2,
.spotlight--approved .aerosol-story h2 em,
.spotlight--approved .aerosol-story__description,
.spotlight--approved .aerosol-story__note { color: var(--product-ink); }
.spotlight--approved .spotlight__prog-bar { background: #c6ccbf; }
.spotlight--approved .spotlight__prog-bar i { background: var(--product-ink); }
.spotlight--approved .aerosol-story__cta { color: var(--product-ink); border-color: var(--product-ink); }
.spotlight--approved .aerosol-story__cta:hover { color: white; background: var(--product-ink); }
@media (max-width: 991.98px) {
  .spotlight__bg--approved img { left: 50%; top: 88px; width: min(80%, 620px); transform: translateX(-50%); }
}
@media (max-width: 767.98px) {
  .spotlight__bg--approved img { top: 85px; width: min(95%, 400px); }
}
#aerosol-showcase { scroll-margin-top: 100px; }
.spotlight__bg--aerosol { background: #eef0f2; }
.spotlight__bg--aerosol img { position: absolute; right: 3%; top: 50%; transform: translateY(-50%); width: 72%; height: auto; max-height: 580px; object-fit: contain; object-position: right center; mask-image: linear-gradient(to right, transparent 0%, #000 35%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 16%, #000 82%, transparent 100%); mask-composite: intersect; }
.spotlight--aerosol { color: var(--navy); }
.spotlight--aerosol .spotlight__pause,
.spotlight--aerosol .spotlight__prog-label,
.spotlight--aerosol .spotlight__prog-item.is-active .spotlight__prog-label { color: var(--navy); }
.spotlight--aerosol .spotlight__prog-bar { background: rgba(22,50,79,.2); }
.spotlight--aerosol .spotlight__prog-bar i { background: var(--navy); }
.aerosol-story { position: relative; z-index: 2; padding-top: 240px; pointer-events: none; }
.aerosol-story[hidden], #spotGeneric[hidden] { display: none; }
.aerosol-story__eyebrow { margin: 0 0 26px; font-size: 13px; font-weight: 600; letter-spacing: .16em; }
.aerosol-story h2 { margin: 0; color: var(--navy); font-family: 'Barlow Condensed', sans-serif; font-size: clamp(48px,4.4vw,64px); font-weight: 600; line-height: 1.05; letter-spacing: -.025em; }
.aerosol-story h2 em { font-style: normal; color: #586d80; }
.aerosol-story__description { max-width: 370px; margin: 28px 0; font-size: 18px; line-height: 1.6; color: #425569; }
.aerosol-story__cta { display: inline-flex; align-items: center; gap: 36px; padding: 16px 22px; border: 1px solid var(--navy); border-radius: 2px; color: var(--navy); font-size: 17px; font-weight: 600; text-decoration: none; pointer-events: auto; transition: color .2s, background .2s; }
.aerosol-story__cta:hover { background: var(--navy); color: white; }
.aerosol-story__cta span { font-size: 23px; line-height: 1; }
.aerosol-story__note { margin-top: 40px; font-size: 11px; letter-spacing: .12em; color: #526579; }
@media (min-width: 992px) {
  /* Both columns share the page centre; account for empty space in the image. */
  .spotlight__bg--aerosol img { left: calc(50% + min(16vw, 225px)); right: auto; width: min(60vw, 870px); max-height: none; transform: translate(-72%, -50%); }
  .aerosol-story { width: min(32vw, 360px); max-width: none; margin-left: max(5%, calc(50% - 450px)); margin-right: 0; padding: 240px 0 0; }
  .aerosol-story h2 { font-size: clamp(42px, 4vw, 60px); overflow-wrap: normal; }
  .aerosol-story__description { max-width: 100%; }
}
@media (max-width: 991.98px) {
  .spotlight--aerosol .spotlight__bg--aerosol { height: 100%; }
  .spotlight--aerosol .spotlight__bg--aerosol img { top: 90px; right: calc(50% - 155px); width: 680px; max-width: none; max-height: none; transform: none; object-fit: contain; }
  .spotlight--aerosol { background: #eef0f2; }
  .aerosol-story { width: calc(100% - 48px); max-width: 600px; margin-left: auto; margin-right: auto; padding: 530px 0 0; transform: none; }
  .aerosol-story h2 { font-size: 48px; }
  .aerosol-story h2 br { display: none; }
  .aerosol-story h2 em { display: block; }
  .aerosol-story__eyebrow { margin-bottom: 16px; }
  .aerosol-story__description { max-width: 530px; margin: 18px 0 22px; }
  .aerosol-story__note { margin-top: 22px; }
}
@media (max-width: 767.98px) {
  .spotlight--aerosol .spotlight__bg--aerosol { top: 0; height: 100%; }
  .spotlight--aerosol .spotlight__bg--aerosol img { top: 68px; width: 420px; right: calc(50% - 93px); }
  .aerosol-story { padding-top: 358px; }
  .aerosol-story h2 { font-size: 38px; }
  .aerosol-story__eyebrow { font-size: 11px; margin-bottom: 13px; }
  .aerosol-story__description { font-size: 16px; line-height: 1.5; margin: 18px 0; }
  .aerosol-story__cta { padding: 13px 18px; font-size: 16px; }
  .aerosol-story__note { font-size: 9px; margin-top: 20px; }
}

/* Factory aerial tour: click to play, preserve the full frame. */
.factory-aerial { margin: 0; min-width: 0; align-self: center; }
.factory-aerial video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #17232b; }
.factory-aerial figcaption { margin-top: 12px; color: #56616b; font-size: 13px; line-height: 1.5; }

#testing .factory-detail-photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* OEM project brief and real workshop photograph */
.oem-material-photo { margin: 0; min-width: 0; align-self: center; }
.oem-material-photo img { display: block; width: 100%; height: auto; }
.oem-material-photo figcaption { margin-top: 12px; color: #56616b; font-size: 13px; }
.oem-project-brief { min-width: 0; padding: 28px; background: #f7f6f3; border-top: 3px solid var(--navy); }
.oem-project-brief h3 { margin: 0 0 20px; font-size: 24px; }
.oem-project-brief ul { list-style: none; padding: 0; margin: 0; }
.oem-project-brief li { padding: 14px 0; border-top: 1px solid var(--line); }
.oem-project-brief strong, .oem-project-brief span { display: block; }
.oem-project-brief span { margin-top: 5px; line-height: 1.6; }
.oem-project-brief .spec-note { margin: 18px 0 0; font-size: 14px; }

.company-photo { margin: 0; min-width: 0; align-self: center; }
.company-photo img { display: block; width: 100%; height: auto; }
.company-photo figcaption { margin-top: 12px; font-size: 13px; line-height: 1.5; color: inherit; }
.contact-card a, .contact-form, .oem-project-brief { overflow-wrap: anywhere; }

.spec-scroll-hint { display: none; }
@media (max-width: 767.98px) {
  .prod-sec .spec-scroll-hint { display: block; font-size: 14px; line-height: 1.5; color: #405364; margin: 16px 0 8px; }
  .spec-scroll-hint + .spec-table-wrap { margin-top: 8px; }
}