.hero{position:relative;min-height:clamp(520px,82vh,860px);display:flex;align-items:flex-end;color:var(--fg);overflow:hidden}
.hero__in{position:relative;z-index:2;padding-block:calc(var(--header-h) + 48px) clamp(40px,6vw,88px)}
.hero__label{margin-bottom:20px}
.hero__title{max-width:14ch;font-size:clamp(46px,30.38px + 4.6vw,112px)}
.hero__title{overflow-wrap:break-word;hyphens:manual}
@media (max-width:600px){.hero .hero__title{max-width:none}.hero__title{font-size:clamp(22px,6.7vw,40px)}}
.hero__title .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.hero__title .w>span{display:inline-block;transform:translateY(105%);animation:hero-rise 900ms var(--ease) forwards;animation-delay:calc(var(--i) * 90ms + 150ms)}
@keyframes hero-rise{to{transform:none}}
.hero__sub{margin-top:24px;max-width:34ch;font-weight:400}
.hero__text{margin-top:10px;max-width:46ch;color:rgba(249,249,249,.8)}
.hero .btn{margin-top:26px}
.hero__scroll{position:absolute;z-index:3;left:var(--gutter);bottom:28px;width:44px;height:44px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;transition:transform var(--base) var(--ease)}
.hero__scroll:hover{transform:translateY(4px)}
.hero--work .hero__in{padding-bottom:clamp(88px,10vw,132px)}
.hero--home .hero__title{max-width:11ch}
.hero--about .hero__title,.hero--playbook .hero__title{max-width:12ch}
.hero--playbook{min-height:clamp(480px,70vh,720px)}
.hero--playbook .bg-media::after{background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.55))}
.hero--blog,.hero--contact{min-height:clamp(380px,54vh,560px);align-items:center}
.hero--blog{background:#151515}
.hero--blog .hero__in{padding-top:calc(var(--header-h) + 40px)}
.hero--blog .hero__title{max-width:none;text-align:left}
.hero--contact .hero__title{max-width:9ch}
.hero__contact{display:grid;gap:4px;margin-top:20px;font-size:var(--fs-h5)}
.hero__contact a{text-decoration:none}.hero__contact a:hover{text-decoration:underline}
body.no-panel .hero--blog .hero__in{max-width:1280px}
@media (max-width:767px){.hero{min-height:clamp(480px,78vh,720px)}.hero__title{max-width:none}}
@media (prefers-reduced-motion:reduce){.hero__title .w>span{transform:none;animation:none}}