* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #F8FAFB; --bg-warm: #FAF8F5;
  --blue-50: #F0F5FA; --blue-100: #E3ECF5; --blue-200: #C7D9EB;
  --blue-400: #6B8DB5; --blue-500: #4A6FA5; --blue-600: #3A5A8A; --blue-900: #1A2B45;
  --ink: #1C2A3D; --ink-light: #4A5568; --ink-muted: #8694A7;
  --line: #E2E8F0; --line-light: #EDF1F5;
}
html { scroll-behavior: smooth; }
body {
  font-family:var(--font-ui); font-weight: 400; color: var(--ink);
  background: var(--bg); line-height: 1.6; overflow-x: hidden;
}
body.zh h1, body.zh h2, body.zh h3, body.zh h4, body.zh .nav-logo, body.zh .phil-num,
body.zh .marquee-item, body.zh .testimonial-main .quote, body.zh .testimonial-sm .quote,
body.zh .hero-stat h3, body.zh .step-num, body.zh .monogram, body.zh .sp-schedule .sch-day { font-family:var(--font-ui); }
body.zh .hero h1 em, body.zh .philosophy-left h2 em, body.zh .subjects-header h2 em,
body.zh .testimonials-header h2 em, body.zh .admissions-left h2 em,
body.zh .sp-title em, body.zh .nav-logo span, body.zh .sp-tagline,
body.zh .testimonial-main .quote, body.zh .testimonial-sm .quote { font-style: normal; }

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1.25rem 3rem;
  display: flex; align-items: center; justify-content: space-between; transition: all .4s ease; background: transparent;
}
nav.scrolled { background: rgba(248,250,251,.92); backdrop-filter: blur(20px); border-bottom: 1px solid var(--line-light); padding: .9rem 3rem; }
.nav-logo { font-family:var(--font-ui); font-size: 1.5rem; font-weight: 500; color: var(--ink); letter-spacing: .02em; text-decoration: none; }
.nav-logo span { color: var(--blue-500); font-weight:400; font-style: italic; }
.nav-right { display: flex; align-items: center; gap: 2rem; }
.lang-switch { display: flex; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: #fff; }
.lang-btn { padding: .45rem .85rem; background: transparent; border: none; font-family:var(--font-ui); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); cursor: pointer; transition: all .3s; font-weight: 500; }
.lang-btn.active { background: var(--blue-900); color: #fff; }
.lang-btn:hover:not(.active) { color: var(--ink); background: var(--blue-50); }
.nav-links { display: flex; align-items: center; gap: 2.5rem; list-style: none; }
.nav-links a { text-decoration: none; color: var(--ink-light); font-size: .82rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; transition: color .3s; position: relative; }
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px; background:var(--blue-500); transition:width .3s ease; }
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }
.nav-cta { padding: .6rem 1.6rem; background: var(--blue-900); color: #fff !important; border-radius: 2px; font-size: .78rem !important; letter-spacing: .08em !important; transition: all .3s !important; }
.nav-cta::after { display: none !important; }
.nav-cta:hover { background: var(--blue-600) !important; }
.mobile-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
.mobile-toggle span { width: 24px; height: 1.5px; background: var(--ink); transition: all .3s; }

.hero { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 8rem 3rem 4rem; gap: 4rem; position: relative; }
.hero-content { position: relative; z-index: 2; max-width: 560px; }
.hero-tag { display:inline-flex; align-items:center; gap:.75rem; font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; color:var(--blue-500); margin-bottom:2rem; font-weight:500; }
.hero-tag::before { content:''; width:32px; height:1px; background:var(--blue-400); }
.hero h1 { font-family:var(--font-ui); font-size:clamp(2.8rem,5vw,4.2rem); font-weight:400; line-height:1.15; color:var(--ink); margin-bottom:1.5rem; }
body.zh .hero h1 { font-size: clamp(2.4rem,4.5vw,3.6rem); line-height: 1.35; }
.hero h1 em { font-style: italic; color: var(--blue-600); font-weight:400; }
.hero-desc { font-size:1rem; color:var(--ink-light); line-height:1.8; margin-bottom:2.5rem; max-width:440px; font-weight:400; }
.hero-actions { display: flex; align-items: center; gap: 2rem; }
.btn-primary { display:inline-flex; align-items:center; gap:.75rem; padding:1rem 2rem; background:var(--blue-900); color:#fff; text-decoration:none; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500; transition:all .3s; border:none; cursor:pointer; font-family:var(--font-ui); }
.btn-primary:hover { background: var(--blue-600); }
.btn-primary svg { width:16px; height:16px; transition:transform .3s; }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-ghost { display:inline-flex; align-items:center; gap:.5rem; color:var(--ink); text-decoration:none; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; font-weight:500; transition:color .3s; border-bottom:1px solid var(--line); padding-bottom:2px; background:none; cursor:pointer; font-family:var(--font-ui); }
.btn-ghost:hover { color: var(--blue-600); border-color: var(--blue-400); }
.hero-image { position: relative; z-index: 2; height: 75vh; max-height: 680px; }
.hero-image .art-frame { width:100%; height:100%; background:#fff; border:1px solid var(--line-light); display:flex; align-items:center; justify-content:center; padding:2rem; }
.hero-image .art-frame svg { width:100%; height:100%; }
.hero-image img { width:100%; height:100%; object-fit:cover; display:block; }


.section-label { display:flex; align-items:center; gap:1rem; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--blue-500); font-weight:500; margin-bottom:1.5rem; }
.section-label::before { content:''; width:24px; height:1px; background:var(--blue-400); }

.philosophy { padding:8rem 3rem; display:grid; grid-template-columns:1fr 1.2fr; gap:6rem; max-width:1300px; margin:0 auto; }
.philosophy-left h2 { font-family:var(--font-ui); font-size:clamp(2rem,3.5vw,3rem); font-weight:400; line-height:1.2; margin-bottom:2rem; }
body.zh .philosophy-left h2 { line-height: 1.5; }
.philosophy-left h2 em { font-style:italic; color:var(--blue-600); font-weight:400; }
.philosophy-left p { color:var(--ink-light); line-height:1.9; font-weight:400; font-size:.95rem; margin-bottom:1.25rem; }
.philosophy-right { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-content:start; }
.phil-card { padding:2rem; background:#fff; border:1px solid var(--line-light); transition:all .4s ease; position:relative; }
.phil-card:hover { border-color:var(--blue-200); transform:translateY(-4px); box-shadow:0 12px 40px rgba(26,43,69,.06); }
.phil-card:first-child { grid-column: span 2; }
.phil-num { font-family:var(--font-ui); font-size:2.5rem; color:var(--blue-200); font-weight:400; line-height:1; margin-bottom:1rem; }
.phil-card h3 { font-family:var(--font-ui); font-size:1.3rem; font-weight:500; margin-bottom:.75rem; }
.phil-card p { font-size:.85rem; color:var(--ink-light); line-height:1.7; font-weight:400; }

.subjects { padding:6rem 3rem 8rem; background:var(--blue-50); position:relative; }
.subjects-inner { max-width:1300px; margin:0 auto; }
.subjects-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:4rem; }
.subjects-header h2 { font-family:var(--font-ui); font-size:clamp(2rem,3.5vw,3rem); font-weight:400; line-height:1.2; }
body.zh .subjects-header h2 { line-height: 1.5; }
.subjects-header h2 em { font-style:italic; color:var(--blue-600); font-weight:400; }
.subjects-header p { max-width:360px; text-align:right; color:var(--ink-light); font-size:.9rem; line-height:1.7; font-weight:400; }
.subjects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--blue-200); border:1px solid var(--blue-200); }
.subject-cell { background:#fff; padding:2.5rem; transition:all .4s ease; cursor:pointer; position:relative; overflow:hidden; }
.subject-cell:hover { background: var(--bg); }
.subject-cell:focus-visible { outline:2px solid var(--blue-500); outline-offset:-2px; }
.subject-icon { width:40px; height:40px; margin-bottom:1.5rem; color:var(--blue-500); }
.subject-cell h3 { font-family:var(--font-ui); font-size:1.4rem; font-weight:500; margin-bottom:.75rem; }
.subject-cell p { font-size:.83rem; color:var(--ink-light); line-height:1.7; font-weight:400; margin-bottom:1.25rem; }
.subject-levels { display:flex; flex-wrap:wrap; gap:.4rem; }
.subject-levels span { font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; padding:.3rem .7rem; background:var(--blue-50); color:var(--blue-600); font-weight:500; }
.view-link { display:inline-flex; align-items:center; gap:.5rem; margin-top:1.25rem; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-500); font-weight:500; opacity:0; transform:translateY(4px); transition:all .3s ease; }
.subject-cell:hover .view-link, .subject-cell:focus-visible .view-link { opacity:1; transform:none; }
.view-link svg { width:14px; height:14px; }
.subject-thumb { width:100%; height:150px; object-fit:cover; margin-bottom:1.4rem; filter:grayscale(20%); transition:filter .5s ease; background:var(--blue-100); }
.subject-cell:hover .subject-thumb { filter:grayscale(0%); }
.subjects-empty { grid-column:1/-1; background:#fff; padding:4rem 2rem; text-align:center; color:var(--ink-muted); font-size:.92rem; }

body.zh .testimonials-header h2 { line-height: 1.5; }
body.zh .testimonial-main .quote { font-size:1.15rem; line-height:1.9; }
body.zh .testimonial-main .quote::before { content:'「'; font-size:2.5rem; }
.monogram { width:48px; height:48px; border-radius:50%; background:var(--blue-100); color:var(--blue-600); display:flex; align-items:center; justify-content:center; font-family:var(--font-ui); font-size:1.1rem; font-weight:500; flex-shrink:0; overflow:hidden; }
.monogram img { width:100%; height:100%; object-fit:cover; }
body.zh .testimonial-sm .quote { font-style:normal; font-size:.95rem; line-height:1.8; }

.admissions { padding:8rem 3rem; max-width:1300px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; }
.admissions-left h2 { font-family:var(--font-ui); font-size:clamp(2rem,3.5vw,3rem); font-weight:400; line-height:1.2; margin-bottom:1.5rem; }
body.zh .admissions-left h2 { line-height: 1.5; }
.admissions-left h2 em { font-style:italic; color:var(--blue-600); font-weight:400; }
.admissions-left p { color:var(--ink-light); line-height:1.9; font-weight:400; font-size:.95rem; margin-bottom:2rem; }
.admission-steps { list-style:none; margin-bottom:2.5rem; }
.admission-steps li { display:flex; align-items:flex-start; gap:1.25rem; padding:1.25rem 0; border-bottom:1px solid var(--line-light); }
.admission-steps li:last-child { border-bottom:none; }
.step-num { font-family:var(--font-ui); font-size:1.5rem; color:var(--blue-400); font-weight:400; min-width:30px; }
.step-text h3 { font-size:.95rem; font-weight:500; margin-bottom:.25rem; }
.step-text p { font-size:.82rem; color:var(--ink-muted); margin-bottom:0; line-height:1.6; }
.admissions-form { background:#fff; padding:3rem; border:1px solid var(--line-light); }
.admissions-form h3 { font-family:var(--font-ui); font-size:1.6rem; font-weight:500; margin-bottom:.5rem; }
.admissions-form .form-sub { font-size:.85rem; color:var(--ink-muted); margin-bottom:2rem; font-weight:400; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.form-group { margin-bottom:1rem; }
.form-group label { display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-light); margin-bottom:.5rem; font-weight:500; }
.form-group input, .form-group textarea, .form-group select { width:100%; padding:.8rem 1rem; border:1px solid var(--line); background:var(--bg); font-family:var(--font-ui); font-size:.88rem; color:var(--ink); transition:border-color .3s; outline:none; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color:var(--blue-400); }
.form-group textarea { resize:vertical; min-height:100px; }
.form-submit { width:100%; padding:1rem; background:var(--blue-900); color:#fff; border:none; font-family:var(--font-ui); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500; cursor:pointer; transition:background .3s; margin-top:.5rem; }
.form-submit:hover { background: var(--blue-600); }

footer { background:var(--blue-900); color:#fff; padding:5rem 3rem 2rem; }
.footer-inner { max-width:1300px; margin:0 auto; }
.footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand .nav-logo { color:#fff; display:inline-block; margin-bottom:1rem; }
.footer-brand p { color:rgba(255,255,255,.5); font-size:.85rem; line-height:1.7; font-weight:400; max-width:280px; }
.footer-col h5 { font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; margin-bottom:1.25rem; color:rgba(255,255,255,.4); font-weight:500; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:.75rem; }
.footer-col ul a { color:rgba(255,255,255,.7); text-decoration:none; font-size:.85rem; font-weight:400; transition:color .3s; }
.footer-col ul a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:2rem; }
.footer-bottom p { font-size:.75rem; color:rgba(255,255,255,.3); font-weight:400; }
.footer-bottom p .admin-dot { cursor:pointer; user-select:none; }
.footer-social { display:flex; gap:1.5rem; }
.footer-social a { color:rgba(255,255,255,.4); text-decoration:none; font-size:.8rem; transition:color .3s; }
.footer-social a:hover { color:#fff; }

/* --- Class subpage (original) --- */
#subjectPage { display:none; }
#subjectPage.open { display:block; }
.sp-back { display:inline-flex; align-items:center; gap:.6rem; background:none; border:none; cursor:pointer; font-family:var(--font-ui); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); font-weight:500; margin-bottom:2.5rem; padding:0; transition:color .3s; }
.sp-back:hover { color:var(--blue-600); }
.sp-back svg { width:16px; height:16px; }
.sp-hero { padding:9rem 3rem 4rem; display:grid; grid-template-columns:1.05fr .95fr; gap:4rem; align-items:center; max-width:1300px; margin:0 auto; }
.sp-title { font-family:var(--font-ui); font-size:clamp(2.6rem,4.5vw,3.8rem); font-weight:400; line-height:1.15; margin-bottom:1.25rem; }
body.zh .sp-title { line-height:1.4; font-size:clamp(2.2rem,4vw,3.2rem); }
.sp-tagline { font-family:var(--font-ui); font-size:1.3rem; font-style:italic; color:var(--blue-600); margin-bottom:1.75rem; line-height:1.5; }
body.zh .sp-tagline { font-size:1.1rem; }
.sp-intro { color:var(--ink-light); line-height:1.9; font-weight:400; font-size:.95rem; margin-bottom:1.25rem; }
.sp-art { background:linear-gradient(150deg,#FFF 0%,var(--blue-50) 100%); border:1px solid var(--line-light); padding:2.5rem; position:relative; }
.sp-art > svg { width:100%; height:auto; display:block; }
.sp-art img { width:100%; height:auto; display:block; object-fit:cover; }
.sp-section { max-width:1100px; margin:0 auto; padding:4rem 3rem; }
.sp-section-alt { background:var(--blue-50); max-width:none; }
.sp-section-alt > * { max-width:1100px; margin-left:auto; margin-right:auto; }
.sp-two { display:grid; grid-template-columns:1.1fr .9fr; gap:4rem; align-items:center; }
.sp-two h2, .sp-h2 { font-family:var(--font-ui); font-size:clamp(1.8rem,3vw,2.5rem); font-weight:400; margin-bottom:1.75rem; line-height:1.25; }
body.zh .sp-two h2, body.zh .sp-h2 { line-height:1.5; }
.sp-list { list-style:none; }
.sp-list li { padding:.9rem 0; border-bottom:1px solid var(--line-light); font-size:.92rem; color:var(--ink-light); display:flex; align-items:baseline; gap:1rem; font-weight:400; }
.sp-list li::before { content:'—'; color:var(--blue-400); }
.sp-art-sm { padding:1.75rem; }
.sp-art-sm::after { display:none; }
.sp-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:.5rem; }
.sp-panel { background:#fff; border:1px solid var(--line-light); padding:1.25rem; transition:all .4s ease; }
.sp-panel:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(26,43,69,.06); border-color:var(--blue-200); }
.sp-panel svg, .sp-panel img { width:100%; height:auto; display:block; margin-bottom:1rem; }
.sp-panel img { aspect-ratio:4/3; object-fit:cover; background:var(--blue-50); }
.sp-panel figcaption { font-size:.78rem; color:var(--ink-muted); letter-spacing:.04em; }
.sp-tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-bottom:3rem; }
.sp-tier { padding:2rem; background:#fff; border:1px solid var(--line-light); transition:all .4s ease; }
.sp-tier:hover { border-color:var(--blue-200); transform:translateY(-4px); box-shadow:0 12px 40px rgba(26,43,69,.06); }
.sp-tier h3 { font-family:var(--font-ui); font-size:1.3rem; font-weight:500; margin-bottom:.6rem; }
.sp-tier p { font-size:.85rem; color:var(--ink-light); line-height:1.7; font-weight:400; }
.sp-format h3 { font-family:var(--font-ui); font-size:1.3rem; font-weight:500; margin-bottom:1rem; }
.sp-format ul { list-style:none; }
.sp-format li { padding:.7rem 0; border-bottom:1px solid var(--line-light); font-size:.9rem; color:var(--ink-light); display:flex; gap:.9rem; align-items:baseline; font-weight:400; }
.sp-format li::before { content:'◆'; font-size:.45rem; color:var(--blue-400); }
.sp-cta { background:var(--blue-900); color:#fff; text-align:center; padding:5rem 3rem; }
.sp-cta h2 { font-family:var(--font-ui); font-size:clamp(1.9rem,3.2vw,2.7rem); font-weight:400; margin-bottom:1rem; }
body.zh .sp-cta h2 { line-height:1.5; }
.sp-cta p { color:rgba(255,255,255,.6); max-width:460px; margin:0 auto 2.25rem; font-size:.92rem; line-height:1.8; font-weight:400; }
.sp-cta .btn-primary { background:#fff; color:var(--blue-900); }
.sp-cta .btn-primary:hover { background:var(--blue-100); }
.sp-notfound { max-width:700px; margin:0 auto; padding:12rem 2rem 6rem; text-align:center; }
.sp-notfound h1 { font-family:var(--font-ui); font-size:2.4rem; font-weight:400; margin-bottom:1rem; }
.sp-notfound p { color:var(--ink-light); margin-bottom:2rem; }

/* --- Editable section styles (added for CMS section types) --- */
.sp-heading-block { max-width:1100px; margin:0 auto; }
.sp-heading-block h2 { font-family:var(--font-ui); font-size:clamp(1.8rem,3vw,2.5rem); font-weight:400; line-height:1.25; margin-bottom:.5rem; }
.sp-heading-block h3 { font-family:var(--font-ui); font-size:1.6rem; font-weight:500; }
.sp-para { max-width:760px; color:var(--ink-light); line-height:1.9; font-weight:400; font-size:.95rem; }
.sp-image-block { text-align:center; }
.sp-image-block img { display:block; width:100%; height:auto; object-fit:cover; background:var(--blue-50); border:1px solid var(--line-light); }
.sp-image-block.size-small img { max-width:46%; margin:0 auto; }
.sp-image-block.size-medium img { max-width:72%; margin:0 auto; }
.sp-image-block figcaption { font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); margin-top:.9rem; }
.sp-image-missing { display:flex; align-items:center; justify-content:center; min-height:180px; background:var(--blue-50); border:1px dashed var(--blue-200); color:var(--ink-muted); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; }
.sp-bullets { max-width:820px; }
.sp-bullets ul, .sp-bullets ol { padding-left:0; list-style:none; }
.sp-bullets li { padding:.75rem 0; border-bottom:1px solid var(--line-light); font-size:.92rem; color:var(--ink-light); font-weight:400; display:flex; gap:1rem; align-items:baseline; }
.sp-bullets ul li::before { content:'◆'; font-size:.45rem; color:var(--blue-400); }
.sp-bullets ol { counter-reset:spb; }
.sp-bullets ol li { counter-increment:spb; }
.sp-bullets ol li::before { content:counter(spb,decimal-leading-zero); font-family:var(--font-ui); font-size:1.15rem; color:var(--blue-400); min-width:26px; }
.sp-btnrow { display:flex; }
.sp-btnrow.align-center { justify-content:center; }
.sp-table-wrap { overflow-x:auto; }
.sp-table { width:100%; border-collapse:collapse; font-size:.88rem; }
.sp-table th { font-family:var(--font-ui); font-size:1rem; font-weight:500; text-align:left; padding:.9rem 1rem; background:var(--blue-50); color:var(--blue-900); border-bottom:1px solid var(--blue-200); white-space:nowrap; }
.sp-table td { padding:.85rem 1rem; border-bottom:1px solid var(--line-light); color:var(--ink-light); font-weight:400; }
.sp-table tr:hover td { background:var(--bg); }
.sp-schedule { max-width:820px; }
.sp-schedule .sch-row { display:grid; grid-template-columns:150px 150px 1fr; gap:1.25rem; padding:1.1rem 0; border-bottom:1px solid var(--line-light); align-items:baseline; }
.sp-schedule .sch-day { font-family:var(--font-ui); font-size:1.25rem; color:var(--blue-900); font-weight:500; }
.sp-schedule .sch-time { font-size:.85rem; letter-spacing:.06em; color:var(--blue-600); font-weight:500; }
.sp-schedule .sch-note { font-size:.85rem; color:var(--ink-muted); font-weight:400; }
.sp-pricing { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.sp-price-card { background:#fff; border:1px solid var(--line-light); padding:2rem; position:relative; transition:all .4s ease; }
.sp-price-card:hover { border-color:var(--blue-200); transform:translateY(-4px); box-shadow:0 12px 40px rgba(26,43,69,.06); }
.sp-price-card.featured { border-color:var(--blue-400); background:linear-gradient(170deg,#fff,var(--blue-50)); }
.sp-price-card .pc-name { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-500); font-weight:500; margin-bottom:.9rem; }
.sp-price-card .pc-price { font-family:var(--font-ui); font-size:2.6rem; color:var(--blue-900); line-height:1; margin-bottom:.25rem; }
.sp-price-card .pc-period { font-size:.78rem; color:var(--ink-muted); margin-bottom:1.25rem; }
.sp-price-card ul { list-style:none; }
.sp-price-card li { font-size:.85rem; color:var(--ink-light); font-weight:400; padding:.5rem 0; border-bottom:1px solid var(--line-light); display:flex; gap:.65rem; align-items:baseline; }
.sp-price-card li::before { content:'—'; color:var(--blue-400); }
.sp-price-note { font-size:.8rem; color:var(--ink-muted); margin-top:1.5rem; font-weight:400; }
.sp-tutor { display:grid; grid-template-columns:200px 1fr; gap:2.5rem; align-items:start; max-width:820px; }
.sp-tutor .tut-photo { width:200px; aspect-ratio:3/4; background:var(--blue-50); border:1px solid var(--line-light); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.sp-tutor .tut-photo img { width:100%; height:100%; object-fit:cover; }
.sp-tutor .tut-initials { font-family:var(--font-ui); font-size:3rem; color:var(--blue-200); }
.sp-tutor h3 { font-family:var(--font-ui); font-size:1.7rem; font-weight:500; margin-bottom:.3rem; }
.sp-tutor .tut-role { font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-500); font-weight:500; margin-bottom:1rem; }
.sp-tutor .tut-bio { font-size:.92rem; color:var(--ink-light); line-height:1.85; font-weight:400; }
.sp-divider { display:flex; align-items:center; gap:1.25rem; color:var(--blue-200); }
.sp-divider::before, .sp-divider::after { content:''; flex:1; height:1px; background:var(--line); }
.sp-divider span { font-size:.5rem; }
.sp-art-plain svg { width:100%; height:auto; display:block; }
.sp-art-plain.size-small svg { max-width:46%; margin:0 auto; }
.sp-art-plain.size-medium svg { max-width:72%; margin:0 auto; }

.reveal { opacity:0; transform:translateY(30px); transition:all .8s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity:1; transform:none; }

@media (max-width:1024px) {
  .hero { grid-template-columns:1fr; padding-top:7rem; }
  .hero-image { height:50vh; }
  .philosophy { grid-template-columns:1fr; gap:3rem; }
  .subjects-grid { grid-template-columns:repeat(2,1fr); }
  .admissions { grid-template-columns:1fr; gap:3rem; }
  .footer-top { grid-template-columns:1fr 1fr; }
  .sp-hero { grid-template-columns:1fr; padding-top:7.5rem; gap:2.5rem; }
  .sp-two { grid-template-columns:1fr; gap:2.5rem; }
  .sp-gallery { grid-template-columns:1fr 1fr; }
  .sp-tiers, .sp-pricing { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  nav { padding:1rem 1.5rem; }
  nav.scrolled { padding:.8rem 1.5rem; }
  .nav-links { display:none; }
  .mobile-toggle { display:flex; }
  .nav-links.open { display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:#fff; padding:2rem; border-bottom:1px solid var(--line); gap:1.5rem; }
  .hero { padding:6rem 1.5rem 3rem; }
  .philosophy { padding:4rem 1.5rem; }
  .philosophy-right { grid-template-columns:1fr; }
  .phil-card:first-child { grid-column:span 1; }
  .subjects { padding:4rem 1.5rem; }
  .subjects-header { flex-direction:column; align-items:flex-start; gap:1rem; }
  .subjects-header p { text-align:left; }
  .subjects-grid { grid-template-columns:1fr; }
  .admissions { padding:4rem 1.5rem; }
  .form-row { grid-template-columns:1fr; }
  footer { padding:3rem 1.5rem 1.5rem; }
  .footer-top { grid-template-columns:1fr; gap:2rem; }
  .footer-bottom { flex-direction:column; gap:1rem; text-align:center; }
  .sp-hero { padding:6.5rem 1.5rem 3rem; }
  .sp-section { padding:3rem 1.5rem; }
  .sp-gallery { grid-template-columns:1fr; }
  .sp-cta { padding:4rem 1.5rem; }
  .sp-tutor { grid-template-columns:1fr; }
  .sp-tutor .tut-photo { width:160px; }
  .sp-schedule .sch-row { grid-template-columns:1fr; gap:.3rem; }
  .sp-image-block.size-small img, .sp-image-block.size-medium img { max-width:100%; }
}