/* 品牌官网排版系统 v1
 *
 * 这一层不改任何一个字的内容，也不动区块结构，只统一「设计语言」——
 * 把 geo.jiomig.com 上已经跑通的那一套规则搬过来。
 *
 * 现状的问题不在单个区块好不好看，而在同一页上并存着两套语言：
 *
 * 1. 眉题有两个组件。`.eyebrow` 是裸的大写小字，`.editorial-kicker` 带
 *    一根短横线和编号。同一屏里「ABOUT JIOMING」和「02 / HOW WE WORK」
 *    长得不像同一个网站。
 *
 * 2. 按钮用 `justify-content: space-between` 加 `min-width: 170px`。
 *    文字靠左、箭头被推到最右，中间空出一段跟内容无关的距离——这段空白
 *    是布局算出来的，不是设计定出来的，所以每个按钮的空隙都不一样宽。
 *    首屏更是「一个实心按钮 + 一条裸文字链接」，两边分量不对等。
 *
 * 3. 一页上有四组颜色：paper、deep(#13262a)、红(#b5121b 和 #bd0a1a 两支)、
 *    青绿(#0d6f73 与 #146f74)。geo 全站只有 paper / deep / 红三支。
 *    颜色越多，越难显得克制。
 *
 * 4. 缺一层纸张颗粒。geo 全站压着一层极淡的噪点，照片和大色块之间因此
 *    有了统一的「印刷感」。少了这一层，大色块会显得很「数字」。
 *
 * 加载顺序：排在 editorial-depth-v2 之后、mobile-refine-v1 之前。
 * mobile-refine 里那套窄屏字号是逐档量出来的，不能被这一层盖掉。
 */

/* ---------- 拉丁字与数字：IBM Plex Sans（自托管） ----------
 *
 * 为什么加这一层：实测下来，承担「质感」的几款字体全都只有 macOS 才有——
 * 中文标题落在 Songti SC、正文落在 PingFang SC、英文眉题和日期落在
 * Avenir Next，连指标区的数字「4 / 10+」都是用宋体渲染的。
 * Windows 访客一个都拿不到，标题会掉到 SimSun 加浏览器合成的假粗体。
 *
 * 这里只换拉丁字母和数字，中文标题继续用宋体——集团的分量感和业务官网
 * 的一致性都靠它，不动。科技感由西文、数字和大写标签承担。
 *
 * 字体文件随二进制一起发，不走任何外部网络：
 *   IBM Plex Sans 1.1.0，SIL OFL 1.1，许可全文在 fonts/OFL.txt
 *   Latin1 分片 21KB + Pi 分片（箭头与 ∞）7.5KB，两个字重共 57KB
 *
 * 分成 Latin1 / Pi 两片是上游就切好的：浏览器按 unicode-range 只下用得到的
 * 那一片。字体里没有的字形（汉字）会自动落到栈里下一款，所以中文不受影响。
 */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-Regular-Pi.woff2") format("woff2");
  unicode-range: U+2190-2199, U+21A9-21AA, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+2713;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-Bold-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-Bold-Pi.woff2") format("woff2");
  unicode-range: U+2190-2199, U+21A9-21AA, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+2713;
}

