/*
Theme Name: Aarlo Preschool Official Theme
Theme URI: https://aarlo.in
Author: Aarlo Preschool Digital Team
Author URI: https://aarlo.in
Description: Official WordPress Theme for Aarlo Preschool (Seegehalli, K R Puram, Bangalore 560049). Built from the official Aarlo Preschool Brand Document, Brochure, Banner & Flyer with built-in SEO, AEO (Answer Engine Optimization), GEO (Generative Engine Optimization), and LEO (Local Engine Optimization) standards.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: aarlo-preschool
*/

:root {
	/* Official Brand Colour Palette from Aarlo Preschool Brand Document */
	--growth-green: #2E8B8B;
	--growth-green-dark: #216B6B;
	--growth-green-light: #E6F4F4;
	--love-red: #E74C3C;
	--love-red-light: #FDEDEC;
	--wonder-orange: #F39C12;
	--wonder-orange-light: #FEF5E7;
	--sky-blue: #3498DB;
	--sky-blue-light: #EBF5FB;
	--sunshine-yellow: #F1C40F;
	--sunshine-yellow-light: #FEF9E7;
	--trust-navy: #1B3A4B;
	--daycare-purple: #6E4F8E;
	--daycare-purple-light: #F3EEF8;

	/* Background & Surface Tones (Matching Brochure & Flyer) */
	--cream-bg: #FFFDF7;
	--warm-sand: #FDF6E4;
	--soft-sage: #DCECC9;
	--white: #FFFFFF;
	--text-main: #1B3A4B;
	--text-muted: #4A6572;
	--border-soft: rgba(27, 58, 75, 0.12);
	--shadow-card: 0 12px 30px rgba(27, 58, 75, 0.08);
	--shadow-hover: 0 18px 40px rgba(27, 58, 75, 0.14);
	--radius-lg: 22px;
	--radius-md: 16px;
	--radius-pill: 999px;
	--font-primary: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	font-size: 16px;
}

body {
	font-family: var(--font-primary);
	color: var(--text-main);
	background-color: var(--cream-bg);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--growth-green);
	text-decoration: none;
	transition: all 0.25s ease;
}

a:hover {
	color: var(--wonder-orange);
}

.container {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Typography System (Nunito Light, Regular, Bold, Black) */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-primary);
	color: var(--trust-navy);
	line-height: 1.22;
	font-weight: 800;
}

.section-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--sunshine-yellow-light);
	color: var(--trust-navy);
	border: 2px dashed var(--wonder-orange);
	padding: 6px 18px;
	border-radius: var(--radius-pill);
	font-weight: 800;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 14px;
}

.section-title {
	font-size: clamp(1.9rem, 3.5vw, 2.75rem);
	font-weight: 900;
	margin-bottom: 14px;
	color: var(--trust-navy);
}

.section-title span.highlight-green {
	color: var(--growth-green);
}

.section-title span.highlight-orange {
	color: var(--wonder-orange);
}

.section-title span.highlight-red {
	color: var(--love-red);
}

.section-subtitle {
	font-size: 1.12rem;
	color: var(--text-muted);
	max-width: 720px;
	margin: 0 auto 42px;
}

.text-center {
	text-align: center;
}

/* Top Announcement & Local NAP Bar */
.top-bar {
	background-color: var(--trust-navy);
	color: var(--white);
	font-size: 0.9rem;
	padding: 10px 0;
}

.top-bar-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.top-bar-contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.top-bar-contact a,
.top-bar-contact span {
	color: var(--white);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
}

.top-bar-contact a:hover {
	color: var(--sunshine-yellow);
}

.top-bar-badge {
	background: var(--wonder-orange);
	color: var(--white);
	font-weight: 800;
	padding: 4px 14px;
	border-radius: var(--radius-pill);
	font-size: 0.82rem;
	letter-spacing: 0.03em;
}

/* Header & Navigation */
.site-header {
	background: rgba(255, 253, 247, 0.96);
	backdrop-filter: blur(10px);
	border-bottom: 2px dashed rgba(46, 139, 139, 0.2);
	position: sticky;
	top: 0;
	z-index: 999;
	padding: 12px 0;
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: nowrap;
}

.brand-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.brand-logo img {
	height: 60px;
	width: auto;
	border-radius: 10px;
	display: block;
}

.brand-wordmark-fallback {
	display: flex;
	flex-direction: column;
}

.main-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
}

.main-nav > ul {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 13px;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
}

.main-nav ul li {
	position: relative;
	display: flex;
	align-items: center;
}

.main-nav > ul > li > a {
	color: var(--trust-navy);
	font-weight: 800;
	font-size: 0.91rem;
	line-height: 1.2;
	padding: 10px 3px;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	white-space: nowrap;
}

.main-nav a:hover,
.main-nav a.active {
	color: var(--growth-green);
}

.main-nav > ul > li > a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 2px;
	width: 0;
	height: 3px;
	background: var(--wonder-orange);
	border-radius: 3px;
	transition: width 0.25s ease;
}

.main-nav > ul > li > a:hover::after,
.main-nav > ul > li > a.active::after {
	width: 100%;
}

/* Dropdown Submenu */
.main-nav ul ul.sub-menu {
	list-style: none;
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background: var(--white);
	border-radius: 14px;
	box-shadow: 0 14px 34px rgba(27, 58, 75, 0.14);
	border: 2px dashed var(--growth-green);
	padding: 8px 0;
	z-index: 1000;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.main-nav ul li:hover > ul.sub-menu {
	display: flex;
}

.main-nav ul ul.sub-menu li {
	display: block;
	width: 100%;
}

.main-nav ul ul.sub-menu li a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--trust-navy);
	width: 100%;
	white-space: nowrap;
	text-align: left;
}

.main-nav ul ul.sub-menu li a:hover {
	background: var(--growth-green-light);
	color: var(--growth-green);
}

.header-cta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.header-cta .btn {
	padding: 11px 20px;
	font-size: 0.94rem;
	white-space: nowrap;
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	gap: 8px;
	padding: 13px 26px;
	border-radius: var(--radius-pill);
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 1rem;
	cursor: pointer;
	border: none;
	transition: all 0.25s ease;
	text-decoration: none;
}

.btn-primary {
	background: var(--wonder-orange);
	color: var(--white);
	box-shadow: 0 6px 18px rgba(243, 156, 18, 0.35);
}

.btn-primary:hover {
	background: #E08E0B;
	color: var(--white);
	transform: translateY(-2px);
}

.btn-green {
	background: var(--growth-green);
	color: var(--white);
	box-shadow: 0 6px 18px rgba(46, 139, 139, 0.3);
}

