/**
 * Uplift 360 Homepage Stylesheet
 * Brand colors:
 * - Deep Navy: #10185B
 * - Uplift Purple: #6626D9
 * - Lime Green: #64E329
 * - Pale Lavender: #F3EEFF
 * - Pale Green: #F0FBEA
 * - Soft Grey: #F7F7FA
 * - Dark Body: #202447
 */

/* ==========================================================================
   Base & Typography Tokens
   ========================================================================== */
:root {
	--u360-navy: #10185B;
	--u360-purple: #6626D9;
	--u360-purple-dark: #501bb3;
	--u360-purple-light: #F3EEFF;
	--u360-lime: #64E329;
	--u360-green-pale: #F0FBEA;
	--u360-grey-soft: #F7F7FA;
	--u360-text-dark: #202447;
	--u360-text-muted: #575D7A;
	--u360-border-color: rgba(16, 24, 91, 0.08);
	--u360-font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--u360-font-script: 'Caveat', cursive;
	--u360-radius-card: 20px;
	--u360-radius-btn: 999px;
	--u360-transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

body.u360-homepage {
	font-family: var(--u360-font-primary);
	color: var(--u360-text-dark);
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

/* ==========================================================================
   Global Header & Sticky Navigation
   ========================================================================== */
.u360-site-header,
.site-header {
	width: 100%;
	position: sticky;
	top: 0;
	z-index: 999;
	background: #ffffff;
	min-height: 82px;
	border-bottom: 1px solid var(--u360-border-color);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: box-shadow 0.3s ease;
	box-sizing: border-box;
}

.u360-site-header.is-scrolled,
.site-header.is-scrolled {
	box-shadow: 0 4px 20px rgba(16, 24, 91, 0.06);
}

.site-header__inner,
.u360-header-shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(calc(100% - 40px), var(--u360-container, 1200px));
	max-width: var(--u360-container, 1200px);
	margin-inline: auto;
	box-sizing: border-box;
}

@media (max-width: 640px) {
	.site-header__inner,
	.u360-header-shell {
		width: min(calc(100% - 32px), var(--u360-container, 1200px));
	}
}

.u360-site-header .wordmark,
.u360-site-header .custom-logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	font-weight: 800;
	font-size: 1.45rem;
	color: var(--u360-navy);
}

.u360-site-header .custom-logo-link img,
.u360-site-header .wordmark img {
	height: 44px;
	width: auto;
	object-fit: contain;
}

.u360-main-nav {
	display: flex;
	align-items: center;
}

.u360-main-nav ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 28px;
}

.site-header .main-navigation a,
.site-header .main-navigation span,
.site-header .main-navigation button,
.site-header .u360-main-nav a,
.site-header .u360-main-nav span,
.site-header .u360-main-nav button,
.u360-main-nav li a,
.u360-main-nav li > span,
.u360-main-nav li > button {
	text-decoration: none;
	font-family: var(--u360-font-sans, 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.5;
	min-height: 44px;
	color: var(--u360-text-dark);
	position: relative;
	padding: 6px 0;
	display: inline-flex;
	align-items: center;
	background: none;
	border: none;
	transition: var(--u360-transition);
}

.site-header .main-navigation .current-menu-item > a,
.site-header .main-navigation .current_page_item > a,
.site-header .main-navigation .current-menu-parent > a,
.site-header .main-navigation .current_page_parent > a,
.site-header .main-navigation .current-menu-ancestor > a,
.site-header .main-navigation .current_page_ancestor > a,
.site-header .u360-main-nav .current-menu-item > a,
.site-header .u360-main-nav .current_page_item > a,
.site-header .u360-main-nav .current-menu-parent > a,
.site-header .u360-main-nav .current_page_parent > a,
.site-header .u360-main-nav .current-menu-ancestor > a,
.site-header .u360-main-nav .current_page_ancestor > a {
	font-weight: 500;
}

/* Non-clickable top-level container items */
.u360-main-nav li.menu-item-has-children > a[href="#"],
.u360-main-nav li.menu-item-has-children > a[href="#0"],
.u360-main-nav li.menu-item-has-children > a[href="javascript:void(0)"],
.u360-main-nav li.menu-item-has-children > a:not([href]),
.u360-main-nav li.menu-item-has-children > span,
.u360-main-nav li.menu-item-has-children > button {
	cursor: pointer;
}

/* Active & Hover state for top-level links and parent containers */
.u360-main-nav > ul > li > a:hover,
.u360-main-nav > ul > li > span:hover,
.u360-main-nav > ul > li > button:hover,
.u360-main-nav > .menu > li > a:hover,
.u360-main-nav > .menu > li > span:hover,
.u360-main-nav > .menu > li > button:hover,
.u360-main-nav > ul > li.current-menu-item > a,
.u360-main-nav > ul > li.current_page_item > a,
.u360-main-nav > ul > li.current-menu-parent > a,
.u360-main-nav > ul > li.current_page_parent > a,
.u360-main-nav > ul > li.current-menu-ancestor > a,
.u360-main-nav > ul > li.current_page_ancestor > a,
.u360-main-nav > ul > li.current-menu-item > span,
.u360-main-nav > ul > li.current_page_item > span,
.u360-main-nav > ul > li.current-menu-parent > span,
.u360-main-nav > ul > li.current_page_parent > span,
.u360-main-nav > ul > li.current-menu-ancestor > span,
.u360-main-nav > ul > li.current_page_ancestor > span,
.u360-main-nav > ul > li.current-menu-item > button,
.u360-main-nav > ul > li.current_page_item > button,
.u360-main-nav > ul > li.current-menu-parent > button,
.u360-main-nav > ul > li.current_page_parent > button,
.u360-main-nav > ul > li.current-menu-ancestor > button,
.u360-main-nav > ul > li.current_page_ancestor > button,
.u360-main-nav > .menu > li.current-menu-item > a,
.u360-main-nav > .menu > li.current_page_item > a,
.u360-main-nav > .menu > li.current-menu-parent > a,
.u360-main-nav > .menu > li.current_page_parent > a,
.u360-main-nav > .menu > li.current-menu-ancestor > a,
.u360-main-nav > .menu > li.current_page_ancestor > a,
.u360-main-nav > .menu > li.current-menu-item > span,
.u360-main-nav > .menu > li.current_page_item > span,
.u360-main-nav > .menu > li.current-menu-parent > span,
.u360-main-nav > .menu > li.current_page_parent > span,
.u360-main-nav > .menu > li.current-menu-ancestor > span,
.u360-main-nav > .menu > li.current_page_ancestor > span,
.u360-main-nav > .menu > li.current-menu-item > button,
.u360-main-nav > .menu > li.current_page_item > button,
.u360-main-nav > .menu > li.current-menu-parent > button,
.u360-main-nav > .menu > li.current_page_parent > button,
.u360-main-nav > .menu > li.current-menu-ancestor > button,
.u360-main-nav > .menu > li.current_page_ancestor > button {
	color: var(--u360-purple);
}

/* Active bottom indicator bar for top-level directly active or parent items */
.u360-main-nav > ul > li > a:hover::after,
.u360-main-nav > ul > li > span:hover::after,
.u360-main-nav > ul > li > button:hover::after,
.u360-main-nav > .menu > li > a:hover::after,
.u360-main-nav > .menu > li > span:hover::after,
.u360-main-nav > .menu > li > button:hover::after,
.u360-main-nav > ul > li.current-menu-item > a::after,
.u360-main-nav > ul > li.current_page_item > a::after,
.u360-main-nav > ul > li.current-menu-parent > a::after,
.u360-main-nav > ul > li.current_page_parent > a::after,
.u360-main-nav > ul > li.current-menu-ancestor > a::after,
.u360-main-nav > ul > li.current_page_ancestor > a::after,
.u360-main-nav > ul > li.current-menu-item > span::after,
.u360-main-nav > ul > li.current_page_item > span::after,
.u360-main-nav > ul > li.current-menu-parent > span::after,
.u360-main-nav > ul > li.current_page_parent > span::after,
.u360-main-nav > ul > li.current-menu-ancestor > span::after,
.u360-main-nav > ul > li.current_page_ancestor > span::after,
.u360-main-nav > ul > li.current-menu-item > button::after,
.u360-main-nav > ul > li.current_page_item > button::after,
.u360-main-nav > ul > li.current-menu-parent > button::after,
.u360-main-nav > ul > li.current_page_parent > button::after,
.u360-main-nav > ul > li.current-menu-ancestor > button::after,
.u360-main-nav > ul > li.current_page_ancestor > button::after,
.u360-main-nav > .menu > li.current-menu-item > a::after,
.u360-main-nav > .menu > li.current_page_item > a::after,
.u360-main-nav > .menu > li.current-menu-parent > a::after,
.u360-main-nav > .menu > li.current_page_parent > a::after,
.u360-main-nav > .menu > li.current-menu-ancestor > a::after,
.u360-main-nav > .menu > li.current_page_ancestor > a::after,
.u360-main-nav > .menu > li.current-menu-item > span::after,
.u360-main-nav > .menu > li.current_page_item > span::after,
.u360-main-nav > .menu > li.current-menu-parent > span::after,
.u360-main-nav > .menu > li.current_page_parent > span::after,
.u360-main-nav > .menu > li.current-menu-ancestor > span::after,
.u360-main-nav > .menu > li.current_page_ancestor > span::after,
.u360-main-nav > .menu > li.current-menu-item > button::after,
.u360-main-nav > .menu > li.current_page_item > button::after,
.u360-main-nav > .menu > li.current-menu-parent > button::after,
.u360-main-nav > .menu > li.current_page_parent > button::after,
.u360-main-nav > .menu > li.current-menu-ancestor > button::after,
.u360-main-nav > .menu > li.current_page_ancestor > button::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2.5px;
	background: var(--u360-purple);
	border-radius: 2px;
}

