/* Little Mozarts — playful layer + new sections (announcements, gallery page, lightbox) */

.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--yellow); color: var(--navy); font-weight: 700; padding: 8px 14px; border-radius: 999px; }
.skip:focus { left: 12px; }

/* particle layer for sparkles & confetti */
.fx-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; }   /* the fun pointer is drawn here — always on top of pop-ups */

/* ---------- scroll reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease-out; transition-delay: var(--d, 0ms); }
/* pictures can't be dragged around, and animated ones render smoothly */
img { -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.char, .peeker, .fchar, .fchar img, .gallery-main img, .news-slide img, .tile-card { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---------- hover & motion delights ---------- */
.pop-in { animation: popIn .9s cubic-bezier(.2, .9, .3, 1.35) both; }
.hero .logo-big.pop-in { animation-name: popInCenter; }
@keyframes popIn { from { opacity: 0; scale: .7; rotate: -4deg; } }
@keyframes popInCenter { from { opacity: 0; scale: .7; rotate: -4deg; } }
@media (max-width: 760px) { .hero .logo-big.pop-in { animation-name: popIn; } }

.bouncy { display: table; margin-left: auto; margin-right: auto; transition: transform .3s; }
.bouncy:hover { animation: jelly .7s; }
@keyframes jelly { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.12, .88); } 50% { transform: scale(.92, 1.08); } 70% { transform: scale(1.04, .96); } }

.pill.shine { position: relative; overflow: hidden; }
.pill.shine::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }

.wiggle-me { cursor: pointer; }
.wiggle-me.boing { animation: boing .7s cubic-bezier(.3, 1.6, .5, 1) !important; }
.wiggle-me.hophop { animation: hopHop 1s ease-out !important; transform-origin: 50% 100%; }
.wiggle-me.dance { animation: dance 1.1s ease-in-out !important; transform-origin: 50% 100%; }
.wiggle-me.squish { animation: squish .8s cubic-bezier(.3, 1.6, .5, 1) !important; transform-origin: 50% 100%; }
.wiggle-me.flip { animation: flipWave .9s ease-in-out !important; }
.wiggle-me.wobble { animation: wobble .9s ease-in-out !important; transform-origin: 50% 90%; }
@keyframes hopHop { 0%, 100% { transform: none; } 12% { transform: scale(1.12, .86); } 28% { transform: translateY(-26px) scale(.92, 1.1) rotate(-6deg); } 44% { transform: scale(1.1, .9); } 60% { transform: translateY(-16px) scale(.95, 1.06) rotate(6deg); } 76% { transform: scale(1.05, .95); } }
@keyframes dance { 0%, 100% { transform: none; } 15% { transform: rotate(-12deg) translateX(-6px); } 30% { transform: rotate(12deg) translateX(6px) translateY(-8px); } 45% { transform: rotate(-10deg) translateX(-4px); } 60% { transform: rotate(10deg) translateX(4px) translateY(-6px); } 80% { transform: rotate(-4deg); } }
@keyframes squish { 0% { transform: none; } 25% { transform: scale(1.25, .7); } 55% { transform: scale(.85, 1.25) translateY(-14px); } 80% { transform: scale(1.06, .95); } 100% { transform: none; } }
@keyframes flipWave { 0% { transform: none; } 50% { transform: scaleX(-1) translateY(-12px); } 100% { transform: scaleX(1); } }
@keyframes wobble { 0%, 100% { transform: none; } 15% { transform: skewX(-12deg) rotate(-4deg); } 30% { transform: skewX(10deg) rotate(3deg); } 45% { transform: skewX(-8deg); } 60% { transform: skewX(6deg); } 75% { transform: skewX(-3deg); } }
@keyframes boing { 0% { transform: translateY(0) scale(1); } 20% { transform: translateY(4px) scale(1.1, .88); } 50% { transform: translateY(-26px) scale(.94, 1.08) rotate(-6deg); } 75% { transform: translateY(2px) scale(1.05, .95); } 100% { transform: none; } }