:root {
  /* 红色收敛成一支。原来 site.css 的 #b5121b 与 editorial-depth 的
     #bd0a1a 同页出现，深浅差得肉眼可辨。取后者——它更亮、更接近印刷红。 */
  --red: #bd0a1a;
  --red2: #d7252f;
  --red-dark: #8f0713;
  --ink: #111719;
  --muted: #707777;
  --deep: #10282c;
  --deep-2: #16383c;
  --line: rgba(17, 23, 25, 0.15);
  --ease: cubic-bezier(0.22, 0.75, 0.18, 1);

  /* Plex 只覆盖拉丁字母、数字和标点，汉字会逐字回落到后面的中文字体。
     所以把它放在最前不会影响中文，只会接管西文。 */
  --latin: "IBM Plex Sans";
  --sans: var(--latin), "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* ---------- 纸张颗粒 ---------- */

/* 一层固定的噪点，压在所有内容之上。乘法混合，只压暗不提亮，所以浅色
   区域几乎看不出，深色照片和大色块上才显出质感。指针事件全部穿透。 */
body::before {
  content: "";
  position: fixed;
  z-index: 9999;
  inset: 0;
  opacity: 0.13;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body::before { opacity: 0.09; }
}

::selection {
  color: #fff;
  background: var(--red);
}

/* ---------- 眉题：全站一个组件 ---------- */

/* `.editorial-kicker` 的写法（横线 + 大写 + 宽字距）本来就是对的，
   问题是只有三个区块在用。把 `.eyebrow` 拉齐到同一套，横线取
   currentColor，深底浅底都不用另写规则。 */
.eyebrow,
.partner-wall__eyebrow,
.editorial-kicker {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.9rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.23em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow::before,
.partner-wall__eyebrow::before,
.editorial-kicker::before {
  content: "";
  flex: 0 0 auto;
  width: 2.6rem;
  height: 1px;
  background: currentColor;
}

.eyebrow.red,
.partner-wall__eyebrow {
  color: var(--red);
}

/* 首屏与整版配图上的眉题压在照片上，需要比正文更实一点。 */
.hero .eyebrow,
.page-hero .eyebrow,
.vision-content .eyebrow,
.metrics-section .eyebrow,
.contact-panel .eyebrow {
  color: rgba(255, 255, 255, 0.88);
}

/* ---------- 展示字体 ---------- */

/* 字号一律不动。首屏和各区块标题都用 `<span>` 手工断行，其中一部分带
   `white-space: nowrap`；改字号就会改断行位置，那是内容层的决定。
   这里只统一字距、行高和字重——现状是 -0.025em 到 -0.06em 五档并存。 */
.hero h1,
.about-copy h2,
.about-section h2,
.section-heading h2,
.capabilities .section-heading h2,
.metric-intro h2,
.metrics-section h2,
.vision-content h2,
.vision-section h2,
.news-heading h2,
.news-section h2,
.closing-cta h2,
.story-title h2,
.contact-panel h2,
.partner-wall__head h2,
.editorial-method__statement h2,
.editorial-cases__heading h2,
.editorial-core__copy h2,
.page-hero h1,
.article-heading h1 {
  font-family: var(--jioming-display, var(--serif));
  font-weight: 700;
  letter-spacing: -0.055em;
  font-synthesis: weight;
  text-wrap: balance;
}

.hero h1 {
  font-weight: 800 !important;
  line-height: 1.12;
}

/* 二级标题（卡片、条目、栏目名）此前从 -0.03em 到默认字距各写各的。 */
.capability-card h3,
.belief-grid h3,
.news-card h3,
.news-row-body h2,
.editorial-case__copy h3,
.editorial-core__capabilities h3,
.editorial-method__process h3,
.about-visual figcaption b,
.contact-action-copy strong,
.contact-qr-copy strong,
.article-end strong {
  font-family: var(--jioming-display, var(--serif));
  font-weight: 600;
  letter-spacing: -0.035em;
}

/* 段落：geo 的区块说明统一是 muted + 行高 2。现状 1.75 / 1.8 / 1.9 / 1.95
   四档混用，同一页上行距不齐，读起来就是「排得不讲究」。 */
.about-copy > p:not(.eyebrow),
.section-heading > p,
.news-heading > p,
.metric-intro > p:not(.eyebrow),
.editorial-cases__heading > p,
.partner-wall__head p,
.story-body > p {
  color: var(--muted);
  line-height: 2;
  text-wrap: pretty;
}

/* ---------- 按钮 ---------- */

/* 去掉 space-between + min-width。标签和箭头之间只留一个固定的 gap，
   按钮宽度由内容决定——所有按钮的内节奏因此一致。 */
.button {
  justify-content: center;
  gap: 1rem;
  min-width: 0;
  min-height: 3.25rem;
  padding: 0.85rem 1.45rem;
  border-radius: 0;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 0.25s ease, color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.button span {
  margin-left: 0;
}

.button:hover {
  transform: translateY(-3px);
}

.button.primary {
  background: var(--red);
}

.button.primary:hover {
  background: var(--red-dark);
}

/* 首屏原本是「实心按钮 + 一条 13px 的裸文字链接」。两个动作的视觉分量
   差了一个量级，看上去像主按钮旁边掉了一行字。次要动作给一个描边按钮，
   跟主按钮同高同内边距，成对出现。 */
.hero-actions {
  gap: 1rem;
}

.hero-actions .text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 3.25rem;
  padding: 0.85rem 1.45rem;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.hero-actions .text-link span {
  margin-left: 0;
}

.hero-actions .text-link:hover {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.24);
  transform: translateY(-3px);
}

/* ---------- 文字链接 ---------- */

/* `.arrow-link` 原来是「墨色文字 + 38px 空隙 + 红箭头 + 黑下划线」。
   那 38px 同样是布局算出来的空白。改成 geo 的写法：整条都是红的，
   下划线也是红的，箭头紧跟文字。 */
.arrow-link {
  gap: 0.7rem;
  padding-bottom: 0.35rem;
  color: var(--red);
  border-bottom-color: rgba(189, 10, 26, 0.4);
  font-weight: 700;
  transition: gap 0.25s var(--ease), border-color 0.25s ease;
}

.arrow-link b {
  color: inherit;
}

.arrow-link:hover {
  gap: 1.05rem;
  border-bottom-color: var(--red);
}

.news-card > div > b,
.editorial-case__copy span {
  letter-spacing: 0.02em;
}

/* 全站统一的键盘焦点框。此前只有业务卡片和联系区有，其余靠浏览器默认。 */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
.arrow-link:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}

.hero a:focus-visible,
.vision-section a:focus-visible,
.page-hero a:focus-visible,
.metrics-section a:focus-visible,
.editorial-core a:focus-visible,
.editorial-method a:focus-visible {
  outline-color: #fff;
}

/* ---------- 区块标题的版式 ---------- */

/* flex + space-between 只保证两端对齐，中间那段距离随说明文字长度浮动。
   geo 用的是固定比例的两栏网格：标题占 1.35，说明占 0.65，底对齐。
   同一套比例已经用在 .editorial-cases__heading 和 .partner-wall__head 上，
   这里把首页其余两个标题也拉进来。 */
.section-heading,
.news-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr);
  align-items: end;
  gap: clamp(2rem, 6vw, 7rem);
}