/* Keyboard focus-visible accessibility */
.u360-main-nav li a:focus-visible,
.u360-main-nav li > span:focus-visible,
.u360-main-nav li > button:focus-visible {
	outline: 2px solid var(--u360-purple);
	outline-offset: 3px;
}

.u360-header-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.u360-header-search-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	color: var(--u360-text-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: var(--u360-transition);
}

.u360-header-search-btn:hover {
	color: var(--u360-purple);
	background: var(--u360-purple-light);
}

.u360-header-cart-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--u360-text-dark);
	padding: 8px 12px;
	border-radius: var(--u360-radius-btn);
	background: var(--u360-grey-soft);
	transition: var(--u360-transition);
}

.u360-header-cart-btn:hover {
	background: var(--u360-purple-light);
	color: var(--u360-purple);
}

.u360-header-donate-btn {
	padding: 10px 24px;
	font-size: 15px;
	box-shadow: 0 4px 12px rgba(102, 38, 217, 0.25);
}

/* Mobile Hamburger */
.u360-mobile-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	box-sizing: border-box;
	flex-direction: column;
	gap: 5px;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 2;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.u360-hamburger-bar {
	width: 24px;
	height: 2.5px;
	background: var(--u360-navy);
	border-radius: 2px;
	transition: var(--u360-transition);
	pointer-events: none;
}

/* ==========================================================================
   Buttons & Shared Components
   ========================================================================== */
.u360-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--u360-font-primary);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	border-radius: var(--u360-radius-btn);
	padding: 14px 28px;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	transition: var(--u360-transition);
}

.u360-btn:hover {
	transform: translateY(-2px);
}

.u360-btn-purple {
	background-color: var(--u360-purple);
	color: #ffffff;
}

.u360-btn-purple:hover {
	background-color: var(--u360-purple-dark);
	color: #ffffff;
	box-shadow: 0 6px 16px rgba(102, 38, 217, 0.3);
}

.u360-btn-outline-purple {
	background-color: transparent;
	border-color: var(--u360-purple);
	color: var(--u360-purple);
}

.u360-btn-outline-purple:hover {
	background-color: var(--u360-purple-light);
	color: var(--u360-purple);
}

.u360-btn-lime {
	background-color: var(--u360-lime);
	color: var(--u360-navy);
	font-weight: 800;
}

.u360-btn-lime:hover {
	background-color: #55cf21;
	box-shadow: 0 6px 18px rgba(100, 227, 41, 0.4);
}

.u360-btn-white {
	background-color: #ffffff;
	color: var(--u360-purple);
	font-weight: 700;
}

.u360-btn-white:hover {
	background-color: #f8f8fb;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.u360-btn-full {
	width: 100%;
}

.u360-link-arrow,
.u360-link-purple {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: 15px;
	color: var(--u360-purple);
	text-decoration: none;
	transition: var(--u360-transition);
}

.u360-link-arrow:hover,
.u360-link-purple:hover {
	color: var(--u360-purple-dark);
	transform: translateX(3px);
}

.u360-badge {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: var(--u360-radius-btn);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.u360-badge-purple {
	background: var(--u360-purple-light);
	color: var(--u360-purple);
}

.u360-badge-green {
	background: #dcfce7;
	color: #166534;
}

.u360-highlight-purple {
	color: var(--u360-purple);
}

/* Common Section Layout & Containers */
.u360-hp-section {
	position: relative;
}

.u360-container,
.site-shell {
	width: min(100% - 40px, 1200px);
	margin-inline: auto;
}

.u360-hp-section-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 36px;
	gap: 20px;
}

.u360-hp-section-title {
	font-size: clamp(2rem, 3.2vw, 2.6rem);
	font-weight: 800;
	color: var(--u360-navy);
	margin: 0 0 10px;
	display: flex;
	align-items: center;
	gap: 12px;
	line-height: 1.2;
}

.u360-icon-bullet {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.u360-hp-section-subtitle {
	font-size: 16px;
	color: var(--u360-text-muted);
	margin: 0;
	max-width: 620px;
	line-height: 1.55;
}

/* ==========================================================================
   SECTION 2 — Responsive Animated Hero Carousel (Full-Bleed Panoramic Style)
   ========================================================================== */
.u360-hp-hero.u360-hero-carousel {
	padding: 0;
	position: relative;
	overflow: hidden;
	min-height: 580px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #ffffff;
}

@media (min-width: 1025px) {
	.u360-hp-hero.u360-hero-carousel {
		min-height: 640px;
		max-height: 720px;
	}
}

.u360-carousel-track {
	display: grid;
	grid-template-columns: 1fr;
	width: 100%;
	height: 100%;
	position: relative;
}

/* Individual Slide Stacking */
.u360-hero-slide {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	min-height: inherit;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), visibility 900ms ease;
	z-index: 1;
	display: flex;
	align-items: center;
	position: relative;
}

.u360-hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 2;
}

/* Progressive enhancement: Ensure initial/server-rendered first slide and single-slide carousels
   are visible immediately, even without JavaScript or before JavaScript initializes. */
.u360-hero-carousel:not(.js-carousel-ready) .u360-hero-slide:first-child,
.u360-hero-carousel.has-single-slide .u360-hero-slide {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 2;
}

