/**
 * /our-clients/ — scoped to .jt-our-clients-2026
 *
 * Layout pattern: every section uses the canonical
 *   <section class="px-6 md:px-12">
 *     <div class="max-w-7xl mx-auto">…</div>
 *   </section>
 * pattern from DESIGN-SYSTEM §2.3 — outer pads, inner clamps.
 *
 * Adapted from templates/2026 page templates/jacob_tyler_our_clients_redesign.html
 * with brand tokens reconciled (--jt-red, etc.) and typography tightened to
 * match the JT 2026 ladder (DESIGN-SYSTEM §2.2).
 */

.jt-our-clients-2026 {
	--jt-red: #e2211c;
	--jt-red-dark: #b91414;
	--ink: #0c0c0d;
	--ink-soft: #2a2a2d;
	--muted: #64646b;
	--paper: #f7f5f1;
	--line: rgba(12, 12, 13, 0.14);
	--line-strong: rgba(12, 12, 13, 0.22);
	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.jt-our-clients-2026 {
	background: var(--paper);
	color: var(--ink);
	position: relative;
}

.jt-our-clients-2026::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: -1;
	background:
		radial-gradient(circle at 4% 8%, rgba(226, 33, 28, 0.11), transparent 28rem),
		radial-gradient(circle at 92% 12%, rgba(12, 12, 13, 0.08), transparent 34rem),
		linear-gradient(180deg, #fbfaf8 0%, var(--paper) 52%, #ffffff 100%);
}

/* Eyebrow + section labels — match JT eyebrow convention. */
.jt-our-clients-2026 .jt-clients-eyebrow {
	margin: 0 0 18px;
	color: var(--jt-red);
	font-size: 12px;
	font-weight: 950;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* ===== Hero ===== */
.jt-our-clients-2026 .jt-clients-hero {
	padding-top: clamp(108px, 12vw, 168px);
	padding-bottom: clamp(48px, 6vw, 88px);
}

.jt-our-clients-2026 .jt-clients-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.55fr);
	align-items: end;
	gap: clamp(42px, 7vw, 110px);
}

.jt-our-clients-2026 .jt-clients-hero__h1 {
	margin: 0 0 24px;
	font-size: clamp(76px, 10.4vw, 7rem);
	line-height: 0.86;
	letter-spacing: -0.02em;
	font-weight: 950;
	text-transform: uppercase;
	max-width: 980px;
}

.jt-our-clients-2026 .jt-clients-hero__lead {
	max-width: 820px;
	margin: 0;
	color: var(--ink-soft);
	font-size: clamp(20px, 1.8vw, 30px);
	line-height: 1.22;
	letter-spacing: -0.02em;
	font-weight: 700;
}

.jt-our-clients-2026 .jt-clients-hero__side {
	display: grid;
	gap: 16px;
	min-width: 0;
}

.jt-our-clients-2026 .jt-clients-hero__card {
	position: relative;
	overflow: hidden;
	min-height: 330px;
	border-radius: 22px;
	background: var(--ink);
	color: #fff;
	isolation: isolate;
	box-shadow: 0 32px 70px rgba(12, 12, 13, 0.2);
}

.jt-our-clients-2026 .jt-clients-hero__card img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.34;
	filter: grayscale(1);
	display: block;
}

.jt-our-clients-2026 .jt-clients-hero__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(circle at 90% 10%, rgba(226, 33, 28, 0.58), transparent 18rem),
		linear-gradient(180deg, rgba(12, 12, 13, 0.18), rgba(12, 12, 13, 0.95));
}

.jt-our-clients-2026 .jt-clients-hero__card-inner {
	height: 100%;
	min-height: 330px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 28px;
}

.jt-our-clients-2026 .jt-clients-hero__card-micro {
	margin-bottom: 14px;
	color: rgba(255, 255, 255, 0.66);
	font-size: 11px;
	font-weight: 950;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.jt-our-clients-2026 .jt-clients-hero__card strong {
	display: block;
	font-size: clamp(28px, 3vw, 48px);
	line-height: 0.96;
	letter-spacing: -0.02em;
	font-weight: 950;
}

.jt-our-clients-2026 .jt-clients-hero__note {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px 14px 20px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.66);
	color: var(--muted);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.jt-our-clients-2026 .jt-clients-hero__note span:last-child {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--jt-red);
	box-shadow: 0 0 0 8px rgba(226, 33, 28, 0.1);
	display: inline-block;
}

