/* Native scroll choreography for the JKB homepage. */
.motion-home{--paper:#fff9f2;background:var(--paper)}
.motion-home .topline{position:absolute;top:0;left:0;right:0;z-index:5;background:transparent;border:0;padding:28px 4%}
.motion-home .topline .official-logo{display:none}.motion-home .topline p{font-size:13px}.motion-home .topline .button{background:#1d2945}
.motion-home .hero{padding:0;overflow:clip;height:155svh;position:relative}
.hero-stage{height:100svh;min-height:620px;position:sticky;top:0;display:flex;flex-direction:column;padding:110px 4% 90px;overflow:hidden}
.motion-home .hero-note{margin:0;font-size:11px;letter-spacing:.05em;position:relative;z-index:2}
.logo-space{position:relative;flex:1;display:flex;align-items:center;justify-content:center;perspective:1000px;min-height:260px}
.logo-motion{width:94%;position:relative;will-change:transform;transform-style:preserve-3d;filter:drop-shadow(0 24px 20px #1d29450d)}
.logo-motion img{display:block;width:100%;height:auto}
.orbit-label{position:absolute;right:3%;bottom:4%;width:105px;height:105px;display:grid;place-content:center;text-align:center;border:1px solid #96bbae;background:#e1f1e8;border-radius:50%;font-size:11px;font-weight:600;transform:rotate(12deg);will-change:transform}
.motion-home .hero-bottom{position:relative;align-items:flex-end;padding-top:20px;z-index:2}
.motion-home .hero h1{font-size:clamp(23px,2.6vw,40px);line-height:1.1;font-weight:500;max-width:450px;margin:0}
.motion-home .hero-bottom p{font-size:14px;color:var(--muted);margin:0}
.scroll-cue{display:flex;align-items:center;gap:20px;font-size:10px;letter-spacing:.09em}.scroll-cue b{display:grid;place-content:center;font-size:24px;border:1px solid #baccc7;border-radius:50%;width:48px;height:48px;animation:cue 2s ease-in-out infinite}
@keyframes cue{50%{transform:translateY(7px)}}
.motion-home .intro{padding-top:70px;padding-bottom:100px}.motion-home .intro h2{font-size:clamp(45px,7.5vw,112px);font-weight:500;max-width:1250px;line-height:1.04}
[data-scroll-words] .scroll-word{opacity:var(--word-opacity,1);transition:opacity .08s linear}
.motion-home .motion-projects{padding:70px 4% 0}.motion-projects .split-title{align-items:flex-start;margin-bottom:70px}.motion-projects .split-title h2{font-size:clamp(45px,6.5vw,98px)}
.motion-stack{display:block;position:relative;padding-bottom:5vh}
.motion-stack .project-card{display:block;position:sticky;top:10svh;height:78svh;min-height:480px;margin-bottom:24svh;transform-origin:50% 0;will-change:transform;isolation:isolate;overflow:hidden;border-radius:16px;background:#e7f0ec;box-shadow:0 16px 45px #1d29451a}
.motion-stack .project-card:nth-child(2){z-index:2;background:#e9f0f3}.motion-stack .project-card:nth-child(3){z-index:3;background:#eef0f6;margin-bottom:0}
.motion-stack .project-art{height:100%;padding:7%;position:relative;transition:none;transform:none!important}
.motion-stack .project-art strong{font-size:clamp(65px,10vw,155px);line-height:.94;max-width:80%;position:relative;z-index:1;letter-spacing:-.065em;font-weight:600}
.motion-stack .concept{top:28px;left:28px;z-index:2}.motion-stack .art-caption{bottom:36px;left:7%;font-size:12px}
.motion-stack .project-meta{position:absolute;bottom:32px;right:30px;z-index:2;display:block;text-align:right;margin:0}
.motion-stack .project-meta h3{font-size:20px}.motion-stack .project-meta span{display:block;margin-top:8px}
.project-symbol{position:absolute;right:4%;top:28%;font-size:clamp(180px,28vw,440px);color:#4cb38745;line-height:1;transform:rotate(-12deg)}
.motion-stack .web-demo{width:65%;padding:35px 45px;transform:rotate(-5deg);will-change:transform;box-shadow:25px 25px 0 #aacbd5;max-width:800px}
.motion-stack .web-demo strong{font-size:clamp(48px,6vw,88px);margin:25px 0;max-width:100%;line-height:1.05}.motion-stack .web-demo i{padding:14px 22px}
.growth-disc{position:absolute;width:35vw;height:35vw;max-height:450px;max-width:450px;border-radius:50%;background:#bfdbd7;right:5%;top:10%;font-size:25vw;display:grid;place-content:center;color:#eef0f6;will-change:transform}
.motion-ribbons{height:85svh;min-height:580px;position:relative;overflow:hidden;padding-top:150px;display:flex;flex-direction:column;justify-content:center;background:var(--paper)}
.ribbon{width:130%;margin-left:-15%;padding:20px 0;overflow:hidden;background:#d7eee3;transform:rotate(-7deg);position:relative;z-index:1}
.ribbon-two{background:#d9ecf1;transform:rotate(7deg);margin-top:15px}.ribbon-track{font-family:Manrope,sans-serif;font-weight:700;font-size:clamp(65px,9vw,135px);letter-spacing:-.06em;white-space:nowrap;line-height:1.1;width:max-content;will-change:transform}
.ribbon-two .ribbon-track{color:#2b6877}.ribbon-seal{position:absolute;left:12%;top:24%;width:140px;height:140px;display:grid;place-content:center;border-radius:50%;background:var(--paper);font-size:80px;z-index:3;border:1px dashed #99b8ae;will-change:transform}
.motion-ribbons p{position:relative;text-align:right;align-self:flex-end;padding:55px 7% 0;font-size:18px;line-height:1.4}
.motion-home .motion-pathways{height:280svh;padding:0;background:#f2f6f3;position:relative}
.ecosystem-stage{height:100svh;min-height:650px;position:sticky;top:0;padding:7vh 4% 85px;overflow:hidden;display:flex;flex-direction:column}
.pathway-heading{display:flex;justify-content:space-between;align-items:flex-end}.pathway-heading h2{font-size:clamp(40px,5vw,72px);line-height:1.04;margin:0}.pathway-heading .section-label{margin-bottom:20px}.pathway-counter{font-size:13px;letter-spacing:.1em;padding-bottom:10px}
.ecosystem-window{overflow:hidden;flex:1;margin-top:25px;min-height:280px}
.motion-pathways .ecosystem-grid{display:flex;width:300%;height:100%;margin:0;gap:0;will-change:transform}
.motion-pathways .ecosystem-grid>a{flex:0 0 33.333333%;min-width:0;background:transparent;border:0;box-shadow:none;padding:30px 6% 20px 0;display:grid;grid-template-columns:1.1fr 1fr;column-gap:6%;align-content:center;min-height:0;transform:none}
.motion-pathways .ecosystem-grid a>span{grid-column:1/-1;font-size:12px}.motion-pathways .ecosystem-grid h3{font-size:clamp(48px,6vw,90px);line-height:1.05;grid-row:2/4;margin:20px 0;color:#2b6877;max-width:550px}.motion-pathways .ecosystem-grid p{align-self:end;font-size:18px;max-width:420px;margin:25px 0}.motion-pathways .ecosystem-grid b{align-self:start;justify-self:start;margin-top:0;display:inline-block;padding:14px 22px;border:1px solid #89aaa1;border-radius:50px;font-weight:500;text-decoration:none;font-size:14px}
.pathway-progress{height:2px;background:#d0ddd7;margin-top:20px}.pathway-progress i{display:block;width:33.333%;height:100%;background:#2b6877;will-change:transform}
.motion-home .brand-scene{min-height:75svh;background:var(--paper);overflow:hidden}.motion-home .brand-statement{font-size:clamp(50px,7vw,105px);will-change:transform}
.motion-home .method{background:#eaf2f2}.motion-home .method-grid article{transition:none;will-change:transform}
.motion-home .cta{min-height:85svh;position:relative;overflow:hidden}.motion-home .cta h2{font-size:clamp(64px,11vw,170px);line-height:1.02}.motion-home .cta-logo{width:160px}
.motion-home .dock{transition:box-shadow .3s,border-color .3s}.motion-home.scrolled .dock{box-shadow:0 8px 40px #1d29451f;border-color:#b5cfc8}
@media(max-width:720px){
.hero-stage{min-height:560px;padding:95px 5% 95px}.motion-home .hero{height:140svh}.logo-space{min-height:200px}.logo-motion{width:100%}.orbit-label{width:76px;height:76px;font-size:9px;bottom:0;right:3%}.motion-home .hero-bottom{display:grid;grid-template-columns:1fr 1fr;gap:20px}.motion-home .hero h1{font-size:25px;grid-column:1/-1}.motion-home .hero-bottom p{font-size:12px;width:auto}.scroll-cue{justify-self:end;gap:10px;max-width:160px;line-height:1.5}.scroll-cue b{width:38px;height:38px;flex-shrink:0}.motion-home .intro{padding:60px 5%}.motion-home .intro h2{font-size:12vw}.motion-projects .split-title{margin-bottom:45px}.motion-projects .split-title h2{font-size:12vw}.motion-stack .project-card{top:8svh;height:76svh;min-height:460px;border-radius:12px;margin-bottom:25svh}.motion-stack .project-art{padding:8%}.motion-stack .project-art strong{font-size:15vw;max-width:100%;line-height:1}.motion-stack .concept{font-size:9px;top:20px;left:20px}.motion-stack .project-meta{text-align:left;left:8%;right:8%;bottom:28px}.motion-stack .project-meta h3{font-size:20px}.motion-stack .project-meta span{font-size:11px}.motion-stack .art-caption{bottom:100px;font-size:9px}.motion-stack .web-demo{width:92%;padding:30px 20px;box-shadow:14px 14px 0 #aacbd5}.motion-stack .web-demo strong{font-size:12vw;line-height:1.05}.project-symbol{font-size:75vw;top:45%;right:-5%}.growth-disc{width:55vw;height:55vw;top:48%;right:-10%;font-size:40vw}.motion-ribbons{min-height:500px;height:75svh;padding-top:90px}.ribbon{padding:22px 0}.ribbon-track{font-size:70px}.ribbon-seal{width:90px;height:90px;font-size:55px;top:21%;left:10%}.motion-ribbons p{font-size:15px;padding-top:45px}.motion-home .motion-pathways{height:250svh}.ecosystem-stage{padding:8vh 5% 90px;min-height:610px}.pathway-heading h2{font-size:11vw}.pathway-heading .section-label{font-size:9px}.pathway-counter{font-size:10px}.motion-pathways .ecosystem-grid>a{display:flex;padding:18px 3% 10px 0;justify-content:center}.motion-pathways .ecosystem-grid h3{font-size:13vw;margin:22px 0 15px;max-width:300px}.motion-pathways .ecosystem-grid p{font-size:16px;align-self:start;margin:0 0 22px}.motion-pathways .ecosystem-grid b{font-size:13px;padding:12px 18px;align-self:start;margin:0}.motion-pathways .ecosystem-grid>a>span{font-size:10px}.ecosystem-window{margin-top:10px}.motion-home .brand-scene{min-height:0;padding:75px 5%}.motion-home .brand-statement{font-size:14vw}.motion-home .cta{min-height:75svh}.motion-home .cta h2{font-size:16vw}
}
@media(prefers-reduced-motion:reduce){
.motion-home .hero{height:100svh;min-height:600px}.hero-stage{position:relative}.logo-motion,.orbit-label,.ribbon-track,.ribbon-seal,.motion-stack .project-card,.motion-stack .web-demo,.growth-disc,.brand-statement,.method-grid article{transform:none!important}
.motion-stack .project-card{position:relative;top:auto;margin-bottom:30px;height:75svh}.motion-ribbons{height:650px}.motion-home .motion-pathways{height:auto}.ecosystem-stage{position:relative;height:auto;min-height:0}.ecosystem-window{overflow:visible}.motion-pathways .ecosystem-grid{display:block;width:100%;transform:none!important}.motion-pathways .ecosystem-grid>a{min-height:350px;border-top:1px solid var(--line);display:block;padding:30px 0}.motion-pathways .ecosystem-grid h3{max-width:none}.pathway-counter,.pathway-progress{display:none}.scroll-word{opacity:1!important}
}
.motion-home .reveal{animation:none}
@media(min-width:721px){.motion-home .motion-pathways{height:320svh}}
.motion-home .hero-bottom{padding-right:70px}
@media(max-width:720px){.motion-home .hero-bottom{padding-right:0}.motion-home .scroll-cue{margin-right:0}.motion-home .floating-helper{bottom:85px}}
.motion-home:not(.scrolled) .floating-helper{visibility:hidden}
@media(max-width:720px){.motion-stack .web-demo strong{font-size:9.5vw;letter-spacing:-.055em}.motion-stack .web-demo{padding:28px 20px}}
/* Readability and source-resolution limits. */
.logo-motion{width:72%;max-width:min(760px,var(--logo-resolution-limit,760px));filter:none;transform-style:flat}
.motion-home [data-scroll-words] .scroll-word{--word-color:var(--ink);opacity:1;color:color-mix(in srgb,var(--word-color) calc(var(--word-progress,1)*100%),#526d75);transition:color .12s linear}
.motion-home [data-scroll-words] em .scroll-word{--word-color:var(--blue)}
.motion-home .cta [data-scroll-words] .scroll-word{--word-color:#fff;color:color-mix(in srgb,var(--word-color) calc(var(--word-progress,1)*100%),#b5d3d1)}
.motion-home .cta [data-scroll-words] em .scroll-word{--word-color:#9acfc4}
.motion-home .hero-note,.motion-home .section-label,.scroll-cue,.orbit-label,.motion-stack .concept,.motion-stack .art-caption{font-size:12px}
.motion-stack .project-art{padding-top:80px;padding-bottom:135px}
.motion-stack .project-art strong{font-size:clamp(55px,7.5vw,110px);max-width:100%;line-height:1.05}
.motion-stack .project-meta{padding:10px 14px;background:#fffdfaf2;border-radius:8px;max-width:calc(100% - 60px)}
.motion-stack .project-meta>span{font-size:13px;color:#526d75}
.motion-stack .art-caption{bottom:115px}
.motion-stack .web-demo{padding:25px 35px}
.motion-stack .web-demo>span,.motion-stack .web-demo i{font-size:12px}
.motion-stack .web-demo strong{font-size:clamp(40px,5vw,70px);line-height:1.1}
.motion-pathways .ecosystem-grid a>span,.pathway-counter{font-size:13px}
.motion-home .hero-bottom p{font-size:16px}
@media(max-width:720px){
.logo-motion{width:90%}.motion-home .hero-note{font-size:12px;gap:20px}.motion-home .hero-note>span:last-child{max-width:120px}
.orbit-label{width:86px;height:86px;font-size:11px}.motion-home .hero-bottom p{font-size:14px}.scroll-cue{font-size:12px}
.motion-stack .concept{font-size:12px;padding:8px 10px}.motion-stack .project-art{padding-top:75px;padding-bottom:150px}
.motion-stack .project-art strong{font-size:12.8vw;line-height:1.08}.motion-stack .project-meta{left:5%;right:5%;max-width:none;bottom:25px;padding:12px}
.motion-stack .project-meta h3{font-size:19px;line-height:1.25}.motion-stack .project-meta span{font-size:13px;line-height:1.4}
.motion-stack .art-caption{bottom:130px;font-size:12px;max-width:80%;line-height:1.4}
.motion-stack .web-demo{padding:25px 15px}.motion-stack .web-demo strong{font-size:9vw}.motion-stack .web-demo>span{font-size:12px;line-height:1.4;display:block}
.pathway-heading .section-label,.pathway-counter,.motion-pathways .ecosystem-grid a>span{font-size:12px;line-height:1.4}
.pathway-heading{gap:16px}.motion-pathways .ecosystem-grid h3{font-size:12vw}.motion-pathways .ecosystem-grid p{font-size:16px;line-height:1.5;margin-bottom:18px}
}
@media(max-height:650px){
.motion-home .hero{height:auto}.hero-stage{height:auto;min-height:650px;position:relative}.logo-space{min-height:280px}
.motion-home .motion-pathways{height:auto}.ecosystem-stage{position:relative;height:auto;min-height:0;padding:60px 5% 110px}
.ecosystem-window{overflow:visible}.motion-pathways .ecosystem-grid{width:100%;display:block;transform:none!important}
.motion-pathways .ecosystem-grid>a{display:block;padding:40px 0;border-top:1px solid var(--line)}.motion-pathways .ecosystem-grid h3{max-width:none}
.pathway-counter,.pathway-progress{display:none}.motion-stack .project-card{position:relative;top:auto;height:auto;min-height:520px;margin-bottom:50px}.motion-stack .project-art{min-height:520px}
}
.motion-pathways .ecosystem-grid a>span{color:#526d75}
/* A longer, pinned ribbon scene with accents from the official palette. */
.motion-ribbons{height:280svh;min-height:0;padding:0;display:block;overflow:clip}
.ribbon-stage{height:100svh;min-height:620px;position:sticky;top:0;overflow:hidden;background:var(--paper)}
.ribbon-bundle{position:absolute;top:16%;bottom:32%;left:0;right:0;display:flex;flex-direction:column;justify-content:center;gap:12px}
.ribbon{flex-shrink:0;width:130%;margin:0 0 0 -15%;padding:14px 0;will-change:transform;background:#4cb387;color:#1d2945;transform:rotate(-5deg)}
.ribbon-two{background:#1d2945;transform:rotate(4deg);margin-top:0}
.ribbon-two .ribbon-track{color:#fff9f2}
.ribbon-three{background:#9ae3bf;transform:rotate(-3deg)}
.ribbon-track{font-size:clamp(72px,8.4vw,132px);line-height:1.1;letter-spacing:-.055em}
.ribbon-seal{top:8%;left:8%;width:100px;height:100px;border:1px solid #1d2945;background:#fff9f2;font-size:62px}
.motion-ribbons .ribbon-signature{position:absolute;right:5%;bottom:95px;z-index:4;padding:0;margin:0;text-align:right;font-size:22px;line-height:1.4;color:#1d2945;max-width:85%}
.motion-home .cta .button.lime{background:#4cb387;border-color:#4cb387;color:#1d2945}
.motion-home .orbit-label{background:#4cb387;border-color:#1d2945;color:#1d2945}
@media(max-width:720px){
.motion-ribbons{height:240svh}.ribbon-stage{min-height:610px}.ribbon-bundle{top:20%;bottom:33%;gap:12px}
.ribbon-track{font-size:56px;line-height:1.15}.ribbon{padding:18px 0}.ribbon-seal{width:76px;height:76px;top:11%;left:8%;font-size:46px}
.motion-ribbons .ribbon-signature{font-size:18px;bottom:115px;right:5%;line-height:1.5}
}
@media(max-height:650px){.motion-ribbons{height:auto}.ribbon-stage{position:relative;height:700px;min-height:700px}}
@media(prefers-reduced-motion:reduce){.motion-ribbons{height:auto!important}.ribbon-stage{position:relative;height:730px;min-height:0}.ribbon{transform:none!important}}
@media(max-width:720px) and (prefers-reduced-motion:reduce){.ribbon-stage{height:700px}}
.motion-ribbons .ribbon-signature{left:0;right:0;max-width:none;text-align:center;padding:0 70px}
@media(max-width:720px){.motion-ribbons .ribbon-signature{left:0;right:0;padding:0 55px}}

/* Shared reading dwell for the project stack. */
@media(min-height:651px) and (prefers-reduced-motion:no-preference){.motion-stack{padding-bottom:42svh}.motion-stack .project-card{margin-bottom:42svh}.motion-stack .project-card:last-child{margin-bottom:0}}