/* ==========================================================
   ICONVERTIX FOOTER
   Native WordPress
========================================================== */

:root {
	--ixff-white: #ffffff;
	--ixff-ink: #15171b;
	--ixff-ink-soft: #202329;

	--ixff-muted: #a8adb5;
	--ixff-muted-2: #8d929b;

	--ixff-line: rgba(255, 255, 255, 0.12);

	--ixff-accent: #c86831;
	--ixff-accent-light: #d98250;
	--ixff-accent-soft: #f3e9e2;

	--ixff-container: 1280px;
}


/* ==========================================================
   BASE
========================================================== */

#ix-footer-final {
	width: 100%;
	position: relative;
	overflow: hidden;

	margin: 0;

	background:
		linear-gradient(
			rgba(255, 255, 255, 0.018) 1px,
			transparent 1px
		)
		0 0 / 54px 54px,

		linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.018) 1px,
			transparent 1px
		)
		0 0 / 54px 54px,

		var(--ixff-ink);

	color: var(--ixff-white);

	font-family:
		"Manrope",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;
}


#ix-footer-final *,
#ix-footer-final *::before,
#ix-footer-final *::after {
	box-sizing: border-box;
}


#ix-footer-final a {
	text-decoration: none;
}


.ixff-container {
	width: min(
		calc(100% - 72px),
		var(--ixff-container)
	);

	margin-inline: auto;
}


/* ==========================================================
   TOP CTA
========================================================== */

.ixff-top {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		auto;

	gap: 34px;

	align-items: center;

	padding: 56px 0 52px;

	border-bottom:
		1px solid
		var(--ixff-line);
}


.ixff-top-copy {
	max-width: 820px;
}


.ixff-kicker {
	display: inline-flex;

	align-items: center;

	gap: 11px;

	margin: 0 0 15px;

	color: #c7cbd1;

	font-size: 13px;

	font-weight: 700;

	line-height: 1.4;

	letter-spacing: 0.11em;

	text-transform: uppercase;
}


.ixff-kicker::before {
	width: 28px;
	height: 1px;

	background:
		var(--ixff-accent);

	content: "";
}


.ixff-top h2 {
	max-width: 880px;

	margin: 0;

	color:
		var(--ixff-white);

	font-size:
		clamp(
			38px,
			4.5vw,
			62px
		);

	font-weight: 700;

	line-height: 1;

	letter-spacing: -0.055em;
}


.ixff-top h2 span {
	color:
		var(--ixff-accent-light);
}


.ixff-top p {
	max-width: 740px;

	margin: 18px 0 0;

	color:
		var(--ixff-muted);

	font-size: 16px;

	line-height: 1.72;
}


.ixff-top p strong {
	color:
		var(--ixff-white);

	font-weight: 700;
}


/* ==========================================================
   CTA BUTTON
========================================================== */

.ixff-cta {
	min-height: 54px;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 10px;

	padding: 0 22px;

	border-radius: 10px;

	background:
		var(--ixff-white);

	color:
		var(--ixff-ink);

	font-size: 15px;

	font-weight: 700;

	line-height: 1.2;

	white-space: nowrap;

	transition:
		transform 180ms ease,
		background-color 180ms ease,
		color 180ms ease;
}


.ixff-cta:hover,
.ixff-cta:focus-visible {
	transform:
		translateY(-2px);

	background:
		var(--ixff-accent-soft);

	color:
		var(--ixff-accent);
}


.ixff-cta svg {
	width: 17px;
	height: 17px;

	flex: 0 0 auto;

	transition:
		transform 180ms ease;
}


.ixff-cta:hover svg,
.ixff-cta:focus-visible svg {
	transform:
		translate(2px, -2px);
}


/* ==========================================================
   MAIN FOOTER GRID
========================================================== */

.ixff-main {
	display: grid;

	grid-template-columns:
		minmax(280px, 1.25fr)
		minmax(150px, 0.68fr)
		minmax(150px, 0.68fr)
		minmax(150px, 0.68fr)
		minmax(150px, 0.68fr);

	gap:
		clamp(
			25px,
			3vw,
			48px
		);

	padding: 54px 0 50px;
}


/* ==========================================================
   BRAND
========================================================== */

.ixff-brand {
	max-width: 390px;
}


.ixff-logo {
	display: inline-flex;

	align-items: center;

	line-height: 0;
}


.ixff-logo img {
	width: 188px;

	height: auto;

	display: block;

	object-fit: contain;

	object-position:
		left center;

	filter:
		brightness(0)
		invert(1);
}


.ixff-brand p {
	margin: 22px 0 0;

	color:
		var(--ixff-muted);

	font-size: 16px;

	line-height: 1.72;
}


