/* ==========================================================================
   DX — home page
   1. Page layers   2. Section basics   3. 3D brand object   4. Section rail
   5. Intro         6. About            7. Services          8. Clients
   9. Contact

   A dark drawing board: hairlines run down the whole page, texts sit in the
   outer columns and the logo, in 3D, keeps the middle of the screen.
   Below 1024px the page becomes one column and the object stays in the intro.
   ========================================================================== */

/* 1. Page layers ---------------------------------------------------------
   Lines (0) → 3D object (1) → sections (2) → rail (3). */
.dx-home {
	position: relative;
	isolation: isolate;
}

/* Sections already leave room for the fixed header, so a menu link can bring
   a section right to the top of the screen. */
html:has(.dx-home) {
	scroll-padding-top: 0;
}

.dx-lines {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.dx-lines .dx-frame,
.dx-lines__in {
	height: 100%;
}

.dx-lines__in {
	position: relative;
}

.dx-lines__in i {
	position: absolute;
	inset-block: 0;
	width: 1px;
	background: var(--dx-border);
}

.dx-lines__in i:nth-child(1) {
	inset-inline-start: 0;
}

.dx-lines__in i:nth-child(2) {
	inset-inline-start: calc(100% / 6);
}

.dx-lines__in i:nth-child(3) {
	inset-inline-start: 50%;
}

.dx-lines__in i:nth-child(4) {
	inset-inline-start: calc(500% / 6);
}

.dx-lines__in i:nth-child(5) {
	inset-inline-start: 100%;
}

/* 2. Section basics ------------------------------------------------------ */
.dx-sec {
	position: relative;
	z-index: 2;
	border-top: 1px solid var(--dx-border);
}

.dx-hero {
	border-top: 0;
}

/* The numbered label that opens a section: (02) ABOUT. */
.dx-sec__label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-family: var(--dx-font-ui);
	font-size: var(--dx-fs-ui);
	font-weight: var(--dx-fw-ui);
	line-height: 1.5;
	letter-spacing: var(--dx-tracking-ui);
	text-transform: uppercase;
	color: var(--dx-muted);
}

.dx-sec__num {
	display: inline-grid;
	place-items: center;
	min-width: 36px;
	height: 22px;
	padding-inline: 8px;
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	color: var(--dx-heading);
	border: 1px solid var(--dx-border-strong);
	border-radius: var(--dx-radius-pill);
}

/* 3. 3D brand object -----------------------------------------------------
   The name from the logo, given thickness, letter by letter. Each letter is
   printed as a stack of copies of its part of the image, a few pixels apart
   (dx_brand_object() in inc/home.php); the copies behind the front one are
   darkened, so together they read as the sides of the metal when the stack
   turns. It works for any artwork — there is no 3D model to keep in step
   with the logo.

   --obj-w is the width of the name; one unit (--u) is a hundredth of it.

   What moves: the whole name follows the pointer and leans with the scroll
   (home.js); the letters stand up when the page opens, rock out of step, pass
   a glint along and somersault in a wave when the section changes.

   data-state on .dx-stage, set by home.js from the section in view:
     mark   large, in the intro
     small  reduced, where texts stand on both sides of it
     turn   reduced and opened up; a third of the letters steps forward and
            the name turns to a new side for each service (data-active)
     end    reduced, and moved to the far side of the screen
     off    hidden */
.dx-stage {
	--dx-dir: 1;
	--obj-w: min(44vw, 820px);
	position: fixed;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	padding-block: var(--dx-header-h) 5vh;
	pointer-events: none;
	transition: opacity 0.6s var(--dx-ease), transform 1.1s var(--dx-ease);
}

[dir="rtl"] .dx-stage {
	--dx-dir: -1;
}

.dx-stage[data-state="off"] {
	opacity: 0;
	transform: scale(0.86);
}

.dx-stage[data-state="end"] {
	transform: translateX(calc(var(--dx-dir) * 24vw));
}

.dx-obj {
	--u: calc(var(--obj-w, 400px) / 100);
	position: relative;
	width: var(--obj-w, 400px);
	aspect-ratio: var(--obj-ratio, 4.86);
	perspective: calc(var(--u) * 170);
	transition: transform 1.1s var(--dx-ease);
}

.dx-stage[data-state="small"] .dx-obj,
.dx-stage[data-state="turn"] .dx-obj,
.dx-stage[data-state="end"] .dx-obj {
	transform: scale(0.52);
}

/* A breath of turquoise light behind the metal. */
.dx-obj::before {
	content: "";
	position: absolute;
	inset: -90% -4%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--dx-primary) 14%, transparent), transparent 72%);
	filter: blur(26px);
}

