/* KPO4 page, aligned with Kamnet's audience and service pages. */
.kpo-project-page {
    --kpo-ink: var(--color-kamnet-blue-dark, #010048);
    --kpo-copy: #444b5a;
    --kpo-muted: #626a79;
    --kpo-orange: var(--color-kamnet-orange, #ee8401);
    --kpo-orange-dark: var(--color-kamnet-orange-dark, #ba4e00);
    --kpo-ground: var(--color-kamnet-bg-subtle, #f7f8fa);
    --kpo-surface: #fff;
    color: var(--kpo-ink);
    background: var(--kpo-surface);
}

.kpo-project-page section[id],
.kpo-project-page [id] {
    scroll-margin-top: 8.5rem;
}

.kpo-cover {
    min-height: 35rem;
    padding-block: 9.5rem 4.5rem;
}

.kpo-cover .container {
    width: 100%;
}

.kpo-cover-main {
    align-self: center;
}

.kpo-cover-lead {
    max-width: 41rem;
    text-wrap: pretty;
}

.kpo-cover-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 2rem;
}

.kpo-action--text {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    color: var(--kpo-ink);
    text-decoration: underline;
    text-decoration-color: var(--kpo-orange);
    text-underline-offset: .3em;
}

.kpo-action--text:hover {
    color: var(--kpo-orange-dark);
}

.kpo-cover-scope {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    margin-left: auto;
    padding: 1rem 0 1rem 2rem;
    text-align: left;
}

.kpo-cover-scope strong {
    color: var(--kpo-orange-dark);
    font-size: clamp(3.5rem, 5.5vw, 4.5rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.055em;
    line-height: .95;
}

.kpo-cover-scope span {
    max-width: 17ch;
    color: var(--kpo-copy);
    font-size: 1rem;
    line-height: 1.55;
}

.kpo-introduction,
.kpo-agreement,
.kpo-documents {
    padding-block: clamp(4.5rem, 8vw, 7rem);
}

.kpo-introduction__layout {
    display: grid;
    grid-template-columns: minmax(13rem, .72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: clamp(2.5rem, 7vw, 7rem);
}

.kpo-introduction__body {
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    align-items: start;
    gap: clamp(1.5rem, 4vw, 4rem);
}

.kpo-introduction__summary {
    max-width: 25ch;
    margin: 0;
    color: var(--kpo-ink);
    font-size: clamp(1.45rem, 2.3vw, 2rem);
    font-weight: 500;
    letter-spacing: -.025em;
    line-height: 1.28;
    text-wrap: balance;
}

.kpo-introduction__copy {
    display: grid;
    max-width: 56ch;
    gap: 1rem;
}

.kpo-introduction__copy p {
    margin: 0;
    color: var(--kpo-copy);
    font-size: 1.03rem;
    line-height: 1.7;
    text-wrap: pretty;
}

.kpo-financing {
    padding-block: clamp(4rem, 7vw, 6rem);
    background: var(--kpo-ground);
}

.kpo-financing__board {
    display: grid;
    width: 100%;
    margin-inline: auto;
    background: #fff;
}

.kpo-area-section {
    padding-block: clamp(4.5rem, 8vw, 7rem);
    background: #fff;
}

.kpo-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.kpo-section-heading--split {
    align-items: end;
}

.kpo-section-heading h2,
.kpo-introduction__heading h2,
.kpo-financing h2,
.kpo-contact-block h3 {
    margin: 0;
    color: var(--kpo-ink);
    font-size: var(--kamnet-type-h2, clamp(1.75rem, 2.6vw, 2.5rem));
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.16;
    text-wrap: balance;
}

.kpo-section-heading > p {
    max-width: 41ch;
    margin: 0;
    color: var(--kpo-copy);
    font-size: 1rem;
    line-height: 1.6;
    text-wrap: pretty;
}

.kpo-financing__ledger {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    width: 100%;
    column-gap: clamp(2rem, 6vw, 6rem);
    margin: 0 auto;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 6vw, 6rem) clamp(2.75rem, 5vw, 4rem);
    background: #fff;
}

.kpo-financing__figure {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: .9rem;
    min-width: 0;
    min-height: 7rem;
    margin: 0;
    padding: .5rem;
    text-align: center;
}

.kpo-financing__figure dt {
    max-width: 38ch;
    color: var(--kpo-copy);
    font-size: 1rem;
    line-height: 1.45;
}

.kpo-financing__figure dd {
    margin: 0;
    color: var(--kpo-ink);
    font-size: clamp(2rem, 3.5vw, 3.25rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.045em;
    line-height: 1.08;
    white-space: nowrap;
}

.kpo-financing__figure--support dd {
    color: var(--kpo-orange);
}

.kpo-financing__figure dd small {
    font-size: .45em;
    font-weight: 600;
    letter-spacing: 0;
}

.kpo-financing__marks {
    display: block;
    width: 100%;
    margin: 0;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 4vw, 3.5rem) clamp(1rem, 2vw, 1.5rem);
    background: #fff;
}

.kpo-financing__marks img {
    display: block;
    width: 100%;
    max-width: 78rem;
    height: auto;
    margin-inline: auto;
    object-fit: contain;
}

.kpo-agreement .kpo-section-heading {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.kpo-agreement-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr);
    align-items: stretch;
    gap: clamp(1rem, 2.5vw, 2rem);
}

.kpo-agreement-group {
    min-width: 0;
    padding: clamp(1.4rem, 2.5vw, 2rem);
    border-radius: 1rem;
    background: var(--kpo-ground);
}

.kpo-agreement-group h3,
.kpo-documents-group h3,
.kpo-contact-block h3 {
    margin: 0 0 1.15rem;
    color: var(--kpo-ink);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.35;
}

.kpo-agreement-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 2rem;
    margin: 0;
    padding: 0;
}

.kpo-agreement-item {
    display: grid;
    align-content: start;
    gap: .35rem;
    min-width: 0;
}

.kpo-agreement-item dt,
.kpo-agreement-dates dt {
    color: var(--kpo-muted);
    font-size: .94rem;
    line-height: 1.45;
}

.kpo-agreement-item dd {
    margin: 0;
    color: var(--kpo-ink);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-wrap: pretty;
}

.kpo-agreement-dates {
    display: grid;
    gap: 1.5rem;
    margin: 0;
}

.kpo-agreement-dates > div {
    display: grid;
    align-content: start;
    gap: .4rem;
}

.kpo-agreement-dates dd {
    margin: 0;
    color: var(--kpo-ink);
    font-size: clamp(1.65rem, 2.7vw, 2.25rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.035em;
    line-height: 1.15;
}

.kpo-agreement-note {
    max-width: 43ch;
    margin: 1.4rem 0 0;
    color: var(--kpo-copy);
    font-size: .96rem;
    line-height: 1.55;
}

.kpo-map-panel {
    min-width: 0;
}

.kpo-map-panel__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-height: 5.25rem;
    margin-bottom: .75rem;
    padding: .9rem 1.25rem;
    border-radius: .7rem;
    background: var(--kpo-ground);
    color: var(--kpo-ink);
}

.kpo-map-panel__selection {
    display: grid;
    gap: .2rem;
}

.kpo-map-panel__selection span {
    color: var(--kpo-muted);
    font-size: .9rem;
}

.kpo-map-panel__selection strong {
    color: var(--kpo-ink);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
}

.kpo-map-reset {
    min-height: 2.75rem;
    padding: .4rem .15rem;
    border: 0;
    background: transparent;
    color: var(--kpo-ink);
    font: inherit;
    font-size: .92rem;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--kpo-orange);
    text-underline-offset: .2em;
    cursor: pointer;
}

.kpo-project-map {
    position: relative;
    display: block;
    width: 100%;
    min-height: 380px;
    height: clamp(420px, 44vw, 590px);
    overflow: hidden;
    margin: 0;
    border-radius: .9rem;
    background: #e9eef2;
    isolation: isolate;
}

.kpo-project-map .maplibregl-canvas-container,
.kpo-project-map .maplibregl-canvas {
    width: 100%;
    height: 100%;
}

.kpo-project-map .maplibregl-ctrl-group {
    overflow: hidden;
    border-radius: .25rem;
}

.kpo-project-map .maplibregl-ctrl-group button {
    width: 2.35rem;
    height: 2.35rem;
}

.kpo-project-map .maplibregl-ctrl button:focus-visible,
.kpo-project-map .maplibregl-canvas:focus-visible {
    outline: 3px solid var(--kpo-orange);
    outline-offset: 2px;
}

.kpo-project-map .maplibregl-ctrl-attrib {
    font-size: .7rem;
}

.kpo-map-empty {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-content: center;
    padding: 2rem;
    background: #e9eef2;
    color: var(--kpo-ink);
    font-size: 1rem;
    text-align: center;
}

.kpo-map-status {
    margin: 0;
    color: var(--kpo-copy);
    font-size: .94rem;
    line-height: 1.45;
}

.kpo-map-status.is-error {
    color: var(--kpo-orange-dark);
}

.kpo-map-caption {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem 3rem;
    padding: 1rem .1rem 0;
}

.kpo-map-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.4rem;
}

