/* DevOps: nonsticky chapter rail and engineering canvas with a readable lifecycle. */
.chutuoc-service-design--devops .chutuoc-service-design__blueprint {
  display: grid; grid-template-columns: minmax(8rem, .17fr) minmax(0, 1fr); gap: 0 2rem; padding-block: 2.5rem;
}
.chutuoc-service-design--devops .chutuoc-service-design__hero--engineering {
  grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 2rem;
}
.chutuoc-service-design--devops .chutuoc-service-design__intro--engineering { padding-block: 0 2rem; }
.chutuoc-service-design--devops .chutuoc-service-design__blueprint .chutuoc-service-design__wrap { width: 100%; max-width: none; }
.chutuoc-service-design--devops .chutuoc-service-design__intro--engineering h1 { max-width: 19ch; }
.chutuoc-service-design--devops .chutuoc-service-design__image--engineering { margin: 0; }
.chutuoc-service-design--devops .chutuoc-service-design__image--engineering img { width: 100%; display: block; border-radius: .75rem; }
.chutuoc-service-design--devops .chutuoc-service-design__chapter-rail {
  grid-column: 1; grid-row: 1 / span 2; align-self: start; border-right: 1px solid #e6e0d8;
  display: grid; gap: .5rem; padding-right: 1rem; padding-top: 1rem; font-size: .875rem;
}
.chutuoc-service-design--devops .chutuoc-service-design__chapter-rail a {
  display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .5rem 0;
  text-decoration: none; color: #44515b; font-weight: 600; overflow-wrap: anywhere;
}
.chutuoc-service-design--devops .chutuoc-service-design__chapter-rail a::before {
  content: ""; flex: 0 0 .5rem; width: .5rem; height: .5rem; border-radius: 50%; border: 1px solid #fb6e2e;
}
.chutuoc-service-design--devops .chutuoc-service-design__chapter-rail a:hover { color: #a93908; }
.chutuoc-service-design--devops .chutuoc-service-design__chapter-rail a:focus-visible { outline: 2px solid #172126; outline-offset: 4px; }
.chutuoc-service-design--devops .chutuoc-service-design__blueprint-canvas { grid-column: 2; min-width: 0; }
.chutuoc-service-design--devops .chutuoc-service-design__problems--diagnosis .chutuoc-service-design__items {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem;
}
.chutuoc-service-design--devops .chutuoc-service-design__problems--diagnosis li {
  padding-top: 1.25rem; border-top: 1px solid #e6e0d8;
}
.chutuoc-service-design--devops .chutuoc-service-design__problems--diagnosis li > .chutuoc-service-design__index {
  display: block; color: #a93908; font-size: 1.75rem; margin-bottom: .6rem;
}
.chutuoc-service-design--devops .chutuoc-service-design__lifecycle {
  margin: 1rem 0 0; padding: clamp(1.25rem, 3vw, 2rem); color: #fff; background: #202d33; border-radius: .75rem;
}
.chutuoc-service-design--devops .chutuoc-service-design__lifecycle figcaption { font-size: 1.125rem; font-weight: 600; color: #fff; }
.chutuoc-service-design--devops .chutuoc-service-design__lifecycle p { color: #e1e6e8; margin-block: 1.5rem 0; font-size: .875rem; }
.chutuoc-service-design--devops .chutuoc-service-design__lifecycle-stages {
  list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; padding: 0; margin: 2rem 0 0;
}
.chutuoc-service-design--devops .chutuoc-service-design__lifecycle-stages li { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; }
.chutuoc-service-design--devops .chutuoc-service-design__lifecycle-stages li:not(:last-child)::after {
  content: "→"; position: absolute; top: .6rem; right: -.8rem; color: #fb6e2e; font-size: 1.5rem;
}
.chutuoc-service-design--devops .chutuoc-service-design__lifecycle-stages span {
  width: 2.75rem; height: 2.75rem; border: 1px solid #79838a; border-radius: .6rem; display: grid; place-items: center;
  background: #38474f; font-size: .875rem; color: #fff;
}
.chutuoc-service-design--devops .chutuoc-service-design__lifecycle-stages strong { font-size: .875rem; color: #fff; }
.chutuoc-service-design--devops .chutuoc-service-design__process-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.chutuoc-service-design--devops .chutuoc-service-design__process-table caption { text-align: left; color: #56616c; padding-bottom: 1rem; }
.chutuoc-service-design--devops .chutuoc-service-design__process-table th,
.chutuoc-service-design--devops .chutuoc-service-design__process-table td { vertical-align: top; text-align: left; padding: 1.25rem .8rem; border-bottom: 1px solid #e6e0d8; overflow-wrap: anywhere; }
.chutuoc-service-design--devops .chutuoc-service-design__process-table thead th { background: #f5f1eb; color: #44515b; font-size: .875rem; }
.chutuoc-service-design--devops .chutuoc-service-design__process-table h3 { font-size: 1rem; }
.chutuoc-service-design--devops .chutuoc-service-design__process-table .chutuoc-service-design__index { display: inline-grid; margin-bottom: .5rem; }
.chutuoc-service-design--devops .chutuoc-service-design__benefits--outcomes .chutuoc-service-design__items {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; border-block: 1px solid #e6e0d8; padding-block: 1.5rem;
}
.chutuoc-service-design--devops .chutuoc-service-design__benefits--outcomes li { border-top: 2px solid #fb6e2e; padding-top: 1rem; }
.chutuoc-service-design--devops .chutuoc-service-design__offerings--engineering-bands .chutuoc-service-design__offering-clusters {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem;
}
.chutuoc-service-design--devops .chutuoc-service-design__offerings--engineering-bands .chutuoc-service-design__offering-cluster {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 1.5rem;
  padding: 1.5rem; background: #fff1e8; border-radius: .6rem; border-left: 3px solid #fb6e2e;
}
.chutuoc-service-design--devops .chutuoc-service-design__offerings--engineering-bands .chutuoc-service-design__offering-cluster:nth-child(even) { background: #eef0f1; border-left-color: #56616c; }
.chutuoc-service-design--devops .chutuoc-service-design__offering-cluster > h3 { margin-top: 0; }
.chutuoc-service-design--devops .chutuoc-service-design__offering-cluster ul { padding-left: 1.1rem; margin: 0; grid-template-columns: minmax(0, 1fr); }
.chutuoc-service-design--devops .chutuoc-service-design__offering { padding-block: .5rem; }
.chutuoc-service-design--devops .chutuoc-service-design__offering-label { font-weight: 600; }
.chutuoc-service-design--devops .chutuoc-service-design__offering p { margin-block: .5rem 0; }
.chutuoc-service-design--devops .chutuoc-service-design__technologies--engineering-note .chutuoc-service-design__wrap { padding: 1.5rem; background: #f5f1eb; border: 1px solid #e6e0d8; border-radius: .6rem; }
.chutuoc-service-design--devops .chutuoc-service-design__pricing--engineering-memo .chutuoc-service-page { background: transparent; }
.chutuoc-service-design--devops .chutuoc-service-design__pricing--engineering-memo .container {
  width: 100%; max-width: none; padding: 2rem; background: #f5f1eb; border-radius: .6rem;
  border-top: 3px solid #fb6e2e;
}
.chutuoc-service-design--devops .chutuoc-service-design__pricing--engineering-memo .chutuoc-service-page__pricing-intro { max-width: 42rem; margin-left: auto; }
.chutuoc-service-design--devops .chutuoc-service-design__quote--engineering .chutuoc-service-page__quote-grid {
  width: 100%; max-width: none; grid-template-columns: minmax(0, 1fr); padding: 2rem;
  background: #fbfaf8; border: 1px solid #e6e0d8; border-radius: .75rem;
}
.chutuoc-service-design--devops .chutuoc-service-design__quote--engineering .chutuoc-service-page__quote-intro { max-width: 44rem; }
@media (max-width: 1199px) {
  .chutuoc-service-design--devops .chutuoc-service-design__benefits--outcomes .chutuoc-service-design__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chutuoc-service-design--devops .chutuoc-service-design__lifecycle-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .chutuoc-service-design--devops .chutuoc-service-design__lifecycle-stages li::after { display: none; }
}
@media (max-width: 991px) {
  .chutuoc-service-design--devops .chutuoc-service-design__blueprint { display: block; padding-block: 1.5rem; }
  .chutuoc-service-design--devops .chutuoc-service-design__hero--engineering { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .chutuoc-service-design--devops .chutuoc-service-design__chapter-rail { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; border-right: 0; border-bottom: 1px solid #e6e0d8; padding: 1.25rem 0; }
}
@media (max-width: 767px) {
  .chutuoc-service-design--devops .chutuoc-service-design__problems--diagnosis .chutuoc-service-design__items,
  .chutuoc-service-design--devops .chutuoc-service-design__benefits--outcomes .chutuoc-service-design__items,
  .chutuoc-service-design--devops .chutuoc-service-design__offerings--engineering-bands .chutuoc-service-design__offering-cluster { grid-template-columns: minmax(0, 1fr); }
  .chutuoc-service-design--devops .chutuoc-service-design__lifecycle-stages { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .chutuoc-service-design--devops .chutuoc-service-design__lifecycle-stages li { flex-direction: row; text-align: left; }
  .chutuoc-service-design--devops .chutuoc-service-design__lifecycle-stages span { flex-shrink: 0; }
  .chutuoc-service-design--devops .chutuoc-service-design__lifecycle-stages li:not(:last-child)::after { display: block; content: "↓"; left: .9rem; right: auto; top: auto; bottom: -1.65rem; }
  .chutuoc-service-design--devops .chutuoc-service-design__process-table,
  .chutuoc-service-design--devops .chutuoc-service-design__process-table tbody { display: block; }
  .chutuoc-service-design--devops .chutuoc-service-design__process-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .chutuoc-service-design--devops .chutuoc-service-design__process-table tr { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid #e6e0d8; padding-block: 1rem; }
  .chutuoc-service-design--devops .chutuoc-service-design__process-table th,
  .chutuoc-service-design--devops .chutuoc-service-design__process-table td { display: block; border: 0; padding: .5rem 0; }
  .chutuoc-service-design--devops .chutuoc-service-design__process-table td[data-chutuoc-label]::before { content: attr(data-chutuoc-label); display: block; font-weight: 600; color: #44515b; margin-bottom: .25rem; }
  .chutuoc-service-design--devops .chutuoc-service-design__quote--engineering .chutuoc-service-page__quote-grid,
  .chutuoc-service-design--devops .chutuoc-service-design__pricing--engineering-memo .container { padding: 1.25rem; }
}