/* Shared header/menu CSS extracted from index.astro for pixel-perfect desktop/mobile parity */
:root {
	--figma-sky: #f3fcff;
	--figma-ink: #222221;
	--figma-blue: #42bfed;
	--figma-orange: #ff9f3e;
	--figma-red: #b80000;
}

body {
	background: #fff;
	min-width: 320px;
	max-width: 100vw;
	overflow-x: hidden;
}

html {
	scroll-behavior: smooth;
	max-width: 100vw;
	overflow-x: hidden;
}

#about,
#faqs,
#services,
#prices {
	scroll-margin-top: 120px;
}

.elementor-39 .elementor-element.elementor-element-30980e3 {
	background-image: url('/site-assets/Header-Background-Cloud-scaled.png') !important;
	background-position: bottom center !important;
	background-repeat: no-repeat !important;
	background-size: 120% auto !important;
	background-color: transparent !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-bottom: none;
	box-shadow: none;
	min-height: 148px !important;
	position: sticky;
	top: 0;
	z-index: 1000;
	overflow: visible;
}

.elementor-39 {
	position: relative;
	z-index: 1000;
}

/* Hero stacks below sticky header naturally — no z-index override needed.
   Removing z-index override here fixes the cloud section being covered. */

.elementor-39 .elementor-element.elementor-element-30980e3 > .e-con-inner {
	align-items: center;
	display: flex;
	gap: clamp(12px, 1.8vw, 26px);
	justify-content: space-between;
	margin-inline: auto;
	max-width: min(1240px, calc(100% - 32px));
	min-height: 148px;
	padding: 26px 4px;
}

@media (min-width: 1025px) {
	/* Full-bleed header — must beat .e-con max-width:1140px */
	.elementor-39,
	.elementor-39 > .e-con,
	.elementor-39 .elementor-element.elementor-element-30980e3 {
		max-width: 100vw !important;
	}
	.elementor-39 .elementor-element.elementor-element-30980e3 {
		background-image: url('/site-assets/Header-Background-Cloud-scaled.png') !important;
		background-position: bottom center !important;
		background-repeat: no-repeat !important;
		background-size: 120% auto !important;
		background-color: transparent !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		margin-bottom: -1px !important;
		position: sticky;
		width: 100vw !important;
		max-width: 100vw !important;
		z-index: 1000 !important;
	}
	.elementor-998 .elementor-element.elementor-element-ccd6946 {
		margin-top: calc(-4em - 1px) !important;
	}
	.elementor-39 .elementor-element.elementor-element-6307095 {
		flex: 1 1 auto;
		justify-content: center;
		margin-left: 0;
		min-width: 0;
	}
	.elementor-39 .elementor-element.elementor-element-6307095 .elementskit-menu-hamburger,
	.elementor-39 .elementor-element.elementor-element-6307095 .elementskit-menu-close,
	.elementor-39 .ilc-overlay-close {
		display: none !important;
	}
	/* Desktop nav: text only, hide emoji icon tiles */
	.elementor-39 #menu-primary-menu .ilc-nav-icon {
		display: none !important;
	}
	.elementor-39 .elementor-element.elementor-element-6307095 .elementskit-menu-container {
		background: transparent !important;
		height: auto !important;
		left: auto !important;
		overflow: visible !important;
		position: static !important;
		right: auto !important;
		top: auto !important;
		transform: none !important;
		width: auto !important;
	}
	.elementor-39 #menu-primary-menu {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: clamp(0.7rem, 1.35vw, 1.55rem);
		justify-content: flex-end;
		row-gap: 0 !important;
		white-space: nowrap;
	}
	.elementor-39 .elementor-element.elementor-element-77cf17d {
		margin-left: clamp(8px, 1vw, 16px);
	}
}

.elementor-39 .elementor-element.elementor-element-fc71be3 img {
	height: auto;
	width: clamp(188px, 15vw, 231px);
}

.elementor-39 .elementor-element.elementor-element-6307095 {
	display: flex;
	flex: 1 1 auto;
	justify-content: center;
	min-width: 0;
}

.elementor-39 #menu-primary-menu {
	align-items: center;
	display: flex;
	gap: clamp(0.24rem, 0.82vw, 0.82rem);
}

