/**
 * Dakhli — homepage sections.
 */

/* ===============================================================
 * Hero
 * ============================================================= */

.dk-hero {
	position: relative;
	overflow: hidden;
	background: var(--dk-ink);
	isolation: isolate;
}

/* Warm light spilling from behind the photograph, so the dark left side reads
   as the same room rather than a flat black panel. */
.dk-hero__glow {
	position: absolute;
	top: -30%;
	right: -10%;
	width: 70%;
	height: 160%;
	pointer-events: none;
	background: radial-gradient(
		ellipse at center,
		rgba(255, 198, 39, 0.16) 0%,
		rgba(255, 198, 39, 0.06) 38%,
		transparent 68%
	);
}

.dk-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
	gap: clamp(2rem, 1rem + 3.4vw, 4.5rem);
	align-items: center;
	padding-block: clamp(2.5rem, 1.4rem + 3.4vw, 4.5rem);
}
.dk-hero__col { min-width: 0; }

.dk-hero__eyebrow {
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-2xs);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--dk-yellow);
	margin: 0 0 var(--dk-s3);
}

.dk-hero__title {
	font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem);
	line-height: 0.94;
	margin: 0 0 var(--dk-s4);
}
.dk-hero__name,
.dk-hero__trade { display: block; }
.dk-hero__name { color: var(--dk-white); }
.dk-hero__trade { color: var(--dk-yellow); }

/* --- rotating "en rayon" line ----------------------------------------- */

.dk-hero__ticker {
	display: flex;
	align-items: center;
	gap: var(--dk-s3);
	margin: 0 0 var(--dk-s4);
}
.dk-hero__tlabel {
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-2xs);
	letter-spacing: var(--dk-ls-label);
	text-transform: uppercase;
	color: var(--dk-ink-400);
	border: 1px solid rgba(255, 255, 255, 0.16);
	padding: 4px 9px;
	flex: none;
}
/* Font size lives on the window, not the words: the window height, each word
   height and every translateY step are all in em, so they must share one
   font size or the window shows the bottom of one word and the top of the next. */
.dk-rotator {
	display: block;
	overflow: hidden;
	font-size: 1.3rem;
	height: 1.5em;
	line-height: 1.5em;
	min-width: 0;
}
.dk-rotator__track {
	display: block;
	animation: dk-rotate 13s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}
.dk-rotator__item {
	display: block;
	height: 1.5em;
	line-height: 1.5em;
	font-family: var(--dk-font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--dk-ls-tight);
	color: var(--dk-yellow);
	white-space: nowrap;
}
/* Seven stops for six words plus a repeat of the first, so the loop closes
   on an identical frame and never visibly snaps back.

   Each word holds until the last moment and then flips in about 0.15s. A
   longer slide leaves the window showing the bottom of one word above the
   top of the next for a fifth of the cycle, which reads as a glitch rather
   than as movement. */
@keyframes dk-rotate {
	0%, 13.1%     { transform: translateY(0); }
	14.28%, 27.4% { transform: translateY(-1.5em); }
	28.57%, 41.7% { transform: translateY(-3em); }
	42.85%, 56%   { transform: translateY(-4.5em); }
	57.14%, 70.2% { transform: translateY(-6em); }
	71.42%, 84.5% { transform: translateY(-7.5em); }
	85.71%, 100%  { transform: translateY(-9em); }
}

.dk-hero__lead {
	font-size: var(--dk-t-md);
	line-height: var(--dk-lh-relaxed);
	color: var(--dk-ink-300);
	max-width: 46ch;
	margin: 0 0 var(--dk-s6);
}

/* --- reassurance row --------------------------------------------------- */

.dk-hero__points {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	list-style: none;
	margin: 0 0 var(--dk-s6);
	padding: 0;
}
.dk-hero__point {
	display: flex;
	flex-direction: column;
	gap: var(--dk-s2);
	padding-right: var(--dk-s4);
	border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.dk-hero__point:not(:first-child) { padding-left: var(--dk-s4); }
.dk-hero__point:last-child { border-right: 0; padding-right: 0; }
.dk-hero__pico {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 198, 39, 0.45);
	border-radius: 50%;
	color: var(--dk-yellow);
	transition: background var(--dk-dur) var(--dk-ease), border-color var(--dk-dur) var(--dk-ease);
}
.dk-hero__point:hover .dk-hero__pico {
	background: rgba(255, 198, 39, 0.12);
	border-color: var(--dk-yellow);
}
.dk-hero__ptext { display: flex; flex-direction: column; line-height: 1.25; }
.dk-hero__ptext strong {
	font-size: var(--dk-t-base);
	font-weight: 600;
	color: var(--dk-white);
}
.dk-hero__ptext span { font-size: var(--dk-t-sm); color: var(--dk-ink-400); }

.dk-hero__cta { display: flex; flex-wrap: wrap; gap: var(--dk-s3); }

/* --- framed photograph -------------------------------------------------- */

