@charset "UTF-8";
/**
 * StretchLab — map **rd-two-column-image** semantic tokens → theme palette.
 */
.m-rd-two-column-image {
  --rd-2col-bg: var(--sl-navy-blue, #0a2533);
  --rd-2col-fg: var(--sl-white, #ffffff);
  --rd-2col-body-fg: color-mix(in srgb, var(--sl-white, #ffffff) 88%, transparent);
  --rd-2col-font-heading: var(--sl-font-heading);
  --rd-2col-font-body: var(--sl-font-body);
}

/**
 * Two-column split: text + image. Flippable on desktop; stacks on small viewports.
 * Semantic rd-2col tokens; brand maps them in brands/stretchlab/styles/prepend/tokens.css.
 * STYLE tab layout: themes/stretchlab/stretchlab-redesign-2026/css/rd-module-surface.css (base layout).
 */
@layer rd-two-column-image {
  .m-rd-two-column-image {
    --rd-2col-bg: #0a0a0a;
    --rd-2col-fg: #ffffff;
    --rd-2col-body-fg: color-mix(in srgb, #ffffff 88%, transparent);
    --rd-2col-gap: clamp(1.5rem, 4vw, 3rem);
    --rd-2col-image-radius: clamp(1rem, 2.4vw, 1.75rem);
    --rd-2col-image-aspect: 4 / 3;
    /* Desktop row: flex-grow weights (12-column-style ratio). */
    --rd-2col-content-fr: 6;
    --rd-2col-media-fr: 6;
    --rd-2col-stack-bp: 63.99rem;
    --rd-2col-font-heading: system-ui, sans-serif;
    --rd-2col-font-body: system-ui, sans-serif;
    --rd-2col-bg-outer-top: transparent;
    --rd-2col-bg-outer-bottom: transparent;
    --rd-2col-band-py: clamp(1.75rem, 4vw, 3rem);
    --rd-2col-mobile-overhang: clamp(1.25rem, 5vw, 2.5rem);
    container-name: rd-2col;
    container-type: inline-size;
    background-color: var(--rd-2col-bg);
    color: var(--rd-2col-fg);
    font-family: var(--rd-2col-font-body);
    --rd-surface-body-fallback: var(--rd-2col-body-fg);
  }
  .m-rd-two-column-image__grid {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--rd-2col-gap);
  }
  .m-rd-two-column-image--image-left .m-rd-two-column-image__grid {
    flex-direction: row-reverse;
  }
  /* Neutralize global rd-module-surface inner text-align; copy column uses __stack rules below. */
  [data-rd-module-surface].m-rd-two-column-image .rd-module-surface__inner {
    text-align: initial;
  }
  .m-rd-two-column-image__content {
    flex: var(--rd-2col-content-fr) 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .m-rd-two-column-image[data-rd-align=center] .m-rd-two-column-image__content {
    align-items: center;
  }
  .m-rd-two-column-image[data-rd-align=right] .m-rd-two-column-image__content {
    align-items: flex-end;
  }
  .m-rd-two-column-image__media {
    flex: var(--rd-2col-media-fr) 1 0;
    min-width: 0;
  }
  .m-rd-two-column-image--split-5-7 {
    --rd-2col-content-fr: 5;
    --rd-2col-media-fr: 7;
  }
  .m-rd-two-column-image--split-4-8 {
    --rd-2col-content-fr: 4;
    --rd-2col-media-fr: 8;
  }
  .m-rd-two-column-image--split-3-9 {
    --rd-2col-content-fr: 3;
    --rd-2col-media-fr: 9;
  }
  .m-rd-two-column-image--split-7-5 {
    --rd-2col-content-fr: 7;
    --rd-2col-media-fr: 5;
  }
  .m-rd-two-column-image--split-8-4 {
    --rd-2col-content-fr: 8;
    --rd-2col-media-fr: 4;
  }
  .m-rd-two-column-image__stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 38rem;
    width: 100%;
  }
  /* STYLE tab alignment (data-rd-align): heading, body, and CTA in the text column only. */
  .m-rd-two-column-image[data-rd-align=left] .m-rd-two-column-image__stack {
    text-align: left;
  }
  .m-rd-two-column-image[data-rd-align=center] .m-rd-two-column-image__stack {
    text-align: center;
  }
  .m-rd-two-column-image[data-rd-align=right] .m-rd-two-column-image__stack {
    text-align: right;
  }
  .m-rd-two-column-image__heading {
    color: var(--rd-surface-heading-fg, inherit);
  }
  .m-rd-two-column-image__heading :where(ol) {
    margin: 0.5em 0 0;
    padding-left: 1.5em;
    font-family: var(--sl-h3-font-family, var(--rd-2col-font-heading));
    font-size: var(--sl-h3-font-size);
    font-weight: var(--sl-h3-font-weight);
    letter-spacing: var(--sl-h3-letter-spacing);
    text-transform: var(--sl-h3-text-transform);
    line-height: var(--sl-h3-line-height, 1.12);
  }
  .m-rd-two-column-image__heading :where(ol) li + li {
    margin-top: 0.35em;
  }
  /* Richtext headings: match theme h3 scale. */
  .m-rd-two-column-image__heading :where(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    font-family: var(--sl-h3-font-family, var(--rd-2col-font-heading));
    font-size: var(--sl-h3-font-size);
    font-weight: var(--sl-h3-font-weight);
    letter-spacing: var(--sl-h3-letter-spacing);
    text-transform: var(--sl-h3-text-transform);
    line-height: var(--sl-h3-line-height, 1.12);
  }
  .m-rd-two-column-image__body {
    line-height: 1.5;
  }
  .m-rd-two-column-image__body :where(p) {
    margin: 0;
  }
  .m-rd-two-column-image__body :where(p + p) {
    margin-top: 0.75rem;
  }
  .m-rd-two-column-image__body :where(ul, ol) {
    margin: 0.5rem 0 0;
    padding-left: 1.5rem;
    text-align: left;
  }
  .m-rd-two-column-image[data-rd-align=center] .m-rd-two-column-image__body :where(ul, ol),
  .m-rd-two-column-image[data-rd-align=right] .m-rd-two-column-image__body :where(ul, ol) {
    display: inline-block;
    text-align: left;
  }
  .m-rd-two-column-image__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.25rem;
  }
  .m-rd-two-column-image[data-rd-align=center] .m-rd-two-column-image__actions {
    justify-content: center;
  }
  .m-rd-two-column-image[data-rd-align=right] .m-rd-two-column-image__actions {
    justify-content: flex-end;
  }
  .m-rd-two-column-image__figure {
    margin: 0;
    border-radius: var(--rd-2col-image-radius);
    overflow: hidden;
    aspect-ratio: var(--rd-2col-image-aspect);
    background-color: color-mix(in srgb, var(--rd-2col-fg) 8%, var(--rd-2col-bg));
  }
  .m-rd-two-column-image__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Optional cap: natural aspect ratio, width auto, no letterbox crop (default is cover + fixed aspect). */
  .m-rd-two-column-image__figure--max-h {
    aspect-ratio: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
  }
  .m-rd-two-column-image__figure--max-h .m-rd-two-column-image__img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: var(--rd-2col-image-max-h);
    object-fit: contain;
  }
  /*
   * Dual background: outer top/bottom strips + full-width inner band.
   * STYLE spacing still uses global --rd-surface-pt-* / --rd-surface-pb-* (rd-module-surface.css);
   * breakout moves that space from inner padding to grid-stage margin and paints it via outer layers.
   */
  .m-rd-two-column-image--image-breakout {
    background-color: transparent !important;
    overflow: visible;
  }
  .m-rd-two-column-image--image-breakout .m-rd-two-column-image__inner,
  .m-rd-two-column-image--image-breakout .m-rd-two-column-image__grid-stage,
  .m-rd-two-column-image--image-breakout .m-rd-two-column-image__grid {
    overflow: visible;
  }
  .m-rd-two-column-image--image-breakout .m-rd-two-column-image__grid-stage {
    position: relative;
    margin-top: var(--rd-2col-pad-top);
    margin-bottom: var(--rd-2col-pad-bottom);
  }
  .m-rd-two-column-image--image-breakout .m-rd-two-column-image__outer-top,
  .m-rd-two-column-image--image-breakout .m-rd-two-column-image__outer-bottom,
  .m-rd-two-column-image--image-breakout .m-rd-two-column-image__band {
    position: absolute;
    z-index: 0;
    width: 100vw;
    max-width: 100vw;
    left: 50%;
    margin-left: -50vw;
    pointer-events: none;
  }
  .m-rd-two-column-image--image-breakout .m-rd-two-column-image__outer-top {
    top: calc(-1 * var(--rd-2col-pad-top));
    background-color: var(--rd-2col-bg-outer-top, transparent);
  }
  .m-rd-two-column-image--image-breakout .m-rd-two-column-image__outer-bottom {
    bottom: calc(-1 * var(--rd-2col-pad-bottom));
    background-color: var(--rd-2col-bg-outer-bottom, transparent);
  }
  .m-rd-two-column-image--image-breakout .m-rd-two-column-image__band {
    background-color: var(--rd-2col-inner-bg, var(--rd-2col-bg));
  }
  .m-rd-two-column-image--image-breakout .m-rd-two-column-image__grid {
    position: relative;
    z-index: 1;
    align-items: center;
  }
  .m-rd-two-column-image--image-breakout .m-rd-two-column-image__content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    padding-block: var(--rd-2col-band-py);
    anchor-name: --rd-2col-band-anchor;
  }
  .m-rd-two-column-image--image-breakout .m-rd-two-column-image__stack {
    position: relative;
    z-index: 1;
    width: 100%;
  }
  .m-rd-two-column-image--image-breakout .m-rd-two-column-image__media {
    position: relative;
    z-index: 1;
    align-self: center;
  }
  .m-rd-two-column-image--image-breakout .m-rd-two-column-image__figure {
    overflow: visible;
    background-color: transparent;
  }
  .m-rd-two-column-image--image-breakout .m-rd-two-column-image__figure--max-h {
    background-color: transparent;
  }
  @media (min-width: 64rem) {
    .m-rd-two-column-image--image-breakout .m-rd-two-column-image__outer-top {
      position-anchor: --rd-2col-band-anchor;
      bottom: anchor(top);
      height: auto;
    }
    .m-rd-two-column-image--image-breakout .m-rd-two-column-image__outer-bottom {
      position-anchor: --rd-2col-band-anchor;
      top: anchor(bottom);
      height: auto;
    }
    .m-rd-two-column-image--image-breakout .m-rd-two-column-image__band {
      position-anchor: --rd-2col-band-anchor;
      top: anchor(top);
      height: anchor-size(height);
      bottom: auto;
    }
  }
  /* Fallback when anchor positioning is unavailable (Safari < 18, etc.). */
  @supports not (anchor-name: --rd-2col-band-anchor) {
    @media (min-width: 64rem) {
      .m-rd-two-column-image--image-breakout .m-rd-two-column-image__band {
        top: 50%;
        height: auto;
        min-height: calc(2 * var(--rd-2col-band-py) + 10rem);
        transform: translateY(-50%);
      }
    }
  }
  @media (max-width: 63.99rem) {
    .m-rd-two-column-image__grid {
      flex-direction: column;
      align-items: stretch;
    }
    .m-rd-two-column-image--image-left .m-rd-two-column-image__grid {
      flex-direction: column;
    }
    .m-rd-two-column-image__content,
    .m-rd-two-column-image__media {
      flex: none;
      width: 100%;
    }
    .m-rd-two-column-image__stack {
      max-width: none;
      margin-inline: 0;
    }
    .m-rd-two-column-image--m-image-first .m-rd-two-column-image__media {
      order: -1;
    }
    .m-rd-two-column-image--image-breakout .m-rd-two-column-image__content {
      anchor-name: none;
      padding-block: var(--rd-2col-band-py);
      align-self: stretch;
    }
    .m-rd-two-column-image--image-breakout .m-rd-two-column-image__grid {
      align-items: stretch;
      gap: 0;
    }
    .m-rd-two-column-image--image-breakout .m-rd-two-column-image__media {
      align-self: stretch;
    }
    /* Inner band: copy + most of image. Outer strip includes STYLE spacing + image peek. */
    .m-rd-two-column-image--image-breakout .m-rd-two-column-image__outer-top,
    .m-rd-two-column-image--image-breakout .m-rd-two-column-image__outer-bottom {
      bottom: auto;
      height: auto;
    }
    .m-rd-two-column-image--image-breakout.m-rd-two-column-image--m-image-first .m-rd-two-column-image__outer-top {
      display: block;
      height: calc(var(--rd-2col-mobile-overhang) + var(--rd-2col-pad-top));
    }
    .m-rd-two-column-image--image-breakout.m-rd-two-column-image--m-image-first .m-rd-two-column-image__outer-bottom {
      display: none;
    }
    .m-rd-two-column-image--image-breakout:not(.m-rd-two-column-image--m-image-first) .m-rd-two-column-image__outer-top {
      display: none;
    }
    .m-rd-two-column-image--image-breakout:not(.m-rd-two-column-image--m-image-first) .m-rd-two-column-image__outer-bottom {
      display: block;
      top: auto;
      height: calc(var(--rd-2col-mobile-overhang) + var(--rd-2col-pad-bottom));
    }
    .m-rd-two-column-image--image-breakout.m-rd-two-column-image--m-image-first .m-rd-two-column-image__band {
      top: var(--rd-2col-mobile-overhang);
      bottom: 0;
      height: auto;
    }
    .m-rd-two-column-image--image-breakout:not(.m-rd-two-column-image--m-image-first) .m-rd-two-column-image__band {
      top: 0;
      bottom: var(--rd-2col-mobile-overhang);
      height: auto;
    }
    .m-rd-two-column-image--image-breakout.m-rd-two-column-image--m-image-first .m-rd-two-column-image__figure {
      margin-top: calc(-1 * var(--rd-2col-mobile-overhang));
    }
    .m-rd-two-column-image--image-breakout:not(.m-rd-two-column-image--m-image-first) .m-rd-two-column-image__figure {
      margin-bottom: calc(-1 * var(--rd-2col-mobile-overhang));
    }
    /* Mobile-only image crop (stacked layout). */
    .m-rd-two-column-image--m-img-wide .m-rd-two-column-image__figure {
      aspect-ratio: 16/9;
    }
    .m-rd-two-column-image--m-img-standard .m-rd-two-column-image__figure {
      aspect-ratio: 4/3;
    }
    .m-rd-two-column-image--m-img-square .m-rd-two-column-image__figure {
      aspect-ratio: 1/1;
    }
    .m-rd-two-column-image--m-img-tall .m-rd-two-column-image__figure {
      aspect-ratio: 3/4;
    }
    .m-rd-two-column-image__figure.m-rd-two-column-image__figure--max-h {
      aspect-ratio: unset;
    }
  }
}
/*
 * Breakout spacing: unlayered so it overrides rd-module-surface.css (also unlayered).
 * Responsive STYLE spacing sets --rd-surface-pt-* / --rd-surface-pb-* on the section (inline);
 * Vertical spacing preset uses --rd-surface-section-py via data-rd-v when those are unset.
 */
[data-rd-module-surface].m-rd-two-column-image--image-breakout {
  --rd-2col-pad-top: var(--rd-surface-pt-m, var(--rd-surface-section-py));
  --rd-2col-pad-bottom: var(--rd-surface-pb-m, var(--rd-surface-section-py));
}

[data-rd-module-surface].m-rd-two-column-image--image-breakout .m-rd-two-column-image__inner.rd-module-surface__inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media (min-width: 48rem) {
  [data-rd-module-surface].m-rd-two-column-image--image-breakout {
    --rd-2col-pad-top: var(--rd-surface-pt-t, var(--rd-surface-pt-m, var(--rd-surface-section-py)));
    --rd-2col-pad-bottom: var(--rd-surface-pb-t, var(--rd-surface-pb-m, var(--rd-surface-section-py)));
  }
}
@media (min-width: 64rem) {
  [data-rd-module-surface].m-rd-two-column-image--image-breakout {
    --rd-2col-pad-top: var(
      --rd-surface-pt-l,
      var(--rd-surface-pt-t, var(--rd-surface-pt-m, var(--rd-surface-section-py)))
    );
    --rd-2col-pad-bottom: var(
      --rd-surface-pb-l,
      var(--rd-surface-pb-t, var(--rd-surface-pb-m, var(--rd-surface-section-py)))
    );
  }
}
@media (min-width: 80rem) {
  [data-rd-module-surface].m-rd-two-column-image--image-breakout {
    --rd-2col-pad-top: var(
      --rd-surface-pt-d,
      var(--rd-surface-pt-l, var(--rd-surface-pt-t, var(--rd-surface-pt-m, var(--rd-surface-section-py))))
    );
    --rd-2col-pad-bottom: var(
      --rd-surface-pb-d,
      var(--rd-surface-pb-l, var(--rd-surface-pb-t, var(--rd-surface-pb-m, var(--rd-surface-section-py))))
    );
  }
}