.dsdc {
	--dsdc-navy: #10232d;
	--dsdc-navy-deep: #091820;
	--dsdc-cream: #f7f0e8;
	--dsdc-cream-bright: #fffaf5;
	--dsdc-ink: #10232d;
	--dsdc-muted: #586a73;
	--dsdc-orange: #d65518;
	--dsdc-orange-soft: #f2a26f;
	--dsdc-teal: #1aa89e;
	--dsdc-radius: 270px;
	--dsdc-turn: 0deg;
	--dsdc-turn-neg: 0deg;
	position: relative;
	width: 100%;
	overflow: hidden;
	isolation: isolate;
	color: var(--dsdc-ink);
	background: var(--dsdc-cream);
	font-family: Arial, Helvetica, sans-serif;
}

.dsdc,
.dsdc * {
	box-sizing: border-box;
}

.dsdc__header {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
	gap: clamp(30px, 5vw, 76px);
	align-items: end;
	max-width: 1480px;
	margin: 0 auto;
	padding: clamp(54px, 7vw, 100px) clamp(22px, 4vw, 58px) clamp(36px, 5vw, 62px);
}

.dsdc__eyebrow {
	margin: 0 0 20px;
	color: var(--dsdc-orange);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.dsdc__heading {
	margin: 0;
	max-width: 690px;
	color: var(--dsdc-ink);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(42px, 5.2vw, 76px);
	font-weight: 400;
	line-height: .98;
	letter-spacing: -.045em;
}

.dsdc__heading em {
	color: var(--dsdc-orange);
	font-weight: 400;
}

.dsdc__description {
	margin: 0 0 4px;
	max-width: 610px;
	color: var(--dsdc-muted);
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 1.7;
}

.dsdc__stage {
	position: relative;
	min-height: 650px;
	overflow: hidden;
	padding: 38px clamp(22px, 4vw, 58px) 44px;
	background:
		radial-gradient(circle at 18% 42%, rgba(58, 107, 107, .12), transparent 39%),
		radial-gradient(circle at 82% 35%, rgba(214, 85, 24, .25), transparent 40%),
		radial-gradient(circle at 50% 52%, rgba(255, 250, 245, .035), transparent 34%),
		linear-gradient(145deg, var(--dsdc-navy), var(--dsdc-navy-deep));
}

.dsdc__stage::before {
	content: "";
	position: absolute;
	left: -8%;
	top: 4%;
	width: 52%;
	height: 78%;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle, rgba(74, 122, 120, .08), rgba(74, 122, 120, .025) 46%, transparent 72%);
	filter: blur(34px);
}

.dsdc__stage::after {
	content: "";
	position: absolute;
	right: -10%;
	top: 8%;
	width: 56%;
	height: 72%;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle, rgba(214, 85, 24, .13), rgba(214, 85, 24, .04) 48%, transparent 73%);
	filter: blur(38px);
}

.dsdc__neon-orbit {
	position: absolute;
	left: 50%;
	top: 42%;
	width: min(58vw, 760px);
	height: min(26vw, 310px);
	border-radius: 50%;
	pointer-events: none;
	transform: translate(-50%, -50%);
	background: radial-gradient(ellipse, rgba(255, 250, 245, .055), rgba(242, 162, 111, .065) 40%, rgba(214, 85, 24, .065) 60%, transparent 78%);
	filter: blur(30px);
}

.dsdc__viewport {
	position: relative;
	z-index: 2;
	height: 440px;
	max-width: 1280px;
	margin: 0 auto;
	perspective: 1120px;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	cursor: grab;
}

.dsdc[data-dragging="true"] .dsdc__viewport {
	cursor: grabbing;
}

.dsdc__ring {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1px;
	height: 1px;
	transform: none;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	will-change: transform;
}

.dsdc__card {
	--dsdc-card-angle: 0deg;
	--dsdc-card-angle-neg: 0deg;
	position: absolute;
	left: 0;
	top: 0;
	width: clamp(190px, 22vw, 260px);
	aspect-ratio: 4 / 5;
	margin: calc(clamp(190px, 22vw, 260px) * -.625) 0 0 calc(clamp(190px, 22vw, 260px) * -.5);
	padding: 5px;
	overflow: hidden;
	border: 1px solid rgba(255, 250, 245, .7);
	border-radius: 22px;
	background: linear-gradient(145deg, rgba(255, 250, 245, .92), rgba(242, 162, 111, .82) 48%, rgba(214, 85, 24, .94));
	box-shadow:
		0 24px 60px rgba(0, 0, 0, .34),
		0 0 14px rgba(255, 250, 245, .18),
		0 0 24px rgba(242, 162, 111, .24),
		0 0 38px rgba(214, 85, 24, .14);
	transform: rotateY(var(--dsdc-card-angle)) translateZ(var(--dsdc-radius)) rotateY(calc(var(--dsdc-card-angle-neg) + var(--dsdc-turn-neg)));
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	backface-visibility: visible;
	-webkit-backface-visibility: visible;
	transition: border-color .35s ease, box-shadow .35s ease;
	will-change: transform, opacity;
	isolation: isolate;
}

