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

   Deliberately its own "strat-" class namespace — same reasoning as the
   other bespoke pages' own header comments: 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. */

.strat[hidden] {
  display: none;
}

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

.strat-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) {
  .strat-hero__heading {
    font-size: 36px;
  }
}

@media (min-width: 80rem) {
  .strat-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) {
  .strat-hero__heading {
    font-size: clamp(2.5rem, 1.375rem + 1.25vw, 2.875rem); /* 40–46px */
  }
}

.strat-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);
}