/*
Theme Name: Lilleshall Preschool
Version: 1.1.0
*/

:root {
  --primary-color: #E91E63;
  --secondary-color: #FF6B9D;
  --accent-color: #00BCD4;
  --success-color: #4CAF50;
  --warning-color: #FFC107;
  --purple-color: #9C27B0;
  --background: #FFF9F0;
  --card-background: #FFFFFF;
  --text-primary: #2C3E50;
  --text-muted: #7F8C8D;
  --font-heading: 'Fredoka', sans-serif;
  --font-body: 'Nunito', sans-serif;
  --border-radius: 1rem;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* 2026 homepage refresh */
.ls-hero{position:relative;overflow:hidden;background:#f4eee4;padding:clamp(3rem,7vw,7rem) 0 5rem}.ls-hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}.ls-hero-copy{position:relative;z-index:1}.eyebrow{margin:0 0 .75rem;color:#087f7a;font-size:.78rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.ls-hero h1{max-width:650px;margin:0 0 1.25rem;color:#173b52;font-size:clamp(2.6rem,6vw,5.3rem);letter-spacing:-.03em}.ls-lead{max-width:580px;margin:0 0 2rem;color:#385465;font-size:1.25rem}.ls-actions{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}.btn-soft{background:#fff;color:#173b52;border:2px solid #d5d8cf}.ls-hero-image{position:relative;transform:rotate(2deg);border:12px solid #fff;box-shadow:0 18px 45px #173b5230}.ls-hero-image img{width:100%;aspect-ratio:1.15;object-fit:cover}.ls-hero-note{position:absolute;right:-18px;bottom:18px;padding:.65rem 1rem;background:#f5c84b;color:#173b52;font-family:var(--font-heading);font-weight:700;transform:rotate(-5deg)}.ls-hero-watermark{position:absolute;right:4%;bottom:-11%;font-size:28rem;line-height:1;color:#087f7a0b;font-family:serif;transform:rotate(8deg)}.ls-trust{background:#173b52;color:#fff}.ls-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-top:1.3rem;padding-bottom:1.3rem}.ls-trust-grid div{display:flex;flex-direction:column;gap:.1rem;padding:.35rem 1rem;border-left:1px solid #ffffff38}.ls-trust-grid strong{font-family:var(--font-heading);font-size:1.3rem;color:#f5c84b}.ls-trust-grid span{font-size:.85rem;color:#e6eef0}.ls-narrow{max-width:760px}.ls-intro{padding-bottom:2rem}.ls-intro h2,.ls-section-heading h2,.ls-parent-grid h2,.ls-final-cta h2{margin:.2rem 0 1rem;color:#173b52;font-size:clamp(2rem,4vw,3.4rem)}.ls-intro p:last-child{font-size:1.2rem;color:#385465}.ls-benefits{background:#e8f2ef}.ls-section-heading{display:flex;justify-content:space-between;gap:2rem;align-items:end;margin-bottom:2rem}.text-link{font-weight:800;white-space:nowrap}.ls-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}.ls-card{padding:2rem;background:#fff;border-radius:1.1rem;box-shadow:0 8px 28px #173b5212}.ls-card h3{margin:.8rem 0 .5rem;color:#173b52;font-size:1.6rem}.ls-card p{color:#526a75}.ls-icon{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;font-size:1.5rem;font-weight:800}.ls-icon-teal{background:#c7e8e2;color:#087f7a}.ls-icon-yellow{background:#fbe7a5;color:#8c6500}.ls-icon-pink{background:#f8ced8;color:#a7345a}.ls-parent-promo{background:#f5c84b}.ls-parent-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.ls-parent-grid h2{max-width:560px}.ls-parent-grid p{max-width:570px}.ls-parent-list{display:flex;flex-direction:column;gap:.7rem}.ls-parent-list a{display:grid;grid-template-columns:3rem 1fr;column-gap:1rem;padding:1rem 1.2rem;background:#fff;color:#173b52;border-radius:.7rem}.ls-parent-list span{grid-row:span 2;color:#087f7a;font-family:var(--font-heading);font-size:1.3rem}.ls-parent-list strong{font-family:var(--font-heading);font-size:1.2rem}.ls-parent-list small{color:#60737a}.ls-image-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}.ls-image-grid figure{position:relative;margin:0;overflow:hidden;border-radius:1rem}.ls-image-grid img{width:100%;height:360px;object-fit:cover}.ls-image-grid figcaption{position:absolute;right:0;bottom:0;left:0;padding:1.4rem;color:#fff;font-family:var(--font-heading);font-size:1.4rem;background:linear-gradient(transparent,#173b52d9)}.ls-updates{background:#f4eee4}.ls-update-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}.ls-update{padding:1.5rem;background:#fff;border-top:4px solid #087f7a;border-radius:.8rem}.ls-update h3{margin:.3rem 0 .7rem;color:#173b52;font-size:1.45rem}.ls-update p{color:#526a75}.ls-date{color:#087f7a!important;font-size:.8rem;font-weight:800;text-transform:uppercase}.ls-final-cta{text-align:center;background:#173b52;color:#fff}.ls-final-cta h2{color:#fff}.ls-final-cta>div>p:not(.eyebrow){font-size:1.2rem;color:#dce8eb}.ls-final-cta .ls-actions{justify-content:center}.ls-final-cta .btn-outline-hero{color:#fff;border-color:#ffffff80}
@media (max-width:800px){.ls-hero-inner,.ls-parent-grid{grid-template-columns:1fr}.ls-hero{padding-top:3rem}.ls-hero-image{max-width:620px;margin:0 auto}.ls-trust-grid{grid-template-columns:repeat(2,1fr)}.ls-card-grid,.ls-update-grid{grid-template-columns:1fr}.ls-section-heading{display:block}.ls-section-heading .text-link{display:inline-block;margin-top:.4rem}.ls-image-grid{grid-template-columns:1fr}.ls-image-grid img{height:280px}.ls-hero-watermark{font-size:16rem;bottom:20%}.container{padding-right:1.25rem;padding-left:1.25rem}}
.ls-alert{background:#f5c84b;color:#173b52;font-size:.95rem}.ls-alert .container{display:flex;flex-wrap:wrap;gap:.35rem 1rem;align-items:center;padding-top:.7rem;padding-bottom:.7rem}.ls-alert-important{background:#f3a83b}.ls-alert-urgent{background:#b53652;color:#fff}.ls-alert a{font-weight:800;color:inherit;text-decoration:underline}.ls-page-hero{padding:4rem 0;background:#e8f2ef}.ls-page-hero h1{margin:.2rem 0 .7rem;color:#173b52;font-size:clamp(2.7rem,6vw,4.5rem)}.ls-page-hero p:last-child{font-size:1.2rem;color:#385465}.ls-newsletter{display:flex;justify-content:space-between;gap:2rem;align-items:center;padding:2rem;background:#f5c84b;border-radius:1rem}.ls-newsletter h3{margin:.2rem 0 .4rem;color:#173b52}.ls-documents{background:#f4eee4}.ls-doc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}.ls-doc-category{padding:1.5rem;background:#fff;border-radius:1rem}.ls-doc-category h3{margin:0 0 .3rem;color:#173b52;font-size:1.45rem}.ls-doc-category>p{margin:0 0 1rem;color:#60737a}.ls-doc-link{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-top:1px solid #dfe7e4;color:#173b52}.ls-doc-link b{color:#087f7a;white-space:nowrap}.ls-none{font-size:.9rem;font-style:italic}.ls-empty-panel{padding:2rem;background:#e8f2ef;border-radius:1rem}.ls-quick-links{background:#fff}.ls-quick-links .ls-card{display:block}.ls-update-admin-links{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.5rem 0}.ls-update-admin-links .button{margin:0}.ls-newsletter-list{max-width:900px}
@media (max-width:800px){.ls-trust-grid{gap:.4rem}.ls-trust-grid div{padding:.35rem .6rem}.ls-newsletter{display:block}.ls-newsletter .btn{margin-top:1rem}.ls-doc-grid{grid-template-columns:1fr}}

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

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background-color: var(--background);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--primary-color);
}

h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.5rem; }

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover {
  color: var(--secondary-color);
}

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

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ===========================
   Buttons
   =========================== */

