@font-face {
  font-family: Prelo;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/styles/fonts/Prelo-Light.woff2") format("woff2");
}

@font-face {
  font-family: Prelo;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/styles/fonts/Prelo-Book.woff2") format("woff2");
}

@font-face {
  font-family: Prelo;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/styles/fonts/Prelo-BookItalic.woff2") format("woff2");
}

@font-face {
  font-family: Prelo;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/styles/fonts/Prelo-Medium.woff2") format("woff2");
}

@font-face {
  font-family: Prelo;
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/styles/fonts/Prelo-MediumItalic.woff2") format("woff2");
}

@font-face {
  font-family: Prelo;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/styles/fonts/Prelo-Bold.woff2") format("woff2");
}

:root {
  /* grid */
  --grid-container-width: 90%;
  --grid-column-width: calc(var(--grid-container-width) / 12);
  --grid-gutter-width: 5%;

  /* spacing */
  --spacing-none: 0;
  --spacing-xxl: 48px;
  --spacing-xl: 32px;
  --spacing-l: 20px;
  --spacing-m: 14px;
  --spacing-s: 8px;
  --spacing-xs: 4px;

  /* Authored line-break token (see .line-break). Deliberately NOT --spacing-l,
     which happens to share its value: section spacing and an author's in-copy
     gap are different knobs, and one must not resize the other. Shared by
     .line-break and .line-break-token so the pre-paint stand-in and the real
     spacer can never drift apart. */
  --line-break-size: 20px;

  /* color schemes */
  color-scheme: light;

  /* color tokens */
  --color-primary-white: #fff;
  --color-primary-green: #3f9c35;
  --color-primary-light-green: #d9ebd7;
  --color-primary-blue: #009cde;
  --color-primary-light-blue: #ccebf8;
  --color-primary-light-grey: #888b8d;
  --color-primary-medium-grey: #63666a;
  --color-primary-dark-grey: #515356;
  --color-primary-hover-green: #2b6c25;
  --color-high-contrast: #777;
  --color-dark-navy: #00153d;
  --color-accent-green: #00a94f;
  --color-section-grey: #f0f0f0;
  /* primary brand colors — author-facing palette; library-sync reads the
     --color-* names in this block to build the DA options color-token list */
  --color-green: var(--color-primary-green);
  --color-light-green: var(--color-primary-light-green);
  --color-blue: var(--color-primary-blue);
  --color-light-blue: var(--color-primary-light-blue);
  --color-navy: var(--color-dark-navy);
  --color-white: var(--color-primary-white);
  --color-grey: var(--color-primary-light-grey);
  --color-medium-grey: var(--color-primary-medium-grey);
  --color-dark-grey: var(--color-primary-dark-grey);
  --color-light-grey: var(--color-section-grey);
  --color-light-grey-2: #CDCECF;

  /* secondary palette */
  --color-secondary-cyan: #38a798;
  --color-secondary-magenta: #9f5cc0;
  --color-secondary-yellow: #f1b434;
  --color-secondary-pink: #e40046;
  --color-secondary-yellow-green: #a2a569;
  --color-secondary-orange: #e87722;

  /* high-contrast palette */
  --color-hc-primary-blue: #007eb4;
  --color-hc-primary-green: #36872e;
  --color-hc-primary-grey: #515356;

  /* transitions */
  --transition-base: 0.3s ease-in-out;
  --color-gray-100: #f1f1f1;
  --color-gray-200: #d3d3d3;
  --color-gray-300: #b5b5b5;
  --color-gray-400: #999;
  --color-gray-500: #7d7d7d;
  --color-gray-600: #636363;
  --color-gray-700: #494949;
  --color-gray-800: #313131;
  --color-gray-900: #1b1b1b;
  --color-green-100: #e1f5e3;
  --color-green-200: #a3e1a8;
  --color-green-300: #60cb6a;
  --color-green-400: #24b032;
  --color-green-500: #1e9029;
  --color-green-600: #187220;
  --color-green-700: #115418;
  --color-green-800: #0c3910;
  --color-green-900: #072009;
  --color-teal-100: #e4f3f5;
  --color-teal-200: #acdbdf;
  --color-teal-300: #71c1c9;
  --color-teal-400: #36a7b3;
  --color-teal-500: #108a96;
  --color-teal-600: #0d6d77;
  --color-teal-700: #0a5158;
  --color-teal-800: #06363b;
  --color-teal-900: #041e21;
  --color-blue-100: #eaf2ff;
  --color-blue-200: #b9d4ff;
  --color-blue-300: #88b6ff;
  --color-blue-400: #5898ff;
  --color-blue-500: #2176ff;
  --color-blue-600: #0058e4;
  --color-blue-700: #0041a9;
  --color-blue-800: #002c74;
  --color-blue-900: #001942;
  --color-purple-100: #f4edfb;
  --color-purple-200: #dfcbf2;
  --color-purple-300: #c9a7ea;
  --color-purple-400: #b385e1;
  --color-purple-500: #9d60d8;
  --color-purple-600: #843ccb;
  --color-purple-700: #622c98;
  --color-purple-800: #421e66;
  --color-purple-900: #251139;
  --color-magenta-100: #ffebf9;
  --color-magenta-200: #ffc0ec;
  --color-magenta-300: #ff8fde;
  --color-magenta-400: #ff53cc;
  --color-magenta-500: #eb00a5;
  --color-magenta-600: #bd0084;
  --color-magenta-700: #8e0064;
  --color-magenta-800: #630045;
  --color-magenta-900: #3b002a;
  --color-red-100: #ffecea;
  --color-red-200: #ffc4be;
  --color-red-300: #ff9990;
  --color-red-400: #ff6759;
  --color-red-500: #f81400;
  --color-red-600: #c71000;
  --color-red-700: #950c00;
  --color-red-800: #670800;
  --color-red-900: #3c0500;
  --color-orange-100: #ffeddc;
  --color-orange-200: #ffc895;
  --color-orange-300: #ff9e43;
  --color-orange-400: #f37500;
  --color-orange-500: #c76000;
  --color-orange-600: #9e4c00;
  --color-orange-700: #753800;
  --color-orange-800: #4f2600;
  --color-orange-900: #2d1500;
  --color-yellow-100: #fff48e;
  --color-yellow-200: #ebd400;
  --color-yellow-300: #cab600;
  --color-yellow-400: #ab9a00;
  --color-yellow-500: #8c7e00;
  --color-yellow-600: #6e6400;
  --color-yellow-700: #514a00;
  --color-yellow-800: #373100;
  --color-yellow-900: #1e1b00;

  /* named colors */
  --color-light-base: 255 255 255;
  --color-dark-base: 0 0 0;
  --color-light: rgb(255 255 255);
  --color-dark: rgb(0 0 0);
  --color-text: var(--color-primary-dark-grey);
  --color-link: var(--color-primary-green);
  --color-brand: var(--color-purple-500);
  --color-accent: light-dark(var(--color-magenta-600), var(--color-yellow-100));
  --color-shaded: light-dark(#f9f9f9, #000);

  /* fonts */
  --font-family: prelo, "Trebuchet MS", sans-serif;

  /* headings */
  --heading-font-size-xxl: 48px;
  --heading-font-size-xl: 36px;
  --heading-font-size-l: 24px;
  --heading-font-size-m: 20px;
  --heading-font-size-s: 18px;
  --heading-font-size-xs: 16px;
  --heading-line-height: 1.2; /* matches rsm.global computed heading lh (1.2) */

  /* body */
  --body-font-size-xxxl: 27px;
  --body-font-size-xxl: 24px;
  --body-font-size-xl: 22px;
  --body-font-size-l: 20px;
  --body-font-size-m: 18px;
  --body-font-size-s: 14px;
  --body-font-size-xs: 12px;
  --body-line-height: 1.3;

  /* misc */
  --header-height: 100px;
  --preheader-height: 38px;
  --breadcrumb-height: 24px;
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --font-weight-light: 300;
}

/* Mobile bar sizes. Overridden on :root so the header/preheader heights, the
   body's top padding (calc of both), and the desktop menu offset all track the
   actual bar heights. The preheader block also mirrors --preheader-height. */
@media (width < 992px) {
  :root {
    --preheader-height: 44px;
    --header-height: 51px;
  }
}

@media (width < 992px) {
  :root {
    --heading-font-size-xxl: 30px;
    --heading-font-size-xl: 30px;
  }
}

.light-scheme {
  color-scheme: light;
}

.dark-scheme {
  color-scheme: dark;
}

/* high-contrast mode — re-points the primary palette at the HC values.
   Every block using var(--color-primary-*) inherits these automatically.
   Triggered by the manual .high-contrast toggle OR the OS prefers-contrast
   setting; .no-high-contrast lets the toggle opt out of the system preference. */
body.high-contrast {
  --color-primary-blue: var(--color-hc-primary-blue);
  --color-primary-green: var(--color-hc-primary-green);
  --color-primary-light-grey: var(--color-hc-primary-grey);
}

@media (prefers-contrast: more) {
  body:not(.no-high-contrast) {
    --color-primary-blue: var(--color-hc-primary-blue);
    --color-primary-green: var(--color-hc-primary-green);
    --color-primary-light-grey: var(--color-hc-primary-grey);
  }
}

html {
  /* An anchor jump has to clear everything pinned over the top of the viewport,
     or the target heading lands underneath it and reads as missing text. That
     stack is the fixed header, the preheader above it when present (see the
     :has() rule below), and the secondary-nav once it pins — which publishes
     --secondary-nav-height from blocks/secondary-nav/secondary-nav.js.
     The nav height counts even before the bar pins: the browser resolves
     scroll-padding-top when the jump STARTS, and the bar pins during the scroll
     that follows, so a stuck-only value would always arrive too late. */
  scroll-padding-top: calc(
    var(--header-height) + var(--secondary-nav-height, 0px) + 1rem
  );

  /* Silver canvas only shows outside the 1920px body on very wide viewports. */
  background-color: silver;
}

/* The preheader is fixed at top: 0 with the header offset below it, so it
   occludes an anchor target too. scroll-padding-top has to live on <html>,
   which is why the body class is read through :has(). */
html:has(body.has-preheader) {
  scroll-padding-top: calc(
    var(--preheader-height) + var(--header-height) +
      var(--secondary-nav-height, 0px) + 1rem
  );
}

/* Magic line-break token (bold "<br>" authored anywhere).
   A block-level spacer that breaks the line and adds a fixed vertical gap,
   matching the 20px spacing between the h2/h3 in the site's text CTAs. */
.line-break {
  display: block;
  height: var(--line-break-size);
}

/* The SAME spacer, worn by the raw token itself between first paint and the
   moment scripts.js can swap it for a real .line-break — see markLineBreakTokens.
   Without this the literal text "<br>" is visible for as long as the blocks take
   to load. Geometry is identical to .line-break (one --line-break-size per <br>,
   no inherited margins), so the swap is invisible: nothing moves, nothing
   reflows. font-size:0 hides the text without display:none, which would collapse
   the box we are holding open. */
.line-break-token {
  display: block;
  height: calc(var(--line-break-size) * var(--line-break-count, 1));
  margin: 0;
  font-size: 0;
  line-height: 0;
}


body {
  margin: 0 auto;
  max-width: 1920px;
  background-color: var(--color-primary-white);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--body-font-size-m);
  line-height: var(--body-line-height);
  padding: var(--header-height) 0 0;

  &.has-preheader {
    padding-top: calc(var(--header-height) + var(--preheader-height));
  }

  &.has-breadcrumb {
    margin: calc(var(--header-height) + var(--breadcrumb-height)) 0 0;
  }

  &.no-header {
    --header-height: 0;

    margin: 0;
  }
  p{
    margin: 1rem 0;
  }

}

