/* =========================================================================
   RBCCM Two-Up Cards - standalone component
   Deploy path: /assets/rbccm/css/components/rbccm-two-up-cards.css

   Design intent
   =========================================================================
   Reusable 2-up card row that supports two content patterns via Preset
   modifiers:

     --features         MAAS+MATA parity. Dark section. Each card holds
                        an eyebrow tag, title, body copy, and a 3-6
                        bullet feature list. Cards can be individually
                        themed --dark or --light so a duotone row works.

     --video-callouts   Find conviction / Institutional Investors
                        parity. Light section. Each card leads with a
                        media zone (illustration + play button), then
                        title, subtitle, body copy, and a text CTA link.
                        Clicking the play button opens a modal video.

   Shared shell
   =========================================================================
   Both presets share:
     - Section header (eyebrow + heading + optional description)
     - 2-up card grid with 16-24px gap, stagger-parent fade-in
     - Card wrapper (eyebrow / title / body typography baseline)
     - Responsive stack at <=871

   Extending
   =========================================================================
   To add a new preset:
     1. Append a modifier scope block in this file: .rbccm-two-up-cards--foo
     2. Add xsl:when branch in rbccm-two-up-cards.xsl for the preset
     3. Add Option to Preset Datum in rbccm-two-up-cards-properties.xml
   ========================================================================= */


/* =========================================================================
   1. Shared shell
   ========================================================================= */

/* Section is full-bleed so the background colour reaches the viewport
   edges. Content is centred via the flex column plus the inner header
   (max-width 820) and grid (max-width 1180) each carrying their own
   width caps. */
.rbccm-two-up-cards {
  width: 100%;
  padding: 60px 23px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
  background: var(--rbccm-two-up-cards-bg);
  color: var(--rbccm-two-up-cards-fg);
  box-sizing: border-box;
}
@media (min-width: 992px) {
  .rbccm-two-up-cards {
    padding: 80px 23px;
    gap: 48px;
  }
}

/* Section header block. All children are optional -- blank Datums hide
   the corresponding child. */
.rbccm-two-up-cards__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 820px;
  width: 100%;
}

.rbccm-two-up-cards__eyebrow {
  color: var(--rbccm-two-up-cards-eyebrow, #FFC72C);
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  margin: 0;
}

/* Section heading -- Figma title-small-mobile: RBC Display 36/500/120%.
   Desktop bumps to 42px. Preset --var supplies the colour. */
.rbccm-two-up-cards__heading {
  color: var(--rbccm-two-up-cards-heading, inherit);
  font-family: 'RBC Display', RBCDisplay, Georgia, Times, serif;
  font-size: 36px;
  font-weight: 500;
  line-height: 120%;      /* 43.2px */
  margin: 0;
}
@media (min-width: 992px) {
  .rbccm-two-up-cards__heading {
    font-size: 42px;
    line-height: 125%;
  }
}

/* Section description -- Figma "description desktop": Roboto 16/400/150%,
   ligatures off. Preset --var supplies the colour. */
.rbccm-two-up-cards__description {
  color: var(--rbccm-two-up-cards-description, inherit);
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;      /* 24px */
  font-feature-settings: 'liga' off, 'clig' off;
  margin: 0;
  max-width: 720px;
}

/* 2-up grid. Grid keeps card row-heights equal even when one title
   wraps to two lines while the other doesn't. Stacks single column
   below 872. */
.rbccm-two-up-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
  max-width: 1180px;
  align-items: stretch;
}
@media (min-width: 872px) {
  .rbccm-two-up-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 24px;
  }
}

/* Card wrapper. Presets extend this with padding, background, border,
   and any preset-specific child layout. */
