/* ── 14. The page steps aside ────────────────────────── */
.s14 { height: 640px; background: var(--gray-870); color: var(--gray-70); perspective: 2000px; }
.pm-menu { position: absolute; inset: 0; padding: 104px clamp(24px, 5cqw, 56px) 32px; transform-origin: 20% 50%; }
.pm-top { position: absolute; left: clamp(24px, 5cqw, 56px); right: clamp(24px, 5cqw, 56px); top: 30px; display: flex; justify-content: space-between; font-size: 13px; color: color-mix(in srgb, var(--gray-70) 50%, transparent); }
.pm-list { list-style: none; margin: 0; padding: 0; }
.pm-list li { display: flex; align-items: baseline; gap: 16px; cursor: default; opacity: 0; transform: translateX(-40px); transition: opacity .25s, transform .35s cubic-bezier(.7,0,.3,1); }
.s14.open .pm-list li { opacity: 1; transform: none; transition: opacity .5s calc(var(--d) * 60ms + 180ms), transform .9s cubic-bezier(.16,1,.3,1) calc(var(--d) * 60ms + 180ms); }
.pm-list span { font-size: clamp(40px, 6.4cqw, 72px); line-height: 1.04; letter-spacing: -0.022em; font-weight: 550; transition: transform .45s cubic-bezier(.2,.9,.25,1), opacity .3s; display: inline-block; }
.pm-list small { font-size: 13px; color: color-mix(in srgb, var(--gray-70) 45%, transparent); opacity: 0; transform: translateX(-8px); transition: opacity .25s, transform .4s cubic-bezier(.2,.9,.25,1); }
.pm-list.hov li:not(.on) span { opacity: .28; }
.pm-list li.on span { transform: translateX(14px); }
.pm-list li.on small { opacity: 1; transform: translateX(14px); }
.pm-foot { position: absolute; left: clamp(24px, 5cqw, 56px); bottom: 28px; display: flex; gap: 26px; font-size: 13px; color: color-mix(in srgb, var(--gray-70) 60%, transparent); opacity: 0; transition: opacity .2s; }
.s14.open .pm-foot { opacity: 1; transition: opacity .6s .6s; }
.pm-page { position: absolute; inset: 0; z-index: 5; background: var(--gray-50); color: var(--gray-870); overflow: hidden; transform-origin: 0% 50%; will-change: transform; }
.pm-h { display: flex; align-items: center; justify-content: space-between; height: 84px; padding: 0 clamp(24px, 5cqw, 56px); font-size: 15px; font-weight: 550; }
.pm-burger { display: flex; align-items: center; gap: 12px; border: 0; background: none; cursor: default; font-size: 13px; font-weight: 550; color: var(--gray-870); }
.pm-burger i { position: relative; width: 26px; height: 10px; display: block; }
.pm-burger i::before, .pm-burger i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .45s cubic-bezier(.7,0,.3,1), top .45s cubic-bezier(.7,0,.3,1); }
.pm-burger i::before { top: 0; } .pm-burger i::after { top: 8.5px; }
.s14.open .pm-burger i::before { top: 4.25px; transform: rotate(45deg); } .s14.open .pm-burger i::after { top: 4.25px; transform: rotate(-45deg); }
.pm-hero { padding: 40px clamp(24px, 5cqw, 56px) 0; }
.pm-hero h3 { margin: 0; font-size: clamp(40px, 8.4cqw, 110px); line-height: .9; letter-spacing: -0.022em; font-weight: 550; max-width: 10ch; }
.pm-imgs { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-top: 40px; }
.pm-imgs i { display: block; height: 220px; border-radius: 6px; background: linear-gradient(160deg, var(--gray-200), var(--gray-550) 60%, var(--gray-800)); }
.pm-imgs i + i { background: linear-gradient(200deg, var(--gray-250), var(--blue-500) 55%, var(--gray-750)); }
.pm-shield { position: absolute; inset: 0; z-index: 10; cursor: default; display: none; }
.s14.open .pm-shield { display: block; }