:root{--navy:#172653;--gold:#f4c84e;--cream:#fffaf0;--ink:#263456;--muted:#737b8d;--blue:#dceffa}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:#fffdf8;color:var(--navy);font-family:Nunito,Arial,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}.announcement{height:30px;display:flex;justify-content:center;align-items:center;gap:10px;background:var(--navy);color:#ffe49a;font-size:9px;font-weight:900;letter-spacing:2px}.announcement span{color:#fff}.header{height:82px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;background:#fffdf8;position:sticky;top:0;z-index:30;border-bottom:1px solid #eee9dc}.brand{display:flex;align-items:center;gap:10px}.brand img{width:52px;height:52px;object-fit:contain}.brand b{display:block;font:800 20px 'Baloo 2',sans-serif;letter-spacing:1px;line-height:1}.brand small{display:block;font-size:8px;font-weight:900;letter-spacing:2px;margin-top:5px}.header nav{display:flex;align-items:center;gap:27px;font-size:12px;font-weight:900}.header nav a:hover{color:#c18d1c}.nav-cta{background:var(--gold);padding:13px 19px;border-radius:30px;box-shadow:0 4px 0 #d5a72f}.menu{display:none;border:0;background:none;font-size:25px;color:var(--navy)}.hero{min-height:660px;padding:82px 7% 55px;background:#fff7e6;position:relative;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}.hero-copy{position:relative;z-index:2;max-width:570px}.eyebrow,.kicker{font-size:10px;font-weight:1000;letter-spacing:2px;color:#b88720}.eyebrow{display:inline-block;padding:10px 15px;border-radius:30px;background:white;border:1px solid #f1e3c2}.hero h1,.section h2{font:800 clamp(54px,7vw,90px)/.93 'Baloo 2',sans-serif;letter-spacing:-2px;margin:27px 0 20px}.hero h1 em,.section h2 em{font-style:normal;color:#dfa92e}.hero-copy>p,.section p{color:var(--muted);font-size:14px;line-height:1.9;max-width:470px}.actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-flex;align-items:center;gap:18px;padding:15px 22px;border-radius:30px;font-size:12px;font-weight:900;transition:.2s}.btn:hover{transform:translateY(-3px)}.primary{background:var(--navy);color:white;box-shadow:0 5px 0 #0c1735}.light{background:white;border:1px solid #e5ddca}.hero-note{display:flex;gap:12px;align-items:center;margin-top:38px;font-size:25px;color:#dcae3a}.hero-note b,.hero-note small{display:block}.hero-note b{font-size:11px;color:var(--navy)}.hero-note small{font-size:10px;color:var(--muted);margin-top:3px}.hero-art{position:relative;min-height:475px}.rainbow{position:absolute;width:310px;height:175px;border:22px solid #efbf4d;border-bottom:0;border-radius:180px 180px 0 0;top:58px;left:50%;transform:translateX(-50%);opacity:.7}.rainbow:before,.rainbow:after{content:"";position:absolute;border:18px solid #ed8790;border-bottom:0;border-radius:160px 160px 0 0;inset:17px 17px auto;height:120px}.rainbow:after{border-color:#74b9dd;inset:34px 34px auto;height:103px}.sun{position:absolute;right:8%;top:8px;width:75px;height:75px;background:var(--gold);clip-path:polygon(50% 0,62% 34%,100% 18%,74% 50%,100% 68%,62% 67%,51% 100%,37% 67%,0 76%,28% 48%,0 20%,40% 34%)}.characters{position:absolute;inset:120px 0 40px;display:flex;align-items:flex-end;justify-content:center}.mascot{position:relative;cursor:pointer;filter:drop-shadow(0 12px 8px #26395a22);transform-origin:bottom center;animation:bob 3s ease-in-out infinite;transition:filter .2s}.mascot svg{width:100%;height:100%;overflow:visible}.mascot b{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);background:#fff;padding:5px 9px;border-radius:20px;font-size:7px;letter-spacing:1px;white-space:nowrap;box-shadow:0 3px 12px #17265318}.mascot:focus-visible{outline:3px solid #e7ad2d;outline-offset:4px;border-radius:16px}.mascot:hover{filter:drop-shadow(0 15px 12px #26395a44)}.bobo{width:150px;height:180px;z-index:3}.teddy,.captain{width:116px;height:150px;margin-left:-20px}.sunshine{width:105px;height:145px;margin-left:-18px}.teddy{animation-delay:-.7s}.captain{animation-delay:-1.3s}.sunshine{animation-delay:-1.9s}.mascot.wave svg{animation:wave .6s ease-in-out 3}.speech{position:absolute;top:23px;left:50%;transform:translateX(-50%);z-index:4;background:#fff;border:2px solid #efc75b;border-radius:18px 18px 18px 4px;padding:11px 16px;white-space:nowrap;font:700 13px 'Baloo 2',sans-serif;box-shadow:0 7px 20px #17265315}.art-caption{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:2px;font-weight:1000;color:#9b7b3e;white-space:nowrap}.hero-strip{position:absolute;bottom:0;left:0;right:0;background:var(--navy);color:#f8d879;min-height:40px;display:flex;align-items:center;justify-content:space-around;font-size:8px;font-weight:900;letter-spacing:2px}.section{padding:100px 8%}.about{background:#fffdf8}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center;margin-top:25px}.section h2{font-size:clamp(44px,5.2vw,66px);margin:18px 0}.two-col .lead{font-size:17px;color:#27365d;font-weight:800;line-height:1.7}.text-link{display:inline-block;margin-top:15px;padding-bottom:7px;border-bottom:2px solid var(--gold);font-size:12px;font-weight:900}.values{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:65px;padding:25px 20px;background:var(--navy);border-radius:16px;color:white}.values div{display:grid;grid-template-columns:32px 1fr;align-items:center;font-size:21px;color:var(--gold)}.values b{font-size:10px;letter-spacing:1px;color:white}.values small{grid-column:2;font-size:9px;color:#c8d0e0}.academics{background:#f0f7fb}.section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:38px}.section-head>p{max-width:350px}.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.stage{position:relative;min-height:320px;padding:26px;border-radius:17px;transition:.25s}.stage:hover{transform:translateY(-7px);box-shadow:0 16px 30px #17265318}.stage>span{position:absolute;right:22px;top:15px;font:800 30px 'Baloo 2';opacity:.25}.stage>div{font-size:68px;text-align:center;padding:20px}.stage small,.contact-card>small,.address-card>small{font-size:8px;letter-spacing:1.7px;font-weight:1000}.stage h3{font:800 30px 'Baloo 2';margin:5px 0}.stage p{font-size:12px;min-height:65px}.stage>a{font-size:11px;font-weight:1000;border-bottom:1px solid #bd8a21;padding-bottom:5px}.nursery{background:#ffebd5}.stage.primary{background:#dceffa}.secondary{background:#e9e3fb}.life{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}.life ul{list-style:none;padding:0;margin-top:28px}.life li{margin:19px 0;font-size:12px;font-weight:900}.life li small{display:block;color:var(--muted);font-weight:600;margin:4px 0 0 30px}.life-art{height:360px;border-radius:48% 52% 54% 46%;background:#fff1c8;display:grid;place-content:center;text-align:center;position:relative;overflow:hidden}.life-art:before,.life-art:after{content:"";position:absolute;border-radius:50%;background:#f4c84e;opacity:.5;width:180px;height:180px;right:-50px;top:-50px}.life-art:after{background:#a9d9ef;left:-50px;right:auto;top:auto;bottom:-55px}.life-art>span{font-size:45px;color:#c18d1c}.books{font-size:100px;z-index:1}.life-art>b{font-size:10px;letter-spacing:2px;z-index:1}.traditions{background:#f0f7fb}.tradition-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:35px}.tradition-grid article{padding:30px;border-radius:17px;min-height:260px;background:var(--navy);color:white}.tradition-grid article+article{background:#f8e8bd;color:var(--navy)}.tradition-grid small{font-size:8px;letter-spacing:2px;font-weight:1000;color:#f4c84e}.tradition-grid article+article small{color:#98701e}.tradition-grid h3{font:800 25px 'Baloo 2'}.tradition-grid p{font-size:13px;line-height:1.9;color:inherit}.declaration{margin-top:20px;padding:25px;border-radius:14px;background:var(--gold);text-align:center;font:800 28px 'Baloo 2'}.declaration small{display:block;font:900 8px Nunito;letter-spacing:1.5px;margin-top:10px;color:#5c4b27}.contact{text-align:center}.contact-intro>p{margin:0 auto}.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;text-align:left;margin-top:40px}.contact-card,.address-card{padding:32px;border-radius:18px}.contact-card{background:var(--navy);color:white}.contact-card>small{color:var(--gold)}.contact-card h3,.address-card h3{font:800 34px/1.05 'Baloo 2';margin:14px 0 22px}.contact-card>a:not(.btn){display:block;padding:14px 0;border-top:1px solid #ffffff2c;font-size:13px;font-weight:900}.contact-card .wa{color:var(--gold)}.address-card{background:#f8e8bd}.address-card>small{color:#98701e}.address-card p{font-size:13px;line-height:1.9;color:#5c5b60}.address-card .btn{margin-top:10px}footer{background:#111f43;color:white}.footer-top{display:flex;justify-content:space-between;align-items:center;padding:32px 7%}.footer-top p{font-size:12px;line-height:1.7;color:#c1c9d9}.footer-top>a:last-child{font-size:9px;font-weight:1000;letter-spacing:1.5px;color:var(--gold)}.footer-brand img{background:white;border-radius:50%;padding:2px}.footer-bottom{border-top:1px solid #ffffff25;padding:17px 7%;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:9px;color:#b9c2d5}.footer-bottom a{color:white;font-weight:1000;letter-spacing:1px;transition:color .2s}.footer-bottom a:hover{color:#42a5ff}.intro{position:fixed;inset:0;background:#111f43;z-index:100;display:grid;place-items:center;overflow:hidden;transition:opacity .7s,visibility .7s}.intro.hide{opacity:0;visibility:hidden;pointer-events:none}.intro-card{position:relative;z-index:2;text-align:center;color:white;padding:20px;animation:appear .8s both}.intro-card img{width:115px;height:115px;object-fit:contain;background:white;border-radius:50%;padding:5px;box-shadow:0 0 0 8px #f4c84e30}.intro-card>small{display:block;color:var(--gold);letter-spacing:3px;margin:20px 0 8px}.intro-card h2{font:800 clamp(34px,7vw,62px)/.95 'Baloo 2';margin:0}.intro-card h2 em{font-size:.43em;font-style:normal;color:var(--gold);letter-spacing:3px}.intro-card p{font-size:9px;letter-spacing:2px;color:#d5dced;margin:18px 0 24px}.intro-card button{border:0;border-radius:30px;padding:14px 23px;background:var(--gold);color:var(--navy);font-size:11px;font-weight:1000;cursor:pointer}.intro-card .skip{display:block;margin:14px auto 0;background:none;color:#b9c2d5;text-decoration:underline}.burst{position:absolute;color:var(--gold);font-size:70px;animation:twinkle 2s infinite}.burst.one{top:15%;left:16%}.burst.two{right:16%;bottom:17%;animation-delay:.7s;color:#ee8790}.confetti i{position:absolute;top:-20px;width:7px;height:13px;background:var(--c);left:var(--x);animation:fall var(--d) linear infinite;animation-delay:var(--delay)}.helper{position:fixed;z-index:25;right:16px;bottom:16px;background:white;border-radius:30px;padding:9px 13px;box-shadow:0 6px 24px #17265322;display:flex;gap:9px;align-items:center;font-size:10px;font-weight:900;opacity:0;transform:translateY(12px);transition:.3s;pointer-events:none}.helper.show{opacity:1;transform:none;pointer-events:auto}.helper span{color:#dba62d}.helper button{border:0;background:none;font-size:18px;cursor:pointer}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes wave{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg)}70%{transform:rotate(8deg)}}@keyframes twinkle{50%{transform:scale(1.35) rotate(25deg);opacity:.5}}@keyframes fall{to{top:110%;transform:translateX(35px) rotate(600deg)}}@keyframes appear{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:none}}
@media(max-width:900px){.header nav{gap:15px}.hero{padding-left:6%;padding-right:6%}.bobo{width:130px}.teddy,.captain{width:100px}.sunshine{width:90px}.section{padding:80px 6%}}
@media(max-width:680px){.announcement{font-size:7px;letter-spacing:1px}.header{height:70px;padding:0 5%}.brand img{width:44px;height:44px}.brand b{font-size:17px}.brand small{font-size:7px}.menu{display:block}.header nav{display:none;position:absolute;top:70px;left:0;right:0;background:#fffdf8;padding:16px 6% 22px;box-shadow:0 12px 20px #17265315;flex-direction:column;align-items:stretch;gap:0}.header nav.open{display:flex}.header nav a{padding:13px 4px}.header nav .nav-cta{text-align:center;margin-top:8px}.hero{display:flex;flex-direction:column;padding:50px 7% 55px;min-height:0}.hero h1{font-size:clamp(58px,16vw,80px)}.hero-art{min-height:350px;margin-top:10px}.rainbow{width:245px;height:135px;top:35px;border-width:16px}.rainbow:before{border-width:14px;inset:13px 13px auto;height:90px}.rainbow:after{border-width:13px;inset:26px 26px auto;height:77px}.characters{inset:95px -10px 35px}.bobo{width:120px;height:160px}.teddy,.captain{width:88px;height:125px;margin-left:-17px}.sunshine{width:78px;height:120px;margin-left:-17px}.speech{top:3px;font-size:10px;padding:8px 11px}.art-caption{font-size:7px}.hero-strip{font-size:6px;letter-spacing:.7px;min-height:36px}.section{padding:68px 7%}.two-col,.life{grid-template-columns:1fr;gap:16px}.section h2{font-size:50px}.values{grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}.section-head{display:block}.section-head>p{margin-top:14px}.stages{grid-template-columns:1fr;gap:14px}.stage{min-height:285px}.stage p{min-height:0}.life-art{height:290px;margin-top:10px}.tradition-grid,.contact-grid{grid-template-columns:1fr;gap:14px}.tradition-grid article{min-height:250px;padding:24px}.declaration{font-size:21px;padding:22px 15px}.declaration small{line-height:1.8}.contact-card,.address-card{padding:25px}.footer-top{display:grid;grid-template-columns:1fr auto;gap:15px}.footer-top p{grid-column:1;grid-row:2;margin:0}.footer-top>a:last-child{grid-column:2;grid-row:1/3}.footer-bottom{font-size:8px;line-height:1.8}.intro-card img{width:95px;height:95px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.intro{display:none!important}}

.stage.primary{background:#dceffa;color:var(--navy)}footer{background:#111f43;color:white}footer .footer-top{display:flex;justify-content:space-between;align-items:center;padding:32px 7%}footer .footer-top p{font-size:12px;line-height:1.7;color:#c1c9d9}footer .footer-top>a:last-child{font-size:9px;font-weight:1000;letter-spacing:1.5px;color:var(--gold)}footer .footer-brand img{background:white;border-radius:50%;padding:2px}footer .footer-bottom{border-top:1px solid #ffffff25;padding:17px 7%;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:9px;color:#b9c2d5}footer .footer-bottom a{color:white;font-weight:1000;letter-spacing:1px;transition:color .2s}footer .footer-bottom a:hover{color:#42a5ff}@media(max-width:680px){footer .footer-top{display:grid;grid-template-columns:1fr auto;gap:15px}footer .footer-top p{grid-column:1;grid-row:2;margin:0}footer .footer-top>a:last-child{grid-column:2;grid-row:1/3}}

/* Refined automatic welcome: the school crest sits inside a rotating gold orbit. */
.intro{background:radial-gradient(circle at 50% 42%,#243b75 0,#172653 48%,#0d1735 100%);transition:opacity .65s ease,visibility .65s ease}
.intro-glow{position:absolute;width:min(82vw,560px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#f4c84e20 0,transparent 68%);animation:introGlow 2.8s ease-in-out infinite}
.intro-card{width:min(92vw,620px);padding:24px 18px;animation:welcomeIn .7s both}
.crest-spinner{width:148px;height:148px;margin:0 auto 22px;position:relative;display:grid;place-items:center}
.crest-spinner img{width:94px;height:94px;object-fit:contain;border-radius:50%;background:#fff;padding:5px;position:relative;z-index:2;box-shadow:0 0 30px #f4c84e44}
.spinner-orbit{position:absolute;inset:1px;border:3px solid transparent;border-top-color:#f4c84e;border-right-color:#f4c84e;border-radius:50%;animation:crestSpin 1.25s linear infinite}
.spinner-orbit:after{content:"";position:absolute;width:10px;height:10px;background:#fff;border-radius:50%;top:12px;left:15px;box-shadow:0 0 14px #fff}
.spinner-orbit.orbit-two{inset:11px;border-width:2px;border-top-color:#8bd7f2;border-left-color:#8bd7f2;animation:crestSpinReverse 1.8s linear infinite}
.spinner-orbit.orbit-two:after{width:7px;height:7px;top:auto;bottom:8px;left:10px;background:#f7a5b0}
.intro-card>small{font-size:11px;letter-spacing:4px;margin:10px 0 8px;color:#f4c84e}
.intro-card h2{font-size:clamp(35px,7vw,58px);line-height:.98}
.intro-card h2 em{font-size:.48em;letter-spacing:2px;line-height:1.5;display:inline-block;margin-top:5px}
.intro-card p{font-size:10px;letter-spacing:2.2px;margin:18px 0 0}
.intro-loading{display:flex;justify-content:center;gap:6px;margin-top:22px}
.intro-loading i{width:6px;height:6px;border-radius:50%;background:#f4c84e;animation:loadingDot .8s ease-in-out infinite alternate}
.intro-loading i:nth-child(2){animation-delay:.18s}.intro-loading i:nth-child(3){animation-delay:.36s}
.roaming-mascots{position:fixed;inset:0;z-index:12;pointer-events:none;overflow:hidden}
.roaming-buddy{position:absolute;width:62px;height:76px;filter:drop-shadow(0 5px 5px #17265325);transform-origin:center bottom}
.roaming-buddy svg{width:100%;height:100%;overflow:visible}
.roam-bobo{left:2%;top:34%;animation:hopAcross 13s ease-in-out infinite}
.roam-teddy{right:3%;top:65%;animation:teddyWander 16s ease-in-out infinite}
.roam-captain{left:-90px;top:15%;width:66px;height:82px;animation:captainFlight 11s ease-in-out infinite}
.roam-captain:after{content:"";position:absolute;width:35px;height:45px;left:-22px;top:21px;background:linear-gradient(135deg,#ef5369 50%,transparent 52%);clip-path:polygon(100% 0,100% 100%,0 75%,35% 48%,0 0);transform-origin:right center;animation:capeFlutter .35s ease-in-out infinite alternate}
.roam-sunshine{right:4%;top:28%;width:54px;height:70px;animation:sunshineDance 12s ease-in-out infinite}
@keyframes crestSpin{to{transform:rotate(360deg)}}@keyframes crestSpinReverse{to{transform:rotate(-360deg)}}
@keyframes introGlow{50%{transform:scale(1.12);opacity:.55}}@keyframes welcomeIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes loadingDot{to{opacity:.25;transform:translateY(-5px)}}
@keyframes hopAcross{0%,100%{transform:translate(0,0) rotate(-5deg)}22%{transform:translate(12vw,-32px) rotate(8deg)}48%{transform:translate(26vw,12px) rotate(-7deg)}72%{transform:translate(12vw,-22px) rotate(6deg)}}
@keyframes teddyWander{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-8vw,-28px) rotate(-12deg)}55%{transform:translate(-18vw,10px) rotate(8deg)}80%{transform:translate(-7vw,-18px) rotate(-8deg)}}
@keyframes captainFlight{0%{transform:translate(-5vw,0) rotate(-7deg)}22%{transform:translate(32vw,7vh) rotate(4deg)}48%{transform:translate(68vw,-2vh) rotate(-5deg)}72%{transform:translate(108vw,8vh) rotate(5deg)}100%{transform:translate(118vw,0) rotate(-4deg)}}
@keyframes capeFlutter{to{transform:rotate(13deg) skewY(8deg)}}
@keyframes sunshineDance{0%,100%{transform:translate(0,0) rotate(0)}30%{transform:translate(-9vw,35px) rotate(18deg)}65%{transform:translate(-15vw,-20px) rotate(-12deg)}}
@media(max-width:680px){.crest-spinner{width:130px;height:130px}.crest-spinner img{width:82px;height:82px}.roaming-buddy{width:43px;height:56px}.roam-captain{width:48px;height:62px;top:12%}.roam-sunshine{width:39px;height:53px}.roam-bobo{top:48%}.roam-teddy{top:73%}}
@media(prefers-reduced-motion:reduce){.roaming-mascots{display:none!important}.spinner-orbit,.intro-glow,.intro-loading i{animation:none!important}}

/* Interactive mascot tour guides */
.characters{overflow:visible}.mascot{cursor:pointer;touch-action:manipulation}.mascot.guide-active{z-index:12;filter:drop-shadow(0 12px 14px #17265340)}.mascot-guide-bubble{position:absolute;left:50%;bottom:calc(100% + 20px);transform:translateX(-50%);z-index:20;width:clamp(155px,20vw,215px);white-space:normal;padding:12px 13px 11px;background:#fff;border:2px solid #efc75b;border-radius:17px 17px 17px 5px;box-shadow:0 9px 24px #17265326;text-align:left;animation:guide-pop .2s ease-out}.mascot-guide-bubble:after{content:"";position:absolute;left:calc(50% - 8px);bottom:-9px;width:14px;height:14px;background:#fff;border-right:2px solid #efc75b;border-bottom:2px solid #efc75b;transform:rotate(45deg)}.guide-message{display:block;color:#263456;font:800 11px/1.45 Nunito,Arial,sans-serif}.guide-link{display:inline-block;margin-top:8px;padding:6px 9px;border-radius:20px;background:#172653;color:#fff;font:900 9px Nunito,Arial,sans-serif;letter-spacing:.2px}.guide-link:hover,.guide-link:focus-visible{background:#dba62d;color:#172653}.mascot-guide-bubble a{position:relative;z-index:2}.mascot:focus-visible{outline:3px solid #e7ad2d;outline-offset:5px}@keyframes guide-pop{from{opacity:0;transform:translate(-50%,8px) scale(.92)}to{opacity:1;transform:translate(-50%,0) scale(1)}}.roaming-mascots,.roaming-buddy{display:none!important}@media(max-width:680px){.mascot-guide-bubble{width:155px;bottom:calc(100% + 16px);padding:9px 10px}.guide-message{font-size:10px}.guide-link{font-size:8px}.characters{overflow:visible}}


/* Guaranteed-visible mascot lineup: keep the guides in normal document flow. */
.hero-art{display:block!important;visibility:visible!important;opacity:1!important;position:relative!important;min-height:370px!important;overflow:visible!important}
.characters{position:relative!important;inset:auto!important;display:flex!important;visibility:visible!important;opacity:1!important;align-items:flex-end!important;justify-content:center!important;gap:0!important;min-height:270px!important;height:270px!important;padding:88px 4px 18px!important;margin:0 auto!important;overflow:visible!important;z-index:3!important}
.characters .mascot{display:block!important;visibility:visible!important;opacity:1!important;flex:0 1 24%!important;width:24%!important;max-width:132px!important;min-width:0!important;height:145px!important;margin:0!important;position:relative!important;z-index:3!important}
.characters .mascot svg{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;overflow:visible!important}
.characters .mascot b{display:block!important;visibility:visible!important;opacity:1!important;bottom:-8px!important;font-size:7px!important}
.characters .mascot-guide-bubble{z-index:30!important}
.hero-art .art-caption{position:relative!important;display:block!important;left:auto!important;bottom:auto!important;transform:none!important;text-align:center!important;margin:18px auto 0!important}
@media(max-width:680px){
 .hero-art{min-height:340px!important;margin-top:8px!important;padding-bottom:5px!important}
 .characters{min-height:245px!important;height:245px!important;padding:82px 0 18px!important;width:100%!important}
 .characters .mascot{flex-basis:25%!important;width:25%!important;height:125px!important;max-width:100px!important}
 .characters .mascot b{font-size:6px!important;letter-spacing:.35px!important;padding:4px 5px!important}
 .characters .mascot-guide-bubble{width:min(155px,42vw)!important;bottom:calc(100% + 13px)!important}
 .hero-art .art-caption{font-size:7px!important;letter-spacing:1.2px!important;margin-top:14px!important}
}
@media(prefers-reduced-motion:reduce){.characters .mascot{animation:none!important}}

/* Distributed mascot tour: one guide appears in each relevant section. */
.hero-art .characters{display:none!important}
.section{position:relative;overflow:visible}
.section .visitor-mascot{display:block!important;visibility:visible!important;opacity:1!important;position:absolute!important;width:94px!important;height:126px!important;max-width:94px!important;min-width:0!important;margin:0!important;z-index:5!important;cursor:pointer;animation:mascot-arrive .7s ease both}
.section .visitor-mascot svg{display:block;width:100%;height:100%;overflow:visible}
.section .visitor-mascot b{display:block;position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:8px;background:#fff;border:1px solid #f0cb63;border-radius:20px;padding:5px 8px;color:#172653;box-shadow:0 4px 12px #17265318}
#about .visitor-mascot{left:5%;top:auto;bottom:34px}
#academics .visitor-mascot{right:5%;top:34px}
#life .visitor-mascot{left:5%;right:auto;top:50%;transform:translateY(-50%)}
#contact .visitor-mascot{right:5%;top:auto;bottom:34px}
@media(max-width:680px){
 #about .visitor-mascot{left:auto;right:5%;bottom:18px;top:auto}
 #academics .visitor-mascot{right:5%;top:18px}
 #life .visitor-mascot{left:auto;right:5%;top:18px;transform:none}
 #contact .visitor-mascot{right:5%;bottom:18px;top:auto}
}
.section .visitor-mascot .mascot-guide-bubble{position:absolute;left:50%;bottom:calc(100% + 18px);width:190px;max-width:42vw;z-index:30}
.section .visitor-mascot.guide-active{z-index:40;filter:drop-shadow(0 10px 14px #17265335)}
@keyframes mascot-arrive{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:none}}
@media(max-width:680px){
 .section .visitor-mascot{width:65px!important;height:88px!important;max-width:65px!important;top:22px!important;right:5%!important}
 .section .visitor-mascot b{font-size:6px;padding:4px 6px;bottom:-7px}
 .section .visitor-mascot .mascot-guide-bubble{width:min(155px,48vw);max-width:48vw;bottom:calc(100% + 14px)}
}
@media(prefers-reduced-motion:reduce){.section .visitor-mascot{animation:none!important}}


/* 3D-inspired mascot polish: layered lighting, volume, soft contact shadows and touch feedback. */
.mascot{isolation:isolate;filter:drop-shadow(0 13px 9px #17265338);animation:mascotFloat 4s ease-in-out infinite;transition:filter .25s,transform .25s}
.mascot svg{overflow:visible;filter:drop-shadow(0 2px 1px #fff8) drop-shadow(0 7px 5px #17265330)}
.mascot.teddy svg{filter:drop-shadow(0 2px 1px #ffe0b5) drop-shadow(0 8px 5px #75452b55)}
.mascot.captain svg{filter:drop-shadow(0 2px 1px #fff) drop-shadow(0 8px 5px #17265355)}
.mascot.bobo svg{filter:drop-shadow(0 2px 1px #d8ffc5) drop-shadow(0 8px 5px #287b5155)}
.mascot.sunshine svg{filter:drop-shadow(0 2px 1px #ffe3d3) drop-shadow(0 8px 5px #633b3355)}
.mascot b{font-size:8px;padding:6px 11px;background:linear-gradient(180deg,#fff 0%,#f3f6ff 100%);border:1px solid #e5eaf5;box-shadow:0 5px 15px #17265320}
.mascot.guide-active{z-index:8;filter:drop-shadow(0 18px 15px #17265348)}
.mascot.guide-active svg{filter:drop-shadow(0 0 10px #f4c84eaa) drop-shadow(0 8px 6px #17265344)}
.mascot-guide-bubble{z-index:12;min-width:190px;max-width:230px;white-space:normal;padding:12px 14px;border:2px solid #f4c84e;border-radius:18px 18px 18px 5px;background:linear-gradient(145deg,#fff,#f7faff);box-shadow:0 12px 28px #1726532b;color:#172653}
.mascot-guide-bubble .guide-message{display:block;font-size:11px;line-height:1.45;font-weight:900}
.mascot-guide-bubble .guide-link{display:inline-block;margin-top:8px;padding:7px 11px;border-radius:20px;background:linear-gradient(180deg,#ffe58a,#efbd35);color:#172653;font-size:10px;font-weight:1000}
@keyframes mascotFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}
@media(max-width:680px){.mascot-guide-bubble{min-width:165px;max-width:195px;padding:10px 11px}.mascot-guide-bubble .guide-message{font-size:10px}}
@media(prefers-reduced-motion:reduce){.mascot{animation:none!important}}


/* Custom BGIA mascot artwork and accessible tour-guide bubbles */
.mascot .mascot-art{display:block;width:100%;height:100%;object-fit:contain;overflow:visible;filter:drop-shadow(0 9px 8px #17265335);transform-origin:50% 85%}
.section .visitor-mascot .mascot-art{width:100%;height:100%;object-fit:contain}
.mascot-guide-bubble{min-width:175px;max-width:225px;padding:11px 13px;border:2px solid #efc64d;border-radius:17px 17px 17px 5px;background:linear-gradient(145deg,#fff,#f3f7ff);box-shadow:0 10px 25px #1726532b;color:#172653}
.mascot-guide-bubble .guide-message{display:block;font:900 11px/1.4 Nunito,Arial,sans-serif;color:#172653}
.mascot-guide-bubble .guide-link{display:inline-block;margin-top:8px;padding:7px 11px;border-radius:20px;background:linear-gradient(180deg,#ffe58a,#efbd35);color:#172653;font:1000 10px/1.2 Nunito,Arial,sans-serif;text-decoration:none;box-shadow:0 3px 0 #c58c1c}
.mascot-guide-bubble .guide-link:hover,.mascot-guide-bubble .guide-link:focus-visible{background:#172653;color:#fff}
.section .visitor-mascot .mascot-guide-bubble{min-width:175px;max-width:220px}
.mascot.wave .mascot-art{animation:mascotWave .72s ease-in-out 2}
@keyframes mascotWave{0%,100%{transform:rotate(0)}20%{transform:rotate(-9deg) translateY(-3px)}45%{transform:rotate(9deg) translateY(-5px)}70%{transform:rotate(-6deg)}}
@media(max-width:680px){.mascot-guide-bubble{min-width:150px;max-width:185px;padding:9px 10px}.mascot-guide-bubble .guide-message{font-size:10px}.mascot-guide-bubble .guide-link{font-size:9px}.section .visitor-mascot .mascot-guide-bubble{min-width:150px;max-width:180px}}
@media(prefers-reduced-motion:reduce){.mascot.wave .mascot-art{animation:none!important}}


/* Place each mascot beside its own section, without crowding the section copy. */
.section>.mascot{position:absolute!important;z-index:6;width:104px;height:138px;margin:0;animation:mascotFloat 4s ease-in-out infinite}
.section>.mascot .mascot-art{width:100%;height:100%;object-fit:contain}
#about>.mascot.teddy{right:6%;top:38px}
#academics>.mascot.captain{right:6%;top:38px;width:110px;height:142px}
#life>.mascot.bobo{right:6%;top:30px;width:112px;height:148px}
#contact>.mascot.sunshine{right:6%;top:38px}
.section>.mascot .mascot-guide-bubble{bottom:calc(100% + 13px);left:50%;transform:translateX(-50%);width:190px}
#about>.mascot .mascot-guide-bubble,#academics>.mascot .mascot-guide-bubble,#life>.mascot .mascot-guide-bubble,#contact>.mascot .mascot-guide-bubble{z-index:40}
@media(max-width:680px){
 .section>.mascot{width:65px;height:88px;top:18px!important;right:5%!important}
 #academics>.mascot.captain,#life>.mascot.bobo{width:68px;height:92px}
 .section>.mascot .mascot-guide-bubble{width:min(155px,48vw);max-width:48vw;bottom:calc(100% + 12px)}
}


/* High-resolution transparent mascot PNGs */
.section>.mascot{width:150px!important;height:205px!important;display:flex;align-items:center;justify-content:center;overflow:visible}
.section>.mascot .mascot-art{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 12px 10px #13265345);transform-origin:50% 85%}
.section>.mascot .mascot-guide-bubble{position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%);z-index:50}
.section>.mascot.wave .mascot-art{animation:mascotPngWave .8s ease-in-out 2}
.section>.mascot.mascot-entered{animation:mascotWalkIn .85s cubic-bezier(.2,.8,.2,1) both,mascotFloat 4s ease-in-out 1s infinite}
@keyframes mascotPngWave{0%,100%{transform:rotate(0) translateY(0)}22%{transform:rotate(-9deg) translateY(-5px)}48%{transform:rotate(9deg) translateY(-7px)}72%{transform:rotate(-5deg)}}
@keyframes mascotWalkIn{from{opacity:0;translate:0 26px;scale:.88}to{opacity:1;translate:0 0;scale:1}}
@media(max-width:680px){.section>.mascot{width:94px!important;height:128px!important}.section>.mascot .mascot-guide-bubble{width:min(165px,48vw);max-width:48vw}}
@media(prefers-reduced-motion:reduce){.section>.mascot,.section>.mascot.wave .mascot-art{animation:none!important}}


/* BGIA character performances: each mascot has a distinct personality and motion. */
.section>.mascot{animation:none!important;will-change:transform}
.section>.mascot .mascot-art{will-change:transform;transform-origin:50% 85%}
.section>.mascot.teddy-greet .mascot-art{animation:teddyPeekWave 1.65s cubic-bezier(.2,.8,.2,1)}
.section>.mascot.bobo-hop .mascot-art{animation:boboExplorerHop 1.65s cubic-bezier(.3,.75,.25,1)}
.section>.mascot.sunshine-twirl .mascot-art{animation:sunshineWelcomeTwirl 1.7s ease-in-out}
@keyframes teddyPeekWave{0%{transform:translateX(-28px) rotate(-12deg) scale(.82)}28%{transform:translateX(4px) rotate(8deg) scale(1.05)}48%{transform:rotate(-10deg) translateY(-8px)}68%{transform:rotate(9deg) translateY(-5px)}100%{transform:translateX(0) rotate(0) scale(1)}}
@keyframes boboExplorerHop{0%,100%{transform:translateY(0) rotate(0)}18%{transform:translateY(-22px) rotate(-8deg)}35%{transform:translateY(0) rotate(5deg)}55%{transform:translateY(-30px) rotate(8deg)}72%{transform:translateY(0) rotate(-4deg)}86%{transform:translateY(-8px)}}
@keyframes sunshineWelcomeTwirl{0%{transform:rotate(0) translateY(0)}28%{transform:rotate(-12deg) translateY(-8px)}55%{transform:rotate(360deg) translateY(-12px) scale(1.05)}78%{transform:rotate(370deg) translateY(-5px)}100%{transform:rotate(360deg) translateY(0)}}
/* Captain temporarily leaves Academics and flies across the viewport, pausing to salute. */
.mascot.captain.captain-flight{position:fixed!important;left:0!important;top:12vh!important;right:auto!important;bottom:auto!important;width:clamp(100px,13vw,165px)!important;height:clamp(135px,19vw,220px)!important;max-width:none!important;z-index:10050!important;margin:0!important;display:block!important;pointer-events:auto;animation:captainStarFlight 6.8s cubic-bezier(.42,0,.2,1) both!important;filter:drop-shadow(0 15px 18px #1265e588)}
.mascot.captain.captain-flight .mascot-art{width:100%;height:100%;object-fit:contain;animation:captainCapeFlight .55s ease-in-out infinite alternate}
.mascot.captain.captain-flight::after{content:"";position:absolute;z-index:-1;left:-100px;top:42%;width:145px;height:24px;border-radius:50%;background:linear-gradient(90deg,transparent,#66d9ff99,#fff,transparent);filter:blur(8px);transform:rotate(-10deg)}
.mascot.captain.captain-flight.captain-salute .mascot-art{animation:captainSalute .7s ease-in-out 2}
.mascot.captain.captain-flight .mascot-guide-bubble{display:block!important;position:absolute!important;left:65%!important;top:-15px!important;bottom:auto!important;transform:none!important;width:180px;min-width:160px;max-width:46vw;opacity:0;animation:captainHello .35s ease 2.55s forwards}
@keyframes captainStarFlight{0%{transform:translate(-25vw,14vh) rotate(-12deg) scale(.78)}17%{transform:translate(13vw,-2vh) rotate(5deg) scale(1)}34%{transform:translate(43vw,8vh) rotate(0) scale(1.04)}42%,57%{transform:translate(47vw,8vh) rotate(-4deg) scale(1.08)}72%{transform:translate(70vw,-3vh) rotate(7deg) scale(.98)}100%{transform:translate(125vw,-17vh) rotate(12deg) scale(.82)}}
@keyframes captainCapeFlight{from{transform:rotate(-3deg) translateY(0)}to{transform:rotate(4deg) translateY(-5px)}}
@keyframes captainSalute{0%,100%{transform:rotate(0) translateY(0)}35%{transform:rotate(-9deg) translateY(-7px)}70%{transform:rotate(5deg) translateY(-4px)}}
@keyframes captainHello{to{opacity:1}}
@media(max-width:680px){.mascot.captain.captain-flight{top:14vh!important;width:100px!important;height:140px!important}.mascot.captain.captain-flight .mascot-guide-bubble{left:65%!important;max-width:43vw;font-size:10px}}
@media(prefers-reduced-motion:reduce){.mascot.captain.captain-flight,.mascot.captain.captain-flight .mascot-art,.section>.mascot.teddy-greet .mascot-art,.section>.mascot.bobo-hop .mascot-art,.section>.mascot.sunshine-twirl .mascot-art{animation:none!important}}


/* Captain Star's frame-based flight performance */
.mascot.captain.captain-flight{position:fixed!important;left:0!important;top:13vh!important;right:auto!important;bottom:auto!important;width:clamp(112px,14vw,178px)!important;height:clamp(145px,20vw,225px)!important;max-width:none!important;z-index:10050!important;margin:0!important;display:block!important;pointer-events:auto;animation:captainStarFlight 7.4s cubic-bezier(.42,0,.2,1) both!important;filter:drop-shadow(0 14px 18px #1265e577)}
.mascot.captain.captain-flight .mascot-art{width:100%!important;height:100%!important;object-fit:contain!important;animation:captainCapeFlight .48s ease-in-out infinite alternate!important}
.mascot.captain.captain-flight::after{content:"";position:absolute;z-index:-1;left:-95px;top:46%;width:150px;height:28px;border-radius:50%;background:linear-gradient(90deg,transparent,#57d9ffbb,#fff,transparent);filter:blur(9px);transform:rotate(-9deg)}
.mascot.captain.captain-flight.captain-salute .mascot-art{animation:captainSalute .65s ease-in-out 2!important}
.mascot.captain.captain-flight .mascot-guide-bubble{display:block!important;position:absolute!important;left:66%!important;top:-12px!important;bottom:auto!important;transform:none!important;width:185px;min-width:150px;max-width:44vw;opacity:1!important}
@keyframes captainStarFlight{0%{transform:translate(-24vw,16vh) rotate(-13deg) scale(.76)}16%{transform:translate(9vw,3vh) rotate(5deg) scale(.94)}34%{transform:translate(38vw,-2vh) rotate(0) scale(1.04)}40%,58%{transform:translate(42vw,-2vh) rotate(-3deg) scale(1.06)}76%{transform:translate(76vw,-8vh) rotate(8deg) scale(.96)}100%{transform:translate(125vw,-18vh) rotate(13deg) scale(.8)}}
@keyframes captainCapeFlight{from{transform:rotate(-3deg) translateY(0)}to{transform:rotate(4deg) translateY(-5px)}}
@keyframes captainSalute{0%,100%{transform:rotate(0) translateY(0)}35%{transform:rotate(-9deg) translateY(-7px)}70%{transform:rotate(5deg) translateY(-4px)}}
@media(max-width:680px){.mascot.captain.captain-flight{top:15vh!important;width:104px!important;height:138px!important}.mascot.captain.captain-flight .mascot-guide-bubble{left:66%!important;max-width:42vw;font-size:10px}}
@media(prefers-reduced-motion:reduce){.mascot.captain.captain-flight,.mascot.captain.captain-flight .mascot-art{animation:none!important}}


/* Mascot greetings: hidden by default, small and temporary after interaction. */
.mascot-guide-bubble,
.mascot.captain.captain-flight .mascot-guide-bubble {
  display: none !important;
}
.mascot.guide-active .mascot-guide-bubble {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: auto !important;
  bottom: calc(100% + 10px) !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: min(138px, 38vw) !important;
  padding: 7px 8px !important;
  border: 1px solid #efc75b !important;
  border-radius: 11px 11px 11px 4px !important;
  background: #fff !important;
  box-shadow: 0 5px 14px #17265320 !important;
  white-space: normal !important;
  opacity: 1 !important;
  animation: guide-pop .2s ease-out both !important;
}
.mascot.guide-active .mascot-guide-bubble .guide-message {
  display: block;
  font: 800 9px/1.35 Nunito,Arial,sans-serif !important;
}
.mascot.guide-active .mascot-guide-bubble .guide-link {
  display: inline-block;
  margin-top: 5px !important;
  padding: 4px 7px !important;
  border-radius: 14px;
  font: 900 8px/1.2 Nunito,Arial,sans-serif !important;
}
@media(max-width:680px) {
  .mascot.guide-active .mascot-guide-bubble {
    max-width: min(126px, 40vw) !important;
    padding: 6px 7px !important;
    bottom: calc(100% + 8px) !important;
  }
  .mascot.guide-active .mascot-guide-bubble .guide-message {font-size:8px !important}
  .mascot.guide-active .mascot-guide-bubble .guide-link {font-size:7px !important}
}


/* Mascots are deliberately distributed across the page, not stacked on the right. */
#about>.mascot.teddy{left:5%!important;right:auto!important;top:42px!important}
#academics>.mascot.captain{left:43%!important;right:auto!important;top:36px!important}
#life>.mascot.bobo{left:5%!important;right:auto!important;top:42%!important}
#contact>.mascot.sunshine{right:5%!important;left:auto!important;top:42px!important}
/* Captain's position is driven by separate take-off/flight/landing moves in script.js. */
.mascot.captain.captain-flight{position:fixed!important;left:0!important;top:0!important;right:auto!important;bottom:auto!important;animation:none!important;will-change:transform;z-index:10050!important}
.mascot.captain.captain-flight .mascot-art{animation:none!important;object-fit:contain!important}
@media(max-width:680px){
 #about>.mascot.teddy{left:4%!important;right:auto!important;top:20px!important}
 #academics>.mascot.captain{left:40%!important;right:auto!important;top:18px!important}
 #life>.mascot.bobo{left:4%!important;right:auto!important;top:20px!important}
 #contact>.mascot.sunshine{right:4%!important;left:auto!important;top:20px!important}
}


/* Final mascot layout correction: reserve a clear band above all section copy. */
#about.section,#academics.section,#life.section,#contact.section{
  padding-top:245px!important;
}
#about.section>.mascot.teddy{
  left:6%!important;right:auto!important;top:22px!important;
}
#academics.section>.mascot.captain{
  left:auto!important;right:7%!important;top:22px!important;
}
#life.section>.mascot.bobo{
  left:43%!important;right:auto!important;top:18px!important;
}
#contact.section>.mascot.sunshine{
  left:7%!important;right:auto!important;top:22px!important;
}
#about.section>.mascot,#academics.section>.mascot,#life.section>.mascot,#contact.section>.mascot{
  z-index:4!important;pointer-events:auto;
}
@media(max-width:680px){
  #about.section,#academics.section,#life.section,#contact.section{padding-top:145px!important}
  #about.section>.mascot.teddy{left:5%!important;right:auto!important;top:12px!important}
  #academics.section>.mascot.captain{left:auto!important;right:5%!important;top:12px!important}
  #life.section>.mascot.bobo{left:40%!important;right:auto!important;top:10px!important}
  #contact.section>.mascot.sunshine{left:5%!important;right:auto!important;top:12px!important}
  #about.section>.mascot,#academics.section>.mascot,#life.section>.mascot,#contact.section>.mascot{
    width:88px!important;height:120px!important;
  }
}


/* Ensure the DEVLYON credit is always readable and never squeezed out of the footer. */
footer{position:relative;isolation:isolate;overflow:visible}
footer .footer-bottom{
  position:relative;
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap!important;
  min-height:58px;
  gap:12px 20px!important;
  overflow:visible!important;
  padding:18px 7%!important;
}
footer .footer-bottom>.footer-credit{
  display:block!important;
  flex:1 1 100%!important;
  width:100%!important;
  min-width:0!important;
  position:relative!important;
  z-index:2!important;
  visibility:visible!important;
  opacity:1!important;
  text-align:center!important;
  color:#e3eaf8!important;
  font:800 12px/1.6 Nunito,Arial,sans-serif!important;
  letter-spacing:.25px!important;
  white-space:normal!important;
  overflow:visible!important;
}
footer .footer-bottom>.footer-credit a{
  display:inline-block!important;
  color:#fff!important;
  font-weight:1000!important;
  text-decoration:underline!important;
  text-decoration-color:#42a5ff!important;
  text-underline-offset:3px!important;
  letter-spacing:1px!important;
  padding:2px 3px!important;
}
footer .footer-bottom>.footer-credit a:hover,
footer .footer-bottom>.footer-credit a:focus-visible{
  color:#65b8ff!important;
  outline:2px solid #42a5ff!important;
  outline-offset:3px!important;
}
@media(max-width:680px){
  footer .footer-bottom{justify-content:center!important;text-align:center!important;padding:18px 5%!important}
  footer .footer-bottom>span:first-child{flex:1 1 100%!important;text-align:center!important}
  footer .footer-bottom>.footer-credit{font-size:12px!important;margin-top:3px!important}
}


/* The floating mascot hint must never cover the footer credit. */
.helper.footer-hidden{display:none!important;visibility:hidden!important;pointer-events:none!important}
footer .footer-bottom>.footer-credit{position:relative;z-index:3}