.dk-hero__figure {
	position: relative;
	margin: 0;
	padding: 9px;
	border-radius: 20px;
	/* Gradient rim rather than a flat border, so the frame catches "light"
	   from the same direction as the photograph inside it. */
	background: linear-gradient(
		152deg,
		rgba(255, 198, 39, 0.52) 0%,
		rgba(255, 198, 39, 0.14) 42%,
		rgba(255, 198, 39, 0.10) 62%,
		rgba(255, 198, 39, 0.40) 100%
	);
	box-shadow:
		0 34px 90px rgba(0, 0, 0, 0.58),
		0 0 0 1px rgba(255, 198, 39, 0.18);
}
.dk-hero__figure picture { display: block; }
.dk-hero__figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 11;
	object-fit: cover;
	border-radius: 12px;
}

.dk-hero__badge {
	position: absolute;
	left: calc(-1 * var(--dk-s5));
	bottom: var(--dk-s6);
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: var(--dk-s3) var(--dk-s5);
	background: var(--dk-ink);
	border-left: 3px solid var(--dk-yellow);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
.dk-hero__badge strong {
	font-family: var(--dk-font-display);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
	color: var(--dk-yellow);
}
.dk-hero__badge span {
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-2xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dk-ink-300);
}

/* --- entrance ----------------------------------------------------------- */

@keyframes dk-rise {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}
.dk-rise {
	animation: dk-rise 0.62s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
	animation-delay: calc(var(--dk-rise-i, 0) * 90ms);
}

@media (max-width: 1080px) {
	.dk-hero__points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dk-s4) 0; }
	.dk-hero__point:nth-child(2n) { border-right: 0; padding-right: 0; }
	.dk-hero__point:nth-child(odd) { padding-left: 0; }
}
@media (max-width: 980px) {
	.dk-hero__grid { grid-template-columns: 1fr; gap: var(--dk-s7); }
	.dk-hero__col--media { order: -1; }
	.dk-hero__figure img { aspect-ratio: 16 / 9; }
	.dk-hero__badge { left: auto; right: var(--dk-s4); bottom: var(--dk-s4); }
}
@media (max-width: 560px) {
	.dk-hero__cta .dk-btn { width: 100%; }
	.dk-hero__ticker { flex-wrap: wrap; }
	.dk-hero__badge { padding: var(--dk-s2) var(--dk-s4); }
	.dk-hero__badge strong { font-size: 1.375rem; }
}

@media (prefers-reduced-motion: reduce) {
	.dk-rise { animation: none; }
	.dk-rotator__track { animation: none; }
}

/* ===============================================================
 * Trust strip
 * ============================================================= */

.dk-trust {
	background: var(--dk-white);
	border-bottom: var(--dk-border);
}
.dk-trust__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}
.dk-trust__item {
	display: flex;
	align-items: center;
	gap: var(--dk-s3);
	padding: var(--dk-s5) var(--dk-s5) var(--dk-s5) 0;
	border-right: var(--dk-border);
}
.dk-trust__item:last-child { border-right: 0; }
.dk-trust__item:not(:first-child) { padding-left: var(--dk-s5); }

/* Hexagonal icon plate — a bolt head, not a circle. */
.dk-trust__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	flex: none;
	background: var(--dk-yellow);
	color: var(--dk-ink);
	clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0% 50%);
}
.dk-trust__text { display: flex; flex-direction: column; line-height: 1.3; }
.dk-trust__text strong {
	font-family: var(--dk-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}
.dk-trust__text span { font-size: var(--dk-t-sm); color: var(--dk-text-muted); }

@media (max-width: 1000px) {
	.dk-trust__list { grid-template-columns: repeat(2, 1fr); }
	.dk-trust__item:nth-child(2n) { border-right: 0; }
	.dk-trust__item:nth-child(-n+2) { border-bottom: var(--dk-border); }
	.dk-trust__item:nth-child(odd) { padding-left: 0; }
	.dk-trust__item:nth-child(even) { padding-left: var(--dk-s5); }
}
@media (max-width: 560px) {
	.dk-trust__list { grid-template-columns: 1fr; }
	.dk-trust__item {
		border-right: 0;
		border-bottom: var(--dk-border);
		padding: var(--dk-s4) 0 !important;
	}
	.dk-trust__item:last-child { border-bottom: 0; }
}

/* ===============================================================
 * Category grid
 * ============================================================= */

.dk-cats__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--dk-s4);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The photograph is the tile: text sits on it, not in a white strip below. */
.dk-cat__link {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 14px;
	background: var(--dk-ink);
	color: var(--dk-white);
	text-decoration: none;
	isolation: isolate;
	box-shadow: 0 1px 0 rgba(18, 20, 26, 0.06);
	transition:
		transform var(--dk-dur-slow) var(--dk-ease),
		box-shadow var(--dk-dur-slow) var(--dk-ease);
}
.dk-cat__link:hover,
.dk-cat__link:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 22px 44px -18px rgba(18, 20, 26, 0.55);
}
.dk-cat__link:focus-visible { outline: 3px solid var(--dk-yellow); outline-offset: 3px; }

.dk-cat__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: grid;
	place-items: center;
}
.dk-cat__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--dk-ease);
}
.dk-cat__link:hover .dk-cat__img { transform: scale(1.06); }

