/*!*****************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/feature-split/style.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************/
.mea-feature-split {
  padding: var(--mea-feature-split-pt, 6rem) 0 var(--mea-feature-split-pb, 6rem);
}

/* Both measured instances sit on #fafafa. */
.mea-feature-split--ground-light {
  background-color: var(--mea-surface);
}

/* ----------------------------------------------------------------- *
 * imageBleed - 2008:8855 (/about-us "Global client base")
 *
 * That node has NO auto-layout: the copy sits at the 120 gutter and
 * the photograph is absolutely placed at x 855, 585 wide and 659 tall
 * - the whole section height, flush to the frame's right edge. The
 * section is image-driven, so a copy-sized version lands 26px short.
 *
 * So the container drops its own right gutter, the image column takes
 * a fixed width and stretches, and only the copy keeps the gutter.
 * Below the DESKTOP breakpoint it returns to the stacked arrangement,
 * where a flush-right column has nothing to be flush with.
 *
 * 1024, not the 768 this block shipped with (corrected 2026-09-05, measured on
 * /about-us, the only instance that uses this arrangement). The image column is
 * a rigid `imageWidth` track and the copy column is `minmax(0, 1fr)`, so the
 * copy has a zero minimum and grid hands the photograph its full 585px at every
 * width from 768 up: the copy's own content box measured **89.07px at 768**
 * before this page authored a gutter at all, with `__headline` reporting
 * scrollWidth 184 against clientWidth 55 - i.e. the tablet band was clipping
 * its own copy on the arrangement as shipped. It is not a case for shrinking
 * the photo proportionally either: the design specifies 1440 only, and the
 * block already draws a correct stacked form below 768. Extending that form
 * over the tablet band is the smallest thing that fits, and 1024 is this
 * project's own desktop breakpoint (tokens.css). At >= 1024 nothing changes -
 * 1440 is byte-identical.
 * ----------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* The section's own vertical padding cannot apply here, or it insets the
     image column and the photo stops short of the band edges. The copy
     carries it instead, and the authored image height becomes the floor. */
  .mea-feature-split--image-bleed {
    min-height: var(--mea-feature-split-image-h, 0);
    padding: 0;
  }
  .mea-feature-split--image-bleed .mea-feature-split__container {
    min-height: var(--mea-feature-split-image-h, 0);
    grid-template-columns: minmax(0, 1fr) var(--mea-feature-split-image-w, 585px);
    gap: 0;
    align-items: stretch;
    max-width: var(--mea-maxw);
    padding-inline-end: 0;
  }
  .mea-feature-split--image-bleed .mea-feature-split__text {
    align-self: center;
    padding-block: var(--mea-feature-split-pt, 0) var(--mea-feature-split-pb, 0);
    padding-inline-end: var(--mea-gutter);
  }
  .mea-feature-split--image-bleed .mea-feature-split__visual,
  .mea-feature-split--image-bleed .mea-feature-split__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.mea-feature-split__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 768px) {
  .mea-feature-split__container {
    grid-template-columns: 1fr 1fr;
    /* 5rem is what this block has always drawn. 2545:2709 draws 55, so the
       step is a per-instance override with the old value as its fallback. */
    gap: var(--mea-feature-split-col-gap, 5rem);
  }
  .mea-feature-split.align-image-left .mea-feature-split__text {
    order: 2;
  }
  .mea-feature-split.align-image-left .mea-feature-split__visual {
    order: 1;
  }
}
.mea-feature-split__badge {
  display: inline-block;
  background: var(--mea-color-green, #7fb736);
  color: var(--mea-color-white, #fff);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* Measured on 2008:8855: Fira Code Light 20, 1.5px tracking, #3e6a64, and
   SENTENCE case. The block drew Inter 600 uppercase green, which is not
   the eyebrow this file uses anywhere else. Every value below is a token:
   #3e6a64 is --mea-ink-eyebrow exactly. `normal` line-height for the reason
   mea/section-header records - every eyebrow node in the file reports it. */
.mea-feature-split__eyebrow {
  font-family: var(--mea-font-mono);
  font-weight: var(--mea-weight-light);
  font-size: var(--mea-type-eyebrow-size);
  line-height: normal;
  letter-spacing: var(--mea-type-eyebrow-ls);
  color: var(--mea-ink-eyebrow);
  margin-bottom: 1rem;
}

/* Figma "H1 - Section": Inter Regular 45 / 110%. The block capped at 2.5rem,
   which is 40 here and 5 short. Clamped down below the design width the way
   mea/section-header clamps its own headline.

   Ink differs between the two instances - #021412 on 2008:8855 and #1c1c1a on
   2002:4548 - so this takes --mea-ink-strong, the first of them, and the second
   wants an attribute when that page is built. */
.mea-feature-split__headline {
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-regular);
  font-size: clamp(30px, 6vw, var(--mea-type-h1-size));
  line-height: var(--mea-type-h1-lh);
  margin-bottom: 1.5rem;
  /* headlineColor (--mea-feature-split-headline-color) is the opt-in
     override; unset, every earlier instance keeps --mea-ink-strong.
     2545:2712 paints #121316, which no token carries. */
  color: var(--mea-feature-split-headline-color, var(--mea-ink-strong));
  /* headlineMaxWidth: 2545:2712's text node is 491 wide inside a 564 column,
     which is what puts its break after "businesses". 0 leaves the column. */
  max-width: var(--mea-feature-split-headline-maxw, none);
}

/* leading-[normal] on 2545:2712 against the welded "H1 - Section" 1.1 above.
   Chrome resolves `normal` for Inter from winAscent/winDescent (1.25em) where
   Figma uses the typo metrics (~1.211em), so this runs ~2px per line over the
   node render - report it, do not pin a ratio (AGENTS.md). */
.mea-feature-split--leading-normal .mea-feature-split__headline {
  line-height: normal;
}

/* A bare <strong> computes 700 from the UA sheet's `bolder`. 2545:2712's
   second span is Semi Bold 600, so the emphasis weight is per instance;
   `bold` is the default and leaves every earlier instance alone. Two classes
   plus the element reach (0,2,1), above the UA sheet's own (0,0,1). */
.mea-feature-split--emphasis-semibold .mea-feature-split__headline strong,
.mea-feature-split--emphasis-semibold .mea-feature-split__headline b {
  font-weight: var(--mea-weight-semibold);
}

/* Same shape, same reasoning, one level down: `bodyEmphasis: semibold` for an
   emphasised run inside a body paragraph. R6 2736:2839 draws its lead-in span
   Semi Bold 600 where a bare <strong> computes 700. Mirrors
   mea/text-split's own `--body-emphasis-semibold` rule. */
.mea-feature-split--body-emphasis-semibold .mea-feature-split__body strong,
.mea-feature-split--body-emphasis-semibold .mea-feature-split__body b {
  font-weight: var(--mea-weight-semibold);
}

/* Was one `<p>`; now a stack, because 2008:8855 carries three paragraph groups
   where 2002:4548 carries one. The 34px step is that node's own spacing and an
   attribute, since the two instances need not agree. */
/* Figma "P1": Inter Regular 20 / 160% in #2e2e2b, which is --mea-ink exactly,
   and both instances agree. The block drew 1.125rem, which is 18 here. */
.mea-feature-split__body {
  display: flex;
  flex-direction: column;
  gap: var(--mea-feature-split-body-gap, 34px);
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-regular);
  font-size: var(--mea-type-p1-size);
  line-height: var(--mea-type-p1-lh);
  /* bodyColor, same opt-in contract as headlineColor above. */
  color: var(--mea-feature-split-body-color, var(--mea-ink));
  /* bodyMaxWidth: 2545:2714's text node is 526 wide inside a 564 column. */
  max-width: var(--mea-feature-split-body-maxw, none);
}
.mea-feature-split__body p {
  margin: 0;
  font-weight: var(--mea-weight-regular);
}

.mea-feature-split__visual {
  position: relative;
}

.mea-feature-split__visual img {
  max-width: 100%;
  height: auto;
  /* 1rem is what this block has always drawn, and it resolves to 18px here
     because the parent theme's root is 18. 2008:8866 wants 0, so the value is
     an attribute and the fallback keeps every earlier instance unchanged. */
  border-radius: var(--mea-feature-split-image-radius, 1rem);
  display: block;
}

/* ----------------------------------------------------------------- *
 * imageWidth/imageHeight in the CONTAINED arrangement -
 * 2736:2840 (/products) and 2545:2715 (/mea-full-stack)
 *
 * Both nodes draw a square: 494x494 and 607x607. Contained instances
 * size the image from the file's own aspect ratio inside a 1fr
 * column, which put /products at 587x392 and /mea-full-stack at
 * 587x357 - the right width by accident and the wrong shape. The two
 * attributes that already carry an authored box for `imageBleed`
 * carry it here too; render.php only adds this class when a width is
 * authored, so every instance that predates it is untouched.
 *
 * Both sit toward the right of their band (right edges 1364 and 1346
 * of 1440), so a box narrower than its column sits at the column's
 * end. Below the tablet breakpoint the grid is one column and a fixed
 * box has nothing to be narrower than, so the size does not apply.
 * ----------------------------------------------------------------- */
@media (min-width: 768px) {
  /* The image column takes the authored width instead of an even half, the
     same way the bleed variant does, and the copy takes what is left. 2545:2709
     measures 564 copy + 55 gap + 607 image across its 1226 content width, which
     is that arrangement exactly. Without this the 1fr column caps the image at
     587 and `max-width: 100%` silently clamps a 607 box back down to it. */
  /* `minmax(0, <w>)`, not a flat `<w>`: a flat track cannot shrink, so at
     768 the 607px square ran 14px past the viewport on /mea-full-stack
     (measured: container 640, 607 image + 55 gap = 662). Between 768 and
     the design width the track now gives back what it cannot have, and at
     every width where the authored box DOES fit the track still resolves to
     its max, so /products' 494 square is unchanged at every width it
     renders. Above 1440 the deliberate overrun is a separate rule below. */
  .mea-feature-split--image-sized .mea-feature-split__container {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--mea-feature-split-image-w, 1fr));
  }
  .mea-feature-split--image-sized.align-image-left .mea-feature-split__container {
    grid-template-columns: minmax(0, var(--mea-feature-split-image-w, 1fr)) minmax(0, 1fr);
  }
  /* The box follows the track through `aspect-ratio` rather than a fixed
     height, or a shrunk track leaves a 585x607 box where the design draws a
     square. render.php emits the ratio unitless from the same two attributes;
     where the authored width fits, height resolves to the authored height and
     nothing moves. */
  .mea-feature-split--image-sized .mea-feature-split__visual img {
    width: var(--mea-feature-split-image-w, auto);
    height: auto;
    aspect-ratio: var(--mea-feature-split-image-ar, auto);
    max-width: 100%;
    object-fit: cover;
  }
}
/* An instance that authors BOTH columns (textWidth) cannot fit them below
 * 1440; without a cap the 1fr copy column collapses to 0 and the headline
 * wraps one word per line under the image (measured at 768 and 1024). Between
 * the tablet breakpoint and the design width, cap the image at half the row.
 * Opt-in via the text-sized class, so /products and /about-us are untouched;
 * bounded above so the authored pair below still owns >= 1440. */
