:root {
    --kjm-navy: #08285c;
    --kjm-teal: #0c7c7e;
    --kjm-teal-bright: #16a3a1;
    --kjm-ink: #172033;
    --kjm-muted: #506079;
}

.kjm-ph, .kjm-ph *, .kjm-ph *::before, .kjm-ph *::after { box-sizing: border-box; }

.kjm-ph {
    --kjm-ph-x: 0px;
    --kjm-ph-y: 0px;
    --kjm-ph-flare-x: 50%;
    --kjm-ph-flare-y: 50%;
    --kjm-ph-flare-opacity: 0;
    --kjm-ph-flare-strength: 0.55;
    position: relative;
    isolation: isolate;
    width: min(100%, 1560px);
    min-height: clamp(330px, 27vw, 465px);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(8, 40, 92, 0.10);
    border-radius: clamp(18px, 1.6vw, 26px);
    background: #f9fbfd;
    box-shadow: 0 18px 48px rgba(8, 40, 92, 0.10);
    font-family: inherit;
}

.kjm-ph__art,
.kjm-ph__wash,
.kjm-ph__flare {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.kjm-ph__art {
    z-index: 0;
    inset: -30px;
    background-image: var(--kjm-ph-bg);
    background-repeat: no-repeat;
    background-position: var(--kjm-ph-bg-position, left center);
    background-size: cover;
    transform: translate3d(var(--kjm-ph-x), var(--kjm-ph-y), 0) scale(1.045);
    transition: transform 100ms linear;
    will-change: transform;
}

.kjm-ph__wash {
    z-index: 1;
    background:
        linear-gradient(90deg,
            rgba(255,255,255,0.02) 0%,
            rgba(255,255,255,0.05) 28%,
            rgba(255,255,255,0.12) 44%,
            rgba(255,255,255,0.24) 60%,
            rgba(255,255,255,0.20) 78%,
            rgba(255,255,255,0.10) 100%);
}

.kjm-ph__flare {
    z-index: 2;
    opacity: var(--kjm-ph-flare-opacity);
    background:
        radial-gradient(circle at var(--kjm-ph-flare-x) var(--kjm-ph-flare-y),
            rgba(255,255,255,0.96) 0%,
            rgba(225,255,254,0.88) 2.5%,
            rgba(92,220,216,0.42) 7%,
            rgba(22,163,161,0.20) 14%,
            rgba(22,163,161,0.07) 23%,
            rgba(22,163,161,0) 36%),
        radial-gradient(circle at calc(var(--kjm-ph-flare-x) + 10%) calc(var(--kjm-ph-flare-y) + 2%),
            rgba(255,255,255,0.48) 0%,
            rgba(255,255,255,0.18) 1.6%,
            rgba(255,255,255,0) 5%),
        radial-gradient(circle at calc(var(--kjm-ph-flare-x) - 13%) calc(var(--kjm-ph-flare-y) - 3%),
            rgba(8,40,92,0.16) 0%,
            rgba(8,40,92,0.05) 1.5%,
            rgba(8,40,92,0) 4.5%);
    transition: opacity 260ms ease-out;
    will-change: opacity, background;
}

.kjm-ph__flare::before {
    content: "";
    position: absolute;
    left: var(--kjm-ph-flare-x);
    top: var(--kjm-ph-flare-y);
    width: min(38vw, 540px);
    height: 1px;
    transform: translate(-50%, -50%) rotate(-28deg);
    background: linear-gradient(90deg,
        transparent,
        rgba(255,255,255,0.08) 25%,
        rgba(255,255,255,0.56) 50%,
        rgba(255,255,255,0.08) 75%,
        transparent);
    box-shadow: 0 0 18px rgba(135,239,235,0.24);
}

.kjm-ph__content {
    position: relative;
    z-index: 3;
    width: min(52%, 760px);
    margin-left: 43%;
    padding: clamp(56px, 5.6vw, 88px) clamp(38px, 5vw, 78px) clamp(54px, 5vw, 80px) 0;
}

.kjm-ph__eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 20px;
    color: var(--kjm-navy);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.kjm-ph__eyebrow-line {
    flex: 0 0 clamp(42px, 4vw, 68px);
    height: 3px;
    border-radius: 999px;
    background: var(--kjm-teal-bright);
}

.kjm-ph__heading {
    margin: 0;
    color: var(--kjm-navy);
    font-size: 2.75rem;
    font-weight: 750;
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.kjm-ph__body {
    max-width: 700px;
    margin: 24px 0 0;
    color: var(--kjm-ink);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
}

.kjm-ph__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-height: 58px;
    margin-top: 32px;
    padding: 14px 26px 14px 28px;
    border: 1px solid rgba(8, 40, 92, 0.12);
    border-radius: 6px;
    background: linear-gradient(135deg, #08285c, #0b4c73);
    box-shadow: 0 9px 22px rgba(8, 40, 92, 0.16);
    color: #fff !important;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.kjm-ph__button:hover,
.kjm-ph__button:focus-visible {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #0a356f, #0c6d7b);
    box-shadow: 0 12px 28px rgba(8, 40, 92, 0.22);
}

.kjm-ph__button:focus-visible {
    outline: 3px solid rgba(22, 163, 161, 0.35);
    outline-offset: 4px;
}

.kjm-ph__button-arrow {
    font-size: 1.5em;
    font-weight: 300;
    line-height: 0.7;
    transition: transform 160ms ease;
}

.kjm-ph__button:hover .kjm-ph__button-arrow,
.kjm-ph__button:focus-visible .kjm-ph__button-arrow {
    transform: translateX(4px);
}

/* Tablet */
@media (max-width: 980px) {
    .kjm-ph {
        min-height: 390px;
    }

    .kjm-ph__content {
        width: 58%;
        margin-left: 39%;
        padding-right: 34px;
    }

    .kjm-ph__wash {
        background: linear-gradient(90deg,
            rgba(255,255,255,0.05) 0%,
            rgba(255,255,255,0.12) 30%,
            rgba(255,255,255,0.30) 50%,
            rgba(255,255,255,0.48) 70%,
            rgba(255,255,255,0.36) 100%);
    }
}

/* Mobile uses a deliberately different composition rather than shrinking the desktop hero. */
@media (max-width: 680px) {
    .kjm-ph {
        min-height: 0;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 12px 32px rgba(8, 40, 92, 0.09);
    }

    .kjm-ph__flare {
        display: block;
    }

    /* Recommended mobile layout: a clean image band, then all copy on white. */
    .kjm-ph--mobile-stacked .kjm-ph__art {
        inset: 0 0 auto;
        width: 100%;
        height: 152px;
        background-size: cover;
        background-position: var(--kjm-ph-bg-position-mobile, left center);
        transform: translate3d(var(--kjm-ph-x), var(--kjm-ph-y), 0) scale(1.045);
        transition: none;
    }

    .kjm-ph--mobile-stacked .kjm-ph__wash {
        inset: 0 0 auto;
        height: 152px;
        background:
            linear-gradient(90deg,
                rgba(255,255,255,0.00) 0%,
                rgba(255,255,255,0.06) 45%,
                rgba(255,255,255,0.16) 72%,
                rgba(255,255,255,0.22) 100%);
        border-bottom: 1px solid rgba(8, 40, 92, 0.06);
    }

    .kjm-ph--mobile-stacked .kjm-ph__content {
        width: auto;
        margin: 0;
        padding: 178px 28px 30px;
    }

    /* Optional integrated mode for backgrounds that work well behind copy. */
    .kjm-ph--mobile-integrated .kjm-ph__art {
        inset: -10px;
        height: auto;
        background-size: cover;
        background-position: var(--kjm-ph-bg-position-mobile, left center);
        transform: translate3d(var(--kjm-ph-x), var(--kjm-ph-y), 0) scale(1.045);
        transition: none;
    }

    .kjm-ph--mobile-integrated .kjm-ph__wash {
        inset: 0;
        height: auto;
        background:
            linear-gradient(180deg,
                rgba(255,255,255,0.22) 0%,
                rgba(255,255,255,0.68) 34%,
                rgba(255,255,255,0.94) 58%,
                rgba(255,255,255,0.98) 100%);
    }

    .kjm-ph--mobile-integrated .kjm-ph__content {
        width: auto;
        margin: 0;
        padding: 116px 28px 30px;
    }

    .kjm-ph__eyebrow {
        align-items: flex-start;
        gap: 11px;
        margin-bottom: 12px;
        font-size: 0.6875rem;
        line-height: 1.45;
        letter-spacing: 0.15em;
    }

    .kjm-ph__eyebrow-line {
        flex: 0 0 30px;
        height: 2px;
        margin-top: 0.58em;
    }

    .kjm-ph__eyebrow > span:last-child {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .kjm-ph__heading {
        font-size: 2rem;
        line-height: 1.15;
        letter-spacing: -0.025em;
    }

    .kjm-ph__body {
        margin-top: 17px;
        font-size: 1rem;
        line-height: 1.48;
    }

    .kjm-ph__button {
        width: 100%;
        min-height: 56px;
        margin-top: 23px;
        padding: 13px 20px;
        gap: 16px;
        border-radius: 6px;
        box-shadow: 0 7px 18px rgba(8, 40, 92, 0.14);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kjm-ph__art,
    .kjm-ph__flare,
    .kjm-ph__button,
    .kjm-ph__button-arrow {
        transition: none !important;
    }

    .kjm-ph__art {
        transform: scale(1.045) !important;
    }

    .kjm-ph__flare {
        display: none !important;
    }
}


/* A clipped artwork layer keeps mobile motion inside the 152 px image band. */
.kjm-ph__scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.kjm-ph__intro-stage{position:absolute;z-index:4;left:3%;top:6%;width:36%;height:88%;pointer-events:none;visibility:hidden}
.kjm-ph[data-kjm-intro-state="running"] .kjm-ph__intro-stage,.kjm-ph[data-kjm-intro-state="fading"] .kjm-ph__intro-stage{visibility:visible}
.kjm-ph__orb,.kjm-ph__birth-glow{position:absolute;left:50%;top:50%;display:block;pointer-events:none;opacity:0;border-radius:50%}
.kjm-ph__orb{width:22px;height:22px;margin:-11px;--orb-colour:139,237,248;background:radial-gradient(circle,#fff 0 10%,rgba(var(--orb-colour),.95) 26%,rgba(var(--orb-colour),.35) 55%,transparent 75%);box-shadow:0 0 22px 8px rgba(var(--orb-colour),.5),0 0 55px 15px rgba(var(--orb-colour),.18)}
.kjm-ph__orb:nth-child(2){--orb-colour:92,201,242}
.kjm-ph__orb:nth-child(3){--orb-colour:206,251,245}
.kjm-ph__orb::before,.kjm-ph__orb::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:90px;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);box-shadow:0 0 5px #fff8}
.kjm-ph__orb::after{width:2px;height:44px;opacity:.55}
.kjm-ph__birth-glow{width:190px;height:190px;margin:-95px;background:radial-gradient(circle,#fff 0 8%,#e9ffffe0 16%,#b7f9fb88 32%,#3fd8e626 55%,transparent 72%)}
.kjm-ph-flight{position:fixed;z-index:9991;left:0;top:0;pointer-events:none;transform-origin:0 0;will-change:transform,width,height;line-height:0}
.kjm-ph-flight>svg{display:block;width:100%;height:100%;max-width:none;overflow:visible}
@media(max-width:680px){
 .kjm-ph--mobile-stacked .kjm-ph__scene{bottom:auto;height:152px}
 .kjm-ph--mobile-stacked .kjm-ph__art,.kjm-ph--mobile-integrated .kjm-ph__art{inset:-30px;width:auto;height:auto;transition:transform 100ms linear}
 .kjm-ph--mobile-stacked .kjm-ph__wash{inset:0;height:auto}
 .kjm-ph__intro-stage{left:12%;top:9px;width:76%;height:130px}
 .kjm-ph--mobile-integrated .kjm-ph__intro-stage{height:98px;top:8px}
}
@media(prefers-reduced-motion:reduce){.kjm-ph__intro-stage,.kjm-ph-flight{display:none!important}}

/* 1.7: optional typography, buttons and trust points. Empty controls preserve defaults. */
.kjm-ph__content{min-width:0;padding:var(--kjm-ph-pad-top,clamp(56px,5.6vw,88px)) var(--kjm-ph-pad-right,clamp(38px,5vw,78px)) var(--kjm-ph-pad-bottom,clamp(54px,5vw,80px)) var(--kjm-ph-pad-left,0px)}
.kjm-ph__heading,.kjm-ph__body{overflow-wrap:anywhere}
.kjm-ph__body>:first-child{margin-top:0}
.kjm-ph__body>:last-child{margin-bottom:0}
.kjm-ph__body p{margin:0 0 1em}
.kjm-ph__body a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.kjm-ph__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:32px}
.kjm-ph__actions .kjm-ph__button{margin-top:0;max-width:100%;white-space:normal;text-align:center;overflow-wrap:anywhere}
.kjm-ph__icon{display:inline-flex;align-items:center;justify-content:center;font-size:1.2em;line-height:1;flex:none}
.kjm-ph__icon svg{width:1em;height:1em;fill:currentColor;display:block}
.kjm-ph__icon i{font-size:inherit;line-height:1}
.kjm-ph .kjm-ph__button--secondary{background:transparent;color:var(--kjm-navy)!important;box-shadow:none;font-weight:600}
.kjm-ph .kjm-ph__button--text{border-color:transparent;padding-inline:0;text-decoration:underline!important;text-underline-offset:4px}
.kjm-ph .kjm-ph__button--outline{border-color:currentColor}
.kjm-ph .kjm-ph__button--secondary:hover,.kjm-ph .kjm-ph__button--secondary:focus-visible{background:rgba(12,124,126,.07);color:var(--kjm-teal)!important;box-shadow:none}
.kjm-ph .kjm-ph__points{display:flex;flex-wrap:wrap;gap:10px 20px;margin:26px 0 0;padding:0;list-style:none;color:var(--kjm-navy);font-size:12px;font-weight:400;line-height:1.5}
.kjm-ph .kjm-ph__points li{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;margin:0;padding:0;overflow-wrap:anywhere}
.kjm-ph__point-dot{display:block;width:5px;height:5px;border-radius:50%;background:var(--kjm-ph-marker-colour,var(--kjm-teal));flex:none}
.kjm-ph__points .kjm-ph__icon{color:var(--kjm-ph-marker-colour,var(--kjm-teal))}
@media(max-width:980px){.kjm-ph__content{padding-right:var(--kjm-ph-pad-right,34px)}}
@media(max-width:680px){
 .kjm-ph--mobile-stacked .kjm-ph__content{padding:calc(152px + var(--kjm-ph-pad-top,26px)) var(--kjm-ph-pad-right,28px) var(--kjm-ph-pad-bottom,30px) var(--kjm-ph-pad-left,28px)}
 .kjm-ph--mobile-integrated .kjm-ph__content{padding:var(--kjm-ph-pad-top,116px) var(--kjm-ph-pad-right,28px) var(--kjm-ph-pad-bottom,30px) var(--kjm-ph-pad-left,28px)}
 .kjm-ph__actions{margin-top:23px;gap:14px}
 .kjm-ph .kjm-ph__points{column-gap:16px;row-gap:10px}
}

/* Hide obsolete skip controls if a cached page still contains their markup. */
.kjm-ph .kjm-ph__skip-intro{display:none!important}

/* 1.8.5: readable page-banner defaults, shared by existing and new headers.
 * Font sizes at a 16px root: heading 44/38/32; body 18/17/16;
 * eyebrow 12/12/11; buttons 14. Explicit Elementor typography wins
 * through its widget selector. No saved page settings are rewritten.
 * Typography follows standard Elementor tablet/mobile breakpoints.
 */
@media (max-width: 1024px) {
    .kjm-ph__heading { font-size: 2.375rem; }
    .kjm-ph__body { font-size: 1.0625rem; }
}
@media (max-width: 767px) {
    .kjm-ph__heading { font-size: 2rem; line-height: 1.15; }
    .kjm-ph__body { font-size: 1rem; }
    .kjm-ph__eyebrow { font-size: 0.6875rem; }
}