/* One joined wordmark: the metal fold sits physically in front of the E. */
.brand-scene { perspective: 1100px; }
.mark-preparing .z-entry, .mark-preparing .brand-word-svg { opacity: 0; }
.brand-type {
  font-size: inherit !important; line-height: 1; background: none;
  -webkit-text-fill-color: initial; transform: none; overflow: visible;
}
.word-motion, .brand-word-svg { display: block; width: 100%; height: 100%; }
.brand-word-svg { overflow: visible; transform-origin: 50% 100%; }
.word-glyphs { font-family: Archivo, 'Arial Black', Arial, sans-serif; font-size: 330px; font-weight: 900; letter-spacing: -24px; }
.z-wrapper { pointer-events: none; }
.z-entry, .z-motion, .z-idle { position: relative; width: 100%; height: 100%; transform-origin: 59% 45%; }
.z-motion, .word-motion { transition: transform 220ms var(--ease-out); }
.metal-z {
  position: absolute; inset: 0; width: 100%; height: 100%; max-height: none;
  object-fit: fill; transform: none; transition: none;
  clip-path: polygon(21.5% 5.4%,83.8% 8.6%,50% 75%,99% 91.2%,3.6% 94.2%,45.7% 32.9%,7.2% 32.6%);
  filter: drop-shadow(6px 14px 14px #0009);
}
.z-shine {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  mask: url('assets/metal-z-overlap.webp') center / 100% 100% no-repeat;
  -webkit-mask: url('assets/metal-z-overlap.webp') center / 100% 100% no-repeat;
  clip-path: polygon(21.5% 5.4%,83.8% 8.6%,50% 75%,99% 91.2%,3.6% 94.2%,45.7% 32.9%,7.2% 32.6%);
}
.z-shine-beam {
  position: absolute; left: -55%; top: -40%; width: 42%; height: 180%;
  background: linear-gradient(105deg,transparent,#fff0 24%,#fff5 49%,#fff0 74%,transparent);
  transform: translateX(0) rotate(15deg); opacity: 0;
}
.is-motion-paused .z-idle, .is-motion-paused .z-shine-beam,
.is-page-hidden .z-idle, .is-page-hidden .z-shine-beam { animation-play-state: paused !important; }
.is-motion-paused .z-motion, .is-motion-paused .word-motion { transform: none !important; }

@media (prefers-reduced-motion:no-preference) {
  .z-idle { animation: metal-hover 5.6s cubic-bezier(.77,0,.175,1) infinite alternate; }
  .z-shine-beam { animation: metal-light 7.5s linear infinite; }
  @keyframes metal-hover {
    from { transform: translate3d(0,-7px,0) rotate(-.8deg); }
    to { transform: translate3d(0,7px,0) rotate(.8deg); }
  }
  @keyframes metal-light {
    0%, 48% { transform: translateX(0) rotate(15deg); opacity: 0; }
    53% { opacity: .5; }
    69% { transform: translateX(360%) rotate(15deg); opacity: .5; }
    74%, 100% { transform: translateX(360%) rotate(15deg); opacity: 0; }
  }
}
@media (min-width:901px) and (min-aspect-ratio:6/5) {
  .hero {
    container-type: inline-size;
    --composition-width: min(1660px,calc(100vw - 64px));
    min-height: calc(var(--composition-width) * .57 + 70px);
    max-height: none;
  }
  .brand-scene { top: 1.6cqw; height: 26.3cqw; }
  .z-wrapper { left: 0; top: -7.5%; width: 41.8%; height: 107%; z-index: 2; }
  .brand-type { position: absolute; left: 30.7%; top: 4%; width: 71.6%; height: 74%; margin: 0; }
  .hero-byline { top: 23.5cqw; }
  .project-stage { top: 30.4cqw; }
  .gallery-toolbar { gap: 22px; }
}
@media (max-width:1100px) {
  .gallery-toolbar { flex-wrap: wrap; }
}
@media (max-width:900px), (max-aspect-ratio:6/5) {
  .brand-scene { display: block; position: relative; height: 28vw; min-height: 120px; max-height: 245px; margin-top: 22px; }
  .z-wrapper { position: absolute; left: -2%; top: -9%; width: 44%; height: 112%; display: block; }
  .brand-type { position: absolute; left: 29.5%; top: 5%; width: 72%; height: 77%; margin: 0; }
  .gallery-toolbar { min-height: 165px; }
}
@media (max-width:767px) {
  .brand-scene { min-height: 114px; height: 27vw; margin-top: 20px; }
  .z-wrapper { width: 44.5%; height: 115%; }
  .brand-type { left: 29%; width: 73%; height: 78%; }
}
@media (prefers-reduced-motion:reduce) {
  .z-entry,.z-motion,.z-idle,.word-motion,.brand-word-svg { transform: none !important; }
  .z-shine { display: none; }
}