:root {
	--color-blue: #0056a0;
	--color-green: #5ea870;
	--color-orange: #df4f27;
	--color-yellow: #fbbc21;
	--color-blue-light: #3ca6de;
	--color-pink: #e79ab0;
	--color-pink-light: #e79ab033;
	--color-yellow-light: #fbbc2133;
	--content-width: 965px;
	--header-height: 168px;
}

* {
	box-sizing: border-box;
}

/* kit-rounded's oversized declared descent (see .hyla-button__label) also
   inflates `line-height: normal`, so body copy left at the 16px default read
   as small text in a too-airy line box. Set both explicitly instead. */
body {
	margin: 0;
	font-family: "kit-rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 400;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--color-blue);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
}

a {
	color: inherit;
}

.hyla-toy-icon {
	width: 100%;
	height: auto;
	display: block;
}

.has-blue-color { color: var(--color-blue); }
.has-green-color { color: var(--color-green); }
.has-orange-color { color: var(--color-orange); }
.has-yellow-color { color: var(--color-yellow); }
.has-blue-light-color { color: var(--color-blue-light); }
.has-pink-color { color: var(--color-pink); }
.has-pink-light-color { color: var(--color-pink-light); }

.has-blue-background-color { background-color: var(--color-blue); }
.has-green-background-color { background-color: var(--color-green); }
.has-orange-background-color { background-color: var(--color-orange); }
.has-yellow-background-color { background-color: var(--color-yellow); }
.has-pink-background-color { background-color: var(--color-pink); }

/* Buttons */
.hyla-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 254px;
	height: 57px;
	padding: 0 1.5rem;
	border-radius: 12px;
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1;
	text-decoration: none;
	border: 2px solid transparent;
}

/* kit-rounded's declared descent is much larger than any glyph actually
   uses (measured via canvas ctx.measureText: ~20px reserved vs ~3px of
   real ink at 20px size), so flex-centering the line box leaves the
   visible text sitting ~0.25em above true center. Nudge the ink down by
   the same amount rather than the whole button (border/background stay put). */
.hyla-button__label {
	transform: translateY(0.25em);
}

.hyla-button--primary {
	background-color: var(--color-green);
	color: #fff;
}

.hyla-button--outline {
	background-color: transparent;
	border-color: var(--color-green);
	color: var(--color-green);
}

/* Site header */
.hyla-site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
	transition: transform 0.25s ease;
}

.hyla-site-header.is-hidden {
	transform: translateY(-100%);
}

.hyla-site-header__inner {
	width: 100%;
	padding: 21px 29px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2rem;
}

/* Content that doesn't start with a full-bleed hero needs to clear the fixed header */
.hyla-content {
	padding-top: var(--header-height);
}

.hyla-content:has(> .hyla-hero:first-child) {
	padding-top: 0;
}

.hyla-site-header__logo svg {
	height: 126px;
	width: auto;
	display: block;
	transition: height 0.2s ease;
}

.hyla-site-header__nav {
	margin-top: 9px;
}

.hyla-site-header__nav ul {
	display: flex;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hyla-site-header__nav a {
	color: var(--color-orange);
	text-decoration: none;
	font-weight: 400;
	font-size: 1.375rem;
}

.hyla-site-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	gap: 5px;
	width: 32px;
	height: 32px;
	min-width: 32px;
	min-height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	position: relative;
	z-index: 101;
}

.hyla-site-header__toggle-bar {
	display: block;
	width: 26px;
	height: 3px;
	border-radius: 2px;
	background-color: var(--color-orange);
	transition: opacity 0.15s ease;
}

/* Two-phase open: slide the top/bottom bar to the middle first, then pivot it
   into an X — animating translate and rotate together in one `transform`
   transition makes the bar arc/sweep instead of pivoting cleanly in place. */
@keyframes hyla-toggle-bar-top-open {
	0% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(8px) rotate(0deg); }
	100% { transform: translateY(8px) rotate(45deg); }
}

@keyframes hyla-toggle-bar-top-close {
	0% { transform: translateY(8px) rotate(45deg); }
	50% { transform: translateY(8px) rotate(0deg); }
	100% { transform: translateY(0) rotate(0deg); }
}

@keyframes hyla-toggle-bar-bottom-open {
	0% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-8px) rotate(0deg); }
	100% { transform: translateY(-8px) rotate(-45deg); }
}

@keyframes hyla-toggle-bar-bottom-close {
	0% { transform: translateY(-8px) rotate(-45deg); }
	50% { transform: translateY(-8px) rotate(0deg); }
	100% { transform: translateY(0) rotate(0deg); }
}

.hyla-site-header__toggle.is-open .hyla-site-header__toggle-bar:nth-child(1) {
	animation: hyla-toggle-bar-top-open 0.3s ease forwards;
}

.hyla-site-header__toggle.is-closing .hyla-site-header__toggle-bar:nth-child(1) {
	animation: hyla-toggle-bar-top-close 0.3s ease forwards;
}

