/** Website: split product Hero, showroom, annotations and a three-column journey. */
.chutuoc-service-design--website .chutuoc-service-design__hero-stage {
	background: linear-gradient(120deg, var(--chutuoc-color-background-alt), var(--chutuoc-color-background));
	padding-block: var(--chutuoc-space-6) var(--chutuoc-space-7);
}
.chutuoc-service-design--website .chutuoc-service-design__hero-composition {
	display: grid;
	gap: var(--chutuoc-space-6);
	align-items: center;
}
.chutuoc-service-design--website .chutuoc-service-design__hero-composition > * { min-width: 0; }
.chutuoc-service-design--website .chutuoc-service-design__intro h1 { max-width: 20ch; }
.chutuoc-service-design--website .chutuoc-service-design__hero-composition .chutuoc-service-design__image { margin: 0; }
.chutuoc-service-design--website .chutuoc-service-design__heading::after {
	content: "";
	display: block;
	width: 2.75rem;
	height: 2px;
	margin-block-start: var(--chutuoc-space-4);
	background: var(--chutuoc-color-primary);
}
.chutuoc-service-design--website .chutuoc-service-design__problems .chutuoc-service-design__items { gap: var(--chutuoc-space-6); }
.chutuoc-service-design--website .chutuoc-service-design__problems .chutuoc-service-design__items > li {
	padding-inline-start: var(--chutuoc-space-5);
	border-inline-start: 1px solid var(--chutuoc-color-border);
}
.chutuoc-service-design--website .chutuoc-service-design__problems .chutuoc-service-design__index { color: var(--chutuoc-color-primary-text); }
.chutuoc-service-design--website .chutuoc-service-design__showroom {
	background: var(--chutuoc-color-background-alt);
	padding-block-end: var(--chutuoc-space-7);
}
.chutuoc-service-design--website .chutuoc-service-design__showroom .chutuoc-service-design__section { background: transparent; }
.chutuoc-service-design--website .chutuoc-service-design__offering-clusters { display: grid; gap: var(--chutuoc-space-6); }
.chutuoc-service-design--website .chutuoc-service-design__offering-cluster {
	min-width: 0;
	padding: var(--chutuoc-space-5);
	background: var(--chutuoc-color-background);
	border-radius: var(--chutuoc-radius-lg);
}
.chutuoc-service-design--website .chutuoc-service-design__offering-cluster > h3 {
	display: flex;
	gap: var(--chutuoc-space-3);
	align-items: baseline;
}
.chutuoc-service-design--website .chutuoc-service-design__cluster-index { color: var(--chutuoc-color-primary-text); font-size: var(--chutuoc-font-size-small); }
.chutuoc-service-design--website .chutuoc-service-design__offering-cluster > ul {
	display: grid;
	gap: 0 var(--chutuoc-space-5);
	padding: 0;
	margin: 0;
	list-style: none;
}
.chutuoc-service-design--website .chutuoc-service-design__offering {
	min-width: 0;
	padding-block: var(--chutuoc-space-4);
	border-block-start: 1px solid var(--chutuoc-color-background-alt);
}
.chutuoc-service-design--website .chutuoc-service-design__offering-label { font-weight: 500; }
.chutuoc-service-design--website .chutuoc-service-design__offering p { margin-block: var(--chutuoc-space-2) 0; color: var(--chutuoc-color-muted); }
.chutuoc-service-design--website .chutuoc-service-design__showroom-media .chutuoc-service-design__image {
	max-width: 52rem;
	margin-inline: auto;
}
.chutuoc-service-design--website .chutuoc-service-design__annotation-stage { position: relative; background: var(--chutuoc-color-background); }
.chutuoc-service-design--website .chutuoc-service-design__benefits .chutuoc-service-design__items > li {
	position: relative;
	padding-inline-start: var(--chutuoc-space-7);
	background: transparent;
}
.chutuoc-service-design--website .chutuoc-service-design__benefits .chutuoc-service-design__index {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--chutuoc-color-primary);
	border-radius: 50%;
	color: var(--chutuoc-color-primary-text);
	font-size: var(--chutuoc-font-size-small);
}
.chutuoc-service-design--website .chutuoc-service-design__product-sketch { display: none; }
.chutuoc-service-design--website .chutuoc-service-design__process .chutuoc-service-design__items { gap: var(--chutuoc-space-7) var(--chutuoc-space-6); }
.chutuoc-service-design--website .chutuoc-service-design__process .chutuoc-service-design__step { border-block-start: 1px solid var(--chutuoc-color-border); padding-block-start: var(--chutuoc-space-4); }
.chutuoc-service-design--website .chutuoc-service-design__process .chutuoc-service-design__index { display: block; margin-block-end: var(--chutuoc-space-4); color: var(--chutuoc-color-primary-text); font-size: 1.5rem; }
.chutuoc-service-design--website .chutuoc-service-design__technologies { background: var(--chutuoc-color-background-alt); }
.chutuoc-service-design--website .chutuoc-service-design__pricing-memo .chutuoc-service-page__section { background: var(--chutuoc-color-background); }
.chutuoc-service-design--website .chutuoc-service-design__pricing-memo .container { border-block: 1px solid var(--chutuoc-color-border); padding-block: var(--chutuoc-space-6); }
.chutuoc-service-design--website .chutuoc-service-design__pricing-memo .chutuoc-service-page__pricing-intro { max-width: 70ch; }
.chutuoc-service-design--website .chutuoc-service-design__faq > div {
	padding-block: var(--chutuoc-space-5);
	border-block-start: 1px solid var(--chutuoc-color-border);
}
.chutuoc-service-design--website .chutuoc-service-design__faq > div:first-child { padding-block-start: 0; border-block-start: 0; }
.chutuoc-service-design--website .chutuoc-service-design__consultation .chutuoc-service-page__section {
	background: linear-gradient(115deg, var(--chutuoc-color-background-alt), var(--chutuoc-color-background));
}
.chutuoc-service-design--website .chutuoc-service-page__quote-intro h2::after {
	content: "";
	display: block;
	width: 2.75rem;
	height: 2px;
	margin-block-start: var(--chutuoc-space-4);
	background: var(--chutuoc-color-primary);
}
@media (min-width: 48rem) {
	.chutuoc-service-design--website .chutuoc-service-design__offering-cluster > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.chutuoc-service-design--website .chutuoc-service-design__benefits .chutuoc-service-design__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
	.chutuoc-service-design--website .chutuoc-service-design__hero-composition { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--chutuoc-space-7); }
	.chutuoc-service-design--website .chutuoc-service-design__problems .chutuoc-service-design__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.chutuoc-service-design--website .chutuoc-service-design__showroom { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--chutuoc-space-6); padding: var(--chutuoc-space-8) max(var(--chutuoc-container-gutter), calc((100% - 1120px) / 2)); }
	.chutuoc-service-design--website .chutuoc-service-design__showroom .chutuoc-service-design__section { padding: 0; }
	.chutuoc-service-design--website .chutuoc-service-design__showroom .chutuoc-service-design__wrap { max-width: none; width: 100%; padding-inline: 0; margin: 0; }
	.chutuoc-service-design--website .chutuoc-service-design__showroom-media { align-self: center; }
	.chutuoc-service-design--website .chutuoc-service-design__offering-cluster:nth-child(even) { margin-inline-start: var(--chutuoc-space-6); }
	.chutuoc-service-design--website .chutuoc-service-design__benefits .chutuoc-service-design__items { column-gap: 36%; row-gap: var(--chutuoc-space-7); }
	.chutuoc-service-design--website .chutuoc-service-design__product-sketch { display: block; position: absolute; width: 25%; max-width: 18rem; aspect-ratio: 4 / 3; inset-inline-start: 50%; inset-block-start: 52%; transform: translate(-50%, -50%); border: .5rem solid var(--chutuoc-color-background-dark); border-radius: var(--chutuoc-radius-md); background: var(--chutuoc-color-background-alt); box-shadow: var(--chutuoc-shadow-soft); pointer-events: none; }
	.chutuoc-service-design--website .chutuoc-service-design__product-sketch::before { content: ""; position: absolute; inset: 20% 10% 15%; background: linear-gradient(130deg, var(--chutuoc-color-background) 55%, var(--chutuoc-color-primary-soft) 55%); border: 1px solid var(--chutuoc-color-border); }
	.chutuoc-service-design--website .chutuoc-service-design__product-sketch span:first-child { position: absolute; inset-block-start: 27%; inset-inline-start: 16%; width: 32%; height: 4%; background: var(--chutuoc-color-primary); }
	.chutuoc-service-design--website .chutuoc-service-design__product-sketch span:nth-child(2) { position: absolute; inset-block-end: 24%; inset-inline-start: 16%; width: 22%; height: 10%; border-radius: var(--chutuoc-radius-sm); background: var(--chutuoc-color-primary); }
	.chutuoc-service-design--website .chutuoc-service-design__product-sketch span:last-child { position: absolute; inset-inline-end: -9%; inset-block-end: -15%; width: 26%; height: 75%; border: .25rem solid var(--chutuoc-color-background-dark); border-radius: var(--chutuoc-radius-md); background: linear-gradient(160deg, var(--chutuoc-color-background) 55%, var(--chutuoc-color-primary-soft) 55%); }
	.chutuoc-service-design--website .chutuoc-service-design__process .chutuoc-service-design__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.chutuoc-service-design--website .chutuoc-service-design__technologies > .chutuoc-service-design__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--chutuoc-space-6); align-items: start; }
	.chutuoc-service-design--website .chutuoc-service-design__technologies .chutuoc-service-design__heading { margin: 0; }
	.chutuoc-service-design--website .chutuoc-service-design__technologies ul { grid-column: 2; }
	.chutuoc-service-design--website [data-chutuoc-service-slot="faq"] > .chutuoc-service-design__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: var(--chutuoc-space-8); align-items: start; }
	.chutuoc-service-design--website .chutuoc-service-design__faq { margin: 0; }
	.chutuoc-service-design--website .chutuoc-service-page__quote-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
}