/* Motion extends the existing MJW identity; no animation library required. */
:root{--ease-out:cubic-bezier(.16,1,.3,1)}
.brand{display:flex;flex-direction:column;gap:0;align-items:flex-start;letter-spacing:0}
.brand-logo{width:112px;height:auto;display:block;margin:-4px -5px -2px;filter:brightness(1.35)}
.brand .brand-small{font-size:10px;letter-spacing:3.2px;margin:0 0 0 2px;color:#b9c7dd}
.header{transition:background .4s,width .7s var(--ease-out),top .7s var(--ease-out),box-shadow .4s}
.header.is-scrolled{width:calc(100% - 100px);max-width:1240px;top:12px}
.header nav:not(.mobile-nav){gap:8px}
.header nav:not(.mobile-nav) a{padding:11px 14px;border-radius:8px;transition:background .3s,color .3s}
.header nav a[aria-current=location]{background:#ffffff12}
.nav-cta,.hero-round,.button{position:relative;will-change:translate;transition:translate .4s var(--ease-out),background .3s,box-shadow .3s}
.nav-cta:hover,.button:hover{box-shadow:0 0 0 6px #c6d7ff13}
.hero{--mouse-x:0px;--mouse-y:0px;--light-x:70%;--light-y:40%}
.hero-art{transform:translate3d(var(--mouse-x),calc(var(--hero-scroll)*90px + var(--mouse-y)),0) scale(calc(1.045 + var(--hero-scroll)*.06));transition:transform 1.3s var(--ease-out)}
.hero-shade{background:radial-gradient(ellipse at var(--light-x) var(--light-y),#3968ff12,transparent 58%),linear-gradient(90deg,#080b12dc 0%,#080b1290 30%,#080b1210 72%),linear-gradient(0deg,#080b12,transparent 24%)}
.hero-content{padding-bottom:80px}
.hero h1{font-weight:550;font-size:clamp(70px,8.65vw,138px);letter-spacing:-.068em}
.hero-line{animation:none}
.hero-highlight{background:linear-gradient(105deg,#f5f8ff 3%,#bed0f6 40%,#637ead 78%);background-clip:text}
.hero-letter{display:inline-block;animation:letter-enter 1.15s var(--ease-out) both;animation-delay:calc(var(--char)*25ms + 80ms)}
.hero-highlight .hero-letter{background:inherit;background-clip:text;-webkit-text-fill-color:transparent;padding:.08em .075em .14em;margin:-.08em -.075em -.14em}
.hero-round{border:1px solid #ffffff50;background:#eff4ff;box-shadow:0 0 0 10px #ffffff07}
.hero-round span{transition:transform .5s var(--ease-out)}
.hero-round:hover{transform:none;background:#fff;box-shadow:0 0 0 18px #ffffff09}
.hero-round:hover span{transform:rotate(-45deg)}
.hero-footer{padding-bottom:10px}.hero-footer>span:nth-child(2){color:#a4b3ce}
.hero-discover span,.light-link span,.nav-cta span,.button span{display:inline-block;transition:transform .4s var(--ease-out)}
.hero-discover:hover span,.light-link:hover span,.nav-cta:hover span,.button:hover span{transform:translate(3px,-3px)}
.experience{background:#eef1f7;border-radius:40px 40px 0 0}
.experience-heading h2>span,.section-head h2 span{color:#6c7c97}
.system-scene{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 100%,#21469380,transparent 68%),#0c1424;color:#edf3ff;border:1px solid #233a61;border-radius:28px;box-shadow:0 35px 80px -35px #132d6960}
.system-scene::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#7695c70b 1px,transparent 1px),linear-gradient(90deg,#7695c70b 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(transparent,#000);z-index:-1;pointer-events:none}
.scene-heading{position:relative;z-index:2}.tiny-label,.scene-tag{color:#9bb0d0}.scene-tag{font-variant-numeric:tabular-nums}
.system-node{color:#e9f1ff;background:#17263b;border-color:#344967;box-shadow:inset 0 1px #ffffff0c,0 15px 30px #0002}
.system-node div>span{color:#a2b3cc}.node-icon,.value-icon{color:#84b6ff}
.core-node{background:linear-gradient(135deg,#315bff,#3864e9 65%,#799aff);box-shadow:0 0 65px #3168ff60,inset 0 1px #fff6}
.core-node::before,.core-node::after{border-color:#789cff30}
.experience[data-phase="0"] .core-node{opacity:.65}.experience[data-phase="0"] .value-node{opacity:.55}
.experience[data-phase="1"] .core-node{box-shadow:0 0 85px #4e7aff75}
.experience[data-phase="2"] .value-node,.experience[data-phase="0"] .sap-node{border-color:#9bbdff;box-shadow:0 0 35px #638eff20,inset 0 1px #fff2}
.experience[data-phase="2"] .system-scene{box-shadow:0 35px 80px -35px #132d6960}
.connection{background:#5a7db4}.connection i{background:#9abdff;box-shadow:0 0 14px #779cff}
.scene-bottom{border-color:#ffffff18;color:#9eb1d0}.separator{color:#63789b}
.chapter-meter{position:absolute;bottom:0;left:0;width:100%;height:3px;background:#ffffff08;pointer-events:none}
.chapter-meter span{display:block;height:100%;background:linear-gradient(90deg,#315bff,#a8d0ff);transform-origin:left;transform:scaleX(.12);transition:transform .8s var(--ease-out)}
[data-phase="1"] .chapter-meter span{transform:scaleX(.55)}[data-phase="2"] .chapter-meter span{transform:scaleX(1)}
.story-caption{position:relative}.story-caption.is-changing{animation:caption-in .5s var(--ease-out)}
.story-caption>p:last-child{color:#626f85}.story-controls{border-color:#d7deeb;background:#e0e6f0}
.story-controls button{color:#556681}.story-controls button[aria-pressed=true]{color:#fff;background:#172b51;box-shadow:0 5px 15px #193d7125}
.story-controls button:active{transform:scale(.97)}.story-skip{color:#596d8b}
.service-grid{perspective:1200px}
.service-card{border-radius:24px;rotate:var(--tilt-axis,1 0 0) var(--tilt-angle,0deg);transition:rotate .65s var(--ease-out),box-shadow .4s,border-color .4s,transform .7s var(--ease-out),opacity .7s}
.service-card:hover,.service-card:focus-within{box-shadow:0 32px 70px -32px #15316c70;border-color:#91adff80}
.service-card::before{background:radial-gradient(340px circle at var(--pointer-x,50%) var(--pointer-y,0%),#ffffff38,transparent 75%)}
.card-number{transition:opacity .6s,translate .6s var(--ease-out);font-variant-numeric:tabular-nums}
.service-card:hover .card-number,.service-card:focus-within .card-number{opacity:.4;translate:0 -5px}
.service-card summary{min-height:64px}
/* Draw the icon around its exact center, independent of font baselines. */
.plus{position:relative;display:block;flex:0 0 34px;width:34px;height:34px;padding:0;font-size:0;line-height:0;letter-spacing:0;transform-origin:50% 50%;transition:transform .45s var(--ease-out),background .3s}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1px;border-radius:1px;background:currentColor;transform:translate(-50%,-50%);pointer-events:none}
.plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.service-card summary:hover .plus{background:#ffffff1a}
.product{border-radius:40px;background:radial-gradient(ellipse at 85% 35%,#142e6055,transparent 55%),#090d15}
.product-copy h2>span{background:linear-gradient(110deg,#c8ddff,#6998ff 70%);background-clip:text}
.product-copy h2>.word{background:none;color:inherit}
.demo{border-radius:24px;box-shadow:0 35px 100px -45px #3266ff66,0 0 0 8px #ffffff02}
.demo-tabs{position:relative}.demo-tabs button{transition:background .4s,box-shadow .4s,color .4s}
.demo-tabs button[aria-selected=true]{background:#385987;box-shadow:0 3px 15px #0003}
.flow-steps>span:nth-child(odd){transition:background .4s,border-color .4s,box-shadow .4s}
.demo[data-tour=planning] .flow-steps>span:first-child,.demo[data-tour=building] .flow-steps>span:nth-child(3),.demo[data-tour=complete] .flow-steps>span:nth-child(5){background:#325997;border-color:#7ba5f0;box-shadow:0 0 22px #3966b540}
.demo[data-tour=scopeGate] .tour-action,.demo[data-tour=launchGate] .tour-action{box-shadow:0 0 0 5px #9bc5ff0d}
.approach-grid{gap:26px}.approach-grid article{position:relative;padding:30px 24px;border-radius:0 0 18px 18px;transition:background .5s,border-color .5s}
.approach-grid article::before{content:"";position:absolute;height:2px;top:-1px;left:0;width:100%;background:#315bff;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out)}
.approach-grid article.is-active{background:#e9eef8;border-color:#b5c8f4}.approach-grid article.is-active::before{transform:scaleX(1)}
.approach-grid article.is-active .step-number{color:#315bff}
.step-number{font-size:clamp(44px,4.5vw,68px);font-weight:450;letter-spacing:-.06em;color:#b0bacb;margin-bottom:40px;transition:color .5s}
.approach-trigger{color:inherit;background:none;border:0;padding:0;text-align:left;font:inherit;letter-spacing:inherit;width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px}
.approach-trigger .plus{color:#6f86b1}
.approach-trigger[aria-expanded=true] .plus{transform:rotate(45deg)}
.approach-grid p{color:#63718a}.approach-grid p:not([hidden]){animation:caption-in .4s var(--ease-out)}
.approach-grid.is-interactive article{min-height:285px}
.closing{background:radial-gradient(ellipse at var(--close-x,80%) 80%,#6593ff75,transparent 60%),#315bff;border-radius:40px 40px 0 0}
.closing h2 span{color:#c5d6ff}.closing-watermark{translate:calc(var(--closing-progress,0)*-35px) 0;color:#ffffff10;transition:translate .5s linear}
.motion-heading .word{display:inline-block;color:inherit;transition:opacity .65s var(--ease-out),translate .8s var(--ease-out);transition-delay:calc(var(--word-index)*65ms)}
.motion-heading:not(.words-visible) .word{opacity:.18;translate:0 15px}
.footer-brand .brand-logo{width:125px}.eyebrow{font-size:12px}
@keyframes letter-enter{from{opacity:0;transform:translateY(55%) rotateX(35deg);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes caption-in{from{opacity:.3;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(min-width:900px) and (min-height:700px){.scroll-story .experience-sticky{top:94px;min-height:calc(100svh - 94px);padding:18px 40px}.scroll-story .experience-heading h2{font-size:40px}.scroll-story .architecture{height:164px}.scroll-story .system-scene{margin-top:18px;padding:17px 26px}.scroll-story .story-caption{min-height:104px;margin-top:18px}.scroll-story .story-caption h3{font-size:23px}.scroll-story .story-skip{margin-top:10px}}
@media(max-width:1100px){.header nav:not(.mobile-nav){gap:0}.header nav:not(.mobile-nav) a{padding:10px}.hero h1{font-size:9vw}.approach-grid{gap:16px}.approach-grid article{padding:25px 15px}.approach-grid h3{font-size:28px}}
@media(max-width:760px){.brand-logo{width:97px}.brand .brand-small{font-size:9px;letter-spacing:2.6px}.header.is-scrolled{width:calc(100% - 24px);top:8px}.hero h1{font-size:clamp(38px,10.2vw,78px)}.hero-content{padding-bottom:0}.hero-shade{background:linear-gradient(180deg,#080b12 0%,#080b12e6 26%,#080b1230 59%,#080b1220 79%,#080b12 100%)}.hero-art{transform:none;transition:none}.experience{border-radius:26px 26px 0 0}.system-scene{border-radius:20px}.scene-bottom{font-size:12px}.connection{background:none;border-color:#5a7db4}.story-controls button{font-size:13px;padding:13px 7px}.system-node strong{font-size:14px}.service-card{border-radius:20px;rotate:none}.product{border-radius:26px}.approach-grid{gap:20px}.approach-grid article{padding:22px 17px;grid-template-columns:45px minmax(0,1fr);column-gap:16px}.approach-grid.is-interactive article{min-height:0}.step-number{font-size:33px;margin-top:0;letter-spacing:-2px}.approach-grid h3{font-size:27px;align-self:center;margin:0}.approach-grid p{margin-top:15px}.closing{border-radius:26px 26px 0 0}.footer-brand .brand-logo{width:110px}.hero-round{box-shadow:0 0 0 6px #ffffff07}}
@media(prefers-reduced-motion:reduce){.hero-art{transform:none!important}.hero-letter{animation:none!important;filter:none!important}.motion-heading .word{opacity:1!important;translate:none!important}.service-card{rotate:none!important}.nav-cta,.hero-round,.button,.closing-watermark{translate:none!important}.header{transition:none}.approach-grid p{animation:none}}

/* Balanced desktop navigation: equal side columns keep the menu on the true page centre. */
@media(min-width:1101px){
  .header{top:16px;width:calc(100% - 96px);max-width:1240px;border-radius:15px}
  .header.is-scrolled{top:10px;width:calc(100% - 120px);max-width:1180px}
  .nav-wrap{height:62px;padding:0 18px;display:grid;grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr);gap:16px}
  .header nav:not(.mobile-nav){justify-self:center;margin:0;gap:4px;font-size:13px}
  .header nav:not(.mobile-nav) a{padding:9px 11px;border-radius:7px}
  .header .brand{justify-self:start}
  .header .brand-logo{width:100px;margin:-3px -4px -2px}
  .header .brand-small{font-size:9px;letter-spacing:2.8px}
  .nav-actions{justify-self:end;margin:0}
  .nav-cta{padding:10px 13px;border-radius:8px;font-size:12px}
  .nav-cta>span{margin-left:11px}
}