/*!**************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/text-split/style.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************/
/**
 * mea/text-split
 *
 * The "Problem Left / Problem Right(xN)" pattern: a short heading + one lead
 * paragraph, left; one or more stacked paragraphs, right; no image. Measured
 * from Figma node 2003:6265 (/bpo-solutions "The BPO Problem", 1440x464,
 * light #fafafa ground, HORIZONTAL layout, 120px padding, 80px column gap,
 * one right paragraph) and cross-checked against 2008:8797 (/about-us,
 * same left column, 4 stacked right paragraphs) and 2008:8855 (/about-us
 * "Global client base", 3 stacked right paragraphs) - the shape recurs with
 * a variable paragraph count, never a variable column layout.
 *
 * The right column's paragraph-to-paragraph gap is not directly measured
 * (Figma's absolute y-offsets on the multi-paragraph instances reflect each
 * paragraph's own wrapped height, not a fixed delta), so it ships as an
 * attribute rather than a welded number - see render.php.
 */
.mea-text-split {
  box-sizing: border-box;
  /* Subpage frames use a 120px section gutter against the homepage's 88px
     default - see AGENTS.md on rebinding --mea-gutter per section. Missing
     this left the section on the 88px homepage ceiling instead of Figma's
     120px. 120 / 1440 = 8.3333vw. The audience family (/for-reinsurers'
     "Reinsurance Challenge", 2014:9101) draws 80px instead - matching its
     hero's own "audience" preset gutter - so the ceiling is a per-instance
     attribute rather than a second welded constant. */
  --mea-gutter: clamp(20px, var(--mea-text-split-gutter-vw, 8.3333vw), var(--mea-text-split-gutter, 120px));
  padding-top: var(--mea-text-split-pt, 120px);
  padding-bottom: var(--mea-text-split-pb, 120px);
}
.mea-text-split--ground-light {
  background-color: var(--mea-surface);
  color: var(--mea-ink);
}
.mea-text-split--ground-dark {
  background-color: var(--mea-dark);
  color: var(--mea-on-dark);
}
.mea-text-split {
  /* `wash: teal` - the same 180deg teal wash mea/section-header's own
     `--wash-teal` paints, stop table and `washStrength` percentage
     included, so the two blocks draw one treatment rather than two.
     R6 2545:1737 (/products "Technology Section") declares
     `linear-gradient(180deg, rgba(0,0,0,0) 28.55%, rgba(62,106,100,0.2)
     82.628%)` over #021412; see render.php for the sampled render.
     Opt-in, so the eight instances that predate it are untouched. */
}
.mea-text-split--wash-teal {
  background-image: linear-gradient(180deg, transparent 28.55%, color-mix(in srgb, var(--mea-glow-teal) calc(var(--mea-text-split-wash, 20%) * 0.031), transparent) 42.07%, color-mix(in srgb, var(--mea-glow-teal) calc(var(--mea-text-split-wash, 20%) * 0.177), transparent) 55.59%, color-mix(in srgb, var(--mea-glow-teal) calc(var(--mea-text-split-wash, 20%) * 0.487), transparent) 69.11%, color-mix(in srgb, var(--mea-glow-teal) var(--mea-text-split-wash, 20%), transparent) 82.628%);
}
.mea-text-split__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--mea-text-split-gap, 80px);
}
.mea-text-split__left {
  display: flex;
  /* shrink (not 0 0): a rigid 500+80+600=1180px row overflows any
     viewport below ~1420px once the section gutter is added back in,
     and the column-stack breakpoint below doesn't kick in until 1023px -
     measured overflowing 219px at 1024px wide before this. */
  flex: 0 1 var(--mea-text-split-left-w, 500px);
  max-width: 100%;
  flex-direction: column;
  gap: var(--mea-text-split-left-gap, 24px);
  min-width: 0;
}
.mea-text-split__right {
  display: flex;
  flex: 0 1 var(--mea-text-split-right-w, 600px);
  max-width: 100%;
  flex-direction: column;
  gap: var(--mea-text-split-right-gap, 32px);
  min-width: 0;
  box-sizing: border-box;
}
.mea-text-split {
  /* 2003:6269's 3px lime-gradient left edge, INSIDE-aligned - reproduced as
     a border-image so only the left edge draws (the other three widths stay
     0), plus the frame's own 30px left/right inset. Figma's exact stops:
     rgb(200,233,49) -> rgb(146,216,40). */
}
.mea-text-split--right-divider .mea-text-split__right {
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, #c8e931, #92d828) 1;
  padding-inline: var(--mea-text-split-right-pad-x, 30px) var(--mea-text-split-right-pad-e, var(--mea-text-split-right-pad-x, 30px));
}
.mea-text-split {
  /* The same 3px rule drawn as an OVERLAY instead of a border, so it costs
     no layout - AGENTS.md's standing "a hairline belongs in an inset
     box-shadow, not a border" rule, in its 3px form. Figma strokes the
     frame INSIDE its own 627px box, so the rule overlaps the 30px inset
     rather than eating 3px of the copy measure: 2545:2283 gives its text
     nodes 597 of a 627 column, and a real border leaves 594. Opt-in
     (`rightDividerOverlay`) rather than a straight correction, because the
     eight instances on other pages were measured and signed off with the
     border and a 3px wider measure can move a wrap point; adopt it per page
     as each gets its own R6 pass. */
}
.mea-text-split--right-divider-overlay .mea-text-split__right {
  position: relative;
  border-left: 0;
  border-image: none;
}
.mea-text-split--right-divider-overlay .mea-text-split__right::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  pointer-events: none;
  background: linear-gradient(180deg, #c8e931, #92d828);
}
.mea-text-split {
  /* `rightDividerFill: flat` - R6 redraws the same rule as a single
     opaque #c9e931 (2545:2449). border-image is dropped rather than
     overridden with a one-stop gradient, so the border-color below is
     what paints. See render.php's own note for the sampled numbers. */
}
.mea-text-split--right-divider-flat .mea-text-split__right {
  border-image: none;
  border-left-color: var(--mea-cta-from);
}
.mea-text-split {
  /* The two axes together. `flat` paints a border-color, which the overlay
     above has already zeroed, so an instance setting both drew the overlay's
     gradient. /information-security's determinism split (2545:4761) is the
     first that needs both: it declares `border-l-3 border-[#c9e931]` AND
     sizes its text nodes 548 of a 580 column, which only the overlay leaves
     room for. Sampled down x=741 of that node's own render: rgb(200,232,48)
     at y 150, 300, 450 and 520 - one flat colour, no ramp. No existing
     record sets both (mea-underwriting has the overlay, bpo-solutions and
     about-us the flat fill), so nothing else moves. */
}
.mea-text-split--right-divider-overlay.mea-text-split--right-divider-flat .mea-text-split__right::before {
  background: var(--mea-cta-from);
}
.mea-text-split {
  /* `columnOverflow` - AGENTS.md: "Where a Figma column overruns its own
     frame, reproduce the overrun and let it clip - but pin that behaviour to
     1440." R6 2545:4321 is 500 + 80 + 663 = 1243 inside a 1200 column, so its
     right column runs 700..1363 and eats 43px of the section's own 120px
     right gutter. Held at the design width only: at >= 1440 the container is
     capped at 1200 and centred, so the 43px of overrun always stays inside
     the viewport, and below it the proportional shrink the columns already do
     (see the comment on `&__left`) is untouched. */
}
@media (min-width: 1440px) {
  .mea-text-split--column-overflow .mea-text-split__left, .mea-text-split--column-overflow .mea-text-split__right {
    flex-shrink: 0;
  }
}
.mea-text-split {
  /* Service mark inside a right-column paragraph, same treatment and the same
     reasoning as mea/section-header's own `&__body sup`: a third of the body's
     cap height with its top flush to the cap line, and the glyphs written as
     letters because the self-hosted Inter is a latin/latin-ext subset with no
     U+2120. R6 2545:4329 carries three of them. `bottom` resolves against this
     element's OWN font-size, so 1.34em is 1.34 x 7px, not of the 20px parent.
     No instance that predates this carries a <sup>, so the rule changes none
     of them. */
}
.mea-text-split__right-paragraph sup {
  font-size: 0.35em;
  vertical-align: baseline;
  position: relative;
  bottom: 1.34em;
}
.mea-text-split__eyebrow {
  margin: 0;
  padding: 0;
  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);
}
.mea-text-split--ground-dark .mea-text-split__eyebrow {
  color: var(--mea-accent);
}
.mea-text-split {
  /* "H1 - Section", Inter Regular 45/1.1 - the shipped step, and what every
     instance in the file draws except the one named below. */
}
.mea-text-split__heading {
  margin: 0;
  padding: 0;
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-regular);
  font-size: var(--mea-type-h1-size);
  line-height: var(--mea-type-h1-lh);
}
.mea-text-split__heading strong,
.mea-text-split__heading b {
  font-weight: var(--mea-weight-bold);
}
.mea-text-split {
  /* headingWeight: "light". R6's /information-security determinism heading
     (2545:4760) draws its plain run `font-['Inter:Light']` 300 against the
     bold clause beside it - the one node in the file that does, and an
     unstyled run rather than a named style, so it is per instance and
     flagged rather than normalised (see render.php). The `strong` rule above
     still carries the bold half, so only the plain run moves. Two classes,
     so it beats __heading's own weight whichever way source order falls. */
}
.mea-text-split--heading-weight-light .mea-text-split__heading {
  font-weight: var(--mea-weight-light);
}
.mea-text-split {
  /* "H2", Inter Medium 30/1.3 - 2545:2368 on /mea-underwriting's Built For
     section, the file's first instance whose left column is not H1. */
}
.mea-text-split--heading-h2 .mea-text-split__heading {
  font-weight: var(--mea-weight-medium);
  font-size: var(--mea-type-h2-size);
  line-height: var(--mea-type-h2-lh);
}
.mea-text-split {
  /* R6 paints the display rows a step darker than the body copy beside
     them: #1c1c1a against #2e2e2b (2545:2282 / 2368 / 2371 / 2289). Unset
     by default, so an instance that does not ask keeps the ground ink. */
}
.mea-text-split--ink-display .mea-text-split__heading, .mea-text-split--ink-display .mea-text-split__right-paragraph .mea-text-split__subhead {
  color: var(--mea-ink-display);
}
.mea-text-split__left-body, .mea-text-split__right-paragraph {
  margin: 0;
  padding: 0;
  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);
}
.mea-text-split--ground-light .mea-text-split__left-body, .mea-text-split--ground-light .mea-text-split__right-paragraph {
  color: var(--mea-ink);
}
.mea-text-split--ground-dark .mea-text-split__left-body, .mea-text-split--ground-dark .mea-text-split__right-paragraph {
  color: var(--mea-on-dark);
}
.mea-text-split {
  /* `ink: strong` - 2545:2671 (/mea-full-stack) paints both its heading and
     its body #021412, which is --mea-ink-strong exactly, where the light
     ground above resolves --mea-ink (#2e2e2b). Three classes so it outranks
     the two-class ground rule above rather than depending on source order.
     Only the light ground has a second step; the dark one has one ink. */
}
.mea-text-split--ground-light.mea-text-split--ink-strong .mea-text-split__heading, .mea-text-split--ground-light.mea-text-split--ink-strong .mea-text-split__left-body, .mea-text-split--ground-light.mea-text-split--ink-strong .mea-text-split__right-paragraph {
  color: var(--mea-ink-strong);
}
.mea-text-split {
  /* `bodyEmphasis: semibold` - 2545:2676's emphasised run is Semi Bold 600
     against the UA sheet's 700 for a bare <strong>. Two classes plus the
     element clear (0,0,1). */
}
.mea-text-split--body-emphasis-semibold .mea-text-split__right-paragraph strong, .mea-text-split--body-emphasis-semibold .mea-text-split__right-paragraph b, .mea-text-split--body-emphasis-semibold .mea-text-split__left-body strong, .mea-text-split--body-emphasis-semibold .mea-text-split__left-body b {
  font-weight: var(--mea-weight-semibold);
}
.mea-text-split {
  /* R6's case-study context sections draw the body a shade under white -
     rgba(244,244,243,0.9), which is --mea-on-dark-soft at 90%. The same
     third ink step mea/subpage-hero's subhead_tone already documents, so no
     new token and no literal. */
}
.mea-text-split--body-offwhite .mea-text-split__left-body, .mea-text-split--body-offwhite .mea-text-split__right-paragraph {
  color: color-mix(in srgb, var(--mea-on-dark-soft) 90%, transparent);
}
.mea-text-split {
  /* The named H2 step: Inter Medium 30/1.3, which R6 draws on all three
     case-study context headings. One step, not two axes - the size and the
     weight move together. */
}
.mea-text-split--heading-h2 .mea-text-split__heading {
  font-weight: var(--mea-weight-medium);
  font-size: var(--mea-type-h2-size);
  line-height: var(--mea-type-h2-lh);
}
.mea-text-split {
  /* /mea-underwriting's Problem section (2091:1324) embeds one Semi Bold
     24px sub-heading mid-column ("The specification changed.") between two
     otherwise-plain paragraphs - a real structural element, not styled
     body copy. A page author marks it with this class inline rather than
     the block growing a whole second content model for one instance. */
  /* "H3", Inter Semi Bold 24/1.3 - 2545:2289. This used to read
     `var(--mea-type-h4-size, 24px)`, and --mea-type-h4-size IS declared
     (20px), so the 24px fallback never applied and every subhead rendered
     20/26. The file names 24/1.3 "H3" and 20/1.3 "H4"; this row is H3.
     /mea-underwriting is the only page carrying this marker (grep
     `mea-text-split__subhead` in tools/pages/), so the correction touches
     no other instance. */
}
.mea-text-split__right-paragraph .mea-text-split__subhead {
  display: block;
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-semibold);
  font-size: var(--mea-type-h3-size);
  line-height: var(--mea-type-h3-lh);
}
.mea-text-split {
  /* "H2", Inter Medium 30/1.3 - 2545:2371's "The proof runs as a chain.",
     the same named style the `headingStep: h2` rule above draws. */
}
.mea-text-split--subhead-h2 .mea-text-split__right-paragraph .mea-text-split__subhead {
  font-weight: var(--mea-weight-medium);
  font-size: var(--mea-type-h2-size);
  line-height: var(--mea-type-h2-lh);
}
.mea-text-split {
  /* One paragraph a step darker than the body copy around it - the same
     inline-marker mechanism `__subhead` uses, and for the same reason: it
     is one instance's device, not a second content model. R6 paints two of
     /mea-underwriting's seven Problem paragraphs #1c1c1a against #2e2e2b on
     the other five (2545:2287 and 2545:2288 against 2284 / 2285 / 2286 /
     2290). Type is unchanged; only the ink moves. */
}
.mea-text-split__right-paragraph .mea-text-split__ink-display {
  /* The theme paints a bare `span { font-weight: 300 }`, which beats the
     400 this span would otherwise inherit from its own paragraph - the
     leak tools/span-weight-leak-check.js exists for. Restate it here;
     `__subhead` above is safe only because it sets 600 of its own. */
  font-weight: inherit;
  color: var(--mea-ink-display);
}
.mea-text-split--ground-dark .mea-text-split__right-paragraph .mea-text-split__ink-display {
  color: var(--mea-on-dark);
}
.mea-text-split {
  /* The same inline mechanism one type step up, for a whole paragraph R6
     draws at the file's "H3" - Inter Semi Bold 24 / 1.3. /about-us' BPO
     Problem closes on one (2545:4333, measured Semi Bold 600 / 24 / 130%,
     frame 600x124 = 4 lines at 31.2) where its three siblings are P1 20/160%,
     so a <strong> in the copy cannot express it: the size is what changes.

     It is a SEPARATE class from `__subhead` above rather than a correction to
     it. That rule resolves `--mea-type-h4-size`, which is 20px, while its own
     comment describes a 24px sub-heading - so /mea-underwriting's two
     instances render 20/26 where that comment implies 24/31.2. Retokenising
     `__subhead` would move that page, which is not this one's to move; the
     discrepancy is flagged for its own pass. No record carries `__lead`
     before this one, so the rule changes no existing instance. */
}
.mea-text-split__right-paragraph .mea-text-split__lead {
  display: block;
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-semibold);
  font-size: var(--mea-type-h3-size, 24px);
  line-height: var(--mea-type-h3-lh, 1.3);
}
@media (max-width: 1023px) {
  .mea-text-split {
    padding-top: min(var(--mea-text-split-pt, 120px), 72px);
    padding-bottom: min(var(--mea-text-split-pb, 120px), 72px);
  }
  .mea-text-split__inner {
    flex-direction: column;
    gap: 40px;
  }
  .mea-text-split__left, .mea-text-split__right {
    flex-basis: auto;
    width: 100%;
  }
}
@media (max-width: 767px) {
  .mea-text-split {
    padding-top: min(var(--mea-text-split-pt, 120px), 56px);
    padding-bottom: min(var(--mea-text-split-pb, 120px), 56px);
  }
  .mea-text-split__inner {
    gap: 32px;
  }
  .mea-text-split__heading {
    font-size: 28px;
  }
}

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