.c--container {
  --_c-container_p-b-s: var(--c-container_p-b-s, 80px);
  --_c-container_p-b-e: var(--c-container_p-b-e, 80px);

  /* edw_paragraphs_container paints `padding-block: var(--c-container_pb)` on
     .p_pb containers (any with a background colour) at a higher specificity
     than the `& > div` rule below, so zeroing it dropped the section padding
     on every tinted section and made the Padding Top/Bottom style options
     inert there. Feed it from the same tokens instead. */
  --c-container_pb: var(--_c-container_p-b-s) var(--_c-container_p-b-e);
  --c-container_items-gap: var(--_c-container_items-gap, 30px);
}

  /* Meant for the section's content wrapper (.edw-container). In the Mercury
     Editor / Layout Paragraphs builder the layout's .lpb-controls toolbar is a
     direct <div> child too, and picked up the full section padding (80px top
     and bottom around a 30px bar). All builder chrome carries .js-lpb-ui; skip
     it. :where() keeps the specificity at .c--container > div, so the
     edw_paragraphs_container rule noted above still wins where it should. */
  .c--container > div:where(:not(.js-lpb-ui)) {
    padding-block-start: var(--_c-container_p-b-s);
    padding-block-end: var(--_c-container_p-b-e);
  }
  .c--container > div > .paragraph + .paragraph, .c--container > .paragraph + .paragraph {
      margin-block-start: var(--c-container_items-gap);
    }
  .c--container.p-t_0 {
    --_c-container_p-b-s: 0;
  }
  .c--container.p-t_30 {
    --_c-container_p-b-s: 1.875rem;
  }
  .c--container.p-t_100 {
    --_c-container_p-b-s: 6.25rem;
  }
  .c--container.p-t_120 {
    --_c-container_p-b-s: 7.5rem;
  }
  .c--container.p-b_0 {
    --_c-container_p-b-e: 0;
  }
  .c--container.p-b_30 {
    --_c-container_p-b-e: 1.875rem;
  }
  .c--container.p-b_100 {
    --_c-container_p-b-e: 6.25rem;
  }
  .c--container.p-b_120 {
    --_c-container_p-b-e: 7.5rem;
  }
  /* The CTA card overhangs the tinted section. Figma "Home" vertical rhythm:
     quote sits 100px under the cards, the CTA card 90px under the quote, the
     tint ends 290px into the card, and the footer starts 60px below it.
     padding-bottom - |card margin-bottom| = 290 keeps the tint edge in place;
     margin-bottom = 290 + 60 + (card height offset) puts the footer 60px down. */
  .c--container.bg-primary:has(.paragraph--t--call-to-action) {
    /* The overhanging card supplies the space under the section, so the
       section's own bottom padding would double it up. */
    --_c-container_p-b-e: 0px;

    padding-bottom: 23.75rem;
    margin-bottom: 23.125rem;
  }
  .c--container.bg-primary .paragraph--t--edw-quote {
      margin-top: 3.75rem;
    }
  @media (min-width: 62rem) {
  .c--container.bg-primary .paragraph--t--edw-quote {
        margin-top: 6.25rem
    }
      }
  .c--container.bg-primary .paragraph--t--call-to-action {
      margin-block: 5.625rem -43.125rem;
    }
  .c--container.items-gap-0 {
    --_c-container_items-gap: 0;
  }
  .c--container.items-gap-40 {
    --_c-container_items-gap: 2.5rem;
  }
  .c--container.items-gap-60 {
    --_c-container_items-gap: 3.75rem;
  }
  .c--container.items-gap-80 {
    --_c-container_items-gap: 5rem;
  }
  .c--container.items-gap-100 {
    --_c-container_items-gap: 6.25rem;
  }

.container-dotted {
  position: relative;
}

.container-dotted::before {
    content: "";
    position: absolute;

    inset-block: var(--dottes_i-b, var(--_c-container_p-b-s));
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: min(91.375rem, 100% - 2.5rem);
    height: 11rem;
    background: url("../../icons/dotted_background.svg") no-repeat bottom center;
    background-size: cover;
    pointer-events: none;
    z-index: -1;
    max-width: 100vw;
  }

@media (max-width: 30rem) {

.container-dotted::before {
      inset-inline-start: calc(-1 * var(--container-py))
  }
    }

.container-dotted.container-dotted--top {
    --dottes_i-b: 0 auto;
  }

.container-dotted.container-dotted--bottom {
    --dottes_i-b: auto 0;
  }

.paragraph--t--banner.banner_text_dark {
    --banner-inner_c: var(--c-black);
    --banner-inner_hasImg_c: var(--c-black);
  }

.paragraph--t--banner.banner_text_white {
    --banner-inner_c: var(--c-white);
    --banner-inner_hasImg_c: var(--c-white);
  }

