/* The redesigned header ships its own mobile drawer; ShiftNav's invisible
   toggle bar would otherwise sit on top of the hamburger and intercept taps. */
#shiftnav-toggle-main,
.shiftnav-togglebar,
.shiftnav-toggle {
	display: none !important;
	pointer-events: none !important;
}

.willow-mobile-parent-link {
	display: none !important;
}

/* UberMenu's chevron is absolutely positioned and needs padding-right on the
   target. Redesign nav padding uses !important shorthand that clears that
   space, so the indicator lands on top of labels like Treatments. */
@media screen and (min-width: 1251px) {
	#site-navigation.willow-site-header__nav .ubermenu-has-submenu-drop > .ubermenu-target {
		display: inline-flex !important;
		align-items: center !important;
		gap: 0.35em !important;
		padding-right: 0 !important;
	}

	#site-navigation.willow-site-header__nav .ubermenu-has-submenu-drop > .ubermenu-target > .ubermenu-sub-indicator {
		position: static !important;
		right: auto !important;
		top: auto !important;
		margin: 0 !important;
		transform: none !important;
		flex-shrink: 0 !important;
		line-height: 1 !important;
	}

	/* Top-level hover panels are configured as full-width megas; shrink them to
	   the longest link so Treatments / Getting Started don't span the nav bar. */
	#site-navigation.willow-site-header__nav .ubermenu-item-level-0.ubermenu-has-submenu-drop {
		position: relative !important;
	}

	#site-navigation.willow-site-header__nav .ubermenu-item-level-0 > .ubermenu-submenu-drop {
		width: fit-content !important;
		min-width: 0 !important;
		left: 0 !important;
		right: auto !important;
		padding: 10px 0 !important;
	}

	#site-navigation.willow-site-header__nav .ubermenu-item-level-0 > .ubermenu-submenu-drop .ubermenu-row,
	#site-navigation.willow-site-header__nav .ubermenu-item-level-0 > .ubermenu-submenu-drop .ubermenu-column {
		display: block !important;
		float: none !important;
		width: fit-content !important;
		min-width: 0 !important;
		max-width: none !important;
	}

	#site-navigation.willow-site-header__nav .ubermenu-item-level-0 > .ubermenu-submenu-drop .ubermenu-target {
		padding: 10px 18px !important;
		white-space: nowrap !important;
	}
}

