/* Services only: five operational stages and their visibility layer in one grid. */
.services-page .journey-stage-link {
  display: block;
  min-height: 44px;
}
.services-page .journey-stage-link > p {
  font-size: 13px;
  min-height: 42px;
  max-width: 180px;
}
.services-page .journey-stage-link > .sr-code:last-child {
  display: block;
  font-size: var(--type-mono-size);
  margin-top: var(--space-md);
}
.services-page .journey-stage-link h3 { transition: color var(--motion-standard); }
.services-page .service-system {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--space-3xl);
  border: 1px solid var(--border);
  background: var(--border);
}
.services-page .service-card,
.services-page .services-visibility {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
  padding: var(--space-xl);
  background: var(--surface);
}
.services-page .service-card { scroll-margin-top: var(--space-lg); }
.services-page .service-card:focus-visible {
  outline: 2px solid var(--camel-brown-2);
  outline-offset: -4px;
}
.services-page .service-stage,
.services-page .visibility-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--type-mono-size);
  line-height: 1.4;
  white-space: nowrap;
}
.services-page .service-stage::before {
  content: '';
  flex: 0 0 2px;
  height: 12px;
  background: var(--route-gold-6);
  transition: background var(--motion-standard);
}
.services-page .service-card-heading {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}
.services-page .service-card-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  fill: none;
  stroke: var(--brown);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.services-page .service-summary h2 {
  font-size: var(--type-title-size);
  line-height: var(--type-title-lineHeight);
  font-weight: var(--type-title-weight);
  letter-spacing: var(--type-title-letterSpacing);
  transition: color var(--motion-standard);
}
.services-page .service-summary p {
  margin-top: var(--space-lg);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lineHeight);
}
.services-page .service-card-information {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: auto;
  padding-top: var(--space-xs);
}
.services-page .service-information { min-width: 0; }
.services-page .service-information h3 {
  font-size: var(--type-mono-size);
  line-height: 1.4;
  letter-spacing: .02em;
  font-weight: 500;
}
.services-page .service-information-list {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  color: var(--secondary);
  font-size: 13px;
  line-height: 1.6;
}
.services-page .service-information-list li + li { margin-top: var(--space-2xs); }
.services-page .services-visibility .actions {
  margin-top: auto;
  padding-top: var(--space-xs);
  align-items: flex-start;
}
@media (hover: hover) {
  .services-page .journey-stage-link:hover h3,
  .services-page .service-card:hover .service-summary h2 { color: var(--brown); }
  .services-page .service-card:hover .service-stage::before { background: var(--gold); }
}
.services-page .journey-stage-link:focus-visible h3 { color: var(--brown); }
.services-page .service-card:focus-visible .service-stage::before { background: var(--gold); }
@media (max-width: 1279px) {
  .services-page .service-card,
  .services-page .services-visibility { padding: var(--space-lg); }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .services-page .service-system { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .services-page .journey-stage-link > p { min-height: 0; max-width: none; }
  .services-page .journey-stage-link > .sr-code:last-child { margin-top: var(--space-sm); }
  .services-page .service-system {
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--space-xl);
  }
}

@media (max-width: 1023px) {
  .services-page .service-card { scroll-margin-top: var(--space-sm); }
}
@media (max-width: 767px) {
  .services-page .journey-stage-link > p { font-size: 14px; }
  .services-page .service-summary p { font-size: 16px; margin-top: var(--space-md); }
  .services-page .service-card-information { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .services-page .service-information-list { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); margin-top: var(--space-xs); font-size: 14px; }
  .services-page .service-information-list li + li { margin-top: 0; }
  .services-page .service-information-list li:not(:last-child)::after { content: '·'; margin-left: var(--space-xs); color: var(--secondary); }
  .services-page .services-visibility .actions { align-items: stretch; }
}