.curr-item .pill, .class-card .pill { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.curr-item:hover .pill { transform: scale(1.08) rotate(-2deg); }
.class-card:hover .pill { transform: rotate(-3deg) scale(1.05); }
.class-card .circle { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s; }
.class-card:hover .circle { transform: rotate(3deg) scale(1.03); box-shadow: 0 16px 30px rgba(2, 68, 173, .18); }
.contact-list li img { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.contact-list li:hover img { transform: scale(1.18) rotate(-8deg); }
.fee-table td { transition: background .2s, transform .2s; }
.fee-table td:hover { background: #eafaff; }
.nav a:hover { animation: navHop .4s; }
@keyframes navHop { 50% { transform: translateY(-3px); } }

/* floating notes in heroes */
.notes-float { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.notes-float span { position: absolute; bottom: -40px; font-weight: 700; opacity: 0; animation: floatUp linear infinite; text-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
@keyframes floatUp { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: .9; } 50% { transform: translateY(-50vh) translateX(20px) rotate(15deg); } 90% { opacity: .7; } 100% { transform: translateY(-110vh) translateX(-10px) rotate(-10deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .notes-float, .pill.shine::after { display: none; } .pop-in { animation: none; } }

/* ---------- full photos, never cut off: the photo sits on a soft blurred copy of itself ---------- */
.fit-photo { position: relative; overflow: hidden; background: #e9f1f8; }
.fit-photo .fit-bg { position: absolute; inset: -30px; background: center / cover no-repeat; filter: blur(24px) saturate(1.2) brightness(.95); transform: scale(1.08); }
.fit-photo img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }

/* ---------- home: photo slideshow ---------- */
.gallery-main { position: relative; border-radius: calc(28 * var(--u)); aspect-ratio: 16 / 9; box-shadow: 0 20px 40px rgba(2, 68, 173, .15); }
.gallery-main img { transition: opacity .35s; }
.gallery-main .fit-bg { transition: background-image .35s; }
.gallery-caption { position: absolute; z-index: 2; left: 50%; bottom: 16px; transform: translateX(-50%); margin: 0; background: rgba(2, 68, 173, .88); color: #fff; font-weight: 600; font-size: max(13px, calc(22 * var(--u))); padding: .35em 1.1em; border-radius: 999px; max-width: 90%; }
.gallery-thumbs button { border-radius: calc(18 * var(--u)); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.gallery-thumbs button:hover { transform: translateY(-4px) scale(1.03); }
.gallery-thumbs button:hover img { transform: none; }
.gallery-thumbs .fit-photo img { object-fit: contain; }
.gallery-thumbs[hidden], .gallery-next[hidden] { display: none; }

/* "See our full gallery" — a little stack of photos that fans out */
.gallery-cta { display: inline-flex; align-items: center; gap: max(14px, calc(26 * var(--u))); margin-top: calc(80 * var(--u)); padding: max(10px, calc(16 * var(--u))) max(22px, calc(40 * var(--u))) max(10px, calc(16 * var(--u))) max(12px, calc(20 * var(--u)));
  background: linear-gradient(120deg, var(--cyan), var(--royal)); color: #fff; text-decoration: none; border-radius: 999px; box-shadow: 0 14px 30px rgba(38, 90, 221, .3); position: relative; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s; }
.gallery-cta:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 20px 40px rgba(38, 90, 221, .4); }
.gc-stack { position: relative; width: max(62px, calc(110 * var(--u))); height: max(48px, calc(84 * var(--u))); flex: none; }
.gc-card { position: absolute; inset: 0; border-radius: 10px; border: 3px solid #fff; background: #cfe3f7 center / cover no-repeat; box-shadow: 0 6px 14px rgba(0, 0, 0, .2); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.gc-0 { transform: rotate(-10deg) translateX(-6px); } .gc-1 { transform: rotate(4deg) translateX(4px); } .gc-2 { transform: rotate(-2deg); }
.gallery-cta:hover .gc-0 { transform: rotate(-24deg) translate(-26px, 4px); }
.gallery-cta:hover .gc-1 { transform: rotate(18deg) translate(24px, 2px); }
.gallery-cta:hover .gc-2 { transform: rotate(0) translateY(-10px) scale(1.08); }
.gc-text { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.gc-text b { font-size: max(18px, calc(36 * var(--u))); }
.gc-text small { font-size: max(12px, calc(18 * var(--u))); opacity: .9; font-weight: 500; }
.gc-arrow { font-size: max(20px, calc(34 * var(--u))); animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }

/* ---------- home: "What's happening" announcements ---------- */
.news { position: relative; padding: calc(10 * var(--u)) 20px calc(130 * var(--u)); text-align: center; }
.news > .pill { font-size: max(22px, calc(56 * var(--u))); padding: .2em .9em; margin: 0 0 calc(60 * var(--u)); }
.news-carousel { position: relative; max-width: calc(1400 * var(--u)); min-width: min(100%, 300px); margin: 0 auto; overflow: hidden; border-radius: calc(40 * var(--u)); box-shadow: 0 24px 50px rgba(2, 68, 173, .16); }
.news-track { display: flex; transition: transform .7s cubic-bezier(.6, .05, .3, 1); }
.news-slide { flex: 0 0 100%; display: grid; grid-template-columns: 1.15fr 1fr; min-height: calc(520 * var(--u)); text-align: left; color: #fff; }
.news-slide.no-img { display: flex; align-items: center; justify-content: center; text-align: center; }
.news-img { min-height: 220px; background: rgba(0, 0, 0, .06); }
.news-img img { position: absolute; inset: 0; }
.news-body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: calc(60 * var(--u)) calc(70 * var(--u)); gap: 6px; position: relative; }
.no-img .news-body { align-items: center; padding: calc(80 * var(--u)) calc(120 * var(--u)); }
.news-body::before { content: "♪"; position: absolute; right: calc(40 * var(--u)); top: calc(20 * var(--u)); font-size: max(40px, calc(120 * var(--u))); opacity: .18; font-weight: 700; }
.news-slide { --ts: 100; --bs: 100; }
.news-body h3 { margin: 0 0 6px; font-size: calc(max(24px, calc(58 * var(--u))) * var(--ts) / 100); line-height: 1.05; }
.news-body p { margin: 0 0 .8em; font-size: calc(max(14px, calc(22 * var(--u))) * var(--bs) / 100); line-height: 1.5; }
.news-slide.al-center .news-body { align-items: center; text-align: center; }
.news-slide.al-right .news-body { align-items: flex-end; text-align: right; }
.news-slide.al-left .news-body { align-items: flex-start; text-align: left; }
.news-slide.light .pill.yellow { background: var(--navy); color: #fff; }
.news-body .pill { font-size: max(15px, calc(26 * var(--u))); padding: .45em 1.2em; margin-top: 8px; }
.c-navy { background: var(--navy); } .c-royal { background: var(--royal); } .c-orange { background: var(--orange); }
.c-green { background: #6fb51b; } .c-pink { background: #f24fb3; } .c-cyan { background: #00a9d9; }
.c-yellow { background: var(--yellow); color: var(--navy); }
.c-yellow .pill.yellow { background: var(--navy); color: #fff; }
.nc-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--navy); cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0, 0, 0, .15); transition: transform .2s; z-index: 2; }
.nc-btn svg { width: 12px; }
.nc-btn:hover { transform: translateY(-50%) scale(1.1); }
.nc-btn.prev { left: 12px; } .nc-btn.next { right: 12px; }
.nc-dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.nc-dots button { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; background: transparent; padding: 0; cursor: pointer; transition: .25s; }
.nc-dots button.on { background: #fff; width: 28px; border-radius: 6px; }

/* ---------- fees extra line ---------- */
.fee-extra { color: var(--navy); font-size: max(15px, calc(28 * var(--u))); margin: calc(50 * var(--u)) 0 0; }

/* ---------- gallery page ---------- */
.hero-gallery { background-position: 50% 45%; }
.hero-gallery h1 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -55%); margin: 0; z-index: 2; color: #fff; font-weight: 700; text-align: center; white-space: nowrap; font-size: max(40px, calc(141 * var(--u))); text-shadow: 0 4px 24px rgba(0, 0, 0, .3); }
.hero-gallery h1.pop-in { animation-name: popInMid; }
@keyframes popInMid { from { opacity: 0; scale: .7; rotate: -4deg; } }
.gallery-sec { position: relative; background: var(--cream); padding: calc(90 * var(--u)) 20px calc(160 * var(--u)); text-align: center; min-height: 400px; }
.gallery-intro { max-width: 760px; margin: 0 auto; color: var(--navy); font-weight: 600; font-size: max(16px, calc(28 * var(--u))); line-height: 1.45; }
.album-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: calc(50 * var(--u)) auto 0; max-width: 1100px; }
.album-chips .pill { font-size: 15px; padding: .5em 1.2em; opacity: .75; }
.album-chips .pill.is-on { opacity: 1; box-shadow: 0 0 0 3px #fff, 0 0 0 6px currentColor; }
.album-chips .pill.navy.is-on { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--navy); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 26px; max-width: 1400px; margin: calc(70 * var(--u)) auto 0; text-align: left; }
.photo-tile { margin: 0; }
.photo-tile[hidden] { display: none; }
.tile-card { background: #fff; padding: 10px 10px 12px; border-radius: 18px; box-shadow: 0 10px 24px rgba(2, 68, 173, .12); transform: rotate(var(--r, 0deg)); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s; will-change: transform; }
.tile-card:hover, .tile-card:focus-within { transform: rotate(0) scale(1.05) translateY(-6px); box-shadow: 0 22px 44px rgba(2, 68, 173, .24); }
.photo-tile button { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; padding: 0; cursor: zoom-in; border-radius: 12px; }
.zoom-hint { position: absolute; z-index: 2; right: 10px; bottom: 10px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: grid; place-items: center; font-size: 17px; opacity: 0; transform: scale(.6); transition: .25s cubic-bezier(.3, 1.6, .5, 1); }
.tile-card:hover .zoom-hint { opacity: 1; transform: scale(1); }
.photo-tile figcaption { font-size: 14px; font-weight: 600; color: var(--navy); padding: 8px 4px 0; text-align: center; }
.gallery-empty { margin: 60px auto 0; max-width: 420px; }
.gallery-empty img { width: 120px; margin: 0 auto 12px; }
.gallery-empty p { color: var(--navy); font-weight: 600; font-size: 18px; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 120; background: rgba(2, 20, 60, .92); display: flex; align-items: center; justify-content: center; padding: 20px 64px; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; animation: pop .25s ease; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 110px); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
.lightbox figcaption { color: #fff; font-weight: 600; margin-top: 12px; text-align: center; }
.lb-close, .lb-nav { position: absolute; border: 0; background: rgba(255, 255, 255, .15); color: #fff; cursor: pointer; border-radius: 50%; display: grid; place-items: center; transition: background .2s, transform .2s; }
.lb-close { top: 16px; right: 16px; width: 46px; height: 46px; font-size: 28px; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; font-size: 34px; line-height: 1; }
.lb-nav.prev { left: 10px; } .lb-nav.next { right: 10px; }
.lb-close:hover, .lb-nav:hover { background: var(--orange); }

@media (max-width: 760px) {
  .news { padding-bottom: 60px; }
  .news-slide { grid-template-columns: 1fr; }
  .news-img { min-height: 200px; }
  .news-body, .no-img .news-body { padding: 24px 22px 46px; align-items: center; text-align: center; }
  .nc-btn { top: 100px; width: 38px; height: 38px; }
  .hero-gallery { min-height: 220px; justify-content: center; }
  .hero-gallery h1 { position: relative; left: auto; top: auto; transform: none; font-size: 44px; }
  .hero-gallery h1.pop-in { animation-name: popIn; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .tile-card { padding: 6px 6px 8px; border-radius: 12px; }
  .lightbox { padding: 16px; }
  .lb-nav { top: auto; bottom: 16px; transform: none; }
  .gallery-caption { bottom: 8px; font-size: 12px; }
}

/* ---------- privacy notice ---------- */
.legal-prose { text-align: left; max-width: 820px; font-size: 16px; }
.legal-prose h2 { color: var(--navy); font-size: 20px; margin: 1.6em 0 .4em; }
.legal-prose a { color: var(--navy); font-weight: 600; }
.copyright a { color: #fff; }

/* ---------- About: characters peeking from behind the class photos ---------- */
.circle-wrap { position: relative; width: calc(325 * var(--u)); min-width: 150px; margin-left: calc(4 * var(--u)); isolation: isolate; }
.circle-wrap .circle { margin-left: 0; position: relative; z-index: 1; width: 100%; box-shadow: 0 0 0 max(4px, calc(7 * var(--u))) #fff; }
.peeker { position: absolute; z-index: 0; height: auto; cursor: pointer; }
.peek-baby { width: 48%; left: 4%; top: -24%; rotate: -16deg; animation: peekBob 4s ease-in-out infinite; }
.peek-aftercare { width: 50%; right: -42%; top: 6%; animation: peekWave 3.2s ease-in-out infinite; transform-origin: 20% 60%; }
@keyframes peekBob { 50% { translate: 0 -6px; } }
@keyframes peekWave { 0%, 100% { rotate: 0deg; } 50% { rotate: 6deg; } }
@media (max-width: 760px) {
  .circle-wrap { width: 200px; margin: 0 auto; }
  .circle-wrap .circle { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .peeker { animation: none; } }

/* ---------- full-picture banner (Contact) ---------- */
.hero.hero-full { height: auto; min-height: 0; background: #e9f1f8; padding: 0; display: block; }


/* ---------- Contact page ---------- */
.contact-sec { padding: calc(50 * var(--u)) 20px calc(110 * var(--u)); }
.contact-sub { font-size: max(18px, calc(40 * var(--u))); margin-top: calc(18 * var(--u)); padding: .2em 1em; }
.contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: max(14px, calc(28 * var(--u))); max-width: 1300px; margin: calc(70 * var(--u)) auto 0; }
.cc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px 20px; border-radius: 26px; text-decoration: none; color: var(--navy); background: #fff; box-shadow: 0 12px 30px rgba(2, 68, 173, .1); border-top: 7px solid var(--c); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s; overflow: hidden; }
.cc::after { content: ""; position: absolute; width: 140px; height: 140px; border-radius: 50%; background: var(--c); opacity: .08; right: -50px; bottom: -60px; transition: transform .4s; }
.cc:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 22px 44px rgba(2, 68, 173, .18); }
.cc:hover::after { transform: scale(1.6); }
.cc-orange { --c: var(--orange); } .cc-green { --c: #43c15b; } .cc-cyan { --c: var(--cyan); } .cc-yellow { --c: var(--yellow); }
.cc-ic { width: 74px; height: 74px; border-radius: 50%; background: var(--c); display: grid; place-items: center; box-shadow: 0 8px 18px rgba(0, 0, 0, .12); margin-bottom: 8px; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.cc-ic img { width: 58%; filter: brightness(0) invert(1); }
.cc-green .cc-ic img { width: 100%; filter: none; }
.cc:hover .cc-ic { transform: rotate(-12deg) scale(1.12); }
.cc-label { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6b7a99; }
.cc b { font-size: max(16px, calc(26 * var(--u))); line-height: 1.25; text-align: center; }
.cc-email { font-size: max(14px, calc(21 * var(--u))) !important; word-break: break-all; }
.cc-go { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--c); filter: brightness(.85); transition: transform .2s; }
.cc:hover .cc-go { transform: translateX(4px); }
.cc-small { font-size: 14px; font-weight: 600; color: #6b7a99; }

.contact-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: max(18px, calc(36 * var(--u))); max-width: 1300px; margin: calc(60 * var(--u)) auto 0; text-align: left; align-items: stretch; }
.msg-card { background: linear-gradient(160deg, #eef8ff, #fff 60%); border-radius: 28px; padding: 26px 26px 24px; box-shadow: 0 12px 30px rgba(2, 68, 173, .1); display: flex; flex-direction: column; gap: 12px; position: relative; }
.msg-card h2 { margin: 0; color: var(--navy); font-size: max(22px, calc(36 * var(--u))); }
.muted-note { margin: -6px 0 4px; color: #6b7a99; font-size: 14px; }
.msg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.msg-card label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 14px; color: var(--navy); }
.msg-card input, .msg-card textarea { font: 400 15px "Poppins", sans-serif; border: 2px solid #d3e2f5; border-radius: 14px; padding: 10px 12px; background: #fff; transition: border-color .2s, box-shadow .2s; width: 100%; }
.msg-card input:focus, .msg-card textarea:focus { outline: 0; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(0, 201, 255, .18); }
.msg-card textarea { resize: vertical; }
.msg-chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.msg-chips legend { font-weight: 600; font-size: 14px; color: var(--navy); margin-bottom: 6px; padding: 0; }
.msg-chips label { cursor: pointer; }
.msg-chips input { position: absolute; opacity: 0; width: auto; }
.msg-chips span { display: inline-block; padding: 6px 14px; border-radius: 999px; border: 2px solid #d3e2f5; background: #fff; font-weight: 600; font-size: 13px; transition: .2s; }
.msg-chips label:hover span { border-color: var(--cyan); transform: translateY(-2px); }
.msg-chips input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.msg-chips input:focus-visible + span { outline: 3px solid var(--cyan); outline-offset: 2px; }
.msg-send { align-self: flex-start; font-size: 17px; padding: .65em 1.6em; }
.msg-status { margin: 0; padding: 10px 14px; border-radius: 12px; font-weight: 600; font-size: 14px; }
.msg-status.ok { background: #e6f8d8; color: #2c6a05; } .msg-status.err { background: #ffece6; color: #a02a06; }
.map-card { border-radius: 28px; overflow: hidden; box-shadow: 0 12px 30px rgba(2, 68, 173, .1); display: flex; flex-direction: column; background: #fff; border: 5px solid var(--green); }
.map-card .map { flex: 1; width: 100%; max-width: none; margin: 0; min-height: 300px; aspect-ratio: auto; border: 0; }
.map-foot { display: flex; align-items: center; gap: 12px; padding: 14px 16px; flex-wrap: wrap; }
.cc-ic.small { width: 44px; height: 44px; margin: 0; --c: var(--pink); flex: none; }
.map-addr { flex: 1; font-weight: 600; color: var(--navy); min-width: 160px; }
.map-foot .pill { font-size: 15px; padding: .55em 1.2em; }
@media (max-width: 1000px) { .contact-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .contact-split { grid-template-columns: 1fr; }
  .msg-row { grid-template-columns: 1fr; }
  .cc { padding: 20px 12px 16px; border-radius: 20px; }
  .cc-ic { width: 60px; height: 60px; }
}
@media (max-width: 420px) { .contact-cards { grid-template-columns: 1fr 1fr; gap: 10px; } .cc b { font-size: 14px; } }

/* ---------- About: interactive food menu (characters move on their own) ---------- */
/* the whole food picture, edge to edge, nothing cut; a little space on top for the speech bubbles */
.food.food { height: auto; min-height: 0; display: block; padding: max(64px, calc(100 * var(--u))) 0 max(26px, calc(40 * var(--u))); overflow: hidden; }
/* the food picture's background is the same mint as the section, so a smaller picture blends in with no edges */
.food .food-art { position: relative; width: min(68%, 1100px); margin: 0 auto; aspect-ratio: 1800 / 1050; z-index: 1; }
/* food pieces keep their size; their distance from the centre is stretched (--s) so they fill the width */
.food.food { --k: .68; --s: 1.44; }
.food .food-art { width: 100%; height: calc(min(100vw, 1728px) * var(--k) * 1050 / 1800); aspect-ratio: auto; }
.fitem, .food-art .fchar { position: absolute; width: calc(var(--w) * var(--k) * 1%);
  left: calc(50% + (var(--x) * var(--k) * var(--s) - var(--w) * var(--k) / 2) * 1%); }
.fitem { height: auto; }
.food-cta { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); z-index: 4; display: flex; flex-direction: column; align-items: center; white-space: nowrap; }
.food.food .pill { font-size: max(18px, calc(44 * var(--u))); margin-top: 0; padding: .15em 1.1em; }
.food.food .menu-link { font-size: max(14px, calc(26 * var(--u))); margin-top: calc(16 * var(--u)); background: rgba(255, 255, 255, .92); padding: .2em .9em; border-radius: 999px; box-shadow: 0 6px 16px rgba(0, 0, 0, .1); text-decoration-thickness: .06em; }
.fchar { position: absolute; display: block; transform-origin: 50% 100%; }
.fchar > img { width: 100%; height: auto; display: block; }
.fc-blue { animation: fcHop 1.9s ease-in-out infinite; }
.fc-green { animation: fcJump 2.3s ease-in-out infinite; }
.fc-red { animation: fcDance 2.1s ease-in-out infinite; }
@keyframes fcHop { 0%, 100% { transform: none; } 20% { transform: scale(1.04, .95); } 45% { transform: translateY(-5%) scale(.97, 1.04); } 70% { transform: scale(1.02, .98); } }
@keyframes fcJump { 0%, 100% { transform: rotate(0); } 25% { transform: translateY(-6%) rotate(-5deg); } 50% { transform: rotate(0); } 75% { transform: translateY(-6%) rotate(5deg); } }
@keyframes fcDance { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(7deg) translateX(3%); } 50% { transform: rotate(0) translateY(-3%); } 75% { transform: rotate(-7deg) translateX(-3%); } }
.cutlery { position: absolute; aspect-ratio: 24 / 100; transform: translate(-50%, -88%) rotate(var(--r)); transform-origin: 50% 88%; animation: cutleryWave 2.4s ease-in-out infinite; animation-delay: var(--dl, 0s); }
.cutlery svg { width: 100%; height: 100%; fill: #c9d3e0; stroke: #6f7f96; stroke-width: 2; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .18)); }
@keyframes cutleryWave { 0%, 100% { transform: translate(-50%, -88%) rotate(var(--r)); } 50% { transform: translate(-50%, -88%) rotate(calc(var(--r) * -0.4)); } }
.food:hover .cutlery { animation-duration: .7s; }
.yum { position: absolute; left: 50%; top: -4%; font-size: max(13px, calc(27 * var(--u))) !important; transform: translate(-50%, -100%) scale(.4); opacity: 0; background: #fff; color: var(--orange); font-weight: 800; font-size: max(12px, calc(26 * var(--u))); padding: .3em .8em; border-radius: 999px; box-shadow: 0 6px 16px rgba(0, 0, 0, .12); white-space: nowrap; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), opacity .25s; pointer-events: none; }
.yum::after { content: ""; position: absolute; left: 50%; bottom: -8px; border: 8px solid transparent; border-top-color: #fff; border-bottom: 0; transform: translateX(-50%); }
.food:hover .yum { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.food:hover .fc-green .yum { transition-delay: .1s; } .food:hover .fc-red .yum { transition-delay: .2s; }
.food .pill, .food .menu-link { z-index: 4; }
.food .pill { animation: menuPulse 2.6s ease-in-out infinite; }
@keyframes menuPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06) rotate(-1deg); } }
@media (max-width: 760px) { .food.food { padding-top: 48px; --k: 1; --s: 1; } .food.food .pill { font-size: 17px; } .food.food .menu-link { font-size: 14px; } .yum { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .cutlery, .food .pill, .fchar { animation: none !important; } }

.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 420px) { .cc-email { font-size: 11.5px !important; word-break: normal; overflow-wrap: anywhere; } }

/* ---------- full-picture banners with the logo / titles on top ---------- */
.hero.hero-full { overflow: hidden; }
/* banner picture: always the whole picture, never taller than ~60% of the screen */
/* the picture keeps its real shape; logo, titles and buttons sit on the picture itself */
/* banner fills the full width, edge to edge; height is comfortable (never towering over the page) */
.hero-frame { position: relative; width: 100%; }
.hero-full .hero-img { position: relative; z-index: 0; display: block; width: 100%; object-fit: cover; object-position: 50% 50%;
  height: min(calc(min(100vw, 1728px) * var(--h, 2) / var(--w, 3)), 68vh, 640px); }
.hero.hero-full { background: #e9f1f8; }
/* darkening (for white text on top) goes on the picture itself, not the space beside it */
.hero-full.dim::before { display: none; }
.hero-full.dim .hero-img { filter: brightness(.55); }
.hero-full.hero-home .logo-big, .hero-full.hero-about .logo-big { top: 50%; transform: translate(-51%, -54%); width: min(calc(535 * var(--u)), 46%); }
.hero-full.hero-home .logo-big { left: 50%; width: min(calc(520 * var(--u)), 36%); }
.hero-full .logo-big.pop-in { animation-name: popInMiddle; }
@keyframes popInMiddle { from { opacity: 0; scale: .7; rotate: -4deg; } }
.hero-full.hero-home .ctas { top: 50%; right: calc(80 * var(--u)); transform: translateY(-50%); }
.hero-full.hero-home .mascot { top: auto; bottom: 16%; left: calc(395 * var(--u)); }
.hero-full.hero-fees h1 { top: 50%; right: calc(124 * var(--u)); transform: translateY(-50%); }
.hero-full.hero-fees h1.pop-in { animation-name: popInRight; }
@keyframes popInRight { from { opacity: 0; scale: .7; rotate: -4deg; } }
@media (max-width: 760px) {
  .hero.hero-full { display: block; padding: 0; min-height: 0; }
  .hero-full .hero-img { height: min(calc(100vw * var(--h, 2) / var(--w, 3)), 46vh); }
  .hero-full .logo-big, .hero-full.hero-home .logo-big { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: 48%; min-width: 0; }
  .hero-full .logo-big.pop-in { animation-name: popInMiddleM; }
  @keyframes popInMiddleM { from { opacity: 0; scale: .7; rotate: -4deg; } }
  /* Home: the buttons sit under the picture in the same box, so centre the logo on the picture's own height (same spot as About Us) */
  .hero-full.hero-home .logo-big { top: calc(min(100vw * var(--h, 2) / var(--w, 3), 46vh) * .48); }
  .hero-full.hero-home .ctas { position: relative; z-index: 3; transform: none; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 14px 12px 34px; background: #fff; }
  .hero-full.hero-home .ctas .pill { font-size: 15px; }
  .hero-full .mascot { display: none; }
  .hero-full.hero-fees h1 { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 34px; align-self: auto; }
  .hero-full.hero-fees h1.pop-in { animation-name: popInRight; }
  .hero-full.hero-gallery h1 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -55%); font-size: 36px; }
  .hero-full.hero-gallery h1.pop-in { animation-name: popInMid; }
}

/* ---------- Fees: the green character hops up from behind the table ---------- */
.fee-table-wrap .peek { top: auto; bottom: 100%; transform: translateY(52%); transform-origin: 50% 100%; animation: tableHop 3.4s ease-in-out infinite; }
@keyframes tableHop { 0%, 60%, 100% { transform: translateY(52%); } 70% { transform: translateY(44%) rotate(-3deg); } 78% { transform: translateY(52%) scale(1.03, .97); } 84% { transform: translateY(47%) rotate(2deg); } 90% { transform: translateY(52%); } }
@media (max-width: 760px) {
  /* phones: bigger, standing behind the "Baby" column with both hands on the table */
  .fee-table-wrap { margin-top: 70px; }
  .fee-table-wrap .peek { width: 30%; left: 65.8%; }
}
@media (prefers-reduced-motion: reduce) { .fee-table-wrap .peek { animation: none; } }
.fee-table-wrap .peek-hand { z-index: 3; pointer-events: none; }
/* just the round hands (no slice of body) sit in front of the table's top edge */
.fee-table-wrap .peek-hand.l { clip-path: circle(5% at 4.6% 46.6%); }
.fee-table-wrap .peek-hand.r { clip-path: circle(5% at 95.2% 46.9%); }
/* fixed shape, so phones (iPhone Safari) sink him behind the table even before the picture has loaded */
.fee-table-wrap .peek { aspect-ratio: 520 / 580; height: auto; }

/* ---------- Fees: enrolment form cards — smaller and centred ---------- */
.form-cards { grid-template-columns: repeat(2, calc(380 * var(--u))); column-gap: calc(220 * var(--u)); justify-content: center; margin: calc(90 * var(--u)) auto 0; }
.form-card .circle { width: calc(280 * var(--u)); min-width: 120px; }
.form-card .pill { font-size: max(20px, calc(52 * var(--u))); margin-top: calc(38 * var(--u)); }
.form-card .more { font-size: max(13px, calc(24 * var(--u))); margin-top: calc(28 * var(--u)); }
.forms-sec { padding-top: calc(60 * var(--u)); padding-bottom: calc(200 * var(--u)); }
@media (max-width: 760px) { .form-cards { grid-template-columns: 1fr; margin-left: auto; } }

/* ---------- tighter spacing (About Us, Fees) ---------- */
.classes { padding-top: calc(50 * var(--u)); padding-bottom: calc(50 * var(--u)); }
.class-grid { margin-top: calc(56 * var(--u)); row-gap: calc(50 * var(--u)); }
.fees-sec { padding-top: calc(80 * var(--u)); padding-bottom: calc(110 * var(--u)); }






/* ---------- the website draws its own colourful cursor (mouse only) ---------- */
html.lm-cursor, html.lm-cursor * { cursor: none !important; }
html.lm-cursor input, html.lm-cursor textarea, html.lm-cursor [contenteditable] { cursor: text !important; }
html.lm-cursor select, html.lm-cursor iframe, html.lm-cursor canvas.sig { cursor: auto !important; }
html.lm-cursor canvas.sig { cursor: crosshair !important; }

/* Email card: opens the visitor's email app */
.cc-main { display: flex; flex-direction: column; align-items: center; gap: 4px; color: inherit; text-decoration: none; width: 100%; position: relative; z-index: 1; }

/* ---------- phones: the characters stand whole, left and right, in their own space beside each heading ---------- */
@media (max-width: 760px) {
  .char.hide-sm { display: block !important; width: var(--mw, 84px) !important; min-width: 0 !important; left: auto !important; right: auto !important;
    top: var(--mt, auto) !important; bottom: var(--mb, auto) !important; z-index: 4; }
  .char.hide-sm.m-l { left: 10px !important; }
  .char.hide-sm.m-r { right: 10px !important; }
  /* characters drawn "cut off" on one side sit tight against the screen edge, as if jumping out of the phone */
  .char.hide-sm.m-l.m-edge { left: -6px !important; transform-origin: 0 100%; }
  .char.hide-sm.m-r.m-edge { right: -6px !important; transform-origin: 100% 100%; }
  /* room for them, so they never sit on top of words */
  .welcome { padding-top: 124px; }
  .intro { padding-bottom: 136px; }
  .melody { padding-top: 124px; }
  .gallery-sec { padding-top: 124px; }
  .forms-sec { padding-top: 124px; padding-bottom: 136px; }
  .contact-sec { padding-top: 128px; }
  .welcome .h-giant { font-size: 50px; }
  .hero-full.hero-home .ctas { right: auto !important; top: auto !important; width: 100%; }
}

/* ---------- phones: "keep exploring" card + little page bubbles at the end of each page ---------- */
.next-wrap { display: none; }
@media (max-width: 760px) {
  .next-wrap { display: block; padding: 30px 16px 34px; }
  .next-page { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; padding: 20px 16px 22px; border-radius: 26px; text-decoration: none; text-align: center;
    background: var(--c); color: #fff; box-shadow: 0 12px 28px rgba(2, 68, 173, .18); position: relative; overflow: hidden; }
  .next-page::before { content: "A B C 1 2 3"; position: absolute; inset: auto 0 6px; font-weight: 900; letter-spacing: 6px; opacity: .18; font-size: 22px; }
  .np-small { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
  .np-title { font-size: 26px; font-weight: 900; line-height: 1.1; }
  .np-sub { font-size: 14px; font-weight: 600; opacity: .95; }
  .np-arrow { display: inline-block; animation: nudge 1.4s ease-in-out infinite; }
  .hop-label { margin: 16px 0 8px; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6b7a99; }
  .hop-to { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .hop-to a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--navy); font-weight: 800; font-size: 14px;
    text-decoration: none; border: 2.5px solid var(--c); box-shadow: 0 4px 0 var(--c); transition: transform .15s; }
  .hop-to a:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--c); }
}

/* nothing may push the page sideways on a phone */
@media (max-width: 760px) { main { overflow-x: clip; } }

/* banner logo/titles are centred by shifting them half their size; make the pop-in grow from that visual middle so nothing drifts while loading */
.hero-full .logo-big, .hero-full.hero-gallery h1 { transform-origin: 0 0; }
.hero-full.hero-fees h1 { transform-origin: 50% 0; }

/* ---------- extra pages made in the admin portal (page.php) ---------- */
.xp-hero { position: relative; background: var(--bg); color: #fff; text-align: center; padding: calc(150 * var(--u)) 20px calc(190 * var(--u)); overflow: hidden; }
.xp-hero h1 { margin: 0; font-size: max(38px, calc(120 * var(--u))); font-weight: 800; line-height: 1.05; text-shadow: 0 4px 24px rgba(0, 0, 0, .18); position: relative; z-index: 2; }
.xp-sec { position: relative; background: var(--bg); padding: calc(110 * var(--u)) 20px calc(120 * var(--u)); }
.xp-inner { max-width: calc(1300 * var(--u)); min-width: min(100%, 320px); margin: 0 auto; position: relative; z-index: 2; }
.xp-row { display: flex; align-items: center; gap: calc(80 * var(--u)); }
.xp-sec.img-left .xp-row { flex-direction: row-reverse; }
.xp-text { flex: 1; min-width: 0; font-size: max(16px, calc(26 * var(--u))); line-height: 1.65; text-align: center; }
.xp-sec.has-img .xp-text { text-align: left; }
.xp-text h2.pill { font-size: max(22px, calc(48 * var(--u))); padding: .25em .9em; margin: 0 0 .7em; }
.xp-text p { margin: 0 0 1em; }
.xp-intro { margin-bottom: calc(60 * var(--u)); font-size: max(17px, calc(30 * var(--u))); font-weight: 500; text-align: center !important; }
.xp-btn { font-size: max(16px, calc(30 * var(--u))); padding: .5em 1.3em; margin-top: .4em; }
.xp-pic { flex: 0 0 44%; margin: 0; }
.xp-pic img { width: 100%; height: auto; border-radius: 28px; box-shadow: 0 16px 40px rgba(2, 68, 173, .18); border: 6px solid #fff; }
@media (max-width: 760px) {
  .xp-sec { padding: 124px 18px 56px; }
  .xp-row, .xp-sec.img-left .xp-row { flex-direction: column; gap: 22px; }
  .xp-sec.has-img .xp-text { text-align: center; }
  .xp-pic { flex-basis: auto; width: 100%; }
  .xp-hero { padding: 60px 18px 80px; }
}

/* iPhones: never let a page slide sideways (clip, unlike hidden, keeps the sticky menu bar working) */
html, body { overflow-x: clip; }

/* banner photos fade in smoothly once loaded (over their own main colour — no dark box, no blur) */
.js .hero-full .hero-img { opacity: 0; transition: opacity .7s ease; }
.js .hero-full .hero-img.loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .hero-full .hero-img { transition: none; } }

/* iPhones zoom in (and the page slides sideways) when you tap a box whose text is under 16px — so never smaller on phones */
@media (max-width: 760px) { input, select, textarea { font-size: 16px !important; } }

/* "Thank you!" pop-up: the little character sits fully inside the card (it was cut off at the top) */
.modal-card .mascot { width: 92px; height: auto; margin: 0 auto 8px; position: static; transform: none; }
.modal-card { padding-top: 26px; overflow: visible; }
.small-print { font-size: 13px; opacity: .7; margin-top: 28px; }
/* phones (2 columns): a subject left alone on the last row sits in the middle */
@media (max-width: 760px) { .curr-item.odd-last { grid-column: 1 / -1; justify-self: center; } }