.kpo-map-legend span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--kpo-copy);
    font-size: .92rem;
    line-height: 1.4;
}

.kpo-map-legend a {
    color: var(--kpo-ink);
    font-size: .92rem;
    text-decoration: underline;
    text-decoration-color: var(--kpo-orange);
    text-underline-offset: .2em;
}

.kpo-map-legend i {
    width: 1.15rem;
    height: .18rem;
    flex: 0 0 1.15rem;
    border-radius: 0;
    background: var(--kpo-ink);
}

.kpo-map-legend i.kpo-map-legend__project {
    height: .55rem;
    border-radius: .12rem;
    background: rgba(238, 132, 1, .38);
    outline: 1px solid #bd6500;
}

.kpo-map-legend i.kpo-map-legend__context {
    height: .55rem;
    border-radius: .12rem;
    background: rgba(138, 155, 173, .2);
    outline: 1px solid #66788c;
}

.kpo-map-legend i.kpo-map-legend__boundary {
    height: .12rem;
    background: var(--kpo-ink);
}

.kpo-locality-directory {
    display: grid;
    grid-template-columns: minmax(14rem, .72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: 2rem clamp(2rem, 5vw, 5rem);
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: clamp(.25rem, 1vw, .75rem);
}

.kpo-locality-directory__heading h3 {
    margin: 0 0 .6rem;
    color: var(--kpo-ink);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.3;
    text-wrap: balance;
}

.kpo-locality-directory__heading p {
    max-width: 42ch;
    margin: 0;
    color: var(--kpo-copy);
    font-size: .98rem;
    line-height: 1.55;
}

.kpo-locality-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .3rem .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kpo-locality-list li {
    min-width: 0;
    margin: 0;
}

.kpo-locality-button {
    display: flex;
    width: 100%;
    min-height: 2.75rem;
    align-items: center;
    justify-content: flex-start;
    gap: .4rem;
    padding: .55rem .65rem;
    border: 0;
    border-radius: .4rem;
    background: transparent;
    color: var(--kpo-ink);
    font: inherit;
    font-size: .95rem;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.kpo-locality-button:hover,
.kpo-locality-button.is-selected {
    background: rgba(238, 132, 1, .14);
}

.kpo-locality-button.is-selected {
    color: var(--kpo-orange-dark);
    font-weight: 600;
}

.kpo-locality-button::before {
    width: .42rem;
    height: .42rem;
    flex: 0 0 .42rem;
    border-radius: 50%;
    background: #d8dce3;
    content: "";
}

.kpo-locality-button.is-selected::before {
    background: var(--kpo-orange);
}

.kpo-area-context {
    grid-column: 2;
    margin: -.5rem 0 0;
    color: var(--kpo-copy);
    font-size: .9rem;
    line-height: 1.55;
}

.kpo-area-context strong {
    color: var(--kpo-ink);
}

.kpo-area-disclaimer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: 0;
}

.kpo-area-disclaimer p {
    max-width: 67ch;
    margin: 0;
    color: var(--kpo-copy);
    font-size: .98rem;
    line-height: 1.55;
}

.kpo-documents-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr);
    align-items: start;
    gap: clamp(2rem, 5vw, 5rem);
}

