/*
 * CTA Two — right-side pill behind the laptop (`.cta-office-image`)
 *
 * Webflow exports size this wrapper to the laptop PNG (195×315 + padding),
 * which shortens the Image-Border-Background9.webp pill. Restore the pill to
 * the asset's native aspect ratio so it matches the Webflow designer.
 *
 * Image-Border-Background9.webp: 374×670px
 * Loaded by `app/(legacy)/layout.tsx` on all Webflow body routes.
 */

.wf-body .cta-two-section .cta-office-image.overflow-hidden {
  --cta-two-office-pill-width: 210px;

  box-sizing: border-box;
  width: var(--cta-two-office-pill-width);
  height: calc(var(--cta-two-office-pill-width) * 670 / 374);
  min-height: calc(var(--cta-two-office-pill-width) * 670 / 374);
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-size: 100% 100%;
}

.wf-body .cta-two-section .cta-office-image.overflow-hidden > img.auto-fit {
  width: 195px;
  height: 315px;
  flex: 0 0 auto;
  object-fit: contain;
}

@media screen and (max-width: 991px) {
  .wf-body .cta-two-section .cta-office-image.overflow-hidden {
    --cta-two-office-pill-width: 200px;
  }
}