.rbccm-two-up-cards__card {
  display: flex;
  flex-direction: column;
  text-align: left;
  height: 100%;
  border-radius: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.rbccm-two-up-cards__card-eyebrow {
  font-family: Roboto, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: 0.5px;
  margin: 0;
}

.rbccm-two-up-cards__card-title {
  font-family: Roboto, Arial, sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 120%;
  margin: 0;
}

.rbccm-two-up-cards__card-body {
  font-family: Roboto, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 150%;
  margin: 0;
}


/* =========================================================================
   2. Preset: --features   (MAAS+MATA platforms - ported verbatim)
   =========================================================================
   Ports the live MAAS+MATA .rbccm-maas-mata__platforms CSS 1:1 under this
   preset scope. All colours, sizes, line-heights, spacing, eyebrow-rule
   pattern, and hover behaviour match the live site exactly. Only the
   class names change (BEM prefix swap). If you're editing this block,
   the source-of-truth reference is maas-mata.css lines ~900-1231. */

.rbccm-two-up-cards--features {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  gap: 32px;
  padding: 100px 23px 60px;
  background: var(--rbccm-two-up-cards-bg, #041e42);
  text-align: center;
}
@media (min-width: 992px) {
  .rbccm-two-up-cards--features {
    gap: 60px;
    padding: 80px 23px;
  }
}
/* Below 992: every child of the platforms section fills the available
   width so eyebrow, heading, and cards row all span from gutter to
   gutter. */
@media (max-width: 991px) {
  .rbccm-two-up-cards--features > * {
    width: 100%;
    max-width: 100%;
  }
}

/* Section eyebrow: yellow, Roboto 14/400 letter-spacing 3, 45x2 yellow
   rule generated via ::after. Mobile stretches full-width. Desktop
   caps at 858 wide per Figma. */
.rbccm-two-up-cards--features .rbccm-two-up-cards__eyebrow {
  color: #FFC72C;
  text-align: center;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;      /* 16.8px */
  letter-spacing: 3px;
  text-transform: none;
  margin: 0 auto;
  padding: 15px 35px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  align-self: stretch;
  min-height: 49px;
  box-sizing: border-box;
  max-width: none;
}
@media (min-width: 992px) {
  .rbccm-two-up-cards--features .rbccm-two-up-cards__eyebrow {
    width: 858px;
    max-width: 100%;
    min-height: 40px;
    height: auto;
    align-self: auto;
    padding-bottom: 10px;
  }
}
.rbccm-two-up-cards--features .rbccm-two-up-cards__eyebrow::after {
  content: '';
  display: block;
  width: 45px;
  height: 2px;
  background: #FFC72C;
}

/* Section heading: RBC Display 36/mobile 42/desktop, weight 500,
   white, centred. Stretches full-width on mobile. */
.rbccm-two-up-cards--features .rbccm-two-up-cards__heading {
  color: #FFFFFF;
  text-align: center;
  font-family: RBCDisplay, Georgia, Times, serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;      /* 43.2px */
  align-self: stretch;
  margin: 0;
  max-width: none;
}
@media (min-width: 992px) {
  .rbccm-two-up-cards--features .rbccm-two-up-cards__heading {
    font-size: 42px;
    line-height: 125%;    /* 52.5px */
    align-self: auto;
  }
}

/* Cards row: flex column on mobile (stacked), flex row at 1024+.
   Gap 16, max-width 956 (two 470-wide cards + 16 gap). */
.rbccm-two-up-cards--features .rbccm-two-up-cards__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  width: 100%;
  max-width: 956px;
  text-align: left;
  margin: 0 auto;
  grid-template-columns: none;
  grid-auto-rows: auto;
}
@media (min-width: 1024px) {
  .rbccm-two-up-cards--features .rbccm-two-up-cards__grid {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }
}

/* Card: 470 wide on desktop, stretches on mobile. Padding 40/30,
   radius 20, subtle shadow. Dark card = 5% white on navy w/ hairline
   border; light card = white bg. */
.rbccm-two-up-cards--features .rbccm-two-up-cards__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 40px 30px;
  border-radius: 20px;
  box-shadow: 0 1px 4px 0 rgba(25, 33, 61, 0.06);
  align-self: stretch;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 200ms ease, transform 200ms ease;
  overflow: visible;
  height: auto;
}
@media (min-width: 1024px) {
  .rbccm-two-up-cards--features .rbccm-two-up-cards__card {
    width: 470px;
    max-width: 470px;
    flex: 0 0 470px;
    align-self: auto;
    gap: 20px;
  }
}
.rbccm-two-up-cards--features .rbccm-two-up-cards__card:hover,
.rbccm-two-up-cards--features .rbccm-two-up-cards__card:focus-visible {
  box-shadow: 0 12px 32px 0 rgba(25, 33, 61, 0.15);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}
