/* Standalone page illustrations: each hero loads one complete, transparent image. */
.page-hero--illustrated,
.studio-hero--illustrated {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.92fr);
  grid-auto-rows: min-content;
  align-items: center;
  column-gap: clamp(1.25rem, 4vw, 3.5rem);
  max-width: none;
}

.page-hero--illustrated {
  /* Let the copy and illustration define the hero height; a fixed desktop
     minimum leaves a large empty band under shorter page content. */
  min-height: 0;
  margin-bottom: 16px;
}

.studio-hero--illustrated {
  min-height: 0;
  padding-bottom: 16px;
}

.page-hero--illustrated + .subnav {
  margin-top: 12px;
}

.page-hero--illustrated > :not(.page-hero-art),
.studio-hero--illustrated > :not(.page-hero-art) {
  grid-column: 1;
}

.page-hero-art {
  grid-column: 2;
  grid-row: 1 / span 5;
  justify-self: end;
  align-self: center;
  width: min(100%, 500px);
  aspect-ratio: 1.42;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 44%, rgba(0, 0, 0, 0.92) 62%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, #000 44%, rgba(0, 0, 0, 0.92) 62%, transparent 100%);
  filter: drop-shadow(0 18px 28px rgba(70, 92, 156, 0.12));
  opacity: 0.94;
  pointer-events: none;
}

.page-hero-art--about { background-image: url('/assets/sweb2/images/page-hero-about-20261023.png'); }
.page-hero-art--cases { background-image: url('/assets/sweb2/images/page-hero-cases-20261023.png'); }
.page-hero-art--catalogflow { background-image: url('/assets/sweb2/images/page-hero-catalogflow-20261023.png'); }
.page-hero-art--service { background-image: url('/assets/sweb2/images/page-hero-service-20261023.png'); }
.page-hero-art--pricing { background-image: url('/assets/sweb2/images/page-hero-pricing-20261023.png'); }
.page-hero-art--requirements { background-image: url('/assets/sweb2/images/page-hero-requirements-20261023.png'); }
.page-hero-art--sandbox { background-image: url('/assets/sweb2/images/page-hero-sandbox-20261023.png'); }
.page-hero-art--yuekebang { background-image: url('/assets/sweb2/images/page-hero-yuekebang-20261023.png'); }
.page-hero-art--privacy { background-image: url('/assets/sweb2/images/page-hero-privacy-20261023.png'); }

@media (max-width: 820px) {
  .page-hero--illustrated,
  .studio-hero--illustrated {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    row-gap: 0;
    min-height: 0;
  }

  .page-hero--illustrated > :not(.page-hero-art),
  .studio-hero--illustrated > :not(.page-hero-art) {
    grid-column: 1;
  }

  .page-hero-art {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
    width: min(100%, 440px);
    margin: -0.25rem auto 0;
  }
}

@media (max-width: 480px) {
  .page-hero-art {
    width: min(100%, 380px);
    aspect-ratio: 1.32;
  }
}