:root {
	--ink: #111111;
	--white: #ffffff;
	--off-white: #fffdf9;
	--purple: #8057ff;
	--blue: #39bfff;
	--pink: #ff4faa;
	--yellow: #ffd84d;
	--content-width: 1380px;
}

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: "DM Sans", Arial, sans-serif;
	background: var(--white);
	color: var(--ink);
	line-height: 1.6;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
textarea,
select {
	font: inherit;
}

.site-main {
	width: 100%;
	overflow: hidden;
}

/* =========================================================
   Header
   ========================================================= */

.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	width: 100%;

	background:
		linear-gradient(
			90deg,
			rgba(255, 216, 77, 0.10) 0%,
			rgba(255, 79, 170, 0.07) 35%,
			rgba(57, 191, 255, 0.07) 70%,
			rgba(128, 87, 255, 0.08) 100%
		),
		#ffffff;

	border-bottom: 1px solid rgba(17, 17, 17, 0.06);

	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.header-shell {
	width: 100%;
	min-height: 96px;

	padding: 12px clamp(24px, 4vw, 72px);

	display: flex;
	align-items: center;
	gap: 40px;
}

.site-brand {
	display: flex;
	align-items: center;
	flex-shrink: 0;

	margin-right: auto;
}

.site-logo {
	width: auto;
	height: 70px;

	object-fit: contain;

	transition:
		transform 0.25s ease,
		filter 0.25s ease;
}

.site-brand:hover .site-logo {
	transform: rotate(-2deg) scale(1.03);

	filter:
		drop-shadow(
			0 8px 14px rgba(0, 0, 0, 0.08)
		);
}

/* =========================================================
   Desktop navigation
   ========================================================= */

.desktop-navigation {
	display: flex;
	align-items: center;
	gap: 6px;
}

.desktop-navigation a {
	position: relative;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 48px;
	padding: 0 18px;

	border-radius: 14px;

	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;

	color: #111111;

	transition:
		background 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}

.desktop-navigation a::before {
	content: "";

	position: absolute;

	left: 18px;
	right: 18px;
	bottom: 7px;

	height: 3px;

	border-radius: 999px;

	background:
		linear-gradient(
			90deg,
			var(--yellow),
			var(--pink),
			var(--blue),
			var(--purple)
		);

	transform: scaleX(0);
	transform-origin: left;

	transition: transform 0.25s ease;
}

.desktop-navigation a:hover {
	background: rgba(255, 255, 255, 0.72);

	transform: translateY(-2px);
}

.desktop-navigation a:hover::before {
	transform: scaleX(1);
}

.desktop-navigation .nav-contact {
	margin-left: 10px;
	padding: 0 26px;

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

	color: #111111;

	border: 2px solid #111111;
	border-radius: 14px;

	box-shadow: none;
}

.desktop-navigation .nav-contact::before {
	display: none;
}

.desktop-navigation .nav-contact:hover {
	background: #ffffff;

	border-color: var(--pink);

	transform: translateY(-2px);

	box-shadow:
		-4px 4px 0 var(--yellow),
		4px -4px 0 var(--blue);
}

.site-header::after {
	content: "";

	position: absolute;

	left: 0;
	right: 0;
	bottom: 0;

	height: 4px;

	background:
		linear-gradient(
			90deg,
			var(--yellow) 0%,
			var(--pink) 32%,
			var(--blue) 66%,
			var(--purple) 100%
		);
}

/* =========================================================
   Mobile menu button
   ========================================================= */

.mobile-menu-toggle {
	display: none;

	width: 48px;
	height: 48px;

	padding: 11px;

	border: 0;
	border-radius: 14px;

	background:
		linear-gradient(
			135deg,
			var(--pink),
			var(--purple)
		);

	cursor: pointer;

	box-shadow:
		0 8px 20px rgba(128, 87, 255, 0.20);
}

.mobile-menu-toggle span {
	display: block;

	width: 23px;
	height: 2px;

	margin: 5px auto;

	background: #ffffff;

	transition:
		transform 0.25s ease,
		opacity 0.25s ease;
}

.mobile-navigation {
	display: none;
}

/* =========================================================
   Hero
   ========================================================= */

.home-hero {
	position: relative;

	width: 100%;
	min-height: 720px;

	overflow: hidden;

	background: #f8f6f2;
}

.home-hero-media {
	position: absolute;
	inset: 0;

	background-image:
		url("../images/hero-printer.png");

	background-repeat: no-repeat;
	background-position: center right;
	background-size: cover;
}

.home-hero-overlay {
	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			90deg,
			rgba(255, 253, 249, 1) 0%,
			rgba(255, 253, 249, 0.98) 30%,
			rgba(255, 253, 249, 0.84) 46%,
			rgba(255, 253, 249, 0.34) 61%,
			rgba(255, 253, 249, 0) 76%
		);
}

.home-hero-inner {
	position: relative;
	z-index: 2;

	width: 100%;
	min-height: 720px;

	display: flex;
	align-items: center;

	padding:
		clamp(80px, 8vw, 140px)
		clamp(24px, 6vw, 96px);
}

.home-hero-copy {
	width: min(100%, 700px);
}

.home-hero h1 {
	margin: 0;
	padding-bottom: 0.08em;

	font-size: clamp(4.8rem, 8.5vw, 8.8rem);
	line-height: 0.98;
	letter-spacing: -0.07em;
	font-weight: 900;

	color: #111111;
}

.home-hero h1 span {
	display: block;

	margin-top: 4px;
	padding-bottom: 0.08em;

	background:
		linear-gradient(
			90deg,
			#ffcf18 0%,
			#ff4faa 32%,
			#9b52ff 55%,
			#22b9f3 82%
		);

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
}

.hero-intro {
	max-width: 620px;

	margin: 30px 0 0;

	font-size: clamp(18px, 1.4vw, 21px);
	line-height: 1.65;

	color: rgba(17, 17, 17, 0.72);
}

.hero-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: 14px;

	margin-top: 38px;
}

.hero-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 56px;
	padding: 0 28px;

	border-radius: 14px;

	font-size: 15px;
	font-weight: 800;

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		background 0.2s ease,
		border-color 0.2s ease;
}

.hero-button:hover {
	transform: translateY(-3px);
}

.hero-button-primary {
	background: #111111;

	color: #ffffff;

	box-shadow:
		0 12px 28px rgba(0, 0, 0, 0.14);
}

.hero-button-primary:hover {
	background: #242424;

	box-shadow:
		0 16px 34px rgba(0, 0, 0, 0.18);
}