.dsdc__card::before {
	content: "";
	position: absolute;
	inset: -72%;
	z-index: 0;
	pointer-events: none;
	background: conic-gradient(
		from 0deg,
		transparent 0deg 185deg,
		rgba(255, 250, 245, .16) 210deg,
		rgba(255, 250, 245, .98) 238deg,
		rgba(242, 162, 111, 1) 260deg,
		rgba(214, 85, 24, 1) 284deg,
		transparent 322deg 360deg
	);
	transform-origin: center;
	animation: dsdc-frame-orbit 5.4s linear infinite;
	animation-play-state: paused;
	will-change: transform;
}

.dsdc[data-in-view="true"] .dsdc__card::before {
	animation-play-state: running;
}

.dsdc__card[data-active="true"]::before {
	animation-duration: 4.2s;
}

@keyframes dsdc-frame-orbit {
	to { transform: rotate(360deg); }
}

.dsdc__card::after {
	content: "";
	position: absolute;
	inset: 5px;
	z-index: 2;
	border-radius: 15px;
	pointer-events: none;
	border: 1px solid rgba(255, 250, 245, .2);
	box-shadow:
		inset 0 0 14px rgba(255, 250, 245, .14),
		inset 0 0 20px rgba(214, 85, 24, .1);
}

.dsdc__card[data-active="true"] {
	border-color: rgba(255, 250, 245, .92);
	background: linear-gradient(145deg, rgba(255, 250, 245, 1), rgba(242, 162, 111, .96) 44%, rgba(214, 85, 24, 1));
	box-shadow:
		0 26px 70px rgba(0, 0, 0, .44),
		0 0 0 1px rgba(255, 250, 245, .48),
		0 0 18px rgba(255, 250, 245, .34),
		0 0 34px rgba(242, 162, 111, .48),
		0 0 64px rgba(214, 85, 24, .28);
}

.dsdc__photo-wrap {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 15px;
	background: var(--dsdc-navy-deep);
}

.dsdc .dsdc__photo {
	position: absolute;
	inset: 0;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	object-fit: cover !important;
	object-position: center top !important;
	image-rendering: auto !important;
	filter: none !important;
	opacity: 1 !important;
	transform: none !important;
	pointer-events: none;
	-webkit-user-drag: none;
}

.dsdc__photo-placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: rgba(255, 250, 245, .84);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 82px;
	background:
		radial-gradient(circle at 50% 36%, rgba(255, 250, 245, .2), transparent 23%),
		linear-gradient(145deg, #708783, #1e3c43);
}

.dsdc__details {
	position: relative;
	z-index: 4;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 210px;
	gap: clamp(26px, 5vw, 70px);
	align-items: start;
	max-width: 1180px;
	margin: 0 auto;
	color: var(--dsdc-cream-bright);
}

.dsdc__copy {
	min-width: 0;
}

.dsdc__counter {
	margin: 0 0 9px;
	color: var(--dsdc-orange-soft);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .16em;
}

.dsdc__name {
	display: block;
	min-height: 1em;
	margin: 0;
	color: var(--dsdc-cream-bright);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(38px, 5vw, 68px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.04em;
}

.dsdc__name.is-typing::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: .82em;
	margin-left: 5px;
	vertical-align: -.06em;
	background: var(--dsdc-orange-soft);
	box-shadow: 0 0 10px rgba(242, 162, 111, .62);
	animation: dsdc-caret-blink .72s steps(1, end) infinite;
}

@keyframes dsdc-caret-blink {
	0%, 46% { opacity: 1; }
	47%, 100% { opacity: 0; }
}

.dsdc__role {
	margin: 6px 0 0;
	color: #efd8c6;
	font-size: 15px;
	line-height: 1.5;
}

.dsdc__action-column {
	display: grid;
	grid-template-rows: 48px 48px;
	gap: 12px;
	width: 210px;
	min-width: 210px;
}

.dsdc__nav {
	display: grid;
	grid-template-columns: repeat(3, 48px);
	gap: 8px;
	justify-content: end;
	height: 48px;
}

.dsdc .dsdc__control {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 250, 245, .34) !important;
	border-radius: 50%;
	color: var(--dsdc-cream-bright) !important;
	background: rgba(255, 250, 245, .06) !important;
	box-shadow: none !important;
	outline: none !important;
	font: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.dsdc .dsdc__control:hover,
