/* ================================================================
				 * 1. Design tokens and frequently adjusted layout controls
				 * ================================================================ */
				.hdbx {
					--hdbx-brand: #008f8c;
					--hdbx-brand-dark: #007b78;
					--hdbx-ink: #172e2d;
					--hdbx-muted: #607776;
					--hdbx-faint: #829492;
					--hdbx-border: #cfe2df;
					--hdbx-soft: #f2f9f8;

					/* Title: size and distance from the paragraph below it. */
					--hdbx-title-size-min: 38px;
					--hdbx-title-size-fluid: 4vw;
					--hdbx-title-size-max: 50px;
					--hdbx-title-description-gap: 34px;

					/* Intro and hand stage. */
					--hdbx-intro-min-height: 650px;
					--hdbx-hand-stage-height: 300px;
					--hdbx-hand-stage-bottom: 14px;
					--hdbx-hand-width: 50%;

					/* Individual hand positions. */
					--hdbx-left-hand-top: -75px;
					--hdbx-left-hand-edge: -4%;
					--hdbx-right-hand-top: -108px;
					--hdbx-right-hand-edge: -4%;
				}

				/* ================================================================
				 * 2. Component shell and primary layout
				 * ================================================================ */
				.hdbx,
				.hdbx * {
					box-sizing: border-box;
				}

				.hdbx {
					position: relative;
					width: min(1320px, calc(100% - 40px));
					margin: 58px auto;
					overflow: hidden;
					border: 1px solid var(--hdbx-border);
					border-radius: 24px;
					background: #fff;
					box-shadow: 0 22px 60px rgba(21, 65, 62, 0.07);
					color: var(--hdbx-ink);
					font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
				}

				.hdbx__top {
					display: grid;
					grid-template-columns: minmax(0, 7fr) minmax(330px, 3fr);
					min-height: 530px;
				}

				.hdbx__intro {
					position: relative;
					isolation: isolate;
					min-height: var(--hdbx-intro-min-height);
					overflow: hidden;
					padding: 68px 58px 54px;
					border-right: 1px solid var(--hdbx-border);
				}

				/* ================================================================
				 * 3. Intro copy and actions
				 * ================================================================ */
				.hdbx__copy {
					position: relative;
					z-index: 3;
					max-width: 700px;
				}

				.hdbx__eyebrow {
					display: flex;
					align-items: center;
					gap: 10px;
					margin: 0 0 24px;
					color: var(--hdbx-brand);
					font-size: 11px;
					font-weight: 750;
					letter-spacing: 0.18em;
				}

				.hdbx__eyebrow::before {
					width: 22px;
					height: 1px;
					background: currentColor;
					content: "";
				}

				.hdbx h2 {
					max-width: 700px;
					margin: 0;
					font-size: clamp(
						var(--hdbx-title-size-min),
						var(--hdbx-title-size-fluid),
						var(--hdbx-title-size-max)
					);
					font-weight: 590;
					letter-spacing: -0.045em;
					line-height: 1.04;
				}

				.hdbx h2 > span {
					display: block;
					overflow: hidden;
					margin-bottom: -0.06em;
					padding-bottom: 0.06em;
				}

				.hdbx h2 i {
					display: block;
					font-style: normal;
					transform: translateY(112%);
					transition: transform 760ms cubic-bezier(0.2, 0.75, 0.25, 1);
				}

				.hdbx.is-visible h2 i {
					transform: translateY(0);
				}

				.hdbx__description {
					max-width: 690px;
					margin: var(--hdbx-title-description-gap) 0 0;
					color: var(--hdbx-muted);
					font-size: 17px;
					line-height: 1.75;
					opacity: 0;
					transform: translateY(13px);
					transition:
						opacity 540ms ease 190ms,
						transform 540ms ease 190ms;
				}
		.hdbx .hdbx__copy > .hdbx__description {
    margin-top: 20px;
			padding-inline-start: 20px;
}

				.hdbx__actions {
					display: flex;
					align-items: center;
					gap: 18px;
					margin-top: 30px;
					opacity: 0;
					transform: translateY(13px);
					transition:
						opacity 540ms ease 270ms,
						transform 540ms ease 270ms;
				}

				.hdbx.is-visible .hdbx__description,
				.hdbx.is-visible .hdbx__actions {
					opacity: 1;
					transform: none;
				}

				.hdbx .hdbx__button {
					display: inline-flex;
					align-items: center;
					gap: 14px;
					min-height: 47px;
					padding: 0 19px;
					border-radius: 10px;
					background: var(--hdbx-brand);
					box-shadow: 0 10px 25px rgba(0, 143, 140, 0.17);
					color: #fff;
					font-size: 13px;
					font-weight: 720;
					text-decoration: none;
					transition:
						background-color 180ms ease,
						box-shadow 180ms ease,
						transform 180ms ease;
				}

				.hdbx__button:hover {
					background: var(--hdbx-brand-dark);
					box-shadow: 0 13px 28px rgba(0, 123, 120, 0.22);
					transform: translateY(-1px);
				}

				.hdbx__button span {
					transition: transform 180ms ease;
				}

				.hdbx__button:hover span {
					transform: translateX(3px);
				}

				.hdbx__button:focus-visible,
				.hdbx__routes a:focus-visible {
					outline: 2px solid #006f6d;
					outline-offset: 4px;
				}

				.hdbx__actions small {
					max-width: 250px;
					color: var(--hdbx-faint);
					font-size: 12px;
					line-height: 1.45;
				}

				/* ================================================================
				 * 4. Animated hands
				 * ================================================================ */
				.hdbx__hands {
					position: absolute;
					z-index: 1;
					inset: auto 0 var(--hdbx-hand-stage-bottom);
					height: var(--hdbx-hand-stage-height);
					overflow: hidden;
					pointer-events: none;
				}

				.hdbx__hand-enter {
					position: absolute;
					width: var(--hdbx-hand-width);
					opacity: 0;
					transition:
						opacity 900ms ease 230ms,
						transform 1150ms cubic-bezier(0.17, 0.78, 0.22, 1) 230ms;
					will-change: opacity, transform;
				}

				.hdbx__hand-enter--left {
					top: var(--hdbx-left-hand-top);
					left: var(--hdbx-left-hand-edge);
					transform: translateX(-18%);
				}

				.hdbx__hand-enter--right {
					top: var(--hdbx-right-hand-top);
					right: var(--hdbx-right-hand-edge);
					transform: translateX(18%);
				}

				.hdbx.is-visible .hdbx__hand-enter {
					opacity: 1;
					transform: translateX(0);
				}

				.hdbx__hand-motion {
					will-change: transform;
				}

				.hdbx__hand-canvas {
					display: block;
					width: 100%;
					height: auto;
				}

				.hdbx.no-hands .hdbx__hands {
					display: none;
				}

				/* ================================================================
				 * 5. Objective routes
				 * ================================================================ */
				.hdbx__routes-panel {
					display: flex;
					flex-direction: column;
					padding: 44px 34px 34px;
					background: var(--hdbx-soft);
				}

				.hdbx__routes-head > span {
					display: block;
					margin: 0 0 12px;
					color: var(--hdbx-brand);
					font-size: 10px;
					font-weight: 750;
					letter-spacing: 0.15em;
				}

				.hdbx__routes-head > strong {
					display: block;
					max-width: 290px;
					margin: 0 0 22px;
					color: #081313;
					font-size: 22px;
					font-weight: 610;
					letter-spacing: -0.034em;
					line-height: 1.15;
				}

				.hdbx__routes {
					display: grid;
					flex: 1;
					grid-template-rows: repeat(6, minmax(56px, 1fr));
					border-top: 1px solid var(--hdbx-border);
				}

				.hdbx__routes a {
					position: relative;
					z-index: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 16px;
					min-height: 56px;
					padding: 0 2px;
					border-bottom: 1px solid var(--hdbx-border);
					color: #081313;
					font-size: 13px;
					font-weight: 650;
					text-decoration: none;
					opacity: 0;
					transform: translateY(10px);
					transition:
						color 180ms ease,
						opacity 460ms ease,
						padding 180ms ease,
						transform 460ms ease;
				}

				.hdbx__routes a::before {
					position: absolute;
					z-index: -1;
					inset: 0 -12px;
					background: rgba(0, 143, 140, 0.055);
					content: "";
					transform: scaleX(0);
					transform-origin: right;
					transition: transform 230ms ease;
				}

				.hdbx.is-visible .hdbx__routes a {
					opacity: 1;
					transform: none;
				}

				.hdbx.is-visible .hdbx__routes a:nth-child(1) { transition-delay: 250ms; }
				.hdbx.is-visible .hdbx__routes a:nth-child(2) { transition-delay: 310ms; }
				.hdbx.is-visible .hdbx__routes a:nth-child(3) { transition-delay: 370ms; }
				.hdbx.is-visible .hdbx__routes a:nth-child(4) { transition-delay: 430ms; }
				.hdbx.is-visible .hdbx__routes a:nth-child(5) { transition-delay: 490ms; }
				.hdbx.is-visible .hdbx__routes a:nth-child(6) { transition-delay: 550ms; }

				.hdbx__routes a:hover {
					padding-inline: 6px 0;
					color: var(--hdbx-brand-dark);
				}

				.hdbx__routes a:hover::before {
					transform: scaleX(1);
					transform-origin: left;
				}

				.hdbx__routes b {
					color: var(--hdbx-brand);
					font-size: 16px;
					font-weight: 500;
					transition: transform 180ms ease;
				}

				.hdbx__routes a:hover b {
					transform: translateX(4px);
				}

				/* ================================================================
				 * 6. Capability cards
				 * ================================================================ */
				.hdbx__capabilities {
					padding: 30px 34px;
					border-top: 1px solid var(--hdbx-border);
				}

				.hdbx__capabilities-head {
					margin-bottom: 20px;
				}

				.hdbx__capabilities-head strong {
					display: block;
					margin-bottom: 7px;
					color: #0b1f1e;
					font-size: 13px;
				}

				.hdbx__capabilities-head p {
					margin: 0;
					color: var(--hdbx-muted);
					font-size: 12px;
					line-height: 1.5;
				}

				.hdbx__capability-grid {
					display: grid;
					grid-template-columns: repeat(4, minmax(0, 1fr));
					gap: 12px;
				}

				.hdbx__capability-grid article {
					display: grid;
					grid-template-columns: 34px minmax(0, 1fr);
					gap: 12px;
					min-height: 118px;
					padding: 17px 16px;
					border: 1px solid #d5e5e2;
					border-radius: 15px;
					background: #fff;
					opacity: 0;
					transform: translateY(14px);
					transition:
						border-color 180ms ease,
						opacity 480ms ease,
						transform 480ms ease;
				}

				.hdbx.is-visible .hdbx__capability-grid article {
					opacity: 1;
					transform: none;
				}

				.hdbx.is-visible .hdbx__capability-grid article:nth-child(1) { transition-delay: 400ms; }
				.hdbx.is-visible .hdbx__capability-grid article:nth-child(2) { transition-delay: 470ms; }
				.hdbx.is-visible .hdbx__capability-grid article:nth-child(3) { transition-delay: 540ms; }
				.hdbx.is-visible .hdbx__capability-grid article:nth-child(4) { transition-delay: 610ms; }

				.hdbx__capability-grid article > span {
					display: grid;
					width: 30px;
					height: 30px;
					place-items: center;
					border-radius: 50%;
					background: #ecf9f7;
					color: var(--hdbx-brand);
					font-size: 9px;
					font-weight: 700;
				}

				.hdbx__capability-grid article strong {
					display: block;
					margin: 8px 0 7px;
					color: #071515;
					font-size: 12px;
					line-height: 1.3;
				}

				.hdbx__capability-grid article p {
					margin: 0;
					color: var(--hdbx-muted);
					font-size: 10.5px;
					line-height: 1.55;
				}

				.hdbx__capability-grid article:hover {
					border-color: #a8cfca;
					transform: translateY(-2px);
				}

				/* ================================================================
				 * 7. Tablet layout
				 * ================================================================ */
				@media (max-width: 980px) {
					.hdbx__top {
						grid-template-columns: 1fr;
					}

					.hdbx__intro {
						border-right: 0;
					}

					.hdbx__routes-panel {
						border-top: 1px solid var(--hdbx-border);
					}

					.hdbx__routes-head > strong {
						max-width: none;
					}

					.hdbx__capability-grid {
						grid-template-columns: repeat(2, minmax(0, 1fr));
					}
				}

				/* ================================================================
				 * 8. Mobile layout and mobile-specific tuning controls
				 * ================================================================ */
				@media (max-width: 640px) {
					.hdbx {
						--hdbx-title-size-min: 36px;
						--hdbx-title-size-fluid: 11vw;
						--hdbx-title-size-max: 48px;
						--hdbx-title-description-gap: 30px;
						--hdbx-hand-stage-height: 205px;
						--hdbx-hand-stage-bottom: 10px;
						--hdbx-hand-width: 70%;
						--hdbx-left-hand-top: -36px;
						--hdbx-left-hand-edge: -10%;
						--hdbx-right-hand-top: -60px;
						--hdbx-right-hand-edge: -20%;

						width: min(calc(100% - 22px), 1320px);
						margin: 38px auto;
						border-radius: 19px;
					}

					.hdbx__intro {
						padding: 38px 24px 34px;
					}

					.hdbx h2 {
						line-height: 1.02;
					}

					.hdbx__eyebrow {
						margin-bottom: 20px;
					}

					.hdbx__description {
						font-size: 15px;
						line-height: 1.65;
					}

					.hdbx__actions {
						align-items: flex-start;
						flex-direction: column;
						gap: 12px;
						margin-top: 24px;
					}

					.hdbx__actions small {
						max-width: 275px;
					}

					.hdbx__routes-panel {
						padding: 34px 24px 26px;
					}

					.hdbx__routes-head > strong {
						font-size: 24px;
					}

					.hdbx__routes a {
						min-height: 55px;
					}

					.hdbx__capabilities {
						padding: 26px 24px;
					}

					.hdbx__capability-grid {
						grid-template-columns: 1fr;
					}

					.hdbx__capability-grid article {
						min-height: 104px;
					}
				}

				/* ================================================================
				 * 9. Reduced motion
				 * ================================================================ */
				@media (prefers-reduced-motion: reduce) {
					.hdbx * {
						scroll-behavior: auto;
						transition-duration: 0.001ms;
						animation-duration: 0.001ms;
						animation-iteration-count: 1;
					}

					.hdbx__hand-enter,
					.hdbx__routes a,
					.hdbx__capability-grid article,
					.hdbx__description,
					.hdbx__actions {
						opacity: 1;
						transform: none;
					}

					.hdbx h2 i {
						transform: none;
					}
				}