.u360-hero-slide.is-leaving {
	opacity: 0;
	visibility: visible;
	pointer-events: none;
	z-index: 1;
	transition: opacity 800ms ease, visibility 800ms ease;
}

/* Full-Bleed Panoramic Photographic Backdrop */
.u360-hero-backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: hidden;
}

.u360-hp-hero-bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
	display: block;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1), transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

.u360-hero-slide.is-active .u360-hp-hero-bg-img,
.u360-hero-carousel:not(.js-carousel-ready) .u360-hero-slide:first-child .u360-hp-hero-bg-img,
.u360-hero-carousel.has-single-slide .u360-hero-slide .u360-hp-hero-bg-img {
	opacity: 1;
	transform: scale(1);
}

.u360-hero-slide.is-leaving .u360-hp-hero-bg-img {
	opacity: 0;
	transform: scale(0.98);
	transition: opacity 900ms ease, transform 900ms ease;
}

/* Broad Backdrop Gradient Removed - Replaced with Localized Readability Glow */
.u360-hero-backdrop-gradient {
	display: none;
}

/* Foreground Content Container */
.u360-hp-hero-shell {
	position: relative;
	z-index: 5;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 70px 48px;
}

.u360-hp-hero-layout {
	display: grid;
	grid-template-columns: minmax(480px, 580px) 1fr;
	align-items: center;
	gap: 20px;
}

/* --------------------------------------------------------------------------
   Text Entrance & Exit Grow/Shrink Animations
   -------------------------------------------------------------------------- */
.u360-hp-hero-content {
	position: relative;
	max-width: 540px;
	opacity: 0;
	transform: translateY(28px) scale(0.9);
	transform-origin: left center;
	transition: opacity 750ms cubic-bezier(0.16, 1, 0.3, 1), transform 750ms cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

.u360-hero-slide.is-active .u360-hp-hero-content,
.u360-hero-carousel:not(.js-carousel-ready) .u360-hero-slide:first-child .u360-hp-hero-content,
.u360-hero-carousel.has-single-slide .u360-hero-slide .u360-hp-hero-content {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.u360-hero-slide.is-leaving .u360-hp-hero-content {
	opacity: 0;
	transform: translateY(-15px) scale(0.9);
	transition: opacity 600ms ease, transform 600ms ease;
}

.u360-hero-text-glow {
	display: none;
}

/* Mobile In-flow Hero Visual: Hidden across all viewports to prevent double hero image */
.u360-hp-hero-mobile-visual {
	display: none !important;
}

.u360-hp-hero-mobile-visual img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: center 25%;
	display: block;
}

/* Compact Semi-Transparent White Glass Panel for Supporting Content */
.u360-hero-support-card {
	background: rgba(255, 255, 255, 0.55); /* 50-60% opacity */
	-webkit-backdrop-filter: blur(10px); /* 8-12px backdrop blur */
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.65); /* subtle border */
	border-radius: 18px; /* rounded corners */
	padding: 22px 26px 24px;
	max-width: 510px;
	margin-top: 20px;
	box-shadow: 0 8px 30px rgba(16, 24, 91, 0.08), 0 1px 2px rgba(255, 255, 255, 0.6) inset;
}

@media (max-width: 768px) {
	.u360-hp-hero-mobile-visual {
		display: none !important;
	}

	/* Preserve sufficient background height so subject, heading and card remain uncramped */
	.u360-hp-hero.u360-hero-carousel {
		min-height: 800px;
	}

	.u360-hero-slide {
		min-height: 800px;
	}

	.u360-hp-hero-shell {
		padding: 36px 20px 65px;
		width: 100%;
	}

	.u360-hp-hero-content {
		max-width: 100%;
	}

	/* Position content card directly over/near lower portion of background hero image */
	.u360-hero-support-card {
		padding: 22px 24px;
		border-radius: 20px;
		max-width: 100%;
		margin-top: clamp(140px, 22vh, 220px);
		background: #ffffff;
		border: 1px solid rgba(111, 36, 199, 0.12);
		box-shadow: 0 8px 30px rgba(17, 24, 63, 0.12);
	}

	/* Reposition carousel arrows to open photo area without depending on removed image */
	.u360-carousel-arrow {
		top: 38%;
		transform: translateY(-50%);
		width: 44px;
		height: 44px;
		background: rgba(255, 255, 255, 0.94);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		border: 1.5px solid rgba(16, 24, 91, 0.12);
		color: #10185b;
		box-shadow: 0 6px 20px rgba(16, 24, 91, 0.14);
		z-index: 30;
	}

	.u360-arrow-prev {
		left: 12px;
	}

	.u360-arrow-next {
		right: 12px;
	}
}

/* Staggered Child Typography */
.animate-child {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.u360-hero-slide.is-active .animate-child,
.u360-hero-carousel:not(.js-carousel-ready) .u360-hero-slide:first-child .animate-child,
.u360-hero-carousel.has-single-slide .u360-hero-slide .animate-child {
	opacity: 1;
	transform: translateY(0);
}

.u360-hero-slide.is-active .anim-eyebrow {
	transition-delay: 0ms;
}

.u360-hero-slide.is-active .anim-heading {
	transition-delay: 100ms;
}

.u360-hero-slide.is-active .anim-desc {
	transition-delay: 280ms;
}

.u360-hero-slide.is-active .anim-actions {
	transition-delay: 380ms;
}

.u360-hero-slide.is-active .anim-annotation {
	transition-delay: 480ms;
}

.u360-hp-eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: #6d28d9;
	margin-bottom: 12px;
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.85);
}

.u360-hp-hero-title {
	font-size: clamp(2.5rem, 4.4vw, 4.2rem);
	font-weight: 800;
	line-height: 1.12;
	color: #4c1d95; /* Deep brand purple */
	margin: 0 0 16px;
	letter-spacing: -0.5px;
	text-shadow: 0 0 14px rgba(255, 255, 255, 0.85), 0 0 28px rgba(255, 255, 255, 0.5);
}

/* Headline Highlight Phrase (Vibrant Green "for every") */
.u360-headline-highlight.u360-highlight-green {
	color: #15803d !important;
	background: transparent !important;
	padding: 0 !important;
	font-weight: 800;
	display: inline;
	text-shadow: 0 0 12px rgba(255, 255, 255, 0.85), 0 0 24px rgba(255, 255, 255, 0.5);
	opacity: 0;
	transform: scale(0.95);
	transition: opacity 550ms ease 220ms, transform 550ms cubic-bezier(0.16, 1, 0.3, 1) 220ms;
}

.u360-hero-slide.is-active .u360-headline-highlight.u360-highlight-green,
.u360-hero-carousel:not(.js-carousel-ready) .u360-hero-slide:first-child .u360-headline-highlight.u360-highlight-green,
.u360-hero-carousel.has-single-slide .u360-hero-slide .u360-headline-highlight.u360-highlight-green {
	opacity: 1;
	transform: scale(1);
}

.u360-hp-hero-desc {
	font-size: 16px;
	line-height: 1.6;
	color: #0c1445; /* Dark navy text */
	font-weight: 550; /* Increased font weight slightly for crisp legibility */
	margin: 0 0 18px;
	max-width: 100%;
	text-shadow: none;
}

.u360-hp-hero-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}

.u360-hp-hero-actions .u360-btn {
	padding: 11px 24px;
	font-size: 14px;
	font-weight: 700;
	border-radius: 999px;
}

