@layer brand {
  .wordmark { display: inline-flex; align-items: center; flex: 0 0 auto; width: 246px; max-width: 100%; line-height: 1; }
  .wordmark > img { display: block; width: 100%; height: auto; }
  .footer .wordmark { width: 250px; }
  .service-work-signature > .wordmark { width: 210px; }
  .service-work-signature { flex-wrap: wrap; gap: 18px 25px; }
  @media (max-width: 1100px) {
    .header > .wordmark { width: 232px; }
  }
  @media (max-width: 680px) {
    .header > .wordmark { width: 210px; }
    .footer .wordmark { width: 246px; }
  }
  @media (max-width: 600px) {
    .header { gap: 12px; }
  }
  @media (max-width: 540px) {
    .header-cta { display: none; }
    .menu-toggle { margin-left: auto; }
  }
  @media (max-width: 380px) {
    .header > .wordmark { width: min(210px, calc(100vw - 116px)); }
  }
}