.section-heading > p,
.news-heading > .arrow-link {
  justify-self: end;
  max-width: 30rem;
  margin: 0 0 0.4rem;
}

.news-heading > .arrow-link {
  max-width: none;
}

/* ---------- 颜色收敛 ---------- */

/* 指标区块原来是青绿渐变，是全页唯一一处青绿。红色已经是主强调色，
   再加一支同样饱和的青绿，两个都不像重点。换到深绿黑那一支，
   首页就只剩 paper / deep / 红三支。 */
.metrics-section {
  background:
    radial-gradient(circle at 88% 16%, rgba(189, 10, 26, 0.16), transparent 26rem),
    linear-gradient(135deg, var(--deep-2) 0%, var(--deep) 100%);
}

.metrics-section::after {
  color: rgba(255, 255, 255, 0.019);
}

.metric {
  border-left-color: rgba(255, 255, 255, 0.16);
}

.metric strong {
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.metric span {
  color: rgba(255, 255, 255, 0.58);
}

/* 关于页的联系面板同理，青绿是这一页唯一的第四支颜色。
   企业微信按钮保留微信绿——那是外部品牌色，不属于本站调色板。

   这几条要带上 `.inner-page`（page.html 的 body class）才生效：
   contact-actions v4–v7 排在这一层之后，同特异度下后者胜出。 */
.inner-page .contact-panel {
  background:
    radial-gradient(circle at 92% 8%, rgba(189, 10, 26, 0.14), transparent 30%),
    linear-gradient(145deg, var(--deep-2) 0%, var(--deep) 58%, #0c2023 100%);
}

.inner-page .contact-panel::before {
  color: rgba(255, 255, 255, 0.03);
}

.inner-page .contact-panel h2 {
  letter-spacing: -0.055em;
}

.inner-page .contact-action-call {
  color: var(--deep);
}

.inner-page .contact-action-call .contact-action-arrow {
  background: var(--deep);
  border-color: var(--deep);
}

.inner-page .contact-qr-copy strong,
.inner-page .contact-action-copy strong {
  font-family: var(--jioming-display, var(--serif));
  letter-spacing: -0.02em;
}

.editorial-cases {
  background:
    radial-gradient(circle at 92% 8%, rgba(189, 10, 26, 0.05), transparent 30rem),
    #f2f0ea;
}

/* ---------- 大字水印 ---------- */

/* 「鸣」和「TOGETHER」两块水印背靠背排在一起，后者 20rem 高、又被
   区块的 overflow 切掉大半，看上去像一条灰色的横带而不是底纹。
   压淡、缩小、往上收，让它退回背景层。 */
/* 「TOGETHER」原来是 20rem、贴在区块顶边、被 overflow 切掉上半截，
   而它的上一屏正好也压着一个同样大的「鸣」。两块被切开的大字连着出现，
   读起来是两条灰带，不是底纹。缩小、整体移进区块内部。 */
.partner-wall::before {
  top: 0.5em;
  right: 0.06em;
  color: rgba(23, 42, 45, 0.013);
  font-size: clamp(3rem, 5.2vw, 6rem);
}

.closing-mark {
  color: rgba(189, 10, 26, 0.035);
}

/* ---------- 页脚 ---------- */

/* 原来是 flex + space-between：品牌贴最左，三栏贴最右，中间一大片空。
   改成 geo 的结构——品牌与标语一行、一条分隔线、三栏靠右对齐。 */
.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: start;
  gap: clamp(2.5rem, 6vw, 7rem);
  padding-bottom: 3.5rem;
  border-bottom: 1px solid var(--line);
}

.footer-brand strong {
  letter-spacing: 0.06em;
}

.footer-brand span {
  max-width: 22rem;
  line-height: 1.85;
}

.footer-columns {
  justify-self: end;
  width: 100%;
  max-width: 44rem;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.footer-columns b {
  font-family: var(--jioming-display, var(--serif));
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.footer-columns > div {
  gap: 0.85rem;
  line-height: 1.6;
}

.footer-bottom {
  align-items: center;
  border-top: 0;
  color: #8a9296;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

/* ---------- 卡片与条目的收边 ---------- */

.capability-card,
.news-card,
.editorial-case,
.belief-grid article {
  transition: transform 0.4s var(--ease), box-shadow 0.4s ease;
}

.card-content small,
.editorial-case__copy small {
  letter-spacing: 0.2em;
}

/* 压在照片上的小号大写标签，原来是 72% 白，遇到浅色照片就化在背景里。 */
.capability-card .card-content small {
  color: rgba(255, 255, 255, 0.86) !important;
}

/* 场景卡片的两层压暗层其实一直没生效。
 *
 * editorial-depth 里那条 `article > *:not(.editorial-case__copy)` 给每个
 * 直接子元素派了 `z-index: 2`，其中就包括 `<img>`；而两层压暗伪元素都是
 * `z-index: 1`。照片因此盖在压暗层之上，只有文案（同为 2、DOM 在后）
 * 还浮在最上面。看到的结果是「文案直接贴在原图上」。
 * 把两层压暗层抬到照片之上，文案再抬一层。 */
.editorial-cases article::before,
.editorial-case::after {
  z-index: 3;
}

.editorial-case__copy {
  z-index: 4;
}

/* 压暗层原来从 20% 处才起效，而文案从卡片下缘往上占到四成。
   把渐变的起点抬高、末端加重，文案区始终有一层稳定的暗场。 */
.editorial-case::after {
  background: linear-gradient(
    180deg,
    rgba(6, 17, 19, 0) 4%,
    rgba(6, 17, 19, 0.26) 38%,
    rgba(6, 17, 19, 0.84) 64%,
    #0a181b 86%
  );
}

/* 上面那层压暗层是给整张卡定调的；这一层只在文案带后面，
   保证「落地窗 / 天空 / 逆光」这类高亮照片下小字也有底。 */
.editorial-case__copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2rem 0 0;
  background: linear-gradient(180deg, rgba(10, 24, 27, 0), rgba(10, 24, 27, 0.72) 34%, rgba(10, 24, 27, 0.86));
}

.editorial-case__copy {
  isolation: isolate;
}

.editorial-case__copy small {
  color: rgba(255, 255, 255, 0.84) !important;
}

.capability-tags li {
  letter-spacing: 0.1em;
}

/* 愿景整版配图的压暗层在 64% 处就已经降到 0.22，而正文段落一直排到 33%，
   正好落在夕阳最亮的一段上。左侧加重、过渡推后，文字始终有底。 */
.vision-wash {
  background:
    linear-gradient(90deg, rgba(10, 30, 34, 0.88) 0%, rgba(10, 30, 34, 0.72) 32%, rgba(10, 30, 34, 0.24) 66%, transparent 88%),
    linear-gradient(0deg, rgba(8, 24, 28, 0.42), transparent 46%);
}

.trust-line {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.trust-line i {
  background: var(--red);
}

/* 分类标签为空时，`figure span` 会渲染成一个没有文字的红色小方块，
   看起来像没画完的元素。模板已改为空值不输出，这条兜住历史缓存。 */
.news-card figure span:empty {
  display: none;
}

/* ---------- 窄屏 ---------- */

/* 只补这一层新引入的东西。字号与竖向节奏由 mobile-refine-v1 负责，
   那一档是逐个屏宽量出来的，这里不碰。 */
@media (max-width: 760px) {
  .eyebrow::before,
  .partner-wall__eyebrow::before,
  .editorial-kicker::before {
    width: 1.6rem;
  }

  .eyebrow,
  .partner-wall__eyebrow,
  .editorial-kicker {
    gap: 0.6rem;
    margin-bottom: 1.2rem;
  }

  .hero-actions {
    gap: 0.75rem;
  }

  .hero-actions .button,
  .hero-actions .text-link {
    width: 100%;
    justify-content: space-between;
  }

  .section-heading,
  .news-heading {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .section-heading > p,
  .news-heading > .arrow-link {
    justify-self: start;
    margin-bottom: 0;
  }

  /* 「01」这个大号序号在桌面端落在标题左上方的空白里，窄屏没有那片空白，
     它正好压在标题的第三行上，显示为一团粉色。窄屏不需要这层装饰。 */
  .section-number {
    display: none;
  }

  .footer-main {
    grid-template-columns: 1fr;
    padding-bottom: 2.5rem;
  }

  .footer-columns {
    justify-self: start;
    max-width: none;
  }
}


/* ============================================================
 * 第二部分：版面结构
 *
 * 上半部分只统一了「同一个东西该长什么样」。这一部分动的是
 * 「区块本身怎么排」——文案一个字不改，改的是位置、比例和层次。
 *
 * 六件事：
 *
 * 1. 首屏那句「面向未来的智能产业集团」原本是一个浮在右下角的独立方框，
 *    和左边的标题、按钮没有任何视觉关联。收进文案列，接在按钮下面。
 * 2. 关于区块的「01」原本是 150px 的浅红大字，压在标题第三行上。
 *    收成栏目序号，和其他区块的「02 /」「03 /」对齐。
 * 3. 业务卡片原本是三张带间隙、高低错落的图片卡，白字浮在照片上。
 *    改成齐边、等高、照片向下渐隐到实色——文字永远落在实色上。
 * 4. 指标区块原本 336px 高，四个数字浮在一大片留白中间。给出行结构。
 * 5. 结尾行动区原本是米色底加一个红按钮，和上下都不分层。改成红色整幅。
 * 6. 页脚原本是浅米色，整页收不住。改成深色，给页面一个落点。
 *
 * 配色节奏因此变成 纸 → 深 → 纸 → 深 → 纸 → 红 → 纸 → 深，
 * 和业务官网一致。
 * ============================================================ */

/* ---------- 1 · 首屏 ---------- */

/* 收进文案列之后，它不再需要方框、模糊背景和绝对定位——
   它现在是文案的一部分，读法是「按钮 → 这一句」。 */
.hero-content .hero-status {
  position: static;
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: 2.6rem;
  padding: 0;
  border: 0;
  background: none;
  backdrop-filter: none;
}

.hero-content .hero-status .pulse {
  position: relative;
  width: .55rem;
  height: .55rem;
  background: var(--red);
  box-shadow: none;
}

/* 红点外面那圈扩散环。业务官网用同一个手法。 */
.hero-content .hero-status .pulse::after {
  content: "";
  position: absolute;
  inset: -.45rem;
  border: 1px solid rgba(189, 10, 26, .5);
  border-radius: 50%;
  animation: heroSignal 2.2s ease-out infinite;
}

.hero-content .hero-status div {
  gap: .25rem;
  line-height: 1.4;
}

.hero-content .hero-status small {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: #e2606c;
  opacity: 1;
}

.hero-content .hero-status b {
  margin-top: .1rem;
  font-size: .8rem;
  font-weight: 700;
}

@keyframes heroSignal {
  0%, 100% { opacity: .7; transform: scale(.75); }
  50% { opacity: .12; transform: scale(1.3); }
}

/* 「SCROLL」原本是竖排在左下角的一条 8px 小字。改成横排的底部提示，
   横线随呼吸伸缩——和首屏底边成为同一条线上的东西。 */
.scroll-cue {
  left: clamp(1.5rem, 9vw, 9.4rem);
  bottom: 2.6rem;
  writing-mode: horizontal-tb;
  gap: .75rem;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: rgba(255, 255, 255, .72);
}

.scroll-cue span {
  width: 2.7rem;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  animation: scrollLine 2.2s ease-in-out infinite;
}

@keyframes scrollLine {
  0%, 100% { transform: scaleX(.35); }
  50% { transform: scaleX(1); }
}

/* ---------- 2 · 栏目序号 ---------- */

/* 原本是 150px、透明度 4.5% 的大字装饰，绝对定位在区块左上角——
   窄屏压在标题上，宽屏则和眉题抢同一块空白。
   收成一行栏目序号，位置、字重、字距都和「02 / HOW WE WORK」对齐。 */
.about-section .section-number {
  position: static;
  margin-bottom: .55rem;
  color: var(--red);
  font-family: var(--mono, var(--jioming-display, var(--serif)));
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .2em;
}

/* ---------- 3 · 业务矩阵 ---------- */

/* 原本三张卡片带 18px 间隙、中间一张高 90px，白字直接浮在照片上。
   高低错落没有编码任何信息——中间那张并不比另外两张重要。
   改成齐边等高：照片占上半，向下渐隐到实色，文字落在实色上。 */
.capability-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, .09);
}

.capability-card,
.capability-card.tall {
  height: 34rem;
  background: var(--deep);
  border-right: 1px solid rgba(255, 255, 255, .1);
}

.capability-grid > .capability-card:last-child {
  border-right: 0;
}

.capability-card > img {
  height: 62%;
  object-position: center 42%;
}

/* 照片向下渐隐到卡片实色。上半段几乎不压，下半段完全实色——
   文字区因此不是「压暗的照片」，而是真正的实色版面。 */
.capability-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(16, 40, 44, 0) 12%,
    rgba(16, 40, 44, .3) 32%,
    var(--deep) 50%
  );
  transition: background 360ms ease;
}

.capability-card:hover::after {
  background: linear-gradient(
    180deg,
    rgba(16, 40, 44, 0) 16%,
    rgba(16, 40, 44, .24) 34%,
    var(--deep) 52%
  );
}

.capability-card .card-content {
  bottom: 0;
  padding: 0 clamp(1.5rem, 2.2vw, 2.4rem) clamp(1.8rem, 2.4vw, 2.6rem);
}

/* 实色底上不再需要 text-shadow——它是给「字压在照片上」用的补丁。 */
.capability-card .card-content,
.capability-card .card-content small,
.capability-card .card-content h3,
.capability-card .card-content p,
.capability-card .card-content > span {
  text-shadow: none;
}

.capability-card .card-content h3 {
  margin: .55rem 0 .7rem;
  font-size: clamp(1.7rem, 2.2vw, 2.15rem);
}

.capability-card .card-content p {
  min-height: 0;
  font-size: .8rem;
  line-height: 1.85;
}

.capability-card .card-index {
  top: 1.5rem;
  right: 1.5rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: rgba(9, 26, 29, .5);
  backdrop-filter: blur(10px);
}

.capability-card .capability-tags {
  margin: 1.1rem 0 1.3rem;
}

.capability-card .card-content > span {
  padding-bottom: .35rem;
  border-bottom-color: rgba(255, 255, 255, .38);
  font-size: .72rem;
  letter-spacing: .04em;
}

/* ---------- 4 · 指标 ---------- */

/* 四个数字原本浮在 336px 高的一片留白中间，没有落点。
   给每一格定行结构：上留白撑开、数字坐在中线、说明贴着一条红色短横。 */
.metrics-section {
  align-items: center;
  padding-block: clamp(4.5rem, 7vw, 7rem);
}

.metric {
  min-height: 13rem;
  display: grid;
  grid-template-rows: 1fr auto auto;
  align-content: end;
  padding: 1.6rem 1.8rem;
  border-left-color: rgba(255, 255, 255, .14);
}

.metric strong {
  align-self: end;
  font-size: clamp(2.8rem, 3.6vw, 4.4rem);
  line-height: 1;
  letter-spacing: -.055em;
}

.metric span {
  align-self: start;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(226, 96, 108, .45);
  font-size: .72rem;
  letter-spacing: .1em;
}

/* ---------- 5 · 结尾行动区 ---------- */

/* 原本是米色底 + 一个红按钮，夹在浅色的新闻区和浅色的伙伴墙之间，
   三段一样亮，读不出「这里是结尾」。整幅换成红色，成为全页的收束点。 */
.closing-cta {
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .1), transparent 42%),
    var(--red);
}