.btn {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: var(--border-radius);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  text-decoration: none;
}

.btn-large {
  padding: 1.2rem 2.5rem;
  font-size: 1.2rem;
}

.btn-primary {
  background-color: var(--primary-color);
  color: white;
}

.btn-primary:hover {
  background-color: var(--secondary-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  background-color: var(--accent-color);
  color: white;
}

.btn-secondary:hover {
  background-color: #0097A7;
  transform: translateY(-2px);
}

.btn-outline {
  background-color: transparent;
  color: var(--text-primary);
  border: 2px solid var(--text-primary);
}

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

/* ===========================
   Navigation with WORKING Dropdown
   =========================== */

.site-header {
  background-color: white;
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 1rem 0;
}

.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-logo {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-color);
}

.site-logo img {
  max-height: 80px;
  width: auto;
}

.main-navigation ul {
  display: flex;
  list-style: none;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.main-navigation li {
  position: relative;
  list-style: none;
}

.main-navigation > ul > li > a {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--text-primary);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  display: block;
}

.main-navigation > ul > li > a:hover,
.main-navigation > ul > li.current-menu-item > a {
  background-color: var(--primary-color);
  color: white;
}

/* Dropdown arrow indicator */
.main-navigation .menu-item-has-children > a::after {
  content: ' ▾';
  font-size: 0.75em;
  margin-left: 0.25rem;
}

