body {
    position: relative;
    background-color: #020604;
    background-image: url('/assets/images/Grimy_Green_Industrial_Texture.webp');
    background-repeat: repeat;
    background-size: 768px auto;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
}

body::before {
    opacity: .16;
    mix-blend-mode: screen;
    background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 4px);
    background-size: 100% 4px;
}

body::after {
    z-index: 998;
    background: radial-gradient(circle at center, transparent 55%, rgba(0,0,0,.18) 82%, rgba(0,0,0,.38) 100%);
}

.p2-topbar,
.p2-footer,
.p2-live,
.p2-warband,
.p2-mission {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        inset 0 0 28px rgba(0,0,0,.25),
        0 0 0 1px rgba(0,0,0,.35);
}

.p2-topbar {
    background: rgba(2,6,4,.72);
}

.p2-hero {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 78% 40%, rgba(46,90,55,.12), transparent 30%),
        linear-gradient(180deg, rgba(5,11,7,.20), rgba(1,4,2,.38));
}

.p2-hero::before,
.p2-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.p2-hero::before {
    z-index: -1;
    opacity: .26;
    background-image:
        linear-gradient(112deg, transparent 0 17%, rgba(255,255,255,.018) 17.2%, transparent 17.6% 100%),
        linear-gradient(76deg, transparent 0 68%, rgba(255,255,255,.012) 68.1%, transparent 68.4% 100%);
}

.p2-hero::after {
    background:
        linear-gradient(90deg, rgba(0,0,0,.12), transparent 18%, transparent 82%, rgba(0,0,0,.14)),
        linear-gradient(180deg, rgba(0,0,0,.03), transparent 30%, rgba(0,0,0,.10));
}

.p2-hero h1 {
    text-shadow:
        1px 0 0 rgba(255,255,255,.10),
        -1px 0 0 rgba(0,0,0,.75),
        0 2px 18px rgba(0,0,0,.55);
    filter: contrast(1.08);
}

.p2-eyebrow,
.p2-panel__head h2,
.p2-mission > span,
.p2-motto {
    color: #72d37f;
    text-shadow: 0 0 8px rgba(66,132,77,.20);
}

.p2-hero p,
.p2-mission p,
.p2-footer span,
.p2-panel__head > span,
.p2-panel__head > a {
    color: #9ca69e;
}

.p2-btn,
.p2-mission a {
    border-color: #465149;
    background: rgba(3,7,4,.72);
    box-shadow: inset 0 0 12px rgba(0,0,0,.3);
}

.p2-btn--primary,
.p2-mission a:hover,
.p2-btn:hover {
    border-color: #5f9469;
    color: #8dde98;
}

.p2-hero__visual img {
    filter:
        saturate(.86)
        contrast(1.08)
        brightness(.94)
        drop-shadow(0 10px 18px rgba(0,0,0,.6))
        drop-shadow(0 0 20px rgba(55,105,63,.16));
}

.p2-live,
.p2-warband,
.p2-mission {
    position: relative;
    overflow: hidden;
    border-color: #2c4932;
    background: rgba(2,7,4,.58);
}

.p2-live::before,
.p2-warband::before,
.p2-mission::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .22;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.010) 0 1px, transparent 1px 4px),
        linear-gradient(118deg, transparent 0 22%, rgba(255,255,255,.014) 22.2%, transparent 22.5% 100%);
}

.p2-panel__head {
    border-bottom-color: #2d4833;
    background: rgba(5,12,7,.64);
}

.p2-live__row {
    border-bottom-color: #1b2b1f;
}

.p2-footer {
    border-top-color: #2a4530;
    background: rgba(1,3,2,.76);
}

@media (max-width: 620px) {
    body::before {
        opacity: .12;
    }

    .p2-hero::before {
        opacity: .22;
    }
}