@import "https://fonts.cdnfonts.com/css/pp-neue-montreal";
.hero{width:100%;height:100svh;padding:1.5rem 2rem;display:flex;position:relative;overflow:hidden}.hero:before,.hero:after{content:"";pointer-events:none;z-index:0;width:100%;position:fixed;left:0}.hero:before{background:linear-gradient(#06080ed1 0%,#06080e73 40%,#06080e00 100%);height:14rem;top:0}.hero:after{background:linear-gradient(#06080e00 0%,#06080e1f 45%,#06080e61 100%);height:16rem;bottom:0}.hero h1,.hero h2,.hero-role{text-transform:uppercase;color:#fff;mix-blend-mode:difference;white-space:nowrap;font-family:PP Neue Montreal,sans-serif;font-weight:500}.hero-char-mask{vertical-align:bottom;margin-bottom:-.06em;padding-bottom:.06em;display:inline-block;overflow:hidden}.hero-char{will-change:transform;display:inline-block}.word{will-change:transform;position:relative}.hero-desktop{align-items:flex-end}.hero-header{visibility:hidden;flex-direction:column;width:100%;display:flex;position:relative}.hero-header-row{flex:1;align-items:center;width:100%;display:flex}.hero-header-row:first-child,.hero-header-row:nth-child(3){justify-content:flex-end}.hero-header-row:nth-child(2){gap:2rem}.hero-header h1{letter-spacing:-.02em;line-height:.85}.hero-header-row:first-child h1{font-size:clamp(2.5rem,10vw,15rem)}.hero-header-row:nth-child(2) h1,.hero-header-row:nth-child(3) h1{font-size:clamp(2rem,6.4vw,9.5rem)}.hero-desktop .hero-header-img{flex-shrink:0;width:240px;height:130px;position:relative}.hero-footer{z-index:2;mix-blend-mode:difference;position:absolute;bottom:1.75rem;left:2rem}.hero-desktop .hero-role{font-family:var(--font-dm-mono), monospace;letter-spacing:.16em;min-height:1.2em;font-size:clamp(.85rem,.55rem + .5vw,1.15rem);font-weight:500;line-height:1.2}.hero-mobile{justify-content:center;align-items:center;padding:1rem}.hero-center{z-index:2;mix-blend-mode:difference;text-align:center;visibility:hidden;flex-direction:column;align-items:center;display:flex;position:relative}.hero-name{letter-spacing:-.02em;font-size:24vw;line-height:.82;display:inline-block}.hero-surname{letter-spacing:-.01em;margin-top:.35em;line-height:1;display:inline-block}.hero-mobile .hero-role{font-family:var(--font-dm-mono), monospace;letter-spacing:.18em;min-height:1.2em;margin-top:1.5rem;font-size:.95rem;font-weight:500;line-height:1.2}.hero-mobile .hero-header-img{z-index:1;width:52vw;height:32vw;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.hero-mobile .hero-header-img img{object-position:var(--focus,50% 50%)}.hero-header-img{will-change:transform}.hero-header-img img{object-fit:cover;will-change:opacity;opacity:0;width:100%;height:100%;position:absolute;top:0;left:0}.hero-header-img img:first-child{opacity:1}.hero .hero-header-img.is-fullscreen{z-index:-1;width:100%;height:100%;position:fixed;inset:0;overflow:hidden;transform:none}.hero-top{z-index:3;filter:drop-shadow(0 1px 6px #00000059);gap:1.5rem;display:flex;position:absolute;top:1.75rem;left:2rem;right:2rem}.hero-top p{color:#fff;line-height:1;font-family:var(--font-dm-mono), monospace;text-transform:uppercase;font-weight:600}.hero-index{pointer-events:none;flex-direction:column;flex:2;gap:.75rem;display:flex}.hero-index-count{gap:.5rem;display:flex}.hero-index-count .revealer>p,.hero-span .revealer>a{will-change:transform;display:block}.hero-index-current{display:inline-block}.hero-index-count .revealer:first-child p{overflow:hidden}.hero-index-track{background-color:#ffffff4d;width:6rem;height:1.5px}.hero-index-bar{transform-origin:0;background-color:#fff;width:100%;height:100%}.hero-span{flex:1}.hero-span .revealer{padding:.4rem 0}.hero-top a.hero-profile-link{color:#fff;font-family:var(--font-dm-mono), monospace;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border-bottom:1px solid #ffffff8c;align-items:center;gap:.4rem;padding:.3rem 0 .35rem;font-size:.72rem;font-weight:500;line-height:1;transition:border-color .3s;display:inline-flex}.hero-top a.hero-profile-link:hover{border-color:#fff}.hero-profile-arrow{transition:transform .4s cubic-bezier(.16,1,.3,1);display:inline-block}.hero-profile-link:hover .hero-profile-arrow{transform:translate(3px,-3px)}@media (max-width:1000px){.hero:before{height:8rem}.hero-top{top:1.5rem;left:1rem;right:1rem}.hero-span{display:none}}