.kpo-documents-group h3,
.kpo-contact-block h3 {
    margin: 0 0 1rem;
    color: var(--kpo-ink);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.35;
}

.kpo-document-list {
    display: grid;
    gap: .7rem;
}

.kpo-document-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
    min-width: 0;
    padding: 1.2rem 1.25rem;
    border-radius: .75rem;
    background: var(--kpo-ground);
    color: inherit;
    text-decoration: none;
}

.kpo-document-link:hover {
    background: #eef1f5;
}

.kpo-document-link__copy {
    display: grid;
    min-width: 0;
    gap: .25rem;
}

.kpo-document-link__copy strong {
    color: var(--kpo-ink);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.kpo-document-link__copy small {
    color: var(--kpo-copy);
    font-size: .92rem;
    line-height: 1.45;
}

.kpo-document-link__action {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--kpo-orange-dark);
    font-size: .92rem;
    font-weight: 700;
    white-space: nowrap;
}

.kpo-document-link__action svg {
    width: .9rem;
    height: .9rem;
    stroke: currentColor;
    stroke-width: 1.8;
}

.kpo-contact-block {
    display: grid;
    justify-items: start;
    gap: .65rem;
    padding: clamp(1.4rem, 2.6vw, 2rem);
    border-radius: 1rem;
    background: var(--kpo-ground);
}

