/**
 * HK International — company profile sections.
 *
 * Highlights, services, reasons, values, process steps, global trade,
 * vision and mission, company information, and the homepage industries and
 * contact sections. The same markup appears on the company pages and the
 * homepage; only the outer spacing differs.
 */

/* ---------- Section frame ---------- */

/* Full-width bands: the section runs edge to edge, the inner carries the gutter. */
.hk-main--wide > .hk-profile-section {
	max-width: none;
	padding-inline: 0;
}

.hk-profile-section__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--gutter);
}

.hk-profile-section--home .hk-profile-section__inner {
	padding-block: var(--wp--preset--spacing--90);
}

/* Rule between consecutive page sections, aligned with the content (inside the gutter). */
.hk-profile-section__inner {
	position: relative;
}

.hk-profile-section--page + .hk-profile-section--page:not(.hk-profile-section--global) .hk-profile-section__inner::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: var(--wp--preset--spacing--gutter);
	border-block-start: 1px solid var(--wp--preset--color--rule);
}

.hk-profile-section__head {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--70);
}

.hk-profile-section__head > *,
.hk-profile-section__inner > * {
	margin-block-start: 0;
}

.hk-profile-section__title {
	margin: 0;
	max-width: 22ch;
	font-size: var(--wp--preset--font-size--heading-1);
	font-stretch: var(--wp--custom--stretch--display);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.hk-profile-section--page .hk-profile-section__title {
	font-size: var(--wp--preset--font-size--heading-2);
}

.hk-profile-section__intro {
	margin: 0;
	max-width: 52ch;
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--body-lg);
}

.hk-profile-section__head .hk-section-link {
	justify-self: start;
}

@media (min-width: 60em) {
	.hk-profile-section__head {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: end;
		column-gap: var(--wp--preset--spacing--60);
	}

	.hk-profile-section__head .hk-profile-section__title {
		grid-row: 1 / span 2;
	}

	.hk-profile-section__head .hk-profile-section__intro,
	.hk-profile-section__head .hk-section-link {
		grid-column: 2;
	}
}

/* ---------- Highlights strip ---------- */

.hk-home-block--highlights,
.hk-profile-section--highlights.hk-profile-section--home {
	background: var(--wp--preset--color--white);
}

.hk-profile-section--highlights .hk-profile-section__inner {
	padding-block: var(--wp--preset--spacing--60);
}

.hk-highlights {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	margin: 0;
}

.hk-highlights__item {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding-inline-start: var(--wp--preset--spacing--40);
	border-inline-start: 3px solid transparent;
	border-image: linear-gradient(180deg, #123f68, #e31e2d) 1;
}

.hk-highlights dt {
	font-size: var(--wp--preset--font-size--heading-4);
	font-stretch: var(--wp--custom--stretch--heading);
	font-weight: 700;
	line-height: 1.2;
}

.hk-highlights dd {
	margin: 0;
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--small);
}

