/** Trang chủ: khó khăn, dịch vụ và đối tác sau Hero.
 * Art direction "editorial kỹ thuật ấm": giấy ngà, mực graphite, cam chỉ làm tín hiệu;
 * mọi section dùng chung nhịp --chutuoc-home-section / --chutuoc-home-intro. */
.chutuoc-main--home {
	--chutuoc-home-gutter: var(--chutuoc-container-gutter);
	--chutuoc-home-section: var(--chutuoc-space-8);
	--chutuoc-home-intro: var(--chutuoc-space-6);
	--chutuoc-home-tile-dark: #1f2b31;
	--chutuoc-radius-md: 10px;
	--chutuoc-radius-lg: 18px;
	--chutuoc-radius-image: 12px;
	grid-template-columns: minmax(var(--chutuoc-home-gutter), 1fr) minmax(0, var(--chutuoc-container-max)) minmax(var(--chutuoc-home-gutter), 1fr);
	row-gap: 0;
	font-size: 1rem;
}
.chutuoc-main--home > section { min-width: 0; }
.chutuoc-main--home > section:not(.chutuoc-hero):not(.chutuoc-process) {
	width: 100%;
	margin-inline: auto;
	padding-block: var(--chutuoc-home-section);
}
@media (min-width: 768px) {
	.chutuoc-main--home { --chutuoc-home-section: var(--chutuoc-space-9); --chutuoc-home-intro: 2.5rem; }
}
@media (min-width: 1200px) {
	.chutuoc-main--home { --chutuoc-home-section: var(--chutuoc-space-10); --chutuoc-home-intro: var(--chutuoc-space-7); }
}
.chutuoc-main--home h2 {
	font-size: clamp(1.75rem, 1.45rem + 1.25vw, 2.375rem);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.2;
	text-wrap: balance;
}
.chutuoc-main--home h3 { font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.chutuoc-main--home p { text-wrap: pretty; }
.chutuoc-main--home .chutuoc-section-intro { margin-bottom: var(--chutuoc-home-intro); }
/* Chapter label: short orange rule + tracked label above each H2. */
.chutuoc-main--home :is(.chutuoc-section-kicker, .chutuoc-hero__eyebrow) { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 16px; color: var(--chutuoc-color-primary-dark); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; line-height: 1.4; text-transform: uppercase; }
.chutuoc-main--home :is(.chutuoc-section-kicker, .chutuoc-hero__eyebrow)::before { content: ''; flex: 0 0 32px; width: 32px; height: 2px; border-radius: 1px; background: var(--chutuoc-color-primary); }
.chutuoc-main--home .chutuoc-section-intro:not(.chutuoc-business-challenges__intro) { text-align: center; }
.chutuoc-main--home .chutuoc-section-intro h2 { max-width: 720px; margin-inline: auto; text-align: center; }
.chutuoc-main--home :where(a):focus-visible { outline: 3px solid var(--chutuoc-color-primary-text); outline-offset: 3px; border-radius: var(--chutuoc-radius-sm); }

/* Mobile prioritizes the message and services; desktop keeps the existing photos. */
.chutuoc-main--home .chutuoc-hero { grid-column: 1 / -1; max-width: none; overflow: hidden; background: var(--chutuoc-color-background-alt); color: var(--chutuoc-color-heading); box-shadow: none; border-radius: 0; }
.chutuoc-main--home .chutuoc-hero__slide { display: flex; align-items: flex-start; min-height: 0; aspect-ratio: auto; }
.chutuoc-main--home .chutuoc-hero__media,
.chutuoc-main--home .chutuoc-hero__shade { display: none; }
.chutuoc-main--home .chutuoc-hero__inner { width: calc(100% - 2 * var(--chutuoc-home-gutter)); padding: 40px 0 96px; }
.chutuoc-main--home .chutuoc-hero__content { max-width: 600px; overflow-wrap: anywhere; }
.chutuoc-main--home .chutuoc-hero__heading { color: var(--chutuoc-color-heading); font-size: clamp(2rem, 1.55rem + 1.9vw, 2.75rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: break-word; margin: 0; }
.chutuoc-main--home .chutuoc-hero__heading-line { display: block; text-wrap: balance; }
.chutuoc-main--home .chutuoc-hero__description { color: var(--chutuoc-color-text); max-width: 490px; margin: 16px 0 0; font-size: var(--chutuoc-font-size-body); line-height: var(--chutuoc-line-height-body); }
.chutuoc-main--home .chutuoc-hero__cta { gap: 12px; margin-top: 32px; }
.chutuoc-main--home .chutuoc-hero__cta .chutuoc-btn { box-sizing: border-box; width: auto; min-height: 48px; padding: 12px 20px; border-radius: var(--chutuoc-radius-md); font-size: var(--chutuoc-font-size-body); font-weight: 600; box-shadow: none; }
.chutuoc-main--home .chutuoc-hero__cta .chutuoc-btn:hover { text-decoration: none; }
.chutuoc-main--home .chutuoc-hero__controls { left: 20px; transform: none; bottom: 16px; gap: 0; padding: 0 4px; border: 0; border-radius: var(--chutuoc-radius-md); background: rgba(255, 255, 255, .85); box-shadow: var(--chutuoc-shadow-sm); }
.chutuoc-main--home .chutuoc-hero__arrow,
.chutuoc-main--home .chutuoc-hero__dot,
.chutuoc-main--home .chutuoc-hero__toggle { box-sizing: border-box; width: 44px; height: 44px; border: 0; border-radius: var(--chutuoc-radius-sm); color: var(--chutuoc-color-heading); background: transparent; }
.chutuoc-main--home .chutuoc-hero__dots { gap: 0; }
.chutuoc-main--home .chutuoc-hero__dot::after { width: 7px; height: 7px; border-color: #66736b; background: transparent; }
.chutuoc-main--home .chutuoc-hero__dot[aria-current="true"]::after { width: 20px; height: 7px; border-radius: 4px; border-color: var(--chutuoc-color-primary-dark); background: var(--chutuoc-color-primary-dark); }
.chutuoc-main--home .chutuoc-hero__arrow:hover,
.chutuoc-main--home .chutuoc-hero__toggle:hover { background: #e9ece6; }
.chutuoc-main--home .chutuoc-hero__arrow:focus-visible,
.chutuoc-main--home .chutuoc-hero__dot:focus-visible,
.chutuoc-main--home .chutuoc-hero__toggle:focus-visible { outline: 2px solid var(--chutuoc-color-primary-dark); outline-offset: 2px; }

/* Consequence first, an explanatory scene, then its cause; five static list items.
   An ivory panel (full-bleed band below 768px, rounded card above) holds the whole problem story,
   so the white Services section reads as a separate chapter. */
.chutuoc-main--home .chutuoc-business-challenges { container: chutuoc-challenges / inline-size; }
.chutuoc-main--home .chutuoc-business-challenges__layout { display: grid; gap: 24px; margin-inline: calc(-1 * var(--chutuoc-home-gutter)); padding: var(--chutuoc-space-7) var(--chutuoc-home-gutter); background: var(--chutuoc-color-background-alt); }
@media (min-width: 768px) {
	.chutuoc-main--home .chutuoc-business-challenges__layout { margin-inline: 0; padding: var(--chutuoc-space-7) var(--chutuoc-space-6); border-radius: var(--chutuoc-radius-lg); }
}
@media (min-width: 1200px) {
	.chutuoc-main--home .chutuoc-business-challenges__layout { padding: var(--chutuoc-space-8) var(--chutuoc-space-7); }
}
.chutuoc-main--home .chutuoc-business-challenges .chutuoc-business-challenges__intro { margin: 0; text-align: left; align-self: center; }
.chutuoc-main--home .chutuoc-business-challenges .chutuoc-business-challenges__intro h2 { max-width: 20ch; margin: 0; }
.chutuoc-main--home .chutuoc-business-challenges__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; }
.chutuoc-main--home .chutuoc-business-challenges__item { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 20px; border-radius: var(--chutuoc-radius-lg); background: var(--chutuoc-color-surface); overflow-wrap: anywhere; }
.chutuoc-main--home .chutuoc-business-challenges__heading { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.chutuoc-main--home .chutuoc-business-challenges__number { flex: 0 0 auto; color: var(--chutuoc-color-primary-dark); font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .06em; line-height: 1.75rem; }
.chutuoc-main--home .chutuoc-business-challenges__item h3 { flex: 1 1 12rem; min-width: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.4; margin: 0; color: var(--chutuoc-color-heading); }
.chutuoc-main--home .chutuoc-business-challenges__illustration { display: block; align-self: center; width: min(100%, 216px); height: auto; aspect-ratio: 2 / 1; object-fit: contain; }
.chutuoc-main--home .chutuoc-business-challenges__cause { margin-top: auto; padding: 16px; border-radius: var(--chutuoc-radius-image); background: var(--chutuoc-color-background-alt); }
.chutuoc-main--home .chutuoc-business-challenges__cause-label { display: block; margin-bottom: 6px; color: var(--chutuoc-color-primary-dark); font-size: .875rem; font-weight: 600; line-height: 1.5; }
.chutuoc-main--home .chutuoc-business-challenges__description { margin: 0; color: var(--chutuoc-color-text); font-size: 1rem; line-height: 1.65; }
/* Normal grid is the progressive fallback, with the intro above the list. */
@container chutuoc-challenges (min-width: 38rem) {
	.chutuoc-main--home .chutuoc-business-challenges__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.chutuoc-main--home .chutuoc-business-challenges__item { padding: 24px; }
}
@container chutuoc-challenges (min-width: 64rem) {
	.chutuoc-main--home .chutuoc-business-challenges__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Shared intrinsic rows reserve one visual cell for the intro without altering list semantics. */
@supports (grid-template-rows: subgrid) {
	@container chutuoc-challenges (min-width: 38rem) {
		.chutuoc-main--home .chutuoc-business-challenges__layout--balanced { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		.chutuoc-main--home .chutuoc-business-challenges__layout--balanced .chutuoc-business-challenges__intro { grid-column: 1; grid-row: 1; }
		.chutuoc-main--home .chutuoc-business-challenges__layout--balanced .chutuoc-business-challenges__list { grid-column: 1 / -1; grid-row: 1 / span 3; grid-template-columns: subgrid; grid-template-rows: subgrid; }
		.chutuoc-main--home .chutuoc-business-challenges__layout--balanced .chutuoc-business-challenges__item:first-child { grid-column: 2; }
	}
	@container chutuoc-challenges (min-width: 64rem) {
		.chutuoc-main--home .chutuoc-business-challenges__layout--balanced { grid-template-columns: repeat(3, minmax(0, 1fr)); }
		.chutuoc-main--home .chutuoc-business-challenges__layout--balanced .chutuoc-business-challenges__list { grid-row: 1 / span 2; grid-template-columns: subgrid; }
	}
}
/* Wide panels: intro stays in a sticky left third while the cards read in two columns. */
@container chutuoc-challenges (min-width: 64rem) {
	.chutuoc-main--home .chutuoc-business-challenges__layout,
	.chutuoc-main--home .chutuoc-business-challenges__layout--balanced { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--chutuoc-space-7); align-items: start; }
	.chutuoc-main--home .chutuoc-business-challenges .chutuoc-business-challenges__intro,
	.chutuoc-main--home .chutuoc-business-challenges__layout--balanced .chutuoc-business-challenges__intro { grid-column: 1; grid-row: 1; position: sticky; top: 6rem; align-self: start; }
	.chutuoc-main--home .chutuoc-business-challenges__list,
	.chutuoc-main--home .chutuoc-business-challenges__layout--balanced .chutuoc-business-challenges__list { grid-column: 2; grid-row: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
	.chutuoc-main--home .chutuoc-business-challenges__layout--balanced .chutuoc-business-challenges__item:first-child { grid-column: auto; }
	/* An odd final card spans the row with its scene on the right. */
	.chutuoc-main--home .chutuoc-business-challenges__item:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 216px; grid-template-rows: auto 1fr; column-gap: 24px; }
	.chutuoc-main--home .chutuoc-business-challenges__item:last-child:nth-child(odd) .chutuoc-business-challenges__illustration { grid-column: 2; grid-row: 1 / span 2; }
	.chutuoc-main--home .chutuoc-business-challenges__item:last-child:nth-child(odd) :is(.chutuoc-business-challenges__heading, .chutuoc-business-challenges__cause) { grid-column: 1; }
}

/* Five equal choices on the page's one deep graphite band: the "solution" chapter after the ivory problem panel. */
.chutuoc-main--home > section.chutuoc-core-services:not(.chutuoc-process) { grid-column: 1 / -1; box-sizing: border-box; padding: var(--chutuoc-home-section) max(var(--chutuoc-home-gutter), calc((100% - var(--chutuoc-container-max)) / 2)); background: var(--chutuoc-color-background-dark); color: var(--chutuoc-color-on-dark); }
.chutuoc-main--home .chutuoc-core-services .chutuoc-section-intro h2 { margin-inline: auto; color: var(--chutuoc-color-on-dark); text-align: center; }
.chutuoc-main--home .chutuoc-core-services .chutuoc-section-kicker { color: var(--chutuoc-color-link-on-dark); }
.chutuoc-main--home .chutuoc-service-list { display: grid; gap: 12px; border: 0; }
.chutuoc-main--home .chutuoc-service-row { min-width: 0; border: 0; }
.chutuoc-main--home .chutuoc-service-row__link { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px; border-radius: var(--chutuoc-radius-lg); color: var(--chutuoc-color-on-dark); background: var(--chutuoc-home-tile-dark); transition: background-color 180ms ease; }
.chutuoc-main--home .chutuoc-service-row__link:hover { background: #263640; text-decoration: none; }
.chutuoc-main--home .chutuoc-core-services :where(a):focus-visible { outline-color: var(--chutuoc-color-primary); }
.chutuoc-main--home .chutuoc-service-row__visual { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--chutuoc-radius-image); background: var(--chutuoc-color-background-alt); }
.chutuoc-main--home .chutuoc-service-row__visual img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.chutuoc-main--home .chutuoc-service-row__link:hover .chutuoc-service-row__visual img { transform: scale(1.03); }
.chutuoc-main--home .chutuoc-service-row__icon { width: 40px; height: 40px; color: var(--chutuoc-color-primary-dark); }
.chutuoc-main--home .chutuoc-service-row__icon svg { display: block; width: 100%; height: 100%; }
.chutuoc-main--home .chutuoc-service-row__body { min-width: 0; }
.chutuoc-main--home .chutuoc-service-row__heading { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.chutuoc-main--home .chutuoc-service-row__title { min-width: 0; color: var(--chutuoc-color-on-dark); font-size: 1.125rem; margin: 0; }
.chutuoc-main--home .chutuoc-service-row__summary { color: var(--chutuoc-color-muted-on-dark); font-size: 1rem; line-height: 1.6; margin: 8px 0 0; }
.chutuoc-main--home .chutuoc-service-row__arrow { flex-shrink: 0; width: 18px; height: 24px; color: var(--chutuoc-color-primary); transition: transform 180ms ease; }
.chutuoc-main--home .chutuoc-service-row__link:hover .chutuoc-service-row__title { color: var(--chutuoc-color-link-on-dark); }
.chutuoc-main--home .chutuoc-service-row__link:hover .chutuoc-service-row__arrow { transform: translateX(3px); }

.chutuoc-main--home .chutuoc-home-symbol { display: block; width: 40px; height: 40px; color: var(--chutuoc-color-primary-dark); }

/* Ordered six-step diagram; full descriptions remain on About. */
.chutuoc-main--home .chutuoc-process { grid-column: 1 / -1; padding: var(--chutuoc-section-space) var(--chutuoc-home-gutter); background: var(--chutuoc-color-background-alt); }
.chutuoc-main--home .chutuoc-process__timeline { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; list-style: none; padding: 0; margin: 0; }
.chutuoc-main--home .chutuoc-process-step { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 52px; padding: 0 0 16px; }
.chutuoc-main--home .chutuoc-process-step__visual { display: flex; align-items: center; gap: 12px; }
.chutuoc-main--home .chutuoc-process-step .chutuoc-home-symbol { width: 32px; height: 32px; }
.chutuoc-main--home .chutuoc-process-step::before { content: none; }
.chutuoc-main--home .chutuoc-process-step:last-child { padding-bottom: 0; min-height: 36px; }
.chutuoc-main--home .chutuoc-process-step__number { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; color: var(--chutuoc-color-primary-dark); opacity: 1; background: var(--chutuoc-color-surface); font: 500 .8125rem var(--chutuoc-font-body); }
.chutuoc-main--home .chutuoc-process-step__title { grid-column: 2; margin: 0; font-size: 1rem; }
.chutuoc-main--home .chutuoc-process__detail-link { margin-top: 24px; font-size: 1rem; }

/* Optional real content follows the three core sections. */
.chutuoc-main--home .chutuoc-technology-stack__badges { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; }
.chutuoc-main--home .chutuoc-technology-badge { padding: 8px 16px; border: 0; border-radius: var(--chutuoc-radius-md); background: var(--chutuoc-color-background-alt); }
.chutuoc-main--home .chutuoc-knowledge__grid { grid-template-columns: minmax(0, 1fr); }
.chutuoc-main--home .chutuoc-blog-card { overflow: hidden; padding: 0; box-shadow: var(--chutuoc-shadow-sm); border-radius: var(--chutuoc-radius-lg); }
.chutuoc-main--home .chutuoc-blog-card__thumbnail { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.chutuoc-main--home .chutuoc-blog-card__thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.chutuoc-main--home .chutuoc-blog-card__title { font-size: var(--chutuoc-font-size-h3); }
.chutuoc-main--home .chutuoc-blog-card__category,
.chutuoc-main--home .chutuoc-blog-card__title,
.chutuoc-main--home .chutuoc-blog-card__excerpt,
.chutuoc-main--home .chutuoc-blog-card__date,
.chutuoc-main--home .chutuoc-blog-card__link { margin-inline: 24px; }
.chutuoc-main--home .chutuoc-blog-card__category { display: inline-block; margin-top: 24px; color: var(--chutuoc-color-primary-dark); }
.chutuoc-main--home .chutuoc-blog-card__excerpt { color: var(--chutuoc-color-muted); }
.chutuoc-main--home .chutuoc-blog-card__link { display: inline-block; min-height: 44px; margin-bottom: 16px; }

/* An administrator's chosen image remains visible, including image-only slides. */
@media (max-width: 767px) {
	.chutuoc-main--home .chutuoc-hero__slide--custom-image { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; padding-bottom: 72px; }
	.chutuoc-main--home .chutuoc-hero__slide--custom-image .chutuoc-hero__inner { grid-row: 1; padding: 40px 0 24px; }
	.chutuoc-main--home .chutuoc-hero__slide--custom-image .chutuoc-hero__media { display: block; grid-row: 2; position: relative; width: calc(100% - 40px); aspect-ratio: 4 / 3; margin: 0 20px; border-radius: var(--chutuoc-radius-image); overflow: hidden; }
	.chutuoc-main--home .chutuoc-hero__slide--custom-image .chutuoc-hero__image { width: 100%; height: 100%; object-fit: cover; }
	.chutuoc-main--home .chutuoc-hero__slide--image-only .chutuoc-hero__inner { display: none; }
	.chutuoc-main--home .chutuoc-hero__slide--image-only .chutuoc-hero__media { grid-row: 1; margin-top: 24px; }
}
@media (min-width: 768px) {
	.chutuoc-main--home .chutuoc-hero { grid-column: 2; margin-top: var(--chutuoc-space-5); border-radius: var(--chutuoc-radius-lg); }
	.chutuoc-main--home .chutuoc-hero__slide { min-height: 440px; }
	.chutuoc-main--home .chutuoc-hero__media { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
	.chutuoc-main--home .chutuoc-hero__image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
	.chutuoc-main--home .chutuoc-hero__shade { display: block; background: linear-gradient(90deg, rgb(245 241 235 / .98) 0%, rgb(245 241 235 / .9) 45%, rgb(245 241 235 / .15) 72%, transparent 100%); }
	.chutuoc-main--home .chutuoc-hero__inner { width: calc(100% - 64px); padding: 56px 0 104px; }
	.chutuoc-main--home .chutuoc-hero__content { max-width: 66%; }
	.chutuoc-main--home .chutuoc-hero__controls { left: 32px; }
	.chutuoc-main--home .chutuoc-service-row__link { grid-template-columns: 160px minmax(0, 1fr); gap: 24px; align-items: center; padding: 16px 24px 16px 16px; }
	.chutuoc-main--home .chutuoc-knowledge__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.chutuoc-main--home .chutuoc-process { padding: var(--chutuoc-section-space) var(--chutuoc-home-gutter); }
	.chutuoc-main--home .chutuoc-process__timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
	.chutuoc-main--home .chutuoc-process-step,
	.chutuoc-main--home .chutuoc-process-step:last-child { border: 0; padding: 0; min-height: 0; align-items: start; }
	.chutuoc-main--home .chutuoc-process-step__number { left: 0; }
	.chutuoc-main--home .chutuoc-process-step__title { align-self: center; }
}
@media (min-width: 1200px) {
	.chutuoc-main--home .chutuoc-hero { margin-top: var(--chutuoc-space-6); }
	.chutuoc-main--home .chutuoc-hero__slide { min-height: 520px; }
	.chutuoc-main--home .chutuoc-hero__inner { width: calc(100% - 96px); }
	.chutuoc-main--home .chutuoc-hero__content { max-width: min(680px, 64%); }
	.chutuoc-main--home .chutuoc-hero__controls { left: 48px; }
	.chutuoc-main--home .chutuoc-service-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
	.chutuoc-main--home .chutuoc-service-row__link { box-sizing: border-box; height: 100%; display: flex; flex-direction: column; gap: 16px; align-items: stretch; padding: 0 0 20px; }
	.chutuoc-main--home .chutuoc-service-row__visual { border-radius: var(--chutuoc-radius-lg) var(--chutuoc-radius-lg) 0 0; }
	.chutuoc-main--home .chutuoc-service-row__body { padding-inline: 16px; }
	.chutuoc-main--home .chutuoc-service-row__heading { min-height: 2.7em; }
	.chutuoc-main--home .chutuoc-process { padding-inline: max(var(--chutuoc-home-gutter), calc((100% - var(--chutuoc-container-max)) / 2)); }
	.chutuoc-main--home .chutuoc-process__timeline { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.chutuoc-main--home .chutuoc-process-step,
	.chutuoc-main--home .chutuoc-process-step:last-child { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.chutuoc-main--home .chutuoc-process-step__title { grid-column: 1; align-self: start; }
}
@media (max-width: 359px) {
	.chutuoc-main--home .chutuoc-service-row__link { grid-template-columns: 80px minmax(0, 1fr); column-gap: 12px; }
	.chutuoc-main--home .chutuoc-hero__cta .chutuoc-btn { flex-grow: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.chutuoc-main--home .chutuoc-service-row__arrow,
	.chutuoc-main--home .chutuoc-service-row__visual img { transition: none; }
	.chutuoc-main--home .chutuoc-service-row__link:hover :is(.chutuoc-service-row__arrow, .chutuoc-service-row__visual img) { transform: none; }
}

/* One calm surface joins the partner values and their ordered process. */
.chutuoc-main--home > .chutuoc-why-us {
	grid-column: 1 / -1;
	box-sizing: border-box;
	padding: var(--chutuoc-home-section) max(var(--chutuoc-home-gutter), calc((100% - var(--chutuoc-container-max)) / 2));
	border: 0;
	background: var(--chutuoc-color-background-alt);
}
.chutuoc-main--home .chutuoc-why-us > .chutuoc-section-intro { display: block; margin-bottom: var(--chutuoc-home-intro); }
.chutuoc-main--home .chutuoc-why-us > .chutuoc-section-intro h2 { margin-inline: auto; text-align: center; }
.chutuoc-main--home .chutuoc-why-us__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.chutuoc-main--home .chutuoc-why-us-item { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 8px; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.chutuoc-main--home .chutuoc-why-us-item__visual { display: grid; place-items: center; width: 100%; aspect-ratio: 2 / 1; max-height: 190px; overflow: hidden; margin-bottom: 8px; border-radius: var(--chutuoc-radius-image); background: var(--chutuoc-color-surface); }
.chutuoc-main--home .chutuoc-why-us-item__visual .chutuoc-home-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.chutuoc-main--home .chutuoc-why-us-item__visual--scope .chutuoc-home-image { object-position: 46% 54%; }
.chutuoc-main--home .chutuoc-why-us-item__visual--security .chutuoc-home-image { object-position: 55% 62%; }
.chutuoc-main--home .chutuoc-why-us-item__visual--support .chutuoc-home-image { object-position: 45% 48%; }
.chutuoc-main--home .chutuoc-why-us-item .chutuoc-home-symbol { margin: 0; }
.chutuoc-main--home .chutuoc-why-us-item__title { margin: 0; font-size: var(--chutuoc-font-size-h3); }
.chutuoc-main--home .chutuoc-why-us-item__description { margin: 0; color: var(--chutuoc-color-muted); font-size: 1rem; line-height: 1.65; }

/* Landscape cards on the vertical sequence; six squares when the row has room. */
.chutuoc-main--home .chutuoc-process--embedded {
	--chutuoc-process-step-gap: 2rem;
	--chutuoc-process-peach: hsl(20 90% 91%);
	--chutuoc-process-olive: hsl(36 80% 88%);
	--chutuoc-process-mint: hsl(42 40% 85%);
	--chutuoc-process-blue: hsl(12 45% 88%);
	--chutuoc-process-lavender: hsl(30 14% 86%);
	--chutuoc-process-rose: hsl(4 70% 92%);
	width: 100%; margin-top: 40px; padding: 0; background: transparent;
	container-type: inline-size; container-name: chutuoc-process;
}
.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process__heading { margin: 0; font-size: 1.25rem; }
.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process__body { width: 100%; max-width: 36rem; margin-inline: auto; }
.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process__timeline { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--chutuoc-process-step-gap); }
.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process-step,
.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process-step:last-child {
	--chutuoc-process-arrow-x: 0px; --chutuoc-process-arrow-y: 3px;
	box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr); place-content: center; align-items: center; justify-items: start;
	width: 100%; aspect-ratio: auto; min-height: 6rem; align-self: stretch; gap: .75rem; padding: 1rem;
	border: 0; border-radius: var(--chutuoc-radius-image); background: var(--chutuoc-process-peach); box-shadow: none;
}
.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process-step:nth-child(6n + 1) { background: var(--chutuoc-process-peach); --chutuoc-process-color-delay: 0s; }
.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process-step:nth-child(6n + 2) { background: var(--chutuoc-process-olive); --chutuoc-process-color-delay: -6s; }
.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process-step:nth-child(6n + 3) { background: var(--chutuoc-process-mint); --chutuoc-process-color-delay: -12s; }
.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process-step:nth-child(6n + 4) { background: var(--chutuoc-process-blue); --chutuoc-process-color-delay: -18s; }
.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process-step:nth-child(6n + 5) { background: var(--chutuoc-process-lavender); --chutuoc-process-color-delay: -24s; }
.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process-step:nth-child(6n + 6) { background: var(--chutuoc-process-rose); --chutuoc-process-color-delay: -30s; }
.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process-step::after { content: ''; position: absolute; top: calc(100% + .4375rem); bottom: auto; left: calc(50% - .5px); width: 1px; height: 1.125rem; background: var(--chutuoc-color-control-border); pointer-events: none; }
.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process-step::before { content: ''; position: absolute; top: calc(100% + 1.1875rem); left: calc(50% - .1875rem); width: .375rem; height: .375rem; border: 0; border-right: 1px solid var(--chutuoc-color-control-border); border-bottom: 1px solid var(--chutuoc-color-control-border); border-radius: 0; background: transparent; transform: rotate(45deg); pointer-events: none; }
.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process-step:last-child::after,
.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process-step:last-child::before { content: none; }
.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process-step__visual { display: block; }
.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process-step__number { display: block; width: auto; height: auto; margin: 0; border: 0; border-radius: 0; color: var(--chutuoc-color-heading); background: transparent; font: 600 1.75rem/1 var(--chutuoc-font-body); font-variant-numeric: tabular-nums; }
.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process-step__title { grid-column: 2; align-self: center; min-width: 0; max-width: 100%; overflow-wrap: anywhere; margin: 0; color: var(--chutuoc-color-heading); font-size: 1rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.4; text-align: left; }
.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process__footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 16px; margin-top: 24px; }
.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process__detail-link { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 48px; margin-top: 0; padding: 12px 20px; border: 0; font-size: 1rem; font-weight: 500; line-height: 1.4; text-align: center; text-decoration: none; }
.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process__detail-link:hover { text-decoration: none; }

@media (min-width: 480px) {
	.chutuoc-main--home .chutuoc-why-us > .chutuoc-section-intro h2 { margin-inline: auto; text-align: center; }
	.chutuoc-main--home .chutuoc-why-us-item { grid-template-columns: 168px minmax(0, 1fr); gap: 10px 24px; }
	.chutuoc-main--home .chutuoc-why-us-item__visual { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 4 / 3; max-height: none; margin-bottom: 0; }
	.chutuoc-main--home .chutuoc-why-us-item__visual--security .chutuoc-home-image { object-position: 55% 55%; }
	.chutuoc-main--home .chutuoc-why-us-item__title { grid-column: 2; }
	.chutuoc-main--home .chutuoc-why-us-item__description { grid-column: 2; }
	.chutuoc-main--home .chutuoc-why-us-item--text .chutuoc-why-us-item__title,
	.chutuoc-main--home .chutuoc-why-us-item--text .chutuoc-why-us-item__description { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
	.chutuoc-main--home .chutuoc-why-us-item__title { font-size: 1.25rem; }
	.chutuoc-main--home .chutuoc-process--embedded { margin-top: 48px; }
}
@media (min-width: 992px) {
	.chutuoc-main--home .chutuoc-why-us__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
	.chutuoc-main--home .chutuoc-why-us-item { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.chutuoc-main--home .chutuoc-why-us-item__visual { grid-column: 1; grid-row: auto; aspect-ratio: 16 / 10; margin-bottom: 8px; }
	.chutuoc-main--home .chutuoc-why-us-item__title { grid-column: 1; min-height: 2.7em; }
	.chutuoc-main--home .chutuoc-why-us-item__description { grid-column: 1; }
}
@media (min-width: 1200px) {
	.chutuoc-main--home .chutuoc-why-us__grid { gap: 32px; }
	.chutuoc-main--home .chutuoc-process--embedded { margin-top: 56px; }
}
@media (min-width: 1280px) {
	.chutuoc-main--home .chutuoc-why-us-item__title { min-height: 0; }
}

/* One directed row needs room for six full cards; larger text uses the vertical fallback. */
@container chutuoc-process (min-width: 65rem) {
	.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process__body--six-steps { max-width: none; }
	.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process__body--six-steps .chutuoc-process__timeline { --chutuoc-process-step-gap: 32px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process__body--six-steps .chutuoc-process-step { --chutuoc-process-arrow-x: 3px; --chutuoc-process-arrow-y: 0px; grid-template-columns: minmax(0, 1fr); justify-items: center; width: 100%; aspect-ratio: 1; min-height: auto; gap: .5rem; }
	.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process__body--six-steps .chutuoc-process-step__title { grid-column: 1; text-align: center; }
	.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process__body--six-steps .chutuoc-process-step::after { top: calc(50% - .5px); left: calc(100% + 7px); width: 18px; height: 1px; }
	.chutuoc-main--home .chutuoc-process--embedded .chutuoc-process__body--six-steps .chutuoc-process-step::before { top: calc(50% - 3px); left: calc(100% + 19px); width: 6px; height: 6px; transform: rotate(-45deg); }
}

@keyframes chutuoc-process-color-cycle {
	0%, 13.888889% { background-color: var(--chutuoc-process-peach); }
	16.666667%, 30.555556% { background-color: var(--chutuoc-process-olive); }
	33.333333%, 47.222222% { background-color: var(--chutuoc-process-mint); }
	50%, 63.888889% { background-color: var(--chutuoc-process-blue); }
	66.666667%, 80.555556% { background-color: var(--chutuoc-process-lavender); }
	83.333333%, 97.222222% { background-color: var(--chutuoc-process-rose); }
	100% { background-color: var(--chutuoc-process-peach); }
}
@keyframes chutuoc-process-arrow-forward {
	0%, 83.333333%, 100% { translate: 0 0; }
	91.666667% { translate: var(--chutuoc-process-arrow-x) var(--chutuoc-process-arrow-y); }
}
/* Opt in only when motion is allowed. Shortening negative-delay cycles would collapse the palette. */
@media (prefers-reduced-motion: no-preference) {
	.chutuoc-main--home .chutuoc-process--embedded[data-chutuoc-process-motion] .chutuoc-process-step { animation: chutuoc-process-color-cycle 36s ease-in-out infinite; animation-delay: var(--chutuoc-process-color-delay); }
	.chutuoc-main--home .chutuoc-process--embedded[data-chutuoc-process-motion] .chutuoc-process-step:not(:last-child)::before,
	.chutuoc-main--home .chutuoc-process--embedded[data-chutuoc-process-motion] .chutuoc-process-step:not(:last-child)::after { animation: chutuoc-process-arrow-forward 6s ease-in-out infinite; }
	.chutuoc-main--home .chutuoc-process--embedded[data-chutuoc-process-motion='paused'] .chutuoc-process-step,
	.chutuoc-main--home .chutuoc-process--embedded[data-chutuoc-process-motion='paused'] .chutuoc-process-step:not(:last-child)::before,
	.chutuoc-main--home .chutuoc-process--embedded[data-chutuoc-process-motion='paused'] .chutuoc-process-step:not(:last-child)::after { animation-play-state: paused; }
}