/* ============================================================
 * Sky Car Rental Toolkit — Previous Clients
 * Centred header + auto-scrolling photo marquee + stats row.
 * Pure-CSS marquee: the card set is rendered twice, the track
 * translates -50% so one full set scrolls off seamlessly.
 * ============================================================ */

.crqa-tk-cl {
	--crqa-cl-accent: #e8c66a;
	--crqa-cl-heading: #f4efe4;
	--crqa-cl-intro: #ffffff;
	--crqa-cl-card-t: #f4efe4;
	--crqa-cl-card-x: #cfc8ba;
	--crqa-cl-stat-v: #e8c66a;
	--crqa-cl-stat-l: #8f887a;
	font-family: 'Jost', sans-serif;
	font-weight: 300;
	color: var(--crqa-cl-heading);
	overflow: hidden;
}

/* ---- Header ---- */
.crqa-tk-cl__head { text-align: center; padding-left: clamp(20px,5vw,56px); padding-right: clamp(20px,5vw,56px);
	margin-bottom: clamp(40px,5vw,60px); }
.crqa-tk-cl__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.crqa-tk-cl__eyebrow span { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: .28em;
	color: var(--crqa-cl-accent); text-transform: uppercase; }
.crqa-tk-cl__eb-mark { text-transform: none !important; }
.crqa-tk-cl__heading { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(34px,5vw,60px);
	text-transform: uppercase; line-height: 1; letter-spacing: -.015em; margin: 0 0 18px; color: var(--crqa-cl-heading); }
.crqa-tk-cl__intro { color: var(--crqa-cl-intro); font-family: 'Poppins', sans-serif; font-weight: 400;
	font-size: 15px; line-height: 1.6; max-width: 46ch; margin: 0 auto; }

/* ---- Marquee ---- */
.crqa-tk-cl__viewport {
	-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);
}
.crqa-tk-cl__track { display: flex; width: max-content; will-change: transform;
	animation: crqaClientMarquee 46s linear infinite; }
.crqa-tk-cl__track:hover { animation-play-state: paused; }
@keyframes crqaClientMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .crqa-tk-cl__track { animation: none; } }

.crqa-tk-cl__card { flex: 0 0 auto; width: 340px; margin-right: 22px; }
.crqa-tk-cl__frame { position: relative; border-radius: 8px; overflow: hidden; height: 300px; background-color: #0c0b09;
	border: 1px solid #1f1c17; box-shadow: 0 22px 50px -28px rgba(0,0,0,.9); }
.crqa-tk-cl__img { position: absolute; inset: 0; background-size: contain; background-repeat: no-repeat; background-position: center; }
.crqa-tk-cl__img--ph { background: repeating-linear-gradient(135deg,#15130f,#15130f 12px,#191712 12px,#191712 24px); }
.crqa-tk-cl__veil { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; pointer-events: none;
	background: linear-gradient(to top, rgba(7,7,6,.92), rgba(7,7,6,.35) 55%, transparent); }
.crqa-tk-cl__body { position: absolute; left: 18px; right: 18px; bottom: 18px; pointer-events: none; }
.crqa-tk-cl__rule { display: block; width: 22px; height: 1px; background: var(--crqa-cl-accent); margin-bottom: 10px; }
.crqa-tk-cl__card-t { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 15px; text-transform: uppercase;
	letter-spacing: .01em; color: var(--crqa-cl-card-t); line-height: 1.15; }
.crqa-tk-cl__card-x { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: .12em;
	color: var(--crqa-cl-card-x); text-transform: uppercase; margin-top: 5px; }

/* ---- Stats ---- */
.crqa-tk-cl__stats { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: clamp(28px,5vw,64px); margin-top: clamp(44px,5vw,60px);
	padding-left: clamp(20px,5vw,56px); padding-right: clamp(20px,5vw,56px); }
.crqa-tk-cl__stat { text-align: center; }
.crqa-tk-cl__stat-v { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(28px,3vw,40px);
	color: var(--crqa-cl-stat-v); line-height: 1; }
.crqa-tk-cl__stat-l { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .16em;
	color: var(--crqa-cl-stat-l); text-transform: uppercase; margin-top: 8px; }

/* ---- Mobile: drop the edge mask so cards are not clipped ---- */
@media (max-width: 640px) {
	.crqa-tk-cl__viewport { -webkit-mask-image: none; mask-image: none; }
}