.ixff-brand p strong {
	color:
		var(--ixff-white);

	font-weight: 700;
}


.ixff-brand-links {
	display: flex;

	flex-wrap: wrap;

	gap: 9px;

	margin-top: 24px;
}


.ixff-brand-link {
	min-height: 44px;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	padding: 0 14px;

	border:
		1px solid
		var(--ixff-line);

	border-radius: 9px;

	background:
		rgba(
			255,
			255,
			255,
			0.025
		);

	color: #d8dbe0;

	font-size: 14px;

	font-weight: 700;

	transition:
		border-color 180ms ease,
		background-color 180ms ease,
		color 180ms ease;
}


.ixff-brand-link:hover,
.ixff-brand-link:focus-visible {
	border-color:
		rgba(
			200,
			104,
			49,
			0.54
		);

	background:
		rgba(
			200,
			104,
			49,
			0.10
		);

	color: #e29366;
}


/* ==========================================================
   NAV COLUMNS
========================================================== */

.ixff-column h3 {
	margin: 0 0 18px;

	color:
		var(--ixff-white);

	font-size: 16px;

	font-weight: 700;

	line-height: 1.3;

	letter-spacing: -0.015em;
}


.ixff-links {
	display: grid;

	gap: 12px;
}


.ixff-link {
	width: fit-content;

	position: relative;

	display: inline-flex;

	align-items: center;

	gap: 8px;

	color:
		var(--ixff-muted);

	font-size: 15px;

	font-weight: 500;

	line-height: 1.45;

	transition:
		color 180ms ease,
		transform 180ms ease;
}


.ixff-link::before {
	width: 0;

	height: 1px;

	flex: 0 0 auto;

	background:
		var(--ixff-accent);

	content: "";

	transition:
		width 180ms ease;
}


.ixff-link:hover,
.ixff-link:focus-visible {
	transform:
		translateX(3px);

	color:
		var(--ixff-white);
}


.ixff-link:hover::before,
.ixff-link:focus-visible::before {
	width: 14px;
}


/* ==========================================================
   UTILITY STRIP
========================================================== */

.ixff-utility {
	display: grid;

	grid-template-columns:
		repeat(
			3,
			minmax(0, 1fr)
		);

	border-top:
		1px solid
		var(--ixff-line);

	border-bottom:
		1px solid
		var(--ixff-line);
}


.ixff-utility-link {
	min-height: 92px;

	display: grid;

	grid-template-columns:
		32px
		minmax(0, 1fr)
		22px;

	gap: 12px;

	align-items: center;

	padding: 18px 20px;

	border-right:
		1px solid
		var(--ixff-line);

	color:
		var(--ixff-white);

	transition:
		background-color
		180ms ease;
}


.ixff-utility-link:last-child {
	border-right: 0;
}


.ixff-utility-link:hover,
.ixff-utility-link:focus-visible {
	background:
		rgba(
			255,
			255,
			255,
			0.035
		);
}


.ixff-utility-number {
	color:
		var(--ixff-accent-light);

	font-size: 13px;

	font-weight: 800;

	line-height: 1;
}


.ixff-utility-copy strong {
	display: block;

	color:
		var(--ixff-white);

	font-size: 15px;

	font-weight: 700;

	line-height: 1.4;
}


.ixff-utility-copy span {
	display: block;

	margin-top: 5px;

	color:
		var(--ixff-muted);

	font-size: 14px;

	line-height: 1.5;
}


.ixff-utility-link svg {
	width: 16px;

	height: 16px;

	color:
		var(--ixff-muted);

	transition:
		transform 180ms ease,
		color 180ms ease;
}


.ixff-utility-link:hover svg,
.ixff-utility-link:focus-visible svg {
	transform:
		translate(2px, -2px);

	color:
		var(--ixff-white);
}


/* ==========================================================
   WORDMARK
========================================================== */

.ixff-wordmark-wrap {
	overflow: hidden;

	padding: 8px 0 24px;
}


.ixff-wordmark {
	margin: 0;

	color:
		rgba(
			255,
			255,
			255,
			0.055
		);

	font-size:
		clamp(
			72px,
			13vw,
			178px
		);

	font-weight: 800;

	line-height: 0.92;

	letter-spacing: -0.085em;

	text-align: center;

	text-transform: uppercase;

	white-space: nowrap;

	user-select: none;
}


/* ==========================================================
   BOTTOM
========================================================== */

.ixff-bottom {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		auto;

	gap: 28px;

	align-items: center;

	padding: 22px 0 26px;

	border-top:
		1px solid
		var(--ixff-line);
}


