/* Photographic metal assets are independent from the functional controls. */
.vault-section{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:1280px;padding:140px 5vw}
.vault-section .safe.mechanical-safe{position:relative;width:100%;max-width:820px;margin:0 auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;isolation:isolate;perspective:1500px;overflow:visible}
.vault-section .mechanical-safe:before,.vault-section .mechanical-safe:after{display:none}
.vault-section .mechanical-safe .vault-face{position:relative;width:100%;aspect-ratio:1.45;transform-origin:5% 50%;transform-style:preserve-3d;z-index:1;opacity:1;text-align:center;transition:transform 1s cubic-bezier(.32,.02,.2,1),filter 1s,opacity .55s;will-change:transform;filter:drop-shadow(0 20px 18px #0009)}
.vault-door-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}
.vault-cavity{position:absolute;inset:5% 5% 13%;display:grid;place-items:center;background:radial-gradient(ellipse,#1b160e,#020303 67%);box-shadow:inset 0 0 0 5px #332b1e,inset 0 0 30px 15px #000;z-index:0}
.vault-cavity span{font:50px var(--serif);color:#8f774e;letter-spacing:10px;opacity:.35}
.vault-section .mechanical-safe .dial-wrap{position:absolute;top:6%;left:29%;width:42%;height:auto;aspect-ratio:1;margin:0;isolation:isolate}
.vault-section .mechanical-safe .dial{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;background:none;border:0;border-radius:50%;box-shadow:none;transition:transform .9s cubic-bezier(.22,.65,.18,1);z-index:2;cursor:grab;touch-action:manipulation}
.vault-section .mechanical-safe .dial:active{cursor:grabbing}.vault-section .mechanical-safe .dial:focus-visible{outline:1px solid #c5a059;outline-offset:-8px}
.dial img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;filter:drop-shadow(0 5px 5px #000a)}
.vault-dial-monogram{position:absolute;left:0;right:0;top:44%;z-index:3;font:clamp(14px,2vw,26px)/1 var(--serif);letter-spacing:-1px;color:#c6a970;pointer-events:none;text-shadow:0 1px 2px #000}
.vault-section .mechanical-safe .bolt{position:absolute;top:44%;height:10%;width:27%;z-index:0;background:linear-gradient(#43311c,#ac8e58 20%,#6d5631 42%,#34291c 70%,#947645 93%,#282015);border:1px solid #725832;border-radius:1px;box-shadow:0 3px 5px #000b;transition:transform .6s cubic-bezier(.7,0,.2,1)}
.vault-section .mechanical-safe .bolt.left{left:-14%}.vault-section .mechanical-safe .bolt.right{right:-14%}
.vault-section .mechanical-safe #vault-form{position:absolute;left:24%;right:24%;top:62%;margin:0}
.vault-section .mechanical-safe .code-inputs{display:flex;gap:7%;margin:0 0 4%;justify-content:center}
.vault-section .mechanical-safe .code-inputs input{width:24%;height:auto;aspect-ratio:1.1;min-width:0;border:1px solid #b3945e;border-radius:0;background:linear-gradient(#070908,#151713);box-shadow:inset 0 3px 5px #000,0 1px 0 #d2b77b55;color:#d4bd89;font:clamp(18px,2.4vw,30px)/1 var(--serif);padding:0;text-align:center}
.vault-section .mechanical-safe .safe-caption{font:500 clamp(5px,.52vw,7px)/1.5 var(--sans);letter-spacing:1.6px;color:#c6b58c;margin-bottom:6%}
.vault-section .mechanical-safe #vault-form .brass{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;max-width:none;min-width:0;min-height:0;margin:0;padding:5% 8%;font:600 clamp(6px,.64vw,8px)/1.4 var(--sans);letter-spacing:1.7px;background:linear-gradient(100deg,#ac864b,#d1ad6e 51%,#b99559);border:1px solid #bfa06c;box-shadow:inset 0 1px 0 #e5ca9280,0 3px 5px #0008;color:#3a2b16}
.vault-section .mechanical-safe #vault-form .brass:after{display:none}.vault-section .mechanical-safe #vault-form .brass:hover{transform:none;filter:brightness(1.1)}
.vault-section .mechanical-safe .hint{position:relative;font:italic 15px/1.6 var(--serif);text-align:center;max-width:90%;margin:18px auto 0;color:#b3a182}
.vault-section .mechanical-safe .vault-message{position:relative;min-height:0;text-align:center;font-size:11px;margin:8px auto 0;color:#c5a059;max-width:90%}
.vault-section .mechanical-safe button:disabled{cursor:default}.vault-section .mechanical-safe .vault-message:empty{display:none}
.vault-section .mechanical-safe.opening .bolt.left{transform:translateX(70%);transition-delay:.4s}.vault-section .mechanical-safe.opening .bolt.right{transform:translateX(-70%);transition-delay:.4s}
.vault-section .mechanical-safe.opening .vault-face{transform:rotateY(-100deg);filter:brightness(.5) drop-shadow(10px 20px 25px #000);opacity:0;transition-delay:1s}
.vault-section .mechanical-safe.opening>.hint{opacity:0;transition:opacity .3s}.vault-section .mechanical-safe.error{box-shadow:none;border:0;animation:shake .35s}.vault-section .mechanical-safe.error .code-inputs input{border-color:#9d4d3e}
@media(max-width:900px){.vault-section{grid-template-columns:minmax(170px,.6fr) minmax(0,1.4fr);gap:24px;padding:75px 30px}.vault-section>.section-heading h2{font-size:39px}.vault-engraving{letter-spacing:1px}.vault-brand span{font-size:5px;letter-spacing:1px}.vault-collection{font-size:7px;letter-spacing:1.5px}.vault-collection span{font-size:5px}.vault-section .mechanical-safe .safe-caption{letter-spacing:.7px}.vault-section .mechanical-safe #vault-form .brass{letter-spacing:.7px}.vault-section .mechanical-safe .hint{font-size:13px}}
@media(max-width:700px){.vault-section{grid-template-columns:1fr;gap:32px;padding:65px 18px}.vault-section>.section-heading{padding:0 6px}.vault-section .safe.mechanical-safe{max-width:620px}.vault-dial-monogram{font-size:clamp(14px,4vw,24px)}.vault-brand{font-size:clamp(7px,2vw,12px)}.vault-brand span{font-size:clamp(4px,1.1vw,7px)}.vault-collection{font-size:clamp(5px,1.6vw,9px)}.vault-section .mechanical-safe .dial-pointer{font-size:9px}.vault-section .mechanical-safe .code-inputs input{font-size:clamp(20px,5vw,28px)}.vault-section .mechanical-safe .safe-caption{font-size:clamp(4px,1vw,6px)}.vault-section .mechanical-safe #vault-form .brass{font-size:clamp(5px,1.3vw,8px)}.vault-section .mechanical-safe .lock-status{font-size:4px}.vault-section .mechanical-safe .hint{max-width:85%;font-size:14px}}
@media(prefers-reduced-motion:reduce){.vault-section .mechanical-safe.opening .vault-face{transform:none}.vault-section .mechanical-safe .dial,.vault-section .mechanical-safe .vault-face,.vault-section .mechanical-safe .bolt{transition:none!important}}
.vault-door-art{filter:brightness(.72) saturate(.72)}
.dial img{filter:brightness(.8) saturate(.72) drop-shadow(0 5px 5px #000a)}

.dial .vault-scale{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 1px 1px #000);pointer-events:none}

/* Centre the visible wheel, compensating for the photographic asset's alpha margins.
   Opaque bounds: x=36..1214, y=19..1208 on a 1254px canvas. */
.vault-section .mechanical-safe .dial-wrap{left:50%;width:42%;height:auto;aspect-ratio:1 / 1;transform:translateX(-50%)}
.vault-section .mechanical-safe .dial{aspect-ratio:1 / 1;transform-origin:50% 50%;overflow:visible}
.vault-section .mechanical-safe .dial .vault-dial-art{position:absolute;inset:auto;left:-3.056027%;top:-1.598823%;width:106.451613%;height:105.466779%;max-width:none;object-fit:fill}
.vault-section .mechanical-safe .dial .vault-scale{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.vault-dial-monogram{left:50%;right:auto;top:50%;transform:translate(-50%,-50%);line-height:1;margin:0}
.vault-section .mechanical-safe .safe-caption{font-size:clamp(10px,.85vw,12px);font-weight:600;line-height:1.5;letter-spacing:1.5px;margin-bottom:12px}
.vault-section .mechanical-safe #vault-form .brass{justify-content:center;text-align:center;gap:0;font-size:clamp(12px,1vw,14px);line-height:1.4;letter-spacing:1.5px;min-height:44px;padding:10px 14px}
.vault-section .mechanical-safe #vault-form{left:23%;right:23%;top:61%}
.vault-section .mechanical-safe .code-inputs{margin-bottom:10px}
@media(max-width:900px) and (min-width:701px){.vault-section{grid-template-columns:1fr;gap:32px}.vault-section>.section-heading{max-width:520px}.vault-section .safe.mechanical-safe{max-width:680px;margin:0 auto}}
@media(max-width:700px){
 .vault-section .mechanical-safe .vault-face{aspect-ratio:1.2}
 .vault-section .mechanical-safe .dial-wrap{top:8%;width:44%}
 .vault-section .mechanical-safe #vault-form{left:16%;right:16%;top:61%}
 .vault-section .mechanical-safe .code-inputs{gap:7%;margin-bottom:8px}
 .vault-section .mechanical-safe .code-inputs input{width:21%;aspect-ratio:1.1}
 .vault-section .mechanical-safe .safe-caption{font-size:10px;line-height:1.4;letter-spacing:1px;margin-bottom:8px}
 .vault-section .mechanical-safe #vault-form .brass{font-size:12px;min-height:40px;padding:9px 10px;letter-spacing:1px}
}
.vault-section .mechanical-safe #vault-form{top:60%}
.vault-section .mechanical-safe .code-inputs input{width:22%}
@media(max-width:700px){
 .vault-section .mechanical-safe .vault-face{aspect-ratio:1.1}
 .vault-section .mechanical-safe .dial-wrap{top:6%;width:42%}
 .vault-section .mechanical-safe #vault-form{top:55%}
 .vault-section .mechanical-safe .code-inputs input{width:21%}
}