.btn-green:hover {
	background: var(--growth-green-dark);
	color: var(--white);
	transform: translateY(-2px);
}

.btn-outline {
	background: var(--white);
	color: var(--trust-navy);
	border: 2px solid var(--trust-navy);
}

.btn-outline:hover {
	background: var(--trust-navy);
	color: var(--white);
}

/* Hero Section */
.hero-section {
	position: relative;
	padding: 64px 0 76px;
	background: radial-gradient(circle at 15% 20%, #FEF5E7 0%, #FFFDF7 55%, #E6F4F4 100%);
	border-bottom: 3px dashed rgba(46, 139, 139, 0.22);
	overflow: hidden;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 44px;
	align-items: center;
}

.hero-tagline-ribbon {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #FCE3B4;
	color: var(--trust-navy);
	padding: 7px 20px;
	border-radius: var(--radius-pill);
	font-weight: 900;
	font-size: 0.98rem;
	margin-bottom: 18px;
}

.hero-title {
	font-size: clamp(2.3rem, 4.5vw, 3.6rem);
	font-weight: 900;
	color: var(--trust-navy);
	margin-bottom: 18px;
	line-height: 1.15;
}

.hero-description {
	font-size: 1.18rem;
	color: var(--text-muted);
	margin-bottom: 26px;
	font-weight: 600;
}

.hero-badges-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 30px;
}

.hero-pill {
	background: var(--white);
	border: 2px dashed var(--growth-green);
	padding: 8px 16px;
	border-radius: var(--radius-pill);
	font-weight: 800;
	font-size: 0.92rem;
	color: var(--trust-navy);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* Admissions Open 2026-2027 Circular / Card Showcase */
.hero-card {
	background: var(--white);
	border-radius: 28px;
	padding: 34px;
	box-shadow: var(--shadow-card);
	border: 3px dashed var(--wonder-orange);
	position: relative;
	text-align: center;
}

.admissions-circle {
	width: 176px;
	height: 176px;
	margin: 0 auto 22px;
	background: var(--wonder-orange);
	color: var(--white);
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 4px dashed var(--white);
	box-shadow: 0 0 0 6px var(--wonder-orange), 0 12px 28px rgba(243, 156, 18, 0.35);
}

.admissions-circle span.small {
	font-size: 1rem;
	font-weight: 800;
}

.admissions-circle strong {
	font-size: 2.3rem;
	font-weight: 900;
	line-height: 1.05;
}

.admissions-circle span.year {
	font-size: 1.05rem;
	font-weight: 800;
	margin-top: 2px;
}

/* Kreedo Network Credibility Stats Bar (From Brochure Page 1) */
.stats-section {
	padding: 40px 0;
	background: var(--white);
	border-bottom: 1px solid var(--border-soft);
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

.stat-card {
	background: var(--cream-bg);
	border: 2px dashed var(--growth-green);
	border-radius: var(--radius-lg);
	padding: 24px 18px;
	text-align: center;
	transition: transform 0.25s ease;
}

.stat-card:hover {
	transform: translateY(-4px);
}

.stat-number {
	font-size: 2.2rem;
	font-weight: 900;
	color: var(--love-red);
	line-height: 1.1;
	margin-bottom: 6px;
}

.stat-card:nth-child(1) .stat-number { color: var(--growth-green); }
.stat-card:nth-child(2) .stat-number { color: var(--love-red); }
.stat-card:nth-child(3) .stat-number { color: var(--sky-blue); }
.stat-card:nth-child(4) .stat-number { color: var(--wonder-orange); }

.stat-label {
	font-weight: 800;
	color: var(--trust-navy);
	font-size: 1rem;
}

.stat-sub {
	font-size: 0.8rem;
	color: var(--text-muted);
	margin-top: 2px;
}

/* 5 Programs Stitched Tiles (Matching Banner & Flyer) */
.programs-section {
	padding: 76px 0;
	background: var(--cream-bg);
}

.programs-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}

.program-tile {
	border-radius: var(--radius-lg);
	padding: 26px 20px;
	color: var(--white);
	text-align: center;
	position: relative;
	box-shadow: var(--shadow-card);
	border: 3px dashed rgba(255, 255, 255, 0.78);
	outline: 6px solid transparent;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.program-tile:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-hover);
}

.program-tile.playgroup {
	background-color: var(--growth-green);
	outline-color: var(--growth-green);
}

.program-tile.nursery {
	background-color: var(--wonder-orange);
	outline-color: var(--wonder-orange);
}

.program-tile.lkg {
	background-color: var(--sky-blue);
	outline-color: var(--sky-blue);
}

.program-tile.ukg {
	background-color: var(--love-red);
	outline-color: var(--love-red);
}

.program-tile.daycare {
	background-color: var(--daycare-purple);
	outline-color: var(--daycare-purple);
}

.program-icon {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var(--white);
	margin: 0 auto 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	color: var(--trust-navy);
}

.program-tile h3 {
	color: var(--white);
	font-size: 1.45rem;
	font-weight: 900;
	margin-bottom: 6px;
}

.program-age {
	display: inline-block;
	background: rgba(255, 255, 255, 0.22);
	padding: 3px 12px;
	border-radius: var(--radius-pill);
	font-weight: 800;
	font-size: 0.85rem;
	margin-bottom: 12px;
}

.program-tile p {
	font-size: 0.94rem;
	color: rgba(255, 255, 255, 0.95);
	font-weight: 600;
}

/* Early Brain Window Section (From Brochure Page 2 Left Panel) */
.brain-window-section {
	padding: 76px 0;
	background: var(--warm-sand);
}

.two-col-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.inherent-acquired-box {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin: 26px 0;
}

.ia-card {
	background: var(--white);
	border: 2px dashed var(--growth-green);
	border-radius: var(--radius-md);
	padding: 22px;
	text-align: center;
}

.ia-card .ia-icon {
	font-size: 2.3rem;
	margin-bottom: 8px;
}

.ia-card h4 {
	color: var(--growth-green);
	font-size: 1.25rem;
	margin-bottom: 6px;
}

/* 6 Learning Dimensions (What Your Child Learns) */
.pillars-section {
	padding: 76px 0;
	background: var(--white);
}

.pillars-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.pillar-card {
	background: var(--cream-bg);
	border: 2px solid var(--border-soft);
	border-radius: var(--radius-lg);
	padding: 28px;
	transition: all 0.25s ease;
}

.pillar-card:hover {
	border-color: var(--growth-green);
	box-shadow: var(--shadow-card);
	transform: translateY(-4px);
}

.pillar-icon-badge {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	color: var(--white);
	margin-bottom: 16px;
	font-weight: 900;
}

.pillar-card h3 {
	font-size: 1.28rem;
	margin-bottom: 8px;
}

