/* Trigon entrance and continuous brand motion. */
:root{--hero-headline-gap-10:-10px;--hero-headline-gap-8:-8px}
main{padding-top:0}
.intro-hero{min-height:740px;height:100svh;max-height:1100px;max-width:none;overflow:hidden;isolation:isolate}
.intro-content{position:absolute;z-index:3;top:50%;left:0;width:100%;padding:0 var(--gutter);text-align:center;transform:translateY(-50%)}
.intro-eyebrow{font-size:24px;line-height:32px;font-weight:600;color:var(--muted)}
.intro-content h1{margin:24px 0 0;font-size:60px;line-height:68px;letter-spacing:-2.4px;max-width:none}
.intro-content h1 span+span{font-size:96px;line-height:104px;margin-top:var(--hero-headline-gap-10);letter-spacing:-3.84px;color:var(--accent)}
.headline-line{display:block}
.intro-description{max-width:774px;margin:32px auto 0;font-size:22px;line-height:32px;color:var(--quiet)}
.intro-action{margin-top:32px}
.intro-action .hero-cta{width:176px}
.intro-logo-anchor{position:absolute;z-index:4;top:50%;left:50%;width:359.375px;height:100px;transform:translate(-50%,-50%);pointer-events:none;visibility:hidden}
.intro-logo-scale{width:359.375px;height:100px;transform-origin:center}
.intro-lockup{position:relative;width:359.375px;height:100px}
.intro-symbol-position{position:absolute;left:129.6875px;top:0;width:100px;height:100px}
.intro-symbol{transform-origin:50% 50%}
.intro-wordmark{position:absolute;inset:0;clip-path:inset(0 0 0 109px)}
.intro-wordmark img{transform:scale(1.5625);transform-origin:top left}
.intro-background{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.24}
.motion-field{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.motion-rings{transform-origin:0 0}
.motion-path{fill:none;stroke:#9d285e;stroke-width:.8;stroke-linecap:round;opacity:.5}
.motion-trail{fill:none;stroke:#df007b;stroke-width:1.15;stroke-linecap:round;opacity:.6}
.intro-halo{position:absolute;inset:0;background:radial-gradient(ellipse 290px 250px at 50% 50%,#df007b12,transparent 100%)}
.intro-scroll{position:absolute;bottom:30px;left:50%;z-index:5;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--quiet);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:12px 24px}
.scroll-line{height:32px;width:1px;background:linear-gradient(var(--accent),#df007b00)}
.skip-intro,.replay-intro{border:1px solid #2d2b3455;background:#09090cbb;backdrop-filter:blur(12px);color:var(--muted);font-size:12px;line-height:20px;padding:10px 14px;border-radius:24px;z-index:40;align-items:center;gap:10px}
.skip-intro{position:absolute;right:28px;bottom:30px;display:none}
.replay-intro{position:fixed;right:20px;bottom:20px;display:flex}
.replay-intro span{font-size:17px}
.skip-intro:hover,.replay-intro:hover{color:var(--text);border-color:#df007b88}
html.intro-running .intro-logo-anchor{visibility:visible}
html.intro-running .skip-intro{display:flex}
html.intro-running .replay-intro{display:none}
html.intro-running .navigation{pointer-events:none}
html.intro-running .intro-content{pointer-events:none}
html.intro-running .intro-scroll{pointer-events:none}
.intro-content h1:focus{outline:none}
@media(min-width:1440px){.intro-content{padding-inline:max(80px,calc((100vw - 1280px)/2))}}
@media(max-width:1100px){.intro-content h1{font-size:52px;line-height:60px}.intro-content h1 span+span{font-size:76px;line-height:84px;margin-top:var(--hero-headline-gap-8);letter-spacing:-3px}.intro-description{font-size:20px;line-height:30px;max-width:680px}}
@media(max-width:600px){.intro-hero{min-height:680px;max-height:none}.intro-content{padding-inline:24px}.intro-eyebrow{font-size:15px;line-height:24px}.intro-content h1{font-size:clamp(29px,7.9vw,44px);line-height:1.16;letter-spacing:-.04em;margin-top:24px}.intro-content h1 span+span{font-size:clamp(37px,10vw,58px);line-height:1.12;letter-spacing:-.04em;margin-top:0}.intro-description{font-size:18px;line-height:28px;max-width:390px;margin-top:24px}.intro-action{margin-top:28px}.intro-logo-scale{transform:scale(.78)}.intro-scroll{bottom:20px}.replay-intro{right:12px;bottom:12px;font-size:11px;padding:8px 12px}.skip-intro{right:16px;bottom:28px}.intro-background{opacity:.2}}
@media(max-height:700px) and (min-width:601px){.intro-hero{height:700px;min-height:700px}}
@media(prefers-reduced-motion:reduce){.intro-background{display:none}.intro-logo-anchor,.skip-intro{display:none!important}}

/* The field is prepared from the original SVG and moved as a composited image. */
.motion-position{position:absolute;left:50%;top:50%;width:max(125vw,200svh);height:max(125vw,200svh);transform:translate(-50%,-50%)}
.motion-entrance,.motion-spin{width:100%;height:100%;transform-origin:50% 50%}
.motion-entrance{transform:rotate(255.92deg) scale(1.28)}
.motion-field{position:static;display:block;width:100%;height:100%;contain:paint}
.motion-spin{animation:hero-flow 90s linear infinite;animation-play-state:paused}
.hero-in-view:not(.intro-running):not(.page-hidden) .motion-spin{animation-play-state:running;will-change:transform}
html.intro-running .intro-symbol,html.intro-running .intro-symbol-position,html.intro-running .intro-wordmark,html.intro-running .intro-lockup,html.intro-running .intro-content,html.intro-running [data-reveal],html.intro-running .navigation,html.intro-running .motion-entrance{will-change:transform,opacity}
.intro-background{contain:paint}
@keyframes hero-flow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.motion-spin{animation:none}}

/* Prepared bitmap layers avoid vector rasterization and clip-path work during the intro. */
.intro-symbol-rotation{width:100px;height:100px;transform:translateZ(0);backface-visibility:hidden}
.intro-symbol{transform:translateZ(0);backface-visibility:hidden}
.intro-wordmark{inset:0 auto auto 109.375px;width:250px;height:100px;clip-path:none;backface-visibility:hidden}
.intro-wordmark img{width:250px;height:100px;transform:none}
html.intro-preparing .intro-logo-anchor{visibility:visible}
html.intro-preparing .intro-lockup{opacity:0;transform:translate3d(0,0,0);will-change:transform,opacity}
html.intro-preparing .intro-symbol,html.intro-preparing .intro-symbol-rotation,html.intro-preparing .intro-symbol-position,html.intro-preparing .intro-wordmark,html.intro-running .intro-symbol-rotation{will-change:transform,opacity}
@media(max-width:1100px),(hover:none),(pointer:coarse){.intro-logo-anchor,.skip-intro{display:none!important}}