/* Ink wash rising from the bottom — guarantees the name reads on any photo. */
.dk-cat__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(18, 20, 26, 0.96) 0%,
		rgba(18, 20, 26, 0.74) 30%,
		rgba(18, 20, 26, 0.08) 64%,
		transparent 100%
	);
	transition: opacity var(--dk-dur-slow) var(--dk-ease);
}

/* Yellow rule that draws across the foot of the tile on hover. */
.dk-cat__link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 4px;
	width: 100%;
	background: var(--dk-yellow);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dk-dur-slow) var(--dk-ease);
}
.dk-cat__link:hover::after,
.dk-cat__link:focus-visible::after { transform: scaleX(1); }

.dk-cat__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: flex-end;
	gap: var(--dk-s3);
	padding: var(--dk-s5);
}
.dk-cat__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dk-cat__name {
	font-family: var(--dk-font-display);
	font-size: clamp(1.3rem, 1.05rem + 0.7vw, 1.6rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--dk-ls-tight);
	line-height: 1.05;
	text-wrap: balance;
}
.dk-cat__count {
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-2xs);
	letter-spacing: 0.08em;
	color: var(--dk-yellow);
}
.dk-cat__go {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	margin-left: auto;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: var(--dk-white);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: background var(--dk-dur) var(--dk-ease), color var(--dk-dur) var(--dk-ease), transform var(--dk-dur-slow) var(--dk-ease);
}
.dk-cat__link:hover .dk-cat__go {
	background: var(--dk-yellow);
	color: var(--dk-ink);
	transform: translateX(3px);
}

/* No photograph yet: drawn mark on the ink ground. */
.dk-cat--nophoto .dk-cat__media { background: var(--dk-ink-800); }
.dk-cat--nophoto .dk-cat__media::after { opacity: 0.6; }
.dk-cat__mark {
	display: grid;
	place-items: center;
	width: 112px;
	aspect-ratio: 1;
	margin-bottom: 18%;
	background: var(--dk-yellow);
	color: var(--dk-ink);
	clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0% 50%);
}

@media (max-width: 900px) { .dk-cats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
	.dk-cats__grid { grid-template-columns: 1fr; }
	.dk-cat__link { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
	.dk-cat__link,
	.dk-cat__img,
	.dk-cat__link::after,
	.dk-cat__go { transition: none; }
	.dk-cat__link:hover,
	.dk-cat__link:hover .dk-cat__img,
	.dk-cat__link:hover .dk-cat__go { transform: none; }
}

/* ===============================================================
 * Steps (cash on delivery explainer)
 * ============================================================= */

.dk-steps__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: dk-step;
}
.dk-step {
	position: relative;
	padding: var(--dk-s5) var(--dk-s5) var(--dk-s5) 0;
	border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.dk-step:not(:first-child) { padding-left: var(--dk-s5); }
.dk-step:last-child { border-right: 0; }
.dk-step__num {
	display: block;
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-2xs);
	font-weight: 600;
	letter-spacing: var(--dk-ls-label);
	color: var(--dk-yellow);
	margin-bottom: var(--dk-s4);
}
.dk-step__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--dk-radius);
	color: var(--dk-yellow);
	margin-bottom: var(--dk-s4);
}
.dk-step__title { font-size: 1.25rem; margin-bottom: var(--dk-s2); }
.dk-step__text { font-size: var(--dk-t-sm); color: var(--dk-ink-300); margin: 0; }

@media (max-width: 900px) {
	.dk-steps__list { grid-template-columns: repeat(2, 1fr); }
	.dk-step:nth-child(2n) { border-right: 0; }
	.dk-step:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
	.dk-step:nth-child(odd) { padding-left: 0; }
}
@media (max-width: 560px) {
	.dk-steps__list { grid-template-columns: 1fr; }
	.dk-step {
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
		padding: var(--dk-s5) 0 !important;
	}
	.dk-step:last-child { border-bottom: 0; }
}

/* ===============================================================
 * Promotions
 * ============================================================= */

.dk-promos { background: var(--dk-paper-2); }
.dk-eyebrow--promo::before { background: var(--dk-red); }
.dk-eyebrow--promo { color: var(--dk-red); }

/* ===============================================================
 * Services
 * ============================================================= */

.dk-services__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--dk-s4);
	list-style: none;
	margin: 0;
	padding: 0;
}
.dk-service {
	background: var(--dk-white);
	border: var(--dk-border);
	border-radius: var(--dk-radius);
	padding: var(--dk-s5);
	border-top: 3px solid var(--dk-yellow);
}
.dk-service__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	background: var(--dk-paper-2);
	border-radius: var(--dk-radius);
	color: var(--dk-ink);
	margin-bottom: var(--dk-s4);
}
.dk-service__title { font-size: 1.1875rem; margin-bottom: var(--dk-s2); }
.dk-service__text { font-size: var(--dk-t-sm); color: var(--dk-text-muted); margin: 0; }

@media (max-width: 1000px) { .dk-services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dk-services__grid { grid-template-columns: 1fr; } }

/* ===============================================================
 * Brands
 * ============================================================= */