.kpo-contact-block h3,
.kpo-contact-block p {
    margin: 0;
}

.kpo-contact-block p {
    max-width: 34ch;
    color: var(--kpo-copy);
    font-size: 1rem;
    line-height: 1.6;
}

.kpo-contact-block .btn-primary {
    margin-top: .5rem;
}

.kpo-map-fallback {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    background: #e9eef2;
}

.kpo-map-fallback__boundary-area {
    fill: #fff;
    stroke: #010048;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
}

.kpo-map-fallback__locality {
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
}

.kpo-map-fallback__locality.is-project {
    fill: rgba(238, 132, 1, .24);
    stroke: #bd6500;
    stroke-width: 1.4;
    cursor: pointer;
}

.kpo-map-fallback__locality.is-context {
    fill: rgba(138, 155, 173, .12);
    stroke: #66788c;
    stroke-width: 1;
}

.kpo-map-fallback__locality.is-selected {
    fill: rgba(238, 132, 1, .48);
    stroke: #a84f00;
    stroke-width: 2.8;
}

.kpo-map-fallback__locality:focus-visible {
    outline: 3px solid var(--kpo-orange);
    outline-offset: 3px;
}

.kpo-project-page a:focus-visible,
.kpo-project-page button:focus-visible {
    outline: 3px solid var(--kpo-orange);
    outline-offset: 3px;
}

@media (max-width: 1023px) {
    .kpo-cover-scope {
        grid-column: 1 / -1;
        justify-content: flex-start;
        margin-left: 0;
        padding: 1.25rem 0 0;
    }

    .kpo-agreement-layout,
    .kpo-documents-layout {
        grid-template-columns: 1fr;
    }

    .kpo-project-map {
        height: 500px;
    }

    .kpo-locality-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .kpo-contact-block {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .kpo-contact-block h3,
    .kpo-contact-block p {
        grid-column: 1;
    }

    .kpo-contact-block .btn-primary {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

@media (max-width: 767px) {
    .kpo-cover {
        min-height: 0;
        padding-block: 8.75rem 3.5rem;
    }

    .kpo-cover-scope {
        min-height: 0;
        flex-direction: row;
        align-items: center;
        gap: .85rem;
        padding: 1rem 0 0;
    }

    .kpo-cover-scope strong {
        font-size: 2.75rem;
    }

    .kpo-cover-scope span {
        max-width: 28ch;
    }

    .kpo-introduction,
    .kpo-agreement,
    .kpo-documents,
    .kpo-area-section {
        padding-block: 3.5rem;
    }

    .kpo-introduction__layout,
    .kpo-introduction__body,
    .kpo-financing__ledger,
    .kpo-agreement-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .kpo-section-heading,
    .kpo-section-heading--split {
        align-items: flex-start;
        flex-direction: column;
        gap: .75rem;
        margin-bottom: 1.75rem;
    }

    .kpo-financing {
        padding-block: 3.5rem;
    }

    .kpo-financing__figure dd {
        font-size: clamp(2.1rem, 9vw, 3.2rem);
        white-space: normal;
    }

    .kpo-financing__figure {
        min-height: 0;
        padding: 1.15rem .5rem;
    }

    .kpo-financing__marks {
        margin: 0;
        padding: .85rem 1rem;
    }

    .kpo-agreement-group {
        padding: 1.25rem;
    }

    .kpo-agreement-list,
    .kpo-agreement-dates {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .kpo-project-map {
        min-height: 340px;
        height: 72vw;
        max-height: 430px;
    }

    .kpo-locality-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kpo-financing__ledger {
        gap: 0;
        padding: 1.3rem 1.25rem 1.75rem;
    }

    .kpo-map-panel__heading {
        min-height: 4.75rem;
        gap: 1rem;
        padding: .8rem .9rem;
    }

    .kpo-map-caption,
    .kpo-area-disclaimer {
        align-items: flex-start;
        flex-direction: column;
    }

    .kpo-map-legend {
        align-items: flex-start;
        flex-direction: column;
    }

    .kpo-locality-directory {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 2.5rem;
    }

    .kpo-area-context {
        grid-column: 1;
        margin-top: 0;
    }

    .kpo-contact-block {
        align-items: flex-start;
        flex-direction: column;
        grid-template-columns: 1fr;
    }

    .kpo-contact-block .btn-primary {
        grid-column: 1;
        grid-row: auto;
    }

    .kpo-area-disclaimer .btn-primary,
    .kpo-contact-block .btn-primary {
        width: 100%;
    }

    .kpo-document-link {
        grid-template-columns: 1fr;
        gap: .7rem;
    }
}