/* One scroll-controlled gesture: lift and tip the pitcher, pour, spread. */
.hero{min-height:max(720px,calc(100svh - 124px));align-items:center}
.hero .hero-wedge{bottom:-60px;transform:rotate(17deg)}
/* Reserve vertical space below the upper cheese, including zoomed/short windows. */
.hero .hero-bottle{width:auto;height:clamp(510px,calc(100svh - 334px),540px);right:-58px;bottom:-32px;transform:rotate(5deg)}
.hero .hero-dairy{width:420px;height:420px;right:max(-32px,calc((100% - 1560px)/2 - 32px));bottom:-30px;transform-origin:68% 68%;transform:rotate(-4deg)}
.milk-motion-active .hero-dairy{will-change:transform}
.has-milk-flow{position:relative}
.has-milk-flow .hero .wave{visibility:hidden}
.milk-flow-stage{position:absolute;left:0;width:100%;pointer-events:none;z-index:3;overflow:hidden;contain:layout paint style}
.milk-flow-stage svg{display:block;width:100%;height:100%;overflow:hidden}
.has-milk-flow .about{position:relative;z-index:4}
.has-story-reveal .about-header .section-kicker,
.has-story-reveal .about-header h2,
.has-story-reveal .about-story{opacity:var(--story-reveal,1);transform:translateY(var(--story-rise,0px))}
.milk-pool{fill:var(--paper)}
.milk-spread{fill:url(#milk-puddle-light)}
.milk-stream{fill:url(#milk-stream-light)}
.milk-highlight{fill:none;stroke:#fffdf7;stroke-width:3;stroke-linecap:round}
.milk-splash{fill:#fffcf3}
.milk-ripple{fill:none;stroke:#f1e4c9;stroke-width:1.3;stroke-linecap:round}
@media(min-width:1600px){.hero{min-height:max(800px,calc(100svh - 124px))}.hero .hero-wedge{bottom:-72px}.hero .hero-bottle{height:clamp(500px,calc(100svh - 424px),620px);right:-32px;bottom:-38px}.hero .hero-dairy{width:480px;height:480px;right:max(-20px,calc((100% - 1560px)/2 - 20px));bottom:-32px}}
@media(max-width:1100px){.hero{min-height:max(670px,calc(100svh - 124px))}.hero .hero-wedge{bottom:-78px}.hero .hero-bottle{display:none}.hero .hero-dairy{width:350px;height:350px;right:-48px;bottom:-18px}}
/* JS locks the initial mobile viewport until width/orientation changes;
   svh remains the fallback for desktop windows and without JavaScript. */
@media(max-width:780px){.hero{min-height:clamp(620px,calc(var(--scene-vh,1svh)*100 - 104px),800px);align-items:flex-start}.hero .hero-wedge{bottom:-53px}.hero .hero-dairy{width:300px;height:300px;right:-32px;bottom:0}}
@media(max-width:480px){.hero{min-height:clamp(500px,calc(var(--scene-vh,1svh)*100 - 94px),660px)}.hero-copy{padding-top:clamp(32px,calc(var(--scene-vh,1svh)*7),56px);padding-bottom:220px}.hero .hero-wheel{width:200px;height:190px;right:-65px;top:-100px}.hero .hero-wedge{bottom:-49px}.hero .hero-dairy{width:230px;height:230px;right:-18px;bottom:6px}.milk-highlight{stroke-width:2}.milk-ripple{stroke-width:1}}
@media(max-width:360px){.hero .hero-wheel{right:-90px;top:-126px}}
@media(prefers-reduced-motion:reduce){.has-story-reveal .about-header .section-kicker,.has-story-reveal .about-header h2,.has-story-reveal .about-story{opacity:1;transform:none;clip-path:none}}
@media print{.milk-flow-stage{display:none}.has-milk-flow .hero .wave{visibility:visible}}