/* motion-studio base. Everything reads from tokens.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ms-bg);color:var(--ms-fg);font-family:var(--ms-font-text);font-size:var(--ms-body);letter-spacing:var(--ms-track-body);line-height:1.5;-webkit-font-smoothing:antialiased}
img,video,canvas{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.ms-section{position:relative;padding:calc(var(--ms-pad) * 1.4) var(--ms-pad);min-height:60vh;display:flex;flex-direction:column;justify-content:center}
.ms-section--full{min-height:100vh}
.ms-display{font-family:var(--ms-font-display);font-size:var(--ms-display);font-weight:600;letter-spacing:var(--ms-track-head);line-height:1.04;margin:0;max-width:20ch}
.ms-display--md{font-size:calc(var(--ms-display) * 0.62)}
.ms-display--sm{font-size:calc(var(--ms-display) * 0.46)}
.ms-sub{font-size:var(--ms-sub);color:var(--ms-muted);line-height:1.3;margin:0.6em 0 0;max-width:var(--ms-measure)}
.ms-label{font-size:var(--ms-label);font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--ms-muted);margin:0 0 0.8em}
.ms-accent{color:var(--ms-accent)}
.ms-rule{width:28px;height:2px;background:var(--ms-rule);margin-bottom:1.2em}
.ms-rule--accent{background:var(--ms-accent)}
.ms-grid{display:grid;gap:calc(var(--ms-pad) * 0.7)}
.ms-grid--3{grid-template-columns:repeat(3,1fr)}
.ms-grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){.ms-grid--3,.ms-grid--2{grid-template-columns:1fr}}
.ms-media{border-radius:var(--ms-radius);overflow:hidden;box-shadow:var(--ms-shadow)}
.ms-stat{font-family:var(--ms-font-display);font-size:calc(var(--ms-display) * 2.1);font-weight:500;letter-spacing:-0.04em;line-height:1;font-variant-numeric:tabular-nums;margin:0}
.ms-points{list-style:none;margin:0;padding:0}
.ms-points li{border-top:1px solid var(--ms-rule);padding:0.6em 0}
.ms-muted{color:var(--ms-muted)}
.ms-cta{display:inline-block;margin-top:1.4em;font-size:var(--ms-body);color:var(--ms-accent);border-bottom:1px solid currentColor;padding-bottom:2px}
/* enters: hidden until motion.js lands them; no-JS and reduced-motion show everything */
[data-enter]{opacity:0;transform:translate3d(0,var(--ms-dist,24px),0);will-change:transform,opacity}
[data-enter].is-in{opacity:1;transform:none}
[data-words] .ms-w{display:inline-block;opacity:0;transform:translate3d(0,18px,0);will-change:transform,opacity}
[data-words] .ms-w.is-in{opacity:1;transform:none}
.no-js [data-enter],.no-js [data-words] .ms-w{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-enter],[data-words] .ms-w{opacity:1!important;transform:none!important;transition:none!important}}
/* sticky reveal */
.ms-sticky{position:relative}
.ms-sticky__stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding:0 var(--ms-pad);overflow:hidden}
.ms-sticky__steps>div{height:70vh}
.ms-sticky__line{position:absolute;left:var(--ms-pad);right:var(--ms-pad);opacity:0;transform:translate3d(0,20px,0);transition:opacity var(--ms-secondary) var(--ms-ease-out),transform var(--ms-secondary) var(--ms-ease-out)}
.ms-sticky__line.is-active{opacity:1;transform:none}
.ms-sticky__line.is-past{opacity:0.3;transform:translate3d(0,-10px,0);transition-timing-function:var(--ms-ease-in);transition-duration:var(--ms-detail)}
/* scroll scrub */
.ms-scrub{position:relative;height:300vh}
.ms-scrub__stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;background:var(--ms-bg)}
.ms-scrub__stage canvas{width:100%;height:100%;object-fit:contain}
.ms-scrub__copy{position:absolute;left:var(--ms-pad);bottom:var(--ms-pad)}
/* grain + vignette (static on web, cheap) */
.ms-grain{position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:var(--ms-grain);mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");background-size:240px 240px}
.ms-vignette{position:fixed;inset:0;pointer-events:none;z-index:9998;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 58%,rgba(0,0,0,var(--ms-vignette)) 100%)}