.beca-2column-section {
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  padding-left: 0;
  padding-right: 0;
  /* Full-bleed breakout: escape any padded parent/theme container so the
     1240px inner max-width is measured from the true viewport edges. */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: var(--beca-2column-section-margin-top, 0);
  margin-bottom: var(--beca-2column-section-margin-bottom, 0);
  padding-top: var(--beca-2column-section-pad-top, 4rem);
  padding-bottom: var(--beca-2column-section-pad-bottom, 4rem);
  background-color: var(--beca-2column-section-bg, #fff);
  border-top: 0.5px solid var(--beca-2column-section-border-color, rgba(217,217,217,1));
  border-bottom: 0.5px solid var(--beca-2column-section-border-color, rgba(217,217,217,1));
  overflow-x: clip;
}

.beca-2column-section,
.beca-2column-section * {
  box-sizing: border-box;
}

.beca-2column-section-inner {
  width: 100%;
  max-width: var(--beca-2column-section-container, 1240px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

.beca-2column-section-header {
  max-width: 820px;
  margin: 0 auto 2rem;
  text-align: center;
}

.beca-2column-section-eyebrow {
  margin: 0 0 0.5rem;
  color: #07A5F6;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* ==========================================================================
   Column layout: floated image + wrapping text.
   The image is always emitted first in markup and floated left/right per
   the section's image-position setting. Because the text column is a plain
   (non-BFC) block, its lines wrap around the float while the image is
   taller than the text, then automatically span the full column width once
   the text runs past the bottom of the image.
   ========================================================================== */
.beca-2column-section-grid {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.beca-2column-section-grid::after {
  content: "";
  display: table;
  clear: both;
}

.beca-2column-section-media-figure {
  margin: 0;
  width: calc(50% - var(--beca-2column-section-gap, 3rem));
}

.beca-2column-section-image-left .beca-2column-section-media-figure {
  float: left;
  margin-right: var(--beca-2column-section-gap, 3rem);
}

.beca-2column-section-image-right .beca-2column-section-media-figure {
  float: right;
  margin-left: var(--beca-2column-section-gap, 3rem);
}

.beca-2column-section-media {
  width: 100%;
  min-height: 320px;
  border-radius: var(--beca-2column-section-image-radius, 12px);
  overflow: hidden;
  background: rgba(19, 90, 213, 0.06);
}

.beca-2column-section-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: var(--beca-2column-section-image-radius, 12px);
}

.beca-2column-section-image-caption {
  margin: 0.6rem 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  text-align: left;
  gap: 0 0.5rem;
  color: #777;
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.5;
}

.beca-2column-section-image-credit {
  color: #888;
}

.beca-2column-section-content {
  text-align: var(--beca-2column-section-text-align, left);
}

/* Text column heading: a visibly lower hierarchy than the section heading
   above it — smaller and lighter, but still distinct from the body copy. */
.beca-2column-section-content-heading {
  margin: 0 0 1rem;
  color: #172033;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 600;
  line-height: 1.3;
}

.beca-2column-section-body {
  color: #555;
  font-size: 1rem;
  line-height: 1.75;
}

.beca-2column-section-body p,
.beca-2column-section-body div {
  margin: 0 0 1rem;
}

.beca-2column-section-body :last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .beca-2column-section-media-figure {
    float: none;
    width: 100%;
    margin: 0 0 2rem;
  }

  .beca-2column-section-media,
  .beca-2column-section-media img {
    min-height: 260px;
  }
}

@media (max-width: 600px) {
  .beca-2column-section-header {
    margin-bottom: 1.5rem;
  }

  .beca-2column-section-media,
  .beca-2column-section-media img {
    min-height: 220px;
  }
}

/* Transparent PNG support: do not paint a background behind the image. */
.beca-2column-section-image,
.beca-2column-section__image,
.beca-2column-section-image-wrap,
.beca-2column-section__image-wrap,
.beca-2column-section-media,
.beca-2column-section__media,
.beca-2column-section-media img,
.beca-2column-section__media img {
  background: transparent !important;
  background-color: transparent !important;
}

/* Keep transparent PNGs/logos/illustrations visible without cropping. */
.beca-2column-section-media img,
.beca-2column-section__media img {
  object-fit: contain !important;
}

/* Anchor offset for sticky headers. */
.beca-2column-section[id] {
  scroll-margin-top: 110px;
}

/* ==========================================================================
   BecA Standard Section Typography
   Standardized across BecA custom section modules.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap');

.beca-1column-section,
.beca-2column-section,
.bfc-section,
.beca-2column-matrix,
.beca-flexwrap-matrix {
  --beca-primary: #135AD5;
  --beca-accent: #07A5F6;
  --beca-heading-color: #172033;
  --beca-body-color: #555;
  font-family: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.beca-1column-section *,
.beca-2column-section *,
.bfc-section *,
.beca-2column-matrix *,
.beca-flexwrap-matrix * {
  font-family: inherit;
}

.beca-1column-section-eyebrow,
.beca-2column-section-eyebrow,
.bfc-eyebrow,
.beca-2column-matrix__eyebrow,
.beca-flexwrap-matrix__eyebrow {
  margin: 0 0 0.65rem;
  display: inline-block;
  position: relative;
  padding-left: 14px;
  color: var(--beca-accent);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.beca-1column-section-eyebrow::before,
.beca-2column-section-eyebrow::before,
.bfc-eyebrow::before,
.beca-2column-matrix__eyebrow::before,
.beca-flexwrap-matrix__eyebrow::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 3px;
  border-radius: 2px;
  background: var(--beca-accent);
}

.beca-1column-section-heading,
.beca-2column-section-heading,
.bfc-heading,
.beca-2column-matrix__heading,
.beca-flexwrap-matrix__heading {
  margin: 0;
  color: var(--beca-heading-color);
  font-size: clamp(1.65rem, 2.65vw, 2.55rem);
    font-weight: 500;
    line-height: 1.16;
    letter-spacing: -0.018em;
}

.beca-1column-section-body,
.beca-2column-section-body,
.bfc-subheading,
.beca-2column-matrix__body,
.beca-flexwrap-matrix__body {
  color: var(--beca-body-color);
}

/* ==========================================================================
   beca_2column_section: reduced section-heading size/weight.
   Scoped to this module only — does not alter the shared standard above,
   which other BecA section modules still rely on.
   ========================================================================== */
.beca-2column-section-heading {
  font-size: clamp(1.3rem, 1.9vw, 1.85rem);
  font-weight: 400;
}

/* Mobile content gutter: retain full-bleed section background, inset its content. */
@media (max-width: 768px) {
  .beca-2column-section-inner {
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
  }
}

/* Mobile alignment: same single 2rem content gutter as the working BecA Image + Text module. */
@media (max-width: 768px) {
  .beca-2column-section > .beca-2column-section-inner {
    width: 100%;
    max-width: min(var(--beca-2column-section-container, 1240px), 1240px);
    margin-inline: auto;
    padding-inline: 2rem;
    box-sizing: border-box;
  }
}

/* Fine alignment to the confirmed Header Mega visible mobile content edge. */
@media (max-width: 768px) {
  .beca-2column-section > .beca-2column-section-inner {
    padding-inline: 2.5rem;
  }
}