.closing-cta .closing-mark {
  right: 6%;
  top: 50%;
  color: rgba(255, 255, 255, .055);
  font-size: min(28vw, 24rem);
  line-height: 1;
  transform: translateY(-50%);
}

.closing-cta .eyebrow {
  color: rgba(255, 255, 255, .82);
}

/* 红底上主按钮不能还是红的。 */
.closing-cta .button.primary {
  color: var(--deep);
  background: var(--white);
}

.closing-cta .button.primary:hover {
  color: var(--red);
  background: #fff;
}

/* ---------- 6 · 页脚 ---------- */

/* 浅米色页脚和它上面的伙伴墙几乎同色，整页没有落点。
   换成深色：页面从纸开始，到深色收住。 */
.site-footer {
  color: rgba(255, 255, 255, .74);
  background: #091a1d;
  border-top: 0;
}

.site-footer .footer-main {
  border-bottom-color: rgba(255, 255, 255, .13);
}

.site-footer .footer-brand strong {
  color: #fff;
}

.site-footer .footer-brand span,
.site-footer .footer-columns > div {
  color: rgba(255, 255, 255, .48);
}

.site-footer .footer-columns b {
  color: #fff;
}

.site-footer .footer-columns a:hover,
.site-footer .footer-bottom a:hover {
  color: #fff;
}