/* Dropdown submenu */
.main-navigation ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  border-radius: 0.5rem;
  min-width: 220px;
  padding: 0.5rem 0;
  margin-top: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
  display: block !important;
}

/* Show dropdown on hover */
.main-navigation li:hover > ul.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.main-navigation ul ul li {
  width: 100%;
  display: block;
}

.main-navigation ul ul a {
  padding: 0.75rem 1.5rem;
  display: block;
  color: var(--text-primary);
  white-space: nowrap;
  border-radius: 0;
}

.main-navigation ul ul a:hover {
  background-color: rgba(233, 30, 99, 0.1);
  color: var(--primary-color);
}

/* ===========================
   Kid-Friendly Hero Section with Animated Blobs
   =========================== */

/* Remove any text shadows */
.modern-hero,
.modern-hero * {
  text-shadow: none !important;
}

/* Fun colorful gradient background */
.modern-hero {
  position: relative;
  background: linear-gradient(135deg, #FF6B9D 0%, #E91E63 50%, #9C27B0 100%);
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
    linear-gradient(135deg, #FF6B9D 0%, #E91E63 50%, #9C27B0 100%);
  padding: 0;
  overflow: hidden;
  min-height: 85vh;
}

/* Animated colorful blob 1 */
.modern-hero::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  background: #FFE066;
  border-radius: 50%;
  top: -200px;
  right: -150px;
  opacity: 0.15;
  animation: float-blob 20s ease-in-out infinite;
  z-index: 0;
}

/* Animated colorful blob 2 */
.modern-hero::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: #80E0E0;
  border-radius: 50%;
  bottom: -150px;
  left: -100px;
  opacity: 0.15;
  animation: float-blob 20s ease-in-out infinite 5s;
  z-index: 0;
}

/* Blob floating animation */
@keyframes float-blob {
  0%, 100% { 
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  25% { 
    transform: translate(50px, -50px) scale(1.1) rotate(90deg);
  }
  50% { 
    transform: translate(-30px, 30px) scale(0.9) rotate(180deg);
  }
  75% { 
    transform: translate(30px, 50px) scale(1.05) rotate(270deg);
  }
}

.hero-content-wrapper {
  position: relative;
  z-index: 1;
  padding: 6rem 0 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 85vh;
}

/* Additional fun blobs in content wrapper */
.hero-content-wrapper::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: #FFC107;
  border-radius: 50%;
  top: 50%;
  left: 10%;
  opacity: 0.12;
  animation: float-blob 15s ease-in-out infinite 3s;
  z-index: 0;
}

.hero-content-wrapper::after {
  content: '';
  position: absolute;
  width: 450px;
  height: 450px;
  background: #4CAF50;
  border-radius: 50%;
  top: 20%;
  right: 15%;
  opacity: 0.12;
  animation: float-blob 15s ease-in-out infinite 7s;
  z-index: 0;
}

.hero-content {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  animation: fadeInUp 1s ease-out;
  position: relative;
  z-index: 2;
}

/* Fun sparkles around the content */
.hero-content::before {
  content: '✨';
  position: absolute;
  top: -30px;
  right: 10%;
  font-size: 3rem;
  opacity: 0.7;
  animation: twinkle 3s ease-in-out infinite;
}

.hero-content::after {
  content: '🌈';
  position: absolute;
  bottom: 20px;
  left: 5%;
  font-size: 3rem;
  opacity: 0.7;
  animation: twinkle 3s ease-in-out infinite 1.5s;
}

@keyframes twinkle {
  0%, 100% { 
    opacity: 0.7;
    transform: scale(1) rotate(0deg);
  }
  50% { 
    opacity: 1;
    transform: scale(1.2) rotate(15deg);
  }
}

/* Playful badge with glassmorphism */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  font-family: var(--font-heading);
  font-weight: 700;
  color: white;
  margin-bottom: 2rem;
  font-size: 1.1rem;
  animation: bounce-gentle 3s ease-in-out infinite;
}

.badge-icon {
  font-size: 1.5rem;
  animation: spin-gentle 4s linear infinite;
}

