:root{
--bg:#f6f8fc;
--surface:#fff;
--ink:#101827;
--muted:#617087;
--line:#e5eaf1;
--primary:#20b8d4;
--secondary:#6d5dfc;
--dark:#081421;
--radius:24px;
--shadow:0 20px 60px rgba(18,35,60,.09);
--font:Inter,system-ui,sans-serif}
*{
box-sizing:border-box}
html{
scroll-behavior:smooth}
body{
margin:0;
color:var(--ink);
background:var(--bg);
font:16px/1.7 var(--font);
-webkit-font-smoothing:antialiased;
overflow-x:hidden}
a{
color:inherit;
text-decoration:none}
img{
max-width:100%;
display:block}
.container{
width:min(calc(100% - 40px),1180px);
margin-inline:auto}
.site-header{
position:sticky;
top:0;
z-index:100;
background:rgba(255,255,255,.86);
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(16,24,39,.08)}
.nav-wrap{
height:78px;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px}
.brand{
display:flex;
align-items:center;
gap:12px;
min-width:0}
.brand img{
width:42px;
height:42px;
border-radius:12px;
object-fit:contain}
.brand-mark{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:13px;
color:#fff;
background:linear-gradient(135deg,var(--primary),var(--secondary));
font-weight:800;
box-shadow:0 10px 24px color-mix(in srgb,var(--primary) 25%,transparent)}
.brand-copy{
display:grid;
line-height:1.15;
min-width:0}
.brand-copy strong{
font-size:15px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis}
.brand-copy small{
margin-top:4px;
font-size:10px;
color:#7b8799;
white-space:nowrap;
max-width:230px;
overflow:hidden;
text-overflow:ellipsis}
.main-nav{
display:flex;
align-items:center;
gap:4px}
.main-nav>a{
padding:10px 12px;
border-radius:11px;
font-size:13px;
font-weight:600;
color:#68758a;
transition:.2s}
.main-nav>a:hover,.main-nav>a.active{
background:#f0f4f8;
color:var(--ink)}
.main-nav .nav-cta{
margin-left:10px;
color:#fff;
background:var(--dark);
padding-inline:16px}
.main-nav .nav-cta:hover{
background:#132438;
color:#fff}
.menu-toggle{
display:none;
width:44px;
height:44px;
border:1px solid var(--line);
background:#fff;
border-radius:12px;
align-items:center;
justify-content:center;
flex-direction:column;
gap:4px}
.menu-toggle span{
width:18px;
height:2px;
border-radius:2px;
background:var(--ink)}
.hero{
position:relative;
min-height:690px;
display:flex;
align-items:center;
overflow:hidden;
background:linear-gradient(135deg,#061321,#0c1d30 55%,#0a1424);
color:#fff}
.hero-glow{
position:absolute;
border-radius:50%;
filter:blur(4px);
pointer-events:none}
.glow-one{
width:520px;
height:520px;
left:-190px;
top:-220px;
background:radial-gradient(circle,color-mix(in srgb,var(--primary) 28%,transparent),transparent 70%)}
.glow-two{
width:600px;
height:600px;
right:-240px;
bottom:-330px;
background:radial-gradient(circle,color-mix(in srgb,var(--secondary) 24%,transparent),transparent 70%)}
.hero-grid{
display:grid;
grid-template-columns:1.03fr .97fr;
gap:70px;
align-items:center;
padding:76px 0}
.hero-copy{
position:relative;
z-index:2}
.eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
color:var(--primary);
font-size:11px;
font-weight:800;
letter-spacing:.16em;
text-transform:uppercase}
.eyebrow:before{
content:"";
width:24px;
height:2px;
border-radius:2px;
background:currentColor}
.hero h1{
max-width:760px;
margin:16px 0 22px;
font-size:clamp(48px,5.7vw,78px);
line-height:.99;
letter-spacing:-.055em}
.hero-copy>p{
max-width:650px;
color:#b5c2d3;
font-size:18px}
.hero-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:30px}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
min-height:46px;
padding:11px 17px;
border:1px solid transparent;
border-radius:13px;
font-weight:750;
font-size:13px;
transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{
transform:translateY(-2px);
box-shadow:0 12px 28px rgba(0,0,0,.12)}
.btn-primary{
color:#06131e;
background:linear-gradient(135deg,var(--primary),#71e4ef);
box-shadow:0 12px 30px color-mix(in srgb,var(--primary) 18%,transparent)}
.btn-outline{
color:#fff;
border-color:rgba(255,255,255,.2);
background:rgba(255,255,255,.04)}
.btn-outline.dark{
color:var(--ink);
border-color:var(--line);
background:#fff}
.hero-trust{
display:flex;
gap:18px;
flex-wrap:wrap;
margin-top:30px;
color:#9dadc2;
font-size:12px}
.hero-visual{
position:relative;
min-height:500px}
.hero-image{
position:absolute;
inset:10px 0 10px 10px;
border-radius:34px;
border:1px solid rgba(255,255,255,.13);
background:linear-gradient(145deg,#11283d,#091523);
background-size:cover;
background-position:center;
overflow:hidden;
box-shadow:0 35px 100px rgba(0,0,0,.28)}
.hero-image.has-image:before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(6,19,33,.05),rgba(6,19,33,.65))}
.hero-art{
position:absolute;
inset:0;
display:grid;
place-items:center}
.art-ring{
position:absolute;
border-radius:50%;
border:1px solid rgba(255,255,255,.08)}
.ring-a{
width:360px;
height:360px;
box-shadow:0 0 90px color-mix(in srgb,var(--primary) 15%,transparent)}
.ring-b{
width:250px;
height:250px;
border-color:color-mix(in srgb,var(--primary) 35%,transparent)}
.art-card{
position:relative;
width:min(370px,78%);
padding:28px;
border:1px solid rgba(255,255,255,.14);
border-radius:25px;
background:rgba(255,255,255,.09);
backdrop-filter:blur(18px);
box-shadow:0 25px 70px rgba(0,0,0,.25)}
.art-card small{
display:block;
color:var(--primary);
font-weight:800;
letter-spacing:.13em;
font-size:10px}
.art-card strong{
display:block;
font-size:28px;
line-height:1.1;
margin:12px 0}
.art-card span{
color:#b7c5d6;
font-size:12px}
.hero-badge-card{
position:absolute;
left:28px;
right:28px;
bottom:28px;
padding:17px 19px;
border-radius:18px;
background:rgba(5,15,27,.76);
backdrop-filter:blur(15px);
border:1px solid rgba(255,255,255,.12);
z-index:2}
.hero-badge-card strong{
display:block;
font-size:15px}
.hero-badge-card span{
display:block;
color:#9cafc4;
font-size:11px;
margin-top:3px}
.stats-strip{
background:#fff;
border-bottom:1px solid var(--line);
border-top:1px solid rgba(255,255,255,.08)}
.stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr)}
.stats-grid>div{
padding:30px 20px;
border-right:1px solid var(--line)}
.stats-grid>div:first-child{
padding-left:0}
.stats-grid>div:last-child{
border:0}
.stats-grid strong{
display:block;
font-size:30px;
letter-spacing:-.04em}
.stats-grid span{
display:block;
color:var(--muted);
font-size:12px;
margin-top:2px}
.section{
padding:96px 0}
.section-soft{
background:#eef3f8;
border-block:1px solid var(--line)}
.section-heading{
max-width:760px;
margin-bottom:38px}
.section-heading.center{
text-align:center;
margin-inline:auto}
.section-heading h2,.about-copy h2,.contact-info h2,.form-title h2,.page-hero h1,.page-hero+h1{
font-size:clamp(32px,4vw,50px);
line-height:1.05;
letter-spacing:-.045em;
margin:10px 0 14px}
.section-heading p,.about-copy p,.contact-info>p{
color:var(--muted);
max-width:680px}
.service-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px}
.service-card{
position:relative;
min-height:235px;
padding:28px;
border:1px solid var(--line);
border-radius:var(--radius);
background:#fff;
box-shadow:var(--shadow);
overflow:hidden;
transition:.25s transform,.25s box-shadow}
.service-card:hover{
transform:translateY(-5px);
box-shadow:0 25px 70px rgba(18,35,60,.13)}
.service-icon{
width:46px;
height:46px;
border-radius:14px;
display:grid;
place-items:center;
color:#fff;
font-size:11px;
font-weight:800;
background:linear-gradient(135deg,var(--primary),var(--secondary));
box-shadow:0 10px 25px color-mix(in srgb,var(--primary) 20%,transparent)}
.service-card h3{
font-size:19px;
margin:20px 0 8px}
.service-card p{
color:var(--muted);
font-size:14px;
margin:0}
.card-thumb{
width:100%;
height:120px;
object-fit:cover;
border-radius:15px;
margin:18px 0 -2px}
.about-home,.about-page-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:75px;
align-items:center}
.about-visual{
position:relative;
min-height:440px;
border-radius:34px;
overflow:hidden;
background:linear-gradient(135deg,#071a2b,#172b43);
box-shadow:var(--shadow)}
.about-visual:before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--primary) 35%,transparent),transparent 30%),radial-gradient(circle at 75% 75%,color-mix(in srgb,var(--secondary) 30%,transparent),transparent 34%)}
.about-orb{
position:absolute;
width:290px;
height:290px;
left:50%;
top:45%;
transform:translate(-50%,-50%);
border-radius:50%;
border:1px solid rgba(255,255,255,.14);
box-shadow:0 0 80px color-mix(in srgb,var(--primary) 17%,transparent)}
.about-orb:after{
content:"";
position:absolute;
inset:42px;
border-radius:50%;
background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 55%,transparent),color-mix(in srgb,var(--secondary) 45%,transparent));
filter:blur(2px);
opacity:.55}
.about-label{
position:absolute;
left:28px;
right:28px;
bottom:28px;
padding:18px 20px;
border-radius:18px;
background:rgba(4,13,24,.72);
backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.12);
color:#fff}
.about-label span{
display:block;
color:var(--primary);
font-size:10px;
font-weight:800;
letter-spacing:.13em}
.about-label strong{
display:block;
margin-top:4px;
font-size:17px}
.check-list{
display:grid;
grid-template-columns:1fr 1fr;
gap:9px;
margin:25px 0;
color:#34435a;
font-size:13px}
.text-link{
display:inline-flex;
align-items:center;
gap:8px;
color:#172238;
font-weight:750;
font-size:13px}
.text-link span{
color:var(--primary)}
.row-heading{
display:flex;
justify-content:space-between;
gap:30px;
align-items:flex-end}
.program-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px}
.program-card{
overflow:hidden;
border:1px solid var(--line);
border-radius:22px;
background:#fff;
box-shadow:var(--shadow)}
.program-card>img,.program-art{
width:100%;
height:190px;
object-fit:cover}
.program-art{
display:grid;
place-items:center;
color:#fff;
font-size:11px;
font-weight:800;
letter-spacing:.15em;
background:linear-gradient(135deg,#10283e,#27385e)}
.program-body{
padding:23px}
.program-body h3,.program-body h2{
font-size:21px;
line-height:1.2;
margin:12px 0 8px}
.program-body p{
color:var(--muted);
font-size:13px;
margin:0}
.tag{
display:inline-flex;
padding:5px 9px;
border-radius:999px;
background:#e9f8fb;
color:#148fa7;
font-size:10px;
font-weight:800;
letter-spacing:.09em}
.program-meta{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-top:17px}
.program-meta span{
padding:6px 9px;
border:1px solid var(--line);
border-radius:9px;
color:#647188;
font-size:11px}
.program-wide{
display:grid;
grid-template-columns:330px 1fr}
.program-wide>img,.program-wide>.program-art{
height:100%;
min-height:280px}
.program-wide .program-body{
padding:32px}
.program-wide .program-body .btn{
margin-top:22px}
.centre-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px}
.centre-card{
overflow:hidden;
border:1px solid var(--line);
border-radius:22px;
background:#fff;
box-shadow:var(--shadow)}
.centre-card>img,.centre-placeholder{
height:180px;
width:100%;
object-fit:cover}
.centre-placeholder{
display:grid;
place-items:center;
color:#fff;
font-weight:800;
font-size:36px;
background:linear-gradient(135deg,#0d263c,#26385c)}
.centre-card>div:not(.centre-placeholder){
padding:21px}
.centre-card h3,.centre-card h2{
margin:11px 0 7px}
.centre-card p{
color:var(--muted);
font-size:13px}
.centre-wide{
display:grid;
grid-template-columns:340px 1fr;
margin-bottom:18px}
.centre-wide>img,.centre-wide>.centre-placeholder{
height:100%;
min-height:300px}
.centre-wide>div:last-child{
padding:30px}
.facility-list{
display:flex;
gap:8px;
flex-wrap:wrap;
margin:18px 0}
.facility-list span{
padding:7px 10px;
border-radius:10px;
background:#f2f6f9;
color:#56657b;
font-size:12px}
.gallery-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px}
.gallery-grid figure{
position:relative;
height:260px;
margin:0;
overflow:hidden;
border-radius:20px;
background:#dfe7ef}
.gallery-grid img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s}
.gallery-grid figure:hover img{
transform:scale(1.05)}
.gallery-grid figcaption{
position:absolute;
left:12px;
right:12px;
bottom:12px;
padding:13px 14px;
border-radius:14px;
background:rgba(4,13,24,.75);
backdrop-filter:blur(12px);
color:#fff}
.gallery-grid figcaption strong,.gallery-grid figcaption span{
display:block}
.gallery-grid figcaption span{
font-size:11px;
color:#b8c4d4;
margin-top:3px}
.testimonial-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px}
.testimonial{
padding:28px;
border:1px solid var(--line);
border-radius:22px;
background:#fff;
box-shadow:var(--shadow)}
.quote{
font-size:52px;
line-height:.7;
color:var(--primary);
font-family:Georgia,serif}
.testimonial p{
font-size:14px;
color:#4e5c70;
min-height:90px}
.person{
display:flex;
align-items:center;
gap:11px;
border-top:1px solid var(--line);
padding-top:17px}
.person img{
width:42px;
height:42px;
border-radius:50%;
object-fit:cover}
.person strong,.person span{
display:block}
.person strong{
font-size:13px}
.person span{
font-size:11px;
color:var(--muted)}
.cta-section{
padding:30px 0 80px;
background:#eef3f8}
.cta-box{
display:flex;
align-items:center;
justify-content:space-between;
gap:35px;
padding:50px 55px;
border-radius:30px;
color:#fff;
background:linear-gradient(135deg,#081724,#11283c);
box-shadow:0 25px 80px rgba(9,22,37,.18)}
.cta-box h2{
font-size:clamp(32px,4vw,48px);
line-height:1.05;
margin:10px 0}
.cta-box p{
color:#aebdce;
max-width:620px}
.page-hero{
padding:85px 0 60px;
background:linear-gradient(135deg,#071625,#10253b);
color:#fff}
.page-hero h1{
max-width:850px}
.page-hero p{
max-width:720px;
color:#aebed0;
font-size:17px}
.contact-grid{
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:70px;
align-items:start}
.contact-detail{
padding:17px 0;
border-bottom:1px solid var(--line)}
.contact-detail span{
display:block;
font-size:10px;
color:#8996a8;
font-weight:800;
letter-spacing:.12em}
.contact-detail strong,.contact-detail a{
display:block;
margin-top:5px;
color:var(--ink);
font-size:14px}
.contact-form{
padding:30px;
border:1px solid var(--line);
border-radius:26px;
background:#fff;
box-shadow:var(--shadow)}
.form-title{
margin-bottom:20px}
.form-title h2{
font-size:30px}
.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px}
.contact-form label{
display:block;
font-size:12px;
font-weight:700;
color:#344257;
margin-bottom:13px}
.contact-form input,.contact-form textarea{
display:block;
width:100%;
margin-top:7px;
padding:13px 14px;
border:1px solid #dce3ec;
border-radius:12px;
background:#f9fbfd;
color:var(--ink);
font:inherit;
outline:none}
.contact-form input:focus,.contact-form textarea:focus{
border-color:color-mix(in srgb,var(--primary) 60%,#dce3ec);
box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 10%,transparent)}
.contact-form textarea{
resize:vertical}
.honeypot{
position:absolute!important;
left:-10000px!important;
width:1px!important;
height:1px!important}
.form-message{
padding:12px 14px;
border-radius:12px;
margin-bottom:15px;
font-size:13px}
.form-message.success{
color:#146443;
background:#e8f8f0;
border:1px solid #bdebd4}
.form-message.error{
color:#8d2b2b;
background:#fff0f0;
border:1px solid #f1c9c9}
.map-card{
min-height:220px;
padding:40px;
border-radius:26px;
background:#fff;
border:1px solid var(--line);
box-shadow:var(--shadow)}
.map-card h2{
font-size:32px;
margin:10px 0}
.map-card p{
color:var(--muted)}
.foundation-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px}
.foundation-grid article{
padding:30px;
border:1px solid var(--line);
border-radius:22px;
background:#fff;
box-shadow:var(--shadow)}
.foundation-grid article>span{
color:var(--primary);
font-weight:800;
font-size:11px}
.foundation-grid h3{
font-size:22px;
margin:16px 0 8px}
.foundation-grid p{
color:var(--muted);
font-size:14px}
.rich-copy,.cms-content{
color:#556378;
line-height:1.85}
.cms-content img{
max-width:100%;
height:auto;
border-radius:18px}
.cms-content h2,.cms-content h3{
color:var(--ink)}
.page-content{
max-width:850px}
.empty-card{
padding:50px;
text-align:center;
border:1px solid var(--line);
border-radius:22px;
background:#fff}
.footer{
padding:65px 0 20px;
background:#071421;
color:#fff}
.footer-main{
display:grid;
grid-template-columns:1.4fr .7fr 1fr;
gap:60px}
.footer-brand>p{
max-width:430px;
color:#91a2b7;
font-size:13px}
.footer h3{
margin:5px 0 13px;
font-size:13px}
.footer-main>div>a:not(.brand){
display:block;
color:#91a2b7;
font-size:13px;
margin:7px 0}
.footer-main>div>a:hover{
color:#fff}
.footer-main>div>p{
color:#91a2b7;
font-size:13px}
.footer .brand{
color:#fff}
.socials{
display:flex;
gap:7px;
margin-top:18px}
.socials a{
display:grid!important;
place-items:center;
width:32px;
height:32px;
border:1px solid rgba(255,255,255,.12);
border-radius:9px;
color:#9cafc1!important;
font-size:10px!important;
margin:0!important}
.footer-bottom{
display:flex;
justify-content:space-between;
gap:20px;
border-top:1px solid rgba(255,255,255,.09);
margin-top:45px;
padding-top:18px;
color:#6f8196;
font-size:11px}

@media(max-width:980px){
.main-nav{
display:none;
position:absolute;
left:20px;
right:20px;
top:78px;
padding:10px;
background:#fff;
border:1px solid var(--line);
border-radius:16px;
box-shadow:0 20px 50px rgba(20,30,45,.12);
flex-direction:column;
align-items:stretch}
.main-nav.open{
display:flex}
.main-nav>a{
padding:12px}
.main-nav .nav-cta{
margin:4px 0 0;
text-align:center}
.menu-toggle{
display:flex}
.hero-grid,.about-home,.about-page-grid{
grid-template-columns:1fr}
.hero{
min-height:auto}
.hero-grid{
padding:70px 0}
.hero-visual{
min-height:470px}
.service-grid,.program-grid,.centre-grid,.testimonial-grid{
grid-template-columns:1fr 1fr}
.program-wide,.centre-wide{
grid-template-columns:1fr}
.program-wide>img,.program-wide>.program-art,.centre-wide>img,.centre-wide>.centre-placeholder{
height:260px;
min-height:0}
.footer-main{
grid-template-columns:1fr 1fr}
.footer-brand{
grid-column:1/-1}
}

@media(max-width:640px){
.container{
width:min(calc(100% - 28px),1180px)}
.nav-wrap{
height:70px}
.main-nav{
top:70px}
.brand-copy small{
display:none}
.hero-grid{
padding:58px 0}
.hero h1{
font-size:46px}
.hero-copy>p{
font-size:16px}
.hero-visual{
min-height:390px}
.hero-image{
inset:0}
.art-ring.ring-a{
width:270px;
height:270px}
.art-ring.ring-b{
width:190px;
height:190px}
.art-card{
width:78%;
padding:22px}
.art-card strong{
font-size:22px}
.hero-badge-card{
left:15px;
right:15px;
bottom:15px}
.stats-grid{
grid-template-columns:1fr 1fr}
.stats-grid>div{
padding:22px 15px;
border-bottom:1px solid var(--line)}
.stats-grid>div:nth-child(2){
border-right:0}
.stats-grid>div:nth-child(3),.stats-grid>div:nth-child(4){
border-bottom:0}
.section{
padding:68px 0}
.service-grid,.program-grid,.centre-grid,.testimonial-grid,.foundation-grid{
grid-template-columns:1fr}
.row-heading{
align-items:flex-start;
flex-direction:column}
.about-home,.about-page-grid{
gap:38px}
.about-visual{
min-height:350px}
.check-list{
grid-template-columns:1fr}
.cta-box{
padding:34px 25px;
align-items:flex-start;
flex-direction:column}
.contact-grid{
grid-template-columns:1fr;
gap:35px}
.form-row{
grid-template-columns:1fr}
.program-wide .program-body,.centre-wide>div:last-child{
padding:25px}
.gallery-grid{
grid-template-columns:1fr 1fr}
.gallery-grid figure{
height:190px}
.footer-main{
grid-template-columns:1fr;
gap:32px}
.footer-brand{
grid-column:auto}
.footer-bottom{
flex-direction:column;
gap:5px}
.page-hero{
padding:65px 0 45px}
.page-hero h1{
font-size:42px}
}

@media(prefers-reduced-motion:reduce){
*,*:before,*:after{
scroll-behavior:auto!important;
animation:none!important;
transition:none!important}
}

@media(prefers-reduced-motion:no-preference){
.has-reveal-animations .reveal{
opacity:0;
transform:translateY(16px);
transition:opacity .55s ease,transform .55s ease}
.has-reveal-animations .reveal.is-visible{
opacity:1;
transform:none}
}