.hyla-site-header__toggle.is-open .hyla-site-header__toggle-bar:nth-child(2) {
	opacity: 0;
}

.hyla-site-header__toggle.is-open .hyla-site-header__toggle-bar:nth-child(3) {
	animation: hyla-toggle-bar-bottom-open 0.3s ease forwards;
}

.hyla-site-header__toggle.is-closing .hyla-site-header__toggle-bar:nth-child(3) {
	animation: hyla-toggle-bar-bottom-close 0.3s ease forwards;
}

.hyla-site-header__overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99;
	background-color: rgba(255, 255, 255, 0.95);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.hyla-site-header__overlay.is-open {
	display: block;
	opacity: 1;
}

.hyla-site-header__overlay-logo {
	position: absolute;
	top: 21px;
	left: 29px;
}

.hyla-site-header__overlay-logo svg {
	height: 126px;
	width: auto;
	display: block;
}

.hyla-site-header__overlay-nav {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hyla-site-header__overlay-nav ul {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hyla-site-header__overlay-nav a {
	color: var(--color-orange);
	text-decoration: none;
	font-weight: 700;
	font-size: 2rem;
}

.hyla-no-scroll {
	overflow: hidden;
}

/* Hero */
.hyla-hero {
	position: relative;
	background-color: var(--color-pink-light);
	overflow: hidden;
	padding: 4rem 0;
}

.hyla-hero__inner {
	max-width: calc(var(--content-width) + 4rem);
	margin: 0 auto;
	margin-top: var(--header-height);
	padding: 0 2rem;
	display: flex;
	align-items: center;
	gap: 2rem;
}

.hyla-hero__content {
	position: relative;
	z-index: 1;
	flex: 0 1 600px;
}

.hyla-hero__eyebrow {
	color: var(--color-orange);
	font-weight: 400;
	font-size: 1.375rem;
	margin: 0 0 0.5rem;
}

.hyla-hero__heading {
	font-size: 2.875rem;
	line-height: 1.26;
	margin: 0 0 2.5rem;
	overflow-wrap: break-word;
}

.hyla-hero__actions {
	display: flex;
	gap: 23px;
	flex-wrap: wrap;
}

.hyla-hero__illustrations {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.hyla-hero__toy--main {
	position: absolute;
	top: 28%;
	/* Flush with the centered content area's right edge, not the viewport's. */
	right: calc((100vw - var(--content-width)) / 2);
	width: 360px;
	transform: scaleX(-1);
}

/* Text with image */
.hyla-text-image {
	position: relative;
	max-width: calc(var(--content-width) + 4rem);
	margin: 0 auto;
	padding: 4rem 2rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.hyla-text-image__accent {
	position: absolute;
	/* .hyla-text-image is itself the centered content box (no separate
	   full-bleed outer section), so -8px from viewport edge has to be
	   computed relative to that box's own (recentering) left edge. */
	left: calc(-8px - 50vw + (var(--content-width) + 4rem) / 2);
	width: 148px;
	pointer-events: none;
}

.hyla-text-image__accent--about {
	top: 58%;
}

.hyla-text-image--image-right {
	direction: rtl;
}

.hyla-text-image--image-right > * {
	direction: ltr;
}

/* Design has this column's copy running 55px past the content edge on wide
   viewports (matches the other edge-bleeding accents) — only enough room for
   it above 1200px, so it stays inside the column below that. */
@media (min-width: 1200px) {
	.hyla-text-image--image-left .hyla-text-image__body {
		width: calc(100% + 55px);
	}
}

.hyla-text-image__media {
	aspect-ratio: 1;
	background-color: #e9e9e9;
	border-radius: 8px;
	overflow: hidden;
}

.hyla-text-image__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hyla-text-image__hours {
	border-collapse: collapse;
}

.hyla-text-image__hours td {
	padding: 0.125rem 0.75rem 0.125rem 0;
}

.hyla-text-image__eyebrow {
	color: var(--color-orange);
	font-weight: 400;
	font-size: 1.375rem;
	margin: 0 0 0.5rem;
}

.hyla-text-image__heading {
	font-size: 2.875rem;
	line-height: 1.26;
	margin: 0 0 1rem;
}

/* Banner */
.hyla-banner {
	padding: 3rem 0;
}

.hyla-banner__inner {
	max-width: calc(var(--content-width) + 4rem);
	margin: 0 auto;
	padding: 0 2rem;
}

.hyla-banner__heading {
	color: #fff;
	font-size: 2.875rem;
	line-height: 1.26;
	margin: 0 0 0.5rem;
}

/* Size/leading left to the base body rule so banner copy matches the other
   plain text rather than sitting a step below it. */
.hyla-banner__body {
	color: #fff;
	font-weight: 700;
	margin: 0;
	max-width: 966px;
}

/* Related products */
.hyla-related-products {
	position: relative;
	background-color: var(--color-yellow-light);
	padding: 4rem 0;
	overflow: hidden;
}

.hyla-related-products__heading {
	max-width: calc(var(--content-width) + 4rem);
	margin: 0 auto 2rem;
	padding: 0 2rem;
	font-size: 2.875rem;
	line-height: 1.26;
}

.hyla-related-products__grid {
	max-width: calc(var(--content-width) + 4rem);
	margin: 0 auto;
	padding: 0 2rem;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}

.hyla-product-card {
	position: relative;
	display: block;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	aspect-ratio: 217 / 200;
}

.hyla-product-card__media {
	width: 100%;
	height: 100%;
}

.hyla-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hyla-product-card__badge {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 41px;
	display: flex;
	align-items: center;
	padding: 0 0.875rem;
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.hyla-product-card__badge-label {
	/* Same kit-rounded metrics correction as .hyla-button__label, measured
	   separately at this font-size/weight (~0.19em here vs ~0.25em there). */
	transform: translateY(0.19em);
}

.hyla-related-products__accent {
	position: absolute;
	top: 700px;
	right: -20px;
	width: 159px;
}

.hyla-related-products__dots {
	display: none;
	justify-content: center;
	gap: 0.625rem;
	margin-top: 1.5rem;
}

.hyla-related-products__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--color-orange);
	opacity: 0.3;
	transition: opacity 0.15s ease;
	cursor: pointer;
}

.hyla-related-products__dot.is-active {
	opacity: 1;
}

.hyla-related-products__note {
	max-width: calc(var(--content-width) + 4rem);
	margin: 2rem auto 0;
	padding: 0 2rem;
	text-align: center;
	font-size: 1.4375rem;
	color: var(--color-orange);
}

/* Site footer */
.hyla-site-footer {
	position: relative;
	background-color: var(--color-blue);
	color: var(--color-blue-light);
	padding: 1.5rem 0;
}

.hyla-site-footer__accent {
	position: absolute;
	left: -8px;
	top: -91px;
	width: 151px;
	pointer-events: none;
}

.hyla-site-footer__inner {
	max-width: calc(var(--content-width) + 4rem);
	margin: 0 auto;
	padding: 0 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* Same kit-rounded metrics correction as .hyla-button__label (measured via
   canvas ctx.measureText at this font-size/weight: ~20px reserved descent vs
   ~5px of real ink), so the ink sits centered against the 36px social icons
   instead of ~4px above it. */
.hyla-site-footer__copyright,
.hyla-site-footer__socials-label {
	margin: 0;
	font-size: 1.375rem;
	transform: translateY(0.18em);
}

.hyla-site-footer__socials {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.hyla-site-footer__socials ul {
	display: flex;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hyla-site-footer__social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--color-blue-light);
	color: var(--color-blue);
	transition: transform 0.15s ease;
}

.hyla-site-footer__social-icon:hover {
	transform: scale(1.12);
}

.hyla-social-icon {
	width: 18px;
	height: 18px;
}

@media (max-width: 782px) {
	.hyla-text-image {
		grid-template-columns: 1fr;
	}

	.hyla-text-image--image-right {
		direction: ltr;
	}

	.hyla-site-footer__inner {
		flex-wrap: wrap;
	}

	.hyla-hero__inner {
		flex-direction: column;
		align-items: stretch;
	}

	/* A 4-up grid stacked into a single column reads as an endless list on
	   phones, so trade it for a horizontal, snapping strip (one card at a
	   time, with a peek of the next) and dots instead of a scrollbar.
	   The edge inset is done with spacer flex items rather than padding on
	   the scroll container itself — padding would count against the 78%
	   card-width calculation (shrinking every card and its peek) and would
	   sit, unscrollable, past the last card instead of being reachable. */
	.hyla-related-products__grid {
		display: flex;
		grid-template-columns: none;
		padding: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 2rem;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 1rem;
	}

	.hyla-related-products__grid::-webkit-scrollbar {
		display: none;
	}

	.hyla-related-products__grid::before,
	.hyla-related-products__grid::after {
		content: '';
		flex: 0 0 2rem;
	}

	.hyla-product-card {
		flex: 0 0 68%;
		scroll-snap-align: start;
	}

	.hyla-related-products__dots {
		display: flex;
	}
}

/* Below the desktop breakpoint: hamburger nav, and decorative frogs move out
   of the way of the content (out of the whitespace corners instead of behind
   text) rather than matching the desktop composition. */
@media (max-width: 1023px) {
	.hyla-site-header__nav {
		display: none;
	}

	.hyla-site-header__toggle {
		display: inline-flex;
	}

	.hyla-site-header.is-scrolled .hyla-site-header__logo svg {
		height: 63px;
	}

	.hyla-hero__toy--main {
		top: auto;
		bottom: 0;
		right: -20px;
		width: 148px;
	}

	.hyla-text-image {
		overflow: hidden;
	}

	.hyla-text-image__accent {
		left: -20px;
		right: auto;
	}

	.hyla-text-image__accent--about {
		top: auto;
		bottom: 0;
	}

	.hyla-site-footer__accent {
		width: 110px;
		top: -66px;
	}

	.hyla-site-footer__inner {
		padding-top: 50px;
	}
}