:root {
    --kin-mobile-olive: #59624A;
    --kin-mobile-charcoal: #24231F;
    --kin-mobile-black: #171713;
    --kin-mobile-stone: #D8D3C8;
    --kin-mobile-offwhite: #F1EFE8;
    --kin-mobile-copper: #A85F3D;
    --kin-mobile-copper-light: #D68D69;
}

.kin-mobile-nav-trigger,
.kin-mobile-nav-overlay {
    display: none;
}

@media (max-width: 900px) {

    body.kin-mobile-nav-open {
        overflow: hidden !important;
        touch-action: none;
    }

    .kin-mobile-nav-trigger {
        position: fixed;
        right: 16px;
        bottom: 16px;
        z-index: 99998;
        display: flex;
        width: 64px;
        height: 64px;
        padding: 8px 6px 7px;
        border: 1px solid var(--kin-mobile-offwhite);
        border-radius: 0;
        background: var(--kin-mobile-black);
        color: var(--kin-mobile-offwhite);
        box-shadow: none;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 6px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .kin-mobile-nav-trigger:hover,
    .kin-mobile-nav-trigger:focus,
    .kin-mobile-nav-trigger:focus-visible {
        background: var(--kin-mobile-olive);
        color: var(--kin-mobile-offwhite);
        border-color: var(--kin-mobile-offwhite);
        outline: none;
    }

    .kin-mobile-nav-trigger-lines {
        display: flex;
        width: 24px;
        flex-direction: column;
        gap: 4px;
    }

    .kin-mobile-nav-trigger-lines span {
        display: block;
        width: 100%;
        height: 2px;
        background: currentColor;
    }

    .kin-mobile-nav-trigger-label {
        font-family: Inter, Arial, sans-serif;
        font-size: 8px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: .15em;
    }

    .kin-mobile-nav-overlay {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: block;
        visibility: hidden;
        opacity: 0;
        background: var(--kin-mobile-black);
        color: var(--kin-mobile-offwhite);
        overflow-y: auto;
        overscroll-behavior: contain;
        transition: opacity 160ms ease, visibility 160ms ease;
    }

    .kin-mobile-nav-overlay.is-open {
        visibility: visible;
        opacity: 1;
    }

    .kin-mobile-nav-shell {
        width: 100%;
        min-height: 100%;
        background: var(--kin-mobile-black);
    }

    .kin-mobile-nav-top {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        min-height: 78px;
        padding: 16px 18px;
        border-bottom: 1px solid rgba(241, 239, 232, .24);
        background: var(--kin-mobile-black);
        align-items: center;
        justify-content: space-between;
    }

    .kin-mobile-nav-brand {
        display: block;
        width: min(188px, 58vw);
        line-height: 0;
    }

    .kin-mobile-nav-brand img {
        display: block;
        width: 100%;
        height: auto;
    }

    .kin-mobile-nav-close {
        display: flex;
        width: 46px;
        height: 46px;
        padding: 0;
        border: 1px solid var(--kin-mobile-offwhite);
        border-radius: 0;
        background: transparent;
        color: var(--kin-mobile-offwhite);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: none;
        -webkit-tap-highlight-color: transparent;
    }

    .kin-mobile-nav-close span {
        display: block;
        margin-top: -4px;
        font-family: Arial, sans-serif;
        font-size: 38px;
        font-weight: 300;
        line-height: 1;
    }

    .kin-mobile-nav-close:hover,
    .kin-mobile-nav-close:focus,
    .kin-mobile-nav-close:focus-visible {
        background: var(--kin-mobile-copper);
        color: var(--kin-mobile-offwhite);
        border-color: var(--kin-mobile-offwhite);
        outline: none;
    }

    .kin-mobile-nav-content {
        padding: 24px 18px 40px;
    }

    .kin-mobile-nav-section-label {
        margin: 0 0 10px;
        font-family: Inter, Arial, sans-serif;
        font-size: 10px;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: .17em;
        text-transform: uppercase;
        color: var(--kin-mobile-copper-light);
    }

    .kin-mobile-nav-primary {
        border-top: 1px solid rgba(241, 239, 232, .24);
    }

    .kin-mobile-nav-primary a {
        display: grid;
        min-height: 58px;
        padding: 12px 0;
        border-bottom: 1px solid rgba(241, 239, 232, .24);
        color: var(--kin-mobile-offwhite) !important;
        text-decoration: none !important;
        grid-template-columns: 38px 1fr;
        align-items: center;
        font-family: Oswald, Impact, sans-serif;
        font-size: clamp(24px, 7vw, 34px);
        font-weight: 600;
        line-height: 1;
        text-transform: uppercase;
        letter-spacing: .01em;
    }

    .kin-mobile-nav-primary a span {
        font-family: Inter, Arial, sans-serif;
        font-size: 9px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: .12em;
        color: var(--kin-mobile-copper-light);
    }

    .kin-mobile-nav-primary a:hover,
    .kin-mobile-nav-primary a:focus,
    .kin-mobile-nav-primary a:focus-visible,
    .kin-mobile-nav-primary a[aria-current="page"] {
        padding-left: 8px;
        background: var(--kin-mobile-offwhite);
        color: var(--kin-mobile-black) !important;
        outline: none;
    }

    .kin-mobile-nav-primary a[aria-current="page"] span,
    .kin-mobile-nav-primary a:hover span,
    .kin-mobile-nav-primary a:focus span,
    .kin-mobile-nav-primary a:focus-visible span {
        color: var(--kin-mobile-copper);
    }

    .kin-mobile-nav-page-jumps {
        margin-top: 28px;
    }

    .kin-mobile-nav-page-jumps[hidden] {
        display: none !important;
    }

    .kin-mobile-nav-jump-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-top: 1px solid rgba(241, 239, 232, .24);
        border-left: 1px solid rgba(241, 239, 232, .24);
    }

    .kin-mobile-nav-jump-list a {
        display: flex;
        min-height: 52px;
        padding: 10px 12px;
        border-right: 1px solid rgba(241, 239, 232, .24);
        border-bottom: 1px solid rgba(241, 239, 232, .24);
        color: var(--kin-mobile-offwhite) !important;
        text-decoration: none !important;
        align-items: center;
        font-family: Inter, Arial, sans-serif;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.25;
    }

    .kin-mobile-nav-jump-list a:hover,
    .kin-mobile-nav-jump-list a:focus,
    .kin-mobile-nav-jump-list a:focus-visible {
        background: var(--kin-mobile-olive);
        color: var(--kin-mobile-offwhite) !important;
        outline: none;
    }

    .kin-mobile-nav-join {
        display: flex;
        min-height: 66px;
        margin-top: 28px;
        padding: 14px 16px;
        border: 1px solid var(--kin-mobile-offwhite);
        background: var(--kin-mobile-copper);
        color: var(--kin-mobile-offwhite) !important;
        text-decoration: none !important;
        align-items: center;
        justify-content: space-between;
        font-family: Oswald, Impact, sans-serif;
        font-size: 28px;
        font-weight: 600;
        line-height: 1;
        text-transform: uppercase;
    }

    .kin-mobile-nav-join:hover,
    .kin-mobile-nav-join:focus,
    .kin-mobile-nav-join:focus-visible {
        background: var(--kin-mobile-offwhite);
        color: var(--kin-mobile-black) !important;
        outline: none;
    }

    .kin-mobile-nav-promise {
        display: flex;
        margin-top: 24px;
        padding-top: 18px;
        border-top: 1px solid rgba(241, 239, 232, .24);
        flex-direction: column;
        gap: 6px;
        font-family: Inter, Arial, sans-serif;
    }

    .kin-mobile-nav-promise span {
        font-size: 11px;
        line-height: 1.4;
        color: var(--kin-mobile-stone);
    }

    .kin-mobile-nav-promise strong {
        font-size: 13px;
        line-height: 1.4;
        color: var(--kin-mobile-offwhite);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kin-mobile-nav-overlay {
        transition: none;
    }
}