/* About 页面完整布局；所有规则限定于主内容，不改动共享页头、页脚。 */
.about-page main {
  --about-blue: #1677ff;
  --about-deep: #0958d9;
  --about-ink: #172b45;
  --about-body: #4d5d6d;
  --about-line: #dce5ee;
  inline-size: min(1120px, calc(100% - 64px));
  margin-inline: auto;
  background: #fff;
  color: var(--about-ink);
  padding-block-end: 12px;
}

.about-page main > .section {
  inline-size: 100%;
  max-inline-size: none;
  margin: 0;
  padding: 32px 0;
  background: #fff;
}

.about-page main > .about-section { padding-block: 32px 30px; }
.about-page main > .about-details,
.about-page main > .about-documents { border-block-start: 1px solid var(--about-line); }

.about-page main .section-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  color: var(--about-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .12em;
}

.about-page main .section-kicker > span {
  display: inline-grid;
  place-items: center;
  min-inline-size: 32px;
  block-size: 28px;
  border: 1px solid var(--about-line);
  border-radius: 6px;
  color: var(--about-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.about-page main .about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.about-page main .about-copy h1 {
  margin: 0 0 18px;
  font-size: clamp(30px, 3.05vw, 40px);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}

.about-page main .about-copy h1 em {
  inline-size: auto;
  max-inline-size: 100%;
  white-space: normal;
  color: var(--about-blue);
  font-style: normal;
}

.about-page main .about-copy p,
.about-page main .about-details > p,
.about-page main .about-detail-head > p {
  margin: 0 0 12px;
  color: var(--about-body);
  font-size: 14px;
  line-height: 1.8;
}

.about-page main .about-copy .about-lead { color: #344961; font-size: 15px; }
.about-page main .about-copy blockquote {
  margin: 18px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--about-line);
  border-inline-start: 3px solid var(--about-blue);
  border-radius: 0 8px 8px 0;
  background: #fff;
  color: var(--about-ink);
  font-size: 14px;
  line-height: 1.75;
}

.about-page main .about-capabilities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.about-page main .about-capabilities article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 16px;
  min-inline-size: 0;
  padding: 18px;
  border: 1px solid var(--about-line);
  border-block-start: 2px solid var(--about-blue);
  border-radius: 10px;
  background: #fff;
}

.about-page main .about-capabilities article > span {
  color: var(--about-deep);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  letter-spacing: .06em;
}

.about-page main .about-capabilities h3 {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.45;
}

.about-page main .about-capabilities p {
  margin: 0;
  color: var(--about-body);
  font-size: 13px;
  line-height: 1.75;
}

.about-page main .about-details h2,
.about-page main .about-documents h2 {
  margin: 0 0 20px;
  max-inline-size: 100%;
  font-size: clamp(23px, 2.25vw, 29px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.025em;
}

.about-page main .about-detail-head > p { max-inline-size: 900px; margin-block-end: 20px; }
.about-page main .about-details > p:last-child { margin-block-end: 0; }

.about-page main .about-service-grid,
.about-page main .credential-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.about-page main .about-service-grid article,
.about-page main .credential-card {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  padding: 22px;
  border: 1px solid var(--about-line);
  border-radius: 12px;
  background: #fff;
}

.about-page main .about-service-grid h3,
.about-page main .about-process-grid h3,
.about-page main .credential-card h3 {
  margin: 0 0 10px;
  color: var(--about-ink);
  font-size: 18px;
  line-height: 1.45;
}

.about-page main .about-service-grid p,
.about-page main .about-process-grid p,
.about-page main .credential-card p {
  margin: 0 0 12px;
  color: var(--about-body);
  font-size: 14px;
  line-height: 1.75;
}

.about-page main .about-service-grid a,
.about-page main .credential-original {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-block-size: 44px;
  max-inline-size: 100%;
  margin-block-start: auto;
  color: var(--about-deep);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.55;
  text-decoration: underline;
  text-decoration-color: #b4d1ff;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}

.about-page main .about-service-grid a:hover,
.about-page main .credential-original:hover { text-decoration-color: currentColor; }

.about-page main .about-process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-block-start: 16px;
  counter-reset: about-step;
}

.about-page main .about-process-grid article {
  position: relative;
  min-inline-size: 0;
  padding: 34px 0 0;
  border-block-start: 1px solid #a9c9f4;
  background: #fff;
  counter-increment: about-step;
}

/* 编号仅为流程视觉标记，不改动原有标题或内容。 */
.about-page main .about-process-grid article::before {
  content: counter(about-step, decimal-leading-zero);
  position: absolute;
  inset-block-start: -17px;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border: 1px solid #a9c9f4;
  border-radius: 50%;
  background: #fff;
  color: var(--about-deep);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.about-page main .about-process-grid p { margin-block-end: 0; }
.about-page main .about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 22px;
}

.about-page main .about-actions .btn {
  min-block-size: 44px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  white-space: normal;
  box-shadow: none;
}

.about-page main .about-actions .btn-primary { border-color: var(--about-blue); background: var(--about-blue); color: #fff; }
.about-page main .about-actions .btn-primary:hover { border-color: var(--about-deep); background: var(--about-deep); }
.about-page main .about-actions .btn-secondary { border-color: #b4d1ff; background: #fff; color: var(--about-deep); }
.about-page main .about-actions .btn-secondary:hover { border-color: var(--about-blue); }

.about-page main .about-company {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.about-page main .about-company h2 { margin-block-end: 0; }
.about-page main .about-company dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  margin: 0;
}

.about-page main .about-company dl > div { padding-block: 0 14px; }
.about-page main .about-company dl > div:nth-child(n + 3) { padding-block: 14px 0; border-block-start: 1px solid var(--about-line); }
.about-page main .about-company dt { margin: 0 0 5px; color: var(--about-body); font-size: 12px; line-height: 1.5; }
.about-page main .about-company dd { margin: 0; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.about-page main .about-company dd a { color: var(--about-deep); text-decoration: underline; text-underline-offset: 4px; }

.about-page main .credential-card { gap: 0; }
.about-page main .credential-card h3 { min-block-size: 2.9em; margin-block-end: 14px; }
.about-page main .credential-thumbnail,
.about-page main .credential-pdf {
  inline-size: 100%;
  block-size: 320px;
  min-block-size: 320px;
  max-block-size: 320px;
  margin: 0 0 16px;
  padding: 0;
  border: 1px solid var(--about-line);
  border-radius: 6px;
  background: #fff;
}

.about-page main .credential-thumbnail { display: flex; align-items: center; justify-content: center; }
.about-page main .credential-thumbnail img {
  display: block;
  inline-size: auto;
  block-size: auto;
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
}

.about-page main .credential-pdf { display: block; }
.about-page main .credential-card .credential-fallback { font-size: 12px; line-height: 1.65; }
.about-page main .reveal { opacity: 1; transform: none; }
.about-page main :where(a, object):focus-visible { outline: 2px solid var(--about-blue); outline-offset: 4px; }

@media (max-width: 980px) {
  .about-page main { inline-size: calc(100% - 48px); }
  .about-page main .about-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .about-page main .about-copy h1 { font-size: clamp(30px, 4.2vw, 38px); }
  .about-page main .about-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-page main .about-company { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .about-page main .about-process-grid { gap: 18px; }
}

@media (max-width: 640px) {
  .about-page main { inline-size: calc(100% - 40px); padding-block-end: 8px; }
  .about-page main > .section { padding-block: 26px; }
  .about-page main > .about-section { padding-block-start: 24px; }
  .about-page main .section-kicker { margin-block-end: 18px; }
  .about-page main .about-copy h1 { font-size: clamp(28px, 7vw, 34px); line-height: 1.3; letter-spacing: -.025em; }
  .about-page main .about-capabilities,
  .about-page main .about-service-grid,
  .about-page main .about-process-grid,
  .about-page main .credential-grid,
  .about-page main .about-company dl { grid-template-columns: minmax(0, 1fr); }
  .about-page main .about-capabilities { gap: 10px; }
  .about-page main .about-capabilities article { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .about-page main .about-capabilities article > span { padding-block-start: 4px; }
  .about-page main .about-service-grid article,
  .about-page main .credential-card { padding: 18px; }
  .about-page main .about-process-grid { gap: 30px; }
  .about-page main .about-process-grid article { padding-block-start: 28px; }
  .about-page main .about-actions { flex-direction: column; gap: 10px; }
  .about-page main .about-actions .btn { inline-size: 100%; }
  .about-page main .about-company dl > div { padding-block: 12px; border-block-start: 1px solid var(--about-line); }
  .about-page main .about-company dl > div:first-child { padding-block-start: 0; border-block-start: 0; }
  .about-page main .credential-card h3 { min-block-size: 0; }
  .about-page main .credential-thumbnail,
  .about-page main .credential-pdf { block-size: 300px; min-block-size: 300px; max-block-size: 300px; }
}