/* Subtle style-guide pastel touches: icons, small shapes and short accent text only.
   Deep shades (>=4.5:1 on paper/taupe) for light sections; soft pastels only on red. */
:root{
  --pa-blue:#2e55a4;--pa-plum:#a63a8e;--pa-green:#3f7a34;--pa-teal:#1f7a8f;--pa-pink:#b8357a;
  --pp-blue:#d0daf1;--pp-plum:#e6cce2;--pp-green:#d0e3b9;--pp-teal:#badfe5;--pp-amber:#f5db9d;--pp-pink:#f7d0e1;
  --pa:var(--pa-blue);
}
/* Per-page signature accent */
.pg-program-nursery,.pg-about,.pg-meals,.pg-careers,.pg-contact{--pa:var(--pa-pink)}
.pg-program-toddlers,.pg-centre,.pg-curriculum,.pg-location,.pg-waitlist{--pa:var(--pa-green)}
.pg-program-preschool,.pg-faq,.pg-fees,.pg-tour,.pg-privacy{--pa:var(--pa-blue)}
.pg-how-to-enrol,.pg-educators,.pg-a-day,.pg-guide-choosing-a-centre,.pg-programs{--pa:var(--pa-plum)}
.pg-ccs,.pg-start-strong,.pg-resources,.pg-child-safety,.pg-arkki,.pg-guide-ccs-moorebank-2027{--pa:var(--pa-teal)}

/* Tint an <img> SVG shape: paint the box, mask with its own file, hide the original pixels. */
.pa-tint{background-color:currentColor;object-position:-99999px 0;-webkit-mask:var(--pa-src) center/contain no-repeat;mask:var(--pa-src) center/contain no-repeat}

/* Subpages: 1) hero motif, 2) checklist ticks / card icons, 3) FAQ plus */
.subpage .interior-motif{color:var(--pa)}
.subpage .checklist li svg,.subpage .card-icon svg{color:var(--pa)}
.subpage .faq-item summary::after{color:var(--pa)}
/* How to enrol: chapter numbers alternate */
.pg-how-to-enrol .enrol-step:nth-of-type(3n+1)>.chapter-number{color:var(--pa-blue)}
.pg-how-to-enrol .enrol-step:nth-of-type(3n+2)>.chapter-number{color:var(--pa-plum)}
.pg-how-to-enrol .enrol-step:nth-of-type(3n)>.chapter-number{color:var(--pa-teal)}

/* Home: hero shapes, age-group illustrations, learning-section gears */
.hero-play .play-flower{color:var(--pa-plum)}
.hero-play .play-star{color:var(--pa-blue)}
.hero-play .play-path{color:var(--pa-teal)}
.stage:nth-child(1) .stage-art img{color:var(--pa-pink)}
.stage:nth-child(2) .stage-art img{color:var(--pa-green)}
.stage:nth-child(3) .stage-art img{color:var(--pa-blue)}
.learning .cart-gears{color:var(--pp-amber)}

/* Footer social hover */
.footer-social a:hover{color:var(--pa);border-color:var(--pa)}

