/* The public mobile headers share the same height, columns and alignment. */
@media (max-width: 760px) {
  .header, .studio-header {
    --mobile-header-height: 68px;
    --mobile-header-gutter: 16px;
    --mobile-header-gap: 12px;
    --mobile-header-action-width: 56px;
  }
  .header .nav {
    width: calc(100% - 2 * var(--mobile-header-gutter));
    height: calc(var(--mobile-header-height) - 1px);
    gap: var(--mobile-header-gap);
    align-items: center;
  }
  .header .nav nav { top: 100%; }
  .studio-header {
    height: var(--mobile-header-height);
    padding: 0 var(--mobile-header-gutter);
    gap: var(--mobile-header-gap);
    align-items: center;
  }
  .header-brand-group, .studio-brand-group {
    width: auto;
    min-width: 0;
    flex: 1;
    gap: 10px;
    align-items: center;
  }
  .header-brand-group > .brand,
  .header-brand-group > .studio-entry,
  .studio-brand-group > .studio-brand,
  .studio-brand-group > .consultoria-entry {
    height: 44px;
    min-height: 44px;
  }
  .header .brand, .studio-header .consultoria-wordmark {
    font-size: clamp(17px, 5.1vw, 22px);
    letter-spacing: -.7px;
    line-height: 1.25;
  }
  .header .brand small, .studio-header .consultoria-wordmark small {
    font-size: clamp(6px, 1.6vw, 7.5px);
    letter-spacing: 1px;
    line-height: 1.25;
    margin-top: 5px;
  }
  .header .studio-entry {
    padding: 6px 8px;
    font-size: 15px;
    gap: 6px;
  }
  .header .studio-entry svg { width: 17px; height: 17px; }
  .header .menu-toggle, .studio-header nav {
    width: var(--mobile-header-action-width);
    flex: 0 0 var(--mobile-header-action-width);
  }
  .header .menu-toggle {
    height: 44px;
    display: grid;
    place-items: center;
  }
  .studio-brand-group > .studio-brand {
    font-size: 20px;
    gap: 7px;
    letter-spacing: -.8px;
  }
  .studio-brand-group .studio-brand small {
    font-size: 9px;
    letter-spacing: 0;
    margin-top: 5px;
  }
  .studio-brand-group .brand-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: 23px;
  }
  .studio-header .login-link {
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 8px;
    font-size: 13px;
  }
}
@media (max-width: 370px) {
  .header, .studio-header {
    --mobile-header-gutter: 12px;
    --mobile-header-gap: 8px;
    --mobile-header-action-width: 50px;
  }
  .header-brand-group, .studio-brand-group { gap: 8px; }
  .studio-brand-group > .studio-brand { font-size: 19px; gap: 6px; }
  .studio-brand-group .studio-brand small { font-size: 8px; }
  .header .studio-entry { font-size: 14px; }
  .studio-header .login-link { font-size: 12px; }
}