:root { --ink:#242033; --muted:#666172; --purple:#6d3cf5; --pale:#f7f5fa; --lav:#ede6ff; --line:#e7e2ee; --green:#d4ee94; --yellow:#ffe2a0; --coral:#ffc2b2; --blue:#b0e6eb; --space:max(5%, calc((100% - 1280px)/2)); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { margin:0; font:16px/1.6 Inter,Arial,sans-serif; color:var(--ink); background:#fff; cursor:default; }
button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
button,a { cursor:pointer; }
input,textarea { cursor:text; }
select { cursor:pointer; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { line-height:1.16; }
h2 { font-size:clamp(30px,3.3vw,44px); letter-spacing:-1.5px; font-weight:600; margin:18px 0; }
h3 { font-size:20px; font-weight:600; }
p { color:var(--muted); }
[hidden] { display:none!important; }
.skip-link { position:fixed; top:-100px; left:20px; z-index:50; background:white; padding:12px; border-radius:10px; }
.skip-link:focus { top:12px; }
.site-header { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px var(--space); min-height:90px; background:#ffffffed; backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:12px; font-size:25px; font-weight:800; letter-spacing:-.8px; }
.brand img { width:65px; height:52px; object-fit:contain; }
.brand-caption { display:block; font-size:10px; font-weight:500; letter-spacing:0; color:var(--muted); }
.nav { display:flex; gap:25px; font-size:14px; font-weight:500; }
.nav a:hover,.text-link:hover { color:var(--purple); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; border:1px solid transparent; border-radius:14px; padding:14px 20px; min-height:48px; font-size:14px; font-weight:600; line-height:1.4; text-align:center; transition:background .18s,transform .18s; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:var(--purple); color:#fff; }
.button-primary:hover { background:#582aca; }
.button-outline { background:transparent; border-color:#d9d2e5; color:var(--ink); }
.button-outline:hover { background:var(--lav); }
.header-cta { font-size:13px; }
.button span { font-size:19px; }
.menu-toggle { display:none; background:transparent; border:0; }
.section,.section-soft,.admission { padding:80px var(--space); }
.section-soft { background:var(--pale); }
.eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 11px; border-radius:8px; background:var(--lav); color:#6131d4; font-size:11px; font-weight:700; letter-spacing:.7px; }
.eyebrow i { width:6px; height:6px; border-radius:50%; background:currentColor; }
.hero { display:grid; grid-template-columns:1.1fr 1fr; gap:5%; align-items:center; padding-top:62px; padding-bottom:65px; }
h1 { font-size:clamp(38px,4vw,58px); line-height:1.08; letter-spacing:-2.4px; font-weight:700; margin:24px 0; }
h1 span { color:var(--purple); }
.lead { font-size:17px; max-width:580px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:28px 0; }
.stats { display:flex; gap:30px; padding-top:10px; }
.stats div { display:grid; gap:4px; }
.stats strong { font-size:20px; font-weight:600; }
.stats small { font-size:12px; color:var(--muted); }
.hero-visual { position:relative; }
.hero-visual>img { width:100%; height:440px; object-fit:cover; object-position:49% center; border-radius:28px; display:block; }
.image-note { position:absolute; bottom:20px; left:20px; background:white; padding:13px 18px; border-radius:16px; display:flex; gap:12px; align-items:center; box-shadow:0 12px 24px #24203312; }
.image-note b { display:block; font-size:14px; }
.image-note small { font-size:12px; color:var(--muted); }
.note-icon { display:grid; place-items:center; width:42px; height:42px; background:var(--green); border-radius:12px; font-weight:700; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:32px; }
.section-heading>p { max-width:400px; margin-bottom:18px; }
.section-heading h2 { margin-bottom:16px; }
.audience-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.audience-card { display:block; padding:26px; border:1px solid var(--line); border-radius:20px; background:#fff; transition:border-color .18s,transform .18s; }
.audience-card:hover { border-color:var(--purple); transform:translateY(-3px); }
.age { display:inline-flex; align-items:center; padding:6px 10px; font-size:12px; font-weight:600; border-radius:8px; white-space:nowrap; }
.green { background:var(--green); }.yellow { background:var(--yellow); }.coral { background:var(--coral); }.blue { background:var(--blue); }.purple { background:var(--lav); }
.audience-card h3 { margin:22px 0 12px; }
.audience-card p { font-size:14px; }
.audience-link { display:block; color:var(--purple); font-size:13px; font-weight:600; margin-top:22px; }
.section-note { font-size:14px; margin:26px 0 0; }
.inline-button { padding:0; background:none; border:0; font-size:inherit; color:var(--purple); text-align:left; }
.tabs { --tab-index:0; position:relative; isolation:isolate; display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); padding:5px; border-radius:14px; background:#fff; flex-shrink:0; }
.tabs::before { content:""; position:absolute; z-index:-1; left:5px; top:5px; bottom:5px; width:calc((100% - 10px)/2); border-radius:10px; background:var(--purple); box-shadow:0 4px 12px #6d3cf526; transform:translateX(calc(var(--tab-index)*100%)); transition:transform .36s cubic-bezier(.22,1,.36,1); }
.tab { border:0; padding:13px 18px; border-radius:10px; font-size:13px; background:transparent; color:var(--muted); white-space:nowrap; transition:color .2s; }
.tab.active { color:#fff; }
.program-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; transition:opacity .13s,transform .13s; }
.program-grid.is-switching { opacity:0; transform:translateY(6px); }
.program-grid.is-entering .program-card:not([hidden]) { animation:course-enter .32s both; animation-delay:calc(var(--card-order,0)*30ms); }
@keyframes course-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.program-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:22px; padding:24px 20px; transition:box-shadow .18s,border-color .18s; }
.program-card:hover { border-color:#c1afe8; box-shadow:0 12px 30px #24203309; }
.program-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.icon-tile { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; font-size:13px; font-weight:700; }
.program-card h3 { font-size:20px; letter-spacing:-.5px; margin:24px 0 12px; overflow-wrap:anywhere; }
.program-card>p { font-size:14px; line-height:1.65; margin-bottom:16px; }
.tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.tags span { font-size:12px; color:var(--muted); padding:5px 8px; border-radius:6px; background:var(--pale); }
.price { font-size:17px; font-weight:600; margin:18px 0 22px; }
.program-actions { display:grid; gap:9px; }
.program-actions .button { width:100%; padding:12px; font-size:13px; }
.program-actions .button-primary { min-height:68px; }
.program-help { display:flex; justify-content:space-between; align-items:center; gap:24px; border-top:1px solid var(--line); margin-top:32px; padding-top:28px; }
.program-help strong { font-size:18px; }.program-help p { font-size:14px; margin:6px 0 0; }
.benefit-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.benefit-grid article { border-top:1px solid var(--line); padding-top:24px; }
.benefit-grid h3 { font-size:19px; margin:22px 0 12px; }
.benefit-grid p { font-size:14px; margin-bottom:0; }
.gallery-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:20px; }
.gallery-grid img { width:100%; height:300px; object-fit:cover; border-radius:22px; }
.admission { background:var(--lav); }
.admission .eyebrow { background:#fff8; }
.admission .section-heading .button { max-width:300px; }
.admission-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.admission-grid article { background:#fff; padding:26px; border-radius:20px; }
.admission-grid article>span { color:var(--purple); font-size:14px; font-weight:700; }
.admission-grid h3 { margin:28px 0 14px; }.admission-grid p { margin:0; font-size:14px; }
.team-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px; }
.team-grid img { width:100%; aspect-ratio:4/5; display:block; object-fit:cover; object-position:center top; border-radius:18px; background:var(--pale); }
.team-grid h3 { font-size:17px; margin:18px 0 7px; }
.team-role { color:var(--purple); font-size:13px; font-weight:500; }
.team-grid p { font-size:13px; margin:9px 0 0; }
.faq { display:grid; grid-template-columns:.8fr 1.2fr; gap:8%; }
.faq-intro p { max-width:320px; }.text-link { color:var(--purple); font-size:14px; font-weight:600; }
.accordion { border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); }.faq-item h3 { margin:0; }
.faq-item button { display:flex; justify-content:space-between; align-items:center; gap:20px; text-align:left; padding:22px 0; width:100%; border:0; background:none; font-size:16px; font-weight:500; color:var(--ink); }
.faq-item button b { display:grid; place-items:center; flex-shrink:0; width:30px; height:30px; border-radius:8px; background:#eae5f3; font-size:20px; font-weight:400; }
.faq-item.open button b { background:var(--purple); color:#fff; }
.faq-answer { display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows .2s; }.faq-answer p { overflow:hidden; margin:0; font-size:14px; }
.faq-item.open .faq-answer { grid-template-rows:1fr; visibility:visible; }.faq-item.open .faq-answer p { padding:0 42px 24px 0; }
.contact-section { display:grid; grid-template-columns:1fr 1fr; gap:8%; align-items:center; }.contact-phone { font-size:clamp(22px,2.5vw,32px); font-weight:600; letter-spacing:-.8px; }.contact-address { margin-top:16px; font-size:18px; }
.contact-card { background:var(--pale); border:1px solid var(--line); border-radius:24px; padding:38px; }.contact-card h3 { font-size:30px; letter-spacing:-1px; margin:24px 0 16px; }.contact-card .button { width:100%; }
.footer { padding:48px var(--space) 24px; color:#fff; background:#242033; }.footer .brand-caption { color:#c3bdce; }.footer-grid { display:grid; grid-template-columns:1.5fr 1.2fr 1fr 1.2fr; gap:32px; }.footer h3 { color:#bfb8cd; font-size:11px; letter-spacing:1px; margin:0 0 18px; }.footer-grid a:not(.brand) { display:block; font-size:13px; margin-bottom:12px; }.footer-about p { color:#c3bdce; font-size:13px; margin:16px 0; }.footer-bottom { display:flex; justify-content:space-between; gap:20px; border-top:1px solid #ffffff20; margin-top:32px; padding-top:20px; font-size:12px; color:#c3bdce; }
body.modal-open { overflow:hidden; }
dialog { border:0; padding:0; color:var(--ink); background:#fff; border-radius:24px; max-height:calc(100dvh - 40px); overflow-y:auto; box-shadow:0 24px 100px #0004; overscroll-behavior:contain; }
dialog::backdrop { background:#20172e9c; backdrop-filter:blur(6px); }
.modal-close { position:absolute; top:16px; right:16px; z-index:2; display:grid; place-items:center; width:42px; height:42px; padding:0; border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--ink); font-size:28px; line-height:1; box-shadow:0 4px 12px #0001; }
.course-modal { width:min(960px,calc(100% - 32px)); }
.course-cover { position:relative; background:var(--pale); padding:58px 24px 20px; }.course-cover img { width:100%; height:auto; max-height:380px; display:block; object-fit:contain; border-radius:12px; }.course-cover-label { display:inline-block; margin-top:16px; padding:8px 12px; border-radius:8px; background:#fff; font-size:11px; font-weight:700; letter-spacing:1px; }
.course-content { padding:32px 40px 38px; }.course-content h2 { margin:20px 0 16px; }.course-content>p { font-size:16px; max-width:760px; }
.course-photos { margin-top:28px; }.course-photos h3 { font-size:20px; }.course-photo-strip { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:12px; }.course-photo-strip img { width:100%; height:auto; display:block; border-radius:12px; }
.course-facts { display:grid; grid-template-columns:.6fr 1.1fr 1fr; gap:16px; padding:22px; background:var(--pale); border-radius:16px; margin:24px 0 32px; }.course-facts dt { color:var(--muted); font-size:12px; margin-bottom:6px; }.course-facts dd { margin:0; font-size:15px; font-weight:600; }
.course-columns { display:grid; grid-template-columns:1fr 1fr; gap:40px; }.course-columns h3 { font-size:20px; margin-bottom:16px; }.course-columns p,.course-columns li { font-size:14px; color:var(--muted); }.course-columns ul { padding-left:20px; margin:0; }.course-columns li { padding-left:4px; margin-bottom:12px; }.course-columns li::marker { color:var(--purple); }
.course-schedule { border-top:1px solid var(--line); padding-top:22px; margin-top:24px; }.course-schedule h3 { font-size:17px; }.course-schedule p { font-size:14px; }.course-schedule a { color:var(--purple); font-weight:600; }
.course-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:24px; }
.signup-modal { width:min(540px,calc(100% - 24px)); padding:48px 32px 30px; }.signup-modal h2 { font-size:36px; margin:24px 0 16px; }.signup-modal>p { font-size:14px; }.signup-modal form { display:grid; gap:18px; }.signup-modal label { display:grid; gap:7px; font-size:14px; font-weight:500; }.signup-modal input,.signup-modal select { width:100%; min-width:0; padding:13px 12px; border:1px solid #d7cfe3; border-radius:10px; background:#fff; color:var(--ink); font-size:16px; }.signup-modal select { font-size:14px; }.signup-modal form .button { width:100%; }.form-message { font-size:13px; color:#a22b2b; margin:0; }.form-message:empty { display:none; }.signup-phone { display:block; font-size:13px; color:var(--muted); margin-top:24px; text-align:center; }
:focus-visible { outline:3px solid #ab88ff; outline-offset:4px; }
.cms-extra h2 { margin-top:0; }.cms-extra-image { display:block; width:100%; height:auto; max-height:600px; object-fit:contain; border-radius:18px; }.cms-extra-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.cms-extra-gallery img { display:block; width:100%; height:auto; border-radius:16px; }.cms-extra-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }.cms-extra-cards article { padding:24px; background:var(--pale); border:1px solid var(--line); border-radius:16px; }.course-extra-blocks .cms-extra { border-top:1px solid var(--line); padding-top:24px; margin-top:24px; }.multiline { white-space:pre-line; }.cms-highlight { outline:3px solid var(--purple); outline-offset:-3px; }
@media(min-width:1500px) { .hero-visual>img { height:470px; } }
@media(max-width:1150px) { .site-header { gap:15px; }.brand-caption { display:none; }.nav { gap:18px; }.header-cta { max-width:220px; }.program-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.program-card { padding:26px; }.program-card>p { min-height:46px; }.program-actions .button-primary { min-height:48px; }.team-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.programs-heading { align-items:flex-start; flex-direction:column; gap:12px; } }
@media(max-width:800px) { .site-header { padding:12px 22px; min-height:76px; }.brand img { width:55px; height:44px; }.header-cta { display:none; }.menu-toggle { display:flex; flex-direction:column; gap:5px; padding:12px; }.menu-toggle span { display:block; width:24px; height:2px; background:var(--ink); }.nav { display:none; position:absolute; top:100%; left:0; right:0; padding:24px; background:#fff; border-bottom:1px solid var(--line); flex-direction:column; gap:18px; font-size:16px; }.nav.open { display:flex; }.hero { grid-template-columns:1fr; gap:32px; }.hero-copy { max-width:640px; }.hero-visual>img { height:340px; }.section,.section-soft,.admission { padding:56px 24px; }.section-heading { flex-direction:column; align-items:flex-start; gap:4px; }.section-heading>p { max-width:580px; }.audience-grid { grid-template-columns:1fr; gap:14px; }.audience-card { padding:24px; }.audience-card h3 { margin-top:16px; }.audience-link { margin-top:16px; }.benefit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }.gallery-grid { grid-template-columns:1fr; }.gallery-grid img { height:auto; aspect-ratio:2.1; }.admission-grid { gap:12px; }.admission-grid article { padding:20px; }.admission-grid h3 { font-size:17px; }.admission .section-heading .button { max-width:none; }.team-grid { gap:24px 16px; }.faq { grid-template-columns:1fr; gap:24px; }.contact-section { grid-template-columns:1fr; gap:24px; }.contact-card { padding:28px; }.footer { padding:40px 24px 24px; }.footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }.course-content { padding:26px; }.course-cover img { height:auto; max-height:320px; }.course-columns { gap:24px; }.course-bottom { flex-direction:column; align-items:flex-start; }.course-bottom .button { width:100%; } }
@media(max-width:520px) { html { scroll-padding-top:90px; }h1 { font-size:40px; letter-spacing:-1.7px; }h2 { font-size:31px; letter-spacing:-1px; }.section,.section-soft,.admission { padding:44px 20px; }.hero-actions { flex-direction:column; align-items:stretch; }.hero-actions .button { width:100%; }.stats { justify-content:space-between; gap:12px; }.stats strong { font-size:17px; }.stats small { font-size:10px; }.hero-visual>img { height:300px; }.image-note { bottom:14px; left:14px; padding:10px 14px; }.tabs { width:100%; }.tab { flex:1; font-size:12px; padding:12px 8px; }.program-grid { grid-template-columns:1fr; gap:16px; }.program-card { padding:24px; }.program-card>p { min-height:0; }.program-card h3 { font-size:23px; }.program-actions .button { min-height:48px; font-size:14px; }.program-help { flex-direction:column; align-items:flex-start; }.program-help .button { width:100%; }.benefit-grid { gap:24px 18px; }.benefit-grid h3 { font-size:17px; }.benefit-grid p { font-size:13px; }.admission-grid { grid-template-columns:1fr; }.admission-grid h3 { margin-top:18px; }.team-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.team-grid h3 { font-size:16px; overflow-wrap:anywhere; }.team-role,.team-grid p { font-size:12px; }.faq-item button { font-size:15px; }.contact-card h3 { font-size:27px; }.footer-grid { gap:24px 16px; }.footer-about { grid-column:1/-1; }.footer-bottom { flex-direction:column; gap:8px; }.course-modal { width:calc(100% - 16px); max-height:calc(100dvh - 16px); border-radius:18px; }.course-cover img { height:auto; max-height:240px; }.course-cover { padding:58px 16px 16px; }.course-cover-label { font-size:10px; }.course-photo-strip { grid-template-columns:1fr; }.course-content { padding:24px 20px; }.course-content h2 { font-size:29px; }.course-facts { grid-template-columns:1fr; gap:14px; padding:18px; }.course-facts>div { display:flex; justify-content:space-between; gap:14px; }.course-facts dd { text-align:right; font-size:14px; }.course-columns { grid-template-columns:1fr; gap:24px; }.signup-modal { padding:56px 22px 26px; max-height:calc(100dvh - 24px); }.signup-modal h2 { font-size:31px; }.signup-modal select { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }*,*::before,*::after { transition:none!important; animation:none!important; } }
.language-switch {display:flex;gap:3px;align-items:center;margin-left:auto;padding:4px;background:#f0ebfc;border-radius:999px;flex-shrink:0}
.language-switch a {padding:8px 10px;border-radius:999px;text-decoration:none;color:#5d5372;font-size:12px;font-weight:700;transition:background .2s,color .2s}
.language-switch a.active {background:#6d3cf5;color:#fff}.language-switch a:focus-visible {outline:2px solid #6d3cf5;outline-offset:2px}
@media(max-width:700px){.site-header {flex-wrap:wrap;gap:10px}.language-switch {order:2}.site-header .menu-toggle{order:3}.site-header .nav{order:4}.language-switch a{padding:8px}.header-cta{display:none}}
.signup-modal .phone-control {display:flex;align-items:center;border:1px solid #d7cfe3;border-radius:10px;background:#fff;overflow:hidden;direction:ltr}
.signup-modal .phone-prefix {padding-left:12px;flex:none;font-size:16px;color:var(--ink);user-select:none}
.signup-modal .phone-control input {border:0;border-radius:0;padding-left:6px;box-shadow:none;outline:none}
.signup-modal .phone-control:focus-within {outline:2px solid var(--purple,#6d3cf5);outline-offset:2px}
.form-message[data-state="pending"] {color:#65538b}
.form-message[data-state="success"] {color:#23754b}