/* =============================================
   NKR PARTNERSHIP ORBIT
   Partnership page diagram (HTML stays in the Divi Code Module)
============================================= */

.nkr-orbit {
    --orbit-brown: #3B281C;
    --orbit-text: #505050;
    --orbit-bg: #E8E8E8;

    width: 100%;
    max-width: 100%;
    color: var(--orbit-text);
    font-family: Arial, sans-serif;
    box-sizing: border-box;
}

.nkr-orbit *,
.nkr-orbit *::before,
.nkr-orbit *::after {
    box-sizing: border-box;
}

/* Main diagram */
.nkr-orbit-stage {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
    height: 430px;
    isolation: isolate;
}

/* =============================================
   SVG ORBITAL LINES
============================================= */

.nkr-orbit-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}

.nkr-orbit-lines circle,
.nkr-orbit-lines ellipse {
    fill: none;
    stroke: rgba(90, 90, 90, 0.30);
    stroke-width: 0.8;
    vector-effect: non-scaling-stroke;
}

.nkr-orbit-lines .orbit-outer {
    stroke: rgba(90, 90, 90, 0.42);
}

.nkr-orbit-lines .orbit-cross {
    stroke: rgba(90, 90, 90, 0.23);
}

/* =============================================
   LEFT & RIGHT CIRCLES
============================================= */

.nkr-orbit-party {
    position: absolute;
    top: 50%;
    width: 105px;
    height: 106px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--orbit-brown);
    white-space: nowrap;
}

.nkr-orbit-party img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 1;
}

.nkr-orbit-party span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 22px;
}


.nkr-orbit-party--nkr {
    left: 7%;
}

.nkr-orbit-party--client {
    left: 93%;
}

/* =============================================
   CENTER PERFORMANCE CIRCLE
============================================= */

.nkr-orbit-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: 206px;
    height: 206px;
    border-radius: 50%;

    background: var(--orbit-brown);
    color: #FFFFFF;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    padding: 20px;
    z-index: 2;
}

.nkr-orbit-center-top {
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #FFFFFF;
}

.nkr-orbit-center-main {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 36px;
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 1.25;
    color: #FFFFFF;
}

.nkr-orbit-center-bottom {
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1.65;
    color: #FFFFFF;
    max-width: 130px;
}

/* =============================================
   FLOATING LABELS / PILLS
============================================= */

.nkr-orbit-pill {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 4;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    width: max-content;
    max-width: 40%;
    min-height: 39px;
    padding: 8px 12px;

    border: 1px solid #C6C6C6;
    border-radius: 100px;
    background: #FFFFFF;

    box-shadow:
        0 4px 12px rgba(0,0,0,0.13),
        0 1px 3px rgba(0,0,0,0.05);

    white-space: nowrap;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--orbit-text);

    will-change: transform;
    animation:
        nkrOrbitFloat var(--float-duration, 5s)
        ease-in-out var(--float-delay, 0s) infinite alternate;
}

.nkr-orbit-pill-num {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 12px;
    color: #999999;
    font-weight: 400;
}

/* Positions: left */
.nkr-orbit-pill--talent {
    left: 27%;
    top: 16%;
    --float-duration: 5.1s;
    --float-delay: -1.3s;
    --float-distance: -7px;
}

.nkr-orbit-pill--structure {
    left: 18%;
    top: 31%;
    --float-duration: 6.4s;
    --float-delay: -3.2s;
    --float-distance: 9px;
}

.nkr-orbit-pill--oversight {
    left: 18%;
    top: 67%;
    --float-duration: 4.7s;
    --float-delay: -2.6s;
    --float-distance: -8px;
}

.nkr-orbit-pill--continuity {
    left: 27%;
    top: 86%;
    --float-duration: 7.2s;
    --float-delay: -4.4s;
    --float-distance: 6px;
}

/* Positions: right */
.nkr-orbit-pill--direction {
    left: 77%;
    top: 14%;
    --float-duration: 5.8s;
    --float-delay: -2.1s;
    --float-distance: 8px;
}

.nkr-orbit-pill--process {
    left: 83%;
    top: 34%;
    --float-duration: 6.9s;
    --float-delay: -3.7s;
    --float-distance: -7px;
}

.nkr-orbit-pill--access {
    left: 83%;
    top: 64%;
    --float-duration: 3.9s;
    --float-delay: -1.8s;
    --float-distance: 9px;
}

.nkr-orbit-pill--decisions {
    left: 76%;
    top: 86%;
    --float-duration: 5.6s;
    --float-delay: -1.1s;
    --float-distance: -6px;
}

/* Independent Yoyo-style float */
@keyframes nkrOrbitFloat {
    0% {
        transform: translate(-50%, -50%)
                   translateY(0);
    }

    100% {
        transform: translate(-50%, -50%)
                   translateY(var(--float-distance, -8px));
    }
}