.dk-brands {
	background: var(--dk-ink);
	color: var(--dk-white);
	border-block: 2px solid var(--dk-yellow);
	padding-block: var(--dk-s5);
	overflow: hidden;
}
.dk-brands__label {
	margin: 0 0 var(--dk-s4);
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-2xs);
	letter-spacing: var(--dk-ls-label);
	text-transform: uppercase;
	color: var(--dk-yellow);
	display: flex;
	align-items: center;
	gap: var(--dk-s3);
}
.dk-brands__label::after {
	content: '';
	height: 1px;
	flex: 1;
	background: rgba(255, 255, 255, 0.14);
}

/* --- marquee ----------------------------------------------------------- */

.dk-marquee {
	position: relative;
	overflow: hidden;
	/* Feathered ends, so names enter and leave rather than being chopped off
	   against a hard edge. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.dk-marquee__track {
	display: flex;
	width: max-content;
	animation: dk-marquee 38s linear infinite;
}
.dk-marquee:hover .dk-marquee__track,
.dk-marquee:focus-within .dk-marquee__track { animation-play-state: paused; }

/* Exactly -50%: the track holds two identical copies, so travelling half its
   width lands the second copy precisely where the first started. */
@keyframes dk-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.dk-marquee__set {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.dk-marquee__item {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 3rem);
	padding-left: clamp(1.5rem, 3vw, 3rem);
}
.dk-marquee__name {
	font-family: var(--dk-font-display);
	font-size: clamp(1.25rem, 1.8vw, 1.75rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.58);
	transition: color var(--dk-dur) var(--dk-ease);
}
.dk-marquee__item:hover .dk-marquee__name { color: var(--dk-yellow); }

/* Separator between names — a bolt head, reusing the hexagon motif. */
.dk-marquee__dot {
	width: 9px;
	height: 9px;
	flex: none;
	background: var(--dk-yellow);
	opacity: 0.55;
	clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0% 50%);
}

@media (prefers-reduced-motion: reduce) {
	.dk-marquee__track { animation: none; }
	/* Without the animation the second copy is dead weight and would overflow. */
	.dk-marquee__set[aria-hidden="true"] { display: none; }
	.dk-marquee__set { flex-wrap: wrap; row-gap: var(--dk-s3); }
	.dk-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ===============================================================
 * Store
 * ============================================================= */

.dk-store__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--dk-s9);
	align-items: center;
}
/* .dk-store__facts is shared with the contact page, so it lives in site.css. */

.dk-store__map {
	position: relative;
	aspect-ratio: 4 / 3;
	background-color: var(--dk-paper-2);
	border: var(--dk-border);
	overflow: hidden;
}
/* Google Maps embed, filling the frame. */
.dk-store__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

@media (max-width: 900px) {
	.dk-store__inner { grid-template-columns: 1fr; gap: var(--dk-s7); }
}


/* ===============================================================
 * Hero carousel
 *
 * One track of full-width slides moved by translateX. Slides stay in the
 * DOM (the track needs their width), so inactive ones carry `inert` from
 * PHP/JS — that removes them from the tab order and from screen readers,
 * which display:none would do but translate alone does not.
 * ============================================================= */

.dk-heroslide { position: relative; }
.dk-heroslide__viewport {
	overflow: hidden;
	/* Vertical scrolling stays with the browser, horizontal gestures come to
	   the carousel. Without this the browser claims the drag and fires
	   pointercancel after the first move, so swiping never works. */
	touch-action: pan-y;
}

.dk-heroslide__track {
	display: flex;
	align-items: stretch;
	transform: translate3d(calc(var(--dk-slide, 0) * -100%), 0, 0);
	transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1);
	will-change: transform;
}
/* While a finger is dragging, follow it 1:1 with no easing. */
.dk-heroslide.is-dragging .dk-heroslide__track {
	transition: none;
	transform: translate3d(calc(var(--dk-slide, 0) * -100% + var(--dk-drag, 0px)), 0, 0);
}

.dk-heroslide__slide {
	flex: 0 0 100%;
	max-width: 100%;
	min-width: 0;
	/* Content fades up as its slide arrives. */
	opacity: 0.35;
	transition: opacity 0.5s var(--dk-ease);
}
.dk-heroslide__slide.is-active { opacity: 1; }
.dk-heroslide__slide.is-active .dk-hero__col > * {
	animation: dk-hero-in 0.55s var(--dk-ease) backwards;
	animation-delay: calc(var(--dk-in, 0) * 70ms + 80ms);
}
.dk-heroslide__slide.is-active .dk-hero__col > *:nth-child(2) { --dk-in: 1; }
.dk-heroslide__slide.is-active .dk-hero__col > *:nth-child(3) { --dk-in: 2; }
.dk-heroslide__slide.is-active .dk-hero__col > *:nth-child(4) { --dk-in: 3; }
.dk-heroslide__slide.is-active .dk-hero__col > *:nth-child(5) { --dk-in: 4; }
@keyframes dk-hero-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* --- product slide --------------------------------------------------- */