/* ===== Grid section ===== */
.jt-our-clients-2026 .jt-clients-grid-section {
	padding-top: 28px;
	padding-bottom: clamp(76px, 8vw, 126px);
}

.jt-our-clients-2026 .jt-clients-grid-head {
	display: grid;
	grid-template-columns: minmax(0, 0.72fr) minmax(360px, 0.64fr);
	align-items: end;
	gap: clamp(30px, 5vw, 90px);
	margin-bottom: 36px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--line);
}

.jt-our-clients-2026 .jt-clients-section-title {
	margin: 0;
	font-size: clamp(44px, 6.4vw, 5.4rem);
	line-height: 0.9;
	letter-spacing: -0.02em;
	font-weight: 950;
	text-transform: uppercase;
}

.jt-our-clients-2026 .jt-clients-section-copy {
	margin: 0;
	color: var(--ink-soft);
	font-size: clamp(18px, 1.6vw, 26px);
	line-height: 1.24;
	letter-spacing: -0.02em;
	font-weight: 700;
}

/* Filters + utility row */
.jt-our-clients-2026 .jt-clients-utility-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	margin-bottom: 22px;
}

.jt-our-clients-2026 .jt-clients-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.jt-our-clients-2026 .jt-clients-filter {
	cursor: pointer;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.66);
	color: rgba(12, 12, 13, 0.68);
	font-size: 11px;
	font-weight: 950;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: all 180ms var(--ease);
	font-family: inherit;
}

.jt-our-clients-2026 .jt-clients-filter:hover,
.jt-our-clients-2026 .jt-clients-filter.is-active {
	background: var(--ink);
	color: #fff;
	border-color: var(--ink);
	transform: translateY(-1px);
}

.jt-our-clients-2026 .jt-clients-grid-note {
	margin: 0;
	color: var(--muted);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ===== Card grid ===== */
.jt-our-clients-2026 .jt-clients-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--line-strong);
	border-left: 1px solid var(--line-strong);
	background: rgba(255, 255, 255, 0.52);
}

.jt-our-clients-2026 .jt-client-card {
	position: relative;
	min-height: clamp(210px, 20vw, 286px);
	display: grid;
	place-items: center;
	overflow: hidden;
	border-right: 1px solid var(--line-strong);
	border-bottom: 1px solid var(--line-strong);
	background: rgba(255, 255, 255, 0.58);
	isolation: isolate;
	outline: none;
	transition: background-color 260ms var(--ease), transform 260ms var(--ease), box-shadow 260ms var(--ease);
}

.jt-our-clients-2026 .jt-client-card[hidden] { display: none; }

.jt-our-clients-2026 .jt-client-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(circle at 82% 15%, rgba(226, 33, 28, 0.28), transparent 13rem),
		linear-gradient(135deg, #121214 0%, #050505 100%);
	opacity: 0;
	transform: scale(1.03);
	transition: opacity 260ms var(--ease), transform 320ms var(--ease);
}

.jt-our-clients-2026 .jt-client-card__logo-wrap {
	position: relative;
	z-index: 1;
	width: min(72%, 220px);
	min-height: 96px;
	display: grid;
	place-items: center;
}

.jt-our-clients-2026 .jt-client-card__logo {
	width: 100%;
	max-height: 96px;
	object-fit: contain;
	transition: opacity 260ms var(--ease), filter 260ms var(--ease);
}

.jt-our-clients-2026 .jt-client-card__logo--light {
	filter: grayscale(1);
	opacity: 0.82;
}

.jt-our-clients-2026 .jt-client-card__logo--dark {
	position: absolute;
	inset: 0;
	margin: auto;
	opacity: 0;
	filter: brightness(0) invert(1);
}

.jt-our-clients-2026 .jt-client-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	padding: 22px;
	color: #fff;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 260ms var(--ease), transform 260ms var(--ease);
	pointer-events: none;
}

.jt-our-clients-2026 .jt-client-card__overlay-top {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 18px;
}