@media (min-width: 48em) {
	.hk-highlights {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------- Cards: services, reasons, values ---------- */

/* White cards on the light-grey page; information only, so no hover state. */
.hk-cards {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hk-card {
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--custom--shadow--card);
}

.hk-card > * {
	margin: 0;
}

/* Icon chip in the logo gradient: the one place each card carries the brand. */
.hk-card__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-block-end: var(--wp--preset--spacing--20);
	padding: 0.7rem;
	border-radius: var(--wp--custom--radius--media);
	background: var(--wp--custom--gradient--brand);
	color: var(--wp--preset--color--white);
}

.hk-card__title {
	font-size: var(--wp--preset--font-size--heading-4);
	font-stretch: var(--wp--custom--stretch--heading);
	font-weight: 650;
	line-height: 1.25;
}

.hk-card__text {
	max-width: 40ch;
	color: var(--wp--preset--color--slate);
}

/* Values are names only: a tighter list of large words, without card chrome. */
.hk-cards--values .hk-card {
	padding: var(--wp--preset--spacing--40) 0 0;
	border: 0;
	border-block-start: 2px solid var(--wp--preset--color--ink);
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.hk-cards--values .hk-card__title {
	font-size: var(--wp--preset--font-size--heading-3);
	font-stretch: var(--wp--custom--stretch--display);
	font-weight: 700;
}

@media (min-width: 40em) {
	.hk-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.hk-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.hk-cards--values {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- Steps: how we work ---------- */

/* A real sequence, so it is numbered: vertical timeline on phones, a row on wide screens. */
.hk-steps {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: hk-step;
}

.hk-step {
	position: relative;
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--20);
	padding: 0 0 var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
	counter-increment: hk-step;
}

.hk-step > * {
	margin: 0;
}

.hk-step::before {
	content: counter(hk-step, decimal-leading-zero);
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	color: var(--wp--preset--color--red-text);
	font-size: var(--wp--preset--font-size--body-lg);
	font-stretch: var(--wp--custom--stretch--display);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

/* The connecting line between numbers. */
.hk-step::after {
	content: "";
	position: absolute;
	inset-block: 2.25rem 0.75rem;
	inset-inline-start: 0.875rem;
	border-inline-start: 1px solid var(--wp--preset--color--rule);
}

.hk-step:last-child {
	padding-block-end: 0;
}

.hk-step:last-child::after {
	display: none;
}

.hk-step__title {
	font-size: var(--wp--preset--font-size--heading-4);
	font-stretch: var(--wp--custom--stretch--heading);
	font-weight: 650;
	line-height: 1.25;
}

.hk-step__text {
	max-width: 36ch;
	color: var(--wp--preset--color--slate);
}

@media (min-width: 64em) {
	.hk-steps {
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		gap: var(--wp--preset--spacing--50);
	}

	.hk-step {
		padding: var(--wp--preset--spacing--70) 0 0;
	}

	.hk-step::after {
		inset-block: 0.75rem auto;
		inset-inline: 3rem calc(-1 * var(--wp--preset--spacing--50) + 0.5rem);
		border-inline-start: 0;
		border-block-start: 1px solid var(--wp--preset--color--rule);
	}
}

/* ---------- How we work: the process in motion ----------
   interactions.js adds .is-flow to the list and moves an "active" step
   through it: reached numbers turn red, a navy line fills the connector
   towards the next step with a red dot at its tip, and the current step
   lifts slightly. Without the script (or with reduced motion) the list
   stays exactly as above. The line and dot use transform only. */

.hk-step__icon {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--wp--preset--color--navy);
}

.hk-step__icon .hk-icon {
	display: block;
	width: 100%;
	height: 100%;
}

/* The track sits exactly on the connector line drawn by .hk-step::after. */
.hk-step__flow {
	position: absolute;
	inset-block: 2.25rem 0.75rem;
	inset-inline-start: calc(0.875rem - 6px);
	width: 12px;
	overflow: hidden;
	pointer-events: none;
}

.hk-step__bar {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 5px;
	width: 2px;
	border-radius: 1px;
	background: var(--wp--preset--color--navy);
	transform: translateY(-102%);
	transition: transform 650ms var(--wp--custom--motion--ease);
}

/* The travelling dot rides on the leading end of the line. */
.hk-step__bar::after {
	content: "";
	position: absolute;
	inset-block-end: -1px;
	inset-inline-start: -4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--red);
	box-shadow: 0 0 0 3px rgb(227 30 45 / 0.18), 0 0 14px rgb(227 30 45 / 0.55);
	opacity: 0;
	transition: opacity 250ms var(--wp--custom--motion--ease);
}

@media (min-width: 64em) {
	.hk-step__flow {
		inset-block: calc(0.75rem - 6px) auto;
		inset-inline: 3rem calc(-1 * var(--wp--preset--spacing--50) + 0.5rem);
		width: auto;
		height: 12px;
	}

	.hk-step__bar {
		inset-block: 5px auto;
		inset-inline: 0;
		width: auto;
		height: 2px;
		transform: translateX(-102%);
	}

	.hk-step__bar::after {
		inset-block: -4px auto;
		inset-inline: auto -1px;
	}

	[dir="rtl"] .hk-step__bar {
		transform: translateX(102%);
	}
}

.hk-steps--process.is-flow .hk-step {
	cursor: pointer;
}

.hk-steps--process.is-flow .hk-step::before,
.hk-steps--process.is-flow .hk-step > :not(.hk-step__flow) {
	transition:
		color 300ms var(--wp--custom--motion--ease),
		opacity 300ms var(--wp--custom--motion--ease),
		transform 400ms var(--wp--custom--motion--ease),
		text-shadow 400ms var(--wp--custom--motion--ease);
}

.hk-steps--process.is-flow .hk-step::before {
	transform-origin: left center;
}

[dir="rtl"] .hk-steps--process.is-flow .hk-step::before {
	transform-origin: right center;
}

/* Not reached yet: quieter. */
.hk-steps--process.is-flow .hk-step:not(.is-reached)::before {
	color: var(--wp--preset--color--slate);
	opacity: 0.5;
}

.hk-steps--process.is-flow .hk-step:not(.is-reached) > :not(.hk-step__flow) {
	opacity: 0.5;
}

/* Passed: its line to the next step is filled. */
.hk-steps--process.is-flow .hk-step.is-passed .hk-step__bar {
	transform: none;
}

.hk-steps--process.is-flow .hk-step.is-leading .hk-step__bar::after {
	opacity: 1;
}

/* Current: number forward with a soft red glow, the step lifts a little. */
.hk-steps--process.is-flow .hk-step.is-current::before {
	transform: translateY(-3px) scale(1.18);
	text-shadow: 0 0 18px rgb(227 30 45 / 0.45);
}

.hk-steps--process.is-flow .hk-step.is-current > :not(.hk-step__flow) {
	transform: translateY(-4px);
}

.hk-steps--process.is-flow .hk-step.is-current .hk-step__icon {
	color: var(--wp--preset--color--red-text);
}

@media (prefers-reduced-motion: reduce) {
	.hk-step__bar,
	.hk-step__bar::after,
	.hk-steps--process.is-flow .hk-step::before,
	.hk-steps--process.is-flow .hk-step > :not(.hk-step__flow) {
		transition: none;
	}

	.hk-steps--process.is-flow .hk-step.is-current::before,
	.hk-steps--process.is-flow .hk-step.is-current > :not(.hk-step__flow) {
		transform: none;
	}
}

/* ---------- Global trade (dark band) ---------- */

.hk-profile-section--global {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.hk-profile-section--global :focus-visible {
	outline-color: var(--wp--preset--color--red);
}

.hk-profile-section--global .hk-profile-section__title,
.hk-profile-section--global .hk-step__title {
	color: var(--wp--preset--color--white);
}

.hk-profile-section--global .hk-profile-section__intro,
.hk-profile-section--global .hk-step__text {
	color: var(--wp--preset--color--rule);
}

.hk-profile-section--global .hk-section-link {
	color: var(--wp--preset--color--white);
}

.hk-profile-section--global .hk-step::before {
	color: var(--wp--preset--color--red);
}

.hk-profile-section--global .hk-step::after {
	border-color: rgb(255 255 255 / 0.2);
}

.hk-global {
	display: grid;
	gap: var(--wp--preset--spacing--70);
	align-items: center;
}

/* 3D-style globe. interactions.js turns the meridians, draws the routes in
   when the section is reached and leans the globe slightly towards the
   pointer. Without JavaScript or with reduced motion it is a still image. */
.hk-globe {
	position: relative;
	justify-self: center;
	width: min(100%, 30rem);
	margin: 0;
	transform: perspective(900px) rotateX(calc(var(--hk-gy, 0) * -6deg)) rotateY(calc(var(--hk-gx, 0) * 8deg));
	transition: transform 900ms var(--wp--custom--motion--ease);
}

.hk-globe svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	fill: none;
	stroke-linecap: round;
}

.hk-globe__rings ellipse {
	stroke: rgb(255 255 255 / 0.1);
	stroke-width: 1;
}

.hk-globe__meridians ellipse {
	stroke: rgb(255 255 255 / 0.16);
	stroke-width: 1;
}

.hk-globe__rim {
	stroke: rgb(255 255 255 / 0.35);
	stroke-width: 1.2;
}

.hk-globe__route {
	stroke: url(#hk-globe-route);
	stroke-width: 1.8;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

.hk-globe__spark {
	fill: #fff;
}

.hk-globe__dot {
	fill: var(--wp--preset--color--red);
	stroke: rgb(255 255 255 / 0.85);
	stroke-width: 1.5;
	transform-box: fill-box;
	transform-origin: center;
}

.hk-globe__hub {
	fill: var(--wp--preset--color--red);
	stroke: #fff;
	stroke-width: 2;
}

.hk-globe__pulse {
	stroke: var(--wp--preset--color--red);
	stroke-width: 1.5;
	transform-box: fill-box;
	transform-origin: center;
}

.hk-globe__label rect {
	fill: rgb(255 255 255 / 0.14);
	stroke: rgb(255 255 255 / 0.35);
}

.hk-globe__label text {
	fill: #fff;
	font-size: 13px;
	font-weight: 600;
	text-anchor: middle;
}

/* Routes wait for the section, then draw in one after another. */
.hk-js .hk-globe.is-ready .hk-globe__route {
	stroke-dashoffset: 1;
}

.hk-js .hk-globe.is-revealed .hk-globe__route {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.6s var(--wp--custom--motion--ease) calc(var(--hk-i) * 180ms + 200ms);
}

@media (prefers-reduced-motion: no-preference) {
	.hk-globe__dot {
		animation: hk-globe-dot 3.2s ease-in-out infinite;
		animation-delay: calc(var(--hk-i) * -0.5s);
	}

	.hk-globe__pulse {
		animation: hk-globe-pulse 2.6s ease-out infinite;
	}

	.hk-globe__halo {
		transform-box: fill-box;
		transform-origin: center;
		animation: hk-scene-breathe 10s ease-in-out infinite alternate;
	}

	.hk-globe:not(.is-revealed) .hk-globe__spark {
		opacity: 0;
	}
}

/* Off screen, the globe's small loops stop too. */
.hk-globe.is-offscreen * {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.hk-globe {
		transform: none;
	}

	.hk-globe__spark {
		display: none;
	}
}

@keyframes hk-globe-dot {
	0%,
	100% {
		scale: 1;
	}

	50% {
		scale: 1.35;
	}
}

@keyframes hk-globe-pulse {
	from {
		scale: 0.4;
		opacity: 0.9;
	}

	to {
		scale: 2.2;
		opacity: 0;
	}
}

@keyframes hk-scene-breathe {
	from {
		scale: 0.96;
		opacity: 0.8;
	}

	to {
		scale: 1.04;
		opacity: 1;
	}
}

@media (min-width: 64em) {
	.hk-global {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: var(--wp--preset--spacing--80);
	}

	/* Three steps read as a route across the band. */
	.hk-global .hk-steps {
		align-self: center;
	}
}

/* ---------- About: prose, vision and mission, company information ---------- */

.hk-prose {
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

.hk-prose__text {
	max-width: var(--wp--custom--measure);
	font-size: var(--wp--preset--font-size--body-lg);
}

.hk-prose__text > * {
	margin-block: 0;
}

.hk-prose__text > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.hk-prose__text > :empty {
	display: none;
}

.hk-prose__media {
	margin: 0;
}

.hk-prose__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--media);
}

@media (min-width: 60em) {
	.hk-prose--media {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: var(--wp--preset--spacing--70);
	}
}

.hk-statements {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	margin: 0;
}

.hk-statement {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--50);
	border-block-start: 2px solid var(--wp--preset--color--ink);
}

.hk-statement__label {
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.hk-statement__text {
	margin: 0;
	max-width: 34ch;
	font-size: var(--wp--preset--font-size--heading-3);
	font-stretch: var(--wp--custom--stretch--heading);
	font-weight: 600;
	line-height: 1.25;
	text-wrap: pretty;
}

@media (min-width: 48em) {
	.hk-statements {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--70);
	}
}

.hk-facts--profile {
	margin: 0;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.hk-facts--profile dd {
	font-size: var(--wp--preset--font-size--heading-4);
	font-stretch: var(--wp--custom--stretch--heading);
	font-weight: 650;
	line-height: 1.3;
}

/* ---------- Homepage: industries and contact ---------- */

.hk-home-block--industries,
.hk-home-block--contact {
	background: var(--wp--preset--color--white);
}

.hk-home-block--industries,
.hk-home-block--contact,
.hk-home-block--highlights,
.hk-home-block--global,
.hk-home-block--industries + .hk-home-block,
.hk-home-block--global + .hk-home-block,
.hk-home-block--highlights + .hk-home-block {
	border-block-start-color: transparent;
}

.hk-home-contact {
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

.hk-home-contact__text > * {
	margin-block-start: 0;
}

.hk-home-contact .hk-home__intro {
	margin-block-start: var(--wp--preset--spacing--40);
}

.hk-home-contact .hk-actions {
	margin-block-start: var(--wp--preset--spacing--50);
}

.hk-home-contact .hk-contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--wp--preset--spacing--50);
	align-content: start;
}

@media (min-width: 60em) {
	.hk-home-contact {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: var(--wp--preset--spacing--70);
	}
}

/* ======================================================================
   Homepage flow: one continuous page rather than stacked boxes.
   ====================================================================== */

/* Soft gradient dividers instead of hard rules between same-colour sections. */
.hk-home-block + .hk-home-block {
	border-block-start: 0;
	background-image: linear-gradient(90deg, transparent, var(--wp--preset--color--rule) 20%, var(--wp--preset--color--rule) 80%, transparent);
	background-repeat: no-repeat;
	background-size: 100% 1px;
}

.hk-home-block--intro,
.hk-home-block--industries,
.hk-home-block--contact,
.hk-home-block--global,
.hk-home-block--cta,
.hk-home-block--highlights,
.hk-home-block--intro + .hk-home-block,
.hk-home-block--industries + .hk-home-block,
.hk-home-block--global + .hk-home-block,
.hk-home-block--highlights + .hk-home-block {
	background-image: none;
}

/* Highlights: a glass strip that overlaps the bottom edge of the hero. */
.hk-main > .hk-home-block--highlights {
	position: relative;
	z-index: 2;
	margin-block-start: -3rem;
	/* Top half over the hero, bottom half the white of the next section. */
	background: linear-gradient(180deg, transparent 50%, var(--wp--preset--color--white) 50%);
}

.hk-home-block--hero:has(+ .hk-home-block--highlights) .hk-hero__rail {
	padding-block-end: calc(var(--wp--preset--spacing--60) + 3rem);
}

.hk-profile-section--highlights.hk-profile-section--home {
	background: transparent;
}

.hk-profile-section--highlights .hk-profile-section__inner {
	padding-block: 0;
}

.hk-profile-section--home .hk-highlights {
	padding: var(--wp--preset--spacing--50);
	border: 1px solid rgb(255 255 255 / 0.6);
	border-radius: var(--wp--custom--radius--card);
	background: rgb(255 255 255 / 0.86);
	box-shadow: 0 24px 48px -24px rgb(13 41 66 / 0.35);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	backdrop-filter: blur(16px) saturate(150%);
}

/* Global trade: curved edges, so the navy band flows out of the page. */
.hk-profile-section--global.hk-profile-section--home {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(circle 520px at var(--hk-mx, 72%) var(--hk-my, 40%), rgb(84 72 106 / 0.45), transparent 70%),
		var(--wp--preset--color--ink);
}

.hk-profile-section--global.hk-profile-section--home::before,
.hk-profile-section--global.hk-profile-section--home::after {
	content: "";
	position: absolute;
	inset-inline: -10%;
	z-index: -1;
	height: 5rem;
	background: var(--wp--preset--color--white);
}

.hk-profile-section--global.hk-profile-section--home::before {
	inset-block-start: -2.5rem;
	border-radius: 0 0 50% 50%;
}

.hk-profile-section--global.hk-profile-section--home::after {
	inset-block-end: -2.5rem;
	border-radius: 50% 50% 0 0;
	background: var(--wp--preset--color--paper);
}

.hk-profile-section--global.hk-profile-section--home .hk-profile-section__inner {
	padding-block: calc(var(--wp--preset--spacing--90) + 2rem);
}

/* A faint globe mark on a light section, carrying the brand between bands. */
.hk-profile-section--reasons.hk-profile-section--home {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.hk-profile-section--reasons.hk-profile-section--home::before {
	content: "";
	position: absolute;
	inset-block: -10% auto;
	inset-inline-end: -12%;
	z-index: -1;
	width: min(48rem, 70vw);
	aspect-ratio: 3979 / 3178;
	background: var(--wp--preset--color--navy);
	opacity: 0.04;
	mask: url("../brand/hk-motif.svg") no-repeat center / contain;
}

[dir="rtl"] .hk-profile-section--reasons.hk-profile-section--home::before {
	transform: scaleX(-1);
}