/* 服务以工作材料与交付过程说话；人物素材留给品牌与团队场景。 */
.service-page,
.service-index {
  --service-paper: #fffaf1;
  --service-paper-line: #e1d6c2;
  --service-sage: #edf4f0;
  --service-sage-ink: #355d4b;
  --service-warm: #fff0e5;
  --service-warm-ink: #81482e;
}
.service-page .inner-hero,
.service-index .inner-hero { background: var(--color-bg); padding-block: clamp(40px, 5vw, 72px); }
.service-page .inner-hero__layout,
.service-index .inner-hero__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 72px); }
.service-page .inner-hero h1,
.service-index .inner-hero h1 { font-size: clamp(2.1rem, 3.6vw, 3.4rem); line-height: 1.35; }
.service-page .inner-hero__summary,
.service-index .inner-hero__summary { line-height: 1.85; }
.service-index:not(.training-index) .inner-hero__layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.service-catalog-section { padding-top: var(--space-6); }
.service-catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-7) var(--space-5); }
.service-catalog--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-catalog + .service-catalog { margin-top: var(--space-7); }
.service-catalog__item { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.service-catalog__item > h2 { font-size: 1.4rem; line-height: 1.5; margin: 0 0 var(--space-3); }
.service-catalog__question { margin: 0 0 var(--space-2); color: var(--color-accent-strong); font-size: 0.86rem; font-weight: 550; }
.service-catalog__summary { font-size: 0.92rem; line-height: 1.85; color: var(--color-text-soft); margin: 0 0 var(--space-5); }
.service-catalog__item > .service-visual { margin-top: auto; margin-bottom: var(--space-4); }
.service-catalog__item > .text-link { font-size: 0.9rem; }
.service-catalog__item--entry { padding: var(--space-6); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); }
.service-catalog__item--entry > .text-link { margin-top: auto; }
.service-catalog__item--entry .service-catalog__summary { max-width: 34em; }

