/* FV slider: one complete image per frame. */
.wlp-slides {
	display: block;
	overflow: visible;
	background: #efede6;
	box-shadow: none;
}

.wlp-slides figure {
	position: absolute;
	inset: 0;
	display: grid;
	width: 100%;
	height: 100%;
	margin: 0;
	place-items: center;
	background: #fffefa;
	box-shadow: 9px 11px 0 rgba(119, 139, 196, .2);
	transition: transform .72s var(--ease), opacity .45s var(--ease);
}

.wlp-slides img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.wlp-slides figure:not(.is-active) figcaption {
	opacity: 0;
}

.wlp-slides figure.is-active {
	box-shadow: 0 0 0 3px #557fc0, 10px 13px 0 rgba(85, 127, 192, .22);
}

.wlp-crane__head,
.wlp-crane__cables,
.wlp-crane__claw {
	transition: left .7s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
	.wlp-crane__head,
	.wlp-crane__cables,
	.wlp-crane__claw,
	.wlp-slides figure {
		transition: none;
	}
}

/* PDF reference palette: colored feature blocks over the paper-grid base. */
.wlp-orbit {
	background-color: #f7dfa0;
	background-image: linear-gradient(135deg, #ffd99c 0%, #ffe4a6 38%, #dff080 100%);
	box-shadow: 0 0 0 100vmax #f1dfa0;
	clip-path: inset(0 -100vmax);
}

.wlp-orbit__board {
	background: rgba(255, 254, 249, .76);
}

.wlp-flow {
	background: linear-gradient(135deg, #cce887 0%, #dbe58b 48%, #ffad58 100%);
}

.wlp-replay {
	background: linear-gradient(135deg, #ffbad2 0%, #f4b8dc 43%, #afa9f5 100%);
}

.wlp-contact {
	background: linear-gradient(135deg, #a7b7ff 0%, #b9b1ef 48%, #ffad67 100%);
}

.wlp-contact aside,
.wlp-game {
	background: rgba(255, 254, 250, .92);
}

/* Section-title icons inspired by the supplied PDF artwork. */
.wlp-concept h2,
.wlp-section-head h2,
.wlp-replay h2,
.wlp-contact h2 {
	position: relative;
	z-index: 1;
}

.wlp-concept h2::before,
#location .wlp-section-head h2::before,
#gallery .wlp-section-head h2::before,
#plan .wlp-section-head h2::before,
#flow .wlp-section-head h2::before,
#faq .wlp-section-head h2::before,
.wlp-replay h2::before,
.wlp-contact h2::before {
	position: absolute;
	z-index: -1;
	content: "";
	pointer-events: none;
}

.wlp-concept h2::before {
	top: -34px;
	right: 4%;
	width: 66px;
	height: 66px;
	border: 11px solid rgba(243, 169, 163, .42);
	border-radius: 50%;
}

#location .wlp-section-head h2::before {
	top: -26px;
	right: -54px;
	width: 62px;
	height: 48px;
	background:
		radial-gradient(circle, #78d8dc 0 4px, transparent 5px) 0 0 / 20px 20px,
		radial-gradient(circle, #ffb057 0 5px, transparent 6px) 10px 10px / 24px 24px;
	opacity: .72;
}

#gallery .wlp-section-head h2::before {
	top: -40px;
	right: -64px;
	width: 84px;
	height: 70px;
	background:
		linear-gradient(90deg, transparent 42%, rgba(255,255,255,.75) 43% 57%, transparent 58%),
		linear-gradient(transparent 42%, rgba(255,255,255,.75) 43% 57%, transparent 58%);
	transform: rotate(12deg);
}

#plan .wlp-section-head h2::before {
	top: -22px;
	right: -58px;
	width: 55px;
	height: 55px;
	background:
		linear-gradient(90deg, transparent 43%, #b8e7f4 44% 56%, transparent 57%),
		linear-gradient(transparent 43%, #b8e7f4 44% 56%, transparent 57%);
	opacity: .9;
}

#flow .wlp-section-head h2::before {
	top: -38px;
	right: -58px;
	width: 62px;
	height: 62px;
	border: 10px solid rgba(255, 120, 91, .65);
	border-radius: 50%;
	box-shadow: 23px 18px 0 -13px #fff3a0;
}

#faq .wlp-section-head h2::before {
	top: -30px;
	right: -62px;
	width: 60px;
	height: 60px;
	border: 10px solid rgba(250, 220, 73, .62);
	border-radius: 50%;
	box-shadow: -30px 30px 0 -19px #ff8c78;
}

.wlp-replay h2::before {
	top: -42px;
	right: -42px;
	width: 72px;
	height: 72px;
	background:
		linear-gradient(90deg, transparent 44%, rgba(255,255,255,.72) 45% 55%, transparent 56%),
		linear-gradient(transparent 44%, rgba(255,255,255,.72) 45% 55%, transparent 56%);
	transform: rotate(45deg);
}

.wlp-contact h2::before {
	top: -40px;
	right: 8%;
	width: 76px;
	height: 76px;
	border: 12px solid rgba(255, 235, 105, .62);
	border-radius: 50%;
	box-shadow: 35px 35px 0 -24px rgba(255,255,255,.8);
}

.wlp-kicker {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.wlp-kicker::after {
	display: inline-block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #ffd84f;
	box-shadow: 8px 0 0 -3px #78d8dc;
	content: "";
}

.wlp-replay .wlp-kicker::after { background: #ff7da7; box-shadow: 8px 0 0 -3px #ffe868; }
.wlp-contact .wlp-kicker::after { background: #ffac59; box-shadow: 8px 0 0 -3px #8cdce1; }

@media (max-width: 780px) {
	.wlp-concept h2::before,
	.wlp-section-head h2::before,
	.wlp-replay h2::before,
	.wlp-contact h2::before {
		right: -10px;
		transform: scale(.7);
		transform-origin: center;
	}
}

/* Normalize every PDF-style capsule and keep the end marker perfectly round. */
.wlp-concept .wlp-kicker,
#location .wlp-kicker,
#gallery .wlp-kicker,
#plan .wlp-kicker,
#flow .wlp-kicker,
#faq .wlp-kicker,
.wlp-replay .wlp-kicker,
.wlp-contact .wlp-kicker {
	box-sizing: border-box;
	height: 36px;
	min-height: 36px;
	padding: 0 34px 0 17px;
	border-width: 2px;
	line-height: 32px;
	overflow: visible;
}

.wlp-concept .wlp-kicker::before,
#location .wlp-kicker::before,
#gallery .wlp-kicker::before,
#plan .wlp-kicker::before,
#flow .wlp-kicker::before,
#faq .wlp-kicker::before,
.wlp-replay .wlp-kicker::before,
.wlp-contact .wlp-kicker::before {
	display: block;
	line-height: 1;
}

.wlp-concept .wlp-kicker::after,
#location .wlp-kicker::after,
#gallery .wlp-kicker::after,
#plan .wlp-kicker::after,
#flow .wlp-kicker::after,
#faq .wlp-kicker::after,
.wlp-replay .wlp-kicker::after,
.wlp-contact .wlp-kicker::after {
	box-sizing: border-box;
	z-index: 2;
	top: 50%;
	right: -13px;
	flex: none;
	width: 42px;
	min-width: 42px;
	height: 42px;
	min-height: 42px;
	margin: 0;
	padding: 0;
	border-width: 2px;
	border-radius: 50%;
	aspect-ratio: 1;
	transform: translateY(-50%);
}

.wlp-concept .wlp-kicker { min-width: 148px; }
#location .wlp-kicker { min-width: 152px; }
#gallery .wlp-kicker { min-width: 142px; }
#plan .wlp-kicker { min-width: 116px; }
#flow .wlp-kicker { min-width: 116px; }
#faq .wlp-kicker { min-width: 108px; }
.wlp-replay .wlp-kicker { min-width: 190px; }
.wlp-contact .wlp-kicker { min-width: 152px; }

@media (max-width: 780px) {
	.wlp-concept .wlp-kicker,
	.wlp-section .wlp-kicker,
	.wlp-replay .wlp-kicker,
	.wlp-contact .wlp-kicker {
		height: 34px;
		min-height: 34px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.wlp-concept .wlp-kicker::after,
	.wlp-section .wlp-kicker::after,
	.wlp-replay .wlp-kicker::after,
	.wlp-contact .wlp-kicker::after {
		width: 40px;
		min-width: 40px;
		height: 40px;
		min-height: 40px;
	}
}

/* Colored sections float inside the page so the paper grid remains visible. */
.wlp-orbit,
.wlp-flow,
.wlp-replay {
	width: min(1440px, calc(100% - 64px));
	margin-right: auto;
	margin-left: auto;
	border: 1px solid rgba(91, 121, 186, .7);
}

.wlp-orbit {
	box-shadow: none;
	clip-path: none;
}

@media (max-width: 780px) {
	.wlp-orbit,
	.wlp-flow,
	.wlp-replay {
		width: calc(100% - 24px);
	}
}

/* Final contact panel from the supplied reference. */
.wlp-contact {
	position: relative;
	width: min(1440px, calc(100% - 64px));
	margin: 72px auto 105px;
	padding: 100px 0 112px;
	overflow: hidden;
	border: 2px solid #6382c5;
	background: linear-gradient(135deg, #aab9f5 0%, #bfb2d7 48%, #ff9f58 100%);
}

.wlp-contact > .wlp-shell {
	position: relative;
	display: grid;
	grid-template-columns: .95fr 1fr;
	gap: clamp(50px, 8vw, 130px);
	align-items: center;
}

.wlp-contact > .wlp-shell::before {
	grid-column: 1;
	grid-row: 1;
	color: rgba(255, 255, 255, .55);
	content: "LET’S\A TALK";
	font: 900 clamp(5rem, 9.5vw, 10rem)/.92 var(--head);
	letter-spacing: -.07em;
	white-space: pre;
}

.wlp-contact > .wlp-shell::after {
	position: absolute;
	right: -4%;
	bottom: -70px;
	left: -4%;
	height: 48px;
	background:
		linear-gradient(90deg, #bff7f1 0 8%, transparent 8% 10%, #fff7b8 10% 24%, transparent 24% 27%, #efb8ee 27% 36%, transparent 36% 42%, #c9eaf4 42% 46%, transparent 46% 64%, #f4b7d5 64% 75%, transparent 75% 78%, #fff2a0 78% 96%, transparent 96%) 0 5px / 52% 14px no-repeat,
		linear-gradient(90deg, transparent 0 6%, #d7c3f3 6% 17%, transparent 17% 22%, #aee6ef 22% 32%, transparent 32% 66%, #ffd4a2 66% 81%, transparent 81% 87%, #f3acd0 87% 100%) 0 28px / 100% 11px no-repeat;
	content: "";
	opacity: .95;
}

.wlp-contact > .wlp-shell > div {
	grid-column: 2;
	grid-row: 1;
}

.wlp-contact aside {
	display: none;
}

.wlp-contact h2 {
	margin-top: 24px;
	font-size: clamp(2.6rem, 4.1vw, 4.8rem);
	line-height: 1.35;
}

.wlp-contact p {
	max-width: 570px;
	margin: 34px 0 30px;
	color: #29304f;
	font-size: .95rem;
	line-height: 2.15;
}

.wlp-contact .wlp-line {
	min-width: 250px;
	min-height: 62px;
	font-size: .9rem;
}

@media (max-width: 780px) {
	.wlp-contact {
		width: calc(100% - 24px);
		margin: 42px auto 74px;
		padding: 66px 0 92px;
	}

	.wlp-contact > .wlp-shell {
		display: grid;
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.wlp-contact > .wlp-shell::before {
		grid-column: 1;
		grid-row: 1;
		font-size: clamp(4.2rem, 24vw, 7rem);
	}

	.wlp-contact > .wlp-shell > div {
		grid-column: 1;
		grid-row: 2;
	}

	.wlp-contact > .wlp-shell::after { bottom: -62px; }
	.wlp-contact h2 { font-size: 2.4rem; }
	.wlp-contact p { margin: 25px 0; font-size: .78rem; }
}

/* Header navigation tabs from the supplied reference. */
@media (min-width: 781px) {
	.wlp-header {
		grid-template-columns: 220px minmax(660px, 1fr) 180px;
		gap: 0;
		padding-top: 0;
		padding-bottom: 0;
	}

	.wlp-nav {
		align-self: end;
		justify-self: stretch;
		padding: 10px 0 0 10px;
		background: #ffe0a1;
		border-radius: 18px 0 0 0;
	}

	.wlp-nav-list {
		display: grid;
		grid-template-columns: repeat(7, minmax(82px, 1fr));
		border: 0;
	}

	.wlp-nav-list li {
		min-width: 0;
	}

	.wlp-nav-list a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
		min-height: 58px;
		padding: 8px 10px;
		color: #343631;
		border-radius: 18px 18px 0 0;
		font-size: .7rem;
		letter-spacing: .02em;
		transition: transform .18s var(--ease), filter .18s var(--ease);
	}

	.wlp-nav-list a:hover {
		filter: saturate(1.15);
		transform: translateY(-4px);
	}

	.wlp-nav-list small {
		display: none;
	}

	.wlp-nav-list li:nth-child(1) a { background: #f4bfd0; }
	.wlp-nav-list li:nth-child(2) a { background: #d7efa7; }
	.wlp-nav-list li:nth-child(3) a { background: #fac69e; }
	.wlp-nav-list li:nth-child(4) a { background: #cbe8f5; }
	.wlp-nav-list li:nth-child(5) a { background: #cde68d; }
	.wlp-nav-list li:nth-child(6) a { background: #fff6a2; }
	.wlp-nav-list li:nth-child(7) a { background: #aeb7e9; }

	.wlp-line--header {
		align-self: stretch;
		min-height: 58px;
		margin: 10px 10px 0 0;
		border: 8px solid #ffe0a1;
		border-left-width: 10px;
		box-shadow: none;
	}
}

/* Footer layout from the supplied reference. */
.wlp-footer {
	display: block;
	min-height: 430px;
	padding: 0 max(5vw, calc((100vw - 1280px) / 2)) 64px;
	border-top: 3px solid #aeb7e9;
	background-color: #fffefa;
}

.wlp-footer__tabs {
	display: grid;
	grid-template-columns: repeat(7, minmax(90px, 136px));
	justify-content: center;
	gap: 14px;
	transform: translateY(-100%);
}

.wlp-footer__tabs a {
	display: grid;
	min-height: 68px;
	padding: 10px 13px;
	place-items: center;
	color: #343631;
	border-radius: 14px 14px 0 0;
	font: 400 .75rem var(--mono);
	text-decoration: none;
	transition: transform .18s var(--ease), filter .18s var(--ease);
}

.wlp-footer__tabs a:hover { filter: saturate(1.15); transform: translateY(-4px); }
.wlp-footer__tabs a:nth-child(1) { background: #f4bfd0; }
.wlp-footer__tabs a:nth-child(2) { background: #d7efa7; }
.wlp-footer__tabs a:nth-child(3) { background: #fac69e; }
.wlp-footer__tabs a:nth-child(4) { background: #cbe8f5; }
.wlp-footer__tabs a:nth-child(5) { background: #cde68d; }
.wlp-footer__tabs a:nth-child(6) { background: #fff6a2; }
.wlp-footer__tabs a:nth-child(7) { background: #aeb7e9; }

.wlp-footer__main {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 42px;
	min-height: 205px;
	margin-top: -34px;
}

.wlp-footer__social { justify-self: end; }

.wlp-footer__qr {
	display: grid;
	justify-items: center;
	gap: 8px;
	color: #565a72;
	text-decoration: none;
}

.wlp-footer__qr > span {
	position: relative;
	display: block;
	overflow: hidden;
	width: 166px;
	height: 166px;
	border: 2px solid #4d7fbd;
	border-radius: 16px;
	background: #fff;
	box-shadow: 7px 8px #ffe25e;
	transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}

.wlp-footer__qr img {
	position: absolute;
	top: -39.3%;
	left: -12.7%;
	display: block;
	width: 125.2%;
	height: auto;
	max-width: none;
}

.wlp-footer__qr small {
	font: 400 .5rem var(--mono);
	letter-spacing: .12em;
}

.wlp-footer__qr:hover > span,
.wlp-footer__qr:focus-visible > span {
	transform: translateY(-4px) rotate(-1deg);
	box-shadow: 10px 12px #ffe25e;
}

.wlp-footer__logo img {
	display: block;
	width: 116px;
	height: 150px;
	object-fit: contain;
}

.wlp-footer__line {
	min-width: 280px;
	min-height: 72px;
	justify-content: flex-start;
	padding: 0 24px;
	font-size: 1rem;
}

.wlp-footer__line span {
	display: grid;
	width: 34px;
	height: 34px;
	margin-right: 5px;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	color: #20c869;
	font: 700 .48rem Arial, sans-serif;
}

.wlp-footer__line b { margin-left: auto; font-size: 1.25rem; }

.wlp-footer__bottom {
	display: grid;
	gap: 28px;
	padding-top: 24px;
	border-top: 1px solid #5f6681;
	color: #8a91a8;
}

.wlp-footer__bottom p,
.wlp-footer__bottom small {
	margin: 0;
	font: 400 .68rem var(--body);
	letter-spacing: .03em;
}

@media (max-width: 780px) {
	.wlp-footer { min-height: 380px; padding: 0 20px 86px; }
	.wlp-footer__tabs { grid-template-columns: repeat(4, 1fr); gap: 4px; transform: none; }
	.wlp-footer__tabs a { min-height: 43px; padding: 6px 4px; border-radius: 0 0 8px 8px; font-size: .48rem; }
	.wlp-footer__tabs a:nth-child(n+5) { margin-top: 0; }
	.wlp-footer__main { grid-template-columns: auto 1fr; gap: 20px; min-height: 250px; margin-top: 12px; }
	.wlp-footer__logo img { width: 82px; height: 110px; }
	.wlp-footer__qr { justify-self: end; }
	.wlp-footer__qr > span { width: 132px; height: 132px; border-radius: 13px; box-shadow: 5px 6px #ffe25e; }
	.wlp-footer__qr small { font-size: .42rem; }
	.wlp-footer__line { display: none; }
	.wlp-footer__social { grid-column: 1 / -1; justify-self: stretch; }
	.wlp-footer__bottom { gap: 18px; padding-top: 20px; }
	.wlp-footer__bottom p { font-size: .58rem; line-height: 1.7; }
}

/* PDF-style section labels: colored capsule with an overlapping circle. */
.wlp-concept h2::before,
#location .wlp-section-head h2::before,
#gallery .wlp-section-head h2::before,
#plan .wlp-section-head h2::before,
#flow .wlp-section-head h2::before,
#faq .wlp-section-head h2::before,
.wlp-replay h2::before,
.wlp-contact h2::before {
	display: none;
}

.wlp-concept .wlp-kicker,
#location .wlp-kicker,
#gallery .wlp-kicker,
#plan .wlp-kicker,
#flow .wlp-kicker,
#faq .wlp-kicker,
.wlp-replay .wlp-kicker,
.wlp-contact .wlp-kicker {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-width: 128px;
	min-height: 30px;
	padding: 4px 32px 4px 15px;
	color: #fff;
	border: 2px solid #596ba7;
	border-radius: 999px;
	font-size: 0;
	line-height: 1;
	letter-spacing: 0;
	box-shadow: 0 2px 0 rgba(61, 67, 91, .09);
}

.wlp-concept .wlp-kicker span,
#location .wlp-kicker span,
#gallery .wlp-kicker span,
#plan .wlp-kicker span,
#flow .wlp-kicker span,
#faq .wlp-kicker span,
.wlp-replay .wlp-kicker span,
.wlp-contact .wlp-kicker span {
	display: none;
}

.wlp-concept .wlp-kicker::before,
#location .wlp-kicker::before,
#gallery .wlp-kicker::before,
#plan .wlp-kicker::before,
#flow .wlp-kicker::before,
#faq .wlp-kicker::before,
.wlp-replay .wlp-kicker::before,
.wlp-contact .wlp-kicker::before {
	font: 400 .72rem var(--mono);
	letter-spacing: .09em;
}

.wlp-concept .wlp-kicker::after,
#location .wlp-kicker::after,
#gallery .wlp-kicker::after,
#plan .wlp-kicker::after,
#flow .wlp-kicker::after,
#faq .wlp-kicker::after,
.wlp-replay .wlp-kicker::after,
.wlp-contact .wlp-kicker::after {
	position: absolute;
	top: 50%;
	right: -9px;
	width: 32px;
	height: 32px;
	border: 2px solid #596ba7;
	border-radius: 50%;
	box-shadow: none;
	content: "";
	transform: translateY(-50%);
}

.wlp-concept .wlp-kicker { background: #ff7ea7; }
.wlp-concept .wlp-kicker::before { content: "CONCEPT"; }
.wlp-concept .wlp-kicker::after { background: #ffd95b; }

#location .wlp-kicker { background: #16cee2; }
#location .wlp-kicker::before { content: "LOCATION"; }
#location .wlp-kicker::after { background: #ffa15a; }

#gallery .wlp-kicker { background: #ff8db1; }
#gallery .wlp-kicker::before { content: "GALLERY"; }
#gallery .wlp-kicker::after { background: #ffe45e; }

#plan .wlp-kicker { background: #64cbed; }
#plan .wlp-kicker::before { content: "PLAN"; }
#plan .wlp-kicker::after { background: #ffe45e; }

#flow .wlp-kicker { background: #83d36f; }
#flow .wlp-kicker::before { content: "FLOW"; }
#flow .wlp-kicker::after { background: #ff7c6f; }

#faq .wlp-kicker { background: #ffd94f; color: #4d4d43; }
#faq .wlp-kicker::before { content: "FAQ"; }
#faq .wlp-kicker::after { background: #ff7c6f; }

.wlp-replay .wlp-kicker { min-width: 162px; background: #ff86b3; }
.wlp-replay .wlp-kicker::before { content: "PLAY A LITTLE"; }
.wlp-replay .wlp-kicker::after { background: #ffe45e; }

.wlp-contact .wlp-kicker { background: #8e9cf2; }
.wlp-contact .wlp-kicker::before { content: "CONTACT"; }
.wlp-contact .wlp-kicker::after { background: #ff9d5d; }

@media (max-width: 780px) {
	.wlp-concept .wlp-kicker,
	.wlp-section .wlp-kicker,
	.wlp-replay .wlp-kicker,
	.wlp-contact .wlp-kicker {
		min-height: 28px;
		padding-top: 3px;
		padding-bottom: 3px;
	}

	.wlp-concept .wlp-kicker::after,
	.wlp-section .wlp-kicker::after,
	.wlp-replay .wlp-kicker::after,
	.wlp-contact .wlp-kicker::after {
		width: 30px;
		height: 30px;
	}
}

/* Make the FV crane a strong, usable navigation device. */
.wlp-crane__rail {
	height: 9px;
	border: 2px solid #55513d;
	border-radius: 6px;
	background: repeating-linear-gradient(90deg, #ffe367 0 34px, #fff4b8 34px 68px);
	box-shadow: 0 4px 0 rgba(80, 76, 55, .18);
}


.wlp-crane__head {
	width: 82px;
	height: 51px;
	border: 3px solid #53513e;
	border-radius: 15px;
	background: #ffe05e;
	box-shadow: 0 5px 0 #b7a23e, 0 9px 18px rgba(71, 67, 47, .18);
}

.wlp-crane__head::after {
	position: absolute;
	left: 50%;
	bottom: -11px;
	width: 22px;
	height: 10px;
	border: 2px solid #53513e;
	border-top: 0;
	background: #f7cc3d;
	content: "";
	transform: translateX(-50%);
}

.wlp-crane__head span {
	width: 8px;
	height: 8px;
	box-shadow: inset 0 -2px rgba(0, 0, 0, .18);
}

.wlp-crane__cables {
	top: 60px;
	width: 12px;
	height: 76px;
	border-right: 2px solid #67695f;
	border-left: 2px solid #67695f;
}

.wlp-crane__claw {
	top: 130px;
	width: 64px;
	height: 45px;
	background: linear-gradient(#55584f, #55584f) center 12px / 5px 38px no-repeat;
}

.wlp-crane__claw::before {
	position: absolute;
	top: 0;
	left: 50%;
	width: 18px;
	height: 14px;
	border: 3px solid #55584f;
	border-radius: 4px;
	background: #ffe05e;
	content: "";
	transform: translateX(-50%);
}

.wlp-crane__claw i {
	top: 12px;
	width: 5px;
	height: 38px;
	border-radius: 4px;
	background: #55584f;
}

.wlp-hero__panel {
	right: 1%;
	bottom: -32px;
	align-items: stretch;
	width: 370px;
}

.wlp-hero__panel > * {
	min-height: 72px;
}

.wlp-hero__selector {
	display: grid;
	gap: 7px;
	padding: 10px 15px;
	background: rgba(255, 254, 250, .97);
	border: 1px solid rgba(58, 60, 54, .25);
}

.wlp-hero__selector > small {
	font: 400 .48rem var(--mono);
	letter-spacing: .1em;
}

.wlp-hero__selector span {
	display: flex;
	align-items: center;
	gap: 12px;
}

.wlp-hero__grab {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	gap: 3px 14px;
	align-content: center;
	min-width: 205px;
	padding: 11px 16px;
	color: #343631;
	background: #ffe05e;
	border: 2px solid #55513d;
	box-shadow: 0 5px 0 #b7a23e;
	text-decoration: none;
}

.wlp-hero__grab small { font: 400 .45rem var(--mono); letter-spacing: .1em; }
.wlp-hero__grab b { font: 700 .7rem var(--title); }
.wlp-hero__grab i { grid-row: 1 / 3; grid-column: 2; align-self: center; font: 400 1.35rem var(--mono); font-style: normal; }
.wlp-hero__grab:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #b7a23e; }

@media (max-width: 780px) {
	.wlp-crane__head { width: 68px; height: 43px; }
	.wlp-crane__cables { top: 45px; height: 57px; }
	.wlp-crane__claw { top: 97px; width: 54px; }
	.wlp-hero__panel { right: 2%; bottom: -24px; width: min(96%, 355px); }
	.wlp-hero__grab { min-width: 188px; }
}

/* Continuous grid only on sections using the basic paper color. */
body,
.wlp-hero,
.wlp-paper,
.wlp-orbit,
.wlp-footer {
	background-image:
		linear-gradient(rgba(70, 76, 69, .075) 1px, transparent 1px),
		linear-gradient(90deg, rgba(70, 76, 69, .075) 1px, transparent 1px);
	background-position: top left;
	background-size: 52px 52px;
	background-attachment: fixed;
}

/* Play-a-little crane: move over the selected prize and visibly grab it. */
.wlp-game__screen {
	--game-crane-x: 50%;
	background: #fffefa;
}

/* Use a consistent, downward-facing three-prong claw throughout the site. */
.wlp-orbit__crane span {
	top: 108px;
	left: calc(50% - 30px);
	width: 60px;
	height: 42px;
	border: 0;
	background:
		linear-gradient(#62655d, #62655d) center top / 5px 38px no-repeat,
		linear-gradient(58deg, transparent 44%, #62655d 45% 55%, transparent 56%) left top / 28px 42px no-repeat,
		linear-gradient(-58deg, transparent 44%, #62655d 45% 55%, transparent 56%) right top / 28px 42px no-repeat;
	transform: none;
}

.wlp-game__screen::before {
	position: absolute;
	z-index: 1;
	top: 18px;
	right: 7%;
	left: 7%;
	height: 8px;
	border: 2px solid #585747;
	border-radius: 6px;
	background: repeating-linear-gradient(90deg, #ffe260 0 42px, #fff1aa 42px 84px);
	box-shadow: 0 4px 0 rgba(73, 70, 51, .16);
	content: "";
}

.wlp-game__head {
	top: 5px;
	left: var(--game-crane-x);
	z-index: 5;
	width: 78px;
	height: 54px;
	padding: 0;
	border: 3px solid #555344;
	border-radius: 15px;
	background: #ffe260;
	box-shadow: 0 5px 0 #b6a340, 0 9px 18px rgba(76, 71, 46, .2);
	transition: left .6s var(--ease);
}

.wlp-game__head::after {
	position: absolute;
	bottom: -13px;
	left: 50%;
	width: 22px;
	height: 12px;
	border: 3px solid #555344;
	border-top: 0;
	background: #f2c939;
	content: "";
	transform: translateX(-50%);
}

.wlp-game__claw {
	top: 65px;
	left: var(--game-crane-x);
	z-index: 4;
	width: 72px;
	height: 112px;
	color: transparent;
	font-size: 0;
	background:
		linear-gradient(#55584f, #55584f) center bottom / 5px 43px no-repeat,
		linear-gradient(58deg, transparent 44%, #55584f 45% 55%, transparent 56%) left bottom / 34px 43px no-repeat,
		linear-gradient(-58deg, transparent 44%, #55584f 45% 55%, transparent 56%) right bottom / 34px 43px no-repeat;
	transition: left .6s var(--ease), top .42s var(--ease);
}

.wlp-game__claw::before {
	position: absolute;
	top: 0;
	left: 50%;
	width: 14px;
	height: 66px;
	border-right: 3px solid #5d6058;
	border-left: 3px solid #5d6058;
	content: "";
	transform: translateX(-50%);
}

.wlp-game__claw::after {
	position: absolute;
	top: 61px;
	left: 50%;
	width: 22px;
	height: 18px;
	border: 3px solid #55584f;
	border-radius: 4px;
	background: #ffe05e;
	box-shadow: 0 3px 0 #b7a23e;
	content: "";
	transform: translateX(-50%);
}

.wlp-game__screen.is-grabbing .wlp-game__claw {
	top: 118px;
}

.wlp-game__prizes {
	z-index: 3;
}

.wlp-game__prizes button {
	min-height: 70px;
	border-width: 3px;
	background: #fffefa;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}

.wlp-game__prizes button.is-selected {
	background: #fff7cf;
	box-shadow: 0 0 0 5px #fffefa, 0 0 0 8px #f0c848;
}

.wlp-game__screen.is-grabbing .wlp-game__prizes button.is-selected {
	transform: translateY(-20px) scale(.96);
}

.wlp-game__destination {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 14px;
	color: #343631;
	background: #ffe260;
	border: 1px solid #706b4f;
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.wlp-game__head,
	.wlp-game__claw,
	.wlp-game__prizes button {
		transition: none;
	}
}