.dk-heroslide__flag {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 var(--dk-s4);
	padding: 6px 12px 6px 10px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.04);
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-2xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dk-white);
}
/* Green pulse: "in stock, right now". */
.dk-heroslide__live {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #35c26a;
	box-shadow: 0 0 0 0 rgba(53, 194, 106, 0.55);
	animation: dk-live 2.2s var(--dk-ease) infinite;
	flex: none;
}
@keyframes dk-live {
	0%   { box-shadow: 0 0 0 0 rgba(53, 194, 106, 0.55); }
	70%  { box-shadow: 0 0 0 9px rgba(53, 194, 106, 0); }
	100% { box-shadow: 0 0 0 0 rgba(53, 194, 106, 0); }
}
.dk-heroslide__rayon {
	padding-left: 9px;
	margin-left: 2px;
	border-left: 1px solid rgba(255, 255, 255, 0.18);
	color: var(--dk-yellow);
}

.dk-heroslide__name {
	font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
	line-height: 1.02;
}
.dk-heroslide__name a {
	color: var(--dk-white);
	text-decoration: none;
}
.dk-heroslide__name a:hover {
	text-decoration: underline;
	text-decoration-color: var(--dk-yellow);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

.dk-heroslide__buy {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--dk-s3) var(--dk-s5);
	margin: 0 0 var(--dk-s5);
	padding-top: var(--dk-s2);
}
.dk-heroslide__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}
.dk-heroslide__now .woocommerce-Price-amount {
	font-family: var(--dk-font-display);
	font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
	font-weight: 700;
	line-height: 1;
	color: var(--dk-yellow);
	white-space: nowrap;
}
.dk-heroslide__was .woocommerce-Price-amount {
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-md);
	color: var(--dk-ink-400);
	text-decoration: line-through;
}
.dk-heroslide__stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: var(--dk-t-sm);
	color: var(--dk-ink-300);
	white-space: nowrap;
}
.dk-heroslide__stock .dk-dot { background: #35c26a; }

.dk-heroslide__figure img {
	aspect-ratio: 16 / 11;
	object-fit: cover;
	width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
}
.dk-heroslide__figure a { display: block; }
.dk-heroslide__ref strong {
	font-family: var(--dk-font-mono);
	font-size: 1.0625rem;
	letter-spacing: 0.04em;
}

/* --- controls --------------------------------------------------------- */

.dk-heroslide__bar {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dk-s4);
	padding-bottom: var(--dk-s5);
}

.dk-heroslide__dots { display: flex; align-items: center; gap: var(--dk-s2); }
/* 44px tap target around a 40px bar. */
.dk-heroslide__dot {
	position: relative;
	width: 46px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: grid;
	align-items: center;
}
.dk-heroslide__dot::before {
	content: '';
	height: 3px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.22);
	transition: background var(--dk-dur) var(--dk-ease);
}
.dk-heroslide__dot:hover::before { background: rgba(255, 255, 255, 0.42); }
/* The fill doubles as the autoplay countdown. */
.dk-heroslide__fill {
	position: absolute;
	left: 0;
	top: 50%;
	height: 3px;
	width: 0;
	margin-top: -1.5px;
	border-radius: 3px;
	background: var(--dk-yellow);
}
.dk-heroslide__dot.is-active .dk-heroslide__fill {
	animation: dk-hero-fill var(--dk-hero-delay, 6000ms) linear forwards;
}
.dk-heroslide[data-paused='true'] .dk-heroslide__fill { animation-play-state: paused; }
@keyframes dk-hero-fill { from { width: 0; } to { width: 100%; } }

.dk-heroslide__arrows { display: flex; gap: var(--dk-s2); }
.dk-heroslide__arrow {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.04);
	color: var(--dk-white);
	cursor: pointer;
	transition: background var(--dk-dur) var(--dk-ease), border-color var(--dk-dur) var(--dk-ease), transform var(--dk-dur) var(--dk-ease);
}
.dk-heroslide__arrow:hover {
	background: var(--dk-yellow);
	border-color: var(--dk-yellow);
	color: var(--dk-ink);
}
.dk-heroslide__arrow:active { transform: scale(0.94); }