@media screen and (max-width: 1250px) {
	#site-navigation.willow-site-header__nav {
		position: fixed !important;
		top: 0 !important;
		right: auto !important;
		bottom: 0 !important;
		left: 100% !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		width: min(82vw, 360px) !important;
		height: 100svh !important;
		padding: calc(118px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom)) !important;
		border: 0 !important;
		border-left: 1px solid rgba(28, 55, 84, 0.14) !important;
		border-radius: 0 !important;
		background:
			linear-gradient(155deg, rgba(0, 136, 209, 0.14), transparent 38%),
			linear-gradient(24deg, rgba(230, 44, 122, 0.12), transparent 46%),
			rgba(255, 255, 255, 0.96) !important;
		box-shadow: -24px 0 70px rgba(28, 55, 84, 0.16) !important;
		opacity: 1 !important;
		visibility: hidden !important;
		pointer-events: auto !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		transform: none !important;
		transition:
			left 320ms cubic-bezier(0.16, 1, 0.3, 1),
			visibility 0s 320ms !important;
	}

	/* UberMenu's internals report no intrinsic height, so a grid drawer clamps
	   the menu row to the leftover viewport space and expanded accordions paint
	   over the CTA buttons below. Flex items with shrink disabled size to their
	   real content, letting the drawer scroll instead. */
	#site-navigation.willow-site-header__nav > * {
		flex: 0 0 auto !important;
	}

	#site-navigation.willow-site-header__nav.is-open {
		left: calc(100% - min(82vw, 360px)) !important;
		right: auto !important;
		transform: none !important;
		visibility: visible !important;
		transition: left 320ms cubic-bezier(0.16, 1, 0.3, 1) !important;
	}

	/* UberMenu's disabled responsive toggle collapses the inner nav to
	   height 0 with overflow hidden; the drawer manages visibility itself. */
	#site-navigation.willow-site-header__nav .ubermenu {
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		width: 100% !important;
	}

	/* UberMenu's responsive CSS sets visibility: hidden on menu internals when
	   its own toggle is disabled; tie them to the drawer's visibility instead. */
	#site-navigation.willow-site-header__nav .ubermenu,
	#site-navigation.willow-site-header__nav .ubermenu-nav,
	#site-navigation.willow-site-header__nav li,
	#site-navigation.willow-site-header__nav a {
		visibility: inherit !important;
	}

	#site-navigation.willow-site-header__nav > .ubermenu > .ubermenu-nav,
	#site-navigation.willow-site-header__nav > ul {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		gap: 10px !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	#site-navigation.willow-site-header__nav .ubermenu-item-level-0,
	#site-navigation.willow-site-header__nav > ul > li {
		display: block !important;
		float: none !important;
		clear: both !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		align-self: stretch !important;
		border: 0 !important;
		text-align: left !important;
	}

	#site-navigation.willow-site-header__nav .ubermenu-item-level-0.ubermenu-column,
	#site-navigation.willow-site-header__nav .ubermenu-item-level-0.ubermenu-column-auto {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	#site-navigation.willow-site-header__nav .ubermenu-item-level-0 > .ubermenu-target,
	#site-navigation.willow-site-header__nav > ul > li > a {
		position: relative !important;
		left: 0 !important;
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		min-height: 54px !important;
		padding: 0 16px 0 18px !important;
		gap: 0.35em !important;
		border: 1px solid rgba(28, 55, 84, 0.1) !important;
		border-radius: 8px !important;
		background:
			linear-gradient(90deg, rgba(0, 136, 209, 0.07), transparent 42%),
			rgba(255, 255, 255, 0.7) !important;
		box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.48) !important;
		color: #172033 !important;
		font-family: Poppins, Open Sans, sans-serif !important;
		font-size: 15px !important;
		font-weight: 850 !important;
		letter-spacing: 1.5px !important;
		line-height: 1.2 !important;
		text-transform: uppercase !important;
		text-decoration: none !important;
		translate: 0 0 !important;
		transition:
			border-color 180ms ease,
			background 180ms ease,
			box-shadow 180ms ease,
			color 180ms ease,
			left 180ms ease,
			transform 180ms ease,
			translate 180ms ease !important;
	}

	#site-navigation.willow-site-header__nav .ubermenu-item-level-0 > .ubermenu-target::before,
	#site-navigation.willow-site-header__nav > ul > li > a::before {
		content: "" !important;
		position: absolute !important;
		left: 0 !important;
		top: 10px !important;
		bottom: 10px !important;
		width: 3px !important;
		border-radius: 0 999px 999px 0 !important;
		background: linear-gradient(180deg, #e7b900, #e62c7a, #0088d1) !important;
		opacity: 0.64 !important;
	}

	#site-navigation.willow-site-header__nav .ubermenu-has-submenu-drop > .ubermenu-target > .ubermenu-sub-indicator {
		position: static !important;
		right: auto !important;
		top: auto !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-width: 44px !important;
		min-height: 44px !important;
		margin: 0 -10px 0 auto !important;
		padding: 0 10px !important;
		transform: none !important;
		flex-shrink: 0 !important;
		line-height: 1 !important;
		cursor: pointer !important;
		transition: transform 180ms ease !important;
	}

	#site-navigation.willow-site-header__nav .ubermenu-has-submenu-drop.ubermenu-active > .ubermenu-target > .ubermenu-sub-indicator {
		transform: rotate(180deg) !important;
	}

	#site-navigation.willow-site-header__nav .ubermenu-item-level-0 > .ubermenu-target:hover,
	#site-navigation.willow-site-header__nav .ubermenu-item-level-0 > .ubermenu-target:focus-visible,
	#site-navigation.willow-site-header__nav > ul > li > a:hover,
	#site-navigation.willow-site-header__nav > ul > li > a:focus-visible {
		border-color: rgba(230, 44, 122, 0.28) !important;
		background:
			linear-gradient(90deg, rgba(231, 185, 0, 0.13), rgba(230, 44, 122, 0.08)),
			rgba(255, 255, 255, 0.86) !important;
		box-shadow:
			0 12px 24px rgba(28, 55, 84, 0.08),
			inset 0 0 18px rgba(255, 255, 255, 0.62) !important;
		color: #172033 !important;
		left: -2px !important;
		translate: -2px 0 !important;
		transform: translateX(-2px) !important;
	}

	/* Accordion submenus: UberMenu still uses hover/absolute megas below our
	   drawer breakpoint, and collapse mode keeps subs display:none. Force an
	   inline expand panel instead. */
	#site-navigation.willow-site-header__nav .ubermenu-item-level-0 > .ubermenu-submenu-drop,
	#site-navigation.willow-site-header__nav .ubermenu-responsive-collapse .ubermenu-item-level-0 > .ubermenu-submenu {
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		height: auto !important;
		max-height: none !important;
		margin: 8px 0 0 !important;
		padding: 0 0 0 10px !important;
		display: none !important;
		visibility: visible !important;
		opacity: 1 !important;
		overflow: visible !important;
		clip: auto !important;
		box-shadow: none !important;
		background: transparent !important;
		transform: none !important;
	}

	#site-navigation.willow-site-header__nav .ubermenu-item-level-0.ubermenu-active > .ubermenu-submenu-drop,
	#site-navigation.willow-site-header__nav .ubermenu-responsive-collapse .ubermenu-item-level-0.ubermenu-active > .ubermenu-submenu {
		display: grid !important;
		gap: 8px !important;
	}

	#site-navigation.willow-site-header__nav .willow-mobile-parent-link {
		position: relative !important;
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		box-sizing: border-box !important;
		min-height: 46px !important;
		padding: 0 14px 0 16px !important;
		border: 1px solid rgba(230, 44, 122, 0.16) !important;
		border-radius: 8px !important;
		background:
			linear-gradient(90deg, rgba(231, 185, 0, 0.14), rgba(230, 44, 122, 0.08)),
			rgba(255, 255, 255, 0.9) !important;
		box-shadow: none !important;
		color: #172033 !important;
		font-family: Poppins, Open Sans, sans-serif !important;
		font-size: 13px !important;
		font-weight: 800 !important;
		letter-spacing: 0.9px !important;
		line-height: 1.25 !important;
		text-transform: uppercase !important;
		text-decoration: none !important;
		white-space: normal !important;
		left: 0 !important;
		translate: 0 0 !important;
		transform: none !important;
	}

	#site-navigation.willow-site-header__nav .ubermenu-item-level-0 > .ubermenu-submenu-drop .ubermenu-row,
	#site-navigation.willow-site-header__nav .ubermenu-item-level-0 > .ubermenu-submenu-drop .ubermenu-column,
	#site-navigation.willow-site-header__nav .ubermenu-item-level-0 > .ubermenu-submenu-drop .ubermenu-item {
		display: block !important;
		float: none !important;
		clear: both !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
	}

	#site-navigation.willow-site-header__nav .ubermenu-item-level-0 > .ubermenu-submenu-drop .ubermenu-row {
		display: contents !important;
	}

	#site-navigation.willow-site-header__nav .ubermenu-item-level-0 > .ubermenu-submenu-drop .ubermenu-target {
		position: relative !important;
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		box-sizing: border-box !important;
		min-height: 46px !important;
		padding: 0 14px 0 16px !important;
		border: 1px solid rgba(28, 55, 84, 0.08) !important;
		border-radius: 8px !important;
		background: rgba(255, 255, 255, 0.78) !important;
		box-shadow: none !important;
		color: #172033 !important;
		font-family: Poppins, Open Sans, sans-serif !important;
		font-size: 13px !important;
		font-weight: 650 !important;
		letter-spacing: 0.8px !important;
		line-height: 1.25 !important;
		text-transform: none !important;
		text-decoration: none !important;
		white-space: normal !important;
		left: 0 !important;
		translate: 0 0 !important;
		transform: none !important;
	}

	#site-navigation.willow-site-header__nav .ubermenu-item-level-0 > .ubermenu-submenu-drop .ubermenu-target::before {
		display: none !important;
	}

	#site-navigation.willow-site-header__nav .ubermenu-item-level-0 > .ubermenu-submenu-drop .ubermenu-target:hover,
	#site-navigation.willow-site-header__nav .ubermenu-item-level-0 > .ubermenu-submenu-drop .ubermenu-target:focus-visible {
		border-color: rgba(0, 136, 209, 0.28) !important;
		background: rgba(255, 255, 255, 0.94) !important;
		left: 0 !important;
		translate: 0 0 !important;
		transform: none !important;
	}

	#site-navigation.willow-site-header__nav .ubermenu-retractor,
	#site-navigation.willow-site-header__nav .ubermenu-sub-indicator-close {
		display: none !important;
	}
}

