.hero{height:100vh;height:100dvh;min-height:0;max-height:none;isolation:isolate;touch-action:pan-y}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-frame{position:absolute;inset:0;opacity:0;transition:none;--drift-start:translate3d(.3%,-.15%,0) scale(1.012);--drift-end:translate3d(-.3%,.15%,0) scale(1.065)}
.hero-frame.is-active{opacity:1;transition:opacity 3.5s ease-in-out}
.hero-image,.hero .hero-frame .hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 52%;animation:none;transition:none;transform:var(--drift-start);will-change:transform}
.hero .hero-frame.is-moving .hero-image{animation:hero-drift 9.5s linear both}
.hero.is-paused .hero-frame.is-moving .hero-image{animation-play-state:paused}
.hero-shade{z-index:3;pointer-events:none}
.hero-content,.hero-bottom,.scroll-hint{z-index:4}
.hero-project{transition:opacity .22s,transform .35s}
.hero-project.is-changing{opacity:0;transform:translateY(7px)}


.hero-playback{position:relative;flex-shrink:0}
.hero-playback[hidden]{display:none}
.playback-icon{display:block;position:relative;width:12px;height:14px;margin:auto}
.playback-icon:before,.playback-icon:after{content:'';position:absolute;top:1px;bottom:1px;width:3px;background:currentColor}
.playback-icon:before{left:1px}.playback-icon:after{right:1px}
.hero-playback.is-paused .playback-icon:before{width:0;height:0;left:3px;top:0;background:none;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:10px solid currentColor}
.hero-playback.is-paused .playback-icon:after{display:none}
.hero-announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@keyframes hero-drift{from{transform:var(--drift-start)}to{transform:var(--drift-end)}}
@media(max-width:650px){.hero-bottom{align-items:flex-end}.hero-controls{gap:7px}.hero-controls .circle{width:44px;height:44px}.hero-project{max-width:calc(100% - 160px)}.hero-project>span{font-size:17px}.hero-project small{font-size:11px;line-height:1.6}.hero-frame{transition-duration:3.5s}}
@media(max-width:360px){.hero-bottom{flex-wrap:wrap;gap:18px}.hero-project{max-width:100%;width:100%}.hero-controls{margin-left:auto}.hero-content{top:26%}}
@media(prefers-reduced-motion:reduce){.hero .hero-frame.is-moving .hero-image{animation:none!important;transform:none;will-change:auto}.hero-frame,.hero-project{transition:none!important}.hero-project.is-changing{opacity:1;transform:none}}

@media(max-width:650px){.hero h1{font-size:clamp(44px,13vw,60px)}}
@media(max-height:550px){
  .site-header{padding-top:16px;padding-bottom:16px}
  .site-header .brand-logo{width:180px}
  .hero-content{top:29%}
  .hero-content .eyebrow{margin-bottom:12px;font-size:10px}
  .hero h1{font-size:clamp(32px,8.4vh,48px);margin-bottom:16px}
  .hero-content .text-link{padding-bottom:5px;font-size:13px}
  .hero-bottom{bottom:18px;padding-top:12px}
  .hero-project>span{font-size:18px}
  .scroll-hint{display:none}
}
