/* MetaAffinity Category Cards widget */
html body { overflow-x: clip; }

.macc {
	--macc-bg: #04070C; /* same as the header */
	--macc-ink: #ffffff;
	--macc-text: rgba(255, 255, 255, .72);
	--macc-accent: #FF5A1F;
	--macc-cols: 4;
	--macc-ratio: 4 / 5;
	--macc-side: clamp(24px, 3.2vw, 64px);
	--macc-head: "Barlow Condensed", "Arial Narrow", sans-serif;
	--macc-font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--macc-bg);
	color: var(--macc-ink);
	font-family: var(--macc-font);
	padding: clamp(48px, 5.5vw, 88px) 0 0;
}
.macc *, .macc *::before, .macc *::after { box-sizing: border-box; }

/* heading row */
.macc-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	max-width: none;
	margin: 0;
	padding: 0 var(--macc-side) clamp(26px, 3vw, 42px);
}
.macc .macc-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--macc-accent);
}
.macc-slashes { display: inline-flex; gap: 3px; }
.macc-slashes i { width: 4px; height: 12px; background: currentColor; transform: skewX(-24deg); display: block; }
.macc .macc-title {
	font-family: var(--macc-head);
	font-weight: 800;
	font-size: clamp(34px, 3.6vw, 60px);
	line-height: .92;
	letter-spacing: -.005em;
	text-transform: uppercase;
	color: var(--macc-ink);
	margin: 0;
}
.macc .macc-all {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--macc-ink);
	text-decoration: none;
	border-bottom: 2px solid rgba(255, 255, 255, .25);
	transition: border-color .25s ease, color .25s ease;
}
.macc .macc-all svg { width: 15px; height: 15px; transition: transform .25s ease; }
.macc .macc-all:hover { color: var(--macc-accent); border-color: var(--macc-accent); }
.macc .macc-all:hover svg { transform: translateX(4px); }

/* grid: edge to edge */
.macc .macc-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--macc-cols), minmax(0, 1fr));
	gap: clamp(4px, .35vw, 6px);
	padding: 0 var(--macc-side) clamp(36px, 4vw, 64px);
}
.macc .macc-card { margin: 0; padding: 0; }
.macc .macc-link {
	position: relative;
	display: block;
	aspect-ratio: var(--macc-ratio);
	overflow: hidden;
	background: #0b1018;
	color: var(--macc-ink);
	text-decoration: none;
}
.macc .macc-link:hover { color: var(--macc-ink); }
.macc .macc-img, .macc .macc-img img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.macc .macc-img img {
	max-width: none;
	object-fit: cover;
	object-position: center top;
	margin: 0;
	border-radius: 0;
	transition: transform .9s cubic-bezier(.2, .7, .2, 1), filter .5s ease;
	filter: saturate(1.02);
}
.macc .macc-link:hover .macc-img img { transform: scale(1.06); }

/* readable bottom gradient */
.macc .macc-link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(4, 7, 12, .92) 0%, rgba(4, 7, 12, .55) 26%, rgba(4, 7, 12, 0) 55%);
	transition: opacity .4s ease;
}
/* accent line that grows on hover */
.macc .macc-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 3;
	width: 100%;
	height: 5px;
	background: var(--macc-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.macc .macc-link:hover::after, .macc .macc-link:focus-visible::after { transform: scaleX(1); }

.macc .macc-body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(18px, 2vw, 32px);
}
.macc .macc-num {
	font-family: var(--macc-head);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .18em;
	color: var(--macc-accent);
	margin-bottom: 8px;
}
.macc .macc-name {
	font-family: var(--macc-head);
	font-weight: 800;
	font-size: clamp(24px, 2.2vw, 36px);
	line-height: .92;
	text-transform: uppercase;
	color: var(--macc-ink);
}
.macc .macc-sub {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--macc-text);
}
.macc .macc-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 0;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--macc-ink);
	transition: max-height .4s ease, opacity .4s ease, margin-top .4s ease;
}
.macc .macc-cta svg { width: 14px; height: 14px; color: var(--macc-accent); }
.macc .macc-link:hover .macc-cta, .macc .macc-link:focus-visible .macc-cta { max-height: 30px; opacity: 1; margin-top: 16px; }

/* touch devices have no hover: always show the button */
@media (hover: none) {
	.macc .macc-cta { max-height: 30px; opacity: 1; margin-top: 14px; }
}

@media (max-width: 1024px) {
	.macc { --macc-cols: 2; }
}
@media (max-width: 640px) {
	.macc-head { flex-direction: column; align-items: flex-start; gap: 16px; }
	.macc .macc-sub { font-size: 12.5px; }
	.macc .macc-body { padding: 14px; }
	.macc .macc-num { margin-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
	.macc .macc-img img, .macc .macc-link::after, .macc .macc-cta { transition: none; }
}

/* no white strip between the element above and this dark full-width section */
.elementor-element:has(+ .elementor-element .macc) { margin-bottom: 0 !important; }