@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

:root {
    --jkp-white: #fff;
    --jkp-black: #0a0a0a;
    --jkp-charcoal: #202020;
    --jkp-grey: #b8b8b8;
    --jkp-line: rgba(255,255,255,.18);
    --jkp-gutter: clamp(1.25rem, 4vw, 4.75rem);
    --jkp-space: clamp(5rem, 10vw, 10rem);
    --jkp-ease: cubic-bezier(.22,1,.36,1);
    --jkp-font: "Manrope", "Helvetica Neue", Arial, sans-serif;
}

html { scroll-behavior: smooth; }
html.jkp-menu-active { overflow: hidden; }
body.jkp-canvas { margin: 0; background: var(--jkp-black); color: var(--jkp-white); font-family: var(--jkp-font); -webkit-font-smoothing: antialiased; }
.jkp-canvas *, .jkp-canvas *::before, .jkp-canvas *::after, .elementor-widget-jkp-hero *, .elementor-widget-jkp-work *, .elementor-widget-jkp-services *, .elementor-widget-jkp-about *, .elementor-widget-jkp-proof *, .elementor-widget-jkp-enquire * { box-sizing: border-box; }
.jkp-canvas a { color: inherit; text-decoration: none; }
.jkp-canvas button, .jkp-canvas input, .jkp-canvas select, .jkp-canvas textarea { font: inherit; }
.jkp-canvas main { overflow: clip; }

