/* =========================================================================
   KYNETIQ — Animated coming soon / under construction
   Built from the Kynetiq brand guidelines: black stage, performance greys,
   sports red accent, Satoshi type, wide-tracked caps.

   Every entrance animation resolves to the element's *resting* style, and
   each @keyframes block starts from the hidden state with
   `animation-fill-mode: backwards`. That means switching animations off
   (reduced motion, no JS) leaves the page fully composed and readable.
   ====================================================================== */

/* ---------- Typography ------------------------------------------------ */

@font-face {
	font-family: "Satoshi";
	src: url("../fonts/Satoshi-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Satoshi";
	src: url("../fonts/Satoshi-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Satoshi";
	src: url("../fonts/Satoshi-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Satoshi";
	src: url("../fonts/Satoshi-900.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* Safiro — primary brand typeface (licensed, not bundled).
   Drop Safiro-Medium.woff2 into assets/fonts/ and uncomment to activate.

@font-face {
	font-family: "Safiro";
	src: url("../fonts/Safiro-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
*/

/* ---------- Reset ----------------------------------------------------- */

.kq-html,
.kq-html body {
	margin: 0;
	padding: 0;
	background: var(--kq-black, #000);
	color: var(--kq-white, #fff);
	font-family: var(--kq-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

.kq-html body {
	min-height: 100vh;
	min-height: 100svh;
}

.kq *,
.kq *::before,
.kq *::after {
	box-sizing: border-box;
}

.kq img {
	display: block;
	max-width: 100%;
	height: auto;
}

.kq-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- Stage ----------------------------------------------------- */

.kq {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	background: var(--kq-black, #000);
	isolation: isolate;
}

/* ---------- Backdrop: cross-fading plates with slow Ken Burns --------- */

.kq-backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: #000 var(--kq-poster) center / cover no-repeat;
}

.kq-plate {
	position: absolute;
	inset: -6%;                       /* bleed, so the Ken Burns drift never exposes an edge */
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	will-change: opacity, transform;
	animation:
		kq-plate-fade var(--kq-cycle, 34s) linear infinite,
		kq-plate-drift var(--kq-cycle, 34s) linear infinite;
	animation-delay: calc(var(--kq-cycle, 34s) / var(--kq-plates, 4) * var(--i, 0));
}

/* Four plates share one cycle; each is visible for a quarter of it, with a
   generous cross-fade so there is never a hard cut. */
@keyframes kq-plate-fade {
	0%   { opacity: 0; }
	4%   { opacity: var(--kq-plate-opacity, 0.62); }
	21%  { opacity: var(--kq-plate-opacity, 0.62); }
	25%  { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes kq-plate-drift {
	0%   { transform: scale(1.04) translate3d(0, 0, 0); }
	25%  { transform: scale(1.15) translate3d(-1.5%, -1.2%, 0); }
	100% { transform: scale(1.15) translate3d(-1.5%, -1.2%, 0); }
}

/* Vignette — pushes the frame edges to black, the way the teaser posts do */
.kq-vignette {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 50% 42%, transparent 0%, rgba(0, 0, 0, 0.55) 58%, #000 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, transparent 22%, transparent 62%, rgba(0, 0, 0, 0.92) 100%);
}

/* Light sweep — echoes the raking light shaft in the concrete teaser */
.kq-sweep {
	position: absolute;
	top: -60%;
	left: -30%;
	width: 40%;
	height: 220%;
	transform: rotate(18deg);
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.028) 38%,
		rgba(255, 255, 255, 0.075) 50%,
		rgba(255, 255, 255, 0.028) 62%,
		transparent 100%
	);
	filter: blur(6px);
	will-change: transform;
	animation: kq-sweep 11s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes kq-sweep {
	0%   { transform: translateX(-40%) rotate(18deg); opacity: 0; }
	12%  { opacity: 1; }
	78%  { opacity: 1; }
	100% { transform: translateX(360%) rotate(18deg); opacity: 0; }
}

/* ---------- Kinetic layers ---------------------------------------------
   Kynetiq is named for movement, so the backdrop should never be still even
   between plate changes. Two layers carry that: an outlined wordmark
   travelling through the frame, and a field of speed streaks. Both sit
   behind the scrim, which keeps them from competing with the headline.
   ---------------------------------------------------------------------- */

/* Ghosted wordmark on the move — outline only, so it reads as depth */
/* Offset below centre: at 50% it would sit directly under the headline,
   where the scrim is densest and the type all but disappears. */
.kq-kinetic {
	position: absolute;
	top: 62%;
	left: 0;
	right: 0;
	display: flex;
	transform: translateY(-50%);
	overflow: hidden;
}

.kq-kinetic__track {
	display: flex;
	flex: none;
	white-space: nowrap;
	will-change: transform;
	/* Reversed, so this travels right while the bottom marquee travels left. */
	animation: kq-kinetic 44s linear infinite reverse;
}

.kq-kinetic__track span {
	padding-right: 0.22em;
	font-family: var(--kq-font-display);
	font-size: clamp(4rem, 13vw, 11rem);
	font-weight: 900;
	font-style: italic;
	line-height: 1;
	letter-spacing: -0.02em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.085);
	text-transform: uppercase;
}

/* Runs right-to-left, against the bottom marquee, so the two read as
   counter-motion rather than one drifting page. */
@keyframes kq-kinetic {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-100%, 0, 0); }
}

/* Speed streaks — the logo's trail, scattered through the depth of frame */
.kq-streaks {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.kq-streaks i {
	position: absolute;
	left: -32%;
	width: 22%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
	opacity: 0;
	will-change: transform, opacity;
	animation: kq-fly 7s linear infinite;
}

@keyframes kq-fly {
	0%   { transform: translate3d(0, 0, 0) scaleX(0.35); opacity: 0; }
	10%  { opacity: 1; }
	62%  { opacity: 1; }
	100% { transform: translate3d(560%, 0, 0) scaleX(1.7); opacity: 0; }
}

/* Each streak gets its own lane, pace and weight. Staggered durations keep
   the field from ever falling into a visible repeating pattern. */
.kq-streaks i:nth-child(1) { top: 12%; width: 26%; animation-duration: 6.5s;  animation-delay: 0s;    }
.kq-streaks i:nth-child(2) { top: 27%; width: 15%; animation-duration: 4.8s;  animation-delay: -2.1s; }
.kq-streaks i:nth-child(3) { top: 41%; width: 32%; animation-duration: 9.2s;  animation-delay: -5.4s; }
.kq-streaks i:nth-child(4) { top: 56%; width: 18%; animation-duration: 5.6s;  animation-delay: -1.3s; }
.kq-streaks i:nth-child(5) { top: 69%; width: 28%; animation-duration: 8.1s;  animation-delay: -6.7s; }
.kq-streaks i:nth-child(6) { top: 83%; width: 20%; animation-duration: 6.1s;  animation-delay: -3.8s; }
.kq-streaks i:nth-child(7) { top: 19%; width: 12%; animation-duration: 3.9s;  animation-delay: -2.6s; }
.kq-streaks i:nth-child(8) { top: 92%; width: 24%; animation-duration: 7.4s;  animation-delay: -4.9s; }

/* Two streaks carry the brand red — the same one-accent rule as the rest */
.kq-streaks i:nth-child(3),
.kq-streaks i:nth-child(7) {
	background: linear-gradient(90deg, transparent, rgba(255, 0, 37, 0.55), transparent);
}

/* Centre scrim — a slow neutral breath behind the lockup. It exists to hold
   text contrast when a busy plate (the weight plate, the flat lay) rotates
   through. Deliberately colourless: in the brand's own teasers red never
   appears as atmosphere, only as the dash and the full stops. */
.kq-scrim {
	position: absolute;
	left: 50%;
	top: 46%;
	width: min(160vw, 1500px);
	aspect-ratio: 1.4;
	transform: translate(-50%, -50%);
	background: radial-gradient(
		ellipse at center,
		rgba(0, 0, 0, 0.72) 0%,
		rgba(0, 0, 0, 0.45) 42%,
		transparent 72%
	);
	will-change: opacity, transform;
	animation: kq-scrim 9s ease-in-out infinite;
}

@keyframes kq-scrim {
	0%, 100% { opacity: 0.82; transform: translate(-50%, -50%) scale(0.97); }
	50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.04); }
}

/* Film grain — SVG turbulence, jittered on a step timeline */
.kq-grain {
	position: absolute;
	inset: -120px;
	opacity: 0.05;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
	will-change: transform;
	animation: kq-grain 0.9s steps(6) infinite;
}

@keyframes kq-grain {
	0%   { transform: translate3d(0, 0, 0); }
	16%  { transform: translate3d(-14px, 9px, 0); }
	33%  { transform: translate3d(11px, -12px, 0); }
	50%  { transform: translate3d(-9px, -16px, 0); }
	66%  { transform: translate3d(15px, 7px, 0); }
	83%  { transform: translate3d(-12px, 13px, 0); }
	100% { transform: translate3d(0, 0, 0); }
}

/* ---------- Frame: thin top rail --------------------------------------- */

.kq-rail {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: clamp(0.85rem, 2.3vh, 1.7rem) clamp(1.25rem, 5vw, 3.5rem);
	font-size: clamp(0.56rem, 1.5vw, 0.68rem);
	font-weight: 500;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--kq-grey-dark, #858585);
	animation: kq-fade-down 1s ease-out 0.15s backwards;
}

.kq-rail__right {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
}

/* Live dot */
.kq-dot {
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: 50%;
	background: var(--kq-red-movement, #ff0025);
	box-shadow: 0 0 0 0 rgba(255, 0, 37, 0.65);
	animation: kq-dot 2.4s ease-out infinite;
}

@keyframes kq-dot {
	0%        { box-shadow: 0 0 0 0 rgba(255, 0, 37, 0.6); opacity: 1; }
	70%, 100% { box-shadow: 0 0 0 11px rgba(255, 0, 37, 0); opacity: 0.75; }
}

/* ---------- Content --------------------------------------------------- */

.kq-content {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(0.7rem, 1.65vh, 1.2rem);
	padding: clamp(0.75rem, 2.5vh, 1.5rem) clamp(1.25rem, 5vw, 3.5rem);
	text-align: center;
}

/* ---------- Lockup: icon + wordmark ------------------------------------ */

/* The mark, the gap and the wordmark are sized as exact percentages of the
   official horizontal lockup (826 / 120 / 3278 of 4224 units), so splitting
   the logo into two animatable pieces still reproduces the approved spacing.
   Both pieces carry the lockup's full height, which keeps them in register. */
.kq-lockup {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.841%;
	width: min(78vw, 490px);
	will-change: transform;
}

/* Subtle pointer parallax, driven by JS custom properties */
.kq-lockup--parallax {
	transform: translate3d(calc(var(--kq-px, 0) * 9px), calc(var(--kq-py, 0) * 9px), 0);
	transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.kq-mark {
	position: relative;
	flex: none;
	width: 19.555%;
	animation: kq-run-in 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.25s backwards;
}

.kq-mark__img {
	position: relative;
	z-index: 1;
	width: 100%;
	animation: kq-float 6s ease-in-out 1.6s infinite;
}

/* Speed trail — three tapered streaks that fire past the mark on entry */
.kq-trail {
	position: absolute;
	top: 50%;
	right: 58%;
	width: 240%;
	height: 1px;
	transform: translateY(-50%);
	pointer-events: none;
}

.kq-trail::before,
.kq-trail::after,
.kq-trail > i {
	content: "";
	position: absolute;
	right: 0;
	height: 1px;
	border-radius: 1px;
	transform-origin: 100% 50%;
	animation: kq-streak 2.6s cubic-bezier(0.3, 0, 0.2, 1) infinite;
}

.kq-trail::before {
	top: -7px;
	width: 100%;
	background: linear-gradient(270deg, rgba(255, 255, 255, 0.7), transparent);
	animation-delay: 0.55s;
}

.kq-trail > i {
	top: 0;
	width: 72%;
	background: linear-gradient(270deg, var(--kq-red-movement, #ff0025), transparent);
	animation-delay: 0.75s;
}

.kq-trail::after {
	top: 8px;
	width: 52%;
	background: linear-gradient(270deg, rgba(255, 255, 255, 0.4), transparent);
	animation-delay: 0.95s;
}

@keyframes kq-streak {
	0%       { opacity: 0; transform: scaleX(0.15); }
	14%      { opacity: 1; }
	46%      { opacity: 0; transform: scaleX(1); }
	100%     { opacity: 0; transform: scaleX(1); }
}

.kq-wordmark {
	width: 77.604%;
	flex: none;
	clip-path: inset(0 0 0 0);
	opacity: 1;
	filter: blur(0);
	animation: kq-wipe 1.25s cubic-bezier(0.16, 1, 0.3, 1) 0.5s backwards;
}

@keyframes kq-run-in {
	from {
		opacity: 0;
		transform: translate3d(-46px, 0, 0) skewX(-9deg) scale(0.9);
	}
}

@keyframes kq-wipe {
	from {
		opacity: 0;
		clip-path: inset(0 100% 0 0);
		filter: blur(7px);
		transform: translate3d(-14px, 0, 0);
	}
}

@keyframes kq-float {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(0, -5px, 0); }
}

/* ---------- Tagline --------------------------------------------------- */

.kq-tagline {
	margin: 0;
	font-size: clamp(0.6rem, 1.85vw, 0.82rem);
	font-weight: 500;
	letter-spacing: 0.52em;
	text-indent: 0.52em;             /* balances the trailing letter-space */
	text-transform: uppercase;
	color: var(--kq-grey-modern, #d8d8d8);
	animation: kq-fade-up 1s ease-out 1.05s backwards;
}

/* When JS has split the line, animate letter by letter instead */
.kq-tagline.is-split {
	animation: none;
}

.kq-tagline.is-split .kq-ch {
	display: inline-block;
	white-space: pre;
	animation: kq-letter 0.75s cubic-bezier(0.16, 1, 0.3, 1) backwards;
	animation-delay: calc(0.95s + var(--n, 0) * 42ms);
}

@keyframes kq-letter {
	from { opacity: 0; transform: translate3d(0, 14px, 0) rotateX(-55deg); }
}

/* ---------- Red rule -------------------------------------------------- */

.kq-rule {
	position: relative;
	display: block;
	width: clamp(46px, 8vw, 68px);
	height: 2px;
	margin: clamp(0.1rem, 0.9vh, 0.5rem) 0;
	background: var(--kq-red-speed, #bc0024);
	transform: scaleX(1);
	animation: kq-rule 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.5s backwards;
}

/* Light travelling along the rule */
.kq-rule::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, var(--kq-red-movement, #ff0025), transparent);
	animation: kq-rule-shine 3.2s ease-in-out 2.4s infinite;
}

@keyframes kq-rule {
	from { transform: scaleX(0); opacity: 0; }
}

@keyframes kq-rule-shine {
	0%, 100% { opacity: 0; transform: translateX(-100%); }
	50%      { opacity: 1; transform: translateX(100%); }
}

/* ---------- Headline -------------------------------------------------- */

.kq-headline {
	margin: 0;
	max-width: 18ch;
	font-family: var(--kq-font-display);
	font-size: clamp(1.85rem, min(7.4vw, 7.6vh), 4.35rem);
	font-weight: 900;
	line-height: 0.94;
	letter-spacing: -0.022em;
	text-transform: uppercase;
	color: var(--kq-white, #fff);
	text-wrap: balance;
}

/* Each line masked behind its own overflow box, then pushed up into place */
.kq-headline .kq-line {
	display: block;
	overflow: hidden;
	padding-bottom: 0.06em;
	margin-bottom: -0.06em;
}

.kq-headline .kq-line > span {
	display: block;
	animation: kq-line-up 1.15s cubic-bezier(0.16, 1, 0.3, 1) 1.65s backwards;
}

/* Stagger the lines. Beyond the fourth they all land together, which is
   fine — a coming-soon headline that long has bigger problems. */
.kq-headline .kq-line:nth-child(2) > span { animation-delay: 1.78s; }
.kq-headline .kq-line:nth-child(3) > span { animation-delay: 1.91s; }
.kq-headline .kq-line:nth-child(4) > span { animation-delay: 2.04s; }

@keyframes kq-line-up {
	from { transform: translate3d(0, 110%, 0) skewY(4deg); opacity: 0; }
}

.kq-headline .kq-dot-red {
	color: var(--kq-red-movement, #ff0025);
}

/* ---------- Sub copy -------------------------------------------------- */

.kq-sub {
	margin: 0;
	max-width: 44ch;
	font-size: clamp(0.8rem, 2.1vw, 0.98rem);
	font-weight: 400;
	line-height: 1.65;
	color: var(--kq-grey-clean, #b7b7b7);
	animation: kq-fade-up 1s ease-out 2.15s backwards;
}

/* ---------- Build status bar ------------------------------------------ */

.kq-status {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	width: min(100%, 260px);
	animation: kq-fade-up 1s ease-out 2.5s backwards;
}

.kq-status__track {
	position: relative;
	width: 100%;
	height: 2px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.1);
}

/* Indeterminate — signals work in progress without claiming a percentage */
.kq-status__track > i {
	position: absolute;
	top: 0;
	left: 0;
	width: 38%;
	height: 100%;
	background: linear-gradient(90deg, var(--kq-red-agility, #910023), var(--kq-red-movement, #ff0025), var(--kq-red-agility, #910023));
	animation: kq-progress 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes kq-progress {
	0%   { transform: translateX(-105%); }
	100% { transform: translateX(368%); }
}

.kq-status__label {
	font-size: clamp(0.5rem, 1.4vw, 0.6rem);
	font-weight: 500;
	letter-spacing: 0.34em;
	text-indent: 0.34em;
	text-transform: uppercase;
	color: var(--kq-grey-dark, #858585);
}

/* ---------- Social ---------------------------------------------------- */

.kq-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.4rem, 1.6vw, 0.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
	animation: kq-fade-up 1s ease-out 2.65s backwards;
}

.kq-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	color: var(--kq-grey-clean, #b7b7b7);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	text-decoration: none;
	transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.kq-social__link svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

.kq-social__link:hover,
.kq-social__link:focus-visible {
	color: var(--kq-white, #fff);
	border-color: var(--kq-red-movement, #ff0025);
	background-color: rgba(255, 0, 37, 0.14);
	transform: translateY(-3px);
}

.kq-social__link:focus-visible {
	outline: 2px solid var(--kq-red-movement, #ff0025);
	outline-offset: 3px;
}

/* ---------- Marquee --------------------------------------------------- */

.kq-marquee {
	position: relative;
	z-index: 2;
	display: flex;
	overflow: hidden;
	padding: clamp(0.68rem, 1.8vh, 1.1rem) 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(0, 0, 0, 0.42);
	backdrop-filter: blur(2px);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
	animation: kq-fade-up 1s ease-out 2.8s backwards;
}

.kq-marquee__track {
	display: flex;
	flex: none;
	gap: clamp(1.4rem, 4vw, 2.6rem);
	padding-right: clamp(1.4rem, 4vw, 2.6rem);
	white-space: nowrap;
	will-change: transform;
	animation: kq-marquee 26s linear infinite;
}

.kq-marquee:hover .kq-marquee__track {
	animation-play-state: paused;
}

@keyframes kq-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-100%, 0, 0); }
}

.kq-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: clamp(1.4rem, 4vw, 2.6rem);
	font-size: clamp(0.6rem, 1.6vw, 0.74rem);
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--kq-grey-dark, #858585);
}

.kq-marquee__item::after {
	content: "";
	width: 5px;
	height: 5px;
	flex: none;
	background: var(--kq-red-speed, #bc0024);
	transform: rotate(45deg);
}

/* ---------- Footer ---------------------------------------------------- */

/* Block, not flex: the copyright and the email address are one sentence and
   should wrap as one on narrow screens, not split into two flex items. */
.kq-foot {
	position: relative;
	z-index: 2;
	display: block;
	line-height: 1.9;
	padding: clamp(0.7rem, 1.7vh, 1.1rem) clamp(1.25rem, 5vw, 3.5rem) clamp(0.9rem, 2.2vh, 1.4rem);
	font-size: clamp(0.54rem, 1.4vw, 0.63rem);
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	/* Dark Grey rather than a faint white alpha: 5.7:1 on black, so the
	   footer still reads quiet but clears WCAG AA. */
	color: var(--kq-grey-dark, #858585);
	text-align: center;
	animation: kq-fade-up 1s ease-out 2.95s backwards;
}

.kq-foot a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	transition: color 0.3s ease, border-color 0.3s ease;
}

/* Credit sits on its own line, quieter than the copyright — present, not
   competing with the brand. */
.kq-credit {
	display: block;
	margin-top: 0.7em;
	color: var(--kq-grey-dark, #858585);
}

.kq-credit a {
	border-bottom-color: transparent;
}

.kq-credit a:hover,
.kq-credit a:focus-visible {
	color: var(--kq-white, #fff);
	border-bottom-color: var(--kq-red-movement, #ff0025);
}

.kq-foot a:hover,
.kq-foot a:focus-visible {
	color: var(--kq-white, #fff);
	border-color: var(--kq-red-movement, #ff0025);
}

/* ---------- Shared entrance keyframes ---------------------------------- */

@keyframes kq-fade-up {
	from { opacity: 0; transform: translate3d(0, 20px, 0); }
}

@keyframes kq-fade-down {
	from { opacity: 0; transform: translate3d(0, -14px, 0); }
}

/* ---------- Landscape phones: reclaim vertical space ------------------- */

@media (max-height: 560px) and (orientation: landscape) {
	.kq-content { gap: 0.75rem; }
	.kq-sub,
	.kq-marquee { display: none; }
	.kq-rail { padding-block: 0.7rem; }
	.kq-foot { padding-block: 0.55rem 0.8rem; }

	/* Fold the credit onto the copyright line rather than spending a whole
	   row on it when vertical space is this tight. */
	.kq-credit {
		display: inline;
		margin-top: 0;
	}

	.kq-credit::before {
		content: "·";
		margin: 0 0.5em;
	}
}

/* ---------- Reduced motion --------------------------------------------
   Kill every animation. Because all resting styles are the composed state,
   the page simply arrives finished — no missing or invisible content.
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.kq *,
	.kq *::before,
	.kq *::after {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}

	/* One plate stays visible, since the cross-fade is what normally shows it */
	.kq-plate {
		opacity: 0;
	}

	.kq-plate[style*="--i:0"],
	.kq-plate:first-of-type {
		opacity: var(--kq-plate-opacity, 0.62);
	}

	.kq-sweep,
	.kq-trail,
	.kq-streaks,
	.kq-kinetic {
		display: none;
	}

	.kq-lockup--parallax {
		transform: none;
	}

	/* Marquee still needs to be readable when it isn't moving */
	.kq-marquee {
		justify-content: center;
	}

	.kq-marquee__track:last-child {
		display: none;
	}
}