.rbccm-two-up-cards--features .rbccm-two-up-cards__card:focus-visible {
  outline: 2px solid #0051A5;
  outline-offset: 2px;
}

.rbccm-two-up-cards--features .rbccm-two-up-cards__card--light {
  background: #FFF;
  color: #494949;
}
.rbccm-two-up-cards--features .rbccm-two-up-cards__card--dark {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.13);
}

/* Card eyebrow ("MATA - Analytics" / "MAAS - Execution"): inline-flex
   row where the text sits left and a 0.5px rule fills the remaining
   card width. Blue on light card, yellow on dark card. */
.rbccm-two-up-cards--features .rbccm-two-up-cards__card-eyebrow {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  color: #0051A5;
  font-family: Roboto, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: 0.96px;
  font-feature-settings: 'liga' off, 'clig' off;
  text-transform: none;
  margin: 0;
  padding: 0;
  border: 0;
  align-self: stretch;
}
.rbccm-two-up-cards--features .rbccm-two-up-cards__card-eyebrow::after {
  content: '';
  display: block;
  flex: 1;
  height: 0.5px;
  background: #0051A5;
}
.rbccm-two-up-cards--features .rbccm-two-up-cards__card--dark .rbccm-two-up-cards__card-eyebrow {
  color: #FFC72C;
}
.rbccm-two-up-cards--features .rbccm-two-up-cards__card--dark .rbccm-two-up-cards__card-eyebrow::after {
  background: #FFC72C;
}

/* Card title: Roboto 30/120% weight 600. Dark card flips to white. */
.rbccm-two-up-cards--features .rbccm-two-up-cards__card-title {
  color: #111928;
  font-family: Roboto, Arial, sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 120%;
  margin: 0;
}
.rbccm-two-up-cards--features .rbccm-two-up-cards__card--dark .rbccm-two-up-cards__card-title {
  color: #fff;
}

/* Card body: Roboto 16/150% weight 400. Light card #494949, dark card
   #ECECEC. flex: 1 pushes any following block toward the card bottom. */
.rbccm-two-up-cards--features .rbccm-two-up-cards__card-body {
  color: #494949;
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  font-feature-settings: 'liga' off, 'clig' off;
  margin: 0;
}
.rbccm-two-up-cards--features .rbccm-two-up-cards__card--dark .rbccm-two-up-cards__card-body {
  color: #ECECEC;
}

/* Bullet list: disc list, Roboto 14/150% weight 400. Light card
   #494949, dark card #ECECEC. */
.rbccm-two-up-cards--features .rbccm-two-up-cards__card-bullets {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  font-feature-settings: 'liga' off, 'clig' off;
  color: #494949;
  display: block;
  gap: 0;
}
.rbccm-two-up-cards--features .rbccm-two-up-cards__card--dark .rbccm-two-up-cards__card-bullets {
  color: #ECECEC;
}
.rbccm-two-up-cards--features .rbccm-two-up-cards__card-bullet-item {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  opacity: 1;
}

/* ---- Features: spacing + type locks --------------------------------------
   Header spacing: eyebrow, heading and cards are evenly spaced (32
   mobile / 60 desktop). Without this the shared __header's 16px gap
   puts the heading too close to the eyebrow, and the site's h2
   margins push it too far from the cards.

   Card spacing: 20 from eyebrow to title (the card gap), then 15
   between title, body and bullets. The body doesn't stretch, so a
   shorter card doesn't open a gap above its bullets; both cards
   still match heights because the row stretches them.

   Card copy: body + bullets are Roboto 14/150% with no letter-spacing,
   #494949 on the light card and #ECECEC on the dark card.
   !important because the site's unified2.css p / li rules otherwise
   make the text bigger and add letter-spacing. */
