/* Artwork layers keep the lettering independent from viewport cropping. */
.hero{height:100svh;min-height:0;max-height:none;scroll-margin-top:0}
.hero-art{inset:0;height:100%;min-height:0}
.hero-art img{animation:none;object-fit:cover;object-position:center}
.hero-logo{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:min(56vw,680px);height:auto;max-height:42svh;object-fit:contain;z-index:2;animation:logo-arrive 750ms var(--ease) both}
.hero-car{position:absolute;right:0;bottom:8%;width:min(49vw,700px);height:auto;max-height:62svh;object-fit:contain;object-position:right bottom;z-index:0;opacity:.9;animation:celta-start 1450ms var(--ease) both;transform-origin:65% 78%;pointer-events:none}
.hero-copy,.hero-bottom{z-index:3}.hero-copy{bottom:55px}.hero:after{z-index:1;height:32%}
.header{z-index:5}.header nav{margin-left:auto;margin-right:30px}.wordmark{color:var(--white);background:var(--ink);padding:8px 10px;line-height:.85}.wordmark-dot{display:none}
.band{scroll-margin-top:0}.band-stage{--portrait-h:min(78svh,700px);height:var(--portrait-h);max-height:none;padding:0;position:relative;background:url('assets/trio-estudio.png') center 28%/cover;isolation:isolate}
.band-stage:before{content:"";position:absolute;inset:0;background:rgba(15,20,29,.8);z-index:-1}
.band-stage:after{display:none}.band-frame{position:relative;width:min(100%,calc(var(--portrait-h) * 1.5));height:100%;margin:auto;isolation:isolate}
.band-frame:after{content:"";position:absolute;inset:58% 0 0;background:linear-gradient(transparent,rgba(7,12,19,.86));pointer-events:none;z-index:0}
.band-background{height:100%;width:100%;aspect-ratio:1.5;object-fit:contain;object-position:center}
.portrait-labels{left:0;right:0;bottom:6%;padding:0 3%;gap:10px;z-index:1}.portrait-label h3{font-size:clamp(18px,2.1vw,28px)}.portrait-label p{font-size:16px;margin-top:6px}
.portrait-label h3 a{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.portrait-label h3 svg{width:15px;height:15px;stroke-width:2;flex:none}
@keyframes celta-start{0%{opacity:0;transform:translate(70px,0) scale(.97)}35%{opacity:.9;transform:translate(9px,0) scale(1)}48%{transform:translate(7px,-2px) rotate(.3deg)}60%{transform:translate(5px,1px) rotate(-.2deg)}74%{transform:translate(2px,-1px) rotate(.1deg)}100%{opacity:.9;transform:translate(0,0) rotate(0)}}
@keyframes logo-arrive{from{opacity:0;transform:translate(-50%,calc(-50% + 12px))}to{opacity:1;transform:translate(-50%,-50%)}}
@media(min-width:761px){html{scroll-snap-type:y proximity;scroll-padding-top:0}.hero,.band{scroll-snap-align:start}.band{scroll-snap-stop:always}.reel-image{height:min(48svh,440px);aspect-ratio:auto}.reel-image>img{object-fit:cover;object-position:center 30%}.reel-second{margin-top:40px}}
@media(min-width:761px) and (max-height:700px){.header{height:75px}.hero-logo{top:39%;max-height:38svh;width:min(50vw,560px)}.hero-copy{bottom:43px;gap:14px}.hero-copy>p{font-size:17px}.hero-copy .button,.hero-copy>.text-link{min-height:50px}.hero-bottom{padding-top:7px;padding-bottom:7px}.portrait-label h3{font-size:20px}.portrait-label p{font-size:14px}}
@media(max-width:760px){.header nav{margin:auto;gap:16px}.wordmark{font-size:20px;padding:7px}.header-action{padding:10px}.hero{min-height:0;height:100svh;max-height:none}.hero-logo{width:88%;max-height:34svh;top:34%}.hero-car{width:88%;max-height:44svh;bottom:22%;right:-9%;opacity:.9}.hero-copy{bottom:58px;gap:5px}.hero-copy>p{font-size:16px}.hero-copy .button{min-height:54px}.band-stage{height:auto;max-height:none;padding:0;background-size:cover}.band-frame{width:100%;height:auto;padding-bottom:100px}.band-background{height:auto;width:100%;aspect-ratio:1.5;object-fit:contain}.portrait-labels{bottom:13px;padding:0 8px;gap:5px}.portrait-label h3{font-size:clamp(13px,3.8vw,20px);line-height:1.25}.portrait-label h3 a{display:block;min-height:40px}.portrait-label h3 svg{width:12px;height:12px;vertical-align:middle;margin-left:2px}.portrait-label p{font-size:13px;margin-top:4px}.band-frame:after{inset:50% 0 0}.hero:after{height:42%}}
@media(prefers-reduced-motion:reduce){html{scroll-snap-type:none}.hero-car,.hero-logo{animation:none}.hero-car{transform:none}.hero-logo{transform:translate(-50%,-50%)}.band{scroll-snap-stop:normal}}

html{scroll-padding-top:0}