/* ── Hero Illustration (inline SVG) ───────────────────────────────────────
   The SVG is inlined via Jinja2 include so GSAP can target named groups.
   This file handles sizing, overflow, and mobile visibility only.
   All motion lives in landing_animations.js → initHeroIllustration().    */

#hero #hero-illus-wrap {
    display: flex;
    width: 100%;
    justify-self: stretch;
    align-self: center;
    overflow: visible;
}

#hero #hero-illus-wrap > svg,
#hero-illustration {
    flex: 1 1 100%;
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 2100 / 1640;
    display: block;
    overflow: visible;
}

/* overlay elements never capture mouse / pointer events */
#hero-pipe-glow,
#hero-scan-bar {
    pointer-events: none;
}

/* mobile: keep illustration hidden (mirrors the old #hero img rule) */
@media (max-width: 1000px) {
    #hero #hero-illus-wrap {
        display: none;
    }
}