/* Final logo treatment: use the supplied standalone Xingyan symbol. */
.about-hero-logo-mark{
  position:relative;
  width:clamp(300px,28vw,500px);
  aspect-ratio:auto;
  overflow:visible;
}
.about-hero-logo-mark img{
  position:static;
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  transform:none;
  mix-blend-mode:screen;
  filter:drop-shadow(0 24px 60px rgba(0,22,203,.22));
}

.about-hero-copy h1 .production-hero-opening{white-space:nowrap}

/* Tablet and phone: keep the symbol in the upper-right, outside the text flow. */
@media(max-width:1050px){
  .about-hero{position:relative;display:block;min-height:auto;padding-top:125px}
  .about-hero-logo{
    position:absolute;
    z-index:1;
    right:5vw;
    top:86px;
    width:clamp(92px,15vw,150px);
    height:auto;
    min-height:0;
    margin:0;
    display:block;
    aspect-ratio:auto;
  }
  .about-hero-logo:before,.about-hero-logo:after{display:none}
  .about-hero-logo-mark{width:100%;aspect-ratio:auto;overflow:visible}
  .about-hero-logo-mark img{position:static;width:100%;transform:none;filter:drop-shadow(0 12px 28px rgba(0,22,203,.25))}
}

@media(max-width:640px){
  .about-hero{padding-top:105px}
  .about-hero-logo{right:18px;top:73px;width:96px}
  .about-hero-copy h1 .production-hero-opening{font-size:31px;letter-spacing:-.08em}
  .hero-actions{width:100%;gap:6px}
  .hero-actions .pill{min-width:0;flex:1;padding:0 8px;font-size:9px}
}

/* Portrait keeps two cards, but never compresses the 4:5 cover to fit a fixed card ratio. */
@media(orientation:portrait){
  .related-grid,.related-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
  .related-grid .related-case-card,.related-grid .related-case-card:nth-child(even){height:auto;aspect-ratio:auto}
  .related-grid .related-case-card figure{flex:0 0 auto;width:100%;height:auto;aspect-ratio:4/5}
}