@font-face{font-family:PPNeue;src:url("./assets/fonts/ppneue-book.otf")}@font-face{font-family:PPNeue;src:url("./assets/fonts/ppneue-medium.otf");font-weight:600}
:root{--ink:#171717;--muted:#696969;--line:#e8e8e8;--stage:#f8f8f8;--accent:#17c5cf}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:18px;line-height:27px;-webkit-font-smoothing:antialiased}img,video{display:block;max-width:100%}a{color:inherit;text-decoration:none}
.project-header{height:92px}.floating-nav{position:fixed;top:0;left:50%;z-index:50;width:fit-content;height:fit-content;padding:4.5rem 2rem 2rem;transform:translateX(-50%);transition:padding .3s cubic-bezier(.2,.9,.2,1)}.floating-nav.is-stuck{padding-top:1.5rem}.nav-pill{display:flex;align-items:center;gap:6px;min-height:44px;overflow:hidden;padding:8px 24px;border-radius:999px;background:#f8f8f8;font-size:16px;line-height:24px;transition:gap .72s cubic-bezier(.2,.9,.2,1)}.roll-link{position:relative;display:block;height:28px;overflow:hidden;white-space:nowrap}.roll-track{display:grid;transition:transform .7s cubic-bezier(.2,.9,.2,1)}.roll-track>span{display:flex;height:28px;align-items:center}.nav-link-content{gap:6px;justify-content:center}.home-icon{width:16px;height:16px;flex:0 0 16px;margin-right:4px;transition:transform .7s cubic-bezier(.2,.9,.2,1)}.nav-chevron{width:24px;height:24px;flex:0 0 24px;transition:transform .7s cubic-bezier(.2,.9,.2,1) .12s}.nav-current{max-width:12rem;color:rgba(23,23,23,.6);opacity:1;transform:translateX(0) scale(1);transform-origin:left center;transition:color .45s cubic-bezier(.2,.9,.2,1),max-width .72s cubic-bezier(.2,.9,.2,1),opacity .42s ease,transform .72s cubic-bezier(.2,.9,.2,1),margin .72s cubic-bezier(.2,.9,.2,1)}.roll-link:hover .roll-track{transform:translateY(-28px)}.nav-home:hover .home-icon{transform:scale(1.14)}.nav-home:hover .nav-chevron{transform:scale(.82)}.nav-current:hover{color:#171717}.is-leaving main{opacity:0;transform:translateY(14px);filter:blur(3px);transition-delay:.26s}.is-leaving .nav-pill{gap:0}.is-leaving .nav-home .roll-track{transform:translateY(-28px)}.is-leaving .nav-current{max-width:0;margin-left:-6px;opacity:0;transform:translateX(-10px) scale(.78)}main{opacity:1;transform:translateY(0);filter:blur(0);transition:opacity .42s ease,transform .52s cubic-bezier(.2,.9,.2,1),filter .42s ease}
.section-nav{position:fixed;z-index:10;left:48px;top:144px;width:168px;display:flex;flex-direction:column;gap:0;font-size:16px;line-height:28.8px;color:#aaa;opacity:0;filter:blur(5px);transform:translateY(5px);pointer-events:none;transition:opacity .82s cubic-bezier(.16,1,.3,1),filter .82s cubic-bezier(.16,1,.3,1),transform .82s cubic-bezier(.16,1,.3,1)}.section-nav::before{content:"";position:fixed;z-index:-1;inset:0 auto 0 0;width:236px;background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.9) 64%,rgba(255,255,255,0) 100%);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 68%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 68%,transparent 100%);opacity:0;transition:opacity .82s cubic-bezier(.16,1,.3,1)}.section-nav.is-visible{opacity:1;filter:blur(0);transform:none;pointer-events:auto}.section-nav.is-visible::before{opacity:1}.section-nav a{height:28.8px;opacity:0;filter:blur(2.5px);transform:translateY(12px);transition:opacity .72s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1),filter .72s cubic-bezier(.16,1,.3,1),color .25s ease}.section-nav.is-visible a{opacity:1;filter:blur(0);transform:none}.section-nav.is-visible a:nth-child(1){transition-delay:.01s}.section-nav.is-visible a:nth-child(2){transition-delay:.055s}.section-nav.is-visible a:nth-child(3){transition-delay:.1s}.section-nav.is-visible a:nth-child(4){transition-delay:.145s}.section-nav.is-visible a:nth-child(5){transition-delay:.19s}.section-nav.is-visible a:nth-child(6){transition-delay:.235s}.section-nav.is-visible a:nth-child(7){transition-delay:.28s}.section-nav a:hover,.section-nav a.active{color:#171717}.section-nav a:not(.active){color:#a7a7a7}
.content{width:min(929px,calc(100% - 64px));margin:0 auto}.intro{display:grid;grid-template-columns:557px 279px;gap:93px;padding:148px 0 75px}.brand-logo{width:64px;height:64px;margin-bottom:64px}.intro h1{font-size:20.8px;line-height:29.12px;margin:0 0 24px;font-weight:500}.intro-main p{max-width:557px;margin:0 0 24px;color:#272727;font-size:18px;line-height:27px}.team h2{font-size:20.8px;line-height:29.12px;font-weight:500;margin:128px 0 16px}.team p{font-size:18px;line-height:27px;margin:0}.team .year{margin-top:52px}
.media-stage{margin:0;background:var(--stage);border-radius:8px;overflow:hidden;display:grid;place-items:center}.media-stage img,.media-stage video{width:100%;height:100%;object-fit:contain}.hero-media>.media-stage{height:472px}.hero-media>.media-stage video{padding:42px}.showcase-grid{display:grid;grid-template-columns:307px 614px;gap:8px;margin-top:8px}.showcase-grid .media-stage{height:492px;padding:0}.showcase-grid img{object-fit:cover}.case-section{padding-top:80px}.section-copy{max-width:700px;margin-bottom:36px}.eyebrow{display:block;color:#6f6f6f;font-size:16px;line-height:22.4px;margin-bottom:8px}.section-copy h2,.reflection>h2{font-size:20.8px;line-height:29.12px;margin:0 0 16px;font-weight:500}.section-copy p{color:#333;max-width:700px;font-size:18px;line-height:27px;margin:0 0 12px}.section-copy h4{font-size:16px;line-height:22.4px;font-weight:400;margin:28px 0 10px}.section-copy ol{padding-left:22px;color:#333;margin:0;font-size:18px;line-height:27px}.section-copy li{padding:3px 0}.large{height:560px}.two-up{display:grid;grid-template-columns:461px 461px;gap:8px;margin-top:112px}.two-up article>h3{font-size:20.8px;line-height:29.12px;font-weight:500;min-height:0;margin:0 0 16px}.two-up article>p{color:#333;font-size:18px;line-height:27px;min-height:54px;margin:0 0 32px}.two-up .media-stage{height:480px}.video-stage{height:480px;min-height:0}.caption{text-align:center;font-size:16px;line-height:22.4px;color:#8a8a8a;margin:14px 0 100px}.chapter-break{display:flex;align-items:center;gap:16px;padding-top:100px;color:#858585;font-size:16px;line-height:22.4px}.chapter-break span{height:1px;background:var(--line);flex:1}.audience{display:flex;gap:24px;align-items:center;background:#fafafa;border-radius:8px;padding:30px 34px;margin:20px 0 100px}.audience img{width:72px;height:72px}.audience figcaption{font-size:16px;line-height:23px;color:#555}.audience b{color:#222;font-weight:500}.ideation-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ideation-grid img{background:#f8f8f8;border-radius:8px}.callout{display:flex;gap:24px;align-items:center;background:#fafafa;border-radius:8px;padding:30px 34px;margin:16px 0 100px}.callout>span{font-size:32px;color:#f2a52b}.callout h3{font-size:18px;line-height:27px;font-weight:500;margin:0 0 7px}.callout p{font-size:16px;line-height:23px;color:#555;margin:0}
.method-motion-stage{aspect-ratio:3/2;background:transparent}
.research-motion-stage{position:relative;aspect-ratio:3907/2301;background:#f7f8f8}
.two-up .challenge-motion-stage{position:relative;height:auto;aspect-ratio:2760/2569.728;background:var(--stage)}
.method-motion-stage iframe,.research-motion-stage iframe,.challenge-motion-stage iframe,.building-flow-motion-stage iframe{display:block;width:100%;height:100%;border:0}
.challenge-motion-stage iframe{transform:translateY(8.62%) scale(1.44);transform-origin:center}
.reflection{padding:110px 0 120px}.learning{display:grid;grid-template-columns:24px 1fr;gap:10px;max-width:700px}.learning p{margin:0 0 25px;color:#333;font-size:18px;line-height:27px}.contact{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0;display:flex;justify-content:space-between;align-items:center;margin:55px 0 75px;font-size:16px;line-height:23px}.contact p{margin:0;color:#555}.contact a{background:#151515;color:#fff;border-radius:999px;padding:11px 18px}.next-project{display:block;position:relative}.next-project>span{display:block;color:#777;font-size:16px;line-height:22.4px;margin-bottom:10px}.next-project img{width:100%;border-radius:8px}.next-project div{position:absolute;left:32px;bottom:24px;color:#fff}.next-project h2{margin:0;font-size:22px;line-height:29px}.next-project p{margin:4px 0;font-size:16px;line-height:22px}.to-top{position:fixed;right:28px;bottom:25px;width:44px;height:44px;border:0;border-radius:50%;background:#151515;color:#fff;font-size:18px;cursor:pointer;opacity:0;transform:translateY(10px);transition:.2s}.to-top.visible{opacity:1;transform:none}
@media(max-width:1360px) and (min-width:701px){.content{width:60vw;max-width:929px}.intro{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:10%}.showcase-grid{grid-template-columns:1fr 2fr}.two-up{grid-template-columns:1fr 1fr}.section-nav{display:flex}}@media(max-width:1000px){.section-nav{display:none}.content{width:min(760px,calc(100% - 48px))}}@media(max-width:700px){body{font-size:16px;line-height:24px}.project-header{height:72px}.floating-nav,.floating-nav.is-stuck{padding:16px 1rem 1rem}.nav-pill{max-width:calc(100vw - 2rem);padding:8px 12px;font-size:13px;line-height:20px}.roll-link,.roll-track>span{height:24px}.roll-link:hover .roll-track,.is-leaving .nav-home .roll-track{transform:translateY(-24px)}.nav-current{overflow:hidden;text-overflow:ellipsis}.content{width:calc(100% - 32px)}.intro{grid-template-columns:1fr;gap:0;padding:70px 0 54px}.brand-logo{width:56px;height:56px;margin-bottom:48px}.intro h1,.section-copy h2,.reflection>h2,.two-up article>h3{font-size:20px;line-height:28px}.intro-main p,.section-copy p,.section-copy ol,.learning p{font-size:16px;line-height:24px}.team h2{margin-top:36px;font-size:18px;line-height:26px}.team p{font-size:16px;line-height:24px}.team .year{margin-top:28px}.hero-media>.media-stage{height:270px}.hero-media>.media-stage video{padding:20px}.showcase-grid{grid-template-columns:1fr}.showcase-grid .media-stage{height:260px}.two-up{grid-template-columns:1fr;gap:64px;margin-top:76px}.two-up article>p,.two-up article>h3{min-height:0}.two-up .media-stage{height:auto}.large,.video-stage{height:auto;min-height:250px}.ideation-grid{grid-template-columns:1fr}.case-section{padding-top:78px}.eyebrow,.caption,.chapter-break,.next-project>span{font-size:14px;line-height:20px}.caption{margin-bottom:70px}.contact{align-items:flex-start;gap:18px;font-size:14px}.next-project div{left:20px;bottom:14px}.next-project p{font-size:13px}}
@media(max-width:1440px) and (min-width:1024px){.section-nav{left:clamp(28px,3.333vw,48px);width:clamp(120px,10.75vw,155px);font-size:clamp(13px,1.111vw,16px);line-height:1.65}.section-nav::before{width:clamp(176px,16.389vw,236px)}.section-nav a{height:1.65em}}
@media(max-width:1023px){.section-nav{display:none}}
@media(min-width:1441px){.section-nav{left:max(48px,calc(50% - 728.5px))}.section-nav::before{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}.section-nav{filter:none}.section-nav a{filter:none;transform:none}}
@media(max-width:700px){.floating-nav{padding:72px 1rem 1rem}.floating-nav.is-stuck{padding-top:24px}.nav-pill{padding:8px 24px;font-size:12.8px;line-height:19.2px}.nav-home{width:124px}.nav-link-content{width:100%}.roll-link,.roll-track>span{height:28px}.roll-link:hover .roll-track,.is-leaving .nav-home .roll-track{transform:translateY(-28px)}}
.nav-current{pointer-events:none}.nav-current .roll-track{transform:none!important}

/* Requested media framing */
.media-zoom-150 video{transform:scale(1.5);transform-origin:center}
.media-zoom-120 video{transform:scale(1.2);transform-origin:center}
.media-zoom-173 video{transform:scale(1.725);transform-origin:center}
.media-zoom-135 video{transform:scale(1.35);transform-origin:center}
.mission-stage{padding:48px;place-items:center}
.mission-stage img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain!important;object-position:50% 50%!important;transform:none}
.media-position-up{place-items:center}
.media-position-up img,.media-position-up video{width:100%;height:100%;object-fit:contain;object-position:50% 50%;transform:translateY(-10%)}
.media-image-zoom-125 img{transform:scale(1.25);transform-origin:center}

/* Painted landscape framing for the product demo videos. */
.agent-building-stage,
.orchestrate-stage{
  position:relative;
  isolation:isolate;
  height:auto;
  aspect-ratio:1.82/1;
  background:#d9c9e4;
}
.orchestrate-stage{background:#d9b979}
.agent-building-stage .agent-building-backdrop,
.orchestrate-stage .orchestrate-backdrop{
  width:100%;
  height:100%;
  grid-area:1/1;
  object-fit:cover;
  object-position:center;
}
.agent-building-stage video,
.orchestrate-stage video{
  z-index:1;
  width:80%;
  height:auto;
  max-height:none;
  grid-area:1/1;
  border:0;
  border-radius:7px;
  background:transparent;
  box-shadow:0 18px 46px rgba(63,38,83,.22),0 2px 8px rgba(48,31,62,.12);
}
.orchestrate-stage video{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.painted-video-controls{
  position:absolute;
  top:16px;
  right:16px;
  z-index:3;
  display:flex;
  gap:8px;
  opacity:0;
  pointer-events:none;
  transform:translateY(-6px) scale(.85);
  transform-origin:top right;
  transition:opacity 220ms ease,transform 300ms cubic-bezier(.2,.9,.2,1);
}
[data-video-controls]:hover .painted-video-controls,
[data-video-controls]:focus-within .painted-video-controls,
[data-motion-controls]:hover .painted-video-controls,
[data-motion-controls]:focus-within .painted-video-controls{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(.85);
}
.painted-video-controls .preview-window__control{
  position:static;
  display:flex;
  width:36px;
  height:36px;
  padding:0;
  border:0;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(26,28,30,.72);
  color:#fff;
  font:inherit;
  font-size:25px;
  font-weight:300;
  line-height:1;
  cursor:pointer;
  transition:background-color 220ms ease,color 220ms ease,transform 300ms cubic-bezier(.2,.9,.2,1);
}
.painted-video-controls .preview-window__speed{
  font-size:11px;
  font-weight:500;
  letter-spacing:-.02em;
}
.painted-video-controls .preview-window__speed[aria-pressed="true"]{
  background:rgba(39,156,162,.94);
  box-shadow:inset 0 0 0 1px rgba(111,228,232,.92);
}
.painted-video-controls .preview-window__restart{font-size:19px}
.painted-video-controls .preview-window__pause-icon{
  position:relative;
  display:block;
  width:12px;
  height:14px;
}
.painted-video-controls .preview-window__pause-icon::before,
.painted-video-controls .preview-window__pause-icon::after{
  position:absolute;
  top:1px;
  bottom:1px;
  width:3px;
  border-radius:1px;
  background:currentColor;
  content:"";
}
.painted-video-controls .preview-window__pause-icon::before{left:1px}
.painted-video-controls .preview-window__pause-icon::after{right:1px}
.painted-video-controls .preview-window__pause.is-paused .preview-window__pause-icon::before{
  top:1px;
  bottom:auto;
  left:2px;
  width:0;
  height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:9px solid currentColor;
  border-radius:0;
  background:transparent;
}
.painted-video-controls .preview-window__pause.is-paused .preview-window__pause-icon::after{display:none}
.painted-video-controls .preview-window__control:hover{background:rgba(26,28,30,.88);transform:scale(1.04)}
.painted-video-controls .preview-window__speed[aria-pressed="true"],
.painted-video-controls .preview-window__speed[aria-pressed="true"]:hover{
  background:rgba(39,156,162,.94);
  box-shadow:inset 0 0 0 1px rgba(111,228,232,.92);
}
.painted-video-controls .preview-window__control:focus-visible{outline:2px solid #6fe4e8;outline-offset:2px}

/* Keep every research chapter on the same vertical rhythm. */
.research-block+.research-block{margin-top:100px}
.research-block[hidden]+.research-block{margin-top:0}
.research-block .caption{margin-bottom:20px}
.research-block .audience{margin-bottom:0}

/* RevisionDojo-style horizontal ideation carousel */
.ideation-carousel{display:flex;flex-direction:column;gap:12px;width:100%;overflow:hidden}
.ideation-track{display:flex;width:100%;gap:16px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;touch-action:pan-y}
.ideation-track.is-dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;user-select:none}
.ideation-track::-webkit-scrollbar{display:none}
.ideation-slide{height:480px;flex:0 0 80%;margin:0;overflow:hidden;border-radius:8px;background:var(--stage);scroll-snap-align:center;scroll-snap-stop:always}
.ideation-slide img{width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
.carousel-progress{position:relative;display:flex;align-items:center;align-self:center;gap:10px;height:12px}
.carousel-progress button{width:16px;height:4px;flex:0 0 16px;padding:0;border:0;border-radius:999px;background:#d9d9d9;cursor:pointer;transition:opacity .3s ease}
.carousel-progress button:hover{opacity:.7}
.carousel-indicator{position:absolute;top:50%;left:0;width:16px;height:4px;border-radius:999px;background:var(--ink);transform:translateY(-50%);transition:left .3s ease;pointer-events:none}
.callout-animation{width:72px;height:72px;flex:0 0 72px}
.callout-animation>span{display:grid;width:100%;height:100%;place-items:center;color:#f2a52b;font-size:32px}
.callout-animation svg{width:100%!important;height:100%!important}

/* About CTA component, reused for the case-study close. */
.project-cta{width:100%;margin:55px 0 75px}
.cta-card{display:flex;width:100%;min-height:104px;align-items:center;gap:4px;padding:24px 24px 24px 12px;border-radius:12px;background:var(--stage)}
.cta-logo{width:89px;height:56px;flex:0 0 89px;overflow:visible}
.cta-logo svg,.cta-logo img{width:100%;height:100%;overflow:visible;transform:scale(1.966)!important;transform-origin:center}
.cta-copy{display:flex;min-width:0;flex:1;flex-direction:column;align-items:flex-start}
.cta-copy p{margin:0;font-size:16px;line-height:24px}
.cta-copy p+p{color:#928c88}
.hello-button{display:flex;height:40px;flex:0 0 auto;align-items:center;justify-content:center;gap:12px;overflow:hidden;padding:8px 16px;border:0;border-radius:999px;background:var(--ink);color:#fff;cursor:pointer;font:inherit;font-size:16px;line-height:24px;transition:opacity .3s ease}
.hello-button:hover{opacity:.9}
.button-label{position:relative;display:block;width:78px;height:24px;margin:0 2px;overflow:hidden;transition:width .42s cubic-bezier(.34,1.3,.64,1)}
.button-label span{position:absolute;top:0;left:0;display:block;width:max-content;height:24px;white-space:nowrap;transition:transform .42s cubic-bezier(.2,.9,.2,1),opacity .3s ease,filter .3s ease}
.button-label span:nth-child(2){transform:translateY(24px)}
.hello-button.is-copied .button-label{width:100px}
.hello-button.is-copied .button-label span:first-child{transform:translateY(-24px)}
.hello-button.is-copied .button-label span:nth-child(2){transform:translateY(0)}
.email-icon{width:18px;height:18px;flex:0 0 18px}

/* AgentX next-project card */
.next-label{margin:0 0 10px;color:#777;font-size:16px;line-height:22.4px}
/* Reference-site type steps: 16px at tablet, 18px at desktop. */
@media(max-width:1023px) and (min-width:768px){
  body{font-size:16px;line-height:24px}
  .content{width:min(760px,calc(100% - 48px))}
  .intro h1,.section-copy h2,.reflection>h2,.two-up article>h3{font-size:19.2px;line-height:26.88px}
  .intro-main p,.team p,.section-copy p,.section-copy ol,.learning p{font-size:16px;line-height:24px}
  .team h2{font-size:19.2px;line-height:26.88px}
  .eyebrow{font-size:12.8px;line-height:17.92px}
}

@media(max-width:767px){
  body{font-size:16px;line-height:24px}
  .project-header{height:72px}
  .floating-nav,.floating-nav.is-stuck{padding:72px 1rem 1rem}
  .floating-nav.is-stuck{padding-top:24px}
  .nav-pill{max-width:calc(100vw - 2rem);padding:8px 24px;font-size:12.8px;line-height:19.2px}
  .nav-home{width:124px}
  .nav-link-content{width:100%}
  .roll-link,.roll-track>span{height:28px}
  .roll-link:hover .roll-track,.is-leaving .nav-home .roll-track{transform:translateY(-28px)}
  .nav-current{overflow:hidden;text-overflow:ellipsis}
  .content{width:calc(100% - 40px)}
  .intro{grid-template-columns:1fr;gap:0;padding:142px 0 54px}
  .brand-logo{width:56px;height:56px;margin-bottom:48px}
  .intro h1,.section-copy h2,.reflection>h2,.two-up article>h3{font-size:17.6px;line-height:26.4px}
  .intro-main p,.section-copy p,.section-copy ol,.learning p{font-size:14.4px;line-height:21.6px}
  .team h2{margin-top:36px;font-size:17.6px;line-height:26.4px}
  .team p{font-size:14.4px;line-height:21.6px}
  .team .year{margin-top:28px}
  .hero-media>.media-stage{height:270px}
  .hero-media>.media-stage video{padding:20px}
  .showcase-grid{grid-template-columns:1fr}
  .showcase-grid .media-stage{height:260px}
  .two-up{grid-template-columns:1fr;gap:64px;margin-top:76px}
  .two-up article>p,.two-up article>h3{min-height:0}
  .two-up .media-stage{height:auto}
  .large,.video-stage{height:auto;min-height:250px}
  .case-section{padding-top:78px}
  .eyebrow,.caption,.chapter-break,.next-label{font-size:12px;line-height:16.8px}
  .caption{margin-bottom:70px}
  .mission-stage{height:300px;padding:20px}
  .ideation-slide{height:352px}
  .research-block+.research-block{margin-top:76px}
  .callout{gap:16px;padding:24px 20px}
  .callout-animation{width:56px;height:56px;flex-basis:56px}
  .callout h3,.callout p,.cta-copy p{font-size:14.4px;line-height:21.6px}
  .hello-button{font-size:14.4px;line-height:21.6px}
  .project-cta{margin:55px 0 70px}
  .cta-card{flex-direction:column;gap:16px;padding:24px 24px 24px 12px;text-align:center}
  .cta-copy{align-items:center}
  .cta-logo{flex-basis:56px}
  .agent-building-stage,
  .orchestrate-stage{height:auto;min-height:0;aspect-ratio:1.72/1}
  .agent-building-stage video,
  .orchestrate-stage video{width:88%;height:auto;max-height:none;border-radius:5px}
  .painted-video-controls{top:12px;right:12px;gap:8px}
}

@media(hover:none){.painted-video-controls{opacity:1;pointer-events:auto;transform:scale(.85)}}

.placeholder-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:24px}
.placeholder{height:220px;border:1px dashed #cfcfcf;background:#fafafa;color:#9a9a9a}
.placeholder figcaption{font-size:16px;line-height:22px}
@media(max-width:767px){.placeholder-grid{grid-template-columns:1fr}.placeholder{height:180px}}
.placeholder-wide{height:480px;margin:0}

/* Solution 03 — square feature video flows. */
.solution-feature-flows{margin-bottom:100px}
.solution-flows-label{margin:0 0 28px}
.solution-flow-list{display:flex;flex-direction:column;gap:56px}
.solution-flow-item[hidden]{display:none!important}
.solution-flow-item{display:grid;grid-template-columns:minmax(0,7fr) minmax(220px,3fr);align-items:center;gap:clamp(24px,4vw,56px)}
.solution-flow-video-placeholder{position:relative;display:grid;width:100%;aspect-ratio:16/10;margin:0;place-items:center;overflow:hidden;border:0;border-radius:8px;background:var(--stage);color:#fff}
.solution-flow-item:nth-child(1) .solution-flow-video-placeholder,.solution-flow-item:nth-child(2) .solution-flow-video-placeholder{--video-frame-inset-x:clamp(14px,1.6vw,24px);--video-frame-inset-y:clamp(18px,2vw,30px);aspect-ratio:auto;padding:var(--video-frame-inset-y) var(--video-frame-inset-x);background-position:center;background-size:cover}
.solution-flow-item:nth-child(1) .solution-flow-video-placeholder{background-image:linear-gradient(rgb(255 255 255 / 8%),rgb(255 255 255 / 8%)),url("./assets/project-02/feature-placeholders/feature-neutral-warm-waterfall-v6.png")}
.solution-flow-item:nth-child(2) .solution-flow-video-placeholder{background-image:linear-gradient(rgb(255 255 255 / 8%),rgb(255 255 255 / 8%)),url("./assets/project-02/feature-placeholders/feature-soft-mountain-v5.png")}
.solution-flow-video-placeholder img{width:100%;height:100%;object-fit:cover}
.solution-flow-video-placeholder video{display:block;width:100%;height:100%;object-fit:contain;border-radius:5px;background:transparent;box-shadow:0 8px 28px rgb(31 24 35 / 18%)}
.solution-flow-item:nth-child(1) .solution-flow-video-placeholder video,.solution-flow-item:nth-child(2) .solution-flow-video-placeholder video{position:relative;inset:auto;width:100%;height:auto;max-width:100%;object-position:50% 50%}
.solution-flow-video-placeholder figcaption{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);padding:8px 14px;border:1px solid rgb(255 255 255 / 45%);border-radius:999px;background:rgb(22 18 28 / 48%);box-shadow:0 4px 18px rgb(0 0 0 / 12%);color:#fff;font-size:14px;line-height:20px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.solution-flow-copy>span{display:block;margin-bottom:10px;color:#767676;font-size:13px;line-height:19px;text-transform:uppercase}
.solution-flow-copy h3{margin:0 0 12px;font-size:20.8px;line-height:29.12px;font-weight:500}
.solution-flow-copy p{margin:0;color:var(--muted);font-size:18px;line-height:27px}
.solution-flow-caption{margin:12px 0 0;color:#8a8a8a;font-size:16px;line-height:22.4px;text-align:center}
.interaction-design-waterfall{--video-frame-inset-x:clamp(14px,1.6vw,24px);--video-frame-inset-y:clamp(18px,2vw,30px);position:relative;display:grid;grid-template-columns:minmax(0,48fr) minmax(0,52fr);grid-template-rows:minmax(0,65fr) minmax(0,35fr);gap:clamp(8px,1vw,12px);width:100%;aspect-ratio:16/10;padding:var(--video-frame-inset-y) var(--video-frame-inset-x);overflow:hidden;background-image:linear-gradient(rgb(255 255 255 / 5%),rgb(255 255 255 / 5%)),url("./assets/project-02/feature-placeholders/feature-wildflower-slope-v3.png");background-position:center;background-size:cover}
.interaction-waterfall-item{position:relative;display:flex;width:100%;height:100%;min-width:0;min-height:0;align-items:center;justify-content:center;overflow:hidden;border-radius:5px;background:#fff;box-shadow:0 8px 28px rgb(31 24 35 / 16%)}
.interaction-waterfall-item--chat{grid-column:2;grid-row:1}
.interaction-waterfall-item--reasoning{grid-column:1;grid-row:1/3}
.interaction-waterfall-item--thinking{grid-column:2;grid-row:2}
.interaction-waterfall-item video{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center;background:#fff;box-shadow:none}
.interaction-waterfall-item--thinking video{object-fit:cover}
.interaction-waterfall-item .painted-video-controls{top:6px;right:6px;transform:scale(.52);transform-origin:top right}
.interaction-waterfall-item:hover .painted-video-controls,.interaction-waterfall-item:focus-within .painted-video-controls{transform:scale(.52) translateY(0)}
.interaction-design-copy p+p{margin-top:12px}
.interaction-design-copy b{color:var(--text);font-weight:500}
.agentx-intro-logo{object-fit:contain}
.challenge-feature>h3{max-width:700px;font-size:20.8px;line-height:29.12px;font-weight:500;margin:0 0 16px}
.challenge-feature>p:not(.caption){max-width:700px;color:#333;font-size:18px;line-height:27px;margin:0 0 36px}
.building-flow-motion-stage{width:100%;aspect-ratio:16/9;background:#ececec}
.two-up .challenge-method-motion-stage{position:relative;height:auto;aspect-ratio:2760/2569.728;background:var(--stage);place-items:center}
.challenge-method-motion-stage iframe{width:86%;height:auto;aspect-ratio:3/2;transform:scale(1.625);transform-origin:center}
.challenge-grid{margin-top:100px}
.challenge-grid article>p{min-height:270px}
.challenge-standalone{margin-top:100px}
@media(max-width:767px){
  .placeholder-wide{height:300px}
  .solution-feature-flows{margin-bottom:70px}
  .solution-flows-label{margin-bottom:20px}
  .solution-flow-list{gap:48px}
  .solution-flow-item{grid-template-columns:1fr;gap:20px}
  .solution-flow-copy>span{margin-bottom:7px;font-size:11px;line-height:16px}
  .solution-flow-copy h3{margin-bottom:8px;font-size:20px;line-height:28px}
  .solution-flow-copy p{font-size:16px;line-height:24px}
  .interaction-design-copy b{display:block;margin-bottom:4px;font-size:20px;line-height:28px}
  .interaction-design-waterfall{aspect-ratio:4/3;padding:var(--video-frame-inset-y) var(--video-frame-inset-x)}
  .challenge-feature>h3{font-size:17.6px;line-height:26.4px}
  .challenge-feature>p:not(.caption){font-size:14.4px;line-height:21.6px}
  .challenge-grid{margin-top:76px}
  .challenge-grid article>p{min-height:0}
  .challenge-standalone{margin-top:76px}
}

/* Project 02 showcase framing */
.hero-media>.showcase-primary{
  height:clamp(340px,42.5vw,466px);
}
.hero-media>.showcase-primary img,
.showcase-grid .media-stage img,
.showcase-grid .media-stage video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.showcase-grid .media-stage{
  height:clamp(289px,34vw,418px);
}
.showcase-grid-single{
  grid-template-columns:1fr;
}
.showcase-grid-single .media-stage{
  height:auto;
  aspect-ratio:16/9;
}
.showcase-grid-single .media-stage video{
  width:100%;
  height:auto;
  object-fit:contain;
}
.launch-media{
  height:auto;
  min-height:0;
  align-self:center;
  padding:clamp(16px,2vw,24px);
  border-radius:8px;
  background:var(--stage);
}
.launch-visual{min-width:0}
.launch-caption{margin-bottom:0}
.launch-media img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
}
.launch-layout{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(240px,.75fr);
  gap:clamp(32px,6vw,72px);
  align-items:center;
}
.launch-copy{
  max-width:320px;
  margin:0;
}
.launch-copy p{
  font-size:16px;
  line-height:24px;
}
@media(max-width:767px){
  .launch-layout{grid-template-columns:1fr;gap:28px}
  .launch-copy{max-width:none;margin:0}
  .launch-copy p{font-size:14.4px;line-height:21.6px}
  .launch-media{position:static;height:auto;background:var(--stage)}
  .launch-media img{position:static;width:100%;height:auto}
}
@media(max-width:767px){
  .hero-media>.showcase-primary{height:238px}
  .showcase-grid .media-stage:first-child{height:min(93.5vw,357px)}
  .showcase-grid .media-stage:last-child{height:221px}
  .showcase-grid.showcase-grid-single .media-stage:last-child{height:auto;aspect-ratio:16/9}
}

/* Editorial project opening */
.case-intro{
  display:block;
  padding:132px 0 0;
}
.intro-heading{margin:0 0 48px}
.intro-title-row{
  display:flex;
  align-items:center;
  gap:20px;
}
.intro-title-logo{
  width:53.76px;
  height:53.76px;
  flex:0 0 53.76px;
  margin-top:0;
  border-radius:12px;
}
.intro-kicker{
  margin:0 0 16px;
  color:#8a949e;
  font-family:inherit;
  font-size:14px;
  line-height:20px;
  letter-spacing:.015em;
  text-transform:uppercase;
}
.case-intro .intro-title{
  max-width:900px;
  margin:0;
  color:#33404d;
  font-family:inherit;
  font-size:clamp(34px,3.35vw,44px);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.03em;
}
.intro-hero{
  width:100%;
  aspect-ratio:5861/3452;
  border-radius:0;
  background:#eef1f3;
}
.intro-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.intro-hero-gradient{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  aspect-ratio:16/9;
  background-color:#e2b8c7;
  background-image:url("./assets/project-02/gradient-halo-first-frame.jpg");
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}
.intro-hero-gradient-video{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.intro-hero-gradient .intro-hero-gradient-logo{
  position:relative;
  z-index:1;
  width:clamp(190px,29%,270px);
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 2px 12px rgb(59 32 49 / 10%));
}
.intro-facts{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  gap:32px;
  margin:34px 0 104px;
}
.intro-facts div{min-width:0}
.intro-facts dt,
.intro-overview-label{
  margin:0 0 12px;
  color:#8a949e;
  font-family:inherit;
  font-size:13px;
  font-weight:400;
  line-height:19px;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.intro-facts dd{
  margin:0;
  color:#7a858f;
  font-size:16px;
  line-height:24px;
}
.intro-overview{margin:0}
.intro-overview .intro-overview-label{margin-bottom:24px}
.intro-overview h2{
  max-width:700px;
  margin:0 0 28px;
  color:var(--ink);
  font-family:inherit;
  font-size:20.8px;
  font-weight:500;
  line-height:29.12px;
  letter-spacing:normal;
}
.intro-overview-copy{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
}
.intro-overview-copy p{
  margin:0;
  color:#7a858f;
  font-size:16px;
  line-height:24px;
}
.intro-secondary-media{margin-top:36px}
.intro-secondary-stage{
  position:relative;
  isolation:isolate;
  width:100%;
  aspect-ratio:16/9;
  background:var(--stage);
}
.intro-secondary-stage video{
  width:100%;
  height:100%;
  object-fit:contain;
}
.intro-secondary-stage img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.intro-secondary-image{aspect-ratio:5861/3452}
.closing-showcase-section{padding-top:80px}
.closing-showcase-stage{margin:0}

@media(max-width:1023px){
  .case-intro{padding-top:124px}
  .case-intro .intro-title{font-size:clamp(32px,5vw,40px)}
  .intro-facts{gap:24px;margin-bottom:81px}
  .intro-overview h2{font-size:19.2px;line-height:26.88px}
}

@media(max-width:767px){
  .case-intro{display:block;padding:136px 0 0}
  .intro-heading{margin-bottom:32px}
  .intro-title-row{gap:14px}
  .intro-title-logo{width:42.24px;height:42.24px;flex-basis:42.24px;margin-top:0;border-radius:10px}
  .intro-kicker{margin-bottom:12px;font-size:11px;line-height:16px;white-space:normal}
  .case-intro .intro-title{font-size:32px;line-height:1.12}
  .intro-hero{aspect-ratio:1.35}
  .intro-hero-gradient{aspect-ratio:16/9}
  .intro-hero-gradient .intro-hero-gradient-logo{width:min(46%,220px)}
  .intro-facts{grid-template-columns:1fr 1fr;gap:28px 20px;margin:28px 0 67px}
  .intro-facts dt,.intro-overview-label{font-size:11px;line-height:16px}
  .intro-facts dd{font-size:14px;line-height:21px}
  .intro-overview .intro-overview-label{margin-bottom:16px}
  .intro-overview h2{margin-bottom:24px;font-size:20px;line-height:28px}
  .intro-overview-copy{grid-template-columns:1fr;gap:20px}
  .intro-overview-copy p{font-size:14.4px;line-height:21.6px}
  .intro-secondary-media{margin-top:36px}
}

/* Shared project-page body copy hierarchy */
.intro-main p,
.team p,
.section-copy p,
.section-copy ol,
.two-up article>p,
.challenge-feature>p:not(.caption),
.learning p,
.callout p,
.audience figcaption,
.contact p,
.intro-facts dd,
.intro-overview-copy p{
  color:var(--muted);
}

/* Keep the editorial opening on the same type system as Solution copy. */
.intro-overview-copy p,
.launch-copy p{
  font-family:inherit;
  font-size:18px;
  font-style:normal;
  font-weight:400;
  line-height:27px;
}
.intro-facts dd{
  color:var(--ink);
  font-family:inherit;
  font-size:16px;
  font-style:normal;
  font-weight:400;
  line-height:24px;
}
.eyebrow{
  color:#767676;
  font-family:inherit;
  font-size:13px;
  font-style:normal;
  font-weight:400;
  line-height:19px;
  letter-spacing:0;
  text-transform:uppercase;
}
.intro-facts dt,
.intro-overview-label{
  color:#767676;
  font-family:inherit;
  font-size:13px;
  font-style:normal;
  font-weight:400;
  line-height:19px;
  letter-spacing:0;
  text-transform:uppercase;
}
.intro-facts dt{margin-bottom:8px}
.chapter-break{
  color:#767676;
  font-family:inherit;
  font-size:13px;
  font-style:normal;
  font-weight:400;
  line-height:19px;
  letter-spacing:0;
  text-transform:uppercase;
}
.challenge-method-motion-stage{
  background:var(--stage)!important;
}

@media(max-width:767px){
  .intro-overview-copy p,
  .launch-copy p{
    font-size:16px;
    line-height:24px;
  }
  .eyebrow{
    font-size:11px;
    line-height:16px;
  }
  .intro-facts dd{
    font-size:14px;
    line-height:21px;
  }
  .intro-facts dt,
  .intro-overview-label{
    font-size:11px;
    line-height:16px;
  }
  .chapter-break{
    font-size:11px;
    line-height:16px;
  }
}