.jkp-header {
    align-items: center; display: flex; justify-content: space-between; left: 0; padding: 1.75rem var(--jkp-gutter) 1.25rem;
    position: fixed; right: 0; top: 0; transition: background .4s, padding .4s, transform .4s; z-index: 100;
}
.jkp-header.is-scrolled { background: rgba(10,10,10,.88); backdrop-filter: blur(16px); padding-block: 1rem .8rem; }
.jkp-brand { display: block; position: relative; width: clamp(9rem, 13vw, 12rem); z-index: 2; }
.jkp-brand img { display: block; height: auto; width: 100%; }
.jkp-header nav { display: flex; gap: clamp(1.2rem, 2.5vw, 2.6rem); }
.jkp-header nav a { color: var(--jkp-white); font-size: .7rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.jkp-header nav a::after { background: currentColor; content: ""; display: block; height: 1px; margin-top: .35rem; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--jkp-ease); }
.jkp-header nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.jkp-canvas .jkp-menu-toggle { appearance: none; background: transparent; border: 0; border-radius: 0; box-shadow: none; color: #fff; display: none; height: 2.75rem; padding: .75rem .35rem; position: relative; width: 3rem; z-index: 2; }
.jkp-menu-toggle span { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.jkp-menu-toggle i, .jkp-menu-toggle i::before, .jkp-menu-toggle i::after { background: #fff; content: ""; display: block; height: 2px; left: 0; position: absolute; transition: transform .3s var(--jkp-ease), opacity .2s; width: 100%; }
.jkp-canvas .jkp-menu-toggle:hover, .jkp-canvas .jkp-menu-toggle:focus { background: transparent; }
.jkp-menu-toggle i { left: .35rem; top: 50%; transform: translateY(-50%); width: calc(100% - .7rem); }
.jkp-menu-toggle i::before { top: -.5rem; }
.jkp-menu-toggle i::after { top: .5rem; }
.jkp-header.is-menu-open .jkp-menu-toggle i { background: transparent; }
.jkp-header.is-menu-open .jkp-menu-toggle i::before { background: #7fe8e8; top: 0; transform: rotate(45deg); }
.jkp-header.is-menu-open .jkp-menu-toggle i::after { background: #7fe8e8; top: 0; transform: rotate(-45deg); }

@media (min-width: 601px) and (max-width: 900px) {
    .jkp-header { min-height: 0; }
    .jkp-brand { left: auto; position: relative; top: auto; transform: none; width: clamp(9rem, 18vw, 11rem); }
    .jkp-canvas .jkp-menu-toggle { display: none !important; }
    .jkp-header nav { align-items: center; background: transparent; backdrop-filter: none; display: flex; flex-direction: row; gap: clamp(1rem,2vw,1.8rem); height: auto; inset: auto; justify-content: flex-end; opacity: 1; overflow: visible; padding: 0; pointer-events: auto; position: static; text-align: left; transform: none; width: auto; }
    .jkp-header nav a { font-size: .65rem; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; }
}

.jkp-hero { background: #111; height: max(42rem, 100svh); min-height: 42rem; overflow: hidden; position: relative; }
.jkp-hero__grid { display: grid; gap: 5px; grid-template-columns: 1.05fr .7fr .95fr; grid-template-rows: 42% 25% 33%; inset: 0; position: absolute; }
.jkp-hero__tile { background: #1b1b1b; margin: 0; min-height: 0; overflow: hidden; position: relative; }
.jkp-hero__tile video { height: 100%; image-rendering: auto; object-fit: cover; width: 100%; filter: saturate(.94) contrast(1.035); transform: translateZ(0); transition: filter .8s var(--jkp-ease); }
.jkp-hero__tile:hover video { filter: saturate(1) contrast(1.015); }
.jkp-hero__tile--1 { grid-row: 1 / 3; }
.jkp-hero__tile--2 { grid-column: 2; grid-row: 1; }
.jkp-hero__tile--3 { grid-column: 3; grid-row: 1 / 3; }
.jkp-hero__tile--4 { grid-column: 2; grid-row: 2 / 4; }
.jkp-hero__tile--5 { grid-column: 1; grid-row: 3; }
.jkp-hero__tile--6 { grid-column: 3; grid-row: 3; }
.jkp-hero__shade { background: linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.03) 40%,rgba(0,0,0,.58)), radial-gradient(circle at 50% 50%,rgba(0,0,0,.06),rgba(0,0,0,.28)); inset: 0; position: absolute; }
.jkp-hero__content { left: var(--jkp-gutter); max-width: 85rem; position: absolute; right: var(--jkp-gutter); top: 50%; transform: translateY(-44%); }
.jkp-hero__kicker, .jkp-eyebrow { font-size: .68rem; font-weight: 600; letter-spacing: .2em; margin: 0 0 1.7rem; text-transform: uppercase; }
.jkp-hero h1 { font-size: clamp(2.5rem, 5.8vw, 6.25rem); font-weight: 600; letter-spacing: -.055em; line-height: .94; margin: 0; max-width: 14ch; text-wrap: balance; }
.jkp-hero__tagline { font-size: clamp(1.2rem, 2.1vw, 2rem); font-weight: 400; letter-spacing: -.03em; margin: 1.6rem 0 0; }
.jkp-scroll-cue { align-items: center; bottom: 2.2rem; display: flex; font-size: .63rem; gap: 1rem; left: var(--jkp-gutter); letter-spacing: .14em; position: absolute; text-transform: uppercase; }
.jkp-scroll-cue i { border: 1px solid rgba(255,255,255,.7); border-radius: 1rem; display: block; height: 2.8rem; position: relative; width: 1.45rem; }
.jkp-scroll-cue i::after { animation: jkp-scroll 2s infinite; background: #fff; border-radius: 50%; content: ""; height: 3px; left: 50%; position: absolute; top: .55rem; transform: translateX(-50%); width: 3px; }
@keyframes jkp-scroll { 0% { opacity: 0; transform: translate(-50%,0); } 30% { opacity: 1; } 75%,100% { opacity: 0; transform: translate(-50%,1rem); } }

.jkp-section { padding: var(--jkp-space) var(--jkp-gutter); }
.jkp-section__head { align-items: end; display: grid; gap: 4rem; grid-template-columns: 1.45fr .55fr; margin-bottom: clamp(3rem, 7vw, 6rem); }
.jkp-section h2, .jkp-enquire h2 { font-size: clamp(2.6rem, 5.7vw, 6rem); font-weight: 500; letter-spacing: -.055em; line-height: .98; margin: 0; text-wrap: balance; }
.jkp-intro { color: var(--jkp-grey); font-size: clamp(.95rem, 1.3vw, 1.18rem); line-height: 1.65; margin: 0; max-width: 31rem; }

.jkp-work { background: var(--jkp-black); }
.jkp-filters { border-bottom: 1px solid var(--jkp-line); display: flex; gap: 1.8rem; margin-bottom: 2rem; overflow-x: auto; scrollbar-width: none; }
.jkp-filters button { background: transparent; border: 0; color: #777; cursor: pointer; flex: 0 0 auto; font-size: .68rem; font-weight: 600; letter-spacing: .11em; padding: 0 0 1rem; position: relative; text-transform: uppercase; }
.jkp-filters button::after { background: #fff; bottom: -1px; content: ""; height: 1px; left: 0; position: absolute; transform: scaleX(0); transform-origin: left; transition: transform .35s; width: 100%; }
.jkp-filters button.is-active { color: #fff; }
.jkp-filters button.is-active::after { transform: scaleX(1); }
.jkp-work-grid { align-content: flex-start; display: flex; flex-wrap: wrap; gap: 0; overflow: hidden; }
.jkp-project {
    flex-basis: calc(var(--jkp-ratio, 1.5) * clamp(12rem, 22vw, 22rem));
    flex-grow: var(--jkp-ratio, 1.5);
    margin: 0; min-width: 0; opacity: 1; position: relative;
    transition: opacity .4s, transform .5s var(--jkp-ease);
}
.jkp-project.is-hidden { display: none; }
.jkp-project__link { color: inherit; display: block; height: 100%; }
.jkp-project__media { aspect-ratio: var(--jkp-ratio, 1.5); background: #171717; display: block; overflow: hidden; position: relative; width: 100%; }
.jkp-project__media:has(video) { cursor: zoom-in; }
.jkp-project img, .jkp-project video { height: 100%; inset: 0; object-fit: cover; position: absolute; transition: opacity .5s, transform 1s var(--jkp-ease); width: 100%; }
.jkp-project video { opacity: 0; }
.jkp-project:hover video { opacity: 1; }
.jkp-project:hover img { opacity: 0; }
.jkp-project:hover img, .jkp-project:hover video { transform: scale(1.025); }
.jkp-project__meta {
    background: linear-gradient(180deg,transparent,rgba(0,0,0,.82)); bottom: 0; display: flex; flex-direction: column;
    gap: .3rem; left: 0; padding: 4rem clamp(1rem, 2vw, 1.7rem) clamp(1rem, 2vw, 1.5rem); pointer-events: none;
    position: absolute; right: 0; z-index: 2;
}
.jkp-project__meta small { color: rgba(255,255,255,.68); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.jkp-project__meta strong { color: #fff; font-size: clamp(1rem, 1.5vw, 1.3rem); font-weight: 500; letter-spacing: -.02em; }

.jkp-photography { background: #f2f2f0; color: var(--jkp-black); padding-left: 0; padding-right: 0; }
.jkp-photography > .jkp-section__head { padding-left: var(--jkp-gutter); padding-right: var(--jkp-gutter); }
.jkp-photography .jkp-eyebrow { color: #555; }
.jkp-photography .jkp-intro { color: #555; }
.jkp-photo-grid {
    align-content: flex-start; cursor: grab; display: flex; flex-wrap: nowrap; gap: 0; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x; width: 100%;
}
.jkp-photo-grid::-webkit-scrollbar { display: none; }
.jkp-photo-grid.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.jkp-photo-item {
    flex: 0 0 clamp(19rem, calc(var(--jkp-ratio, 1.5) * 27vw), 48rem); margin: 0; min-width: 0; overflow: hidden;
    position: relative; scroll-snap-align: start;
}
.jkp-photo-open { cursor: zoom-in; display: block; }
.jkp-photo-item img { aspect-ratio: var(--jkp-ratio, 1.5); display: block; height: auto; object-fit: cover; transition: transform .9s var(--jkp-ease); width: 100%; }
.jkp-photo-item:hover img { transform: scale(1.025); }
.jkp-photo-item figcaption { background: linear-gradient(180deg,transparent,rgba(0,0,0,.78)); bottom: 0; color: #fff; display: flex; flex-direction: column; gap: .3rem; left: 0; padding: 4rem 1.4rem 1.25rem; position: absolute; right: 0; }
.jkp-photo-item figcaption small { color: rgba(255,255,255,.65); font-size: .61rem; letter-spacing: .12em; text-transform: uppercase; }
.jkp-photo-item figcaption strong { font-size: 1rem; font-weight: 500; }
.jkp-photo-item figcaption a { align-items: center; color: #fff; display: inline-flex; font-size: .65rem; gap: .45rem; letter-spacing: .08em; margin-top: .45rem; pointer-events: auto; text-decoration: underline; text-underline-offset: .25rem; text-transform: uppercase; }
.jkp-diagonal-arrow { display: inline-block; flex: 0 0 auto; height: 1rem; position: relative; width: 1rem; }
.jkp-diagonal-arrow::before { background: currentColor; bottom: .19rem; content: ""; height: 1px; left: .12rem; position: absolute; transform: rotate(-45deg); transform-origin: left center; width: .82rem; }
.jkp-diagonal-arrow::after { border-right: 1px solid currentColor; border-top: 1px solid currentColor; content: ""; height: .43rem; position: absolute; right: .08rem; top: .08rem; width: .43rem; }
.jkp-lightbox { align-items: center; background: rgba(5,5,5,.97); display: none; inset: 0; justify-content: center; padding: clamp(1rem,3vw,3rem); position: fixed; z-index: 1000; }
.jkp-lightbox.is-open { display: flex; }
.jkp-lightbox__figure { align-items: center; display: flex; flex-direction: column; gap: 1rem; margin: 0; max-height: 100%; max-width: 100%; }
.jkp-lightbox__stage { align-items: center; display: flex; height: 84svh; justify-content: center; overflow: auto; width: 90vw; }
.jkp-lightbox__figure img { cursor: zoom-in; max-height: 84svh; max-width: 90vw; object-fit: contain; transform-origin: center; transition: transform .2s ease; user-select: none; }
.jkp-lightbox__figure img.is-zoomed { cursor: zoom-out; }
.jkp-video-lightbox .jkp-lightbox__player { background: #000; aspect-ratio: 16 / 9; width: min(90vw, calc(82svh * 16 / 9)); max-width: 90vw; max-height: 82svh; }
.jkp-video-lightbox .jkp-lightbox__player .plyr { width: 100%; height: 100%; border-radius: 2px; overflow: hidden; }
.jkp-video-lightbox .plyr--video { --plyr-color-main: #f2f2f0; --plyr-video-background: #000; --plyr-menu-background: rgba(10,10,10,.95); --plyr-control-icon-size: 16px; }
.jkp-video-lightbox .plyr__control--overlaid { background: rgba(0,0,0,.55); }
.jkp-lightbox__figure figcaption { color: #bbb; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.jkp-lightbox button { align-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #fff; cursor: pointer; display: flex; font-size: 1.2rem; height: 2.8rem; justify-content: center; position: absolute; width: 2.8rem; }
.jkp-lightbox button:hover, .jkp-lightbox button:focus { background: rgba(255,255,255,.18); }
.jkp-lightbox__close { right: 1.25rem; top: 1.25rem; }
.jkp-lightbox__prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.jkp-lightbox__next { right: 1.25rem; top: 50%; transform: translateY(-50%); }
.jkp-lightbox__zoom { bottom: 1.25rem; display: flex; gap: .4rem; left: 50%; position: absolute; transform: translateX(-50%); z-index: 2; }
.jkp-lightbox .jkp-lightbox__zoom button { font-size: .8rem; height: 2.5rem; position: static; width: 2.5rem; }
.jkp-lightbox .jkp-lightbox__zoom-reset { border-radius: 999px; min-width: 4.5rem; width: auto; }
html.jkp-lightbox-active { overflow: hidden; }
.jkp-photo-placeholder-grid { display: grid; gap: 1px; grid-template-columns: repeat(12,1fr); }
.jkp-photo-placeholder { align-items: center; aspect-ratio: 4/3; background: #e5e5e2; color: #888; display: flex; grid-column: span 4; justify-content: center; }
.jkp-photo-placeholder:nth-child(2), .jkp-photo-placeholder:nth-child(5) { aspect-ratio: 3/4; }
.jkp-photo-placeholder:nth-child(4) { grid-column: span 8; }
.jkp-photo-placeholder span { font-size: .63rem; letter-spacing: .1em; text-transform: uppercase; }

.jkp-services { background: var(--jkp-white); color: var(--jkp-black); }
.jkp-services > h2 { max-width: 12ch; }
.jkp-service-list { border-top: 1px solid rgba(0,0,0,.2); margin-top: clamp(3rem, 8vw, 8rem); }
.jkp-service-list article { align-items: start; border-bottom: 1px solid rgba(0,0,0,.2); display: grid; gap: 2rem; grid-template-columns: .3fr 1.4fr 1fr auto; padding: clamp(1.8rem, 3vw, 3rem) 0; transition: padding .45s var(--jkp-ease); }
.jkp-service-list article:hover { padding-inline: 1rem; }
.jkp-service-list span { color: #777; font-size: .68rem; }
.jkp-service-list h3 { font-size: clamp(1.5rem, 2.7vw, 2.8rem); font-weight: 500; letter-spacing: -.04em; margin: 0; }
.jkp-service-list p { color: #555; font-size: .9rem; line-height: 1.6; margin: 0; max-width: 26rem; }
.jkp-service-list i { font-style: normal; font-size: 1.3rem; }

.jkp-about { align-items: start; background: var(--jkp-charcoal); display: grid; gap: clamp(4rem, 10vw, 10rem); grid-template-columns: 1fr 1fr; }
.jkp-about__body { color: #ddd; font-size: clamp(1.15rem, 2vw, 1.75rem); letter-spacing: -.025em; line-height: 1.5; padding-top: 2.4rem; }
.jkp-about__body p { margin: 0 0 1.6em; }
.jkp-about__facts { border-top: 1px solid var(--jkp-line); display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; padding-top: 1.2rem; }
.jkp-about__facts span { color: var(--jkp-grey); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }

.jkp-client-projects { background: var(--jkp-black); padding: var(--jkp-space) var(--jkp-gutter); }
.jkp-client-projects__head { align-items: end; display: grid; gap: 3rem; grid-template-columns: .55fr 1.45fr; margin-bottom: clamp(3rem, 7vw, 6rem); }
.jkp-client-projects__head h2 { font-size: clamp(2.6rem, 5.7vw, 6rem); font-weight: 500; letter-spacing: -.055em; line-height: .98; margin: 0; max-width: 13ch; text-wrap: balance; }
.jkp-client-projects__grid { border-left: 1px solid var(--jkp-line); display: grid; grid-template-columns: repeat(3,1fr); }
.jkp-client-project {
    border-bottom: 1px solid var(--jkp-line); border-right: 1px solid var(--jkp-line); border-top: 1px solid var(--jkp-line);
    color: #fff; display: block; min-width: 0; overflow: hidden; position: relative; transition: background .4s, color .4s;
}
.jkp-client-project:hover { background: #fff; color: #0a0a0a; }
.jkp-client-project__thumb { align-items: center; aspect-ratio: 16/10; background: #171717; border-bottom: 1px solid var(--jkp-line); display: flex; justify-content: center; overflow: hidden; }
.jkp-client-project__thumb img { height: 100%; object-fit: cover; transition: transform .8s var(--jkp-ease), filter .5s; width: 100%; }
.jkp-client-project:hover .jkp-client-project__thumb img { filter: saturate(1.05); transform: scale(1.025); }
.jkp-client-project__thumb > span { color: #5f5f5f; font-size: .61rem; letter-spacing: .14em; text-transform: uppercase; }
.jkp-client-project__body { display: flex; flex-direction: column; min-height: clamp(16rem, 20vw, 21rem); padding: clamp(1.5rem, 3vw, 3rem); position: relative; }
.jkp-client-project__body > span { color: var(--jkp-grey); font-size: .63rem; letter-spacing: .13em; text-transform: uppercase; }
.jkp-client-project h3 { font-size: clamp(1.5rem, 2.8vw, 3rem); font-weight: 500; letter-spacing: -.04em; margin: auto 0 1rem; }
.jkp-client-project p { color: var(--jkp-grey); font-size: .88rem; line-height: 1.6; margin: 0; max-width: 25rem; }
.jkp-client-project:hover .jkp-client-project__body > span, .jkp-client-project:hover p { color: #555; }
.jkp-client-project i { font-size: 1.2rem; font-style: normal; position: absolute; right: clamp(1.5rem, 3vw, 3rem); top: clamp(1.5rem, 3vw, 3rem); }

.jkp-proof { background: var(--jkp-white); color: var(--jkp-black); padding: var(--jkp-space) var(--jkp-gutter) 0; }
.jkp-proof blockquote { margin: 0 auto clamp(5rem, 9vw, 9rem); max-width: 72rem; text-align: center; }
.jkp-proof blockquote p { font-size: clamp(2rem, 4.5vw, 4.5rem); letter-spacing: -.05em; line-height: 1.08; margin: 0 0 2rem; }
.jkp-proof cite { color: #777; font-size: .65rem; font-style: normal; letter-spacing: .14em; text-transform: uppercase; }
.jkp-logo-heading { align-items: end; display: grid; gap: 3rem; grid-template-columns: .55fr 1.45fr; padding-bottom: clamp(2rem, 4vw, 4rem); }
.jkp-logo-heading h2 { font-size: clamp(2rem, 4vw, 4rem); font-weight: 500; letter-spacing: -.05em; line-height: 1; margin: 0; }
.jkp-logo-rail { border-top: 1px solid rgba(0,0,0,.18); overflow: hidden; padding: 2.7rem 0; }
.jkp-logo-rail__track { align-items: center; animation: jkp-logo-rail 24s linear infinite; display: flex; gap: clamp(3rem, 7vw, 7rem); width: max-content; }
.jkp-logo-rail:hover .jkp-logo-rail__track { animation-play-state: paused; }
.jkp-client-logo { align-items: center; color: #777; display: flex; flex: 0 0 clamp(10rem, 17vw, 17rem); height: 4.5rem; justify-content: center; }
.jkp-client-logo img { filter: grayscale(1); height: 100%; max-width: 100%; object-fit: contain; opacity: .58; transition: filter .3s, opacity .3s; width: 100%; }
.jkp-client-logo:hover img { filter: grayscale(0); opacity: 1; }
.jkp-client-logo b { font-size: clamp(.72rem, 1vw, .95rem); letter-spacing: .1em; text-align: center; }
@keyframes jkp-logo-rail { to { transform: translateX(calc(-50% - clamp(1.5rem, 3.5vw, 3.5rem))); } }

.jkp-enquire { background: var(--jkp-black); display: grid; gap: clamp(4rem, 9vw, 9rem); grid-template-columns: 1.1fr .9fr; padding: var(--jkp-space) var(--jkp-gutter); }
.jkp-contact-lines { display: flex; flex-direction: column; gap: .55rem; margin-top: clamp(3rem, 7vw, 7rem); }
.jkp-contact-lines a, .jkp-contact-lines span { color: var(--jkp-grey); font-size: .8rem; letter-spacing: .05em; }
.jkp-form { display: flex; flex-direction: column; gap: 1.7rem; }
.jkp-form label { display: flex; flex-direction: column; gap: .55rem; }
.jkp-form label > span { color: #888; font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; }
.jkp-form input, .jkp-form select, .jkp-form textarea { background: transparent; border: 0; border-bottom: 1px solid #444; border-radius: 0; color: #fff; outline: 0; padding: .3rem 0 .85rem; transition: border-color .3s; width: 100%; }
.jkp-form select {
    appearance: none; color-scheme: light; cursor: pointer; padding-right: 1.8rem;
    background-image: linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
    background-position: calc(100% - 9px) 48%,calc(100% - 4px) 48%; background-repeat: no-repeat; background-size: 5px 5px;
}
.jkp-form select option { background: #fff; color: #0a0a0a; }
.jkp-form textarea { resize: vertical; }
.jkp-form input:focus, .jkp-form select:focus, .jkp-form textarea:focus { border-color: #fff; }
.jkp-form button { align-items: center; align-self: start; background: #fff; border: 1px solid #fff; color: #0a0a0a; cursor: pointer; display: flex; gap: 4rem; justify-content: space-between; margin-top: 1rem; min-width: 15rem; padding: 1rem 1.2rem; transition: background .3s, color .3s; }
.jkp-form button:hover { background: transparent; color: #fff; }
.jkp-form button i { font-style: normal; }
.jkp-hp { height: 0; left: -9999px; overflow: hidden; position: absolute; width: 0; }
.jkp-form__status { border: 1px solid #555; font-size: .8rem; line-height: 1.5; margin: 0; padding: 1rem; }
.jkp-form__status--sent { border-color: #8caa8c; }

.jkp-footer { align-items: end; background: var(--jkp-black); border-top: 1px solid var(--jkp-line); display: grid; gap: 2rem; grid-template-columns: 1.3fr .7fr 1fr; padding: 3rem var(--jkp-gutter); }
.jkp-footer__brand { font-size: clamp(1.2rem, 2vw, 1.8rem); font-weight: 400; letter-spacing: -.02em; }
.jkp-footer__brand > span { font-size: 1.35em; margin-left: .55em; }
.jkp-footer p, .jkp-footer span, .jkp-footer div a { color: #777; font-size: .62rem; letter-spacing: .1em; margin: 0; text-transform: uppercase; }
.jkp-footer div { display: flex; gap: 2rem; justify-content: end; }

.jkp-reveal { opacity: 0; transform: translateY(2rem); transition: opacity .8s var(--jkp-ease), transform .8s var(--jkp-ease); }
.jkp-reveal.is-visible { opacity: 1; transform: none; }

/* Project detail pages */
.jkp-project-page { background: var(--jkp-black); }
.jkp-project-header { align-items: center; background: rgba(10,10,10,.94); display: flex; justify-content: space-between; left: 0; padding: 1.5rem var(--jkp-gutter); position: fixed; right: 0; top: 0; z-index: 100; }
.jkp-project-back { border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: .68rem; letter-spacing: .12em; padding: .8rem 1rem; text-transform: uppercase; }
.jkp-project-detail { overflow: hidden; }
.jkp-project-intro { display: grid; gap: 2rem; grid-template-columns: 1.25fr .75fr; padding: clamp(9rem,14vw,14rem) var(--jkp-gutter) clamp(4rem,8vw,8rem); }
.jkp-project-breadcrumb { color: #777; display: flex; flex-wrap: wrap; font-size: .62rem; gap: .65rem; grid-column: 1 / -1; letter-spacing: .1em; text-transform: uppercase; }
.jkp-project-breadcrumb strong { color: #bbb; font-weight: 500; }
.jkp-project-intro > .jkp-eyebrow { grid-column: 1 / -1; margin: 0; }
.jkp-project-intro h1 { font-size: clamp(3.5rem,9vw,10rem); font-weight: 500; letter-spacing: -.065em; line-height: .86; margin: 0; overflow-wrap: anywhere; }
.jkp-project-story { align-self: end; color: #bbb; font-size: clamp(1rem,1.45vw,1.35rem); line-height: 1.7; max-width: 42rem; }
.jkp-project-story p:last-child { margin-bottom: 0; }
.jkp-project-feature { background: #000; width: 100%; }
.jkp-project-feature video, .jkp-project-feature img { display: block; height: auto; max-height: 100svh; object-fit: contain; width: 100%; }
.jkp-project-bts { align-items: start; display: grid; gap: clamp(2rem,6vw,7rem); grid-template-columns: .55fr 1.45fr; padding: var(--jkp-space) var(--jkp-gutter); }
.jkp-project-bts h2, .jkp-project-section-head h2 { font-size: clamp(2.3rem,5vw,5.5rem); font-weight: 500; letter-spacing: -.055em; line-height: .95; margin: 1.5rem 0 0; }
.jkp-project-bts video { background: #111; width: 100%; }
.jkp-project-gallery, .jkp-project-recommended { border-top: 1px solid var(--jkp-line); padding: var(--jkp-space) 0; }
.jkp-project-section-head { align-items: end; display: flex; gap: 2rem; justify-content: space-between; padding: 0 var(--jkp-gutter) clamp(2.5rem,5vw,5rem); }
.jkp-track-controls { display: flex; gap: .55rem; }
.jkp-track-controls button { background: transparent; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: #fff; cursor: pointer; height: 3rem; width: 3rem; }
.jkp-project-track, .jkp-recommended-track { cursor: grab; display: flex; gap: 1px; overflow-x: auto; padding: 0 var(--jkp-gutter); scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; user-select: none; }
.jkp-project-track::-webkit-scrollbar, .jkp-recommended-track::-webkit-scrollbar { display: none; }
.jkp-project-track.is-dragging, .jkp-recommended-track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.jkp-project-gallery-item { background: #151515; flex: 0 0 min(76vw,68rem); margin: 0; scroll-snap-align: start; }
.jkp-project-gallery-item img, .jkp-project-gallery-item video { display: block; height: clamp(22rem,58vw,52rem); object-fit: contain; width: 100%; }
.jkp-project-gallery-item a { cursor: zoom-in; display: block; }
.jkp-track-hint { color: #777; font-size: .62rem; letter-spacing: .1em; margin: 1.25rem var(--jkp-gutter) 0; text-transform: uppercase; }
.jkp-recommended-card { flex: 0 0 clamp(18rem,31vw,34rem); scroll-snap-align: start; }
.jkp-recommended-card > div { aspect-ratio: 16/10; background: #161616; overflow: hidden; }
.jkp-recommended-card img { height: 100%; object-fit: cover; transition: transform .7s var(--jkp-ease); width: 100%; }
.jkp-recommended-card:hover img { transform: scale(1.025); }
.jkp-recommended-card span { color: #777; display: block; font-size: .6rem; letter-spacing: .11em; margin-top: 1rem; text-transform: uppercase; }
.jkp-recommended-card h3 { font-size: clamp(1.25rem,2vw,2rem); font-weight: 500; letter-spacing: -.035em; margin: .45rem 0 0; }
.jkp-project-footer { align-items: center; border-top: 1px solid var(--jkp-line); display: flex; justify-content: space-between; padding: 3rem var(--jkp-gutter); }
.jkp-project-footer a, .jkp-project-footer span { color: #999; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 900px) {
    .jkp-header { min-height: 4.5rem; }
    .jkp-brand {
        left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%);
        width: clamp(9rem, 34vw, 11rem);
    }
    .jkp-menu-toggle { margin-left: auto; }
    .jkp-header nav {
        align-items: center; background: rgba(10,10,10,.985); backdrop-filter: blur(18px); flex-direction: column;
        gap: clamp(1rem, 3vh, 2rem); height: 100svh; inset: 0; justify-content: center; opacity: 0;
        overflow-y: auto; padding: max(6rem,env(safe-area-inset-top)) var(--jkp-gutter) max(3rem,env(safe-area-inset-bottom));
        pointer-events: none; position: fixed; text-align: center; transform: translateY(-1rem);
        transition: opacity .3s, transform .4s var(--jkp-ease); width: 100%; z-index: 1;
    }
    .jkp-header nav a { flex: 0 0 auto; font-size: clamp(1.5rem, 6vw, 2.65rem); letter-spacing: -.035em; line-height: 1.1; max-width: 100%; text-transform: none; }
    .jkp-header.is-menu-open nav { opacity: 1; pointer-events: auto; transform: none; }
    .jkp-menu-toggle { display: block; }
    .jkp-hero__grid { grid-template-columns: 1.2fr .8fr; grid-template-rows: repeat(3,1fr); }
    .jkp-hero__tile--1 { grid-column: 1; grid-row: 1 / 3; }
    .jkp-hero__tile--2 { grid-column: 2; grid-row: 1; }
    .jkp-hero__tile--3 { grid-column: 2; grid-row: 2; }
    .jkp-hero__tile--4 { grid-column: 1; grid-row: 3; }
    .jkp-hero__tile--5 { grid-column: 2; grid-row: 3; }
    .jkp-hero__tile--6 { display: none; }
    .jkp-section__head { align-items: start; grid-template-columns: 1fr; }
    .jkp-project { flex-basis: calc(var(--jkp-ratio, 1.5) * 15rem); }
    .jkp-photo-item { flex-basis: calc(var(--jkp-ratio, 1.5) * 15rem); }
    .jkp-photo-placeholder { grid-column: span 6; }
    .jkp-photo-placeholder:nth-child(4) { grid-column: span 6; }
    .jkp-service-list article { grid-template-columns: .2fr 1fr auto; }
    .jkp-service-list p { grid-column: 2 / 3; }
    .jkp-about, .jkp-enquire { grid-template-columns: 1fr; }
    .jkp-client-projects__head { align-items: start; grid-template-columns: 1fr; }
    .jkp-client-projects__grid { grid-template-columns: 1fr; }
    .jkp-client-project__body { min-height: 17rem; }
    .jkp-logo-heading { align-items: start; grid-template-columns: 1fr; }
    .jkp-enquire { gap: 5rem; }
    .jkp-footer { grid-template-columns: 1fr 1fr; }
    .jkp-footer > p { display: none; }
}

@media (max-width: 600px) {
    .jkp-canvas .jkp-menu-toggle { display: block; }
    .jkp-header { min-height: 6.5rem; padding-bottom: 1.35rem; padding-top: 1.75rem; }
    .jkp-header.is-scrolled { padding-bottom: 1rem; padding-top: 1rem; }
    .jkp-brand { width: clamp(8.75rem, 32vw, 10rem); }
    .jkp-header nav { gap: clamp(.8rem, 2.5vh, 1.4rem); padding-inline: 1.5rem; }
    .jkp-header nav a { font-size: clamp(1.35rem, 7vw, 2rem); }
    .jkp-project-header { padding-block: 1.25rem; }
    .jkp-project-header .jkp-brand { left: auto; position: relative; top: auto; transform: none; width: 8.5rem; }
    .jkp-project-back { font-size: .58rem; padding: .7rem .8rem; }
    .jkp-project-intro { grid-template-columns: 1fr; padding-top: 9rem; }
    .jkp-project-intro h1 { font-size: clamp(3.25rem,16vw,5.5rem); }
    .jkp-project-story { font-size: 1rem; }
    .jkp-project-bts { grid-template-columns: 1fr; }
    .jkp-project-section-head { align-items: start; flex-direction: column; }
    .jkp-project-gallery-item { flex-basis: 90vw; }
    .jkp-project-gallery-item img, .jkp-project-gallery-item video { height: 66svh; }
    .jkp-recommended-card { flex-basis: 82vw; }
    .jkp-project-footer { align-items: flex-start; flex-direction: column; gap: 1.5rem; }
    .jkp-hero { height: 100svh; }
    .jkp-hero__grid { display: block; }
    .jkp-hero__tile,
    .jkp-hero__tile--6 {
        display: block; inset: 0; opacity: 0; pointer-events: none; position: absolute;
        transition: opacity 1.1s var(--jkp-ease);
    }
    .jkp-hero__tile.is-mobile-active { opacity: 1; }
    .jkp-hero__tile video { transform: translateZ(0); }
    .jkp-hero h1 { font-size: clamp(2.65rem, 11vw, 4rem); max-width: 10ch; }
    .jkp-hero__kicker { margin-bottom: 1rem; }
    .jkp-scroll-cue { bottom: 1.4rem; }
    .jkp-section__head { gap: 2rem; }
    .jkp-filters { margin-right: calc(var(--jkp-gutter) * -1); }
    .jkp-project { flex-basis: calc(var(--jkp-ratio, 1.5) * 10rem); }
    .jkp-photo-grid { display: flex; }
    .jkp-photo-item { display: block; flex: 0 0 100vw; width: 100vw; }
    .jkp-photo-placeholder-grid { grid-template-columns: 1fr; }
    .jkp-photo-placeholder, .jkp-photo-placeholder:nth-child(4) { grid-column: auto; }
    .jkp-lightbox { padding: 4rem .75rem 2rem; }
    .jkp-lightbox__stage { height: 72svh; width: 96vw; }
    .jkp-lightbox__figure img { max-height: 72svh; max-width: 96vw; }
    .jkp-lightbox__prev { left: .65rem; }
    .jkp-lightbox__next { right: .65rem; }
    .jkp-service-list article { gap: 1rem; grid-template-columns: 2rem 1fr auto; }
    .jkp-service-list p { grid-column: 2 / 4; }
    .jkp-about__body { padding-top: 0; }
    .jkp-about__facts { grid-template-columns: 1fr 1fr; }
    .jkp-logo-rail { margin-right: calc(var(--jkp-gutter) * -1); overflow-x: auto; padding-right: var(--jkp-gutter); scroll-snap-type: x mandatory; scrollbar-width: none; }
    .jkp-logo-rail::-webkit-scrollbar { display: none; }
    .jkp-logo-rail__track { animation: none; gap: 0; }
    .jkp-client-logo { border-right: 1px solid rgba(0,0,0,.12); flex-basis: 44vw; padding: 0 1.25rem; scroll-snap-align: start; }
    .jkp-footer { align-items: start; grid-template-columns: 1fr; }
    .jkp-footer div { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    .jkp-logo-rail__track { animation: none !important; }
}