/*
 * IMC Clients — "Our Clients" homepage section (sector flash cards).
 * Everything is scoped under .imc-clients (no global rules), so it cannot affect
 * any other section. Component selectors are prefixed with .imc-clients so theme
 * button/list/link styles can't leak in. Uses the site's own fonts (Outfit/Jost).
 * px units on purpose: immune to the theme's root font-size.
 */

.imc-clients {
	--cl-navy: #213282;
	--cl-navy-d: #172463;
	--cl-navy-50: #eef0fa;
	--cl-red: #EA2929;
	--cl-ink: #1b1f3a;
	--cl-muted: #667085;
	--cl-line: #e6e8f1;
	--cl-soft: #f6f7fb;
	--card-w: 152px;
	--card-h: 196px;
	--tile-h: 104px;
	--gap: 12px;
	--rows: 3;                 /* phones: 3 rows of 2 */
	position: relative;
	font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--cl-ink);
	text-align: left;
}
@media (min-width: 640px)  { .imc-clients { --gap: 14px; --rows: 2; --card-w: 180px; --card-h: 204px; } }
@media (min-width: 1024px) { .imc-clients { --tile-h: 112px; --card-h: 212px; } }

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

/* ---- Defensive resets against theme styles ---- */
.imc-clients button {
	-webkit-appearance: none; appearance: none;
	margin: 0; padding: 0; text-transform: none; letter-spacing: normal; text-shadow: none;
	box-shadow: none; background: none; border: 0; border-radius: 0; outline-offset: 0;
	font: inherit; color: inherit; line-height: 1.2; text-align: left;
	width: auto; height: auto; min-width: 0; min-height: 0; max-width: none; float: none;
}
.imc-clients ul, .imc-clients li { margin: 0; padding: 0; list-style: none; background: none; border: 0; }
.imc-clients li::before, .imc-clients li::after { content: none !important; }
.imc-clients a, .imc-clients a:hover, .imc-clients a:focus { text-decoration: none; box-shadow: none; }
.imc-clients h2, .imc-clients h3, .imc-clients p { text-transform: none; letter-spacing: normal; }
.imc-clients img { border: 0; box-shadow: none; }
.imc-clients svg { display: block; }

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

/* ---------- Stats ---------- */
.imc-clients .imc-clients__stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 auto 26px; }
.imc-clients .imc-clients__stat {
	display: flex; align-items: baseline; gap: 8px;
	padding: 10px 18px; border-radius: 999px; background: #fff;
	border: 1px solid var(--cl-line); box-shadow: 0 1px 2px rgba(16,24,64,.04);
}
.imc-clients .imc-clients__stat b { font: 700 20px/1 'Outfit', sans-serif; color: var(--cl-navy); }
.imc-clients .imc-clients__stat span { font-size: 14px; color: var(--cl-muted); }

/* ---------- Labels + country row ---------- */
.imc-clients .imc-clients__label {
	display: flex; align-items: center; gap: 8px;
	font: 600 12px/1 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase;
	color: var(--cl-muted); margin: 0 0 12px; padding: 0;
}
.imc-clients .imc-clients__label svg { width: 15px; height: 15px; }