/* Subtle Outlined / Translucent Pill Button for Secondary CTA */
.u360-btn.u360-btn-glass-pill,
.u360-hp-hero-actions .u360-btn-outline-purple {
	background: rgba(255, 255, 255, 0.65);
	border: 1.5px solid rgba(102, 38, 217, 0.35);
	color: #4a1d96;
	font-weight: 700;
	font-size: 14px;
	border-radius: 999px;
	padding: 11px 22px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 2px 6px rgba(16, 24, 91, 0.04);
}

.u360-btn.u360-btn-glass-pill:hover,
.u360-hp-hero-actions .u360-btn-outline-purple:hover {
	background: #ffffff;
	border-color: var(--u360-purple);
	color: var(--u360-purple);
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(102, 38, 217, 0.2);
}

/* --------------------------------------------------------------------------
   Floating Handwritten Annotation (Positioned over photographic canvas)
   -------------------------------------------------------------------------- */
.u360-hp-hero-annotation-float {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-self: flex-start;
	margin-top: -30px;
	margin-left: 20px;
	z-index: 6;
}

.u360-hp-script-float {
	position: relative;
	display: inline-block;
}

.u360-hp-script-float .u360-annotation-text {
	font-family: var(--u360-font-script);
	font-size: 2.3rem;
	font-weight: 700;
	color: #1e293b;
	line-height: 1.12;
	display: block;
	transform: rotate(-3deg) scale(0.85);
	opacity: 0;
	transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1) 480ms, opacity 500ms ease 480ms;
}

.u360-hero-slide.is-active .u360-annotation-text {
	transform: rotate(-2.5deg) scale(1);
	opacity: 1;
}

.u360-hp-script-float svg {
	position: absolute;
	bottom: -8px;
	left: 0;
	pointer-events: none;
}

.u360-svg-draw-path {
	stroke-dasharray: 240;
	stroke-dashoffset: 240;
	transition: stroke-dashoffset 650ms cubic-bezier(0.22, 1, 0.36, 1) 680ms;
}

.u360-hero-slide.is-active .u360-svg-draw-path {
	stroke-dashoffset: 0;
}

/* Decorative Floating Pills */
.u360-hp-hero-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.u360-hero-pill-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(102, 38, 217, 0.15);
	color: var(--u360-purple-dark, #10185b);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* --------------------------------------------------------------------------
   Caret Navigation Buttons on Either Side
   -------------------------------------------------------------------------- */
.u360-carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 25;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1.5px solid rgba(16, 24, 91, 0.12);
	color: #10185B;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(16, 24, 91, 0.1);
	transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
	padding: 0;
}

.u360-arrow-prev {
	left: 24px;
}

.u360-arrow-next {
	right: 24px;
}

.u360-carousel-arrow:hover {
	background: var(--u360-purple);
	border-color: var(--u360-purple);
	color: #ffffff;
	transform: translateY(-50%) scale(1.08);
	box-shadow: 0 8px 25px rgba(102, 38, 217, 0.35);
}

.u360-carousel-arrow:focus-visible {
	outline: 3px solid var(--u360-lime);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Bottom Controls Bar: Slim Progress Indicators & Pause Button
   -------------------------------------------------------------------------- */
.u360-carousel-bottom-bar {
	position: absolute;
	bottom: 18px;
	left: 0;
	width: 100%;
	z-index: 20;
	pointer-events: none;
}

.u360-carousel-bottom-inner {
	display: flex;
	align-items: center;
	gap: 14px;
	pointer-events: auto;
}

/* Slim Progress-Bar Indicators */
.u360-carousel-indicators {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 200px;
}

.u360-indicator-btn {
	background: none;
	border: none;
	padding: 6px 0;
	cursor: pointer;
	flex: 1;
	display: flex;
	align-items: center;
	outline: none;
}

.u360-indicator-track {
	width: 100%;
	height: 4px;
	border-radius: 999px;
	background: rgba(16, 24, 91, 0.15);
	overflow: hidden;
	position: relative;
	transition: background 0.3s ease;
}

.u360-indicator-btn:hover .u360-indicator-track,
.u360-indicator-btn:focus-visible .u360-indicator-track {
	background: rgba(102, 38, 217, 0.35);
}

.u360-indicator-fill {
	display: block;
	height: 100%;
	width: 0%;
	border-radius: inherit;
	background: linear-gradient(90deg, #6626D9, #15803d);
	transition: width 0.1s linear;
}

.u360-carousel-pause {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid rgba(16, 24, 91, 0.12);
	background: rgba(255, 255, 255, 0.85);
	color: #10185B;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	padding: 0;
}

.u360-carousel-pause:hover {
	background: var(--u360-purple);
	color: #ffffff;
}

/* --------------------------------------------------------------------------
   Responsive & Accessibility Reflows
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.u360-hp-hero-layout {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.u360-hero-backdrop-gradient {
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.88) 55%, rgba(255, 255, 255, 0.45) 100%);
	}

	.u360-hp-hero-annotation-float {
		margin-top: 0;
		margin-left: 0;
	}

	.u360-arrow-prev {
		left: 12px;
	}

	.u360-arrow-next {
		right: 12px;
	}
}

@media (max-width: 640px) {
	.u360-hp-hero.u360-hero-carousel {
		min-height: 820px;
	}

	.u360-hero-slide {
		min-height: 820px;
	}

	.u360-hp-hero-shell {
		padding: 36px 16px 65px;
	}

	.u360-hp-hero-title {
		font-size: 2.2rem;
		line-height: 1.15;
	}

	.u360-annotation-text {
		font-size: 1.65rem;
	}

	.u360-carousel-arrow {
		width: 40px;
		height: 40px;
		top: 38%;
	}

	.u360-arrow-prev {
		left: 10px;
	}

	.u360-arrow-next {
		right: 10px;
	}

	.u360-hero-support-card {
		padding: 18px 20px 20px;
		margin-top: clamp(130px, 20vh, 190px);
	}
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
	.u360-hero-slide,
	.u360-hp-hero-content,
	.u360-hp-hero-bg-img,
	.animate-child,
	.u360-headline-highlight,
	.u360-annotation-text,
	.u360-svg-draw-path {
		animation: none !important;
		transition: opacity 300ms ease !important;
		transform: none !important;
	}

	.u360-svg-draw-path {
		stroke-dashoffset: 0 !important;
	}

	.u360-indicator-fill {
		transition: none !important;
	}
}

/* ==========================================================================
   SECTION 3 — Impact Snapshot Strip
   ========================================================================== */
.u360-hp-impact-section {
	padding-top: var(--section-space-desktop);
	padding-bottom: var(--space-6);
	background: #ffffff;
}

@media (max-width: 1024px) {
	.u360-hp-impact-section {
		padding-top: var(--section-space-tablet);
		padding-bottom: var(--space-5);
	}
}

@media (max-width: 640px) {
	.u360-hp-impact-section {
		padding-top: var(--section-space-mobile);
		padding-bottom: var(--space-4);
	}
}

.u360-hp-impact-strip {
	background: #f7f4ff;
	border: 1px solid rgba(95, 35, 170, 0.08);
	border-radius: 24px;
	padding: 30px 36px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	align-items: center;
	box-shadow: 0 4px 20px rgba(102, 38, 217, 0.04);
}

.u360-hp-impact-col {
	display: flex;
	align-items: center;
	gap: 16px;
}

.u360-hp-impact-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #ffffff;
	color: var(--u360-purple);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(102, 38, 217, 0.1);
}

.u360-hp-impact-icon svg {
	width: 24px;
	height: 24px;
}

.u360-hp-impact-meta {
	display: flex;
	flex-direction: column;
}

.u360-hp-impact-val {
	font-size: clamp(1.8rem, 2.4vw, 2.2rem);
	font-weight: 800;
	color: var(--u360-navy);
	line-height: 1.1;
	display: block;
}

.u360-hp-impact-lbl {
	font-size: 14px;
	font-weight: 500;
	color: var(--u360-text-muted);
	margin: 3px 0 0;
	line-height: 1.3;
}

/* ==========================================================================
   SECTION 4 — What We Do / Programmes
   ========================================================================== */
.u360-hp-programs-section {
	background: #ffffff;
}

.u360-hp-programs-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.u360-hp-prog-card {
	background: #ffffff;
	border-radius: var(--u360-radius-card);
	overflow: hidden;
	border: 1px solid var(--u360-border-color);
	display: flex;
	flex-direction: column;
	min-height: 360px;
	max-height: 420px;
	transition: var(--u360-transition);
}

.u360-hp-prog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(16, 24, 91, 0.08);
}