@keyframes bounce-gentle {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes spin-gentle {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* White text styling - fun and playful! */
.hero-title {
  font-size: 4.5rem;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  color: white;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  animation: fadeInUp 1s ease-out 0.2s both;
  font-weight: 800;
}

/* Light/white gradient for preschool name */
.gradient-text {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFE5EC 50%, #FFFFFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  font-weight: 900;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.2));
}

/* White subtitle text - fun and readable! */
.hero-subtitle {
  font-size: 1.4rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 3rem;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  animation: fadeInUp 1s ease-out 0.4s both;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  font-weight: 500;
  text-align: center;
}

/* Hide info cards - keeping it simple and fun! */
.hero-info-cards {
  display: none !important;
  visibility: hidden;
  height: 0;
  margin: 0;
  padding: 0;
}

.info-card {
  display: none !important;
  visibility: hidden;
  opacity: 0;
}

.info-number,
.info-label {
  display: none !important;
}

/* Hide buttons - clean and simple! */
.hero-buttons {
  display: none !important;
  visibility: hidden;
  height: 0;
  margin: 0;
  padding: 0;
}

.btn-hero,
.btn-outline-hero,
.btn-icon,
.btn-arrow {
  display: none !important;
}

/* Crayon Wave Divider */
.hero-wave-divider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  z-index: 1;
  overflow: hidden;
}

.wave-svg {
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 100%;
}

.wave-path {
  filter: url(#crayon-texture);
}

.wave-pink {
  animation: wave-animate 15s ease-in-out infinite;
  transform-origin: center;
}

.wave-yellow {
  animation: wave-animate 18s ease-in-out infinite reverse;
  transform-origin: center;
}

.wave-cyan {
  animation: wave-animate 20s ease-in-out infinite;
  transform-origin: center;
}

@keyframes wave-animate {
  0%, 100% {
    d: path("M0,160 Q360,100 720,160 T1440,160 L1440,320 L0,320 Z");
  }
  50% {
    d: path("M0,140 Q360,120 720,140 T1440,140 L1440,320 L0,320 Z");
  }
}

/* Alternative crayon-style wave with texture */
@keyframes wave-shift {
  0% { transform: translateX(0) scaleX(1); }
  50% { transform: translateX(-30px) scaleX(1.02); }
  100% { transform: translateX(0) scaleX(1); }
}

.wave-pink {
  animation: wave-shift 12s ease-in-out infinite;
}

.wave-yellow {
  animation: wave-shift 15s ease-in-out infinite 0.5s;
}

.wave-cyan {
  animation: wave-shift 18s ease-in-out infinite 1s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===========================
   Sections
   =========================== */

.section {
  padding: 4rem 0;
}

.section-title {
  text-align: center;
  margin-bottom: 3rem;
  font-size: 3rem;
}

/* ===========================
   Cards
   =========================== */

.card {
  background: var(--card-background);
  border-radius: var(--border-radius);
  padding: 2rem;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* ===========================
   Team Members
   =========================== */

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

.team-member-photo {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1.5rem;
  border: 5px solid var(--primary-color);
}

.team-member-name {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.team-member-role {
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 1rem;
}

/* ===========================
   Footer
   =========================== */

.site-footer {
  background-color: var(--text-primary);
  color: white;
  padding: 3rem 0 1rem;
}

/* ===========================
   Card Grid System
   =========================== */

.card-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.card-grid-2 {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, 1fr);
}

.card-grid-3 {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(3, 1fr);
}

.card-grid-4 {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(4, 1fr);
}

/* ===========================
   Back to Top Button
   =========================== */

#back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

#back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#back-to-top:hover {
  background: var(--secondary-color);
  transform: translateY(-3px);
}

#back-to-top:active {
  transform: translateY(0);
}

/* ===========================
   Facebook Feed Responsive
   =========================== */

.fb-page,
.fb-page span,
.fb-page iframe {
  max-width: 100% !important;
}

.fb-page iframe {
  width: 100% !important;
}

/* ===========================
   Mobile Accordion
   =========================== */

/* Hide accordion on desktop, show cards */
.mobile-accordion {
  display: none;
}

.desktop-grid {
  display: block;
}

.accordion-item {
  width: 100%;
  background: white;
  border: none;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.accordion-item:hover {
  box-shadow: var(--shadow-lg);
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.5rem;
  background: white;
  transition: background 0.3s ease;
  width: 100%;
}

.accordion-item.active .accordion-header {
  background: rgba(233, 30, 99, 0.05);
}

.accordion-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.accordion-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.accordion-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--primary-color);
  margin: 0;
}

.accordion-toggle {
  font-size: 2rem;
  font-weight: 300;
  color: var(--primary-color);
  flex-shrink: 0;
  transition: transform 0.3s ease;
  line-height: 1;
}

.accordion-item.active .accordion-toggle {
  transform: rotate(45deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0 1.5rem;
}

.accordion-item.active .accordion-content {
  max-height: 600px;
  padding: 0 1.5rem 1.5rem 1.5rem;
}

.accordion-content p {
  margin: 0;
  line-height: 1.8;
  font-size: 1rem;
}

.accordion-content a {
  color: var(--primary-color);
  text-decoration: none;
}

.accordion-content a:hover {
  text-decoration: underline;
}

/* ===========================
   Responsive Adjustments
   =========================== */

@media (max-width: 1024px) {
  .card-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .card-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .hero-content {
    padding: 0 2rem;
  }
  
  .hero-title {
    font-size: 3.5rem;
  }
  
  .hero-info-cards {
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .card-grid,
  .card-grid-2,
  .card-grid-3,
  .card-grid-4 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  #back-to-top {
    width: 45px;
    height: 45px;
    bottom: 20px;
    right: 20px;
    font-size: 1.3rem;
  }
  
  /* Show accordion, hide desktop grid on mobile */
  .mobile-accordion {
    display: block !important;
  }
  
  .desktop-grid {
    display: none !important;
  }
  margin-top: 4rem;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 3rem;
  margin-bottom: 2rem;
}

.footer-section h3 {
  color: white;
  margin-bottom: 1rem;
}

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
}

/* ===========================
   Animations
   =========================== */

@keyframes bounce-slow {
  0%, 100% {
    transform: translateY(0) rotate(-25deg);
  }
  50% {
    transform: translateY(-10px) rotate(-25deg);
  }
}

.animate-bounce-slow {
  animation: bounce-slow 3s ease-in-out infinite;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.8s ease-out;
}

/* ===========================
   Circled Header
   =========================== */

.circled-header-wrapper {
  display: block;
  position: relative;
  margin: 2rem 0;
  text-align: inherit;
  overflow: visible !important;
}

.circled-header {
  position: relative;
  display: inline-block;
  padding: 0.5rem 1.5rem;
  z-index: 1;
}

.circle-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110%;
  height: 180%;
  min-height: 100px;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.circle-animation {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 0.3s linear;
  vector-effect: non-scaling-stroke;
  paint-order: stroke fill markers;
}

.circled-header.draw-forward .circle-animation {
  stroke-dashoffset: 0;
}

.circled-header.draw-backward .circle-animation {
  stroke-dashoffset: 1000;
}

/* ===========================
   Mobile Menu
   =========================== */

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 0.3rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1001;
}

