.scroll-expand{width:100%;height:100%;position:relative}.scroll-expand--scroller{scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain;overflow:hidden auto}.scroll-expand--scroller::-webkit-scrollbar{display:none}.scroll-expand__track{width:100%;position:relative}.scroll-expand__stage{--se-title-size:4rem;justify-content:center;align-items:center;width:100%;height:100svh;display:flex;position:sticky;top:0;overflow:hidden}.scroll-expand__frame{clip-path:inset(21% 29% round 24px);will-change:clip-path, transform;position:absolute;inset:0}.scroll-expand__frame--macbook{clip-path:none;will-change:width, height, transform, border-radius;z-index:2;box-shadow:none;background:#0a0a0a;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%);container:heroframe/inline-size}.scroll-expand__media{object-fit:cover;will-change:transform;transform-origin:50%;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%;position:absolute;inset:0}.scroll-expand__scrim{pointer-events:none;opacity:0;z-index:1;background:linear-gradient(#00000059,#0000001a 55%,#000000bf);position:absolute;inset:0}.scroll-expand__overlay{text-align:center;opacity:0;will-change:opacity, transform;z-index:2;flex-direction:column;justify-content:center;align-items:center;padding:6%;display:flex;position:absolute;inset:0}.scroll-expand__title{text-align:center;font-size:var(--se-title-size);letter-spacing:-.03em;color:#fff;text-shadow:0 2px 24px #00000073;pointer-events:none;will-change:opacity, transform;z-index:3;justify-content:center;align-items:center;margin:0;padding:0 6%;font-weight:700;line-height:1;display:flex;position:absolute;inset:0}.scroll-expand__hint{letter-spacing:.08em;text-transform:uppercase;color:#ffffffa6;pointer-events:none;will-change:opacity, transform;z-index:15;flex-direction:column;align-items:center;gap:.35rem;font-size:.8125rem;display:flex;position:absolute;bottom:2rem;left:0;right:0}.scroll-expand__hint-arrow{font-size:1rem;line-height:1;animation:1.8s ease-in-out infinite se-hint-bounce;display:inline-block}@keyframes se-hint-bounce{0%,to{opacity:.6;transform:translateY(0)}50%{opacity:1;transform:translateY(5px)}}.scroll-expand__device{--lid-x:2%;--lid-y:2%;--lid-w:96%;--lid-h:78%;--lid-pad:1.1%;--lid-r:2.3%;--hole-x:3.1%;--hole-y:3.56%;--hole-w:93.8%;--hole-h:74.88%;aspect-ratio:1.42;pointer-events:none;z-index:10;will-change:transform, opacity;filter:drop-shadow(0 22px 28px #0000008c);width:min(84vw,1120px);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media (min-width:761px){.scroll-expand{--device-w:min(84vw, 1120px, calc(68svh * 1.42))}.scroll-expand__device{width:var(--device-w)}.scroll-expand__frame--macbook{width:calc(var(--device-w) * .938);height:calc(var(--device-w) / 1.42 * .7488);border-radius:calc(var(--device-w) * .012);transform:translate(-50%, calc(-50% - var(--device-w) / 1.42 * .09))}}@media (max-width:760px){.scroll-expand{--device-w:min(70vw, 380px, calc(70svh * .482))}.scroll-expand__device{--lid-x:0%;--lid-y:0%;--lid-w:100%;--lid-h:100%;--lid-pad:3.4%;--lid-r:15.5%;--hole-x:3.4%;--hole-y:1.64%;--hole-w:93.2%;--hole-h:96.7%;width:var(--device-w);aspect-ratio:.482}.scroll-expand__device .scroll-expand__device-neck,.scroll-expand__device .scroll-expand__device-foot,.scroll-expand__device .scroll-expand__device-camera{display:none}.scroll-expand__device .scroll-expand__device-island,.scroll-expand__device .scroll-expand__device-btn{display:block}.scroll-expand__frame--macbook{width:calc(var(--device-w) * .932);height:calc(var(--device-w) / .482 - var(--device-w) * .068);border-radius:calc(var(--device-w) * .121);transform:translate(-50%,-50%)}}.scroll-expand__device-lid{left:var(--lid-x,0px);top:var(--lid-y,0px);width:var(--lid-w,100%);height:var(--lid-h,64%);padding:var(--lid-pad,10px);border-radius:var(--lid-r,14px);-webkit-mask-composite:xor;background:linear-gradient(#ffffff8c,#fff0 1.5px),linear-gradient(#3a3a3e 0%,#1c1c1e 16%,#121214 100%);position:absolute;box-shadow:inset 0 0 0 1px #ffffff24;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude}.scroll-expand__device-neck{left:50%;top:calc(var(--lid-y,0px) + var(--lid-h,78%) - 2px);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);background:linear-gradient(#3c3c40 0%,#242428 100%);width:3.6%;height:15%;position:absolute;transform:translate(-50%)}.scroll-expand__device-foot{background:linear-gradient(#6a6a70 0%,#2c2c30 38%,#141416 100%);border-radius:999px;width:28%;height:2.2%;position:absolute;bottom:2.4%;left:50%;transform:translate(-50%);box-shadow:inset 0 1px #fff3,0 10px 18px #00000059}.scroll-expand__device-camera{left:50%;top:calc(var(--lid-y,0px) + (var(--lid-pad,10px) - 5px) / 2);background:radial-gradient(circle at 35% 35%,#6a6a72,#070709 62%);border-radius:50%;width:5px;height:5px;position:absolute;transform:translate(-50%);box-shadow:0 0 0 1px #fff3}.scroll-expand__device-island,.scroll-expand__device-btn,.scroll-expand__device[data-device=phone] .scroll-expand__device-neck,.scroll-expand__device[data-device=phone] .scroll-expand__device-foot,.scroll-expand__device[data-device=phone] .scroll-expand__device-camera{display:none}.scroll-expand__device[data-device=phone] .scroll-expand__device-lid{background:linear-gradient(#ffffff80,#fff0 1px),linear-gradient(165deg,#5a5a60 0%,#2a2a2e 18%,#141416 55%,#0c0c0e 100%)}.scroll-expand__device[data-device=phone] .scroll-expand__device-island,.scroll-expand__device[data-device=phone] .scroll-expand__device-btn{display:block}.scroll-expand__device-island{left:calc(var(--hole-x,0px) + var(--hole-w,100%) / 2);top:calc(var(--hole-y,0px) + var(--hole-w,100%) * .042);width:calc(var(--hole-w,100%) * .3);height:calc(var(--hole-w,100%) * .085);background:#050506;border-radius:999px;position:absolute;transform:translate(-50%);box-shadow:0 0 0 1px #ffffff0f}.scroll-expand__device-btn{background:linear-gradient(90deg,#1a1a1c,#8d8d93);border-radius:2px 0 0 2px;width:3px;position:absolute}.scroll-expand__device-btn--vol{height:15%;top:24%;left:-3px}.scroll-expand__device-btn--power{background:linear-gradient(270deg,#1a1a1c,#8d8d93);border-radius:0 2px 2px 0;height:11%;top:30%;left:auto;right:-3px}.scroll-expand__frame--macbook .hobro-hero{width:100%;height:100%;min-height:100%;position:relative}.scroll-expand__frame--macbook .hobro-hero-copy{padding:clamp(1.5rem,5cqw,6rem) 1.25rem clamp(1.5rem,4cqw,5rem)}.scroll-expand__frame--macbook .hobro-hero-title{text-shadow:0 .08em .4em #00000080;font-size:clamp(1.4rem,6.8cqw,7.2rem)}.scroll-expand__frame--macbook .hobro-hero-punch{max-width:24ch;margin-top:clamp(.4rem,1cqw,1rem);font-size:clamp(.75rem,2.2cqw,2.35rem)}.scroll-expand__frame--macbook .hobro-hero-credit{margin-top:clamp(.5rem,1.2cqw,1.35rem);font-size:clamp(.55rem,.9cqw,.78rem)}.scroll-expand__frame--macbook .hobro-hero-card{border-radius:clamp(.75rem,1.4cqw,1.35rem);width:min(clamp(11rem,24cqw,20rem),100% - 1.25rem);padding:clamp(.65rem,1.2cqw,1.15rem) clamp(.75rem,1.2cqw,1.2rem) clamp(.75rem,1.2cqw,1.2rem);bottom:clamp(.6rem,1.8cqw,1.5rem);left:auto;right:clamp(.6rem,1.8cqw,1.5rem)}.scroll-expand__frame--macbook .hobro-hero-card p{margin-bottom:clamp(.4rem,.8cqw,.9rem);font-size:clamp(.52rem,.75cqw,.72rem)}.scroll-expand__frame--macbook .hobro-hero-card .hobro-deck-btn{padding:clamp(.35rem,.5cqw,.5rem) clamp(.65rem,.9cqw,.95rem);font-size:clamp(.65rem,.82cqw,.82rem)}@container heroframe (max-width:420px){.scroll-expand__frame--macbook .hobro-hero-copy{transform:translateY(-7cqw)}.scroll-expand__frame--macbook .hobro-hero-card{border-radius:2cqw;width:36cqw;padding:1.4cqw 1.6cqw 1.5cqw;bottom:2cqw;right:2cqw}.scroll-expand__frame--macbook .hobro-hero-card p{letter-spacing:.035em;margin-bottom:1cqw;font-size:1.85cqw;line-height:1.25}.scroll-expand__frame--macbook .hobro-hero-card .hobro-deck-btn{letter-spacing:.05em;padding:.65cqw 1.4cqw;font-size:1.8cqw;line-height:1}}@media (max-width:760px){.scroll-expand__frame--macbook .hobro-hero-copy{padding:14% 1.15rem 22%;transform:none}.scroll-expand__frame--macbook .hobro-hero-title{font-size:clamp(2.15rem,13.5cqw,3.5rem)}.scroll-expand__frame--macbook .hobro-hero-punch{max-width:16ch;font-size:clamp(1.05rem,5cqw,1.45rem)}.scroll-expand__frame--macbook .hobro-hero-credit{font-size:clamp(.62rem,2.6cqw,.74rem)}.scroll-expand__frame--macbook .hobro-hero-card{border-radius:1rem;width:min(11.25rem,100% - 1.7rem);padding:.7rem .75rem .75rem;bottom:1.35rem;right:.85rem}.scroll-expand__frame--macbook .hobro-hero-card p{letter-spacing:.05em;margin-bottom:.55rem;font-size:.62rem;line-height:1.35}.scroll-expand__frame--macbook .hobro-hero-card .hobro-deck-btn{letter-spacing:.06em;padding:.42rem .75rem;font-size:.68rem;line-height:1.2}}
.ripple-distortion{background:#000;width:100%;height:100%;position:relative;overflow:hidden}.ripple-distortion canvas{width:100%;height:100%;display:block}
