/* An intentionally small accent vocabulary: one pedestal and one supporting object.
   Backgrounds and device groups form separate stacking contexts at every breakpoint. */
.accent-image { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
.accent-backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: 24px; background: #f6f2ea; pointer-events: none; user-select: none; }
.accent-backdrop > .accent-image { width: 100%; height: 100%; object-fit: fill; }

.hero-art.accent-stage { width: 100%; max-width: 680px; height: auto; min-height: 0; aspect-ratio: 3 / 2; align-self: center; position: relative; isolation: isolate; perspective: none; }
.hero-art.accent-stage > .hero-devices { position: absolute; inset: 0; z-index: 2; isolation: isolate; }
.hero-devices > .device { position: absolute; }
.hero-devices > .device-macbook { width: 65%; left: 20%; top: 4%; transform: rotate(-2deg); z-index: 1; }
.hero-devices > .device-ipad-landscape { width: 38%; left: 5%; top: 26%; transform: rotate(-5deg); z-index: 2; }
.hero-devices > .device-iphone { width: 17%; right: 3%; top: 17%; transform: rotate(4deg); z-index: 3; }
.hero-art.accent-stage > .art-caption { z-index: 3; right: 0; left: auto; bottom: -25px; color: var(--muted); }
.direction-premiere .hero-art.accent-stage { max-width: 870px; }
.direction-studio .hero-devices > .device-macbook { transform: rotate(2deg); }

/* A single quiet object replaces the large monogram; it never shares a device stage. */
.about-accent { width: min(100%, 390px); justify-self: center; align-self: center; overflow: hidden; border-radius: 28px; background: #f6f2ea; pointer-events: none; }
.about-accent .accent-image { aspect-ratio: 3 / 2; object-fit: contain; }

/* The comparison index previews the same pedestal/device relationship. */
.option-mini { height: 380px; }
.option-mini h2 { margin-top: 24px; }
.option-stage { position: absolute; width: 65%; max-width: 315px; aspect-ratio: 3 / 2; right: 2%; bottom: -3px; isolation: isolate; }
.option-stage .accent-backdrop { border-radius: 16px; }
.option-stage > .option-device { position: absolute; width: 68%; left: 17%; top: 2%; transform: rotate(-2deg); z-index: 2; }

/* One pedestal per case study, limited to the interactive prototype.
   Artwork stays outside .device-screen, preserving original pixels and controls. */
.pedestal-display { position: relative; isolation: isolate; padding: 24px 0 26%; max-width: 1050px; margin: 0 auto; overflow: hidden; border-radius: 22px; background: #f6f2ea; }
.pedestal-display > .accent-backdrop { inset: auto -8% 0; width: 116%; height: auto; aspect-ratio: 3 / 2; border-radius: 22px; }
.pedestal-display > .device { position: relative; z-index: 2; width: 84%; margin: 0 auto; }
.pedestal-display:has(> .device-ipad-landscape) { max-width: 920px; }
.pedestal-display > .device .device-screen { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #a5a5a5 #eee; }
.pedestal-display .prototype-screen { height: auto; overflow: visible; border: 0; border-radius: 0; }
.pedestal-display .prototype-screen img { display: block; width: 100%; height: auto; min-height: 0; object-fit: initial; }
.pedestal-display > .device .prototype-app { border: 0; border-radius: 0; }

@media (max-width: 760px) {
  .hero-art.accent-stage { width: 100%; max-width: 450px; height: auto; min-height: 0; margin-top: 10px; }
  .hero-art.accent-stage > .art-caption { bottom: -22px; font-size: 10px; }
  .accent-backdrop { border-radius: 18px; }
  .about-accent { width: min(100%, 320px); align-self: center; }
  .option-mini { height: 350px; }
  .option-card .option-mini h2 { font-size: 30px; line-height: 1.08; max-width: 100%; margin-top: 20px; }
  .option-stage { width: 68%; max-width: 270px; }
  .pedestal-display { padding-top: 14px; padding-bottom: 26%; border-radius: 16px; }
}