.dsdc .dsdc__control:active {
	border-color: var(--dsdc-orange) !important;
	color: var(--dsdc-cream-bright) !important;
	background: var(--dsdc-orange) !important;
	box-shadow: 0 0 18px rgba(214, 85, 24, .34) !important;
}

.dsdc .dsdc__control:focus,
.dsdc .dsdc__control:focus-visible {
	border-color: var(--dsdc-orange-soft) !important;
	color: var(--dsdc-cream-bright) !important;
	background: rgba(214, 85, 24, .22) !important;
	outline: none !important;
	box-shadow:
		0 0 0 2px var(--dsdc-navy-deep),
		0 0 0 4px var(--dsdc-orange-soft),
		0 0 22px rgba(214, 85, 24, .3) !important;
}

.dsdc__profile-slot {
	display: flex;
	justify-content: flex-end;
	width: 210px;
	height: 48px;
}

.dsdc a.dsdc__profile-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid var(--dsdc-orange) !important;
	border-radius: 999px;
	color: #fff !important;
	background: var(--dsdc-orange) !important;
	box-shadow: 0 0 24px rgba(214, 85, 24, .22) !important;
	outline: none !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, visibility 0s;
}

.dsdc a.dsdc__profile-button:hover,
.dsdc a.dsdc__profile-button:active {
	border-color: var(--dsdc-orange-soft) !important;
	color: var(--dsdc-navy-deep) !important;
	background: var(--dsdc-cream-bright) !important;
	box-shadow: 0 0 30px rgba(242, 162, 111, .34) !important;
}

.dsdc a.dsdc__profile-button:focus,
.dsdc a.dsdc__profile-button:focus-visible {
	border-color: var(--dsdc-orange-soft) !important;
	color: #fff !important;
	background: var(--dsdc-orange) !important;
	outline: none !important;
	box-shadow:
		0 0 0 2px var(--dsdc-navy-deep),
		0 0 0 4px var(--dsdc-orange-soft),
		0 0 28px rgba(214, 85, 24, .3) !important;
}

.dsdc__profile-button.is-hidden {
	visibility: hidden;
	pointer-events: none;
}

.dsdc[data-single="true"] .dsdc__nav {
	visibility: hidden;
}

.dsdc__sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.dsdc-empty {
	padding: 18px;
	border: 1px dashed #d65518;
	color: #10232d;
	background: #f7f0e8;
	font: 14px/1.5 Arial, Helvetica, sans-serif;
}

@media (max-width: 767px) {
	.dsdc__header {
		grid-template-columns: 1fr;
		gap: 22px;
		padding: 48px 22px 34px;
	}

	.dsdc__eyebrow {
		margin-bottom: 16px;
		font-size: 11px;
	}

	.dsdc__heading {
		font-size: clamp(40px, 12vw, 58px);
	}

	.dsdc__description {
		font-size: 15px;
	}

	.dsdc__stage {
		min-height: 590px;
		padding: 26px 18px 30px;
	}

	.dsdc__neon-orbit {
		width: 110vw;
		height: 280px;
	}

	.dsdc__viewport {
		height: 352px;
		-webkit-perspective: 1120px;
	}

	.dsdc__card {
		width: clamp(174px, 55vw, 218px);
		margin: calc(clamp(174px, 55vw, 218px) * -.625) 0 0 calc(clamp(174px, 55vw, 218px) * -.5);
		border-radius: 18px;
	}

	.dsdc__details {
		grid-template-columns: 1fr;
		gap: 18px;
		padding-top: 10px;
		text-align: center;
	}

	.dsdc__counter {
		margin-bottom: 10px;
	}

	.dsdc__name {
		min-height: 1em;
		font-size: clamp(36px, 11vw, 50px);
		line-height: .98;
	}

	.dsdc__role {
		margin-top: 3px;
	}

	.dsdc[data-in-view="true"] .dsdc__card::before {
		animation-play-state: paused;
	}

	.dsdc[data-in-view="true"] .dsdc__card[data-active="true"]::before {
		animation-play-state: running;
	}

	.dsdc__card:not([data-active="true"]) {
		box-shadow:
			0 18px 42px rgba(0, 0, 0, .28),
			0 0 18px rgba(242, 162, 111, .16);
	}

	.dsdc__action-column {
		grid-template-rows: 48px 48px;
		gap: 12px;
		width: 100%;
		min-width: 0;
	}

	.dsdc__nav {
		justify-content: center;
	}

	.dsdc__profile-slot {
		justify-content: center;
		width: 100%;
	}

	.dsdc__profile-button {
		width: min(100%, 280px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dsdc__card,
	.dsdc__control,
	.dsdc__profile-button {
		transition-duration: .01ms;
	}

	.dsdc__name.is-typing::after {
		animation: none;
	}

	.dsdc__card::before {
		animation: none;
	}
}