header {
  display: none;
  height: var(--header-height);
  position: fixed;
}

body.has-preheader header {
  top: var(--preheader-height);
}

/* While the mobile/tablet mega menu is open the preheader is hidden (see
   blocks/preheader/preheader.css), so the header must reclaim the top of the
   viewport instead of keeping the --preheader-height offset above. Same file,
   later source order, higher specificity than the rule above — so it wins
   regardless of block-CSS load order. */
body.has-preheader header.is-mobile-open {
  top: 0;
}

a {
  color: var(--color-link);
  font-weight: 500;

  /* A bolded link (DA emits <strong><a>…</a></strong>) must still read bold —
     the anchor's own 500 would otherwise override the strong's weight — and
     shows its underline at rest instead of only fading in on hover. */
  strong &:not(.btn) {
    font-weight: 600;
    text-decoration-color: currentColor;
  }

  /* Regular links: no visible underline by default, fade one in on hover.
     text-decoration-color (unlike text-decoration) is transitionable. */
  &:not(.btn) {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.15em;
    transition: text-decoration-color var(--transition-base);
  }

  &:not(.btn):hover {
    text-decoration-color: currentColor;
  }

  &.btn {
    display: inline-block;
    font-weight: 500;
    border-radius: 0;
    cursor: pointer;
    outline: none;
    padding: 14px 30px;
    position: relative;
    text-decoration: none;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;

    &.btn-outline {
      background: transparent;
    }
  }

  &.btn-accent {
    color: var(--color-primary-dark-grey);
    background: var(--color-primary-white);
    border: 0px solid var(--color-primary-green);
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);

    &:hover {
      background: var(--color-primary-blue);
      color: var(--color-primary-white);
    }

    &.btn-outline {
      color: var(--color-primary-white);
      background: transparent;
      border-color: var(--color-primary-white);
      transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);

      &:hover {
        color: var(--color-primary-green);
        background: var(--color-primary-white);
        border-color: var(--color-primary-white);
      }
    }
  }

  &.btn-primary {
    color: var(--color-primary-white);
    background-color: var(--color-primary-green);
    border: 1px solid var(--color-primary-green);
    transition: background-color var(--transition-base), border-color var(--transition-base);

    &:hover {
      background-color: var(--color-primary-hover-green);
      border-color: var(--color-primary-hover-green);
    }

    &.btn-outline {
      color: var(--color-primary-green);
      background: transparent;
      border-color: var(--color-primary-green);
      transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);

      &:hover {
        color: var(--color-primary-white);
        background-color: var(--color-primary-hover-green);
        border-color: var(--color-accent-green);
      }
    }
  }

  &.btn-secondary {
    color: var(--color-primary-dark-grey);
    background-color: var(--color-primary-white);
    border: 0px solid var(--color-primary-dark-grey);
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);

    &:hover {
      color: var(--color-primary-white);
      background-color: var(--color-primary-hover-green);
      border-color: var(--color-primary-green);
    }

    &.btn-outline {
      color: var(--color-primary-dark-grey);
      background: var(--color-primary-white);
      border-color: var(--color-primary-dark-grey);
      border: 1px solid var(--color-primary-dark-grey);
      transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);

      &:hover {
        color: var(--color-primary-white);
        background-color: var(--color-primary-hover-green);
        border-color: var(--color-primary-hover-green);
      }
    }
  }

  &.btn-secondary-outline-variant-1 {
    color: var(--color-primary-green);
    background: var(--color-primary-white);
    border: 1px solid var(--color-primary-dark-grey);
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);

    &:hover {
      color: var(--color-primary-white);
      background-color: var(--color-primary-hover-green);
      border-color: var(--color-primary-hover-green);
    }
  }

  &.btn-negative {
    color: var(--color-primary-white);
    background-color: var(--color-primary-light-grey);
    border: 1px solid var(--color-primary-light-grey);
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);

    &:hover {
      color: var(--color-primary-white);
      background-color: var(--color-primary-dark-grey);
      border-color: var(--color-primary-dark-grey);
    }

    &.btn-outline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: left;
      color: var(--color-primary-white);
      background: transparent;
      border-color: var(--color-primary-white);
      transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);

      &::after {
        content: '\203A';
        margin-left: 1em;
        font-weight: 600;
        line-height: 1;
      }

      &:hover {
        color: var(--color-primary-green);
        background-color: var(--color-primary-white);
        border-color: var(--color-primary-white);
      }
    }
  }
}