.ixff-copyright {
	margin: 0;

	color:
		var(--ixff-muted-2);

	font-size: 14px;

	line-height: 1.6;
}


.ixff-legal {
	display: flex;

	flex-wrap: wrap;

	justify-content: flex-end;

	gap: 18px;
}


.ixff-legal a {
	color:
		var(--ixff-muted-2);

	font-size: 14px;

	font-weight: 600;

	transition:
		color 180ms ease;
}


.ixff-legal a:hover,
.ixff-legal a:focus-visible {
	color:
		var(--ixff-white);
}


/* ==========================================================
   TABLET LARGE
========================================================== */

@media (max-width: 1180px) {

	.ixff-container {
		width:
			min(
				calc(100% - 48px),
				var(--ixff-container)
			);
	}


	.ixff-main {
		grid-template-columns:
			repeat(
				4,
				minmax(0, 1fr)
			);

		gap: 38px 30px;
	}


	.ixff-brand {
		max-width: 600px;

		grid-column:
			1 / -1;
	}

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 900px) {

	.ixff-top {
		grid-template-columns:
			1fr;
	}


	.ixff-cta {
		justify-self: start;
	}


	.ixff-main {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);
	}


	.ixff-brand {
		grid-column:
			1 / -1;
	}


	.ixff-utility {
		grid-template-columns:
			1fr;
	}


	.ixff-utility-link {
		border-right: 0;

		border-bottom:
			1px solid
			var(--ixff-line);
	}


	.ixff-utility-link:last-child {
		border-bottom: 0;
	}

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 640px) {

	#ix-footer-final {
		background:
			linear-gradient(
				rgba(
					255,
					255,
					255,
					0.015
				)
				1px,
				transparent
				1px
			)
			0 0 / 38px 38px,

			linear-gradient(
				90deg,
				rgba(
					255,
					255,
					255,
					0.015
				)
				1px,
				transparent
				1px
			)
			0 0 / 38px 38px,

			var(--ixff-ink);
	}


	.ixff-container {
		width:
			min(
				calc(100% - 28px),
				var(--ixff-container)
			);
	}


	.ixff-top {
		gap: 24px;

		padding:
			44px 0 40px;
	}


	.ixff-kicker {
		margin-bottom: 13px;

		font-size: 13px;
	}


	.ixff-top h2 {
		font-size:
			clamp(
				34px,
				9.6vw,
				43px
			);

		line-height: 1.02;
	}


	.ixff-top p {
		margin-top: 16px;

		font-size: 16px;

		line-height: 1.68;
	}


	.ixff-cta {
		width: 100%;

		min-height: 52px;

		font-size: 15px;
	}


	.ixff-main {
		grid-template-columns:
			1fr;

		gap: 34px;

		padding:
			40px 0;
	}


	.ixff-brand,
	.ixff-column {
		grid-column: auto;
	}


	.ixff-logo img {
		width: 172px;

		height: auto;
	}


	.ixff-brand p {
		margin-top: 18px;

		font-size: 16px;

		line-height: 1.7;
	}


	.ixff-brand-links {
		display: grid;

		grid-template-columns:
			1fr;
	}


	.ixff-brand-link {
		width: 100%;

		min-height: 46px;

		font-size: 14px;
	}


	.ixff-column h3 {
		margin-bottom: 15px;

		font-size: 16px;
	}


	.ixff-links {
		gap: 12px;
	}


	.ixff-link {
		font-size: 15px;
	}


	.ixff-utility-link {
		min-height: 88px;

		padding:
			17px 12px;
	}


	.ixff-utility-copy strong {
		font-size: 15px;
	}


	.ixff-utility-copy span {
		font-size: 14px;
	}


	.ixff-wordmark-wrap {
		padding:
			18px 0;
	}


	.ixff-wordmark {
		font-size:
			clamp(
				54px,
				18vw,
				84px
			);
	}


	.ixff-bottom {
		grid-template-columns:
			1fr;

		gap: 14px;

		padding:
			20px 0 24px;
	}


	.ixff-copyright {
		font-size: 14px;
	}


	.ixff-legal {
		justify-content:
			flex-start;

		gap:
			14px 18px;
	}


	.ixff-legal a {
		font-size: 14px;
	}

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 390px) {

	.ixff-container {
		width:
			min(
				calc(100% - 22px),
				var(--ixff-container)
			);
	}


	.ixff-top h2 {
		font-size: 33px;
	}


	.ixff-wordmark {
		font-size: 48px;
	}

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

	#ix-footer-final *,
	#ix-footer-final *::before,
	#ix-footer-final *::after {
		transition-duration:
			0.01ms;
	}

}