/* BRAND — bespoke editorial experience for expertise.html's brand tab
   only, shown via #brand-experience (js/expertise.js hides the generic
   .expertise-detail__grid / .expertise-capabilities markup and swaps this
   in instead, exactly like #strat-experience/#aiw-experience/
   #sm-experience/#web-experience do for their own tabs).

   Deliberately its own "brand-" class namespace — this page stays
   independently editable without a future "small correction only to X"
   tweak on one silently touching another.

   Content is intentionally a single statement, not an article: one
   heading, one paragraph. No sections, cards, visuals or CTA below it —
   .expertise-detail__panel's own bottom padding (css/expertise.css)
   already provides the page's closing whitespace. */

.brand[hidden] {
  display: none;
}

.brand-hero {
  text-align: center;
}

.brand-hero__heading {
  margin: var(--cb-space-3) auto 0;
  max-width: 22ch;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-medium);
  font-size: 32px;
  line-height: var(--cb-text-page-heading-leading);
  letter-spacing: var(--cb-text-page-heading-tracking);
  color: var(--cb-color-ink);
}

@media (min-width: 50.0625rem) {
  .brand-hero__heading {
    font-size: 36px;
  }
}

@media (min-width: 80rem) {
  .brand-hero__heading {
    font-size: 40px;
  }
}

/* Large-screen continuation (V-1, docs/FINAL_VISUAL_REVIEW.md) — matches
   the same fluid growth now applied to --cb-text-page-heading-size
   (tokens.css) so this bespoke heading stays consistent with the other
   simple capability tabs on large displays. 1440px and below unaffected. */
@media (min-width: 90rem) {
  .brand-hero__heading {
    font-size: clamp(2.5rem, 1.375rem + 1.25vw, 2.875rem); /* 40–46px */
  }
}

.brand-hero__intro {
  margin: var(--cb-space-4) auto 0;
  max-width: 1000px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--cb-color-text-secondary);
}