.u360-hp-prog-media {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	height: 190px;
	overflow: hidden;
}

.u360-hp-prog-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.u360-hp-prog-card:hover .u360-hp-prog-media img {
	transform: scale(1.04);
}

.u360-hp-prog-icon-badge {
	position: absolute;
	bottom: 12px;
	right: 14px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #ffffff;
	color: var(--u360-purple);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.u360-hp-prog-body {
	padding: 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.u360-hp-prog-title {
	font-size: 1.12rem;
	font-weight: 700;
	color: var(--u360-navy);
	margin: 0 0 8px;
	line-height: 1.3;
}

.u360-hp-prog-title a {
	text-decoration: none;
	color: inherit;
}

.u360-hp-prog-desc {
	font-size: 13.5px;
	color: var(--u360-text-muted);
	line-height: 1.5;
	margin: 0 0 16px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.u360-hp-prog-body .card__footer {
	margin-top: auto;
	padding-top: 8px;
}

/* ==========================================================================
   SECTION 5 — Opportunities Container
   ========================================================================== */
.u360-hp-opps-section {
	background: #faf7fc;
}

.u360-hp-opps-container {
	background: #f6f0fc;
	border-radius: 28px;
	padding: 64px 48px;
	border: 1px solid rgba(102, 38, 217, 0.08);
}

.u360-hp-opps-container .u360-section-heading {
	margin-bottom: 36px;
}

.u360-hp-opps-grid {
	display: grid;
	gap: 24px;
}

.u360-hp-opps-grid--triple {
	grid-template-columns: repeat(3, 1fr);
}

.u360-hp-opps-grid--double {
	grid-template-columns: repeat(2, 1fr);
}

.u360-hp-opps-grid--single {
	grid-template-columns: 1fr;
	max-width: 680px;
	margin: 0 auto;
}

.u360-hp-opp-card {
	background: #ffffff;
	border-radius: var(--u360-radius-card);
	padding: 28px 24px;
	border: 1px solid rgba(102, 38, 217, 0.1);
	box-shadow: 0 4px 16px rgba(16, 24, 91, 0.04);
	display: flex;
	flex-direction: column;
	transition: var(--u360-transition);
}

.u360-hp-opp-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(102, 38, 217, 0.12);
}

.u360-hp-opp-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
}

.u360-hp-opp-deadline {
	font-size: 12px;
	font-weight: 600;
	color: var(--u360-text-muted);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.u360-hp-opp-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--u360-navy);
	margin: 0 0 10px;
	line-height: 1.3;
}

.u360-hp-opp-title a {
	text-decoration: none;
	color: inherit;
}

.u360-hp-opp-desc {
	font-size: 14px;
	line-height: 1.55;
	color: var(--u360-text-muted);
	margin: 0 0 16px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.u360-hp-opp-meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 20px;
	padding-top: 14px;
	border-top: 1px solid var(--u360-border-color);
	font-size: 13px;
	color: var(--u360-text-muted);
}

.u360-hp-opp-meta-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.u360-hp-opp-card .card__footer {
	margin-top: auto;
	padding-top: 12px;
}

/* ==========================================================================
   SECTION 6 — Featured Youth Story
   ========================================================================== */
.u360-hp-story-section {
	background: #ffffff;
}

.u360-hp-story-card {
	background: #ffffff;
	border-radius: 28px;
	border: 1px solid var(--u360-border-color);
	display: grid;
	grid-template-columns: 55% 45%;
	min-height: 480px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(16, 24, 91, 0.04);
	position: relative;
}

.u360-hp-story-media {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 440px;
}

.u360-hp-story-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

.u360-hp-story-script-overlay {
	position: absolute;
	top: 24px;
	left: 24px;
	z-index: 2;
}

.u360-hp-story-script-overlay span {
	font-family: var(--u360-font-script);
	font-size: 2.1rem;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.15;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
	display: block;
}

.u360-hp-story-content {
	padding: 48px 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.u360-hp-story-eyebrow {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--u360-purple);
	margin-bottom: 12px;
	display: block;
}

.u360-hp-story-title {
	font-size: clamp(2rem, 3.2vw, 2.6rem);
	font-weight: 800;
	color: var(--u360-navy);
	line-height: 1.15;
	margin: 0 0 18px;
}

.u360-hp-story-quote {
	font-size: 1.12rem;
	font-style: italic;
	line-height: 1.65;
	color: var(--u360-text-dark);
	margin: 0 0 24px;
	padding: 0 0 0 18px;
	border-left: 3px solid var(--u360-purple);
}

.u360-hp-story-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
}

.u360-hp-story-pin {
	color: var(--u360-purple);
	display: inline-flex;
}

.u360-hp-story-person strong {
	font-size: 16px;
	color: var(--u360-navy);
	display: block;
}

.u360-hp-story-location {
	font-size: 13px;
	color: var(--u360-text-muted);
}

.u360-hp-story-script-right {
	position: absolute;
	right: -24px;
	top: 15%;
	z-index: 5;
}

.u360-hp-story-script-right span {
	font-family: var(--u360-font-script);
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--u360-purple);
	line-height: 1.2;
	display: block;
	transform: rotate(5deg);
}

.u360-hp-story-content .card__footer {
	margin-top: auto;
}

/* ==========================================================================
   SECTION 7 — Impact Banner
   ========================================================================== */
.u360-hp-impact-banner {
	position: relative;
	background: linear-gradient(135deg, #10185B 0%, #3e127a 45%, #6626D9 100%);
	color: #ffffff;
	overflow: hidden;
}

.u360-hp-banner-overlay {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 80% 50%, rgba(100, 227, 41, 0.12) 0%, transparent 60%);
	pointer-events: none;
}

.u360-hp-banner-inner {
	position: relative;
	z-index: 2;
}

.u360-hp-banner-header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 50px;
}

.u360-hp-banner-title {
	font-size: clamp(2rem, 3.4vw, 2.8rem);
	font-weight: 800;
	color: #ffffff;
	margin: 0 0 12px;
}

.u360-hp-banner-subtitle {
	font-size: 17px;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}

.u360-hp-banner-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}

.u360-hp-banner-stat {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--u360-radius-card);
	padding: 28px 20px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	backdrop-filter: blur(4px);
	transition: var(--u360-transition);
}

.u360-hp-banner-stat:hover {
	background: rgba(255, 255, 255, 0.14);
	transform: translateY(-4px);
}

.u360-hp-banner-icon-wrap {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(100, 227, 41, 0.18);
	color: var(--u360-lime);
	display: flex;
	align-items: center;
	justify-content: center;
}