/* GEO Structured Comparison Table */
.comparison-section {
	padding: 72px 0;
	background: var(--growth-green-light);
}

.table-responsive {
	overflow-x: auto;
	background: var(--white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 8px;
}

.geo-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

.geo-table th,
.geo-table td {
	padding: 16px 20px;
	border-bottom: 1px solid var(--border-soft);
}

.geo-table th {
	background: var(--trust-navy);
	color: var(--white);
	font-weight: 800;
	font-size: 0.98rem;
}

.geo-table th:first-child {
	border-top-left-radius: 14px;
}

.geo-table th:last-child {
	border-top-right-radius: 14px;
}

.geo-table tr:last-child td {
	border-bottom: none;
}

.geo-table tr:hover td {
	background: var(--cream-bg);
}

/* Safety & Quote Section (Brochure Page 2 Right Panel) */
.safety-section {
	padding: 76px 0;
	background: var(--cream-bg);
}

.quote-box {
	background: var(--white);
	border: 2px dashed var(--growth-green);
	border-radius: var(--radius-lg);
	padding: 32px;
	position: relative;
	margin-bottom: 36px;
	font-size: 1.18rem;
	font-weight: 700;
	color: var(--trust-navy);
}

.safety-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.safety-card {
	background: var(--white);
	border-radius: var(--radius-md);
	padding: 24px 18px;
	text-align: center;
	box-shadow: var(--shadow-card);
	border-top: 5px solid var(--growth-green);
}

.safety-card:nth-child(2) { border-top-color: var(--sky-blue); }
.safety-card:nth-child(3) { border-top-color: var(--love-red); }
.safety-card:nth-child(4) { border-top-color: var(--wonder-orange); }

.safety-card .s-icon {
	font-size: 2.2rem;
	margin-bottom: 10px;
}

/* AEO Parent Q&A Accordion Section */
.faq-section {
	padding: 76px 0;
	background: var(--white);
}

.faq-list {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.faq-item {
	background: var(--cream-bg);
	border: 2px solid var(--border-soft);
	border-radius: var(--radius-md);
	padding: 22px 26px;
}

.faq-item summary {
	font-weight: 800;
	font-size: 1.12rem;
	color: var(--trust-navy);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary::after {
	content: '+';
	font-size: 1.5rem;
	color: var(--wonder-orange);
	font-weight: 900;
}

.faq-item[open] summary::after {
	content: '−';
}

.faq-answer {
	margin-top: 14px;
	color: var(--text-muted);
	font-size: 1rem;
	padding-top: 12px;
	border-top: 1px dashed var(--border-soft);
}

/* Admissions Enquiry & Local Map Section */
.contact-section {
	padding: 76px 0;
	background: var(--warm-sand);
}

.enquiry-form-card {
	background: var(--white);
	padding: 36px;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	border: 3px dashed var(--growth-green);
}

.form-group {
	margin-bottom: 18px;
}

.form-group label {
	display: block;
	font-weight: 800;
	margin-bottom: 6px;
	font-size: 0.94rem;
	color: var(--trust-navy);
}

.form-control {
	width: 100%;
	padding: 13px 16px;
	border: 2px solid var(--border-soft);
	border-radius: 12px;
	font-family: var(--font-primary);
	font-size: 1rem;
	color: var(--trust-navy);
	background: var(--cream-bg);
}

.form-control:focus {
	outline: none;
	border-color: var(--growth-green);
	background: var(--white);
}

/* LEO Neighborhood Pills */
.leo-areas-strip {
	margin-top: 28px;
	padding: 20px;
	background: var(--white);
	border-radius: var(--radius-md);
	border: 2px dashed var(--sky-blue);
}

.leo-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.leo-tag {
	background: var(--sky-blue-light);
	color: var(--trust-navy);
	padding: 5px 13px;
	border-radius: var(--radius-pill);
	font-size: 0.85rem;
	font-weight: 700;
}

/* Footer Banner Strip (Matching Banner.pdf Footer) */
.site-footer {
	background: var(--trust-navy);
	color: var(--white);
	padding: 64px 0 28px;
}

.footer-nap-banner {
	background: var(--cream-bg);
	color: var(--trust-navy);
	border-radius: var(--radius-lg);
	padding: 24px 30px;
	border: 3px dashed var(--growth-green);
	display: grid;
	grid-template-columns: 1fr 1fr 1.4fr;
	gap: 24px;
	margin-bottom: 48px;
	align-items: center;
}

.nap-item {
	display: flex;
	align-items: center;
	gap: 14px;
}

.nap-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
	font-size: 1.4rem;
	flex-shrink: 0;
}

.nap-icon.phone { background: var(--growth-green); }
.nap-icon.email { background: var(--wonder-orange); }
.nap-icon.address { background: var(--love-red); }

.nap-text small {
	display: block;
	font-weight: 700;
	color: var(--text-muted);
	font-size: 0.85rem;
}

.nap-text strong,
.nap-text a {
	font-size: 1.15rem;
	font-weight: 900;
	color: var(--trust-navy);
}

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

.footer-col h4 {
	color: var(--sunshine-yellow);
	font-size: 1.15rem;
	margin-bottom: 16px;
}

.footer-col ul {
	list-style: none;
}

.footer-col ul li {
	margin-bottom: 10px;
}

.footer-col ul a {
	color: rgba(255, 255, 255, 0.85);
	font-weight: 600;
}

.footer-col ul a:hover {
	color: var(--sunshine-yellow);
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding-top: 22px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.78);
}

/* Floating WhatsApp & Call Action Bar */
.floating-cta {
	position: fixed;
	bottom: 22px;
	right: 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	z-index: 9999;
}

.float-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	border-radius: var(--radius-pill);
	color: var(--white);
	font-weight: 800;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.float-btn.whatsapp {
	background: #25D366;
}

.float-btn.call {
	background: var(--love-red);
}

.float-btn:hover {
	color: var(--white);
	transform: scale(1.04);
}

/* Responsive Form & Two-Column Helpers */
.form-row-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.programs-detail-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

/* Mobile & Tablet Hamburger Menu Button (Hidden on Desktop > 1100px) */
.mobile-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--trust-navy);
	color: var(--white);
	border: 2px solid var(--trust-navy);
	border-radius: 12px;
	padding: 9px 14px;
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 0.95rem;
	cursor: pointer;
	transition: all 0.2s ease;
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle[aria-expanded="true"] {
	background: var(--growth-green);
	border-color: var(--growth-green);
}

