@property --from{syntax:"<number>";inherits:false;initial-value:0}@property --to{syntax:"<number>";inherits:false;initial-value:1}.hero-story{margin-top:-5rem;position:relative}.hero-stage{--gutter:clamp(1.25rem, 4.2vw, 5rem);--mw:min(100vw - 2 * var(--gutter), 38rem);--cols:4;--rows:3;--tw:calc(var(--mw) / var(--cols));--frame-r:calc(var(--mw) * .026);isolation:isolate;min-height:min(100svh,960px);padding:6.5rem max(var(--gutter), (100% - 1400px) / 2) 3.5rem;background:var(--background);align-content:center;gap:3rem;display:grid;position:relative;overflow:clip}.hero-copy{z-index:1;min-width:0;max-width:44rem;position:relative}.hero-identity{border-radius:4px;align-items:center;gap:.85rem;font-size:.875rem;line-height:1.55;display:inline-flex}.hero-avatar{background:var(--muted);border:1px solid color-mix(in oklch, var(--foreground) 16%, transparent);border-radius:14px;flex-shrink:0;width:52px;height:60px;position:relative;overflow:hidden}.hero-avatar img{transform-origin:70% 44%;transform:scale(1.55)}.hero-status{color:var(--muted-foreground);align-items:center;gap:.5rem;display:flex}.hero-status:before{content:"";background:var(--primary);width:6px;height:6px;box-shadow:0 0 0 4px color-mix(in oklch, var(--primary) 14%, transparent);border-radius:50%;flex-shrink:0}.hero-headline{font-family:var(--font-display);font-variation-settings:"wdth" 104;letter-spacing:-.05em;margin:1.75rem 0 1.25rem;font-size:clamp(2.5rem,11vw,4.5rem);font-weight:620;line-height:1}.hero-headline .line-mask{margin-bottom:-.12em;padding:0 .08em .12em 0}.hero-description{max-width:40ch;color:var(--muted-foreground);font-size:clamp(1rem,1.3vw,1.125rem);line-height:1.6}.hero-actions{flex-wrap:wrap;gap:.75rem;margin-top:1.75rem;display:flex}.hero-button{white-space:nowrap;min-height:52px;transition:transform .16s var(--ease-out-strong), background-color .18s ease;border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;gap:1.5rem;padding:.8rem 1.5rem;font-size:.9375rem;font-weight:600;display:inline-flex}.hero-button-primary{background:var(--foreground);color:var(--background)}.hero-button-secondary{border-color:color-mix(in oklch, var(--foreground) 18%, transparent);color:var(--foreground)}.hero-button svg{transition:transform .2s var(--ease-out-strong);flex-shrink:0}.hero-button:active{transform:scale(.97)}.hero-button:focus-visible,.hero-identity:focus-visible{outline:2px solid var(--ring);outline-offset:5px}@media (hover:hover) and (pointer:fine){.hero-button:hover svg{transform:translate(2px,-2px)}.hero-button[href^=\#]:hover svg{transform:translate(2px,2px)}.hero-button-secondary:hover{background:color-mix(in oklch, var(--foreground) 6%, transparent)}}.hero-scene{pointer-events:none;place-items:center;min-width:0;display:grid;position:relative}.hero-settle{perspective:1600px;place-items:center;display:grid;position:relative}.hero-glow{z-index:-1;width:calc(var(--mw) * 1.7);aspect-ratio:1.5;position:absolute}.hero-tint{--glow:var(--primary);background:radial-gradient(closest-side, color-mix(in srgb, var(--glow) 10%, var(--background)) 40%, color-mix(in srgb, var(--glow) 45%, var(--background)) 60%, color-mix(in srgb, var(--glow) 26%, var(--background)) 72%, color-mix(in srgb, var(--glow) 9%, var(--background)) 87%, var(--background));position:absolute;inset:0}@supports (color:oklch(from red l c h)){.hero-tint{--glow:oklch(from var(--tint,var(--primary)) .7 min(c * 4, .16) h)}}.hero-tint:not(:first-child){display:none}.hero-mosaic{--art-1:var(--art-1-sm);--art-2:none;--art-3:none;width:var(--mw);aspect-ratio:16/10;margin-top:calc(var(--mw) * .04);transform-style:preserve-3d}[data-more] .hero-mosaic{--art-2:var(--art-2-sm);--art-3:var(--art-3-sm)}@media (min-width:768px){.hero-stage{--cols:6;--rows:4}.hero-mosaic{--art-1:var(--art-1-lg)}[data-more] .hero-mosaic{--art-2:var(--art-2-lg);--art-3:var(--art-3-lg)}}.hero-grid{grid-template:repeat(var(--rows), 1fr) / repeat(var(--cols), 1fr);width:100%;height:100%;transform-style:preserve-3d;display:grid;position:relative}.hero-tile{--at:calc(var(--col) * 100% / (var(--cols) - 1)) calc(var(--row) * 100% / (var(--rows) - 1));transform-style:preserve-3d;visibility:hidden;position:relative}.hero-tile[data-grid=lg]{display:none}@media (min-width:768px){.hero-tile[data-grid=sm]{display:none}.hero-tile[data-grid=lg]{display:block}}.hero-flip,.hero-piece{transform-style:preserve-3d;position:absolute;inset:0}.hero-face{border-radius:calc(var(--tw) * .03);background-color:var(--muted);background-image:linear-gradient(150deg, #ffffff2e, transparent 46%), var(--face-art), var(--face-lqip);background-position:0 0, var(--at), var(--at);background-size:100% 100%, calc(var(--cols) * 100%) calc(var(--rows) * 100%), calc(var(--cols) * 100%) calc(var(--rows) * 100%);box-shadow:inset 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent), 0 calc(var(--tw) * .08) calc(var(--tw) * .16) calc(var(--tw) * -.1) var(--shadow-tint);backface-visibility:hidden;position:absolute;inset:0}.hero-face[data-site="1"]{--face-art:var(--art-1);--face-lqip:var(--lqip-1)}.hero-face[data-site="2"]{--face-art:var(--art-2);--face-lqip:var(--lqip-2);transform:rotateY(180deg)}.hero-face[data-site="3"]{--face-art:var(--art-3);--face-lqip:var(--lqip-3);opacity:0}.hero-whole{position:absolute;inset:0;transform:translateZ(1px)}.hero-whole:not([data-site="1"]){display:none}.hero-whole[data-site="1"]{--whole-art:var(--art-1);--whole-lqip:var(--lqip-1)}.hero-whole[data-site="2"]{--whole-art:var(--art-2);--whole-lqip:var(--lqip-2)}.hero-whole[data-site="3"]{--whole-art:var(--art-3);--whole-lqip:var(--lqip-3)}.hero-art{border-radius:0 0 var(--frame-r) var(--frame-r);background-color:var(--muted);background-image:var(--whole-art), var(--whole-lqip);background-size:cover;position:absolute;inset:0;overflow:hidden}.hero-sweep{background:linear-gradient(90deg,#0000,#ffffff73,#0000);width:45%;position:absolute;inset:-10% auto -10% 0;transform:translate(-120%)skew(-14deg)}@media (max-width:767px){.hero-sweep{display:none}}.hero-frame{inset:calc(var(--mw) * -.04) 0 0;border-radius:var(--frame-r);box-shadow:0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent), 0 calc(var(--mw) * .05) calc(var(--mw) * .1) calc(var(--mw) * -.04) var(--shadow-tint);position:absolute;transform:translateZ(1px)}.hero-bar{align-items:center;gap:calc(var(--mw) * .007);height:calc(var(--mw) * .04);padding-inline:calc(var(--mw) * .016);border-radius:var(--frame-r) var(--frame-r) 0 0;background:var(--card);box-shadow:0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent);display:flex;position:absolute;top:0;left:0;right:0}.hero-bar>span{width:calc(var(--mw) * .0095);aspect-ratio:1;background:color-mix(in oklch, var(--foreground) 16%, transparent);border-radius:50%}.hero-bar>.hero-bar-address{aspect-ratio:auto;background:color-mix(in oklch, var(--foreground) 6%, transparent);border-radius:999px;width:32%;height:45%;margin-inline:auto}.hero-rail{border:0;min-width:0;margin:0;padding:0;display:none}.hero-rail-step{text-align:left;cursor:pointer;min-height:44px;transition:transform .16s var(--ease-out-strong);flex-direction:column;align-items:flex-start;padding-top:.8rem;display:flex;position:relative}.hero-rail-step:before,.hero-rail-fill{content:"";border-radius:2px;height:2px;position:absolute;top:0;left:0;right:0}.hero-rail-step:before{background:color-mix(in oklch, var(--foreground) 14%, transparent);transition:background-color .18s}.hero-rail-fill{background:var(--primary);transform-origin:0;transform:scaleX(0)}.hero-rail-label{opacity:.5;flex-direction:column;min-width:0;max-width:100%;display:flex}.hero-rail-kind,.hero-rail-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.hero-rail-kind{font-size:.875rem;font-weight:600;line-height:1.4}.hero-rail-title{color:var(--muted-foreground);font-size:.75rem;line-height:1.4}.hero-rail-step:active{transform:scale(.98)}.hero-rail-step:focus-visible{outline:2px solid var(--ring);outline-offset:4px;border-radius:4px}@media (hover:hover) and (pointer:fine){.hero-rail-step:hover:before{background:color-mix(in oklch, var(--foreground) 34%, transparent)}}.hero-closing{display:none}.hero-closing-note{color:var(--muted-foreground);font-size:clamp(.9375rem,1.2vw,1.0625rem)}.hero-closing-line{font-family:var(--font-display);font-variation-settings:"wdth" 104;letter-spacing:-.045em;text-wrap:balance;margin-top:.6rem;font-size:clamp(2.2rem,4.6vw,4.6rem);font-weight:620;line-height:1.02}.hero-closing-action{margin-top:1.5rem}@media (min-width:1024px){.hero-stage{--mw:min(40vw, 40rem);grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center}.hero-headline{white-space:nowrap;font-size:clamp(3.4rem,4.9vw,5.75rem)}}@media (max-width:639px){.hero-avatar{border-radius:12px;width:44px;height:50px}.hero-identity{gap:.7rem;font-size:.8125rem}.hero-headline{margin-top:1.4rem}.hero-actions{gap:.5rem;margin-top:1.25rem}.hero-button{gap:.8rem;min-height:48px;padding:.7rem 1.15rem;font-size:.875rem}.hero-rail-kind{font-size:.8125rem}}@media (prefers-reduced-motion:no-preference) and (min-height:480px){.hero-story[data-film]{height:calc(100svh + var(--film-length));view-timeline:--hero block;view-timeline-inset:0}[data-film] .hero-stage{--mw:min(100vw - 2 * var(--gutter), 40rem, (100svh - 330px) * 1.6);--cloud-x:0px;--cloud-y:max(22svh, calc(600px - 50svh));--cloud-rx:18deg;--cloud-ry:0deg;--cloud-s:.72;--mid-s:calc((var(--cloud-s) + 1) / 2);--end-y:-3svh;--end-s:.94;flex-direction:column;align-items:flex-start;height:100svh;min-height:0;padding-block:6.25rem 2rem;display:flex;position:sticky;top:0}[data-film] .hero-scene{position:absolute;inset:0}[data-film] .hero-mosaic{margin-top:0}[data-film] .hero-tile{visibility:visible}[data-film] .hero-whole,[data-film] .hero-tint{display:block}[data-film] .hero-rail{z-index:2;top:calc(50% + var(--mw) * .3125 + clamp(1rem, 2.6svh, 1.75rem));left:calc(50% - var(--mw) / 2);width:var(--mw);grid-template-columns:repeat(var(--sites), minmax(0, 1fr));gap:clamp(.75rem,2.4vw,1.75rem);display:grid;position:absolute}[data-film] .hero-closing{z-index:2;inset:auto var(--gutter) clamp(1.75rem, 6svh, 4.5rem);text-align:center;pointer-events:none;flex-direction:column;align-items:center;display:flex;position:absolute}[data-film] .hero-closing>*{pointer-events:auto}[data-film] .hero-piece,[data-film] .hero-face[data-site="1"]{animation:hero-piece-in 1.3s var(--ease-out-strong) both;animation-delay:calc(var(--k) * 26ms + .12s)}[data-film] .hero-face[data-site="1"]{animation-name:hero-face-in}[data-film] [data-scene]{animation-duration:1s;animation-timing-function:linear;animation-play-state:paused;animation-fill-mode:both}[data-film] .hero-copy{animation-name:hero-copy-out}[data-film] .hero-hide{animation-name:hero-hide}[data-film] .hero-settle{animation-name:hero-settle}[data-film] .hero-glow{animation-name:hero-glow}[data-film] .hero-mosaic{animation-name:hero-mosaic}[data-film] .hero-tile{animation-name:hero-tile}[data-film] .hero-flip{animation-name:hero-flip}[data-film] .hero-face[data-site="3"],[data-film] .hero-whole,[data-film] .hero-frame,[data-film] .hero-tint{animation-name:hero-fade-in}[data-film] .hero-tint:first-child{animation-name:hero-glow-in}[data-film] .hero-art[data-scene]{animation-name:hero-fade-out}[data-film] .hero-sweep{animation-name:hero-sweep}[data-film] .hero-rail{animation-name:hero-rail}[data-film] .hero-rail-fill{animation-name:hero-rail-fill}[data-film] .hero-rail-label{animation-name:hero-rail-label}[data-film] .hero-closing>*{animation-name:hero-close-in}@media (min-width:1024px){[data-film] .hero-stage{--mw:min(64vw, 1060px, (100svh - 240px) * 1.6);--cloud-x:23vw;--cloud-y:2svh;--cloud-rx:8deg;--cloud-ry:-20deg;--cloud-s:.56;--end-y:-9svh;--end-s:.72;justify-content:center;padding-block:5.5rem 2rem}}}@supports (animation-timeline:view()) and (animation-range:entry 0% entry 100%){@media (prefers-reduced-motion:no-preference) and (min-height:480px){[data-film] [data-scene]{animation-duration:auto;animation-play-state:running;animation-timeline:--hero;animation-range:contain calc(var(--from) * 100%) contain calc(var(--to) * 100%)}[data-film] .hero-stage{content-visibility:auto}}}@keyframes hero-copy-out{to{opacity:0;transform:translateY(-6svh)scale(.96)}}@keyframes hero-hide{to{visibility:hidden}}@keyframes hero-glow{0%{transform:translate3d(var(--cloud-x), var(--cloud-y), 0) scale(.62);animation-timing-function:cubic-bezier(.65,0,.35,1)}54%{transform:translate3d(calc(var(--cloud-x) * .15), calc(var(--cloud-y) * .3), 0) scale(.8);animation-timing-function:cubic-bezier(.23,1,.32,1)}to{transform:translate(0,0)scale(1)}}@keyframes hero-glow-in{0%{opacity:.55;animation-timing-function:cubic-bezier(.65,0,.35,1)}54%{opacity:.8;animation-timing-function:cubic-bezier(.23,1,.32,1)}to{opacity:1}}@keyframes hero-mosaic{0%{transform:translate3d(var(--cloud-x), var(--cloud-y), 0) rotateX(var(--cloud-rx)) rotateY(var(--cloud-ry)) scale3d(var(--cloud-s), var(--cloud-s), var(--cloud-s));animation-timing-function:cubic-bezier(.65,0,.35,1)}54%{transform:translate3d(calc(var(--cloud-x) * .15), calc(var(--cloud-y) * .3), 0) rotateX(calc(var(--cloud-rx) * .4)) rotateY(calc(var(--cloud-ry) * .4)) scale3d(var(--mid-s), var(--mid-s), var(--mid-s));animation-timing-function:cubic-bezier(.23,1,.32,1)}to{transform:translate(0,0)rotateX(0)rotateY(0)scale(1)}}@keyframes hero-settle{0%{animation-timing-function:cubic-bezier(.65,0,.35,1);transform:translate(0,0)scale(1)}to{transform:translate3d(0, var(--end-y), 0) scale3d(var(--end-s), var(--end-s), var(--end-s))}}@keyframes hero-tile{0%{transform:translate3d(var(--x), var(--y), calc(var(--z) * var(--tw))) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));animation-timing-function:cubic-bezier(.65,0,.35,1)}to{transform:translate(0,0)rotateX(0)rotateY(0)rotate(0)}}@keyframes hero-fade-in{0%{opacity:0}to{opacity:1}}@keyframes hero-fade-out{to{opacity:0}}@keyframes hero-sweep{0%{transform:translate(-120%)skew(-14deg)}to{transform:translate(300%)skew(-14deg)}}@keyframes hero-rail{0%{opacity:0;visibility:hidden;transform:translateY(.75rem)}6%,94%{opacity:1;visibility:visible;transform:translate(0,0)}to{opacity:0;visibility:hidden;transform:translateY(.75rem)}}@keyframes hero-rail-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes hero-rail-label{0%,to{opacity:.5}12%,88%{opacity:1}}@keyframes hero-close-in{0%{opacity:0;visibility:hidden;animation-timing-function:cubic-bezier(.23,1,.32,1);transform:translateY(1.5rem)}to{opacity:1;visibility:visible;transform:translate(0,0)}}@keyframes hero-piece-in{0%{transform:translate3d(0, 0, calc(var(--tw) * -3)) scale(.9)}}@keyframes hero-face-in{0%{opacity:0}}