.u360-hp-banner-num {
	font-size: 1.9rem;
	font-weight: 800;
	color: #ffffff;
	display: block;
	line-height: 1.1;
}

.u360-hp-banner-lbl {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
	margin-top: 4px;
	display: block;
}

.u360-hp-banner-script {
	position: absolute;
	right: 10px;
	top: 10px;
}

.u360-hp-banner-script span {
	font-family: var(--u360-font-script);
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--u360-lime);
	line-height: 1.2;
	display: block;
	transform: rotate(4deg);
}

/* Impact Banner Card & High-Contrast Typography */
.u360-hp-banner-section {
	padding: 40px 0;
}

.u360-hp-banner-card {
	position: relative;
	border-radius: var(--u360-radius-card, 24px);
	padding: clamp(32px, 5vw, 56px);
	background-size: cover;
	background-position: center;
	color: #ffffff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	overflow: hidden;
	box-shadow: 0 16px 40px rgba(17, 24, 63, 0.16);
}

.u360-hp-banner-card .u360-hp-banner-content {
	flex: 1;
	max-width: 680px;
	z-index: 2;
}

.u360-hp-banner-card .u360-hp-banner-title {
	color: #ffffff !important;
	font-size: clamp(1.85rem, 3.5vw, 2.75rem);
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 16px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.u360-hp-banner-card .u360-hp-banner-desc {
	color: rgba(255, 255, 255, 0.95) !important;
	font-size: clamp(1rem, 2vw, 1.15rem);
	line-height: 1.6;
	margin: 0 0 28px;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

.u360-hp-banner-card .u360-hp-banner-actions {
	display: flex;
	gap: 16px;
	align-items: center;
}

.u360-hp-banner-card .u360-btn-white {
	background: #ffffff !important;
	color: #6f24c7 !important;
	border-color: #ffffff !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	font-weight: 700;
}

.u360-hp-banner-card .u360-btn-white:hover {
	background: #f4effb !important;
	color: #54179e !important;
	transform: translateY(-2px);
}

.u360-hp-banner-card .u360-hp-banner-annotation {
	flex-shrink: 0;
	z-index: 2;
	padding: 10px;
}

.u360-hp-banner-card .u360-script-text--gold,
.u360-script-text--gold {
	color: #ffd166 !important;
	font-family: var(--u360-font-script, cursive);
	font-size: clamp(1.5rem, 3vw, 2.3rem);
	line-height: 1.2;
	display: inline-block;
	transform: rotate(-3deg);
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

@media (max-width: 820px) {
	.u360-hp-banner-card {
		flex-direction: column;
		align-items: flex-start;
		padding: 36px 24px;
		gap: 20px;
	}

	.u360-hp-banner-card .u360-hp-banner-annotation {
		align-self: flex-start;
		margin-top: 10px;
	}
}

/* ==========================================================================
   SECTION 8 — Latest News & Upcoming Event
   ========================================================================== */
.u360-hp-news-section {
	background: #ffffff;
}

.u360-hp-news-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.u360-hp-news-card {
	background: #ffffff;
	border-radius: var(--u360-radius-card);
	border: 1px solid var(--u360-border-color);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: var(--u360-transition);
}

.u360-hp-news-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(16, 24, 91, 0.08);
}

.u360-hp-news-media {
	height: 160px;
	overflow: hidden;
}

.u360-hp-news-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.u360-hp-news-card:hover .u360-hp-news-media img {
	transform: scale(1.04);
}

.u360-hp-news-body {
	padding: 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.u360-hp-news-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.u360-hp-news-date {
	font-size: 12px;
	color: var(--u360-text-muted);
}

.u360-hp-news-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--u360-navy);
	margin: 0 0 8px;
	line-height: 1.35;
}

.u360-hp-news-title a {
	text-decoration: none;
	color: inherit;
}

.u360-hp-news-excerpt {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--u360-text-muted);
	margin: 0 0 16px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.u360-hp-news-body .card__footer {
	margin-top: auto;
	padding-top: 8px;
}

/* Distinct 4th Event Card */
.u360-hp-event-card {
	background: #ffffff;
	border-radius: var(--u360-radius-card);
	border: 2px solid var(--u360-purple);
	padding: 22px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: 0 8px 24px rgba(102, 38, 217, 0.08);
	transition: var(--u360-transition);
}

.u360-hp-event-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(102, 38, 217, 0.16);
}

.u360-hp-event-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 18px;
}

.u360-hp-event-tag {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--u360-purple);
}

.u360-hp-event-all {
	font-size: 12px;
	font-weight: 600;
	color: var(--u360-purple);
	text-decoration: none;
}

.u360-hp-event-main {
	display: flex;
	gap: 16px;
	margin-bottom: 24px;
}

.u360-hp-event-date-box {
	background: var(--u360-purple-light);
	border: 1px solid rgba(102, 38, 217, 0.2);
	border-radius: 12px;
	width: 58px;
	height: 64px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.u360-hp-event-month {
	font-size: 12px;
	font-weight: 800;
	color: var(--u360-purple);
	text-transform: uppercase;
}

.u360-hp-event-day {
	font-size: 20px;
	font-weight: 800;
	color: var(--u360-navy);
	line-height: 1;
}

.u360-hp-event-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--u360-navy);
	margin: 0 0 10px;
	line-height: 1.3;
}

.u360-hp-event-loc,
.u360-hp-event-time {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--u360-text-muted);
	margin-bottom: 4px;
}

.u360-hp-event-icon {
	color: var(--u360-purple);
	display: inline-flex;
}

/* ==========================================================================
   SECTION 9 — Get Involved
   ========================================================================== */
.u360-hp-gi-section {
	background: #f8f8fb;
}

.u360-hp-gi-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.u360-hp-gi-card {
	background: #ffffff;
	border-radius: var(--u360-radius-card);
	border: 1px solid var(--u360-border-color);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: var(--u360-transition);
}

.u360-hp-gi-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(16, 24, 91, 0.08);
}

.u360-hp-gi-thumb {
	height: 170px;
	overflow: hidden;
}

.u360-hp-gi-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.u360-hp-gi-card:hover .u360-hp-gi-thumb img {
	transform: scale(1.04);
}

.u360-hp-gi-content {
	padding: 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.u360-hp-gi-icon-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.u360-hp-gi-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--u360-navy);
	margin: 0 0 10px;
}

.u360-hp-gi-desc {
	font-size: 14px;
	line-height: 1.55;
	color: var(--u360-text-muted);
	margin: 0 0 20px;
	flex: 1;
}

.u360-hp-gi-content .card__footer {
	margin-top: auto;
}

/* Feature Donate Card (Equal height with purple styling) */
.u360-hp-gi-card--donate {
	background: linear-gradient(135deg, #6626D9 0%, #4c11b0 100%);
	border-color: transparent;
	color: #ffffff;
}

.u360-hp-gi-card--donate .u360-hp-gi-title {
	color: #ffffff;
}

.u360-hp-gi-card--donate .u360-hp-gi-desc {
	color: rgba(255, 255, 255, 0.9);
}

.u360-hp-gi-card--donate:hover {
	box-shadow: 0 16px 36px rgba(102, 38, 217, 0.25);
}

/* ==========================================================================
   SECTION 10 — Our Partners
   ========================================================================== */
.u360-hp-partners-section {
	background: #ffffff;
}

.u360-hp-partners-section .u360-section-heading {
	margin-bottom: 44px;
}

.u360-hp-partners-header {
	position: relative;
}

.u360-hp-partners-script {
	display: inline-block;
}

.u360-hp-partners-script span {
	font-family: var(--u360-font-script);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--u360-purple);
	display: block;
	transform: rotate(-2deg);
}