.hero-button-secondary {
	background: rgba(255, 255, 255, 0.78);

	color: #111111;

	border: 2px solid #111111;

	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.hero-button-secondary:hover {
	background: #ffffff;

	border-color: var(--pink);

	box-shadow:
		-4px 4px 0 var(--yellow),
		4px -4px 0 var(--blue);
}

.home-hero::after {
	content: "";

	position: absolute;
	z-index: 4;

	left: 0;
	right: 0;
	bottom: 0;

	height: 5px;

	background:
		linear-gradient(
			90deg,
			#ffd84d 0%,
			#ff4faa 32%,
			#39bfff 66%,
			#8057ff 100%
		);
}

/* =========================================================
   Intro section
   ========================================================= */

.home-intro {
	position: relative;

	width: 100%;

	padding:
		clamp(100px, 10vw, 160px)
		clamp(24px, 6vw, 96px);

	background: #ffffff;
}

.home-intro-inner {
	width: min(100%, 1050px);

	margin: 0 auto;

	text-align: center;
}

.home-intro h2 {
	margin: 0;

	font-size: clamp(3.8rem, 6.5vw, 7rem);
	line-height: 1;
	letter-spacing: -0.06em;
	font-weight: 900;

	color: #111111;
}

.home-intro h2 span {
	display: block;

	padding-bottom: 0.08em;

	background:
		linear-gradient(
			90deg,
			#ffcf18 0%,
			#ff4faa 30%,
			#8057ff 58%,
			#39bfff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
}

.home-intro-lead {
	max-width: 800px;

	margin: 38px auto 0;

	font-size: clamp(1.45rem, 2vw, 2rem);
	line-height: 1.5;
	letter-spacing: -0.025em;
	font-weight: 700;

	color: #111111;
}

.home-intro-text {
	max-width: 720px;

	margin: 24px auto 0;

	font-size: 18px;
	line-height: 1.75;

	color: rgba(17, 17, 17, 0.60);
}

/* =========================================================
   What we supply
   ========================================================= */

.home-supply {
	position: relative;

	width: 100%;
	overflow: hidden;

	padding:
		clamp(110px, 10vw, 170px)
		clamp(24px, 6vw, 96px);

	background: #111111;
	color: #ffffff;
}

.home-supply::before {
	content: "";

	position: absolute;

	width: 900px;
	height: 900px;

	right: -380px;
	top: -400px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(128, 87, 255, 0.13) 0%,
			rgba(57, 191, 255, 0.07) 38%,
			transparent 70%
		);

	pointer-events: none;
}

.home-supply-inner {
	position: relative;
	z-index: 2;

	width: 100%;
	max-width: none;

	margin: 0;

	display: grid;

	grid-template-columns:
		minmax(420px, 0.8fr)
		minmax(520px, 1fr);

	gap: clamp(70px, 9vw, 160px);

	align-items: center;
}

.home-supply-copy {
	width: 100%;
	max-width: 650px;

	margin: 0;
	padding: 0;

	text-align: left;
}

.home-supply-copy h2 {
	margin: 0;

	font-size: clamp(4rem, 5.8vw, 6.8rem);
	line-height: 0.98;
	letter-spacing: -0.06em;
	font-weight: 900;

	color: #ffffff;

	text-align: left;
}

.home-supply-copy h2 span {
	display: block;

	padding-bottom: 0.08em;

	background:
		linear-gradient(
			90deg,
			#ffd84d 0%,
			#ff4faa 34%,
			#8057ff 67%,
			#39bfff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
}

.home-supply-copy p {
	width: 100%;
	max-width: 590px;

	margin: 30px 0 0;

	font-size: 18px;
	line-height: 1.75;

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

	text-align: left;
}

.home-supply-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 58px;

	margin: 38px 0 0;

	padding: 0 30px;

	border-radius: 14px;

	background: #ffffff;
	color: #111111;

	font-size: 15px;
	font-weight: 800;

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.home-supply-button:hover {
	transform: translateY(-3px);

	box-shadow:
		-5px 5px 0 #ffd84d,
		5px -5px 0 #39bfff;
}

.home-supply-products {
	width: 100%;

	display: flex;
	flex-direction: column;

	align-items: flex-start;

	margin: 0;
	padding: 0;
}

.home-supply-products a {
	position: relative;

	display: block;

	width: 100%;

	padding:
		16px
		0
		22px;

	border-bottom:
		1px solid rgba(255, 255, 255, 0.13);
}

.home-supply-products a:first-child {
	border-top:
		1px solid rgba(255, 255, 255, 0.13);
}

.product-word {
	display: block;

	width: 100%;

	font-size: clamp(4rem, 6vw, 7.4rem);
	line-height: 0.95;
	letter-spacing: -0.065em;
	font-weight: 900;

	text-align: left;

	transition:
		transform 0.25s ease,
		opacity 0.25s ease;
}

.home-supply-products a:hover .product-word {
	transform: translateX(12px);
}

.product-word-ink {
	color: #39bfff;
}

.product-word-toner {
	color: #ff4faa;
}

.product-word-supplies {
	color: #ffd84d;
}

.product-word-business {
	color: #9b72ff;
}

/* =========================================================
   Business / About section
   ========================================================= */

.home-business {
	width: 100%;
	min-height: 720px;

	display: grid;
	grid-template-columns: 1fr 1fr;

	background: #ffffff;
}

.home-business-image {
	position: relative;

	width: 100%;
	min-height: 720px;

	overflow: hidden;

	background: #f2f2f2;
}

.home-business-image img {
	position: absolute;

	inset: 0;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;

	transition: transform 0.8s ease;
}

.home-business:hover .home-business-image img {
	transform: scale(1.025);
}

.home-business-image::after {
	content: "";

	position: absolute;

	top: 0;
	right: 0;
	bottom: 0;

	width: 5px;

	background:
		linear-gradient(
			180deg,
			#ffd84d 0%,
			#ff4faa 34%,
			#8057ff 67%,
			#39bfff 100%
		);
}

.home-business-content {
	display: flex;
	align-items: center;

	padding:
		clamp(80px, 8vw, 140px)
		clamp(50px, 7vw, 120px);
}

.home-business-copy {
	width: 100%;
	max-width: 680px;
}

.home-business-copy h2 {
	margin: 0;

	font-size: clamp(4rem, 5.7vw, 6.8rem);
	line-height: 0.98;
	letter-spacing: -0.06em;
	font-weight: 900;

	color: #111111;
}

.home-business-copy h2 span {
	display: block;

	padding-bottom: 0.08em;

	background:
		linear-gradient(
			90deg,
			#ffcf18 0%,
			#ff4faa 34%,
			#8057ff 67%,
			#39bfff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
}

.home-business-lead {
	margin: 32px 0 0;

	font-size: clamp(1.35rem, 1.8vw, 1.7rem);
	line-height: 1.5;
	letter-spacing: -0.02em;
	font-weight: 700;

	color: #111111;
}

.home-business-copy p:not(.home-business-lead) {
	margin: 22px 0 0;

	font-size: 17px;
	line-height: 1.75;

	color: rgba(17, 17, 17, 0.60);
}

.home-business-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 58px;

	margin-top: 38px;
	padding: 0 30px;

	border-radius: 14px;

	background: #111111;
	color: #ffffff;

	font-size: 15px;
	font-weight: 800;

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		background 0.2s ease;
}

.home-business-button:hover {
	transform: translateY(-3px);

	background: #242424;

	box-shadow:
		-5px 5px 0 #ffd84d,
		5px -5px 0 #39bfff;
}

/* =========================================================
   Trust section
   ========================================================= */

.home-trust {
	width: 100%;

	padding:
		clamp(110px, 10vw, 170px)
		clamp(24px, 6vw, 96px);

	background: #f7f7f5;
}

.home-trust-inner {
	width: 100%;
	max-width: 1500px;

	margin: 0 auto;
}

.home-trust-copy {
	width: min(100%, 1050px);

	margin: 0 auto;

	text-align: center;
}

/* Kill any old divider rule */

.home-trust-copy::after {
	content: none !important;
	display: none !important;
	background: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
}

.home-trust-copy h2 {
	margin: 0;

	font-size: clamp(3.8rem, 6vw, 6.8rem);
	line-height: 0.98;
	letter-spacing: -0.06em;
	font-weight: 900;

	color: #111111;
}

.home-trust-copy h2 span {
	display: block;

	padding-bottom: 0.08em;

	background:
		linear-gradient(
			90deg,
			#ffd84d 0%,
			#ff4faa 32%,
			#8057ff 65%,
			#39bfff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
}

.home-trust-copy p {
	width: min(100%, 900px);

	margin: 30px auto 0;

	font-size: 18px;
	line-height: 1.8;

	color: rgba(17, 17, 17, 0.62);
}

.home-trust-copy p + p {
	margin-top: 18px;
}

.home-trust-points {
	display: grid;

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

	gap: clamp(40px, 5vw, 80px);

	margin-top: 85px;
}

.home-trust-point {
	position: relative;

	padding-top: 28px;

	text-align: left;
}

.home-trust-point::before {
	content: "";

	position: absolute;

	top: 0;
	left: 0;

	width: 100%;
	height: 4px;

	border-radius: 999px;
}

.home-trust-point:nth-child(1)::before {
	background:
		linear-gradient(
			90deg,
			#39bfff,
			#8057ff
		);
}

.home-trust-point:nth-child(2)::before {
	background:
		linear-gradient(
			90deg,
			#ff4faa,
			#8057ff
		);
}

.home-trust-point:nth-child(3)::before {
	background:
		linear-gradient(
			90deg,
			#ffd84d,
			#ff4faa
		);
}

.home-trust-point strong {
	display: block;

	margin: 0 0 14px;

	font-size: clamp(1.6rem, 1.9vw, 2.1rem);
	line-height: 1.15;
	letter-spacing: -0.035em;
	font-weight: 850;

	color: #111111;
}

.home-trust-point span {
	display: block;

	max-width: 420px;

	font-size: 16px;
	line-height: 1.75;

	color: rgba(17, 17, 17, 0.58);
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1050px) {

	.home-hero,
	.home-hero-inner {
		min-height: 650px;
	}

	.home-hero-media {
		background-position: 58% center;
	}

	.home-hero-overlay {
		background:
			linear-gradient(
				90deg,
				rgba(255, 253, 249, 1) 0%,
				rgba(255, 253, 249, 0.98) 38%,
				rgba(255, 253, 249, 0.74) 58%,
				rgba(255, 253, 249, 0.18) 80%
			);
	}

	.home-hero-copy {
		width: min(100%, 620px);
	}

	.home-supply-inner {
		grid-template-columns: 1fr;

		gap: 70px;
	}

	.home-supply-copy {
		max-width: 760px;
	}

	.home-supply-products {
		max-width: 900px;
	}

}

/* =========================================================
   Mobile navigation
   ========================================================= */

@media (max-width: 900px) {

	.header-shell {
		min-height: 82px;

		padding: 10px 18px;

		gap: 20px;
	}

	.site-logo {
		height: 58px;
	}

	.desktop-navigation {
		display: none;
	}

	.mobile-menu-toggle {
		display: block;

		flex-shrink: 0;
	}

	.mobile-navigation {
		position: absolute;

		top: 82px;
		left: 0;

		width: 100%;

		padding: 18px;

		background:
			linear-gradient(
				180deg,
				rgba(255, 255, 255, 0.98),
				rgba(247, 247, 245, 0.98)
			);

		border-top: 1px solid rgba(17, 17, 17, 0.06);

		box-shadow:
			0 20px 40px rgba(0, 0, 0, 0.10);
	}

	.mobile-navigation.is-open {
		display: flex;

		flex-direction: column;

		gap: 4px;
	}

	.mobile-navigation a {
		padding: 15px 16px;

		border-radius: 14px;

		font-size: 18px;
		font-weight: 700;

		color: #111111;
	}

	.mobile-navigation a:last-child {
		margin-top: 8px;

		background: #ffffff;

		color: #111111;

		border: 2px solid #111111;

		text-align: center;
	}

	.mobile-menu-toggle.is-active span:nth-child(1) {
		transform:
			translateY(7px)
			rotate(45deg);
	}

	.mobile-menu-toggle.is-active span:nth-child(2) {
		opacity: 0;
	}

	.mobile-menu-toggle.is-active span:nth-child(3) {
		transform:
			translateY(-7px)
			rotate(-45deg);
	}

	.home-trust-points {
		grid-template-columns: 1fr;

		gap: 44px;

		margin-top: 65px;
	}

	.home-trust-point {
		width: 100%;
		max-width: 760px;

		margin: 0 auto;
	}

	.home-trust-point span {
		max-width: 680px;
	}

}

/* =========================================================
   Business tablet
   ========================================================= */

@media (max-width: 1000px) {

	.home-business {
		grid-template-columns: 1fr;
	}

	.home-business-image {
		min-height: 560px;
	}

	.home-business-image::after {
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;

		width: 100%;
		height: 5px;

		background:
			linear-gradient(
				90deg,
				#ffd84d 0%,
				#ff4faa 34%,
				#8057ff 67%,
				#39bfff 100%
			);
	}

	.home-business-content {
		padding:
			90px
			clamp(24px, 6vw, 70px);
	}

}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 720px) {

	.home-hero {
		min-height: auto;

		background: #fffdf9;
	}

	.home-hero-media {
		position: relative;

		width: 100%;
		height: 390px;

		background-size: cover;
		background-position: 69% center;
	}

	.home-hero-overlay {
		display: none;
	}

	.home-hero-inner {
		min-height: auto;

		padding:
			52px
			20px
			62px;

		background:
			linear-gradient(
				180deg,
				#fffdf9 0%,
				#ffffff 100%
			);
	}

	.home-hero h1 {
		font-size:
			clamp(
				4rem,
				18vw,
				5.8rem
			);
	}

	.hero-intro {
		margin-top: 24px;

		font-size: 18px;
	}

	.hero-actions {
		flex-direction: column;

		align-items: stretch;

		margin-top: 30px;
	}

	.hero-button {
		width: 100%;
	}

	.home-intro {
		padding:
			80px
			20px;
	}

	.home-intro h2 {
		font-size:
			clamp(
				3.2rem,
				14vw,
				4.8rem
			);
	}

	.home-intro-lead {
		margin-top: 28px;

		font-size: 1.35rem;
	}

	.home-intro-text {
		margin-top: 20px;

		font-size: 17px;
	}

	.home-supply {
		padding:
			85px
			20px;
	}

	.home-supply-inner {
		gap: 55px;
	}

	.home-supply-copy {
		max-width: none;
	}

	.home-supply-copy h2 {
		font-size:
			clamp(
				3.4rem,
				15vw,
				5rem
			);
	}

	.home-supply-copy p {
		font-size: 17px;
	}

	.home-supply-button {
		width: 100%;
	}

	.product-word {
		font-size:
			clamp(
				3.2rem,
				15vw,
				5.2rem
			);
	}

	.home-supply-products a {
		padding:
			17px
			0
			21px;
	}

	.home-supply-products a:hover .product-word {
		transform: none;
	}

	.home-business-image {
		min-height: 420px;
	}

	.home-business-content {
		padding:
			75px
			20px
			85px;
	}

	.home-business-copy h2 {
		font-size:
			clamp(
				3.4rem,
				15vw,
				5rem
			);
	}

	.home-business-lead {
		margin-top: 26px;

		font-size: 1.3rem;
	}

	.home-business-copy p:not(.home-business-lead) {
		font-size: 16px;
	}

	.home-business-button {
		width: 100%;

		margin-top: 32px;
	}

	.home-trust {
		padding:
			85px
			20px;
	}

	.home-trust-copy h2 {
		font-size:
			clamp(
				3.4rem,
				15vw,
				5rem
			);
	}

	.home-trust-copy p {
		font-size: 17px;
		line-height: 1.75;
	}

	.home-trust-points {
		margin-top: 58px;
	}

	.home-trust-point {
		padding-top: 22px;
	}

	.home-trust-point strong {
		font-size: 1.65rem;
	}

	.home-trust-point span {
		font-size: 16px;
	}

}

/* =========================================================
   Small mobile header
   ========================================================= */

@media (max-width: 520px) {

	.header-shell {
		min-height: 76px;

		padding: 8px 14px;
	}

	.site-logo {
		height: 50px;
		max-width: 230px;
	}

	.mobile-navigation {
		top: 76px;
	}

	.mobile-menu-toggle {
		width: 44px;
		height: 44px;

		padding: 9px;
	}

}

/* =========================================================
   Small mobile hero
   ========================================================= */

@media (max-width: 480px) {

	.home-hero-media {
		height: 320px;

		background-position: 72% center;
	}

	.home-hero-inner {
		padding:
			44px
			18px
			54px;
	}

	.home-hero h1 {
		font-size:
			clamp(
				3.5rem,
				18vw,
				4.8rem
			);
	}

}

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
	width: 100%;

	background: #111111;
	color: #ffffff;

	padding:
		clamp(70px, 7vw, 105px)
		clamp(24px, 6vw, 96px)
		30px;
}

.footer-inner {
	width: 100%;
	max-width: 1500px;

	margin: 0 auto;
}

/* =========================================================
   Main footer
   ========================================================= */

.footer-main {
	display: grid;

	grid-template-columns:
		minmax(400px, 1.6fr)
		minmax(160px, 0.5fr)
		minmax(190px, 0.5fr);

	gap: clamp(60px, 8vw, 140px);

	align-items: start;
}

/* =========================================================
   Brand
   ========================================================= */

.footer-brand {
	width: 100%;
	max-width: 520px;
}

.footer-logo-link {
	display: inline-block;
}

.footer-logo {
	width: auto;
	height: 78px;

	object-fit: contain;
}

.footer-brand p {
	max-width: 480px;

	margin: 28px 0 0;

	font-size: 16px;
	line-height: 1.75;

	color: rgba(255, 255, 255, 0.58);
}

/* =========================================================
   Columns
   ========================================================= */

.footer-column h3 {
	margin: 0 0 24px;

	font-size: 15px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.01em;

	color: #ffffff;
}

.footer-column h3::after {
	content: "";

	display: block;

	width: 42px;
	height: 3px;

	margin-top: 12px;

	border-radius: 999px;

	background:
		linear-gradient(
			90deg,
			#ffd84d,
			#ff4faa,
			#8057ff,
			#39bfff
		);
}

.footer-column nav {
	display: flex;
	flex-direction: column;

	align-items: flex-start;

	gap: 12px;
}

.footer-column nav a {
	font-size: 15px;
	line-height: 1.5;
	font-weight: 600;

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

	transition:
		color 0.2s ease,
		transform 0.2s ease;
}

.footer-column nav a:hover {
	color: #ffffff;

	transform: translateX(3px);
}

/* =========================================================
   Bottom
   ========================================================= */

.footer-bottom {
	margin-top: clamp(60px, 7vw, 90px);

	padding-top: 24px;

	border-top:
		1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom p {
	margin: 0;

	font-size: 13px;
	line-height: 1.5;

	color: rgba(255, 255, 255, 0.38);
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 900px) {

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

		gap:
			55px
			50px;
	}

	.footer-brand {
		grid-column: 1 / -1;

		max-width: 620px;
	}

}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 600px) {

	.site-footer {
		padding:
			60px
			20px
			26px;
	}

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

		gap:
			50px
			30px;
	}

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

	.footer-logo {
		height: 68px;
	}

	.footer-brand p {
		margin-top: 24px;

		font-size: 15px;
	}

	.footer-column h3 {
		margin-bottom: 20px;
	}

	.footer-column nav {
		gap: 11px;
	}

	.footer-column nav a {
		font-size: 14px;
	}

	.footer-bottom {
		margin-top: 55px;
	}

}