.rbccm-two-up-cards--features .rbccm-two-up-cards__header {
  gap: 32px;
  max-width: none;
}
@media (min-width: 992px) {
  .rbccm-two-up-cards--features .rbccm-two-up-cards__header { gap: 60px; }
}
.rbccm-two-up-cards--features .rbccm-two-up-cards__eyebrow {
  margin: 0 auto !important;
  letter-spacing: 3px !important;
}
.rbccm-two-up-cards--features .rbccm-two-up-cards__heading {
  font-family: RBCDisplay, Georgia, Times, serif !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}
.rbccm-two-up-cards--features .rbccm-two-up-cards__card-title {
  letter-spacing: 0 !important;
  margin: 0 !important;
}
.rbccm-two-up-cards--features .rbccm-two-up-cards__card-body,
.rbccm-two-up-cards--features .rbccm-two-up-cards__card-bullets {
  margin: -5px 0 0 !important;          /* 20 card gap - 5 = 15 */
}
.rbccm-two-up-cards--features .rbccm-two-up-cards__card-body,
.rbccm-two-up-cards--features .rbccm-two-up-cards__card-bullet-item {
  color: #494949 !important;
  font-family: Roboto, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 150% !important;
  letter-spacing: 0 !important;
  font-feature-settings: 'liga' off, 'clig' off !important;
}
.rbccm-two-up-cards--features .rbccm-two-up-cards__card-bullet-item {
  margin: 0 !important;
  padding: 0 !important;
}
.rbccm-two-up-cards--features .rbccm-two-up-cards__card--dark .rbccm-two-up-cards__card-body,
.rbccm-two-up-cards--features .rbccm-two-up-cards__card--dark .rbccm-two-up-cards__card-bullet-item {
  color: #ECECEC !important;
}


/* =========================================================================
   3. Preset: --video-callouts   (Find conviction - Figma-aligned)
   =========================================================================
   Ports the "Find conviction through complexity" Figma spec verbatim
   at mobile. Light section (white bg, black heading, warm-gray copy).
   Each card leads with a media zone (illustration + play overlay),
   then a text group (title/subtitle stack + body paragraph) with a
   pinned "Watch the video" CTA at the bottom.

   Figma reference values are cited inline against every block so any
   Design/QA round-trip is one file lookup, not two. */

/* Section colour vars used by the shared shell. */
.rbccm-two-up-cards--video-callouts {
  --rbccm-two-up-cards-bg: #ffffff;
  --rbccm-two-up-cards-fg: #494949;
  --rbccm-two-up-cards-eyebrow: #FFC72C;
  --rbccm-two-up-cards-heading: #000;      /* Neutral-Black */
  --rbccm-two-up-cards-description: #494949;
}

/* Section flow -- Figma mobile: padding 60/23, gap 32.
   (Shared shell already sets padding 60/23 at mobile; only gap needs
   the video-callouts override.) */
.rbccm-two-up-cards--video-callouts {
  gap: 32px;
}
@media (min-width: 992px) {
  .rbccm-two-up-cards--video-callouts {
    gap: 40px;
  }
}

/* Grid wrapper -- Figma Hug 996px on the card row so the two cards
   don't stretch as wide as the shared 1180 default. Cards stretch
   to match the tallest sibling via grid-auto-rows: 1fr + card flex
   column with a growing __card-content, giving equal-height cards
   with content that flows naturally and the CTA pinned to the
   bottom via margin-top: auto. */
.rbccm-two-up-cards--video-callouts .rbccm-two-up-cards__grid {
  max-width: 996px;
}
@media (min-width: 872px) {
  .rbccm-two-up-cards--video-callouts .rbccm-two-up-cards__grid {
    grid-auto-rows: 1fr;
    align-items: stretch;
  }
}

/* Card -- Figma:
     border-radius 15, border 1px rgba(0,49,104,0.05), background
     rgba(209,209,209,0.05), box-shadow 0 1px 4px 0 rgba(25,33,61,0.06).
   Height is auto on mobile (per feedback); 594px kicks in at desktop
   so both cards match. */
