@media screen and (hover: hover) and (pointer: fine) {
	body,
	a,
	button,
	.button,
	[role="button"] {
		cursor: none;
	}

	.kisho-cursor {
		align-items: center;
		background: var(--colors--washed-red, #bb4c4c);
		border-radius: 999px;
		display: flex;
		height: 14px;
		justify-content: center;
		left: 0;
		margin-left: -7px;
		margin-top: -7px;
		opacity: 0;
		pointer-events: none;
		position: fixed;
		top: 0;
		transition: opacity .2s ease, width .25s ease, height .25s ease, margin .25s ease, background-color .2s ease;
		width: 14px;
		z-index: 12000;
	}

	.kisho-cursor.is-visible {
		opacity: 1;
	}

	.kisho-cursor.is-link {
		background: rgba(15, 19, 22, .12);
		height: 44px;
		margin-left: -22px;
		margin-top: -22px;
		width: 44px;
	}

	.kisho-cursor.is-project {
		background: var(--colors--washed-red, #bb4c4c);
		height: 110px;
		margin-left: -55px;
		margin-top: -55px;
		width: 110px;
	}

	/* The price-configurator and CTA sections have an accent-colored background, so the
	   default orange cursor would disappear into it — swap to a dark/cream pairing there. */
	.kisho-cursor.is-on-accent-bg {
		background: var(--colors--linear-two, #12171b);
	}

	.kisho-cursor.is-on-accent-bg.is-link {
		background: rgba(255, 248, 231, .35);
	}

	.kisho-cursor.is-on-accent-bg.is-project {
		background: var(--colors--linear-two, #12171b);
	}

	.kisho-cursor__label {
		color: #fff;
		font-family: var(--_typography---heading), Arial, sans-serif;
		font-size: .85rem;
		letter-spacing: .02em;
		opacity: 0;
		text-align: center;
		text-transform: uppercase;
		transition: opacity .2s ease;
		white-space: nowrap;
	}

	.kisho-cursor.is-project .kisho-cursor__label {
		opacity: 1;
	}
}
