/* Page-specific styling leaves the medical homepage intact. */
.bureau-page {
  background: var(--color-white);
}
.bureau-page .section {
  padding-block: calc(clamp(56px, 6vw, 88px) * var(--section-spacing-scale));
}
.bureau-page main h2 {
  font-size: clamp(34px, 3.6vw, 54px);
  line-height: 1.08;
}
/* Accent lines stay upright: only the regular serif is loaded, so italics
   would be synthesised. Brass matches the homepage accent. */
.bureau-page h1 em,
.bureau-page h2 em {
  font-style: normal;
  font-weight: 500;
  color: var(--color-accent-text);
}
.bureau-page .eyebrow {
  font-size: 12px;
  letter-spacing: .12em;
  margin-bottom: 28px;
}
.bureau-page .button--primary {
  gap: 22px;
}
.bureau-page .button--primary > span[aria-hidden] {
  font-size: 20px;
  font-weight: 400;
}
.bureau-page .lead {
  font-size: 17px;
  line-height: 1.75;
}
.bureau-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 64px;
  align-items: end;
  margin-bottom: 48px;
}
.bureau-section-heading > .lead {
  max-width: 43ch;
  padding-bottom: 5px;
}
.bureau-page .footer {
  border-top: 1px solid var(--color-line-on-ink);
}
/* Ruled lists draw their brass line as they scroll into view (bureau.js adds
   .is-tracking); numbers brighten with them. Without JavaScript the plain
   hairlines stay. */
.is-tracking > * {
  position: relative;
}
.is-tracking > *::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--draw-color, var(--color-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1100ms var(--ease-out);
}
.is-tracking > .is-drawn::before {
  transform: scaleX(1);
}
.is-tracking > * > span:first-child {
  transition: opacity 600ms;
}
/* .75: before the row is drawn its number keeps WCAG contrast (3:1 large, 4.5:1 for the 12px numbers). */
.is-tracking > :not(.is-drawn) > span:first-child {
  opacity: .75;
}
@media (max-width: 1023px) {
  .bureau-section-heading {
    gap: 32px;
  }
}
@media (max-width: 767px) {
  .bureau-section-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 32px;
  }
}