.dx-obj__float,
.dx-obj__rig,
.dx-logo3d,
.dx-glyph__turn,
.dx-glyph__bob {
	position: absolute;
	inset: 0;
}

.dx-obj__float,
.dx-obj__rig,
.dx-logo3d,
.dx-glyph,
.dx-glyph__turn,
.dx-glyph__bob {
	transform-style: preserve-3d;
}

.dx-obj__float {
	animation: dx-hover 7s ease-in-out infinite;
}

/* --rx / --ry follow the pointer (home.js). */
.dx-obj__rig {
	transform: rotateX(var(--rx, -8deg)) rotateY(var(--ry, -22deg));
}

/* One letter of the name. The server finds the gaps between the letters in the
   image (dx_logo_segments()) and prints a box for each, so every letter is its
   own piece of metal. Three boxes inside each other keep three movements
   apart: where the letter stands (.dx-glyph, set by the pose), the turns it
   makes (__turn) and its slow rocking (__bob).
   --g is the letter's number, --gc the number of the middle one. */
.dx-glyph {
	--dim: 1;
	--gx: 0;
	--gy: 0;
	--gz: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	transform: translate3d(calc(var(--u) * var(--gx)), calc(var(--u) * var(--gy)), calc(var(--u) * var(--gz)));
	transition: transform 0.9s var(--dx-ease);
	transition-delay: calc(var(--g) * 0.04s);
}

/* The layers of a letter: --i runs from 0 at the back to --n - 1, the face.
   The further back, the darker — that is the shading of the sides. Each layer
   shows only this letter's part of the image (--bs, --bp). */
.dx-glyph i {
	position: absolute;
	inset: 0;
	background-image: var(--src);
	background-repeat: no-repeat;
	background-position: var(--bp, 0%) 0;
	background-size: var(--bs, 100%) 100%;
	filter: brightness(calc((0.28 + 0.3 * var(--i) / var(--n)) * var(--dim)));
	transform: translateZ(calc((var(--i) - (var(--n) - 1) / 2) * var(--u) * var(--gap, 0.4)));
	transition: filter 0.6s var(--dx-ease);
}

/* The face. A glint runs along the name every few seconds, letter after letter. */
.dx-glyph i:last-of-type {
	filter: brightness(var(--dim));
	animation: dx-glint 7s linear infinite;
	animation-delay: calc(var(--g) * 0.13s);
}

/* The letters rock out of step with each other, so the name ripples. */
.dx-glyph__bob {
	animation: dx-bob 5.6s ease-in-out infinite;
	animation-delay: calc(var(--g) * -0.5s);
}

/* When the page opens, the letters stand up one after the other
   (home.js adds .is-ready once they have). */
.dx-stage:not(.is-ready) .dx-glyph__turn {
	animation: dx-rise 0.9s var(--dx-ease) backwards;
	animation-delay: calc(0.15s + var(--g) * 0.08s);
}

/* Each time the section changes, a wave of somersaults runs through the name
   (home.js adds .is-flipping for its duration). */
.dx-stage.is-flipping .dx-glyph__turn {
	animation: dx-flip 1s var(--dx-ease) both;
	animation-delay: calc(var(--g) * 0.07s);
}

/* Services: the name opens up and dims, and a third of it steps forward, lit,
   for each service (data-part on the letters, data-active on the stage). */
.dx-stage[data-state="turn"] .dx-glyph {
	--dim: 0.36;
	--gx: calc((var(--g) - var(--gc)) * 1.3);
}

.dx-stage[data-state="turn"][data-active="0"] .dx-glyph[data-part="0"],
.dx-stage[data-state="turn"][data-active="1"] .dx-glyph[data-part="1"],
.dx-stage[data-state="turn"][data-active="2"] .dx-glyph[data-part="2"] {
	--dim: 1;
	--gy: -3;
	--gz: 12;
}

@keyframes dx-hover {
	0%,
	100% {
		transform: translateY(calc(var(--u) * -1));
	}

	50% {
		transform: translateY(calc(var(--u) * 1));
	}
}

@keyframes dx-bob {
	0%,
	100% {
		transform: translateY(calc(var(--u) * -0.8)) rotateX(6deg);
	}

	50% {
		transform: translateY(calc(var(--u) * 0.8)) rotateX(-6deg);
	}
}

@keyframes dx-rise {
	from {
		transform: translateY(calc(var(--u) * 7)) rotateX(-92deg) scale(0.5);
	}
}

