/* Content Blocks renders this as a direct child of Bootstrap Package's .section
   wrapper (overflow:hidden) - no sticky elements here, but keep full-bleed height. */
.error-404-section {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: clamp(72px, 10vw, 120px);
    color: var(--pm-color-paper);
    text-align: center;
    background:
        linear-gradient(rgba(10, 12, 15, 0.55), rgba(10, 12, 15, 0.86)),
        var(--pm-wallpaper-image) center / cover;
    overflow: hidden;
}

.error-404-section--custom-bg {
    background-position: center;
    background-size: cover;
}

.error-404-shell {
    position: relative;
    width: min(100% - 40px, 760px);
    margin-inline: auto;
}

.error-404-shell .kicker {
    margin: 0 0 18px;
    color: var(--pm-color-orange);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.error-404-numeral {
    margin: 0 0 -0.28em;
    font-size: clamp(120px, 22vw, 260px);
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px rgba(245, 158, 1, 0.55);
    user-select: none;
}

.error-404-shell h1 {
    position: relative;
    margin: 0 0 18px;
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 900;
    line-height: 1.15;
}

.error-404-lead {
    margin: 0 auto 28px;
    max-width: 520px;
    color: rgba(255, 253, 248, 0.78);
    font-size: 18px;
}

.error-404-console {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0 auto 34px;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid var(--pm-color-line-dark);
    background: rgba(10, 12, 15, 0.5);
    backdrop-filter: blur(14px);
    font-size: 13px;
}

.error-404-console span {
    color: rgba(255, 253, 248, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.error-404-console strong {
    color: var(--pm-color-orange);
}

.error-404-shell .button-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

@media (max-width: 640px) {
    .error-404-section {
        min-height: auto;
    }

    .error-404-shell .button-row,
    .error-404-shell .btn {
        width: 100%;
    }
}