.jt-our-clients-2026 .jt-client-card__industry {
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 10px;
	font-weight: 950;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	writing-mode: vertical-rl;
	white-space: nowrap;
}

.jt-our-clients-2026 .jt-client-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	pointer-events: auto;
}

.jt-our-clients-2026 .jt-client-card__mini-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 38px;
	padding: 0 13px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	backdrop-filter: blur(16px);
	font-size: 10px;
	font-weight: 950;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	transition: background-color 180ms var(--ease), transform 180ms var(--ease), border-color 180ms var(--ease);
	text-decoration: none;
}

.jt-our-clients-2026 .jt-client-card__mini-link:hover {
	background: var(--jt-red);
	border-color: var(--jt-red);
	color: #fff;
	transform: translateY(-2px);
}

.jt-our-clients-2026 .jt-client-card__mini-link i,
.jt-our-clients-2026 .jt-client-card__mini-link svg {
	width: 13px;
	height: 13px;
}

/* Hover / focus state */
.jt-our-clients-2026 .jt-client-card:hover,
.jt-our-clients-2026 .jt-client-card:focus-within,
.jt-our-clients-2026 .jt-client-card:focus-visible {
	background: var(--ink);
	box-shadow: 0 28px 60px rgba(12, 12, 13, 0.18);
}

.jt-our-clients-2026 .jt-client-card:hover::before,
.jt-our-clients-2026 .jt-client-card:focus-within::before,
.jt-our-clients-2026 .jt-client-card:focus-visible::before {
	opacity: 1;
	transform: scale(1);
}

.jt-our-clients-2026 .jt-client-card:hover .jt-client-card__logo--light,
.jt-our-clients-2026 .jt-client-card:focus-within .jt-client-card__logo--light,
.jt-our-clients-2026 .jt-client-card:focus-visible .jt-client-card__logo--light {
	opacity: 0;
}

.jt-our-clients-2026 .jt-client-card:hover .jt-client-card__logo--dark,
.jt-our-clients-2026 .jt-client-card:focus-within .jt-client-card__logo--dark,
.jt-our-clients-2026 .jt-client-card:focus-visible .jt-client-card__logo--dark {
	opacity: 1;
}

.jt-our-clients-2026 .jt-client-card:hover .jt-client-card__overlay,
.jt-our-clients-2026 .jt-client-card:focus-within .jt-client-card__overlay,
.jt-our-clients-2026 .jt-client-card:focus-visible .jt-client-card__overlay {
	opacity: 1;
	transform: translateY(0);
}

.jt-our-clients-2026 .jt-clients-empty {
	margin: 60px 0;
	text-align: center;
	color: var(--muted);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* ===== Reveal-on-scroll (matches homepage convention) ===== */
.jt-our-clients-2026 .reveal-on-scroll {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}

.jt-our-clients-2026 .reveal-on-scroll.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ===== Responsive ===== */
@media (max-width: 1180px) {
	.jt-our-clients-2026 .jt-clients-hero__grid,
	.jt-our-clients-2026 .jt-clients-grid-head {
		grid-template-columns: 1fr;
	}
	.jt-our-clients-2026 .jt-clients-hero__side { max-width: 680px; }
	.jt-our-clients-2026 .jt-clients-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.jt-our-clients-2026 .jt-clients-hero__h1 {
		font-size: clamp(56px, 14vw, 96px);
	}
	.jt-our-clients-2026 .jt-clients-utility-row {
		flex-direction: column;
		align-items: flex-start;
	}
	.jt-our-clients-2026 .jt-clients-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jt-our-clients-2026 .jt-client-card { min-height: 220px; }
	.jt-our-clients-2026 .jt-client-card__overlay { padding: 18px; }
}

@media (max-width: 540px) {
	.jt-our-clients-2026 .jt-clients-grid { grid-template-columns: 1fr; }
	.jt-our-clients-2026 .jt-client-card { min-height: 232px; }
	.jt-our-clients-2026 .jt-clients-filters { width: 100%; }
	.jt-our-clients-2026 .jt-clients-filter { flex: 1 1 auto; }
	.jt-our-clients-2026 .jt-clients-hero__note { border-radius: 22px; }
}