/* 04 精品案例 —— 堆叠服务板
   给「首页」用的样式。改这一块只动这个文件。 */

/* stacking expertise boards */
.expertise-showcase{position:relative;background:var(--ink)}
.expertise-board{--board-bg:var(--ink);--board-fg:var(--bone);--board-accent:#caa0ef;position:sticky;top:70px;height:clamp(620px,68svh,740px);min-height:620px;display:grid;grid-template-columns:minmax(310px,29vw) 1fr;gap:clamp(34px,4vw,72px);padding:clamp(48px,5vh,66px) var(--pad);background:var(--board-bg);color:var(--board-fg);overflow:hidden;border-top:1px solid color-mix(in srgb,var(--board-fg) 26%,transparent)}
.expertise-board-dark{--board-bg:#1c1603;--board-fg:#f1d8ff;--board-accent:#caa0ef}.expertise-board-violet{--board-bg:var(--bone);--board-fg:var(--ink);--board-accent:var(--ink)}.expertise-board-sand{--board-bg:#f0dfc8;--board-fg:#17120b;--board-accent:#17120b}
.expertise-board:nth-child(1){z-index:1}.expertise-board:nth-child(2){z-index:2}.expertise-board:nth-child(3){z-index:3}.expertise-board:nth-child(4){z-index:4}
.expertise-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;min-height:0;padding-right:clamp(6px,2vw,30px)}
.expertise-no{display:block;margin-bottom:24px;font:500 9px/1 var(--mono);letter-spacing:.1em;opacity:.62}
.expertise-copy h2{max-width:420px;margin:0;font:800 clamp(48px,5.2vw,84px)/.95 var(--display);letter-spacing:-.04em}
.expertise-copy h2 a,.expertise-title-link{display:inline-block;font:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;text-decoration:none;border:none !important;padding:0 !important;min-width:0 !important;width:auto !important;transition:opacity .25s ease,transform .25s ease}
.expertise-copy h2 a:hover,.expertise-title-link:hover{background:transparent !important;color:inherit !important;opacity:.85;transform:translateX(6px)}
.expertise-copy p{max-width:360px;margin:24px 0 30px;font-size:13px;line-height:1.75}
.expertise-copy a:not(.expertise-title-link):not(h2 a){display:flex;align-items:center;justify-content:space-between;width:max-content;min-width:142px;padding:13px 15px;border:1px solid currentColor;font:500 10px var(--mono);transition:background .3s,color .3s}
.expertise-copy a:not(.expertise-title-link):not(h2 a):hover{background:var(--board-fg);color:var(--board-bg)}
.expertise-image{align-self:stretch;min-height:0;overflow:hidden;background:#4b463d}
.expertise-image>div{width:100%;height:120%;transform:translate3d(0,-10%,0);will-change:transform}
.expertise-image img{filter:saturate(.82);transition:filter .7s ease,transform 1.2s var(--ease)}.expertise-board:hover .expertise-image img{filter:saturate(1);transform:scale(1.025)}
.zemu-totem{position:relative;width:clamp(205px,18vw,310px);height:clamp(190px,27vh,300px);color:var(--board-accent);font:900 clamp(60px,6.2vw,112px)/.72 var(--display);letter-spacing:0;isolation:isolate}
.zemu-totem span{position:absolute;display:block;transform-origin:50% 70%;will-change:transform;transition:color .25s ease}
.zemu-totem span:nth-child(1){left:4%;top:3%}.zemu-totem span:nth-child(2){left:43%;top:12%}.zemu-totem span:nth-child(3){left:9%;bottom:7%}.zemu-totem span:nth-child(4){right:2%;bottom:1%}
.expertise-board[data-service-board="0"] .zemu-totem{width:clamp(150px,12vw,210px);height:clamp(135px,18vh,200px);font-size:clamp(40px,4.1vw,74px);transform:translateY(-30%)}
.expertise-board[data-service-board="0"] .zemu-totem span{width:1em;height:1em;display:grid;place-items:center;line-height:1;text-align:center}