/* ============================================================
   IRON CAPITAL MARKETS — cross-page brand fixes
   ============================================================
   Shared by every page so the header renders identically
   throughout the site.
   ============================================================ */

/* ── Header logo: never squash the mark ──────────────────────
   The logo is a near-square mark (637x640). It carries an inline
   `height:52px;width:auto`, which should preserve its ratio — but
   it sits inside a flex chain (.branding > .branding__logo > a)
   where the default `flex-shrink:1` let the browser compress it
   to 42px wide against a 52px height. That is a 19% horizontal
   squash: the "C" reads narrow and the wordmark looks condensed.

   Locking flex-shrink on the image and its two flex ancestors
   stops the compression; `object-fit:contain` is a belt-and-braces
   guard so that if any future rule does impose a box, the mark
   letterboxes inside it instead of distorting.
   ------------------------------------------------------------ */
.branding,
.branding__logo,
.branding__logo > a {
  flex: 0 0 auto !important;
  min-width: 0;
}

/* `width:auto` cannot resolve here: the image sits in nested flex
   containers whose own width depends on the image, so the browser
   settles on a collapsed value (measured 33.8px against a 52px
   height — a 23% squash). Giving the box explicit dimensions breaks
   that circular dependency.

   The mark is 637x640, i.e. square to within 0.5%, so a square box
   is correct; `object-fit:contain` absorbs that fraction and
   guarantees the artwork is letterboxed, never stretched. */
.branding__logo img,
img.site-logo {
  flex: 0 0 auto !important;
  width: 52px !important;
  height: 52px !important;
  max-width: none !important;
  object-fit: contain !important;
}

@media (max-width: 480px) {
  .branding__logo img,
  img.site-logo {
    width: 44px !important;
    height: 44px !important;
  }
}