@media (min-width: 768px) and (max-width: 1439.98px) {
  .mea-feature-split--image-sized.mea-feature-split--text-sized .mea-feature-split__container {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(var(--mea-feature-split-image-w, 1fr), 50%));
  }
  .mea-feature-split--image-sized.mea-feature-split--text-sized.align-image-left .mea-feature-split__container {
    grid-template-columns: minmax(0, min(var(--mea-feature-split-image-w, 1fr), 50%)) minmax(0, 1fr);
  }
}
/* textWidth: an AUTHORED copy column instead of what is left of the row.
 *
 * 2545:2709 is 564 copy + 55 gap + 607 image = 1226 inside a 1200 content
 * column, so the image runs 26px past it and ends at x 1346 of 1440 - which is
 * where the node render draws it (column profile of the PNG: the image band is
 * 739-1345). Reproduce the overrun and let it clip, per AGENTS.md, and pin it
 * to the one width Figma specifies: below 1440 the container narrows while a
 * fixed pair of columns would not, and the row would push a real horizontal
 * scrollbar. The proportional `minmax(0, 1fr)` above stays in charge there.
 *
 * The var's own fallback is the same `minmax(0, 1fr)`, so an instance that
 * authors no textWidth is untouched at every width. */
@media (min-width: 1440px) {
  .mea-feature-split--image-sized .mea-feature-split__container {
    grid-template-columns: var(--mea-feature-split-text-w, minmax(0, 1fr)) var(--mea-feature-split-image-w, 1fr);
  }
  .mea-feature-split--image-sized.align-image-left .mea-feature-split__container {
    grid-template-columns: var(--mea-feature-split-image-w, 1fr) var(--mea-feature-split-text-w, minmax(0, 1fr));
  }
}
.mea-feature-split__placeholder {
  background: var(--mea-color-gray-light, #f5f5f5);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mea-color-gray-dark, #666);
  border-radius: 1rem;
}

/*# sourceMappingURL=style-index.css.map*/