/* =========================================================
   ABOUT PAGE
   ========================================================= */


/* =========================================================
   About hero
   ========================================================= */

.about-hero {
	position: relative;
	width: 100%;
	min-height: 700px;
	overflow: hidden;
	background: #fffdf9;
}

.about-hero-media {
	position: absolute;
	inset: 0;

	background-image:
		url("../images/about-hero.png");

	background-repeat: no-repeat;
	background-position: center right;
	background-size: cover;
}

.about-hero-overlay {
	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			90deg,
			rgba(255, 253, 249, 1) 0%,
			rgba(255, 253, 249, 0.98) 31%,
			rgba(255, 253, 249, 0.84) 46%,
			rgba(255, 253, 249, 0.36) 61%,
			rgba(255, 253, 249, 0) 76%
		);
}

.about-hero-inner {
	position: relative;
	z-index: 2;

	width: 100%;
	min-height: 700px;

	display: flex;
	align-items: center;

	padding:
		clamp(85px, 8vw, 140px)
		clamp(24px, 6vw, 96px);
}

.about-hero-copy {
	width: min(100%, 720px);
}

.about-hero h1 {
	margin: 0;
	padding-bottom: 0.08em;

	font-size: clamp(4.8rem, 8.3vw, 8.8rem);
	line-height: 0.96;
	letter-spacing: -0.07em;
	font-weight: 900;

	color: #111111;
}

