:root {
  --ink: #0c1b2a;
  --ink-soft: #15334d;
  --steel: #526475;
  --line: #dbe2e8;
  --paper: #f5f7f8;
  --white: #fff;
  --red: #bd1722;
  --red-dark: #96131b;
  --shell: min(1180px, calc(100vw - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: Inter, "Noto Sans SC", "Microsoft YaHei", "Yu Gothic", Arial, sans-serif; line-height: 1.65; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; }
button, input, textarea { font: inherit; }
.shell { width: var(--shell); margin-inline: auto; }
.skip-link { position: fixed; z-index: 1000; left: 16px; top: -80px; padding: 10px 16px; background: var(--white); }
.skip-link:focus { top: 16px; }
.utility { background: var(--ink); color: #d9e2e9; font-size: .78rem; letter-spacing: .02em; }
.utility__inner { min-height: 34px; display: flex; align-items: center; gap: 24px; }
.languages { margin-left: auto; display: flex; gap: 14px; }
.languages a { opacity: .65; }
.languages a[aria-current="true"] { opacity: 1; color: var(--white); }
.site-header { position: sticky; z-index: 20; top: 0; background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(12,27,42,.09); backdrop-filter: blur(14px); }
.header__inner { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 48px; height: 48px; object-fit: contain; }
.brand span { display: grid; }
.brand strong { font-size: .92rem; }
.brand small { color: var(--red); font-weight: 700; letter-spacing: .18em; }
.main-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); font-size: .9rem; font-weight: 600; }
.main-nav__link { display: block; padding-block: 28px; border-bottom: 2px solid transparent; }
.main-nav__link:hover, .main-nav__link:focus { color: var(--red); border-color: var(--red); }
.main-nav__dropdown { position: relative; }
.main-nav__dropdown > .main-nav__link::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.main-nav__sub { position: absolute; z-index: 30; top: calc(100% - 1px); left: 50%; min-width: 180px; padding: 10px 0; opacity: 0; visibility: hidden; background: var(--white); border-top: 2px solid var(--red); box-shadow: 0 16px 36px rgba(12,27,42,.16); transform: translate(-50%, 10px); transition: .18s ease; }
.main-nav__sub a { display: block; padding: 10px 18px; white-space: nowrap; color: var(--ink); font-size: .84rem; font-weight: 500; }
.main-nav__sub a:hover, .main-nav__sub a:focus { color: var(--red); background: var(--paper); }
.main-nav__dropdown:hover .main-nav__sub, .main-nav__dropdown:focus-within .main-nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.main-nav .nav-contact { padding: 10px 18px; color: var(--white); background: var(--red); border: 0; }
.menu-button { display: none; border: 1px solid var(--line); background: transparent; padding: 9px 13px; }
.hero { min-height: calc(100vh - 118px); position: relative; display: grid; align-items: center; overflow: hidden; color: var(--white); background: var(--ink); }
.hero__video, .hero__veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__video { object-fit: cover; }
.hero__veil { background: linear-gradient(90deg, rgba(6,20,33,.9) 0%, rgba(6,20,33,.56) 52%, rgba(6,20,33,.2) 100%), linear-gradient(0deg, rgba(6,20,33,.35), transparent); }
.hero__content { position: relative; z-index: 1; padding-block: 100px; }
.eyebrow { margin: 0 0 14px; color: var(--red); font-size: .75rem; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
.hero .eyebrow { color: #ffb1b7; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2, h3 { margin-top: 0; line-height: 1.16; }
h1 { max-width: 850px; margin-bottom: 22px; font-size: clamp(2.8rem, 7vw, 6.7rem); letter-spacing: -.045em; }
.hero__content > p:not(.eyebrow) { max-width: 660px; color: #dbe3e9; font-size: clamp(1rem, 1.6vw, 1.25rem); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 22px; border: 1px solid transparent; font-weight: 700; transition: .2s ease; }
.button--primary { color: var(--white); background: var(--red); }
.button--primary:hover { background: var(--red-dark); transform: translateY(-1px); }
.button--ghost { color: var(--white); border-color: rgba(255,255,255,.65); }
.button--ghost:hover { background: var(--white); color: var(--ink); }
.section { padding-block: clamp(72px, 9vw, 132px); }
.section h2, .page-hero h1 { margin-bottom: 24px; font-size: clamp(2.1rem, 4.5vw, 4.6rem); letter-spacing: -.035em; }
.split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 9vw, 140px); }
.split--center { align-items: center; }
.lead { margin-top: 0; color: var(--steel); font-size: clamp(1.1rem, 1.8vw, 1.4rem); }
.text-link { display: inline-block; margin-top: 18px; color: var(--red); font-weight: 800; }
.text-link--light { color: var(--white); }
.section--ink { background: var(--ink); color: var(--white); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: 42px; }
.capability-list-section { background: linear-gradient(180deg, #f8fafc 0%, #fff 100%); }
.capability-card { position: relative; display: flex; min-width: 0; overflow: hidden; flex-direction: column; border: 1px solid #dfe7ef; border-radius: 16px; background: #fff; box-shadow: 0 12px 34px rgba(12,43,82,.08); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.capability-card::before { content: ""; position: absolute; z-index: 2; inset: 0 auto auto 0; width: 100%; height: 4px; background: linear-gradient(90deg, #bd1722, #d7a544); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.capability-card:hover, .capability-card:focus-visible { border-color: rgba(12,45,94,.3); box-shadow: 0 22px 48px rgba(12,43,82,.16); transform: translateY(-6px); }
.capability-card:hover::before, .capability-card:focus-visible::before { transform: scaleX(1); }
/* height:auto neutralises the intrinsic height attribute so aspect-ratio governs the crop. */
.capability-card .card-cover { width: 100%; height: auto; aspect-ratio: 4 / 3; margin: 0; object-fit: cover; transition: transform .45s ease; }
.capability-card:hover .card-cover, .capability-card:focus-visible .card-cover { transform: scale(1.035); }
.capability-card__content { position: relative; display: flex; min-height: 250px; flex: 1; flex-direction: column; padding: 24px; }
.capability-card__index { color: #bd1722; font-size: .75rem; font-weight: 800; letter-spacing: .16em; }
.capability-card__title { margin-top: 8px; color: var(--ink); font-size: 1.25rem; line-height: 1.35; }
.capability-card__summary { margin-top: 18px; color: var(--steel); font-size: .93rem; line-height: 1.75; }
.card-arrow { display: grid; width: 38px; height: 38px; margin-top: auto; align-self: flex-end; place-items: center; color: #0c2d5e; border: 1px solid #d5e0ea; border-radius: 50%; font-size: 1.1rem; transition: .2s ease; }
.capability-card:hover .card-arrow, .capability-card:focus-visible .card-arrow { color: #fff; border-color: #0c2d5e; background: #0c2d5e; transform: translate(2px,-2px); }
.industry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 42px; }
.industry-card { min-height: 210px; padding: 26px; background: var(--paper); border-top: 3px solid var(--red); }
.industry-card span { display: block; width: 38px; height: 38px; margin-bottom: 76px; border: 1px solid var(--line); border-radius: 50%; }
.industry-card h3 { margin: 0; font-size: 1.1rem; }
.contact-band { background: #edf1f4; }
.contact-band__details { display: grid; gap: 9px; justify-items: start; }
.contact-band__details a:not(.button) { font-size: 1.15rem; font-weight: 700; }
/* Slides under the sticky header so its white-on-transparent nav sits on the dark hero,
   matching the home page .hero. Variants tune --page-hero-pad, never padding-block. */
.page-hero {
  --page-hero-offset: calc(var(--public-topbar-height, 40px) + var(--public-header-height, 76px));
  --page-hero-pad: clamp(80px, 12vw, 160px);
  margin-top: calc(-1 * var(--page-hero-offset));
  padding-block: calc(var(--page-hero-pad) + var(--page-hero-offset)) var(--page-hero-pad);
  color: var(--white);
  background: linear-gradient(120deg, var(--ink), var(--ink-soft));
}
.page-hero h1 { margin-bottom: 18px; }
.page-hero p:last-child { max-width: 720px; color: #cdd8e1; font-size: 1.15rem; }
.content-placeholder { display: grid; grid-template-columns: 120px 1fr; gap: 46px; max-width: 920px; }
.placeholder-index { color: var(--red); font-weight: 800; }
.content-placeholder h2 { font-size: clamp(2rem, 4vw, 3.7rem); }
.muted { color: var(--steel); }
.contact-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(44px, 8vw, 100px); }
.contact-panel dl { margin-block: 32px; }
.contact-panel dl > div { padding-block: 16px; border-bottom: 1px solid var(--line); }
.contact-panel dt { color: var(--steel); font-size: .78rem; }
.contact-panel dd { margin: 4px 0 0; font-weight: 700; }
.enquiry-form { padding: clamp(26px, 5vw, 52px); background: var(--paper); }
.enquiry-form label { display: grid; gap: 7px; margin-top: 16px; color: var(--steel); font-size: .85rem; }
.enquiry-form input, .enquiry-form textarea { width: 100%; padding: 12px; border: 1px solid var(--line); background: var(--white); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.enquiry-form button { margin-top: 20px; }
.field-error, .form-errors { display: block; color: #a20e18; font-size: .82rem; }
.form-success { padding: 12px 14px; color: #14532d; background: #dcfce7; }
.consent { grid-template-columns: auto 1fr !important; align-items: center; }
.consent input { width: auto; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.site-footer { padding-top: 62px; color: #c5d0d8; background: #081521; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.footer__grid > div { display: grid; align-content: start; gap: 8px; }
.footer__grid p { max-width: 520px; margin: 6px 0 0; }
.footer__bottom { margin-top: 46px; padding-block: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: .78rem; }

@media (max-width: 1100px) {
  .header__inner { min-height: 72px; }
  .menu-button { display: block; }
  .main-nav { display: none; position: absolute; top: 72px; left: 0; right: 0; padding: 16px 20px 26px; flex-direction: column; align-items: stretch; background: var(--white); border-bottom: 1px solid var(--line); }
  .main-nav.is-open { display: flex; }
  .main-nav__link { padding: 10px 0; }
  .main-nav__dropdown > .main-nav__link::after { display: none; }
  .main-nav__sub { position: static; min-width: 0; padding: 0 0 4px 16px; opacity: 1; visibility: visible; border: 0; box-shadow: none; transform: none; }
  .main-nav__sub a { padding: 7px 0; color: var(--steel); font-size: .8rem; }
  .main-nav .nav-contact { padding: 12px 16px; text-align: center; }
  .card-grid, .industry-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  :root { --shell: min(100% - 28px, 1180px); }
  .utility__inner > span, .utility__inner > a { display: none; }
  .languages { margin-left: 0; }
  .brand strong { max-width: 220px; font-size: .78rem; }
  .brand img { width: 42px; height: 42px; }
  .hero { min-height: 680px; }
  .hero__veil { background: linear-gradient(0deg, rgba(6,20,33,.92), rgba(6,20,33,.35)); }
  .split, .contact-layout, .footer__grid, .content-placeholder { grid-template-columns: 1fr; }
  .card-grid, .industry-grid { grid-template-columns: 1fr; }
  .capability-card { min-height: 190px; }
  .industry-card { min-height: 160px; }
  .industry-card span { margin-bottom: 44px; }
  .section-heading { align-items: start; flex-direction: column; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .footer__grid { gap: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* ---- Database-driven content pages (capabilities / news / downloads) ---- */
.article-body { max-width: 780px; line-height: 1.8; }
.article-body h2 { margin: 1.6em 0 .6em; }
.article-body h3 { margin: 1.4em 0 .5em; }
.article-body p { margin: 0 0 1em; }
.article-body img { max-width: 100%; height: auto; }
.article-body ul, .article-body ol { margin: 0 0 1em 1.4em; }
/* 后台富文本编辑器插入的内容 */
.article-body h1 { margin: 1.6em 0 .6em; font-size: 1.5rem; }
.article-body video { display: block; width: 100%; max-width: 780px; height: auto; margin: 1.4em 0; background: #000; }
.article-body blockquote { margin: 1.2em 0; padding: 8px 0 8px 16px; border-left: 3px solid #bd1722; color: #40505f; }
.article-body pre { margin: 1.2em 0; padding: 14px 16px; overflow-x: auto; background: #f4f6f8; border-radius: 6px; }
.article-body pre code { font-size: .9rem; }
.article-body table { border-collapse: collapse; margin: 1.2em 0; font-size: .92rem; }
.article-body table th, .article-body table td { border: 1px solid #dde3e9; padding: 8px 10px; }
.article-body hr { margin: 1.8em 0; border: 0; border-top: 1px solid #e4e9ee; }

.filter-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.filter-tabs a { padding: 8px 18px; border: 1px solid #d5dbe1; border-radius: 999px; color: #40505f; font-size: .95rem; }
.filter-tabs a.active { color: #fff; background: #0c1b2a; border-color: #0c1b2a; }

.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.news-card { display: block; padding: 26px; background: #fff; border: 1px solid #e4e9ee; transition: box-shadow .2s, transform .2s; }
.news-card:hover { box-shadow: 0 12px 30px rgba(12,27,42,.1); transform: translateY(-2px); }
.news-card h3 { margin: 12px 0 8px; }
.news-card__cover { display: block; width: calc(100% + 52px); height: 190px; margin: -26px -26px 22px; object-fit: cover; }
.article-cover { display: block; width: min(100%, 900px); height: auto; max-height: 520px; margin: 0 auto 32px; object-fit: cover; }
.download-cover { flex: 0 0 96px; width: 96px; height: 72px; object-fit: cover; border-radius: 6px; }
.news-meta { display: flex; align-items: center; gap: 14px; color: #7a8794; font-size: .85rem; }
.news-tag { padding: 2px 10px; background: #eef2f5; border-radius: 999px; color: #40505f; }

.pager { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 40px; color: #40505f; }
.pager a { color: #bd1722; font-weight: 600; }

.download-group-title { margin: 36px 0 16px; padding-bottom: 10px; border-bottom: 2px solid #eef2f5; }
.download-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.download-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; background: #fff; border: 1px solid #e4e9ee; }
.download-info p { margin: 6px 0; }
.download-file { color: #7a8794; }
.download-lang { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #eef2f7; color: #52616f; font-size: .82em; }
@media (max-width: 640px) { .download-row { flex-direction: column; align-items: flex-start; } }

/* Spec tables inside capability / news article bodies */
.article-body .spec-table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .92rem; }
.article-body .spec-table th, .article-body .spec-table td { border: 1px solid #dde3e9; padding: 8px 10px; text-align: left; }
.article-body .spec-table thead th { background: #f4f6f8; font-weight: 600; }
.article-body .spec-table tbody tr:nth-child(even) { background: #fafbfc; }
.article-body { overflow-x: auto; }

.capability-detail .shell { width: min(1320px, calc(100% - 40px)); }
.capability-detail .detail-cover {
  display: block;
  width: min(100%, 980px);
  height: auto;
  max-height: 560px;
  margin: 0 auto clamp(28px, 5vw, 56px);
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 22px 56px rgba(12, 43, 82, .14);
}
.capability-detail .detail-cover--legacy {
  width: min(100%, 680px);
  aspect-ratio: 40 / 31;
}
.capability-detail { background: linear-gradient(180deg, #f8fafc 0%, #fff 42%); }
.capability-detail .article-body { max-width: none; overflow: visible; padding-bottom: 10px; }
.capability-detail .article-body > h2,
.capability-detail .article-body > h3,
.capability-detail .article-body > p { max-width: 900px; margin-right: auto; margin-left: auto; }
.capability-detail .capability-scope {
  padding: 22px 26px;
  border: 1px solid #dce7f2;
  border-left: 4px solid #d39b36;
  border-radius: 0 14px 14px 0;
  background: linear-gradient(90deg, #f2f6fb, #f8fafc);
  color: #334d6e;
  box-shadow: 0 10px 28px rgba(12,43,82,.06);
}
.capability-detail .capability-scope strong { color: #0c2d5e; }
.table-scroll-hint { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-bottom: 10px !important; color: #718298; font-size: .78rem; }
.table-scroll-hint span { display: grid; width: 26px; height: 26px; place-items: center; color: #0c2d5e; border-radius: 50%; background: #eaf0f7; font-size: .9rem; }
.spec-table-shell { width: 100%; max-width: 1320px; margin: 0 auto; overflow-x: auto; border: 1px solid #d6e0ea; border-radius: 16px; background: #fff; box-shadow: 0 18px 44px rgba(12,43,82,.1); scrollbar-color: #97a9ba #edf2f6; scrollbar-width: thin; }
.spec-table-shell:focus-visible { outline: 3px solid rgba(49,95,148,.25); outline-offset: 3px; }
.capability-detail .spec-table-shell .spec-table {
  width: 100%;
  min-width: 860px;
  margin: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  box-shadow: none;
}
.capability-detail .spec-table-shell .spec-table--wide { min-width: 1180px; }
.capability-detail .spec-table-shell .spec-table th,
.capability-detail .spec-table-shell .spec-table td { min-width: 78px; padding: 14px 12px; border: 0; border-right: 1px solid #dce4ec; border-bottom: 1px solid #dce4ec; text-align: center; vertical-align: middle; }
.capability-detail .article-body .spec-table-shell .spec-table thead th { min-width: 78px; padding: 13px 12px; color: #fff; border: 0; border-right: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); background: #0c2d5e; text-align: center; vertical-align: middle; }
.capability-detail .spec-table-shell .spec-table thead tr:last-child th { background: #164476; }
.capability-detail .spec-table-shell .spec-table tbody tr:nth-child(even) td { background: #f6f9fc; }
.capability-detail .spec-table-shell .spec-table tbody tr:hover td { background: #edf4fb; }
.capability-detail .spec-table-shell .spec-table tbody td:first-child { position: sticky; z-index: 2; left: 0; color: #0c2d5e; background: #fff; font-weight: 750; box-shadow: 8px 0 16px rgba(12,43,82,.05); }
.capability-detail .spec-table-shell .spec-table tbody tr:nth-child(even) td:first-child { background: #f6f9fc; }
.capability-detail .spec-table-shell .spec-table tbody tr:hover td:first-child { background: #edf4fb; }
.capability-detail .spec-table-shell .spec-table th:nth-child(2),
.capability-detail .spec-table-shell .spec-table td:nth-child(2) { min-width: 180px; text-align: left; }
.capability-actions { max-width: 1320px; margin: clamp(28px,4vw,48px) auto 0; }
.capability-back { display: inline-flex; min-height: 48px; align-items: center; gap: 10px; padding: 0 20px; color: #0c2d5e; border: 1px solid #cdd9e5; border-radius: 999px; background: #fff; box-shadow: 0 8px 24px rgba(12,43,82,.08); font-weight: 750; transition: .2s ease; }
.capability-back > span:first-child { font-size: 1.15rem; transition: transform .2s ease; }
.capability-back:hover, .capability-back:focus-visible { color: #fff; border-color: #0c2d5e; background: #0c2d5e; box-shadow: 0 12px 28px rgba(12,45,94,.2); transform: translateY(-2px); }
.capability-back:hover > span:first-child, .capability-back:focus-visible > span:first-child { transform: translateX(-3px); }
@media (max-width: 720px) {
  .capability-detail .shell { width: min(100% - 24px, 1320px); }
  .capability-detail .detail-cover { border-radius: 12px; }
  .capability-detail .article-body { padding-bottom: 8px; }
  .capability-detail .capability-scope { padding: 18px; }
  .spec-table-shell { border-radius: 12px; }
  .capability-detail .spec-table-shell .spec-table { min-width: 820px; font-size: .82rem; }
  .capability-detail .spec-table-shell .spec-table--wide { min-width: 1080px; }
  .capability-detail .spec-table-shell .spec-table th,
  .capability-detail .spec-table-shell .spec-table td { padding: 11px 10px; }
  .capability-back { width: 100%; justify-content: center; }
}

/* About page facts */
.facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 28px; }
.fact { padding: 20px 22px; background: rgba(255,255,255,.06); border-left: 3px solid #bd1722; }
.fact dt { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; opacity: .7; margin-bottom: 8px; }
.fact dd { margin: 0; line-height: 1.6; }
.page-hero--contact { --page-hero-pad: clamp(64px, 8vw, 108px); }
.contact-page-section {
  position: relative;
  overflow: hidden;
  padding-block: clamp(58px, 7vw, 96px);
  background:
    radial-gradient(circle at 8% 15%, rgba(12,45,94,.07), transparent 28%),
    radial-gradient(circle at 94% 72%, rgba(211,155,54,.09), transparent 24%),
    #f4f7fb;
}
.contact-page-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(12,45,94,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(12,45,94,.035) 1px, transparent 1px); background-size: 64px 64px; }
.contact-page-section > * { position: relative; }
.contact-page-section .contact-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 58px); align-items: start; }
.contact-panel--home-style { padding: clamp(30px, 4.5vw, 58px); color: #fff; border-radius: 20px; background: linear-gradient(145deg, #071d39 0%, #0c2d5e 68%, #153f76 100%); box-shadow: 0 24px 65px rgba(7,29,57,.2); }
.contact-panel--home-style .eyebrow { color: #d9a33f; }
.contact-panel--home-style h2 { margin-bottom: 14px; font-size: clamp(2rem, 3.2vw, 3.5rem); }
.contact-panel__lead { margin: 0; color: rgba(255,255,255,.7); line-height: 1.8; }
.contact-info-list { display: grid; gap: 12px; margin: 30px 0 26px; }
.contact-panel .contact-info-card { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 15px; align-items: center; margin: 0; padding: 16px 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.06); transition: .2s ease; }
.contact-panel .contact-info-card:hover, .contact-panel .contact-info-card:focus-within { border-color: rgba(211,155,54,.5); background: rgba(255,255,255,.1); transform: translateX(4px); }
.contact-info-card__icon { display: grid; width: 42px; height: 42px; place-items: center; color: #e0aa45; border-radius: 50%; background: rgba(211,155,54,.12); }
.contact-info-card__icon svg { width: 21px; height: 21px; }
.contact-panel .contact-info-card dt { color: rgba(255,255,255,.55); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.contact-panel .contact-info-card dd { margin: 3px 0 0; color: #fff; font-size: .96rem; font-weight: 650; line-height: 1.55; }
.contact-panel .contact-info-card .muted { color: rgba(255,255,255,.58); font-size: .78rem; font-weight: 400; }
.enquiry-form--home-style { padding: clamp(30px, 4.5vw, 58px); border: 1px solid #dce5ef; border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: 0 24px 65px rgba(12,45,94,.1); }
.enquiry-form--home-style .eyebrow { margin-bottom: 10px; color: #c18b2d; }
.enquiry-form--home-style h2 { margin-bottom: 10px; color: #0c2d5e; font-size: clamp(2rem, 3vw, 3.25rem); }
.enquiry-form__lead { margin: 0 0 24px; color: #718298; }
.enquiry-form--home-style label { color: #344b66; font-weight: 650; }
.enquiry-form--home-style .field-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #344b66; }
.enquiry-form--home-style .field-label em { padding: 2px 7px; color: #a66f18; border-radius: 999px; background: #fff3da; font-size: .66rem; font-style: normal; font-weight: 750; letter-spacing: .04em; line-height: 1.5; }
.enquiry-form--home-style .field-label .field-label__optional { color: #718298; background: #edf2f7; font-weight: 650; }
.enquiry-form--home-style input:not([type="checkbox"]), .enquiry-form--home-style textarea { padding: 13px 14px; border: 1px solid #d7e1ec; border-radius: 8px; background: #f7f9fc; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.enquiry-form--home-style input:focus, .enquiry-form--home-style textarea:focus { border-color: #315f94; background: #fff; box-shadow: 0 0 0 4px rgba(49,95,148,.1); }
.enquiry-form--home-style textarea { min-height: 142px; resize: vertical; }
.enquiry-form--home-style .button { width: 100%; margin-top: 24px; border-radius: 8px; background: linear-gradient(135deg, #bd872e, #d7a544); box-shadow: 0 10px 24px rgba(189,135,46,.24); }
.enquiry-form--home-style .button:hover { background: linear-gradient(135deg, #aa7625, #c59435); }
.enquiry-form--home-style .consent a { color: #8f641b; text-decoration: underline; text-underline-offset: 3px; }
.enquiry-form--home-style .consent a:hover, .enquiry-form--home-style .consent a:focus-visible { color: #0c2d5e; }
.contact-map-wide { margin-top: clamp(34px, 5vw, 64px); }
.contact-map-photo { position: relative; display: block; min-height: clamp(330px, 38vw, 480px); overflow: hidden; border-radius: 20px; background: #dfe7ef; box-shadow: 0 24px 65px rgba(7,29,57,.18); }
.contact-map-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,25,49,.82) 0%, rgba(5,25,49,.28) 45%, transparent 72%); }
.contact-map-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.84) contrast(1.04); transition: transform .7s ease; }
.contact-map-photo:hover img { transform: scale(1.025); }
.contact-map-photo__caption { position: absolute; z-index: 1; left: clamp(24px, 5vw, 64px); bottom: clamp(24px, 5vw, 62px); display: grid; max-width: min(520px, calc(100% - 48px)); padding: 0; color: #fff; }
.contact-map-photo__caption small { margin-bottom: 12px; color: #e0aa45; font-size: .72rem; font-style: normal; font-weight: 800; letter-spacing: .16em; }
.contact-map-photo__caption strong { font-size: clamp(1.25rem, 2.4vw, 2.2rem); line-height: 1.45; }
.contact-map-photo__caption em { margin-top: 18px; color: rgba(255,255,255,.78); font-size: .88rem; font-style: normal; }
@media (max-width: 820px) {
  .contact-page-section .contact-layout { grid-template-columns: 1fr; }
  .contact-map-photo { min-height: 380px; }
}
@media (max-width: 560px) {
  .page-hero--contact { --page-hero-pad: 64px; }
  .contact-panel--home-style, .enquiry-form--home-style, .contact-map-photo { border-radius: 14px; }
  .contact-panel--home-style, .enquiry-form--home-style { padding: 26px 20px; }
  .contact-panel--home-style { padding-right: 54px; }
  .contact-panel .contact-info-card { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .contact-info-card__icon { width: 36px; height: 36px; }
  .contact-panel .contact-info-card dd { font-size: .9rem; }
  .contact-map-photo { min-height: 340px; }
  .contact-map-photo::after { background: linear-gradient(0deg, rgba(5,25,49,.88), rgba(5,25,49,.12) 75%); }
}

/* Industries sectors */
.page-hero--story,
.page-hero--philosophy,
.page-hero--quality { position: relative; isolation: isolate; overflow: hidden; background-size: cover; background-position: center; }
.page-hero--story { background-image: linear-gradient(90deg, rgba(5,24,44,.95) 0%, rgba(5,31,57,.84) 54%, rgba(5,31,57,.45) 100%), url('/home/0.webp'); }
.page-hero--philosophy { background-image: linear-gradient(90deg, rgba(5,24,44,.96), rgba(5,31,57,.7)), url('/home/11.jpg'); }
.page-hero--quality { background-image: radial-gradient(circle at 82% 18%, rgba(211,155,54,.18), transparent 28%), linear-gradient(120deg, #071d39, #0c2d5e); }
.page-hero--story::after,
.page-hero--philosophy::after,
.page-hero--quality::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px); background-size: 72px 72px; }
.page-hero--story .shell,
.page-hero--philosophy .shell,
.page-hero--quality .shell { position: relative; }

.about-hero { position: relative; overflow: hidden; color: #163a7a; background: #eaf4ff; }
.about-hero::after { content: ""; position: absolute; right: -8%; bottom: -62%; width: 72%; height: 150%; border: 3px solid rgba(63,140,255,.22); border-radius: 50%; transform: rotate(-9deg); box-shadow: 0 -28px 0 rgba(255,255,255,.7), 0 -56px 0 rgba(63,140,255,.08); }
.about-hero__inner { position: relative; z-index: 1; min-height: 270px; padding-top: 84px; }
.about-hero h1 { margin: 8px 0 0; font-size: clamp(2.6rem,6vw,5rem); letter-spacing: -.06em; }
.about-hero__line { display: block; width: 58px; height: 4px; margin-top: 20px; background: #f0c330; }
.about-profile { overflow: hidden; background: linear-gradient(180deg,#f7fbff,#fff); }
.about-profile__inner { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr); gap: clamp(40px,7vw,100px); align-items: center; }
.about-profile__copy h2 { margin: 8px 0 28px; color: #163a7a; font-size: clamp(1.8rem,3.2vw,3rem); letter-spacing: -.04em; }
.about-profile__paragraph { margin: 0 0 22px; color: #4b5d73; font-size: 1rem; line-height: 1.9; }
.about-profile__paragraph:first-of-type { color: #263e57; font-size: 1.08rem; }
.about-profile__visual { position: relative; padding: 18px 18px 58px 0; }
.about-profile__visual::before { content: ""; position: absolute; inset: 0 0 34px 36px; border: 1px solid rgba(31,95,191,.2); background: #dceeff; transform: rotate(4deg); }
.about-profile__visual img { position: relative; width: 100%; height: 470px; object-fit: cover; box-shadow: 0 22px 50px rgba(22,58,122,.16); }
.about-profile__badge { position: absolute; right: -14px; bottom: 20px; display: grid; width: 132px; height: 132px; place-content: center; color: #fff; border-radius: 50%; background: #1f5fbf; box-shadow: 0 12px 28px rgba(31,95,191,.28); font-size: 2rem; font-weight: 800; text-align: center; }
.about-profile__badge span { display: block; margin-top: 4px; color: #f0c330; font-size: .7rem; letter-spacing: .12em; }
.about-factories { overflow: hidden; background: linear-gradient(180deg,#eaf4ff,#f5f8fc); }
.about-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 40px; }
.about-section-heading h2 { margin: 8px 0 0; color: #163a7a; font-size: clamp(1.8rem,3.5vw,3.25rem); letter-spacing: -.05em; }
.about-section-heading__mark { width: 90px; height: 24px; border-top: 4px solid #f0c330; border-radius: 50%; transform: rotate(-8deg); }
.about-factories__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.about-factory-card { overflow: hidden; border: 1px solid #d9e4f2; border-radius: 10px; background: rgba(255,255,255,.84); box-shadow: 0 12px 30px rgba(22,58,122,.08); }
.about-factory-card > img { display: block; width: 100%; height: 260px; object-fit: cover; }
.about-factory-card__body { padding: 28px 30px 30px; }
.about-factory-card h3 { margin: 0 0 24px; color: #1f5fbf; font-size: 1.45rem; }
.about-factory-card dl { margin: 0; }
.about-factory-card dl > div { display: grid; grid-template-columns: 76px 1fr; gap: 16px; padding: 13px 0; border-top: 1px solid #d9e4f2; }
.about-factory-card dt { color: #1f5fbf; font-weight: 700; }
.about-factory-card dd { margin: 0; color: #4b5d73; line-height: 1.55; }
.about-next-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 58px; }
.about-next-links a { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; min-height: 98px; padding: 22px 26px; color: #0c2d5e; border: 1px solid #d6e0ea; border-radius: 14px; background: #fff; transition: .2s ease; }
.about-next-links a:hover { color: #fff; border-color: #0c2d5e; background: #0c2d5e; transform: translateY(-3px); }
.about-next-links a > span { color: #bd1722; font-size: .76rem; font-weight: 800; letter-spacing: .12em; }
.about-next-links a:hover > span { color: #e2b35a; }
.about-next-links i { font-size: 1.2rem; font-style: normal; }

.quality-story { color: #fff; background: #071d39; }
.quality-story__grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(44px,8vw,110px); align-items: center; }
.quality-story__intro > p:last-child { max-width: 540px; color: #b7c4d1; font-size: 1.05rem; }
.quality-principles { display: grid; gap: 16px; }
.quality-principles article { display: grid; grid-template-columns: 62px 1fr; gap: 22px; padding: 28px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.055); }
.quality-principles article > span { color: #e2b35a; font-size: 1.5rem; font-weight: 800; }
.quality-principles h3 { margin-bottom: 8px; }
.quality-principles p { margin: 0; color: #b7c4d1; }
.honor-archive-section { background: linear-gradient(180deg,#f6f8fb,#fff); }
.honor-showcase { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.honor-showcase__card { margin: 0; overflow: hidden; border: 1px solid #dce5ef; border-radius: 16px; background: #fff; box-shadow: 0 14px 36px rgba(12,45,94,.08); transition: .25s ease; }
.honor-showcase__card:hover { box-shadow: 0 24px 50px rgba(12,45,94,.15); transform: translateY(-5px); }
.honor-showcase__card a { display: block; }
.honor-showcase__image { display: grid; height: 330px; padding: 22px; place-items: center; overflow: hidden; background: #edf2f6; }
.honor-showcase__image img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s ease; }
.honor-showcase__card:hover img { transform: scale(1.025); }
.honor-showcase figcaption { padding: 24px; }
.honor-showcase figcaption small { color: #bd1722; font-weight: 800; letter-spacing: .12em; }
.honor-showcase figcaption h3 { min-height: 2.6em; margin: 10px 0 14px; font-size: 1.08rem; }
.honor-showcase figcaption span { color: #718298; font-size: .8rem; font-weight: 700; }

.philosophy-manifesto { background: #fff; }
.philosophy-manifesto__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: clamp(50px,9vw,130px); align-items: start; }
.philosophy-manifesto h2 { line-height: 1.28; }
.philosophy-manifesto__grid > div:last-child { padding-top: 22px; color: #526475; }
.philosophy-values-section { background: #f4f7fb; }
.philosophy-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.philosophy-card { overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 14px 38px rgba(12,45,94,.09); transition: .25s ease; }
.philosophy-card:hover { box-shadow: 0 24px 50px rgba(12,45,94,.16); transform: translateY(-5px); }
.philosophy-card__image { position: relative; height: 230px; overflow: hidden; }
.philosophy-card__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(7,29,57,.5),transparent 65%); }
.philosophy-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.philosophy-card:hover .philosophy-card__image img { transform: scale(1.045); }
.philosophy-card__image span { position: absolute; z-index: 1; right: 18px; bottom: 14px; color: #fff; font-size: 1.4rem; font-weight: 800; }
.philosophy-card__body { padding: 26px; }
.philosophy-card__body small { color: #bd1722; font-weight: 800; letter-spacing: .1em; }
.philosophy-card__body h3 { margin: 12px 0; font-size: 1.35rem; }
.philosophy-card__body p { margin: 0; color: #526475; }
.philosophy-commitment { color: #fff; background: linear-gradient(135deg,#071d39,#0c2d5e); }
.philosophy-commitment__heading { max-width: 880px; margin-bottom: 46px; }
.philosophy-commitment__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.philosophy-commitment__grid article { min-height: 250px; padding: 30px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.055); }
.philosophy-commitment__grid span { color: #e2b35a; font-size: .78rem; font-weight: 800; letter-spacing: .12em; }
.philosophy-commitment__grid h3 { margin: 58px 0 12px; }
.philosophy-commitment__grid p { margin: 0; color: #b7c4d1; }
.philosophy-commitment .about-next-links a { color: #fff; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.05); }
.philosophy-commitment .about-next-links a:hover { color: #071d39; border-color: #fff; background: #fff; }

@media (max-width: 920px) {
  .about-profile__inner { grid-template-columns: 1fr; }
  .about-profile__visual { max-width: 680px; width: 100%; margin: 0 auto; }
  .about-factories__grid { grid-template-columns: 1fr; }
  .quality-story__grid, .philosophy-manifesto__grid { grid-template-columns: 1fr; }
  .philosophy-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .honor-showcase { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .about-hero__inner { min-height: 220px; padding-top: 64px; }
  .about-profile__visual img { height: 330px; }
  .about-profile__badge { right: 4px; bottom: 20px; width: 104px; height: 104px; font-size: 1.55rem; }
  .about-factory-card > img { height: 220px; }
  .about-factory-card__body { padding: 22px 20px; }
  .about-factory-card dl > div { grid-template-columns: 68px 1fr; gap: 10px; }
  .page-hero--story, .page-hero--philosophy, .page-hero--quality { --page-hero-pad: 72px; }
  .detail-section-heading { align-items: start; flex-direction: column; gap: 12px; }
  .detail-section-heading h2 { font-size: 1.8rem; }
  .honor-showcase, .philosophy-grid, .philosophy-commitment__grid, .about-next-links { grid-template-columns: 1fr; }
  .honor-showcase__image { height: 300px; }
  .quality-principles article { grid-template-columns: 46px 1fr; gap: 14px; padding: 22px 18px; }
  .philosophy-card__image { height: 220px; }
  .philosophy-commitment__grid article { min-height: 220px; }
}

.sector-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.sector-card { padding: 28px; background: #fff; border: 1px solid #e4e9ee; border-top: 3px solid #bd1722; }
.sector-card h3 { margin: 0 0 10px; }
.sector-card p { margin: 0; color: #40505f; line-height: 1.7; }

/* DB-driven cover images */
.card-cover { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 14px; background: #eef2f5; }
.detail-cover { width: 100%; height: auto; max-height: 460px; object-fit: cover; margin-bottom: 28px; background: #eef2f5; }

/* Honors, technical support and migrated equipment */
.archive-notice { margin-bottom: 42px; padding: 24px 28px; border-left: 4px solid var(--red); background: #f4f6f8; }
.archive-notice strong { display: block; margin-bottom: 6px; }
.archive-notice p { margin: 0; color: var(--steel); }
.honor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.honor-card { margin: 0; overflow: hidden; border: 1px solid var(--line); background: var(--white); box-shadow: 0 12px 30px rgba(12,27,42,.07); }
.honor-card a { display: grid; place-items: center; height: 310px; padding: 20px; background: #eef2f5; }
.honor-card img { width: 100%; height: 100%; object-fit: contain; }
.honor-card figcaption { padding: 22px; }
.honor-card h2 { margin: 0 0 8px; font-size: 1.05rem; letter-spacing: 0; }
.honor-card span { color: var(--steel); font-size: .8rem; }
.support-intro { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 8vw, 100px); align-items: start; margin-bottom: 54px; }
.support-intro h2 { font-size: clamp(2rem, 4vw, 3.8rem); }
.support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.support-card { min-height: 260px; padding: 34px; border: 1px solid var(--line); background: var(--paper); }
.support-card > span { color: var(--red); font-size: .8rem; font-weight: 800; letter-spacing: .16em; }
.support-card h2 { margin: 48px 0 14px; font-size: 1.45rem; letter-spacing: 0; }
.support-card p { margin: 0; color: var(--steel); }
.support-cta { color: var(--white); background: var(--ink); }
.support-cta p:not(.eyebrow) { color: #cdd8e1; }
.support-button-secondary { color: var(--white); border-color: rgba(255,255,255,.5); }
.equipment-gallery { margin-top: 90px; }
.equipment-gallery .section-heading > p { max-width: 520px; }
.equipment-photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.equipment-photo-grid figure { margin: 0; overflow: hidden; aspect-ratio: 4/3; background: var(--paper); }
.equipment-photo-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.equipment-photo-grid figure:hover img { transform: scale(1.035); }

@media (max-width: 920px) {
  .honor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equipment-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .honor-grid, .support-grid, .support-intro { grid-template-columns: 1fr; }
  .honor-card a { height: 260px; }
  .support-card { min-height: 220px; }
}

/* Preview banner — only emitted on draft detail pages when an authorised operator hits ?preview=1.
   Uses site tokens so it matches the rest of the public surface without depending on admin.css. */
.preview-banner {
  background: linear-gradient(90deg, #fff4d6, #ffe2a8);
  border-bottom: 1px solid #d8a13a;
  color: #5b3b00;
  font-size: .92rem;
}
.preview-banner__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 12px;
  flex-wrap: wrap;
}
.preview-banner strong { font-weight: 700; }
.preview-banner__status {
  margin-left: auto;
  padding: 4px 12px;
  background: #c97614;
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: .04em;
}

/* Company history — visual language follows the supplied light-blue timeline artwork. */
.history-hero, .history-about, .about-plants, .history-timeline-section, .history-certs, .history-vision { --history-brand: #1F5FBF; --history-bright: #3F8CFF; --history-deep: #163A7A; --history-accent: #F0C330; --history-text: #4B5D73; --history-muted: #8A9BB0; --history-bg-blue: #EAF4FF; --history-bg-soft: #F5F8FC; --history-border: #D9E4F2; --section-py: clamp(44px, 4.2vw, 64px); --ease: cubic-bezier(.4, 0, .2, 1); --dur: .25s; }
/* /about 页锚点跳转（#profile #plants #history #honors）：sticky header 81px 高，预留滚动边距避免遮挡标题。 */
.history-about, .about-plants, .history-timeline-section, .history-certs { scroll-margin-top: 100px; }
/* Hero：仅此区域保留本轮微调（压高度、加留白、弱化副标题与引文），时间线与动画已还原原版。 */
.history-hero { --history-hero-visual: clamp(260px, 24vw, 312px); position: relative; min-height: calc(var(--public-header-height, 80px) + var(--history-hero-visual)); margin-top: calc(-1 * var(--public-header-height, 80px)); padding-top: var(--public-header-height, 80px); overflow: hidden; color: var(--history-deep); background: var(--history-bg-blue) url('/home/process-reference/slitting-process-v3-poster-png.webp') center / cover no-repeat; }
.history-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(234,244,255,.97) 0%, rgba(234,244,255,.79) 30%, rgba(234,244,255,.18) 65%, rgba(234,244,255,.6)); }
.history-hero::after { content: ""; position: absolute; inset: auto -6% -52% -5%; height: 55%; border: 2px solid rgba(255,255,255,.6); border-radius: 50%; transform: rotate(-7deg); box-shadow: 0 -14px 0 rgba(63,140,255,.07); }
.history-hero__ribbon { position: absolute; z-index: 1; top: -28%; left: -9%; width: 55%; height: 145%; border-radius: 50%; background: linear-gradient(135deg, rgba(255,255,255,.6), rgba(63,140,255,.14) 55%, transparent 56%); transform: rotate(-13deg); }
/* About hero keeps a full-width overlay for readable titles on wide screens. */
body.page-about .history-hero { background-image: url('/home/about-hero-png.webp'); background-position: 65% center; background-origin: content-box; }
body.page-about .history-hero::before { background: linear-gradient(90deg, rgba(234,244,255,.92) 0%, rgba(234,244,255,.78) 42%, rgba(234,244,255,.45) 72%, rgba(234,244,255,.38) 100%); }
body.page-about .history-hero::after,
body.page-about .history-hero__ribbon { display: none; }
@media (max-width: 920px) {
  body.page-about .history-hero::before { background: linear-gradient(90deg, rgba(234,244,255,.94), rgba(234,244,255,.82) 45%, rgba(234,244,255,.42)); }
}
.history-hero__inner { position: relative; z-index: 2; display: flex; min-height: var(--history-hero-visual); align-items: center; justify-content: space-between; gap: 40px; padding: 26px 0 0; }
.history-hero__title { padding-left: 0; }
.history-hero h1 { margin: 0; color: var(--history-deep); font-size: clamp(2.5rem, 2.9vw, 2.75rem); font-weight: 700; line-height: 1.1; letter-spacing: .06em; }
.history-hero__subtitle { margin: 12px 0 18px; color: #8FA3BC; font-size: clamp(.7rem, .8vw, .75rem); font-weight: 700; letter-spacing: .3em; }
.history-hero__brand { margin: 0; color: #5B7BA6; font-size: clamp(.86rem, 1vw, .95rem); font-weight: 600; letter-spacing: .06em; }
.history-hero__brand-line { display: block; width: 32px; height: 2px; margin-top: 14px; background: #D8AF25; }
/* 引文：脱离标题的 flex 流，贴到主视觉图片右侧、垂直居中。
   right 先按视口右缘留白计算，再减去内容容器两侧的空白，因此宽屏下会越过 1180px 栅格、
   真正靠近图片右边缘；窄屏（栅格几乎占满）时自动收敛为普通右边距。 */
.history-hero__quote { position: absolute; top: 50%; right: calc(clamp(64px, 5vw, 88px) - (100vw - 100%) / 2); max-width: 360px; margin: 0; padding: 14px 24px 14px 28px; color: #3F5B84; border: 0; background: radial-gradient(ellipse 76% 64% at 50% 52%, rgba(255,255,255,.68), rgba(255,255,255,0) 72%); text-shadow: 0 1px 8px rgba(255,255,255,.7); transform: translateY(-50%) rotate(-2deg); font-family: "STKaiti", "KaiTi", "FangSong", serif; font-size: clamp(1.05rem, 1.5vw, 1.28rem); font-weight: 700; line-height: 1.75; opacity: .88; }
.history-timeline-section { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section-py); background: var(--page-tint, #FFFFFF); }
.history-timeline-section::before { content: ""; position: absolute; inset: -6%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 14% 28%, rgba(126,190,246,.16), transparent 38%), radial-gradient(ellipse at 84% 74%, rgba(248,216,139,.11), transparent 34%), radial-gradient(ellipse at 58% 8%, rgba(220,231,242,.42), transparent 42%); animation: history-section-glow-drift 22s ease-in-out infinite alternate; animation-delay: -4s; }
.history-timeline-section > .shell { position: relative; z-index: 1; }
.history-timeline-section::after { content: ""; position: absolute; z-index: 1; right: 3%; bottom: -80px; width: 78%; height: 160px; background: linear-gradient(180deg, transparent, rgba(63,140,255,.12)); clip-path: polygon(0 85%, 12% 60%, 19% 75%, 30% 42%, 39% 72%, 50% 26%, 61% 69%, 73% 38%, 81% 72%, 92% 34%, 100% 55%, 100% 100%, 0 100%); }
/* 时间线占满 1280px 容器宽度（与 .shell 一致）；高度已按新卡片尺寸重算并整体压缩。 */
.history-timeline { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; max-width: 1280px; min-height: 505px; margin: 0 auto; }
.history-timeline__wave { position: absolute; z-index: 0; top: 180px; left: 0; width: 100%; height: 150px; overflow: visible; }
.history-timeline__path { fill: none; }
.history-timeline__path--base { stroke: var(--history-border); }
.history-timeline__path--progress { stroke: var(--history-brand); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .42s cubic-bezier(.22,.61,.36,1); }
.history-timeline__arrow { stroke: var(--history-border); transition: stroke .4s ease; }
.history-timeline.is-complete .history-timeline__arrow { stroke: var(--history-brand); }
.history-timeline__item { position: relative; z-index: 1; min-width: 0; min-height: 495px; }
/* 卡片：半透明玻璃底 + 极淡描边 + 大范围低透明度柔和阴影，避免“管理后台”式的硬边卡片感。 */
.history-timeline__card { position: absolute; z-index: 2; left: 50%; width: clamp(210px, 18.2vw, 264px); min-height: 140px; padding: 17px 18px 16px; border: 1px solid rgba(31,95,191,.07); border-radius: 8px; background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15); box-shadow: 0 2px 10px rgba(22,58,122,.05); transform: translateX(-50%); transition: opacity .4s ease, transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.history-timeline.is-enhanced .history-timeline__item:not(.is-reached) .history-timeline__card { opacity: 0; transform: translateX(-50%) translateY(12px); }
.history-timeline.is-enhanced .history-timeline__item:nth-of-type(even):not(.is-reached) .history-timeline__card { transform: translateX(-50%) translateY(12px); }
.history-timeline__card:hover { transform: translateX(-50%) translateY(-4px); border-color: rgba(63,140,255,.3); box-shadow: 0 8px 24px rgba(31,95,191,.12); }
/* 首尾两张卡改为贴边对齐而非居中，避免超出容器被 overflow:hidden 裁掉（见卡片加宽说明）。 */
.history-timeline__item:first-of-type .history-timeline__card { left: 0; transform: translateX(0); }
.history-timeline.is-enhanced .history-timeline__item:first-of-type:not(.is-reached) .history-timeline__card { transform: translateX(0) translateY(12px); }
.history-timeline__item:first-of-type .history-timeline__card:hover { transform: translateX(0) translateY(-4px); }
.history-timeline__item:last-of-type .history-timeline__card { left: 100%; transform: translateX(-100%); }
.history-timeline.is-enhanced .history-timeline__item:last-of-type:not(.is-reached) .history-timeline__card { transform: translateX(-100%) translateY(12px); }
.history-timeline__item:last-of-type .history-timeline__card:hover { transform: translateX(-100%) translateY(-4px); }
/* 连接虚线统一长度：卡片贴近曲线固定距离（--history-connector，默认 44px）。
   上排卡片改为底边对齐曲线、下排卡片顶边对齐曲线，虚线因此恒为等长，
   不再随卡片高度变长，也避免动画时出现悬空长虚线。 */
.history-timeline__item:nth-of-type(odd) .history-timeline__card { top: auto; bottom: calc(100% - var(--point-y) + var(--history-connector, 44px)); }
.history-timeline__item:nth-of-type(even) .history-timeline__card { top: calc(var(--point-y) + var(--history-connector, 44px)); bottom: auto; }
/* 日期竖线只有一套逻辑：常规年份统一企业蓝，仅关键里程碑年份用金色强调。 */
.history-timeline__card .history-timeline__year { display: block; margin: 0 0 10px; padding-left: 11px; border-left: 3px solid var(--history-brand); color: var(--history-brand); font-size: 21px; font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }
.history-timeline__item--key .history-timeline__year { border-left-color: var(--history-accent); font-size: 22px; }
.history-timeline__card h3 { margin: 0 0 5px; color: var(--history-deep); font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.history-timeline__card p { margin: 0; color: var(--history-text); font-size: 13.5px; line-height: 1.7; }
.history-timeline__marker { position: absolute; z-index: 3; top: var(--point-y); left: 50%; width: 18px; height: 18px; border: 4px solid #fff; border-radius: 50%; background: var(--history-border); box-shadow: 0 0 0 3px rgba(31,95,191,.22); transform: translate(-50%, -50%); transition: background .4s ease, box-shadow .4s ease; }
.history-timeline__marker::after { content: ""; position: absolute; inset: -7px; border: 1px solid var(--history-brand); border-radius: 50%; opacity: 0; transform: scale(.55); }
.history-timeline__item.is-reached .history-timeline__marker { background: var(--history-brand); box-shadow: 0 0 0 3px rgba(63,140,255,.32), 0 3px 10px rgba(31,95,191,.25); }
.history-timeline__item.is-pulsing .history-timeline__marker::after { animation: history-marker-pulse .45s ease-out both; }
.history-timeline__item--key .history-timeline__marker { width: 21px; height: 21px; }
.history-timeline__item::after { content: ""; position: absolute; z-index: 0; left: 50%; width: 2px; height: 100px; border-left: 2px dashed rgba(31,95,191,.36); transform: translateX(-50%); transition: opacity .4s ease; }
@keyframes history-marker-pulse { 0% { opacity: .65; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.7); } }
.history-timeline__item:nth-of-type(1) { --point-y: 267px; }
.history-timeline__item:nth-of-type(2) { --point-y: 289px; }
.history-timeline__item:nth-of-type(3) { --point-y: 293px; }
.history-timeline__item:nth-of-type(4) { --point-y: 263px; }
.history-timeline__item:nth-of-type(5) { --point-y: 258px; }
.history-timeline__item:nth-of-type(6) { --point-y: 278px; }
.history-timeline__item:nth-of-type(7) { --point-y: 277px; }
.history-timeline__item:nth-of-type(8) { --point-y: 228px; }
/* 虚线从卡片边缘等长地连到圆点。 */
.history-timeline__item:nth-of-type(odd)::after { top: calc(var(--point-y) - var(--history-connector, 44px)); height: var(--history-connector, 44px); }
.history-timeline__item:nth-of-type(even)::after { top: var(--point-y); height: var(--history-connector, 44px); }
/* 桌面端：未点亮的节点先隐去虚线，避免动画循环时出现悬空的长虚线。 */
@media (min-width: 1101px) {
  .history-timeline.is-enhanced .history-timeline__item:not(.is-reached)::after { opacity: 0; }
  body.page-about .history-timeline__item:nth-of-type(8) { --history-connector: 76px; }
  body.page-about .history-timeline__item:last-of-type .history-timeline__card { width: clamp(210px, 18.2vw, 248px); }
}
/* ============================================================
   历史沿革 · 企业资质（轻量级资质展示区）
   ------------------------------------------------------------
   位置：历史时间线下方、OUR VISION 上方。
   定位：视觉强度低于时间线、也低于主视觉，作为「发展历程 → 管理体系 → 企业愿景」的过渡层，
   因此不用深色底、不做证书墙、不用奖杯盾牌类图标与金色边框。
   证书图：thumbs/*.webp 是 480px / WebP q78（与后台上传管线 ImageProcessor 同规格），
          原图更清晰，只在 Lightbox 里加载。
   ============================================================ */
.history-certs { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section-py); background: var(--page-tint-soft, #F5F8FC); }
.history-certs::before { content: ""; position: absolute; inset: -6%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 14% 28%, rgba(126,190,246,.16), transparent 38%), radial-gradient(ellipse at 84% 74%, rgba(248,216,139,.11), transparent 34%), radial-gradient(ellipse at 58% 8%, rgba(220,231,242,.42), transparent 42%); animation: history-section-glow-drift 22s ease-in-out infinite alternate; animation-delay: -14s; }
.history-certs__inner { position: relative; z-index: 1; margin-inline: auto; } /* 宽度由下方统一容器规则给出（1280px） */
.history-certs__head { margin-bottom: 36px; }
/* Section 标题体系统一：英文 11px/600/.18em/1.4，中文 28px/650/1.25，全页共用同一组数值。
   英文 → 中文 8px，中文 → 辅助说明 10px，标题 → 主体内容 36px。 */
.history-certs__eyebrow, .history-section-head__eyebrow { margin: 0; color: var(--history-muted); font-size: 11px; font-weight: 600; letter-spacing: .18em; line-height: 1.4; text-transform: uppercase; }
.history-certs__title, .history-section-head__title { margin: 8px 0 0; color: var(--history-deep); font-size: 28px; font-weight: 650; line-height: 1.25; letter-spacing: .01em; }
.history-certs__lead, .history-section-head__lead { margin: 10px 0 0; color: #6E829B; font-size: 15px; line-height: 1.7; }
/* 4 张一排：在整个 1200px 容器内居中，卡片组最大 1100px；1fr 让四张等分、高度一致。 */
.history-certs__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; width: 100%; margin: 0; padding: 0; list-style: none; }
.history-certs__item { display: flex; }
.cert-tile { display: flex; flex-direction: column; width: 100%; min-height: 330px; padding: 0; overflow: hidden; color: inherit; text-align: left; cursor: pointer; border: 1px solid rgba(31,102,204,.12); border-radius: 9px; background: var(--white); box-shadow: 0 2px 10px rgba(22,58,122,.05); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.cert-tile:hover, .cert-tile:focus-visible { transform: translateY(-4px); border-color: rgba(31,102,204,.28); box-shadow: 0 8px 24px rgba(31,95,191,.12); }
.cert-tile:focus-visible { outline: 2px solid rgba(63,140,255,.5); outline-offset: 2px; }
/* 图片区由证书原始比例撑开，满宽展示，不添加留白或裁剪。 */
.cert-tile__media { display: block; flex: 0 0 auto; width: 100%; padding: 8px; background: #fff; }
.cert-tile__media img { display: block; width: 100%; height: auto; max-width: 100%; object-fit: contain; }
.cert-tile__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; justify-content: center; padding: 12px 14px 13px; border-top: 1px solid rgba(31,102,204,.07); }
.cert-tile__code { color: var(--history-brand); font-size: 18px; font-weight: 600; line-height: 1.2; }
.cert-tile__name { color: var(--history-text); font-size: 14px; line-height: 1.4; }
.cert-tile__standard { color: var(--history-muted); font-size: 12px; line-height: 1.35; }
/* Lightbox：全页唯一的深色区域，只作临时遮罩，不构成区块背景；层级要盖过右下角浮动客服条（z-index 999）。 */
html:has(body.cert-lightbox-open), body.cert-lightbox-open { overflow: hidden; }
/* 弹层由脚本挂到 body，避免分区的裁切和层叠上下文限制。 */
.cert-lightbox { --dur: .2s; --ease: ease; position: fixed; z-index: 10000; inset: 0; display: grid; place-items: center; padding: 64px 76px 24px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 220ms ease, visibility 0s linear 220ms; }
.cert-lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 220ms ease; }
.cert-lightbox__scrim { position: absolute; inset: 0; background: rgba(10,24,45,.9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cert-lightbox__dialog { position: relative; z-index: 1; width: 100%; max-width: 1440px; max-height: 100%; }
.cert-lightbox__figure { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; margin: 0; }
.cert-lightbox__image { display: block; width: 100%; height: calc(100vh - 190px); height: calc(100dvh - 190px); min-height: 0; object-fit: contain; filter: drop-shadow(0 12px 28px rgba(0,0,0,.3)); }
.cert-lightbox__caption { display: flex; flex-direction: column; gap: 3px; align-items: center; text-align: center; }
.cert-lightbox__caption strong { color: #fff; font-size: 1rem; font-weight: 700; letter-spacing: .05em; }
.cert-lightbox__caption span { color: #CCD9EA; font-size: .82rem; }
.cert-lightbox__counter { display: flex; align-items: center; gap: 6px; margin: 0; color: #B5C8E0; font-size: .76rem; letter-spacing: .18em; }
.cert-lightbox__nav, .cert-lightbox__close { position: fixed; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: #233E60; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.2); transition: background-color .2s ease; }
.cert-lightbox__nav svg, .cert-lightbox__close svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cert-lightbox__nav { top: 50%; transform: translateY(-50%); }
.cert-lightbox__nav--prev { left: 20px; }
.cert-lightbox__nav--next { right: 20px; }
.cert-lightbox__close { top: max(16px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); }
.cert-lightbox__nav:hover, .cert-lightbox__nav:focus-visible, .cert-lightbox__close:hover, .cert-lightbox__close:focus-visible { background: #1F5FBF; border-color: #fff; }
.cert-lightbox__nav:focus-visible, .cert-lightbox__close:focus-visible { outline: 3px solid #F0C330; outline-offset: 3px; }
/* 响应式：≥1200 四张一排；768~1199 两列；<768 单列。 */
@media (min-width: 768px) and (max-width: 1199px) {
  .history-certs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 767px) {
  .history-certs__inner { width: min(100% - 36px, 1100px); }
  .history-certs__head { margin-bottom: 24px; }
  .history-certs__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cert-tile { min-height: 0; }
  .cert-tile__body { padding: 12px 14px 14px; }
  .cert-lightbox { padding: 66px 16px 80px; }
  .cert-lightbox__image { height: calc(100vh - 250px); height: calc(100dvh - 250px); }
  .cert-lightbox__nav { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); transform: none; }
  .cert-lightbox__nav--prev { left: calc(50% - 60px); }
  .cert-lightbox__nav--next { right: calc(50% - 60px); }

}
@media (prefers-reduced-motion: reduce) {
  .cert-tile, .cert-tile__media img, .cert-lightbox, .cert-lightbox__nav, .cert-lightbox__close { transition: none; }
  .cert-tile:hover, .cert-tile:focus-visible { transform: none; }
  .cert-tile:hover .cert-tile__media img, .cert-tile:focus-visible .cert-tile__media img { transform: none; }
}
/* ============================================================
   关于我们页面（由「历史沿革」页改版）
   ------------------------------------------------------------
   页面层级：Banner → 公司简介 → 第一/第二工厂 → 发展历程 → 企业资质 → OUR VISION
   · 公司简介与工厂直接复用 /about 页已有的 about-profile / about-factories 组件，
     只在 body.page-about 下做克制度微调（压平倾斜装饰、去掉金色、减轻阴影），
     因此不会影响其他内页；
   · 全页五个 Section 共用 1280px 主容器与同一左基线（见下方统一容器分组选择器），
     Banner 满宽；企业资质卡片组在容器内居中且最宽 1100px；
   · 各模块上下留白统一为 60px（相邻 Section 合计约 120px），避免区块之间出现过长空白。
   ============================================================ */
/* 统一内容容器：本页所有 Section 共用 1200px 栅格与同一条左基线，不再各自设置宽度或偏移。 */
.history-hero > .shell,
.history-about > .shell,
.about-plants > .shell,
.history-timeline-section > .shell,
.history-certs__inner,
.history-vision > .shell { width: min(1280px, calc(100% - 48px)); max-width: none; margin-inline: auto; }
/* 公司名称是本页最大的标题（30~32px），与 Section 中文标题拉开一级；窄屏靠 balance 换行。 */
/* 公司全称已升为 section 标题（.history-section-head__title），中日文版在其下补一行英文名做中英锁定组合。
   刻意压到 13px / muted：它是同一个名字的另一种写法，不该与中文标题争夺注意力。 */
.history-section-head__name-en { margin: 7px 0 0; color: var(--history-muted); font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: .02em; }
.history-section-head { margin-bottom: 36px; }
/* 时间线内部上方本就留白，标题不再叠加外边距。 */
.history-section-head--timeline { margin-bottom: 0; }

/* 公司简介：左栏正文 / 右栏厂区图，两栏尺寸与间距见下方桌面媒体查询；align-items 改 start，
   避免两栏垂直居中把正文推下去（原来公司名称到首段被拉到 90px）。 */
.history-about { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section-py); background: var(--page-tint, #FFFFFF); }
.history-about::before { content: ""; position: absolute; inset: -6%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 14% 28%, rgba(126,190,246,.16), transparent 38%), radial-gradient(ellipse at 84% 74%, rgba(248,216,139,.11), transparent 34%), radial-gradient(ellipse at 58% 8%, rgba(220,231,242,.42), transparent 42%); animation: history-section-glow-drift 22s ease-in-out infinite alternate; animation-delay: 0s; }
.history-about > .shell { position: relative; z-index: 1; }
/* 只在桌面恢复两栏：左栏 ~1.15fr（约 640px 正文）、右栏图片最大 430px，间距 88px，
   整体左对齐到 1200px 栅格，与上方标题共用同一左基线。
   about-profile__inner 原有 920px 折行规则优先级更低，必须放进 min-width 查询。 */
@media (min-width: 921px) {
  .history-about .about-profile__inner { grid-template-columns: minmax(0,1.15fr) minmax(380px,.85fr); gap: 0 88px; align-items: start; }
  /* 实景照片与左侧简介正文居中对齐，名称释义增加高度后仍保持两栏协调。 */
  .history-about .about-profile__visual { margin-top: 0; max-width: 446px; align-self: center; }
  /* 厂区图明显放大：约 430px 宽、4:3，图片区不再缩在 250~300px。 */
  .history-about .about-profile__visual img { width: 100%; max-width: 430px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
}
/* 标题层级与间距：COMPANY PROFILE → 公司简介 8px，公司简介 → 公司名称 9px，公司名称 → 正文 36px。 */
.history-about .history-section-head { margin-bottom: 36px; }
/* 正文 16px / 1.85，段间距 21px，首段不再单独放大；颜色统一深灰蓝。 */
.history-about .about-profile__paragraph, .history-about .about-profile__paragraph:first-of-type { margin-bottom: 21px; color: #435A72; font-size: 16px; font-weight: 400; line-height: 1.85; }
.history-about .about-profile__paragraph strong { color: var(--history-deep); font-weight: 650; }
/* 客户反馈 2026-10-10：中文段落按习惯首行缩进 2 字；日文、英文不缩进。 */
html[lang="zh-CN"] .history-about .about-profile__paragraph { text-indent: 2em; }
.history-about .about-profile__name-origin { margin: 0 0 24px; padding: 3px 0 3px 14px; border-left: 2px solid var(--history-accent); color: #5B7088; font-size: 15px; line-height: 1.8; }
.history-about .about-profile__name-origin br { display: none; }
.history-about .about-profile__name-origin strong { margin-inline-start: .45em; color: var(--history-deep); font-weight: 600; }
.history-about .about-profile__paragraph:last-child { margin-bottom: 0; }
/* 图片后的叠层框：保留 /about 的叠层思路，但不再旋转，描边与底色更淡。 */
.history-about .about-profile__visual { padding: 16px 16px 40px 0; }
.history-about .about-profile__visual::before { border-color: rgba(31,95,191,.14); background: #E9F1FB; transform: none; }
.history-about .about-profile__visual img { object-position: 48% center; border-radius: 10px; box-shadow: 0 10px 26px rgba(22,58,122,.08); }
/* 年份标识：企业蓝圆形，去掉金色；保持 78px 点缀尺寸，不随图片同比例放大。 */
.history-about .about-profile__badge { right: -8px; bottom: 22px; width: 78px; height: 78px; border: 3px solid rgba(255,255,255,.9); box-shadow: 0 8px 20px rgba(31,95,191,.2); font-size: 1.2rem; }
.history-about .about-profile__badge span { margin-top: 1px; color: rgba(255,255,255,.86); font-size: .5rem; letter-spacing: .1em; }
/* 英文标签更长，再收一档，避免超出圆形下部的弦宽。 */
html:lang(en) .history-about .about-profile__badge span { font-size: .48rem; letter-spacing: .04em; }

/* 工厂概览：原先是独立 section（浅蓝底 + 上下 86px 内边距 + 光晕），两张卡片把版面撑得过重。
   现在并入公司简介，只保留卡片本身的样式，背景和分节留白全部去掉。 */
.about-plants { margin-top: clamp(36px, 4vw, 52px); }
/* 两张卡片在 1200px 容器内铺开，单卡约 585px；图片统一 16:8.5、等宽等高。 */
.about-plants .about-factories__grid { gap: 30px; }
.about-plants .about-factory-card { box-shadow: 0 2px 10px rgba(22,58,122,.05); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.about-plants .about-factory-card:hover { transform: translateY(-3px); border-color: rgba(31,95,191,.3); box-shadow: 0 8px 24px rgba(31,95,191,.12); }
.about-plants .about-factory-card > img { height: auto; aspect-ratio: 16 / 8.5; transition: transform var(--dur) var(--ease); }
.about-plants .about-factory-card:hover > img { transform: scale(1.02); }
.about-plants .about-factory-card__body { padding: 22px; }
.about-plants .about-factory-card h3 { margin-bottom: 18px; font-size: 1.35rem; }
.about-plants .about-factory-card dl { font-size: 14.5px; }
.about-plants .about-factory-card dl > div { grid-template-columns: minmax(76px, max-content) 1fr; padding: 11px 0; border-top-color: rgba(31,95,191,.1); }
.about-plants .about-factory-card dt { font-size: 14px; font-weight: 600; }

/* 新增 Section 的进入动效：与首页 .reveal 同一套机制（脚本接管后才隐藏，620ms，位移很轻）。
   只在「未进入」状态声明 opacity/transform，已进入状态不带声明，避免盖住卡片自身的 hover 位移。 */
.history-reveal { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js-history-reveal .history-reveal:not(.is-visible) { opacity: 0; transform: translateY(16px); }

/* 窄屏：上面的高度覆盖优先级高于 about-* 原有的媒体查询，这里补回移动端尺寸。 */
@media (max-width: 767px) {
  .history-about .history-section-head { margin-bottom: 28px; }
  .history-section-head { margin-bottom: 26px; }
}
@media (max-width: 920px) {
  .history-about .about-profile__visual img { height: auto; aspect-ratio: 4 / 3; }
  .about-plants .about-factory-card > img { height: 260px; }
}
@media (max-width: 680px) {
  .history-about .about-profile__badge { right: 6px; bottom: 20px; width: 78px; height: 78px; font-size: 1.25rem; }
  .history-about .about-profile__badge span { font-size: .54rem; }
  .about-plants .about-factory-card > img { height: 210px; }
}

/* 工厂卡片横向版式。竖版时两张 331px 的大图把这一段撑到 861px，比公司简介(630)和
   企业资质(634)都重，而卡片里其实只有三行数据。图放左、数据放右，整段压到 ~470px，
   工厂照片退成配图而不是主体。
   放在 920/680 两个 max-width 块之后，才能在 761–920 区间盖掉那里的固定图高。
   ≤760 仍回到竖排：横向排下来数据列不够宽，地址会把末尾的「号」挤到第二行。 */
@media (min-width: 761px) {
  .about-plants .about-factories__grid { gap: 24px; }
  .about-plants .about-factory-card {
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    align-items: stretch;
  }
  .about-plants .about-factory-card > img {
    height: 100%;
    min-height: 196px;
    aspect-ratio: auto;
  }
  .about-plants .about-factory-card__body { padding: 20px 22px; }
  .about-plants .about-factory-card h3 { margin-bottom: 12px; font-size: 1.2rem; }
  .about-plants .about-factory-card dl { font-size: 14px; }
  .about-plants .about-factory-card dl > div { gap: 12px; padding: 9px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .history-reveal, .js-history-reveal .history-reveal:not(.is-visible) { opacity: 1; transform: none; transition: none; }
  .about-plants .about-factory-card, .about-plants .about-factory-card > img { transition: none; }
  .about-plants .about-factory-card:hover, .about-plants .about-factory-card:hover > img { transform: none; }
}
/* 卡面占满 1200px 容器；整体尺度与内部留白同步放大，两栏结构与内容保持不变。 */
.history-vision { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section-py); background: var(--page-tint-blue, #EAF4FF); }
.history-vision::before { content: ""; position: absolute; inset: -6%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 14% 28%, rgba(126,190,246,.16), transparent 38%), radial-gradient(ellipse at 84% 74%, rgba(248,216,139,.11), transparent 34%), radial-gradient(ellipse at 58% 8%, rgba(220,231,242,.42), transparent 42%); animation: history-section-glow-drift 22s ease-in-out infinite alternate; animation-delay: -19s; }
.history-vision > .shell { position: relative; z-index: 1; }
.history-vision__inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 20px 56px; align-items: center; min-height: 210px; padding: 34px 52px; overflow: hidden; border: 1px solid rgba(31,95,191,.2); border-radius: 13px; background: linear-gradient(105deg, rgba(255,255,255,.84), rgba(234,244,255,.75)); box-shadow: 0 10px 26px rgba(22,58,122,.08); }
.history-vision__copy { position: relative; z-index: 1; }
.history-vision__copy .eyebrow { margin-bottom: 8px; color: var(--history-muted); }
/* 主标题较原稿缩小约 10%，行距收紧，弱化海报感、强调制造业的沉稳与精密。 */
.history-vision h2 { margin: 0; color: var(--history-deep); font-size: clamp(1.4rem, 2.7vw, 2.3rem); line-height: 1.24; }
/* 英文只作辅助信息：字号更小、颜色降一级、字距收紧、字重降低。 */
.history-vision__english { margin: 12px 0 0; color: #9FB0C4; font-size: .8rem; font-weight: 600; line-height: 1.4; letter-spacing: .02em; }
.history-vision__text { position: relative; z-index: 1; max-width: 460px; margin: 0; color: var(--history-text); font-size: .92rem; line-height: 1.95; }
/* 右下几何圆形：向右下各移 50px，透明度降 30%，避免抢正文与导航焦点。 */
.history-vision__globe { position: absolute; right: -26px; bottom: -98px; width: 220px; height: 220px; border: 1px solid rgba(63,140,255,.32); border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.7), rgba(63,140,255,.16) 55%, transparent 56%); opacity: .56; }
.history-vision__globe::before, .history-vision__globe::after, .history-vision__globe span { content: ""; position: absolute; inset: 14px 42px; border: 1px solid rgba(63,140,255,.28); border-radius: 50%; }
.history-vision__globe::after { inset: 42px 14px; }
.history-vision__globe span { inset: 0; border-color: rgba(63,140,255,.18); transform: rotate(90deg); }
/* 底部导航：轻量卡片而非输入框长条；hover 只做轻微蓝调 + 描边增强 + 箭头位移。 */
.history-vision .about-next-links { grid-column: 1 / -1; margin-top: 0; }
.history-vision .about-next-links a { min-height: 56px; padding: 13px 18px; color: var(--history-deep); border: 1px solid rgba(31,95,191,.12); border-radius: 12px; background: rgba(255,255,255,.72); box-shadow: 0 8px 22px rgba(22,58,122,.05); transform: none; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease); }
.history-vision .about-next-links a:hover { color: var(--history-deep); border-color: rgba(31,95,191,.3); background: rgba(234,244,255,.92); box-shadow: 0 12px 28px rgba(22,58,122,.08); transform: none; }
/* 序号统一企业蓝，不再使用红色。 */
.history-vision .about-next-links a > span { color: var(--history-brand); }
.history-vision .about-next-links a:hover > span { color: var(--history-deep); }
.history-vision .about-next-links i { display: inline-block; transition: transform var(--dur) var(--ease); }
.history-vision .about-next-links a:hover i { transform: translate(3px, -4px); }
html:lang(en) .history-timeline { min-height: 585px; --history-connector: 44px; }
html:lang(en) .history-timeline__item { min-height: 575px; }
html:lang(ja) .history-timeline { min-height: 515px; --history-connector: 44px; }
html:lang(ja) .history-timeline__item { min-height: 505px; }
@media (max-width: 760px) {
  .history-about, .about-plants, .history-timeline-section, .history-certs { scroll-margin-top: 76px; }
  .history-hero { --history-hero-visual: clamp(300px, 46vw, 340px); }
  /* 背景蒙版原本是为桌面调的横向渐变：右侧只剩 .18，图片几乎裸露。
     桌面上那块区域是空的，窄屏上却正好落着引文 —— 右端抬到 .55 以上才读得出字。 */
  .history-hero::before { background: linear-gradient(100deg, rgba(234,244,255,.97) 0%, rgba(234,244,255,.87) 38%, rgba(234,244,255,.58) 72%, rgba(234,244,255,.74) 100%); }
  .history-hero__inner { min-height: var(--history-hero-visual); align-items: flex-start; flex-direction: column; justify-content: center; gap: 22px; padding: 0; }
  .history-hero h1 { font-size: clamp(2.1rem, 8.5vw, 2.9rem); }
  .history-hero__subtitle { margin: 8px 0 13px; color: #7E93AF; font-size: .82rem; letter-spacing: .24em; }
  /* 英文站 h1 就是 About Us，副标题 ABOUT US 是同一句话的重复，窄屏尤其浪费高度 */
  html[lang="en"] .history-hero__subtitle { display: none; }
  html[lang="en"] .history-hero h1 { margin-bottom: 14px; }
  /* 290px 上限会让这行在 360px 屏上折行，窄屏直接放开用满栅格 */
  .history-hero__brand { max-width: none; font-size: .84rem; line-height: 1.6; }
  /* 窄屏放不下右侧，回到标题下方的右对齐块。
     径向白斑在小尺寸下只是一团脏印子，可读性交给上面的蒙版 + 文字投影。 */
  .history-hero__quote { position: relative; top: auto; right: auto; align-self: flex-end; max-width: min(15em, 100%); margin-right: 10px; padding: 0; background: none; text-align: center; text-shadow: 0 1px 10px rgba(255,255,255,.9), 0 0 24px rgba(234,244,255,.75); transform: rotate(-2deg); font-size: 1rem; opacity: 1; }
  .history-vision__inner { display: block; padding: 25px 22px; }
  .history-vision__text { margin-top: 22px; }
  .history-vision .about-next-links { margin-top: 24px; }
  .history-vision__globe { right: -62px; bottom: 36px; width: 180px; height: 180px; opacity: .28; }
}

/* 561–760px：右侧工具条仍是竖排的（≤560 才收成单个 launcher），
   引文按 flex-end 贴到容器右缘会正好压在工具条下面，这里给它让出位置。 */
@media (min-width: 561px) and (max-width: 760px) {
  .history-hero__quote { margin-right: 56px; }
}
/* 时间线堆叠版式：761–1100px 区间用 8 列曲线版式会导致卡片挤压、首卡被裁出屏幕，
   因此断点比 hero/vision 提前到 1100px。 */
@media (max-width: 1100px) {
  /* 窄屏时间轴的横向预算（375px 屏为例，容器 24~351）：
     轴心统一在容器内 8px 处（绝对 x=32），轨道与圆点同轴；卡片左缘 48，右缘 351。
     原先轨道在 0、圆点在 46，横向错开 21px，读起来像"线旁边挂了一列点"。
     左侧原本三层留白（容器 gutter 24 + timeline 22 + item 28 = 74，占屏宽 20%）压成一层。 */
  .history-timeline { display: block; min-height: 0; padding: 0 0 10px; }
  html:lang(en) .history-timeline, html:lang(ja) .history-timeline { min-height: 0; }
  .history-timeline::before, .history-timeline::after { content: ""; position: absolute; top: 14px; bottom: 18px; left: 7px; width: 2px; pointer-events: none; }
  .history-timeline::before { z-index: 0; background: var(--history-border); }
  .history-timeline::after { z-index: 0; height: calc(100% - 32px); bottom: auto; background: var(--history-brand); transform: scaleY(var(--history-progress, 0)); transform-origin: top; }
  /* 曲线 SVG 只服务桌面版式；窄屏下它的 path 全部隐藏，只剩一个 34px×整条高度的空壳，直接整体去掉。 */
  .history-timeline__wave { display: none; }
  .history-timeline__item { min-height: 0; padding: 12px 0 24px 24px; }
  html:lang(en) .history-timeline__item, html:lang(ja) .history-timeline__item { min-height: 0; }
  .history-timeline__card, .history-timeline__item:nth-of-type(2n) .history-timeline__card, .history-timeline__item:nth-of-type(2n + 1) .history-timeline__card, .history-timeline__item:first-of-type .history-timeline__card, .history-timeline__item:last-of-type .history-timeline__card { position: relative; inset: auto; width: 100%; min-height: 0; transform: none; }
  .history-timeline.is-enhanced .history-timeline__item:not(.is-reached) .history-timeline__card, .history-timeline.is-enhanced .history-timeline__item:nth-of-type(even):not(.is-reached) .history-timeline__card { transform: translateY(12px); }
  .history-timeline__card:hover { transform: translateY(-4px); }
  /* 与轨道同轴：left 8px + translate(-50%) 让圆心正好落在轨道中线（7px + 1px）上。 */
  .history-timeline__marker { top: 38px; left: 8px; width: 16px; height: 16px; }
  .history-timeline__item--key .history-timeline__marker { width: 18px; height: 18px; }
  /* 堆叠版式下只保留主轴一条竖线，卡片连接虚线整段隐藏，避免出现两条平行时间轴。 */
  .history-timeline__item::after, .history-timeline__item:nth-of-type(2n)::after, .history-timeline__item:nth-of-type(2n + 1)::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .history-timeline__path--progress { transition: none; }
  .history-timeline__card, .history-timeline__marker, .history-timeline__arrow { transition: none; }
  .history-timeline.is-enhanced .history-timeline__item:not(.is-reached) .history-timeline__card { opacity: 1; transform: translateX(-50%); }
  .history-timeline.is-enhanced .history-timeline__item:first-of-type:not(.is-reached) .history-timeline__card { transform: translateX(0); }
  .history-timeline.is-enhanced .history-timeline__item:last-of-type:not(.is-reached) .history-timeline__card { transform: translateX(-100%); }
  .history-timeline__item.is-pulsing .history-timeline__marker::after { animation: none; }
}
@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
  .history-timeline.is-enhanced .history-timeline__item:not(.is-reached) .history-timeline__card { transform: none; }
}
/* ============================================================
   全页底纹：斜线 + 拉丝 + 点阵（与首页同一套视觉）
   ------------------------------------------------------------
   全站通用：所有页面的 body 都铺这层底纹（首页另有一份同值规则在 home-b.css，
   两者数值一致，重复声明不会打架）。
   · absolute 而非 fixed：纹理长在页面上，滚动时跟着内容走；
   · background-position 动画而非 transform：不改变布局盒，零溢出；
   · 斜线用 820×512 的 SVG 贴片（贴片内一条角到角的线），平铺后
     自动首尾相接，整页是一张连续斜线网，不会断成一段段。
   body 需要 position: relative，底纹才能按整页高度铺满。
   ============================================================ */
body {
  position: relative;
  /* 底纹三层调参入口，与首页 home-b.css 同名变量、同一套数值。 */
  --page-dot: rgba(76, 132, 189, .46);
  --page-grain: rgba(126, 162, 202, .07);
  --page-tile-w: 820px;
  --page-tile-h: 512px;
  /* 区块底色：半透明，让底纹连续透出，同首页 --page-tint 系列。 */
  --page-tint: rgba(255, 255, 255, .70);
  --page-tint-soft: rgba(240, 245, 251, .78);
  --page-tint-blue: rgba(230, 241, 255, .80);
}

body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--white);
  background-image:
    repeating-linear-gradient(0deg,
      rgba(255, 255, 255, 0) 0 9px,
      var(--page-grain) 9px 10px,
      rgba(255, 255, 255, 0) 10px 16px),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='820' height='512'%3E%3Cpath d='M0 512L820 0' stroke='%23709DC5' stroke-opacity='.3' stroke-width='2' fill='none'/%3E%3C/svg%3E"),
    radial-gradient(circle, var(--page-dot) 1px, transparent 1.7px);
  background-size:
    100% 16px,
    var(--page-tile-w) var(--page-tile-h),
    calc(var(--page-tile-w) / 2) calc(var(--page-tile-h) / 2);
  background-repeat: repeat;
  animation: page-texture-drift 80s linear infinite;
}

@keyframes page-texture-drift {
  from { background-position: 0 0, 0 0, 0 0; }
  to {
    background-position:
      calc(-1 * var(--page-tile-w)) calc(-1 * var(--page-tile-h)),
      calc(-1 * var(--page-tile-w)) calc(-1 * var(--page-tile-h)),
      calc(-1 * var(--page-tile-w)) calc(-1 * var(--page-tile-h));
  }
}

/* 分区之间的漂移光晕：移植自首页 home-b.css，柔化白/浅灰/浅蓝交界的生硬感。
   各 section 用不同 animation-delay 错开，避免所有区块同步呼吸。 */
@keyframes history-section-glow-drift {
  from { transform: translate3d(-1.2%, .6%, 0) scale(1); }
  to { transform: translate3d(1.2%, -.6%, 0) scale(1.035); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .history-about::before,
  .history-timeline-section::before,
  .history-certs::before,
  .history-vision::before { animation: none; }
}

/* ============================================================
   /contact 页（联系我们 + 加入我们 + 在线留言 三合一）
   —— 与 /about 同一套做法：三个菜单项指向同一页的三个锚点，
      因此这里直接复用 /about 的设计令牌、Hero 与 section 标题体系，
      只新增本页特有的三块：横排联系方式、岗位表格、横版留言表单。
   ============================================================ */
.contact-hero,
.contact-info-section,
.contact-careers,
.contact-enquiry { --history-brand: #1F5FBF; --history-bright: #3F8CFF; --history-deep: #163A7A; --history-accent: #F0C330; --history-text: #4B5D73; --history-muted: #8A9BB0; --history-bg-blue: #EAF4FF; --history-bg-soft: #F5F8FC; --history-border: #D9E4F2; --section-py: clamp(44px, 4.2vw, 64px); --ease: cubic-bezier(.4, 0, .2, 1); --dur: .25s; }
/* 锚点跳转（#contact #careers #enquiry）：sticky header 81px 高，预留滚动边距避免遮挡标题。 */
.contact-info-section,
.contact-careers,
.contact-enquiry { scroll-margin-top: 100px; }
/* 统一内容容器：与 /about 同宽同左基线。 */
.contact-hero > .shell,
.contact-info-section > .shell,
.contact-careers > .shell,
.contact-enquiry > .shell { width: min(1280px, calc(100% - 48px)); max-width: none; margin-inline: auto; }
/* 各屏幕均等比例铺满可见横幅，以原图约 70% 处的握手为焦点，避免留空和拉伸。 */
.contact-hero { background-image: url('/media/legacy/contact/contact-handshake-png.webp'); background-position: 70% center; background-size: cover; background-origin: content-box; }

/* ── 联系我们：横排联系方式条 ─────────────────────────────────────── */
.contact-info-section { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section-py); background: var(--page-tint, #FFFFFF); }
.contact-info-section::before { content: ""; position: absolute; inset: -6%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 14% 28%, rgba(126,190,246,.16), transparent 38%), radial-gradient(ellipse at 84% 74%, rgba(248,216,139,.11), transparent 34%), radial-gradient(ellipse at 58% 8%, rgba(220,231,242,.42), transparent 42%); animation: history-section-glow-drift 22s ease-in-out infinite alternate; }
.contact-info-section > .shell { position: relative; z-index: 1; }
/* 电话 / 邮箱 / 传真：并成一条完整的信息条，而不是三张各自带边框与投影的卡片。
   三张独立卡片在 1200px 下每张近 400px，里面只有一行号码，空得发虚；合成一条之后
   分隔交给发丝竖线，投影只剩一层，重量集中到号码本身。地址不在这里，由下面的地图承担。 */
.contact-strip { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; overflow: hidden; border: 1px solid var(--history-border); border-radius: 14px; background: rgba(255, 255, 255, .88); box-shadow: 0 10px 34px rgba(22, 58, 122, .08); }
/* 顶部 2px 蓝→金渐变，是这一条唯一的装饰，也把全站的蓝金关系点一下。 */
.contact-strip::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--history-brand), #5C93D6 46%, rgba(216, 175, 37, .9)); }
.contact-strip__item { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 16px; align-items: center; padding: 26px 30px; transition: background var(--dur) var(--ease); }
/* 分隔线只画在中段，两端淡出，比一条通到底的实线轻。 */
.contact-strip__item + .contact-strip__item::before { content: ""; position: absolute; top: 24px; bottom: 24px; left: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(31, 95, 191, .2) 20%, rgba(31, 95, 191, .2) 80%, transparent); }
.contact-strip__item:hover, .contact-strip__item:focus-within { background: rgba(31, 95, 191, .035); }
/* 图标去掉圆底色块，只留线条，重量让给号码。 */
.contact-strip__icon { display: grid; width: 38px; height: 38px; place-items: center; color: var(--history-brand); }
.contact-strip__icon svg { width: 27px; height: 27px; }
.contact-strip__text { min-width: 0; }
.contact-strip dt { color: var(--history-muted); font-size: 11px; font-weight: 600; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; }
/* 号码是这一条的主角：字号提到 18px，数字等宽，长度对齐不跳动。 */
.contact-strip dd { margin: 7px 0 0; color: var(--history-deep); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; line-height: 1.4; }
.contact-strip dd > a { white-space: nowrap; transition: color var(--dur) var(--ease); }
.contact-strip dd a:hover, .contact-strip dd a:focus-visible { color: var(--history-brand); text-decoration: underline; text-underline-offset: 4px; }

/* 地图与信息条共用同一套圆角、描边与投影，两块读起来是一组，而不是两个来路不同的部件。 */
.contact-info-section .contact-map-wide { margin-top: 18px; }
.contact-info-section .contact-map-photo { border: 1px solid var(--history-border); border-radius: 14px; box-shadow: 0 10px 34px rgba(22, 58, 122, .08); }

/* ── 加入我们 ──────────────────────────────────────────────────────── */
.contact-careers { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section-py); background: var(--page-tint-soft, #F5F8FC); }
.contact-careers::before { content: ""; position: absolute; inset: -6%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 14% 28%, rgba(126,190,246,.16), transparent 38%), radial-gradient(ellipse at 84% 74%, rgba(248,216,139,.11), transparent 34%), radial-gradient(ellipse at 58% 8%, rgba(220,231,242,.42), transparent 42%); animation: history-section-glow-drift 22s ease-in-out infinite alternate; animation-delay: -9s; }
.contact-careers > .shell { position: relative; z-index: 1; }
/* 岗位表格：表头 + 三行，整行是 summary，点开才展开职责与要求（参考站的交互）。 */
.job-table { --job-cols: minmax(0, 1fr) 150px 170px 44px; display: grid; gap: 10px; }
/* 透明描边：下面的岗位行有 1px 边框，表头不补上这 1px，两者的列就会错开。 */
.job-table__head { display: grid; grid-template-columns: var(--job-cols); gap: 16px; padding: 13px 22px; color: #fff; border: 1px solid transparent; border-radius: 10px; background: linear-gradient(135deg, #1F5FBF, #163A7A); font-size: 14px; font-weight: 650; letter-spacing: .04em; }
.job-table__head span:nth-child(n+2) { text-align: center; }
.job-row { overflow: hidden; border: 1px solid var(--history-border); border-radius: 10px; background: #fff; box-shadow: 0 2px 10px rgba(22,58,122,.05); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.job-row[open] { border-color: rgba(31,95,191,.3); box-shadow: 0 8px 24px rgba(31,95,191,.12); }
.job-row summary { display: grid; grid-template-columns: var(--job-cols); gap: 16px; align-items: center; padding: 17px 22px; cursor: pointer; list-style: none; }
.job-row summary::-webkit-details-marker { display: none; }
.job-row summary:hover { background: #F7FAFD; }
.job-row summary:focus-visible { outline: 2px solid rgba(63,140,255,.5); outline-offset: -2px; }
.job-row__title { color: var(--history-deep); font-size: 16px; font-weight: 650; }
.job-row__cell { color: var(--history-text); font-size: 15px; text-align: center; }
/* 表头已给出列名，宽屏时行内不再重复；窄屏表头收起后由它顶上。 */
.job-row__cell em { display: none; margin-right: 6px; color: var(--history-muted); font-size: 12px; font-style: normal; }
.job-row__toggle { position: relative; width: 22px; height: 22px; justify-self: center; }
.job-row__toggle::before, .job-row__toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; background: var(--history-brand); transform: translate(-50%, -50%); transition: transform var(--dur) var(--ease); }
.job-row__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.job-row[open] .job-row__toggle::after { transform: translate(-50%, -50%) rotate(0); }
.job-row[open] .job-row__toggle::before { transform: translate(-50%, -50%) rotate(180deg); }
.job-row__body { padding: 4px 22px 24px; border-top: 1px solid rgba(31,95,191,.1); color: var(--history-text); }
.job-row__body h3 { margin: 20px 0 8px; color: var(--history-brand); font-size: 14px; font-weight: 650; letter-spacing: .02em; }
.job-row__body p { margin: 0; font-size: 15px; line-height: 1.85; }
.job-row__body ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.85; }
.job-row__body ul li { margin-bottom: 4px; }
.job-row__body ul:last-child { padding-bottom: 4px; }
.job-table__empty { margin: 0; padding: 22px; border: 1px solid var(--history-border); border-radius: 10px; background: #fff; color: var(--history-muted); font-size: 15px; text-align: center; }

/* ── 在线留言：横版表单 ────────────────────────────────────────────── */
.contact-enquiry { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section-py); background: var(--page-tint, #FFFFFF); }
.contact-enquiry::before { content: ""; position: absolute; inset: -6%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 14% 28%, rgba(126,190,246,.16), transparent 38%), radial-gradient(ellipse at 84% 74%, rgba(248,216,139,.11), transparent 34%), radial-gradient(ellipse at 58% 8%, rgba(220,231,242,.42), transparent 42%); animation: history-section-glow-drift 22s ease-in-out infinite alternate; animation-delay: -16s; }
.contact-enquiry > .shell { position: relative; z-index: 1; }
/* 原表单是首页那条窄竖版（字段一条条往下排）。这里改横版：姓名/公司、电话/邮箱两两成行，
   留言独占整行，同意条款与提交按钮左右分列，整体宽度跟本页其他区块一致。 */
.enquiry-form--wide { padding: clamp(26px, 3.4vw, 44px); }
.enquiry-form--wide .enquiry-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; }
.enquiry-form--wide .enquiry-form__field--full { grid-column: 1 / -1; }
.enquiry-form--wide label { margin-top: 18px; }
.enquiry-form--wide textarea { min-height: 150px; }
.enquiry-form--wide .enquiry-form__footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 26px; padding-top: 22px; border-top: 1px solid #E4EBF3; }
.enquiry-form--wide .consent { margin-top: 0; }
/* 按钮不再拉满整行——横版下一条 1200px 宽的金色横条太重。 */
.enquiry-form--wide .enquiry-form__footer .button { width: auto; min-width: 190px; margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .contact-info-section::before,
  .contact-careers::before,
  .contact-enquiry::before { animation: none; }
}

@media (max-width: 1080px) {
  .contact-strip__item { padding: 22px 24px; }
  .contact-strip dd { font-size: 17px; }
}
@media (max-width: 820px) {
  /* 表头在窄屏收起，人数/日期改为行内标签，避免三列挤成一团。 */
  .job-table__head { display: none; }
  /* 标题独占第一行，人数与日期并排第二行，展开符号回到标题右侧——三项竖排会把行拉到三行高。 */
  .job-row summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24px; gap: 8px 14px; padding: 16px 18px; }
  .job-row__title { grid-column: 1 / 3; }
  .job-row__cell { justify-self: start; text-align: left; font-size: 14px; }
  .job-row__cell em { display: inline; }
  .job-row__toggle { grid-row: 1; grid-column: 3; }
  .job-row__body { padding: 4px 18px 20px; }
  .enquiry-form--wide .enquiry-form__grid { grid-template-columns: 1fr; gap: 0; }
  .enquiry-form--wide .enquiry-form__footer { flex-direction: column; align-items: stretch; }
  .enquiry-form--wide .enquiry-form__footer .button { width: 100%; }
}
@media (max-width: 760px) {
  /* 竖排之后分隔线要跟着转 90 度，否则两条相邻的卡片之间没有任何界线。 */
  .contact-strip { grid-template-columns: 1fr; }
  .contact-strip__item { padding: 18px 20px; }
  .contact-strip__item + .contact-strip__item::before { top: 0; bottom: auto; left: 20px; right: 20px; width: auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(31, 95, 191, .2) 12%, rgba(31, 95, 191, .2) 88%, transparent); }
  .contact-strip dd { font-size: 16px; }
}

/* ============================================================
   /products 页（产品中心）
   ------------------------------------------------------------
   与 /about、/contact 同一套做法：复用那两页的设计令牌、Hero 与 section 标题体系，
   只新增本页特有的三块：经营范围信息块、分类筛选条、紧凑型产品卡。
   会议决议「不取参考站那种大照片通栏」，所以卡片是横版的——左侧小图、右侧
   名称 + 简介 + 牌号规格，两列铺在 1280px 栅格里，一屏能看到四张。
   ============================================================ */
.products-hero,
.products-intro,
.products-catalog,
.products-cta { --history-brand: #1F5FBF; --history-bright: #3F8CFF; --history-deep: #163A7A; --history-accent: #F0C330; --history-text: #4B5D73; --history-muted: #8A9BB0; --history-bg-blue: #EAF4FF; --history-bg-soft: #F5F8FC; --history-border: #D9E4F2; --section-py: clamp(44px, 4.2vw, 64px); --ease: cubic-bezier(.4, 0, .2, 1); --dur: .25s; }
.products-intro,
.products-catalog { scroll-margin-top: 100px; }
/* 统一内容容器：与 /about、/contact 同宽同左基线。 */
.products-hero > .shell,
.products-intro > .shell,
.products-catalog > .shell,
.products-cta > .shell { width: min(1280px, calc(100% - 48px)); max-width: none; margin-inline: auto; }
/* Hero 复用 .history-hero 全部结构，只换主视觉：分切后的钢带比厂区航拍更贴「这里讲材料」。 */
.products-hero { background-image: url('/home/products-hero-png.webp'); background-position: 70% center; background-size: cover; background-origin: content-box; }
/* Keep the title readable across the full hero width, including wide desktop screens. */
body.page-products .products-hero::before { background: linear-gradient(90deg, rgba(234,244,255,.97) 0%, rgba(234,244,255,.90) 42%, rgba(234,244,255,.48) 72%, rgba(234,244,255,.60) 100%); }

/* ── 产品介绍 ──────────────────────────────────────────────────────── */
.products-intro { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section-py); background: var(--page-tint, #FFFFFF); }
.products-intro::before { content: ""; position: absolute; inset: -6%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 14% 28%, rgba(126,190,246,.16), transparent 38%), radial-gradient(ellipse at 84% 74%, rgba(248,216,139,.11), transparent 34%), radial-gradient(ellipse at 58% 8%, rgba(220,231,242,.42), transparent 42%); animation: history-section-glow-drift 22s ease-in-out infinite alternate; }
.products-intro > .shell { position: relative; z-index: 1; }
/* 经营范围：营业执照口径的一段话 + 三个总括数字。左侧一条蓝金竖线把它与正文段落区分开，
   不另起一张卡——它是上面 lead 的补充说明，不该有同等的视觉重量。 */
.products-scope { position: relative; display: grid; gap: 18px; padding: 24px 28px; border: 1px solid var(--history-border); border-radius: 14px; background: rgba(255,255,255,.88); box-shadow: 0 10px 34px rgba(22,58,122,.08); }
.products-scope::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: 14px 0 0 14px; background: linear-gradient(180deg, var(--history-brand), rgba(216,175,37,.9)); }
.products-scope__label { margin: 0; color: var(--history-muted); font-size: 11px; font-weight: 600; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; }
.products-scope__text { margin: -8px 0 0; color: #50657D; font-size: 15.5px; line-height: 1.85; }
.products-scope__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding-top: 18px; border-top: 1px solid rgba(31,95,191,.1); }
.products-scope__facts > div { position: relative; padding-inline: 4px; }
.products-scope__facts > div + div { padding-left: 26px; }
.products-scope__facts > div + div::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(31,95,191,.2) 20%, rgba(31,95,191,.2) 80%, transparent); }
.products-scope__facts dt { color: var(--history-muted); font-size: 11px; font-weight: 600; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; }
.products-scope__facts dd { margin: 7px 0 0; color: var(--history-deep); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.4; }

/* ── 主要产品 ──────────────────────────────────────────────────────── */
.products-catalog { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section-py); background: var(--page-tint-soft, #F5F8FC); }
.products-catalog::before { content: ""; position: absolute; inset: -6%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 14% 28%, rgba(126,190,246,.16), transparent 38%), radial-gradient(ellipse at 84% 74%, rgba(248,216,139,.11), transparent 34%), radial-gradient(ellipse at 58% 8%, rgba(220,231,242,.42), transparent 42%); animation: history-section-glow-drift 22s ease-in-out infinite alternate; animation-delay: -9s; }
.products-catalog > .shell { position: relative; z-index: 1; }
/* 分类筛选：药丸按钮一排，选中态用企业蓝实底。默认 hidden，脚本接管后才显示。 */
.product-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.product-filter[hidden] { display: none; }
.product-filter__btn { padding: 9px 20px; color: var(--history-text); border: 1px solid var(--history-border); border-radius: 999px; background: #fff; cursor: pointer; font-size: 14px; font-weight: 600; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.product-filter__btn:hover { color: var(--history-brand); border-color: rgba(31,95,191,.4); }
.product-filter__btn:focus-visible { outline: 2px solid rgba(63,140,255,.5); outline-offset: 2px; }
.product-filter__btn.is-active { color: #fff; border-color: transparent; background: linear-gradient(135deg, #1F5FBF, #163A7A); }

/* 产品卡：一张占满内容宽度，介绍与参数分区呈现，形成目录节奏而非表格网格。 */
.product-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.product-grid__empty { grid-column: 1 / -1; margin: 0; padding: 22px; border: 1px solid var(--history-border); border-radius: 10px; background: #fff; color: var(--history-muted); font-size: 15px; text-align: center; }
.product-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); overflow: hidden; border: 1px solid rgba(31,95,191,.12); border-radius: 16px; background: #fff; box-shadow: 0 8px 26px rgba(22,58,122,.045); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.product-card[hidden] { display: none; }
.product-card:hover { border-color: rgba(31,95,191,.28); box-shadow: 0 12px 32px rgba(31,95,191,.09); }
.product-card__body { display: flex; min-width: 0; flex-direction: column; padding: 30px clamp(24px, 4vw, 54px); }
.product-card__body::before { content: ""; position: absolute; top: 28px; bottom: 28px; left: 24px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(31,95,191,.65), rgba(31,95,191,.08)); }
.product-card__tag { display: inline-flex; margin: 0 0 12px; padding: 0; align-self: flex-start; color: var(--history-brand); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.product-card__title { margin: 0; color: var(--history-deep); font-size: clamp(1.3rem, 2vw, 1.65rem); font-weight: 650; line-height: 1.3; }
.product-card__en { margin: 5px 0 0; color: var(--history-muted); font-size: 11px; font-weight: 600; letter-spacing: .14em; line-height: 1.4; }
.product-card__text { margin: 14px 0 0; max-width: 62ch; color: #50657D; font-size: 15px; line-height: 1.85; }
/* 参数区使用柔和底色与短分隔线，保持卡片阅读感，不形成表格网格。 */
.product-card__spec { display: grid; align-content: center; gap: 0; margin: 16px; padding: 20px 26px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #F3F7FC, #F8FAFD); }
.product-card__spec > div { display: grid; grid-template-columns: minmax(82px, .34fr) minmax(0, 1fr); gap: 18px; padding: 12px 0; }
.product-card__spec > div + div { border-top: 1px solid rgba(31,95,191,.1); }
.product-card__spec dt { color: var(--history-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.product-card__spec dd { margin: 0; color: var(--history-deep); font-size: 14px; font-weight: 550; line-height: 1.65; }

/* ── 收口 CTA ──────────────────────────────────────────────────────── */
.products-cta { padding-block: var(--section-py); color: #fff; background: linear-gradient(135deg, #1F5FBF, #163A7A); }
.products-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.products-cta__copy h2 { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.75rem); font-weight: 650; line-height: 1.3; }
.products-cta__copy p { margin: 12px 0 0; max-width: 680px; color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.8; }
.products-cta__actions { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 12px; }
.products-cta__ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.products-cta__ghost:hover { color: var(--history-deep); background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .products-intro::before,
  .products-catalog::before { animation: none; }
  .product-card, .product-filter__btn { transition: none; }
}

@media (max-width: 1080px) {
  .product-card { grid-template-columns: minmax(0, 1fr) minmax(260px, .9fr); }
  .product-card__body { padding: 26px 30px 26px 42px; }
}
@media (max-width: 920px) {
  .product-card { grid-template-columns: minmax(0, 1fr) minmax(230px, .85fr); }
  .products-cta__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .product-card { grid-template-columns: minmax(0, 1fr); }
  .product-card__body { padding: 26px 22px 18px 34px; }
  .product-card__body::before { top: 24px; bottom: auto; left: 17px; height: 52px; }
  .product-card__spec { margin: 0 14px 14px; padding: 12px 20px; }
  .product-card__spec > div { grid-template-columns: minmax(75px, .38fr) minmax(0, 1fr); gap: 12px; padding: 10px 0; }
  .products-scope { padding: 20px 20px 20px 22px; }
  .products-scope__facts { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .products-scope__facts > div + div { padding-top: 14px; padding-left: 4px; border-top: 1px solid rgba(31,95,191,.1); }
  .products-scope__facts > div + div::before { display: none; }
  .products-cta__actions { width: 100%; }
  .products-cta__actions .button { flex: 1 1 auto; }
}

/* ============================================================
   企业生活 /people
   ------------------------------------------------------------
   与 /products、/capabilities 同一套版式：同一组设计令牌、同一个 .history-hero、
   同一个 .history-section-head、同宽内容容器与 section 间距、同样的 12px 圆角卡片。
   本页只保留自己的照片网格、培训卡与工作环境块。
   ============================================================ */
.people-hero,
.people-section { --history-brand: #1F5FBF; --history-bright: #3F8CFF; --history-deep: #163A7A; --history-accent: #F0C330; --history-text: #4B5D73; --history-muted: #8A9BB0; --history-bg-blue: #EAF4FF; --history-bg-soft: #F5F8FC; --history-border: #D9E4F2; --section-py: clamp(44px, 4.2vw, 64px); --ease: cubic-bezier(.4, 0, .2, 1); --dur: .25s; }
.people-section { scroll-margin-top: 100px; }
.people-hero > .shell,
.people-section > .shell { width: min(1280px, calc(100% - 48px)); max-width: none; margin-inline: auto; }
/* 员工交流横幅等比例铺满可见区域，窄屏优先保留右侧人物。 */
.people-hero { background-image: url('/people/people-hero-png.webp'); background-position: 72% center; background-size: cover; background-origin: content-box; }

.people-section { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section-py); background: var(--page-tint, #FFFFFF); }
.people-section--tint { background: var(--page-tint-soft, #F5F8FC); }
.people-section::before { content: ""; position: absolute; inset: -6%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 14% 28%, rgba(126,190,246,.16), transparent 38%), radial-gradient(ellipse at 84% 74%, rgba(248,216,139,.11), transparent 34%), radial-gradient(ellipse at 58% 8%, rgba(220,231,242,.42), transparent 42%); animation: history-section-glow-drift 22s ease-in-out infinite alternate; }
.people-section--tint::before { animation-delay: -9s; }
.people-section > .shell { position: relative; z-index: 1; }

.people-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.people-grid--featured { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.people-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.people-grid--care { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 卡片与 .product-card / .equip-card 同一套边框、圆角、阴影与悬停反馈。 */
.people-card,
.people-note { overflow: hidden; border: 1px solid var(--history-border); border-radius: 12px; background: #fff; box-shadow: 0 2px 10px rgba(22,58,122,.05); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.people-card:hover,
.people-note:hover { transform: translateY(-3px); border-color: rgba(31,95,191,.3); box-shadow: 0 8px 24px rgba(31,95,191,.12); }
.people-card { display: flex; min-width: 0; flex-direction: column; }
.people-card--wide { grid-column: span 2; }
.people-card--care { display: grid; grid-template-columns: 1.1fr 1fr; }
.people-card__media { overflow: hidden; background: var(--history-bg-soft); }
.people-photo { display: block; width: 100%; height: 178px; object-fit: cover; transition: transform .45s var(--ease); }
.people-card:hover .people-photo { transform: scale(1.03); }
.people-card--wide .people-photo { height: 224px; }
.people-card--care .people-card__media { height: 100%; }
.people-card--care .people-photo { height: 100%; min-height: 232px; }
.people-card__body { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 18px; }
.people-card__kicker { margin: 0 0 8px; color: var(--history-muted); font-size: 11px; font-weight: 600; letter-spacing: .14em; line-height: 1.4; }
.people-card h3,
.people-note h3 { margin: 0; color: var(--history-deep); font-size: 1.15rem; font-weight: 650; line-height: 1.35; }
.people-card__body p:last-child,
.people-note p { margin: 12px 0 0; color: #50657D; font-size: 14.5px; line-height: 1.8; }
.people-card__symbol { display: grid; min-height: 112px; place-items: center; color: rgba(31,95,191,.16); background: linear-gradient(135deg, #EAF4FF, #E8F4E8); font-size: 3rem; font-weight: 750; letter-spacing: .08em; }
.people-note { position: relative; padding: 24px 24px 22px; }
.people-note > span { display: inline-grid; width: 28px; height: 28px; margin-bottom: 18px; place-items: center; color: var(--history-brand); border-radius: 50%; background: rgba(31,95,191,.08); font-size: 12px; font-weight: 700; }

/* 工作环境：标题交给 .history-section-head，这里只剩「文字 + 装饰块」两栏。 */
.people-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr); align-items: center; gap: 48px; padding: 28px 32px; border: 1px solid var(--history-border); border-radius: 14px; background: rgba(255,255,255,.88); box-shadow: 0 10px 34px rgba(22,58,122,.08); }
.people-feature__copy h3 { margin: 0; color: var(--history-deep); font-size: 1.25rem; font-weight: 650; line-height: 1.35; }
.people-feature__copy p { max-width: 530px; margin: 12px 0 0; color: #50657D; font-size: 15px; line-height: 1.8; }
.people-feature__shape { display: grid; min-height: 220px; place-items: center; border: 1px solid rgba(31,95,191,.16); border-radius: 12px; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), transparent 40%), linear-gradient(145deg, #DCEBFA, #E7F3E2); color: rgba(22,58,122,.18); font-size: clamp(2rem, 5vw, 4rem); font-weight: 800; letter-spacing: .1em; line-height: .9; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .people-section::before { animation: none; }
  .people-card, .people-note, .people-photo { transition: none; }
  .people-card:hover, .people-note:hover { transform: none; }
  .people-card:hover .people-photo { transform: none; }
}
@media (max-width: 920px) {
  .people-grid--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people-feature { gap: 28px; }
}
@media (max-width: 680px) {
  .people-grid, .people-grid--featured, .people-grid--three, .people-grid--care { grid-template-columns: minmax(0, 1fr); }
  .people-card--wide, .people-card--care { grid-column: auto; }
  .people-card--care { display: flex; }
  .people-card--care .people-card__media { height: auto; }
  .people-card--care .people-photo { height: 210px; min-height: 0; }
  .people-feature { display: block; padding: 20px; }
  .people-feature__shape { min-height: 170px; margin-top: 24px; }
}

/* ============================================================
   加工设备 /capabilities
   ------------------------------------------------------------
   布局与内容照《视觉方案/HP.pptx》第 6、7 页落地，样式沿用 /products 那一套：
   同一组设计令牌、同一个 Hero、同一个 section 标题体系、同一个收口 CTA。
   本页只新增三块：工艺概览卡、设备位卡（含 PPT 上「设备照片」占位位）、设备能力表。
   ============================================================ */
.equipment-hero,
.equipment-process,
.equipment-group,
.equipment-specs { --history-brand: #1F5FBF; --history-bright: #3F8CFF; --history-deep: #163A7A; --history-accent: #F0C330; --history-text: #4B5D73; --history-muted: #8A9BB0; --history-bg-blue: #EAF4FF; --history-bg-soft: #F5F8FC; --history-border: #D9E4F2; --section-py: clamp(44px, 4.2vw, 64px); --ease: cubic-bezier(.4, 0, .2, 1); --dur: .25s; }
.equipment-process,
.equipment-group,
.equipment-specs { scroll-margin-top: 100px; }
/* 统一内容容器：与 /products、/about 同宽同左基线。 */
.equipment-hero > .shell,
.equipment-process > .shell,
.equipment-group > .shell,
.equipment-specs > .shell { width: min(1280px, calc(100% - 48px)); max-width: none; margin-inline: auto; }
/* Hero 复用 .history-hero 全部结构，只换主视觉：分条中的钢带比厂区航拍更贴「这里讲机器」。 */
.equipment-hero { background-image: url('/home/process-slitting-png.webp'); }

.equipment-process,
.equipment-specs { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section-py); background: var(--page-tint, #FFFFFF); }
.equipment-group { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section-py); background: var(--page-tint-soft, #F5F8FC); }
.equipment-group--alt { background: var(--page-tint, #FFFFFF); }
.equipment-process::before,
.equipment-group::before,
.equipment-specs::before { content: ""; position: absolute; inset: -6%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 14% 28%, rgba(126,190,246,.16), transparent 38%), radial-gradient(ellipse at 84% 74%, rgba(248,216,139,.11), transparent 34%), radial-gradient(ellipse at 58% 8%, rgba(220,231,242,.42), transparent 42%); animation: history-section-glow-drift 22s ease-in-out infinite alternate; }
.equipment-group::before { animation-delay: -9s; }
.equipment-specs::before { animation-delay: -14s; }
.equipment-process > .shell,
.equipment-group > .shell,
.equipment-specs > .shell { position: relative; z-index: 1; }

/* ── 工艺概览（PPT 第 6 页顶部三张照片） ─────────────────────────── */
.equipment-process__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.process-card { display: flex; margin: 0; overflow: hidden; flex-direction: column; border: 1px solid var(--history-border); border-radius: 12px; background: #fff; box-shadow: 0 2px 10px rgba(22,58,122,.05); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.process-card:hover { transform: translateY(-3px); border-color: rgba(31,95,191,.3); box-shadow: 0 8px 24px rgba(31,95,191,.12); }
.process-card > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.process-card__body { display: flex; flex: 1; flex-direction: column; padding: 18px 22px 20px; }
.process-card__title { margin: 0; color: var(--history-deep); font-size: 1.1rem; font-weight: 650; line-height: 1.35; }
.process-card__text { margin: 10px 0 0; color: #50657D; font-size: 14.5px; line-height: 1.8; }

/* ── 设备位卡（PPT 上的 SL1–SL5 / LV1 / LV3 / 手工剪板机） ───────── */
.equipment-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.equipment-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.equip-card { display: flex; overflow: hidden; flex-direction: column; border: 1px solid var(--history-border); border-radius: 12px; background: #fff; box-shadow: 0 2px 10px rgba(22,58,122,.05); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.equip-card:hover { transform: translateY(-3px); border-color: rgba(31,95,191,.3); box-shadow: 0 8px 24px rgba(31,95,191,.12); }
/* 二厂设备在 PPT 里是整行标蓝，这里换成左侧一条蓝边——整卡铺蓝会盖掉卡片本身的层次。 */
.equip-card--plant2 { border-color: rgba(31,95,191,.35); box-shadow: inset 3px 0 0 var(--history-bright), 0 2px 10px rgba(22,58,122,.05); }
.equip-card__media { overflow: hidden; aspect-ratio: 4 / 3; background: var(--history-bg-soft); }
/* 三张一排时卡片更宽，4:3 会让照片位高得压过下面的参数——压扁到 16:10。 */
.equipment-grid--three .equip-card__media { aspect-ratio: 16 / 10; }
.equip-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 照片占位位：客户还没提供实拍前，把 PPT 上那个「SLx 设备照片」的格子原样做出来，
   既说明这里将来放什么，也不冒充成已有内容。 */
.equip-card__media--pending { display: grid; align-content: center; justify-items: center; gap: 6px; background-image: linear-gradient(150deg, rgba(234,241,250,.95), rgba(220,231,245,.95)), repeating-linear-gradient(135deg, rgba(31,95,191,.05) 0 10px, transparent 10px 20px); }
.equip-card__slot { color: var(--history-brand); font-size: 1.05rem; font-weight: 700; letter-spacing: .12em; }
.equip-card__pending { color: #93A6BE; font-size: 11.5px; letter-spacing: .08em; }
.equip-card__body { display: flex; flex: 1; flex-direction: column; padding: 14px 16px 16px; }
.equip-card__no { display: flex; margin: 0 0 8px; align-items: center; gap: 8px; }
.equip-card__index { display: grid; width: 22px; height: 22px; place-items: center; color: var(--history-brand); border-radius: 50%; background: rgba(31,95,191,.08); font-size: 13px; font-weight: 700; }
.equip-card__badge { padding: 2px 8px; color: #17518F; border-radius: 999px; background: #BDD7EE; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; }
.equip-card__title { margin: 0; color: var(--history-deep); font-size: 1rem; font-weight: 650; line-height: 1.35; }
.equip-card__maker { margin: 5px 0 0; color: var(--history-muted); font-size: 12px; line-height: 1.5; }
.equip-card__spec { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid rgba(31,95,191,.1); }
.equip-card__spec > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 3px 0; }
.equip-card__spec dt { flex-shrink: 0; color: var(--history-muted); font-size: 11.5px; }
.equip-card__spec dd { margin: 0; color: var(--history-text); font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; }

/* ── 设备能力表（PPT 两页表格合一） ─────────────────────────────── */
.equipment-table-shell { max-width: none; }
.equipment-table { width: 100%; min-width: 1120px; margin: 0; border: 0; border-collapse: separate; border-spacing: 0; background: #fff; font-size: .86rem; }
.equipment-table th,
.equipment-table td { min-width: 82px; padding: 12px 10px; border: 0; border-right: 1px solid #DCE4EC; border-bottom: 1px solid #DCE4EC; color: var(--history-text, #4B5D73); text-align: center; vertical-align: middle; font-variant-numeric: tabular-nums; }
.equipment-table thead th { padding: 11px 10px; color: #fff; border-right: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); background: #163A7A; font-size: .8rem; font-weight: 650; line-height: 1.4; }
.equipment-table thead tr:last-child th { background: #1F5FBF; }
.equipment-table__name { min-width: 178px; text-align: left; }
.equipment-table tbody td.equipment-table__name { position: sticky; z-index: 2; left: 0; color: #163A7A; background: #fff; font-weight: 650; box-shadow: 8px 0 16px rgba(12,43,82,.05); }
.equipment-table tbody tr:nth-child(even) td { background: #F6F9FC; }
.equipment-table tbody tr:nth-child(even) td.equipment-table__name { background: #F6F9FC; }
.equipment-table tbody tr:hover td { background: #EDF4FB; }
/* 二厂设备：PPT 用整行淡蓝底标注，这里照搬；注释里的色块用同一个值。 */
.equipment-table tbody tr.is-plant2 td,
.equipment-table tbody tr.is-plant2:nth-child(even) td,
.equipment-table tbody tr.is-plant2 td.equipment-table__name { background: #DCEAF8; }
.equipment-table tbody tr.is-plant2:hover td { background: #D2E4F6; }
.equipment-table__badge { display: inline-block; margin-left: 8px; padding: 2px 8px; color: #17518F; border-radius: 999px; background: #BDD7EE; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.equipment-note { display: flex; margin: 14px 0 0; align-items: center; gap: 8px; color: #718298; font-size: .82rem; line-height: 1.6; }
.equipment-note__swatch { width: 14px; height: 14px; flex-shrink: 0; border: 1px solid rgba(31,95,191,.28); border-radius: 3px; background: #DCEAF8; }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .equipment-process::before,
  .equipment-group::before,
  .equipment-specs::before { animation: none; }
  .process-card, .equip-card { transition: none; }
  .process-card:hover, .equip-card:hover { transform: none; }
}

@media (max-width: 1080px) {
  /* 5 台分条线在中屏排成 3 列，最后两张落到第二行——比压成 5 条窄柱好读。 */
  .equipment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .equipment-process__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equipment-grid,
  .equipment-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .equipment-process__grid,
  .equipment-grid,
  .equipment-grid--three { grid-template-columns: minmax(0, 1fr); }
  .equipment-table { min-width: 1040px; font-size: .8rem; }
  .equipment-table th,
  .equipment-table td { padding: 10px 8px; }
  .equipment-table__name { min-width: 152px; }
}

/* ============================================================
   隐私政策 /privacy · 法律声明 /legal
   ------------------------------------------------------------
   与其它栏目同一个 .history-hero 与同宽内容容器；正文是长篇条款，
   放进一张限宽白卡里控制行长，不铺满 1280。
   ============================================================ */
.policy-hero,
.policy-section { --history-brand: #1F5FBF; --history-deep: #163A7A; --history-text: #4B5D73; --history-muted: #8A9BB0; --history-bg-blue: #EAF4FF; --history-border: #D9E4F2; --section-py: clamp(44px, 4.2vw, 64px); }
.policy-hero > .shell,
.policy-section > .shell { width: min(1280px, calc(100% - 48px)); max-width: none; margin-inline: auto; }
.policy-hero { background-image: url('/home/process-reference/slitting-process-v3-poster-png.webp'); }
.policy-section { position: relative; padding-block: var(--section-py); background: var(--page-tint-soft, #F5F8FC); }
.policy-body.article-body { max-width: 920px; padding: clamp(24px, 3.4vw, 44px) clamp(20px, 4vw, 52px); overflow: visible; border: 1px solid var(--history-border); border-radius: 14px; background: #fff; box-shadow: 0 10px 34px rgba(22,58,122,.08); color: #50657D; font-size: 15px; line-height: 1.85; }
.policy-body h2 { margin: 1.9em 0 .7em; padding-top: 1.4em; border-top: 1px solid rgba(31,95,191,.1); color: var(--history-deep); font-size: 1.2rem; font-weight: 650; line-height: 1.4; }
.policy-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* 隐私政策开头先是一行生效日期，紧跟的第一个标题同样不画分隔线。 */
.policy-body > p.muted:first-child + h2 { margin-top: 1.4em; padding-top: 0; border-top: 0; }
.policy-body h3 { margin: 1.4em 0 .5em; color: var(--history-deep); font-size: 1.02rem; font-weight: 650; }
.policy-body li { margin-bottom: .35em; }
.policy-body .muted { color: var(--history-muted); font-size: 13.5px; }
.policy-body a { color: var(--history-brand); }

/* Full customer certificate PDFs, including translated pages and annexes. */
.cert-source-link { display: block; padding: 12px 16px; color: #1f5fbf; font-size: .85rem; text-align: center; text-underline-offset: 3px; }