// Capabilities, "Four practices. One standard." section. // Sits immediately after WhoWeAre. Integration only; do not modify copy/colors/animations/clip-path. const { useEffect: useEffectCap, useRef: useRefCap } = React; function Capabilities() { const sectionRef = useRefCap(null); useEffectCap(() => { const section = sectionRef.current; if (!section) return; const atmosphere = section.querySelector('.capabilities__atmosphere'); const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; const io = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { section.classList.add('is-visible'); section.classList.remove('is-paused'); } else { section.classList.add('is-paused'); } }); }, { threshold: 0.05 } ); io.observe(section); const onVisibility = () => { if (document.hidden) { section.classList.add('is-paused'); } else if (section.getBoundingClientRect().top < window.innerHeight) { section.classList.remove('is-paused'); } }; document.addEventListener('visibilitychange', onVisibility); let cleanupScroll = () => {}; if (atmosphere && !reduceMotion) { let latestScrollY = window.scrollY; let ticking = false; let sectionTop = 0; const recalc = () => { sectionTop = section.getBoundingClientRect().top + window.scrollY; }; const update = () => { const sectionMid = sectionTop + section.offsetHeight / 2; const viewportMid = latestScrollY + window.innerHeight / 2; const distance = viewportMid - sectionMid; const offset = distance * 0.3; atmosphere.style.transform = `translate3d(0, ${offset}px, 0)`; ticking = false; }; const onScroll = () => { latestScrollY = window.scrollY; if (!ticking) { requestAnimationFrame(update); ticking = true; } }; const onResize = () => { recalc(); update(); }; recalc(); update(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onResize); cleanupScroll = () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onResize); }; } // Scroll-driven lift for the 4 cards: always visible, start lower, rise // gently toward their resting position as the grid scrolls into view. // Left→right stagger (card 1 finishes first, card 4 last). let cleanupCards = () => {}; const grid = section.querySelector('.capabilities__grid'); if (grid) { const cards = Array.from(grid.querySelectorAll('.capabilities__card')); if (reduceMotion) { cards.forEach((c) => { c.style.transform = 'translate3d(0,0,0)'; }); } else { const MAX_LIFT = 60; // px offset when card is below the fold const STAGGER = 0.12; // per-card delay as fraction of progress let ticking = false; const updateCards = () => { const vh = window.innerHeight; const rect = grid.getBoundingClientRect(); // progress 0 when grid top sits at 95% of viewport, 1 when at 35% const start = vh * 0.95; const end = vh * 0.35; const raw = (start - rect.top) / (start - end); const base = Math.max(0, Math.min(1, raw)); cards.forEach((card, i) => { // each card has its own progress window, offset left→right const local = Math.max(0, Math.min(1, (base - i * STAGGER) / (1 - STAGGER * (cards.length - 1)))); // ease-out cubic const eased = 1 - Math.pow(1 - local, 3); const y = MAX_LIFT * (1 - eased); card.style.transform = `translate3d(0, ${y}px, 0)`; }); ticking = false; }; const onScrollCards = () => { if (!ticking) { requestAnimationFrame(updateCards); ticking = true; } }; updateCards(); window.addEventListener('scroll', onScrollCards, { passive: true }); window.addEventListener('resize', onScrollCards); cleanupCards = () => { window.removeEventListener('scroll', onScrollCards); window.removeEventListener('resize', onScrollCards); }; } } return () => { io.disconnect(); document.removeEventListener('visibilitychange', onVisibility); cleanupScroll(); cleanupCards(); }; }, []); return (

Starts With Why. Ends With Change.

From learning strategy to custom content, video production to campaigns, built by one studio, held to one standard.

Learning strategy

Naming the right problem first.

Most learning programs fail before they launch, built around content instead of outcomes. We work with you to diagnose the real performance gaps, define what good looks like, and build a learning architecture that holds up against your actual business goals. No generic frameworks. No borrowed playbooks.

Custom eLearning

The format follows the work.

Not every learner needs the same path. We build content that adapts, microlearning for retention, interactive scenarios for application, and adaptive sequencing that responds to how each person actually performs. The right methodology, matched to the real behavior you need to change.

Video & Animation

Advertising-grade production for learning.

From quick-turn explainers to cinematic productions, we build learning videos and animations that hold attention and drive retention, live action, motion graphics, character animation, and AI-generated formats. If it moves and teaches, we make it. Premium quality, matched to the moment your learner needs it most.

Learning campaigns

Behavior over time, not the event once.

Learning doesn't spread itself. We help build the internal momentum, the communications, the nudges, the cultural signals, that get people to show up, engage, and use what they've learned.

); } window.Capabilities = Capabilities;