.elementor-39 .elementor-element.elementor-element-77cf17d {
	flex: 0 0 auto;
}

.elementor-39 .elementor-element.elementor-element-77cf17d .elementor-button {
	background: linear-gradient(180deg, #f89a3a 0%, #ea5e1a 58%, #d21a07 100%) !important;
	border: 2px solid #b80000 !important;
	border-radius: 999px !important;
	box-shadow: 0 4px 0 rgb(115 0 0 / 18%), 0 8px 18px rgb(210 26 7 / 25%);
	display: inline-flex;
	justify-content: center;
	line-height: 1;
	padding: 0.78rem 1.72rem;
	position: relative;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.elementor-39 .elementor-element.elementor-element-77cf17d .elementor-button::after {
	border: 2px dashed rgb(255 255 255 / 88%);
	border-radius: 999px;
	content: '';
	inset: 4px;
	pointer-events: none;
	position: absolute;
}

.elementor-39 .elementor-element.elementor-element-77cf17d .elementor-button:hover,
.elementor-39 .elementor-element.elementor-element-77cf17d .elementor-button:focus-visible {
	box-shadow: 0 4px 0 rgb(115 0 0 / 22%), 0 10px 20px rgb(210 26 7 / 32%);
	transform: translateY(-1px);
}

.elementor-39 .elementor-element.elementor-element-6307095 .ekit-menu-nav-link {
	align-items: center;
	border-radius: 999px;
	color: var(--figma-ink) !important;
	display: inline-flex;
	font-family: 'Happy Monkey', sans-serif !important;
	font-size: 18px !important;
	letter-spacing: 0.02em;
	padding: 0.38rem 0.74rem !important;
	position: relative;
	transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.elementor-39 .elementor-element.elementor-element-6307095 .ekit-menu-nav-link:hover,
.elementor-39 .elementor-element.elementor-element-6307095 .ekit-menu-nav-link:focus-visible {
	background: rgb(255 255 255 / 88%);
	box-shadow: 0 4px 10px rgb(34 34 33 / 8%);
}

.elementor-39 .elementor-element.elementor-element-6307095 .ekit-menu-nav-link.active {
	background: rgb(255 255 255 / 96%);
	box-shadow: 0 4px 12px rgb(34 34 33 / 10%);
}

@media (min-width: 1280px) {
	.elementor-39 .elementor-element.elementor-element-30980e3 > .e-con-inner {
		max-width: 1240px;
		min-height: 152px;
		padding: 28px 0;
	}
	.elementor-39 .elementor-element.elementor-element-6307095 .ekit-menu-nav-link {
		font-size: 19px !important;
		padding: 0.36rem 0.8rem !important;
	}
	.elementor-39 .elementor-element.elementor-element-77cf17d .elementor-button {
		padding: 0.82rem 1.9rem;
	}
}

/* =============================================================
   PAPER PLANE ORIENTATION
   The ornament-paperplane.svg is drawn nose-down/back-up. We render
   it pointed up by rotating 180deg, then add a gentle floating
   animation so it feels like it's flying out of the page.
   ============================================================= */
/* Plane SVG natural orientation: nose points up-right.
   Add a gentle float; do NOT flip 180deg (that pointed nose down). */
@keyframes ilc-plane-float {
	0%   { transform: translate(0, 0)        rotate(0deg); }
	50%  { transform: translate(6px, -10px) rotate(4deg); }
	100% { transform: translate(0, 0)        rotate(0deg); }
}

img[src$="ornament-paperplane.svg"] {
	animation: ilc-plane-float 5.5s ease-in-out infinite;
	transform-origin: 60% 80%;
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	img[src$="ornament-paperplane.svg"] {
		animation: none;
		transform: none;
	}
}

/* =============================================================
   MODERN PLAYFUL MOBILE MENU (full-screen overlay)
   Activates below 1025px (matches data-responsive-breakpoint).
   ============================================================= */
@media (max-width: 1024px) {
	.elementor-39 .elementor-element.elementor-element-30980e3 {
		min-height: 94px !important;
	}

	.elementor-39 .elementor-element.elementor-element-30980e3 > .e-con-inner {
		align-items: center;
		min-height: 90px;
		padding: 4px 14px 6px;
	}

	.elementor-39 .elementor-element.elementor-element-fc71be3 img {
		width: clamp(176px, 42vw, 232px);
	}

	.elementor-39 .elementor-element.elementor-element-6307095 {
		flex: 0 0 auto;
		justify-content: flex-end;
		margin-left: auto;
		width: auto;
	}

	.elementor-39 .elementor-element.elementor-element-6307095 .elementor-widget-container {
		display: flex;
		justify-content: flex-end;
		width: 100%;
	}

	/* Hamburger button — modern soft squircle, sky-gradient with white bars */
	.elementor-39 .elementskit-menu-hamburger {
		align-self: center;
		align-items: center;
		background: linear-gradient(135deg, #6dd6f7 0%, #42bfed 55%, #2ea3d6 100%);
		border: none;
		border-radius: 14px;
		box-shadow:
			0 1px 0 rgb(255 255 255 / 35%) inset,
			0 -2px 6px rgb(0 0 0 / 10%) inset,
			0 6px 14px rgb(46 163 214 / 35%);
		cursor: pointer;
		display: inline-flex;
		flex-direction: column;
		gap: 6px;
		height: 46px;
		justify-content: center;
		margin-left: auto;
		padding: 0;
		position: relative;
		transition:
			transform 240ms cubic-bezier(.34, 1.56, .64, 1),
			box-shadow 240ms ease,
			background 240ms ease;
		width: 46px;
		z-index: 1001;
	}
	.elementor-39 .elementskit-menu-hamburger:hover,
	.elementor-39 .elementskit-menu-hamburger:focus-visible {
		transform: translateY(-1px) scale(1.06);
		box-shadow:
			0 1px 0 rgb(255 255 255 / 45%) inset,
			0 -2px 6px rgb(0 0 0 / 10%) inset,
			0 10px 22px rgb(46 163 214 / 45%);
	}
	.elementor-39 .elementskit-menu-hamburger:active {
		transform: translateY(0) scale(0.98);
	}
	.elementor-39 .elementskit-menu-hamburger .elementskit-menu-hamburger-icon {
		background: #fff;
		border-radius: 999px;
		box-shadow: 0 1px 1.5px rgb(0 0 0 / 18%);
		display: block;
		height: 2.5px;
		transition: width 260ms ease, transform 280ms ease, opacity 220ms ease;
		width: 22px;
	}
	/* Subtle staggered widths for a friendlier look */
	.elementor-39 .elementskit-menu-hamburger .elementskit-menu-hamburger-icon:nth-child(1) { width: 22px; }
	.elementor-39 .elementskit-menu-hamburger .elementskit-menu-hamburger-icon:nth-child(2) { width: 16px; }
	.elementor-39 .elementskit-menu-hamburger .elementskit-menu-hamburger-icon:nth-child(3) { width: 22px; }
	.elementor-39 .elementskit-menu-hamburger:hover .elementskit-menu-hamburger-icon:nth-child(2),
	.elementor-39 .elementskit-menu-hamburger:focus-visible .elementskit-menu-hamburger-icon:nth-child(2) {
		width: 22px;
	}

	/* Hide hamburger entirely when menu is open — overlay has its own X */
	body.ilc-menu-open .elementor-39 .elementskit-menu-hamburger {
		display: none !important;
	}

	/* Hide live-site mobile drawer styles */
	.elementor-39 .elementskit-menu-overlay { display: none !important; }
	.elementor-39 .elementskit-menu-close   { display: none !important; }

	/* Full-screen playful overlay */
	.elementor-39 .elementskit-menu-container {
		align-items: stretch !important;
		background:
			radial-gradient(circle at 18% 12%, #cdeeff 0%, transparent 38%),
			radial-gradient(circle at 88% 86%, #ffe0c4 0%, transparent 42%),
			linear-gradient(160deg, #f3fcff 0%, #fff 50%, #fff7ec 100%);
		display: flex !important;
		flex-direction: column;
		justify-content: flex-start !important;
		height: 100dvh !important;
		left: 0 !important;
		max-width: 100vw !important;
		min-width: 0 !important;
		opacity: 0;
		overflow-y: scroll !important;
		overscroll-behavior: contain;
		padding: 90px 28px 40px;
		pointer-events: none;
		position: fixed !important;
		right: 0 !important;
		top: 0 !important;
		transform: translateY(-12px) scale(0.985);
		transition: opacity 320ms ease, transform 380ms cubic-bezier(.34, 1.56, .64, 1);
		visibility: hidden;
		width: 100vw !important;
		z-index: 1100;
	}
	.elementor-39 .elementskit-menu-container.elementskit-menu-open {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0) scale(1);
		visibility: visible;
	}

	/* Decorative floating clouds inside the menu */
	.elementor-39 .elementskit-menu-container::before,
	.elementor-39 .elementskit-menu-container::after {
		background: #fff;
		border-radius: 50%;
		content: '';
		filter: blur(1px);
		opacity: 0.85;
		pointer-events: none;
		position: absolute;
	}
	.elementor-39 .elementskit-menu-container::before {
		box-shadow:
			60px 10px 0 -4px #fff,
			120px 30px 0 -8px #fff;
		height: 70px;
		left: -30px;
		top: 80px;
		width: 110px;
	}
	.elementor-39 .elementskit-menu-container::after {
		box-shadow:
			-50px 18px 0 -6px #fff,
			-110px -8px 0 -10px #fff;
		bottom: 90px;
		height: 60px;
		right: -20px;
		width: 90px;
	}

	.elementor-39 .elementskit-menu-container .elementskit-nav-identity-panel {
		display: none !important;
	}

	.elementor-39 #menu-primary-menu {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		flex: 0 0 auto !important;
		gap: 14px !important;
		grid-template-columns: 1fr !important;
		justify-content: flex-start !important;
		align-items: stretch !important;
		list-style: none;
		margin: 0 auto !important;
		max-width: 420px;
		overflow: visible !important;
		padding: 0 !important;
		position: relative;
		width: 100%;
		z-index: 2;
	}
	.elementor-39 #menu-primary-menu li {
		flex: 0 0 auto !important;
		opacity: 0;
		transform: translateY(18px);
		width: 100% !important;
	}
	body.ilc-menu-open .elementor-39 #menu-primary-menu li {
		animation: ilc-menu-item-in 520ms cubic-bezier(.34, 1.56, .64, 1) forwards;
	}
	body.ilc-menu-open .elementor-39 #menu-primary-menu li:nth-child(1) { animation-delay: 80ms;  }
	body.ilc-menu-open .elementor-39 #menu-primary-menu li:nth-child(2) { animation-delay: 150ms; }
	body.ilc-menu-open .elementor-39 #menu-primary-menu li:nth-child(3) { animation-delay: 220ms; }
	body.ilc-menu-open .elementor-39 #menu-primary-menu li:nth-child(4) { animation-delay: 290ms; }
	body.ilc-menu-open .elementor-39 #menu-primary-menu li:nth-child(5) { animation-delay: 360ms; }
	body.ilc-menu-open .elementor-39 #menu-primary-menu li:nth-child(6) { animation-delay: 430ms; }

	@keyframes ilc-menu-item-in {
		from { opacity: 0; transform: translateY(18px) scale(0.96); }
		to   { opacity: 1; transform: translateY(0)    scale(1); }
	}

	.elementor-39 #menu-primary-menu .ekit-menu-nav-link {
		align-items: center;
		background: rgb(255 255 255 / 75%);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		border: 2px solid rgb(66 191 237 / 18%);
		border-radius: 22px;
		box-shadow: 0 6px 18px rgb(45 45 45 / 6%);
		color: var(--figma-ink) !important;
		display: flex !important;
		font-family: 'Chewy', 'Happy Monkey', cursive !important;
		font-size: 26px !important;
		gap: 14px;
		justify-content: flex-start;
		letter-spacing: 0.01em;
		padding: 18px 22px !important;
		position: relative;
		text-align: left;
		transition:
			transform 220ms cubic-bezier(.34, 1.56, .64, 1),
			box-shadow 220ms ease,
			border-color 220ms ease,
			background 220ms ease;
	}
	.elementor-39 #menu-primary-menu .ekit-menu-nav-link::before {
		/* The colored icon tile; actual emoji injected by JS as .ilc-nav-icon */
		background: var(--icon-bg, linear-gradient(135deg, #42bfed, #6ad0f1));
		border-radius: 14px;
		box-shadow: 0 3px 10px rgb(0 0 0 / 10%);
		content: '';
		display: none; /* using .ilc-nav-icon span instead */
		height: 48px;
		width: 48px;
		flex-shrink: 0;
	}

	/* Emoji icon tile — actual DOM text for cross-platform emoji color */
	.elementor-39 #menu-primary-menu .ilc-nav-icon {
		align-items: center;
		border-radius: 14px;
		box-shadow: 0 3px 10px rgb(0 0 0 / 10%);
		background: var(--icon-bg, linear-gradient(135deg, #42bfed, #6ad0f1));
		display: inline-flex;
		font-size: 26px;
		flex-shrink: 0;
		height: 48px;
		justify-content: center;
		line-height: 1;
		width: 48px;
	}
	/* Pastel icon tiles — light enough so the emoji renders clearly */
	.elementor-39 #menu-primary-menu li:nth-child(1) .ekit-menu-nav-link { --icon-bg: linear-gradient(135deg, #b8eeff, #7dd9f5); }
	.elementor-39 #menu-primary-menu li:nth-child(2) .ekit-menu-nav-link { --icon-bg: linear-gradient(135deg, #fff0a3, #ffd966); }
	.elementor-39 #menu-primary-menu li:nth-child(3) .ekit-menu-nav-link { --icon-bg: linear-gradient(135deg, #ffbed4, #ff8fb5); }
	.elementor-39 #menu-primary-menu li:nth-child(4) .ekit-menu-nav-link { --icon-bg: linear-gradient(135deg, #c0f2c3, #82e086); }
	.elementor-39 #menu-primary-menu li:nth-child(5) .ekit-menu-nav-link { --icon-bg: linear-gradient(135deg, #dbbfff, #c285ff); }
	.elementor-39 #menu-primary-menu li:nth-child(6) .ekit-menu-nav-link { --icon-bg: linear-gradient(135deg, #ffbdaf, #ff8870); }

	.elementor-39 #menu-primary-menu .ekit-menu-nav-link:hover,
	.elementor-39 #menu-primary-menu .ekit-menu-nav-link:focus-visible {
		background: #fff;
		border-color: #ff9f3e;
		box-shadow: 0 12px 26px rgb(255 159 62 / 22%);
		transform: translateY(-2px);
	}

	/* Injected overlay close (×) button — lives inside the overlay so it's always visible */
	.elementor-39 .elementskit-menu-container .ilc-overlay-close {
		align-items: center;
		background: linear-gradient(135deg, #ff9f3e 0%, #ff7e3e 100%);
		border: none;
		border-radius: 50%;
		box-shadow: 0 6px 18px rgb(255 127 62 / 45%);
		cursor: pointer;
		display: flex;
		height: 52px;
		justify-content: center;
		padding: 0;
		position: absolute;
		right: 24px;
		top: 16px;
		transition: transform 280ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 220ms ease;
		width: 52px;
		z-index: 10;
	}
	.elementor-39 .elementskit-menu-container .ilc-overlay-close svg {
		height: 22px;
		width: 22px;
	}
	.elementor-39 .elementskit-menu-container .ilc-overlay-close:hover,
	.elementor-39 .elementskit-menu-container .ilc-overlay-close:focus-visible {
		box-shadow: 0 10px 24px rgb(255 127 62 / 55%);
		transform: rotate(90deg) scale(1.08);
	}

	/* Lock body scroll when menu is open */
	body.ilc-menu-open {
		overflow: hidden;
	}

	/* Header should stay above the overlay’s decorative bg, but the
	   overlay itself sits above the header content via z-index 1100. */
	.elementor-39 .elementor-element.elementor-element-30980e3 {
		z-index: 1000;
	}
}

/* =============================================================
   GLOBAL: hide noisy WP woocommerce/elementskit ajax spinners that
   can briefly flash and trigger console warnings on missing JS.
   ============================================================= */
.ekit-ajax-spinner,
.elementskit-ajax-spinner {
	display: none !important;
}