/* An open product gallery, followed by a scroll-controlled camera retreat. */
:root{--gallery:oklch(99% .003 290);--hero-ink:oklch(22% .012 290);--hero-muted:oklch(49% .012 290);--hero-line:oklch(89% .006 290);--hero-ease:cubic-bezier(.22,1,.36,1)}
body{background:var(--gallery)}header{height:68px;max-width:1440px;margin:auto;padding:0 6%;border:0;background:var(--gallery);gap:35px}header .brand{font-size:27px;letter-spacing:-1.2px;gap:9px}header .brand img{height:29px;width:29px}header nav{gap:34px;font-size:12px;color:var(--hero-muted)}header .actions{gap:22px}header .button.small{font-size:11px;padding:10px 16px;gap:16px;min-height:38px}header .language select{min-height:44px}.hero{position:relative;padding:0;text-align:center;overflow:visible;color:var(--hero-ink);background:var(--gallery)}.hero-pin{position:relative;isolation:isolate;height:calc(100svh - 68px);min-height:700px;max-height:1080px;overflow:hidden}.hero-heading{position:relative;z-index:4;padding:46px 24px 0;will-change:transform,opacity}.hero-kicker{font-size:20px;font-weight:600;letter-spacing:-.015em;margin:0 0 13px;line-height:1.3}.hero h1{font-size:clamp(64px,6.4vw,96px);font-weight:600;letter-spacing:-.028em;line-height:1.05;margin:0 0 19px;color:var(--hero-ink);white-space:nowrap}.hero-sub{font-size:18px;line-height:1.45;letter-spacing:-.015em;margin:0;color:var(--hero-muted)}.hero-stage{position:absolute;inset:245px 0 115px;max-width:1440px;height:auto;margin:0 auto;perspective:1400px;isolation:isolate}.hero-bob{position:absolute;top:0;left:50%;height:clamp(470px,65svh,720px);width:auto;max-width:none;object-fit:contain;transform:translateX(-50%);transform-origin:50% 80%;z-index:3;will-change:transform}.hero-agent{position:absolute;bottom:-80px;height:70%;max-height:420px;width:300px;object-fit:contain;z-index:1;opacity:0;will-change:transform,opacity}.hero-agent-left{left:17%;transform:translateX(100px)}.hero-agent-right{right:15%;transform:translateX(-100px)}.hero-controls{position:absolute;z-index:6;bottom:0;left:0;right:0;padding:18px 24px 24px;background:var(--gallery)}.hero-actions{display:flex;align-items:center;justify-content:center;gap:28px}.hero .button{font-size:13px;padding:14px 23px;min-height:46px;gap:24px}.hero-explore{font-size:13px;display:inline-flex;gap:14px;align-items:center;min-height:44px;color:var(--indigo)}.hero-explore:hover{text-decoration:underline;text-underline-offset:5px}.hero-controls>p{font-size:12px;color:var(--hero-muted);margin:13px 0 0;letter-spacing:-.01em}.hero-scroll{position:absolute;bottom:41px;right:6%;z-index:8;font-size:8px;letter-spacing:.11em;color:var(--hero-muted)}.hero-scroll span{margin-left:14px;font-size:16px}.hero-next{position:absolute;inset:70px 20px auto;z-index:4;opacity:0;pointer-events:none;transform:translateY(30px);will-change:transform,opacity}.hero-next-title{font-size:clamp(58px,5.7vw,84px);font-weight:600;letter-spacing:-.025em;line-height:1.05;margin:0}.hero.motion-ready{height:190svh}.motion-ready .hero-pin{position:sticky;top:0;height:100svh;max-height:none;min-height:650px}.hero .button,header .button{transition:background .2s}.intro{border-top:1px solid var(--hero-line)}.preview-note{font-size:11px;padding:15px 24px}.hero-controls:before{content:"";position:absolute;inset:-26px 0 auto;height:26px;background:var(--gallery);mask-image:linear-gradient(transparent,#000);pointer-events:none}
@media(min-width:1600px){.hero-heading{padding-top:65px}.hero-stage{top:290px}.hero h1{font-size:104px}.hero-agent-left{left:14%}.hero-agent-right{right:12%}}
@media(min-width:651px) and (max-height:800px){.hero-heading{padding-top:26px}.hero h1{font-size:76px;margin-bottom:14px}.hero-kicker{font-size:18px;margin-bottom:12px}.hero-sub{font-size:16px}.hero-stage{top:210px}.hero-bob{height:510px}.hero-next{top:40px}.hero-next-title{font-size:70px}}
@media(max-width:1000px) and (min-width:651px){header{padding:0 30px;gap:25px}header nav{gap:20px}.hero-scroll{display:none}.hero h1{font-size:8vw}.hero-agent-left{left:3%}.hero-agent-right{right:0}.hero-agent{width:230px}.hero-bob{height:580px}}
@media(max-width:650px){header{height:68px;min-height:68px;padding:0 20px;gap:15px;flex-wrap:nowrap}header .brand{font-size:24px;gap:7px}header .brand img{height:25px;width:25px}header nav{display:none}header .actions{margin-left:auto;gap:4px}header .button.small{padding:10px 12px;gap:8px;font-size:10px}header .language select{max-width:50px;font-size:11px;padding:5px}.hero-pin{height:calc(100svh - 68px);min-height:730px;max-height:900px}.hero-heading{padding:33px 20px 0}.hero-kicker{font-size:17px;margin-bottom:16px}.hero h1{font-size:clamp(56px,14.6vw,84px);line-height:1.03;white-space:normal;max-width:500px;text-wrap:balance;letter-spacing:-.035em;margin:0 auto 20px}.hero-sub{font-size:15px;line-height:1.5}.hero-stage{top:275px;bottom:120px}.hero-bob{height:430px;transform:translateX(-50%);max-width:none}.hero-agent{display:none}.hero-controls{padding:15px 15px 24px}.hero-actions{gap:18px;flex-direction:column}.hero .button{font-size:12px;min-height:44px;padding:13px 21px}.hero-explore{font-size:12px;min-height:24px}.hero-controls>p{font-size:10px;margin-top:15px}.hero-scroll{display:none}.hero-next{display:none}.hero.motion-ready{height:auto}.motion-ready .hero-pin{position:relative;height:calc(100svh - 68px);min-height:730px}.preview-note{font-size:10px}}
@media(max-width:370px){header{padding:0 12px}header .button.small{font-size:9px;padding:10px}.hero h1{font-size:53px}.hero-sub{font-size:14px}.hero-bob{height:400px}.hero-stage{top:265px}}
@media(prefers-reduced-motion:reduce){.hero.motion-ready{height:auto}.motion-ready .hero-pin{position:relative}.hero-heading,.hero-bob,.hero-agent,.hero-next{will-change:auto}.hero-next,.hero-agent{display:none}}
/* Keep the conversion controls within the first viewport while the nav stays available. */
@media(min-width:651px){header{position:sticky;top:0;z-index:20}.motion-ready .hero-pin{top:68px;height:calc(100svh - 68px);min-height:600px}.hero-bob{height:clamp(410px,calc(100svh - 400px),680px)}.hero-agent{bottom:0}.hero-controls:before{display:none}}
/* Transparent moving portrait, sharing the exact same stage as its still fallback. */
.hero-bob{aspect-ratio:4/5;pointer-events:none}.hero-bob>img,.hero-bob>canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}.hero-bob>canvas{opacity:0;transition:opacity .2s linear}.hero-bob.video-ready>canvas{opacity:1}.hero-bob.video-ready>img{visibility:hidden}.hero-bob>img{transition:visibility 0s .2s}.hero-bob:not(.video-ready)>img{transition:none}.hero-bob>canvas{max-width:none}.motion-ready .hero-pin{top:var(--hero-header-height,78px);height:calc(100svh - var(--hero-header-height,78px))}@media(prefers-reduced-motion:reduce){.hero-bob>canvas{display:none}.hero-bob>img{visibility:visible!important}}
.hero-bob{height:100%;max-height:none}.hero-stage{bottom:145px}@media(max-width:650px){.hero-stage{bottom:175px}.hero-bob{height:100%}}.reduce-motion .hero-bob>canvas{display:none}.reduce-motion .hero-bob>img{visibility:visible!important}
/* Keep the supplied clean cutout until genuine transparent motion footage is available. */
.hero-bob-still{aspect-ratio:auto;object-fit:contain;width:auto}