/* V3: typography, decorative motion and responsive composition. */

:root{
--read-scale:1;
--page-gap:108px;
--shadow:0 25px 75px #2450a518}
body{
font-size:calc(19px * var(--read-scale));
line-height:1.75;
color:var(--ink)}
body.dark{
--muted:#b8c5d9}
body:not(.dark){
--muted:#50627b}
#main{
position:relative;
z-index:1;
min-height:65vh;
overflow:clip}
.container{
width:min(1320px,calc(100% - 80px))}
.section{
padding:var(--page-gap) 0}
.lead{
font-size:calc(21px * var(--read-scale));
line-height:1.85;
max-width:620px}
.small,.muted,.live-note,.notice,.demo,.dev-note,.source-text,.field label,.check,.footer,.eyebrow,.badge,small{
font-size:max(17px,1em)}
.small,.live-note,.notice,.demo,.dev-note,.source-text,.field label,.check,.footer{
font-size:calc(17px * var(--read-scale));
line-height:1.8}
.eyebrow{
font-size:16px;
letter-spacing:.1em;
line-height:1.75}
.eyebrow:before{
height:8px;
width:8px;
flex:none}
.badge{
font-size:16px;
line-height:1.55;
padding:8px 13px;
border-radius:13px;
white-space:normal}
.btn{
font-size:calc(17px * var(--read-scale));
min-height:54px;
padding:16px 25px;
border-radius:21px;
white-space:normal}
.btn.tiny{
font-size:16px;
min-height:47px;
padding:11px 16px;
border-radius:16px}
.btn svg{
width:20px;
height:20px}
.iconbtn{
min-width:48px;
width:48px;
height:48px;
border-radius:17px}
.tab{
font-size:17px;
padding:13px 19px;
min-height:50px;
border-radius:18px}
.row{
gap:14px}
.search{
padding:14px 18px;
border-radius:21px;
min-height:56px}
.search input{
font-size:18px;
min-height:28px}
.search svg{
width:22px;
height:22px}
input,textarea,select{
font-size:calc(18px * var(--read-scale));
padding:15px 18px;
min-height:55px;
border-radius:18px;
line-height:1.65}
textarea{
min-height:130px}
.fields{
gap:23px}
.field label{
font-size:17px}
.check{
font-size:16px;
gap:13px;
line-height:1.8}
.check input{
margin-top:6px;
width:20px;
height:20px;
min-height:20px;
flex:none}
.header-inner{
height:108px;
gap:22px}
.header .logo{
width:106px}
.header .nav{
gap:21px;
margin-left:12px}
.header .nav a{
font-size:17px;
font-weight:700}
.header .btn{
font-size:17px;
min-height:51px}
.lang{
font-size:16px;
padding:10px}
.header-tools{
gap:10px}
.mobile-nav a,.mobile-nav button{
font-size:18px;
min-height:44px}
.hero{
padding-top:90px;
padding-bottom:65px}
.hero h1{
font-size:clamp(75px,7.4vw,114px);
line-height:1.07;
letter-spacing:-.07em}
.hero .lead{
font-size:calc(20px * var(--read-scale));
line-height:1.85;
max-width:530px}
.hero .eyebrow{
max-width:520px}
.hero-actions{
gap:17px;
margin-top:38px}
.hero-foot,.hero-bottom{
font-size:17px;
line-height:1.8}
.hero-foot{
margin-top:35px}
.hero-foot .rule{
width:55px;
background:var(--blue)}
.hero-bottom{
padding-top:29px;
margin-top:60px;
gap:23px;
flex-wrap:wrap}
.hero-bottom a{
margin-left:auto}
.photo-stage{
height:580px;
margin:0 5px}
.photo-stage:before{
background:linear-gradient(130deg,var(--blue),#82b5ff);
opacity:.21;
inset:25px -9px -3px 27px;
border-radius:39% 39% 35px 35px;
animation:photo-shadow 11s ease-in-out infinite}
.hero-photo{
border-radius:38% 38% 35px 35px;
transform:rotate(-3deg);
box-shadow:0 35px 80px #183f8b23;
transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.photo-stage:hover .hero-photo{
transform:rotate(-.5deg) translateY(-5px)}
.star{
width:119px;
height:119px;
right:-5px;
top:-12px;
animation:turn 38s linear infinite;
filter:drop-shadow(0 10px 17px #f14a5025)}
.photo-note{
font-size:17px;
line-height:1.7;
border-radius:26px;
left:-25px;
bottom:31px;
padding:22px 26px;
backdrop-filter:blur(15px);
background:var(--glass);
box-shadow:0 18px 55px #244a8a20}
.photo-note b{
font-size:21px}
.mini-dot{
width:11px;
height:11px;
flex:none}
.vertical-text{
font-size:16px;
right:-33px;
letter-spacing:.12em}
.intro-strip{
width:min(1320px,calc(100% - 80px));
padding:33px 0;
border-radius:33px;
background:var(--glass);
backdrop-filter:blur(12px);
box-shadow:0 18px 55px #244a8a10;
border:1px solid var(--paper)}
.intro-strip .container{
width:calc(100% - 65px);
grid-template-columns:1fr 1fr 1fr;
gap:35px}
.intro-strip p{
font-size:17px}
.intro-strip b{
font-size:20px}
.intro-strip svg{
width:32px;
height:32px}
.section-top{
margin-bottom:43px;
gap:35px}
.section-top .small{
font-size:19px;
max-width:540px}
.section-top h2{
font-size:clamp(39px,4.4vw,65px);
line-height:1.13}
.section-top .lead{
margin-bottom:3px}
.catalog-tools{
gap:25px;
align-items:start}
.catalog-tools .tabs{
flex:1;
gap:6px}
.catalog-tools .search{
flex:0 0 300px}
.courses{
gap:28px;
align-items:stretch}
.course{
border-radius:35px;
box-shadow:0 14px 40px #244a8a0b;
transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s,border-color .35s}
.course:hover{
transform:translateY(-12px) rotate(-.5deg);
box-shadow:0 32px 65px #244a8a23;
border-color:#a7bfff}
.course:nth-child(2n):hover{
transform:translateY(-12px) rotate(.5deg)}
.course-img{
height:285px}
.course-img img{
transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.course:hover img{
transform:scale(1.07)}
.course-body{
padding:29px}
.course h3{
font-size:28px;
line-height:1.24;
min-height:68px}
.course p{
font-size:18px;
line-height:1.85;
display:block;
-webkit-line-clamp:unset;
overflow:visible;
min-height:unset;
margin:18px 0 24px}
.course .more{
font-size:17px;
line-height:1.8;
align-items:start;
gap:15px}
.course .more>span:first-child{
flex:1}
.circle-arr{
width:40px;
height:40px;
flex:none;
transition:.35s}
.course:hover .circle-arr{
background:var(--blue);
color:white;
transform:rotate(-10deg)}
.course-hit{
border-radius:35px}
.course-fav{
width:48px;
height:48px;
top:18px;
right:18px;
box-shadow:0 7px 18px #14243e15}
.course-fav svg{
width:23px;
height:23px}
.course-img .badge{
font-size:16px;
max-width:calc(100% - 95px);
top:20px;
left:20px;
background:#ffffffed;
backdrop-filter:blur(8px)}
.course-actions{
margin-top:22px}
.course-actions button{
font-size:17px;
width:100%;
justify-content:space-between;
padding:13px 18px}
.about-grid{
gap:70px;
align-items:center}
.about-photo img{
height:540px;
border-radius:39px;
transition:transform .8s,box-shadow .8s}
.about-photo:hover img{
transform:rotate(-1deg) translateY(-5px);
box-shadow:var(--shadow)}
.about-photo:before{
width:180px;
height:180px;
left:-33px;
bottom:-33px;
border-width:2px;
border-color:#89aafa;
animation:about-ring 18s linear infinite}
.about-copy h2{
font-size:clamp(38px,4.2vw,60px);
margin:20px 0 30px}
.about-copy p{
font-size:19px;
line-height:1.9}
.about-line{
font-size:18px;
line-height:1.8;
padding:25px 0}
.contact-details,.contact-art{
padding:42px;
border-radius:38px}
.contact-details a{
font-size:28px;
overflow-wrap:anywhere;
line-height:1.5;
margin:12px 0 29px}
.contact-details .btn{
font-size:17px;
margin:0}
.contact-art .small{
font-size:17px}
.contact-art p{
font-size:20px!important;
line-height:1.85}
.contact-art:after{
font-size:360px;
opacity:.08;
animation:contact-plus 12s ease-in-out infinite}
.contact-grid{
gap:37px}
.source-text{
font-size:calc(18px * var(--read-scale));
line-height:1.95;
overflow-wrap:anywhere}
.modal-head{
padding:25px 30px}
.modal-head h3{
font-size:25px;
line-height:1.35}
.modal-body{
padding:32px}
.modal-body p{
font-size:18px;
line-height:1.85}
.modal-body h2{
font-size:39px}
.modal-photo{
height:320px;
border-radius:28px}
dialog{
width:min(790px,calc(100% - 30px));
border-radius:37px;
max-height:90dvh}
.form-actions{
gap:14px}
.notice{
font-size:17px;
line-height:1.85;
padding:21px 24px;
border-radius:24px}
.empty{
font-size:18px;
padding:35px;
line-height:1.85}
.age-finder{
padding:55px;
border-radius:43px;
gap:65px;
box-shadow:0 25px 75px #244a8a14}
.age-finder h2{
font-size:48px;
line-height:1.15;
margin:18px 0 24px}
.age-finder .small{
font-size:18px}
.age-big{
font-size:86px;
line-height:1.3}
.age-big small{
font-size:25px}
.age-slider{
height:38px;
min-height:38px}
.age-ticks{
font-size:17px}
.age-option{
font-size:19px;
line-height:1.6;
padding:21px 24px;
border-radius:24px;
gap:20px}
.age-option small{
font-size:17px;
line-height:1.8}
.age-option svg{
width:24px;
height:24px}
.age-result .small{
font-size:17px!important;
line-height:1.8}
.age-result a{
min-height:48px;
display:flex;
align-items:center}
.fact{
padding:34px;
border-radius:32px;
position:relative;
overflow:hidden}
.fact b{
font-size:59px;
line-height:1.3}
.fact p{
font-size:18px;
line-height:1.8}
.fact:after{
content:'';
position:absolute;
right:-30px;
top:-35px;
width:110px;
height:110px;
border:2px solid #2561ed16;
border-radius:30%;
transform:rotate(25deg);
animation:turn 35s linear infinite}
.step{
padding:39px;
border-radius:35px}
.step .step-n{
font-size:72px;
margin-bottom:30px}
.step h3{
font-size:30px;
line-height:1.25}
.step p{
font-size:19px;
line-height:1.85}
.step:after{
font-size:190px;
opacity:.065;
top:-34px;
right:0}
.step:nth-child(2):after{
content:'✳';
font-size:140px;
color:var(--red);
top:-10px;
animation:turn 50s linear infinite}
.step:nth-child(3):after{
content:'↗';
font-size:190px;
transform:rotate(-8deg)}
.staff-card{
padding:40px;
border-radius:37px;
position:relative;
overflow:hidden}
.staff-card h3{
font-size:32px;
line-height:1.3;
max-width:90%;
position:relative}
.staff-card p{
font-size:19px;
line-height:1.9;
position:relative}
.staff-card .staff-icon{
width:65px;
height:65px;
border-radius:23px;
animation:icon-rock 8s ease-in-out infinite}
.staff-card:after{
content:'✳';
position:absolute;
right:-18px;
top:25px;
font-size:150px;
color:var(--blue);
opacity:.06;
animation:turn 60s linear infinite}
.staff-card .row{
position:relative;
z-index:1}
.schedule-shell{
padding:40px;
border-radius:38px}
.schedule-bar{
gap:20px;
margin:30px 0}
.schedule-bar .field{
min-width:210px}
.seg{
border-radius:22px;
gap:6px;
padding:6px}
.seg button{
font-size:17px;
min-height:48px;
padding:12px 23px;
border-radius:16px}
.daystrip{
grid-template-columns:repeat(7,minmax(100px,1fr));
gap:13px;
overflow-x:auto;
padding:10px 2px 20px;
scroll-snap-type:x proximity}
.day-button{
min-width:100px;
padding:19px 9px;
border-radius:24px;
scroll-snap-align:start}
.day-button b{
font-size:22px}
.day-button small{
font-size:16px;
display:block;
line-height:1.7}
.public-lesson{
padding:29px;
border-radius:29px;
grid-template-columns:100px 1fr auto;
gap:28px}
.public-lesson .time{
font-size:31px}
.public-lesson h3{
font-size:25px;
line-height:1.35}
.public-lesson small{
font-size:17px;
line-height:1.75}
.public-lesson .lesson-meta{
gap:12px 22px;
margin-top:13px}
.public-lesson .slot-actions .btn{
font-size:17px}
.public-lesson:before{
width:5px}
.week-grid{
grid-template-columns:repeat(7,minmax(230px,1fr));
min-width:1680px;
gap:16px}
.week-day-head{
font-size:18px;
padding:17px;
border-radius:20px}
.week-card{
font-size:17px;
border-radius:22px;
padding:22px 19px;
gap:15px;
margin-bottom:14px}
.week-card strong{
font-size:18px;
line-height:1.65}
.week-card .time{
font-size:23px}
.unscheduled h3{
font-size:26px!important;
line-height:1.3}
.unscheduled button{
font-size:17px;
min-height:47px;
padding:12px 17px;
border-radius:17px}
.home-schedule{
padding:82px 0;
border-radius:60px;
margin:10px 20px;
box-shadow:inset 0 0 0 1px #2561ed08}
.home-schedule:after{
opacity:.065;
top:-120px;
right:-25px;
font-size:450px}
.upcoming{
padding:33px;
border-radius:33px;
transition:transform .4s,box-shadow .4s}
.upcoming:hover{
transform:translateY(-7px) rotate(-.5deg);
box-shadow:0 22px 50px #2450a51c}
.upcoming .time{
font-size:42px}
.upcoming h3{
font-size:26px;
margin:17px 0 25px}
.upcoming .small{
font-size:18px}
.faq-list{
max-width:1070px}
.faq-item summary{
font-size:24px;
line-height:1.55;
padding:30px 0}
.faq-item summary:after{
width:49px;
height:49px}
.faq-item p{
font-size:19px;
line-height:1.9}
.map{
height:470px;
border-radius:36px;
box-shadow:var(--shadow);
margin-top:32px}
.map-card{
max-width:520px;
padding:32px}
.map-card h3{
font-size:26px}
.map-card .small{
font-size:17px!important}
.way-panel{
padding:30px;
border-radius:31px}
.way-panel p{
font-size:18px;
line-height:1.9}
.form-card{
padding:37px;
border-radius:36px}
.review-box{
padding:45px;
border-radius:39px;
position:relative;
overflow:hidden}
.review-box h3{
font-size:39px}
.review-box p{
font-size:19px;
line-height:1.85}
.review-box:after{
content:'“';
font:220px/1 Georgia,serif;
position:absolute;
right:30px;
top:0;
color:var(--blue);
opacity:.055;
pointer-events:none}
.review-box .row{
position:relative;
z-index:1}
.newsletter{
padding:52px;
border-radius:41px;
gap:45px}
.newsletter h3{
font-size:43px;
line-height:1.17}
.newsletter p{
font-size:19px;
line-height:1.85}
.newsletter .check{
font-size:17px;
line-height:1.8}
.newsletter:before{
font-size:420px;
left:-50px;
top:-130px;
animation:turn 90s linear infinite;
opacity:1}
.calc-grid{
padding:44px;
gap:35px;
border-radius:39px}
.calc-grid h3{
font-size:30px}
.plan-chips button{
font-size:18px;
line-height:1.8;
padding:17px 20px;
border-radius:23px}
.calc-result{
border-radius:31px;
padding:38px}
.calc-result span{
font-size:19px}
.calc-result b{
font-size:63px}
.calc-result p{
font-size:18px;
line-height:1.8}
.gallery-item{
min-width:350px;
width:350px;
height:410px;
border-radius:35px;
transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.gallery-item:nth-child(2n){
transform:rotate(1.5deg)}
.gallery-item:nth-child(2n+1){
transform:rotate(-1.5deg)}
.gallery-item:hover{
transform:translateY(-8px) rotate(0deg)}
.gallery-strip{
padding:15px 8px 40px;
gap:25px;
scrollbar-color:#7da6ed var(--pale)}
.gallery-tools .iconbtn{
font-size:25px}
.booking-slot{
font-size:18px;
padding:20px 23px;
border-radius:24px;
line-height:1.8}
.booking-slot small{
font-size:17px}
.booking-summary{
padding:27px;
border-radius:28px;
gap:19px}
.booking-summary>div{
font-size:18px;
line-height:1.8}
.modal-body .live-note{
font-size:17px;
line-height:1.85}
.success-mark{
width:82px;
height:82px;
border-radius:29px}
.chat{
width:430px;
max-height:calc(100dvh - 145px);
border-radius:34px;
bottom:105px;
right:27px}
.chat-head{
padding:23px}
.chat-head b{
font-size:20px}
.chat-head small{
font-size:16px;
line-height:1.65;
margin-top:5px}
.chat-head .iconbtn{
width:43px;
min-width:43px;
height:43px}
.chat-log{
padding:22px;
max-height:350px;
gap:16px}
.bubble{
font-size:18px;
line-height:1.8;
padding:17px 19px;
border-radius:23px 23px 23px 6px}
.bubble.me{
border-radius:23px 23px 6px 23px}
.chat-input{
padding:17px;
gap:10px}
.chat-input input{
font-size:17px}
.chat-input .btn{
min-width:49px;
padding:12px}
.chat-actions{
gap:8px;
padding:0 20px 18px}
.chat-actions button{
font-size:16px;
line-height:1.6;
min-height:44px;
padding:9px 13px;
border-radius:15px}
.chat-disclaimer{
font-size:16px;
line-height:1.8;
padding:0 22px 20px}
.chat-toggle{
width:64px;
height:64px;
border-radius:25px;
bottom:25px;
right:27px;
transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.chat-toggle:hover{
transform:translateY(-7px) rotate(-7deg);
box-shadow:0 18px 45px #154bca52}
.chat-toggle svg{
width:28px;
height:28px}
.to-top{
width:50px;
height:50px;
bottom:108px;
right:34px;
font-size:24px}
.toast{
font-size:17px;
line-height:1.7;
padding:18px 24px;
border-radius:20px;
bottom:30px}
.privacy-demo{
position:static;
border-radius:0;
border-width:1px 0 0;
padding:15px 30px;
font-size:16px;
line-height:1.7;
text-align:center;
background:var(--paper);
box-shadow:none}
.footer{
padding:45px 0 35px}
.footer .container{
display:grid;
grid-template-columns:1fr 1.6fr;
gap:40px;
align-items:start}
.footer .row{
align-items:start;
gap:18px 25px}
.footer button,.footer a{
font-size:17px;
line-height:1.7;
padding:4px 0}
.footer .logo{
width:95px;
flex:none;
padding:5px}
.cookie{
font-size:17px;
line-height:1.8;
max-width:440px;
padding:27px;
border-radius:30px}
.cookie p{
font-size:17px}
.marquee{
padding:40px 0 15px}
.marquee-track{
gap:50px}
.marquee span{
font-size:29px;
font-weight:650}
.marquee i{
font-size:33px}
.header,.footer,.privacy-demo{
position:relative;
z-index:2}
.header{
position:sticky}
.ambient-art{
position:absolute;
top:105px;
left:0;
right:0;
height:1250px;
overflow:hidden;
pointer-events:none;
z-index:0;
isolation:isolate}
.ambient-glow{
position:absolute;
inset:-200px -150px;
background:radial-gradient(ellipse at 18% 38%,#bad0ff55,transparent 43%),radial-gradient(ellipse at 94% 55%,#ffd7dc66,transparent 40%);
animation:ambient-breathe 17s ease-in-out infinite alternate}
.dark .ambient-glow{
background:radial-gradient(ellipse at 18% 38%,#2a5bb43d,transparent 43%),radial-gradient(ellipse at 94% 55%,#aa3e4d22,transparent 40%)}
.deco-ribbon{
position:absolute;
left:-32px;
top:130px;
width:145px;
height:360px;
color:var(--blue);
opacity:.3;
stroke-dasharray:760;
stroke-dashoffset:760;
animation:ribbon-draw 2.5s .25s forwards, ribbon-float 12s 3s ease-in-out infinite}
.deco-flower{
position:absolute;
width:82px;
height:82px;
right:-20px;
top:65px;
color:var(--red);
opacity:.65;
animation:turn 46s linear infinite}
.deco-cross{
position:absolute;
display:block;
font-weight:500;
line-height:1;
color:var(--blue);
font-size:80px;
opacity:.2;
animation:decor-bob 11s ease-in-out infinite}
.cross-one{
left:3%;
top:680px;
transform:rotate(15deg)}
.cross-two{
right:3%;
top:870px;
color:var(--red);
font-size:115px;
animation-delay:-5s}
.deco-wave{
position:absolute;
right:-33px;
top:550px;
width:185px;
height:70px;
color:var(--blue);
opacity:.25;
animation:wave-drift 13s ease-in-out infinite}
.hero{
isolation:isolate}
.hero:after{
content:'';
width:220px;
height:220px;
position:absolute;
left:-150px;
bottom:50px;
border:2px solid #2561ed22;
border-radius:35%;
transform:rotate(22deg);
animation:turn 48s linear infinite;
z-index:-1}
.hero:before{
content:'';
position:absolute;
inset:0;
background:radial-gradient(ellipse at 72% 38%,#b3ceff5c,transparent 58%);
animation:ambient-breathe 14s ease-in-out infinite alternate;
z-index:-1;
pointer-events:none}
.section{
position:relative;
isolation:isolate}
.section:before{
content:'';
position:absolute;
top:70px;
right:-70px;
width:170px;
height:170px;
border:2px solid #2561ed13;
border-radius:35%;
transform:rotate(30deg);
pointer-events:none;
z-index:-1;
animation:turn 65s linear infinite}
.section:nth-of-type(3n):before{
right:auto;
left:-75px;
border-color:#f14a501c;
border-radius:50%;
width:200px;
height:200px;
top:45%}
.age-finder:before{
content:'✳';
font-size:180px;
line-height:1;
position:absolute;
right:-35px;
bottom:-35px;
color:var(--red);
opacity:.12;
animation:turn 45s linear infinite;
pointer-events:none}
.age-finder .ghost-star{
font-size:270px;
opacity:.075;
animation:turn 75s linear infinite}
.age-finder:after{
width:340px;
height:340px;
border:2px solid #2561ed18;
bottom:-215px;
left:-100px;
animation:turn 65s linear infinite}
.source-text{
scrollbar-width:thin;
scrollbar-color:#8cacdf var(--paper)}
.reveal{
will-change:auto}
.motion-ready .reveal{
transform:translateY(38px) scale(.985);
transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1);
opacity:0}
.motion-ready .reveal.visible{
transform:none;
opacity:1}
.route-enter{
animation:route-enter .65s cubic-bezier(.16,1,.3,1) both}
.search-result-enter{
animation:result-in .45s cubic-bezier(.16,1,.3,1) both}
.button-ripple{
position:absolute;
width:60px;
height:60px;
border-radius:50%;
background:currentColor;
opacity:.15;
pointer-events:none;
transform:translate(-50%,-50%) scale(0);
animation:button-ripple .7s ease-out forwards}
.btn{
position:relative;
overflow:hidden}
.read-controls{
display:flex;
gap:10px;
flex-wrap:wrap;
margin:22px 0}
.read-controls button{
min-width:65px;
padding:14px;
font-size:18px;
border:1px solid var(--line);
border-radius:17px}
.read-controls button.active{
background:var(--blue);
color:white}
.print-view{
display:none}
.site-breadcrumb{
display:flex;
gap:10px;
align-items:center;
flex-wrap:wrap;
font-size:17px;
color:var(--muted);
margin:28px auto 0}
.site-breadcrumb a{
color:var(--blue)}

@keyframes photo-shadow{
50%{
transform:rotate(7deg) translate(3px,5px)}
}
@keyframes about-ring{
to{
transform:rotate(360deg)}
}
@keyframes contact-plus{
50%{
transform:translate(-6px,-12px) rotate(8deg)}
}
@keyframes icon-rock{
50%{
transform:rotate(-7deg) translateY(-4px)}
}
@keyframes ambient-breathe{
to{
transform:scale(1.1) translate(15px,6px);
opacity:.7}
}
@keyframes ribbon-draw{
to{
stroke-dashoffset:0}
}
@keyframes ribbon-float{
50%{
transform:translate(8px,-18px) rotate(3deg)}
}
@keyframes decor-bob{
50%{
translate:0 -20px;
rotate:12deg}
}
@keyframes wave-drift{
50%{
transform:translate(-15px,-10px)}
}
@keyframes route-enter{
from{
opacity:.35;
translate:0 14px}
to{
opacity:1;
translate:0 0}
}
@keyframes result-in{
from{
opacity:0;
transform:translateY(12px)}
to{
opacity:1;
transform:none}
}
@keyframes button-ripple{
to{
transform:translate(-50%,-50%) scale(7);
opacity:0}
}

@media(max-width:1280px){
.header .nav{
display:none}
.header .hamb{
display:grid}
.mobile-nav.open{
display:flex;
gap:23px;
flex-wrap:wrap;
padding:25px 35px;
border-top:1px solid var(--line);
background:var(--paper)}
.header-tools .booking-top{
display:inline-flex}
.hero-grid{
gap:40px}
.hero h1{
font-size:clamp(72px,7.2vw,95px)}
.photo-stage{
height:530px}
.hero .lead{
font-size:19px}
.course-img{
height:255px}
.course h3{
font-size:26px}
.course-body{
padding:26px}
.public-lesson{
grid-template-columns:90px 1fr}
.public-lesson .slot-actions{
grid-column:2}
.deco-ribbon{
left:-68px;
opacity:.2}
}

@media(max-width:1000px){
.courses{
grid-template-columns:repeat(2,1fr);
gap:25px}
.catalog-tools{
flex-direction:column}
.catalog-tools .search{
flex:auto;
width:100%}
.hero-grid{
grid-template-columns:1fr;
gap:50px}
.hero h1{
font-size:96px;
max-width:700px}
.hero .lead{
font-size:21px;
max-width:700px}
.photo-stage{
height:590px;
max-width:550px;
margin:auto;
width:100%}
.hero .eyebrow{
max-width:none}
.hero-bottom{
display:flex}
.intro-strip .container{
grid-template-columns:1fr;
gap:27px}
.intro-strip .row{
align-items:start}
.intro-strip p{
font-size:18px}
.intro-strip b{
font-size:22px}
.age-finder{
grid-template-columns:1fr;
gap:35px}
.age-result{
grid-template-columns:1fr 1fr;
gap:16px}
.age-result>.small{
grid-column:1/-1}
.about-grid,.contact-grid{
grid-template-columns:1fr;
gap:45px}
.about-photo{
max-width:650px;
width:100%;
margin:auto}
.about-copy p{
font-size:20px}
.steps-grid{
grid-template-columns:1fr}
.step{
padding:36px;
display:grid;
grid-template-columns:85px 1fr;
gap:15px 30px;
align-items:start}
.step .step-n{
grid-row:1/3;
margin:0;
line-height:1}
.step p{
grid-column:2}
.step h3{
margin:0}
.staff-card .row{
flex-direction:column;
align-items:stretch}
.staff-card .btn{
width:100%}
.newsletter,.calc-grid{
grid-template-columns:1fr;
gap:35px}
.footer .container{
grid-template-columns:1fr}
.ambient-art{
height:1700px}
.deco-wave{
top:900px}
.cross-one{
top:1300px}
.cross-two{
top:1550px}
.public-lesson .slot-actions{
flex-wrap:wrap}
.section-top{
align-items:start;
flex-wrap:wrap}
.section-top .lead{
max-width:700px}
}

@media(max-width:680px){
:root{
--page-gap:72px}
.container{
width:calc(100% - 36px)}
body{
font-size:19px}
.header-inner{
height:88px;
gap:12px}
.header .logo{
width:86px}
.header-tools{
gap:7px}
.header-tools .booking-top{
display:none}
.header-tools [data-action=search],.header-tools [data-action=saved]{
display:none}
.header-tools .lang{
font-size:16px;
padding:9px 5px}
.header .iconbtn{
height:46px;
width:46px;
min-width:46px}
.mobile-nav.open{
flex-direction:column;
gap:10px;
padding:23px 25px}
.mobile-nav a,.mobile-nav button{
font-size:19px;
display:flex;
align-items:center;
padding:9px 5px}
.hero{
padding:42px 0 36px}
.hero h1{
font-size:clamp(63px,12vw,83px);
margin-top:22px;
line-height:1.07}
.hero .eyebrow{
font-size:16px;
letter-spacing:.055em}
.hero .lead{
font-size:19px;
line-height:1.85}
.hero-actions{
gap:12px;
align-items:stretch;
flex-wrap:wrap}
.hero .btn{
font-size:17px;
padding:16px 19px;
min-height:54px}
.hero-grid{
gap:45px}
.photo-stage{
height:490px;
max-width:430px;
padding-left:12px;
padding-right:14px}
.photo-note{
font-size:17px;
padding:16px 20px;
left:2px;
bottom:19px;
max-width:calc(100% - 25px)}
.photo-note b{
font-size:21px}
.star{
width:88px;
height:88px;
right:2px}
.vertical-text{
display:none}
.hero-bottom{
font-size:17px;
display:grid;
grid-template-columns:1fr;
gap:14px;
padding-top:25px;
margin-top:37px}
.hero-bottom a{
margin-left:0}
.hero-foot{
font-size:17px}
.intro-strip{
width:calc(100% - 28px);
padding:27px 0;
border-radius:28px;
margin-top:20px}
.intro-strip .container{
width:calc(100% - 42px)}
.intro-strip p{
font-size:17px}
.intro-strip b{
font-size:20px}
.intro-strip .row{
gap:18px}
.courses{
grid-template-columns:1fr;
gap:27px}
.course-img{
height:300px}
.course-body{
padding:27px}
.course h3{
font-size:28px;
min-height:unset}
.course p{
font-size:18px;
line-height:1.9}
.course .more{
font-size:17px}
.course-img .badge{
font-size:16px;
max-width:calc(100% - 100px)}
.course-fav{
width:48px;
height:48px}
.catalog-tools .tabs{
gap:5px}
.tab{
font-size:17px;
padding:12px 15px;
min-height:49px}
.section-top h2{
font-size:40px}
.section-top{
gap:25px;
margin-bottom:30px}
.section-top .small{
font-size:18px;
line-height:1.85}
.section-top .btn{
font-size:17px;
padding:14px 18px}
.age-finder{
padding:30px 24px;
border-radius:33px;
gap:29px}
.age-finder h2{
font-size:38px}
.age-finder .small{
font-size:18px}
.age-big{
font-size:75px}
.age-big small{
font-size:23px}
.age-result{
grid-template-columns:1fr}
.age-result .small{
font-size:17px!important}
.age-option{
font-size:19px;
padding:20px}
.age-option small{
font-size:17px}
.age-ticks{
font-size:17px}
.stats-grid{
grid-template-columns:1fr;
gap:19px}
.fact{
padding:27px 30px;
display:flex;
align-items:center;
gap:30px}
.fact b{
font-size:49px;
min-width:110px}
.fact p{
font-size:18px}
.about-grid{
gap:38px}
.about-photo img{
height:420px;
border-radius:33px}
.about-photo:before{
width:130px;
height:130px;
left:-15px;
bottom:-18px}
.about-copy h2{
font-size:39px}
.about-copy p{
font-size:19px}
.about-line{
font-size:18px}
.step{
display:block;
padding:31px}
.step .step-n{
font-size:61px;
margin-bottom:25px}
.step h3{
font-size:28px;
margin-bottom:17px}
.step p{
font-size:19px}
.staff-grid{
grid-template-columns:1fr}
.staff-card{
padding:30px;
border-radius:33px}
.staff-card h3{
font-size:29px;
max-width:none}
.staff-card p{
font-size:19px}
.staff-card .badge{
font-size:16px}
.schedule-shell{
padding:22px 17px;
border-radius:30px}
.schedule-bar{
gap:21px;
margin:25px 0}
.schedule-bar .field{
min-width:100%;
width:100%}
.schedule-shell .row.between{
align-items:stretch}
.schedule-shell .row.between>.search{
min-width:100%!important}
.notice{
padding:20px;
font-size:17px}
.daystrip{
display:grid;
grid-auto-flow:column;
grid-auto-columns:110px;
grid-template-columns:none;
gap:12px;
padding-bottom:20px}
.day-button{
min-width:110px;
border-radius:23px;
padding:18px 8px}
.day-button b{
font-size:21px}
.day-button small{
font-size:16px;
line-height:1.75}
.seg{
width:100%}
.seg button{
flex:1;
font-size:17px;
padding:13px 15px}
.public-lesson{
padding:24px 21px;
grid-template-columns:1fr;
gap:15px;
border-radius:27px}
.public-lesson .time{
font-size:31px}
.public-lesson h3{
font-size:25px}
.public-lesson small{
font-size:17px}
.public-lesson .slot-actions{
grid-column:auto;
gap:12px;
margin-top:7px}
.public-lesson .slot-actions .btn{
font-size:17px;
flex:1}
.public-lesson .lesson-meta{
gap:10px 20px;
margin-top:13px}
.week-card{
font-size:17px}
.week-card strong{
font-size:18px}
.week-card .time{
font-size:23px}
.week-day-head{
font-size:18px}
.schedule-shell h3{
font-size:26px!important}
.schedule-shell .live-note{
font-size:17px}
.home-schedule{
margin:0 8px;
border-radius:36px;
padding:50px 0}
.home-schedule:after{
font-size:280px;
top:-90px;
opacity:.06}
.upcoming-grid{
gap:20px}
.upcoming{
padding:28px}
.upcoming h3{
font-size:26px}
.upcoming .time{
font-size:38px}
.contact-details,.contact-art{
padding:28px;
border-radius:32px}
.contact-details a{
font-size:24px;
line-height:1.65}
.contact-details .row .btn{
font-size:17px}
.contact-art h3{
font-size:34px!important;
line-height:1.25}
.contact-art p{
font-size:19px!important}
.contact-art .small{
font-size:17px!important}
.map{
height:430px;
border-radius:30px;
margin-top:25px}
.map-card{
padding:25px}
.map-card h3{
font-size:25px}
.way-panel{
padding:25px;
border-radius:27px}
.way-panel .tabs{
flex-direction:column;
align-items:stretch}
.way-panel .tabs .tab{
text-align:left;
font-size:18px}
.way-panel p{
font-size:18px}
.form-card{
padding:26px;
border-radius:31px}
.fields{
grid-template-columns:1fr;
gap:21px}
.field.full{
grid-column:auto}
.field label{
font-size:17px}
input,textarea,select{
font-size:18px;
padding:15px 17px;
min-height:55px}
.check{
font-size:16px;
line-height:1.85}
.form-actions .btn{
font-size:17px;
flex:1}
.review-box{
padding:30px;
border-radius:32px}
.review-box h3{
font-size:32px}
.review-box p{
font-size:19px}
.review-box .row{
width:100%}
.review-box .btn{
font-size:17px}
.faq-item summary{
font-size:21px;
line-height:1.65;
padding:26px 0;
gap:18px}
.faq-item summary:after{
width:45px;
height:45px}
.faq-item p{
font-size:18px;
padding:0 0 27px}
.newsletter{
padding:31px 26px;
border-radius:34px;
gap:28px}
.newsletter h3{
font-size:37px}
.newsletter p{
font-size:18px}
.newsletter .check{
font-size:17px}
.newsletter .btn{
font-size:18px;
min-height:57px}
.calc-grid{
padding:27px 22px;
border-radius:32px}
.calc-grid h3{
font-size:28px}
.plan-chips{
gap:12px}
.plan-chips button{
width:100%;
font-size:18px;
text-align:left;
border-radius:21px}
.calc-values{
grid-template-columns:1fr;
gap:22px}
.calc-result{
padding:28px;
border-radius:27px}
.calc-result b{
font-size:53px}
.calc-result p{
font-size:18px}
.calc-result span{
font-size:18px}
.gallery-item{
width:295px;
min-width:295px;
height:360px;
border-radius:30px}
.gallery-strip{
gap:22px}
.gallery-tools .iconbtn{
height:49px;
width:49px}
.modal-head{
padding:22px}
.modal-head h3{
font-size:23px}
.modal-body{
padding:25px 22px}
.modal-body h2{
font-size:34px}
.modal-body p{
font-size:18px}
.modal-photo{
height:270px}
.booking-summary{
padding:23px;
gap:20px}
.booking-summary>div{
flex-direction:column;
gap:5px;
font-size:18px}
.booking-summary b{
text-align:left;
overflow-wrap:anywhere}
.booking-slot{
padding:19px;
font-size:18px}
.booking-slot small{
font-size:17px}
.chat{
right:12px;
bottom:99px;
width:calc(100% - 24px);
max-height:calc(100dvh - 125px);
border-radius:30px}
.chat-head{
padding:20px}
.chat-head b{
font-size:20px}
.chat-head small{
font-size:16px}
.chat-log{
padding:19px;
max-height:35dvh}
.bubble{
font-size:17px;
line-height:1.85;
padding:16px 18px}
.chat-actions{
padding:0 18px 17px}
.chat-actions button{
font-size:16px;
min-height:44px}
.chat-disclaimer{
font-size:16px;
line-height:1.75;
padding:0 19px 18px}
.chat-input{
padding:15px}
.chat-input input{
font-size:17px}
.chat-input .btn{
min-width:49px;
min-height:51px}
.chat-toggle{
right:18px;
bottom:22px;
width:62px;
height:62px;
border-radius:24px}
.to-top{
right:24px;
bottom:104px}
.toast{
font-size:17px;
padding:18px 23px;
bottom:25px}
.footer .container{
display:grid;
grid-template-columns:1fr;
gap:30px}
.footer .row{
gap:17px 22px}
.footer a,.footer button{
font-size:17px;
line-height:1.85}
.footer .logo{
display:block;
width:92px}
.privacy-demo{
font-size:16px;
padding:18px 25px;
max-width:none;
line-height:1.85}
.cookie{
left:12px;
bottom:12px;
max-width:calc(100% - 24px);
font-size:17px;
padding:25px}
.marquee{
padding:30px 0 12px}
.marquee span{
font-size:24px}
.marquee i{
font-size:29px}
.marquee-track{
gap:34px}
.ambient-art{
top:90px;
height:1900px}
.deco-ribbon{
width:95px;
left:-58px;
top:320px;
opacity:.22}
.deco-flower{
width:62px;
right:-26px;
top:70px;
opacity:.45}
.deco-wave{
right:-80px;
top:1090px;
width:160px;
opacity:.2}
.cross-one{
left:-25px;
top:1460px;
font-size:77px;
opacity:.14}
.cross-two{
right:-32px;
top:1680px;
font-size:95px;
opacity:.17}
.section:before{
width:130px;
height:130px;
right:-75px;
top:70px;
opacity:.8}
.section:nth-of-type(3n):before{
left:-105px;
width:170px;
height:170px}
.site-breadcrumb{
font-size:17px;
margin-top:24px;
gap:9px}
.source-text{
font-size:18px;
line-height:1.95}
.read-controls button{
font-size:19px}
.route-enter{
animation-duration:.5s}
}

@media(max-width:370px){
.container{
width:calc(100% - 30px)}
.header .logo{
width:76px}
.header-tools .lang{
font-size:16px;
padding:7px 3px}
.header-tools{
gap:4px}
.header .iconbtn{
width:44px;
min-width:44px;
height:44px}
.hero h1{
font-size:59px}
.hero .btn{
width:100%}
.photo-stage{
height:415px}
.photo-note{
padding:15px 16px;
font-size:16px;
line-height:1.7}
.photo-note b{
font-size:19px}
.course-body{
padding:24px}
.course-img{
height:270px}
.course h3{
font-size:26px}
.intro-strip .container{
width:calc(100% - 35px)}
.fact{
display:block}
.fact b{
font-size:50px}
.fact p{
margin-top:8px}
.modal-head h3{
font-size:21px}
.modal-head{
padding:19px}
.modal-body{
padding:23px 19px}
}

@media print{
.ambient-art,.site-breadcrumb,.privacy-demo,.chat-toggle,.to-top{
display:none!important}
body.printing-schedule>#main,body.printing-schedule>.header,body.printing-schedule>.footer,body.printing-schedule>.progress,body.printing-schedule>dialog,body.printing-schedule>.chat,body.printing-schedule>.toast{
display:none!important}
body.printing-schedule>.print-view{
display:block;
padding:20px;
font-family:Arial,sans-serif;
color:#111;
background:white}
body.printing-schedule .print-view h1{
font-size:30px;
line-height:1.3}
body.printing-schedule .print-view h2{
font-size:24px;
margin:25px 0 15px}
body.printing-schedule .print-view p{
font-size:17px;
line-height:1.8}
body.printing-schedule .print-row{
display:grid;
grid-template-columns:90px 1fr;
gap:20px;
font-size:18px;
line-height:1.7;
padding:15px 0;
border-bottom:1px solid #ccc;
break-inside:avoid}
}

@media(prefers-reduced-motion:reduce){
*,*:before,*:after{
animation:none!important;
transition:none!important;
scroll-behavior:auto!important}
.deco-ribbon{
stroke-dashoffset:0}
.motion-ready .reveal{
opacity:1;
transform:none}
.route-enter{
animation:none}
.button-ripple{
display:none}
.ambient-glow{
transform:none}
.course:hover,.gallery-item:hover,.about-photo:hover img,.photo-stage:hover .hero-photo{
transform:none}
}