@media screen and (max-width: 768px) {
	#site-navigation.willow-site-header__nav {
		padding-top: calc(86px + env(safe-area-inset-top)) !important;
	}
}

.willowbrook-audio-toggle {
	position: fixed;
	left: max(1rem, env(safe-area-inset-left));
	top: calc(108px + max(0.75rem, env(safe-area-inset-top)));
	bottom: auto;
	z-index: 40;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(23, 23, 23, 0.82);
	color: #fff;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.willowbrook-audio-toggle:hover {
	transform: translateY(-1px);
	background: rgba(23, 23, 23, 0.92);
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}

.willowbrook-audio-toggle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.willowbrook-audio-toggle__icon {
	width: 1.35rem;
	height: 1.35rem;
}

.willowbrook-audio-toggle__icon--on {
	display: none;
}

.willowbrook-audio-toggle.is-playing .willowbrook-audio-toggle__icon--on {
	display: block;
}

.willowbrook-audio-toggle.is-playing .willowbrook-audio-toggle__icon--off {
	display: none;
}

@media screen and (max-width: 640px) {
	.willowbrook-audio-toggle {
		width: 2.75rem;
		height: 2.75rem;
	}
}

@media screen and (max-width: 768px) {
	.willowbrook-audio-toggle {
		top: calc(86px + max(0.75rem, env(safe-area-inset-top)));
	}
}

