/* Approved DYG illustration, cropped by viewport only. Artwork stays intact. */
.staff-art{background-image:url('assets/dyg-bank-staff.webp');background-repeat:no-repeat;background-color:var(--ink);position:relative;isolation:isolate}
.art-vault{background-size:290.82% 101.37%;background-position:.69% 50%;aspect-ratio:610/875}
.art-security{background-size:303.25% 101.37%;background-position:52.82% 50%;aspect-ratio:585/875}
.art-records{background-size:326.70% 101.37%;background-position:99.43% 50%;aspect-ratio:543/875}
/* A single existing illustration slot, with no extra section or spacer. */
.hero>.staff-home{display:block;min-height:0;width:100%;max-width:365px;justify-self:end;align-self:center;border:1px solid var(--ink);background:var(--ink);margin:0;overflow:hidden}
.staff-home .staff-art{width:100%}
.staff-home-label{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;color:var(--paper);font:8px var(--mono);line-height:1.5}
.staff-home-label a{color:var(--acid);text-decoration:underline;text-underline-offset:4px;white-space:nowrap;padding:4px 0}
.staff-home-label a:hover{color:var(--pink)}
/* The two illustrated rooms share the former vault's dimensions. */
.bank-v4 .bank-entry{grid-template-columns:1fr .85fr;gap:4vw;padding:35px 7vw;min-height:640px;overflow:hidden}
.staff-stage{width:100%;max-width:365px;justify-self:end;min-width:0;background:var(--ink);border:1px solid var(--ink)}
.staff-scenes{position:relative;overflow:hidden;aspect-ratio:610/875;background:var(--ink)}
.staff-scene{position:absolute;inset:0;overflow:hidden}
.staff-scene[hidden]{display:none}
.staff-scene .staff-art{width:100%;height:100%}
.staff-scene .art-vault{background-size:290.82% 101.37%}
/* Records uses its own natural portrait proportion, letterboxed rather than stretched. */
.staff-scene .art-records{width:89%;height:100%;margin:0 auto}
.staff-desk{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:50px;background:var(--ink);color:var(--paper);padding:0 12px 0 0;border-top:1px solid #f0efe744}
.staff-tabs{display:flex;align-self:stretch}
.staff-tabs button{font:10px var(--mono);color:var(--paper);background:transparent;border:0;border-right:1px solid #f0efe744;min-height:48px;padding:0 17px;cursor:pointer}
.staff-tabs button[aria-selected=true]{background:var(--acid);color:var(--ink)}
.staff-tabs button:hover:not([aria-selected=true]){background:#343538}
.staff-tabs button:focus-visible{outline:3px solid var(--pink);outline-offset:-4px}
.staff-desk-link{font:8px var(--mono);color:var(--paper);text-decoration:underline;text-underline-offset:4px;line-height:1.5;text-align:right;padding:10px 0}
.staff-desk-link:hover{color:var(--acid)}
@keyframes staff-room-reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.staff-stage.is-switching .staff-scene:not([hidden]){animation:staff-room-reveal .35s cubic-bezier(.16,1,.3,1) both}
@media(max-width:1000px) and (min-width:801px){.hero>.staff-home{max-width:290px}.staff-home-label{display:block}.staff-home-label a{display:inline-block;margin-top:5px}}
@media(max-width:800px){.hero>.staff-home{width:100%;max-width:320px;justify-self:center}.staff-home-label{font-size:9px}}
@media(max-width:700px){
 .bank-v4 .bank-entry{grid-template-columns:1fr;display:grid;padding:30px 5vw 25px;gap:24px;min-height:0}
 .bank-v4 .bank-entry h1{margin:25px 0 20px}
 .staff-stage{max-width:100%;justify-self:stretch}
 /* Wide inset on phones: staff remain legible without a second full-height hero. */
 .staff-scenes{aspect-ratio:1.15}
 .staff-scene .staff-art{width:auto;height:100%;aspect-ratio:610/875;margin:0 auto}
 .staff-scene .art-records{width:auto;aspect-ratio:543/875}
 .hero>.staff-home{max-width:100%;display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
 .staff-home .staff-art{width:100%;min-width:0}
 .staff-home-label{font-size:10px;line-height:1.8;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:18px;gap:20px}
 .staff-home-label span{max-width:12ch;font-size:14px}
 .staff-home-label a{min-height:44px;display:flex;align-items:center;font-size:10px;white-space:normal}
 .staff-desk{padding-right:10px}.staff-desk-link{font-size:8px}.staff-tabs button{padding:0 15px}
}
@media(prefers-reduced-motion:reduce){.staff-stage.is-switching .staff-scene{animation:none!important}}
/* Let the inherited width-fitting headline measure its actual grid track. */
.hero{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr)}
.hero>div:first-child{min-width:0}
@media(max-width:800px){.hero{grid-template-columns:minmax(0,1fr)}}
/* One bounded review sequence: scan, then approval. No ongoing loop. */
.security-viewport{width:100%;aspect-ratio:585/875;overflow:hidden;background:var(--ink);min-width:0}
.security-viewport .staff-art{width:100%;height:100%;transform-origin:72% 65%}
.scanner-zone{position:absolute;left:57%;top:61.5%;width:43%;height:22%;clip-path:polygon(30% 0,100% 0,76% 100%,0 100%);pointer-events:none;overflow:hidden}
.scanner-beam{position:absolute;inset:-10% 0 auto;height:10%;background:linear-gradient(transparent,#d5ff35aa 30%,#f0ffe7 50%,#d5ff35aa 70%,transparent);opacity:0}
.scanner-confirm{position:absolute;inset:0;background:#d5ff35;mix-blend-mode:screen;opacity:0}
.approval-energy{position:absolute;left:60%;top:26%;width:39%;height:10%;background:var(--pink);clip-path:polygon(0 12%,100% 0,100% 85%,0 100%);mix-blend-mode:screen;opacity:0;pointer-events:none}
.staff-home-label{padding-top:0;padding-bottom:0;min-height:44px}
.staff-home-actions{display:flex;align-items:center;gap:9px;flex-shrink:0}
.scanner-replay{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0;border:0;background:transparent;color:var(--acid);cursor:pointer}
.scanner-replay:hover{color:var(--pink)}
.scanner-replay:focus-visible{outline:2px solid var(--pink);outline-offset:-4px}
.scanner-pause{display:none}
.staff-home.is-scanning .scanner-play{display:none}
.staff-home.is-scanning .scanner-pause{display:block}
@media(max-width:700px){.staff-home-label{padding:18px;gap:10px}.staff-home-actions{flex-wrap:wrap;gap:0}.staff-home-actions .scanner-replay{margin-left:-12px}.staff-home-actions a{font-size:9px}}
@media(prefers-reduced-motion:reduce){.scanner-replay{display:none}.security-viewport .staff-art{transform:none!important}.scanner-zone,.approval-energy{display:none}}

/* Local display correction only; the approved artwork remains unchanged elsewhere. */
.art-security::after{content:"";position:absolute;inset:0;background-image:url('assets/dyg-scanner-question.webp');background-size:inherit;background-position:inherit;background-repeat:no-repeat;clip-path:polygon(60% 92%,84% 92%,84% 97%,60% 97%);pointer-events:none}