.notfound { padding-block:clamp(48px,8vw,96px); text-align:center; }
.notfound .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.notfound__message { max-width:520px; margin:8px auto 22px; color:var(--foinse-color-ink-700); font-size:17px; line-height:1.6; }

/* Marching scene: top-down hall, three windows, one queue per digit. */
.march404 { position:relative; max-width:680px; margin:8px auto 4px; overflow:hidden; }

/* Teller window: a real counter desk seen from above, with a front
   edge line, an open light, and a clerk standing behind it. */
.march404 .teller { position:absolute; top:26px; width:84px; height:20px; margin-left:-42px; background:var(--foinse-color-paper-raised, #FFFFFF); border:1.5px solid var(--foinse-color-line, #E7E2D9); border-radius:7px; }
.march404 .teller::after { content:""; position:absolute; left:9px; right:18px; top:50%; height:3px; margin-top:-1.5px; border-radius:2px; background:var(--foinse-color-ink-700); }
.march404 .teller s { position:absolute; right:6px; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:var(--foinse-color-reserve, #0F9D58); }
.march404 .teller-char { position:absolute; top:0; left:0; width:0; height:0; }
.march404 .teller-char img { position:absolute; left:50%; top:50%; width:23px; height:auto; transform:translate(-50%,-56%); pointer-events:none; }

/* Agent: a small colored disc (the position marker) with a top-down
   character standing on it. Sprites: Kenney Top-Down Shooter, CC0. */
.march404 .agent { position:absolute; top:0; left:0; width:13px; height:13px; margin:-6.5px 0 0 -6.5px; border-radius:50%; background:var(--foinse-color-ink-500); }
.march404 .agent:nth-child(3n) { background:var(--foinse-color-accent, #1652F0); }
.march404 .agent:nth-child(4n) { background:var(--foinse-color-reserve); }
.march404 .agent::before { content:""; position:absolute; left:50%; top:72%; width:17px; height:7px; margin-left:-8.5px; border-radius:50%; background:rgba(28,25,23,.13); }
.march404 .agent img { position:absolute; left:50%; top:50%; width:21px; height:auto; transform:translate(-50%,-56%); pointer-events:none; }

/* Staged reveal: the scene plays first, then the words arrive. */
@keyframes notfound-rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.notfound__message { animation:notfound-rise .7s cubic-bezier(.3,.7,.3,1) 3.4s backwards; }
.notfound .hero-actions { animation:notfound-rise .7s cubic-bezier(.3,.7,.3,1) 4s backwards; }
.notfound .hero-actions + p { animation:notfound-rise .7s cubic-bezier(.3,.7,.3,1) 4.5s backwards; }
@media (prefers-reduced-motion: reduce) {
  .notfound__message, .notfound .hero-actions, .notfound .hero-actions + p { animation:none; }
}

.notfound .hero-actions { justify-content:center; }