/* Shared left-aligned hero mascot treatment for non-pillar inner pages,
   matching the accepted service-pillar hero system. Linked after inner.css
   by pages whose hero carries an .i-hero__mascot. */

.i-hero{ position:relative; }
.i-hero__mascot{ pointer-events:none; line-height:0; }
.i-hero__mascot img{ display:block; transition:transform .1s linear; }

@media (min-width:701px){
  .i-hero__mascot{ position:absolute; bottom:0; z-index:1; }
  .i-hero__mascot img{ height:100%; width:auto; }
}

@media (min-width:981px){
  .i-hero--left{ min-height:426px; }
  .i-hero--left .container{ padding-right:min(500px,48vw); }
  /* Flush to the right edge of the hero. */
  .i-hero__mascot{
    right:0;
    height:min(470px,max(420px,100%));
  }
}

@media (min-width:701px) and (max-width:980px){
  .i-hero--left .container{ padding-right:min(330px,45vw); }
  .i-hero__mascot{ right:0; height:min(320px,90%); }
}

@media (max-width:700px){
  /* Decorative mascot art has no mobile message or action and used to reserve
     a full-height block below the hero CTAs. Hide it so the hero ends at its
     real content; tablet and desktop retain the art direction above. */
  .i-hero__mascot{ display:none; }
}

/* Landscape artwork: cap the height lower so its width stays inside the
   hero copy reserve. */
@media (min-width:981px){
  .i-hero__mascot--wide{ height:min(390px,max(340px,100%)); }
}
@media (min-width:701px) and (max-width:980px){
  .i-hero__mascot--wide{ height:min(260px,90%); }
}

@media (prefers-reduced-motion:reduce),(pointer:coarse){
  .i-hero__mascot img{ transition:none; transform:none !important; }
}