.p2-motto {
    position: relative;
    height: 30px;
    margin: 18px 0 16px;
    overflow: hidden;
    font-size: 15px;
    line-height: 30px;
    letter-spacing: .09em;
    font-style: italic;
}

.p2-motto__latin,
.p2-motto__english {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 30px;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: #53ff7f;
}

.p2-motto__english {
    display: none;
    text-transform: uppercase;
}

/* Keep all copy above the artwork at every breakpoint. */
.p2-hero__copy {
    position: relative;
    z-index: 5;
    transform: translateY(-28px);
}

.p2-hero__visual {
    position: relative;
    z-index: 1;
    isolation: isolate;
    overflow: visible;
}

/* City sits only behind the large logo and dissolves on all four edges. */
.p2-hero__visual::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 182%;
    height: 146%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
    background: url('/assets/images/Ruined_Neon-Green_Cyberpunk_Metropolis.png') center 55% / 100% auto no-repeat;
    opacity: .84;
    filter: saturate(.76) brightness(.80) contrast(1.06);

    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, rgba(0,0,0,.05) 5%, rgba(0,0,0,.14) 10%, rgba(0,0,0,.28) 15%, rgba(0,0,0,.48) 20%, rgba(0,0,0,.72) 25%, rgba(0,0,0,.90) 30%, #000 36%, #000 56%, rgba(0,0,0,.94) 60%, rgba(0,0,0,.84) 64%, rgba(0,0,0,.68) 69%, rgba(0,0,0,.50) 74%, rgba(0,0,0,.34) 79%, rgba(0,0,0,.20) 84%, rgba(0,0,0,.10) 89%, rgba(0,0,0,.04) 94%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.06) 6%, rgba(0,0,0,.16) 11%, rgba(0,0,0,.34) 16%, rgba(0,0,0,.58) 21%, rgba(0,0,0,.80) 25%, rgba(0,0,0,.94) 28%, #000 32%, #000 68%, rgba(0,0,0,.94) 72%, rgba(0,0,0,.78) 76%, rgba(0,0,0,.56) 81%, rgba(0,0,0,.34) 86%, rgba(0,0,0,.18) 91%, rgba(0,0,0,.07) 96%, transparent 100%);
    mask-image:
        linear-gradient(to right, transparent 0%, rgba(0,0,0,.05) 5%, rgba(0,0,0,.14) 10%, rgba(0,0,0,.28) 15%, rgba(0,0,0,.48) 20%, rgba(0,0,0,.72) 25%, rgba(0,0,0,.90) 30%, #000 36%, #000 56%, rgba(0,0,0,.94) 60%, rgba(0,0,0,.84) 64%, rgba(0,0,0,.68) 69%, rgba(0,0,0,.50) 74%, rgba(0,0,0,.34) 79%, rgba(0,0,0,.20) 84%, rgba(0,0,0,.10) 89%, rgba(0,0,0,.04) 94%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.06) 6%, rgba(0,0,0,.16) 11%, rgba(0,0,0,.34) 16%, rgba(0,0,0,.58) 21%, rgba(0,0,0,.80) 25%, rgba(0,0,0,.94) 28%, #000 32%, #000 68%, rgba(0,0,0,.94) 72%, rgba(0,0,0,.78) 76%, rgba(0,0,0,.56) 81%, rgba(0,0,0,.34) 86%, rgba(0,0,0,.18) 91%, rgba(0,0,0,.07) 96%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-repeat: no-repeat, no-repeat;
    -webkit-mask-size: 100% 100%, 100% 100%;
    mask-size: 100% 100%, 100% 100%;
}

.p2-hero__visual::before { z-index: 1; }

.p2-hero__visual img {
    position: relative;
    z-index: 2;
    width: min(82%, 440px);
    max-height: 360px;
    filter: drop-shadow(0 0 3px rgba(0,0,0,1)) drop-shadow(0 10px 12px rgba(0,0,0,1)) drop-shadow(0 22px 30px rgba(0,0,0,.82)) drop-shadow(0 0 9px rgba(70,255,115,.30));
}

@media (max-width: 900px) {
    .p2-hero__grid { min-height: 420px; padding: 30px 0; gap: 14px; }
    .p2-hero__copy { transform: translateY(-18px); }
    .p2-eyebrow { font-size: 9px; letter-spacing: .14em; }
    .p2-hero h1 { margin: 12px 0 2px; font-size: clamp(40px,7.2vw,60px); line-height: .84; }
    .p2-motto { height: 24px; margin: 12px 0 10px; font-size: 11px; line-height: 24px; letter-spacing: .075em; }
    .p2-motto__latin,.p2-motto__english { height: 24px; }
    .p2-hero p { max-width: 520px; font-size: 13px; line-height: 1.5; }
    .p2-actions { gap: 8px; margin-top: 18px; }
    .p2-btn { min-height: 40px; padding: 0 12px; font-size: 10px; letter-spacing: .11em; }
    .p2-hero__visual::after { width: 196%; height: 154%; background-position: center 56%; opacity: .80; }
    .p2-hero__visual img { width: min(84%,340px); max-height: 290px; }
}

@media (max-width: 620px) {
    .p2-hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(92px, 28vw);
        min-height: 390px;
        padding: 22px 0;
        gap: 2px;
    }
    .p2-hero__copy { transform: translateY(-8px); min-width: 0; }
    .p2-eyebrow { font-size: 8px; letter-spacing: .12em; }
    .p2-hero h1 { margin-top: 10px; font-size: clamp(30px,8.8vw,40px); }
    .p2-motto { height: 38px; margin: 10px 0 8px; font-size: 9px; line-height: 15px; letter-spacing: .045em; overflow: visible; }
    .p2-motto__latin,.p2-motto__english { height: 38px; white-space: normal; overflow: hidden; line-height: 15px; }
    .p2-hero p { font-size: 11px; line-height: 1.45; }
    .p2-actions { gap: 6px; margin-top: 14px; }
    .p2-btn { min-height: 36px; padding: 0 9px; font-size: 9px; }
    .p2-hero__visual { overflow: hidden; }
    .p2-hero__visual::after { width: 190%; height: 150%; background-position: center 57%; opacity: .72; }
    .p2-hero__visual img { width: min(100%,150px); max-height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
    .p2-motto__latin { display: none; }
    .p2-motto__english { display: block; }
}