@keyframes dx-flip {
	from {
		transform: rotateX(0deg);
	}

	to {
		transform: rotateX(360deg);
	}
}

@keyframes dx-glint {
	0%,
	7%,
	100% {
		filter: brightness(var(--dim));
	}

	3.5% {
		filter: brightness(calc(var(--dim) * 1.9));
	}
}

/* No pointer to follow on touch screens: the logo turns slowly by itself. */
@keyframes dx-sway {
	0%,
	100% {
		transform: rotateX(-8deg) rotateY(-24deg);
	}

	50% {
		transform: rotateX(-5deg) rotateY(20deg);
	}
}

@media (hover: none) {
	.dx-obj__rig {
		animation: dx-sway 11s ease-in-out infinite;
	}
}

/* 4. Section rail -------------------------------------------------------- */
.dx-rail {
	position: fixed;
	inset-inline-end: clamp(6px, 1vw, 16px);
	top: 50%;
	z-index: 3;
	transform: translateY(-50%);
}

.dx-rail ol {
	display: grid;
	justify-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dx-rail a {
	display: grid;
	justify-items: center;
	gap: 8px;
	min-width: 20px;
	padding-block: 5px;
	color: var(--dx-faint);
	transition: color var(--dx-dur-2);
}

.dx-rail__dot {
	width: 3px;
	height: 3px;
	background: currentColor;
	border-radius: 50%;
	transition: transform var(--dx-dur-2) var(--dx-ease), background-color var(--dx-dur-2);
}

.dx-rail__label {
	max-height: 0;
	overflow: hidden;
	font-family: var(--dx-font-ui);
	font-size: 0.66rem;
	font-weight: var(--dx-fw-ui);
	line-height: 1.2;
	letter-spacing: var(--dx-tracking-ui);
	text-transform: uppercase;
	white-space: nowrap;
	writing-mode: vertical-rl;
	opacity: 0;
	transition: max-height 0.5s var(--dx-ease), opacity 0.4s;
}

:lang(ar) .dx-rail__label {
	font-size: 0.8rem;
}

.dx-rail a:hover,
.dx-rail a.is-active {
	color: var(--dx-heading);
}

.dx-rail a.is-active .dx-rail__dot {
	background: var(--dx-primary);
	transform: scale(1.8);
}

.dx-rail a.is-active .dx-rail__label {
	max-height: 12em;
	opacity: 1;
}

/* 5. Intro --------------------------------------------------------------- */
.dx-hero {
	display: flex;
	min-height: 100svh;
	padding-top: var(--dx-header-h);
}

.dx-hero__in {
	display: grid;
	flex: 1;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: auto 1fr auto;
	padding-block: clamp(30px, 7vh, 84px) clamp(22px, 4.5vh, 46px);
}

/* The framed box where the lines are typed. It starts on the page's second line. */
.dx-hero__prompt {
	grid-area: 1 / 3 / 2 / 6;
	padding-top: 34px;
}

.dx-prompt {
	padding: 16px 18px;
	background: color-mix(in srgb, var(--dx-bg) 82%, transparent);
	border: 1px solid var(--dx-border-strong);
}

/* The tab on top of the box carries the dash of the logo. */
.dx-prompt__tab {
	position: absolute;
	inset-block-end: 100%;
	inset-inline-start: -1px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 30px;
	background: var(--dx-bg);
	border: 1px solid var(--dx-border-strong);
	border-bottom: 0;
}

.dx-prompt__tab::before {
	content: "";
	width: 14px;
	height: 5px;
	background: var(--dx-primary);
}

.dx-prompt__line,
.dx-prompt__next {
	margin: 0;
	font-family: var(--dx-font-ui);
	font-size: var(--dx-fs-ui);
	font-weight: var(--dx-fw-ui);
	line-height: 1.6;
	letter-spacing: var(--dx-tracking-ui);
	text-transform: uppercase;
}

/* Two lines are reserved, so the box does not jump while a line is typed. */
.dx-prompt__line {
	min-height: 3.2em;
	color: var(--dx-heading);
	transition: opacity var(--dx-dur-2);
}

.dx-prompt.is-swapping .dx-prompt__line {
	opacity: 0;
}

.dx-prompt .dx-caret {
	width: 0.5em;
	height: 1em;
	margin-inline-start: 4px;
	background: var(--dx-primary);
}

/* The line that comes next waits below the box, faded. */
.dx-prompt__next {
	margin-top: 16px;
	padding-inline: 19px;
	color: var(--dx-faint);
	opacity: 0.55;
}

.dx-hero__tags {
	grid-area: 1 / 8 / 2 / 11;
	align-self: start;
	margin-top: clamp(20px, 5vh, 64px);
}

.dx-hero__tags li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 9px;
	border-bottom: 1px solid var(--dx-border);
}