.sub-toggle-btn {
	display: none;
	background: rgba(46, 139, 139, 0.12);
	color: var(--trust-navy);
	border: none;
	border-radius: 8px;
	width: 34px;
	height: 34px;
	font-size: 1rem;
	font-weight: 900;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* ==========================================================================
   TABLET & MOBILE RESPONSIVE BREAKPOINTS (All 7 Pages + Navigation Menu)
   ========================================================================== */

/* 1. Large Tablet & Compact Laptop (<= 1120px): Activate Slide-Down Menu Drawer */
@media (max-width: 1120px) {
	.site-header {
		padding: 10px 0;
	}

	.header-inner {
		position: relative;
		flex-wrap: wrap;
	}

	.mobile-menu-toggle {
		display: inline-flex;
	}

	.main-nav {
		display: none;
		width: 100%;
		order: 4;
		background: var(--white);
		border: 2px dashed var(--growth-green);
		border-radius: 18px;
		padding: 14px 16px;
		margin-top: 12px;
		box-shadow: 0 16px 36px rgba(27, 58, 75, 0.14);
		max-height: 78vh;
		overflow-y: auto;
	}

	.main-nav.is-open {
		display: block;
	}

	.main-nav > ul {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		width: 100%;
	}

	.main-nav ul li {
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		border-bottom: 1px dashed rgba(27, 58, 75, 0.1);
	}

	.main-nav > ul > li:last-child {
		border-bottom: none;
	}

	.main-nav > ul > li > a {
		flex: 1 1 auto;
		padding: 12px 10px;
		font-size: 1.02rem;
		justify-content: space-between;
	}

	.main-nav > ul > li > a::after {
		display: none;
	}

	.sub-toggle-btn {
		display: inline-flex;
		margin-right: 6px;
	}

	/* Submenu inside Tablet/Mobile Drawer */
	.main-nav ul ul.sub-menu {
		position: static;
		display: none;
		width: 100%;
		min-width: 100%;
		box-shadow: none;
		border: none;
		border-left: 3px solid var(--wonder-orange);
		background: var(--cream-bg);
		border-radius: 0 10px 10px 0;
		margin: 0 0 10px 10px;
		padding: 6px 0;
	}

	/* Disable hover auto-open on touch devices; use .sub-open class or hover fallback */
	.main-nav ul li:hover > ul.sub-menu {
		display: none;
	}

	.main-nav ul li.sub-open > ul.sub-menu {
		display: flex;
	}

	.main-nav ul ul.sub-menu li {
		border-bottom: none;
	}

	.main-nav ul ul.sub-menu li a {
		padding: 9px 14px;
		font-size: 0.93rem;
		white-space: normal;
	}

	/* Grids on Tablet (<= 1120px) */
	.programs-grid {
		grid-template-columns: repeat(3, 1fr);
	}

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

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

	.hero-grid,
	.two-col-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.footer-nap-banner {
		grid-template-columns: 1fr;
		gap: 18px;
	}

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

/* 2. Standard Tablet & Large Mobile (<= 768px) */
@media (max-width: 768px) {
	.container {
		padding: 0 16px;
	}

	.top-bar {
		padding: 8px 0;
		font-size: 0.82rem;
	}

	.top-bar-inner {
		justify-content: center;
		text-align: center;
		gap: 8px;
	}

	.top-bar-contact {
		justify-content: center;
		gap: 12px;
	}

	.brand-logo img {
		height: 50px;
	}

	.header-cta .btn {
		padding: 9px 14px;
		font-size: 0.85rem;
	}

	.hero-section,
	.programs-section,
	.brain-window-section,
	.pillars-section,
	.comparison-section,
	.safety-section,
	.faq-section,
	.contact-section {
		padding: 48px 0;
	}

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

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

	.enquiry-form-card,
	.hero-card {
		padding: 24px 18px;
	}
}

/* 3. Mobile Phones (<= 560px) */
@media (max-width: 560px) {
	/* Hide full street address in top bar on narrow mobile so Phone + Badge fit cleanly */
	.top-bar-contact span:last-child {
		display: none;
	}

	/* Keep header compact on mobile: Logo + Menu Toggle (CTA button inside drawer or full width) */
	.header-cta .btn {
		padding: 8px 12px;
		font-size: 0.8rem;
	}

	.brand-logo img {
		height: 44px;
	}

	.hero-title {
		font-size: 1.95rem;
	}

	.hero-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hero-actions .btn {
		width: 100%;
	}

	.programs-grid,
	.pillars-grid,
	.stats-grid,
	.safety-grid,
	.inherent-acquired-box,
	.form-row-2,
	.footer-grid {
		grid-template-columns: 1fr;
	}

	.geo-table th,
	.geo-table td {
		padding: 12px 12px;
		font-size: 0.88rem;
	}

	.footer-nap-banner {
		padding: 18px 16px;
	}

	.nap-text strong,
	.nap-text a {
		font-size: 1rem;
	}

	/* Compact Circular Floating CTA on Mobile */
	.floating-cta {
		bottom: 18px;
		right: 16px;
		left: auto;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;
		gap: 12px;
	}

	.float-btn {
		flex: 0 0 auto;
		width: 54px;
		height: 54px;
		min-width: 54px;
		max-width: 54px;
		padding: 0;
		border-radius: 50%;
		justify-content: center;
	}

	.site-footer {
		padding-bottom: 84px;
	}
}



/* ==========================================================================
   HOME PAGE ATTRACTIVE ANIMATIONS & INTERACTIVE WIDGETS (60FPS GPU-ACCELERATED)
   ========================================================================== */
@keyframes aarloFloatSlow {
	0%, 100% { transform: translateY(0px) rotate(0deg); }
	50% { transform: translateY(-14px) rotate(4deg); }
}
@keyframes aarloFloatReverse {
	0%, 100% { transform: translateY(0px) rotate(0deg); }
	50% { transform: translateY(12px) rotate(-5deg); }
}
@keyframes aarloPulseBadge {
	0%, 100% { transform: rotate(-6deg) scale(1); box-shadow: 0 12px 28px rgba(231, 76, 60, 0.35); }
	50% { transform: rotate(-3deg) scale(1.06); box-shadow: 0 16px 36px rgba(231, 76, 60, 0.55); }
}
@keyframes aarloShimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}
@keyframes aarloMarquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
@keyframes aarloKenBurns {
	0% { transform: scale(1); }
	100% { transform: scale(1.07); }
}

/* Floating Decorative Shapes in Hero */
.hero-section {
	position: relative;
	overflow: hidden;
}
.hero-floating-shapes {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}
.float-shape {
	position: absolute;
	font-size: 2.2rem;
	opacity: 0.22;
	filter: drop-shadow(0 6px 12px rgba(0,0,0,0.08));
	animation: aarloFloatSlow 6s ease-in-out infinite;
}
.float-shape.s1 { top: 8%; left: 4%; animation-duration: 5.5s; font-size: 2.4rem; }
.float-shape.s2 { top: 15%; right: 6%; animation-Name: aarloFloatReverse; animation-duration: 6.5s; font-size: 2.6rem; }
.float-shape.s3 { bottom: 12%; left: 7%; animation-duration: 7s; font-size: 2.1rem; }
.float-shape.s4 { bottom: 18%; right: 42%; animation-name: aarloFloatReverse; animation-duration: 5.8s; font-size: 2rem; }
.float-shape.s5 { top: 10%; left: 46%; animation-duration: 6.2s; font-size: 1.9rem; }

.hero-grid {
	position: relative;
	z-index: 1;
}

/* Animated Gradient Text & Shimmer Buttons */
.animated-gradient-text {
	background: linear-gradient(90deg, #E74C3C 0%, #F39C12 35%, #2E8B8B 70%, #E74C3C 100%);
	background-size: 200% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: aarloShimmer 6s linear infinite;
}
.btn-primary {
	position: relative;
	overflow: hidden;
}
.btn-primary::after {
	content: "";
	position: absolute;
	top: -50%;
	left: -60%;
	width: 40%;
	height: 200%;
	background: rgba(255, 255, 255, 0.28);
	transform: rotate(25deg);
	transition: left 0.65s ease;
}
.btn-primary:hover::after {
	left: 130%;
}

/* Interactive Hero Showcase Carousel Card */
.admissions-circle {
	animation: aarloPulseBadge 3.2s ease-in-out infinite;
}
.hero-showcase-card {
	background: #ffffff;
	border-radius: 26px;
	padding: 20px;
	box-shadow: 0 22px 50px rgba(27, 58, 75, 0.14);
	border: 3px solid rgba(46, 139, 139, 0.18);
	position: relative;
}
.hero-slide-viewport {
	position: relative;
	width: 100%;
	height: 270px;
	border-radius: 18px;
	overflow: hidden;
	margin-bottom: 14px;
	background: var(--bg-cream);
}
.hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.65s ease-in-out;
	pointer-events: none;
}
.hero-slide.active {
	opacity: 1;
	pointer-events: auto;
}
.hero-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: aarloKenBurns 8s ease-out infinite alternate;
}
.hero-slide-caption {
	position: absolute;
	bottom: 10px;
	left: 10px;
	right: 10px;
	background: rgba(27, 58, 75, 0.88);
	backdrop-filter: blur(8px);
	color: #fff;
	padding: 10px 14px;
	border-radius: 12px;
	font-size: 0.88rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.hero-slide-badge {
	background: var(--sunshine-yellow);
	color: var(--trust-navy);
	padding: 3px 9px;
	border-radius: 99px;
	font-size: 0.75rem;
	font-weight: 900;
	white-space: nowrap;
}
.hero-slide-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 14px;
}
.hero-dot-btn {
	border: none;
	background: #e2ecec;
	color: var(--trust-navy);
	padding: 5px 11px;
	border-radius: 99px;
	font-size: 0.76rem;
	font-weight: 800;
	cursor: pointer;
	transition: all 0.25s ease;
}
.hero-dot-btn.active {
	background: var(--growth-green);
	color: #fff;
	transform: scale(1.05);
}