@media (max-width: 760px) {
	/* Swiping replaces the arrows on a touch screen — but the pause
	   button stays: a carousel that moves on its own must be stoppable. */
	.dk-heroslide__arrow[data-dk-hero-prev],
	.dk-heroslide__arrow[data-dk-hero-next] { display: none; }
	.dk-heroslide__buy { gap: var(--dk-s2) var(--dk-s4); }
	.dk-heroslide__flag { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
	.dk-heroslide__track { transition: none; }
	.dk-heroslide__slide { opacity: 1; }
	.dk-heroslide__slide.is-active .dk-hero__col > *,
	.dk-heroslide__live,
	.dk-heroslide__dot.is-active .dk-heroslide__fill { animation: none; }
	/* No countdown without autoplay: show the active dot as a solid bar. */
	.dk-heroslide__dot.is-active .dk-heroslide__fill { width: 100%; }
	.dk-heroslide__arrow:active { transform: none; }
}

/* Slides are as tall as the tallest one (slide 1), so shorter product slides
   would sit against the top with a gap beneath. Let the grid fill the slide
   and centre its rows instead. */
.dk-heroslide__slide { display: flex; flex-direction: column; }
.dk-heroslide__slide > .dk-hero__grid { flex: 1; align-content: center; }

/* ===============================================================
 * Product slides — a different design for each
 *
 * They must not read as the welcome slide with the words swapped, so
 * each one gets its own layout, its own motion and its own furniture:
 *
 *   deal       the promotion — tilted frame, corner ribbon, poster price
 *   spotlight  mirrored, the product floating free over a halo
 *   spec       the trade counter — catalogue plate and a spec table
 * ============================================================= */

/* --- shared ----------------------------------------------------------- */

/* Parallax. The script writes --dk-px / --dk-py on the figure and only the
   image inside moves, so the frame keeps its own entrance animation and the
   two transforms never fight over the same element. */
[data-dk-parallax] img {
	transform: translate3d(var(--dk-px, 0px), var(--dk-py, 0px), 0);
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* --- deal: the promotion ---------------------------------------------- */

/* Hazard stripes washing out under the frame — a workshop floor marking,
   not a sticker. */
.dk-heroslide__slide--deal .dk-hero__col--media { position: relative; }
.dk-heroslide__slide--deal .dk-hero__col--media::before {
	content: '';
	position: absolute;
	inset: auto -3% -7% 12%;
	height: 56%;
	pointer-events: none;
	background: repeating-linear-gradient(
		-45deg,
		rgba(255, 198, 39, 0.15) 0 12px,
		transparent 12px 27px
	);
	-webkit-mask-image: linear-gradient(to top, #000, transparent 88%);
	mask-image: linear-gradient(to top, #000, transparent 88%);
}

.dk-heroslide__slide--deal .dk-hero__badge {
	left: var(--dk-s4);
	bottom: var(--dk-s4);
}

.dk-heroslide__flag--deal {
	padding: 5px 14px 5px 5px;
	border: 0;
	background: var(--dk-yellow);
	color: var(--dk-ink);
	font-weight: 600;
}
.dk-heroslide__cut {
	padding: 5px 9px;
	border-radius: 99px;
	background: var(--dk-ink);
	color: var(--dk-yellow);
	font-weight: 700;
	letter-spacing: 0.06em;
}

.dk-heroslide__save {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 var(--dk-s4);
	padding: 9px 15px;
	border-left: 3px solid var(--dk-yellow);
	background: rgba(255, 198, 39, 0.09);
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-sm);
	color: var(--dk-white);
}
.dk-heroslide__save svg { color: var(--dk-yellow); flex: none; }
.dk-heroslide__save .woocommerce-Price-amount {
	color: var(--dk-yellow);
	font-weight: 700;
}

/* The price is the headline on this one. */
.dk-heroslide__slide--deal .dk-heroslide__now .woocommerce-Price-amount {
	font-size: clamp(2.5rem, 1.5rem + 3.4vw, 3.9rem);
}
.dk-heroslide__slide--deal.is-active .dk-heroslide__now {
	display: inline-block;
	animation: dk-price-pop 0.66s cubic-bezier(0.2, 1.5, 0.4, 1) 0.44s backwards;
}
@keyframes dk-price-pop {
	from { opacity: 0; transform: scale(0.7) translateY(12px); }
	to   { opacity: 1; transform: none; }
}

.dk-heroslide__figure--tilt {
	/* Clips the ribbon to the corner it crosses. */
	overflow: hidden;
	transform: rotate(-2.2deg);
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.dk-heroslide__figure--tilt:hover { transform: rotate(0deg) scale(1.012); }
/* Swings into place instead of fading up like the other columns. */
.dk-heroslide__slide--deal.is-active .dk-heroslide__figure--tilt {
	animation: dk-tilt-in 0.85s cubic-bezier(0.2, 0.85, 0.3, 1) 0.08s backwards;
}
@keyframes dk-tilt-in {
	from { opacity: 0; transform: rotate(-9deg) scale(0.88); }
	to   { opacity: 1; transform: rotate(-2.2deg); }
}

/* The frame clips both ends, so it reads as a band wrapped around the
   corner rather than a label stuck on top of it. */
.dk-heroslide__ribbon {
	position: absolute;
	top: 26px;
	right: -54px;
	width: 194px;
	padding: 8px 0;
	text-align: center;
	transform: rotate(45deg);
	background: var(--dk-yellow);
	color: var(--dk-ink);
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-sm);
	font-weight: 700;
	letter-spacing: 0.1em;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
.dk-heroslide__slide--deal.is-active .dk-heroslide__ribbon {
	animation: dk-ribbon-in 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) 0.6s backwards;
}
@keyframes dk-ribbon-in {
	from { opacity: 0; transform: rotate(45deg) translate(34px, -34px); }
	to   { opacity: 1; transform: rotate(45deg); }
}

/* --- spotlight: the product floating free ----------------------------- */

/* Mirrored, so two product slides in a row never look like the same page. */
.dk-heroslide__slide--spotlight .dk-hero__grid {
	grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
}
.dk-heroslide__slide--spotlight .dk-hero__col--media { order: -1; }
.dk-heroslide__slide--spotlight .dk-hero__lead {
	font-size: var(--dk-t-lg);
	max-width: 34ch;
}

.dk-heroslide__float {
	position: relative;
	margin: 0;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 3vw, 2.5rem);
	isolation: isolate;
}
.dk-heroslide__float > a {
	position: relative;
	z-index: 1;
	display: block;
	width: min(88%, 460px);
	animation: dk-float 6.5s ease-in-out infinite;
}
.dk-heroslide__float img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	/* An aperture rather than a frame. Our photographs have their own
	   backgrounds, so cutting them to a circle and lighting them from
	   behind is what lifts the product out — a square photo floating in
	   the dark just looks unfinished. */
	border-radius: 50%;
	box-shadow:
		0 0 0 1px rgba(255, 198, 39, 0.38),
		0 0 0 11px rgba(255, 255, 255, 0.04),
		0 30px 60px rgba(0, 0, 0, 0.6);
}
@keyframes dk-float {
	0%, 100% { transform: translateY(-9px); }
	50%      { transform: translateY(9px); }
}

.dk-heroslide__halo {
	position: absolute;
	left: 50%;
	top: 48%;
	width: min(104%, 620px);
	aspect-ratio: 1;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(
		circle at center,
		rgba(255, 198, 39, 0.30) 0%,
		rgba(255, 198, 39, 0.10) 42%,
		transparent 70%
	);
	transform: translate(-50%, -50%);
	animation: dk-halo 7s ease-in-out infinite;
}
/* A slowly turning dashed ring, like a dial on a machine. */
.dk-heroslide__halo::before {
	content: '';
	position: absolute;
	inset: 6%;
	border-radius: 50%;
	border: 1px dashed rgba(255, 255, 255, 0.16);
	animation: dk-spin 42s linear infinite;
}
@keyframes dk-halo {
	0%, 100% { transform: translate(-50%, -50%) scale(0.94); opacity: 0.72; }
	50%      { transform: translate(-50%, -50%) scale(1.07); opacity: 1; }
}
@keyframes dk-spin { to { transform: rotate(360deg); } }

/* Brand name as outlined type behind the tool. */
.dk-heroslide__brand {
	position: absolute;
	left: 0;
	top: 50%;
	z-index: 0;
	margin: 0;
	/* Down the side: behind the circle it would only ever show half its
	   letters. */
	writing-mode: vertical-rl;
	transform: translateY(-50%);
	font-family: var(--dk-font-display);
	font-size: clamp(1.75rem, 0.9rem + 2.4vw, 3.25rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
}
.dk-heroslide__slide--spotlight.is-active .dk-heroslide__brand {
	animation: dk-brand-in 0.9s var(--dk-ease) 0.3s backwards;
}
@keyframes dk-brand-in {
	from { opacity: 0; transform: translateY(calc(-50% + 22px)); }
	to   { opacity: 1; transform: translateY(-50%); }
}

/* --- spec: the trade counter ------------------------------------------ */

.dk-heroslide__slide--spec .dk-hero__grid {
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr);
}

.dk-heroslide__spec {
	max-width: 30rem;
	margin: 0 0 var(--dk-s5);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.dk-heroslide__spec > div {
	display: flex;
	align-items: baseline;
	gap: var(--dk-s3);
	padding: 10px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.dk-heroslide__spec dt {
	flex: none;
	min-width: 7.5rem;
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-2xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dk-ink-400);
}
.dk-heroslide__spec dd {
	margin: 0;
	font-weight: 600;
	color: var(--dk-white);
}
/* Rows land one after another, like a docket being filled in. */
.dk-heroslide__slide--spec.is-active .dk-heroslide__spec > div {
	animation: dk-spec-row 0.5s var(--dk-ease) backwards;
	animation-delay: calc(var(--dk-row, 0) * 90ms + 280ms);
}
.dk-heroslide__spec > div:nth-child(2) { --dk-row: 1; }
.dk-heroslide__spec > div:nth-child(3) { --dk-row: 2; }
.dk-heroslide__spec > div:nth-child(4) { --dk-row: 3; }
@keyframes dk-spec-row {
	from { opacity: 0; transform: translateX(-14px); }
	to   { opacity: 1; transform: none; }
}

.dk-heroslide__slide--spec .dk-heroslide__now .woocommerce-Price-amount {
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
}

.dk-heroslide__plate {
	position: relative;
	margin: 0;
	padding: clamp(1.5rem, 3.4vw, 3rem);
	/* Grid lines for a dark ground — the light-ground values would glare. */
	--dk-grid-line: rgba(255, 255, 255, 0.07);
	--dk-grid-size: 26px;
	background-color: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.10);
}
.dk-heroslide__plate a { display: block; }
.dk-heroslide__plate img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.5));
}

