/* User-supplied KCJ artwork. Only transparent canvas margins are hidden;
   the original PNG pixels and proportions stay unchanged. */
.wordmark > .kcj-logo {
  position: relative;
  display: block;
  width: 200px;
  aspect-ratio: 2102 / 587;
  flex: none;
  overflow: hidden;
  margin: 0;
  line-height: 0;
  letter-spacing: 0;
}
.wordmark .kcj-logo > img {
  position: absolute;
  display: block;
  width: 103.33016%;
  max-width: none;
  height: auto;
  left: -1.71266%;
  top: -13.96934%;
  margin: 0;
}
.header-main .wordmark { min-width: 0; min-height: 44px; gap: 0; }
.mobile-menu-title .wordmark > .kcj-logo { width: 172px; }
#footer .footer-brand .wordmark > .kcj-logo { width: min(240px,58vw); }
.wordmark:focus-visible { outline: 2px solid #111; outline-offset: 6px; }

/* Compact monogram replaces the former floral identity on advice surfaces. */
img[src="assets/brand/kcj/monogram-transparent.png"] { object-fit: contain; }
.adviser-orbit { background: #f5f5f2; }
.adviser-orbit img { width: 52px; height: 38px; }
.advisor-discovery-banner > img[src="assets/brand/kcj/monogram-transparent.png"] {
  border-radius: 0;
}
.customer-hub-brand { object-fit: contain; }

@media (max-width:1100px) and (min-width:761px) {
  .header-main .wordmark > .kcj-logo { width: 190px; }
}
@media (max-width:760px) {
  .header-main .wordmark > .kcj-logo { width: clamp(122px,37vw,170px); }
}
@media (max-width:380px) {
  /* Account remains in the menu; give the logo and language picker clear space. */
  .site-header .header-main .header-actions a[href$="#/account"] { display: none; }
}
@media (max-width:350px) {
  .header-main .wordmark > .kcj-logo { width: 120px; }
  .mobile-menu-title .wordmark > .kcj-logo { width: 160px; }
}

/* Monochrome navigation, including search, language and dropdown icons. */
#header .site-header svg { color:#000!important; }
#header .country-button > span { color:#000; }

/* The primary menu needs more visual presence than secondary action icons.
   Reserve its full touch target in the grid at every collapsed-nav width. */
@media (max-width:1100px) {
  #header .header-main { grid-template-columns:44px minmax(0,1fr) auto; }
  #header .header-main .mobile-toggle {
    width:44px; min-width:44px; height:44px; min-height:44px;
    padding:10px; flex:none;
  }
  #header .header-main .mobile-toggle > svg {
    width:24px; height:24px; min-width:24px; flex:0 0 24px; stroke-width:1.8;
  }
}
@media (forced-colors:active) {
  #header .site-header svg,#header .country-button > span { color:ButtonText!important; }
}