/*
 * Shpper Stats widget: About page counters, office flags and the Serving map.
 * Colours are tokens on .shpper-stats and are redefined for the site's dark theme,
 * so this file is deliberately NOT fed to the dark-mode generator.
 */
.shpper-stats {
	--ss-card: #ddf3fa;
	--ss-card-hi: #ebf8fd;
	--ss-card-lo: #cfebf6;
	--ss-ink: #0b1a24;
	--ss-muted: #3f5a6b;
	--ss-tile: #fff;
	--ss-tile-shadow: 0 6px 18px rgba(18, 72, 102, .1);
	--ss-pill: #fff;
	--ss-pill-ink: #10222e;
	--ss-accent: #1e88e5;
	--ss-accent-soft: rgba(30, 136, 229, .18);
	--ss-land: #b5dbec;
	--ss-hub: #7fa7bd;
	--ss-label-bg: #0b1a24;
	--ss-label-ink: #fff;
	--ss-glow: rgba(255, 255, 255, .75);
	--ss-radius: 24px;
	--ss-gap: 20px;
	font-family: Poppins, sans-serif;
	color: var(--ss-ink);
}
html[data-theme="dark"] .shpper-stats {
	--ss-card: #132430;
	--ss-card-hi: #19313f;
	--ss-card-lo: #0f1e28;
	--ss-ink: #eaf4fa;
	--ss-muted: #a3bbcb;
	--ss-tile: #eaf6fb;
	--ss-tile-shadow: 0 6px 18px rgba(0, 0, 0, .35);
	--ss-pill: #1c3442;
	--ss-pill-ink: #e3eff6;
	--ss-accent: #4fb3ff;
	--ss-accent-soft: rgba(79, 179, 255, .22);
	--ss-land: #23465a;
	--ss-hub: #5f8397;
	--ss-label-bg: #eaf4fa;
	--ss-label-ink: #0b1a24;
	--ss-glow: rgba(79, 179, 255, .16);
}

/* ---- grid ------------------------------------------------------------- */
.shpper-stats__grid {
	display: grid;
	gap: var(--ss-gap);
	grid-template-columns: repeat(10, minmax(0, 1fr));
	grid-template-areas:
		"f f c c t t v v d d"
		"o o o o o s s s s s";
}
.ss-card--founded { grid-area: f; }
.ss-card--customers { grid-area: c; }
.ss-card--team { grid-area: t; }
.ss-card--travelers { grid-area: v; }
.ss-card--deliveries { grid-area: d; }
.ss-card--offices { grid-area: o; }
.ss-card--serving { grid-area: s; }

/* ---- card ------------------------------------------------------------- */
.shpper-stats .ss-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 0;
	padding: 28px 18px;
	text-align: center;
	border-radius: var(--ss-radius);
	background: linear-gradient(160deg, var(--ss-card-hi), var(--ss-card) 55%, var(--ss-card-lo));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 1px 2px rgba(10, 40, 60, .04);
	transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease;
}
html[data-theme="dark"] .shpper-stats .ss-card {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .3);
}
.shpper-stats .ss-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), var(--ss-glow), transparent 45%);
	opacity: 0;
	transition: opacity .35s ease;
}
.ss-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.shpper-stats .ss-tile {
	width: 64px;
	height: 64px;
	flex: none;
	display: grid;
	place-items: center;
	margin: 0 0 10px;
	border-radius: 18px;
	background: var(--ss-tile);
	box-shadow: var(--ss-tile-shadow);
	transition: transform .55s cubic-bezier(.3, 1.6, .5, 1);
}
.shpper-stats .ss-tile img {
	display: block;
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.shpper-stats .ss-value {
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	margin: 0;
	font-size: clamp(28px, 2.6vw, 40px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--ss-ink);
	font-variant-numeric: tabular-nums;
}
.shpper-stats .ss-num {
	direction: ltr;
	unicode-bidi: isolate;
}
.shpper-stats .ss-suffix {
	color: var(--ss-accent);
}
.shpper-stats .ss-label {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--ss-muted);
}
.ss-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
	.shpper-stats .ss-card:hover {
		transform: translateY(-4px);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 22px 44px -22px rgba(18, 72, 102, .45);
	}
	html[data-theme="dark"] .shpper-stats .ss-card:hover {
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 22px 44px -22px rgba(0, 0, 0, .7);
	}
	.shpper-stats .ss-card:hover::before { opacity: 1; }
	.shpper-stats .ss-card:hover .ss-tile { transform: translateY(-3px) rotate(-5deg) scale(1.05); }
}

/* ---- offices ---------------------------------------------------------- */
.shpper-stats .ss-card--offices { padding: 32px 28px; }
.shpper-stats .ss-card--offices .ss-value,
.shpper-stats .ss-card--serving .ss-value { font-size: clamp(40px, 4vw, 56px); }