.mobile-menu-toggle span {
  width: 25px;
  height: 3px;
  background-color: var(--primary-color);
  transition: all 0.3s ease;
}

/* ===========================
   Utility Classes
   =========================== */

.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

/* ===========================
   Crayon Scribble Background
   =========================== */

.crayon-scribble-section {
  position: relative;
  background-image: url('../assets/images/crayon-scribbles.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.crayon-scribble-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.85);
  z-index: 0;
}

.crayon-scribble-section .container {
  position: relative;
  z-index: 1;
}

.crayon-divider {
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.15));
}

/* ===========================
   Scroll Reveal
   =========================== */

.section,
.circled-header-wrapper,
.card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Exclude hero elements from scroll reveal */
.modern-hero,
.modern-hero .info-card,
.modern-hero * {
  opacity: 1 !important;
  transform: none !important;
}

.section.revealed,
.circled-header-wrapper.revealed,
.card.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================
   Responsive Design
   =========================== */

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: flex;
  }
  
  .main-navigation {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background: white;
    box-shadow: -4px 0 10px rgba(0,0,0,0.1);
    padding: 5rem 2rem 2rem;
    transition: right 0.3s ease;
    z-index: 1000;
  }
  
  .main-navigation.active {
    right: 0;
  }
  
  .main-navigation ul {
    flex-direction: column;
    gap: 0;
  }
  
  .main-navigation li {
    width: 100%;
  }
  
  .main-navigation > ul > li > a {
    padding: 1rem;
  }
  
  .main-navigation ul ul {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    padding: 0 0 0 1rem;
    margin: 0.5rem 0 0 0;
    background: rgba(233, 30, 99, 0.05);
    border-radius: 0.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  
  .main-navigation li.dropdown-open > ul.sub-menu {
    max-height: 500px;
    padding: 0.5rem 0 0.5rem 1rem;
  }
  
  .mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  
  .mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  
  .mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
  }
  
  body.menu-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }
  
  /* Updated Hero Responsive Styles */
  .modern-hero {
    min-height: 75vh;
  }
  
  .hero-content-wrapper {
    padding: 4rem 1.5rem 10rem;
    min-height: 75vh;
  }
  
  .hero-title {
    font-size: 2.8rem;
  }
  
  .hero-subtitle {
    font-size: 1.2rem;
    padding: 0 1rem;
  }
  
  .hero-badge {
    font-size: 1rem;
    padding: 0.6rem 1.5rem;
  }
  
  /* Smaller blobs on mobile */
  .modern-hero::before {
    width: 400px;
    height: 400px;
  }
  
  .modern-hero::after {
    width: 350px;
    height: 350px;
  }
  
  .hero-content-wrapper::before,
  .hero-content-wrapper::after {
    width: 250px;
    height: 250px;
  }
  
  .hero-content::before,
  .hero-content::after {
    font-size: 2rem;
  }
  
  .hero-wave-divider {
    height: 150px;
  }
  
  h1 { font-size: 2rem; }
  h2 { font-size: 1.8rem; }
  
  .container {
    padding: 0 1rem;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 2.2rem;
  }
  
  .hero-subtitle {
    font-size: 1.1rem;
  }
  
  .hero-wave-divider {
    height: 120px;
  }
}