.dx-hero__tags li::before {
	content: "";
	width: 3px;
	height: 3px;
	background: var(--dx-faint);
	border-radius: 50%;
}

.dx-hero__main {
	grid-area: 3 / 1 / 4 / 7;
	align-self: end;
	padding-inline: var(--dx-cell);
}

/* Kept narrow: on short screens a long line would run under the logo. */
.dx-hero__eyebrow {
	max-width: 28ch;
	margin-bottom: 16px;
	color: var(--dx-text);
}

/* Sized by the smaller of the screen's width and height, so three framed lines
   always fit in the corner without reaching the object. */
.dx-hero__title {
	font-size: clamp(2.3rem, min(1rem + 3.6vw, 9vh), 5.2rem);
	line-height: 1.1;
	text-wrap: initial;
}

:lang(ar) .dx-hero__title {
	font-size: clamp(2rem, min(1rem + 2.8vw, 7.4vh), 4.2rem);
	line-height: 1.42;
}

.dx-hero__text {
	grid-area: 3 / 7 / 4 / 11;
	align-self: end;
	max-width: 46ch;
	padding-inline: var(--dx-cell);
	font-size: var(--dx-fs-md);
	text-wrap: pretty;
}

.dx-scroll {
	display: inline-flex;
	grid-area: 3 / 11 / 4 / 13;
	align-items: center;
	align-self: end;
	justify-self: end;
	gap: 16px;
	margin: 0 7px 7px;
}

.dx-scroll .dx-micro {
	transition: color var(--dx-dur-1);
}

.dx-scroll__box {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--dx-heading);
}

.dx-scroll__box .dx-ic {
	width: 24px;
	height: 24px;
	stroke-width: 1.4;
	animation: dx-nudge 2.2s var(--dx-ease) infinite;
}

.dx-scroll:hover .dx-micro {
	color: var(--dx-heading);
}

@keyframes dx-nudge {
	0%,
	100% {
		transform: translateY(-3px);
	}

	50% {
		transform: translateY(4px);
	}
}

/* 6. About --------------------------------------------------------------- */
.dx-about {
	display: flex;
	align-items: center;
	min-height: 100svh;
}

.dx-about__in {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	row-gap: clamp(26px, 5vh, 52px);
	padding-block: var(--dx-section-y);
}

.dx-about .dx-sec__label {
	grid-column: 1 / -1;
	padding-inline: var(--dx-cell);
}

.dx-about__body {
	display: grid;
	grid-column: 1 / span 4;
	gap: clamp(22px, 4vh, 38px);
	padding-inline: var(--dx-cell);
}

.dx-about__stat {
	display: grid;
	grid-column: 9 / span 4;
	gap: 6px;
	align-self: end;
	justify-items: end;
	padding-inline: var(--dx-cell);
}

.dx-about .dx-statement {
	font-size: clamp(1.25rem, 0.9rem + 1vw, 1.85rem);
}

