@charset "UTF-8";
/**
 * Club Pilates — cp-two-column-image semantic tokens → theme palette.
 */
.m-cp-two-column-image {
  --cp-2col-bg: var(--cp-warm-cream, #f5f2ec);
  --cp-2col-fg: var(--cp-deep-harmony, #24211c);
  --cp-2col-body-fg: var(--cp-calm-stone, #514a44);
  --cp-2col-check-bg: var(--cp-steel-blue, #2c5287);
  --cp-2col-badge-bg: var(--cp-btn-on-dark-fill, #d5e6fa);
  --cp-2col-badge-fg: var(--cp-steel-blue, #2c5287);
  --cp-2col-font-heading: var(--cp-font-heading, "Roobert", system-ui, sans-serif);
  --cp-2col-font-body: var(--cp-font-body, "Roobert", system-ui, sans-serif);
  --cp-2col-font-display: var(--cp-font-display, "Tiempos Headline", Georgia, serif);
}

/**
 * CP two-column image: text + image, flippable on desktop, stacks on small viewports.
 * Adds pre-title eyebrow and optional checklist with steel-blue checkmarks.
 */
@layer cp-two-column-image {
  .m-cp-two-column-image {
    --cp-2col-bg: var(--cp-warm-cream, #f5f2ec);
    --cp-2col-fg: var(--cp-deep-harmony, #24211c);
    --cp-2col-body-fg: var(--cp-calm-stone, #514a44);
    --cp-2col-gap: clamp(1.5rem, 4vw, 3rem);
    --cp-2col-image-radius: clamp(1.25rem, 3vw, 2.5rem);
    --cp-2col-image-aspect: 4 / 3;
    --cp-2col-content-fr: 6;
    --cp-2col-media-fr: 6;
    --cp-2col-stack-bp: 63.99rem;
    --cp-2col-font-heading: var(--cp-font-heading, "Roobert", system-ui, sans-serif);
    --cp-2col-font-body: var(--cp-font-body, "Roobert", system-ui, sans-serif);
    --cp-2col-font-display: var(--cp-font-display, "Tiempos Headline", Georgia, serif);
    --cp-2col-check-bg: var(--cp-steel-blue, #2c5287);
    --cp-2col-check-fg: #ffffff;
    --cp-2col-badge-bg: var(--cp-btn-on-dark-fill, #d5e6fa);
    --cp-2col-badge-fg: var(--cp-steel-blue, #2c5287);
    --cp-2col-bg-outer-top: transparent;
    --cp-2col-bg-outer-bottom: transparent;
    --cp-2col-band-py: clamp(1.75rem, 4vw, 3rem);
    --cp-2col-mobile-overhang: clamp(1.25rem, 5vw, 2.5rem);
    container-name: cp-2col;
    container-type: inline-size;
    background-color: var(--cp-2col-bg);
    color: var(--cp-2col-fg);
    font-family: var(--cp-2col-font-body);
    --rd-surface-body-fallback: var(--cp-2col-body-fg);
  }
  .m-cp-two-column-image__grid {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--cp-2col-gap);
  }
  .m-cp-two-column-image--image-left .m-cp-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-cp-two-column-image .rd-module-surface__inner {
    text-align: initial;
  }
  .m-cp-two-column-image__content {
    flex: var(--cp-2col-content-fr) 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .m-cp-two-column-image__media {
    flex: var(--cp-2col-media-fr) 1 0;
    min-width: 0;
  }
  .m-cp-two-column-image--split-6-7 {
    --cp-2col-content-fr: 6;
    --cp-2col-media-fr: 7;
  }
  .m-cp-two-column-image--split-5-7 {
    --cp-2col-content-fr: 5;
    --cp-2col-media-fr: 7;
  }
  .m-cp-two-column-image--split-4-8 {
    --cp-2col-content-fr: 4;
    --cp-2col-media-fr: 8;
  }
  .m-cp-two-column-image--split-3-9 {
    --cp-2col-content-fr: 3;
    --cp-2col-media-fr: 9;
  }
  .m-cp-two-column-image--split-7-6 {
    --cp-2col-content-fr: 7;
    --cp-2col-media-fr: 6;
  }
  .m-cp-two-column-image--split-7-5 {
    --cp-2col-content-fr: 7;
    --cp-2col-media-fr: 5;
  }
  .m-cp-two-column-image--split-8-4 {
    --cp-2col-content-fr: 8;
    --cp-2col-media-fr: 4;
  }
  .m-cp-two-column-image__stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 38rem;
    width: 100%;
  }
  .m-cp-two-column-image__badge {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background-color: var(--cp-2col-badge-bg, #d5e6fa);
    color: var(--cp-2col-badge-fg, #2c5287);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.4;
  }
  .m-cp-two-column-image__pre-title {
    margin: 0;
    font-family: var(--cp-2col-font-heading);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--rd-surface-body-fg, var(--cp-2col-body-fg));
  }
  .m-cp-two-column-image__heading {
    color: var(--rd-surface-heading-fg, inherit);
  }
  .m-cp-two-column-image__heading :where(ol) {
    margin: 0.5em 0 0;
    padding-left: 1.5em;
    font-family: var(--cp-h2-font-family, var(--cp-2col-font-heading));
    font-size: var(--cp-h2-font-size, clamp(1.5rem, 2vw + 1rem, 2rem));
    font-weight: var(--cp-h2-font-weight, 500);
    letter-spacing: var(--cp-h2-letter-spacing, 0);
    text-transform: var(--cp-h2-text-transform, none);
    line-height: var(--cp-h2-line-height, 1.2);
  }
  .m-cp-two-column-image__heading :where(ol) li + li {
    margin-top: 0.35em;
  }
  .m-cp-two-column-image__heading :where(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    font-family: var(--cp-h2-font-family, var(--cp-2col-font-heading));
    font-size: var(--cp-h2-font-size, clamp(1.5rem, 2vw + 1rem, 2rem));
    font-weight: var(--cp-h2-font-weight, 500);
    letter-spacing: var(--cp-h2-letter-spacing, 0);
    text-transform: var(--cp-h2-text-transform, none);
    line-height: var(--cp-h2-line-height, 1.2);
    text-wrap: balance;
  }
  .m-cp-two-column-image__heading :where(em, i) {
    font-family: var(--cp-2col-font-display);
    font-style: italic;
    font-weight: 300;
  }
  .m-cp-two-column-image__body {
    line-height: 1.5;
    color: var(--rd-surface-body-fg, var(--cp-2col-body-fg));
  }
  .m-cp-two-column-image__body :where(p) {
    margin: 0;
  }
  .m-cp-two-column-image__body :where(p + p) {
    margin-top: 0.75rem;
  }
  .m-cp-two-column-image__body :where(ul, ol) {
    margin: 0.5rem 0 0;
    padding-left: 1.5rem;
    text-align: left;
  }
  .m-cp-two-column-image__checklist {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
    width: 100%;
  }
  .m-cp-two-column-image__checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0;
    color: var(--rd-surface-body-fg, var(--cp-2col-body-fg));
    font-size: var(--cp-text-md-font-size, 1rem);
    line-height: 1.45;
  }
  .m-cp-two-column-image__check {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    margin-top: 0.1rem;
    border-radius: 50%;
    background-color: var(--cp-2col-check-bg);
    color: var(--cp-2col-check-fg);
  }
  .m-cp-two-column-image__check svg {
    display: block;
    width: 0.7rem;
    height: 0.7rem;
  }
  .m-cp-two-column-image__checklist-text {
    min-width: 0;
    flex: 1 1 auto;
  }
  .m-cp-two-column-image__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.25rem;
  }
  @media (min-width: 64rem) {
    .m-cp-two-column-image[data-rd-align=center] .m-cp-two-column-image__content {
      align-items: center;
    }
    .m-cp-two-column-image[data-rd-align=right] .m-cp-two-column-image__content {
      align-items: flex-end;
    }
    .m-cp-two-column-image[data-rd-align=left] .m-cp-two-column-image__stack {
      text-align: left;
    }
    .m-cp-two-column-image[data-rd-align=center] .m-cp-two-column-image__stack {
      text-align: center;
    }
    .m-cp-two-column-image[data-rd-align=right] .m-cp-two-column-image__stack {
      text-align: right;
    }
    .m-cp-two-column-image[data-rd-align=center] .m-cp-two-column-image__body :where(ul, ol),
    .m-cp-two-column-image[data-rd-align=right] .m-cp-two-column-image__body :where(ul, ol) {
      display: inline-block;
      text-align: left;
    }
    .m-cp-two-column-image[data-rd-align=center] .m-cp-two-column-image__checklist,
    .m-cp-two-column-image[data-rd-align=right] .m-cp-two-column-image__checklist {
      width: auto;
      max-width: 100%;
    }
    .m-cp-two-column-image[data-rd-align=center] .m-cp-two-column-image__actions {
      justify-content: center;
    }
    .m-cp-two-column-image[data-rd-align=right] .m-cp-two-column-image__actions {
      justify-content: flex-end;
    }
  }
  .m-cp-two-column-image__link {
    display: inline-flex;
    align-items: center;
    color: var(--cp-2col-fg);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }
  .m-cp-two-column-image__link:hover {
    opacity: 0.88;
  }
  .m-cp-two-column-image__figure {
    margin: 0;
    border-radius: var(--cp-2col-image-radius);
    overflow: hidden;
    aspect-ratio: var(--cp-2col-image-aspect);
    background-color: color-mix(in srgb, var(--cp-2col-fg) 8%, var(--cp-2col-bg));
  }
  .m-cp-two-column-image__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /*
   * Optional exact height per breakpoint: figure is a fixed frame (column
   * width × set height). The img keeps object-fit: cover so source ratio
   * cannot undershoot or stretch the frame.
   */
  @media (min-width: 64rem) {
    .m-cp-two-column-image__figure--h-d {
      aspect-ratio: unset;
      width: 100%;
      height: var(--cp-2col-image-h);
    }
  }
  /*
   * 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-cp-two-column-image--image-breakout {
    background-color: transparent !important;
    overflow: visible;
  }
  .m-cp-two-column-image--image-breakout .m-cp-two-column-image__inner,
  .m-cp-two-column-image--image-breakout .m-cp-two-column-image__grid-stage,
  .m-cp-two-column-image--image-breakout .m-cp-two-column-image__grid {
    overflow: visible;
  }
  .m-cp-two-column-image--image-breakout .m-cp-two-column-image__grid-stage {
    position: relative;
    margin-top: var(--cp-2col-pad-top);
    margin-bottom: var(--cp-2col-pad-bottom);
  }
  .m-cp-two-column-image--image-breakout .m-cp-two-column-image__outer-top,
  .m-cp-two-column-image--image-breakout .m-cp-two-column-image__outer-bottom,
  .m-cp-two-column-image--image-breakout .m-cp-two-column-image__band {
    position: absolute;
    z-index: 0;
    width: 100vw;
    max-width: 100vw;
    left: 50%;
    margin-left: -50vw;
    pointer-events: none;
  }
  .m-cp-two-column-image--image-breakout .m-cp-two-column-image__outer-top {
    top: calc(-1 * var(--cp-2col-pad-top));
    background-color: var(--cp-2col-bg-outer-top, transparent);
  }
  .m-cp-two-column-image--image-breakout .m-cp-two-column-image__outer-bottom {
    bottom: calc(-1 * var(--cp-2col-pad-bottom));
    background-color: var(--cp-2col-bg-outer-bottom, transparent);
  }
  .m-cp-two-column-image--image-breakout .m-cp-two-column-image__band {
    background-color: var(--cp-2col-inner-bg, var(--cp-2col-bg));
  }
  .m-cp-two-column-image--image-breakout .m-cp-two-column-image__grid {
    position: relative;
    z-index: 1;
    align-items: center;
  }
  .m-cp-two-column-image--image-breakout .m-cp-two-column-image__content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    padding-block: var(--cp-2col-band-py);
    anchor-name: --cp-2col-band-anchor;
  }
  .m-cp-two-column-image--image-breakout .m-cp-two-column-image__stack {
    position: relative;
    z-index: 1;
    width: 100%;
  }
  .m-cp-two-column-image--image-breakout .m-cp-two-column-image__media {
    position: relative;
    z-index: 1;
    align-self: center;
  }
  .m-cp-two-column-image--image-breakout .m-cp-two-column-image__figure {
    overflow: visible;
    background-color: transparent;
  }
  .m-cp-two-column-image--image-breakout .m-cp-two-column-image__figure--h-d,
  .m-cp-two-column-image--image-breakout .m-cp-two-column-image__figure--h-m {
    background-color: transparent;
  }
  @media (min-width: 64rem) {
    .m-cp-two-column-image--image-breakout .m-cp-two-column-image__outer-top {
      position-anchor: --cp-2col-band-anchor;
      bottom: anchor(top);
      height: auto;
    }
    .m-cp-two-column-image--image-breakout .m-cp-two-column-image__outer-bottom {
      position-anchor: --cp-2col-band-anchor;
      top: anchor(bottom);
      height: auto;
    }
    .m-cp-two-column-image--image-breakout .m-cp-two-column-image__band {
      position-anchor: --cp-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: --cp-2col-band-anchor) {
    @media (min-width: 64rem) {
      .m-cp-two-column-image--image-breakout .m-cp-two-column-image__band {
        top: 50%;
        height: auto;
        min-height: calc(2 * var(--cp-2col-band-py) + 10rem);
        transform: translateY(-50%);
      }
    }
  }
  @media (max-width: 63.99rem) {
    .m-cp-two-column-image__grid {
      flex-direction: column;
      align-items: stretch;
    }
    .m-cp-two-column-image--image-left .m-cp-two-column-image__grid {
      flex-direction: column;
    }
    .m-cp-two-column-image__content,
    .m-cp-two-column-image__media {
      flex: none;
      width: 100%;
    }
    .m-cp-two-column-image__stack {
      max-width: none;
      margin-inline: 0;
    }
    /* STYLE tab alignment (mobile). Lists stay left even when copy is centered. */
    .m-cp-two-column-image--align-m-left .m-cp-two-column-image__content {
      align-items: flex-start;
    }
    .m-cp-two-column-image--align-m-center .m-cp-two-column-image__content {
      align-items: center;
    }
    .m-cp-two-column-image--align-m-right .m-cp-two-column-image__content {
      align-items: flex-end;
    }
    .m-cp-two-column-image--align-m-left .m-cp-two-column-image__stack {
      text-align: left;
    }
    .m-cp-two-column-image--align-m-center .m-cp-two-column-image__stack {
      text-align: center;
    }
    .m-cp-two-column-image--align-m-right .m-cp-two-column-image__stack {
      text-align: right;
    }
    .m-cp-two-column-image--align-m-left .m-cp-two-column-image__actions {
      justify-content: flex-start;
    }
    .m-cp-two-column-image--align-m-center .m-cp-two-column-image__actions {
      justify-content: center;
    }
    .m-cp-two-column-image--align-m-right .m-cp-two-column-image__actions {
      justify-content: flex-end;
    }
    .m-cp-two-column-image--align-m-center .m-cp-two-column-image__body :where(ul, ol),
    .m-cp-two-column-image--align-m-right .m-cp-two-column-image__body :where(ul, ol),
    .m-cp-two-column-image--align-m-center .m-cp-two-column-image__checklist,
    .m-cp-two-column-image--align-m-right .m-cp-two-column-image__checklist {
      align-self: flex-start;
      width: 100%;
      max-width: 100%;
      text-align: left;
    }
    .m-cp-two-column-image--m-image-first .m-cp-two-column-image__media {
      order: -1;
    }
    .m-cp-two-column-image--image-breakout .m-cp-two-column-image__content {
      anchor-name: none;
      padding-block: var(--cp-2col-band-py);
      align-self: stretch;
    }
    .m-cp-two-column-image--image-breakout .m-cp-two-column-image__grid {
      align-items: stretch;
      gap: 0;
    }
    .m-cp-two-column-image--image-breakout .m-cp-two-column-image__media {
      align-self: stretch;
    }
    /* Inner band: copy + most of image. Outer strip includes STYLE spacing + image peek. */
    .m-cp-two-column-image--image-breakout .m-cp-two-column-image__outer-top,
    .m-cp-two-column-image--image-breakout .m-cp-two-column-image__outer-bottom {
      bottom: auto;
      height: auto;
    }
    .m-cp-two-column-image--image-breakout.m-cp-two-column-image--m-image-first .m-cp-two-column-image__outer-top {
      display: block;
      height: calc(var(--cp-2col-mobile-overhang) + var(--cp-2col-pad-top));
    }
    .m-cp-two-column-image--image-breakout.m-cp-two-column-image--m-image-first .m-cp-two-column-image__outer-bottom {
      display: none;
    }
    .m-cp-two-column-image--image-breakout:not(.m-cp-two-column-image--m-image-first) .m-cp-two-column-image__outer-top {
      display: none;
    }
    .m-cp-two-column-image--image-breakout:not(.m-cp-two-column-image--m-image-first) .m-cp-two-column-image__outer-bottom {
      display: block;
      top: auto;
      height: calc(var(--cp-2col-mobile-overhang) + var(--cp-2col-pad-bottom));
    }
    .m-cp-two-column-image--image-breakout.m-cp-two-column-image--m-image-first .m-cp-two-column-image__band {
      top: var(--cp-2col-mobile-overhang);
      bottom: 0;
      height: auto;
    }
    .m-cp-two-column-image--image-breakout:not(.m-cp-two-column-image--m-image-first) .m-cp-two-column-image__band {
      top: 0;
      bottom: var(--cp-2col-mobile-overhang);
      height: auto;
    }
    .m-cp-two-column-image--image-breakout.m-cp-two-column-image--m-image-first .m-cp-two-column-image__figure {
      margin-top: calc(-1 * var(--cp-2col-mobile-overhang));
    }
    .m-cp-two-column-image--image-breakout:not(.m-cp-two-column-image--m-image-first) .m-cp-two-column-image__figure {
      margin-bottom: calc(-1 * var(--cp-2col-mobile-overhang));
    }
    /* Mobile-only image crop (stacked layout). */
    .m-cp-two-column-image--m-img-wide .m-cp-two-column-image__figure {
      aspect-ratio: 16/9;
    }
    .m-cp-two-column-image--m-img-standard .m-cp-two-column-image__figure {
      aspect-ratio: 4/3;
    }
    .m-cp-two-column-image--m-img-square .m-cp-two-column-image__figure {
      aspect-ratio: 1/1;
    }
    .m-cp-two-column-image--m-img-tall .m-cp-two-column-image__figure {
      aspect-ratio: 3/4;
    }
    .m-cp-two-column-image__figure--h-m {
      aspect-ratio: unset;
      width: 100%;
      height: var(--cp-2col-image-h-m);
    }
  }
}
/*
 * 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-cp-two-column-image--image-breakout {
  --cp-2col-pad-top: var(--rd-surface-pt-m, var(--rd-surface-section-py));
  --cp-2col-pad-bottom: var(--rd-surface-pb-m, var(--rd-surface-section-py));
}

[data-rd-module-surface].m-cp-two-column-image--image-breakout .m-cp-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-cp-two-column-image--image-breakout {
    --cp-2col-pad-top: var(--rd-surface-pt-t, var(--rd-surface-pt-m, var(--rd-surface-section-py)));
    --cp-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-cp-two-column-image--image-breakout {
    --cp-2col-pad-top: var(
      --rd-surface-pt-l,
      var(--rd-surface-pt-t, var(--rd-surface-pt-m, var(--rd-surface-section-py)))
    );
    --cp-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-cp-two-column-image--image-breakout {
    --cp-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))))
    );
    --cp-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))))
    );
  }
}