#services.tj-vault { --tj-door-img:url("../../assets/toughjobs-vault-black-metal.webp"); isolation:isolate; }
/* ---------- Doors (always the full height of the section) ---------- */
.tj-vault__door,.tj-vault__seam{display:none}
.tj-vault.is-armed .tj-vault__door{display:block}
.tj-vault.is-done .tj-vault__door,.tj-vault.is-done .tj-vault__seam{display:none}
.tj-vault__door{
  position:absolute; top:0; bottom:0; width:100%; z-index:5; overflow:hidden; cursor:pointer;
  background:#1a1f27; transition:transform 1.3s cubic-bezier(.72,0,.18,1);
}
.tj-vault__door--l{left:0;clip-path:polygon(0% 0%,52.65% 0%,52.65% 14.54%,38.9% 23.05%,38.9% 36.47%,55.24% 45.38%,55.24% 57.89%,38.9% 67.14%,38.9% 79.99%,52.65% 88.22%,52.65% 100%,0% 100%)}
.tj-vault__door--r{right:0;clip-path:polygon(100% 0%,52.65% 0%,52.65% 14.54%,38.9% 23.05%,38.9% 36.47%,55.24% 45.38%,55.24% 57.89%,38.9% 67.14%,38.9% 79.99%,52.65% 88.22%,52.65% 100%,100% 100%)}
.tj-vault.is-open .tj-vault__door--l{transform:translateX(-64%)}
.tj-vault.is-open .tj-vault__door--r{transform:translateX(64%)}

/* Full-size matching copies, clipped along the same traced interlocking joint.
   Their complementary masks meet without an overlap or a rectangular cut. */
.tj-vault__plate{
  position:absolute; top:0; height:100%; width:100%;
  background-image:var(--tj-door-img); background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;
}
.tj-vault__door--l .tj-vault__plate{left:0}
.tj-vault__door--r .tj-vault__plate{right:0}

/* The green status lamp follows the artwork on the left sliding leaf.
   Percentage geometry keeps the complete rectangular frame visible at every size. */
.tj-vault__plate::after{
  content:"";position:absolute;left:23%;top:9%;width:9.6%;height:1.5%;
  border-radius:2px;background:#c0e889;opacity:0;
  box-shadow:0 0 12px 3px rgba(151,196,92,.6);transition:opacity .8s ease;
}
.tj-vault.is-charging .tj-vault__plate::after{opacity:.22}
.tj-vault.is-unlocked .tj-vault__plate::after{opacity:.65}
.tj-vault.is-open .tj-vault__plate::after{opacity:.2}
/* The angular joint is in the art and polygon masks; never draw a straight overlay. */
#services.tj-vault > .container { transition:none; }
#services.tj-vault.is-armed:not(.is-open) > .container { opacity:0; pointer-events:none; }
#services.tj-vault.is-open > .container { opacity:1; transition:opacity .6s ease; }
#services.tj-vault.is-done > .container { transition:none; }
.tj-vault__skip { display:none; position:absolute; top:clamp(84px,18%,300px); left:50%; transform:translateX(-50%); z-index:7; background:#0A0F1C; border:1px solid rgba(255,255,255,.6); border-radius:4px; padding:12px 20px; color:#fff; font:700 13px "Archivo",sans-serif; cursor:pointer; white-space:nowrap; }
.tj-vault.is-armed:not(.is-open) .tj-vault__skip { display:block; }
.tj-vault__skip:focus-visible { outline:3px solid #fff; outline-offset:4px; }
@media (prefers-reduced-motion:reduce) {
  #services.tj-vault .tj-vault__door, #services.tj-vault .tj-vault__seam, #services.tj-vault .tj-vault__skip { display:none; transition:none; }
  #services.tj-vault.is-armed > .container, #services.tj-vault.is-open > .container { opacity:1; pointer-events:auto; transition:none; }
}