/* Homepage redesign v2 — deliberately placed after legacy theme styles. */
:root{--ls2-ink:#173b4b;--ls2-sage:#779784;--ls2-pale:#e8efe8;--ls2-cream:#f7f2e9;--ls2-coral:#d98072;--ls2-gold:#dba650;--ls2-line:#d9ded6}.ls2-home{background:#fff;color:var(--ls2-ink);font-family:var(--font-body)}.ls2-home h1,.ls2-home h2,.ls2-home h3{color:var(--ls2-ink);font-family:var(--font-heading)}.ls2-home a{text-decoration:none}.ls2-home .container{max-width:1200px}.ls2-kicker{display:flex;align-items:center;gap:.6rem;margin:0 0 1.15rem;color:#597466;font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.ls2-kicker span{display:inline-block;width:1.8rem;height:1px;background:var(--ls2-coral)}.ls2-hero{position:relative;overflow:hidden;background:var(--ls2-cream);padding:clamp(4.5rem,9vw,8.5rem) 0 clamp(4rem,7vw,6rem)}.ls2-hero:after{position:absolute;right:-6rem;bottom:-8rem;width:32rem;height:32rem;border:1px solid #d9cbb9;border-radius:50%;content:""}.ls2-hero-grid{display:grid;grid-template-columns:1.03fr .97fr;gap:clamp(3rem,8vw,9rem);align-items:center}.ls2-hero-copy{position:relative;z-index:2}.ls2-hero h1{margin:0;color:var(--ls2-ink);font-size:clamp(3.3rem,6.1vw,6rem);letter-spacing:-.055em;line-height:.95}.ls2-hero h1 em{color:var(--ls2-sage);font-style:normal}.ls2-lead{max-width:540px;margin:1.7rem 0 2rem;color:#4f6370;font-size:1.2rem;line-height:1.7}.ls2-actions{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center}.ls2-button{display:inline-flex;gap:.9rem;align-items:center;justify-content:center;border:1px solid transparent;border-radius:0;padding:.95rem 1.25rem;font-family:var(--font-heading);font-size:1rem;font-weight:700;transition:transform .2s ease,background .2s ease}.ls2-button:hover{transform:translateY(-2px)}.ls2-button b{font-size:1.35rem;line-height:.8}.ls2-button-primary{background:var(--ls2-coral);color:#fff}.ls2-button-link{padding-right:0;color:var(--ls2-ink)}.ls2-button-link strong{border-bottom:1px solid currentColor}.ls2-ofsted{display:flex;gap:.8rem;align-items:center;margin-top:3rem;color:#50636d;font-size:.9rem}.ls2-ofsted span{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--ls2-gold);color:#fff}.ls2-ofsted p{margin:0;line-height:1.35}.ls2-ofsted strong{color:var(--ls2-ink)}.ls2-hero-art{position:relative;z-index:1}.ls2-photo-frame{position:relative;z-index:2;overflow:hidden;border-radius:48% 48% 1.4rem 1.4rem}.ls2-photo-frame:after{position:absolute;inset:0;background:linear-gradient(160deg,transparent 60%,#173b4b29);content:""}.ls2-photo-frame img{width:100%;height:560px;object-fit:cover}.ls2-photo-tag{position:absolute;z-index:3;right:-1rem;bottom:2rem;padding:.95rem 1.1rem;background:#fff;color:var(--ls2-ink);box-shadow:0 12px 25px #173b4b1c;font-family:var(--font-heading);font-weight:700;transform:rotate(-4deg)}.ls2-photo-tag span{color:var(--ls2-coral)}.ls2-monument{position:absolute;z-index:1;right:-2.2rem;top:-2.2rem;width:9.5rem;height:17rem;border:2px solid #d6c5a8;clip-path:polygon(50% 0,76% 13%,76% 93%,100% 100%,0 100%,24% 93%,24% 13%);opacity:.75}.ls2-monument i{position:absolute;top:23%;bottom:7%;left:49%;border-left:1px solid #d6c5a8}.ls2-stat-strip{background:var(--ls2-ink);color:#fff}.ls2-stat-strip .container{display:grid;grid-template-columns:repeat(3,1fr)}.ls2-stat-strip div{display:flex;flex-direction:column;gap:.15rem;padding:1.7rem 2.2rem;border-left:1px solid #ffffff24}.ls2-stat-strip div:first-child{border:0}.ls2-stat-strip strong{color:#f1c778;font-family:var(--font-heading);font-size:1.35rem}.ls2-stat-strip span{font-size:.88rem;color:#d7e2e1}.ls2-welcome{padding:clamp(5rem,9vw,8.5rem) 0}.ls2-welcome-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(3rem,8vw,9rem)}.ls2-welcome h2,.ls2-section-intro h2,.ls2-spaces h2,.ls2-updates h2{max-width:650px;margin:0;font-size:clamp(2.3rem,4vw,4rem);line-height:1.07;letter-spacing:-.035em}.ls2-welcome-grid>div:last-child{padding-top:3.1rem}.ls2-welcome-grid>div:last-child>p{margin:0 0 1.5rem;color:#50636d;font-size:1.15rem;line-height:1.75}.ls2-inline-link{display:inline-flex;gap:.75rem;align-items:center;color:var(--ls2-ink);font-family:var(--font-heading);font-weight:700;border-bottom:1px solid var(--ls2-ink)}.ls2-inline-link b{font-size:1.2rem}.ls2-pillars{padding:clamp(4.5rem,7vw,7rem) 0;background:var(--ls2-pale)}.ls2-section-intro{margin-bottom:3rem}.ls2-pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.ls2-pillar-grid article{position:relative;min-height:300px;padding:2rem 2.4rem 1.5rem;border-left:1px solid #a9bbae}.ls2-pillar-grid article:first-child{border-left:0}.ls2-pillar-number{position:absolute;top:1rem;right:1.5rem;color:#91a99b;font-family:var(--font-heading);font-weight:700}.ls2-pillar-icon{display:grid;place-items:center;width:3rem;height:3rem;margin:1rem 0 1.6rem;border-radius:50%;background:#fff;color:var(--ls2-coral);font-size:1.5rem}.ls2-pillar-grid h3{margin:0 0 .7rem;font-size:1.7rem}.ls2-pillar-grid p{max-width:300px;margin:0;color:#4e6862;line-height:1.7}.ls2-parent{padding:clamp(5rem,9vw,9rem) 0;background:var(--ls2-cream)}.ls2-parent-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(3rem,8vw,9rem);align-items:center}.ls2-parent-image{overflow:hidden;border-radius:0 7rem 0 0}.ls2-parent-image img{width:100%;height:520px;object-fit:cover}.ls2-parent h2{max-width:600px;margin:0 0 1.1rem;font-size:clamp(2.3rem,4vw,4rem);line-height:1.05;letter-spacing:-.035em}.ls2-parent-copy>p:not(.ls2-kicker){max-width:560px;margin-bottom:1.5rem;color:#526570;font-size:1.12rem;line-height:1.7}.ls2-parent ul{margin:0 0 2rem;padding:0;list-style:none}.ls2-parent li{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:.8rem 0;border-top:1px solid #d8d1c4;color:#62717a}.ls2-parent li:last-child{border-bottom:1px solid #d8d1c4}.ls2-parent li b{color:var(--ls2-ink);font-family:var(--font-heading)}.ls2-button-dark{background:var(--ls2-ink);color:#fff}.ls2-spaces{padding:clamp(5rem,9vw,8rem) 0}.ls2-spaces-heading{display:flex;justify-content:space-between;gap:3rem;align-items:end;margin-bottom:2.5rem}.ls2-spaces-heading>p{max-width:390px;margin:0;color:#526570;line-height:1.7}.ls2-gallery{display:grid;grid-template-columns:1.18fr .82fr;gap:1.3rem}.ls2-gallery figure{position:relative;overflow:hidden;min-height:370px;margin:0}.ls2-gallery-main{border-radius:7rem 0 0 0}.ls2-gallery figure:not(.ls2-gallery-main){border-radius:0 0 5rem 0}.ls2-gallery img{width:100%;height:100%;min-height:370px;object-fit:cover}.ls2-gallery figcaption{position:absolute;right:0;bottom:0;left:0;display:flex;flex-direction:column;gap:.15rem;padding:3rem 1.7rem 1.5rem;background:linear-gradient(transparent,#173b4bcf);color:#fff}.ls2-gallery figcaption b{font-family:var(--font-heading);font-size:1.35rem}.ls2-gallery figcaption span{font-size:.9rem}.ls2-updates{padding:clamp(5rem,9vw,8rem) 0;background:var(--ls2-pale)}.ls2-updates-top{display:flex;justify-content:space-between;gap:2rem;align-items:end;margin-bottom:2.5rem}.ls2-update-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.ls2-update-list article{display:grid;grid-template-columns:1fr auto;align-content:start;gap:.4rem 1rem;min-height:180px;padding:1.35rem 1.5rem;background:#fff}.ls2-update-list p{grid-column:1/-1;margin:0;color:#71877a;font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.ls2-update-list h3{margin:0;font-size:1.28rem;line-height:1.25}.ls2-update-list h3 a{color:var(--ls2-ink)}.ls2-update-list article>a{align-self:end;color:var(--ls2-coral);font-size:1.8rem}.ls2-cta{padding:clamp(5.5rem,10vw,9rem) 0;background:var(--ls2-coral);color:#fff;text-align:center}.ls2-cta .ls2-kicker{justify-content:center;color:#fff}.ls2-cta .ls2-kicker span{background:#fff}.ls2-cta h2{margin:0;color:#fff;font-size:clamp(3rem,5vw,5rem);letter-spacing:-.05em}.ls2-cta>div>p:not(.ls2-kicker){margin:1rem auto 2rem;color:#fff;opacity:.9;font-size:1.2rem}.ls2-cta>div>div{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;align-items:center}.ls2-button-light{background:#fff;color:var(--ls2-ink)}.ls2-phone{color:#fff;font-family:var(--font-heading);font-weight:700;border-bottom:1px solid #ffffff80}
@media(max-width:800px){.ls2-hero-grid,.ls2-welcome-grid,.ls2-parent-grid{grid-template-columns:1fr}.ls2-hero{padding-top:4rem}.ls2-photo-frame{max-width:540px;margin:0 auto}.ls2-photo-frame img{height:420px}.ls2-stat-strip .container{grid-template-columns:1fr}.ls2-stat-strip div{border-top:1px solid #ffffff24;border-left:0}.ls2-stat-strip div:first-child{border-top:0}.ls2-welcome-grid>div:last-child{padding-top:0}.ls2-pillar-grid,.ls2-update-list{grid-template-columns:1fr}.ls2-pillar-grid article{min-height:0;padding:1.7rem 0;border-top:1px solid #a9bbae;border-left:0}.ls2-pillar-grid article:first-child{border-top:0}.ls2-spaces-heading,.ls2-updates-top{display:block}.ls2-spaces-heading>p,.ls2-updates-top>a{display:block;margin-top:1.25rem}.ls2-gallery{grid-template-columns:1fr}.ls2-gallery-main,.ls2-gallery figure:not(.ls2-gallery-main){min-height:320px;border-radius:0 4rem 0 0}.ls2-gallery img{min-height:320px}.ls2-parent li{grid-template-columns:1fr}.ls2-parent li span{font-size:.9rem}}
.site-header{padding:.8rem 0;background:#fff;box-shadow:none;border-bottom:1px solid #e5e7e1}.site-header .site-logo{color:var(--ls2-ink);font-size:1.45rem}.site-header .site-logo img{max-height:60px}.main-navigation>ul>li>a{color:var(--ls2-ink);font-family:var(--font-body);font-size:.95rem;font-weight:700}.main-navigation>ul>li>a:hover,.main-navigation>ul>li.current-menu-item>a{background:transparent;color:var(--ls2-coral)}.main-navigation>ul>li:last-child>a{padding:.72rem 1rem;background:var(--ls2-ink);color:#fff}.main-navigation>ul>li:last-child>a:hover{background:var(--ls2-coral);color:#fff}