.paragraph--t--banner.banner_size_md {
    --banner_m-h: 31.25rem;
  }

.paragraph--t--banner.banner_size_lg {
    --banner_m-h: 50rem;
    --banner_hasImg_m-h: 50rem;
  }

.paragraph--t--banner[class*='banner_style'] {
    --_banner_m-h: 31.25rem;
    --_banner-content_m-b-s: var(--banner-inner_hasImg_content_m-b-s, 40px);
    --_banner_m-h: var(--banner_hasImg_m-h, 500px);
    --_banner-inner_p-b: var(--banner-inner_hasImg_p-b, 140px 90px);

    background-repeat: no-repeat;
    background-size: cover;
    background-position: right bottom;
  }

.paragraph--t--banner.banner_style1 {
    background-image: url('../../../style_options/banner_styles/style1.svg');
  }

.paragraph--t--banner.banner_style2 {
    background-image: url('../../../style_options/banner_styles/style2.svg');
  }

.paragraph--t--edw-timeline.rio .c--timelineItem {
    --_tiemelineItem_media_h: auto;

    --timelineItem_node_before_i-b-s: 0px;
    --timelineItem_node_after_i-b-s: 0px;
    --_timelineItem_node_m-b-s: 0px;

    /* Line style */
    --timelineItem_node_after_d: none;
    --timelineItem_node_w: 1.1875rem;
    --timelineItem_dot_i-b-s: 1.1875rem;
    --timelineItem_node_m-i: 1.1875rem 0px;
    --timelineItem_dot_s: 2.375rem;
    --timelineItem-node_a-s: initial;
    --_timelineItem_node_b-w: 1px;
    --timelineItem_node_b-s: dashed;
    --timelineItem_dot_b-w: 0.875rem;

    --timelineItem_node_highlighted_c: initial;
    --timelineItem_node_highlighted_bg: transparent;
    --timelineItem_node_highlighted_s: 0px;
    --timelineItem_node_highlighted_i-i-s: 0px;
  }

.paragraph--t--edw-timeline.rio .c--timelineItem .timelineItem-content {
      --_timelineItem_content_g-t-c: auto 1fr;
      --_timelineItem_content_g-t-r: auto 1fr;
      --_timelineItem_content_g-t-a: 'year title' 'year description';
    }

.paragraph--t--edw-timeline.rio .c--timelineItem .timelineItem-content:has(.timelineItem-media) {
        --_timelineItem_content_g-t-c: auto 1fr;
        --_timelineItem_content_g-t-r: repeat(3, auto);
        --_timelineItem_content_g-t-a: 'year title' 'year description' 'year img';
      }

@container (width > 860px) {

.paragraph--t--edw-timeline.rio .c--timelineItem .timelineItem-content:has(.timelineItem-media) {
          --_timelineItem_content_g-t-c: auto auto 1fr;
          --_timelineItem_content_g-t-r: auto 1fr;
          --_timelineItem_content_g-t-a: 'year img title' 'year img description'
      }
        }

.paragraph--t--edw-timeline.rio .c--timelineItem .timelineItem-dot {
      inset-block-start: -0.375rem;
      box-shadow: 0px 0px 0px 6px var(--body_bg);
    }

.paragraph--t--edw-timeline.rio .c--timelineItem:last-child .timelineItem-node {
        height: 0px;
      }

.paragraph--t--call-to-action {
  --banner-cta_content_m-w: 85rem;
}

@media (min-width: 62rem) {

.paragraph--t--call-to-action {
    --banner-cta-inner_hasImg_m-h: 37.5rem
}
  }

.paragraph--t--call-to-action .c--banner__inner {
    --_banner-inner_p-i: 1.875rem;
    width: 100%;
  }

@media (min-width: 48rem) {

.paragraph--t--call-to-action .c--banner__inner {
      --_banner-inner_p-i: 5rem
  }
    }

.paragraph--t--call-to-action .c--banner__title {
    margin-top: 2em;
  }

.paragraph--t--call-to-action .c--banner__row {
    max-width: 35rem;
  }

/* Figma design system: "Width & Spacing/Max Width" = 1410. Repeats the root
   token's own expression (vars.pcss.css) rather than reading
   var(--container_m-w): .grid-container re-declares that token per container
   query (720/950/1140/1440), so a paragraph nested in one would inherit the
   grid's step instead of the design max. The min() keeps a 20px gutter on
   either side once the viewport passes ~1450px, matching the way the site
   container breathes at xxl. Same approach as footer.pcss.css. */
.paragraph--t--cards,
.paragraph--t--edw-quote,
.paragraph--t--call-to-action,
.paragraph--t--edw-tabs-section {
  max-width: min(88.125rem, calc(100% - 2.5rem));
  /* .quote sets `margin: 0`; this file loads in the CSS_THEME group, after
     the component group, so the centring wins. */
  margin-inline: auto;
}