/* style.css — global rules only. Element styling is inline in index.html templates.
   Hover/active/before states are generated at runtime into <style id="wm-pseudo">. */
html{scroll-snap-type:y mandatory;scroll-padding-top:var(--navh,58px);scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar{display:none;width:0;height:0}
*{scrollbar-width:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#FFFFFF;color:#0A0A0A;font-family:'Geist',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}a:hover{opacity:.72}
input::placeholder{color:#CFCFCF;opacity:1}
/* phones: the big blurred, animated glow layers cost too much memory on iPhone (Safari reloads the page) */
@media (max-width:860px){[style*="blur(60px)"],[style*="blur(110px)"],[style*="blur(30px)"]{display:none!important}}
/* touch screens can't hover, so the hover dim (a huge backdrop blur, see .wm-fo) never shows: drop it */
@media (hover:none),(max-width:860px){.wm-fo{display:none!important}}
/* phones: sections far from the screen are not drawn at all (the case-study marquee alone is a 3456px layer) */
@media (max-width:860px){#main>section{content-visibility:auto;contain-intrinsic-size:auto 800px}}
image-slot::part(frame){background:transparent}
image-slot::part(ring){display:none}
@keyframes cnIn{from{opacity:0;transform:translateY(22px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes cnGas1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(22%,14%) scale(1.15)}66%{transform:translate(-10%,22%) scale(.9)}}
@keyframes cnGas2{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(-24%,-12%) scale(1.2)}70%{transform:translate(10%,-20%) scale(.85)}}
@keyframes cnGas3{0%,100%{transform:translate(0,0) scale(1.05)}30%{transform:translate(18%,-18%) scale(.9)}65%{transform:translate(-20%,-6%) scale(1.2)}}
@property --nb{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes navPulse{to{--nb:360deg}}
@keyframes navFire{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes ctaSpin{to{transform:rotate(360deg)}}
@keyframes poseGlow{0%{opacity:0;transform:scale(.5)}30%{opacity:.9}100%{opacity:.35;transform:scale(1.25)}}
@keyframes meloAura{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@keyframes typing{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-2px)}}
@keyframes sheetUp{from{opacity:0;transform:translateY(40px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes shakeX{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
@keyframes mzSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-1%)}}
@keyframes mzHop{0%,100%{transform:translateY(0) scale(1,1)}35%,55%{transform:translateY(-4%) scale(.98,1.03)}78%{transform:translateY(0) scale(1.05,.94)}}
@keyframes mzBeat{0%,100%{transform:scale(1)}12%{transform:scale(1.07)}24%{transform:scale(1)}36%{transform:scale(1.05)}48%{transform:scale(1)}}
@keyframes mzPonder{0%,100%{transform:rotate(-6deg) translateX(-1%)}50%{transform:rotate(5deg) translateX(1%)}}
@keyframes mzJig{0%,100%{transform:rotate(-4deg)}25%{transform:translateY(-4%)}50%{transform:rotate(4deg)}75%{transform:translateY(-4%)}}
@keyframes mzCringe{0%,66%,100%{transform:none}70%{transform:translateX(-1.5%) rotate(-1.5deg) scale(.97)}74%{transform:translateX(1.5%) rotate(1.5deg) scale(.97)}78%{transform:translateX(-1%) scale(.98)}88%{transform:none}}
@keyframes mzAccIn{0%{transform:scale(0) rotate(-30deg);opacity:0}60%{transform:scale(1.3) rotate(8deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes mzHeart{0%,100%{transform:scale(1)}12%{transform:translateY(-1%) scale(1.2)}24%{transform:scale(1)}36%{transform:scale(1.14)}48%{transform:scale(1)}}
@keyframes mzQm{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg) translateY(-2%)}}
@keyframes mzFx{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.78}}
@keyframes mzIn{0%{transform:scale(.86);opacity:0}100%{transform:none;opacity:1}}

/* Story section */
@keyframes stDash{to{stroke-dashoffset:-32}}
@keyframes stFloatA{0%,100%{transform:translateY(-26px)}50%{transform:translateY(26px)}}
@keyframes stFloatB{0%,100%{transform:translateY(26px)}50%{transform:translateY(-26px)}}
@keyframes stOrbit{to{transform:rotate(360deg)}}
@keyframes stCounter{to{transform:rotate(-360deg)}}
@keyframes stRing{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.9);opacity:0}}
@keyframes stUp{to{transform:translateY(-50%)}}@keyframes stSheen{0%,100%{background-position:120% 0}50%{background-position:-20% 0}}@keyframes stSpin{to{transform:rotate(360deg)}}@keyframes stBlink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes stIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}