/* Three corner brackets and a reference tab in the fourth corner. */
.dk-heroslide__bracket {
	position: absolute;
	inset: 10px;
	pointer-events: none;
}
.dk-heroslide__bracket::before,
.dk-heroslide__bracket::after,
.dk-heroslide__plate::after {
	content: '';
	position: absolute;
	width: 30px;
	height: 30px;
	border: 2px solid var(--dk-yellow);
}
.dk-heroslide__bracket::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.dk-heroslide__bracket::after { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.dk-heroslide__plate::after { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }

.dk-heroslide__slide--spec.is-active .dk-heroslide__bracket::before,
.dk-heroslide__slide--spec.is-active .dk-heroslide__bracket::after,
.dk-heroslide__slide--spec.is-active .dk-heroslide__plate::after {
	animation: dk-bracket 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}
.dk-heroslide__slide--spec.is-active .dk-heroslide__bracket::before { animation-delay: 0.3s; }
.dk-heroslide__slide--spec.is-active .dk-heroslide__bracket::after { animation-delay: 0.4s; }
.dk-heroslide__slide--spec.is-active .dk-heroslide__plate::after { animation-delay: 0.5s; }
@keyframes dk-bracket {
	from { width: 0; height: 0; opacity: 0; }
	to   { width: 30px; height: 30px; opacity: 1; }
}

.dk-heroslide__plateref {
	position: absolute;
	right: -1px;
	bottom: -1px;
	padding: 7px 15px;
	background: var(--dk-yellow);
	color: var(--dk-ink);
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-2xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --- pause / play ------------------------------------------------------ */

/* Shapes rather than an icon file: two bars and a triangle, in currentColor,
   so they invert with the button on hover like the arrows do. */
.dk-heroslide__ipause {
	width: 12px;
	height: 13px;
	border-left: 3.5px solid currentColor;
	border-right: 3.5px solid currentColor;
}
.dk-heroslide__iplay {
	margin-left: 3px;
	border-left: 12px solid currentColor;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
}
/* Pressed means paused, so the button then offers "play". */
.dk-heroslide__playpause[aria-pressed='false'] .dk-heroslide__iplay { display: none; }
.dk-heroslide__playpause[aria-pressed='true'] .dk-heroslide__ipause { display: none; }
.dk-heroslide__playpause[aria-pressed='true'] {
	background: var(--dk-yellow);
	border-color: var(--dk-yellow);
	color: var(--dk-ink);
}

/* --- phones ------------------------------------------------------------ */

@media (max-width: 860px) {
	/* One column: the mirrored spotlight layout has nothing left to mirror. */
	.dk-heroslide__slide--spotlight .dk-hero__grid,
	.dk-heroslide__slide--spec .dk-hero__grid { grid-template-columns: 1fr; }
	.dk-heroslide__float { padding: var(--dk-s4); }
	.dk-heroslide__float > a { width: min(84%, 330px); }
	/* No room beside the circle for the outlined brand. */
	.dk-heroslide__brand { display: none; }
	.dk-heroslide__plate img { aspect-ratio: 16 / 11; }
	.dk-heroslide__plate { padding: var(--dk-s5); }
	.dk-heroslide__ribbon {
		top: 18px;
		right: -54px;
		width: 168px;
		font-size: var(--dk-t-2xs);
	}
	.dk-heroslide__spec dt { min-width: 6.25rem; }
	/* The phone rule pins the badge right; this one pins it left, and both
	   together would stretch it across the photo. */
	.dk-heroslide__slide--deal .dk-hero__badge { right: auto; }
	.dk-heroslide__slide--deal .dk-hero__col--media::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	/* Everything that loops or springs. The layouts stay, the movement goes. */
	.dk-heroslide__float > a,
	.dk-heroslide__halo,
	.dk-heroslide__halo::before,
	.dk-heroslide__slide--deal.is-active .dk-heroslide__now,
	.dk-heroslide__slide--deal.is-active .dk-heroslide__figure--tilt,
	.dk-heroslide__slide--deal.is-active .dk-heroslide__ribbon,
	.dk-heroslide__slide--spotlight.is-active .dk-heroslide__brand,
	.dk-heroslide__slide--spec.is-active .dk-heroslide__spec > div,
	.dk-heroslide__slide--spec.is-active .dk-heroslide__bracket::before,
	.dk-heroslide__slide--spec.is-active .dk-heroslide__bracket::after,
	.dk-heroslide__slide--spec.is-active .dk-heroslide__plate::after { animation: none; }
	[data-dk-parallax] img { transform: none; transition: none; }
	.dk-heroslide__figure--tilt,
	.dk-heroslide__figure--tilt:hover { transform: rotate(-2.2deg); transition: none; }
}

/* The backlight follows the design of the slide on screen: it swings to the
   left for the mirrored spotlight, swells for the promotion, and drops back
   for the catalogue plate. */
.dk-hero__glow {
	transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.9s var(--dk-ease);
}
.dk-heroslide[data-variant='deal'] .dk-hero__glow { transform: translateY(6%) scale(1.1); }
.dk-heroslide[data-variant='spotlight'] .dk-hero__glow { transform: translateX(-52%) scale(1.04); }
.dk-heroslide[data-variant='spec'] .dk-hero__glow { opacity: 0.55; }

@media (max-width: 860px) {
	/* One column on a phone, so the glow has no side to swing to. */
	.dk-heroslide[data-variant] .dk-hero__glow { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.dk-hero__glow { transition: none; }
}