/* Infinite Wonder Marquee Ticker */
.wonder-marquee {
	background: linear-gradient(90deg, var(--trust-navy) 0%, #132a38 100%);
	color: #ffffff;
	padding: 12px 0;
	overflow: hidden;
	white-space: nowrap;
	border-bottom: 3px solid var(--sunshine-yellow);
	position: relative;
}
.wonder-marquee-track {
	display: inline-flex;
	gap: 36px;
	animation: aarloMarquee 28s linear infinite;
	font-weight: 800;
	font-size: 0.94rem;
	letter-spacing: 0.3px;
}
.wonder-marquee:hover .wonder-marquee-track {
	animation-play-state: paused;
}
.wonder-marquee-item span {
	color: var(--sunshine-yellow);
	margin-right: 6px;
}

/* Interactive Age-to-Program Matcher Widget */
.age-matcher-section {
	padding: 56px 0;
	background: linear-gradient(135deg, #F0F9F9 0%, #FFF9EE 100%);
	border-top: 1px solid rgba(46, 139, 139, 0.14);
	border-bottom: 1px solid rgba(46, 139, 139, 0.14);
}
.age-tabs-bar {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 24px 0 28px;
}
.age-tab-btn {
	border: 2px solid rgba(46, 139, 139, 0.25);
	background: #ffffff;
	color: var(--trust-navy);
	padding: 12px 20px;
	border-radius: 99px;
	font-family: inherit;
	font-size: 0.96rem;
	font-weight: 800;
	cursor: pointer;
	transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.age-tab-btn:hover {
	transform: translateY(-3px);
	border-color: var(--growth-green);
}
.age-tab-btn.active {
	background: var(--growth-green);
	color: #ffffff;
	border-color: var(--growth-green);
	box-shadow: 0 10px 24px rgba(46, 139, 139, 0.3);
	transform: translateY(-3px) scale(1.03);
}
.age-panel {
	display: none;
	background: #ffffff;
	border-radius: 24px;
	padding: 32px;
	box-shadow: 0 18px 45px rgba(27, 58, 75, 0.09);
	border: 2px solid rgba(46, 139, 139, 0.18);
	animation: aarloFadeScaleIn 0.4s ease forwards;
}
.age-panel.active {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 28px;
	align-items: center;
}
@keyframes aarloFadeScaleIn {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Interactive Daily Journey Timeline */
.daily-timeline-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	margin-top: 32px;
}
.timeline-step-card {
	background: #ffffff;
	border-radius: 20px;
	padding: 22px 18px;
	text-align: center;
	border: 2px solid rgba(46, 139, 139, 0.14);
	box-shadow: 0 10px 26px rgba(27, 58, 75, 0.06);
	transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	position: relative;
}
.timeline-step-card:hover {
	transform: translateY(-8px);
	border-color: var(--wonder-orange);
	box-shadow: 0 18px 36px rgba(243, 156, 18, 0.18);
}
.timeline-time-pill {
	display: inline-block;
	background: var(--bg-soft-teal);
	color: var(--growth-green);
	font-weight: 900;
	font-size: 0.78rem;
	padding: 4px 12px;
	border-radius: 99px;
	margin-bottom: 10px;
}

/* Card Hover Bounce & 3D Lift Enhancements */
.program-tile, .pillar-card, .safety-card, .stat-card {
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease !important;
}
.program-tile:hover, .pillar-card:hover, .safety-card:hover, .stat-card:hover {
	transform: translateY(-8px) scale(1.015) !important;
}
.program-tile:hover .program-icon,
.pillar-card:hover .pillar-icon-badge,
.safety-card:hover .s-icon {
	transform: scale(1.18) rotate(6deg);
	transition: transform 0.3s ease;
}

/* Scroll-Reveal Animation Classes */
.reveal-item {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 960px) {
	.age-panel.active {
		grid-template-columns: 1fr;
		padding: 22px;
	}
	.daily-timeline-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.daily-timeline-grid {
		grid-template-columns: 1fr;
	}
	.hero-slide-viewport {
		height: 215px;
	}
}


/* ==========================================================================
   EXACT REFERENCE MOCKUP DESIGN + SMOOTH ANIMATIONS (HEADER & HERO)
   ========================================================================== */
:root {
	--ref-navy: #0C2D50;
	--ref-teal: #0E8388;
	--ref-coral: #EB4D32;
	--ref-orange: #F2911B;
	--ref-cream: #FAF6EE;
	--ref-wave-blue: #EAF3F9;
}

/* Clean Editorial Header Matching Reference Mockup */
.top-bar {
	display: none; /* Clean minimal top like the reference design */
}
.site-header {
	background: #ffffff !important;
	border-bottom: 1px solid rgba(12, 45, 80, 0.06) !important;
	box-shadow: 0 4px 20px rgba(12, 45, 80, 0.04) !important;
	padding: 12px 0 !important;
}
.brand-logo-svg {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none !important;
	line-height: 1;
	transition: transform 0.3s ease;
}
.brand-logo-svg:hover {
	transform: scale(1.03);
}
.main-nav > ul > li > a {
	color: #143356 !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	padding: 10px 6px !important;
	position: relative;
	background: transparent !important;
	border-radius: 0 !important;
}
.main-nav > ul > li > a.active::after,
.main-nav > ul > li > a:hover::after {
	content: "";
	position: absolute;
	left: 6px;
	right: 6px;
	bottom: 2px;
	height: 3.5px;
	background: #F2911B;
	border-radius: 4px;
}
.header-visit-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 9px;
	background: linear-gradient(180deg, #F69D28 0%, #EC8914 100%) !important;
	color: #ffffff !important;
	font-weight: 800 !important;
	font-size: 0.96rem !important;
	padding: 12px 24px !important;
	border-radius: 999px !important;
	box-shadow: 0 8px 20px rgba(242, 145, 27, 0.28) !important;
	border: none !important;
	text-decoration: none !important;
	transition: transform 0.28s ease, box-shadow 0.28s ease !important;
}
.header-visit-btn:hover {
	transform: translateY(-2px) scale(1.02) !important;
	box-shadow: 0 12px 26px rgba(242, 145, 27, 0.4) !important;
}

/* Reference Hero Section */
.ref-hero-section {
	position: relative;
	background: #FAF6EE;
	padding: 46px 0 0;
	overflow: hidden;
}
.ref-hero-container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 28px 54px;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 48px;
	align-items: center;
	position: relative;
	z-index: 2;
}

/* Left Column: Pill Badge, 3-Line Headline, Subtitle, 3 Feature Badges, 2 Pill Buttons */
.ref-admissions-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #F9E5C4;
	color: #143356;
	font-size: 0.84rem;
	font-weight: 800;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	padding: 9px 20px;
	border-radius: 999px;
	margin-bottom: 22px;
	animation: refFadeSlideUp 0.6s ease both;
}
.ref-admissions-pill svg {
	animation: refSpinSlow 12s linear infinite;
	flex-shrink: 0;
}
.ref-hero-heading {
	font-size: clamp(2.85rem, 5.1vw, 4.45rem);
	font-weight: 900;
	line-height: 1.06;
	letter-spacing: -1.2px;
	margin: 0 0 22px;
	color: #0C2D50;
}
.ref-hero-heading .line-1 {
	display: block;
	color: #0C2D50;
	animation: refFadeSlideUp 0.65s 0.08s ease both;
}
.ref-hero-heading .line-2 {
	display: block;
	color: #0E8388;
	animation: refFadeSlideUp 0.65s 0.16s ease both;
}
.ref-hero-heading .line-3 {
	display: block;
	color: #0C2D50;
	animation: refFadeSlideUp 0.65s 0.24s ease both;
}
.ref-hero-heading .word-here {
	color: #EB4D32;
	display: inline-block;
	position: relative;
}
.ref-hero-subtitle {
	font-size: 1.22rem;
	line-height: 1.55;
	color: #35506B;
	font-weight: 600;
	max-width: 530px;
	margin: 0 0 28px;
	animation: refFadeSlideUp 0.65s 0.32s ease both;
}

/* 3 Horizontal Feature Icons with Vertical Dividers */
.ref-features-row {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-bottom: 34px;
	flex-wrap: wrap;
	animation: refFadeSlideUp 0.65s 0.4s ease both;
}
.ref-feature-item {
	display: flex;
	align-items: center;
	gap: 12px;
	transition: transform 0.28s ease;
}
.ref-feature-item:hover {
	transform: translateY(-3px);
}
.ref-feature-divider {
	width: 1px;
	height: 36px;
	background: rgba(12, 45, 80, 0.14);
}
.ref-feature-icon {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.ref-feature-icon.green { background: #DCF0E2; color: #2E8B57; }
.ref-feature-icon.blue  { background: #DCEEFB; color: #2581C4; }
.ref-feature-icon.amber { background: #FDE7C7; color: #F2911B; }
.ref-feature-text {
	font-size: 0.94rem;
	line-height: 1.25;
	font-weight: 800;
	color: #143356;
}

/* 2 Pill CTA Buttons */
.ref-cta-buttons {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	animation: refFadeSlideUp 0.65s 0.48s ease both;
}
.ref-btn-orange {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: linear-gradient(180deg, #F69D28 0%, #EB8712 100%);
	color: #ffffff !important;
	font-size: 1.05rem;
	font-weight: 800;
	padding: 15px 30px;
	border-radius: 999px;
	text-decoration: none !important;
	box-shadow: 0 12px 26px rgba(242, 145, 27, 0.32);
	transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	position: relative;
	overflow: hidden;
}
.ref-btn-orange:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 16px 34px rgba(242, 145, 27, 0.44);
}
.ref-btn-teal-outline {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, 0.75);
	color: #0E8388 !important;
	border: 2px solid #0E8388;
	font-size: 1.05rem;
	font-weight: 800;
	padding: 13px 28px;
	border-radius: 999px;
	text-decoration: none !important;
	transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.ref-btn-teal-outline:hover {
	background: #0E8388;
	color: #ffffff !important;
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(14, 131, 136, 0.24);
}

/* Right Column: White Rounded Photo Frame + Sun Rays + Floating "Learning through play" Cloud Sticker */
.ref-photo-wrapper {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	animation: refFadeScaleIn 0.75s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ref-bg-blue-blob {
	position: absolute;
	top: -32px;
	right: -28px;
	width: 340px;
	height: 360px;
	background: #E7EFF6;
	border-radius: 50%;
	z-index: 0;
	animation: aarloFloatSlow 7s ease-in-out infinite;
}
.ref-sun-Burst {
	position: absolute;
	top: -46px;
	right: -26px;
	width: 145px;
	height: 145px;
	z-index: 1;
	animation: refSunFloat 5s ease-in-out infinite;
}
.ref-photo-frame {
	position: relative;
	z-index: 2;
	background: #ffffff;
	padding: 11px;
	border-radius: 34px;
	box-shadow: 0 24px 60px rgba(12, 45, 80, 0.13);
	width: 100%;
	max-width: 500px;
	transition: transform 0.4s ease;
}
.ref-photo-frame:hover {
	transform: translateY(-5px);
}
.ref-photo-inner {
	border-radius: 24px;
	overflow: hidden;
	aspect-ratio: 1.08 / 1;
	background: #f3ede2;
	position: relative;
}
.ref-photo-inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 6s ease;
}
.ref-photo-frame:hover .ref-photo-inner img {
	transform: scale(1.05);
}

/* Floating "Learning through play" Tilted Cloud Sticker */
.ref-play-sticker {
	position: absolute;
	top: 32px;
	right: -24px;
	z-index: 4;
	background: #DFF2FD;
	border: 4.5px solid #ffffff;
	border-radius: 36px;
	padding: 12px 22px;
	box-shadow: 0 12px 28px rgba(12, 45, 80, 0.12);
	transform: rotate(-5deg);
	animation: refStickerBob 4.2s ease-in-out infinite;
	display: flex;
	align-items: center;
	gap: 8px;
	color: #0D6977;
	font-weight: 800;
	font-size: 1.02rem;
	line-height: 1.2;
}

/* Corner Botanical Leaves & Bottom Wave Strip */
.ref-corner-botanical-left {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 190px;
	height: 170px;
	pointer-events: none;
	z-index: 1;
}
.ref-corner-blob-right {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 140px;
	height: 160px;
	pointer-events: none;
	z-index: 1;
}
.ref-bottom-wave-strip {
	position: relative;
	z-index: 3;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%23EAF3F9' d='M0,55 C380,0 1060,0 1440,55 L1440,90 L0,90 Z'/%3E%3C/svg%3E") no-repeat top center;
	background-size: 100% 100%;
	padding: 32px 20px 18px;
	margin-top: -18px;
}
.ref-bottom-wave-inner {
	max-width: 960px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	flex-wrap: wrap;
	color: #143356;
	font-weight: 800;
	font-size: 1.04rem;
}
.ref-wave-group {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.ref-wave-group a {
	color: #143356;
	text-decoration: none;
	transition: color 0.2s ease;
}
.ref-wave-group a:hover {
	color: #0E8388;
}
.ref-wave-dot {
	color: #0E8388;
	margin: 0 4px;
}
.ref-wave-divider {
	width: 1.5px;
	height: 24px;
	background: rgba(12, 45, 80, 0.2);
}

@keyframes refSpinSlow {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
@keyframes refStickerBob {
	0%, 100% { transform: rotate(-5deg) translateY(0px); }
	50% { transform: rotate(-2deg) translateY(-8px); }
}
@keyframes refSunFloat {
	0%, 100% { transform: rotate(0deg) scale(1); }
	50% { transform: rotate(8deg) scale(1.06); }
}
@keyframes refFadeSlideUp {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes refFadeScaleIn {
	from { opacity: 0; transform: scale(0.95) translateY(15px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 980px) {
	.ref-hero-container {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 36px;
		padding-bottom: 36px;
	}
	.ref-hero-subtitle {
		margin-left: auto;
		margin-right: auto;
	}
	.ref-features-row, .ref-cta-buttons {
		justify-content: center;
	}
	.ref-play-sticker {
		right: 4px;
		top: 16px;
	}
}
@media (max-width: 600px) {
	.ref-feature-divider, .ref-wave-divider {
		display: none;
	}
	.ref-features-row {
		gap: 14px;
	}
	.ref-cta-buttons a {
		width: 100%;
		justify-content: center;
	}
}


/* Force Pure White (#ffffff) Menu & Header Background Everywhere */
.site-header,
.header-inner,
.main-nav,
.main-nav > ul,
.main-nav ul ul.sub-menu {
	background: #ffffff !important;
	background-color: #ffffff !important;
}
.main-nav ul ul.sub-menu li a {
	background: #ffffff !important;
}
.main-nav ul ul.sub-menu li a:hover {
	background: #F4FBFB !important;
}


/* Ensure All Classroom, Program, Blog & Gallery Images Display Full-Size Without Cropping Heads */
.age-panel img,
.pillar-card img,
.about-split-grid img,
figure img,
article img {
	width: 100% !important;
	height: auto !important;
	max-height: 430px !important;
	object-fit: contain !important;
	object-position: center top !important;
	background: #ffffff !important;
	border-radius: 16px !important;
}
.ref-photo-inner {
	aspect-ratio: auto !important;
}
.ref-photo-inner img {
	width: 100% !important;
	height: auto !important;
	object-fit: contain !important;
}
/* Full-size uncropped card images & uniform gallery card heights */
.pillars-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  align-items: stretch !important;
}
@media (max-width: 992px) {
  .pillars-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .pillars-grid {
    grid-template-columns: 1fr !important;
  }
}
.pillar-card,
figure.pillar-card,
#gallery .pillar-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  padding: 18px !important;
  border-radius: 20px !important;
}
.pillar-card img,
figure.pillar-card img,
#gallery .pillar-card img {
  width: 100% !important;
  aspect-ratio: 11 / 10 !important;
  height: auto !important;
  object-fit: cover !important;
  background-color: #FEFCF7 !important;
  border: 1px solid #ECE5D8 !important;
  border-radius: 14px !important;
  margin: 0 0 16px 0 !important;
  display: block !important;
  flex-shrink: 0 !important;
}
.pillar-card figcaption,
figure.pillar-card figcaption,
#gallery .pillar-card figcaption {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  justify-content: flex-start !important;
  padding: 2px 4px 4px !important;
  margin: 0 !important;
}
.pillar-card figcaption h3,
#gallery .pillar-card h3 {
  font-size: 1.18rem !important;
  line-height: 1.35 !important;
  margin: 0 0 8px 0 !important;
  min-height: 1.55em !important;
  color: var(--trust-navy) !important;
}
.pillar-card figcaption p,
#gallery .pillar-card p {
  font-size: 0.94rem !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  color: var(--text-muted) !important;
  flex-grow: 1 !important;
}
.age-panel.active {
  align-items: center !important;
}
.age-panel img {
  width: 100% !important;
  height: 330px !important;
  object-fit: contain !important;
  background-color: #FEFCF7 !important;
  border: 1px solid #ECE5D8 !important;
  border-radius: 18px !important;
  display: block !important;
}
.about-split-grid img,
article img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  background-color: #FEFCF7 !important;
  display: block !important;
}
/* Circular icon-only floating WhatsApp and Call buttons */
.floating-cta {
  position: fixed !important;
  right: 18px !important;
  left: auto !important;
  bottom: 20px !important;
  width: 56px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  z-index: 9999 !important;
}
.float-btn {
  flex: 0 0 56px !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(19, 34, 56, 0.25) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.float-btn:hover {
  transform: translateY(-3px) scale(1.07) !important;
  box-shadow: 0 12px 28px rgba(19, 34, 56, 0.34) !important;
}
.float-btn svg {
  display: block !important;
  flex-shrink: 0 !important;
}

/* Reference Footer Bottom Banner Styling (Deep Navy + Glowing Blue Edge + Book/Stars Graphic) */
.site-footer {
  position: relative;
  overflow: hidden;
  padding-bottom: 0 !important;
}
.footer-bottom {
  position: relative !important;
  margin-top: 28px !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding: 26px max(24px, calc((100vw - 1240px) / 2)) 30px !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(14, 116, 212, 0.35) 0%, rgba(4, 30, 66, 0.96) 55%, #031733 100%) !important;
  border-top: 1px solid rgba(56, 189, 248, 0.18) !important;
  border-bottom: 4px solid #1E88E5 !important;
  box-shadow: inset 0 -10px 28px rgba(30, 136, 229, 0.28) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  color: rgba(219, 234, 254, 0.9) !important;
}
.footer-bottom::after {
  content: "";
  position: absolute;
  left: 25%;
  right: 25%;
  bottom: -2px;
  height: 5px;
  background: linear-gradient(90deg, transparent, #60A5FA, #FFFFFF, #60A5FA, transparent);
  border-radius: 99px;
  pointer-events: none;
}
.footer-bottom-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  z-index: 2 !important;
}
.footer-copyright-line {
  font-size: 0.98rem !important;
  line-height: 1.6 !important;
  color: rgba(219, 234, 254, 0.88) !important;
}
.footer-copyright-line strong {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
.footer-copyright-line .gramosoft-link {
  color: #FBBF24 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}
.footer-copyright-line .gramosoft-link:hover {
  text-decoration: underline !important;
}
.footer-copyright-line .footer-policy-link {
  color: rgba(224, 242, 254, 0.92) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  font-weight: 600 !important;
}
.footer-copyright-line .footer-policy-link:hover {
  color: #FBBF24 !important;
}
.footer-sep {
  margin: 0 8px !important;
  color: rgba(148, 163, 184, 0.65) !important;
}
.footer-curriculum-line {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 0.96rem !important;
  color: rgba(219, 234, 254, 0.85) !important;
}
.footer-curriculum-line strong {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
.footer-grad-cap {
  flex-shrink: 0 !important;
  filter: drop-shadow(0 2px 6px rgba(56, 189, 248, 0.45));
}
.footer-book-art {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  z-index: 2 !important;
  margin-top: -10px !important;
  margin-bottom: -10px !important;
}
@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 22px 20px 26px !important;
  }
  .footer-book-art {
    align-self: flex-end !important;
  }
}

/* Prevent Horizontal Right-to-Left Scroll Overflow on Mobile & Tablet Devices */
html,
body {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  position: relative;
  overscroll-behavior-x: none;
}
main,
header,
footer,
section {
  max-width: 100vw !important;
  overflow-x: clip !important;
}
.container,
.ref-hero-container > *,
.two-col-grid > *,
.programs-grid > *,
.pillars-grid > *,
.stats-grid > *,
.safety-grid > *,
.footer-grid > *,
.footer-nap-banner > * {
  min-width: 0 !important;
  max-width: 100% !important;
}
.table-responsive {
  width: 100% !important;
  max-width: calc(100vw - 32px) !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
@media (max-width: 1120px) {
  .header-inner {
    gap: 10px !important;
  }
  .header-cta {
    gap: 8px !important;
  }
}
@media (max-width: 768px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  .brand-logo img {
    height: 44px !important;
    max-width: 140px !important;
    width: auto !important;
    object-fit: contain !important;
  }
  /* Hide "Book Campus Visit" button in top sticky header on mobile since it is already in Hero & Mobile Menu */
  .header-cta > a.btn {
    display: none !important;
  }
  .mobile-menu-toggle {
    padding: 8px 13px !important;
    font-size: 0.9rem !important;
  }
  .ref-hero-container {
    padding: 0 16px 32px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .ref-admissions-pill {
    max-width: 100% !important;
    font-size: 0.74rem !important;
    padding: 8px 14px !important;
    white-space: normal !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .ref-hero-heading {
    font-size: clamp(2.15rem, 9vw, 2.85rem) !important;
    word-break: break-word !important;
  }
  .ref-cta-buttons {
    width: 100% !important;
  }
  .ref-cta-buttons a,
  .btn {
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  .ref-photo-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 12px 4px !important;
    box-sizing: border-box !important;
  }
  .ref-bg-blue-blob {
    right: 0 !important;
    top: 0 !important;
    width: 220px !important;
    height: 220px !important;
  }
  .ref-sun-Burst {
    right: 4px !important;
    top: -10px !important;
    width: 84px !important;
    height: 84px !important;
  }
  .ref-play-sticker {
    right: 8px !important;
    top: 10px !important;
    padding: 7px 12px !important;
    font-size: 0.8rem !important;
    max-width: calc(100% - 16px) !important;
  }
  .section-badge {
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    justify-content: center !important;
    font-size: 0.78rem !important;
    padding: 6px 14px !important;
  }
  .dob-calculator-card {
    padding: 18px 14px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .dob-calculator-card > div > div {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  #aarlo-dob-input,
  #aarlo-dob-btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }
  .footer-bottom {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 20px 16px 24px !important;
    box-sizing: border-box !important;
  }
  .footer-curriculum-line {
    flex-wrap: wrap !important;
    font-size: 0.88rem !important;
  }
  .footer-book-art svg {
    max-width: 160px !important;
    height: auto !important;
  }
  .nap-text strong,
  .nap-text a {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
}