.imc-clients .imc-clients__row {
	display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
	scroll-snap-type: x proximity; padding: 2px 2px 6px; margin: 0 0 22px;
	-webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
	        mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.imc-clients .imc-clients__row::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
	.imc-clients .imc-clients__row { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}

.imc-clients .cl-country {
	flex: none; scroll-snap-align: start;
	display: inline-flex; align-items: center; gap: 10px;
	min-height: 44px; padding: 9px 16px 9px 9px;
	border: 1px solid var(--cl-line); border-radius: 12px;
	background: #fff; color: var(--cl-ink);
	font: 500 15px/1 'Jost', sans-serif; cursor: pointer; white-space: nowrap;
	transition: border-color .2s, box-shadow .2s, background .2s, color .2s, transform .2s;
}
.imc-clients .cl-country:hover { border-color: rgba(33,50,130,.4); transform: translateY(-1px); }
.imc-clients .cl-country__flag { width: 28px; height: 20px; border-radius: 4px; object-fit: cover; display: block; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.imc-clients .cl-country__globe { width: 28px; height: 20px; border-radius: 4px; display: grid; place-items: center; background: var(--cl-navy-50); color: var(--cl-navy); }
.imc-clients .cl-country__globe svg { width: 14px; height: 14px; }
.imc-clients .cl-country[aria-pressed="true"] { background: var(--cl-navy); border-color: var(--cl-navy); color: #fff; box-shadow: 0 8px 20px rgba(33,50,130,.28); }
.imc-clients .cl-country[aria-pressed="true"] .cl-country__globe { background: rgba(255,255,255,.18); color: #fff; }

/* ---------- Sector flash cards ---------- */
.imc-clients .cl-deck {
	display: grid; grid-auto-flow: column; grid-auto-columns: var(--card-w); gap: 12px;
	overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory;
	padding: 6px 4px 30px; margin: 0 -4px -6px;    /* room for card shadows inside the scroller */
	-webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
	        mask-image: linear-gradient(90deg, #000 86%, transparent);
}
.imc-clients .cl-deck::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
	/* One row, equal widths (never a lonely card on a second row). No scroll container
	   while everything fits, so card shadows aren't clipped. */
	.imc-clients .cl-deck {
		grid-auto-flow: row; grid-template-columns: repeat(var(--cards, 6), minmax(148px, 1fr)); gap: 14px;
		overflow: visible; padding: 6px 0 0; margin: 0 0 22px; -webkit-mask-image: none; mask-image: none;
	}
	/* Too many sectors for the width: becomes a swipeable strip (set by the script). */
	.imc-clients .cl-deck.is-scroll {
		overflow-x: auto; padding: 6px 8px 34px; margin: 0 -8px -12px;
		-webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent);
	}
	.imc-clients .cl-deck .cl-face { padding: 14px; }
	.imc-clients .cl-deck .cl-card__name { font-size: 16.5px; }
}

.imc-clients .cl-card {
	position: relative; display: block; width: 100%; height: var(--card-h);
	scroll-snap-align: start; cursor: pointer; perspective: 1000px;
	transition: opacity .45s ease, transform .5s cubic-bezier(.2,.8,.2,1), filter .3s;
	transition-delay: var(--d, 0s);
}
.imc-clients .cl-card.is-flipped,
.imc-clients .cl-card:hover { transition-delay: 0s; }
.imc-clients .cl-card__inner {
	position: absolute; inset: 0; display: block; transform-style: preserve-3d;
	transition: transform .75s cubic-bezier(.3,1.25,.45,1);
}
.imc-clients .cl-card.is-flipped .cl-card__inner { transform: rotateY(180deg); }
@media (hover: hover) {
	.imc-clients .cl-card:not(.is-flipped):not(:disabled):hover .cl-card__inner { transform: rotateY(-14deg) translateY(-4px); }
}

.imc-clients .cl-face {
	position: absolute; inset: 0; display: flex; flex-direction: column;
	border-radius: 18px; padding: 16px; overflow: hidden;
	-webkit-backface-visibility: hidden; backface-visibility: hidden;
}

/* Front */
.imc-clients .cl-face--front {
	background: #fff; border: 1px solid var(--cl-line);
	box-shadow: 0 1px 2px rgba(16,24,64,.05), 0 6px 14px rgba(16,24,64,.05);
	transition: border-color .25s, box-shadow .25s;
}
@media (min-width: 1024px) { .imc-clients .cl-face--front { box-shadow: 0 1px 2px rgba(16,24,64,.05), 0 10px 26px rgba(16,24,64,.07); } }
.imc-clients .cl-face--front::after {
	content: ''; position: absolute; right: -40px; top: -40px; width: 130px; height: 130px; border-radius: 50%;
	background: radial-gradient(circle, rgba(33,50,130,.08), transparent 70%); pointer-events: none;
}
.imc-clients .cl-card:hover .cl-face--front { border-color: rgba(33,50,130,.3); box-shadow: 0 16px 34px rgba(16,24,64,.13); }
.imc-clients .cl-card__mark { position: absolute; right: -14px; bottom: 34px; width: 104px; height: 104px; color: var(--cl-navy); opacity: .05; pointer-events: none; transition: opacity .3s, transform .5s cubic-bezier(.2,.8,.2,1); }
.imc-clients .cl-card__mark svg { width: 100%; height: 100%; }
.imc-clients .cl-card:hover .cl-card__mark { opacity: .09; transform: rotate(-8deg) scale(1.05); }
.imc-clients .cl-card__top, .imc-clients .cl-card__name, .imc-clients .cl-card__meta { position: relative; }
.imc-clients .cl-card__top { display: flex; align-items: flex-start; justify-content: space-between; }
.imc-clients .cl-card__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--cl-navy-50); color: var(--cl-navy); }
.imc-clients .cl-card__icon svg { width: 23px; height: 23px; }
.imc-clients .cl-card__glyph { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #98a2b3; border: 1px dashed #d0d5dd; transition: transform .6s cubic-bezier(.3,1.3,.5,1), color .25s, border-color .25s; }
.imc-clients .cl-card__glyph svg { width: 14px; height: 14px; }
.imc-clients .cl-card:hover .cl-card__glyph { transform: rotate(180deg); color: var(--cl-red); border-color: rgba(234,41,41,.45); }
.imc-clients .cl-card__name {
	margin-top: auto; font: 700 16.5px/1.22 'Outfit', sans-serif; color: var(--cl-ink);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 640px) { .imc-clients .cl-card__name { font-size: 17.5px; } }
.imc-clients .cl-card__meta { margin-top: 8px; display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 1.2; color: var(--cl-muted); }
.imc-clients .cl-card__cta { font: 600 12px/1 'Outfit', sans-serif; color: var(--cl-red); white-space: nowrap; }

/* Back */
.imc-clients .cl-face--back {
	transform: rotateY(180deg); color: #fff;
	background:
		radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.14), transparent 55%),
		linear-gradient(150deg, #2c40a0 0%, var(--cl-navy) 45%, var(--cl-navy-d) 100%);
	box-shadow: 0 10px 22px rgba(33,50,130,.3);
}
@media (min-width: 1024px) { .imc-clients .cl-face--back { box-shadow: 0 18px 38px rgba(33,50,130,.35); } }
.imc-clients .cl-face--back::before { content: ''; position: absolute; left: 16px; right: 16px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--cl-red); }
.imc-clients .cl-card__live { display: flex; align-items: center; gap: 7px; font: 600 11px/1 'Outfit', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.imc-clients .cl-card__dot { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; animation: cl-pulse 1.8s infinite; }
@keyframes cl-pulse { 0% { box-shadow: 0 0 0 0 rgba(61,220,132,.6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(61,220,132,0); } }
.imc-clients .cl-card__minis { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.imc-clients .cl-mini {
	height: 30px; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 4px 6px; overflow: hidden; min-width: 0;
	opacity: 0; transform: translateY(6px) scale(.92);
	transition: opacity .35s ease, transform .45s cubic-bezier(.2,1.3,.4,1);
}
@media (min-width: 640px) { .imc-clients .cl-mini { height: 34px; } }
.imc-clients .cl-card.is-flipped .cl-mini { opacity: 1; transform: none; }
.imc-clients .cl-card.is-flipped .cl-mini:nth-child(1) { transition-delay: .38s; }
.imc-clients .cl-card.is-flipped .cl-mini:nth-child(2) { transition-delay: .46s; }
.imc-clients .cl-card.is-flipped .cl-mini:nth-child(3) { transition-delay: .54s; }
.imc-clients .cl-card.is-flipped .cl-mini:nth-child(4) { transition-delay: .62s; }
.imc-clients .cl-mini img { width: auto; height: auto; max-width: 100%; max-height: 22px; object-fit: contain; display: block; }
@media (min-width: 640px) { .imc-clients .cl-mini img { max-height: 26px; } }
.imc-clients .cl-mini span { font: 700 10.5px/1 'Outfit', sans-serif; color: var(--cl-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.imc-clients .cl-card__bname {
	margin-top: auto; font: 700 15px/1.2 'Outfit', sans-serif;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.imc-clients .cl-card__bmeta { margin-top: 4px; display: flex; align-items: center; gap: 6px; font-size: 13.5px; line-height: 1.2; color: rgba(255,255,255,.8); }
.imc-clients .cl-card__bmeta svg { width: 14px; height: 14px; flex: none; animation: cl-bob 1.4s ease-in-out infinite; }
@keyframes cl-bob { 50% { transform: translateY(3px); } }

/* No clients in the chosen country */
.imc-clients .cl-card:disabled { cursor: not-allowed; opacity: .42; filter: grayscale(1); }

/* Entrance: cards are dealt in, then the first one flips */
.imc-clients.is-waiting .cl-card { opacity: 0; transform: translateY(26px) rotate(-2deg); }
.imc-clients.is-waiting .cl-tile { opacity: 0; }

/* Clicking the open card again: a small nudge */
.imc-clients .cl-card.is-nudge .cl-card__inner { animation: cl-nudge .45s ease; }
@keyframes cl-nudge { 30% { transform: rotateY(168deg) scale(1.03); } 60% { transform: rotateY(188deg); } }

.imc-clients .cl-country:focus-visible,
.imc-clients .cl-card:focus-visible,
.imc-clients .cl-nav:focus-visible,
.imc-clients .cl-dot:focus-visible,
.imc-clients .cl-tile__in:focus-visible { outline: 3px solid rgba(1,151,245,.5); outline-offset: 3px; border-radius: 16px; }

/* ---------- Result group ---------- */
.imc-clients .cl-group { position: relative; }
.imc-clients .cl-group__head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.imc-clients .cl-group__icon { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--cl-navy); color: #fff; box-shadow: 0 6px 16px rgba(33,50,130,.25); }
.imc-clients .cl-group__icon svg { width: 20px; height: 20px; }
.imc-clients .cl-group__icon.is-spin { animation: cl-spin .6s cubic-bezier(.3,1.3,.5,1); }
@keyframes cl-spin { from { transform: perspective(300px) rotateY(-180deg); } to { transform: perspective(300px) rotateY(0); } }
.imc-clients .cl-group__text { min-width: 0; }
.imc-clients .cl-group__title {
	font: 700 clamp(17px, 15px + .5vw, 20px)/1.25 'Outfit', sans-serif; color: var(--cl-ink);
	margin: 0; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.imc-clients .cl-group__meta {
	display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.3; color: var(--cl-muted);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.imc-clients .cl-group__meta img { width: 18px; height: 13px; border-radius: 2px; vertical-align: -1px; margin-right: 5px; object-fit: cover; display: inline; }

/* ---------- Fixed-height page (height never changes) ---------- */
.imc-clients .cl-page {
	height: calc(var(--rows) * var(--tile-h) + (var(--rows) - 1) * var(--gap));
	overflow: hidden;
}
.imc-clients .cl-grid {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: var(--tile-h); gap: var(--gap);
}
@media (min-width: 640px)  { .imc-clients .cl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .imc-clients .cl-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.imc-clients .cl-tile {
	position: relative; height: var(--tile-h);
	background: #fff; border: 1px solid var(--cl-line); border-radius: 14px; overflow: hidden;
	transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s, border-color .28s, opacity .2s;
}
.imc-clients .cl-tile[hidden] { display: none !important; }
.imc-clients .cl-tile:hover { transform: translateY(-4px); border-color: rgba(33,50,130,.22); box-shadow: 0 14px 30px rgba(16,24,64,.12); }
.imc-clients .cl-grid.is-out .cl-tile { opacity: 0; transform: scale(.94); }
/* Logos turn in like little cards after the sector card flips */
.imc-clients .cl-tile.is-in { animation: cl-tile-in .6s cubic-bezier(.25,1.2,.45,1) backwards; animation-delay: var(--d, 0s); }
@keyframes cl-tile-in {
	from { opacity: 0; transform: perspective(700px) rotateY(-95deg); }
	55%  { opacity: 1; }
	to   { opacity: 1; transform: perspective(700px) rotateY(0); }
}
.imc-clients .cl-tile__in { display: grid; place-items: center; width: 100%; height: 100%; padding: 14px 16px; color: inherit; }
.imc-clients .cl-tile .cl-logo {
	width: auto; height: auto; max-width: 100%; max-height: 62px; object-fit: contain; display: block;
	overflow: hidden; font: 600 13px/1.25 'Outfit', sans-serif; color: var(--cl-navy); text-align: center; /* tidy alt text before JS swaps a broken logo */
	transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.imc-clients .cl-tile:hover .cl-logo { transform: scale(1.06); }
.imc-clients .cl-tile__flag { position: absolute; top: 8px; right: 8px; width: 18px; height: 13px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.08); opacity: .9; }
.imc-clients .cl-tile__flag[hidden] { display: none; }
.imc-clients .cl-tile__name {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 10px 7px;
	font: 600 11.5px/1.2 'Outfit', sans-serif; color: var(--cl-navy); text-align: center;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.97) 45%);
	transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
@media (hover: hover) { .imc-clients .cl-tile:hover .cl-tile__name { transform: translateY(0); } }
.imc-clients .cl-tile__wordmark { font: 700 16px/1.2 'Outfit', sans-serif; color: var(--cl-navy); text-align: center; }

/* ---------- Pager ---------- */
/* Fixed height (not min-height) so pager / no-pager states are pixel-identical. */
.imc-clients .cl-pager { display: flex; align-items: center; justify-content: center; gap: 12px; height: 44px; margin-top: 20px; }
.imc-clients .cl-nav {
	width: 44px; height: 44px; padding: 0; flex: none; display: grid; place-items: center;
	border: 1px solid var(--cl-line); border-radius: 999px; background: #fff; color: var(--cl-navy);
	cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s, color .2s;
}
.imc-clients .cl-nav svg { width: 18px; height: 18px; }
.imc-clients .cl-nav:hover:not(:disabled) { background: var(--cl-navy); border-color: var(--cl-navy); color: #fff; box-shadow: 0 6px 16px rgba(33,50,130,.22); }
.imc-clients .cl-nav:disabled { opacity: .35; cursor: default; }
.imc-clients .cl-dots { display: flex; align-items: center; }
.imc-clients .cl-dot { width: 24px; height: 24px; padding: 0; display: grid; place-items: center; cursor: pointer; border-radius: 999px; }
.imc-clients .cl-dot::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: #cfd4e4; transition: width .25s, background .25s; }
.imc-clients .cl-dot:hover::before { background: #9aa3c4; }
.imc-clients .cl-dot[aria-current="true"]::before { width: 22px; background: var(--cl-navy); }
.imc-clients .cl-pageinfo { font: 600 13.5px 'Outfit', sans-serif; color: var(--cl-muted); min-width: 38px; text-align: center; }
@media (max-width: 480px) { .imc-clients .cl-pageinfo { display: none; } }
.imc-clients .cl-pager.is-compact .cl-dots { display: none; }
.imc-clients .cl-pager.is-compact .cl-pageinfo { display: block; min-width: 64px; font-size: 15px; color: var(--cl-navy); }

@media (prefers-reduced-motion: reduce) {
	.imc-clients *, .imc-clients *::before, .imc-clients *::after { transition: none !important; animation: none !important; }
}