.u360-hp-partners-strip {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 16px;
	align-items: center;
	padding: 10px 0;
}

.u360-hp-partner-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px 12px;
	border-radius: 12px;
	background: var(--u360-grey-soft);
	border: 1px solid var(--u360-border-color);
	min-height: 80px;
	transition: var(--u360-transition);
}

.u360-hp-partner-item:hover {
	background: #ffffff;
	border-color: var(--u360-purple);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(16, 24, 91, 0.06);
}

.u360-hp-partner-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: var(--u360-navy);
	filter: grayscale(100%);
	opacity: 0.7;
	transition: var(--u360-transition);
}

.u360-hp-partner-item:hover .u360-hp-partner-link {
	filter: grayscale(0%);
	opacity: 1;
	color: var(--u360-purple);
}

.u360-hp-partner-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.u360-hp-partner-name {
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.u360-hp-partner-logo {
	max-height: 40px;
	width: auto;
	object-fit: contain;
}

/* ==========================================================================
   SECTION 11 — Closing CTA (Together, we rise)
   ========================================================================== */
.u360-hp-closing-cta {
	position: relative;
	background-size: cover;
	background-position: center;
	color: #ffffff;
	margin: 0;
	overflow: hidden;
}

.u360-hp-closing-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(16, 24, 91, 0.88) 0%, rgba(16, 24, 91, 0.65) 60%, rgba(16, 24, 91, 0.4) 100%);
}

.u360-hp-closing-inner {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
}

.u360-hp-closing-content {
	max-width: 600px;
}

.u360-hp-closing-title {
	font-size: clamp(2.2rem, 4vw, 3.4rem);
	font-weight: 800;
	color: #ffffff;
	margin: 0 0 16px;
	line-height: 1.15;
}

.u360-hp-closing-desc {
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
	margin: 0 0 32px;
}

.u360-hp-closing-script {
	position: relative;
}

.u360-hp-closing-script span {
	font-family: var(--u360-font-script);
	font-size: 2.1rem;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.2;
	display: block;
	transform: rotate(-3deg);
}

/* ==========================================================================
   SECTION 12 — Global Footer
   ========================================================================== */
.u360-site-footer,
.site-footer {
	width: 100%;
	background: #ffffff;
	border-top: 1px solid var(--u360-border-color);
	padding: 88px 0 28px;
	margin-top: 0;
	box-sizing: border-box;
}

.site-footer__inner {
	width: min(calc(100% - 40px), var(--u360-container, 1200px));
	max-width: var(--u360-container, 1200px);
	margin-inline: auto;
	box-sizing: border-box;
}

@media (max-width: 640px) {
	.site-footer__inner {
		width: min(calc(100% - 32px), var(--u360-container, 1200px));
	}
}

.u360-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 40px;
	margin-bottom: 50px;
}

.u360-footer-desc {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--u360-text-muted);
	margin: 18px 0 22px;
	max-width: 320px;
}

.u360-footer-social {
	display: flex;
	gap: 12px;
}

.u360-social-link {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--u360-grey-soft);
	color: var(--u360-navy);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: var(--u360-transition);
}

.u360-social-link:hover {
	background: var(--u360-purple);
	color: #ffffff;
	transform: translateY(-2px);
}

.u360-footer-heading {
	font-size: 16px;
	font-weight: 700;
	color: var(--u360-navy);
	margin: 0 0 20px;
}

.u360-footer-links,
.u360-footer-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.u360-footer-links a {
	text-decoration: none;
	font-size: 14.5px;
	color: var(--u360-text-muted);
	transition: var(--u360-transition);
}

.u360-footer-links a:hover {
	color: var(--u360-purple);
	transform: translateX(3px);
}

.u360-footer-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: var(--u360-text-muted);
}

.u360-footer-contact-list svg {
	color: var(--u360-purple);
	flex-shrink: 0;
	margin-top: 2px;
}

.u360-footer-contact-list a {
	color: inherit;
	text-decoration: none;
}

.u360-footer-contact-list a:hover {
	color: var(--u360-purple);
}

.u360-footer-bottom-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 24px;
	border-top: 1px solid var(--u360-border-color);
	font-size: 13.5px;
	color: var(--u360-text-muted);
	flex-wrap: wrap;
	gap: 16px;
}

.u360-footer-legal-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 20px;
}

.u360-footer-legal-links a {
	color: inherit;
	text-decoration: none;
	transition: var(--u360-transition);
}

.u360-footer-legal-links a:hover {
	color: var(--u360-purple);
}

/* ==========================================================================
   Search Modal
   ========================================================================== */
.u360-search-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.u360-search-modal[hidden] {
	display: none !important;
}

.u360-search-overlay {
	position: absolute;
	inset: 0;
	background: rgba(16, 24, 91, 0.75);
	backdrop-filter: blur(4px);
}

.u360-search-dialog {
	position: relative;
	background: #ffffff;
	border-radius: var(--u360-radius-card);
	width: 90%;
	max-width: 620px;
	padding: 40px 32px 36px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	z-index: 2;
}

.u360-search-close {
	position: absolute;
	top: 16px;
	right: 18px;
	background: none;
	border: none;
	font-size: 28px;
	cursor: pointer;
	color: var(--u360-text-muted);
	padding: 4px 8px;
	border-radius: 50%;
	line-height: 1;
}

.u360-search-close:hover {
	color: var(--u360-navy);
}

.u360-search-header h3 {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--u360-navy);
	margin: 0 0 6px;
}

.u360-search-header p {
	font-size: 14px;
	color: var(--u360-text-muted);
	margin: 0 0 24px;
}

.u360-search-field-wrap {
	display: flex;
	align-items: center;
	background: var(--u360-grey-soft);
	border: 2px solid var(--u360-purple-light);
	border-radius: var(--u360-radius-btn);
	padding: 6px 8px 6px 18px;
	transition: var(--u360-transition);
}

.u360-search-field-wrap:focus-within {
	border-color: var(--u360-purple);
	background: #ffffff;
	box-shadow: 0 0 0 4px rgba(102, 38, 217, 0.15);
}

.u360-search-icon-inside {
	color: var(--u360-purple);
	display: flex;
	margin-right: 10px;
}

.u360-search-input {
	flex: 1;
	border: none;
	background: transparent;
	font-family: var(--u360-font-primary);
	font-size: 15px;
	color: var(--u360-navy);
	outline: none;
}

.u360-search-submit {
	padding: 10px 24px;
	font-size: 14px;
}

/* ==========================================================================
   Mobile Navigation Drawer
   ========================================================================== */
.u360-mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	justify-content: flex-end;
}

.u360-mobile-drawer[hidden] {
	display: none !important;
}

.u360-mobile-drawer-overlay {
	position: absolute;
	inset: 0;
	background: rgba(16, 24, 91, 0.6);
}

.u360-mobile-drawer-inner {
	position: relative;
	width: 85%;
	max-width: 360px;
	height: 100%;
	background: #ffffff;
	z-index: 2;
	display: flex;
	flex-direction: column;
	padding: 24px 20px;
	overflow-y: auto;
}

.u360-mobile-drawer-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--u360-border-color);
}

.u360-mobile-close {
	background: none;
	border: none;
	font-size: 32px;
	cursor: pointer;
	color: var(--u360-navy);
	line-height: 1;
}