.shpper-stats .ss-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}
.shpper-stats .ss-pills li { margin: 0; padding: 0; }
.shpper-stats .ss-pill {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding-block: 6px;
	padding-inline: 6px 14px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--ss-pill);
	color: var(--ss-pill-ink);
	font: 500 15px/1.2 Poppins, sans-serif;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(18, 72, 102, .08);
	cursor: pointer;
	transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s ease, border-color .3s ease;
}
.shpper-stats .ss-pill img {
	display: block;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
	transition: transform .5s cubic-bezier(.3, 1.6, .5, 1);
}
.shpper-stats .ss-pill:hover,
.shpper-stats .ss-pill:focus-visible,
.shpper-stats .ss-pill.is-active {
	background: var(--ss-pill);
	color: var(--ss-pill-ink);
	border-color: var(--ss-accent);
	outline: none;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px -10px rgba(30, 136, 229, .55);
}
.shpper-stats .ss-pill:hover img,
.shpper-stats .ss-pill:focus-visible img,
.shpper-stats .ss-pill.is-active img { transform: rotate(-14deg) scale(1.1); }
/* The generated dark-mode.css styles every [type=button] more specifically than the rules above. */
html[data-theme="dark"] .shpper-stats .ss-pill {
	background: var(--ss-pill);
	color: var(--ss-pill-ink);
	border-color: transparent;
}
html[data-theme="dark"] .shpper-stats .ss-pill:hover,
html[data-theme="dark"] .shpper-stats .ss-pill:focus-visible,
html[data-theme="dark"] .shpper-stats .ss-pill.is-active {
	background: var(--ss-pill);
	color: var(--ss-pill-ink);
	border-color: var(--ss-accent);
}
@media (min-width: 1025px) {
	.shpper-stats .ss-pills { gap: 12px; margin-top: 22px; }
	.shpper-stats .ss-pill { font-size: 16px; padding-block: 8px; padding-inline: 8px 17px; gap: 10px; }
	.shpper-stats .ss-pill img { width: 28px; height: 28px; }
}

/* ---- serving ---------------------------------------------------------- */
.shpper-stats .ss-card--serving {
	justify-content: flex-start;
	padding: 28px 28px 18px;
}
.shpper-stats .ss-kicker {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	color: var(--ss-ink);
}
.shpper-stats .ss-split {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 28px;
	margin-top: 2px;
}
.shpper-stats .ss-divider {
	width: 1px;
	flex: none;
	background: linear-gradient(transparent, var(--ss-accent) 50%, transparent);
	opacity: .6;
}
.shpper-stats .ss-tagline {
	margin: 10px 0 4px;
	font-size: 15px;
	font-weight: 400;
	color: var(--ss-muted);
}
.shpper-stats .ss-tile--globe svg {
	display: block;
	width: 48px;
	height: 48px;
	overflow: visible;
}

.shpper-stats .ss-map {
	position: relative;
	width: 100%;
	aspect-ratio: 1000 / 434;
	margin-top: 8px;
	direction: ltr;
}
.shpper-stats .ss-land {
	position: absolute;
	inset: 0;
	background: var(--ss-land);
	-webkit-mask: var(--ss-land-url) center / 100% 100% no-repeat;
	mask: var(--ss-land-url) center / 100% 100% no-repeat;
}
.shpper-stats .ss-routes {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}
.shpper-stats .ss-route {
	fill: none;
	stroke: var(--ss-accent);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-dasharray: 4 6;
	opacity: .55;
	vector-effect: non-scaling-stroke;
}
.shpper-stats .ss-route.is-active { opacity: 1; stroke-width: 2.2; }
.shpper-stats .ss-parcel {
	fill: var(--ss-accent);
	filter: drop-shadow(0 0 4px var(--ss-accent));
}

.shpper-stats .ss-dot {
	position: absolute;
	width: 10px;
	height: 10px;
	translate: -50% -50%;
	border-radius: 50%;
	background: var(--ss-accent);
	box-shadow: 0 0 0 2px var(--ss-card);
	transition: scale .35s cubic-bezier(.3, 1.6, .5, 1);
}
.shpper-stats .ss-dot::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid var(--ss-accent);
	opacity: 0;
}
.shpper-stats .ss-dot--hub {
	width: 6px;
	height: 6px;
	background: var(--ss-hub);
	box-shadow: none;
}
.shpper-stats .ss-dot--hub::after { display: none; }
.shpper-stats .ss-dot__label {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	translate: -50% 4px;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--ss-label-bg);
	color: var(--ss-label-ink);
	font: 500 12px/1 Poppins, sans-serif;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease, translate .25s ease;
}
.shpper-stats .ss-dot.is-active { z-index: 3; scale: 1.6; }
.shpper-stats .ss-dot.is-active .ss-dot__label { opacity: 1; translate: -50% 0; scale: .625; }