.site-footer .footer-bottom {
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, .13);
  color: rgba(255, 255, 255, .34);
}

.site-footer .footer-orbit {
  border-color: rgba(255, 255, 255, .07);
}

/* ---------- 分隔条 ---------- */

/* 首屏和关于区块之间那条白色横条比两边都亮，读成一道缝而不是一条分隔。
   压到纸色偏暗的一档，它才是「分隔」。 */
.trust-line {
  background: #eae5db;
  border-bottom: 1px solid var(--line);
}

/* ---------- 窄屏 ---------- */

@media (max-width: 1000px) {
  .capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capability-grid > .capability-card:nth-child(2n) {
    border-right: 0;
  }

  .capability-grid > .capability-card:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, .1);
  }
}

@media (max-width: 760px) {
  .hero-content .hero-status {
    margin-top: 2rem;
  }

  .scroll-cue {
    display: none;
  }

  .about-section .section-number {
    display: block;
    margin-bottom: .4rem;
    font-size: .66rem;
  }

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

  .capability-card,
  .capability-card.tall {
    height: 28rem;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }

  .capability-grid > .capability-card:last-child {
    border-bottom: 0;
  }

  .metric {
    min-height: 9.5rem;
    padding: 1.2rem 1.1rem;
  }

  .metric span {
    margin-top: .8rem;
    padding-top: .7rem;
  }

  .closing-cta .closing-mark {
    right: -2rem;
    font-size: 15rem;
  }
}

