/* Viewport-height Hero; grow naturally on short screens to keep all copy readable. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height:auto;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  padding:80px var(--page-padding);
  cursor: default;
}
.hero .hero-hello {
  position: absolute;
  top:0;
  left: 50%;
  transform: translateX(-50%);
  width:min(814px,100%);
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: -1;
}
.hero-composition { position:relative;width:100%;padding-top:clamp(100px,7.291667vw,140px); }
.hero h1 { position: relative; font:800 70px/1.2 var(--font-heading); }
.hero-description { position: relative; margin:24px auto 0; max-width:577px; }
.hero + .work { margin-top:0; }
.image-trail-layer { position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden; }
.image-trail-item { position:absolute;left:0;top:0;aspect-ratio:1;pointer-events:none;user-select:none;-webkit-user-drag:none; }
.image-trail-item img { display:block;width:100%;height:100%;max-width:none;object-fit:cover;will-change:transform,opacity;pointer-events:none;user-select:none;-webkit-user-drag:none; }
@media(max-width:1199px) { .hero h1 { font-size:clamp(48px,6vw,70px); } }
@media(max-width:767px) {
  .hero-composition { padding-top:80px; }
  .hero h1 { font-size:clamp(34px,7.8vw,56px); }
  .hero-description { font-size:16px;line-height:25px; }
  .contact h2 { font-size:clamp(36px,6.8vw,64px); }
}
@media(prefers-reduced-motion:reduce), (pointer:coarse) { .image-trail-layer { display:none; } }

/* Background lettering and copy share one scroll progress and visual anchor. */
.hero-background { position:absolute;inset:0;z-index:-1;pointer-events:none;transform-origin:center var(--hero-content-top,0px); }
.hero-content { transform-origin:center top; }
.hero-scroll + .work { margin-top:0; }