/* Tablet & mobile (≤991px): buttons span the full width of their container.
   .btn has padding (14px 30px) but no global box-sizing, so border-box keeps
   that padding inside the width instead of overflowing by 60px. text-align
   centres the label, since .btn is inline-block and would otherwise sit left
   once stretched. */
@media (max-width: 991px) {
  a.btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}

/* section-metadata `button-span | true`: reproduce the legacy rsmus.com button
   grid. On the live site that grid is a centered block capped at 1280px, three
   equal columns (~32px gaps → ~405px buttons), and — crucially — every button is
   the SAME height: long labels wrap to two lines and the short ones grow to
   match. We mirror that exactly rather than trying to force one line.
     • cap + center the grid at the live 1280px (shrink with a 40px side margin
       on narrower viewports, as the live layout does);
     • reclaim the per-column side padding as button width and use an even grid
       gap between columns;
     • give every button a min-height of exactly two text lines (2lh + the
       28px vertical padding, box-sizing:border-box) so a one-line label grows to
       the two-line height — uniform boxes, no magic numbers.
   Text-align stays owned by the button variant, so the .btn-negative.btn-outline
   layout (left label + right chevron) is unaffected. */
main .section.button-span .cta .cta-content {
  max-width: 1280px;
  width: calc(100% - 80px);
  margin-inline: auto;
}

main .section.button-span .cta-columns {
  gap: var(--spacing-xl, 32px);
}

main .section.button-span .cta-column {
  padding-left: 0;
  padding-right: 0;
}

main .section.button-span a.btn {
  width: 100%;
  box-sizing: border-box;
  min-height: calc(2lh + 32px);
}

/* The wrapper fragment.js builds around a loaded fragment. It needs its own
   `display` for the same cascade reason `.section` does: it is a direct child of
   `main` whenever a fragment link sits at the top level of a document, and the
   `main > div` guard further down hides every such child until something
   out-points it. `.fragment-content` never carries `.section`, so without this
   rule nothing ever does and the fragment stays hidden forever.

   That was ISS-259: `404.html` is the one page whose fragment link is a direct
   child of `main`, and rsm-us's `/fragments/404` holds three sections, so
   fragment.js keeps the wrapper instead of hoisting a lone section. Every rsm-us
   404 rendered a blank body — `main` 0px tall, the copy present in the DOM at
   0x0 — while returning HTTP 404 with a resolved fragment and correct
   `.plain.html`. Nothing that stops short of measuring layout can see that.

   This cannot flash undecorated: the wrapper is script-created after `loadArea`
   has run on its contents and is never present in the served HTML. */
.fragment-content {
  display: block;
}

/* sections */
.section {
  display: block;
  background-color: var(--color-primary-white);

  > .default-content {
    max-width: var(--grid-container-width);
    margin: 0 auto;

    img {
      width: auto;
      max-width: 100%;
      display: block;
      margin: 0 auto;
    }
  }
}

/* Authored body copy — match rsm.global computed paragraph metrics
   (line-height 1.333, margin-bottom 10px). Scoped to default-content so it
   does not disturb the global body line-height, tables, forms, or block CSS. */
main .section > .default-content p {
  line-height: 1.333;
  margin-bottom: 10px;
}


/* In-flow blockquote — the legacy pull-quote a news release authors INSIDE its
   body copy. Legacy styles every rich-text blockquote globally
   (`.cmp-text blockquote` in clientlib-site.css, flat at all viewports):

     border-top/bottom: 1px solid #d9dada; color: var(--primary-dark-grey);
     font-size: 24px; font-style: italic; font-weight: 700; padding: 20px 0;

   so a bare <blockquote> that carries no block wrapper still renders as a
   bold-italic quote framed by hairline rules. EDS had no equivalent, so those
   blockquotes inherited plain body copy: right words, wrong weight, and no
   divider bars. Measured across the published corpus: 389 such quotes on 358
   pages (100 on 86 rsm-ca, 289 on 272 rsm-us).

   `.default-content` is the exact analogue of `.cmp-text`: groupChildren() in
   scripts/ak.js puts every NON-div child (p, headings, blockquote) there and
   every div (i.e. every block) in `.block-content`. Scoping here therefore
   cannot reach a blockquote a block owns — `quote` builds its own in
   `.quote-body` (see quote.css `quote-inline`, the opt-in variant that renders
   this same treatment when the quote IS authored as a block), and
   `rsm100-section` styles `.rsm100-section-content blockquote` itself.

   #d9dada is legacy's literal hairline and has no `--color-*` token — the
   nearest, `--color-light-grey-2` (#cdcecf), is a shade darker. Kept in sync
   with quote.css `quote-inline` by hand; both cite this same legacy rule. */
main .section > .default-content blockquote {
  margin: 0;
  padding: 20px 0;
  border-block: 1px solid #d9dada;
  color: var(--color-primary-dark-grey);
  font-size: 24px;
  font-style: italic;
  font-weight: 700;
}

/* The legacy blockquote holds raw text; DA wraps it in a <p>, whose own margin
   would otherwise stack on top of the 20px padding above and pull the rules
   apart. Zero it so the framed height matches legacy. */
main .section > .default-content blockquote p {
  margin: 0;
}

main .section > .default-content blockquote p + p {
  margin-top: 10px;
}

/* full-width: release the section's content from the centered 90% rail so it
   stretches to the full section width (up to the 1920px body cap). Authored via
   Section Metadata › Style: full-width. Lives here (not section-metadata.css)
   because EDS can strip that sheet. */
main .section.full-width > .default-content,
main .section.full-width > .block-content {
  max-width: 100%;
}

/* card-width | full-width (Section Metadata) — force the card grid in this
   section to span the full section width, like the featured cards atop
   rsmus.com/insights.html. A `card` block is double-capped: the section's
   block-content rail AND the block's own --grid-container-width (see card.css).
   This releases the block-content wrapper so the grid can stretch edge-to-edge
   (up to the 1920px body cap); the per-block cap and the desktop 4-up column
   layout are released in card.css. Only .block-content is released (NOT
   .default-content), so sibling headings/text in the section stay on the normal
   centered rail — this widens cards, not copy. Lives here (not
   section-metadata.css) because EDS can strip that sheet. */
main .section.card-width-full-width > .block-content {
  max-width: 100%;
}

/* section style variants (authored via Section Metadata › Style field) */
main .section.text-light {
  color: var(--color-white);

  h1, h2, h3, h4, h5, h6 { color: var(--color-white); }

  a:any-link:not(.btn) { color: var(--color-white); }
}

/* Author aid — Section Metadata → Style: link-<color> recolors a section's
   default-content links (e.g. a trailing "See all …" link). Scoped to
   .default-content so block links (cards, etc.) are unaffected; covers plain
   links and DA button links, and overrides the hover colour too. To add a
   colour: set --section-link-color in a new rule and add the class to the
   :is() list below.
   NOTE: this color-only helper is DISTINCT from the `link | dark` key
   (data-link, further below) — that one is the full legacy-sitemap link-list
   treatment (chevron, bulletless, reaches .block-content). */
main .section:is(
    .link-dark, .link-white, .link-green, .link-blue,
    .link-grey, .link-gray, .link-medium-grey, .link-light-grey
  ) .default-content a:any-link,
main .section:is(
    .link-dark, .link-white, .link-green, .link-blue,
    .link-grey, .link-gray, .link-medium-grey, .link-light-grey
  ) .default-content a:any-link:hover {
  color: var(--section-link-color);
}

