/* Hosting & Cloud: a wide architecture canvas, environment rows and benefits rail. */
.chutuoc-service-design--cloud .chutuoc-service-design__hero--architecture {
  padding-block: clamp(2rem, 4vw, 4rem) 1rem;
  background: radial-gradient(ellipse at 85% 0, #f1e6dc 0, transparent 55%), #fbfaf8;
}
.chutuoc-service-design--cloud .chutuoc-service-design__intro--architecture { padding-block: 0 2rem; }
.chutuoc-service-design--cloud .chutuoc-service-design__intro--architecture h1 { max-width: 24ch; }
.chutuoc-service-design--cloud .chutuoc-service-design__architecture { position: relative; }
.chutuoc-service-design--cloud .chutuoc-service-design__image--architecture { margin: 0; }
.chutuoc-service-design--cloud .chutuoc-service-design__image--architecture img {
  width: 100%; display: block; border-radius: 1rem; aspect-ratio: 2.45; object-fit: cover;
}
.chutuoc-service-design--cloud .chutuoc-service-design__architecture-labels {
  list-style: none; margin: .8rem 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem;
}
.chutuoc-service-design--cloud .chutuoc-service-design__architecture-labels li {
  text-align: center; padding: .75rem .5rem; font-weight: 600; border-top: 2px solid #fb6e2e;
  color: #172126; background: #f5f1eb;
}
.chutuoc-service-design--cloud .chutuoc-service-design__technologies--platform-note .chutuoc-service-design__wrap {
  border: 1px solid #e6e0d8; border-radius: .75rem; background: #f5f1eb; padding: 1.5rem;
}
.chutuoc-service-design--cloud .chutuoc-service-design__problems--comparison .chutuoc-service-design__items {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem;
}
.chutuoc-service-design--cloud .chutuoc-service-design__problems--comparison li {
  padding: 1.25rem 0 0; border-top: 2px solid #fb6e2e;
}
.chutuoc-service-design--cloud .chutuoc-service-design__service-matrix {
  display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem);
}
.chutuoc-service-design--cloud .chutuoc-service-design__service-matrix .chutuoc-service-design__wrap { width: 100%; max-width: none; }
.chutuoc-service-design--cloud .chutuoc-service-design__offerings--environments .chutuoc-service-design__offering-clusters {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem;
}
.chutuoc-service-design--cloud .chutuoc-service-design__offerings--environments .chutuoc-service-design__offering-cluster {
  padding: 1.25rem; background: #f5f1eb; border: 1px solid #e6e0d8; border-radius: .65rem;
}
.chutuoc-service-design--cloud .chutuoc-service-design__offerings--environments .chutuoc-service-design__offering-cluster:first-child {
  grid-column: 1 / -1; background: #fff; padding: 0; overflow: clip;
}
.chutuoc-service-design--cloud .chutuoc-service-design__offerings--environments .chutuoc-service-design__offering-cluster:first-child > h3 {
  margin: 0; padding: 1rem 1.25rem; background: #f0ece7;
}
.chutuoc-service-design--cloud .chutuoc-service-design__offering-cluster ul { margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
.chutuoc-service-design--cloud .chutuoc-service-design__offering {
  padding-block: 1rem; border-bottom: 1px solid #e6e0d8;
}
.chutuoc-service-design--cloud .chutuoc-service-design__offering-cluster:first-child .chutuoc-service-design__offering {
  padding: 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: .5rem 1.25rem;
}
.chutuoc-service-design--cloud .chutuoc-service-design__offering-cluster:first-child .chutuoc-service-design__offering:last-child { border-bottom: 0; }
.chutuoc-service-design--cloud .chutuoc-service-design__offering-label { font-weight: 700; }
.chutuoc-service-design--cloud .chutuoc-service-design__offering p { margin: 0; }
.chutuoc-service-design--cloud .chutuoc-service-design__benefits--rail {
  border-left: 1px solid #e6e0d8; padding-left: 1.5rem;
}
.chutuoc-service-design--cloud .chutuoc-service-design__benefits--rail .chutuoc-service-design__items {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem;
}
.chutuoc-service-design--cloud .chutuoc-service-design__benefits--rail li { position: relative; padding-left: 3.5rem; }
.chutuoc-service-design--cloud .chutuoc-service-design__benefits--rail li > .chutuoc-service-design__index {
  position: absolute; inset: 0 auto auto 0;
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid #f4c3ab; background: #fff4ed; color: #a93908; font-weight: 700;
}
.chutuoc-service-design--cloud .chutuoc-service-design__process--horizontal .chutuoc-service-design__items {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem;
}
.chutuoc-service-design--cloud .chutuoc-service-design__process--horizontal li { border-top: 1px solid #e6e0d8; padding-top: 1rem; }
.chutuoc-service-design--cloud .chutuoc-service-design__process--horizontal .chutuoc-service-design__index { margin-bottom: 1rem; }
.chutuoc-service-design--cloud .chutuoc-service-design__process--horizontal dl { font-size: .875rem; }
.chutuoc-service-design--cloud .chutuoc-service-design__pricing--scope-ledger .container {
  border: 1px solid #e6e0d8; border-left: 4px solid #fb6e2e; border-radius: .75rem; padding: 2rem;
  background: #f5f1eb;
}
.chutuoc-service-design--cloud .chutuoc-service-design__quote--split .chutuoc-service-page__quote-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.chutuoc-service-design--cloud .chutuoc-service-design__quote--split .chutuoc-quote-form { background: #f5f1eb; padding: clamp(1rem, 3vw, 2rem); border-radius: 1rem; }
@media (max-width: 1199px) {
  .chutuoc-service-design--cloud .chutuoc-service-design__process--horizontal .chutuoc-service-design__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .chutuoc-service-design--cloud .chutuoc-service-design__service-matrix { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .chutuoc-service-design--cloud .chutuoc-service-design__benefits--rail { padding-left: 0; border-left: 0; }
  .chutuoc-service-design--cloud .chutuoc-service-design__benefits--rail .chutuoc-service-design__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .chutuoc-service-design--cloud .chutuoc-service-design__image--architecture img { aspect-ratio: 1.3; }
  .chutuoc-service-design--cloud .chutuoc-service-design__architecture-labels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chutuoc-service-design--cloud .chutuoc-service-design__problems--comparison .chutuoc-service-design__items,
  .chutuoc-service-design--cloud .chutuoc-service-design__benefits--rail .chutuoc-service-design__items,
  .chutuoc-service-design--cloud .chutuoc-service-design__process--horizontal .chutuoc-service-design__items,
  .chutuoc-service-design--cloud .chutuoc-service-design__offerings--environments .chutuoc-service-design__offering-clusters,
  .chutuoc-service-design--cloud .chutuoc-service-design__offering-cluster:first-child .chutuoc-service-design__offering,
  .chutuoc-service-design--cloud .chutuoc-service-design__quote--split .chutuoc-service-page__quote-grid { grid-template-columns: minmax(0, 1fr); }
  .chutuoc-service-design--cloud .chutuoc-service-design__pricing--scope-ledger .container { padding: 1.25rem; }
}