/* =============================================
   CAPTION
============================================= */

.nkr-orbit-caption {
    width: 100%;
    max-width: 900px;
    text-align: center;
    margin: 24px auto 0;
    padding: 0 15px;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--orbit-text);
}

.nkr-orbit-caption strong {
    font-weight: 700;
}

/* =============================================
   TABLET (768px to 980px)
============================================= */

@media (min-width: 768px) and (max-width: 980px) {
    .nkr-orbit-stage {
        height: 390px;
    }

    .nkr-orbit-party {
        width: 74px;
        height: 74px;
        font-size: 18px;
    }

    .nkr-orbit-party--nkr {
        left: 8%;
    }

    .nkr-orbit-party--client {
        left: 92%;
    }

    .nkr-orbit-center {
        width: 172px;
        height: 172px;
    }

    .nkr-orbit-center-main {
        font-size: 30px;
    }

    .nkr-orbit-pill {
        font-size: 12px;
        padding: 7px 10px;
        min-height: 34px;
    }

    .nkr-orbit-pill-num {
        font-size: 11px;
    }
}

/* =============================================
   MOBILE (767px and below)
   Reorganized for legibility
============================================= */

@media (max-width: 767px) {
    .nkr-orbit-stage {
        height: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 14px;
        row-gap: 16px;
        align-items: start;
    }

    /* Hide large orbital background */
    .nkr-orbit-lines {
        display: none;
    }

    /* Center circle first */
    .nkr-orbit-center {
        position: relative;
        top: auto;
        left: auto;
        transform: none;

        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: center;

        width: 190px;
        height: 190px;
        margin: 0 auto 20px;
    }

    .nkr-orbit-center-main {
        font-size: 32px;
    }

    /* Party circles as column headings */
    .nkr-orbit-party {
        position: relative;
        top: auto;
        left: auto;
        transform: none;

        width: 84px;
        height: 84px;
        margin: 0 auto 12px;
        font-size: 18px;
        justify-self: center;
    }

    .nkr-orbit-party--nkr {
        grid-column: 1;
        grid-row: 2;
        left: auto;
    }

    .nkr-orbit-party--client {
        grid-column: 2;
        grid-row: 2;
        left: auto;
    }

    /* Reposition pills into a two-column grid */
    .nkr-orbit-pill {
        position: relative;
        left: auto;
        top: auto;
        transform: none;

        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 40px;
        padding: 9px 10px;
        font-size: 12px;

        white-space: normal;
        text-align: center;

        animation: nkrOrbitFloatMobile
                   var(--float-duration, 5s)
                   ease-in-out
                   var(--float-delay, 0s)
                   infinite alternate;
    }

    .nkr-orbit-pill-num {
        font-size: 11px;
        flex-shrink: 0;
    }

    .nkr-orbit-pill--talent {
        grid-column: 1;
        grid-row: 3;
    }

    .nkr-orbit-pill--direction {
        grid-column: 2;
        grid-row: 3;
    }

    .nkr-orbit-pill--structure {
        grid-column: 1;
        grid-row: 4;
    }

    .nkr-orbit-pill--process {
        grid-column: 2;
        grid-row: 4;
    }

    .nkr-orbit-pill--oversight {
        grid-column: 1;
        grid-row: 5;
    }

    .nkr-orbit-pill--access {
        grid-column: 2;
        grid-row: 5;
    }

    .nkr-orbit-pill--continuity {
        grid-column: 1;
        grid-row: 6;
    }

    .nkr-orbit-pill--decisions {
        grid-column: 2;
        grid-row: 6;
    }

    .nkr-orbit-caption {
        margin-top: 36px;
    }

    @keyframes nkrOrbitFloatMobile {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(
                var(--float-distance, -5px)
            );
        }
    }
}

/* Small mobile */
@media (max-width: 380px) {
    .nkr-orbit-stage {
        column-gap: 8px;
        row-gap: 13px;
    }

    .nkr-orbit-pill {
        font-size: 11px;
        padding: 8px 6px;
    }

    .nkr-orbit-pill-num {
        font-size: 10px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .nkr-orbit-pill {
        animation: none !important;
    }
}

/* Pointer depth layers over the existing floating motion on desktop. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .nkr-orbit .nkr-orbit-pill {
        animation-name: nkrOrbitFloatParallax;
    }

    @keyframes nkrOrbitFloatParallax {
        from {
            transform: translate(-50%, -50%)
                translate3d(var(--nkr-parallax-x, 0px), var(--nkr-parallax-y, 0px), 0)
                translateY(0);
        }

        to {
            transform: translate(-50%, -50%)
                translate3d(var(--nkr-parallax-x, 0px), var(--nkr-parallax-y, 0px), 0)
                translateY(var(--float-distance, -8px));
        }
    }
}