.u360-mobile-nav ul {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.u360-mobile-nav a,
.u360-mobile-nav li > span,
.u360-mobile-nav li > button {
	font-size: 17px;
	font-weight: 700;
	color: var(--u360-navy);
	text-decoration: none;
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
	display: inline-block;
	text-align: left;
	transition: color 0.2s ease;
}

/* Non-clickable top-level mobile container items */
.u360-mobile-nav li.menu-item-has-children > a[href="#"],
.u360-mobile-nav li.menu-item-has-children > a[href="#0"],
.u360-mobile-nav li.menu-item-has-children > a[href="javascript:void(0)"],
.u360-mobile-nav li.menu-item-has-children > a:not([href]),
.u360-mobile-nav li.menu-item-has-children > span,
.u360-mobile-nav li.menu-item-has-children > button {
	cursor: pointer;
}

/* Active & Hover state for top-level mobile items and parent containers */
.u360-mobile-nav a:hover,
.u360-mobile-nav li > span:hover,
.u360-mobile-nav li > button:hover,
.u360-mobile-nav > ul > li.current-menu-item > a,
.u360-mobile-nav > ul > li.current_page_item > a,
.u360-mobile-nav > ul > li.current-menu-parent > a,
.u360-mobile-nav > ul > li.current_page_parent > a,
.u360-mobile-nav > ul > li.current-menu-ancestor > a,
.u360-mobile-nav > ul > li.current_page_ancestor > a,
.u360-mobile-nav > ul > li.current-menu-item > span,
.u360-mobile-nav > ul > li.current_page_item > span,
.u360-mobile-nav > ul > li.current-menu-parent > span,
.u360-mobile-nav > ul > li.current_page_parent > span,
.u360-mobile-nav > ul > li.current-menu-ancestor > span,
.u360-mobile-nav > ul > li.current_page_ancestor > span,
.u360-mobile-nav > ul > li.current-menu-item > button,
.u360-mobile-nav > ul > li.current_page_item > button,
.u360-mobile-nav > ul > li.current-menu-parent > button,
.u360-mobile-nav > ul > li.current_page_parent > button,
.u360-mobile-nav > ul > li.current-menu-ancestor > button,
.u360-mobile-nav > ul > li.current_page_ancestor > button,
.u360-mobile-nav > .menu > li.current-menu-item > a,
.u360-mobile-nav > .menu > li.current_page_item > a,
.u360-mobile-nav > .menu > li.current-menu-parent > a,
.u360-mobile-nav > .menu > li.current_page_parent > a,
.u360-mobile-nav > .menu > li.current-menu-ancestor > a,
.u360-mobile-nav > .menu > li.current_page_ancestor > a,
.u360-mobile-nav > .menu > li.current-menu-item > span,
.u360-mobile-nav > .menu > li.current_page_item > span,
.u360-mobile-nav > .menu > li.current-menu-parent > span,
.u360-mobile-nav > .menu > li.current_page_parent > span,
.u360-mobile-nav > .menu > li.current-menu-ancestor > span,
.u360-mobile-nav > .menu > li.current_page_ancestor > span,
.u360-mobile-nav > .menu > li.current-menu-item > button,
.u360-mobile-nav > .menu > li.current_page_item > button,
.u360-mobile-nav > .menu > li.current-menu-parent > button,
.u360-mobile-nav > .menu > li.current_page_parent > button,
.u360-mobile-nav > .menu > li.current-menu-ancestor > button,
.u360-mobile-nav > .menu > li.current_page_ancestor > button {
	color: var(--u360-purple);
}

.u360-mobile-nav .sub-menu {
	list-style: none;
	margin: 8px 0 6px 14px;
	padding: 0 0 0 12px;
	border-left: 2px solid var(--u360-border-color);
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: border-color 0.2s ease;
}

/* Active border indicator for active parent section in mobile nav */
.u360-mobile-nav li.current-menu-parent > .sub-menu,
.u360-mobile-nav li.current_page_parent > .sub-menu,
.u360-mobile-nav li.current-menu-ancestor > .sub-menu,
.u360-mobile-nav li.current_page_ancestor > .sub-menu {
	border-left-color: var(--u360-purple);
}

.u360-mobile-nav .sub-menu a,
.u360-mobile-nav .sub-menu span,
.u360-mobile-nav .sub-menu button {
	font-size: 14px;
	font-weight: 500;
	color: #555566;
	text-decoration: none;
	transition: color 0.15s ease, font-weight 0.15s ease;
}

.u360-mobile-nav .sub-menu a:hover,
.u360-mobile-nav .sub-menu li.current-menu-item > a,
.u360-mobile-nav .sub-menu li.current_page_item > a,
.u360-mobile-nav .sub-menu li.current-menu-parent > a,
.u360-mobile-nav .sub-menu li.current_page_parent > a,
.u360-mobile-nav .sub-menu li.current-menu-ancestor > a,
.u360-mobile-nav .sub-menu li.current_page_ancestor > a {
	color: var(--u360-purple);
	font-weight: 700;
}

/* ==========================================================================
   Responsive Reflows
   ========================================================================== */
@media (max-width: 1024px) {
	.u360-hp-hero-inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.u360-hp-hero-visual {
		order: 2;
	}

	.u360-hp-impact-strip {
		grid-template-columns: repeat(2, 1fr);
		padding: 28px 24px;
		gap: 24px;
	}

	.u360-hp-programs-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.u360-hp-opps-grid--triple {
		grid-template-columns: repeat(2, 1fr);
	}

	.u360-hp-story-card {
		grid-template-columns: 1fr;
	}

	.u360-hp-story-media {
		min-height: 320px;
		max-height: 380px;
	}

	.u360-hp-story-content {
		padding: 32px 24px;
	}

	.u360-hp-story-script-right {
		display: none;
	}

	.u360-hp-banner-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.u360-hp-news-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.u360-hp-gi-grid {
		grid-template-columns: 1fr;
	}

	.u360-hp-partners-strip {
		grid-template-columns: repeat(4, 1fr);
	}

	.u360-footer-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 992px) {
	.u360-main-nav {
		display: none;
		pointer-events: none;
	}

	.u360-mobile-toggle {
		display: flex;
	}

	.u360-header-donate-btn {
		display: none;
	}
}

@media (max-width: 768px) {
	.u360-hp-impact-strip {
		grid-template-columns: 1fr;
		padding: 24px 20px;
		gap: 20px;
	}

	.u360-hp-programs-grid {
		grid-template-columns: 1fr;
	}

	.u360-hp-prog-card {
		max-height: none;
	}

	.u360-hp-opps-container {
		padding: 32px 20px;
	}

	.u360-hp-opps-grid--triple,
	.u360-hp-opps-grid--double {
		grid-template-columns: 1fr;
	}

	.u360-hp-banner-grid {
		grid-template-columns: 1fr;
	}

	.u360-hp-banner-script {
		position: static;
		margin-top: 24px;
		text-align: center;
	}

	.u360-hp-news-grid {
		grid-template-columns: 1fr;
	}

	.u360-hp-partners-strip {
		grid-template-columns: repeat(2, 1fr);
	}

	.u360-hp-closing-inner {
		flex-direction: column;
		text-align: center;
	}

	.u360-footer-grid {
		grid-template-columns: 1fr;
	}

	.u360-site-footer {
		padding: 56px 0 24px;
	}

	.u360-footer-bottom-bar {
		flex-direction: column;
		text-align: center;
	}

	.u360-footer-legal-links {
		justify-content: center;
		flex-wrap: wrap;
	}
}