main .section.link-dark { --section-link-color: #000; }
main .section.link-white { --section-link-color: var(--color-white); }
main .section.link-green { --section-link-color: var(--color-green); }
main .section.link-blue { --section-link-color: var(--color-blue); }
main .section.link-grey,
main .section.link-gray { --section-link-color: var(--color-dark-grey); }
main .section.link-medium-grey { --section-link-color: var(--color-medium-grey); }
main .section.link-light-grey { --section-link-color: var(--color-light-grey); }

/* bg-* section backgrounds — background-color and base text contrast come from
   the global bg-* rules above; only section-specific overrides live here. */
main .section.bg-navy {
  background-color: var(--color-navy);
  color: var(--color-white);

  h1, h2, h3, h4, h5, h6 { color: var(--color-white); }

  a:any-link:not(.btn) { color: var(--color-white); }
}

main .section.bg-light-grey {
  background-color: var(--color-light-grey);
  color: var(--color-primary-dark-grey);
}

main .section.bg-accent-green {
  background-color: var(--color-accent-green);
  color: var(--color-white);

  h1, h2, h3, h4, h5, h6 { color: var(--color-white); }

  a:any-link:not(.btn) { color: var(--color-white); }

  a.btn { border-color: var(--color-white); }
}

main .section.bg-blue {
  background-color: var(--color-blue);
  color: var(--color-white);

  h1, h2, h3, h4, h5, h6 { color: var(--color-white); }

  a:any-link:not(.btn) { color: var(--color-white); }
}

/* Global bg-* block background variants.
   Authored as Block (bg-green), Block (bg-navy), etc. in Document Authoring.
   Light backgrounds keep default dark text; dark backgrounds flip to white.
   Block-specific link-colour overrides (e.g. navy links) stay in block CSS. */
.bg-white { background-color: var(--color-white); }
.bg-light-green { background-color: var(--color-light-green); }
.bg-light-blue { background-color: var(--color-light-blue); }
.bg-light-grey { background-color: var(--color-light-grey); }
.bg-green { background-color: var(--color-green); }
.bg-blue { background-color: var(--color-blue); }
.bg-accent-green { background-color: var(--color-accent-green); }
.bg-navy { background-color: var(--color-navy); }
.bg-grey { background-color: var(--color-grey); }
.bg-medium-grey { background-color: var(--color-medium-grey); }
.bg-dark-grey { background-color: var(--color-dark-grey); }

:is(.bg-green, .bg-blue, .bg-accent-green, .bg-navy,
    .bg-grey, .bg-medium-grey, .bg-dark-grey) {
  color: var(--color-white);

  h1, h2, h3, h4, h5, h6, p { color: var(--color-white); }

  a:any-link:not(.btn) { color: var(--color-white); }
}

/* Section background images (data-background-image). decorateSectionData adds
   .has-background globally, but section-metadata.css only loads when that block
   is present — so size/center the image here in the always-loaded global sheet. */
/* Section backgrounds. These rules live in the always-loaded global sheet
   because section-metadata.css only loads when the section-metadata block is
   present — so the block CSS can't be relied on in production. */
main .section.has-background {
  position: relative;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Content sits above the background image and stays within the grid width. */
main .section.has-background > :is(.default-content, .block-content) {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Picture-based backgrounds (background-image / background-image-mobile keys →
   <picture class="section-background desktop|mobile">). */
main .section picture.section-background {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
}

main .section .section-background img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* A mobile background hides until the breakpoint, where it swaps in. */
main .section.has-mobile-background .section-background.mobile {
  display: none;
}

@media (width < 992px) {
  main .section.has-mobile-background .section-background.desktop {
    display: none;
  }

  main .section.has-mobile-background .section-background.mobile {
    display: block;
  }

  /* Attribute form (inline CSS background via --section-bg, no <picture>): swap
     the desktop URL for the mobile one below 992px. --section-bg is set as an
     INLINE custom property by the JS, which normally out-specifies a stylesheet
     rule — so !important is required here for the reassignment to win. */
  main .section.has-mobile-background {
    --section-bg: var(--section-bg-mobile) !important;
  }

  /* No mobile background authored: below 992px drop the image so the section's
     background-color shows instead (a desktop banner image often doesn't crop
     well on narrow screens). This covers BOTH background paths:
       - picture form   → hide the .section-background.desktop element
       - attribute form (data-background-image → inline CSS background-image on
         the section) → null the inline image via a custom property fallback.
     Sections with no background-color simply show no image here. */
  main .section.has-background:not(.has-mobile-background) .section-background.desktop {
    display: none;
  }

  main .section.has-background:not(.has-mobile-background) {
    background-image: none !important;
  }

  /* background-color-mobile (section-metadata option): below 992px, override
     the section background-color with the authored mobile value. Typically used
     where a desktop background-image is hidden on mobile and a flat colour
     should replace it. The value is set inline by section-metadata.js. */
  main .section.has-mobile-bg-color {
    background-color: var(--background-color-mobile) !important;
  }
}

/* Per-tag text centering via data-text-center="h1,p" etc. (set by section-metadata) */
main .section[data-text-center*="h1"] :is(.default-content, .block-content) h1,
main .section[data-text-center*="h2"] :is(.default-content, .block-content) h2,
main .section[data-text-center*="h3"] :is(.default-content, .block-content) h3,
main .section[data-text-center*="h4"] :is(.default-content, .block-content) h4,
main .section[data-text-center*="h5"] :is(.default-content, .block-content) h5,
main .section[data-text-center*="h6"] :is(.default-content, .block-content) h6,
main .section[data-text-center*="p"] :is(.default-content, .block-content) p {
  text-align: center;
}

main .section[data-text-right*="h1"] :is(.default-content, .block-content) h1,
main .section[data-text-right*="h2"] :is(.default-content, .block-content) h2,
main .section[data-text-right*="h3"] :is(.default-content, .block-content) h3,
main .section[data-text-right*="h4"] :is(.default-content, .block-content) h4,
main .section[data-text-right*="h5"] :is(.default-content, .block-content) h5,
main .section[data-text-right*="h6"] :is(.default-content, .block-content) h6,
main .section[data-text-right*="p"] :is(.default-content, .block-content) p {
  text-align: right;
}

main .section[data-text-left*="h1"] :is(.default-content, .block-content) h1,
main .section[data-text-left*="h2"] :is(.default-content, .block-content) h2,
main .section[data-text-left*="h3"] :is(.default-content, .block-content) h3,
main .section[data-text-left*="h4"] :is(.default-content, .block-content) h4,
main .section[data-text-left*="h5"] :is(.default-content, .block-content) h5,
main .section[data-text-left*="h6"] :is(.default-content, .block-content) h6,
main .section[data-text-left*="p"] :is(.default-content, .block-content) p {
  text-align: left;
}

/* A standalone GRAPHIC is not body copy. The EDS pipeline wraps a lone image in
   its own <p>, so it inherits the 10px body-paragraph margin above and sits half
   as far from the heading that follows as legacy puts it. Measured 2026-08-26 at
   1440 on /technologies/microsoft/services/managed-services/managed-applications,
   both full-width graphics on the page:

     legacy   mas-pillars-infographic (840x792)   20px before the next H2
              mas-focus-areas-graphic (840x587)   20px
     EDS      both                                10px

   Scoped to a <p> whose ONLY child is the picture, so an inline image sitting
   alongside text keeps the body-copy margin it should have. */
main .section > .default-content p:has(> picture:only-child) {
  margin-bottom: 20px;
}

/* link | dark (section-metadata `link` key → data-link) — legacy sitemap
   link-list styling: dark-grey links, no underline until hover, each followed by
   a chevron. Mirrors rsmus.com .cmp-linklist__item a (color #515356 =
   --color-primary-dark-grey) + its em.fa-chevron-right (›). Distinct from the
   color-only `style: link-<color>` class helper above: this is the full
   link-list treatment and reaches .block-content links (the sitemap's `columns`
   lists), not just .default-content. Scoped off buttons so they keep styling. */
main .section[data-link~="dark"] :is(.default-content, .block-content) ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* stylelint-disable-next-line no-descending-specificity */
main .section[data-link~="dark"] :is(.default-content, .block-content) a:not(.button) {
  display: inline-block;
  padding-block: 0.1rem;
  color: var(--color-primary-dark-grey);
  text-decoration: none;
}

main .section[data-link~="dark"] :is(.default-content, .block-content) a:not(.button):hover,
main .section[data-link~="dark"] :is(.default-content, .block-content) a:not(.button):focus {
  text-decoration: underline;
}

main .section[data-link~="dark"] :is(.default-content, .block-content) a:not(.button)::after {
  content: "\203a"; /* › — the legacy fa-chevron-right glyph */
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 1.1em;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
}

/* container-N (N = column count out of 12) — constrains section content width.
   Usage: style: container-8 → 8/12 of grid container width, centered.
   Only applies at >=900px; on mobile / tablet the content fills the grid
   container so narrow column counts don't smoosh content into a tiny strip. */
@media (width >= 992px) {
  main .section.container-1,
  main .section.container-2,
  main .section.container-3,
  main .section.container-4,
  main .section.container-5,
  main .section.container-6,
  main .section.container-7,
  main .section.container-8,
  main .section.container-9,
  main .section.container-10,
  main .section.container-11,
  main .section.container-12 {
    .default-content,
    .block-content {
      max-width: calc(var(--grid-column-width) * var(--container-cols));
      margin-inline: auto;
    }
  }
}

main .section.container-1 { --container-cols: 1; }
main .section.container-2 { --container-cols: 2; }
main .section.container-3 { --container-cols: 3; }
main .section.container-4 { --container-cols: 4; }
main .section.container-5 { --container-cols: 5; }
main .section.container-6 { --container-cols: 6; }
main .section.container-7 { --container-cols: 7; }
main .section.container-8 { --container-cols: 8; }
main .section.container-9 { --container-cols: 9; }
main .section.container-10 { --container-cols: 10; }
main .section.container-11 { --container-cols: 11; }
main .section.container-12 { --container-cols: 12; }

/* Layout: box — confine the section (and its authored background color) to a
   centered, container-width panel. Body is white so the sides show white rather
   than silver. Authored via section-metadata "style: box" / "layout: box", or
   a data-layout="box" attr. */
main .section.box,
main .section.layout-box {
  max-width: var(--grid-container-width);
  margin-inline: auto;
  padding: var(--spacing-xl);

  > .default-content,
  > .block-content { max-width: 100%; }
}

/* When combined with container-N, narrow the panel to that column count. */
@media (width >= 992px) {
  main .section.box,
  main .section.layout-box {
    max-width: calc(var(--grid-column-width) * var(--container-cols, 12));
  }
}

/* Spacing overrides for box layout. The box default (var(--spacing-xl)) has
   specificity (0,2,1); adding the spacing class raises it to (0,3,1) so these
   win over the base box rule. Only padding-block varies; inline padding stays xl. */
main .section.box.spacing-xs, main .section.layout-box.spacing-xs { padding-block: calc(var(--spacing-xs) * 2); }
main .section.box.spacing-s,  main .section.layout-box.spacing-s  { padding-block: calc(var(--spacing-s) * 2); }
main .section.box.spacing-m,  main .section.layout-box.spacing-m  { padding-block: calc(var(--spacing-m) * 2); }
main .section.box.spacing-l,  main .section.layout-box.spacing-l  { padding-block: calc(var(--spacing-l) * 2); }
main .section.box.spacing-xl, main .section.layout-box.spacing-xl { padding-block: calc(var(--spacing-xl) * 2); }
main .section.box.spacing-xxl,main .section.layout-box.spacing-xxl{ padding-block: calc(var(--spacing-xxl) * 2); }

/* Grid layout: tile the consecutive blocks in a section into an even N-column
   grid of equal-size cells — e.g. a text intro + three cards as a 2×2. The
   blocks share one .block-content wrapper, so the grid lives there, and items
   auto-flow into rows (no divider needed). grid-auto-rows: 1fr makes every row
   the same height as the tallest, and minmax(0, 1fr) columns keep every cell
   the same width — so a short text cell and image cards line up as equal tiles.
   Authored via section-metadata "Grid: 2", which sets data-grid="2" on the
   section. Lives here (not section-metadata.css) because EDS can strip that
   sheet. Stacks below 992px. */
@media (width >= 992px) {
  main .section[data-grid] .block-content {
    display: grid;
    gap: var(--spacing-xxl);
    grid-auto-rows: 1fr;
    align-items: stretch;

    /* Container-aware, so a grid section can carry `container-N` like every
       other section. This used to be a flat var(--grid-container-width), which
       pinned a grid to all 12 columns and left `box` as the ONLY way to narrow
       grid content — and `box` by design also confines the authored background
       to a centred panel (see its comment above). A legacy full-bleed grey band
       with contained content was therefore unauthorable: you got the right
       width with a boxed background, or a full-bleed background at 12 columns.
       Measured on /insights/economics/global-economic-outlook-for-2025, whose
       "Global outlook reports" band is edge-to-edge #f0f0f0 on rsmus.com with
       its copy on the 8-column rail (f-260811-g1ba).
       NOT a behaviour change without container-N: --grid-column-width is
       defined as --grid-container-width / 12, so the default of 12 makes this
       calc byte-identical to the value it replaces. */
    max-width: calc(var(--grid-column-width) * var(--container-cols, 12));
    margin-inline: auto;
  }

  main .section[data-grid="2"] .block-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  main .section[data-grid="3"] .block-content {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Asymmetric two-up splits on the 12-grid, for a panel whose two cells are
     SIBLING BLOCKS (e.g. a card beside a text `columns` cell) laid out by the
     section rather than by a block — the only shape that satisfies "no block
     inside a block". Opt-in via section Style: col-<a>-<b>.

     The set mirrors columns.mjs RATIO_TO_COLUMNS one-for-one, so every legacy
     width split an author can pick has a section-level equivalent and no panel
     ever falls back to an equal 2-up it wasn't authored as. That map's comment
     records the measurement: across the 10,220 author-cache dumps / 16,558
     columncontainers the only active values are its eight keys plus `c-full`,
     so this list is TOTAL, not a sample.
       c-40-60 → 5-7   c-60-40 → 7-5   c-25-75 → 3-9   c-75-25 → 9-3
       c-30-70 → 4-8   c-70-30 → 8-4   c-80-20 → 10-2  c-half  → (no class,
     the plain [data-grid="2"] equal split above already is 6-6).

     `col-5-7` predates the others (the blessed c-40-60 promo panel) and kept a
     hand-written rule; all seven now resolve through --col-tracks so the ratio
     table lives in ONE place and a new split is one declaration, not a new
     selector pair. Computed value for col-5-7 is byte-identical to the rule
     this replaced. Class-based selector (0,4,1) beats the [data-grid="2"] rule
     above. Lives here (not section-metadata.css, which EDS can strip). */
  main .section.col-5-7  { --col-tracks: minmax(0, 5fr)  minmax(0, 7fr); }
  main .section.col-7-5  { --col-tracks: minmax(0, 7fr)  minmax(0, 5fr); }
  main .section.col-3-9  { --col-tracks: minmax(0, 3fr)  minmax(0, 9fr); }
  main .section.col-9-3  { --col-tracks: minmax(0, 9fr)  minmax(0, 3fr); }
  main .section.col-4-8  { --col-tracks: minmax(0, 4fr)  minmax(0, 8fr); }
  main .section.col-8-4  { --col-tracks: minmax(0, 8fr)  minmax(0, 4fr); }
  main .section.col-10-2 { --col-tracks: minmax(0, 10fr) minmax(0, 2fr); }

  main .section.grid-2.col-5-7 .block-content,
  main .section.col-5-7[data-grid="2"] .block-content,
  main .section.grid-2.col-7-5 .block-content,
  main .section.col-7-5[data-grid="2"] .block-content,
  main .section.grid-2.col-3-9 .block-content,
  main .section.col-3-9[data-grid="2"] .block-content,
  main .section.grid-2.col-9-3 .block-content,
  main .section.col-9-3[data-grid="2"] .block-content,
  main .section.grid-2.col-4-8 .block-content,
  main .section.col-4-8[data-grid="2"] .block-content,
  main .section.grid-2.col-8-4 .block-content,
  main .section.col-8-4[data-grid="2"] .block-content,
  main .section.grid-2.col-10-2 .block-content,
  main .section.col-10-2[data-grid="2"] .block-content {
    grid-template-columns: var(--col-tracks);
    align-items: center;
    gap: var(--spacing-xl);
  }
}

/* The text cell of a col-<a>-<b> panel is a .columns block whose .col adds 40px
   side padding; that narrows the usable text width (~399px in container-8) enough
   to wrap the heading onto a second line. Live rsmus.com has no such inset (text
   fills the full ~456px column), so drop the horizontal padding here to match.
   Only the text cell is a .columns block — the other cell is a card/quote/video.

   Applies to EVERY ratio, not just col-5-7: the inset comes from the .columns
   block being used as a cell, which is identical in all seven splits, so scoping
   the fix to one class would ship the same wrap bug on the other six. */
main .section.col-5-7 .columns .col,
main .section.col-7-5 .columns .col,
main .section.col-3-9 .columns .col,
main .section.col-9-3 .columns .col,
main .section.col-4-8 .columns .col,
main .section.col-8-4 .columns .col,
main .section.col-10-2 .columns .col {
  padding-inline: 0;
}

/* A boxed (layout-box) asymmetric panel confines its background to a centred box,
   so section `spacing-*` only pads inside that box. Add an outside margin so a gap
   shows between the panel and the full-bleed section that follows it. */
main .section.col-5-7.layout-box,
main .section.col-7-5.layout-box,
main .section.col-3-9.layout-box,
main .section.col-9-3.layout-box,
main .section.col-4-8.layout-box,
main .section.col-8-4.layout-box,
main .section.col-10-2.layout-box {
  margin-bottom: var(--spacing-xl);
}

/* Below 992px the tiles stack one per row. A flex column (not plain block) so
   the gap between stacked tiles survives, and max-width/margin gives the same
   side gutter as the rest of the site so nothing touches the screen edges.
   Explicit (rather than relying on the >=990 grid rules simply not applying) so
   it overrides the section-metadata.css grid rules, which would otherwise start
   gridding at 567px when that sheet is present. */
@media (width < 992px) {
  main .section[data-grid] .block-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-l);
    max-width: var(--grid-container-width);
    margin-inline: auto;
  }
}

/* section padding — defaults to xl, but the section-metadata "spacing" key
   (xs|s|m|l|xl|xxl) overrides it via the --top-bottom-spacing variable. These
   live here (not section-metadata.css) because this sheet's `main .section`
   rule out-specifies the block sheet's `.section`, and EDS can strip the block
   sheet entirely. Mirrors the calc(... * 2) scale used in section-metadata.css. */
main .section {
  --top-bottom-spacing: var(--spacing-xl);
  padding: var(--top-bottom-spacing) 0;
}

main .section.spacing-none { --top-bottom-spacing: var(--spacing-none); }
main .section.spacing-xs  { --top-bottom-spacing: calc(var(--spacing-xs) * 2); }
main .section.spacing-s   { --top-bottom-spacing: calc(var(--spacing-s) * 2); }
main .section.spacing-m   { --top-bottom-spacing: calc(var(--spacing-m) * 2); }
main .section.spacing-l   { --top-bottom-spacing: calc(var(--spacing-l) * 2); }
main .section.spacing-xl  { --top-bottom-spacing: calc(var(--spacing-xl) * 2); }
main .section.spacing-xxl { --top-bottom-spacing: calc(var(--spacing-xxl) * 2); }

/* mobile-spacing — section-metadata "mobile-spacing" key overrides the padding
   below 992px only. Sits in the media query so it out-orders the desktop
   spacing rule above regardless of which spacing class is also present. */
@media (width < 992px) {
  main .section.mobile-spacing-none { --top-bottom-spacing: var(--spacing-none); }
  main .section.mobile-spacing-xs   { --top-bottom-spacing: calc(var(--spacing-xs) * 2); }
  main .section.mobile-spacing-s    { --top-bottom-spacing: calc(var(--spacing-s) * 2); }
  main .section.mobile-spacing-m    { --top-bottom-spacing: calc(var(--spacing-m) * 2); }
  main .section.mobile-spacing-l    { --top-bottom-spacing: calc(var(--spacing-l) * 2); }
  main .section.mobile-spacing-xl   { --top-bottom-spacing: calc(var(--spacing-xl) * 2); }
  main .section.mobile-spacing-xxl  { --top-bottom-spacing: calc(var(--spacing-xxl) * 2); }
}

main .section:first-child {
  padding-top: 0;
}

/* Restore top padding when the first section doesn't lead with a hero —
   otherwise the content sits flush against the fixed header. bio-hero is a
   full-bleed hero band, so it's excluded like .hero/.event-hero. */
main .section:first-child:not(:has(.hero, .event-hero, .bio-hero)) {
  padding-top: var(--spacing-xl);
}

/* …but an explicit `Spacing: none` must win over that restore. The recipe emits a
   hairline `divider` as the first section on ~760 pages (parity backlog item 1);
   legacy renders that rule 2px tall under the header, while the restore rule above
   silently added 32px of dead space that no authored value could remove. Same
   specificity as the rule above, so this has to stay after it. */
main .section:first-child.spacing-none {
  padding-top: 0;
}

/* A hero is full-bleed; don't add section padding around it. Both sides: the top
   used to be covered only by the `:first-child` rule above, so a hero that is NOT
   the first section — every page where the importer emitted a leading `divider`
   band (parity backlog item 1) — picked up 32px of white above the hero that
   legacy does not have. rsm-ca /events measured hero y=171 vs legacy y=140. */
main .section:has(.hero, .event-hero, .bio-hero) {
  padding-block: 0;
}

/* Reduce the top gap on the section directly after a hero — the default 48px
   section padding creates a large white gap between the hero and the content below.
   Remove it entirely so the block's own internal padding controls the spacing. */
body:has(.card.news-release) main .section:has(.hero, .event-hero) + .section {
  padding-top: 0;
}

/* Press-release contact-info bar (section.container directly after the hero).
   Override both top AND bottom to match rsmus.com box-model: ~22px each side,
   20px inline — matches reference's 1.2em/2rem at 18px/10px-root. */
body:has(.card.news-release) main .section:has(.hero, .event-hero) + .section.container {
  padding: 22px 20px;
}

/* bio-hero also sheds the top padding so the green band sits flush under the
 fixed header, like the other full-bleed heroes. */
main .section:has(.bio-hero) {
  padding-top: 0;
}

main {
  ul,
  ol {
    padding-inline-start: 24px;

    /* Reduce nested lists even further */
    ul,
    ol {
      padding-inline-start: 12px;
    }
  }
}

button {
  cursor: pointer;
}

li {
  margin-block: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300;
  line-height: var(--heading-line-height);
}

h1 { font-size: var(--heading-font-size-xxl); }
h2 { font-size: var(--heading-font-size-xl); }
h3 { font-size: var(--heading-font-size-l); }
h4 { font-size: var(--heading-font-size-m); }
h5 { font-size: var(--heading-font-size-s); }
h6 { font-size: var(--heading-font-size-xs); }

h1, h2, h3, h4, h5, h6 {
  color: #53565a;
  margin: 0;
}

/* One-off oversized H1: tag the section with `Style: heading-xxl` */
main .section.heading-xxl h1 {
  font-size: clamp(10rem, 16vw, 14rem);
  line-height: 1;
  margin: 0;
}

@media (width < 767px) {
  main .section.heading-xxl h1 {
    font-size: 120px;
  }
}

main .button-container { display: inline; }

/* A paragraph whose only content is a button link (DA .button-container, or
   legacy .btn markup) gets the base `p { margin: 1rem 0 }`. Keep the top
   margin for spacing above the button, drop the bottom. */
main .default-content p:has(> a.button:only-child),
main .default-content p:has(> a.btn:only-child) {
  margin-bottom: 0;
}

/* Multiple buttons on one line (link + bold/italic grouped): space them out
   and let them wrap/stack onto new rows when there isn't enough width. */
main .btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Preserve section-metadata centering (flex ignores text-align). */
main .section[data-text-center*="p"] :is(.default-content, .block-content) p.btn-group {
  justify-content: center;
}

/* Newsroom "RSM news releases" section (rsmus.com parity). */
/* Spread the three "See all 20XX" year buttons evenly (rsmus.com), with equal
   space around each — including margins from the section edges — rather than
   grouped centered (or pinned to the edges by space-between). */
main .section:has(.card.news-release) :is(.default-content, .block-content) p.btn-group {
  justify-content: space-around;
}

/* "View more news releases" turns its text + outline blue on hover (rsmus.com),
   rather than the default green fill of btn-secondary. */
main .section:has(.card.news-release) a.btn.btn-secondary.btn-outline:hover {
  color: var(--color-primary-blue);
  background: transparent;
  border-color: var(--color-primary-blue);
}

/* Newsroom "RSM US in the news" quote (rsmus.com parity). Text size comes from
   the quote-size-s variant (24px, set via section-metadata style) — no hardcoded
   font override here. */
@media (width >= 768px) {
  /* Wider vertical rhythm between the blue top/bottom rules, matching live (~80px). */
  body:has(.card.news-release) main .section .quote.border-primary-blue {
    padding-block: 80px;
  }

  /* Constrain the photo+text row to a narrower, centred column like live
     (the blue top/bottom rules still span the full section width). */
  body:has(.card.news-release) main .section .quote.border-primary-blue > div {
    max-width: 660px;
    margin-inline: auto;
    gap: 20px;
  }

  /* Left-align the quote + attribution, overriding the section's text-center. */
  body:has(.card.news-release) main .section[data-text-center] :is(.default-content, .block-content) .quote.border-primary-blue :is(blockquote p, .quote-attribution) {
    text-align: left;
  }
}

/* ── Section style: link-list ─────────────────────────────────────────────────
   Sitemap-shaped navigation: runs of one-link-per-paragraph default content that
   legacy renders as a `cmp-linklist__items twocol`. Measured on
   rsmcanada.com/sitemap at 1440: two columns in the 880 rail, links 18px/24px
   weight 400 in text grey (NOT the green body-link colour), a 12px chevron 5px
   after the label, and headings that span both columns with 20px/7px margins.

   `column-span: all` on the headings is what makes one wrapper hold several
   groups: each heading interrupts the column flow, so its links start a fresh
   two-column run underneath — the same shape as legacy's separate lists without
   restructuring the authored content. `p > strong` is a group sub-heading
   ("Work with us").

   The accordion `link-list` VARIANT covers the same treatment inside accordion
   panels (see blocks/accordion/accordion.css); this rule is scoped to
   `.default-content` so the two never overlap. */
main .section.link-list > .default-content {
  column-count: 2;
  column-gap: 18px;
}

main .section.link-list > .default-content > :is(h1, h2, h3, h4, p:has(> strong:only-child)) {
  column-span: all;
  margin: 20px 0 7px;
}

main .section.link-list > .default-content > p:has(> a) {
  margin: 0;
  break-inside: avoid;
}

main .section.link-list > .default-content a:any-link:not(.btn) {
  color: var(--color-text);
  font-weight: 400;
}

@media (width < 768px) {
  main .section.link-list > .default-content {
    column-count: 1;
  }
}

/* Newsroom "Media fact sheet" navy band (rsmus.com parity). */
/* The pipeline points the section background at a token-gated eds-prd media URL
   (401s on the preview); use the working rsmus.com source directly. !important
   is required to beat the inline background-image set by the section handler. */
body:has(.card.news-release) main .section.bg-navy:has(.columns.divider) {
  background-image: url("https://rsmus.com/content/dam/rsm/1_real-world/people/cta/business_people_22_rw_cta.jpg") !important;
}

/* Equal-height stat columns so every divider is the same length (live), instead
   of each column sizing to its content (which left the last divider short). */
body:has(.card.news-release) main .section.bg-navy:has(.columns.divider) .columns.divider .row {
  align-items: stretch;
}

/* Newsroom "Media contacts": a FULL-WIDTH grey section break below the block.
   The rule lives on the section (spans the whole viewport) rather than the
   content wrapper (which would inset it to the grid width). ("for media use
   only" is italicised on its own line via an <em>/<br> in the content.) */
main .section:has(h2#media-contacts) {
  border-bottom: 1px solid var(--color-light-grey-2);
}

/* The "*These numbers…" footnote is small and left-aligned on live, not the
   section's centered 18px body text. Targets the loose note paragraph (no link),
   leaving the "Learn more" button paragraph centered. */
body:has(.card.news-release) main .section.bg-navy:has(.columns.divider) .default-content > p:not(:has(a)) {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  margin-inline: 0;
}

/* "Learn more about our firm" button. Production styles it as `_green secondary`
   (an outline button); on this navy band — a dark, light-text container — RSM's
   own CSS flips `--button-green-color` to white, so it renders as a WHITE outline
   that fills green on hover, not the solid green btn-primary that <strong>
   produces. Match that here (authoring keeps the <strong> button markup). */
body:has(.card.news-release) main .section.bg-navy:has(.columns.divider) .default-content a.btn {
  background: transparent;
  border: 1px solid var(--color-primary-white);
  color: var(--color-primary-white);
}

body:has(.card.news-release) main .section.bg-navy:has(.columns.divider) .default-content a.btn:hover {
  background-color: var(--color-primary-hover-green);
  color: var(--color-primary-white);
}

main a.button:any-link {
  background: none;
  border: none;
  border-radius: 0;
  color: var(--color-link);
  font-size: inherit;
  font-weight: inherit;
  padding: 0;
  margin: 0;
  text-decoration: underline;
  white-space: normal;
}

strong {
  font-weight: 600;
}

input,
textarea,
select,
button {
  font: inherit;
}

img {
  width: 100%;
  height: auto;
}

svg {
  width: 20px;
  height: 20px;
}

svg.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}

a svg.icon {
  width: 10px;
  height: 10px;
}

/* …but a link-list chevron is legacy's 12px glyph, not the 10px inline default
   (see the `link-list` section style above). */
main .section.link-list > .default-content a svg.icon {
  width: 12px;
  height: 12px;
  margin-left: 5px;
}

/*
 * Canonical breakpoints (RSMUS_ACM-aligned — media queries cannot use CSS vars):
 *   phoneL   567px   @media (width >= 567px)
 *   tablet   768px   @media (width >= 768px)
 *   desktop  992px   @media (width >= 992px)
 *   desktopMx 1280px @media (width >= 1280px)
 *   desktopS  1440px @media (width >= 1440px)
 */

@media (width >= 1440px) {
  :root {
    --grid-container-width: 1280px;
  }
}

/* Hide authored sections until they are decorated, so nothing flashes undecorated.
   The reveal is pure cascade: decoration adds `.section`, and the `.section`
   rule's `display: block` (0,1,0) out-points `main > div` (0,0,2) because one
   class beats any number of element selectors. `div[data-status]` re-hides a
   section while its blocks load, until ak.js deletes the attribute.

   DO NOT write the fragment exemption below as `main > div:not(.fragment-content)`.
   `:not()` takes the specificity of its argument, so that selector is (0,1,2) —
   which then out-points `.section` (0,1,0) and hides EVERY section on EVERY page.
   The exemption has to be a separate rule that wins on its own, which is why it
   sits beside the `.section` rule rather than as an exception here. */
main > div,
.has-template,
div[data-status] {
  display: none;
}

aem-sidekick {
  opacity: 0;

  &[open="true"].is-ready {
    opacity: 1;
  }
}
/* Newsroom welcome column (rsmus.com parity). Scoped via the section-metadata
   style token `newsroom-welcome` (authored classes on a <p> are stripped by the
   pipeline, but section-metadata style values survive as section classes). */

/* Match rsmus.com's wider columns: trim the block's 40px side gutter so the
   promo image (and intro text) fill the column like live — the image renders
   ~512px, matching live, instead of 453px inside the default padding. */
main .section.newsroom-welcome .columns .col {
  padding-inline: 10px;
}

/* The RSM100 promo image is the column's first child, so the columns block's
   `.col > p:first-child img` icon rule shrinks it to 80px — restore full width. */
main .section.newsroom-welcome .columns .col > p:first-child img {
  width: 100%;
  height: auto;
  max-width: none;
}

/* "Follow RSM:" label inline with the social icons on one row (rsmus.com):
   bold 700 label (matches live), ~18px dark-grey icons spaced ~26px apart,
   right-aligned to the column's right edge (under the promo image's edge). */
main .section.newsroom-welcome .columns .col p:has(> a > .icon, > a > svg) {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 16px;
  font-weight: 700;
}

main .section.newsroom-welcome .columns .col p a:has(> .icon, > svg) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-primary-dark-grey, #515356);
  transition: color 0.2s ease;
}