/* ---------- 7 · 组织智能：左栏放宽 ---------- */

/* 标题「构建组织智能闭环」带 white-space: nowrap，需要 490px，
   而 0.82fr 的左栏扣掉内边距只剩 403px——最后一个字一直被切在面板边上。
   右侧是轨道图，本来就有大量留白，把宽度让给左栏。 */
/* 必须带 min-width：editorial-depth 在 980px 以下把它塌成单列，
   而这一层排在它之后——不加断点的话，两列会一路撑到手机上，
   24rem 的最小宽度直接把页面顶出横向滚动条。 */
@media (min-width: 981px) {
  .editorial-core {
    grid-template-columns: minmax(24rem, 1fr) minmax(0, 1fr);
  }
}

/* ---------- 8 · 数字与序号交给拉丁体 ---------- */

/* 这几处的内容全是数字或大写英文，却挂在中文字体栈上：
   指标区的「4 / 3 / 10+ / ∞」、卡片右上角的「01」、栏目序号、
   流程序号、轨道图中间的「JM」、关于页的「N° 03」——
   实测它们分别落在 Songti SC 和 Georgia 上，一个偏古典、一个偏报纸，
   都不是这一页想要的语气。统一交给 Plex。 */
.metric strong,
.capability-card .card-index,
.about-section .section-number,
.editorial-method__process b,
.editorial-core__capabilities b,
.editorial-core__orbit strong,
.page-hero-no,
.news-card time,
.news-meta,
.article-meta,
.contact-action-number,
.footer-digital a,
.footer-bottom {
  font-family: var(--latin), var(--sans);
}

/* 数字要等宽，否则「10+」和「4」在同一行里基线对不齐。 */
.metric strong,
.editorial-core__orbit strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

/* Plex 的字面比 Avenir Next 略小，眉题这一档补回来一点点，
   保持原来的视觉重量。 */
.eyebrow,
.partner-wall__eyebrow,
.editorial-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.21em;
}

/* 轨道图中间的「JM」原来是 Georgia 的衬线大写，换成 Plex 之后
   需要把字距放开一点，两个字母才不会挤成一团。 */
.editorial-core__orbit strong {
  font-weight: 600;
  letter-spacing: 0.06em;
}