:root{--project-bar:64px;--project-rule:color-mix(in srgb,var(--color-brand-primary) 50%,transparent)}
.project-main{padding-top:var(--project-bar)}.project-stage{position:relative}.project-device-track{position:absolute;inset:0;pointer-events:none}.project-device-sticky{position:sticky;top:var(--project-bar);height:calc(100svh - var(--project-bar));width:100%;overflow:hidden}.project-canvas{display:block;width:100%;height:100%;color:var(--color-brand-primary)}.project-device-panel{position:absolute;inset:0 50% 0 0;border-right:1px solid var(--project-rule);display:flex;flex-direction:column;justify-content:space-between;opacity:var(--panel-progress,0)}.project-device-panel>div{display:flex;justify-content:space-between;gap:24px;padding:16px 24px;border-bottom:1px solid var(--project-rule);font-size:10px;text-transform:uppercase;letter-spacing:.18em}.project-device-panel>div:first-child span:first-child{font-size:14px;font-weight:700}.project-device-panel>div:last-child{border-top:1px solid var(--project-rule);border-bottom:0}.project-hero{position:relative;height:calc(100svh - var(--project-bar));padding:8svh 16px 0;text-align:center;pointer-events:none}.project-heading{will-change:transform,opacity}.project-heading>p,.project-eyebrow{font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.7}.project-heading>p{margin-bottom:16px}.project-heading h1{font-size:clamp(2.5rem,11vw,9rem);line-height:.85;font-weight:700;letter-spacing:-.08em;text-wrap:balance}.project-heading ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:24px}.project-heading li{border:1px solid var(--project-rule);padding:6px 12px;font-size:10px;letter-spacing:.18em;text-transform:uppercase}.project-content-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;pointer-events:none}.project-content{grid-column:2;padding:0 24px 20svh;min-width:0;pointer-events:auto}.project-intro,.project-facts{padding:56px 0}.project-intro>.project-eyebrow{margin-bottom:16px}.project-intro>p:not(.project-eyebrow):not(.project-demo-note){font-size:24px;line-height:1.65}.project-intro>.project-demo-note{margin-top:24px;font-size:12px;opacity:.55}.project-facts{border-top:1px solid var(--project-rule)}.project-facts h2{font-size:36px;font-weight:600;line-height:1.1;letter-spacing:-.03em;margin-bottom:28px}.project-facts dl>div{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;border-bottom:1px solid var(--project-rule)}.project-facts dt{font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.65}.project-facts dd{font-size:16px;text-align:right}.project-play{margin-top:28px;border:1px solid var(--project-rule);padding:10px 16px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}.project-play:hover{background:var(--color-brand-primary);color:var(--color-brand-cream)}.project-gallery{border-top:1px solid var(--project-rule);padding:56px 0;display:grid;gap:16px}.project-gallery figure{border:1px solid var(--project-rule);overflow:hidden}.project-gallery img{display:block;width:100%;height:auto}.project-reveal{clip-path:inset(100% 0 0 0);transition:clip-path .9s cubic-bezier(.16,1,.3,1)}.project-reveal.is-visible{clip-path:inset(0)}.project-back{display:block;border-top:1px solid var(--project-rule);margin:0 -24px;padding:64px 24px;transition:background .5s,color .5s}.project-back>span{display:block}.project-back>span:last-child{font-size:clamp(36px,5vw,80px);line-height:1.1;letter-spacing:-.06em;font-weight:700;margin-top:20px}.project-back:hover{background:var(--color-brand-primary);color:var(--color-brand-cream)}.project-device-fallback{display:none;position:absolute;top:48%;left:25%;width:50%}.project-device-fallback>div{border:2px solid currentColor;padding:12px;border-radius:14px 14px 0 0}.project-device-fallback:after{content:'';display:block;width:110%;height:10px;border:2px solid currentColor;border-radius:0 0 50% 50%;margin-left:-5%}.project-device-fallback img{width:100%}.is-fallback .project-device-fallback{display:block}.is-fallback canvas{display:none}
@media(max-width:767px){:root{--project-bar:56px}.project-device-track{height:calc(100svh - 56px);bottom:auto}.project-device-sticky{position:relative;top:0}.project-device-panel{display:none}.project-hero{padding-top:8svh}.project-heading h1{font-size:11vw}.project-content-grid{display:block}.project-content{padding:0 12px 20svh}.project-intro,.project-facts{padding:40px 0}.project-intro>p:not(.project-eyebrow):not(.project-demo-note){font-size:20px}.project-facts h2{font-size:28px}.project-gallery{padding:40px 0}.project-back{margin:0 -12px;padding:48px 12px}.project-device-fallback{left:8%;width:84%}}
@media(prefers-reduced-motion:reduce){.project-reveal{clip-path:none;transition:none}.project-heading{will-change:auto}}