/* ---- motion (only once JS has taken over) ----------------------------- */
.shpper-stats.ss-js .ss-card,
.shpper-stats.ss-js .ss-pills li,
.shpper-stats.ss-js .ss-dot { opacity: 0; }
.shpper-stats.ss-js .ss-card.is-inview,
.shpper-stats.ss-js .ss-card.is-inview .ss-pills li,
.shpper-stats.ss-js .ss-card.is-inview .ss-dot { opacity: 1; }

.shpper-stats.ss-js .ss-card.is-inview {
	animation: ss-rise .8s cubic-bezier(.2, .8, .2, 1) backwards;
	animation-delay: var(--d, 0ms);
}
.shpper-stats.ss-js .ss-card.is-inview .ss-pills li {
	animation: ss-pop .55s cubic-bezier(.3, 1.6, .5, 1) backwards;
	animation-delay: calc(var(--d, 0ms) + 380ms + var(--i, 0) * 45ms);
}
.shpper-stats.ss-js .ss-card.is-inview .ss-dot {
	animation: ss-pop .6s cubic-bezier(.3, 1.6, .5, 1) backwards;
	animation-delay: calc(var(--d, 0ms) + 650ms + var(--i, 0) * 55ms);
}
.shpper-stats.ss-js .ss-card.is-inview .ss-dot::after {
	animation: ss-ping 2.8s cubic-bezier(0, 0, .2, 1) infinite;
	animation-delay: calc(1200ms + var(--i, 0) * 210ms);
}
.shpper-stats.ss-js .ss-card.is-inview .ss-route { animation: ss-flow 1.4s linear infinite; }
.shpper-stats.is-paused .ss-route,
.shpper-stats.is-paused .ss-dot::after { animation-play-state: paused; }

@keyframes ss-rise {
	from { opacity: 0; transform: translateY(26px) scale(.98); filter: blur(4px); }
	to { opacity: 1; transform: none; filter: none; }
}
@keyframes ss-pop {
	from { opacity: 0; transform: translateY(8px) scale(.85); }
	to { opacity: 1; transform: none; }
}
@keyframes ss-ping {
	0% { transform: scale(.5); opacity: .75; }
	80%, 100% { transform: scale(1.9); opacity: 0; }
}
@keyframes ss-flow { to { stroke-dashoffset: -20; } }

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 1024px) {
	.shpper-stats__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		grid-template-areas:
			"f f c c t t"
			"v v v d d d"
			"o o o o o o"
			"s s s s s s";
	}
}
@media (max-width: 640px) {
	.shpper-stats {
		--ss-gap: 12px;
		--ss-radius: 20px;
	}
	.shpper-stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"f f"
			"o o"
			"c t"
			"v d"
			"s s";
	}
	.shpper-stats .ss-card { padding: 20px 10px; }
	.shpper-stats .ss-tile { width: 54px; height: 54px; margin-bottom: 8px; border-radius: 16px; }
	.shpper-stats .ss-tile img { width: 34px; height: 34px; }
	.shpper-stats .ss-value { font-size: 28px; }
	.shpper-stats .ss-label { font-size: 14px; }
	.shpper-stats .ss-card--founded {
		flex-direction: row;
		justify-content: center;
		gap: 16px;
		padding: 14px 18px;
	}
	.shpper-stats .ss-card--founded .ss-tile { margin: 0; }
	.shpper-stats .ss-card--founded .ss-text { align-items: flex-start; }
	.shpper-stats .ss-card--offices,
	.shpper-stats .ss-card--serving { padding: 24px 14px 16px; }
	.shpper-stats .ss-card--offices .ss-value,
	.shpper-stats .ss-card--serving .ss-value { font-size: 40px; }
	.shpper-stats .ss-pills { gap: 8px; margin-top: 14px; }
	.shpper-stats .ss-pill { font-size: 13px; padding-block: 5px; padding-inline: 5px 11px; gap: 6px; }
	.shpper-stats .ss-pill img { width: 20px; height: 20px; }
	.shpper-stats .ss-split { gap: 20px; }
	.shpper-stats .ss-tagline { font-size: 13px; }
	.shpper-stats .ss-dot { width: 7px; height: 7px; }
	.shpper-stats .ss-dot::after { inset: -4px; border-width: 1.5px; }
	.shpper-stats .ss-dot--hub { width: 4px; height: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	.shpper-stats *,
	.shpper-stats *::before,
	.shpper-stats *::after {
		animation: none !important;
		transition: none !important;
	}
	.shpper-stats.ss-js .ss-card,
	.shpper-stats.ss-js .ss-pills li,
	.shpper-stats.ss-js .ss-dot { opacity: 1; }
}