/* THE BUREAU — styles for the-bureau.html only. The header and footer are
   the landing page's own real markup + layout.css/components.css rules
   (no page-specific approximation of either), same convention already
   established by contact-flow.css/legal.css for their own pages —
   nothing for them lives here.

   Deliberately minimal: three centred text blocks, no cards, icons,
   diagrams, images or motion. Explicit px typography tiers matching the
   scale already established and tested across the Expertise capability
   pages (32/36/40 heading, 28/31/34 subheading, flat 16 body) — reused
   for visual consistency even though this page shares none of those
   pages' richer layout vocabulary. */

.the-bureau {
  padding-top: clamp(120px, 12vh, 180px);
  padding-bottom: var(--cb-space-9);
}

.the-bureau__section {
  text-align: center;
}

.the-bureau__section + .the-bureau__section {
  margin-top: var(--cb-section-gap);
}

.the-bureau__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) {
  .the-bureau__heading {
    font-size: 36px;
  }
}

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

.the-bureau__subheading {
  margin: var(--cb-space-3) auto 0;
  max-width: 900px;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-medium);
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: normal;
  color: var(--cb-color-ink);
}

@media (min-width: 50.0625rem) {
  .the-bureau__subheading {
    font-size: 31px;
  }
}

@media (min-width: 80rem) {
  .the-bureau__subheading {
    font-size: 34px;
  }
}

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