/* Preserve the existing styling while giving navigation and illustration one layout owner. */
.site-header { grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; }
.site-header > .brand { grid-column: 1; grid-row: 1; min-width: 0; }
.site-header > nav { grid-column: 2; grid-row: 1; flex-wrap: nowrap; }
.site-header .brand-mark { flex-shrink: 0; }
.site-header .brand-copy { white-space: normal; max-width: 24rem; }
.growth-signature { grid-template-areas: "copy media"; align-items: center; }
.growth-media { grid-area: media; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.growth-principles { margin: 0; gap: .6rem; }
.growth-principles span { font-size: .875rem; padding-inline: .55rem; }
@media (max-width: 1100px) {
  .site-header { height: 80px; grid-template-columns: minmax(0, 1fr) 44px; padding-inline: clamp(1rem, 4vw, 2rem); gap: 1rem; }
  .site-header > .brand { justify-self: start; gap: .65rem; }
  .site-header .brand-copy { font-size: .74rem; max-width: 22rem; }
  .site-header > .menu-button { display: grid; grid-column: 2; grid-row: 1; width: 44px; height: 44px; place-content: center; padding: 0; }
  .site-header > nav { display: none; position: absolute; top: 100%; left: 0; right: 0; width: auto; max-width: 100%; padding: 1.25rem clamp(1rem, 4vw, 2rem); flex-direction: column; align-items: stretch; gap: .65rem; background: var(--paper); box-shadow: 0 12px 30px rgba(10,34,49,.12); max-height: calc(100dvh - 80px); overflow-y: auto; justify-self: stretch; }
  .site-header > nav.open { display: flex; }
  .site-header > nav a { display: flex; align-items: center; min-height: 44px; font-size: .92rem; padding: .65rem .8rem; }
  .site-header > nav .nav-cta { justify-content: center; padding: .7rem 1rem; }
  .growth-signature { grid-template-columns: 1fr; grid-template-areas: "copy" "media"; gap: 2rem; }
}
@media (max-width: 600px) {
  .site-header .brand-copy { font-size: .65rem; letter-spacing: .025em; max-width: 13rem; line-height: 1.35; }
  .growth-principles { grid-template-columns: minmax(0, 290px); }
  .growth-principles span { font-size: .95rem; }
}
@media (max-width: 350px) {
  .site-header { padding-inline: .8rem; gap: .65rem; }
  .site-header .brand-copy { font-size: .6rem; }
}