main .section.newsroom-welcome .columns .col p a:has(> .icon, > svg):hover {
  color: var(--color-primary-green);
}

main .section.newsroom-welcome .columns .col :is(.icon, svg) {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* Tablet+ (>= 768px): keep the welcome intro (left) and RSM100 promo (right)
   side-by-side, overriding the global sub-992 columns stack (columns.css). The
   7-5 ratio lives in --col-template (set by columns.js); align content to the
   top so the intro copy and the promo image share a top edge (rsmus.com). */
@media (width >= 768px) {
  main .section.newsroom-welcome .columns .row {
    grid-template-columns: var(--col-template, 7fr 5fr);
    align-items: start;
    column-gap: var(--spacing-m);
  }
}

/* Media-contact band — the "…for media use only / Follow RSM:" row that opens
   /newsroom. It is authored as a `columns` block whose trailing paragraph is a
   run of icon-only links. `span.icon` is swapped for a bare <svg> by ak.js on
   EVERY section, but until now the only rules that SIZED those <svg>s were the
   `newsroom-welcome` ones above. A band whose section does not carry that token
   (rsm-ca /newsroom, styled `full-width`) fell through to the columns defaults:
   icons at their intrinsic ~10x20, centred text, and the block's 20px/30px
   column padding on top of the section's 32px — roughly double live's band
   height. Key the treatment off the CONTENT SHAPE (a link whose entire content
   is an icon) so it cannot regress when a content re-stage drops a style token.

   That shape test lives in `columns.js` (`decorateIconLinkRows`), NOT in a
   `:has()` selector, and these rules key off the classes it adds:
     .has-icon-link-row  on the section and the block
     .icon-link-row      on each run's parent — the `<p>` (rsm-us) or the `.col`
                         itself when EDS unwrapped a single-paragraph cell (rsm-ca)
     .icon-link          on each icon-only link
   The first cut of this used `a:has(> .icon:only-child)`, but `:only-child`
   counts ELEMENT children only — text nodes are invisible to it — so the
   ordinary RSM text-plus-chevron link matched too and every one inside a
   `columns` block went #63666a (/locations/*, /about, /careers). Whether the
   link has label TEXT is the real signal and CSS cannot see it.

   `newsroom-welcome` is excluded throughout: rsmus.com sizes the same row
   differently (24px icons, 28px gap) and that section is already tuned to it.

   Live reference — rsmcanada.com/newsroom @1440, measured (rem = 10px there):
     band     15px top / 0 bottom padding on a 1280px rail
     columns  60/40, text-align:left, no column padding
     row      flex, justify-content:flex-end, align-items:center
     label    18px / 700 / #63666a
     link     padding-inline:15px, #63666a, hover --primary-blue
     glyph    18px tall; the last link sits flush with the column's right edge */
main .section:not(.newsroom-welcome) .columns.has-icon-link-row .col {
  text-align: left;
  padding-block: 0;
}

/* Only claim the section's vertical rhythm when the author has NOT set an
   explicit spacing token — an authored `Spacing:` always wins. */
main .section:not(.newsroom-welcome, [class*="spacing-"]).has-icon-link-row {
  --top-bottom-spacing: 15px;

  padding-bottom: 0;
}

main .section:not(.newsroom-welcome) .columns .icon-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: center;
  justify-content: flex-end;
  font-weight: 700;
  color: var(--color-primary-medium-grey);
}