.rbccm-two-up-cards--video-callouts .rbccm-two-up-cards__card {
  border-radius: 15px;
  border: 1px solid rgba(0, 49, 104, 0.05);
  background: rgba(209, 209, 209, 0.05);
  box-shadow: 0 1px 4px 0 rgba(25, 33, 61, 0.06);
  overflow: visible;
}
.rbccm-two-up-cards--video-callouts .rbccm-two-up-cards__card-media {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

/* Media zone -- Figma mobile: height 243, flex-shrink 0, align-self stretch,
   cover background. Rendered as a <button> when video URL is set. */
.rbccm-two-up-cards__card-media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
  height: 243px;
  width: 100%;
  background: #041e42;
  overflow: hidden;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.rbccm-two-up-cards__card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 350ms ease;
}
.rbccm-two-up-cards__card-media:hover img,
.rbccm-two-up-cards__card-media:focus-visible img {
  transform: scale(1.03);
}
.rbccm-two-up-cards__card-media:focus-visible {
  outline: 3px solid #FFC72C;
  outline-offset: -3px;
}

/* Play button -- Figma: 56x56, navy 45% fill, backdrop-blur 5.96px,
   no visible border. White triangle centred. Hover state gently
   scales + brightens the fill (the "invitation"), and click/keyboard
   activation triggers the ITM "explode" state via .is-launching
   (JS-toggled) that dissolves the ring outward while everything
   fades so the button visibly dissolves into the video that opens. */
.rbccm-two-up-cards__card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 56px;
  height: 56px;
  border-radius: 56px;
  background: rgba(0, 49, 104, 0.45);
  backdrop-filter: blur(5.958px);
  -webkit-backdrop-filter: blur(5.958px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 1;
  transition:
    transform 250ms ease,
    background-color 250ms ease;
}
/* Hover / focus -- subtle scale + brighter fill (invitation state). */
.rbccm-two-up-cards__card-media:hover .rbccm-two-up-cards__card-play,
.rbccm-two-up-cards__card-media:focus-visible .rbccm-two-up-cards__card-play {
  transform: translate(-50%, -50%) scale(1.05);
  background: rgba(0, 49, 104, 0.6);
}
/* Explode -- launch state. JS adds .is-launching on click/activation
   (either the media button OR the "Watch the video" CTA) so the ring
   dissolves outward while the video modal opens over it. Mirrors the
   rbccm-in-the-media pattern verbatim, adapted to the navy-45% fill. */
.rbccm-two-up-cards__card-play.is-launching {
  background: rgba(0, 49, 104, 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition:
    transform 450ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 350ms ease,
    background-color 350ms ease,
    backdrop-filter 350ms ease,
    -webkit-backdrop-filter 350ms ease;
}
.rbccm-two-up-cards__card-play svg {
  width: 56px;
  height: 56px;
  display: block;
  transition: opacity 250ms ease;
}
.rbccm-two-up-cards__card-play.is-launching svg {
  opacity: 0;
}

/* Content zone below the media. Figma mobile: padding 30/20, flex-column,
   justify-content: space-between (text group at top, CTA pinned bottom).
   Desktop fixes the content height at 350 so cards match the 594 total.  */
.rbccm-two-up-cards--video-callouts .rbccm-two-up-cards__card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  padding: 30px 30px 20px 30px;
  gap: 24px;
  /* Grow to fill the remaining card height so the CTA's margin-top:
     auto has real vertical space to work with, which is what pins it
     to the bottom of the card. Combined with grid-auto-rows: 1fr on
     the grid parent, this gives equal-height cards with content that
     flows naturally and the CTA always anchored at the bottom. */
  flex: 1 1 auto;
  min-height: 0;
}

/* Text group wrapper -- title-block + body. Figma: gap 24px between
   the title-block (title/subtitle) and the body paragraph. */
.rbccm-two-up-cards__card-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

/* Title-block wrapper -- title + subtitle. Figma: gap 8px between
   the title and its subtitle. */
.rbccm-two-up-cards__card-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

