/* ---------------- scrub hero ---------------- */
.hero{height:600vh;background:var(--purple)}
.stage{position:sticky;top:68px;height:calc(100vh - 68px);height:calc(100svh - 68px);overflow:hidden;background:var(--purple)}
.stage .poster{position:absolute;inset:0;background:var(--purple) center/cover no-repeat}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(25,14,38,.0) 30%,rgba(25,14,38,.66) 100%)}
.ring{position:absolute;left:50%;bottom:34px;width:46px;height:46px;margin-left:-23px;color:var(--yellow);transform:rotate(-90deg);transition:opacity .5s;filter:drop-shadow(0 1px 3px rgba(0,0,0,.7))}
.stage.video-ready .ring{opacity:0}
.chev{position:absolute;left:50%;bottom:30px;margin-left:-14px;width:28px;height:28px;color:#fff;animation:chev 2.2s ease-in-out infinite;animation-delay:-.8s}
@keyframes chev{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(8px);opacity:1}}
.band{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;opacity:0;color:#fff;text-shadow:var(--tshadow);pointer-events:none;will-change:opacity}
.band.b1{opacity:1}
.band::before{content:"";position:absolute;inset:-4%;pointer-events:none;opacity:calc(.25 + .75*var(--k,1));background:radial-gradient(ellipse 74% 62% at 50% 50%,rgba(22,12,34,.74) 0%,rgba(22,12,34,.5) 46%,rgba(22,12,34,0) 76%);z-index:-1}
.band .btn{text-shadow:none;pointer-events:auto}
.band .tag{font:600 15px var(--en);letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);margin-bottom:18px}
.band h2{color:#fff;font-size:clamp(40px,7.4vw,112px);line-height:1.1;max-width:15em}
.band h2.m{font-size:clamp(36px,6vw,88px)}
.band .sub{margin-top:20px;font:600 clamp(17px,1.7vw,23px)/1.6 var(--body);max-width:30em;color:#FFF3DA}
.band .ctas{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;justify-content:center}
.band .em{color:var(--yellow)}
/* choreography (transform + opacity only, scrubbed by --k) */
.sp{display:inline-block}
.sp .w{display:inline-block;white-space:nowrap}
.sp .c{display:inline-block}
.fx-scatter .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
.fx-punch .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);--ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);opacity:var(--kc);transform:scale(calc(0.6 + (0.4 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))}
.fx-punch .w.em{--ov:.24;--sd:.16;--ss:2.6}
.fx-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*30px))}
.band.b3 .soft,.band.b3 .sharp{display:block}
.band.b3 .stack{position:relative;display:inline-block}
.band.b3 .soft{position:absolute;inset:0;filter:blur(10px);opacity:calc(1 - var(--k,0))}
.band.b3 .sharp{opacity:var(--k,0)}
.band.b4 .sub,.band.b4 .tag{--ks:clamp(0,(var(--k,0) - .62)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*14px))}
.band.b4 .ctas{--kb:clamp(0,(var(--k,0) - .78)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}
/* static hero (designed, not a fallback apology) */
.hero-static{display:none;position:relative;background:var(--purple) url('../vid/hero-ending.jpg') center/cover no-repeat;color:#fff;min-height:calc(100svh - 68px);align-items:flex-end}
.hero-static::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,14,38,.25) 0%,rgba(25,14,38,.55) 45%,rgba(25,14,38,.9) 100%)}
.hero-static .in{position:relative;width:var(--w);margin:auto;padding:60px 0 56px;text-shadow:var(--tshadow)}
.hero-static .tag{font:600 14px var(--en);letter-spacing:.18em;color:var(--yellow);margin-bottom:12px;text-transform:uppercase}
.hero-static h1{font-size:clamp(30px,8.4vw,76px);line-height:1.15}.hero-static h1 span{display:block}
.hero-static h1 em{font-style:normal;color:var(--yellow)}
.hero-static p{margin:16px 0 26px;font:600 18px/1.6 var(--body);color:#FFF3DA;max-width:30em}
.hero-static .ctas{display:flex;gap:12px;flex-wrap:wrap}.hero-static .btn{text-shadow:none}
@media (max-width:720px),(orientation:portrait) and (max-width:1024px),(orientation:portrait) and (pointer:coarse),(orientation:landscape) and (pointer:coarse) and (max-height:560px){
  .hero{display:none}.hero-static{display:flex}
}
@media(max-height:560px){.chev,.ring{display:none}}
/* ---------------- age picker ---------------- */
.pick{background:var(--cream)}
.pick .top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:40px}
.pick .top .h2{max-width:11em}
.ages{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.age{position:relative;display:flex;flex-direction:column;text-decoration:none;border:2px solid var(--ink);border-radius:22px;background:var(--bg,#fff);box-shadow:var(--sh);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.age:hover{transform:translate(-3px,-5px);box-shadow:8px 10px 0 var(--ink)}
.age .im{aspect-ratio:16/10;overflow:hidden;border-bottom:2px solid var(--ink)}
.age .im img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.age:hover .im img{transform:scale(1.06)}
.age .num{position:absolute;top:14px;left:14px;background:var(--yellow);border:2px solid var(--ink);border-radius:999px;padding:4px 16px;font:700 22px/1.3 var(--en);transform:rotate(-4deg);box-shadow:2px 2px 0 var(--ink)}
.age .tx{padding:20px 22px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.age h3{font-size:28px}
.age .en{font-size:14px;color:var(--muted)}
.age .when{font-size:15.5px;margin-top:4px}
.age .go{margin-top:auto;padding-top:12px;font:800 16px var(--body);display:flex;justify-content:space-between;align-items:center}
.age .go b{background:var(--ink);color:var(--yellow);border-radius:999px;padding:6px 14px;font-size:14px}
/* ---------------- steps ---------------- */
.steps{background:var(--sky)}
.steps .grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.steps .vert{aspect-ratio:9/14;max-width:360px;margin-inline:auto;--rot:-3deg}
.steps ol{list-style:none;display:grid;gap:20px;margin-top:34px;counter-reset:s}
.steps li{position:relative;background:#fff;border:2px solid var(--ink);border-radius:20px;padding:22px 24px 22px 92px;box-shadow:var(--sh);counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:20px;top:50%;margin-top:-30px;width:60px;height:60px;border-radius:50%;background:var(--yellow);border:2px solid var(--ink);font:700 30px/56px var(--en);text-align:center;transform:rotate(-8deg)}
.steps li:nth-child(2)::before{background:var(--pink)}.steps li:nth-child(3)::before{background:var(--mint)}
.steps li h3{font-size:24px;margin-bottom:4px}
.steps li p{color:var(--muted);font-size:16px}
/* ---------------- video wall ---------------- */
.wall{background:var(--purple);color:#fff;overflow:hidden}
.wall .top{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;margin-bottom:40px}
.wall .kick{color:var(--yellow)}
.vgrid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:78px;gap:20px}
.vgrid .ph{--sh:4px 4px 0 var(--yellow);border-color:var(--yellow);background:var(--purple2)}
.vgrid .ph:hover{box-shadow:8px 8px 0 var(--yellow)}
.vgrid .v1{grid-column:1/8;grid-row:1/6}
.vgrid .v2{grid-column:8/13;grid-row:1/4}
.vgrid .v3{grid-column:8/13;grid-row:4/8}
.vgrid .v4{grid-column:1/5;grid-row:6/10}
.vgrid .v5{grid-column:5/8;grid-row:6/10}
.vgrid .v6{grid-column:8/13;grid-row:8/10}
.vgrid .ph .cap{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
/* ---------------- method ---------------- */
.method{background:var(--yellow);border-block:2px solid var(--ink)}
.method .grid{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:center}
.method .four{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.method .four div{background:var(--cream);border:2px solid var(--ink);border-radius:20px;padding:20px 22px;box-shadow:var(--sh)}
.method .four b{display:block;font:600 34px/1.1 var(--en)}
.method .four div:nth-child(1) b{color:#E573AE}.method .four div:nth-child(2) b{color:var(--blue)}.method .four div:nth-child(3) b{color:var(--green)}.method .four div:nth-child(4) b{color:#D9531E}
.method .four span{display:block;font:700 21px var(--zh);margin:2px 0 6px}
.method .four p{font-size:15px;color:var(--muted);line-height:1.55}
/* ---------------- teachers ---------------- */
.teach{background:var(--cream)}
.teach .two{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:44px}
.tc{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;border:2px solid var(--ink);border-radius:24px;overflow:hidden;background:#fff;box-shadow:var(--sh)}
.tc .im{min-height:340px;border-right:2px solid var(--ink)}
.tc .im img{width:100%;height:100%;object-fit:cover}
.tc .tx{padding:26px 24px;display:flex;flex-direction:column;gap:8px}
.tc h3{font-size:30px}.tc .role{font:700 14px var(--en);letter-spacing:.08em;color:var(--green);text-transform:uppercase}
.tc p{font-size:15.5px;color:var(--muted)}
.tc a{margin-top:auto;font-weight:800;text-decoration:none;color:var(--green)}
/* ---------------- proof bento ---------------- */
.proof{background:var(--mint);border-block:2px solid var(--ink)}
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:150px;gap:20px;margin-top:40px}
.bento .ph{--sh:4px 4px 0 var(--ink)}
.bento .a{grid-column:1/4;grid-row:1/4}.bento .b{grid-column:4/7;grid-row:1/3}.bento .c{grid-column:4/5;grid-row:3/5}.bento .d{grid-column:5/7;grid-row:3/5}.bento .e{grid-column:1/3;grid-row:4/6}.bento .f{grid-column:3/7;grid-row:5/6}
/* ---------------- testimonials ---------------- */
.say{background:var(--pink)}
.say .row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.say blockquote{background:#fff;border:2px solid var(--ink);border-radius:20px;padding:24px;box-shadow:var(--sh)}
.say cite{display:block;margin-top:12px;font-style:normal;font-weight:800}
/* ---------------- faq + location ---------------- */
.ask .grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:start}
.loc{position:sticky;top:96px;border:2px solid var(--ink);border-radius:24px;overflow:hidden;background:var(--paper);box-shadow:var(--sh)}
.loc img{width:100%;aspect-ratio:16/10;object-fit:cover;border-bottom:2px solid var(--ink)}
.loc .tx{padding:22px 24px 26px}.loc h3{font-size:26px;margin-bottom:8px}.loc p{margin-bottom:6px}
.loc .btn{margin-top:14px}
/* ---------------- final cta ---------------- */
.fin{background:var(--purple);color:#fff;overflow:hidden;text-align:center}
.fin .mas{width:140px;margin:0 auto 10px}
.fin .h1{font-size:clamp(38px,6vw,84px);margin-bottom:16px}
.fin p{color:#E6DAF0;max-width:30em;margin:0 auto 30px}
.fin .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.fin .btn.w{background:var(--cream)}
/* ---------------- responsive ---------------- */
@media(max-width:980px){
  .ages{grid-template-columns:1fr 1fr}
  .steps .grid,.method .grid,.ask .grid{grid-template-columns:1fr;gap:40px}
  .steps .vert{max-width:260px}
  .teach .two{grid-template-columns:1fr}
  .vgrid{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .vgrid .ph{grid-column:auto!important;grid-row:auto!important;aspect-ratio:4/3}
  .vgrid .v1{grid-column:1/-1!important}
  .vgrid .ph.vt{aspect-ratio:3/4}
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .bento .ph{grid-column:auto!important;grid-row:auto!important;aspect-ratio:4/3}
  .bento .a{grid-column:1/-1!important}
  .say .row{grid-template-columns:1fr}
  .loc{position:static}
}
@media(max-width:600px){
  .ages{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin-inline:-20px;padding:6px 20px 24px;scrollbar-width:none}
  .ages::-webkit-scrollbar{display:none}
  .age{flex:0 0 78%;scroll-snap-align:center}
  .tc{grid-template-columns:1fr}.tc .im{min-height:280px;border-right:0;border-bottom:2px solid var(--ink)}
  .method .four{grid-template-columns:1fr}
  .steps li{padding:18px 18px 18px 80px}.steps li::before{left:14px;width:52px;height:52px;line-height:48px;font-size:26px;margin-top:-26px}
  .vgrid{grid-template-columns:1fr}.vgrid .ph{aspect-ratio:4/3}
}

/* ===== Calm palette: home ===== */
.hero,.stage,.stage .poster{background-color:var(--purple)}
.band .tag,.hero-static .tag{color:#FFC9B3}
.band .em,.hero-static h1 em{color:#FFC9B3}
.ring{color:#fff}
.pick{background:#fff}
.ages .age{background:#fff;border:1px solid var(--line);box-shadow:var(--sh)}
.ages .age:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(40,30,50,.06),0 18px 40px rgba(40,30,50,.12)}
.age .im{border-bottom:0}
.age .num{background:#fff;color:var(--coral);border:0;transform:none;box-shadow:0 2px 8px rgba(40,30,50,.15)}
.age .go b{background:none;color:var(--coral);padding:0}
.steps{background:var(--paper)}
.steps li{border:0;box-shadow:none}
.steps li::before,.steps li:nth-child(2)::before,.steps li:nth-child(3)::before{background:#fff;border:2px solid var(--coral);color:var(--coral);transform:none}
.steps .vert{--rot:0deg}
.wall{background:#24202B}
.wall .kick{color:#FFC9B3}.wall .kick::before{background:#FFC9B3}
.wall .h2{color:#fff}
.vgrid .ph{--sh:none;border:0;background:#2F2938}
.vgrid .ph:hover{box-shadow:0 16px 36px rgba(0,0,0,.35)}
.vgrid .ph .cap{background:rgba(255,255,255,.92);border:0;color:var(--ink)}
.method{background:#fff;border-block:0}
.method .kick{color:var(--coral)!important}
.method .four div{background:var(--paper);border:0;box-shadow:none}
.method .four div:nth-child(4) b{color:var(--coral)}
.teach{background:#fff}
.tc{border:1px solid var(--line);box-shadow:var(--sh)}
.tc .im{border-right:0}
.tc .role,.tc a{color:var(--coral)}
.proof{background:var(--paper);border-block:0}
.proof .kick{color:var(--coral)!important}
.say{background:var(--paper)}
.say blockquote{border:1px solid var(--line);box-shadow:none}
.ask{background:#fff}
.loc{border:1px solid var(--line);background:#fff;box-shadow:var(--sh)}
.loc img{border-bottom:0}
.fin{background:var(--purple)}
.fin .h1{color:#fff}
.fin .btn.w{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.fin .btn.w:hover{background:rgba(255,255,255,.08)}
@media(max-width:980px){.mcta{background:rgba(255,255,255,.97);border-top:1px solid var(--line)}}

/* teacher portraits in black and white */
.tc .im img[src*="fangxu"],.tc .im img[src*="linqian"]{filter:grayscale(1) contrast(1.06)}

.band.b1 .sp .w:first-child{display:block}

/* mouse-follow motion on the studio photo (hover devices only) */
.loc .lw{display:block;line-height:0;overflow:hidden}.loc .lw img{display:block}
@media (hover:hover) and (pointer:fine){
  .loc{perspective:900px}
  .loc .lw{display:block;overflow:hidden;border-radius:inherit;border-bottom:0}
  .loc img{transform:scale(1.1) translate(var(--tx,0px),var(--ty,0px));transition:transform .45s cubic-bezier(.2,.7,.2,1);will-change:transform}
  .loc:hover img{transform:scale(1.18) translate(var(--tx,0px),var(--ty,0px))}
  .loc .lw{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
}

/* ===== 来画一张吧: copy left, drawing pad right ===== */
.bento .ph{--sh:0 1px 2px rgba(40,30,50,.06),0 10px 28px rgba(40,30,50,.10)}
.fin{text-align:left}
.fin .fgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,88px);align-items:center}
.fin .ft .h1{font-size:clamp(38px,4.8vw,66px);line-height:1.1;margin-bottom:20px;max-width:7em;text-wrap:balance}
.fin .ft p{margin:0 0 32px;max-width:24em;text-wrap:balance;font-size:18px;line-height:1.75;color:#DCD2E6}
.fin .ctas{justify-content:flex-start}
.dd{position:relative;border-radius:16px;overflow:hidden;background:#FAF6F1;box-shadow:0 1px 2px rgba(10,5,18,.2),0 24px 56px rgba(10,5,18,.38)}
.dd canvas{display:block;width:100%;aspect-ratio:4/3;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}
.dd .dh{position:absolute;left:0;right:0;top:0;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;margin:0;pointer-events:none;font:600 16px var(--body);color:#6F6579;transition:opacity .3s}
.dd .dh.gone{opacity:0}
.dd .tools{display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid #E9E2D8;background:#FAF6F1}
.dd .cols{display:flex;gap:6px}
.dd .cols button{position:relative;width:32px;height:32px;border:0;border-radius:50%;background:transparent;cursor:pointer}
.dd .cols button::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--c);transition:transform .2s var(--ease)}
.dd .cols button:hover::before{transform:scale(1.15)}
.dd .cols button[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--c)}
.dd .acts{display:flex;gap:2px}
.dd .acts button{min-height:34px;padding:4px 12px;border:0;border-radius:8px;background:transparent;color:#5E5266;font:600 14px var(--body);cursor:pointer;transition:background .2s,color .2s}
.dd .acts button:hover:not(:disabled){background:#EFE8DE;color:#2F2838}
.dd .acts button[aria-pressed=true]{background:#2F2838;color:#fff}
.dd .acts button:disabled{opacity:.38;cursor:default}
.dd button:focus-visible{outline:2px solid var(--coral);outline-offset:1px}
@media(max-width:900px){
  .fin .fgrid{grid-template-columns:1fr;gap:36px}
  .fin .ft p{margin-bottom:26px}
  .dd canvas,.dd .dh{aspect-ratio:1/1}
}

/* 来画室看看：单独一张横向卡片（左图右字），手机上上下排 */
.ask .grid{grid-template-columns:1fr}
.ask .loc{position:static;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);max-width:1040px;width:100%;margin:0 auto}
.ask .loc .lw,.ask .loc .lw img{height:100%}.ask .loc img{aspect-ratio:auto;min-height:320px}
.ask .loc .tx{align-self:center;padding:32px 36px}
@media(max-width:760px){.ask .loc{grid-template-columns:1fr}.ask .loc img{aspect-ratio:16/10;min-height:0}.ask .loc .tx{padding:22px 24px 26px}}
.ask .loc .lw{border-radius:0!important}

/* ===== 首页头版：后台选的图片 / 视频 / 轮播（html.hm 时启用，所有屏幕一样；播放层见 media-fx.js） ===== */
html.hm #hero{display:none!important}
html.hm .hero-static{display:flex!important;background:#2A1D38!important;min-height:calc(100svh - 68px)!important;align-items:flex-end!important;overflow:hidden}
html.hm .hero-static::before{z-index:2;background:linear-gradient(180deg,rgba(25,14,38,.12) 0%,rgba(25,14,38,.3) 45%,rgba(25,14,38,.86) 100%)!important}
html.hm .hero-static .in{z-index:3;padding:60px 0 56px!important}