/* figure 本身不假装可点击卡片。页眉／页脚直接说明材料性质。 */
.service-visual { width: 100%; margin: 0; color: var(--color-text); }
.service-visual__canvas { padding: clamp(20px, 2.4vw, 34px); border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.service-visual__eyebrow { margin: 0 0 var(--space-4); color: var(--color-muted); font-size: 0.76rem; font-weight: 550; }
.service-visual__title { display: block; margin: 0 0 var(--space-5); font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.55; font-weight: 650; }
.service-visual figcaption { display: grid; align-content: start; gap: var(--space-1); padding: var(--space-3) 2px 0; line-height: 1.7; }
.service-visual figcaption strong { font-size: 0.86rem; font-weight: 550; }
.service-visual figcaption > span { color: var(--color-muted); font-size: 0.75rem; }
.service-visual :is(ol, ul) { list-style: none; padding: 0; margin: 0; }
.service-visual li { margin: 0; }
.service-visual dl { margin: 0; }
.service-visual dd { margin: 0; }
.service-visual--compact .service-visual__canvas { padding: var(--space-5); min-height: 286px; }
.service-visual--compact .service-visual__title { font-size: 1.1rem; margin-bottom: var(--space-3); }
.service-visual--compact figcaption > span { font-size: 0.72rem; }
.service-visual--compact figcaption { min-height: 84px; }

/* 沟通便笺：三个可用自己的话回答的问题，不重复合作步骤。 */
.service-visual--directory { max-width: 430px; justify-self: end; }
.service-visual--directory .service-visual__canvas { background: var(--service-paper); border-color: var(--service-paper-line); border-radius: 8px 8px 40px 8px; }
.service-intake { position: relative; }
.service-intake .service-visual__title { max-width: 13em; padding-right: var(--space-3); }
.service-intake ul { padding-right: var(--space-6); }
.service-intake li { padding: var(--space-2) 0; border-bottom: 1px solid var(--service-paper-line); font-size: 0.94rem; }
.service-intake__pencil { display: block; margin-top: var(--space-4); color: var(--color-accent); }
.service-intake__pencil .visual-icon { width: 32px; height: 32px; transform: rotate(-9deg); }

/* 报告目录、验证单、迁移关系分别采用纸页、双列记录、业务链构图。 */
.service-visual--report .service-visual__canvas { background: var(--service-paper); border-color: var(--service-paper-line); border-radius: 2px 14px 14px 2px; border-left: 5px solid var(--service-paper-line); }
.service-report li { display: flex; gap: var(--space-3); align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--service-paper-line); font-size: 0.86rem; }
.service-report li:last-child { border-bottom: 0; }
.service-report li > span { color: var(--color-muted); font-size: 0.72rem; }
.service-trial__subject { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-4); }
.service-trial__subject > span { font-size: 0.75rem; color: var(--color-muted); }
.service-trial__subject > strong { font-size: 0.98rem; }
.service-trial__labels,
.service-trial dl > div { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-3); }
.service-trial__labels { padding-bottom: var(--space-2); font-size: 0.7rem; color: var(--color-muted); }
.service-trial dl > div { padding: 12px 0; border-top: 1px solid var(--color-border); font-size: 0.87rem; line-height: 1.65; }
.service-trial dt { font-weight: 550; }
.service-trial dd { color: var(--color-text-soft); }
.service-trial dl > div:last-child { color: var(--service-warm-ink); }
.service-trial dl > div:last-child dd { color: inherit; }
.service-trial__handoff { border-radius: 6px; background: var(--color-accent-soft); padding: var(--space-3); margin-top: var(--space-4); }
.service-trial__handoff > span { font-size: 0.76rem; color: var(--color-accent-strong); }
.service-trial__handoff > p { font-size: 0.84rem; margin: var(--space-1) 0 0; }
.service-visual--migration .service-visual__canvas { background: var(--service-sage); border-color: #c9dacf; }
.service-migration__ends { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: center; gap: var(--space-2); }
.service-migration__source,
.service-migration__target { display: grid; justify-items: center; gap: var(--space-2); text-align: center; font-size: 0.85rem; line-height: 1.6; }
.service-migration .visual-icon { color: var(--service-sage-ink); }
.service-migration__arrow { font-size: 1.5rem; color: var(--service-sage-ink); }
.service-migration__target strong { font-weight: 550; }
.service-migration__bridge { text-align: center; margin-top: var(--space-4); padding: var(--space-3) 0 0; border-top: 1px dashed #9eb9ab; }
.service-migration__bridge > strong { color: var(--service-sage-ink); font-size: 0.9rem; }
.service-migration__bridge > p { margin: var(--space-1) 0 0; font-size: 0.76rem; color: var(--color-text-soft); }
.service-migration > ol { margin-top: var(--space-5); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); padding-left: 1.25em; list-style: decimal; }
.service-migration > ol > li { padding-top: var(--space-2); padding-left: var(--space-1); border-top: 1px solid #9eb9ab; font-size: 0.78rem; }
.service-migration > ol > li::marker { color: var(--service-sage-ink); }

/* 培训：练习过程、判断分流、核对清单、需求单，不使用统一会议插画。 */
.service-visual--workshop .service-visual__canvas { background: var(--service-paper); border-color: var(--service-paper-line); }
.service-workshop > ol { display: grid; gap: var(--space-3); }
.service-workshop > ol > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: baseline; gap: var(--space-3); padding: 0 0 var(--space-3); border-bottom: 1px solid var(--service-paper-line); }
.service-workshop > ol > li > span { font-size: 0.78rem; color: var(--color-accent-strong); }
.service-workshop > ol > li > strong { font-size: 1rem; font-weight: 550; }
.service-workshop__materials { margin-top: var(--space-5); }
.service-workshop__materials > span { color: var(--color-muted); font-size: 0.75rem; }
.service-workshop__materials > ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-2); font-size: 0.82rem; }
.service-selection { display: grid; gap: var(--space-3); }
.service-selection > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.service-selection__mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--service-sage); color: var(--service-sage-ink); }
.service-selection > li:nth-child(2) .service-selection__mark { background: var(--service-warm); color: var(--service-warm-ink); }
.service-selection > li:last-child .service-selection__mark { background: var(--color-bg); color: var(--color-muted); }
.service-selection strong { font-size: 0.94rem; font-weight: 550; }
.service-selection p { font-size: 0.78rem; color: var(--color-text-soft); margin: 2px 0 0; }
.service-visual--practice .service-visual__canvas { background: var(--color-accent-soft); }
.service-practice__task { margin: 0 0 var(--space-4); font-size: 0.93rem; line-height: 1.8; }
.service-practice > ul { padding-top: var(--space-3); border-top: 1px solid var(--color-border-strong); }
.service-practice li { position: relative; padding: 5px 0 5px 18px; font-size: 0.82rem; }
.service-practice li::before { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); left: 0; top: 15px; }
.service-brief dl > div { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.service-brief dt { font-size: 0.92rem; font-weight: 550; }
.service-brief dd { font-size: 0.78rem; color: var(--color-text-soft); }
.service-brief > p { font-size: 0.83rem; margin: var(--space-4) 0 0; color: var(--color-accent-strong); }
.service-method { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.service-method > li { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; }
.service-method > li > span { font-size: 0.76rem; color: var(--color-accent-strong); }

/* 同一行的标题、图面和图注各自对齐，长文案仍可自然撑开。 */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 961px) {
    .service-catalog__item--illustrated { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 0; }
    .service-catalog__item--illustrated > .service-visual { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; margin-top: 0; }
    .service-catalog__item--illustrated .service-visual__canvas { min-height: 0; height: 100%; }
    .service-catalog__item--illustrated figcaption { min-height: 0; padding-bottom: var(--space-3); }
  }
}

@media (max-width: 960px) {
  .service-page .inner-hero__layout,
  .service-index .inner-hero__layout,
  .service-index:not(.training-index) .inner-hero__layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .service-page .inner-hero .service-visual,
  .service-index .inner-hero .service-visual { max-width: 640px; justify-self: start; }
  .service-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-catalog__item { grid-column: span 2; }
  .service-catalog__item--illustrated { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--space-5); }
  .service-catalog__item > .service-visual { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
  .service-catalog__item > .text-link { align-self: end; }
  .service-catalog__item--entry { grid-column: span 1; display: flex; }
  .service-visual--compact .service-visual__canvas,
  .service-visual--compact figcaption { min-height: 0; }
}
@media (max-width: 680px) {
  .service-catalog { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .service-catalog__item { grid-column: auto; display: flex; }
  .service-catalog__item > .service-visual { margin-bottom: var(--space-4); }
  .service-catalog__item > .text-link { align-self: flex-start; }
  .service-catalog__item:not(.service-catalog__item--entry) { padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); }
  .service-catalog__item--entry { padding: var(--space-5); }
  .service-visual__canvas { padding: var(--space-5); }
  .service-migration > ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}