main .section:not(.newsroom-welcome) .columns .icon-link-row .icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 15px;
  color: var(--color-primary-medium-grey);
  transition: color 0.2s ease;
}

/* Live puts 30px between the label and the first icon — 15px of the ul's own
   margin plus the link's 15px padding. */
main .section:not(.newsroom-welcome) .columns .icon-link-row .icon-link:first-of-type {
  margin-left: 15px;
}

main .section:not(.newsroom-welcome) .columns .icon-link-row .icon-link:last-of-type {
  padding-right: 0;
}

main .section:not(.newsroom-welcome) .columns .icon-link-row .icon-link:hover {
  color: var(--color-primary-blue);
}

main .section:not(.newsroom-welcome) .columns .icon-link-row .icon-link .icon {
  width: 18px;
  height: 18px;
  fill: currentcolor;
}

/* social-share FOUC guard (eager) — keep the sticky share rail hidden until its
   JS decorate() finishes and adds .social-share-ready. This lives in the EAGER
   stylesheet (not the block's own lazy CSS) so the dark panel can never flash as
   a grey bar on the right while the block's CSS is loading late/stale from the
   CDN. JS module execution is independent of the block CSS, so the reveal is
   reliable. visibility (not display) keeps the fixed rail out of layout flow. */
.social-share:not(.social-share-ready) {
  visibility: hidden;
}

