/* 服務介紹頁（/services/*/）：疊在 site.css、home.css 之上。以文字與分隔線為主，不用卡片。 */

.svc-hero { padding-block: clamp(64px, 8vw, 112px) clamp(56px, 7vw, 96px); border-bottom: 1px solid var(--line); }
.svc-hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); align-items: end; }
.svc-hero-copy { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.crumbs { display: flex; gap: 10px; font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; color: var(--faint); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand); }
.svc-hero h1 { font-family: var(--display); font-weight: 500; font-size: clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem); line-height: 1.25; letter-spacing: .05em; }
.svc-hero .lead { max-width: 34em; color: var(--muted); font-size: var(--fs-lg); line-height: 1.85; }
.svc-hero .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.svc-demo { padding: 0; border: 0; border-bottom: 1px solid currentColor; background: none; font: inherit; color: var(--ink); cursor: pointer; }

.svc-facts { grid-column: 9 / -1; margin: 0; border-top: 1px solid var(--ink); min-width: 0; }
.svc-facts div { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.svc-facts dt { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; color: var(--faint); }
.svc-facts dd { margin: 0; font-size: var(--fs-sm); }

.svc-section { padding-block: clamp(64px, 7vw, 104px); }
.svc-lines { grid-column: 6 / -1; border-top: 1px solid var(--ink); counter-reset: line; }
.svc-lines li { counter-increment: line; display: grid; grid-template-columns: 42px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.svc-lines li::before { content: counter(line, decimal-leading-zero); padding-top: 4px; font-family: var(--mono); font-size: .6875rem; color: var(--brand); }
.svc-check li::before { content: "✓"; padding-top: 0; font-family: var(--body); font-size: var(--fs-sm); }
.service-page .process-list small { font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }

@media (max-width: 900px) {
  .svc-hero-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .svc-hero-copy, .svc-facts { grid-column: 1; }
  .svc-facts { max-width: 620px; }
  .svc-lines { grid-column: 1; }
}
@media (max-width: 720px) {
  .svc-hero h1 { font-size: clamp(2.125rem, 9.5vw, 2.625rem); }
  .svc-hero .lead { font-size: 1rem; }
  .svc-hero .hero-actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .svc-hero .hero-actions .svc-demo { align-self: flex-start; }
  .svc-lines li { grid-template-columns: 30px 1fr; gap: 12px; }
}