/* Layout fixes and small compatibility overrides. */
.eyebrow { margin: 0 0 .35rem; }

/* The original offset can collide with the heading at intermediate widths. */
.intro-grid {
  margin-top: 0;
  padding-top: .25rem;
}

.value-cards { grid-template-columns: repeat(4, 1fr); }
.school-features { background: #fffaf1; }
.feature-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 3rem; background: var(--line); border: 1px solid var(--line); }
.feature-list article { background: #fffaf1; padding: 1.65rem; transition: background .25s ease, transform .25s ease; }
.feature-list article:hover { background: #f7f1e5; transform: translateY(-4px); }
.feature-list span { color: #d86f5d; font-size: 1.3rem; }.feature-list h3 { font: 600 1.12rem Fraunces, serif; letter-spacing: -.02em; margin: .8rem 0 .4rem; }.feature-list p { margin: 0; color: var(--muted); font-size: .84rem; }

.brand { font-size: 1.3rem; }
.logo-img { width: 43px; height: 43px; flex: 0 0 auto; }
.header-actions { display: flex; align-items: center; gap: .85rem; }.top-socials { display: flex; align-items: center; gap: .25rem; }.top-socials a { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font: 700 1rem/1 "DM Sans"; transition: background .2s ease, color .2s ease; }.top-socials a:hover { background: var(--ink); color: #fff; }.top-visit { padding: .68rem 1rem; font-size: .79rem; box-shadow: none; }
.location { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; background: #f7f1e5; }
.location > div > p:not(.eyebrow) { max-width: 430px; color: var(--muted); }
.location-details { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 1.5rem; margin: 1.8rem 0; font-size: .88rem; }
.location-details span { color: var(--muted); }.location-details b { font-weight: 700; }
.map-card { background: #b8dce0; padding: 1.2rem; border-radius: 3px; }
.map-link { display: block; height: 240px; position: relative; overflow: hidden; background: #dcecd2; color: var(--ink); }
.map-link:before,.map-link:after { content: ""; position: absolute; background: #f9f2df; transform: rotate(-25deg); border-radius: 99px; }.map-link:before { width: 450px; height: 30px; left: -45px; top: 78px; }.map-link:after { width: 390px; height: 26px; right: -95px; bottom: 45px; transform: rotate(34deg); }
.map-road { position: absolute; z-index: 1; background: #f9f2df; border-radius: 99px; }.road-one { width: 35px; height: 380px; left: 47%; top: -80px; transform: rotate(20deg); }.road-two { width: 280px; height: 22px; left: -16px; bottom: 64px; transform: rotate(-12deg); }.road-three { width: 250px; height: 19px; right: -30px; top: 36px; transform: rotate(12deg); }
.map-pin { position: absolute; z-index: 2; left: 48%; top: 92px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50% 50% 50% 0; background: var(--coral); color: white; font-size: 20px; transform: rotate(-45deg); }.map-pin::first-letter { transform: rotate(45deg); }
.map-link b { position: absolute; z-index: 3; left: calc(48% + 53px); top: 98px; font: 600 1rem/1.05 Fraunces, serif; }
.qr-row { display: flex; align-items: center; gap: 1.1rem; padding: 1rem .4rem 0; }.qr-row img { width: 82px; height: 82px; background: white; padding: 4px; }.qr-row p { margin: 0; font-size: .83rem; color: var(--ink); }.qr-row b { font-size: .95rem; }
.footer-button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }.footer-button:hover { text-decoration: underline; }
.policy-dialog { width: min(680px, calc(100% - 2rem)); max-height: min(700px, calc(100% - 2rem)); overflow-y: auto; padding: 2rem; color: var(--ink); border: 0; border-radius: 5px; box-shadow: 0 18px 55px rgba(0,0,0,.28); }.policy-dialog::backdrop { background: rgba(19, 42, 44, .62); }.dialog-top { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }.dialog-top h2 { font-size: 2.2rem; margin: 0; }.close-dialog { border: 0; background: var(--paper); font-size: 2rem; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; color: var(--ink); }.policy-dialog h3 { font: 600 1.2rem Fraunces, serif; margin: 1.5rem 0 .4rem; }.policy-dialog p { font-size: .9rem; }.policy-dialog a { text-decoration: underline; }
@media(max-width:800px) { .location { grid-template-columns: 1fr; gap: 2.5rem; } .brand { font-size: 1.15rem; } .logo-img { width: 38px; height: 38px; } .value-cards, .feature-list { grid-template-columns: repeat(2, 1fr); } .header-actions { margin-left: auto; order: 2; } .menu-button { order: 3; } .top-socials { display: none; } .top-visit { padding: .6rem .78rem; font-size: .72rem; } }
@media(max-width:480px) { .value-cards, .feature-list { grid-template-columns: 1fr; } }

/* Gentle motion makes the page feel warm without distracting from the content. */
.hero-art .sun { animation: sunshine 5s ease-in-out infinite; }
.hero-art .cloud-one { animation: drift-one 12s ease-in-out infinite; }
.hero-art .cloud-two { animation: drift-two 15s ease-in-out infinite; }
.hero-art .kid-one { animation: wave 3.8s ease-in-out infinite; transform-origin: bottom center; }
.hero-art .kid-two { animation: bounce 3.2s ease-in-out infinite; transform-origin: bottom center; }
.brand:hover .logo-img { animation: logo-wiggle .7s ease-in-out; }
.value-cards article, .programme-card, .parent-features article { transition: transform .25s ease, box-shadow .25s ease; }
.value-cards article:hover, .programme-card:hover { transform: translateY(-7px) rotate(-.35deg); box-shadow: 0 13px 20px rgba(37,68,72,.12); }
.parent-features article:hover { transform: translateX(7px); }
.map-pin { animation: pin-pulse 2.3s ease-out infinite; }
html.has-js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
html.has-js .reveal.visible { opacity: 1; transform: translateY(0); }
html.has-js .programme-card:nth-child(2), html.has-js .value-cards article:nth-child(2) { transition-delay: .11s; }
html.has-js .programme-card:nth-child(3), html.has-js .value-cards article:nth-child(3) { transition-delay: .22s; }
html.has-js .programme-card:nth-child(4) { transition-delay: .33s; }
@keyframes sunshine { 50% { transform: scale(1.08) rotate(8deg); } }
@keyframes drift-one { 50% { transform: translateX(24px); } }
@keyframes drift-two { 50% { transform: translateX(-20px) scale(.7); } }
@keyframes wave { 50% { transform: scale(.86) rotate(4deg); } }
@keyframes bounce { 50% { transform: translateY(-9px); } }
@keyframes logo-wiggle { 25% { transform: rotate(-10deg) scale(1.08); } 65% { transform: rotate(8deg) scale(1.04); } }
@keyframes pin-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(243,141,121,.48); } 60% { box-shadow: 0 0 0 14px rgba(243,141,121,0); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } html.has-js .reveal { opacity: 1; transform: none; } }

/* A brighter, joyful palette for a preschool audience. */
.hero { position: relative; overflow: hidden; background: linear-gradient(125deg, #fff3de 0%, #fffaf1 48%, #e5f5ef 100%); border-radius: 0 0 42px 42px; }
.hero::before, .hero::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }.hero::before { width: 140px; height: 140px; background: #f8db7c; opacity: .38; left: 46%; top: -83px; }.hero::after { width: 105px; height: 105px; background: #f5a896; opacity: .28; left: 8%; bottom: -48px; }
.hero-copy, .hero-art { position: relative; z-index: 1; }.hero-art { box-shadow: 14px 16px 0 #f8cf7a, 22px 26px 0 rgba(244,141,121,.32); }
.intro { background: linear-gradient(145deg, #fff8ee 0%, #f5e9d2 100%); }
.value-cards article:nth-child(1) { background: #fbd0c3; }.value-cards article:nth-child(2) { background: #f9e49e; }.value-cards article:nth-child(3) { background: #c9e9ee; }.value-cards article:nth-child(4) { background: #c9e1ba; }
.value-cards article { border-radius: 18px; }.value-cards .card-icon { background: rgba(255,255,255,.62); }
.school-features { background: linear-gradient(160deg, #fffdf8 0%, #f2f7df 100%); }.feature-list { border-radius: 18px; overflow: hidden; }.feature-list article:nth-child(3n+1) { background: #fff4e3; }.feature-list article:nth-child(3n+2) { background: #e4f4f3; }.feature-list article:nth-child(3n) { background: #f8e6ec; }.feature-list article:hover { filter: saturate(1.12) brightness(.98); }
.programmes { background: linear-gradient(180deg, #e7f5f5 0%, #fffaf1 100%); }.programme-card { border-radius: 20px; box-shadow: 0 6px 0 rgba(37,68,72,.08); }
.day { position: relative; overflow: hidden; background: linear-gradient(115deg, #1d4b50 0%, #285e63 56%, #37636a 100%); }.day::after { content: ""; width: 420px; height: 420px; border-radius: 50%; background: rgba(247,202,89,.12); position: absolute; right: -220px; top: -210px; }.day > * { position: relative; z-index: 1; }
.parents { background: linear-gradient(120deg, #f9d3c8 0%, #fff2d9 100%); }.parents h2 em { color: #bd5c4c; }.parent-features { border-color: rgba(37,68,72,.22); }.parent-features article { border-color: rgba(37,68,72,.22); }
.admissions { background: linear-gradient(130deg, #f5a896 0%, #f8c98b 100%); }.enquiry-form { border-radius: 18px; }
.location { background: linear-gradient(130deg, #dcefcf 0%, #e2f3ef 100%); }.map-card { box-shadow: 12px 14px 0 rgba(244,141,121,.32); }
footer { position: relative; overflow: hidden; }footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: linear-gradient(90deg, #f38d79 0 25%, #f7ca59 25% 50%, #9dd4de 50% 75%, #9fc899 75%); }.footer-top,.footer-bottom { position: relative; }

/* Playful “magic sky” animation in the hero illustration. */
.hero-art .sun { animation: sun-pop 4.8s cubic-bezier(.4,0,.2,1) infinite; }
.hero-art .cloud-one { animation: cloud-sail 13s ease-in-out infinite; }.hero-art .cloud-two { animation: cloud-sail-reverse 15s ease-in-out infinite; }
.hero-art .rainbow { animation: rainbow-sway 4.6s ease-in-out infinite; transform-origin: bottom center; }
.hero-art .kid-one { animation: hello-hop 3.7s ease-in-out infinite; transform-origin: bottom center; }.hero-art .kid-two { animation: happy-hop 3.3s ease-in-out infinite .5s; transform-origin: bottom center; }
.paper-plane { position: absolute; z-index: 4; left: -48px; top: 112px; width: 42px; height: 28px; animation: plane-flight 10s cubic-bezier(.45,.05,.55,.95) infinite; }.paper-plane::before { content: ""; position: absolute; width: 0; height: 0; border-top: 13px solid transparent; border-bottom: 13px solid transparent; border-left: 40px solid #fffaf1; filter: drop-shadow(2px 3px 0 rgba(37,68,72,.14)); }.paper-plane i { position: absolute; z-index: 1; left: 7px; top: 13px; width: 25px; height: 2px; background: #f38d79; transform: rotate(-25deg); transform-origin: left; }.paper-plane::after { content: ""; position: absolute; width: 55px; height: 26px; right: 28px; top: 17px; border-top: 2px dashed rgba(255,250,241,.8); border-radius: 50%; transform: rotate(-10deg); }
.bubble { position: absolute; z-index: 3; border: 3px solid rgba(255,250,241,.7); border-radius: 50%; background: rgba(255,255,255,.11); box-shadow: inset -3px -3px 0 rgba(157,212,222,.36); animation: bubble-rise 6s ease-in infinite; }.bubble-one { width: 16px; height: 16px; left: 56%; bottom: 23px; animation-delay: .2s; }.bubble-two { width: 27px; height: 27px; left: 73%; bottom: 37px; animation-delay: 2.1s; }.bubble-three { width: 12px; height: 12px; left: 38%; bottom: 20px; animation-delay: 3.5s; }
.sparkle { position: absolute; z-index: 3; color: #fffaf1; font-size: 18px; animation: twinkle 2.2s ease-in-out infinite; }.sparkle-one { right: 42px; top: 160px; }.sparkle-two { left: 40%; top: 55px; animation-delay: 1.1s; }
@keyframes sun-pop { 0%,100% { transform: scale(1) rotate(0); } 45% { transform: scale(1.12) rotate(10deg); } 55% { transform: scale(1.05) rotate(5deg); } }
@keyframes cloud-sail { 0%,100% { transform: translateX(0); } 50% { transform: translateX(54px); } }
@keyframes cloud-sail-reverse { 0%,100% { transform: scale(.7) translateX(0); } 50% { transform: scale(.7) translateX(-65px); } }
@keyframes rainbow-sway { 0%,100% { transform: rotate(-9deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-8px); } }
@keyframes hello-hop { 0%,55%,100% { transform: scale(.86) translateY(0) rotate(0); } 12% { transform: scale(.86) translateY(-13px) rotate(-4deg); } 25% { transform: scale(.86) translateY(0) rotate(3deg); } }
@keyframes happy-hop { 0%,58%,100% { transform: translateY(0) rotate(0); } 15% { transform: translateY(-16px) rotate(4deg); } 30% { transform: translateY(0) rotate(-3deg); } }
@keyframes plane-flight { 0% { transform: translate(-45px,38px) rotate(9deg); opacity: 0; } 7% { opacity: 1; } 36% { transform: translate(190px,-43px) rotate(-14deg); } 62% { transform: translate(360px,32px) rotate(9deg); } 84% { opacity: 1; } 100% { transform: translate(510px,-66px) rotate(-14deg); opacity: 0; } }
@keyframes bubble-rise { 0% { transform: translateY(0) scale(.5); opacity: 0; } 15% { opacity: .9; } 75% { opacity: .6; } 100% { transform: translate(17px,-260px) scale(1.15); opacity: 0; } }
@keyframes twinkle { 0%,100% { transform: scale(.55) rotate(0); opacity: .2; } 50% { transform: scale(1.3) rotate(24deg); opacity: 1; } }