.portfolio-vault{position:relative;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:40px;padding:38px 44px;margin:35px 0;border:1px solid #caa06c45;border-radius:26px;background:radial-gradient(ellipse at 80% 55%,#a8743430,transparent 55%),linear-gradient(120deg,#202124,#121315);overflow:hidden}.vault-copy .eyebrow{font:9px PlexMono,monospace;color:#c6a77f}.vault-copy h3{font-size:clamp(27px,3vw,45px);font-weight:550;margin:20px 0;line-height:1.12}.vault-copy h3 em{font-family:Cormorant,Georgia,serif;font-size:1.2em;font-style:italic;color:#dfbe8e}.vault-copy>p:not(.eyebrow){font-size:13px;color:#bcb4a7;line-height:1.8;max-width:460px}.vault-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px}.vault-actions .button{font-size:12px;min-height:48px;margin-top:6px}.vault-actions>a:not(.button){font-size:12px;color:#dbc097;border-bottom:1px solid #dbc09740;padding-bottom:4px}.vault-stage{perspective:1100px;min-height:340px;display:grid;place-items:center;position:relative}.vault-stage:after{content:"";position:absolute;bottom:9px;width:80%;height:30px;background:#0008;filter:blur(15px);border-radius:50%;pointer-events:none}.vault-body{width:235px;height:280px;position:relative;background:linear-gradient(120deg,#444343,#242628 55%,#161719);border-radius:17px;box-shadow:18px 15px 0 #101214,19px 16px 0 #6e5b4238,0 25px 45px #0007,inset 0 0 0 8px #353536,inset 0 0 0 10px #c8aa7040;transform:rotateY(-17deg) rotateX(5deg);transform-style:preserve-3d}.vault-inside{position:absolute;inset:19px;background:radial-gradient(ellipse at 50% 5%,#dbac5c40,#090b0d 80%);border-radius:7px;box-shadow:inset 0 0 20px #000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;text-align:center}.vault-inside:before{content:"";width:72px;height:84px;border:1px solid #bda17670;background:linear-gradient(135deg,#d6b58325,#d6b58306);box-shadow:8px -7px 0 -1px #312a20,9px -8px #a58b5e45;transform:rotate(-5deg)}.vault-inside span{font:8px PlexMono,monospace;letter-spacing:.13em;color:#d7b583}.vault-inside b{font-size:13px;font-weight:500;color:#d7c6a9}.vault-door{position:absolute;inset:8px;border-radius:11px;background:linear-gradient(125deg,#575554 0%,#303234 28%,#222427 68%,#45413b);border:1px solid #be9b6455;box-shadow:inset 0 0 0 4px #17191b,inset 0 0 0 5px #cbb17a55,5px 0 9px #0009;transform-origin:6px center;transform:rotateY(0deg);transition:transform 1.3s cubic-bezier(.22,1,.36,1);backface-visibility:visible;display:flex;flex-direction:column;align-items:center;padding:27px 20px;transform-style:preserve-3d}.vault-door:before,.vault-door:after{content:"";position:absolute;left:-10px;width:13px;height:37px;border:1px solid #b39b7440;border-radius:4px;background:linear-gradient(90deg,#111,#716756,#212326)}.vault-door:before{top:35px}.vault-door:after{bottom:35px}.vault-brand{font:9px PlexMono,monospace;letter-spacing:.3em;color:#d4bd97}.vault-lock{width:71px;height:71px;margin:21px 0 17px;border-radius:50%;background:repeating-conic-gradient(#ceb482 0deg 2deg,#33302a 2deg 15deg);border:5px solid #16181a;box-shadow:0 4px 10px #0007,inset 0 0 0 3px #ac9568;display:grid;place-items:center;transition:rotate .7s}.vault-lock:before{content:"";width:33px;height:33px;border:1px solid #dcc29688;border-radius:50%;background:linear-gradient(120deg,#d0b88e,#514a3e);box-shadow:0 2px 6px #0008}.vault-dots{font:18px PlexMono,monospace;letter-spacing:.16em;color:#e2c391;background:#0f1213;box-shadow:inset 0 1px 4px #000;padding:5px 9px;border-radius:5px;border:1px solid #b89d6330}.vault-keypad{display:grid;grid-template-columns:repeat(3,13px);gap:5px;margin-top:14px}.vault-keypad i{height:7px;border-radius:2px;background:linear-gradient(#7c7569,#343332);border:1px solid #bca77d30}.vault-demo{position:absolute;bottom:-4px;background:none;border:0;border-bottom:1px solid #c4a67455;padding:8px 0;color:#b8a282;font-size:10px;z-index:2}.portfolio-vault.is-open .vault-door{transform:rotateY(-108deg)}.portfolio-vault.is-open .vault-lock{rotate:100deg}.vault-dialog{max-width:450px;width:calc(100% - 32px);padding:32px;border:1px solid #d3ad724d;border-radius:22px;background:#1b1d20;color:#eee6da;box-shadow:0 35px 100px #000a}.vault-dialog::backdrop{background:#060708bf;backdrop-filter:blur(8px)}.vault-dialog h2{font-size:29px;margin:30px 0 20px}.vault-dialog p{font-size:14px;line-height:1.8;color:#bfb7aa}.vault-dialog .vault-close{float:right;background:none;border:0;color:#cab18c;font-size:12px;padding:8px}.vault-dialog .button{font-size:12px}.vault-dialog label{font-size:11px;color:#bcaa8d;display:block;margin-top:20px}.vault-dialog input{width:100%;padding:14px;margin-top:8px;border:1px solid #d2b48133;border-radius:9px;background:#111315;color:#a69c8a;letter-spacing:.3em}.direction-page .portfolio-vault{margin:0 var(--gutter) 60px}.vault-note{font-size:10px!important;color:#948b7d!important;margin-top:18px}
@media(max-width:900px){.portfolio-vault{padding:28px;gap:20px}.vault-body{width:210px;height:265px}.vault-stage{min-height:320px}.vault-copy h3{font-size:31px}}
@media(max-width:600px){.portfolio-vault{grid-template-columns:1fr;padding:25px 21px;gap:5px;margin:26px 0}.vault-copy h3{font-size:30px}.vault-copy>p:not(.eyebrow){font-size:12px}.vault-stage{min-height:325px;overflow:visible}.vault-body{width:210px}.vault-dialog{padding:24px}.direction-page .portfolio-vault{margin:0 var(--gutter) 40px}.vault-actions{gap:14px}.vault-actions .button{font-size:11px}}
@media(prefers-reduced-motion:reduce){.vault-door,.vault-lock{transition:none}}

.vault-door>*{backface-visibility:hidden;transform:translateZ(1px)}
@media(max-width:600px){.vault-body{transition:transform 1.3s cubic-bezier(.22,1,.36,1)}.portfolio-vault.is-open .vault-body{transform:translateX(28px) scale(.85) rotateY(-10deg) rotateX(5deg)}}
@media(prefers-reduced-motion:reduce){.vault-body{transition:none}}

/* Locked object and a separate, deliberately content-free light demonstration. */
.vault-copy{position:relative;z-index:3}.vault-stage{min-height:385px;z-index:1}
.vault-body{cursor:pointer;outline-offset:12px;transform:rotateY(calc(-17deg + var(--tilt-y,0deg))) rotateX(calc(5deg + var(--tilt-x,0deg)));transition:transform .65s cubic-bezier(.22,1,.36,1)}
.vault-inside{display:block;padding:0;overflow:hidden;background:#17140d;box-shadow:inset 0 0 0 4px #0a0b0c,inset 0 0 24px #000}
.vault-inside:before{content:none}.vault-core,.vault-rays{position:absolute!important;display:block;inset:0;width:auto;height:auto;border-radius:5px;opacity:0;pointer-events:none;transition:opacity .7s}
.vault-core{background:radial-gradient(ellipse at 48% 65%,#fffef0 0%,#fff6bd 35%,#fbd16d 70%,#b57c28 100%);box-shadow:inset 0 0 22px #fff3c7}
.vault-rays{inset:-80%;background:repeating-conic-gradient(from 10deg at 50% 65%,transparent 0deg 13deg,#fffef2aa 15deg 20deg,transparent 24deg 45deg);mix-blend-mode:screen;filter:blur(6px)}
.vault-spill{position:absolute;inset:-50% -60% -10% -30%;opacity:0;pointer-events:none;z-index:1;background:conic-gradient(from 208deg at 48% 75%,transparent 0deg,#ffe8a022 15deg,transparent 28deg,#ffefb477 38deg,transparent 50deg,#ffecc855 66deg,transparent 86deg);filter:blur(12px);transform:translateZ(12px);transition:opacity .6s;mask-image:radial-gradient(ellipse,#000 10%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse,#000 10%,transparent 72%)}
.vault-door{padding-top:24px;transition:transform 1.15s cubic-bezier(.18,.75,.22,1);transform:rotateY(0deg);z-index:2}
.vault-handwheel{position:relative;display:block;width:78px;height:78px;margin:19px 0 17px;border:6px solid #92836a;border-top-color:#dac6a1;border-right-color:#b49b72;border-bottom-color:#645c50;border-radius:50%;background:radial-gradient(circle,#17191b 10%,#292a2a 90%);box-shadow:0 6px 11px #0008,inset 0 0 0 2px #252729,0 0 0 2px #1b1c1d;transform:translateZ(4px) rotate(var(--wheel-turn,0deg));transition:transform .85s cubic-bezier(.5,.05,.25,1)}
.vault-handwheel i{position:absolute;left:50%;top:calc(50% - 4px);width:33px;height:8px;border-radius:5px;background:linear-gradient(#e7d0a5,#82735a 45%,#48463f);box-shadow:0 2px 3px #0008;transform-origin:0 50%}.vault-handwheel i:nth-child(2){rotate:90deg}.vault-handwheel i:nth-child(3){rotate:180deg}.vault-handwheel i:nth-child(4){rotate:270deg}.vault-handwheel b{position:absolute;width:24px;height:24px;left:50%;top:50%;translate:-50% -50%;border-radius:50%;background:linear-gradient(135deg,#f1d7a2,#a38b66 45%,#4e4b43);box-shadow:0 3px 5px #0008,inset 0 0 0 2px #ac9675}
.vault-state{position:absolute;bottom:0;left:-10%;right:-10%;margin:0;min-height:30px;text-align:center;font:9px/1.6 PlexMono,monospace;color:#b3a184;pointer-events:none}
.vault-demo-panel{display:flex;align-items:flex-start;flex-direction:column;gap:10px;margin-top:27px;padding-top:20px;border-top:1px solid #d9b78025}.vault-demo-panel>span{font:8px PlexMono,monospace;letter-spacing:.1em;color:#a5967e}.vault-demo-panel>small{font-size:10px;color:#918778}
.vault-demo{position:relative;bottom:auto;min-height:42px;padding:10px 15px;background:linear-gradient(125deg,#c2a27815,#ffffff04);border:1px solid #c4a67455;border-radius:10px;color:#e0c298;font-size:11px;transition:background .25s,border-color .25s}.vault-demo:hover{background:#d5b37420;border-color:#e7c38caa}.vault-demo:disabled{cursor:default;color:#ad9b80}
.portfolio-vault.is-rattling .vault-door{animation:vault-rattle .48s ease-in-out}
@keyframes vault-rattle{0%,100%{transform:translateX(0) rotateZ(0)}20%,65%{transform:translateX(-1.8px) rotateZ(-.25deg)}40%,80%{transform:translateX(1.3px) rotateZ(.2deg)}}
.portfolio-vault[data-phase=turning],.portfolio-vault[data-phase=opening],.portfolio-vault[data-phase=glow],.portfolio-vault[data-phase=closing]{--wheel-turn:390deg}
.portfolio-vault[data-phase=turning] .vault-dots{color:#fff0c0;box-shadow:0 0 15px #e5bf6a28}
.portfolio-vault[data-phase=opening] .vault-door,.portfolio-vault[data-phase=glow] .vault-door{transform:rotateY(-106deg)}
.portfolio-vault[data-phase=opening] .vault-core,.portfolio-vault[data-phase=glow] .vault-core{opacity:1}
.portfolio-vault[data-phase=opening] .vault-rays,.portfolio-vault[data-phase=glow] .vault-rays{opacity:.7;animation:vault-ray-drift 6s linear infinite}
.portfolio-vault[data-phase=opening] .vault-spill,.portfolio-vault[data-phase=glow] .vault-spill{opacity:.8;animation:vault-spill-drift 3s ease-in-out infinite alternate}
@keyframes vault-ray-drift{from{transform:rotate(-12deg)}to{transform:rotate(22deg)}}
@keyframes vault-spill-drift{from{transform:translateZ(12px) rotate(-5deg) scale(.96)}to{transform:translateZ(12px) rotate(7deg) scale(1.06)}}
.portfolio-vault[data-phase=closing] .vault-door{transition:transform .19s cubic-bezier(.8,0,1,1);transform:rotateY(0deg)}
.portfolio-vault[data-phase=closing] .vault-core,.portfolio-vault[data-phase=closing] .vault-rays,.portfolio-vault[data-phase=closing] .vault-spill{transition:opacity .16s;opacity:0}
.portfolio-vault[data-phase=settle] .vault-body{animation:vault-impact .3s ease-out}
@keyframes vault-impact{0%,100%{translate:0}30%{translate:2px 0}65%{translate:-1px 0}}
@media(max-width:900px){.vault-stage{min-height:355px}.vault-handwheel{width:70px;height:70px;margin-top:15px;margin-bottom:14px}.vault-handwheel i{width:29px}}
@media(max-width:600px){.vault-stage{min-height:340px;margin-top:18px}.vault-state{font-size:8px;left:0;right:0}.vault-demo-panel{margin-top:20px}.portfolio-vault[data-phase=opening] .vault-body,.portfolio-vault[data-phase=glow] .vault-body{transform:translateX(28px) scale(.85) rotateY(-10deg) rotateX(5deg)}.vault-spill{inset:-25% -40% -10% -20%}.vault-body{transition:transform 1.1s cubic-bezier(.22,1,.36,1)}}
@media(prefers-reduced-motion:reduce){.vault-door,.vault-handwheel,.vault-body,.vault-core,.vault-rays,.vault-spill{transition:none!important;animation:none!important}.vault-body{transform:rotateY(-17deg) rotateX(5deg)!important}.portfolio-vault[data-phase=glow] .vault-door{transform:rotateY(-85deg)}}
.vault-spill{background:conic-gradient(from -46deg at 50% 78%,transparent 0deg,#ffe8a025 8deg,#ffefb480 15deg,transparent 23deg,#fff0b670 35deg,transparent 43deg,#ffecc890 55deg,transparent 66deg,#fff5d070 78deg,transparent 92deg),radial-gradient(ellipse at 50% 78%,#ffeeb755,transparent 55%);filter:blur(7px)}
.vault-body:before{content:"";position:absolute;inset:-25%;pointer-events:none;opacity:0;z-index:-1;background:radial-gradient(ellipse,#fbd18044,transparent 65%);filter:blur(20px);transition:opacity .7s}
.portfolio-vault[data-phase=opening] .vault-body:before,.portfolio-vault[data-phase=glow] .vault-body:before{opacity:1}
.portfolio-vault[data-phase=closing] .vault-body:before{transition-duration:.16s;opacity:0}