/* The figure, in brushed silver like the logo. */
.dx-about__num {
	font-size: clamp(4.4rem, 1.2rem + 8.4vw, 10rem);
	line-height: 0.9;
	color: var(--dx-secondary);
	background: linear-gradient(110deg, #f4f5f7 0%, #b4bac3 38%, #f9fafb 52%, #8f96a0 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* 7. Services ------------------------------------------------------------
   Without JavaScript, on small screens and with reduced motion: a plain list.
   With .is-pinned (home.js, large screens): the section is taller than the
   screen, its content sticks, and scrolling moves from one service to the next. */
.dx-services__in {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	row-gap: clamp(30px, 5vw, 52px);
	padding-block: var(--dx-section-y);
}

.dx-services__tabs,
.dx-services__count {
	display: none;
}

.dx-services__head {
	display: grid;
	grid-column: 1 / -1;
	gap: 18px;
	padding-inline: var(--dx-cell);
}

.dx-services__title,
.dx-clients__title {
	font-size: clamp(1.9rem, 1rem + 2.9vw, 3.8rem);
	text-wrap: initial;
}

:lang(ar) .dx-services__title,
:lang(ar) .dx-clients__title {
	font-size: clamp(1.7rem, 1rem + 2.2vw, 3rem);
}

.dx-services__list {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dx-service {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 20px;
	padding: 26px var(--dx-cell);
	border-top: 1px solid var(--dx-border);
}

.dx-service__num {
	grid-row: 1 / span 2;
	font-size: 0.95rem;
	line-height: 2;
	color: var(--dx-primary-ink);
}

.dx-service__title {
	font-size: var(--dx-fs-xl);
}

.dx-service__text {
	grid-column: 2;
	max-width: 62ch;
	margin-top: 10px;
	color: var(--dx-muted);
	text-wrap: pretty;
}

/* Pinned. */
.dx-services.is-pinned {
	height: calc(100svh + var(--dx-steps, 3) * 72vh);
}

.dx-services.is-pinned .dx-services__pin {
	position: sticky;
	top: 0;
	display: flex;
	height: 100svh;
	padding-top: var(--dx-header-h);
}

/* Signed-in administrators: the WordPress admin bar takes the top of the screen. */
body.admin-bar .dx-services.is-pinned .dx-services__pin {
	top: 32px;
	height: calc(100svh - 32px);
}

.dx-services.is-pinned .dx-services__in {
	flex: 1;
	grid-template-rows: auto 1fr auto;
	row-gap: 0;
	padding-block: 0 clamp(22px, 4.5vh, 46px);
}

/* The strip of numbered buttons: one per service, the current one lit and marked. */
.dx-services.is-pinned .dx-services__tabs {
	display: grid;
	grid-area: 1 / 1 / 2 / -1;
	grid-template-columns: repeat(var(--dx-steps, 3), minmax(0, 1fr));
	margin-top: clamp(22px, 5vh, 54px);
}

.dx-stab {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	height: 60px;
	padding: 0;
	color: var(--dx-faint);
	background: color-mix(in srgb, var(--dx-bg) 70%, transparent);
	border: 1px solid var(--dx-border);
	transition: color var(--dx-dur-2), border-color var(--dx-dur-2);
}

.dx-stab + .dx-stab {
	border-inline-start: 0;
}

.dx-stab__num,
.dx-stab__name {
	display: grid;
	place-items: center;
}

.dx-stab__num {
	font-size: 0.86rem;
	letter-spacing: 0.06em;
	border-inline-end: 1px solid var(--dx-border);
	transition: border-color var(--dx-dur-2);
}

.dx-stab__name {
	padding-inline: 12px;
	overflow: hidden;
	font-family: var(--dx-font-ui);
	font-size: var(--dx-fs-ui);
	font-weight: var(--dx-fw-ui);
	letter-spacing: var(--dx-tracking-ui);
	text-transform: uppercase;
	white-space: nowrap;
}

.dx-stab:hover {
	color: var(--dx-text);
}

.dx-stab.is-active {
	position: relative;
	z-index: 1;
	color: var(--dx-heading);
	border-color: color-mix(in srgb, var(--dx-heading) 70%, transparent);
	box-shadow: -1px 0 0 color-mix(in srgb, var(--dx-heading) 70%, transparent), 1px 0 0 color-mix(in srgb, var(--dx-heading) 70%, transparent);
}

.dx-stab.is-active .dx-stab__num {
	color: var(--dx-primary-ink);
	border-color: color-mix(in srgb, var(--dx-heading) 70%, transparent);
}

/* Corner marks around the current button, as on the framed box of the intro. */
.dx-stab.is-active::before {
	--_c: color-mix(in srgb, var(--dx-heading) 60%, transparent);
	content: "";
	position: absolute;
	inset: -8px;
	background:
		linear-gradient(var(--_c), var(--_c)) 0 0 / 9px 1px,
		linear-gradient(var(--_c), var(--_c)) 0 0 / 1px 9px,
		linear-gradient(var(--_c), var(--_c)) 100% 0 / 9px 1px,
		linear-gradient(var(--_c), var(--_c)) 100% 0 / 1px 9px,
		linear-gradient(var(--_c), var(--_c)) 0 100% / 9px 1px,
		linear-gradient(var(--_c), var(--_c)) 0 100% / 1px 9px,
		linear-gradient(var(--_c), var(--_c)) 100% 100% / 9px 1px,
		linear-gradient(var(--_c), var(--_c)) 100% 100% / 1px 9px;
	background-repeat: no-repeat;
	pointer-events: none;
}

.dx-services.is-pinned .dx-services__head {
	grid-area: 3 / 1 / 4 / 7;
	align-self: end;
}

/* The services lie on top of each other; only the current one shows. */
.dx-services.is-pinned .dx-services__list {
	display: grid;
	grid-area: 2 / 9 / 3 / 13;
	align-self: center;
}

.dx-services.is-pinned .dx-service {
	display: block;
	grid-area: 1 / 1;
	padding-block: 0;
	border-top: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: opacity 0.5s var(--dx-ease), transform 0.6s var(--dx-ease), visibility 0.5s;
}

.dx-services.is-pinned .dx-service.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.dx-services.is-pinned .dx-service__num {
	display: block;
	margin-bottom: 14px;
	font-size: clamp(3rem, 1rem + 4vw, 5.4rem);
	line-height: 1;
	color: var(--dx-secondary);
	background: linear-gradient(110deg, #f4f5f7 0%, #b4bac3 38%, #f9fafb 52%, #8f96a0 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.dx-services.is-pinned .dx-service__text {
	margin-top: 14px;
}

.dx-services.is-pinned .dx-services__count {
	display: block;
	grid-area: 3 / 11 / 4 / 13;
	align-self: end;
	justify-self: end;
	margin: 0 7px 7px;
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	color: var(--dx-faint);
}

.dx-services__count b {
	font-weight: 400;
	color: var(--dx-heading);
}

/* 8. Clients -------------------------------------------------------------
   The logos are round badges. Printed as a list and laid out as a grid of
   numbered cells. With .is-live (home.js, large screens) the same list becomes
   two rings of badges circling a small copy of the 3D logo: home.js moves each
   badge along its ellipse and sets its size, opacity and stacking from how
   near it is, so the far side of a ring passes behind the logo. */
.dx-clients__in {
	padding-block: var(--dx-section-y);
}

.dx-clients__head {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	row-gap: 20px;
	padding-inline: var(--dx-cell);
}

.dx-clients__head .dx-sec__label {
	grid-column: 1 / -1;
}

.dx-clients__title {
	grid-column: 1 / span 8;
}

.dx-clients__text {
	grid-column: 10 / span 3;
	align-self: end;
	color: var(--dx-muted);
	text-wrap: pretty;
}

.dx-orbit {
	position: relative;
	margin-top: clamp(36px, 6vw, 76px);
	isolation: isolate;
}

.dx-orbit__space,
.dx-orbit__hud {
	display: none;
}

.dx-orbit__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--dx-border);
	border-inline-start: 1px solid var(--dx-border);
}

.dx-client {
	position: relative;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 16px;
	padding: clamp(26px, 3vw, 40px) 12px clamp(14px, 1.8vw, 22px);
	border-bottom: 1px solid var(--dx-border);
	border-inline-end: 1px solid var(--dx-border);
	transition: background-color var(--dx-dur-2);
}

.dx-client__num {
	position: absolute;
	inset-block-start: 9px;
	inset-inline-start: 12px;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	color: var(--dx-faint);
	transition: color var(--dx-dur-2);
}

.dx-client__disc {
	position: relative;
	display: block;
	width: min(100%, 132px);
	aspect-ratio: 1;
	border-radius: 50%;
}

/* A hairline ring around the badge… */
.dx-client__disc::before,
.dx-client__disc::after {
	content: "";
	position: absolute;
	inset: -7px;
	border-radius: 50%;
}

.dx-client__disc::before {
	border: 1px solid var(--dx-border-strong);
}

/* …and a turquoise arc that runs round it while the badge is in focus. */
.dx-client__disc::after {
	background: conic-gradient(var(--dx-primary) 0 20%, transparent 20% 50%, var(--dx-primary) 50% 56%, transparent 56%);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
	opacity: 0;
	transition: opacity var(--dx-dur-2);
}

.dx-client__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 50%;
	filter: grayscale(1) brightness(0.9);
	transition: filter 0.5s var(--dx-ease), transform 0.5s var(--dx-ease);
}

.dx-client__name {
	font-family: var(--dx-font-ui);
	font-size: 0.74rem;
	font-weight: var(--dx-fw-ui);
	line-height: 1.4;
	letter-spacing: var(--dx-tracking-ui);
	text-align: center;
	text-transform: uppercase;
	color: var(--dx-muted);
	transition: color var(--dx-dur-2);
}

.dx-client:hover {
	background-color: color-mix(in srgb, var(--dx-primary) 5%, transparent);
}

.dx-client:hover .dx-client__num {
	color: var(--dx-primary-ink);
}

.dx-client:hover .dx-client__name {
	color: var(--dx-heading);
}

.dx-client:hover .dx-client__img {
	filter: none;
	transform: scale(1.04);
}

.dx-client:hover .dx-client__disc::after,
.dx-client.is-front .dx-client__disc::after {
	opacity: 1;
	animation: dx-spin 2.6s linear infinite;
}

/* Touch screens have no hover, so the badges keep their colours. */
@media (hover: none) {
	.dx-client__img {
		filter: none;
	}
}

/* In orbit. --rx1/--ry1 and --rx2/--ry2 (the two ellipses), --size (a badge)
   and --core (the logo in the middle) are measured by home.js. */
.dx-orbit.is-live {
	height: var(--orbit-h, 560px);
	max-width: 1240px;
	margin-inline: auto;
}

.dx-orbit.is-live .dx-orbit__space,
.dx-orbit.is-live .dx-orbit__list {
	position: absolute;
	inset: 0 0 64px;
	display: block;
}

.dx-orbit.is-live .dx-orbit__space {
	pointer-events: none;
}

.dx-orbit.is-live .dx-orbit__list {
	border: 0;
}

.dx-orbit__ring,
.dx-orbit__sweep,
.dx-orbit__core {
	position: absolute;
	top: 50%;
	left: 50%;
}

.dx-orbit__ring {
	border: 1px solid var(--dx-border-strong);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.dx-orbit__ring--1 {
	width: calc(var(--rx1) * 2);
	height: calc(var(--ry1) * 2);
}

.dx-orbit__ring--2 {
	width: calc(var(--rx2) * 2);
	height: calc(var(--ry2) * 2);
}

/* A wider, dashed ring: the edge of the system. */
.dx-orbit__ring--3 {
	width: calc(var(--rx2) * 2.2);
	height: calc(var(--ry2) * 2.2);
	border-color: var(--dx-border);
	border-style: dashed;
}

/* A radar sweep on the plane of the rings: a turning cone of light on a disc
   squashed to the same tilt as the ellipses. */
.dx-orbit__sweep {
	width: calc(var(--rx2) * 2);
	height: calc(var(--rx2) * 2);
	overflow: hidden;
	border-radius: 50%;
	transform: translate(-50%, -50%) scaleY(var(--tilt, 0.4));
}

.dx-orbit__sweep::before {
	content: "";
	position: absolute;
	inset: 0;
	background: conic-gradient(transparent 0 76%, color-mix(in srgb, var(--dx-primary) 22%, transparent) 100%);
	animation: dx-spin 9s linear infinite;
}

/* The logo in the middle sits between the far and the near half of the rings. */
.dx-orbit__core {
	z-index: 50;
	width: var(--core, 280px);
	transform: translate(-50%, -58%);
}

.dx-orbit__core .dx-obj {
	--obj-w: var(--core, 280px);
}

.dx-orbit__core .dx-obj__rig {
	animation: dx-sway 12s ease-in-out infinite;
}

.dx-orbit.is-live .dx-client {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: var(--size, 96px);
	padding: 0;
	background: none;
	border: 0;
	will-change: transform, opacity;
}

.dx-orbit.is-live .dx-client__num {
	display: none;
}

.dx-orbit.is-live .dx-client__disc {
	width: 100%;
	background: var(--dx-bg);
	box-shadow: 0 14px 34px -12px rgb(0 0 0 / 0.9);
}

.dx-orbit.is-live .dx-client.is-near .dx-client__img {
	filter: none;
}

/* The name of a badge under the pointer. */
.dx-orbit.is-live .dx-client__name {
	position: absolute;
	top: calc(100% + 16px);
	left: 50%;
	padding: 3px 9px;
	white-space: nowrap;
	color: var(--dx-heading);
	background: var(--dx-bg);
	border: 1px solid var(--dx-border-strong);
	opacity: 0;
	transform: translateX(-50%);
	transition: opacity var(--dx-dur-2);
	pointer-events: none;
}

.dx-orbit.is-live .dx-client:hover .dx-client__name {
	opacity: 1;
}

/* The read-out under the rings: which client is passing in front. */
.dx-orbit.is-live .dx-orbit__hud {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	height: 40px;
	margin: 0;
}

.dx-orbit__hud-num {
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	color: var(--dx-faint);
}

.dx-orbit__hud-num b {
	font-weight: 400;
	color: var(--dx-primary-ink);
}

.dx-orbit__hud-name {
	min-width: 16ch;
	padding: 7px 16px;
	font-family: var(--dx-font-ui);
	font-size: var(--dx-fs-ui);
	font-weight: var(--dx-fw-ui);
	line-height: 1.4;
	letter-spacing: var(--dx-tracking-ui);
	text-align: center;
	text-transform: uppercase;
	color: var(--dx-heading);
	border: 1px solid var(--dx-border-strong);
	transition: opacity var(--dx-dur-1);
}

.dx-orbit__hud-name.is-changing {
	opacity: 0;
}

/* 9. Contact ------------------------------------------------------------- */
.dx-contact {
	display: flex;
	align-items: center;
	min-height: 86svh;
}

.dx-contact__in {
	display: grid;
	gap: clamp(20px, 3.4vh, 32px);
	justify-items: start;
	padding-block: var(--dx-section-y);
}

.dx-contact__in > * {
	margin-inline: var(--dx-cell);
}

.dx-contact__title {
	max-width: 62%;
	font-size: clamp(2.3rem, 1rem + 4.6vw, 5.6rem);
	line-height: 1.12;
	text-wrap: initial;
}

:lang(ar) .dx-contact__title {
	font-size: clamp(2.1rem, 1rem + 3.6vw, 4.6rem);
	line-height: 1.45;
}

.dx-contact__text {
	max-width: 52ch;
	font-size: var(--dx-fs-md);
	color: var(--dx-muted);
}

.dx-contact__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

/* ---------------------------------------------------------------- Tablet
   The middle of the screen is still kept for the object, with less room. */
@media (max-width: 1279px) {
	.dx-hero__prompt {
		grid-column: 2 / 6;
	}

	.dx-hero__tags {
		grid-column: 9 / 13;
	}

	.dx-clients__title {
		grid-column: 1 / span 7;
	}

	.dx-clients__text {
		grid-column: 9 / span 4;
	}
}

/* ----------------------------------------------------------------- Phone
   One column. The object stays in the intro and scrolls away with it. */
@media (max-width: 1023px) {
	.dx-lines__in i:nth-child(2),
	.dx-lines__in i:nth-child(4),
	.dx-rail {
		display: none;
	}

	.dx-stage {
		--obj-w: min(86vw, 460px);
		position: absolute;
		inset: var(--dx-header-h) 0 auto;
		height: 22svh;
		padding-block: 0;
	}

	.dx-stage[data-state],
	.dx-stage[data-state] .dx-obj {
		opacity: 1;
		transform: none;
	}

	/* Half the layers, twice as far apart: the same thickness for half the work. */
	.dx-logo3d {
		--gap: 0.8;
	}

	.dx-glyph i:nth-of-type(odd) {
		display: none;
	}

	.dx-hero {
		min-height: 0;
	}

	.dx-hero__in {
		display: flex;
		flex-direction: column;
		gap: 26px;
		padding-block: calc(22svh + 4px) 48px;
	}

	.dx-hero__main,
	.dx-hero__text {
		padding-inline: 0;
	}

	.dx-hero__main {
		order: 1;
	}

	/* The longest framed line must fit the narrowest phones. */
	.dx-hero__title {
		font-size: clamp(2rem, 9.4vw, 3.4rem);
	}

	:lang(ar) .dx-hero__title {
		font-size: clamp(1.7rem, 8.2vw, 2.6rem);
	}

	.dx-hero__text {
		order: 2;
	}

	.dx-hero__prompt {
		order: 3;
		margin-top: 8px;
	}

	.dx-hero__tags {
		order: 4;
		align-self: stretch;
		margin-top: 0;
	}

	.dx-scroll {
		display: none;
	}

	.dx-about,
	.dx-contact {
		min-height: 0;
	}

	.dx-about__body,
	.dx-about__stat,
	.dx-clients__title,
	.dx-clients__text {
		grid-column: 1 / -1;
	}

	.dx-about .dx-sec__label,
	.dx-about__body,
	.dx-about__stat,
	.dx-services__head,
	.dx-clients__head {
		padding-inline: 0;
	}

	.dx-about__stat {
		justify-items: start;
	}

	.dx-service {
		padding-inline: 0;
	}

	.dx-contact__in > * {
		margin-inline: 0;
	}

	.dx-contact__title {
		max-width: none;
	}
}

@media (max-width: 720px) {
	.dx-orbit__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.dx-client__disc {
		width: min(100%, 104px);
	}

	.dx-contact__actions,
	.dx-contact__actions .dx-btn {
		width: 100%;
	}
}

/* ------------------------------------------------------ Reduced motion
   The object keeps its pose and does not float; nothing is typed or pinned
   (home.js checks the same preference). */
@media (prefers-reduced-motion: reduce) {
	.dx-obj__float,
	.dx-obj__rig,
	.dx-orbit__core .dx-obj__rig,
	.dx-glyph__bob,
	.dx-glyph i:last-of-type,
	.dx-stage .dx-glyph__turn,
	.dx-scroll__box .dx-ic {
		animation: none;
	}
}