/* Building facade photo card: full wide view */
.facade-card{position:relative;margin:0}
.facade-frame{overflow:hidden;border-radius:6px 6px 60px 6px;aspect-ratio:3/1;background:#eae7d5}
.facade-frame picture,.facade-frame img{display:block;width:100%;height:100%}
.facade-frame img{object-fit:cover;object-position:center;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.facade-card:hover .facade-frame img{transform:scale(1.015)}
.facade-flower{color:#d12229;position:absolute;width:64px;height:64px;top:-24px;left:-22px;object-fit:contain;pointer-events:none;animation:turn 30s linear infinite}
.facade-card figcaption{font-size:11px;letter-spacing:.13em;text-transform:uppercase;margin-top:14px;color:var(--ink-soft,#5d5c52);max-width:none}
.facade-belong{margin-top:70px}
.subpage .page-hero .facade-hero{margin-top:50px}
.subpage .page-hero .facade-wrap{padding-right:0}
@media(max-width:700px){
.facade-belong{margin-top:45px}
.subpage .page-hero .facade-hero{margin-top:34px}
.facade-frame{aspect-ratio:16/9;border-radius:5px 5px 35px 5px}
.facade-frame img{object-position:32% 50%}
.facade-flower{width:46px;height:46px;top:-16px;left:auto;right:-6px}}

/* Picture Play Studio invitation: brand shapes open a "Shall we play?" pop-up. */
.hero-play{pointer-events:none;z-index:3}
[data-play-invite]{cursor:pointer;pointer-events:auto}
[data-play-invite]:hover,[data-play-invite]:focus-visible{animation:pi-wiggle .6s ease}
[data-play-invite]:focus-visible{outline:3px solid #d12229;outline-offset:6px;border-radius:8px}
@keyframes pi-wiggle{25%{rotate:-6deg}60%{rotate:5deg}100%{rotate:0deg}}
.pi-overlay{position:fixed;inset:0;z-index:1000;background:#24241f8c;backdrop-filter:blur(3px);display:grid;place-items:center;padding:16px;animation:pi-fade .25s ease}
.pi-card{position:relative;background:#f5f3ec;color:#24241f;border-radius:10px 10px 60px 10px;max-width:420px;width:100%;padding:34px 32px 30px;text-align:center;box-shadow:0 30px 60px #24241f40;animation:pi-pop .35s cubic-bezier(.2,.8,.2,1.2);font-family:Figtree,Arial,sans-serif}
.pi-build{position:relative;height:96px;width:170px;margin:0 auto 18px}
.pi-s{position:absolute;object-fit:contain;animation:pi-in .7s cubic-bezier(.2,.8,.2,1.3) both}
.pi-s1{width:54px;left:0;top:6px;animation-delay:.05s}
.pi-s2{width:40px;right:6px;top:0;animation-delay:.2s}
.pi-s3{width:62px;left:54px;top:22px;animation-delay:.35s}
.pi-s4{width:36px;right:18px;bottom:0;animation-delay:.5s}
.pi-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#a81c22;margin:0 auto 10px}
.pi-card h2{font-family:'Bricolage Grotesque',Arial,sans-serif;font-weight:500;letter-spacing:-.05em;font-size:clamp(34px,7vw,46px);line-height:1;margin:0}
.pi-card h2 em{font-family:Georgia,serif;color:#d12229}
.pi-lede{font-size:15px;line-height:1.5;margin:14px auto 24px;max-width:300px}
.pi-actions{display:flex;flex-direction:column;align-items:center;gap:12px}
.pi-cta{gap:22px}
.pi-later{border:0;background:none;font-size:14px;color:#5a594f;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px}
.pi-later:hover{color:#d12229}
@keyframes pi-fade{from{opacity:0}}
@keyframes pi-pop{from{opacity:0;transform:scale(.92) translateY(10px)}}
@keyframes pi-in{from{opacity:0;transform:translateY(-30px) rotate(-40deg) scale(.4)}}
@media(prefers-reduced-motion:reduce){.pi-overlay,.pi-card,.pi-s,[data-play-invite]:hover,[data-play-invite]:focus-visible{animation:none}}
.pi-s{background-color:currentColor;object-position:-99999px 0;-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat;height:auto;aspect-ratio:1}
.pi-s1{color:#9c3f8a;--src:url('/site/assets/brand/07-six-petal-flower.svg')}
.pi-s2{color:#3355a3;--src:url('/site/assets/brand/02-irregular-starburst.svg')}
.pi-s3{color:#d12229;--src:url('/site/assets/brand/smiling-face-clean.svg')}
.pi-s4{color:#2f7c94;--src:url('/site/assets/brand/06-tapered-spring.svg')}