/* Card title -- Figma: Roboto 22/700/normal, Neutral-Black #000. */
.rbccm-two-up-cards--video-callouts .rbccm-two-up-cards__card-title {
  color: var(--Neutral-Black, #000);
  font-family: Roboto, Arial, sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin: 0;
}

/* Subtitle -- Figma: Roboto 16/500/120% (19.2px) black. */
.rbccm-two-up-cards__card-subtitle {
  color: #000;
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;      /* 19.2px */
  margin: 0;
}

/* Body copy -- Figma paragraph: Roboto 16/400/120%, colour #494949. */
.rbccm-two-up-cards--video-callouts .rbccm-two-up-cards__card-body {
  color: #494949;
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;      /* 19.2px */
  margin: 0;
}

/* CTA "Watch the video" -- Figma: display flex, gap 10, colour
   #0051A5, Roboto 16/400/29.26px. Arrow inherits colour via
   currentColor. margin-top: auto belt-and-braces guarantee: pins
   the CTA to the bottom of the __card-content flex column even if
   the row height stretches the card past its 594 spec on desktop
   (which was clipping the anchor behind the card's overflow:hidden
   edge before this rule was added). */
.rbccm-two-up-cards__card-cta {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  align-self: flex-start;
  color: #0051A5 !important;
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 29.26px;   /* 182.877% */
  text-decoration: none !important;
}
/* Text underline lives on the inner span so the SVG arrow stays
   unmarked. Matches the S&E leading-experts pattern: underline
   starts transparent, fades in on hover; arrow slides right on
   the same timing. */
.rbccm-two-up-cards__card-cta span {
  color: inherit !important;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 200ms ease;
}
.rbccm-two-up-cards__card-cta:hover span,
.rbccm-two-up-cards__card-cta:focus-visible span {
  text-decoration-color: currentColor;
}
.rbccm-two-up-cards__card-cta svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: currentColor;
  transition: transform 200ms ease;
}
.rbccm-two-up-cards__card-cta:hover svg,
.rbccm-two-up-cards__card-cta:focus-visible svg {
  transform: translateX(4px);
}


/* Whole-card link (video-callouts). The card is one <a> so it is a
   single tab stop and screen readers hear the full card text; the media
   and "Watch the video" are visual parts of that link. Hover and keyboard
   focus on the card drive the effects that used to sit on the separate
   play button and CTA link. `a.` prefix + !important beat the site's
   Bootstrap a:hover / a:focus underline and colour. */
a.rbccm-two-up-cards__card--link,
a.rbccm-two-up-cards__card--link:link,
a.rbccm-two-up-cards__card--link:visited,
a.rbccm-two-up-cards__card--link:hover,
a.rbccm-two-up-cards__card--link:focus,
a.rbccm-two-up-cards__card--link:active {
  color: inherit !important;
  text-decoration: none !important;
}
a.rbccm-two-up-cards__card--link {
  cursor: pointer;
}
a.rbccm-two-up-cards__card--link:focus {
  outline: none;
}
a.rbccm-two-up-cards__card--link:focus-visible {
  outline: 3px solid #0051A5 !important;
  outline-offset: 3px;
}
.rbccm-two-up-cards__card--link:hover .rbccm-two-up-cards__card-media img,
.rbccm-two-up-cards__card--link:focus-visible .rbccm-two-up-cards__card-media img {
  transform: scale(1.03);
}
.rbccm-two-up-cards__card--link:hover .rbccm-two-up-cards__card-play,
.rbccm-two-up-cards__card--link:focus-visible .rbccm-two-up-cards__card-play {
  transform: translate(-50%, -50%) scale(1.05);
  background: rgba(0, 49, 104, 0.6);
}
.rbccm-two-up-cards__card--link:hover .rbccm-two-up-cards__card-cta span,
.rbccm-two-up-cards__card--link:focus-visible .rbccm-two-up-cards__card-cta span {
  text-decoration-color: currentColor;
}
.rbccm-two-up-cards__card--link:hover .rbccm-two-up-cards__card-cta svg,
.rbccm-two-up-cards__card--link:focus-visible .rbccm-two-up-cards__card-cta svg {
  transform: translateX(4px);
}

/* =========================================================================
   4. Video modal
   =========================================================================
   Injected by rbccm-two-up-cards.js when a media zone is clicked. Kept
   in this stylesheet so the modal styles ship with the component in one
   file. */