/* ── Auto-contrast for dark section backgrounds ───────────────────────────────
   section-metadata.js measures the section's real WCAG relative luminance and
   tags its children `.dark-scheme`. That signal used to drive nothing but the
   `color-scheme` property, which restyles form controls and scrollbars — NOT
   text — so authored copy kept the default grey body colour and landed on the
   dark panel. On --color-primary-blue that is #515356 on #009CDE: 2.6:1, under
   the 4.5:1 WCAG AA needs, where legacy renders the same copy white.

   Scoped to .default-content deliberately — blocks own their colours (quote
   bg-blue already forces white), so this rescues only plain authored text,
   which has nothing else to react to the background with. A section whose
   author set the `text-light` style already looked right; this makes it
   automatic when they didn't. Lives at the END of the file so it is not
   followed by lower-specificity rules for the same elements. */
main .section > .default-content.dark-scheme {
  color: var(--color-white);

  h1, h2, h3, h4, h5, h6 { color: var(--color-white); }

  /* Ranks below the newsroom icon-link rule purely by position; the two never
     match the same anchor, so there is nothing to override. */
  /* stylelint-disable-next-line no-descending-specificity */
  a:any-link:not(.btn) { color: var(--color-white); }
}

/* ── An emptied section collapses (Bryce 2026-08-12) ──────────────────────────
   A block that resolves to nothing REMOVES itself rather than render an empty
   shell — contributors-list with no authored `Contributor` ids, or with ids that
   no longer resolve against the bios sheet, is the case that surfaced this. What
   stays behind is the `.block-content` wrapper groupChildren() built for it in
   scripts/ak.js, and the section keeps its own vertical padding, so the page
   shows a band of dead space exactly where the block would have been. Measured
   on rsm-us /insights/economics/economic-outlook-for-2026: FOUR emptied
   contributors-list sections, 32px each (`spacing-s`, 16px top + 16px bottom).

   Deliberately narrow. `:empty` matches only after a block has removed ITSELF —
   before decoration the wrapper still holds the block element, and a block that
   populates asynchronously keeps its element there throughout, so there is no
   window in which a live section collapses and re-expands. `:only-child` keeps a
   section that still holds authored default content (or a second block that did
   render) fully visible: only a section whose entire remaining content is the
   emptied wrapper is hidden. An authored spacer section never matches either,
   because a section with no block children gets no `.block-content` wrapper at
   all.

   Lives at the END of the file for the same reason as the rule above: it is
   higher-specificity than the plain `.section` / `main .section` rules up in the
   sections group, so it has to follow them. That in turn puts it after the much
   higher-specificity news-release rules near line 1182, which is what the
   disable below is for — those set `padding-top` / `padding`, never `display`,
   so the two can never override each other. */
/* stylelint-disable-next-line no-descending-specificity */
main .section:has(> .block-content:only-child:empty) {
  display: none;
}