/* ============================================================
   Leadership Carousel — component styles
   Deploy path: /assets/rbccm/css/components/rbccm-leadership.css

   Snapshot source: production CSS as of 2026-08-28. Prior repo baseline
   was largely in sync; this snapshot adds the three prod-only rulesets
   that were missing locally:
     • .rbccm-leadership--on-ltblue          (light-blue color scheme)
     • .rbccm-leadership__card-displayboth   (LinkType='both' card variant)
     • .contact-details .blue-circle-outline (modal contact icons)
   Everything else is unchanged from what was already in the repo.

   Companion files:
     • /assets/rbccm/js/components/rbccm-leadership.js
     • rbccm-leadership.xsl (skin — DCR-driven author data)
============================================================ */

/* -- Screen reader only -- */
    .rbccm-leadership__sr-only {
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
    }


    /* -- Section -- */
    #rbccm-leadership.rbccm-leadership {
      background-color: #ffffff;
      box-sizing: border-box;
      overflow: hidden;
      padding: 64px 0;
      position: relative;
      width: 100%;
    }

    /* -- Inner container --
       16px horizontal gutter on mobile so the first card doesn't
       touch the viewport edge (matches the heading's 0 16px padding
       above so headings and cards line up left). Padding drops away
       at 1170px where the max-width takes over and centres the block. */
    .rbccm-leadership__inner {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 35px;
      margin: 0 auto;
      max-width: 1140px;
      padding: 0 23px;
      position: relative;
    }
    @media (min-width: 992px) {
      .rbccm-leadership__inner {
        gap: 50px;
      }
    }
    @media (min-width: 1170px) {
      .rbccm-leadership__inner {
        padding: 0;
      }
    }

    /* -- Header block --
       Wraps H2 + optional subheading so `__inner`'s flex gap owns the
       spacing between the header block and the carousel below. Internal
       gap keeps the H2/subheading pair reading as one unit. */
    .rbccm-leadership__header {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* -- Heading --
       Clamped to the 1140px content rail so it lines up with the carousel
       row below. Bottom margin removed — the `__inner` flex gap now owns
       spacing to the carousel, and `__header` internal gap owns spacing
       to the subheading. */
    .rbccm-leadership__heading {
      color: #003168;
      font-family: RBCDisplay, Georgia, Times, serif;
      font-size: 36px;
      font-weight: 500;
      line-height: normal;
      margin: 0;
      max-width: 1140px;
      padding: 0;
    }
    @media (min-width: 992px) {
      .rbccm-leadership__heading {
        font-size: 42px;
      }
    }

    /* -- Slider wrapper -- */
    @media (min-width: 1300px) {
      .rbccm-leadership__slider-track { overflow: hidden; }
    }
    /* Override slick's default 30px bottom margin on a dotted slider */
    #rbccm-leadership .rbccm-leadership__slider-track.slick-dotted.slick-slider {
      margin-bottom: 15px;
    }

    /* Kill any negative L/R margins the host page (or a stray Bootstrap
       row rule) tries to apply to the slider element. Was showing up as
       margin-left: -15px / margin-right: -15px on production and pulling
       the track into the outer gutter. */
    #rbccm-leadership .rbccm-leadership__slider-track.slick-slider {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    /* -- Slick overrides -- */
    #rbccm-leadership .slick-slide {
      box-sizing: border-box;
      float: none;
      height: auto;
      margin: 0 !important;
    }
    #rbccm-leadership .slick-slide > div,
    #rbccm-leadership .slick-slide > div > div { }
    #rbccm-leadership .slick-track {
      display: flex !important;
      align-items: stretch !important;
    }
    #rbccm-leadership .slick-list { overflow: visible; }
    #rbccm-leadership .slick-prev,
    #rbccm-leadership .slick-next { display: none !important; }

    /* -- Active card border --
       Card widths:
         mobile (< 560px) → 343px (fat card, one-per-view)
         560px+           → 270px (multi-card view, tidy 1/2/3/4 math)
       With variableWidth: true and centerMode: false, slick shows N
       cards where N = floor(container_width / 290)  (270 card + 20 gap).
           <  560px viewport → 1 card @ 343
           560-849  viewport → 2 cards @ 270
           850-1139 viewport → 3 cards @ 270
           1140+    viewport → 4 cards @ 270
       Same 270px card at every desktop-ish size keeps the 263px bio
       photos from cropping weirdly when the browser resizes. Mobile
       gets the wider 343 so single-column reads comfortably. */
    .rbccm-leadership__card {
      border: 1px solid #A8A8A8;
      box-sizing: border-box;
      display: flex !important;
      flex-direction: column !important;
      margin: 0 23px 0 0;
      width: 343px !important;
    }
    @media (min-width: 560px) {
      .rbccm-leadership__card {
        width: 270px !important;
      }
    }
    /* At 1300+ the desktop arrow chevrons swap in (see the __btn-icon
       swap at min-width: 1300 below). Tighten the inter-card gutter
       from 23 → 20 at that breakpoint to match the arrow spacing.
       Below 1300, 23 keeps a little more breathing room from the
       container edge while the row scrolls under the mobile chevrons. */
    @media (min-width: 1300px) {
      .rbccm-leadership__card {
        margin: 0 20px 0 0;
      }
    }
    /* Active-card border. `.slick-center` was the marker while the
       carousel ran in centerMode; that class isn't applied under the
       left-align layout, so we also match `.slick-current` (slick's
       class for the leftmost visible slide when centerMode is off).
       Keeping both selectors means either mode still lights up the
       anchor card in dark blue. */
    #rbccm-leadership .slick-center .rbccm-leadership__card,
    #rbccm-leadership .slick-current .rbccm-leadership__card {
      border-color: #003168;
    }

    /* -- Card image zone -- */
    .rbccm-leadership__card-image {
      background-color: #DADADA;
      border-bottom: 1px solid #DADADA;
      box-sizing: border-box;
      flex-shrink: 0;
      max-height: 263px;
      min-height: 263px;
      overflow: hidden;
      position: relative;
      width: 100%;
    }
    .rbccm-leadership__card-image img {
      display: block;
      height: 263px;
      object-fit: cover;
      object-position: top center;
      width: 100%;
    }
    .rbccm-leadership__fpo {
      align-items: center;
      display: flex;
      justify-content: center;
      width: 100%;
      height: 263px;
    }
    .rbccm-leadership__fpo svg { height: 80px; opacity: 0.3; width: 80px; }
    .rbccm-leadership__card-image img[src]:not([src=""]):not([src*="fpoimg.com"]) ~ .rbccm-leadership__fpo {
      display: none;
    }

    /* -- Card body -- */
    .rbccm-leadership__card-body {
      background-color: #ffffff;
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      gap: 8px;
      height: auto;
      min-height: 185px;
      max-height: 185px;
      padding: 24px 24px 46px;
      position: relative;
    }

    /* -- Long-role mode --
       JS sets `.rbccm-leadership--long-role` on the section when ANY card's
       role text exceeds ~70 characters. We grow the card-body bottom
       padding + lift the absolutely-positioned action button so multi-line
       role text doesn't butt up against it. Applied uniformly to every
       card so they all match visually. -- */
    .rbccm-leadership--long-role .rbccm-leadership__card-body {
      padding-bottom: 86px;
      min-height: 225px;
      max-height: 225px;
    }
    .rbccm-leadership--long-role .rbccm-leadership__card-bio,
    .rbccm-leadership--long-role .rbccm-leadership__card-linkedin {
      bottom: 44px;
    }

    /* -- Biography -- absolute bottom-left of card body -- */
    .rbccm-leadership__card-bio {
      /* Strip button chrome */
      appearance: none;
      background: transparent;
      border: 0;
      padding: 0;
      margin: 0;
      cursor: pointer;

      /* Pin to bottom-left, mirroring the LinkedIn placement */
      position: absolute;
      bottom: 24px;
      left: 24px;

      /* Link styling */
      color: #006AC3;
      font-size: 15px;
      line-height: 1;
      text-align: left;
      text-decoration: none;
    }

    .rbccm-leadership__card-bio:hover,
    .rbccm-leadership__card-bio:focus-visible {
      text-decoration: underline;
      outline: none;
    }

    /* Focus state on the card.
       Reuses the active (.slick-center) #003168 border so the focus
       treatment matches the centered-card language across:
         (1) actionless cards that became the tab stop themselves
             (.rbccm-leadership__card:focus-visible), AND
         (2) cards whose inner action (LinkedIn anchor, Biography button)
             has keyboard focus (:has(:focus-visible)). */
    .rbccm-leadership__card:focus { outline: none; }
    /* Primary focus indicator: :focus-within fires whenever the card OR
       any descendant has focus. Works in every browser that supports
       focus events; doesn't depend on :focus-visible or :has(). */
    .rbccm-leadership__card:focus-within,
    .rbccm-leadership__card:focus-visible,
    .rbccm-leadership__card.is-focused {
      border-color: #003168 !important;
      outline: none;
    }
    /* :has() kept in its own rule so a browser that fails to parse it
       can drop just this rule, not the one above. */
    .rbccm-leadership__card:has(:focus-visible) {
      border-color: #003168 !important;
      outline: none;
    }

    /* Focus ring on the card's action element. Keyboard-only via
       :focus-visible so mouse clicks don't show it. Uses #003168 so
       all focus indicators across the component share the same colour. */
    .rbccm-leadership__card-action:focus { outline: none; }
    .rbccm-leadership__card-action:focus-visible {
      outline: 2px solid #003168;
      border-radius: 4px;
    }

    /* Focus ring on the Prev / Next arrow buttons — keyboard-only,
       same #003168 as everything else so the system feels consistent. */
    .rbccm-leadership__btn:focus { outline: none; }
    .rbccm-leadership__btn:focus-visible {
      outline: 2px solid #003168;
      border-radius: 4px;
    }

    /* Hide the circular SVG icon — text-only link */
    .rbccm-leadership__card-bio svg {
      display: none;
    }

    /* -- Card name -- */
    .rbccm-leadership__card-name {
      color: #000;
      font-family: Roboto, sans-serif;
      font-size: 16px;
      font-weight: 500;
      line-height: normal;
      margin: 0;
    }

    /* -- Card role -- */
    .rbccm-leadership__card-role {
      color: #454545;
      font-family: Roboto, sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 19px;
      margin: 0;
    }

    /* -- LinkedIn -- absolute bottom-right of card body -- */
    .rbccm-leadership__card-linkedin {
      bottom: 24px;
      display: inline-block;
      height: 44px;
      position: absolute;
      right: 24px;
      text-decoration: none;
      width: 44px;
    }
    .rbccm-leadership__card-linkedin .li-default { display: block; }
    .rbccm-leadership__card-linkedin .li-hover   { display: none; }
    .rbccm-leadership__card-linkedin:hover .li-default { display: none; }
    .rbccm-leadership__card-linkedin:hover .li-hover   { display: block; }

    /* -- Carousel layout grid --
       DOM order is [Prev] → [slides] → [Next] → [dots] (slick-default).
       Visual layout reshuffles per breakpoint via grid-template-areas:
         Mobile  → track on top, [Prev · Dots · Next] in a row below
         Desktop → Prev flanks left of track, Next flanks right, dots
                   centred in a row beneath the track. */
    .rbccm-leadership__carousel {
      align-items: center;
      box-sizing: border-box;
      display: grid;
      gap: 24px 26px;
      /* 5-column layout: empty 1fr · prev · dots · next · empty 1fr.
         The two outer 1fr cells absorb all the slack, so the
         [prev · dots · next] cluster sits centred together with 26px
         gaps between the arrows and the dot strip — not pushed out to
         the viewport edges. The track spans all five columns. */
      grid-template-columns: 1fr auto auto auto 1fr;
      grid-template-areas:
        "track track track track track"
        ".     prev  dots  next  .";
      margin: 4px auto 0;        /* centre under the 1140 heading */
      max-width: 1140px;         /* lines up with .rbccm-leadership__inner @1170+ */
      width: 100%;
    }
    @media (min-width: 1300px) {
      .rbccm-leadership__carousel {
        /* Track is locked at 1140 (lines up with the heading inside __inner);
           arrows live in their own auto-width columns OUTSIDE the 1140 rail.
           Carousel itself extends beyond __inner via negative side margins
           so the arrows can sit in the section's gutter without shrinking
           the track. */
        column-gap: 24px;
        grid-template-areas:
          "prev track next"
          ".    dots  .";
        grid-template-columns: auto 1140px auto;
        margin: 4px -68px 0 -68px;
        max-width: none;
      }
    }
    #rbccm-leadership #rbccm-lead-prev                { grid-area: prev; }
    #rbccm-leadership .rbccm-leadership__slider-track { grid-area: track; min-width: 0; }
    #rbccm-leadership #rbccm-lead-next                { grid-area: next; }
    #rbccm-leadership #rbccm-lead-dots                { grid-area: dots; justify-self: center; }

    /* -- Controls row (LEGACY — kept in case other pages still emit this markup) --
       The new carousel uses the CSS Grid layout above; this flex row is no
       longer used by leadership-slider-bio.html but is retained for safety. */
    .rbccm-leadership__controls {
      align-items: center;
      display: flex;
      gap: 26px;
      justify-content: center;
      margin-top: 40px;
    }
    @media (min-width: 1245px) {
      .rbccm-leadership__controls { display: none; }
    }

    /* -- Control buttons -- */
    .rbccm-leadership__btn {
      align-items: center;
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      flex-shrink: 0;
      height: 24px;
      justify-content: center;
      padding: 0;
      width: 14px;
    }
    .rbccm-leadership__btn svg { display: block; }

    /* In the new __carousel grid the button must auto-size to whichever
       icon SVG is showing (14×24 on mobile, 44×44 on desktop), so undo
       the legacy fixed dimensions in that context only. */
    .rbccm-leadership__carousel .rbccm-leadership__btn {
      height: auto;
      width: auto;
    }
    /* Specificity bumped (.btn + .icon = 0,2,0) so these win against the
       generic ".rbccm-leadership__btn svg { display: block }" rule above. */
    .rbccm-leadership__btn .rbccm-leadership__btn-icon--mobile     { display: block; }
    .rbccm-leadership__btn .rbccm-leadership__btn-icon--desktop    { display: none; }
    @media (min-width: 1300px) {
      .rbccm-leadership__btn .rbccm-leadership__btn-icon--mobile   { display: none; }
      .rbccm-leadership__btn .rbccm-leadership__btn-icon--desktop  { display: block; }
    }

    /* -- Dots wrapper -- */
    .rbccm-leadership__dots-wrap {
      align-items: center;
      display: flex;
      flex: 0 0 auto;
      justify-content: center;
    }

    #rbccm-leadership .rbccm-leadership__dots-wrap .slick-dots {
      align-items: center;
      bottom: auto !important;
      display: flex !important;
      flex-wrap: wrap;
      row-gap: 12px;
      gap: 26px;
      justify-content: center;
      list-style: none;
      margin: 0;
      padding: 0;
      position: static !important;
      width: auto !important;
    }
    /* Tighten inter-dot gap on narrow viewports so a long dot strip
       (10+ cards) doesn't clip on iPhone SE-class screens. Wrap above
       covers overflow beyond that. */
    @media (max-width: 559px) {
      #rbccm-leadership .rbccm-leadership__dots-wrap .slick-dots {
        gap: 16px;
      }
    }
    #rbccm-leadership .rbccm-leadership__dots-wrap .slick-dots li {
      align-items: center;
      box-sizing: border-box;
      display: flex !important;
      height: 11px !important;
      justify-content: center;
      margin: 0 !important;
      padding: 0 !important;
      width: 11px !important;
    }
    #rbccm-leadership .rbccm-leadership__dots-wrap .slick-dots li button {
      background: none !important;
      border: none !important;
      box-sizing: border-box !important;
      cursor: pointer;
      display: block !important;
      font-size: 0 !important;
      height: 11px !important;
      line-height: 0 !important;
      margin: 0 !important;
      outline: none;
      padding: 0 !important;
      position: static !important;
      width: 11px !important;
    }
    /* Inactive dot: outlined circle */
    #rbccm-leadership .rbccm-leadership__dots-wrap .slick-dots li button::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Ccircle cx='5.5' cy='5.5' r='5' stroke='%23003168' stroke-width='1' fill='none'/%3E%3C/svg%3E") !important;
      background-repeat: no-repeat !important;
      background-size: 11px 11px !important;
      content: '' !important;
      display: block !important;
      height: 11px !important;
      opacity: 1 !important;
      position: static !important;
      width: 11px !important;
    }
    /* Active li: same 11px size, ring via box-shadow 4px offset */
    #rbccm-leadership .rbccm-leadership__dots-wrap .slick-dots li.slick-active {
      height: 11px !important;
      width: 11px !important;
    }
    #rbccm-leadership .rbccm-leadership__dots-wrap .slick-dots li.slick-active button {
      height: 11px !important;
      width: 11px !important;
    }
    /* Active dot: filled circle + ring 4px out via box-shadow.
       Same visual is reused for keyboard focus (:focus-visible) AND mouse
       hover so the dot animates into the active treatment when interacted
       with. */
    #rbccm-leadership .rbccm-leadership__dots-wrap .slick-dots li button::before {
      transition: background-image 0.2s ease, box-shadow 0.2s ease, border-radius 0.2s ease;
    }
    #rbccm-leadership .rbccm-leadership__dots-wrap .slick-dots li.slick-active button::before,
    #rbccm-leadership .rbccm-leadership__dots-wrap .slick-dots li button:focus-visible::before,
    #rbccm-leadership .rbccm-leadership__dots-wrap .slick-dots li button:hover::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Ccircle cx='5.5' cy='5.5' r='5.5' fill='%23003168'/%3E%3C/svg%3E") !important;
      background-size: 11px 11px !important;
      border-radius: 50% !important;
      box-shadow: 0 0 0 4px #ffffff, 0 0 0 5px #003168 !important;
      height: 11px !important;
      width: 11px !important;
      outline: 0px;
    }
    #rbccm-leadership .rbccm-leadership__dots-wrap .slick-dots li button:focus-visible {
      outline: none;
    }

    /* Desktop arrow hover — fills the circle blue and turns the chevron
       white with a smooth transition. Targets the SVG paths directly. */
    .rbccm-leadership__btn-icon--desktop rect,
    .rbccm-leadership__btn-icon--desktop path {
      transition: fill 0.2s ease, stroke 0.2s ease;
    }
    .rbccm-leadership__btn:hover .rbccm-leadership__btn-icon--desktop rect {
      fill: #003168;
    }
    .rbccm-leadership__btn:hover .rbccm-leadership__btn-icon--desktop path {
      stroke: #ffffff;
    }

    /* -- Desktop arrows overlay >=1245px (LEGACY — kept in case other pages
          still emit this markup; the new __carousel grid handles arrow
          placement at all viewports). -- */
    .rbccm-leadership__arrows-desktop {
      align-items: center;
      display: none;
      gap: 26px;
      justify-content: flex-end;
      margin-top: 40px;
      pointer-events: none;
      position: static;
      width: 100%;
    }
    @media (min-width: 1245px) {
      .rbccm-leadership__arrows-desktop { display: flex; }
    }
    .rbccm-leadership__btn-desk {
      align-items: center;
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      height: 44px;
      justify-content: center;
      padding: 0;
      pointer-events: all;
      width: 44px;
    }

    /* -- Reduced motion -- */
    @media (prefers-reduced-motion: reduce) {
      #rbccm-leadership .slick-track {
        transition: none !important;
      }
      .rbccm-leadership__card-linkedin::before,
      .rbccm-leadership__card-linkedin::after,
      .rbccm-leadership__card {
        transition: none !important;
      }
    }

    /* ============================================================
       Subheading + on-dark modifier
       ============================================================ */

    /* -- Subheading -- optional paragraph below H2. Same 1140px content
          rail as the heading so both align to the carousel row. Only
          inserted when the Subheading Datum is set. */
    .rbccm-leadership__subheading {
      color: var(--Blue-Dark-Blue, #003168);
      font-family: Roboto, sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      margin: 0;
      max-width: 1140px;
      padding: 0;
    }

    /* Modifier kept as a hook — spacing between H2 and subheading is now
       owned by `__header`'s 12px flex gap. */
    .rbccm-leadership__heading--with-subhead {
      margin-bottom: 0;
    }

    /* ============================================================
       Modifier: --on-dark
       Dark blue section background + white heading/subheading text.
       Cards stay light (white bg, dark text) — only the section
       chrome switches. Arrow chevrons + dots invert to white for
       legibility against the dark bg.
       ============================================================ */

    /* Section bg. Uses the RBC dark blue (#003168) so the component
       matches other on-dark modules across the site. */
    #rbccm-leadership.rbccm-leadership--on-dark {
      background-color: #003168;
    }

    /* Heading + subheading go white on dark. Alignment is decoupled —
       controlled by the separate `--headings-centered` modifier so
       authors can pick left-align or center independent of scheme. */
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__heading,
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__subheading {
      color: #ffffff;
    }

    /* Card body needs an explicit white bg on the dark scheme; without
       it the body inherits the dark section bg and card text becomes
       unreadable. Card image already has its own #DADADA bg, so this
       only affects the text half of the card. */
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__card-body {
      background-color: #ffffff;
    }


    /* ============================================================
       Modifier: --headings-centered
       Center-aligns the heading + subheading. Works in either color
       scheme so authors can pick alignment independent of light/dark.
       Default alignment (left) is inherited from the base heading rule.
       ============================================================ */
    .rbccm-leadership--headings-centered .rbccm-leadership__heading,
    .rbccm-leadership--headings-centered .rbccm-leadership__subheading {
      text-align: center;
    }

    /* Arrow chevrons + rings invert to white so they read on the dark
       bg. Hover state fills the arrow white with a dark chevron
       (mirror of the light-theme fill-blue-with-white-chevron). */
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__btn-icon--mobile path,
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__btn-icon--desktop rect,
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__btn-icon--desktop path {
      stroke: #ffffff;
    }
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__btn:hover .rbccm-leadership__btn-icon--desktop rect {
      fill: #ffffff;
    }
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__btn:hover .rbccm-leadership__btn-icon--desktop path {
      stroke: #003168;
    }

    /* Dots — inactive outlined circles switch to white outline;
       active/hover/focus circle fills white with a dark-blue ring
       gap so the active dot still reads. */
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__dots-wrap .slick-dots li button::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Ccircle cx='5.5' cy='5.5' r='5' stroke='%23ffffff' stroke-width='1' fill='none'/%3E%3C/svg%3E") !important;
    }
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__dots-wrap .slick-dots li.slick-active button::before,
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__dots-wrap .slick-dots li button:focus-visible::before,
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__dots-wrap .slick-dots li button:hover::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Ccircle cx='5.5' cy='5.5' r='5.5' fill='%23ffffff'/%3E%3C/svg%3E") !important;
      box-shadow: 0 0 0 4px #003168, 0 0 0 5px #ffffff !important;
    }

    /* Active card border — light-theme uses #003168 (dark blue) which
       vanishes against the dark bg. Swap to white so the centered card
       still reads as focused. */
    #rbccm-leadership.rbccm-leadership--on-dark .slick-center .rbccm-leadership__card,
    #rbccm-leadership.rbccm-leadership--on-dark .slick-current .rbccm-leadership__card {
      border-color: #ffffff;
    }

    /* Focus indicators on the dark scheme also flip to white for the
       same contrast reason. */
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__card:focus-within,
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__card:focus-visible,
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__card.is-focused,
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__card:has(:focus-visible) {
      border-color: #ffffff !important;
    }
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__card-action:focus-visible {
      outline-color: #ffffff;
    }
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__btn:focus-visible {
      outline-color: #ffffff;
    }


    /* ============================================================
       Prod-additions block (2026-08-28 snapshot sync)
       Three rulesets present in prod that were missing from the
       repo baseline. Left grouped at the end so they're easy to
       find and diff-review; refactor into the topical sections
       above whenever the file gets its next big cleanup.
       ============================================================ */

    /* Modifier: --on-ltblue
       Light-blue section background — pairs with --on-dark and the
       default (white) as the three available color schemes. Uses
       #f0f6fc so cards + text stay readable without any of the
       dark-scheme text/dot inversions. */
    #rbccm-leadership.rbccm-leadership--on-ltblue {
      background-color: #f0f6fc;
    }

    /* Card variant: __card-displayboth
       Applied to the LinkedIn anchor when LinkType='both' so both
       the Biography button AND the LinkedIn icon can coexist on the
       same card. Currently a hook class — layout tweak (spacing,
       positioning) lives with the site-standard rules for cards
       that carry two action elements. */
    .rbccm-leadership__card-displayboth {
      /* Placeholder: prod ships this class as a marker so specific
         two-action card layouts can be targeted per page. Add
         property overrides here as designs require. */
    }

    /* Modal contact icons (ContactIcons=true)
       Blue circular outline around a FA icon; fills on hover.
       Used inside the biography modal when the ContactIcons Datum
       is enabled — otherwise the modal footer falls back to plain
       text links styled by .rbccm-leadership__modal-footer. */
    .contact-details {
      margin-bottom: 20px;
    }

    .contact-details .blue-circle-outline {
      border-color: #006ac3;
      color: #006ac3;
      width: 28px;
      height: 28px;
      font-size: 14px;
      text-align: center;
      line-height: 100%;
      margin: 0 4px 0 0;
      padding: 6px 3px;
      -webkit-transition: background 50ms, color 50ms;
      transition: background 50ms, color 50ms;
    }
    .contact-details .blue-circle-outline:hover {
      color: #fff;
      background: #006ac3;
    }
    .contact-details a.blue-circle-outline[hidden="hidden"] {
      display: none;
    }

    /* --no-controls: applied by JS when the current bucket is below
       the carousel threshold. Slick stays initialized; only the outer
       chrome (arrows + dots wrap) hides. */
    #rbccm-leadership.rbccm-leadership--no-controls .rbccm-leadership__btn,
    #rbccm-leadership.rbccm-leadership--no-controls .rbccm-leadership__dots-wrap {
      display: none !important;
    }
    /* Collapse the carousel grid to a single "track" column at every
       breakpoint. Slick still runs underneath — this only strips the
       prev/dots/next slots so the track re-aligns with the 1140
       heading rail (and, at ≥1300, drops the -68px gutter breakout). */
    #rbccm-leadership.rbccm-leadership--no-controls .rbccm-leadership__carousel {
      grid-template-columns: 1fr;
      grid-template-areas: "track";
      margin: 4px auto 0;
      max-width: 1140px;
    }
    /* Kill the dots list too in case slick reveals it mid-resize. */
    #rbccm-leadership.rbccm-leadership--no-controls .slick-dots {
      display: none !important;
    }
    /* No carousel = no keyboard-nav instructions worth announcing. */
    #rbccm-leadership.rbccm-leadership--no-controls #rbccm-lead-instructions {
      display: none;
    }

    /* Pure-CSS fallback for the JS `--no-controls` toggle above.
       When the XSL emits data-card-count on the section, hide the
       arrows + dots at desktop for any deck of 4 or fewer cards
       without needing the JS bucket-threshold logic to have run. */
    @media (min-width: 1300px) {
      #rbccm-leadership[data-card-count="1"] .rbccm-leadership__btn,
      #rbccm-leadership[data-card-count="2"] .rbccm-leadership__btn,
      #rbccm-leadership[data-card-count="3"] .rbccm-leadership__btn,
      #rbccm-leadership[data-card-count="4"] .rbccm-leadership__btn,
      #rbccm-leadership[data-card-count="1"] .rbccm-leadership__dots-wrap,
      #rbccm-leadership[data-card-count="2"] .rbccm-leadership__dots-wrap,
      #rbccm-leadership[data-card-count="3"] .rbccm-leadership__dots-wrap,
      #rbccm-leadership[data-card-count="4"] .rbccm-leadership__dots-wrap,
      #rbccm-leadership[data-card-count="1"] .slick-dots,
      #rbccm-leadership[data-card-count="2"] .slick-dots,
      #rbccm-leadership[data-card-count="3"] .slick-dots,
      #rbccm-leadership[data-card-count="4"] .slick-dots {
        display: none !important;
      }
    }