/* -------------------------------------------------------------------------
   Bootstrap-modal fallbacks
   -------------------------------------------------------------------------
   The JS emits a modal whose DOM shape mirrors the site's MAAS/MATA
   hero modal - .modal.fade / .modal-dialog / .modal-content /
   .modal-header / .modal-body / .close. On the live site, Bootstrap CSS
   is already loaded and owns their presentation. In local previews
   (this component's local-test / US Creds local-test) Bootstrap isn't
   loaded, so the rules below give the modal a working presentation
   scoped to our own instance (via #rbccm-two-up-cards-modal or the
   .rbccm-two-up-cards__modal class) so they don't clobber Bootstrap
   styling anywhere else. */
.rbccm-two-up-cards__modal.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  outline: 0;
  background: rgba(0, 0, 0, 0.82);
  display: none;
}
/* Bootstrap 5 uses .show; Bootstrap 3/4 uses .in - accept both. Vanilla
   path also flips display via inline style, so this is belt-and-braces
   for the class-driven paths. */
.rbccm-two-up-cards__modal.modal.show,
.rbccm-two-up-cards__modal.modal.in {
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 24px 24px;
}
.rbccm-two-up-cards__modal .modal-dialog {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  background: #ffffff;
}
.rbccm-two-up-cards__modal .modal-content {
  background: #ffffff;
  border-radius: 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.rbccm-two-up-cards__modal .close {
  cursor: pointer;
  background: transparent;
  border: 0;
  line-height: 1;
  padding: 6px 12px;
  margin-left: auto;
  display: block;
}
.rbccm-two-up-cards__modal .close:focus-visible {
  outline: 2px solid #FFC72C;
  outline-offset: 2px;
}
/* Screen-reader-only description under the aspect wrapper. */
.rbccm-two-up-cards__modal .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Player element - the JS injects either an <iframe> (YouTube, Vimeo,
   Brightcove player URLs, other embed pages) or a native <video>
   element (direct .mp4/.webm/.ogg/.mov files) into the aspect-ratio
   wrapper. Both share the same 100/100 absolute fill so the 56.25%
   padding-top trick controls the aspect ratio either way. Inline
   styles on the elements set positioning; these declarative rules
   are here so page-level video CSS can't accidentally override. */
.rbccm-two-up-cards__modal .rbccm-two-up-cards__modal-aspect {
  position: relative;
}
.rbccm-two-up-cards__modal iframe,
.rbccm-two-up-cards__modal video {
  border: 0;
  display: block;
  background: #000;
  object-fit: contain;    /* native <video>: letterbox non-16:9 sources */
}


/* =========================================================================
   5. Reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .rbccm-two-up-cards [data-animate],
  .rbccm-two-up-cards [data-stagger-parent] > *,
  .rbccm-two-up-cards__card-media img,
  .rbccm-two-up-cards__card-cta {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .rbccm-two-up-cards__card-media:hover img,
  .rbccm-two-up-cards__card--link:hover .rbccm-two-up-cards__card-media img,
  .rbccm-two-up-cards__card--link:focus-visible .rbccm-two-up-cards__card-media img,
  .rbccm-two-up-cards__card--link .rbccm-two-up-cards__card-cta svg {
    transform: none !important;
  }
  /* Play button: keep the centring translate (transform:none would
     knock it off-centre). Drop the scale and all transitions; the
     launch state just hides instantly instead of exploding. */
  .rbccm-two-up-cards__card-play,
  .rbccm-two-up-cards__card-play svg,
  .rbccm-two-up-cards__card-media:hover .rbccm-two-up-cards__card-play,
  .rbccm-two-up-cards__card-media:focus-visible .rbccm-two-up-cards__card-play,
  .rbccm-two-up-cards__card--link:hover .rbccm-two-up-cards__card-play,
  .rbccm-two-up-cards__card--link:focus-visible .rbccm-two-up-cards__card-play,
  .rbccm-two-up-cards__card-play.is-launching {
    animation: none !important;
    transition: none !important;
    transform: translate(-50%, -50%) !important;
  }
  .rbccm-two-up-cards__card-play svg {
    transform: none !important;
  }
}