/**
 * P4PN Cover stack — z-index, footer clearance, layer fixes.
 */

body.p4pn-home,
body.p4pn-services {
    --p4pn-footer-h: 2.85rem;
    --p4pn-z-mesh: 0;
    --p4pn-z-main: 10;
    --p4pn-z-section: 20;
    --p4pn-z-section-active: 40;
    --p4pn-z-stage: 60;
    --p4pn-z-footer: 3200;
    --p4pn-z-chrome: 4000;
    --p4pn-z-rail: 4800;
    --p4pn-z-header: 10000;
}

body.p4pn-home .p4p-home-canvas {
    z-index: var(--p4pn-z-mesh) !important;
}

body.p4pn-home .p4p-home-main {
    z-index: var(--p4pn-z-main);
    position: relative;
}

body.p4pn-home .p4p-section {
    z-index: var(--p4pn-z-section);
}

body.p4pn-home .p4p-section.is-active {
    z-index: var(--p4pn-z-section-active);
}

body.p4pn-home .p4p-section__shell,
body.p4pn-services .p4pn-cover-shell {
    position: relative;
    z-index: var(--p4pn-z-stage);
    padding-bottom: calc(var(--p4pn-pad-y, 0.5rem) + var(--p4pn-footer-h) + 0.35rem) !important;
}

body.p4pn-home .p4p-capabilities-stack,
body.p4pn-home .p4p-carousel-scene,
body.p4pn-home .p4p-cap-rail,
body.p4pn-home .p4p-hero-v4__orbit {
    position: relative;
    z-index: calc(var(--p4pn-z-stage) + 2);
}

.p4pn-home-footer {
    z-index: var(--p4pn-z-footer) !important;
}

body.p4pn-home .p4p-next-indicator {
    z-index: var(--p4pn-z-chrome) !important;
    bottom: calc(var(--p4pn-footer-h) + 0.65rem + env(safe-area-inset-bottom, 0px)) !important;
}

body.p4pn-home .p4p-tl-minimal {
    z-index: var(--p4pn-z-rail) !important;
}

body.p4pn-services .p4pn-tl {
    z-index: var(--p4pn-z-rail) !important;
}

body.p4pn-services .p4pn-cover-shell {
    padding-left: max(var(--p4pn-pad-x, 1rem), clamp(5.5rem, 12cqi, 7.5rem)) !important;
}

body.p4pn-home .p4p-home-canvas::after {
    box-shadow: inset 0 0 min(60px, 6vw) min(18px, 2vw) rgba(6, 6, 12, 0.35);
}

body.p4pn-services .p4p-page-mesh {
    z-index: 0 !important;
    mix-blend-mode: normal !important;
    filter: none !important;
}

body.p4pn-services .p4p-mesh-readability--lite {
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(4, 4, 10, 0.18) 0%, transparent 28%, transparent 72%, rgba(4, 4, 10, 0.2) 100%),
        radial-gradient(ellipse 90% 55% at 50% 47%, rgba(4, 4, 10, 0.08), rgba(4, 4, 10, 0.32));
    pointer-events: none;
}

@media (pointer: coarse) {
    body.p4pn-home .p4p-section__shell,
    body.p4pn-services .p4pn-cover-shell {
        padding-bottom: calc(var(--p4pn-pad-y, 0.5rem) + 0.5rem) !important;
    }

    .p4pn-home-footer {
        position: relative;
        z-index: 10 !important;
    }
}