.about-hero h1 span {
	display: block;

	padding-bottom: 0.08em;

	background:
		linear-gradient(
			90deg,
			#ffcf18 0%,
			#ff4faa 32%,
			#8057ff 62%,
			#39bfff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
}

.about-hero-copy p {
	max-width: 620px;

	margin: 30px 0 0;

	font-size: clamp(18px, 1.4vw, 21px);
	line-height: 1.65;

	color: rgba(17, 17, 17, 0.68);
}

.about-hero::after {
	content: "";

	position: absolute;
	z-index: 4;

	left: 0;
	right: 0;
	bottom: 0;

	height: 5px;

	background:
		linear-gradient(
			90deg,
			#ffd84d 0%,
			#ff4faa 32%,
			#39bfff 66%,
			#8057ff 100%
		);
}


/* =========================================================
   About intro
   ========================================================= */

.about-intro {
	width: 100%;

	padding:
		clamp(110px, 10vw, 170px)
		clamp(24px, 6vw, 96px);

	background: #ffffff;
}

.about-intro-inner {
	width: 100%;
	max-width: 1500px;

	margin: 0 auto;

	display: grid;

	grid-template-columns:
		minmax(420px, 0.9fr)
		minmax(500px, 1fr);

	gap: clamp(70px, 9vw, 150px);

	align-items: start;
}

.about-intro-heading h2 {
	margin: 0;

	font-size: clamp(3.8rem, 5.5vw, 6.5rem);
	line-height: 0.98;
	letter-spacing: -0.06em;
	font-weight: 900;

	color: #111111;
}

.about-intro-heading h2 span {
	display: block;

	padding-bottom: 0.08em;

	background:
		linear-gradient(
			90deg,
			#ffcf18 0%,
			#ff4faa 34%,
			#8057ff 67%,
			#39bfff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
}

.about-intro-copy {
	max-width: 690px;
}

.about-intro-lead {
	margin: 0 0 28px;

	font-size: clamp(1.45rem, 2vw, 1.9rem);
	line-height: 1.45;
	letter-spacing: -0.025em;
	font-weight: 750;

	color: #111111;
}

.about-intro-copy p:not(.about-intro-lead) {
	margin: 0;

	font-size: 17px;
	line-height: 1.8;

	color: rgba(17, 17, 17, 0.61);
}

.about-intro-copy p + p {
	margin-top: 20px;
}


/* =========================================================
   About approach
   ========================================================= */

.about-approach {
	width: 100%;

	padding:
		clamp(110px, 10vw, 170px)
		clamp(24px, 6vw, 96px);

	background: #111111;
	color: #ffffff;
}

.about-approach-inner {
	width: 100%;
	max-width: 1500px;

	margin: 0 auto;
}

.about-approach-heading {
	width: min(100%, 950px);
}

.about-approach-heading h2 {
	margin: 0;

	font-size: clamp(4rem, 6vw, 7rem);
	line-height: 0.97;
	letter-spacing: -0.065em;
	font-weight: 900;

	color: #ffffff;
}

.about-approach-heading h2 span {
	display: block;

	padding-bottom: 0.08em;

	background:
		linear-gradient(
			90deg,
			#ffd84d 0%,
			#ff4faa 32%,
			#8057ff 65%,
			#39bfff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
}

.about-approach-heading > p {
	width: min(100%, 700px);

	margin: 30px 0 0;

	font-size: 18px;
	line-height: 1.75;

	color: rgba(255, 255, 255, 0.62);
}


/* =========================================================
   About approach points
   ========================================================= */

.about-approach-points {
	display: grid;

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

	gap: clamp(40px, 5vw, 80px);

	margin-top: clamp(70px, 7vw, 100px);
}

.about-approach-point {
	position: relative;

	padding-top: 28px;
}

.about-approach-point::before {
	content: "";

	position: absolute;

	top: 0;
	left: 0;

	width: 100%;
	height: 4px;

	border-radius: 999px;
}

.about-approach-point:nth-child(1)::before {
	background:
		linear-gradient(
			90deg,
			#39bfff,
			#8057ff
		);
}

.about-approach-point:nth-child(2)::before {
	background:
		linear-gradient(
			90deg,
			#ff4faa,
			#8057ff
		);
}

.about-approach-point:nth-child(3)::before {
	background:
		linear-gradient(
			90deg,
			#ffd84d,
			#ff4faa
		);
}

.about-approach-point h3 {
	margin: 0;

	font-size: clamp(1.7rem, 2.2vw, 2.4rem);
	line-height: 1.15;
	letter-spacing: -0.04em;
	font-weight: 850;

	color: #ffffff;
}

.about-approach-point p {
	max-width: 410px;

	margin: 18px 0 0;

	font-size: 16px;
	line-height: 1.75;

	color: rgba(255, 255, 255, 0.58);
}


/* =========================================================
   About tablet
   ========================================================= */

@media (max-width: 1050px) {

	.about-hero,
	.about-hero-inner {
		min-height: 640px;
	}

	.about-hero-media {
		background-position: 60% center;
	}

	.about-hero-overlay {
		background:
			linear-gradient(
				90deg,
				rgba(255, 253, 249, 1) 0%,
				rgba(255, 253, 249, 0.98) 38%,
				rgba(255, 253, 249, 0.74) 58%,
				rgba(255, 253, 249, 0.18) 80%
			);
	}

	.about-hero-copy {
		width: min(100%, 620px);
	}

	.about-intro-inner {
		grid-template-columns: 1fr;

		gap: 55px;
	}

	.about-intro-heading {
		max-width: 800px;
	}

	.about-intro-copy {
		max-width: 800px;
	}

	.about-approach-points {
		grid-template-columns: 1fr;

		gap: 45px;
	}

	.about-approach-point {
		max-width: 760px;
	}

	.about-approach-point p {
		max-width: 680px;
	}

}


/* =========================================================
   About mobile
   ========================================================= */

@media (max-width: 720px) {

	.about-hero {
		min-height: auto;

		background: #fffdf9;
	}

	.about-hero-media {
		position: relative;

		width: 100%;
		height: 390px;

		background-size: cover;
		background-position: 70% center;
	}

	.about-hero-overlay {
		display: none;
	}

	.about-hero-inner {
		min-height: auto;

		padding:
			52px
			20px
			62px;

		background:
			linear-gradient(
				180deg,
				#fffdf9 0%,
				#ffffff 100%
			);
	}

	.about-hero h1 {
		font-size:
			clamp(
				4rem,
				18vw,
				5.8rem
			);
	}

	.about-hero-copy p {
		margin-top: 24px;

		font-size: 18px;
	}

	.about-intro {
		padding:
			80px
			20px;
	}

	.about-intro-heading h2 {
		font-size:
			clamp(
				3.4rem,
				15vw,
				5rem
			);
	}

	.about-intro-copy p:not(.about-intro-lead) {
		font-size: 16px;
	}

	.about-approach {
		padding:
			85px
			20px;
	}

	.about-approach-heading h2 {
		font-size:
			clamp(
				3.4rem,
				15vw,
				5rem
			);
	}

	.about-approach-heading > p {
		font-size: 17px;
	}

	.about-approach-points {
		margin-top: 60px;
	}

}


/* =========================================================
   About small mobile
   ========================================================= */

@media (max-width: 480px) {

	.about-hero-media {
		height: 320px;

		background-position: 72% center;
	}

	.about-hero-inner {
		padding:
			44px
			18px
			54px;
	}

	.about-hero h1 {
		font-size:
			clamp(
				3.5rem,
				18vw,
				4.8rem
			);
	}

}

/* =========================================================
   WHAT WE SUPPLY PAGE
   ========================================================= */


/* =========================================================
   Supply hero
   ========================================================= */

.supply-hero {
	position: relative;
	width: 100%;
	min-height: 700px;
	overflow: hidden;
	background: #fffdf9;
}

.supply-hero-media {
	position: absolute;
	inset: 0;

	background-image:
		url("../images/supply-hero.png");

	background-repeat: no-repeat;
	background-position: center right;
	background-size: cover;
}

.supply-hero-overlay {
	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			90deg,
			rgba(255, 253, 249, 1) 0%,
			rgba(255, 253, 249, 0.98) 31%,
			rgba(255, 253, 249, 0.84) 46%,
			rgba(255, 253, 249, 0.36) 61%,
			rgba(255, 253, 249, 0) 76%
		);
}

.supply-hero-inner {
	position: relative;
	z-index: 2;

	width: 100%;
	min-height: 700px;

	display: flex;
	align-items: center;

	padding:
		clamp(85px, 8vw, 140px)
		clamp(24px, 6vw, 96px);
}

.supply-hero-copy {
	width: min(100%, 760px);
}

.supply-hero h1 {
	margin: 0;
	padding-bottom: 0.08em;

	font-size: clamp(4.8rem, 8.2vw, 8.8rem);
	line-height: 0.96;
	letter-spacing: -0.07em;
	font-weight: 900;

	color: #111111;
}

.supply-hero h1 span {
	display: block;

	padding-bottom: 0.08em;

	background:
		linear-gradient(
			90deg,
			#ffcf18 0%,
			#ff4faa 32%,
			#8057ff 62%,
			#39bfff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
}

.supply-hero-copy p {
	max-width: 640px;

	margin: 30px 0 0;

	font-size: clamp(18px, 1.4vw, 21px);
	line-height: 1.65;

	color: rgba(17, 17, 17, 0.68);
}

.supply-hero::after {
	content: "";

	position: absolute;
	z-index: 4;

	left: 0;
	right: 0;
	bottom: 0;

	height: 5px;

	background:
		linear-gradient(
			90deg,
			#ffd84d 0%,
			#ff4faa 32%,
			#39bfff 66%,
			#8057ff 100%
		);
}


/* =========================================================
   Supply intro
   ========================================================= */

.supply-intro {
	width: 100%;

	padding:
		clamp(105px, 10vw, 165px)
		clamp(24px, 6vw, 96px);

	background: #ffffff;
}

.supply-intro-inner {
	width: min(100%, 1050px);

	margin: 0 auto;

	text-align: center;
}

.supply-intro h2 {
	margin: 0;

	font-size: clamp(3.8rem, 6.2vw, 6.8rem);
	line-height: 1;
	letter-spacing: -0.06em;
	font-weight: 900;

	color: #111111;
}

.supply-intro h2 span {
	display: block;

	padding-bottom: 0.08em;

	background:
		linear-gradient(
			90deg,
			#ffcf18 0%,
			#ff4faa 30%,
			#8057ff 58%,
			#39bfff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
}

.supply-intro-lead {
	max-width: 800px;

	margin: 34px auto 0;

	font-size: clamp(1.4rem, 2vw, 1.9rem);
	line-height: 1.5;
	letter-spacing: -0.025em;
	font-weight: 700;

	color: #111111;
}

.supply-intro-text {
	max-width: 780px;

	margin: 22px auto 0;

	font-size: 18px;
	line-height: 1.75;

	color: rgba(17, 17, 17, 0.60);
}


/* =========================================================
   Categories
   ========================================================= */

.supply-categories {
	width: 100%;

	padding:
		clamp(100px, 9vw, 150px)
		clamp(24px, 6vw, 96px);

	background: #111111;
	color: #ffffff;
}

.supply-categories-inner {
	width: 100%;
	max-width: 1500px;

	margin: 0 auto;
}

.supply-category {
	display: grid;

	grid-template-columns:
		minmax(380px, 0.9fr)
		minmax(500px, 1fr);

	gap: clamp(70px, 9vw, 150px);

	align-items: start;

	padding: 48px 0;

	border-top:
		1px solid rgba(255, 255, 255, 0.13);
}

.supply-category:last-child {
	border-bottom:
		1px solid rgba(255, 255, 255, 0.13);
}

.supply-category-title span {
	display: block;

	font-size: clamp(4rem, 6vw, 7rem);
	line-height: 0.95;
	letter-spacing: -0.065em;
	font-weight: 900;
}

.supply-category-ink .supply-category-title span {
	color: #39bfff;
}

.supply-category-toner .supply-category-title span {
	color: #ff4faa;
}

.supply-category-consumables .supply-category-title span {
	color: #ffd84d;
}

.supply-category-business .supply-category-title span {
	color: #9b72ff;
}

.supply-category-copy {
	max-width: 650px;
}

.supply-category-copy h2 {
	margin: 0;

	font-size: clamp(1.8rem, 2.3vw, 2.5rem);
	line-height: 1.2;
	letter-spacing: -0.035em;
	font-weight: 850;

	color: #ffffff;
}

.supply-category-copy p {
	margin: 18px 0 0;

	font-size: 17px;
	line-height: 1.8;

	color: rgba(255, 255, 255, 0.60);
}


/* =========================================================
   Help section
   ========================================================= */

.supply-help {
	width: 100%;

	padding:
		clamp(110px, 10vw, 170px)
		clamp(24px, 6vw, 96px);

	background: #f7f7f5;
}

.supply-help-inner {
	width: 100%;
	max-width: 1500px;

	margin: 0 auto;

	display: grid;

	grid-template-columns:
		minmax(420px, 0.9fr)
		minmax(500px, 1fr);

	gap: clamp(70px, 9vw, 150px);

	align-items: start;
}

.supply-help-heading h2 {
	margin: 0;

	font-size: clamp(3.8rem, 5.5vw, 6.5rem);
	line-height: 0.98;
	letter-spacing: -0.06em;
	font-weight: 900;

	color: #111111;
}

.supply-help-heading h2 span {
	display: block;

	padding-bottom: 0.08em;

	background:
		linear-gradient(
			90deg,
			#ffcf18 0%,
			#ff4faa 34%,
			#8057ff 67%,
			#39bfff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
}

.supply-help-copy {
	max-width: 690px;
}

.supply-help-lead {
	margin: 0 0 28px;

	font-size: clamp(1.4rem, 2vw, 1.9rem);
	line-height: 1.45;
	letter-spacing: -0.025em;
	font-weight: 750;

	color: #111111;
}

.supply-help-copy p:not(.supply-help-lead) {
	margin: 0;

	font-size: 17px;
	line-height: 1.8;

	color: rgba(17, 17, 17, 0.61);
}

.supply-help-copy p + p {
	margin-top: 20px;
}

.supply-help-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 58px;

	margin-top: 34px;
	padding: 0 30px;

	border-radius: 14px;

	background: #111111;
	color: #ffffff;

	font-size: 15px;
	font-weight: 800;

	transition:
		transform 0.2s ease,
		background 0.2s ease,
		box-shadow 0.2s ease;
}

.supply-help-button:hover {
	transform: translateY(-3px);

	background: #242424;

	box-shadow:
		-5px 5px 0 #ffd84d,
		5px -5px 0 #39bfff;
}


/* =========================================================
   Supply tablet
   ========================================================= */

@media (max-width: 1050px) {

	.supply-hero,
	.supply-hero-inner {
		min-height: 640px;
	}

	.supply-hero-media {
		background-position: 60% center;
	}

	.supply-hero-copy {
		width: min(100%, 620px);
	}

	.supply-category {
		grid-template-columns: 1fr;

		gap: 25px;
	}

	.supply-help-inner {
		grid-template-columns: 1fr;

		gap: 55px;
	}

	.supply-help-copy {
		max-width: 800px;
	}

}


/* =========================================================
   Supply mobile
   ========================================================= */

@media (max-width: 720px) {

	.supply-hero {
		min-height: auto;
	}

	.supply-hero-media {
		position: relative;

		width: 100%;
		height: 390px;

		background-size: cover;
		background-position: 70% center;
	}

	.supply-hero-overlay {
		display: none;
	}

	.supply-hero-inner {
		min-height: auto;

		padding:
			52px
			20px
			62px;

		background:
			linear-gradient(
				180deg,
				#fffdf9 0%,
				#ffffff 100%
			);
	}

	.supply-hero h1 {
		font-size:
			clamp(
				4rem,
				18vw,
				5.8rem
			);
	}

	.supply-hero-copy p {
		font-size: 18px;
	}

	.supply-intro {
		padding:
			80px
			20px;
	}

	.supply-intro h2 {
		font-size:
			clamp(
				3.4rem,
				15vw,
				5rem
			);
	}

	.supply-intro-text {
		font-size: 17px;
	}

	.supply-categories {
		padding:
			70px
			20px;
	}

	.supply-category {
		padding: 36px 0;
	}

	.supply-category-title span {
		font-size:
			clamp(
				3.2rem,
				15vw,
				5.2rem
			);
	}

	.supply-category-copy p {
		font-size: 16px;
	}

	.supply-help {
		padding:
			80px
			20px;
	}

	.supply-help-heading h2 {
		font-size:
			clamp(
				3.4rem,
				15vw,
				5rem
			);
	}

	.supply-help-copy p:not(.supply-help-lead) {
		font-size: 16px;
	}

	.supply-help-button {
		width: 100%;
	}

}


/* =========================================================
   Supply small mobile
   ========================================================= */

@media (max-width: 480px) {

	.supply-hero-media {
		height: 320px;
		background-position: 72% center;
	}

	.supply-hero-inner {
		padding:
			44px
			18px
			54px;
	}

	.supply-hero h1 {
		font-size:
			clamp(
				3.5rem,
				18vw,
				4.8rem
			);
	}

}

/* =========================================================
   CONTACT PAGE
   ========================================================= */


/* =========================================================
   Main contact area
   ========================================================= */

.contact-main {
	position: relative;
	width: 100%;

	padding:
		clamp(110px, 9vw, 160px)
		clamp(24px, 6vw, 96px);

	background:
		linear-gradient(
			135deg,
			#fffdf9 0%,
			#ffffff 52%,
			#f8f6ff 100%
		);
}

.contact-main::after {
	content: "";
	position: absolute;

	left: 0;
	right: 0;
	bottom: 0;

	height: 5px;

	background:
		linear-gradient(
			90deg,
			#ffd84d 0%,
			#ff4faa 32%,
			#39bfff 66%,
			#8057ff 100%
		);
}

.contact-main-inner {
	width: 100%;
	max-width: 1500px;

	margin: 0 auto;

	display: grid;

	grid-template-columns:
		minmax(420px, 0.92fr)
		minmax(540px, 1fr);

	gap: clamp(90px, 10vw, 170px);

	align-items: start;
}


/* =========================================================
   Left-hand copy
   ========================================================= */

.contact-intro {
	width: 100%;
	max-width: 690px;
}

.contact-intro h1 {
	margin: 0;

	font-size: clamp(5rem, 7.4vw, 8.6rem);
	line-height: 0.94;
	letter-spacing: -0.072em;
	font-weight: 900;

	color: #111111;
}

.contact-intro h1 span {
	display: block;

	padding-bottom: 0.08em;

	background:
		linear-gradient(
			90deg,
			#ffcf18 0%,
			#ff4faa 30%,
			#8057ff 61%,
			#39bfff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
}

.contact-intro-lead {
	max-width: 610px;

	margin: 34px 0 0;

	font-size: clamp(1.4rem, 1.9vw, 1.8rem);
	line-height: 1.48;
	letter-spacing: -0.025em;
	font-weight: 750;

	color: #111111;
}

.contact-intro-text {
	max-width: 590px;

	margin: 22px 0 0;

	font-size: 17px;
	line-height: 1.78;

	color: rgba(17, 17, 17, 0.58);
}


/* =========================================================
   Email detail
   ========================================================= */

.contact-detail {
	margin-top: 44px;
	padding-top: 26px;

	border-top:
		1px solid rgba(17, 17, 17, 0.10);
}

.contact-detail span {
	display: block;

	margin-bottom: 8px;

	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;

	color: rgba(17, 17, 17, 0.36);
}

.contact-detail a {
	display: inline-block;

	font-size: clamp(1.25rem, 1.55vw, 1.5rem);
	line-height: 1.4;
	font-weight: 800;
	letter-spacing: -0.03em;

	color: #111111;

	transition:
		color 0.2s ease,
		transform 0.2s ease;
}

.contact-detail a:hover {
	color: #8057ff;
	transform: translateX(3px);
}


/* =========================================================
   Form wrapper
   ========================================================= */

.contact-form-wrap {
	width: 100%;
	max-width: 720px;
}

.contact-form-heading {
	margin-bottom: 42px;
}

.contact-form-heading h2 {
	margin: 0;

	font-size: clamp(2.7rem, 3.7vw, 4.4rem);
	line-height: 0.98;
	letter-spacing: -0.055em;
	font-weight: 900;

	color: #111111;
}

.contact-form-heading p {
	max-width: 590px;

	margin: 18px 0 0;

	font-size: 16px;
	line-height: 1.72;

	color: rgba(17, 17, 17, 0.56);
}


/* =========================================================
   Form fields
   ========================================================= */

.contact-form {
	width: 100%;
}

.contact-field {
	width: 100%;
	margin-bottom: 28px;
}

.contact-field label {
	display: block;

	margin-bottom: 10px;

	font-size: 13px;
	line-height: 1.4;
	font-weight: 800;
	letter-spacing: 0.01em;

	color: #111111;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
	display: block;

	width: 100%;

	border: 0;
	border-bottom:
		2px solid rgba(17, 17, 17, 0.14);

	border-radius: 0;

	outline: none;

	background: transparent;

	color: #111111;

	font-size: 17px;
	line-height: 1.5;

	transition:
		border-color 0.2s ease,
		background 0.2s ease;
}

.contact-field input,
.contact-field select {
	min-height: 58px;
	padding: 10px 0 12px;
}

.contact-field textarea {
	min-height: 170px;
	padding: 12px 0 16px;

	resize: vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
	color: rgba(17, 17, 17, 0.30);
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
	border-color: #8057ff;
}

.contact-field select {
	cursor: pointer;
}

.contact-field-help {
	display: block;

	margin-top: 9px;

	font-size: 13px;
	line-height: 1.55;

	color: rgba(17, 17, 17, 0.40);
}


/* =========================================================
   Privacy
   ========================================================= */

.contact-consent {
	margin: 8px 0 34px;
}

.contact-consent label {
	display: flex;
	align-items: flex-start;

	gap: 12px;

	cursor: pointer;
}

.contact-consent input[type="checkbox"] {
	width: 18px;
	height: 18px;

	margin: 3px 0 0;

	flex: 0 0 auto;

	accent-color: #8057ff;
}

.contact-consent span {
	max-width: 600px;

	font-size: 13px;
	line-height: 1.6;

	color: rgba(17, 17, 17, 0.48);
}

.contact-consent a {
	font-weight: 800;
	color: #111111;

	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}


/* =========================================================
   Submit button
   ========================================================= */

.contact-submit {
	position: relative;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 190px;
	min-height: 60px;

	padding: 0 30px;

	border: 2px solid #111111;
	border-radius: 999px;

	background: #ffffff;
	color: #111111;

	font-size: 15px;
	font-weight: 850;
	letter-spacing: -0.01em;

	cursor: pointer;

	overflow: hidden;

	transition:
		transform 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}

.contact-submit::before {
	content: "";

	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			90deg,
			#ffd84d 0%,
			#ff4faa 34%,
			#8057ff 66%,
			#39bfff 100%
		);

	transform: translateX(-101%);
	transition: transform 0.28s ease;

	z-index: 0;
}

.contact-submit:hover::before {
	transform: translateX(0);
}

.contact-submit:hover {
	color: #111111;
	border-color: transparent;
	transform: translateY(-2px);
}

.contact-submit {
	z-index: 1;
}

.contact-submit::after {
	content: "";
}

.contact-submit {
	isolation: isolate;
}

.contact-submit::before {
	z-index: -1;
}


/* =========================================================
   Help section
   ========================================================= */

.contact-help {
	width: 100%;

	padding:
		clamp(110px, 10vw, 165px)
		clamp(24px, 6vw, 96px);

	background: #111111;
	color: #ffffff;
}

.contact-help-inner {
	width: 100%;
	max-width: 1500px;

	margin: 0 auto;

	display: grid;

	grid-template-columns:
		minmax(420px, 0.9fr)
		minmax(500px, 1fr);

	gap: clamp(70px, 9vw, 150px);

	align-items: start;
}

.contact-help-heading h2 {
	margin: 0;

	font-size: clamp(4rem, 5.8vw, 6.8rem);
	line-height: 0.98;
	letter-spacing: -0.06em;
	font-weight: 900;

	color: #ffffff;
}

.contact-help-heading h2 span {
	display: block;

	padding-bottom: 0.08em;

	background:
		linear-gradient(
			90deg,
			#ffd84d 0%,
			#ff4faa 32%,
			#8057ff 65%,
			#39bfff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
}

.contact-help-copy {
	max-width: 690px;
}

.contact-help-lead {
	margin: 0 0 28px;

	font-size: clamp(1.4rem, 2vw, 1.9rem);
	line-height: 1.45;
	letter-spacing: -0.025em;
	font-weight: 750;

	color: #ffffff;
}

.contact-help-copy p:not(.contact-help-lead) {
	margin: 0;

	font-size: 17px;
	line-height: 1.8;

	color: rgba(255, 255, 255, 0.60);
}

.contact-help-copy p + p {
	margin-top: 20px;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1000px) {

	.contact-main-inner {
		grid-template-columns: 1fr;
		gap: 72px;
	}

	.contact-intro {
		max-width: 820px;
	}

	.contact-form-wrap {
		max-width: 820px;
	}

	.contact-help-inner {
		grid-template-columns: 1fr;
		gap: 55px;
	}

	.contact-help-copy {
		max-width: 820px;
	}

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 700px) {

	.contact-main {
		padding:
			76px
			20px
			88px;
	}

	.contact-intro h1 {
		font-size:
			clamp(
				4rem,
				18vw,
				5.8rem
			);
	}

	.contact-intro-lead {
		font-size: 1.3rem;
	}

	.contact-intro-text {
		font-size: 16px;
	}

	.contact-form-heading h2 {
		font-size:
			clamp(
				2.8rem,
				12vw,
				4rem
			);
	}

	.contact-field input,
	.contact-field select,
	.contact-field textarea {
		font-size: 16px;
	}

	.contact-submit {
		width: 100%;
	}

	.contact-help {
		padding:
			82px
			20px;
	}

	.contact-help-heading h2 {
		font-size:
			clamp(
				3.4rem,
				15vw,
				5rem
			);
	}

	.contact-help-copy p:not(.contact-help-lead) {
		font-size: 16px;
	}

}

/* =========================================================
   LEGAL PAGES
   ========================================================= */


/* =========================================================
   Legal hero
   ========================================================= */

.legal-hero {
	position: relative;
	width: 100%;

	padding:
		clamp(100px, 9vw, 150px)
		clamp(24px, 6vw, 96px);

	background:
		linear-gradient(
			135deg,
			#fffdf9 0%,
			#ffffff 55%,
			#f8f6ff 100%
		);
}

.legal-hero::after {
	content: "";

	position: absolute;

	left: 0;
	right: 0;
	bottom: 0;

	height: 5px;

	background:
		linear-gradient(
			90deg,
			#ffd84d 0%,
			#ff4faa 32%,
			#39bfff 66%,
			#8057ff 100%
		);
}

.legal-hero-inner {
	width: 100%;
	max-width: 1500px;

	margin: 0 auto;
}

.legal-hero h1 {
	margin: 0;

	font-size: clamp(5rem, 8vw, 9rem);
	line-height: 0.94;
	letter-spacing: -0.072em;
	font-weight: 900;

	color: #111111;
}

.legal-hero h1 span {
	display: block;

	padding-bottom: 0.08em;

	background:
		linear-gradient(
			90deg,
			#ffcf18 0%,
			#ff4faa 30%,
			#8057ff 62%,
			#39bfff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
}

.legal-hero p {
	max-width: 720px;

	margin: 30px 0 0;

	font-size: clamp(18px, 1.5vw, 21px);
	line-height: 1.7;

	color: rgba(17, 17, 17, 0.62);
}

.legal-updated {
	margin-top: 28px;

	font-size: 13px;
	line-height: 1.5;
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;

	color: rgba(17, 17, 17, 0.38);
}


/* =========================================================
   Legal content
   ========================================================= */

.legal-content {
	width: 100%;

	padding:
		clamp(90px, 8vw, 135px)
		clamp(24px, 6vw, 96px);

	background: #ffffff;
}

.legal-content-inner {
	width: 100%;
	max-width: 1500px;

	margin: 0 auto;

	display: grid;

	grid-template-columns:
		minmax(220px, 0.32fr)
		minmax(600px, 1fr);

	gap: clamp(70px, 8vw, 140px);

	align-items: start;
}


/* =========================================================
   Legal sidebar
   ========================================================= */

.legal-sidebar {
	position: sticky;
	top: 140px;
}

.legal-sidebar-label {
	margin: 0 0 22px;

	font-size: 13px;
	font-weight: 850;
	letter-spacing: 0.08em;
	text-transform: uppercase;

	color: #111111;
}

.legal-sidebar-label::after {
	content: "";

	display: block;

	width: 46px;
	height: 3px;

	margin-top: 13px;

	border-radius: 999px;

	background:
		linear-gradient(
			90deg,
			#ffd84d,
			#ff4faa,
			#8057ff,
			#39bfff
		);
}

.legal-nav {
	display: flex;
	flex-direction: column;

	align-items: flex-start;

	gap: 9px;
}

.legal-nav a {
	font-size: 14px;
	line-height: 1.45;
	font-weight: 650;

	color: rgba(17, 17, 17, 0.46);

	transition:
		color 0.2s ease,
		transform 0.2s ease;
}

.legal-nav a:hover {
	color: #111111;
	transform: translateX(3px);
}


/* =========================================================
   Legal document
   ========================================================= */

.legal-document {
	width: 100%;
	max-width: 900px;
}

.legal-section {
	padding:
		0
		0
		clamp(60px, 6vw, 90px);

	margin-bottom:
		clamp(60px, 6vw, 90px);

	border-bottom:
		1px solid rgba(17, 17, 17, 0.10);

	scroll-margin-top: 150px;
}

.legal-section-last {
	margin-bottom: 0;
	padding-bottom: 0;

	border-bottom: 0;
}

.legal-section h2 {
	margin: 0 0 28px;

	font-size: clamp(2.2rem, 3.2vw, 3.7rem);
	line-height: 1.08;
	letter-spacing: -0.05em;
	font-weight: 900;

	color: #111111;
}

.legal-section h3 {
	margin: 38px 0 13px;

	font-size: clamp(1.3rem, 1.7vw, 1.55rem);
	line-height: 1.3;
	letter-spacing: -0.025em;
	font-weight: 850;

	color: #111111;
}

.legal-section p {
	margin: 0;

	font-size: 16px;
	line-height: 1.8;

	color: rgba(17, 17, 17, 0.62);
}

.legal-section p + p {
	margin-top: 20px;
}

.legal-section ul {
	margin: 24px 0 0;
	padding: 0 0 0 22px;
}

.legal-section li {
	padding-left: 7px;

	font-size: 16px;
	line-height: 1.75;

	color: rgba(17, 17, 17, 0.62);
}

.legal-section li + li {
	margin-top: 8px;
}

.legal-section strong {
	font-weight: 800;

	color: #111111;
}

.legal-section a {
	font-weight: 750;

	color: #111111;

	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;

	transition: color 0.2s ease;
}

.legal-section a:hover {
	color: #8057ff;
}


/* Company details */

.legal-details {
	margin-top: 30px;

	padding: 28px 0;

	border-top:
		1px solid rgba(17, 17, 17, 0.10);

	border-bottom:
		1px solid rgba(17, 17, 17, 0.10);
}

.legal-details p + p {
	margin-top: 18px;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1000px) {

	.legal-content-inner {
		grid-template-columns: 1fr;

		gap: 60px;
	}

	.legal-sidebar {
		position: static;
	}

	.legal-nav {
		display: grid;

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

		gap: 10px 30px;

		max-width: 650px;
	}

	.legal-document {
		max-width: 850px;
	}

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 700px) {

	.legal-hero {
		padding:
			78px
			20px
			85px;
	}

	.legal-hero h1 {
		font-size:
			clamp(
				4rem,
				18vw,
				5.8rem
			);
	}

	.legal-hero p {
		font-size: 17px;
	}

	.legal-content {
		padding:
			70px
			20px
			90px;
	}

	.legal-nav {
		grid-template-columns: 1fr;
	}

	.legal-section {
		padding-bottom: 55px;
		margin-bottom: 55px;
	}

	.legal-section h2 {
		font-size:
			clamp(
				2.2rem,
				10vw,
				3.2rem
			);
	}

	.legal-section p,
	.legal-section li {
		font-size: 15px;
	}

}

/* =========================================================
   FOOTER COOKIE SETTINGS LINK
   ========================================================= */

.footer-cookie-settings {
	display: inline-block;

	padding: 0;

	border: 0;
	background: transparent;

	font-size: 15px;
	line-height: 1.5;
	font-weight: 600;
	font-family: inherit;

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

	cursor: pointer;

	transition:
		color 0.2s ease,
		transform 0.2s ease;
}

.footer-cookie-settings:hover {
	color: #ffffff;
	transform: translateX(3px);
}


/* =========================================================
   COOKIE BANNER
   ========================================================= */

.cookie-banner[hidden] {
	display: none !important;
}

.cookie-banner {
	position: fixed;

	left: 0;
	right: 0;
	bottom: 0;

	z-index: 9999;

	padding:
		18px
		clamp(18px, 3vw, 34px);

	background:
		rgba(17, 17, 17, 0.96);

	border-top:
		1px solid rgba(255, 255, 255, 0.10);

	box-shadow:
		0 -18px 50px rgba(0, 0, 0, 0.18);

	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.cookie-banner::before {
	content: "";

	position: absolute;

	left: 0;
	right: 0;
	top: 0;

	height: 4px;

	background:
		linear-gradient(
			90deg,
			#ffd84d 0%,
			#ff4faa 32%,
			#8057ff 65%,
			#39bfff 100%
		);
}

.cookie-banner-inner {
	width: 100%;
	max-width: 1500px;

	margin: 0 auto;

	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 40px;
}

.cookie-banner-copy {
	max-width: 850px;
}

.cookie-banner-title {
	margin: 0 0 5px;

	font-size: 16px;
	line-height: 1.3;
	font-weight: 850;

	color: #ffffff;
}

.cookie-banner-copy p:not(.cookie-banner-title) {
	margin: 0;

	font-size: 14px;
	line-height: 1.6;

	color: rgba(255, 255, 255, 0.62);
}

.cookie-banner-copy a {
	font-weight: 750;

	color: #ffffff;

	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.cookie-banner-actions {
	display: flex;
	align-items: center;

	gap: 10px;

	flex-shrink: 0;
}


/* =========================================================
   COOKIE BUTTONS
   ========================================================= */

.cookie-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 48px;

	padding: 0 22px;

	border-radius: 999px;

	font-size: 13px;
	line-height: 1;
	font-weight: 800;
	font-family: inherit;

	cursor: pointer;

	transition:
		transform 0.2s ease,
		background 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}

.cookie-button:hover {
	transform: translateY(-2px);
}

.cookie-button-secondary {
	border:
		1px solid rgba(255, 255, 255, 0.30);

	background: transparent;

	color: #ffffff;
}

.cookie-button-secondary:hover {
	border-color: #ffffff;
	background:
		rgba(255, 255, 255, 0.06);
}

.cookie-button-primary {
	border: 1px solid #ffffff;

	background: #ffffff;

	color: #111111;
}

.cookie-button-primary:hover {
	border-color: transparent;

	background:
		linear-gradient(
			90deg,
			#ffd84d 0%,
			#ff4faa 35%,
			#8057ff 67%,
			#39bfff 100%
		);

	color: #111111;
}


/* =========================================================
   COOKIE BANNER MOBILE
   ========================================================= */

@media (max-width: 800px) {

	.cookie-banner {
		padding:
			22px
			20px
			24px;
	}

	.cookie-banner-inner {
		flex-direction: column;
		align-items: stretch;

		gap: 20px;
	}

	.cookie-banner-copy {
		max-width: none;
	}

	.cookie-banner-actions {
		width: 100%;
	}

	.cookie-button {
		flex: 1;
	}

}


@media (max-width: 500px) {

	.cookie-banner-actions {
		flex-direction: column;
	}

	.cookie-button {
		width: 100%;
	}

}



/* =========================================================
   WORDPRESS ADMIN BAR + STICKY HEADER
   ========================================================= */

body.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {

	body.admin-bar .site-header {
		top: 46px;
	}

}