@media screen and (max-width: 768px) {
	.willow-home .willow-hero {
		align-content: start;
		justify-items: center;
		padding: clamp(32px, 8vw, 48px) 18px 28px;
		background-image: var(--willow-hero-mobile-image);
		background-position: center top;
	}

	.willow-home .willow-hero::before {
		background-image: var(--willow-hero-mobile-image);
		background-position: center top;
		background-size: cover;
	}

	.willow-home .willow-hero::after {
		background: none;
	}

	.willow-home .willow-hero__content {
		justify-items: center;
		width: min(100%, 340px);
		max-width: 340px;
		margin: 0 auto;
		text-align: center;
	}

	.willow-home .willow-hero__content h1 {
		width: 100%;
		max-width: 340px;
		font-size: clamp(2.25rem, 10vw, 3rem);
		line-height: 0.94;
		text-shadow: none;
		filter: drop-shadow(0 4px 5px rgba(255, 255, 255, 0.72));
	}

	.willow-home .willow-hero__content .willow-button {
		min-height: 46px;
		padding: 10px 20px;
		font-size: 14px;
	}
}

@media screen and (min-width: 390px) and (max-width: 768px) {
	.willow-home .willow-hero__content h1 {
		font-size: clamp(2.65rem, 11vw, 3.35rem);
	}

	.willow-home .willow-hero__content .willow-button {
		min-height: 48px;
		padding: 11px 22px;
		font-size: 15px;
	}
}

/* Keep the compact header controls aligned when the navigation becomes a
   drawer. The desktop grid assigns the end controls to column three, which
   otherwise creates an implicit column after the mobile grid collapses. */
@media screen and (max-width: 1250px) {
	.willow-site-header__inner {
		grid-template-columns: minmax(0, 1fr) auto !important;
		align-items: center !important;
		gap: 12px !important;
	}

	#header-logo-container.willow-site-header__brand {
		align-self: center !important;
		justify-self: start !important;
		height: 76px !important;
		min-width: 0 !important;
	}

	.willow-site-header__brand a,
	.willow-site-header__brand-logo {
		height: 100% !important;
		max-height: 76px !important;
	}

	.willow-site-header__end {
		grid-column: 2 !important;
		align-self: center !important;
		justify-self: end !important;
		height: auto !important;
		margin: 0 !important;
	}

	.willow-site-header__menu-button {
		align-self: center !important;
		margin: 0 !important;
	}

	/* Match the desktop phone CTA instead of inheriting the drawer link card. */
	#site-navigation.willow-site-header__nav .willow-site-header__drawer-actions {
		display: grid !important;
		gap: 10px !important;
		width: 100% !important;
		margin-top: 8px !important;
	}

	#site-navigation.willow-site-header__nav a.willow-site-header__drawer-phone {
		position: static !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 7px !important;
		width: 100% !important;
		min-height: 44px !important;
		padding: 0 14px !important;
		border: 1px solid transparent !important;
		border-radius: 999px !important;
		background:
			linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)) padding-box,
			var(--willow-logo-gradient-loop) border-box !important;
		background-size: 100% 100%, 400% 100% !important;
		color: #172033 !important;
		font: 650 0.95rem/1 Poppins, Open Sans, sans-serif !important;
		letter-spacing: 0.03em !important;
		text-transform: none !important;
		box-shadow:
			0 10px 24px rgba(28, 55, 84, 0.1),
			inset 0 0 14px rgba(255, 255, 255, 0.52) !important;
		translate: none !important;
		transform: none !important;
	}

	#site-navigation.willow-site-header__nav a.willow-site-header__drawer-phone::before,
	#site-navigation.willow-site-header__nav a.willow-site-header__drawer-phone::after {
		display: none !important;
		content: none !important;
	}

	#site-navigation.willow-site-header__nav .willow-site-header__drawer-schedule {
		min-height: 44px !important;
		border-radius: 999px !important;
		font: 700 0.95rem/1 Poppins, Open Sans, sans-serif !important;
	}
}

@media screen and (max-width: 768px) {
	#header-logo-container.willow-site-header__brand {
		height: 58px !important;
	}

	.willow-site-header__brand a,
	.willow-site-header__brand-logo {
		max-height: 58px !important;
	}
}

/* Give the footer brand and column labels stronger visual hierarchy. */
.willow-site-footer__brand-link {
	gap: 14px;
}

.willow-site-footer__brand-icon {
	width: 80px;
}

.willow-site-footer__brand-text {
	font-size: 1.5rem;
}

.willow-site-footer__block strong {
	font-size: 1.3rem;
	line-height: 1.2;
}