/* V1 Atelier · inner pages: filters, detail, pricing, forms, gallery, search, legal, about, 404 */

/* filters */
.fl{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 36px}
.fl a{font-family:var(--en);font-size:13px;letter-spacing:.06em;padding:8px 20px;border-radius:999px;border:1px solid var(--line);background:var(--white);transition:.2s}
.fl a:hover{border-color:var(--ink)}
.fl a[aria-current="true"]{background:var(--ink);color:var(--porcelain);border-color:var(--ink)}
.cnt{font-size:13px;color:var(--grey);margin-bottom:20px}

/* treatment detail */
.td{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,6vw,88px);align-items:start;padding-top:clamp(36px,5vw,64px)}
@media(max-width:960px){.td{grid-template-columns:1fr}}
.td-side{position:sticky;top:calc(var(--hd) + 24px);display:flex;flex-direction:column;gap:0;background:var(--white);border:1px solid var(--line);border-top:1px solid var(--ink)}
.td-side .p{padding:26px 26px 10px;display:flex;flex-direction:column;gap:6px}
.td-side .price{font-family:var(--en);font-weight:300;font-size:36px;line-height:1.1}
.td-side .btns{padding:10px 26px 26px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.td-side .btns .btn-t{align-self:flex-start}
.td-side .why{padding:18px 26px;border-top:1px solid var(--line);font-size:13px;color:var(--grey);line-height:1.65}
.glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:0 0 56px}
.glance li{background:var(--white);padding:22px;display:flex;flex-direction:column;gap:8px}
.glance .ico{width:26px;height:26px;color:var(--sage-deep)}
.glance b{font-weight:400;font-size:15px;line-height:1.5}
.blk{padding:0 0 clamp(36px,5vw,56px);margin:0 0 clamp(36px,5vw,56px);border-bottom:1px solid var(--line)}
.blk:last-child{border-bottom:0;margin-bottom:0}
.blk h2{font-family:var(--en);font-weight:300;font-size:clamp(22px,2.6vw,30px);margin-bottom:18px}
html[data-lang="zh"] .blk h2{font-family:var(--cn);letter-spacing:.06em}
.blk p{max-width:62ch;margin-bottom:12px;color:#3d3836}
.bul{display:flex;flex-direction:column;gap:11px;max-width:62ch}
.bul li{padding-left:22px;position:relative;line-height:1.7}
.bul li::before{content:"";position:absolute;left:0;top:.9em;width:10px;height:1px;background:var(--sand)}
.stl{display:flex;flex-direction:column;gap:0;max-width:62ch;counter-reset:s}
.stl li{display:grid;grid-template-columns:52px 1fr;gap:0 10px;padding:18px 0;border-top:1px solid var(--line);counter-increment:s}
.stl li:last-child{border-bottom:1px solid var(--line)}
.stl li::before{content:counter(s,decimal-leading-zero);font-family:var(--en);font-size:13px;letter-spacing:.2em;color:var(--sand-text);padding-top:3px;grid-row:span 2}
.stl b{font-weight:400;font-size:16px}
.stl span.d{color:var(--grey);font-size:14.5px}
.note{border-left:2px solid var(--sand);background:#FBF8F2;padding:16px 20px;font-size:13.5px;line-height:1.7;max-width:62ch}
.note.warn{border-left-color:#B07A6A;background:#FBF4F2}
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.rel a{display:flex;flex-direction:column;gap:4px;padding:18px 20px;background:var(--white);border:1px solid var(--line);transition:.25s}
.rel a:hover{border-color:var(--ink)}
.rel b{font-weight:400}
.rel span{font-family:var(--en);font-size:12.5px;color:var(--grey)}

/* pricing */
.pn{position:sticky;top:var(--hd);z-index:10;background:var(--porcelain);border-bottom:1px solid var(--line)}
.pn .wrap{display:flex;gap:6px;overflow-x:auto;padding-block:12px;scrollbar-width:none}
.pn a{white-space:nowrap;font-size:13px;padding:7px 18px;border-radius:999px;border:1px solid transparent;color:var(--grey)}
.pn a:hover,.pn a.on{border-color:var(--ink);color:var(--ink)}
.pb{padding-top:clamp(48px,6vw,88px);scroll-margin-top:calc(var(--hd) + 56px)}
.pb + .pb{margin-top:clamp(40px,6vw,88px);border-top:1px solid var(--ink)}
.pbh{display:flex;flex-direction:column;gap:12px;padding-bottom:6px}
.pbh .h2{font-size:clamp(34px,5vw,60px)}
.pnote{margin-top:36px;max-width:62ch}
.pc{padding:clamp(32px,4vw,56px) 0 4px}
.pc header{display:flex;align-items:baseline;gap:20px;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.pc header .n{font-family:var(--en);font-size:13px;letter-spacing:.2em;color:var(--sand-text)}
.pc header .u{margin-left:auto}
.pc h3{font-family:var(--en);font-weight:300;font-size:clamp(22px,2.6vw,30px)}
html[data-lang="zh"] .pc h3{font-family:var(--cn);letter-spacing:.06em}
.pa{font-size:13px;color:var(--grey);margin:8px 0 0}
.pr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);transition:padding .25s,background .25s}
a.pr:hover{padding-left:12px;background:var(--stone-soft)}
.pr b{font-weight:400;font-size:17px}
.pr em{font-style:normal;display:block;font-family:var(--en);font-size:12.5px;color:var(--grey);margin-top:2px}
.pr .v{font-family:var(--en);font-size:18px;white-space:nowrap;text-align:right}
.pr .v small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.ps{margin-top:34px}
.ps>h4{font-family:var(--en);font-weight:400;font-size:18px;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
html[data-lang="zh"] .ps>h4{font-family:var(--cn)}
.ps>h4 a:first-child:hover{color:var(--sage-deep)}
.ps>h4 + .pr{border-top:0}
.ps .more{font-size:10.5px}
.pg{margin:22px 0 2px;font-family:var(--en);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand-text)}
.pg span{text-transform:none;letter-spacing:.02em;color:var(--grey);font-size:12.5px}
.optlist{border-top:1px solid var(--ink)}
.optlist .pg:first-child{margin-top:14px}
.pr.course{background:#FBF8F2;border-left:2px solid var(--sand);padding-left:16px;margin:0}

/* forms + contact */
.bk{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:start;padding-top:clamp(36px,5vw,64px)}
@media(max-width:900px){.bk{grid-template-columns:1fr}}
.ways{display:flex;flex-direction:column}
.way{display:grid;grid-template-columns:36px 1fr 20px;gap:16px;align-items:center;padding:22px 0;border-top:1px solid var(--line);transition:padding .25s}
.way:last-of-type{border-bottom:1px solid var(--line)}
a.way:hover{padding-left:10px}
.way .ico{color:var(--sage-deep)}
.way small{display:block;font-family:var(--en);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.way b{font-weight:400;font-size:17px;line-height:1.5}
.way svg.ar{width:18px;height:18px;fill:none;stroke:var(--grey);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:560px){.form{grid-template-columns:1fr}}
.form label{display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--grey)}
.form .full{grid-column:1/-1}
.form input,.form select,.form textarea{font:inherit;font-size:15px;font-weight:300;color:var(--ink);padding:13px 15px;border:1px solid var(--line);background:var(--white);border-radius:0;width:100%;appearance:none;-webkit-appearance:none}
.form select{background-image:linear-gradient(45deg,transparent 50%,var(--grey) 50%),linear-gradient(135deg,var(--grey) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:38px}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--sage-deep);box-shadow:0 0 0 3px rgba(78,107,99,.14)}
.form .invalid{border-color:#B07A6A}
.form .ck2{flex-direction:row;align-items:flex-start;gap:12px;line-height:1.55}
.form .ck2 input{width:18px;height:18px;padding:0;margin-top:2px;accent-color:var(--sage-deep);flex:none;appearance:auto;-webkit-appearance:auto}
.form .err{display:none;font-size:12.5px;color:#8A4B4B}
.form .invalid + .err{display:block}
.form .sub{grid-column:1/-1;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.done{display:none;background:var(--white);border:1px solid var(--line);border-top:1px solid var(--ink);padding:36px;flex-direction:column;gap:12px}
.done.on{display:flex}
.done h3{font-family:var(--en);font-weight:300;font-size:28px}

/* gallery + compare slider */
.cmp{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--stone);user-select:none;touch-action:pan-y;cursor:ew-resize}
.cmp .pane{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--en);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey)}
.cmp .a{background:linear-gradient(160deg,#E9E5DD,#D3D0C7)}
.cmp .b{background:linear-gradient(160deg,#DCE5E1,#B8CCC5);clip-path:inset(0 0 0 50%)}
.cmp .tag{position:absolute;top:14px;background:var(--porcelain);padding:3px 12px;font-size:10.5px;letter-spacing:.2em}
.cmp .tag.l{left:14px}.cmp .tag.r{right:14px}
.cmp .hdl{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--ink);pointer-events:none}
.cmp .hdl::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;transform:translate(-50%,-50%);border-radius:50%;background:var(--porcelain);border:1px solid var(--ink)}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.gal figure{margin:0;display:flex;flex-direction:column;gap:12px}
.gal figcaption{font-size:13px;color:var(--grey);display:flex;justify-content:space-between;gap:12px}

/* search page */
.sp{display:flex;gap:12px;max-width:640px;margin-top:28px}
.sp input{flex:1;font:inherit;font-size:17px;font-weight:300;padding:14px 18px;border:1px solid var(--ink);background:var(--white);border-radius:0}
.sp input:focus{outline:none;box-shadow:0 0 0 3px rgba(78,107,99,.18)}
.srl{margin-top:36px;border-top:1px solid var(--ink)}
.srl a{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.srl a:hover{background:var(--stone-soft);padding-left:12px}
.srl small{font-family:var(--en);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand-text)}
.srl b{font-weight:400;font-size:18px}
.srl p{font-size:14px;color:var(--grey);margin-top:3px}
.srl mark{background:rgba(201,180,143,.38);color:inherit}
@media(max-width:560px){.srl a{grid-template-columns:1fr;gap:4px}}

/* about timeline + patient info toc */
.tl{border-top:1px solid var(--ink);margin-top:36px}
.tl div{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.tl .y{font-family:var(--en);font-weight:300;font-size:22px}
.tl p.s{font-size:13px;color:var(--grey);font-family:var(--en)}
@media(max-width:560px){.tl div{grid-template-columns:1fr;gap:4px}}
.split{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.toc{position:sticky;top:calc(var(--hd) + 28px);display:flex;flex-direction:column;border-top:1px solid var(--ink)}
.toc a{padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--grey);display:flex;gap:14px;transition:.2s}
.toc a:hover{color:var(--ink);padding-left:8px}
.toc a span{font-family:var(--en);font-size:11px;letter-spacing:.2em;color:var(--sand-text);padding-top:3px}
@media(max-width:860px){.toc{position:static}}
.anchor{scroll-margin-top:calc(var(--hd) + 24px)}

/* legal */
.doc{max-width:760px}
.doc h2{font-family:var(--en);font-weight:400;font-size:20px;margin:40px 0 12px}
.doc p,.doc li{color:#3d3836;margin-bottom:10px;line-height:1.8}
.doc ul{padding-left:20px;list-style:disc;margin-bottom:12px}

/* team page (full profiles) */
.tm.full{grid-template-columns:1fr;gap:clamp(56px,8vw,112px);margin-top:0}
.tm.full .person{grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:clamp(24px,5vw,72px)}
.tm.full .person .pic{max-width:380px}
.tm.full .person h3{font-size:clamp(34px,4vw,48px)}
@media(max-width:700px){.tm.full .person{grid-template-columns:1fr}.tm.full .person .pic{width:min(100%,280px)}}
.person{scroll-margin-top:calc(var(--hd) + 24px)}
html[data-lang="zh"] .zhsub{font-family:var(--en);letter-spacing:.04em}
.band .lead{margin-top:-8px}

/* 404 */
.nf{min-height:60vh;display:grid;place-items:center;text-align:center}
.nf .n{font-family:var(--en);font-weight:300;font-size:clamp(90px,16vw,200px);line-height:1;color:var(--stone)}
